/* Estilo de Fightlytic (index.html): layout, componentes, La Arena,
   Apuestas, tarjetas, etc. La paleta de color está aparte, en tema.css
   (la comparten index.html y comparar.html). Este archivo es solo de
   index.html — se separó del <style> inline para que cada ficha de
   peleador (que reusa este HTML) no lo arrastrara entero. */


    * { margin:0; padding:0; box-sizing:border-box; }

    /* El scroll lo maneja showSection(); sin esto, el ajuste automático del
       navegador (scroll anchoring) mueve la página cuando cargan fuente/3D */
    html { overflow-anchor:none; }

    body {
      background:radial-gradient(ellipse 90% 55% at 50% 0%, var(--panel-alto) 0%, rgba(var(--scrim), 0) 60%),
        var(--fondo);
      background-attachment:fixed;
      color:var(--texto);
      font-family:'Poppins', 'Segoe UI', sans-serif;
      -webkit-font-smoothing:antialiased;
    }

    /* NAV */
    nav {
      background:var(--panel-alto);
      border-bottom:3px solid var(--marca);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:16px 40px;
      position:sticky;
      top:0;
      z-index:100;
    }

    .logo {
      display:flex;
      align-items:center;
      text-decoration:none;
      flex-shrink:0;
    }

    .logo img {
      height:68px;
      width:136px;
      object-fit:cover;
      object-position:center;
      display:block;
    }

    nav > ul {
      list-style:none;
      display:flex;
      gap:28px;
    }

    nav ul li a {
      color:var(--texto-2);
      text-decoration:none;
      font-size:14px;
      letter-spacing:1px;
      text-transform:uppercase;
      transition:color 0.2s;
    }

    nav ul li a:hover,
    nav ul li a.active { color:var(--marca); }

    /* NAV DROPDOWN */
    .nav-dropdown { position:relative; }

    .nav-dropdown > a::after {
      content:' \25BE';
      font-size:10px;
    }

    .nav-dropdown-menu {
      display:none;
      position:absolute;
      top:100%;
      right:0;
      padding-top:16px; /* buffer invisible:sin esto el hover se corta en el hueco antes de llegar al menú */
      z-index: 101;
    }

    .nav-dropdown:hover .nav-dropdown-menu { display:block; }

    .nav-dropdown-list {
      background:var(--panel-alto);
      border:1px solid var(--borde);
      border-top:3px solid var(--marca);
      border-radius:6px;
      min-width:200px;
      padding:6px;
      list-style:none;
    }

    .nav-dropdown-list li a {
      display:block;
      padding:10px 12px;
      border-radius:4px;
      font-size:13px;
      white-space:nowrap;
    }

    .nav-dropdown-list li a:hover { background:var(--panel-2); }

    /* HERO */
    .hero {
      display:none;
      position:relative;
      overflow:hidden;
      background:linear-gradient(135deg, var(--fondo) 40%, var(--marca-tinte));
      text-align:center;
      padding:80px 20px 60px;
      border-bottom:1px solid var(--borde);
    }

    .hero.active { display:block; }

    /* Fondo 3D (Three.js) — detrás del texto, sin capturar clicks */
    .hero-3d {
      position:absolute;
      inset:0;
      opacity:0.42;
      pointer-events:none;
    }

    .hero-3d canvas {
      display:block;
      width:100%;
      height:100%;
    }

    .hero h1 {
      position:relative;
      z-index:1;
      font-size:52px;
      font-weight:800;
      letter-spacing:0;
      line-height:1.15;
      padding:4px 0;
    }

    .hero h1 span { color:var(--marca); }

    .hero p {
      position:relative;
      z-index:1;
      margin-top:14px;
      color:var(--texto-3);
      font-size:16px;
      letter-spacing:0;
    }

    /* SECTIONS */
    section {
      display:none;
      padding:60px 40px;
      max-width:1200px;
      margin:0 auto;
    }

    section.active {
      display:block;
      animation:sectionIn 0.18s ease;
    }

    @keyframes sectionIn {
      from { opacity:0; transform:translateY(8px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .section-title {
      font-size:24px;
      font-weight:700;
      letter-spacing:0;
      border-left:4px solid var(--marca);
      padding-left:14px;
      margin-bottom:36px;
    }

    /* EVENTS */
    .events-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr));
      gap:24px;
    }

    .event-card {
      background:var(--panel-alto);
      border:1px solid var(--borde);
      border-radius:12px;
      overflow:hidden;
      transition:transform 0.2s, border-color 0.2s;
      cursor:pointer;
    }

    .event-card:hover {
      transform:translateY(-4px);
      border-color:var(--marca);
    }

    .event-card-header {
      background:var(--fondo-hundido);
      padding:12px 18px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      border-bottom:1px solid var(--borde);
    }

    .event-card-header .event-type {
      font-size:11px;
      font-weight:700;
      letter-spacing:1px;
      text-transform:uppercase;
      color:var(--marca);
    }

    .event-card-header .event-date {
      font-size:12px;
      color:var(--texto-3);
    }

    .event-card-body { padding:18px; }

    .event-card-body h3 {
      font-size:18px;
      font-weight:700;
      margin-bottom:6px;
      letter-spacing:0;
    }

    .event-card-body .location {
      color:var(--texto-3);
      font-size:13px;
      margin-bottom:14px;
    }

    .main-event-label {
      font-size:10px;
      color:var(--marca);
      font-weight:700;
      letter-spacing:2px;
      text-transform:uppercase;
      margin-bottom:6px;
    }

    .main-event-fighters {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
    }

    .fighter-name-small {
      font-size:14px;
      font-weight:700;
    }

    .vs { color:var(--marca); font-weight:900; font-size:14px; }

    /* Rincones con foto en la tarjeta de evento */
    .event-fighter {
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
      flex:1;
      min-width:0;
      text-align:center;
    }

    /* La tarjeta define el tope real:la grilla es de 2 columnas también en
       mobile, donde cada tarjeta mide ~167px y entran dos fotos de ~56px con su
       "VS" en el medio. Por eso el tamaño va por consulta de contenedor y no por
       viewport: lo que manda es el ancho de la tarjeta, no el de la pantalla
       (la misma tarjeta angosta aparece en la portada y en la grilla ancha).
       Sin `width` fijo la columna (`flex:1; min-width:0`) colapsa y la foto se
       va a 24px, así que se fija por tramo. */
    .event-card { container-type:inline-size; }

    .event-fighter-photo {
      width:84px; height:84px;
      border-radius:50%;
      object-fit:cover;
      object-position:top;
      background:var(--panel-2);
    }

    @container (max-width:300px) {
      .event-fighter-photo { width:56px; height:56px; }
      .event-fighter-photo.placeholder { font-size:15px; }
    }

    .event-fighter-photo.placeholder {
      display:flex; align-items:center; justify-content:center;
      font-weight:800; font-size:22px; color:var(--texto-3);
    }

    .event-result {
      margin-top:12px;
      font-size:12px;
      font-weight:700;
      color:var(--ambar);
      border-top:1px solid var(--borde-sutil);
      padding-top:10px;
    }

    /* Cartelera dentro del modal de evento */
    .event-fight-row {
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:12px;
      padding:11px 0;
      border-bottom:1px solid var(--borde-sutil);
    }

    .event-fight-row.main { background:rgba(var(--marca-rgb), 0.05); }
    .ef-side { font-size:13px; font-weight:700; }
    .ef-side.win { color:var(--verde); }
    .ef-side.right { text-align:right; }
    .ef-mid { font-size:11px; color:var(--texto-4); text-align:center; white-space:nowrap; }
    .ef-mid .vs { font-size:11px; }
    .ef-tag {
      font-size:9px; color:var(--texto-tenue); text-transform:uppercase;
      letter-spacing:1px; text-align:center; grid-column:1 / -1;
      margin-top:-4px;
    }

    /* FIGHTERS */
    .fighters-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr));
      gap:20px;
    }

    .fighter-card {
      background:var(--panel-alto);
      border:1px solid var(--borde);
      border-radius:12px;
      padding:22px 16px 18px;
      text-align:center;
      transition:transform 0.2s, border-color 0.2s;
      cursor:pointer;
    }

    .fighter-card:hover {
      transform:translateY(-4px);
      border-color:var(--marca);
    }

    .fighter-avatar {
      width:68px;
      height:68px;
      border-radius:50%;
      background:var(--marca);
      color:var(--marca-texto);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:24px;
      font-weight:900;
      margin:0 auto 12px;
    }

    .fighter-card h3 {
      font-size:14px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:1px;
      margin-bottom:3px;
    }

    .fighter-nickname {
      font-size:11px;
      color:var(--marca);
      font-style:italic;
      margin-bottom:4px;
    }

    .fighter-division {
      font-size:10px;
      color:var(--texto-tenue);
      text-transform:uppercase;
      letter-spacing:1px;
      margin-bottom:12px;
    }

    .fighter-record {
      display:flex;
      justify-content:center;
      gap:12px;
      margin-bottom:14px;
    }

    .record-stat { text-align:center; }

    .record-stat .num {
      font-size:20px;
      font-weight:900;
    }

    .record-stat .label {
      font-size:9px;
      color:var(--texto-tenue);
      text-transform:uppercase;
    }

    .record-stat.wins .num   { color:var(--verde); }
    .record-stat.losses .num { color:var(--rojo); }
    .record-stat.draws .num  { color:var(--ambar); }

    /* Mini stat bars */
    .mini-stats {
      border-top:1px solid var(--borde-sutil);
      padding-top:12px;
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:6px;
    }

    .mini-stat { text-align:center; }
    .mini-stat .ms-val {
      font-size:14px;
      font-weight:800;
      color:var(--texto);
    }
    .mini-stat .ms-lbl {
      font-size:9px;
      color:var(--texto-tenue);
      text-transform:uppercase;
      letter-spacing:0.5px;
    }

    /* CHAMPION BADGE */
    .champion-badge {
      background:linear-gradient(135deg, var(--ambar-claro) 0%, var(--ambar-oscuro) 100%);
      color:var(--ambar-texto);
      font-size:9px;
      font-weight:800;
      letter-spacing:2px;
      text-transform:uppercase;
      padding:3px 10px;
      border-radius:999px;
      display:inline-block;
      margin-bottom:8px;
    }

    /* FOOTER */
    footer {
      background:var(--panel-alto);
      border-top:3px solid var(--marca);
      text-align:center;
      padding:24px;
      color:var(--texto-tenue);
      font-size:13px;
      letter-spacing:1px;
    }

    footer span { color:var(--marca); }

    /* MODAL */
    .modal-overlay {
      display:none;
      position:fixed;
      inset:0;
      background:rgba(var(--scrim), 0.85);
      z-index:200;
      align-items:center;
      justify-content:center;
    }

    .modal-overlay.open { display:flex; }

    .modal {
      background:var(--panel-alto);
      border:1px solid var(--borde-fuerte);
      border-top:4px solid var(--marca);
      border-radius:12px;
      padding:32px;
      max-width:680px;
      width:94%;
      position:relative;
      max-height:90vh;
      overflow-y:auto;
    }

    .modal-close {
      position:absolute;
      top:14px;
      right:18px;
      background:none;
      border:none;
      color:var(--texto-4);
      font-size:22px;
      cursor:pointer;
      transition:color 0.2s;
    }

    .modal-close:hover { color:var(--marca); }

    .modal h2 {
      font-size:22px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:2px;
      margin-bottom:4px;
    }

    .modal-nickname {
      color:var(--marca);
      font-style:italic;
      font-size:14px;
      margin-bottom:20px;
    }

    .modal-section-title {
      font-size:10px;
      letter-spacing:3px;
      text-transform:uppercase;
      color:var(--marca);
      font-weight:700;
      margin:20px 0 10px;
      border-bottom:1px solid var(--borde-sutil);
      padding-bottom:6px;
    }

    .modal-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:0;
    }

    .modal-stat-row {
      display:flex;
      justify-content:space-between;
      padding:9px 0;
      border-bottom:1px solid var(--borde-sutil);
      font-size:13px;
    }

    .modal-stat-row .label { color:var(--texto-tenue); }
    .modal-stat-row .value { font-weight:700; }

    .modal-grid .modal-stat-row {
      padding:9px 10px 9px 0;
    }

    .stat-big-grid {
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:12px;
      margin-top:4px;
    }

    .stat-big {
      background:var(--panel);
      border:1px solid var(--borde-sutil);
      border-radius:6px;
      padding:12px 8px;
      text-align:center;
    }

    .stat-big .sb-val {
      font-size:22px;
      font-weight:900;
      color:var(--marca);
    }

    .stat-big .sb-lbl {
      font-size:9px;
      color:var(--texto-tenue);
      text-transform:uppercase;
      letter-spacing:1px;
      margin-top:3px;
    }

    /* Search results grid */
    .search-results-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr));
      gap:14px;
      margin-top:20px;
    }

    /* FIGHTER LOOKUP */
    .lookup-box {
      background:var(--panel-alto);
      border:1px solid var(--borde);
      border-radius:12px;
      padding:28px;
      margin-bottom:32px;
    }

    .lookup-row {
      display:flex;
      gap:12px;
    }

    .lookup-input {
      flex:1;
      background:var(--fondo);
      border:1px solid var(--borde-fuerte);
      border-radius:6px;
      color:var(--texto);
      font-size:15px;
      padding:11px 16px;
      outline:none;
      transition:border-color 0.2s;
    }

    .lookup-input:focus { border-color:var(--marca); }
    .lookup-input::placeholder { color:var(--texto-tenue); }

    .lookup-btn {
      background:var(--marca);
      border:none;
      border-radius:999px;
      color:var(--marca-texto);
      cursor:pointer;
      font-size:13px;
      font-weight:700;
      letter-spacing:2px;
      padding:12px 30px;
      text-transform:uppercase;
      transition:background 0.2s, transform 0.15s;
      white-space:nowrap;
      box-shadow:0 4px 16px rgba(var(--marca-rgb), 0.32);
    }

    .lookup-btn:active { transform:scale(0.97); }

    .lookup-btn:hover { background:var(--marca); }
    .lookup-btn:disabled { background:var(--panel-3); cursor:not-allowed; }

    .lookup-hint {
      color:var(--texto-tenue);
      font-size:12px;
      margin-top:10px;
      letter-spacing:1px;
    }

    .lookup-result {
      margin-top:24px;
      display:none;
    }

    .lookup-result.visible { display:block; }

    .lookup-error {
      color:var(--marca);
      font-size:14px;
      padding:12px 0;
    }

    .result-header {
      display:flex;
      align-items:baseline;
      gap:16px;
      margin-bottom:16px;
      flex-wrap:wrap;
    }

    .result-name {
      font-size:26px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:2px;
    }

    .result-record {
      color:var(--marca);
      font-size:18px;
      font-weight:700;
    }

    .result-stats {
      display:flex;
      gap:24px;
      margin-bottom:20px;
      flex-wrap:wrap;
    }

    .result-stat { font-size:13px; color:var(--texto-3); }
    .result-stat span { color:var(--texto); font-weight:600; }

    .result-source {
      font-size:11px;
      color:var(--texto-tenue);
      margin-bottom:16px;
    }

    .result-source a { color:var(--texto-tenue); }

    .fight-table {
      width:100%;
      border-collapse:collapse;
    }

    .fight-table thead tr { border-bottom:2px solid var(--marca); }

    .fight-table th {
      font-size:10px;
      letter-spacing:2px;
      text-transform:uppercase;
      color:var(--texto-tenue);
      padding:8px 10px;
      text-align:left;
    }

    .fight-table tbody tr {
      border-bottom:1px solid var(--borde-sutil);
      transition:background 0.15s;
    }

    .fight-table tbody tr:hover { background:var(--panel-alto); }

    .fight-table td {
      padding:10px;
      font-size:14px;
    }

    .res-win  { color:var(--verde); font-weight:700; }
    .res-loss { color:var(--rojo); font-weight:700; }
    .res-draw, .res-nc { color:var(--ambar); font-weight:700; }

    .spinner {
      border:3px solid var(--borde);
      border-top-color:var(--marca);
      border-radius:50%;
      width:28px;
      height:28px;
      animation:spin 0.8s linear infinite;
      margin:20px 0;
    }

    @keyframes spin { to { transform:rotate(360deg); } }

    /* RANKINGS */
    .rankings-tabs {
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:28px;
    }

    .tab-btn {
      background:var(--panel-alto);
      border:1px solid var(--borde-fuerte);
      color:var(--texto-3);
      font-size:11px;
      font-weight:700;
      letter-spacing:1px;
      text-transform:uppercase;
      padding:8px 18px;
      border-radius:999px;
      cursor:pointer;
      transition:all 0.2s;
    }

    .tab-btn:hover { border-color:var(--marca); color:var(--texto); }
    .tab-btn.active {
      background:var(--marca);
      border-color:var(--marca);
      color:var(--marca-texto);
      box-shadow:0 4px 14px rgba(var(--marca-rgb), 0.34);
    }

    .tab-group-label {
      font-size:10px;
      color:var(--texto-tenue);
      letter-spacing:2px;
      text-transform:uppercase;
      padding:6px 0 2px;
      width:100%;
    }

    .rankings-table {
      width:100%;
      border-collapse:collapse;
    }

    .rankings-table thead tr {
      border-bottom:2px solid var(--marca);
    }

    .rankings-table th {
      font-size:10px;
      letter-spacing:2px;
      text-transform:uppercase;
      color:var(--texto-tenue);
      padding:8px 12px;
      text-align:left;
    }

    .rankings-table tbody tr {
      border-bottom:1px solid var(--borde-sutil);
      transition:background 0.15s;
    }

    .rankings-table tbody tr:hover { background:var(--panel-alto); }

    .rankings-table td {
      padding:12px;
      font-size:14px;
    }

    .rank-num {
      font-size:18px;
      font-weight:900;
      color:var(--texto-tenue);
      width:48px;
    }

    .rank-num.champ { color:var(--marca); font-size:11px; letter-spacing:1px; }

    .rank-name { font-weight:700; }

    .rank-record { color:var(--texto-4); font-size:13px; }

    .rank-country { color:var(--texto-tenue); font-size:12px; }
    .rank-flag { font-size:1.15em; letter-spacing:1px; vertical-align:-1px; }

    /* RANKINGS v3 — spot del campeón, oficial enriquecido y teórico Fightlytic */
    .rk-champ {
      position:relative; display:flex; align-items:stretch;
      border:1px solid var(--borde); border-radius:18px;
      margin-bottom:26px; overflow:hidden; cursor:pointer;
      background:
        radial-gradient(90% 130% at 100% 100%, rgba(var(--marca-rgb), 0.10), transparent 55%),
        linear-gradient(150deg, var(--panel-alto) 0%, var(--panel) 70%);
      transition:border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    }
    .rk-champ:hover {
      border-color:var(--ambar-oscuro); transform:translateY(-2px);
      box-shadow:0 18px 40px rgba(var(--scrim), 0.30);
    }
    /* filete dorado arriba: es lo que dice "acá hay un campeón" sin gritarlo */
    .rk-champ::before {
      content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
      background:linear-gradient(90deg, var(--ambar-claro), var(--ambar-oscuro) 45%, transparent 85%);
    }
    .rk-champ-info { flex:1; min-width:0; padding:24px 8px 22px 26px; position:relative; z-index:1; }
    .rk-champ-badge {
      display:inline-flex; align-items:center;
      font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
      color:var(--ambar-texto);
      background:linear-gradient(135deg, var(--ambar-claro), var(--ambar-oscuro));
      padding:5px 12px; border-radius:999px;
      box-shadow:0 4px 14px rgba(var(--ambar-rgb), 0.35);
    }
    .rk-champ-name {
      font-family:var(--kk-serif); font-size:clamp(30px, 4.2vw, 46px); font-weight:700;
      line-height:1.04; letter-spacing:-0.5px; margin-top:13px;
    }
    .rk-champ:hover .rk-champ-name { color:var(--marca); }
    .rk-champ-meta { margin-top:9px; color:var(--texto-3); font-size:14px; }
    .rk-champ-meta b { color:var(--texto-2); font-weight:700; }
    .rk-champ-line { display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
    .rk-form { display:inline-flex; gap:4px; }
    .rk-form i { width:9px; height:9px; border-radius:3px; background:var(--borde-fuerte); }
    .rk-form i.w { background:var(--verde); }
    .rk-form i.l { background:var(--rojo-vivo); }
    .rk-form i.d { background:var(--texto-tenue); }
    .rk-streak {
      font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
      color:var(--ambar); background:rgba(var(--ambar-rgb), 0.12);
      border:1px solid rgba(var(--ambar-rgb), 0.30);
      padding:3px 9px; border-radius:999px;
    }
    .rk-champ-stats { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
    .rk-stat {
      min-width:86px; padding:9px 13px; border-radius:12px;
      background:rgba(var(--velo), 0.04); border:1px solid var(--borde-sutil);
    }
    .rk-stat b { display:block; font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
    .rk-stat span {
      display:block; font-size:9.5px; font-weight:700; letter-spacing:1px;
      text-transform:uppercase; color:var(--texto-4); margin-top:2px;
    }
    .rk-champ-fig {
      width:250px; flex:none; position:relative;
      display:flex; align-items:flex-end; justify-content:center;
    }
    /* marca de agua: el nombre de la división en serif gigante detrás de la foto */
    .rk-champ-wm {
      position:absolute; right:-8px; bottom:-16px; z-index:0;
      font-family:var(--kk-serif); font-weight:700; font-size:96px; line-height:1;
      letter-spacing:-3px; text-transform:uppercase; white-space:nowrap;
      color:rgba(var(--velo), 0.05); pointer-events:none; user-select:none;
    }
    .rk-champ-fig > img {
      position:relative; z-index:1; width:100%; max-height:300px;
      object-fit:contain; object-position:bottom center;
      filter:drop-shadow(0 14px 28px rgba(var(--scrim), 0.40));
    }
    .rk-champ-head {          /* fallback cuando no hay foto de cuerpo entero */
      position:relative; z-index:1; width:150px; height:150px; margin-bottom:26px;
      border-radius:50%; overflow:hidden; border:2px solid var(--borde-fuerte);
      background:var(--panel-2); display:flex; align-items:center; justify-content:center;
    }
    .rk-champ-head img { width:100%; height:100%; object-fit:cover; object-position:top center; }
    .rk-champ-head .ini { font-size:44px; font-weight:800; color:var(--texto-4); }

    .rk-list {
      border:1px solid var(--borde-sutil); border-radius:14px;
      overflow:hidden; background:var(--panel);
    }
    .rk-row {
      display:flex; align-items:center; gap:13px; padding:10px 16px; cursor:pointer;
      border-bottom:1px solid var(--borde-sutil); transition:background 0.15s;
    }
    .rk-row:last-child { border-bottom:none; }
    .rk-row:hover { background:var(--panel-2); }
    .rk-num {
      width:26px; flex:none; text-align:center; font-size:15px; font-weight:800;
      color:var(--texto-tenue); font-variant-numeric:tabular-nums;
    }
    .rk-row.top3 .rk-num { color:var(--marca); }
    .rk-ava {
      width:42px; height:42px; flex:none; border-radius:50%; overflow:hidden;
      background:var(--panel-2); border:1px solid var(--borde);
      display:flex; align-items:center; justify-content:center;
    }
    .rk-ava img { width:100%; height:100%; object-fit:cover; object-position:top center; }
    .rk-ava .ini { font-size:14px; font-weight:700; color:var(--texto-4); }
    .rk-info { flex:1; min-width:0; }
    .rk-name { font-weight:700; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .rk-meta { color:var(--texto-4); font-size:12px; margin-top:1px; }
    .rk-side { flex:none; display:flex; align-items:center; gap:10px; }
    .rk-side .rk-form i { width:7px; height:7px; }

    /* Ranking teórico: acento violeta para que se lea como NUESTRO, no oficial */
    .rk-teo {
      margin-top:28px; border:1px solid rgba(var(--violeta-rgb), 0.30); border-radius:16px;
      background:
        radial-gradient(80% 120% at 0% 0%, rgba(var(--violeta-rgb), 0.08), transparent 55%),
        var(--panel);
      padding:18px 18px 8px;
    }
    .rk-teo-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
    .rk-teo-tag {
      font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
      color:var(--violeta); background:rgba(var(--violeta-rgb), 0.12);
      border:1px solid rgba(var(--violeta-rgb), 0.30);
      padding:4px 10px; border-radius:999px;
    }
    .rk-teo-title { font-family:var(--kk-serif); font-size:20px; font-weight:700; }
    .rk-teo-sub { color:var(--texto-3); font-size:12.5px; margin-top:8px; line-height:1.5; max-width:640px; }
    .rk-teo-list { margin-top:14px; }
    .rk-teo .rk-row { border-radius:10px; border-bottom:none; padding:9px 10px; }
    .rk-teo .rk-num { color:var(--violeta); font-size:13px; width:32px; }
    .rk-elo {
      font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums;
      color:var(--violeta); background:rgba(var(--violeta-rgb), 0.12);
      padding:3px 9px; border-radius:8px;
    }

    @media (max-width:640px) {
      .rk-champ { flex-direction:column; }
      .rk-champ-info { padding:20px 18px 0; }
      .rk-champ-fig { width:100%; margin-top:6px; }
      .rk-champ-fig > img { max-height:240px; }
      .rk-champ-wm { font-size:64px; bottom:-10px; }
      .rk-side .rk-form { display:none; }   /* en angosto, la forma no entra */
      .rk-teo .rk-side .rk-form { display:none; }
    }

    /* HACIENDO RUIDO / PROSPECTOS — cards con razón */
    /* PROSPECTOS EN ALZA */
    .prospects-sub {
      color:var(--k-dim); font-size:14px; max-width:640px;
      margin:-14px 0 26px; line-height:1.5;
    }
    .prospect-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr));
      gap:16px;
    }
    .prospect-card {
      background:var(--k-card);
      border:1px solid var(--k-border);
      border-radius:16px;
      padding:18px;
      cursor:pointer;
      transition:border-color 0.18s, transform 0.15s, background 0.18s;
      display:flex; flex-direction:column; gap:12px;
    }
    .prospect-card:hover { border-color:var(--k-border-hi); background:var(--k-card-2); transform:translateY(-2px); }
    .prospect-head { display:flex; align-items:center; gap:14px; }
    .prospect-ava {
      width:64px; height:64px; flex:none;
      border-radius:50%; overflow:hidden;
      background:var(--k-card-2); border:1px solid var(--k-border-hi);
      display:flex; align-items:center; justify-content:center;
    }
    .prospect-ava img { width:100%; height:100%; object-fit:cover; object-position:top center; }
    .prospect-ava .ini { font-size:20px; font-weight:700; color:var(--k-dim); }
    .prospect-id { min-width:0; }
    .prospect-name { font-weight:800; font-size:17px; }
    .prospect-card:hover .prospect-name { color:var(--k-marca); }
    .prospect-nick { color:var(--k-marca); font-size:12px; font-style:italic; margin-top:1px; }
    .prospect-meta { color:var(--k-dim); font-size:12.5px; margin-top:3px; }
    .prospect-blurb {
      color:var(--texto-2); font-size:13.5px; line-height:1.55; margin:0;
      border-left:3px solid var(--k-marca-suave); padding-left:12px;
    }
    .buzz-reasons { display:flex; flex-wrap:wrap; gap:6px; }
    .buzz-reason {
      display:inline-flex; align-items:center; gap:4px;
      font-size:11px; font-weight:700; letter-spacing:0.3px;
      padding:3px 9px; border-radius:999px;
    }
    .buzz-reason.news   { color:var(--k-marca); background:var(--k-marca-suave); }
    .buzz-reason.finish { color:var(--ambar);      background:rgba(var(--ambar-rgb), 0.12); }
    .buzz-reason.streak { color:var(--verde);      background:rgba(var(--verde-rgb), 0.12); }
    .buzz-reason.next   { color:var(--azul);      background:rgba(var(--azul-rgb), 0.12); }
    .buzz-empty { color:var(--k-dim); font-size:13px; padding:8px 2px; }

    /* MODAL BARRAS DE PROGRESO */
    .modal-progress-bar { margin-bottom:10px; }
    .modal-progress-bar:last-of-type { margin-bottom:0; }

    .modal-progress-header {
      display:flex;
      justify-content:space-between;
      align-items:baseline;
      margin-bottom:5px;
    }

    .modal-progress-label {
      font-size:11px;
      color:var(--texto-tenue);
      text-transform:uppercase;
      letter-spacing:1px;
    }

    .modal-progress-value { font-size:12px; font-weight:700; }

    .modal-progress-value.nd { font-style:italic; color:var(--texto-tenue); font-weight:400; }

    .modal-progress-track {
      background:var(--panel-2);
      border-radius:4px;
      height:8px;
      overflow:hidden;
    }

    .modal-progress-fill {
      height:100%;
      border-radius:4px;
      background:var(--marca);
    }

    /* MODAL BARRA APILADA DE VICTORIAS */
    .modal-win-bar {
      display:flex;
      height:22px;
      border-radius:4px;
      overflow:hidden;
      margin-top:8px;
    }

    .modal-win-segment { height:100%; }
    .win-ko  { background:var(--rojo); }
    .win-sub { background:var(--azul); }
    .win-dec { background:var(--panel-3); }

    .modal-win-legend {
      display:flex;
      gap:16px;
      flex-wrap:wrap;
      margin-top:10px;
    }

    .modal-win-legend-item {
      display:flex;
      align-items:center;
      gap:6px;
      font-size:11px;
      color:var(--texto-3);
    }

    .modal-win-legend-dot {
      width:8px;
      height:8px;
      border-radius:50%;
      flex-shrink:0;
    }

    .modal-win-legend-item strong { color:var(--texto); font-size:12px; }

    /* ══════════ LA ARENA ══════════ */

    /* Perfil */
    .arena-profile {
      background:var(--panel-alto);
      border:1px solid var(--borde);
      border-radius:12px;
      padding:22px 24px;
      margin-bottom:26px;
      display:flex;
      align-items:center;
      gap:24px;
      flex-wrap:wrap;
    }

    .belt-chip {
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-weight:700;
      font-size:14px;
    }

    .belt-band {
      width:54px;
      height:16px;
      border-radius:4px;
      border:1px solid rgba(var(--velo), 0.18);
      flex-shrink:0;
    }

    .arena-profile-progress { flex:1; min-width:220px; }

    .arena-xp-row {
      display:flex;
      justify-content:space-between;
      font-size:12px;
      color:var(--texto-3);
      margin-bottom:6px;
    }

    .arena-xp-row strong { color:var(--texto); }

    .arena-xp-track {
      background:var(--panel-2);
      border-radius:999px;
      height:10px;
      overflow:hidden;
    }

    .arena-xp-fill {
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, var(--marca), var(--ambar));
      transition:width 0.4s ease;
    }

    .arena-profile-stats {
      display:flex;
      gap:22px;
      flex-wrap:wrap;
    }

    .arena-pstat { text-align:center; }
    .arena-pstat .val { font-size:18px; font-weight:800; }
    .arena-pstat .val.flame { color:var(--ambar); }
    .arena-pstat .lbl { font-size:10px; color:var(--texto-4); }

    /* Tabs de juegos */
    .arena-tabs { display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; }

    .arena-game { display:none; }
    .arena-game.active { display:block; animation:sectionIn 0.18s ease; }

    .arena-panel {
      background:var(--panel-alto);
      border:1px solid var(--borde);
      border-radius:12px;
      padding:26px;
    }

    /* Duelo de stats */
    .duel-question {
      text-align:center;
      font-size:19px;
      font-weight:700;
      margin-bottom:22px;
    }

    .duel-cards {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
      max-width:720px;
      margin:0 auto;
    }

    .duel-card {
      background:var(--panel);
      border:1px solid var(--borde);
      border-radius:12px;
      padding:20px 16px;
      text-align:center;
      cursor:pointer;
      transition:transform 0.15s, border-color 0.15s;
    }

    .duel-card:hover { transform:translateY(-3px); border-color:var(--marca); }
    .duel-card.locked { cursor:default; }
    .duel-card.locked:hover { transform:none; }
    .duel-card.correct { border-color:var(--verde); box-shadow:0 0 18px rgba(var(--verde-rgb), 0.25); }
    .duel-card.wrong { border-color:var(--rojo); opacity:0.65; }

    .duel-card .duel-name { font-size:16px; font-weight:700; margin-bottom:4px; }
    .duel-card .duel-record { font-size:12px; color:var(--texto-3); margin-bottom:10px; }
    .duel-card .duel-mini { font-size:11px; color:var(--texto-4); }

    .duel-value {
      font-size:26px;
      font-weight:800;
      margin-top:12px;
      min-height:32px;
    }

    .duel-value.reveal-correct { color:var(--verde); }
    .duel-value.reveal-wrong { color:var(--rojo); }

    .duel-feedback {
      text-align:center;
      min-height:26px;
      margin-top:18px;
      font-weight:700;
      font-size:15px;
    }

    .duel-feedback .xp-gain { color:var(--ambar); }

    .duel-meta {
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-top:14px;
      min-height:44px;
    }

    #duel-streak-label { font-size:13px; color:var(--texto-3); }
    #duel-streak-label strong { color:var(--ambar); }

    .arena-next-btn { font-size:12px; padding:10px 22px; }

    /* Avatar circular en cards de juego (duelo / sube-o-baja) */
    .duel-avatar {
      width:74px; height:74px;
      border-radius:50%;
      object-fit:cover; object-position:top;
      background:var(--panel-2);
      border:2px solid var(--borde);
      margin:0 auto 10px;
      display:block;
    }
    .duel-avatar.ph {
      display:flex; align-items:center; justify-content:center;
      font-size:22px; font-weight:800; color:var(--texto-tenue);
    }

    /* ── Sube o Baja ── */
    .hilo-head { text-align:center; }
    .hilo-meta {
      display:flex; justify-content:center; gap:14px; align-items:center;
      margin-bottom:20px; font-size:13px; color:var(--texto-3);
    }
    .hilo-chain-chip {
      background:var(--panel-2); border:1px solid var(--borde); border-radius:99px;
      padding:4px 14px;
    }
    .hilo-chain-chip strong { color:var(--ambar); }

    .hilo-stage {
      display:grid; grid-template-columns:1fr auto 1fr;
      gap:14px; align-items:stretch; max-width:720px; margin:0 auto;
    }
    .hilo-card {
      background:var(--panel); border:1px solid var(--borde); border-radius:12px;
      padding:20px 16px; text-align:center;
      animation:hiloIn 0.28s ease;
    }
    @keyframes hiloIn { from { opacity:0; transform:translateX(26px); } to { opacity:1; transform:none; } }
    .hilo-card .duel-name { font-size:16px; font-weight:700; margin-bottom:2px; }
    .hilo-card .duel-record { font-size:12px; color:var(--texto-3); margin-bottom:8px; }
    .hilo-card.correct { border-color:var(--verde); box-shadow:0 0 18px rgba(var(--verde-rgb), 0.25); }
    .hilo-card.wrong { border-color:var(--rojo); box-shadow:0 0 18px rgba(var(--rojo-rgb), 0.2); }
    .hilo-vs { align-self:center; color:var(--texto-tenue); font-weight:800; font-size:13px; }
    .hilo-value { font-size:28px; font-weight:800; color:var(--ambar); min-height:34px; }
    .hilo-value .suffix { font-size:15px; color:var(--texto-3); }

    .hilo-btns { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
    .hilo-btn {
      background:var(--panel-2); border:1px solid var(--borde-fuerte); border-radius:8px;
      color:var(--texto); font-family:inherit; font-size:13px; font-weight:700;
      padding:10px 12px; cursor:pointer; transition:border-color 0.15s, transform 0.12s;
    }
    .hilo-btn:hover { border-color:var(--marca); transform:translateY(-1px); }
    .hilo-btn .arrow { font-size:15px; }
    .hilo-btn.mas .arrow { color:var(--verde); }
    .hilo-btn.menos .arrow { color:var(--rojo); }

    .hilo-over {
      text-align:center; padding:30px 0;
      animation:sectionIn 0.25s ease;
    }
    .hilo-over .big { font-size:42px; display:block; margin-bottom:8px; }
    .hilo-over h3 { font-size:20px; margin-bottom:6px; }
    .hilo-over p { color:var(--texto-3); font-size:14px; margin-bottom:18px; }
    .hilo-over .xp-gain { color:var(--ambar); font-weight:800; }

    @media (max-width:640px) {
      .hilo-stage { grid-template-columns:1fr; }
      .hilo-vs { justify-self:center; }
    }

    /* ── ¿Quién es? ── */
    .faces-intro { text-align:center; padding:26px 0; }
    .faces-intro .big { font-size:44px; display:block; margin-bottom:10px; }
    .faces-intro h3 { font-size:20px; margin-bottom:8px; }
    .faces-intro p { color:var(--texto-3); font-size:14px; max-width:460px; margin:0 auto 20px; }
    .faces-intro .faces-best { color:var(--ambar); font-weight:700; }

    .faces-hud {
      display:flex; justify-content:space-between; align-items:center;
      max-width:460px; margin:0 auto 12px; font-size:13px; color:var(--texto-3);
    }
    .faces-hud strong { color:var(--ambar); }

    .faces-timer {
      max-width:460px; margin:0 auto 16px;
      height:6px; background:rgba(var(--velo), 0.08); border-radius:99px; overflow:hidden;
    }
    .faces-timer-fill {
      height:100%; width:100%;
      background:linear-gradient(90deg, var(--marca), var(--ambar));
      border-radius:99px;
      transform-origin:left;
    }

    .faces-photo-wrap {
      width:210px; height:210px; margin:0 auto 18px;
      border-radius:14px; overflow:hidden;
      background:radial-gradient(circle at 50% 30%, var(--panel-3), var(--panel));
      border:1px solid var(--borde);
      animation:hiloIn 0.25s ease;
    }
    .faces-photo-wrap img {
      width:100%; height:100%; object-fit:cover; object-position:top;
    }

    .faces-options {
      display:grid; grid-template-columns:1fr 1fr; gap:10px;
      max-width:460px; margin:0 auto;
    }
    .faces-opt {
      background:var(--panel); border:1px solid var(--borde-fuerte); border-radius:8px;
      color:var(--texto); font-family:inherit; font-size:13px; font-weight:600;
      padding:12px 10px; cursor:pointer; transition:border-color 0.15s, transform 0.12s;
    }
    .faces-opt:hover { border-color:var(--marca); transform:translateY(-1px); }
    .faces-opt.correct { border-color:var(--verde); background:rgba(var(--verde-rgb), 0.12); }
    .faces-opt.wrong { border-color:var(--rojo); background:rgba(var(--rojo-rgb), 0.1); opacity:0.7; }
    .faces-opt:disabled { cursor:default; }

    .faces-summary { text-align:center; padding:26px 0; animation:sectionIn 0.25s ease; }
    .faces-summary .big { font-size:44px; display:block; margin-bottom:8px; }
    .faces-summary h3 { font-size:22px; margin-bottom:4px; }
    .faces-summary p { color:var(--texto-3); font-size:14px; margin-bottom:16px; }
    .faces-summary .xp-gain { color:var(--ambar); font-weight:800; }

    @media (max-width:640px) {
      .faces-options { grid-template-columns:1fr; }
    }

    /* Simulador */
    .sim-intro { color:var(--texto-3); font-size:14px; margin-bottom:22px; max-width:640px; }
    .sim-intro strong { color:var(--ambar); }

    .sim-selectors { display:flex; gap:18px; align-items:flex-start; }
    .sim-selector { flex:1; min-width:0; }

    .sim-selector-label {
      font-size:11px;
      font-weight:800;
      letter-spacing:1px;
      text-transform:uppercase;
      margin-bottom:8px;
    }

    .sim-selector-label.label-a { color:var(--azul); }
    .sim-selector-label.label-b { color:var(--rojo); }

    .sim-vs { align-self:center; color:var(--texto-tenue); font-weight:800; font-size:13px; margin-top:20px; }

    .sim-search { position:relative; }

    .sim-input {
      width:100%;
      background:var(--panel);
      border:1px solid var(--borde-fuerte);
      border-radius:8px;
      color:var(--texto);
      font-family:inherit;
      font-size:13px;
      padding:10px 14px;
      outline:none;
    }

    .sim-input:focus { border-color:var(--marca); }

    .sim-suggestions {
      display:none;
      position:absolute;
      top:calc(100% + 6px);
      left:0; right:0;
      background:var(--panel-alto);
      border:1px solid var(--borde);
      border-radius:8px;
      max-height:200px;
      overflow-y:auto;
      z-index:50;
    }

    .sim-suggestions.open { display:block; }

    .sim-suggestion-item {
      padding:9px 13px;
      font-size:13px;
      cursor:pointer;
      border-bottom:1px solid var(--borde-sutil);
    }

    .sim-suggestion-item:last-child { border-bottom:none; }
    .sim-suggestion-item:hover { background:var(--panel-2); }
    .sim-suggestion-empty { padding:9px 13px; font-size:12px; color:var(--texto-tenue); }

    .sim-chosen {
      display:none;
      align-items:center;
      gap:10px;
      background:var(--panel);
      border:1px solid var(--borde);
      border-radius:10px;
      padding:12px;
      margin-top:10px;
    }

    .sim-chosen .avatar {
      width:40px; height:40px;
      border-radius:50%;
      background:var(--marca);
      color:var(--marca-texto);
      display:flex; align-items:center; justify-content:center;
      font-weight:800; font-size:13px;
      flex-shrink:0;
    }

    .sim-chosen.slot-a .avatar { background:var(--azul); }

    .sim-chosen .info { flex:1; min-width:0; }
    .sim-chosen .name { font-weight:700; font-size:13px; }
    .sim-chosen .sub { font-size:11px; color:var(--texto-4); margin-top:1px; }

    .sim-chosen .odds {
      font-size:16px;
      font-weight:800;
      color:var(--ambar);
      flex-shrink:0;
      text-align:center;
    }

    .sim-chosen .odds-src {
      font-size:8px;
      font-weight:600;
      letter-spacing:0.5px;
      text-transform:uppercase;
      color:var(--texto-4);
    }

    .sim-chosen .clear {
      background:none; border:none;
      color:var(--texto-4); font-size:18px; cursor:pointer;
      flex-shrink:0;
    }

    .sim-chosen .clear:hover { color:var(--marca); }

    .sim-underdog-tag {
      display:inline-block;
      background:linear-gradient(135deg, var(--ambar), var(--ambar));
      color:var(--ambar);
      font-size:9px;
      font-weight:800;
      letter-spacing:1px;
      text-transform:uppercase;
      padding:2px 8px;
      border-radius:999px;
      margin-left:6px;
      vertical-align:2px;
    }

    /* Predicción */
    .sim-prediction {
      margin-top:24px;
      border-top:1px solid var(--borde-sutil);
      padding-top:20px;
    }

    .sim-pred-title { font-size:14px; font-weight:700; margin-bottom:14px; }

    .sim-pred-group { margin-bottom:14px; }

    .sim-pred-label { font-size:11px; color:var(--texto-3); margin-bottom:8px; }

    .sim-pill-row { display:flex; gap:8px; flex-wrap:wrap; }

    .sim-pill {
      background:var(--panel);
      border:1px solid var(--borde-fuerte);
      color:var(--texto-3);
      font-family:inherit;
      font-size:12px;
      font-weight:700;
      padding:8px 18px;
      border-radius:999px;
      cursor:pointer;
      transition:all 0.15s;
    }

    .sim-pill:hover { border-color:var(--marca); color:var(--texto); }
    .sim-pill.selected {
      background:var(--marca);
      border-color:var(--marca);
      color:var(--marca-texto);
      box-shadow:0 4px 14px rgba(var(--marca-rgb), 0.34);
    }

    .sim-pill:disabled { opacity:0.35; cursor:not-allowed; }

    .sim-fight-btn { margin-top:8px; }
    .sim-fight-btn:disabled { background:var(--panel-3); box-shadow:none; cursor:not-allowed; }

    /* Narración */
    .sim-feed {
      margin-top:22px;
      background:var(--fondo-hundido);
      border:1px solid var(--borde-sutil);
      border-radius:10px;
      padding:18px 20px;
      font-size:13.5px;
      line-height:1.7;
      color:var(--texto-2);
    }

    .sim-feed .feed-line { opacity:0; animation:feedIn 0.35s ease forwards; }
    .sim-feed .feed-line.round-header { color:var(--marca); font-weight:700; margin-top:8px; }
    .sim-feed .feed-line.round-header:first-child { margin-top:0; }
    .sim-feed .feed-line.finish { color:var(--texto); font-weight:700; }

    @keyframes feedIn {
      from { opacity:0; transform:translateY(5px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* Resultado */
    .sim-result { margin-top:18px; }

    .sim-result-card {
      border-radius:12px;
      padding:20px 22px;
      border:1px solid var(--borde);
      background:var(--panel);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }

    .sim-result-card.win { border-color:rgba(var(--verde-rgb), 0.5); }
    .sim-result-card.lose { border-color:rgba(var(--rojo-rgb), 0.5); }

    .sim-result-main { font-size:15px; font-weight:700; }
    .sim-result-detail { font-size:12px; color:var(--texto-3); margin-top:4px; }

    .sim-result-xp {
      font-size:24px;
      font-weight:800;
      color:var(--ambar);
      white-space:nowrap;
    }

    /* Logros */
    .badges-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr));
      gap:16px;
    }

    .badge-card {
      background:var(--panel-alto);
      border:1px solid var(--borde);
      border-radius:12px;
      padding:18px;
      display:flex;
      gap:14px;
      align-items:center;
      opacity:0.45;
      filter:grayscale(0.9);
      transition:opacity 0.2s;
    }

    .badge-card.unlocked {
      opacity:1;
      filter:none;
      border-color:rgba(var(--ambar-rgb), 0.55);
    }

    .badge-icon {
      width:44px; height:44px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--ambar), var(--ambar));
      display:flex; align-items:center; justify-content:center;
      font-size:20px;
      flex-shrink:0;
    }

    .badge-info .badge-name { font-size:13px; font-weight:700; }
    .badge-info .badge-desc { font-size:11px; color:var(--texto-3); margin-top:2px; }

    .arena-reset-row { margin-top:22px; text-align:center; }
    .arena-reset-row a { color:var(--texto-tenue); font-size:12px; }
    .arena-reset-row a:hover { color:var(--marca); }

    /* Fotos de peleadores (API-Sports) */
    .fighter-photo {
      width:68px;
      height:68px;
      border-radius:50%;
      object-fit:cover;
      object-position:top;
      display:block;
      margin:0 auto 12px;
      background:var(--panel-2);
    }

    .modal-photo {
      width:84px;
      height:84px;
      border-radius:50%;
      object-fit:cover;
      object-position:top;
      float:right;
      margin-left:12px;
      background:var(--panel-2);
    }

    /* Perfil Oculto */
    .mystery-hint {
      background:var(--panel);
      border:1px solid var(--borde);
      border-radius:8px;
      padding:9px 14px;
      font-size:13px;
      color:var(--texto-2);
      margin-bottom:8px;
      animation:sectionIn 0.2s ease;
    }

    .mystery-hints { max-width:480px; margin:18px auto 0; }

    .mystery-attempts {
      text-align:center;
      font-size:14px;
      color:var(--texto-3);
      letter-spacing:4px;
      margin-top:12px;
    }

    .mystery-controls { margin-top:18px; }
    .mystery-result { margin-top:18px; }

    /* Revancha Histórica */
    .rematch-stat-row {
      display:flex;
      justify-content:space-between;
      font-size:12px;
      padding:4px 0;
      border-bottom:1px solid var(--borde-sutil);
    }

    .rematch-stat-row .lbl { color:var(--texto-4); }
    .rematch-stat-row .val { font-weight:700; }

    .rematch-meta {
      text-align:center;
      color:var(--texto-tenue);
      font-size:12px;
      margin:14px 0;
    }

    /* Mi Gimnasio */
    .gym-header {
      display:flex;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:16px;
    }

    .gym-week { font-size:13px; color:var(--texto-3); }
    .gym-budget { font-size:15px; font-weight:800; }
    .gym-budget.over { color:var(--rojo); }

    .gym-pool {
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(min(100%, 180px), 1fr));
      gap:10px;
    }

    .gym-card {
      background:var(--panel);
      border:1px solid var(--borde);
      border-radius:10px;
      padding:12px;
      cursor:pointer;
      transition:border-color 0.15s, transform 0.15s;
      position:relative;
    }

    .gym-card:hover { border-color:var(--borde-fuerte); transform:translateY(-2px); }
    .gym-card.selected { border-color:var(--ambar); box-shadow:0 0 14px rgba(var(--ambar-rgb), 0.25); }
    .gym-card.disabled { opacity:0.45; cursor:not-allowed; }

    .gym-card .g-name { font-size:13px; font-weight:700; padding-right:44px; }
    .gym-card .g-rec { font-size:11px; color:var(--texto-4); margin:2px 0 6px; }
    .gym-card .g-mini { font-size:10px; color:var(--texto-3); }

    .price-chip {
      position:absolute;
      top:10px;
      right:10px;
      background:linear-gradient(135deg, var(--ambar), var(--ambar));
      color:var(--ambar);
      font-size:11px;
      font-weight:800;
      padding:2px 8px;
      border-radius:999px;
    }

    .gym-actions {
      margin-top:16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:10px;
    }

    .gym-results { margin-top:18px; }

    .gym-bout {
      font-size:13px;
      padding:7px 0;
      border-bottom:1px solid var(--borde-sutil);
      color:var(--texto-2);
    }

    .gym-bout strong { color:var(--texto); }
    .gym-bout .pts { float:right; font-weight:800; }
    .gym-bout .pts.win { color:var(--verde); }
    .gym-bout .pts.loss { color:var(--rojo); }

    .gym-standings { margin-top:16px; }

    .gym-standing-row {
      display:flex;
      justify-content:space-between;
      padding:8px 12px;
      border-radius:8px;
      font-size:13px;
      margin-bottom:4px;
      background:var(--panel);
      border:1px solid var(--borde-sutil);
    }

    .gym-standing-row.me { border-color:rgba(var(--ambar-rgb), 0.55); font-weight:700; }

    /* Cartelera:predicciones reales */
    .picks-event-title { font-size:18px; font-weight:700; }
    .picks-event-sub { font-size:12px; color:var(--texto-3); margin:2px 0 4px; }
    .picks-intro { font-size:13px; color:var(--texto-3); margin-bottom:18px; }

    .pick-fight {
      background:var(--panel);
      border:1px solid var(--borde);
      border-radius:12px;
      padding:12px;
      margin-bottom:10px;
    }

    .pick-fight.main { border-color:rgba(var(--marca-rgb), 0.4); }
    .pick-fight-wc {
      font-size:9px; color:var(--texto-4); text-transform:uppercase;
      letter-spacing:1px; text-align:center; margin-bottom:8px;
    }
    .pick-fight-wc .main-tag { color:var(--marca); font-weight:700; }

    .pick-row {
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:10px;
    }

    .pick-side {
      display:flex;
      align-items:center;
      gap:9px;
      background:var(--fondo-hundido);
      border:1px solid var(--borde);
      border-radius:10px;
      padding:9px 11px;
      cursor:pointer;
      transition:border-color 0.15s, background 0.15s;
      min-width:0;
    }

    .pick-side.right { flex-direction:row-reverse; text-align:right; }
    .pick-side:hover { border-color:var(--borde-fuerte); }
    .pick-side.picked { border-color:var(--ambar); background:rgba(var(--ambar-rgb), 0.08); }
    .pick-side.correct { border-color:var(--verde); background:rgba(var(--verde-rgb), 0.1); }
    .pick-side.incorrect { opacity:0.5; }

    .pick-side img, .pick-side .ph {
      width:34px; height:34px; border-radius:50%;
      object-fit:cover; object-position:top; background:var(--panel-2); flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-size:11px; font-weight:800; color:var(--texto-3);
    }

    .pick-side .pinfo { min-width:0; }
    .pick-side .pname { font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pick-side .podds { font-size:11px; color:var(--ambar); font-weight:700; }
    .pick-side .podds .tag-underdog { color:var(--ambar); }
    .pick-vs { font-size:11px; color:var(--texto-tenue); font-weight:800; }

    .pick-status { text-align:center; font-size:11px; margin-top:8px; }
    .pick-status.pending { color:var(--texto-3); }
    .pick-status.won { color:var(--verde); font-weight:700; }
    .pick-status.lost { color:var(--rojo); }

    .picks-summary {
      text-align:center; font-size:13px; color:var(--texto-3);
      margin-top:16px; padding-top:14px; border-top:1px solid var(--borde-sutil);
    }

    /* Toast de subida de cinturón */
    .belt-toast {
      position:fixed;
      bottom:28px;
      left:50%;
      transform:translateX(-50%) translateY(20px);
      background:var(--panel-alto);
      border:1px solid rgba(var(--ambar-rgb), 0.6);
      border-radius:999px;
      padding:12px 26px;
      font-size:14px;
      font-weight:700;
      z-index:300;
      opacity:0;
      transition:opacity 0.3s, transform 0.3s;
      box-shadow:0 8px 30px rgba(var(--scrim), 0.5);
      pointer-events:none;
    }

    .belt-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

    @media (max-width:700px) {
      .duel-cards { grid-template-columns:1fr; }
      .sim-selectors { flex-direction:column; }
      .sim-vs { display:none; }
      .arena-profile { flex-direction:column; align-items:stretch; }
    }
    /* ═══════════════════════════════════════════════════════════════
       APPLE REDESIGN LAYER — override por cascada sobre el tema original.
       Para revertir:borrar este bloque, o restaurar index-backup-original.html
       ═══════════════════════════════════════════════════════════════ */

    :root {
      --ap-bg: var(--fondo);
      /* Superficies por velo y no por color fijo: así el panel se aclara sobre
         el fondo sea cual sea el tema, sin repetir la paleta acá. */
      --ap-surface: rgba(var(--velo), 0.055);
      --ap-surface-2: rgba(var(--velo), 0.09);
      --ap-border: rgba(var(--velo), 0.10);
      --ap-border-hi: rgba(var(--velo), 0.22);
      --ap-text: var(--texto);
      --ap-text-2: var(--texto-3);
      --ap-marca: var(--marca-vivo);
      --ap-grad: linear-gradient(100deg, var(--marca-vivo) 0%, var(--rosa) 45%, var(--magenta) 100%);
      --ap-ease: cubic-bezier(0.28, 0, 0.24, 1);
      --ap-radius: 20px;
      --ap-shadow: 0 24px 48px rgba(var(--scrim), 0.55);
    }

    body {
      background:radial-gradient(ellipse 70% 40% at 50% -5%, rgba(var(--marca-vivo-rgb), 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 85% 110%, rgba(var(--magenta-rgb), 0.07) 0%, transparent 60%),
        var(--ap-bg);
      background-attachment:fixed;
      color:var(--ap-text);
      font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Poppins', 'Segoe UI', sans-serif;
      letter-spacing:-0.01em;
    }

    ::selection { background:rgba(var(--marca-vivo-rgb), 0.35); color:var(--texto); }

    ::-webkit-scrollbar { width:10px; }
    ::-webkit-scrollbar-track { background:transparent; }
    ::-webkit-scrollbar-thumb { background:rgba(var(--velo), 0.14); border-radius:99px; border:2px solid var(--borde-sutil); }
    ::-webkit-scrollbar-thumb:hover { background:rgba(var(--velo), 0.25); }

    button, input { font-family:inherit; letter-spacing:-0.01em; }

    /* ── NAV:vidrio esmerilado estilo apple.com ── */
    nav {
      background:rgba(var(--scrim), 0.65);
      -webkit-backdrop-filter:saturate(180%) blur(22px);
      backdrop-filter:saturate(180%) blur(22px);
      border-bottom:0.5px solid rgba(var(--velo), 0.14);
      padding:10px 40px;
    }

    nav ul li a {
      color:var(--texto-2);
      text-transform:none;
      letter-spacing:0;
      font-size:14px;
      font-weight:500;
      padding:8px 14px;
      border-radius:980px;
      transition:color 0.25s var(--ap-ease), background 0.25s var(--ap-ease);
    }

    nav ul li a:hover,
    nav ul li a.active { color:var(--texto); background:rgba(var(--velo), 0.10); }

    .nav-dropdown-list {
      background:rgba(var(--scrim), 0.78);
      -webkit-backdrop-filter:saturate(180%) blur(24px);
      backdrop-filter:saturate(180%) blur(24px);
      border:0.5px solid var(--ap-border);
      border-top:0.5px solid var(--ap-border);
      border-radius:16px;
      padding:8px;
      box-shadow:var(--ap-shadow);
    }

    .nav-dropdown-list li a { border-radius:10px; }
    .nav-dropdown-list li a:hover { background:rgba(var(--velo), 0.10); }

    /* ── HERO:tipografía gigante + gradiente ── */
    .hero {
      background:transparent;
      border-bottom:0.5px solid rgba(var(--velo), 0.10);
      padding:110px 20px 90px;
    }

    .hero h1 {
      font-size:clamp(48px, 7vw, 84px);
      font-weight:700;
      letter-spacing:-0.03em;
      line-height:1.05;
    }

    .hero h1 span {
      background:var(--ap-grad);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      color:transparent;
    }

    .hero p {
      color:var(--ap-text-2);
      font-size:19px;
      font-weight:400;
      margin-top:18px;
      letter-spacing:0;
    }

    /* ── SECCIONES ── */
    .section-title {
      font-size:34px;
      font-weight:700;
      letter-spacing:-0.025em;
      border-left:none;
      padding-left:0;
      margin-bottom:40px;
    }

    /* ── TARJETAS:vidrio, radio continuo, hover flotante ── */
    .event-card, .fighter-card, .arena-panel, .lookup-box,
    .duel-card, .badge-card, .gym-card, .sim-result-card {
      background:var(--ap-surface);
      -webkit-backdrop-filter:blur(14px);
      backdrop-filter:blur(14px);
      border:0.5px solid var(--ap-border);
      border-radius:var(--ap-radius);
      transition:transform 0.35s var(--ap-ease), border-color 0.35s var(--ap-ease), box-shadow 0.35s var(--ap-ease), background 0.35s var(--ap-ease);
    }

    .event-card:hover, .fighter-card:hover {
      transform:translateY(-5px) scale(1.005);
      border-color:var(--ap-border-hi);
      background:var(--ap-surface-2);
      box-shadow:var(--ap-shadow);
    }

    .duel-card:hover:not(.locked) {
      transform:translateY(-4px);
      border-color:var(--ap-border-hi);
      background:var(--ap-surface-2);
      box-shadow:var(--ap-shadow);
    }

    .gym-card:hover:not(.disabled) { border-color:var(--ap-border-hi); background:var(--ap-surface-2); }
    .duel-card.correct { border-color:var(--verde); background:rgba(var(--verde-rgb), 0.10); }
    .duel-card.wrong   { border-color:var(--rojo-vivo); background:rgba(var(--rojo-vivo-rgb), 0.10); }
    .gym-card.selected { border-color:var(--ap-marca); background:rgba(var(--marca-vivo-rgb), 0.10); }

    .event-card-header {
      background:rgba(var(--velo), 0.04);
      border-bottom:0.5px solid var(--ap-border);
    }

    /* ── BOTONES:pill Apple ── */
    .lookup-btn, .sim-fight-btn, .arena-next-btn {
      background:var(--ap-marca);
      border-radius:980px;
      font-weight:600;
      letter-spacing:0;
      text-transform:none;
      transition:all 0.3s var(--ap-ease);
      box-shadow:0 8px 24px rgba(var(--marca-vivo-rgb), 0.28);
    }

    .lookup-btn:hover, .sim-fight-btn:hover:not(:disabled), .arena-next-btn:hover {
      background:var(--marca-vivo);
      transform:translateY(-1px);
      box-shadow:0 12px 32px rgba(var(--marca-vivo-rgb), 0.38);
    }

    .lookup-btn:active { transform:scale(0.97); }
    .lookup-btn:disabled, .sim-fight-btn:disabled {
      background:rgba(var(--velo), 0.10);
      color:rgba(var(--velo), 0.35);
      box-shadow:none;
    }

    /* ── INPUTS:vidrio con focus ring ── */
    .lookup-input, .sim-input {
      background:rgba(var(--velo), 0.06);
      border:0.5px solid var(--ap-border);
      border-radius:14px;
      color:var(--ap-text);
      transition:border-color 0.25s var(--ap-ease), background 0.25s var(--ap-ease), box-shadow 0.25s var(--ap-ease);
    }

    .lookup-input:focus, .sim-input:focus {
      border-color:rgba(var(--marca-vivo-rgb), 0.65);
      background:rgba(var(--velo), 0.08);
      box-shadow:0 0 0 4px rgba(var(--marca-vivo-rgb), 0.18);
    }

    .lookup-input::placeholder, .sim-input::placeholder { color:rgba(var(--velo), 0.30); }

    /* ── TABS:segmented control ── */
    .tab-btn {
      border-radius:980px;
      text-transform:none;
      letter-spacing:0;
      font-weight:500;
      border:0.5px solid transparent;
      transition:all 0.3s var(--ap-ease);
    }

    .tab-btn:hover { background:rgba(var(--velo), 0.08); color:var(--texto); }
    .tab-btn.active {
      background:rgba(var(--velo), 0.14);
      color:var(--texto);
      border-color:var(--ap-border);
    }

    /* ── TABLAS:hairlines en vez de bordes duros ── */
    .fight-table thead tr, .rankings-table thead tr {
      background:transparent;
      border-bottom:0.5px solid var(--ap-border-hi);
    }

    .fight-table th, .rankings-table th {
      color:var(--ap-text-2);
      text-transform:none;
      letter-spacing:0;
      font-weight:600;
    }

    .fight-table tbody tr, .rankings-table tbody tr { border-bottom:0.5px solid rgba(var(--velo), 0.06); }
    .fight-table tbody tr:hover, .rankings-table tbody tr:hover { background:rgba(var(--velo), 0.045); }

    /* ── MODAL:hoja de vidrio ── */
    .modal-overlay {
      background:rgba(var(--scrim), 0.55);
      -webkit-backdrop-filter:blur(8px);
      backdrop-filter:blur(8px);
    }

    .modal {
      background:rgba(var(--scrim), 0.82);
      -webkit-backdrop-filter:saturate(180%) blur(28px);
      backdrop-filter:saturate(180%) blur(28px);
      border:0.5px solid var(--ap-border);
      border-radius:24px;
      box-shadow:var(--ap-shadow);
    }

    .modal-close {
      background:rgba(var(--velo), 0.10);
      border-radius:50%;
      transition:background 0.25s var(--ap-ease);
    }
    .modal-close:hover { background:rgba(var(--velo), 0.2); }

    /* ── DETALLES ── */
    .sim-pill { border-radius:980px; transition:all 0.25s var(--ap-ease); }
    .sim-pill.selected { background:var(--ap-marca); border-color:var(--ap-marca); box-shadow:0 6px 18px rgba(var(--marca-vivo-rgb), 0.30); }
    .sim-suggestions {
      background:rgba(var(--scrim), 0.85);
      -webkit-backdrop-filter:blur(20px);
      backdrop-filter:blur(20px);
      border:0.5px solid var(--ap-border);
      border-radius:14px;
      box-shadow:var(--ap-shadow);
    }
    .sim-suggestion-item:hover { background:rgba(var(--velo), 0.08); }

    .arena-xp-track { background:rgba(var(--velo), 0.08); border-radius:99px; }
    .arena-xp-fill { background:var(--ap-grad); border-radius:99px; }

    .lookup-hint, footer { color:var(--ap-text-2); }
    footer { border-top:0.5px solid rgba(var(--velo), 0.08); background:transparent; }

    .spinner { border-top-color:var(--ap-marca); }

    /* ═══ HERO v2: cinematográfico full-viewport ═══ */
    .hero {
      position:relative;
      min-height:64vh;
      display:none;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:0 20px;
      border-bottom:none;
      overflow:hidden;
      background:var(--fondo);
    }

    .hero.active { display:flex; }

    .hero-3d { position:absolute; inset:0; opacity:1; pointer-events:none; }

    /* Scrim:viñeta + fade a negro abajo para fundirse con el contenido */
    .hero-scrim {
      position:absolute;
      inset:0;
      pointer-events:none;
      background:radial-gradient(ellipse 90% 70% at 50% 45%, transparent 40%, rgba(var(--scrim), 0.55) 100%),
        linear-gradient(to bottom, rgba(var(--scrim), 0.35) 0%, transparent 22%, transparent 62%, var(--fondo) 100%);
      z-index:1;
    }

    .hero-content { position:relative; z-index:2; max-width:900px; }

    @keyframes heroRise {
      from { opacity:0; transform:translateY(28px); filter:blur(6px); }
      to   { opacity:1; transform:translateY(0); filter:blur(0); }
    }

    @keyframes gradFlow {
      0%, 100% { background-position:0% 50%; }
      50%      { background-position:100% 50%; }
    }

    .hero .hero-kicker {
      color:rgba(var(--velo), 0.55);
      font-size:15px;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:0.28em;
      margin:0 0 18px;
      animation:heroRise 0.9s var(--ap-ease) 0.1s backwards;
    }

    .hero h1 {
      font-size:clamp(48px, 7.5vw, 92px);
      font-weight:800;
      letter-spacing:-0.035em;
      line-height:0.98;
      animation:heroRise 0.9s var(--ap-ease) 0.25s backwards;
    }

    .hero h1 span {
      background:var(--ap-grad);
      background-size:220% 220%;
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      animation:heroRise 0.9s var(--ap-ease) 0.25s backwards, gradFlow 7s ease-in-out 1.2s infinite;
    }

    .hero .hero-sub {
      color:rgba(var(--velo), 0.65);
      font-size:clamp(17px, 2vw, 22px);
      font-weight:400;
      line-height:1.5;
      letter-spacing:-0.01em;
      margin:18px 0 0;
      animation:heroRise 0.9s var(--ap-ease) 0.4s backwards;
    }

    .hero-cta-row {
      display:flex;
      gap:14px;
      justify-content:center;
      margin-top:28px;
      animation:heroRise 0.9s var(--ap-ease) 0.55s backwards;
    }

    .hero-cta {
      display:inline-block;
      padding:15px 34px;
      border-radius:980px;
      font-size:17px;
      font-weight:600;
      text-decoration:none;
      letter-spacing:-0.01em;
      transition:all 0.3s var(--ap-ease);
    }

    .hero-cta.primary {
      background:var(--ap-marca);
      color:var(--marca-texto);
      box-shadow:0 10px 34px rgba(var(--marca-vivo-rgb), 0.40);
    }

    .hero-cta.primary:hover { background:var(--marca-logo-hover); transform:translateY(-2px) scale(1.02); box-shadow:0 16px 44px rgba(var(--marca-logo-rgb), 0.55); }

    .hero-cta.ghost {
      background:rgba(var(--velo), 0.10);
      color:var(--texto);
      border:0.5px solid rgba(var(--velo), 0.22);
      -webkit-backdrop-filter:blur(14px);
      backdrop-filter:blur(14px);
    }

    .hero-cta.ghost:hover { background:rgba(var(--velo), 0.18); transform:translateY(-2px); }

    .hero-chips {
      display:flex;
      gap:10px;
      justify-content:center;
      margin-top:22px;
      flex-wrap:wrap;
      animation:heroRise 0.9s var(--ap-ease) 0.7s backwards;
    }

    .hero-chip {
      padding:8px 16px;
      border-radius:980px;
      font-size:13px;
      font-weight:500;
      color:rgba(var(--velo), 0.60);
      background:rgba(var(--velo), 0.06);
      border:0.5px solid rgba(var(--velo), 0.12);
      -webkit-backdrop-filter:blur(10px);
      backdrop-filter:blur(10px);
    }

    @keyframes scrollBob {
      0%, 100% { transform:translate(-50%, 0); opacity:0.5; }
      50%      { transform:translate(-50%, 8px); opacity:1; }
    }

    .hero-scroll {
      position:absolute;
      bottom:26px;
      left:50%;
      z-index:2;
      width:44px;
      height:44px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:rgba(var(--velo), 0.6);
      background:rgba(var(--velo), 0.07);
      border:0.5px solid rgba(var(--velo), 0.14);
      border-radius:50%;
      cursor:pointer;
      -webkit-backdrop-filter:blur(10px);
      backdrop-filter:blur(10px);
      animation:scrollBob 2.4s ease-in-out infinite;
      transition:background 0.25s var(--ap-ease);
    }

    .hero-scroll:hover { background:rgba(var(--velo), 0.16); color:var(--texto); }

    @media (prefers-reduced-motion:reduce) {
      .hero .hero-kicker, .hero h1, .hero h1 span, .hero .hero-sub,
      .hero-cta-row, .hero-chips, .hero-scroll { animation:none; }
    }

    @media (max-width:700px) {
      .hero { min-height:58vh; }
      .hero-cta-row { flex-direction:column; align-items:center; }
    }

    /* ── Buscador de la portada (hero) — estilo Tapology ── */
    .hero-search {
      max-width:560px;
      margin:28px auto 6px;
      animation:heroRise 0.9s var(--ap-ease) 0.5s backwards;
    }

    .hero-search-box {
      display:flex;
      align-items:center;
      gap:12px;
      padding:0 18px;
      background:rgba(var(--velo), 0.09);
      border:1px solid rgba(var(--velo), 0.18);
      border-radius:14px;
      -webkit-backdrop-filter:blur(12px);
      backdrop-filter:blur(12px);
      transition:border-color 0.2s var(--ap-ease), background 0.2s var(--ap-ease);
    }

    .hero-search-box:focus-within {
      border-color:var(--k-marca);
      background:rgba(var(--velo), 0.13);
    }

    .hero-search-ic { flex:none; color:rgba(var(--velo), 0.55); }

    .hero-search-input {
      flex:1;
      min-width:0;
      padding:16px 0;
      background:transparent;
      border:none;
      outline:none;
      color:var(--texto);
      font-family:inherit;
      font-size:17px;
    }

    .hero-search-input::placeholder { color:rgba(var(--velo), 0.45); }

    /* Dropdown de resultados:montado en <body> con posición fija (el hero
       tiene overflow:hidden, así que un absoluto adentro quedaría cortado). */
    .fsug {
      position:fixed;
      z-index:200;
      display:none;
      padding:6px;
      background:var(--fondo-hundido);
      border:1px solid var(--borde);
      border-radius:14px;
      box-shadow:0 24px 60px rgba(var(--scrim), 0.6);
      max-height:min(60vh, 440px);
      overflow-y:auto;
      text-align:left;
    }

    .fsug.open { display:block; }

    .fsug-item {
      display:flex;
      align-items:center;
      gap:12px;
      padding:9px 10px;
      border-radius:10px;
      cursor:pointer;
    }

    .fsug-item:hover, .fsug-item.active { background:var(--panel-2); }

    .fsug-ava {
      position:relative;
      flex:none;
      width:42px;
      height:42px;
      border-radius:50%;
      overflow:hidden;
      background:var(--panel-2);
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--texto-3);
      font-weight:700;
      font-size:14px;
    }

    .fsug-ava img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

    .fsug-body { flex:1; min-width:0; }

    .fsug-name {
      color:var(--texto);
      font-weight:600;
      font-size:15px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .fsug-sub {
      margin-top:2px;
      color:var(--texto-3);
      font-size:12px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .fsug-right { flex:none; text-align:right; padding-left:6px; }
    .fsug-rec { color:var(--texto-2); font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
    .fsug-meta {
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:5px;
      margin-top:3px;
      color:var(--texto-3);
      font-size:11px;
    }
    .fsug-msg { padding:14px 12px; color:var(--texto-3); font-size:13px; text-align:center; }

    @media (max-width:700px) {
      .hero-search { margin-top:22px; }
      .hero-search-input { font-size:16px; padding:14px 0; }
    }

    /* ── Biblioteca de MMA:la sección educativa para el fan nuevo ── */
    .esc-tagline {
      max-width:760px;
      margin:-6px 0 22px;
      color:var(--k-dim, var(--texto-3));
      font-size:14px;
      line-height:1.65;
    }

    .esc-intro {
      max-width:760px;
      margin:4px 0 20px;
      padding:14px 16px;
      background:var(--k-card, var(--fondo-hundido));
      border:1px solid var(--k-border, var(--borde-sutil));
      border-left:3px solid var(--k-marca, var(--marca-vivo));
      border-radius:10px;
      color:var(--texto-2);
      font-size:13.5px;
      line-height:1.65;
    }

    .esc-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(min(100%, 255px), 1fr));
      gap:16px;
    }

    .esc-card {
      background:var(--k-card, var(--fondo-hundido));
      border:1px solid var(--k-border, var(--borde-sutil));
      border-radius:14px;
      overflow:hidden;
      cursor:pointer;
      transition:transform 0.18s var(--ap-ease, ease), border-color 0.18s;
    }

    .esc-card:hover { transform:translateY(-3px); border-color:var(--k-border-hi, var(--borde-fuerte)); }

    .esc-card-img {
      position:relative;
      aspect-ratio:16 / 10;
      background:var(--fondo);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:44px;
      overflow:hidden;
    }

    .esc-card-img img {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .esc-card-body { padding:14px 16px 16px; }

    .esc-chip {
      display:inline-block;
      margin-bottom:8px;
      padding:3px 9px;
      background:var(--k-marca-suave, rgba(var(--marca-vivo-rgb), 0.12));
      color:var(--k-marca, var(--marca-vivo));
      border-radius:999px;
      font-size:10.5px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.06em;
    }

    .esc-card-name { color:var(--texto); font-weight:700; font-size:16.5px; }
    .esc-card-sum { margin-top:6px; color:var(--k-dim, var(--texto-3)); font-size:13px; line-height:1.55; }

    .esc-foot {
      margin-top:26px;
      color:var(--texto-tenue);
      font-size:12px;
      line-height:1.6;
    }

    /* Modal propio de la Escuela (independiente del modal de peleadores) */
    .esc-overlay {
      position:fixed;
      inset:0;
      z-index:300;
      display:none;
      align-items:center;
      justify-content:center;
      padding:24px;
      background:rgba(var(--scrim), 0.72);
      -webkit-backdrop-filter:blur(6px);
      backdrop-filter:blur(6px);
    }

    .esc-overlay.open { display:flex; }

    .esc-modal {
      position:relative;
      width:100%;
      max-width:620px;
      max-height:86vh;
      overflow-y:auto;
      background:var(--fondo-hundido);
      border:1px solid var(--borde);
      border-radius:18px;
    }

    .esc-close {
      position:absolute;
      top:12px;
      right:12px;
      z-index:2;
      width:36px;
      height:36px;
      border:none;
      border-radius:50%;
      background:rgba(var(--scrim), 0.55);
      color:var(--texto);
      font-size:20px;
      cursor:pointer;
    }

    .esc-modal-hero {
      position:relative;
      height:230px;
      background:var(--fondo);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:64px;
    }

    .esc-modal-hero img,
    .esc-modal-hero video {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .esc-modal-hero::after {
      content:'';
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(to bottom, transparent 55%, rgba(var(--scrim), 0.95) 100%);
    }

    .esc-modal-body { padding:20px 24px 26px; }
    .esc-modal-body h3 { color:var(--texto); font-size:24px; font-weight:800; margin:6px 0 2px; }
    .esc-modal-body h4 {
      margin:18px 0 6px;
      color:var(--k-marca, var(--marca-vivo));
      font-size:12px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.08em;
    }
    .esc-modal-body p { color:var(--texto-2); font-size:14px; line-height:1.7; margin:0; }

    @media (max-width:700px) {
      .esc-modal-hero { height:170px; }
      .esc-modal-body { padding:16px 18px 22px; }
    }

    /* ═══════════════════════════════════════════════════════════════
       KALSHI LAYER — negro plano de mercado + rojo como color de señal.
       Restyle global (superficies/bordes) + estilos de la sección Apuestas.
       ═══════════════════════════════════════════════════════════════ */

    /* Nombres heredados de la capa anterior. Se conservan porque los usan ~100
       reglas de Apuestas y Rankings, pero ya no tienen color propio: derivan de
       la paleta de arriba, así el tema se cambia en un solo lugar. */
    :root {
      --k-bg: var(--fondo);
      --k-card: var(--fondo-hundido);
      --k-card-2: var(--panel);
      --k-border: var(--borde-sutil);
      --k-border-hi: var(--borde-fuerte);
      --k-dim: var(--texto-3);
      --k-marca: var(--marca-vivo);
      --k-marca-suave: rgba(var(--marca-vivo-rgb), 0.12);
    }

    body {
      background:radial-gradient(ellipse 60% 30% at 50% 0%, rgba(var(--marca-vivo-rgb), 0.05) 0%, transparent 60%),
        var(--k-bg);
    }

    nav { background:rgba(var(--scrim), 0.85); }

    /* Superficies planas tipo terminal de mercado (reemplaza el vidrio) */
    .event-card, .fighter-card, .arena-panel, .lookup-box,
    .duel-card, .badge-card, .gym-card, .sim-result-card {
      background:var(--k-card);
      border:1px solid var(--k-border);
      border-radius:14px;
      -webkit-backdrop-filter:none;
      backdrop-filter:none;
    }

    .event-card:hover, .fighter-card:hover {
      background:var(--k-card-2);
      border-color:var(--k-border-hi);
      transform:translateY(-3px) scale(1);
      box-shadow:0 14px 34px rgba(var(--scrim), 0.5);
    }

    .modal { background:var(--fondo-hundido); border:1px solid var(--k-border); }
    .nav-dropdown-list { background:var(--fondo-hundido); border:1px solid var(--k-border); }

    /* ── Sección Apuestas ── */
    .bet-tagline {
      color:var(--k-dim);
      font-size:15px;
      line-height:1.55;
      max-width:720px;
      margin:-22px 0 26px;
    }
    .bet-tagline strong { color:var(--texto-2); font-weight:600; }
    .bet-updated { font-size:12px; color:var(--texto-tenue); display:inline-block; }

    .bet-tabs { display:flex; gap:8px; margin-bottom:26px; flex-wrap:wrap; }

    .bet-tab {
      padding:9px 18px;
      border-radius:980px;
      background:transparent;
      border:1px solid var(--k-border);
      color:var(--k-dim);
      font-size:14px;
      font-weight:600;
      cursor:pointer;
      transition:all 0.2s ease;
    }
    .bet-tab:hover { color:var(--texto); border-color:var(--k-border-hi); background:var(--k-card); }
    .bet-tab.active { background:var(--k-marca); border-color:var(--k-marca); color:var(--texto); }

    .bet-panel { display:none; }
    .bet-panel.active { display:block; animation:sectionIn 0.18s ease; }

    .bet-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(400px, 1fr)); gap:18px; }
    @media (max-width:700px) { .bet-grid { grid-template-columns:1fr; } }

    /* Tarjeta de pelea (estilo tarjeta de mercado Kalshi) */
    .bet-fight {
      background:var(--k-card);
      border:1px solid var(--k-border);
      border-radius:14px;
      padding:16px 16px 12px;
      transition:border-color 0.2s ease, background 0.2s ease;
    }
    .bet-fight:hover { border-color:var(--k-border-hi); background:var(--k-card-2); }

    .bet-fight-top {
      display:flex; justify-content:space-between; align-items:center;
      margin-bottom:12px; font-size:12px; color:var(--k-dim);
    }
    .bet-date {
      background:var(--k-marca-suave); color:var(--k-marca);
      font-weight:700; letter-spacing:0.06em;
      padding:3px 10px; border-radius:6px; font-size:11.5px; text-transform:uppercase;
    }

    .bet-side { display:flex; align-items:center; gap:12px; padding:7px 0; }

    .bet-ava {
      width:44px; height:44px; border-radius:50%;
      object-fit:cover; object-position:top;
      background:var(--panel-2); border:1px solid var(--k-border);
      flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      color:var(--texto-4); font-weight:700; font-size:14px;
    }

    .bet-side-info { flex:1; min-width:0; }
    .bet-side-name { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .bet-side-rec { font-size:12px; color:var(--k-dim); margin-top:1px; }

    .bet-prob { text-align:right; min-width:62px; }
    .bet-prob-num { font-size:20px; font-weight:800; letter-spacing:-0.02em; }
    .bet-prob-num.fav { color:var(--k-marca); }
    .bet-bar { height:4px; border-radius:99px; background:var(--panel-2); margin-top:5px; overflow:hidden; }
    .bet-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--marca-vivo), var(--k-marca)); }

    .bet-odd-chip {
      min-width:86px; text-align:center;
      background:var(--k-marca-suave);
      border:1px solid rgba(var(--marca-vivo-rgb), 0.35);
      color:var(--marca-suave);
      border-radius:10px; padding:7px 10px;
      font-size:14px; font-weight:700;
      line-height:1.15; cursor:default;
    }
    .bet-odd-chip small { display:block; font-size:10px; font-weight:600; color:rgba(var(--marca-vivo-rgb), 0.65); letter-spacing:0.02em; }

    .bet-fight-foot {
      display:flex; justify-content:space-between; align-items:center;
      border-top:1px solid var(--k-border);
      margin-top:10px; padding-top:10px;
      font-size:12px; color:var(--k-dim);
    }
    .bet-fair-tag { color:var(--texto-2); }
    .bet-fair-tag b { color:var(--k-marca); font-weight:700; }

    .bet-expand {
      background:none; border:none; color:var(--k-dim);
      font-size:12.5px; font-weight:600; cursor:pointer;
      padding:4px 6px; border-radius:6px;
      transition:color 0.15s ease;
    }
    .bet-expand:hover { color:var(--texto); }

    .bet-detail { margin-top:12px; border-top:1px solid var(--k-border); padding-top:14px; }
    .bet-detail-note { font-size:12px; color:var(--k-dim); margin:6px 0 10px; line-height:1.5; }

    .bet-chart-wrap { margin-bottom:12px; }
    .bet-chart-head { display:flex; justify-content:space-between; font-size:12px; color:var(--k-dim); margin-bottom:4px; }
    .bet-chart-head b { color:var(--texto-2); font-weight:600; }

    .bet-books { width:100%; border-collapse:collapse; font-size:13px; }
    .bet-books th {
      text-align:left; color:var(--texto-tenue); font-weight:600; font-size:11px;
      text-transform:uppercase; letter-spacing:0.06em;
      padding:6px 8px; border-bottom:1px solid var(--k-border);
    }
    .bet-books td { padding:7px 8px; border-bottom:1px solid rgba(var(--velo), 0.04); }
    .bet-books tr.hl td { background:rgba(var(--marca-vivo-rgb), 0.06); }
    .bet-books td.best { color:var(--k-marca); font-weight:700; }
    .bet-books .src { color:var(--k-dim); font-size:11px; }

    /* Futuros */
    .bet-board {
      background:var(--k-card); border:1px solid var(--k-border);
      border-radius:14px; padding:18px; margin-bottom:18px;
    }
    .bet-board-title { font-size:17px; font-weight:700; margin-bottom:3px; }
    .bet-board-sub { font-size:12px; color:var(--k-dim); margin-bottom:14px; }

    .bet-cand { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid rgba(var(--velo), 0.04); }
    .bet-cand:last-child { border-bottom:none; }
    .bet-cand-rank { width:20px; color:var(--texto-tenue); font-size:12px; font-weight:700; text-align:center; }
    .bet-cand-name { flex:1; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .bet-cand-track { flex:2; height:6px; background:var(--panel-2); border-radius:99px; overflow:hidden; }
    .bet-cand-track i { display:block; height:100%; background:linear-gradient(90deg, var(--marca-vivo), var(--k-marca)); border-radius:99px; }
    .bet-cand-prob { min-width:52px; text-align:right; font-size:15px; font-weight:800; }
    .bet-cand-spark { flex-shrink:0; opacity:0.9; }

    /* Props / estados vacíos */
    .bet-empty {
      background:var(--k-card); border:1px dashed var(--k-border-hi);
      border-radius:14px; padding:34px 26px; text-align:center;
      color:var(--k-dim); font-size:14px; line-height:1.6;
    }
    .bet-empty .big { font-size:30px; display:block; margin-bottom:10px; }
    .bet-empty b { color:var(--texto-2); }

    .bet-prop-group { background:var(--k-card); border:1px solid var(--k-border); border-radius:14px; padding:16px; margin-bottom:14px; }
    .bet-prop-title { font-weight:700; font-size:15px; margin-bottom:10px; }
    .bet-prop-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13.5px; border-bottom:1px solid rgba(var(--velo), 0.04); }
    .bet-prop-row:last-child { border:none; }
    .bet-prop-row .lb { color:var(--k-dim); }
    .bet-prop-row .pr { font-weight:700; color:var(--k-marca); }
    .bet-prop-row .pr .po { color:var(--k-dim); font-weight:600; margin-left:6px; }

    /* Aprender */
    .bet-learn-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:16px; }
    .bet-learn-card {
      background:var(--k-card); border:1px solid var(--k-border);
      border-radius:14px; padding:22px;
    }
    .bet-learn-card .ic { font-size:26px; display:block; margin-bottom:10px; }
    .bet-learn-card h4 { font-size:15px; font-weight:700; margin-bottom:8px; }
    .bet-learn-card p { font-size:13.5px; color:var(--k-dim); line-height:1.6; }
    .bet-learn-card b { color:var(--texto-2); font-weight:600; }
    .bet-learn-card .ex {
      margin-top:10px; background:var(--fondo); border:1px solid var(--k-border);
      border-radius:8px; padding:10px 12px; font-size:12.5px; color:var(--texto-2); line-height:1.55;
    }
    .bet-learn-card .ex b { color:var(--k-marca); }

    .bet-disclaimer {
      margin-top:30px; text-align:center;
      font-size:11.5px; color:var(--texto-tenue); letter-spacing:0.02em;
    }


    /* ── Hero:clips reales blurreados en cámara lenta (reemplazo del 3D) ── */
    .hero-3d video.hero-vid {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scale(1.14);            /* oculta el halo del blur en los bordes */
      filter:blur(12px) brightness(0.55) saturate(1.15) contrast(1.05);
      opacity:0;
      transition:opacity 2s ease;
    }
    .hero-3d video.hero-vid.on { opacity:1; }
    @media (prefers-reduced-motion:reduce) { .hero-3d video.hero-vid { display:none; } }

    /* ── Sección Noticias ── */
    .news-tagline {
      color:var(--k-dim); font-size:15px; line-height:1.55;
      max-width:720px; margin:-22px 0 26px;
    }
    .news-tagline .news-updated { font-size:12px; color:var(--texto-tenue); display:inline-block; }

    .news-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:18px; }
    @media (max-width:700px) { .news-grid { grid-template-columns:1fr; } }

    .news-card {
      display:flex; flex-direction:column;
      background:var(--k-card); border:1px solid var(--k-border);
      border-radius:14px; overflow:hidden;
      transition:transform 0.28s var(--ap-ease, ease), border-color 0.28s ease, box-shadow 0.28s ease;
    }
    .news-card:hover {
      transform:translateY(-4px); border-color:var(--k-border-hi);
      box-shadow:0 16px 36px rgba(var(--scrim), 0.5);
    }

    .news-thumb {
      width:100%; aspect-ratio:16 / 9; object-fit:cover; object-position:top;
      background:var(--panel); display:block;
    }
    .news-card.no-img .news-body { padding-top:18px; }

    .news-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }

    .news-meta { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--k-dim); }
    .news-src {
      background:var(--k-marca-suave); color:var(--k-marca);
      font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
      padding:2px 8px; border-radius:5px; font-size:10.5px;
    }
    .news-dot { opacity:0.4; }

    .news-title { font-size:15.5px; font-weight:600; line-height:1.32; letter-spacing:-0.01em; }
    .news-sum { font-size:13px; color:var(--k-dim); line-height:1.5; }

    .news-figs { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
    .news-fig {
      display:inline-flex; align-items:center; gap:6px;
      background:rgba(var(--velo), 0.05); border:0.5px solid var(--k-border);
      border-radius:980px; padding:3px 10px 3px 3px; font-size:12px; color:var(--texto-2);
    }
    .news-fig img, .news-fig .ph {
      width:20px; height:20px; border-radius:50%; object-fit:cover; object-position:top;
      background:var(--panel-2); flex-shrink:0;
      display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--texto-4); font-weight:700;
    }

    .news-foot { margin-top:auto; padding-top:6px; }
    .news-link {
      color:var(--k-marca); font-size:12.5px; font-weight:600; text-decoration:none;
      transition:opacity 0.15s ease;
    }
    .news-link:hover { opacity:0.75; }

    .news-badge-es {
      font-size:10px; color:var(--texto-tenue); border:0.5px solid var(--k-border);
      border-radius:4px; padding:1px 5px; letter-spacing:0.03em;
    }

    .news-disclaimer {
      margin-top:30px; text-align:center; font-size:11.5px; color:var(--texto-tenue); letter-spacing:0.02em;
    }

    /* ── Página de noticia (overlay debajo del nav, look de artículo propio) ──
       El overlay arranca en --nav-h (alto real del nav, seteado por JS al abrir)
       y queda con z-index MENOR que el nav (100): la barra del sitio sigue
       visible y usable arriba de la nota. */
    #news-modal-overlay {
      position:fixed; left:0; right:0; bottom:0; top:var(--nav-h, 0px);
      background:var(--fondo); z-index:95;
      display:none; overflow-y:auto; -webkit-overflow-scrolling:touch;
      animation:fadeIn 0.15s ease; opacity:0;
    }
    #news-modal-overlay.open { display:block; opacity:1; }
    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

    /* La nota vive en un contenedor centrado, como el resto del sitio:antes
       iba a sangre y en pantallas anchas la línea de texto quedaba perdida en
       el medio con los costados vacíos. */
    .news-modal {
      width:100%; max-width:1120px; min-height:100%;
      margin:0 auto; padding:16px 28px 90px; position:relative;
    }
    @media (max-width:720px) { .news-modal { padding:10px 16px 80px; } }

    /* Barra de vuelta + salto a la nota anterior/siguiente del mismo feed */
    .news-topbar { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
    .news-back {
      display:inline-flex; align-items:center; gap:7px; background:none; border:none;
      color:var(--kk-dim); font:600 13px var(--kk-sans); cursor:pointer; padding:4px 0;
    }
    .news-back:hover { color:var(--kk-marca); }
    .news-artnav { margin-left:auto; display:flex; gap:6px; }
    .news-artnav button {
      width:34px; height:34px; border-radius:50%; cursor:pointer;
      background:rgba(var(--velo), 0.05); border:0.5px solid var(--k-border);
      color:var(--texto-2); font-size:18px; line-height:1; transition:background 0.15s, opacity 0.15s;
    }
    .news-artnav button:hover:not(:disabled) { background:rgba(var(--velo), 0.11); color:var(--texto); }
    .news-artnav button:disabled { opacity:0.3; cursor:default; }

    /* Grilla de la nota:columna de lectura a la izquierda (hero arriba, texto
       abajo) y riel pegajoso a la derecha cruzando las dos filas, así arranca a
       la altura del hero en vez de dejar ese rincón vacío. Abajo de 1060px cae
       todo a una columna y el riel queda al final, que es justo donde va el
       "seguir leyendo". */
    /* `grid-template-rows: auto 1fr`: cuando el riel (que cruza las dos filas)
       es más alto que hero + texto, el sobrante se reparte entre las filas y la
       primera crecía, abriendo un hueco debajo del hero. Con la segunda en 1fr,
       el sobrante cae ahí y el hero queda pegado a su titular. */
    .news-art {
      display:grid; grid-template-columns:minmax(0, 1fr) 320px;
      grid-template-rows:auto 1fr;
      gap:0 44px; align-items:start;
    }
    /* El reset a una columna de los hijos NO va acá: las reglas de
       .news-modal-hero / -body / .news-rail están más abajo con la misma
       especificidad y ganaban por orden, dejando al riel en una columna 2 que
       ya no existe (y el resto colapsado a ancho 0). Va después de las tres. */
    @media (max-width:1060px) {
      .news-art { grid-template-columns:minmax(0, 1fr); grid-template-rows:none; }
      /* sin riel al costado, el texto se estiraría a todo el ancho:a 1000px
         eran ~110 caracteres por línea */
      .news-modal { max-width:800px; }
    }

    /* Hero contenido en la grilla, con la proporción de la caja resuelta por
       CSS y `cover`: la foto llena el bloque sin dejar bordes. Antes iba a
       pantalla completa con la foto acotada a 920px y los costados rellenos
       con la misma imagen desenfocada — en pantallas anchas eso era una franja
       borrosa gigante a cada lado. */
    /* 16/9 es la proporción en que publican las og:image de los medios: a lo
       ancho de la página había que recortarles más de un tercio del alto, y
       en las tarjetas promocionales (dos caras + el nombre de la pelea) eso se
       comía justo el texto. Acá el recorte es mínimo. */
    .news-modal-hero {
      grid-column:1; grid-row:1; width:100%; aspect-ratio:16 / 9;
      /* en ventanas bajas el hero se comía el viewport y el texto arrancaba
         abajo del pliegue. El `width:100%` explícito es lo que evita que al
         recortar el alto la caja recorte también el ancho para mantener la
         proporción (ver el comentario de la grilla). */
      max-height: 42vh;
      position:relative; overflow:hidden;
      border-radius:16px; background:var(--fondo-hundido); margin-bottom:26px;
      box-shadow:inset 0 0 0 1px rgba(var(--velo), 0.06);
    }
    @media (max-width:720px) { .news-modal-hero { border-radius:12px; margin-bottom:20px; } }
    /* Foto que no llega al ancho de la columna:la caja se achica a su tamaño
       real (JS le pone el max-width) y se alinea a la izquierda con el texto.
       En mobile la columna ya es más angosta que casi cualquier foto, así que
       ahí no aplica. */
    .news-modal-hero.hero-chico { margin-right:auto; }
    @media (max-width:720px) { .news-modal-hero.hero-chico { max-width:none !important; } }
    .news-modal-hero .news-hero-bg {
      position:absolute; inset:-20px;
      background-size:cover; background-position:center;
      filter:blur(28px) brightness(0.45) saturate(1.1);
    }
    .news-modal-hero img {
      position:relative; display:block; width:100%; height:100%;
      object-fit:cover; object-position:center 22%;
    }
    /* Único caso donde queda desenfoque:la foto es el avatar chico (~200px) y
       estirarla pixela. Ahí va entera sobre el fondo borroso, pero acotada a la
       caja del hero — se lee como decisión, no como un bug de layout. */
    .news-modal-hero img.img-contain { object-fit:contain; background:transparent; }

    .news-modal-body {
      grid-column:1; grid-row:2; min-width:0;
      display:flex; flex-direction:column; gap:16px;
    }

    /* Crédito de foto de archivo. No es decorativo:casi todo Wikimedia
       Commons es CC BY, donde la atribución es condición de la licencia. Y
       "de archivo" avisa que el retrato no es del hecho que se cuenta. */
    .news-foto-credito {
      font-size:11.5px; line-height:1.5; color:var(--texto-4);
      display:flex; flex-wrap:wrap; gap:4px 7px; align-items:baseline;
    }
    .news-foto-credito b { color:var(--texto-3); font-weight:600; }
    .news-foto-credito a { color:var(--texto-3); text-decoration:underline; text-underline-offset:2px; }
    .news-foto-credito a:hover { color:var(--k-marca); }
    /* con crédito, la foto y su línea van juntas y el aire queda debajo */
    .news-modal-hero.con-credito { margin-bottom:9px; }

    .news-modal-meta {
      display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--texto-3);
    }
    .news-modal-src-tag {
      background:var(--k-marca-suave); color:var(--k-marca);
      font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
      padding:3px 10px; border-radius:5px; font-size:11px; flex-shrink:0;
    }
    .news-modal-dot { color:var(--texto-tenue); }

    .news-modal-title {
      font-size:clamp(27px, 2.6vw, 37px); font-weight:800;
      line-height:1.18; letter-spacing:-0.02em;
    }

    .news-modal-figs {
      display:flex; flex-wrap:wrap; gap:8px; margin-top:2px;
    }
    .news-modal-fig {
      display:inline-flex; align-items:center; gap:6px;
      background:rgba(var(--velo), 0.05); border:0.5px solid var(--k-border);
      border-radius:980px; padding:4px 12px 4px 4px; font-size:12px; color:var(--texto-2);
    }
    .news-modal-fig img, .news-modal-fig .ph {
      width:24px; height:24px; border-radius:50%; object-fit:cover; object-position:top;
      background:var(--panel-2); flex-shrink:0; display:flex; align-items:center;
      justify-content:center; font-size:10px; color:var(--texto-4); font-weight:700;
    }

    .news-modal-article { margin-top:6px; }
    .news-modal-article p { font-size:17px; line-height:1.78; color:var(--texto-2); margin:0 0 17px; }
    /* Entradilla:el primer párrafo entra más grande y más claro */
    .news-modal-article p:first-child { font-size:19px; line-height:1.65; color:var(--texto); }
    .news-modal-article p:last-child { margin-bottom:0; }
    .news-modal-article .news-modal-loading { color:var(--texto-4); font-style:italic; font-size:16px; }

    /* Estado "no pudimos ampliar": el resumen corto suelto debajo del hero
       dejaba la nota en un titular y dos renglones, y parecía rota. Acá se
       dice qué pasó y se ofrece la salida (la nota en el medio de origen). */
    .news-noexp {
      margin-top:10px; display:flex; flex-direction:column; align-items:flex-start;
      gap:14px; background:rgba(var(--velo), 0.04); border:0.5px solid var(--k-border);
      border-radius:12px; padding:18px 20px;
    }
    .news-noexp p { font-size:14.5px; line-height:1.6; color:var(--texto-3); margin:0; }
    .news-noexp-btn {
      display:inline-flex; align-items:center; gap:8px; background:var(--k-marca);
      color:var(--texto); font-weight:700; font-size:14px; text-decoration:none;
      padding:10px 18px; border-radius:980px; transition:opacity 0.15s;
    }
    .news-noexp-btn:hover { opacity:0.88; }

    /* ── Riel lateral de la nota:fuente + seguir leyendo ── */
    .news-rail {
      grid-column:2; grid-row:1 / span 2; position:sticky; top:18px;
      display:flex; flex-direction:column; gap:26px;
      /* válvula de escape:pegado arriba, lo que sobrepase el alto de la
         ventana quedaría fuera de alcance en pantallas bajas */
      max-height: calc(100vh - var(--nav-h, 0px) - 36px); overflow-y:auto;
      scrollbar-width:thin;
    }
    /* Una sola columna:hero, texto y riel en ese orden (el riel al final es
       justo donde va el "seguir leyendo"). */
    @media (max-width: 1060px) {
      .news-modal-hero, .news-modal-body, .news-rail { grid-column:1; grid-row:auto; }
      .news-rail { position:static; margin-top:36px; max-height:none; overflow:visible; }
    }
    .news-rail-head {
      font-size:11px; font-weight:800; letter-spacing:0.09em; text-transform:uppercase;
      color:var(--texto-4); padding-bottom:9px; border-bottom:1px solid var(--k-border); margin-bottom:4px;
    }
    .news-rail-item {
      display:grid; grid-template-columns:minmax(0, 1fr) 78px; gap:12px; align-items:start;
      padding:13px 0; border-bottom:0.5px solid var(--k-border); cursor:pointer;
    }
    .news-rail-item:last-child { border-bottom:none; }
    .news-rail-item h4 {
      font-size:13.5px; font-weight:650; line-height:1.38; color:var(--texto-2); margin:0 0 5px;
    }
    .news-rail-item:hover h4 { color:var(--k-marca); }
    .news-rail-item .nz-kicker { font-size:11px; }
    .news-rail-thumb {
      width:78px; height:56px; border-radius:8px; overflow:hidden;
      background:var(--panel); flex-shrink:0;
    }
    .news-rail-thumb img { width:100%; height:100%; object-fit:cover; object-position:center 22%; }

    .news-modal-credit {
      display:flex; flex-direction:column; align-items:flex-start; gap:10px;
      background:rgba(var(--velo), 0.04); border:0.5px solid var(--k-border);
      border-radius:12px; padding:14px 16px; font-size:13px; color:var(--texto-2); line-height:1.5;
    }
    .news-modal-credit b { color:var(--texto); }
    .news-modal-credit a {
      color:var(--k-marca); font-weight:700; text-decoration:none;
    }
    .news-modal-credit a:hover { opacity:0.8; }

    /* ══════════ Página de peleador (#peleador/<slug>) ══════════
       Reemplaza al popout:el perfil es una página con URL propia, se puede
       compartir y el botón Atrás funciona. El protagonista es el historial —
       agrupado por año, que es como se lee una carrera — y no una tabla plana.
       Todo sale de nuestra base (fighters, career_stats, fight_history). */
    .fp { max-width:1100px; margin:0 auto; }
    .fp-empty { color:var(--kk-dim); padding:40px 0; text-align:center; }

    /* Cabecera:foto, nombre y el récord como dato duro al costado */
    /* ── Encabezado del perfil con identidad nacional ──
       La bandera va a PLENA saturación ocupando el flanco derecho, cortada en
       diagonal (lenguaje de gráfica de transmisión). El texto vive en su propio
       panel y nunca la pisa; el récord flota encima con su propio scrim, así el
       contraste está garantizado sin importar qué bandera sea — que es lo que
       hace que Japón (casi blanca) y Brasil funcionen igual de bien, y en los
       dos temas. Sin país, la tarjeta queda como antes: el bloque es opcional. */
    .fp-head {
      position:relative; overflow:hidden;
      display:grid; grid-template-columns:132px minmax(0, 1fr) auto;
      gap:22px; align-items:center;
      padding:20px 22px 22px; margin-bottom:2px;
      border:1px solid var(--borde); border-radius:18px;
      background:var(--panel);
    }
    .fp-head > * { position:relative; z-index:2; }
    .fp-head.sin-pais {
      border:0; border-bottom:1px solid var(--kk-line); border-radius:0;
      padding:0 0 22px; background:none;
    }
    .fp-flag {
      position:absolute; top:0; right:0; bottom:0; width:56%; z-index:0;
      /* La bandera va A SANGRE: llena el bloque entero y se corta contra los
         bordes de la tarjeta, como una gráfica de transmisión. Mostrarla entera
         sobre un fondo de color se probó y quedaba peor — un cuadrito enmarcado
         pegado sobre un bloque liso, con el filo negro del PNG a la vista.

         El 112% (y no `cover`) es por el lienzo del PNG: ESPN entrega banderas
         de 500x500 con el dibujo centrado ocupando el 92% del ancho, así que
         `cover` deja asomar los márgenes transparentes a los costados — se veía
         una línea negra y una franja de color pegadas al borde derecho. Con
         112% del ancho de la caja el arte pasa a medir 103% y esos márgenes,
         junto con el filo oscuro que traen casi todos los archivos, quedan
         afuera del recorte.

         Recorta el alto, sí: se ve cerca de la mitad de la bandera. Verificado
         en los formatos que peor se llevan con eso — Rusia y Nigeria conservan
         sus tres franjas, el círculo de Japón queda redondo, México y EE.UU.
         entran casi enteras. El color del país queda igual de fondo para el
         instante antes de que cargue la imagen. */
      background-color:var(--pais-color, var(--marca));
      background-size:112% auto;
      background-position:center;
      background-repeat:no-repeat;
      clip-path:polygon(30% 0, 100% 0, 100% 100%, 8% 100%);
      filter:saturate(1.12) brightness(0.95);
    }
    /* Degradado hacia el panel: funde el borde diagonal con la superficie en
       vez de dejar un corte duro, y da un piso de contraste al récord. */
    .fp-flag::after {
      content:""; position:absolute; inset:0;
      background:linear-gradient(100deg, rgba(var(--scrim), 0.30), transparent 46%);
    }
    .fp-pais-linea {
      display:block; width:52px; height:3px; border-radius:2px;
      margin:0 0 10px; background:var(--pais-color, var(--marca));
    }
    /* El récord queda SOBRE la bandera: se trae su propio fondo esmerilado y
       texto claro fijo, porque abajo puede haber cualquier color. */
    .fp-head:not(.sin-pais) .fp-record {
      background:rgba(var(--scrim), 0.55);
      -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
      border-radius:14px; padding:11px 16px;
    }
    .fp-head:not(.sin-pais) .fp-record-val { color:var(--texto-media); }
    .fp-head:not(.sin-pais) .fp-record-lbl { color:rgba(var(--velo-media), 0.72); }
    .fp-foto {
      width:132px; height:132px; border-radius:18px; overflow:hidden;
      background:var(--kk-panel-2); border:1px solid var(--kk-line);
      display:flex; align-items:center; justify-content:center;
      font:800 40px var(--kk-sans); color:var(--kk-faint);
    }
    .fp-foto img { width:100%; height:100%; object-fit:cover; object-position:top; }
    .fp-ident { min-width:0; }
    .fp-nombre {
      font:800 clamp(28px, 3.4vw, 42px)/1.1 var(--kk-sans);
      letter-spacing:-0.025em; margin:0 0 6px;
    }
    .fp-apodo { color:var(--kk-dim); font:500 15px var(--kk-sans); font-style:italic; margin:0 0 10px; }
    .fp-chips { display:flex; flex-wrap:wrap; gap:7px; }
    .fp-chip {
      font:600 12px var(--kk-sans); padding:4px 11px; border-radius:980px;
      background:rgba(var(--velo), 0.06); border:0.5px solid var(--kk-line-hi);
      color:var(--kk-dim);
    }
    .fp-chip.campeon { background:var(--kk-marca-suave); border-color:transparent; color:var(--kk-marca); font-weight:800; }
    /* Con bandera, los chips tienen que ser OPACOS. Los de fondo translúcido
       funcionan sobre la tarjeta, pero una fila larga de chips (un ranking, un
       gimnasio con nombre largo) llega hasta la diagonal y ahí abajo puede
       haber cualquier color: el texto gris quedaba sobre el rojo de Polonia.
       El campeón conserva su tinte rojo apoyándolo sobre una base opaca. */
    .fp-head:not(.sin-pais) .fp-chip { background:var(--panel-2); }
    .fp-head:not(.sin-pais) .fp-chip.campeon {
      background:linear-gradient(var(--kk-marca-suave), var(--kk-marca-suave)), var(--panel-2);
    }
    .fp-record { text-align:right; flex:none; }
    .fp-record-val {
      font:800 38px/1 var(--kk-sans); letter-spacing:-0.03em;
      font-variant-numeric:tabular-nums;
    }
    .fp-record-lbl {
      font:700 10.5px var(--kk-sans); letter-spacing:0.1em; text-transform:uppercase;
      color:var(--kk-faint); margin-top:6px;
    }
    @media (max-width:720px) {
      .fp-head { grid-template-columns:84px minmax(0, 1fr); gap:15px; padding:16px 16px 18px; }
      .fp-foto { width:84px; height:84px; border-radius:14px; font-size:26px; }
      .fp-record { grid-column:1 / -1; text-align:left; }
      .fp-record-val { font-size:30px; }
      /* En angosto la diagonal no entra sin tapar el nombre: la bandera pasa a
         una banda superior a todo el ancho, que se lee igual de bien. */
      .fp-flag {
        width:auto; left:0; right:0; bottom:auto; height:118px;
        clip-path:polygon(0 0, 100% 0, 100% 66%, 0 100%);
        /* La banda va a 118px y no a los 78 de antes por una cuenta, no por
           gusto: con el recorte a sangre, lo que se ve de la bandera depende de
           la proporción de la caja. En un celular de 390 de ancho, 118 de alto
           da 3,3:1 — la misma proporción que la diagonal del escritorio, así
           que se ve exactamente lo mismo de la bandera en los dos. A 78px se
           veía un quinto: de Myanmar quedaba la franja verde y nada más. */
      }
      .fp-flag::after { background:linear-gradient(180deg, transparent 40%, rgba(var(--scrim), 0.35)); }
      .fp-head:not(.sin-pais) { padding-top:110px; }
      /* Acá el récord ya NO queda sobre la bandera (pasó a banda superior), así
         que el scrim esmerilado sobra: sin esto queda una caja gris flotando
         sobre el panel, que se lee como un error de diseño. */
      .fp-head:not(.sin-pais) .fp-record {
        background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
        padding:0;
      }
      .fp-head:not(.sin-pais) .fp-record-val { color:var(--texto); }
      .fp-head:not(.sin-pais) .fp-record-lbl { color:var(--texto-4); }
    }

    /* Próxima pelea:lo más accionable del perfil, así que va arriba de todo */
    .fp-proxima {
      display:flex; align-items:center; gap:14px; flex-wrap:wrap;
      margin-top:20px; padding:15px 18px; border-radius:14px;
      background:var(--kk-marca-suave); border:0.5px solid rgba(var(--marca-vivo-rgb), 0.28);
      text-decoration:none; color:inherit;
    }
    .fp-proxima:hover { border-color:var(--kk-marca); }
    .fp-proxima-tag {
      font:800 10.5px var(--kk-sans); letter-spacing:0.1em; text-transform:uppercase;
      color:var(--kk-marca); flex:none;
    }
    .fp-proxima-vs { font:700 15.5px var(--kk-sans); }
    .fp-proxima-meta { color:var(--kk-dim); font:500 13px var(--kk-sans); margin-left:auto; text-align:right; }

    .fp-sec { margin-top:34px; }
    .fp-sec-head {
      display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
      font:800 19px var(--kk-sans); letter-spacing:-0.02em; margin-bottom:14px;
    }
    .fp-sec-head small { font:500 12.5px var(--kk-sans); color:var(--kk-faint); }

    /* Ficha + métricas:dos columnas en ancho, apiladas en angosto */
    /* Fila superior de la ficha: [Ficha | Cómo gana y cómo pierde]. Son los
       dos bloques de altura parecida (~6 filas vs ~4 barras + pie); las stats
       van DEBAJO a ancho completo. Antes las stats compartían columna con las
       vías y la Ficha quedaba sola enfrente: media pantalla en blanco. */
    .fp-duo { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:30px; align-items:start; }
    @media (max-width:860px) { .fp-duo { grid-template-columns:minmax(0, 1fr); gap:26px; } }

    /* Las 8 stats en dos paneles con nombre: Golpeo y Lucha. El agrupado no es
       decorativo — es la taxonomía real de las stats de UFC Stats. */
    .fp-stats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 26px; }
    @media (max-width:860px) { .fp-stats { grid-template-columns:minmax(0, 1fr); gap:18px; } }
    .fp-grupo-t {
      display:flex; align-items:center; gap:12px; margin:0 2px 9px;
      font:700 10.5px var(--kk-sans); letter-spacing:0.11em; text-transform:uppercase;
      color:var(--kk-faint);
    }
    .fp-grupo-t::after { content:''; flex:1; height:1px; background:var(--kk-line); }

    .fp-ficha { border:1px solid var(--kk-line); border-radius:14px; overflow:hidden; }
    .fp-ficha-row {
      display:flex; justify-content:space-between; gap:14px;
      padding:11px 15px; border-top:1px solid var(--kk-line); background:var(--kk-panel);
      font:500 13.5px var(--kk-sans);
    }
    .fp-ficha-row:first-child { border-top:none; }
    .fp-ficha-row .k { color:var(--kk-dim); }
    .fp-ficha-row .v { color:var(--kk-text); font-weight:600; text-align:right; }

    /* ── Vías de finalización:barras divergentes sobre un eje central ──
       Derrotas a la izquierda, victorias a la derecha, TODAS en la misma
       escala (peleas, no porcentajes). Tapology dibuja cada lado con su
       propio 100%, y ahí "1 derrota = 100% de las derrotas" pinta una barra
       tan larga como 5 victorias. Con eje único y escala compartida, lo que
       salta a la vista es el desbalance real por vía. */
    /* Panel con borde, como la Ficha de enfrente: los dos lados del duo tienen
       el mismo peso visual. */
    .fp-vias { border:1px solid var(--kk-line); border-radius:14px; padding:14px 16px 12px; }
    .fp-vias-cab {
      display:grid; grid-template-columns:var(--fp-lbl) 1fr 1fr; gap:0 10px;
      font:700 10px var(--kk-sans); letter-spacing:0.09em; text-transform:uppercase;
      color:var(--kk-faint); margin-bottom:9px;
    }
    /* el rótulo de derrotas va pegado al eje, como sus barras */
    .fp-vias-cab .izq { text-align:right; }
    .fp-vias { --fp-lbl: 82px; }
    .fp-via-fila {
      display:grid; grid-template-columns:var(--fp-lbl) 1fr 1fr; gap:0 10px;
      align-items:center; padding:7px 0;
    }
    .fp-via-nom { font:600 12.5px var(--kk-sans); color:var(--kk-dim); text-align:right; }
    /* Las dos mitades son espejo:la de derrotas crece hacia el eje desde la
       izquierda, la de victorias se aleja del eje hacia la derecha. */
    .fp-via-lado { display:flex; align-items:center; gap:8px; min-width:0; }
    /* El padding tiene que ser SIMÉTRICO:con separación sólo de un lado, las
       dos mitades tienen distinto ancho útil y el mismo número dibuja barras
       de largo distinto según de qué lado del eje caiga. */
    .fp-via-lado.izq { border-right:1px solid var(--kk-line-hi); padding-right:10px; }
    /* borde transparente para que el eje le descuente 1px a los dos lados */
    .fp-via-lado.der { padding-left:10px; border-left:1px solid transparent; }
    /* La barra va en su propia pista y el número afuera, con ancho fijo. Si
       comparten caja flex, el número le roba lugar a la barra más larga y sólo
       a esa:3 y 4 peleas salían 154px y 189px en vez de 155 y 207, o sea la
       escala dejaba de ser lineal justo donde más se mira. */
    .fp-via-track { flex:1; min-width:0; display:flex; }
    .fp-via-lado.izq .fp-via-track { justify-content:flex-end; }
    .fp-via-barra { height:16px; border-radius:4px; }
    .fp-via-lado.izq .fp-via-barra { background:rgba(var(--rojo-vivo-rgb), 0.55); }
    .fp-via-n {
      font:700 12.5px var(--kk-sans); font-variant-numeric:tabular-nums;
      color:var(--kk-text); flex:none; min-width:16px;
    }
    .fp-via-lado.izq .fp-via-n { text-align:left; }
    .fp-via-lado.der .fp-via-n { text-align:right; }
    .fp-via-n.cero { color:var(--texto-tenue); font-weight:500; }
    /* El color de la victoria dice la vía; el de la derrota, que es derrota.
       Si ambos lados usaran la paleta de vías no se distinguiría de un lado
       al otro de un vistazo. */
    .fp-via-ko  { background:var(--rojo-vivo); }
    .fp-via-sub { background:var(--violeta); }
    .fp-via-dec { background:var(--panel-3); }
    /* DQ y similares:existen (34 victorias en la base) y sin esta fila el
       desglose sumaba menos que las victorias listadas abajo */
    .fp-via-otro { background:var(--ambar); }
    .fp-vias-pie {
      display:flex; justify-content:space-between; gap:12px;
      margin-top:10px; padding-top:10px; border-top:1px solid var(--kk-line);
      font:500 12px var(--kk-sans); color:var(--kk-faint);
    }
    .fp-vias-pie b { color:var(--kk-dim); font-weight:700; }
    @media (max-width:520px) { .fp-vias { --fp-lbl: 62px; } .fp-via-nom { font-size:11.5px; } }

    .fp-metricas { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
    .fp-metrica {
      background:var(--kk-panel); border:1px solid var(--kk-line);
      border-radius:12px; padding:12px 14px;
    }
    .fp-metrica .mv { font:800 21px var(--kk-sans); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
    .fp-metrica .mv.nd { color:var(--kk-faint); font-size:16px; }
    .fp-metrica .ml { font:500 11.5px var(--kk-sans); color:var(--kk-dim); margin-top:3px; line-height:1.35; }
    /* Percentil divisional: barra fina (track + relleno) + micro-rótulo. La
       frase completa va en el title de .fp-pct (tooltip). */
    .fp-pct { display:flex; align-items:center; gap:8px; margin-top:9px; cursor:help; }
    .fp-pct b { display:block; flex:1; height:4px; border-radius:2px; background:rgba(var(--velo), 0.15); overflow:hidden; }
    .fp-pct i { display:block; height:100%; border-radius:2px; background:var(--marca-vivo); }
    .fp-pct span {
      font:600 10px var(--kk-sans); color:var(--kk-faint); letter-spacing:0.02em;
      font-variant-numeric:tabular-nums; min-width:26px; text-align:right;
    }
    /* percentil de élite (≥88): el rótulo toma el color de marca */
    .fp-pct span.top { color:var(--kk-marca); font-weight:700; }

    /* ── Informe de scouting ── */
    .fp-sc-resumen {
      font:600 18px/1.5 var(--kk-serif); color:var(--kk-text);
      margin:0 0 18px; padding-left:14px; border-left:3px solid var(--marca);
      max-width:70ch; text-wrap:pretty;
    }
    .fp-sc-secs { display:flex; flex-direction:column; gap:16px; }
    .fp-sc-sec h3 {
      font:600 10.5px var(--kk-sans); letter-spacing:.12em; text-transform:uppercase;
      color:var(--marca); margin:0 0 5px;
    }
    .fp-sc-sec p { font:400 14.5px/1.65 var(--kk-sans); color:var(--kk-dim); margin:0; max-width:70ch; }
    @media (max-width:520px) { .fp-sc-resumen { font-size:16px; } }

    /* ── Historial ── */
    .fp-anio {
      display:flex; align-items:center; gap:12px;
      font:700 11px var(--kk-sans); letter-spacing:0.14em; color:var(--kk-faint);
      margin:24px 2px 10px; font-variant-numeric:tabular-nums;
    }
    .fp-anio::after { content:''; flex:1; height:1px; background:var(--kk-line); }
    .fp-anio:first-child { margin-top:0; }

    /* El filo izquierdo dice el resultado sin leer nada: verde ganó, rojo
       perdió (acá el rojo SÍ significa derrota). El hover aclara el borde,
       no el fondo: toda la tarjeta linkea al rival y tiene que sentirse viva
       sin gritar. */
    .fp-pelea {
      display:grid; grid-template-columns:42px minmax(0, 1fr) auto;
      gap:14px; align-items:center;
      padding:12px 15px 12px 13px; border:1px solid var(--kk-line);
      border-left:3px solid var(--kk-line); border-radius:12px;
      background:var(--kk-panel); margin-bottom:8px;
      transition:border-color 0.15s ease;
    }
    .fp-pelea:hover { border-color:var(--kk-line-hi); }
    .fp-pelea.win  { border-left-color:var(--verde); }
    .fp-pelea.loss { border-left-color:var(--rojo-vivo); }
    .fp-res {
      flex:none; width:42px; height:42px; border-radius:11px;
      display:flex; align-items:center; justify-content:center;
      font:800 15px var(--kk-sans);
    }
    .fp-res.win  { background:rgba(var(--verde-rgb), 0.15); color:var(--kk-green); }
    .fp-res.loss { background:rgba(var(--rojo-vivo-rgb), 0.14); color:var(--rojo-vivo); }
    .fp-res.draw, .fp-res.nc { background:rgba(var(--velo), 0.07); color:var(--kk-dim); font-size:12px; }
    .fp-rival { font:700 15px var(--kk-sans); color:var(--kk-text); text-decoration:none; }
    a.fp-rival:hover { color:var(--kk-marca); }

    /* Nombre de peleador con ficha: se ve como el texto que reemplaza (no
       azul, no subrayado) y se delata al pasar el mouse o con el foco. */
    a.fp-link { color:inherit; font:inherit; text-decoration:none; }
    a.fp-link:hover { color:var(--kk-marca); text-decoration:underline; text-underline-offset:2px; }
    a.fp-link:focus-visible { outline:2px solid var(--kk-marca); outline-offset:2px; border-radius:2px; }
    .fp-como { margin-top:4px; font:500 12.5px var(--kk-sans); color:var(--kk-dim); display:flex; align-items:center; flex-wrap:wrap; gap:4px 0; }
    .fp-como .via {
      font-weight:700; margin-right:8px; padding:1.5px 8px; border-radius:6px;
      background:rgba(var(--velo), 0.06); font-size:11.5px; letter-spacing:0.01em;
    }
    .fp-como .via.ko  { color:var(--rojo-vivo); background:rgba(var(--rojo-vivo-rgb), 0.13); }
    .fp-como .via.sub { color:var(--violeta); background:rgba(var(--violeta-rgb), 0.15); }
    .fp-como .via.dec { color:var(--kk-dim); }
    .fp-fecha {
      color:var(--kk-faint); font:500 12.5px var(--kk-sans);
      white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums;
    }
    @media (max-width:560px) {
      .fp-pelea { grid-template-columns:36px minmax(0, 1fr); }
      .fp-res { width:36px; height:36px; border-radius:9px; font-size:13px; }
      .fp-fecha { grid-column:2; text-align:left; }
    }

    /* ── Strip "En llamas" (portada) ── */
    .hot-news { margin-bottom:34px; }
    .hot-news-head {
      display:flex; align-items:baseline; gap:10px;
      font-size:20px; font-weight:800; letter-spacing:-0.02em; margin-bottom:14px;
    }
    .hot-news-head span { font-size:12.5px; font-weight:500; color:var(--k-dim); }

    .hot-news-row {
      display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
    }
    @media (max-width:1000px) { .hot-news-row { grid-template-columns:repeat(2, 1fr); } }
    @media (max-width:560px)  { .hot-news-row { grid-template-columns:1fr; } }

    .hot-card {
      position:relative; display:flex; flex-direction:column; justify-content:flex-end;
      min-height:170px; border-radius:14px; overflow:hidden;
      border:1px solid var(--k-border);
      background-size:cover; background-position:center top;
      background-color:var(--panel);
      text-decoration:none; color:var(--texto-media);
      transition:transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
    }
    .hot-card:hover { transform:translateY(-4px); border-color:rgba(var(--marca-vivo-rgb), 0.5); box-shadow:0 16px 36px rgba(var(--scrim), 0.55); }
    .hot-card::after {
      content:""; position:absolute; inset:0;
      background:linear-gradient(to top, rgba(var(--scrim), 0.94) 22%, rgba(var(--scrim), 0.35) 60%, rgba(var(--scrim), 0.08) 100%);
    }
    .hot-card-body { position:relative; z-index:1; padding:12px 14px; }
    .hot-card-meta {
      display:flex; align-items:center; gap:7px;
      font-size:10.5px; color:rgba(var(--velo-media), 0.75); margin-bottom:6px;
    }
    .hot-flame {
      background:var(--k-marca); color:var(--texto-media); font-weight:800;
      border-radius:5px; padding:1.5px 7px; font-size:10px; letter-spacing:0.05em;
    }
    .hot-card-title { font-size:14.5px; font-weight:700; line-height:1.28; letter-spacing:-0.01em; }


    /* ── Placeholders de noticia (cuando no hay imagen única disponible) ── */
    .news-ph {
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:7px; aspect-ratio:16 / 9;
    }
    .news-ph span { font-size:42px; opacity:0.9; }
    .news-ph b { font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--texto-4); font-weight:700; }
    .news-ph.v0 { background:radial-gradient(ellipse 80% 90% at 25% 15%, rgba(var(--marca-vivo-rgb), 0.18), transparent 60%), var(--fondo-hundido); }
    .news-ph.v1 { background:radial-gradient(ellipse 80% 90% at 75% 85%, rgba(var(--marca-vivo-rgb), 0.14), transparent 55%), var(--fondo); }
    .news-ph.v2 { background:linear-gradient(135deg, var(--panel-alto) 0%, var(--fondo) 65%), var(--fondo);
                  background-blend-mode:normal; border-bottom:2px solid rgba(var(--marca-vivo-rgb), 0.35); }
    .news-ph.v3 { background:repeating-linear-gradient(45deg, rgba(var(--velo), 0.015) 0 10px, transparent 10px 20px), var(--fondo-hundido); }

    .hot-card.hot-ph::before {
      content:attr(data-emoji);
      position:absolute; top:10px; right:12px;
      font-size:46px; opacity:0.22; z-index:0;
    }
    .hot-card.hot-ph.v0 { background:radial-gradient(ellipse 90% 90% at 20% 10%, rgba(var(--marca-vivo-rgb), 0.22), transparent 60%), var(--fondo-hundido); }
    .hot-card.hot-ph.v1 { background:radial-gradient(ellipse 90% 90% at 80% 90%, rgba(var(--marca-vivo-rgb), 0.16), transparent 55%), var(--fondo); }
    .hot-card.hot-ph.v2 { background:linear-gradient(135deg, var(--panel-alto) 0%, var(--fondo) 70%); }
    .hot-card.hot-ph.v3 { background:repeating-linear-gradient(45deg, rgba(var(--velo), 0.02) 0 12px, transparent 12px 24px), var(--fondo-hundido); }
    /* ═══════════════════════════════════════════════════════════════
       KALSHI SKIN — capa final del rediseño (pisa las capas anteriores)
       Terminal de mercado:fondo casi negro, UN acento (rojo), serif
       editorial en titulares, sans (Inter) en UI y datos.
       ═══════════════════════════════════════════════════════════════ */
    :root {
      --kk-bg: var(--fondo);
      --kk-panel: var(--fondo-hundido);
      --kk-panel-2: var(--panel);
      --kk-line: var(--borde-sutil);
      --kk-line-hi: var(--borde-fuerte);
      --kk-text: var(--texto);
      --kk-dim: var(--texto-3);
      --kk-faint: var(--texto-tenue);
      --kk-marca: var(--marca-vivo);
      --kk-marca-fuerte: var(--marca-logo);
      --kk-marca-suave: rgba(var(--marca-vivo-rgb), 0.12);
      --kk-green: var(--verde);
      --kk-blue: var(--azul);
      --kk-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
      --kk-sans: 'Inter', 'Poppins', 'Segoe UI', sans-serif;
      /* retarget de la capa anterior:toda la UI de apuestas hereda esto */
      --k-bg: var(--kk-bg);
      --k-card: var(--kk-panel);
      --k-card-2: var(--kk-panel-2);
      --k-border: var(--kk-line);
      --k-border-hi: var(--kk-line-hi);
      --k-dim: var(--kk-dim);
      --k-marca: var(--kk-marca);
      --k-marca-suave: var(--kk-marca-suave);
    }

    body {
      background:var(--kk-bg);
      color:var(--kk-text);
      font-family:var(--kk-sans);
      letter-spacing:0;
    }
    ::selection { background:rgba(var(--marca-vivo-rgb), 0.30); }
    ::-webkit-scrollbar-thumb { border-color:var(--kk-bg); }

    /* Red de seguridad contra recortes:casi todas las fotos del sitio (banners
       de evento, headshots de peleadores) tienen lo importante arriba, y el
       default del navegador para object-fit:cover es recortar desde el CENTRO.
       Esta regla de baja especificidad (selector de elemento) fija "arriba" como
       default para CUALQUIER img — una clase específica que declare su propio
       object-position (los avatares circulares, por ejemplo) sigue ganando por
       especificidad, así que esto no rompe nada existente; solo cubre a toda
       imagen nueva que alguien agregue sin pensar en el recorte. */
    img { object-position:top; }

    /* Cuando la única foto disponible es el avatar chico de perfil (~200px),
       estirarlo a lo grande con cover pixela y genera halos de nitidez falsa.
       Mismo truco que ya usa el modal de noticias:fondo desenfocado de la
       MISMA foto (llena la caja, sin barras vacías) + la foto nítida completa
       centrada arriba, sin recortar ni estirar más allá de su tamaño real. */
    img.img-contain { object-fit:contain; background:var(--kk-panel); }
    .ph-frame { position:relative; overflow:hidden; }
    .ph-bg {
      position:absolute;
      inset:-15%;
      background-size:cover;
      background-position:center;
      filter:blur(18px) brightness(0.55) saturate(1.15);
    }
    .ph-fg {
      position:relative;
      width:100%;
      height:100%;
      object-fit:contain;
    }

    /* ── NAV doble barra ── */
    nav {
      display:block;
      padding:0;
      background:var(--kk-bg);
      border-bottom:1px solid var(--kk-line);
      -webkit-backdrop-filter:none;
      backdrop-filter:none;
    }
    .nav-top {
      display:flex;
      align-items:center;
      gap:22px;
      padding:12px 32px;
      max-width:1500px;
      margin:0 auto;
    }
    .logo { gap:8px; align-items:center; }
    /* Especificidad (0,2,0) para ganarle a `.logo img` de la capa original,
       que fija 136x68 con object-fit:cover y recortaría el lockup. */
    .logo .logo-img {
      display:block;
      height:32px;
      width:auto;
    }
    /* Compensa la irradiación óptica de "LYTIC" en blanco puro sobre el
       fondo casi negro del tema oscuro (ver --logo-lytic-escala en
       tema.css) — en claro el token vale 1 y esto no hace nada. */
    .logo-lytic {
      transform:scale(var(--logo-lytic-escala));
      transform-box:fill-box;
      transform-origin:0% 100%;
    }
    .nav-main { display:flex; list-style:none; gap:2px; }
    .nav-main li a {
      display:block;
      text-transform:uppercase;
      font:600 12px/1 var(--kk-sans);
      letter-spacing:0.09em;
      color:var(--kk-dim);
      padding:11px 12px;
      border-radius:8px;
      background:none;
      text-decoration:none;
      transition:color 0.15s;
    }
    .nav-main li a:hover, .nav-main li a.active { color:var(--texto); background:none; }
    .nav-search {
      flex:1;
      min-width:120px;
      max-width:460px;
      margin:0 auto;
      display:flex;
      align-items:center;
      gap:10px;
      background:var(--fondo-hundido);
      border:1px solid var(--kk-line);
      border-radius:10px;
      height:40px;
      padding:0 14px;
      color:var(--kk-faint);
      transition:border-color 0.15s;
    }
    .nav-search:focus-within { border-color:var(--kk-line-hi); }
    .nav-search .hero-search-input {
      background:none;
      border:0;
      outline:0;
      color:var(--kk-text);
      font:400 14px var(--kk-sans);
      width:100%;
      padding:0;
    }
    .nav-search .hero-search-input::placeholder { color:var(--kk-faint); }
    .nav-actions { display:flex; gap:10px; flex-shrink:0; }
    .nav-btn {
      display:inline-block;
      font:600 13.5px/1 var(--kk-sans);
      padding:12px 18px;
      border-radius:10px;
      text-decoration:none;
      transition:background 0.15s, border-color 0.15s;
    }
    .nav-btn.ghost { color:var(--kk-text); border:1px solid var(--kk-line); background:var(--fondo-hundido); }
    .nav-btn.ghost:hover { border-color:var(--kk-line-hi); }
    .nav-btn.solid { color:var(--marca-logo-texto); background:var(--kk-marca-fuerte); }
    .nav-btn.solid:hover { background:var(--marca-logo-hover); }
    /* El buscador es `flex:1; margin:auto`: se centra en el espacio que le
       sobra entre el logo y las acciones, no en el ancho total del nav. Como
       "Entrar" + "Crear cuenta" (~298px) pesan mucho más que el logo (~78px),
       quedaba corrido a la izquierda y no alineaba con las secciones de abajo
       (que sí se centran en el ancho total). Reservando en el logo el mismo
       ancho que ocupan las acciones, el espacio le queda simétrico y el
       buscador cae en el centro real — sólo en desktop, donde "Entrar" está
       visible (a los ≤760px se oculta y las acciones se angostan). */
    @media (min-width: 761px) {
      .logo { min-width:300px; }
    }
    .nav-sub { max-width:1500px; margin:0 auto; padding:0 32px; }
    .nav-sub ul {
      display:flex;
      /* `safe` cae a flex-start si centrar desborda:en mobile, centrado a
         secas deja "Eventos" fuera de pantalla a la izquierda y sin forma de
         llegar (scrollLeft no puede ser negativo). */
      justify-content: safe center;
      gap:24px;
      list-style:none;
      overflow-x:auto;
      scrollbar-width:none;
      padding:2px 0 12px;
    }
    .nav-sub ul::-webkit-scrollbar { display:none; }
    .nav-sub a {
      color:var(--kk-dim);
      font:500 14.5px/1.2 var(--kk-sans);
      text-decoration:none;
      white-space:nowrap;
      transition:color 0.15s;
      padding:0;
      border-radius:0;
      background:none;
    }
    .nav-sub a:hover { color:var(--kk-text); background:none; }
    .nav-sub a.active { color:var(--texto); font-weight:600; background:none; box-shadow:none; }

    /* ── HOME BOARD (hero) ── */
    /* El hero viejo quedó vacío (solo lo referencia el JS de navegación) */
    .hero, .hero.active { display:none; }
    .kb { display:grid; grid-template-columns:minmax(0, 1fr) 330px; gap:18px; align-items:start; text-align:left; }
    .kb-main .hot-news { margin:24px 0 4px; }
    .kb-main .section-title { margin:26px 0 16px; }
    .kb-main .events-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
    .kb-main { min-width:0; }

    .kb-feat {
      background:var(--kk-panel);
      border:1px solid var(--kk-line);
      border-radius:14px;
      padding:20px 24px 16px;
      min-height:330px;
    }
    .kf-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .kf-kicker { display:flex; align-items:center; gap:10px; min-width:0; }
    .kf-avas { display:flex; }
    .kf-avas img, .kf-avas .kf-ava-fb {
      width:30px; height:30px; border-radius:50%;
      object-fit:cover; object-position:top;
      background:var(--kk-panel-2);
      border:1.5px solid var(--kk-line-hi);
      display:inline-flex; align-items:center; justify-content:center;
      font:700 11px var(--kk-sans); color:var(--kk-dim);
    }
    .kf-avas > *:not(:first-child) { margin-left:-9px; }
    .kf-label {
      text-transform:uppercase;
      font:600 11.5px var(--kk-sans);
      letter-spacing:0.09em;
      color:var(--kk-dim);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .kf-nav { display:flex; align-items:center; gap:10px; flex-shrink:0; color:var(--kk-dim); font:500 13px var(--kk-sans); }
    .kf-arrow {
      width:32px; height:32px; border-radius:50%;
      background:none; border:1px solid var(--kk-line);
      color:var(--kk-dim); font-size:15px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:border-color 0.15s, color 0.15s;
    }
    .kf-arrow:hover { border-color:var(--kk-line-hi); color:var(--texto); }
    .kf-q {
      font:600 29px/1.2 var(--kk-serif);
      letter-spacing:-0.01em;
      margin:12px 0 16px;
    }
    .kf-body { display:grid; grid-template-columns:320px minmax(0, 1fr); gap:26px; align-items:start; }
    .kf-cols {
      display:grid;
      grid-template-columns:1fr 62px 58px;
      gap:8px;
      color:var(--kk-faint);
      font:500 11.5px var(--kk-sans);
      text-transform:uppercase;
      letter-spacing:0.06em;
      padding-bottom:8px;
    }
    .kf-cols span:not(:first-child) { text-align:right; }
    .kf-row {
      display:grid;
      grid-template-columns:1fr 62px 58px;
      gap:8px;
      align-items:center;
      padding:10px 0;
    }
    .kf-row + .kf-row { border-top:1px dashed var(--kk-line); }
    .kf-name { min-width:0; }
    .kf-name b {
      display:inline-block;
      font:600 15.5px var(--kk-sans);
      color:var(--kk-text);
      padding-bottom:5px;
      border-bottom:2px solid var(--kk-marca);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:100%;
    }
    .kf-row.dog .kf-name b { border-bottom-color:var(--kk-blue); }
    .kf-name small { display:block; color:var(--kk-faint); font-size:12px; margin-top:4px; }
    .kf-pay { text-align:right; color:var(--kk-dim); font:500 14px var(--kk-sans); font-variant-numeric:tabular-nums; }
    .kf-pill {
      justify-self:end;
      font:700 14px var(--kk-sans);
      font-variant-numeric:tabular-nums;
      color:var(--kk-text);
      border:1.5px solid var(--kk-marca);
      border-radius:999px;
      padding:6px 0;
      width:58px;
      text-align:center;
    }
    .kf-row.dog .kf-pill { border-color:var(--kk-line-hi); color:var(--kk-dim); }
    .kf-more { color:var(--kk-faint); font-size:12.5px; padding-top:10px; }
    .kf-chart { min-width:0; }
    .kf-legend { display:flex; gap:18px; margin-bottom:6px; color:var(--kk-dim); font-size:12.5px; }
    .kf-legend i {
      display:inline-block;
      width:8px; height:8px;
      border-radius:50%;
      margin-right:6px;
      vertical-align:1px;
    }
    .kf-legend b { color:var(--kk-text); font-variant-numeric:tabular-nums; }
    .kf-chart .bet-chart-note { color:var(--kk-faint); font-size:12.5px; text-align:center; padding:40px 10px; }
    .kf-foot {
      display:flex;
      justify-content:space-between;
      align-items:center;
      border-top:1px solid var(--kk-line);
      margin-top:14px;
      padding-top:12px;
      color:var(--kk-faint);
      font-size:12.5px;
    }
    .kf-foot a { color:var(--kk-dim); text-decoration:none; font-weight:600; }
    .kf-foot a:hover { color:var(--texto); }

    .kb-trust { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:14px; }
    .kb-trust-card {
      display:flex;
      gap:12px;
      align-items:center;
      background:var(--kk-panel);
      border:1px solid var(--kk-line);
      border-radius:12px;
      padding:14px 16px;
      text-decoration:none;
      transition:border-color 0.15s, background 0.15s;
    }
    .kb-trust-card:hover { border-color:var(--kk-line-hi); background:var(--kk-panel-2); }
    .kb-trust-ic { display:flex; align-items:center; color:var(--kk-marca); flex-shrink:0; }
    .kb-trust-card b { display:block; color:var(--kk-text); font:600 13.5px var(--kk-sans); }
    .kb-trust-card small { display:block; color:var(--kk-faint); font-size:12px; margin-top:2px; line-height:1.35; }

    .kb-side { display:flex; flex-direction:column; gap:14px; min-width:0; }
    .kb-promo {
      display:block;
      background:radial-gradient(ellipse 120% 90% at 100% 0%, rgba(var(--marca-vivo-rgb), 0.16) 0%, transparent 55%),
        var(--kk-panel);
      border:1px solid var(--kk-line);
      border-radius:14px;
      padding:18px;
      text-decoration:none;
      transition:border-color 0.15s;
    }
    .kb-promo:hover { border-color:var(--kk-line-hi); }
    .kb-promo-badge {
      display:inline-block;
      font:700 11px var(--kk-sans);
      text-transform:uppercase;
      letter-spacing:0.09em;
      color:var(--kk-marca);
    }
    .kb-promo-badge i {
      font-style:normal;
      color:var(--kk-dim);
      border:1px solid var(--kk-line-hi);
      border-radius:999px;
      padding:1px 7px;
      margin-left:6px;
      font-size:10px;
    }
    .kb-promo-title { display:block; font:600 19px var(--kk-serif); color:var(--kk-text); margin:8px 0 6px; }
    .kb-promo-sub { display:block; color:var(--kk-dim); font-size:13px; line-height:1.5; }
    .kb-promo-cta {
      display:inline-block;
      margin-top:14px;
      font:600 13px var(--kk-sans);
      color:var(--kk-text);
      border:1px solid var(--kk-line-hi);
      border-radius:999px;
      padding:9px 16px;
    }
    .kb-side-block {
      background:var(--kk-panel);
      border:1px solid var(--kk-line);
      border-radius:14px;
      padding:6px 0 4px;
    }
    .kb-side-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 16px 8px;
    }
    .kb-side-head h4 { font:600 15.5px var(--kk-sans); color:var(--kk-text); }
    .kb-side-head a { color:var(--kk-faint); font-size:18px; text-decoration:none; line-height:1; }
    .kb-side-head a:hover { color:var(--texto); }
    .kbe, .kbt {
      display:block;
      padding:10px 16px;
      text-decoration:none;
      border-top:1px solid var(--kk-line);
      transition:background 0.15s;
      cursor:pointer;
    }
    .kbe:hover, .kbt:hover { background:var(--kk-panel-2); }
    .kbe-name { display:block; color:var(--kk-text); font:600 13.5px var(--kk-sans); line-height:1.35; }
    .kbe-meta { display:block; color:var(--kk-faint); font-size:12px; margin-top:3px; }
    .kbt-title {
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      color:var(--kk-text);
      font:500 13px/1.4 var(--kk-sans);
    }
    .kbt-meta { display:block; color:var(--kk-faint); font-size:11.5px; margin-top:3px; }
    .kbt-meta .hot { color:var(--kk-marca); font-weight:600; }
    .kb-empty { color:var(--kk-faint); font-size:13px; padding:10px 16px; }

    /* ── Secciones ── */
    section { max-width:1500px; margin:0 auto; }
    .section-title {
      font:600 24px/1.2 var(--kk-serif);
      letter-spacing:-0.01em;
      background:none;
      -webkit-text-fill-color:currentColor;
      color:var(--kk-text);
    }

    /* ── Cards planas en todo el sitio ── */
    .event-card, .fighter-card, .arena-panel, .lookup-box,
    .duel-card, .badge-card, .gym-card, .sim-result-card, .bet-fight,
    .bet-learn-card, .news-card, .esc-card {
      background:var(--kk-panel);
      border:1px solid var(--kk-line);
      border-radius:12px;
      box-shadow:none;
    }
    .event-card:hover, .fighter-card:hover, .news-card:hover, .esc-card:hover {
      background:var(--kk-panel-2);
      border-color:var(--kk-line-hi);
      transform:none;
      box-shadow:none;
    }

    /* ── Tabs → subrayado tipo terminal ── */
    .bet-tab, .arena-tabs .tab-btn, .rankings-tabs button {
      background:none;
      border:0;
      border-bottom:2px solid transparent;
      border-radius:0;
      color:var(--kk-dim);
      font:500 14.5px var(--kk-sans);
      padding:10px 2px;
      margin-right:20px;
      cursor:pointer;
      transition:color 0.15s, border-color 0.15s;
    }
    .bet-tabs, .arena-tabs, .rankings-tabs { gap:0; border-bottom:1px solid var(--kk-line); flex-wrap:wrap; }
    .bet-tab:hover, .arena-tabs .tab-btn:hover, .rankings-tabs button:hover { color:var(--kk-text); background:none; }
    .bet-tab.active, .arena-tabs .tab-btn.active, .rankings-tabs button.active {
      background:none;
      color:var(--texto);
      font-weight:600;
      border-bottom-color:var(--kk-marca);
      box-shadow:none;
    }

    /* ── Botones primarios ── */
    .lookup-btn, .sim-fight-btn, .hero-cta.primary {
      background:var(--kk-marca-fuerte);
      border:0;
      border-radius:10px;
      color:var(--marca-logo-texto);
      font:600 14px var(--kk-sans);
      box-shadow:none;
    }
    .lookup-btn:hover, .sim-fight-btn:hover { background:var(--marca-logo-hover); transform:none; box-shadow:none; }

    /* ── Footer estilo mercado ── */
    footer {
      border-top:1px solid var(--kk-line);
      margin-top:40px;
      padding:0;
      background:none;
    }
    .foot-grid {
      max-width:1500px;
      margin:0 auto;
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:24px;
      padding:30px 32px 6px;
    }
    .foot-col h5 {
      text-transform:uppercase;
      font:600 11.5px var(--kk-sans);
      letter-spacing:0.09em;
      color:var(--kk-faint);
      margin-bottom:12px;
    }
    .foot-col a {
      display:block;
      color:var(--kk-dim);
      text-decoration:none;
      font-size:13.5px;
      padding:5px 0;
      transition:color 0.15s;
    }
    .foot-col a:hover { color:var(--kk-text); }
    .foot-base {
      max-width:1500px;
      margin:0 auto;
      padding:18px 32px 26px;
      color:var(--kk-faint);
      font-size:12.5px;
      border-top:1px solid var(--kk-line);
      margin-top:22px;
    }

    /* ── Modales y dropdown de búsqueda ── */
    /* Ojo:`.news-modal` NO va acá. Ya no es una caja flotante sino el
       contenedor a página completa de la nota; con panel y borde se dibujaba
       un recuadro en el medio de la pantalla. */
    .modal { background:var(--kk-panel); border:1px solid var(--kk-line); }
    .fsug { background:var(--kk-panel); border:1px solid var(--kk-line-hi); border-radius:12px; }

    /* ── Evento destacado en portada ── */
    .ke-all { color:var(--kk-dim); font:600 12.5px var(--kk-sans); text-decoration:none; white-space:nowrap; }
    .ke-all:hover { color:var(--texto); }
    .ke-main {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:34px;
      padding:22px 0 26px;
    }
    .ke-fighter { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:150px; }
    .ke-photo {
      width:84px; height:84px;
      border-radius:50%;
      object-fit:cover; object-position:top;
      background:var(--kk-panel-2);
      border:1px solid var(--kk-line-hi);
      margin-bottom:8px;
    }
    .ke-photo-fb {
      display:flex; align-items:center; justify-content:center;
      font:700 26px var(--kk-serif); color:var(--kk-faint);
    }
    /* Foto de cuerpo entero:el PNG es un cutout con transparencia real (medido:
       alpha 0 en los bordes) y bastante margen vacío arriba/abajo del canvas
       original — se recorta con una altura fija + object-position para que la
       figura ocupe el espacio en vez del aire de sobra. */
    .ke-fighter-full { min-width:0; gap:0; }
    .ke-photo-full {
      /* El PNG real mide ~614×1896 (relación ~1:3.1). object-fit:contain +
         una altura acorde a esa relación muestra el cuerpo completo; object-
         position:bottom ancla los pies abajo para que los dos peleadores
         queden parados en la misma línea de piso. */
      width: 150px; height:465px;
      object-fit:contain; object-position:bottom;
      margin-bottom:6px;
    }
    .ke-fighter b { font:600 16px var(--kk-sans); color:var(--kk-text); text-align:center; }
    .ke-fighter small { color:var(--kk-faint); font-size:12.5px; font-variant-numeric:tabular-nums; }
    .ke-vs {
      font:700 13px var(--kk-sans);
      letter-spacing:0.08em;
      color:var(--kk-marca);
      border:1.5px solid var(--kk-marca-suave);
      background:var(--kk-marca-suave);
      border-radius:999px;
      padding:8px 13px;
    }

    /* ── Widget compacto de mercado (sidebar) ── */
    .kbm {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 16px;
      text-decoration:none;
      border-top:1px solid var(--kk-line);
      transition:background 0.15s;
    }
    .kbm:hover { background:var(--kk-panel-2); }
    .kbm-names { color:var(--kk-text); font:500 13.5px var(--kk-sans); min-width:0; }
    .kbm-names small { display:block; color:var(--kk-faint); font-size:11.5px; margin-top:2px; }
    .kbm-val { text-align:right; flex-shrink:0; }
    .kbm-val b {
      display:block;
      font:700 14px var(--kk-sans);
      color:var(--kk-marca);
      font-variant-numeric:tabular-nums;
    }
    .kbm-val small { color:var(--kk-faint); font-size:11px; }
    .hotdot {
      display:inline-block;
      width:6px; height:6px;
      border-radius:50%;
      background:var(--kk-marca);
      margin-right:5px;
      vertical-align:1px;
    }

    /* ── Eventos:cards estilo mercado ── */
    .event-card { padding:16px 18px; cursor:pointer; }
    .event-type {
      background:none;
      border:0;
      padding:0;
      font:600 11px var(--kk-sans);
      text-transform:uppercase;
      letter-spacing:0.09em;
      color:var(--kk-marca);
      border-radius:0;
    }
    .event-card.completed .event-type, .event-type.done { color:var(--kk-faint); }
    .event-date { color:var(--kk-faint); font:500 12px var(--kk-sans); }
    .event-card h3 { font:600 18.5px/1.25 var(--kk-serif); letter-spacing:-0.01em; }
    .event-card .location { color:var(--kk-faint); font-size:12.5px; }
    .main-event-label {
      font:600 10.5px var(--kk-sans);
      text-transform:uppercase;
      letter-spacing:0.09em;
      color:var(--kk-faint);
    }
    .event-result { color:var(--kk-dim); font-size:13px; }

    /* ── En llamas (banda de portada) ── */
    .hot-news-head {
      font:600 15.5px var(--kk-sans);
      color:var(--kk-text);
    }
    .hot-news-head span { color:var(--kk-faint); font-weight:400; }
    .hot-card { border-radius:12px; }
    .hot-card:hover { transform:none; box-shadow:none; border-color:var(--kk-line-hi); }

    /* ── Noticias ── */
    .news-card { border-radius:12px; }
    .news-src {
      background:none;
      border:0;
      padding:0;
      color:var(--kk-marca);
      font:600 11px var(--kk-sans);
      text-transform:uppercase;
      letter-spacing:0.08em;
    }
    .news-card h3, .news-card .news-title { font-family:var(--kk-sans); }

    /* ── Portada de noticias estilo diario (jerarquía BBC) ── */
    #news-grid { display:block; }
    .nz article { cursor:pointer; }
    .nz article:hover h3, .nz article:hover h4 { text-decoration:underline; text-underline-offset:3px; }
    .nz-kicker {
      font:600 11px var(--kk-sans);
      text-transform:uppercase;
      letter-spacing:0.07em;
      color:var(--kk-faint);
      margin-top:8px;
    }

    .nz-lead {
      display:grid;
      grid-template-columns:minmax(0, 1.85fr) minmax(0, 1fr);
      gap:26px;
      padding-bottom:26px;
      border-bottom:1px solid var(--kk-line);
    }
    .nz-lead-img {
      width:100%;
      aspect-ratio:16 / 9;
      object-fit:cover;
      object-position:top;
      border-radius:12px;
      background:var(--kk-panel);
      display:block;
    }
    .nz-lead-title {
      font:600 30px/1.15 var(--kk-serif);
      letter-spacing:-0.01em;
      color:var(--kk-text);
      margin:8px 0 10px;
    }
    .nz-lead-sum { color:var(--kk-dim); font-size:15px; line-height:1.6; max-width:640px; }
    .nz-lead-side { display:flex; flex-direction:column; }
    .nz-side-item {
      display:flex;
      gap:14px;
      justify-content:space-between;
      align-items:flex-start;
      padding:14px 0;
    }
    .nz-side-item + .nz-side-item { border-top:1px solid var(--kk-line); }
    .nz-side-item:first-child { padding-top:0; }
    .nz-side-txt { min-width:0; }
    .nz-side-txt .nz-kicker { margin:0 0 5px; }
    .nz-side-item h4 { font:600 15px/1.35 var(--kk-sans); color:var(--kk-text); }
    .nz-side-thumb {
      width:92px;
      height:62px;
      object-fit:cover;
      object-position:top;
      border-radius:8px;
      flex-shrink:0;
      background:var(--kk-panel);
    }

    .nz-sec { margin-top:26px; }
    .nz-sec-head {
      font:600 20px var(--kk-serif);
      color:var(--kk-text);
      padding-top:14px;
      border-top:1px solid var(--kk-line);
      margin-bottom:14px;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .nz-sec-kicker {
      font:600 10.5px var(--kk-sans);
      text-transform:uppercase;
      letter-spacing:0.09em;
      color:var(--kk-marca);
    }
    .nz-sec-fighter img {
      width:30px;
      height:30px;
      border-radius:50%;
      object-fit:cover;
      object-position:top;
      border:1px solid var(--kk-line-hi);
      background:var(--kk-panel-2);
    }

    .nz-cards4 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
    .nz-card-img {
      width:100%;
      aspect-ratio:16 / 9;
      object-fit:cover;
      object-position:top;
      border-radius:10px;
      background:var(--kk-panel);
      display:block;
      margin-bottom:9px;
    }
    .nz-card h4 { font:600 14.5px/1.35 var(--kk-sans); color:var(--kk-text); }
    .nz-card .nz-kicker { margin-top:6px; }

    .nz-cards3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
    .nz-tcard {
      background:var(--kk-panel);
      border:1px solid var(--kk-line);
      border-radius:12px;
      padding:14px 16px;
      transition:border-color 0.15s, background 0.15s;
    }
    .nz-tcard:hover { border-color:var(--kk-line-hi); background:var(--kk-panel-2); }
    .nz-tcard h4 { font:600 15.5px/1.35 var(--kk-sans); color:var(--kk-text); }
    .nz-tcard p {
      color:var(--kk-faint);
      font-size:12.5px;
      line-height:1.5;
      margin-top:6px;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }

    .nz-list2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 32px; }
    .nz-li { padding:12px 0; border-bottom:1px solid var(--kk-line); }
    .nz-li h4 { font:600 15px/1.4 var(--kk-sans); color:var(--kk-text); }
    .nz-li .nz-kicker { margin-top:4px; }

    @media (max-width:1000px) {
      .nz-lead { grid-template-columns:1fr; }
      .nz-cards4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .nz-cards3 { grid-template-columns:1fr; }
      .nz-list2 { grid-template-columns:1fr; }
      .nz-lead-title { font-size:24px; }
    }

    /* ── Tarjetas "aprender" de apuestas sin ícono ── */
    .bet-learn-card .ic { display:none; }
    .bet-learn-card h4 { font:600 17px var(--kk-serif); }

    /* ── Biblioteca:cards editoriales modernas ── */
    .esc-grid { grid-template-columns:repeat(auto-fill, minmax(min(100%, 235px), 1fr)); gap:14px; }
    .esc-card { border-radius:12px; }
    .esc-card:hover { transform:none; }
    /* Fondo de marca para las tarjetas sin foto:el emoji queda sobre un degradado
       en vez de negro pelado. Cuando hay imagen, ésta lo tapa por completo. */
    .esc-card-img, .esc-modal-hero {
      background:radial-gradient(120% 120% at 50% 0%, rgba(var(--marca-vivo-rgb), 0.16) 0%, transparent 60%),
        linear-gradient(160deg, var(--panel-alto) 0%, var(--fondo) 100%);
    }
    .esc-card-img { aspect-ratio:16 / 9; }
    .esc-card-img::after {
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent 50%, rgba(var(--scrim), 0.55) 100%);
      pointer-events:none;
    }
    .esc-card-img img { transition:transform 0.35s ease; }
    .esc-card:hover .esc-card-img img { transform:scale(1.05); }
    .esc-chip {
      background:none;
      border:0;
      padding:0;
      border-radius:0;
      color:var(--kk-marca);
      font:600 10.5px var(--kk-sans);
      letter-spacing:0.09em;
    }
    .esc-card-name { font:600 17.5px/1.25 var(--kk-serif); letter-spacing:-0.01em; }
    .esc-card-sum { color:var(--kk-faint); font-size:12.5px; }
    .esc-intro {
      background:var(--kk-panel);
      border:1px solid var(--kk-line);
      border-radius:12px;
      padding:14px 18px;
      color:var(--kk-dim);
      font-size:13.5px;
      line-height:1.55;
    }
    .esc-tagline { color:var(--kk-dim); }
    .esc-foot { color:var(--kk-faint); }
    .esc-modal { background:var(--kk-panel); border:1px solid var(--kk-line); }

    /* ── Glosario de términos (tab "Términos" de la Escuela) ── */
    .esc-glossary { display:none; }
    .esc-gl-search {
      width:100%;
      padding:12px 16px;
      background:var(--kk-panel);
      border:1px solid var(--kk-line);
      border-radius:10px;
      color:var(--kk-text);
      font:400 14px var(--kk-sans);
      outline:none;
      transition:border-color 0.15s;
    }
    .esc-gl-search:focus { border-color:var(--kk-line-hi); }
    .esc-gl-search::placeholder { color:var(--kk-faint); }
    .esc-gl-count { margin:10px 2px 6px; color:var(--kk-faint); font-size:12px; }
    .esc-gl-list {
      background:var(--kk-panel);
      border:1px solid var(--kk-line);
      border-radius:12px;
      overflow:hidden;
    }
    .esc-gl-row { padding:15px 18px; border-top:1px solid var(--kk-line); }
    .esc-gl-row:first-child { border-top:none; }
    .esc-gl-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
    .esc-gl-term { color:var(--texto); font:600 17px/1.3 var(--kk-serif); letter-spacing:-0.01em; }
    .esc-gl-head .esc-chip { margin-bottom:0; }
    .esc-gl-alias { margin-top:3px; color:var(--kk-faint); font-size:12px; }
    .esc-gl-def { margin:7px 0 0; color:var(--kk-dim); font-size:13.5px; line-height:1.65; }
    .esc-gl-empty { padding:26px 18px; color:var(--kk-faint); font-size:13.5px; }

    /* ── Interruptor de tema ── */
    .tema-btn {
      display:inline-flex; align-items:center; justify-content:center; flex:none;
      width:38px; height:38px;
      background:var(--fondo-hundido); border:1px solid var(--borde-sutil);
      border-radius:10px; cursor:pointer; color:var(--texto-3);
      transition:border-color 0.15s, color 0.15s;
    }
    .tema-btn:hover { border-color:var(--borde-fuerte); color:var(--texto); }
    .tema-btn svg { width:17px; height:17px; display:block; }

    /* ── Selector de idioma ── */
    .lang-switch { position:relative; flex:none; }
    .lang-btn {
      display:inline-flex; align-items:center; gap:7px;
      background:var(--fondo-hundido); border:1px solid var(--kk-line);
      border-radius:10px; padding:9px 11px; cursor:pointer;
      color:var(--kk-dim); font:600 12.5px/1 var(--kk-sans);
      transition:border-color 0.15s, color 0.15s;
    }
    .lang-btn:hover { border-color:var(--kk-line-hi); color:var(--kk-text); }
    .lang-btn svg:first-child { border-radius:2px; flex:none; }
    .lang-caret { opacity:0.7; }
    .lang-menu {
      display:none; position:absolute; right:0; top:calc(100% + 6px);
      min-width:168px; z-index:120;
      background:var(--kk-panel); border:1px solid var(--kk-line-hi);
      border-radius:11px; padding:5px; overflow:hidden;
      box-shadow:0 12px 32px rgba(var(--scrim), 0.55);
    }
    .lang-menu.open { display:block; }
    .lang-opt {
      display:flex; align-items:center; gap:10px; width:100%;
      background:none; border:0; border-radius:8px; cursor:pointer;
      padding:10px 11px; color:var(--kk-dim);
      font:500 13.5px/1 var(--kk-sans); text-align:left;
    }
    .lang-opt:hover { background:var(--kk-panel-2); color:var(--kk-text); }
    .lang-opt.on { color:var(--texto); font-weight:600; }
    .lang-opt svg { border-radius:2px; flex:none; }

    /* ── Cuenta de usuario ── */
    /* Los botones de la nav reusan .nav-btn (mismo tamaño y peso que tenían
       "Comparar" y "La Arena", que vivían acá antes). */
    .nav-btn { border:0; cursor:pointer; font-family:var(--kk-sans); }

    .nav-user {
      display:inline-flex; align-items:center; gap:8px;
      background:var(--fondo-hundido); border:1px solid var(--kk-line);
      border-radius:10px; padding:9px 13px; cursor:pointer;
      font:600 13.5px/1 var(--kk-sans); color:var(--kk-text);
      transition:border-color 0.15s;
    }
    .nav-user:hover { border-color:var(--kk-line-hi); }
    .nav-user-dot {
      width:7px; height:7px; border-radius:50%; flex:none;
      background:var(--kk-green, var(--verde));
      box-shadow:0 0 0 3px rgba(var(--verde-rgb), 0.15);
    }
    .nav-user-nick { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .nav-user-out {
      color:var(--kk-faint); font-weight:500; font-size:12px;
      padding-left:8px; border-left:1px solid var(--kk-line);
    }
    .nav-user:hover .nav-user-out { color:var(--kk-marca); }

    /* Aviso para el invitado dentro de La Arena. Sin botones a propósito:el
       llamado a la acción vive en la nav, repetirlo sería ruido. */
    .acct { margin-bottom:14px; }
    .acct-note {
      background:var(--kk-panel); border:1px solid var(--kk-line);
      border-radius:12px; padding:12px 15px;
      color:var(--kk-faint); font-size:13px; line-height:1.55;
    }
    .acct-note a { color:var(--kk-marca); text-decoration:none; font-weight:600; }
    .acct-note a:hover { text-decoration:underline; }

    .acct-btn {
      font:600 13px/1 var(--kk-sans); padding:11px 15px;
      border-radius:9px; cursor:pointer; white-space:nowrap;
      transition:background 0.15s, border-color 0.15s;
    }
    .acct-btn.ghost { color:var(--kk-text); background:var(--fondo-hundido); border:1px solid var(--kk-line); }
    .acct-btn.ghost:hover { border-color:var(--kk-line-hi); }
    .acct-btn.solid { color:var(--marca-logo-texto); background:var(--kk-marca-fuerte); border:1px solid transparent; }
    .acct-btn.solid:hover { background:var(--marca-logo-hover); }
    .acct-btn:disabled { opacity:0.6; cursor:default; }

    /* Modal de cuenta */
    .auth-overlay {
      position:fixed; inset:0; z-index:200;
      display:none; align-items:center; justify-content:center;
      background:rgba(var(--scrim), 0.72); padding:20px;
    }
    .auth-overlay.open { display:flex; }
    .auth-box {
      position:relative; width:100%; max-width:380px;
      background:var(--kk-panel); border:1px solid var(--kk-line-hi);
      border-radius:16px; padding:26px 24px 22px;
      max-height:90vh; overflow-y:auto;
    }
    .auth-close {
      position:absolute; top:10px; right:12px;
      width:34px; height:34px; border:0; background:none;
      color:var(--kk-faint); font-size:26px; line-height:1; cursor:pointer;
    }
    .auth-close:hover { color:var(--kk-text); }
    .auth-title { margin:0; color:var(--texto); font:600 21px/1.2 var(--kk-serif); letter-spacing:-0.01em; }
    .auth-sub { margin:7px 0 18px; color:var(--kk-dim); font-size:13.5px; line-height:1.5; }
    .auth-lab { display:block; margin-bottom:13px; color:var(--kk-dim); font:500 12.5px var(--kk-sans); }
    .auth-in {
      display:block; width:100%; margin-top:6px; box-sizing:border-box;
      background:var(--fondo-hundido); border:1px solid var(--kk-line); border-radius:9px;
      padding:11px 12px; color:var(--kk-text); font:400 14px var(--kk-sans);
    }
    .auth-in:focus { outline:0; border-color:var(--kk-line-hi); }
    .auth-note { margin:-4px 0 14px; color:var(--kk-faint); font-size:11.5px; line-height:1.5; }
    .auth-err {
      margin:0 0 12px; padding:9px 11px; border-radius:8px;
      background:var(--kk-marca-suave); color:var(--marca-vivo);
      font-size:12.5px; line-height:1.45;
    }
    .auth-submit { width:100%; padding:13px; font-size:14px; }
    .auth-swap { margin:15px 0 0; text-align:center; color:var(--kk-faint); font-size:12.5px; }
    .auth-swap a { color:var(--kk-marca); text-decoration:none; font-weight:600; }
    .auth-swap a:hover { text-decoration:underline; }

    /* ── Ranking global ── */
    .lb-head {
      display:flex; align-items:center; justify-content:space-between;
      gap:14px; flex-wrap:wrap; margin-bottom:14px;
    }
    .lb-head b { display:block; color:var(--kk-text); font:600 15px var(--kk-sans); }
    .lb-head small { display:block; margin-top:2px; color:var(--kk-faint); font-size:12.5px; }
    .lb-list { border:1px solid var(--kk-line); border-radius:14px; overflow:hidden; }
    .lb-row {
      display:flex; align-items:center; gap:13px;
      padding:12px 15px; border-top:1px solid var(--kk-line);
      background:var(--kk-panel);
    }
    .lb-row:first-child { border-top:none; }
    .lb-row.me { background:var(--kk-marca-suave); }
    .lb-pos {
      flex:none; min-width:26px; text-align:center;
      color:var(--kk-faint); font:700 14px var(--kk-sans);
      font-variant-numeric:tabular-nums;
    }
    .lb-pos.top { color:var(--kk-marca); }
    .lb-who { flex:1; min-width:0; }
    .lb-who b {
      display:block; color:var(--kk-text); font:600 14px var(--kk-sans);
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .lb-who small { display:block; margin-top:1px; color:var(--kk-faint); font-size:11.5px; }
    .lb-xp {
      flex:none; color:var(--kk-text); font:700 15px var(--kk-sans);
      font-variant-numeric:tabular-nums;
    }
    .lb-xp small { margin-left:3px; color:var(--kk-faint); font-size:10.5px; font-weight:600; }
    .lb-yours {
      margin-top:12px; padding:12px 15px; border-radius:12px;
      background:var(--kk-panel-2); border:1px solid var(--kk-line);
      color:var(--kk-dim); font-size:13px;
    }
    .lb-yours b { color:var(--kk-marca); }
    .lb-empty { color:var(--kk-faint); font-size:13.5px; line-height:1.6; }
    .lb-note { margin:12px 2px 0; color:var(--kk-faint); font-size:11.5px; line-height:1.55; }

    /* ── Responsive del board ── */
    @media (max-width:1150px) {
      .kb { grid-template-columns:1fr; }
      .kf-body { grid-template-columns:1fr; gap:14px; }
      .nav-main { display:none; }
    }
    @media (max-width:760px) {
      .nav-top { padding:10px 16px; gap:12px; }
      .nav-sub { padding:0 16px; }
      .nav-btn.ghost { display:none; }
      .hero { padding:16px 16px 4px; }
      .kb-trust { grid-template-columns:1fr; }
      .kf-q { font-size:23px; }
      .foot-grid { grid-template-columns:repeat(2, 1fr); }
      /* La grilla base es responsive (auto-fill con mínimo de 320px), pero
         `.kb-main .events-grid` la pisa con 2 columnas fijas y no tenía salida
         para mobile:a 375px daban tarjetas de 167px, con el título partido en
         seis líneas y los dos rincones del estelar pisándose. */
      .kb-main .events-grid { grid-template-columns:minmax(0, 1fr); }
    }

    /* ── Pasada mobile (paso 1 hacia formato app) ──
       Objetivo:cero scroll horizontal y targets táctiles cómodos en 375px. */
    @media (max-width: 700px) {
      /* Nav:fila 1 = logo + acción, fila 2 = buscador a todo el ancho.
         El buscador conserva el id hero-search-input (lo usa el JS). */
      .nav-top { flex-wrap:wrap; row-gap:10px; padding:10px 14px; gap:10px; }
      .nav-search {
        order:3;
        flex-basis:100%;
        max-width:none;
        min-width:0;
        margin:0;
        height:38px;
      }
      .nav-actions { margin-left:auto; }
      .nav-btn { padding:10px 14px; font-size:13px; }
      /* En 375px el chip completo no entra al lado del logo:se acorta el nick.
         "Entrar" queda oculto por la regla de .nav-btn.ghost de más abajo; para
         registrarse desde el celular se usa el link del modal. */
      .nav-user { padding:9px 11px; gap:7px; }
      .nav-user-nick { max-width:90px; }
      .nav-sub { padding:0 14px; }
      .nav-sub ul { gap:18px; }
      .nav-sub a { padding:6px 0; }

      /* Evento destacado:los dos rincones tienen que entrar en 375px */
      .ke-main { gap:10px; padding:18px 0 20px; }
      .ke-fighter { min-width:0; flex:1 1 0; }
      .ke-photo { width:66px; height:66px; }
      .ke-photo-full { width:100%; max-width:118px; height:165px; }
      .ke-fighter b { font-size:14px; overflow-wrap:anywhere; }
      .ke-fighter small { font-size:11.5px; }
      .ke-vs { padding:7px 10px; font-size:12px; flex-shrink:0; }

      /* Apuestas:`1fr` es minmax(auto, 1fr) y el mínimo `auto` deja que la pista
         crezca hasta el min-content de la tarjeta (grid blowout). minmax(0, 1fr)
         la ata al ancho del contenedor y recién ahí el flex-shrink de adentro sirve. */
      .bet-grid { grid-template-columns:minmax(0, 1fr); gap:12px; }
      .bet-fight { padding:14px 13px 10px; min-width:0; }
      .bet-fight-top { flex-wrap:wrap; gap:6px 10px; }
      .bet-side { gap:9px; }
      .bet-ava { width:38px; height:38px; }
      .bet-prob { min-width:48px; }
      .bet-odd-chip { min-width:68px; padding:6px 8px; font-size:13px; }
      .bet-odd-chip small { font-size:9.5px; overflow-wrap:anywhere; }
      .bet-fight-foot { flex-wrap:wrap; gap:6px 10px; }

      /* Targets táctiles:el mínimo cómodo del pulgar es ~44px (Apple HIG).
         Se agranda el área tocable sin cambiar el tamaño visual del texto. */
      .nav-sub ul { padding:0 0 4px; }
      .nav-sub a { display:inline-flex; align-items:center; min-height:44px; padding:0; }
      .nav-btn { padding:15px 16px; }
      .nav-search { height:42px; }
      .ke-all { display:inline-flex; align-items:center; min-height:44px; }
      .bet-expand { min-height:40px; padding:4px 8px; }
      .kf-arrow { width:40px; height:40px; }

      /* Las secciones traían padding de escritorio (60px 40px): en 375px eso son
         80px de ancho y 60 de alto tirados. */
      section { padding:18px 14px 40px; }

      /* El label del evento tenía nowrap+ellipsis y entraba en 108px de los 335
         que necesita, así que se cortaba siempre. Que baje de línea. */
      .kf-top { flex-wrap:wrap; row-gap:4px; }
      .kf-label { overflow:visible; white-space:normal; text-overflow:clip; }

      /* space-between sin gap deja los dos textos pegados cuando ocupan la fila */
      .kf-foot { flex-wrap:wrap; gap:2px 14px; }
      .kf-foot a { display:inline-flex; align-items:center; min-height:40px; }
    }

    /* ═══════════════════════════════════════════════════════════════
       PÁGINA DE EVENTO — reemplaza al modal de cartelera.
       Lista compacta de peleas; cada una despliega la ficha comparada
       (fotos de cuerpo entero, físico, stats y últimas peleas).
       ═══════════════════════════════════════════════════════════════ */
    .evp { max-width:1000px; margin:0 auto; }

    .evp-back {
      display:inline-flex; align-items:center; gap:7px;
      color:var(--kk-dim); font-size:13px; font-weight:600;
      text-decoration:none; margin-bottom:18px;
    }
    .evp-back:hover { color:var(--kk-marca); }

    .evp-head { border-bottom:1px solid var(--kk-line); padding-bottom:20px; margin-bottom:22px; }
    .evp-kicker {
      display:inline-block; font-size:10.5px; font-weight:700;
      letter-spacing:0.13em; text-transform:uppercase;
      color:var(--kk-marca); background:var(--kk-marca-suave);
      border:1px solid rgba(var(--marca-vivo-rgb), 0.35); border-radius:4px;
      padding:3px 7px; margin-bottom:12px;
    }
    .evp-title {
      font-family:var(--kk-serif); font-weight:700;
      font-size:clamp(28px, 4.4vw, 46px); line-height:1.08;
      letter-spacing:-0.02em; margin:0;
    }
    .evp-meta {
      color:var(--kk-dim); font-size:14px; margin-top:10px;
      display:flex; flex-wrap:wrap; gap:4px 10px;
    }
    .evp-meta i { font-style:normal; color:var(--kk-faint); }

    .evp-list { display:flex; flex-direction:column; gap:8px; }

    .evp-fight {
      background:var(--kk-panel); border:1px solid var(--kk-line);
      border-radius:10px; overflow:hidden;
      transition:border-color 0.15s ease;
    }
    .evp-fight:hover { border-color:var(--kk-line-hi); }
    .evp-fight.open { border-color:var(--kk-line-hi); background:var(--kk-panel-2); }
    .evp-fight.main { border-left:3px solid var(--kk-marca); }

    /* La cabecera es un <button>: toda la fila es el target de click y el
       teclado la alcanza sin tabindex a mano. */
    .evp-head-btn {
      all:unset; box-sizing:border-box; cursor:pointer;
      display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
      gap:12px; width:100%; padding:13px 16px;
    }
    .evp-head-btn:focus-visible { outline:2px solid var(--kk-marca); outline-offset:-2px; }

    .evp-corner { display:flex; align-items:center; gap:10px; min-width:0; }
    .evp-corner.right { flex-direction:row-reverse; text-align:right; }
    .evp-ava {
      width:44px; height:44px; flex-shrink:0; border-radius:50%;
      object-fit:cover; object-position:top;
      background:var(--kk-panel-2); border:1px solid var(--kk-line-hi);
      display:flex; align-items:center; justify-content:center;
      font-size:15px; font-weight:700; color:var(--kk-faint);
    }
    .evp-corner-txt { min-width:0; }
    .evp-name {
      font-size:14.5px; font-weight:700; line-height:1.25;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .evp-fight.done .evp-corner.win .evp-name { color:var(--kk-green); }
    .evp-fight.done .evp-corner.lose { opacity:0.5; }
    .evp-rec { font-size:12px; color:var(--kk-dim); margin-top:2px; }
    /* La cuota es dato, no identidad: va en la escala de texto, no en --marca. */
    .evp-odds { display:flex; align-items:baseline; gap:6px; margin-top:3px; font-size:12px; }
    .evp-odds b { color:var(--texto); font-weight:700; font-variant-numeric:tabular-nums; }
    .evp-odds span { color:var(--kk-dim); font-size:10.5px; }
    .evp-streak { display:flex; gap:3px; margin-top:5px; }
    .evp-corner.right .evp-streak,
    .evp-corner.right .evp-odds { justify-content:flex-end; }

    /* Chips de resultado:verde = victoria, rojo = derrota. El color es el
       dato, así que la letra va además del color (daltonismo). */
    .wl {
      width:17px; height:17px; border-radius:3px;
      font-size:9.5px; font-weight:800; line-height:17px; text-align:center;
    }
    .wl.w  { background:rgba(var(--verde-rgb), 0.16); color:var(--kk-green); }
    .wl.l  { background:rgba(var(--rojo-vivo-rgb), 0.16);  color:var(--rojo-vivo); }
    .wl.d  { background:rgba(var(--velo), 0.07); color:var(--kk-dim); }
    .wl.nc { background:rgba(var(--velo), 0.07); color:var(--kk-dim); width:auto; padding:0 4px; }

    /* Ancho tope:la columna del medio es `auto` en el grid, así que una
       etiqueta larga ("MAIN EVENT · LIGHT HEAVYWEIGHT" en inglés) le robaba
       espacio a los nombres hasta cortarlos con puntos suspensivos. */
    .evp-mid { text-align:center; flex-shrink:0; max-width:180px; }
    .evp-vs {
      font-family:var(--kk-serif); font-size:15px; font-weight:700;
      color:var(--kk-faint); font-style:italic;
    }
    .evp-tag {
      display:block; font-size:9.5px; font-weight:700; letter-spacing:0.08em;
      text-transform:uppercase; color:var(--kk-faint); margin-top:3px;
      line-height:1.4;
    }
    .evp-tag b { color:var(--kk-marca); font-weight:700; }
    .evp-result { font-size:11px; color:var(--kk-dim); margin-top:3px; }
    .evp-caret {
      display:block; margin:5px auto 0; width:9px; height:9px;
      border-right:1.6px solid var(--kk-faint); border-bottom:1.6px solid var(--kk-faint);
      transform:rotate(45deg); transition:transform 0.18s ease;
    }
    .evp-fight.open .evp-caret { transform:rotate(-135deg); }

    /* ── Ficha desplegada ── */
    .evp-panel { border-top:1px solid var(--kk-line); padding:18px 16px 20px; }

    .evp-photos {
      display:grid; grid-template-columns:1fr auto 1fr; align-items:end;
      gap:10px; min-height:60px;
      /* Deja lugar al nombre de los respaldos, que va posicionado fuera del
         flujo para no empujar la figura arriba de la línea de piso. */
      padding-bottom:24px; margin-bottom:4px;
    }
    /* contain + bottom:los PNG de ESPN traen margen transparente arriba y
       abajo, y con cover se cortaban las piernas. Así los dos quedan parados
       sobre la misma línea de piso. */
    /* El PNG de ESPN es muy angosto (575×1988, relación ~1:3,5 — se verificó
       parseando el alfa: el peleador ocupa el 99%, no hay margen que recortar).
       Con object-fit:contain el que manda entonces es el ALTO: a 240px la foto
       se dibujaba de apenas ~70px de ancho. Subir el alto es lo único que la
       agranda; el ancho de la caja solo deja aire alrededor.
       Y como contain centra la imagen dentro de su caja, sin el
       object-position cada peleador quedaba flotando en el medio de su mitad,
       con un hueco negro contra el VS. Empujarlos al centro los enfrenta. */
    .evp-photo { width:100%; max-width:300px; height:480px; object-fit:contain; }
    .evp-photos .left  { justify-self:end;   object-position:bottom right; }
    .evp-photos .right { justify-self:start; object-position:bottom left; }
    .evp-photos > .evp-vs { align-self:center; }
    .evp-photos-mid { grid-column:1 / -1; display:flex; justify-content:center; padding:40px 0; }

    /* Respaldos cuando no hay foto de cuerpo entero. Los dos comparten la
       misma línea de piso que las fotos reales para que el cara a cara no se
       desarme:la caja mide igual y el contenido se apoya abajo. */
    .evp-photo-alt {
      height:480px; position:relative; display:flex;
      align-items:flex-end; justify-content:center;
    }
    .evp-photos .evp-photo-alt.left  { justify-self:end; }
    .evp-photos .evp-photo-alt.right { justify-self:start; }
    /* Silueta:no hay foto de cuerpo entero.
       El PNG se usa como MÁSCARA, no como imagen: sólo aporta la forma (su
       canal alfa) y el color lo pone background-color, así sigue viviendo en la
       hoja de estilos. Lo genera scripts/build_silhouette.py — ver ahí de dónde
       sale la forma y por qué hay una versión femenina.
       La relación 360:1240 es la misma que los PNG de ESPN, así que con
       height:100% ocupa exactamente el lugar de una foto de cuerpo entero y los
       pies caen en la misma línea de piso. */
    .evp-silhouette {
      height:100%; aspect-ratio:360 / 1240;
      background-color:var(--panel-3);
      -webkit-mask:url(/assets/silueta-peleador.png) center bottom / contain no-repeat;
      mask:url(/assets/silueta-peleador.png) center bottom / contain no-repeat;
    }
    .evp-silhouette.fem {
      -webkit-mask-image:url(/assets/silueta-peleadora.png);
      mask-image:url(/assets/silueta-peleadora.png);
    }
    .evp-photo-name {
      position:absolute; bottom:-20px; left:50%; transform:translateX(-50%);
      color:var(--kk-faint); font-size:12px; text-align:center;
      max-width:170px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }

    .evp-sub {
      font-size:10.5px; font-weight:700; letter-spacing:0.12em;
      text-transform:uppercase; color:var(--kk-faint);
      margin:22px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--kk-line);
    }
    .evp-sub:first-child { margin-top:0; }

    /* Fila comparativa:valor · etiqueta · valor, con dos barras que crecen
       desde el centro hacia afuera. El más alto se marca en rojo. */
    .evp-stat { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; padding:6px 0; }
    .evp-stat-v { font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
    .evp-stat-v.a { text-align:right; }
    .evp-stat-v.hi { color:var(--kk-marca); }
    /* Métricas de ufc.com sobre pocos minutos: se ven, pero atenuadas. */
    .evp-stat-v.muestra { color:var(--kk-dim); }
    .evp-bar.muestra i { opacity:0.45; }
    .evp-nota a { color:var(--kk-dim); }
    .evp-stat-k { font-size:10.5px; color:var(--kk-dim); text-align:center; min-width:92px; }
    .evp-bars { grid-column:1 / -1; display:grid; grid-template-columns:1fr 92px 1fr; gap:10px; align-items:center; }
    .evp-bar { height:4px; border-radius:2px; background:rgba(var(--velo), 0.06); overflow:hidden; }
    .evp-bar i { display:block; height:100%; background:var(--kk-line-hi); border-radius:2px; }
    .evp-bar.a { display:flex; justify-content:flex-end; }
    .evp-bar.hi i { background:var(--kk-marca); }

    .evp-last { display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
    /* min-width:0 para que la columna no se estire al nombre de evento más largo. */
    .evp-last-col { min-width:0; }
    .evp-last-col > b { display:block; font-size:12px; margin-bottom:8px; }
    .evp-last-row {
      display:flex; align-items:center; gap:8px;
      padding:5px 0; border-top:1px solid var(--kk-line);
      font-size:12px; color:var(--kk-dim);
    }
    .evp-last-row .op { color:var(--kk-text); font-weight:600; flex:1; min-width:0;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .evp-last-row .mt { font-size:10.5px; color:var(--kk-faint); white-space:nowrap; }
    .evp-last-row .op small { display:block; font-size:10.5px; font-weight:400; color:var(--kk-faint);
      overflow:hidden; text-overflow:ellipsis; }
    .evp-fuente { color:var(--kk-faint); font-size:11px; line-height:1.5; margin:8px 0 0; }
    .evp-fuente a { color:var(--kk-dim); }
    .evp-empty { color:var(--kk-faint); font-size:12px; padding:6px 0; }
    .evp-nota { color:var(--kk-faint); font-size:11.5px; margin:-4px 0 12px; line-height:1.5; }

    .evp-open-full {
      display:inline-block; margin-top:16px; font-size:12px; font-weight:600;
      color:var(--kk-marca); text-decoration:none;
    }
    .evp-open-full:hover { text-decoration:underline; }

    @media (max-width:700px) {
      .evp-head-btn { grid-template-columns:1fr; gap:8px; padding:12px 13px; }
      .evp-corner.right { flex-direction:row; text-align:left; }
      .evp-corner.right .evp-streak,
      .evp-corner.right .evp-odds { justify-content:flex-start; }
      .evp-mid { text-align:left; display:flex; align-items:center; gap:10px; }
      .evp-vs { font-size:13px; }
      .evp-caret { margin:0 0 0 auto; }
      .evp-photo { height:330px; max-width:150px; }
      .evp-photo-alt { height:330px; gap:8px; }
      .evp-photos-mid { padding-bottom:70px; }
      .evp-stat-k { min-width:74px; font-size:10px; }
      .evp-bars { grid-template-columns:1fr 74px 1fr; }
      .evp-last { grid-template-columns:1fr; gap:16px; }
      .evp-panel { padding:14px 13px 16px; }
    }