/* ═══════════════════════════════════════════════════════════════
   Señal del Gol · rediseño (v2)
   Maqueta de trabajo, publicada en el subdominio antiguo para verla
   antes de decidir si sustituye a la web actual.

   Los colores salen de muestrear el mockup: azul marino casi negro
   de fondo y un verde menta muy saturado como único acento. El tema
   claro se añadió después y no está en el mockup.
   ═══════════════════════════════════════════════════════════════ */

/* El tema por defecto es el OSCURO, que es el del mockup. El claro está
   completo debajo y se elige con el interruptor de la cabecera; queda
   guardado y se aplica antes del primer pintado para que no parpadee. */
:root,
[data-tema="oscuro"]{
  --bg:#000d1e;            /* fondo general */
  --bg-2:#09192e;          /* bandas alternas */
  --caja:#05162a;          /* tarjetas y cuadros */
  --caja-2:#0b2038;        /* cabeceras de tabla, filas alternas */
  --linea:#15304d;
  --linea-2:#102740;

  --verde:#50f888;
  --verde-osc:#0d3a22;     /* fondo de los chips verdes */
  --verde-tinta:#02230f;   /* texto sobre verde */
  --ambar-tinta:#231a02;   /* texto sobre ambar */
  --rojo:#ff6b5c;
  --ambar:#f5b301;
  --ambar-osc:#3a2c05;
  --gris:#8aa0b8;
  --gris-osc:#1b2c3f;

  --tinta:#ffffff;
  --tinta-2:#c3d3e3;
  --mute:#8aa0b8;
  --dim:#7189a2;           /* el #5d7590 se quedaba en 3,4:1 */

  /* los que dependen del tema y antes iban a fuego */
  --top-fondo:rgba(0,13,30,.86);
  --panel-fondo:linear-gradient(180deg, rgba(11,32,56,.96), rgba(5,22,42,.96));
  --sombra-panel:0 24px 60px -30px rgba(0,0,0,.9);
  --verde-40:rgba(80,248,136,.6);
  --verde-00:rgba(80,248,136,0);
  --verde-borde:rgba(80,248,136,.3);
  --verde-borde-2:rgba(80,248,136,.45);
  --verde-sombra:rgba(80,248,136,.7);
  --verde-sombra-2:rgba(80,248,136,.8);
  --verde-vidrio:rgba(13,58,34,.55);
  --fila-verde:rgba(13,58,34,.28);
  --ambar-borde:rgba(245,179,1,.45);
  --ambar-vidrio:rgba(58,44,5,.5);
  --luz-fria:rgba(120,190,255,.16);
  --luz-verde:rgba(80,248,136,.10);
  --luz-blanca:rgba(255,255,255,.10);
  --luz-cesped:rgba(14,58,36,.30);
  --bandera-filo:rgba(255,255,255,.18);

  --max:1180px;
  --r:14px;                /* radio de las cajas */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── Tema claro ──────────────────────────────────────────────────
   No es el oscuro con los valores invertidos: el verde menta (#50f888)
   sobre blanco da 1,4:1 y sería ilegible, así que aquí el acento es un
   verde mucho más oscuro. El mismo papel, otro tono. */
[data-tema="claro"]{
  --bg:#f2f6fa;
  --bg-2:#e8eef6;
  --caja:#ffffff;
  --caja-2:#eef3f9;
  --linea:#d3dde9;
  --linea-2:#e5ebf3;

  --verde:#0a763b;          /* 5,7:1 sobre blanco; el #0e8f47 se quedaba en 4,2 */
  --verde-osc:#e2f7ec;
  --verde-tinta:#ffffff;
  --ambar-tinta:#ffffff;
  --rojo:#c8321f;          /* el #ff6b5c sobre blanco se queda en 2,8:1 */
  --ambar:#9a6206;
  --ambar-osc:#fdf3e0;
  --gris:#4c6076;
  --gris-osc:#e5ebf3;

  --tinta:#08192a;
  --tinta-2:#2b3e52;
  --mute:#4c6076;
  --dim:#566a7e;            /* 4,8:1 sobre la banda alterna */

  --top-fondo:rgba(242,246,250,.9);
  --panel-fondo:linear-gradient(180deg,#ffffff,#f4f8fc);
  --sombra-panel:0 18px 44px -26px rgba(8,25,42,.28);
  --verde-40:rgba(10,118,59,.45);
  --verde-00:rgba(10,118,59,0);
  --verde-borde:rgba(10,118,59,.32);
  --verde-borde-2:rgba(10,118,59,.45);
  --verde-sombra:rgba(10,118,59,.45);
  --verde-sombra-2:rgba(10,118,59,.55);
  --verde-vidrio:rgba(226,247,236,.9);
  --fila-verde:rgba(226,247,236,.75);
  --ambar-borde:rgba(154,98,6,.4);
  --ambar-vidrio:rgba(253,243,224,.9);
  --luz-fria:rgba(120,170,255,.14);
  --luz-verde:rgba(10,118,59,.09);
  --luz-blanca:rgba(255,255,255,.5);
  --luz-cesped:rgba(10,118,59,.08);
  --bandera-filo:rgba(8,25,42,.16);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tinta-2);
     font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
     font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
     overflow-x:clip}
h1,h2,h3{margin:0;color:var(--tinta);line-height:1.15;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.num{font-variant-numeric:tabular-nums}
.env{width:100%;max-width:var(--max);margin:0 auto;padding-inline:clamp(1rem,4vw,1.6rem)}

/* ─────────── Cabecera ─────────── */
.top{position:sticky;top:0;z-index:40;background:var(--top-fondo);
     backdrop-filter:blur(12px);border-bottom:1px solid var(--linea-2)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.2rem;
        padding:.7rem 0}
@media (min-width:900px){ .top-in{flex-wrap:nowrap;height:66px;padding:0} }
/* La marca es el logo de verdad, un PNG horizontal con la palabra dentro,
   así que aquí no va texto: lo duplicaría. Se fija la altura y el ancho lo
   pone la proporción (692x144). Los width/height del HTML están para que el
   navegador reserve el hueco y la cabecera no dé un salto al cargar. */
.marca{display:flex;align-items:center;line-height:0;flex:none}
/* Sin display aquí: `.marca img` es (0,1,1) y le ganaba al `.logo-claro`
   de abajo, que es (0,1,0) — se veían los dos logos a la vez. El display
   lo manda solo el par de reglas del tema. */
.marca img{height:30px;width:auto}
@media (min-width:900px){ .marca img{height:36px} }

/* Dos archivos porque la palabra del logo es casi negra: sobre el fondo
   oscuro desaparecería, y la versión -oscuro la trae aclarada. El tema por
   defecto es el oscuro, así que ese es el que se ve sin atributo (si el JS
   no llega a correr, el <head> no ha puesto data-tema y el fondo es oscuro
   igualmente: coinciden). */
.logo-claro{display:none}
.logo-oscuro{display:block}
[data-tema="claro"] .logo-claro{display:block}
[data-tema="claro"] .logo-oscuro{display:none}

/* En escritorio va en la misma linea; en movil baja a una tira que se
   desplaza de lado. El mockup no lo resolvia, y sin esto en el movil no
   habia forma de llegar a Historial, Agenda ni Metodologia. */
.nav{display:flex;gap:.15rem;order:3;width:100%;overflow-x:auto;
     scrollbar-width:none;padding-bottom:.5rem;margin-top:-.1rem}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:none}
@media (min-width:900px){
  .nav{order:0;width:auto;margin-left:auto;overflow:visible;padding-bottom:0;
       margin-top:0}
}
.nav a{display:inline-flex;align-items:center;gap:.42rem;padding:.5rem .78rem;
       border-radius:8px;font-size:.9rem;color:var(--mute);
       transition:color .2s var(--ease),background .2s var(--ease)}
.nav a:hover{color:var(--tinta);background:var(--linea-2)}
.nav a.on{color:var(--tinta);position:relative}
.nav a.on::after{content:"";position:absolute;left:.78rem;right:.78rem;bottom:.18rem;
                 height:2px;background:var(--verde);border-radius:2px}
.nav svg{width:16px;height:16px;opacity:.85}

/* ── Interruptor de tema ── */
.sw{margin-left:auto;display:inline-flex;border:1px solid var(--linea);
    border-radius:8px;overflow:hidden;background:var(--caja);flex:none}
@media (min-width:900px){ .sw{margin-left:1rem} }
.sw button{display:grid;place-items:center;width:34px;height:32px;border:0;
           background:none;color:var(--dim);cursor:pointer;padding:0;
           transition:background .2s var(--ease),color .2s var(--ease)}
.sw button svg{width:16px;height:16px}
.sw button:hover{color:var(--tinta-2)}
.sw button[aria-pressed="true"]{background:var(--caja-2);color:var(--verde)}

.estado-top{margin-left:0;display:inline-flex;align-items:center;gap:.5rem;
            padding:.45rem .85rem;border-radius:99px;background:var(--verde-osc);
            border:1px solid var(--verde-borde);color:var(--verde);
            font-size:.82rem;font-weight:600;white-space:nowrap}
@media (min-width:900px){ .estado-top{margin-left:1rem} }
.punto{width:7px;height:7px;border-radius:50%;background:var(--verde);flex:none;
       box-shadow:0 0 0 0 var(--verde-40);animation:late 2.4s infinite}
@keyframes late{70%{box-shadow:0 0 0 7px var(--verde-00)}
                100%{box-shadow:0 0 0 0 var(--verde-00)}}

/* ─────────── Hero ─────────── */
.hero{position:relative;overflow:hidden;
      border-bottom:1px solid var(--linea-2)}
/* Las luces del estadio, sin foto: unos cuantos halos y una franja de
   césped insinuada al pie. Pesa cero y no depende de derechos de imagen. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46rem 26rem at 78% 8%, var(--luz-fria), transparent 60%),
    radial-gradient(30rem 18rem at 96% 34%, var(--luz-verde), transparent 62%),
    radial-gradient(22rem 14rem at 62% 2%, var(--luz-blanca), transparent 60%),
    linear-gradient(180deg, transparent 58%, var(--luz-cesped) 100%)}
.hero-in{position:relative;display:grid;gap:2.2rem;
         padding:clamp(2.2rem,6vh,3.6rem) 0 clamp(2.4rem,6vh,3.8rem)}
@media (min-width:980px){
  .hero-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
           gap:3rem;align-items:center}
}
.kicker{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.14em;
        text-transform:uppercase;color:var(--verde);margin-bottom:1rem}
.hero h1{font-size:clamp(2rem,5.4vw,3.25rem);font-weight:800;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--verde)}
.hero .lead{margin-top:1.1rem;max-width:46ch;font-size:clamp(.98rem,2.1vw,1.06rem);
            color:var(--tinta-2)}
.hero .lead b{color:var(--tinta);font-weight:600}

.rasgos{display:grid;gap:1rem;margin-top:1.8rem}
@media (min-width:560px){ .rasgos{grid-template-columns:repeat(3,1fr);gap:.9rem} }
.rasgo{display:flex;align-items:center;gap:.66rem}
.rasgo .ic{width:38px;height:38px;flex:none;border-radius:50%;display:grid;
           place-items:center;background:var(--verde-osc);
           border:1px solid var(--verde-borde)}
.rasgo .ic svg{width:18px;height:18px;color:var(--verde)}
.rasgo span{font-size:.84rem;line-height:1.35;color:var(--tinta-2)}
.rasgo b{display:block;color:var(--tinta);font-weight:600}

.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.92rem 1.5rem;
     border-radius:10px;font-weight:700;font-size:.95rem;letter-spacing:.01em;
     border:1px solid transparent;cursor:pointer;
     transition:transform .18s var(--ease),box-shadow .25s var(--ease)}
.btn-pri{background:var(--verde);color:var(--verde-tinta);
         box-shadow:0 6px 22px -8px var(--verde-sombra)}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px var(--verde-sombra-2)}
.btn svg{width:18px;height:18px}
.hero-cta{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.gratis{margin-top:.95rem;font-size:.82rem;color:var(--dim)}
.gratis span+span::before{content:"·";margin:0 .5rem;color:var(--linea)}

/* ── El panel del radar ── */
.panel{background:var(--panel-fondo);
       border:1px solid var(--linea);border-radius:var(--r);
       padding:clamp(1.3rem,3vw,1.7rem);text-align:center;
       box-shadow:var(--sombra-panel)}
.panel-k{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;
         font-weight:700;letter-spacing:.1em;text-transform:uppercase;
         color:var(--verde)}
.radar{position:relative;width:min(232px,62vw);aspect-ratio:1;margin:1.2rem auto .2rem}
.radar svg{width:100%;height:100%;overflow:visible}
.radar .barrido{transform-origin:50% 50%;animation:gira 3.6s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.panel .cifra{font-size:clamp(2.2rem,7vw,2.9rem);font-weight:800;color:var(--tinta);
              letter-spacing:-.03em;line-height:1.05}
.panel .cifra-k{font-size:.9rem;color:var(--mute);margin-top:.15rem}
.panel .pie{margin-top:1.1rem;padding-top:.95rem;border-top:1px solid var(--linea-2);
            display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;
            color:var(--dim)}
.panel .pie svg{width:15px;height:15px}
.panel .pie b{color:var(--tinta-2);font-weight:600}

/* ─────────── Secciones ─────────── */
.banda{padding:clamp(2.4rem,6vh,3.6rem) 0}
.banda.alt{background:var(--bg-2)}
.sec-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.2rem;
         margin-bottom:1.6rem}
.sec-cab h2{font-size:clamp(1.35rem,3.4vw,1.75rem);font-weight:700}
.sec-cab p{font-size:.92rem;color:var(--mute);width:100%}
.sec-cab .mas{margin-left:auto;font-size:.86rem;color:var(--verde);
              display:inline-flex;align-items:center;gap:.35rem;
              border-bottom:1px solid var(--verde-borde)}
.sec-cab .mas:hover{border-bottom-color:var(--verde)}

/* ── Las tres señales ── */
.senales{display:grid;gap:1rem}
@media (min-width:860px){ .senales{grid-template-columns:repeat(3,1fr)} }
.senal{border-radius:var(--r);padding:1.3rem;border:1px solid var(--linea);
       background:var(--caja);display:flex;flex-direction:column;gap:.85rem}
.senal.entrar{border-color:var(--verde-borde-2);
              background:linear-gradient(170deg, var(--verde-vidrio), var(--caja))}
.senal.considerar{border-color:var(--ambar-borde);
                  background:linear-gradient(170deg, var(--ambar-vidrio), var(--caja))}
.senal.sinvalue{border-color:var(--gris-osc)}
.chip{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
      padding:.42rem .85rem;border-radius:99px;font-weight:700;font-size:.84rem}
.chip .punto{animation:none;box-shadow:none}
.chip.entrar{background:var(--verde);color:var(--verde-tinta)}
.chip.entrar .punto{background:var(--verde-tinta)}
.chip.considerar{background:var(--ambar);color:var(--ambar-tinta)}
.chip.considerar .punto{background:var(--ambar-tinta)}
.chip.sinvalue{background:var(--gris-osc);color:var(--tinta-2)}
.chip.sinvalue .punto{background:var(--gris)}
.senal p{font-size:.94rem;color:var(--tinta-2)}
.senal .nota{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--linea-2);
             display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--mute)}
.senal .nota svg{width:16px;height:16px;flex:none}
.senal.entrar .nota svg{color:var(--verde)}
.senal.considerar .nota svg{color:var(--ambar)}

/* ── Los tres pasos ── */
.pasos{display:grid;gap:1rem;background:var(--caja);border:1px solid var(--linea);
       border-radius:var(--r);padding:1.3rem}
@media (min-width:900px){
  .pasos{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:1.2rem}
}
.paso{display:flex;align-items:center;gap:.8rem}
.paso .n{width:30px;height:30px;flex:none;border-radius:50%;display:grid;
         place-items:center;background:var(--verde);color:var(--verde-tinta);
         font-weight:800;font-size:.86rem}
.paso .ic{width:34px;height:34px;flex:none;display:grid;place-items:center;
          color:var(--verde)}
.paso .ic svg{width:22px;height:22px}
.paso b{display:block;color:var(--tinta);font-size:.92rem;font-weight:600}
.paso span{font-size:.82rem;color:var(--mute)}
.flecha{display:none;color:var(--dim)}
@media (min-width:900px){ .flecha{display:block} }
.flecha svg{width:18px;height:18px}

/* ─────────── El cuadro en vivo y los números ─────────── */
.tablero{display:grid;gap:1.2rem;align-items:start}
@media (min-width:1000px){ .tablero{grid-template-columns:minmax(0,1.72fr) minmax(0,1fr)} }

/* Una sola columna, todo a lo ancho: el cuadro tiene seis columnas y en la
   mitad de la pantalla vivía con scroll lateral. */
.pila{display:grid;gap:1.2rem}
.pila>*{min-width:0}

.cuadro{background:var(--caja);border:1px solid var(--linea);border-radius:var(--r);
        overflow:hidden}
.cuadro-cab{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
            padding:1rem 1.15rem;border-bottom:1px solid var(--linea-2)}
.cuadro-cab h2{font-size:1.02rem;font-weight:700;display:inline-flex;
               align-items:center;gap:.55rem}
.cuadro-cab .rango{font-size:.82rem;color:var(--mute)}
.cuadro-cab .mas{margin-left:auto;font-size:.84rem;color:var(--verde);
                 display:inline-flex;align-items:center;gap:.3rem}

.tabla-env{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:640px}
/* Cuadrícula completa, como una hoja de cálculo: cada celda con su recuadro.
   La raya vertical usa --linea (la fuerte) y no --linea-2, porque con la
   suave apenas se distinguía sobre el blanco del tema claro. El borde de
   fuera lo pone .cuadro, así que la última celda de cada fila y la última
   fila se quedan sin raya para no doblarlo. */
thead th{font-size:.72rem;font-weight:600;color:var(--dim);text-align:left;
         padding:.7rem 1.15rem;background:var(--caja-2);white-space:nowrap;
         border-bottom:1px solid var(--linea);
         border-right:1px solid var(--linea)}
thead th.num{text-align:right}
tbody td{padding:.82rem 1.15rem;border-bottom:1px solid var(--linea);
         border-right:1px solid var(--linea);
         vertical-align:middle;font-size:.9rem}
thead th:last-child,
tbody td:last-child{border-right:0}
tbody tr:last-child td{border-bottom:0}
tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr{transition:background .2s var(--ease)}
tbody tr:hover{background:var(--caja-2)}
/* el filo de color a la izquierda dice la señal de un vistazo */
tbody tr.entrar{box-shadow:inset 3px 0 0 var(--verde);background:var(--fila-verde)}
tbody tr.considerar{box-shadow:inset 3px 0 0 var(--ambar)}
tbody tr.sin-value{box-shadow:inset 3px 0 0 var(--gris-osc)}

.c-liga{display:block;font-size:.72rem;color:var(--mute);margin-bottom:.15rem;
        display:flex;align-items:center;gap:.42rem}
.c-liga img{width:18px;height:13px;object-fit:cover;border-radius:2px;flex:none;
            box-shadow:inset 0 0 0 1px var(--bandera-filo)}
.c-part{color:var(--tinta);font-weight:600}
.c-min{color:var(--tinta-2)}
.prob-cel{min-width:92px}
.prob-n{display:block;font-weight:700;color:var(--tinta);font-size:.94rem}
.barra{display:block;height:4px;margin-top:.34rem;border-radius:3px;
       background:var(--gris-osc);overflow:hidden}
.barra i{display:block;height:100%;border-radius:3px;background:var(--verde);
         width:calc(var(--p,0) * 1%)}
tr.considerar .barra i{background:var(--ambar)}
tr.sin-value .barra i{background:var(--gris)}
.c-est{font-size:.78rem;color:var(--mute);white-space:nowrap}
.c-est b{color:var(--tinta-2);font-weight:600}
.chip-min{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .62rem;
          border-radius:99px;font-size:.75rem;font-weight:700;white-space:nowrap}
.chip-min .punto{width:6px;height:6px;animation:none;box-shadow:none}
.chip-min.entrar{background:var(--verde);color:var(--verde-tinta)}
.chip-min.entrar .punto{background:var(--verde-tinta)}
.chip-min.considerar{background:var(--ambar);color:var(--ambar-tinta)}
.chip-min.considerar .punto{background:var(--ambar-tinta)}
.chip-min.sin-value{background:var(--gris-osc);color:var(--tinta-2)}
.chip-min.sin-value .punto{background:var(--gris)}

.vacio{padding:2.6rem 1.15rem;text-align:center;color:var(--mute);font-size:.92rem}
.vacio b{display:block;color:var(--tinta);font-weight:600;margin-bottom:.3rem}

/* ── Columna derecha: histórico y llamada ── */
.lado{display:grid;gap:1.2rem}
.hist{background:var(--caja);border:1px solid var(--linea);border-radius:var(--r);
      padding:1.15rem}
.hist h2{font-size:1.02rem;font-weight:700;display:flex;align-items:center;
         gap:.55rem;margin-bottom:1rem}
.hist h2 svg{width:18px;height:18px;color:var(--verde)}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
/* La misma caja, pero a lo ancho de la página: los cuatro datos en fila. */
.hist.ancho .rejilla{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.dato{background:var(--caja-2);border:1px solid var(--linea-2);border-radius:10px;
      padding:.85rem}
.dato .v{font-size:1.34rem;font-weight:800;color:var(--tinta);letter-spacing:-.02em;
         line-height:1.1}
.dato .v.verde{color:var(--verde)}
.dato .k{font-size:.74rem;color:var(--mute);margin-top:.22rem}
.dato .k abbr{border-bottom:1px dotted var(--dim);cursor:help;text-decoration:none}

.llamada{background:linear-gradient(160deg, var(--verde-vidrio), var(--caja));
         border:1px solid var(--verde-borde);border-radius:var(--r);padding:1.15rem;
         display:flex;gap:.9rem;align-items:flex-start}
.llamada .ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;
             place-items:center;background:var(--verde-osc);color:var(--verde);
             border:1px solid var(--verde-borde)}
.llamada .ic svg{width:20px;height:20px}
.llamada b{display:block;color:var(--tinta);font-size:.96rem;margin-bottom:.25rem}
.llamada p{font-size:.84rem;color:var(--tinta-2)}
.llamada .btn{margin-top:.85rem;padding:.62rem 1rem;font-size:.84rem}
/* A lo ancho, el botón se va al lado en vez de quedarse debajo de un
   párrafo de tres palabras rodeado de hueco. */
@media (min-width:760px){
  .llamada.ancha{align-items:center}
  .llamada.ancha>span:not(.ic){flex:1;display:grid;column-gap:1.4rem;
      grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:"t b" "p b";align-items:center}
  .llamada.ancha b{grid-area:t}
  .llamada.ancha p{grid-area:p;max-width:76ch}
  .llamada.ancha .btn{grid-area:b;margin-top:0;white-space:nowrap}
}

/* ─────────── Cabecera de las páginas interiores ─────────── */
/* Mismo lenguaje que el hero pero sin el panel del radar: estas páginas
   son para leer datos, no para convencer a nadie. */
.cab-pag{position:relative;overflow:hidden;border-bottom:1px solid var(--linea-2);
         padding:clamp(2rem,5vh,3rem) 0 clamp(1.8rem,4vh,2.6rem)}
.cab-pag::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38rem 20rem at 82% -10%, var(--luz-verde), transparent 62%),
             radial-gradient(26rem 16rem at 12% -20%, var(--luz-fria), transparent 60%)}
.cab-pag .env{position:relative}
.cab-pag h1{font-size:clamp(1.8rem,4.6vw,2.7rem);font-weight:800;letter-spacing:-.03em}
.cab-pag h1 em{font-style:normal;color:var(--verde)}
.cab-pag .lead{margin-top:1rem;max-width:62ch;font-size:clamp(.95rem,2vw,1.02rem);
               color:var(--tinta-2)}
.cab-pag .lead b{color:var(--tinta);font-weight:600}
.sello{margin-top:1.2rem;display:inline-flex;align-items:center;gap:.55rem;
       padding:.4rem .85rem;border-radius:99px;background:var(--caja);
       border:1px solid var(--linea);font-size:.82rem;color:var(--mute)}

/* ── Tira de cifras ── */
.tiras{display:grid;gap:1px;background:var(--linea-2);border:1px solid var(--linea);
       border-radius:var(--r);overflow:hidden;
       grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){ .tiras{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:980px){ .tiras{grid-template-columns:repeat(auto-fit,minmax(0,1fr))} }
.tira{background:var(--caja);padding:1rem 1.15rem}
.tira .v{font-size:clamp(1.5rem,4vw,1.9rem);font-weight:800;color:var(--tinta);
         letter-spacing:-.03em;line-height:1.05}
.tira .v.verde{color:var(--verde)}
.tira .v.rojo{color:var(--rojo)}
.tira .k{font-size:.78rem;color:var(--mute);margin-top:.2rem}

.cuadro-cab h2 .ic-t{width:17px;height:17px;color:var(--verde)}

/* ── La muestra de la portada ──────────────────────────────────
   Partidos inventados. Se marca de tres formas —rótulo, franja
   diagonal y nota al pie— porque enseñar datos de ejemplo sin avisar,
   en una web de apuestas, sería exactamente lo contrario de lo que
   defiende el sitio. */
.es-muestra{position:relative}
.es-muestra::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:var(--r);
  background:repeating-linear-gradient(135deg, transparent 0 22px,
             var(--luz-blanca) 22px 24px)}
.es-muestra tbody tr:hover{background:transparent}
.etq-muestra{margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.1em;
             text-transform:uppercase;color:var(--ambar);
             border:1px solid var(--ambar-borde);border-radius:99px;
             padding:.22rem .7rem;background:var(--ambar-vidrio)}
.enl{color:var(--verde);border-bottom:1px solid var(--verde-borde)}
.enl:hover{border-bottom-color:var(--verde)}
.pie-nota{margin-top:1.2rem;max-width:74ch;font-size:.84rem;color:var(--mute)}
.pie-nota b{color:var(--tinta-2);font-weight:600}

/* ── El historial del día ── */
.t-dia tbody tr.fuera{opacity:.58;box-shadow:inset 3px 0 0 var(--gris-osc);
                      background:transparent}
.t-dia tbody tr.fuera:hover{background:var(--caja-2)}
.c-hora{color:var(--mute);font-size:.82rem;white-space:nowrap}
.c-res{white-space:nowrap}
.res{display:inline-block;font-size:.76rem;font-weight:700;padding:.22rem .55rem;
     border-radius:5px}
.res.ok{background:var(--verde);color:var(--verde-tinta)}
.res.no{border:1px solid var(--gris-osc);color:var(--mute)}
.res.pend{border:1px solid var(--ambar-borde);color:var(--ambar);
          display:inline-flex;align-items:center;gap:.34rem}
.res.pend .punto{width:5px;height:5px;background:var(--ambar);
                 box-shadow:0 0 0 0 var(--ambar-borde)}
.marc{display:block;margin-top:.25rem;font-size:.8rem;color:var(--tinta-2);
      font-variant-numeric:tabular-nums}
.marc.sola{display:inline;margin:0;color:var(--mute)}
.marc.gordo{display:inline-block;margin:0;font-size:.95rem;font-weight:700;
            color:var(--tinta)}
/* El sello de estado, a la derecha del marcador. Sin esto, un 1-0 en juego
   y un 1-0 terminado se veían exactamente igual. */
.min-vivo{display:inline-flex;align-items:center;gap:.32rem;margin-left:.5rem;
          padding:.1rem .4rem;border-radius:99px;font-size:.74rem;
          color:var(--verde);font-weight:700;background:var(--verde-osc);
          border:1px solid var(--verde-borde);
          font-variant-numeric:tabular-nums;white-space:nowrap}
.min-vivo .punto{width:5px;height:5px}
.min-fin{display:inline-block;margin-left:.5rem;padding:.1rem .4rem;
         border-radius:99px;font-size:.72rem;font-weight:600;color:var(--dim);
         border:1px solid var(--linea);white-space:nowrap}

/* ── La agenda ── */
.grupos{display:grid;gap:1rem}
.grupo{overflow:hidden}
.grupo-t,.grupo>summary{padding:.95rem 1.15rem;font-size:1rem;font-weight:700;
                        color:var(--tinta);border-bottom:1px solid var(--linea-2)}
.grupo>summary{cursor:pointer;list-style:none;display:flex;align-items:center;
               gap:.6rem;transition:background .2s var(--ease)}
.grupo>summary::-webkit-details-marker{display:none}
.grupo>summary::before{content:"▸";color:var(--verde);font-size:.8rem}
.grupo[open]>summary::before{content:"▾"}
.grupo>summary:hover{background:var(--caja-2)}
.grupo .n{font-size:.8rem;font-weight:600;color:var(--mute);
          background:var(--caja-2);border-radius:99px;padding:.1rem .55rem}
.grupo[open]>summary{border-bottom:1px solid var(--linea-2)}
tbody tr.ag.jugando{box-shadow:inset 3px 0 0 var(--verde);
                    background:var(--fila-verde)}
tbody tr.ag.final{opacity:.72}
tbody tr.ag.aplazado,tbody tr.ag.cancelado{opacity:.55}
.c-ven{white-space:nowrap}
.ven{font-size:.82rem;color:var(--mute);font-variant-numeric:tabular-nums}
.ven.aprox{border-bottom:1px dotted var(--dim);cursor:help}
.ven.ahora{color:var(--verde);font-weight:600}
.ven.paso{color:var(--dim)}

/* ── Metodología ── */
.dos-col{display:grid;gap:1.4rem;align-items:start}
@media (min-width:1000px){
  .dos-col{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2.2rem}
}
.prosa{max-width:70ch}
.prosa h2{font-size:1.2rem;font-weight:700;margin:2rem 0 .7rem}
.prosa h2:first-child{margin-top:0}
.prosa p{margin-bottom:.9rem;color:var(--tinta-2);font-size:.97rem;line-height:1.7}
.prosa b{color:var(--tinta);font-weight:600}
.prosa .aviso{margin-top:1.4rem;padding:1rem 1.15rem;background:var(--caja);
              border:1px solid var(--linea);border-left:3px solid var(--ambar);
              border-radius:8px;font-size:.9rem}
.pasos-lista{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:1.1rem}
.pasos-lista li{display:flex;gap:.9rem;align-items:flex-start}
.pasos-lista .n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;
                place-items:center;background:var(--verde);color:var(--verde-tinta);
                font-weight:800;font-size:.82rem;margin-top:.15rem}
.pasos-lista b{display:block;color:var(--tinta);margin-bottom:.15rem}
.pasos-lista span span,.pasos-lista li>span:last-child{font-size:.93rem;
                                                       color:var(--tinta-2);
                                                       line-height:1.65}

/* ─────────── Pie ─────────── */
.pie-web{border-top:1px solid var(--linea-2);background:var(--bg-2);
         padding:1.6rem 0 2.2rem}
.pie-in{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.pie-marca{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.pie-marca img{height:28px;width:auto}
.pie-marca span{font-size:.74rem;color:var(--dim)}
.pie-rasgos{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;font-size:.82rem;
            color:var(--mute)}
.pie-rasgos span{display:inline-flex;align-items:center;gap:.42rem}
.pie-rasgos svg{width:15px;height:15px;color:var(--verde)}
.pie-fin{margin-left:auto;font-size:.82rem;color:var(--dim);
         display:inline-flex;align-items:center;gap:.6rem}
/* Los enlaces a las cinco páginas. No estaban en el mockup: se añaden
   porque son los enlaces internos que Google sigue para encontrarlas. */
.pie-nav{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;
         font-size:.84rem}
.pie-nav a{color:var(--mute);border-bottom:1px solid transparent;
           transition:color .2s var(--ease),border-color .2s var(--ease)}
.pie-nav a:hover{color:var(--verde);border-bottom-color:var(--verde-borde)}
.pie-nav [aria-current]{color:var(--tinta-2)}
.legal{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--linea-2);
       display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
       font-size:.78rem;color:var(--dim)}
.b18{border:1px solid var(--linea);border-radius:4px;padding:.06rem .34rem;
     font-size:.72rem;font-weight:700;color:var(--mute)}

/* Salto al contenido: fuera de la pantalla hasta que se le da el foco
   con el tabulador. Quien navega con teclado no tiene que recorrer el
   menú entero en cada página. */
.skip{position:absolute;left:-9999px;top:0;z-index:90;padding:.7rem 1.1rem;
      background:var(--verde);color:var(--verde-tinta);font-weight:700;
      border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ─────────── Preguntas frecuentes ─────────── */
/* Las mismas que van en el FAQPage del <head>: si se ven en la página y
   están en los datos estructurados, Google puede enseñarlas plegadas
   bajo el resultado. */
.faq{display:grid;gap:.6rem;margin-top:1rem}
.faq-item{background:var(--caja);border:1px solid var(--linea);
          border-radius:10px;padding:.9rem 1.1rem}
.faq-item summary{cursor:pointer;font-weight:600;color:var(--tinta);
                  font-size:.95rem;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;color:var(--verde);
                         font-weight:700;margin-left:.8rem}
.faq-item[open] summary::after{content:"\2212"}
.faq-item[open] summary{margin-bottom:.6rem}
.faq-item p{font-size:.9rem;color:var(--tinta-2);line-height:1.65}

/* ─────────── Aviso de la vista previa ─────────── */
.previo{background:var(--ambar);color:var(--ambar-tinta);font-size:.82rem;font-weight:600;
        text-align:center;padding:.55rem 1rem}
.previo a{text-decoration:underline}

/* ─────────── Las tablas en el móvil ───────────
   Una tabla de seis columnas no cabe en 375 px. Estaba dentro de un
   .tabla-env con scroll lateral, y eso en la agenda significaba que en el
   móvil solo se veían la hora y el partido: «En ventana» y «Resultado» —o
   sea, lo que se viene a mirar— quedaban fuera de pantalla detrás de un
   deslizamiento que nadie descubre.

   Aquí cada fila pasa a ser una ficha: el partido en su renglón y el resto
   de los datos debajo, envolviéndose. Las cabeceras se esconden y lo que
   haría falta para entender un número suelto lo pone un ::before. Se hace
   solo con CSS, sin tocar el marcado, para que valga igual para lo que
   pinta gen2.py y para lo que repinta v2.js. */
@media (max-width:760px){
  .tabla-env{overflow-x:visible}
  .t-live,.t-dia,.t-ag{display:block;min-width:0}
  .t-live thead,.t-dia thead,.t-ag thead{display:none}
  .t-live tbody,.t-dia tbody,.t-ag tbody{display:block}

  .t-live tbody tr,.t-dia tbody tr,.t-ag tbody tr{
      display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .85rem;
      padding:.8rem .95rem;border-bottom:1px solid var(--linea)}
  .t-live tbody tr:last-child,.t-dia tbody tr:last-child,
  .t-ag tbody tr:last-child{border-bottom:0}
  .t-live td,.t-dia td,.t-ag td{display:block;border:0;padding:0;
      flex:0 0 auto;font-size:.86rem;white-space:normal}

  /* el partido, en su propio renglón y primero de todo */
  .t-live tbody td:nth-child(1),
  .t-dia  tbody td:nth-child(2),
  .t-ag   tbody td:nth-child(2){flex:1 1 100%;order:0}
  .t-dia tbody td:nth-child(1),.t-ag tbody td:nth-child(1){order:1}
  .t-live tbody td:nth-child(2){order:1}
  .t-live tbody td:nth-child(3),.t-dia tbody td:nth-child(3),
  .t-ag   tbody td:nth-child(3){order:2}
  .t-live tbody td:nth-child(4),.t-dia tbody td:nth-child(4){order:3}
  .t-live tbody td:nth-child(5),.t-dia tbody td:nth-child(5){order:4}
  .t-live tbody td:nth-child(6),.t-dia tbody td:nth-child(6),
  .t-ag   tbody td:nth-child(4){order:5;margin-left:auto}

  /* los números sueltos, sin su cabecera, no dicen nada: se etiquetan */
  .t-live tbody td:nth-child(2)::before,
  .t-dia  tbody td:nth-child(3)::before{content:"min "}
  .t-live tbody td:nth-child(4)::before,
  .t-dia  tbody td:nth-child(5)::before{content:"cuota "}
  .t-live tbody td:nth-child(2)::before,
  .t-live tbody td:nth-child(4)::before,
  .t-dia  tbody td:nth-child(3)::before,
  .t-dia  tbody td:nth-child(5)::before{color:var(--dim);font-size:.72rem}

  /* la barrita de probabilidad no tiene sitio; queda el número */
  .t-live .barra,.t-dia .barra{display:none}
  .t-live .prob-cel,.t-dia .prob-cel{min-width:0}
  .t-live .prob-n,.t-dia .prob-n{display:inline;font-size:.86rem}
  .t-live .prob-cel::before,.t-dia .prob-cel::before{content:"prob ";
      color:var(--dim);font-size:.72rem}
  .t-live td.num,.t-dia td.num,.t-ag td.num{text-align:left}
  .t-dia .c-hora,.t-ag .c-hora{color:var(--mute)}
  .t-live .c-est{white-space:nowrap}
  /* el resultado deja de apilarse: chip y marcador en fila, con su aire */
  .t-dia .c-res,.t-ag .c-res{display:flex;align-items:center;gap:.45rem}
  .marc{display:inline-block;margin-top:0}
  .min-vivo,.min-fin{margin-left:0}

  /* el aviso de tabla vacía ocupa la ficha entera */
  .t-live tbody td.vacio,.t-dia tbody td.vacio,.t-ag tbody td.vacio{
      flex:1 1 100%;order:0;text-align:center}
}

/* ─────────── Movimiento reducido ─────────── */
/* Windows trae esta preferencia activada de fábrica en muchos equipos, así
   que aquí solo se apaga lo que de verdad molesta: el barrido y el latido. */
@media (prefers-reduced-motion:reduce){
  .radar .barrido{animation:none}
  .punto{animation:none}
  html{scroll-behavior:auto}
}