/* Layout: fondo blanco con los dos azules del logo y la bandera; franja celeste, blanco, celeste arriba;
   rejilla de tarjetas cuadradas; ficha con foto cuadrada e índice lateral; buscador interno fijo en la barra.
   Diseño de un solo tema claro, por decisión: el sitio es blanco con detalles azules. */
:root{
  --blanco:#FFFFFF;
  --marino:#0B2A5B;
  --celeste:#1E9BE0;
  --celeste-fuerte:#0F7FC2;
  --celeste-suave:#EAF5FD;
  --tinta:#13213D;
  --gris:#56657F;
  --linea:#D9E5F2;
  --amarillo:#F6B81A;
  --f:"Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --r:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--blanco)}
body{margin:0;background:var(--blanco);color:var(--tinta);font-family:var(--f);font-size:16px;line-height:1.65}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--celeste-fuerte);text-underline-offset:3px;font-weight:600}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.tarjeta:focus-visible,.resultado:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px;border-radius:8px}
h1,h2,h3{font-weight:800;line-height:1.15;text-wrap:balance;margin:0;color:var(--marino);letter-spacing:-.01em}
p{margin:0}
mark{background:#FFE9A8;color:inherit;border-radius:3px;padding:0 2px}
.envoltura{max-width:1120px;margin:0 auto;padding-inline:20px}
.eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--celeste-fuerte)}

/* Franja tipo bandera */
.franja{display:grid;grid-template-columns:1fr 1fr 1fr;height:6px}
.franja span:nth-child(1),.franja span:nth-child(3){background:var(--celeste)}
.franja span:nth-child(2){background:var(--blanco)}

/* Barra superior */
.barra{background:var(--blanco);position:sticky;top:env(safe-area-inset-top,0px);z-index:20;border-bottom:1px solid var(--linea);box-shadow:0 1px 0 rgba(11,42,91,.03)}
.barra .envoltura{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding-block:10px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.marca img{height:52px;width:auto;max-width:none;flex:none;object-fit:contain}
.nav{display:flex;gap:6px}
.nav a{color:var(--marino);text-decoration:none;font-size:.88rem;font-weight:600;padding:8px 12px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--celeste-suave)}
.nav a[aria-current="page"]{background:var(--marino);color:var(--blanco)}

/* Buscador interno */
.buscador{position:relative;max-width:560px;width:100%;justify-self:center}
.buscador input{width:100%;font:inherit;font-size:.95rem;color:var(--tinta);background:var(--celeste-suave);border:2px solid transparent;border-radius:999px;padding:10px 16px 10px 42px;transition:border-color .15s,background .15s}
.buscador input:focus{background:var(--blanco);border-color:var(--celeste);outline:none}
.buscador .lupa{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--celeste-fuerte);pointer-events:none}
.panel{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);box-shadow:0 18px 40px rgba(11,42,91,.14);max-height:min(70vh,560px);overflow:auto;padding:8px}
.panel .grupo{padding:8px 8px 4px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.resultado{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:10px;border-radius:10px;text-decoration:none;color:var(--tinta);font-weight:400}
.resultado:hover,.resultado.activo{background:var(--celeste-suave)}
.resultado .mini{width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--celeste-suave)}
.resultado .t{font-weight:700;color:var(--marino);font-size:.95rem}
.resultado .donde{font-size:.74rem;font-weight:600;color:var(--celeste-fuerte)}
.resultado .frag{font-size:.86rem;color:var(--gris);line-height:1.45;display:block;overflow-wrap:anywhere}
.panel .nada{padding:14px 10px;color:var(--gris);font-size:.92rem}

/* Portada */
.portada{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding-block:48px 40px}
.portada h1{font-size:clamp(2rem,4.8vw,3.3rem)}
.portada h1 em{font-style:normal;color:var(--celeste)}
.portada .entrada{font-size:1.08rem;color:var(--gris);max-width:58ch;margin-top:16px}
.portada .acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.boton{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:.95rem;text-decoration:none;border-radius:999px;padding:12px 22px;border:2px solid var(--marino);cursor:pointer}
.boton.primario{background:var(--marino);color:var(--blanco)}
.boton.primario:hover{background:var(--celeste-fuerte);border-color:var(--celeste-fuerte)}
.boton.secundario{background:var(--blanco);color:var(--marino)}
.boton.secundario:hover{background:var(--celeste-suave)}
.portada .logo-grande{justify-self:center;width:min(360px,100%);height:auto;object-fit:contain}
.actualizado{font-size:.82rem;color:var(--gris);margin-top:16px}

/* Calendario */
.calendario{background:var(--celeste-suave);border-radius:var(--r);padding:24px}
.calendario ol{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.calendario li{background:var(--blanco);border-radius:12px;padding:14px;display:grid;gap:6px;align-content:start;border-top:4px solid var(--linea)}
.calendario li.clave{border-top-color:var(--celeste)}
.calendario .fecha{font-weight:800;color:var(--marino);font-size:.95rem;font-variant-numeric:tabular-nums}
.calendario .que{font-size:.84rem;color:var(--gris);line-height:1.4}

/* Reglas */
.reglas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-block:40px}
.regla{display:grid;gap:8px;align-content:start;padding:20px;border:1px solid var(--linea);border-radius:var(--r)}
.regla .icono{width:36px;height:36px;border-radius:10px;background:var(--celeste-suave);color:var(--celeste-fuerte);display:grid;place-items:center}
.regla h2{font-size:1.08rem}
.regla p{font-size:.93rem;color:var(--gris)}

/* Rejilla */
.cabecera-lista{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:8px 16px}
.cabecera-lista h2{font-size:1.7rem}
.filtros{display:flex;gap:8px;flex-wrap:wrap}
.filtro{font:inherit;font-size:.85rem;font-weight:600;color:var(--marino);background:var(--blanco);border:1.5px solid var(--linea);border-radius:999px;padding:7px 14px;cursor:pointer}
.filtro[aria-pressed="true"]{background:var(--marino);border-color:var(--marino);color:var(--blanco)}
.conteo{font-size:.84rem;color:var(--gris);margin-bottom:14px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;padding-bottom:64px}
.tarjeta{display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;font-weight:400;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.tarjeta:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(11,42,91,.12);border-color:var(--celeste)}
.tarjeta .info{padding:14px 16px 16px;display:grid;gap:6px;align-content:start}
.tarjeta h3{font-size:1.05rem}
.tarjeta .partido{font-size:.84rem;color:var(--gris);line-height:1.35}
.foto{aspect-ratio:1/1;width:100%;height:auto;max-width:100%;object-fit:cover;object-position:center top;background:var(--celeste-suave)}
.sinfoto{aspect-ratio:1/1;width:100%;max-width:100%;display:grid;place-items:center;align-content:center;gap:8px;background:linear-gradient(180deg,var(--celeste-suave),#D6ECFB);color:var(--celeste-fuerte)}
.sinfoto svg{width:42%;height:auto}
.sinfoto span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.vacio{padding:32px 0 64px;color:var(--gris)}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 10px;width:max-content;max-width:100%;background:var(--celeste-suave);color:var(--celeste-fuerte)}
.chip.aspirante{background:var(--marino);color:var(--blanco)}
.chip.borde{background:var(--blanco);border:1.5px dashed var(--celeste);color:var(--marino)}
.chip.tipo{background:var(--blanco);border:1.5px solid var(--linea);color:var(--marino)}

/* Ficha */
.volver{display:inline-flex;align-items:center;gap:6px;padding-block:22px 6px;font-size:.92rem;text-decoration:none}
.ficha{display:grid;grid-template-columns:280px minmax(0,1fr);gap:44px;padding-block:14px 72px}
.lateral{position:sticky;top:calc(env(safe-area-inset-top,0px) + 92px);align-self:start;display:grid;gap:14px}
.lateral .foto,.lateral .sinfoto{border-radius:var(--r)}
.credito{font-size:.72rem;color:var(--gris);line-height:1.4;overflow-wrap:anywhere}
.credito a{font-weight:600}
.indice{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:.86rem}
.indice a{display:block;color:var(--gris);text-decoration:none;font-weight:500;padding:5px 10px;border-radius:8px}
.indice a:hover{background:var(--celeste-suave);color:var(--marino)}
.cuerpo{min-width:0;display:grid;gap:44px}
.cabeza{display:grid;gap:12px}
.cabeza h1{font-size:clamp(2rem,4.5vw,2.9rem)}
.cabeza .chips{display:flex;gap:8px;flex-wrap:wrap}
.partido-id{display:flex;align-items:center;gap:12px}
.partido-id img{width:56px;height:56px;flex:none;object-fit:contain;background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:4px}
.partido-id .rotulo{display:block;font-size:.72rem;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}
.partido-id .nombre-partido{font-weight:700;color:var(--marino);line-height:1.3}
.situacion{background:var(--celeste-suave);border-radius:12px;padding:14px 16px;font-size:.95rem}
.situacion strong{color:var(--marino)}
.resumen{font-size:1.05rem;max-width:68ch}
.seccion{display:grid;gap:14px;scroll-margin-top:110px;border-radius:12px;transition:background .6s}
.seccion.destello{background:#FFF6DA}
.seccion > h2{font-size:1.3rem;display:flex;gap:12px;align-items:center}
.seccion > h2 .num{display:grid;place-items:center;min-width:34px;height:34px;border-radius:10px;background:var(--celeste-suave);color:var(--celeste-fuerte);font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums}
.ayuda{font-size:.88rem;color:var(--gris);max-width:70ch}
dl.datos{display:grid;grid-template-columns:160px minmax(0,1fr);gap:10px 20px;margin:0}
dl.datos dt{color:var(--gris);font-size:.88rem;font-weight:600}
dl.datos dd{margin:0}
ul.lista{margin:0;padding-left:20px;display:grid;gap:8px;max-width:72ch}
ul.lista li::marker{color:var(--celeste)}
.historial{display:grid;border-top:1px solid var(--linea)}
.historial .fila{display:grid;grid-template-columns:70px minmax(0,1fr);gap:16px;padding-block:12px;border-bottom:1px solid var(--linea)}
.historial .anio{font-weight:800;color:var(--marino);font-variant-numeric:tabular-nums}
.ref{font:inherit;font-size:.7rem;font-weight:700;vertical-align:super;line-height:0;margin-left:2px;border:0;background:none;color:var(--celeste-fuerte);cursor:pointer;padding:0 1px}
.ref:hover{text-decoration:underline}
.senal{border:1px solid var(--linea);border-left:4px solid var(--celeste);border-radius:12px;background:var(--blanco);padding:16px 18px;display:grid;gap:10px}
.senal .hecho{max-width:72ch}
.senal dl{display:grid;grid-template-columns:130px minmax(0,1fr);gap:6px 16px;margin:0;font-size:.92rem}
.senal dt{color:var(--gris);font-weight:600}
.senal dd{margin:0}
.senal dd.estado{font-weight:700;color:var(--marino)}
.posturas{display:grid;border-top:1px solid var(--linea)}
.postura{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;padding-block:12px;border-bottom:1px solid var(--linea)}
.postura .tema{font-weight:700;color:var(--marino);font-size:.93rem}
.postura .anio{font-size:.76rem;color:var(--gris);display:block;font-weight:500}
.sinregistro{color:var(--gris);font-style:italic}
ol.fuentes{margin:0;padding-left:28px;display:grid;gap:8px;font-size:.9rem}
ol.fuentes li{overflow-wrap:anywhere;scroll-margin-top:110px;border-radius:6px;padding:2px 4px}
ol.fuentes li::marker{color:var(--celeste-fuerte);font-weight:700}
ol.fuentes li.resaltar{background:#FFF0BF}
ol.fuentes a{font-weight:600}
ol.fuentes .medio{color:var(--gris)}
.pasos{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--linea);padding-top:22px;flex-wrap:wrap}
.pasos a{display:grid;gap:2px;text-decoration:none;max-width:48%}
.pasos .n{font-size:1.05rem;font-weight:800;color:var(--marino)}
.pasos .sig{text-align:right;margin-left:auto}

/* Página de texto */
.texto{max-width:72ch;padding-block:44px 76px;display:grid;gap:36px}
.texto h1{font-size:clamp(2rem,4.5vw,2.8rem)}
.texto section{display:grid;gap:12px}
.texto h2{font-size:1.3rem}
.glosario{display:grid;margin:0;border-top:1px solid var(--linea)}
.glosario div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding-block:12px;border-bottom:1px solid var(--linea)}
.glosario dt{font-weight:700;color:var(--marino)}
.glosario dd{margin:0;color:var(--gris)}

footer{background:var(--marino);color:#DCE8F7;padding-block:32px 40px;font-size:.88rem}
footer .envoltura{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
footer img{height:64px;width:auto;max-width:none;object-fit:contain;background:var(--blanco);border-radius:12px;padding:6px}
footer p + p{margin-top:6px}

@media (max-width:900px){
  .barra .envoltura{grid-template-columns:auto auto;row-gap:10px}
  .buscador{grid-column:1 / -1;grid-row:2;max-width:none}
  .nav{justify-self:end}
  .portada{grid-template-columns:1fr;gap:24px;padding-block:32px}
  .portada .logo-grande{grid-row:1;width:min(240px,70%)}
  .calendario ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reglas{grid-template-columns:1fr;gap:12px}
  .ficha{grid-template-columns:1fr;gap:24px}
  .lateral{position:static;grid-template-columns:140px minmax(0,1fr);align-items:start}
  .lateral .indice{display:none}
}
@media (max-width:560px){
  .envoltura{padding-inline:16px}
  .marca img{height:44px}
  .nav a{padding:7px 10px;font-size:.82rem}
  .calendario{padding:16px}
  .calendario ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tarjeta .info{padding:10px 12px 12px}
  .tarjeta h3{font-size:.95rem}
  .lateral{grid-template-columns:110px minmax(0,1fr)}
  dl.datos,.senal dl,.postura,.glosario div{grid-template-columns:1fr;gap:2px}
  .postura{gap:4px}
  footer .envoltura{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}