/* ============================================================
   TORNEO DDAY · CLANES SIN GLORIA — sistema "cinematográfico"
   ------------------------------------------------------------
   Refresh visual profesional: mismo concepto artístico (militar,
   histórico, oscuro, fotográfico) sobre un sistema de tokens
   consistente — anchos, espacios, radios, sombras, capas,
   tipografía y movimiento centralizados acá para que cualquier
   ajuste futuro se haga en un solo lugar.
   Autocontenida — solo la usan las siete páginas públicas; el
   resto del sitio (admin) sigue con public/css/styles.css.
   ============================================================ */

:root{
  /* --- Color --- */
  --night:#0d100c;
  --olive:#363c2b;
  --khaki:#b8a57a;
  --parchment:#dfd3b4;
  --cream:#f4efe3;
  --red:#8c2f28;
  --red-bright:#b64b40;
  --green:#6c9567;
  --steel:#6f8ea0;
  --amber:#c78d4f;
  --rose:#a3675f;

  /* Paleta categórica para diferenciar clanes de un vistazo (directorio,
     tarjetas, modal de roster) sin salir de la familia de color del sitio
     — variantes tonales, no colores nuevos ajenos al sistema. Se asigna
     de forma determinística por clan (ver shared/clan-color.js), así que
     cada clan siempre cae en el mismo tono entre recargas. */
  --clan-c1:var(--khaki);
  --clan-c2:var(--red-bright);
  --clan-c3:var(--green);
  --clan-c4:var(--steel);
  --clan-c5:var(--amber);
  --clan-c6:var(--rose);
  --line:rgba(184,165,122,.27);
  --line-soft:rgba(223,211,180,.12);
  --line-strong:rgba(184,165,122,.5);
  --text-muted:#a39d89;
  --text-quiet:#96906f;

  /* Superficies con profundidad — variación deliberada para que no todo
     el sitio lea con el mismo peso oscuro. */
  --panel-deep:linear-gradient(160deg,rgba(33,39,27,.96),rgba(18,22,15,.98));
  --panel-quiet:rgba(21,25,18,.62);
  --panel-flat:#12150f;
  --surface-empty:rgba(15,18,13,.35);

  --font-display:'Stardos Stencil','Arial Narrow',Georgia,serif;
  --font-ui:'Roboto Condensed','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --font-data:'SFMono-Regular',Consolas,'Liberation Mono',monospace;

  /* --- Layout --- */
  --maxw:1400px;

  /* --- Espaciado (escala base 4px) --- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --section-gap:40px;

  /* --- Radios --- */
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:26px;
  --radius-pill:99px;

  /* --- Sombras --- */
  --shadow-sm:0 6px 16px rgba(0,0,0,.22);
  --shadow-md:0 10px 26px rgba(0,0,0,.28);
  --shadow-lg:0 20px 48px rgba(0,0,0,.4);
  /* Sombras con el tinte del ambiente (oliva-negro) en vez de negro puro —
     un negro neutro sobre este fondo se lee "genérico"; con un poco del
     hue del fondo, la sombra se siente parte de la misma escena. Para
     cards con foto/medallón, no para todo el sistema. */
  --shadow-warm-sm:0 6px 16px rgba(14,14,7,.38);
  --shadow-warm-md:0 14px 32px rgba(14,14,7,.46);

  /* --- Tipografía funcional (no titulares) --- */
  --fs-2xs:11px;
  --fs-xs:12.5px;
  --fs-sm:13.5px;
  --fs-md:15px;
  --fs-base:16px;
  --fs-lg:17px;

  /* --- Movimiento --- */
  --dur-fast:150ms;
  --dur-base:220ms;
  --dur-slow:420ms;
  --ease-standard:cubic-bezier(.2,.7,.3,1);
  --ease-decel:cubic-bezier(.16,1,.3,1);

  /* --- Controles --- */
  --control-h-sm:38px;
  --control-h-md:46px;
  --control-h-lg:54px;
}

[data-clan-color="c1"]{--clan-accent:var(--clan-c1)}
[data-clan-color="c2"]{--clan-accent:var(--clan-c2)}
[data-clan-color="c3"]{--clan-accent:var(--clan-c3)}
[data-clan-color="c4"]{--clan-accent:var(--clan-c4)}
[data-clan-color="c5"]{--clan-accent:var(--clan-c5)}
[data-clan-color="c6"]{--clan-accent:var(--clan-c6)}

*{box-sizing:border-box}
html{min-height:100%}
html.cin-scroll-lock{overflow:hidden}
/* Complemento de la técnica de bloqueo sin salto: app-shell.js fija
   body.top = -scrollY actual antes de agregar esta clase — acá se declara
   el position:fixed que hace que ese offset realmente inmovilice el
   contenido en su sitio visual (en vez de solo impedir que seolo). */
html.cin-scroll-lock body.cinematic{position:fixed;left:0;right:0;width:100%}
/* Corrección de capas del drawer móvil: .cin-header-inner y .cin-ticker
   son hermanos, ambos con z-index:1 explícito. En un empate, gana quien
   va DESPUÉS en el DOM — el ticker — así que el ticker terminaba
   pintándose sobre TODO el subárbol de .cin-header-inner (incluido el
   propio drawer, position:fixed, z-index:60): ese 60 solo compite dentro
   del contexto de apilamiento que .cin-header-inner ya crea por tener su
   propio z-index — nunca llega a compararse contra el ticker. La clase
   .cin-scroll-lock ya la agrega JS en el mismo instante en que el drawer
   se abre (iniciarMenuMovil() en app-shell.js), así que es el gancho
   correcto para subir .cin-header-inner por encima del ticker solo
   mientras el menú está realmente abierto — sin tocar nada del layout
   normal cerrado ni de escritorio. */
html.cin-scroll-lock .cin-header-inner{z-index:65}
body.cinematic{
  margin:0;
  min-height:100vh;
  color:var(--cream);
  font-family:var(--font-ui);
  background:linear-gradient(#161912,#0f120e);
  position:relative;
  /* La SPA gestiona el scroll a mano en cada navegación (ver
     scrollPorRuta en app-shell.js) — el scroll-anchoring nativo del
     navegador pelearía con eso cuando el contenido cambia de alto. */
  overflow-anchor:none;
}
body.cinematic::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(rgba(14,17,12,.86),rgba(10,12,9,.94)),
    url("/img/dday-global-bg.webp") center top / cover fixed;
}
body.cinematic h1,body.cinematic h2,body.cinematic h3{margin:0;font-family:var(--font-display);font-weight:700}
body.cinematic p{margin:0}
body.cinematic button{font:inherit;cursor:pointer}
body.cinematic a{color:inherit}
body.cinematic img{max-width:100%;display:block}
body.cinematic img[loading="lazy"]{background:rgba(0,0,0,.2)}

/* El header/hero es deliberadamente más ancho que el contenido normal
   (--hero-maxw vs --maxw) — protagonismo real, no una diferencia tibia
   de ~130px por lado que se leía como un desalineamiento accidental
   (esa fue la primera versión de esto). Ahora la diferencia es grande
   a propósito para que se note como decisión, mientras el contenido de
   abajo (#view-root, footer) se queda en su propia retícula fija de
   siempre — nunca cambia de ancho. */
.cin-shell{max-width:min(94vw, 1800px);margin:0 auto;padding:var(--space-5) var(--space-6) 72px}
#view-root,.cin-footer{max-width:var(--maxw);margin-left:auto;margin-right:auto}

/* --- Cabecera / héroe fotográfico ---
   Estructura en dos filas apiladas: arriba identidad + título; abajo
   navegación de ancho completo. En páginas interiores el mismo
   componente adopta .cin-header--compact y puede quedar sticky al
   hacer scroll (.cin-header--stuck, añadida por JS). */
.cin-header{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-xl);
  border:1px solid var(--line);
  background:#11140f;
  box-shadow:var(--shadow-md);
  margin-bottom:var(--section-gap);
}
.cin-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(70% 65% at 18% 20%,rgba(9,11,8,.88) 0%,rgba(9,11,8,.5) 55%,transparent 82%),
    linear-gradient(0deg,rgba(9,11,8,.8) 0%,rgba(9,11,8,.32) 32%,transparent 56%,rgba(9,11,8,.6) 100%),
    url("/img/dday-global-bg.webp") center 32% / cover no-repeat;
  filter:saturate(.7) contrast(1.08);
  /* translate/scale INDEPENDIENTES (no el shorthand transform): el
     parallax por cursor (JS, --px/--py) necesita moverse sin pelearse
     con el zoom continuo de abajo — son dos propiedades CSS separadas
     que componen solas, a diferencia de dos animaciones de "transform"
     que se pisarían entre sí. */
  translate:calc(var(--px,0) * 1px) calc(var(--py,0) * 1px);
  scale:1.04;
  transition:translate .12s linear;
}
/* Zoom lento tipo documental, SOLO en el hero completo (nunca en el
   header compacto de páginas interiores — ahí se queda quieto, como
   antes). "Respira" en vez de acercarse sin freno: alterna
   sutilmente entre 1.04 y 1.11 en 26s, para que el fondo se sienta vivo
   incluso sin mover el mouse. Anulado por completo (no solo acelerado)
   bajo prefers-reduced-motion — ver ese media query más abajo. */
.cin-header:not(.cin-header--compact)::before{
  animation:cinHeroBreathe 26s ease-in-out infinite;
}
@keyframes cinHeroBreathe{
  0%,100%{scale:1.04}
  50%{scale:1.11}
}
/* Video real del hero (solo index.html — ver el comentario en ese HTML
   sobre la fuente). Es un elemento real (no pseudo), así que por orden
   de pintado queda AUTOMÁTICAMENTE por encima de ::before (que sigue
   existiendo como respaldo/poster con su imagen fija de siempre, visible
   solo hasta que el video carga o si el navegador no puede reproducirlo)
   y por debajo del grano de ::after (los pseudo-elementos ::after
   siempre pintan al final, como si fueran el último hijo). Mismas
   variables --px/--py que ya escribe iniciarParallax() en
   app-shell.js — no hace falta ningún cambio de JS. */
.cin-hero-video{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;
  filter:saturate(.55) contrast(1.15) brightness(.78);
  translate:calc(var(--px,0) * 1px) calc(var(--py,0) * 1px);
  scale:1.04;
  transition:translate .12s linear;
  animation:cinHeroBreathe 26s ease-in-out infinite;
}
.cin-header::after{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
  /* Segunda capa de profundidad del parallax — se mueve MENOS que el
     fondo (::before) y en dirección opuesta, como si el grano viviera
     en un plano de vidrio más cercano a cámara. Sutil a propósito: es
     textura, no debe leerse como que "flota". */
  transform:translate3d(calc(var(--px,0) * -0.35px), calc(var(--py,0) * -0.35px), 0);
}
/* Foco de luz que sigue el cursor — capa propia (no pseudo-elemento:
   necesita dos gradientes independientes, uno ambiental y uno de núcleo
   brillante, para leer como un haz real y no un simple degradé plano).
   --gx/--gy los escribe iniciarParallax() en app-shell.js, mismo
   mecanismo que --mx/--my en las cards. Invisible hasta el hover — en
   móvil/puntero grueso nunca se activa (iniciarParallax() no corre ahí),
   así que queda en opacity:0 sin costo. */
.cin-hero-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(480px circle at var(--gx,50%) var(--gy,25%),rgba(223,211,180,.24),rgba(184,165,122,.08) 42%,transparent 72%);
  mix-blend-mode:soft-light;
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-standard);
  transform:translate3d(calc(var(--px,0) * 1.4px),calc(var(--py,0) * 1.4px),0);
}
.cin-hero-glow::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(150px circle at var(--gx,50%) var(--gy,25%),rgba(255,248,228,.32),transparent 70%);
  mix-blend-mode:overlay;
}
.cin-header:hover .cin-hero-glow,.cin-header:focus-within .cin-hero-glow{opacity:1}

/* Ceniza/polvo a la deriva — motivo WWII, coherente con el grano ya
   existente. Seis motas, cada una con su propio timing (nth-child) para
   que no se sientan repetidas ni sincronizadas. Solo en el hero
   completo, nunca en el header compacto de páginas interiores. */
.cin-hero-dust{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cin-hero-dust span{
  position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;
  background:rgba(223,211,180,.55);box-shadow:0 0 4px rgba(223,211,180,.4);
  opacity:0;
}
.cin-hero-dust span:nth-child(1){left:8%;width:2px;height:2px}
.cin-hero-dust span:nth-child(2){left:22%}
.cin-hero-dust span:nth-child(3){left:38%;width:2px;height:2px}
.cin-hero-dust span:nth-child(4){left:57%}
.cin-hero-dust span:nth-child(5){left:74%;width:2px;height:2px}
.cin-hero-dust span:nth-child(6){left:88%}
/* Un solo shorthand "animation" por regla (nombre+duración+timing+delay+
   iteración juntos): partirlo entre una regla base con el shorthand y
   reglas nth-child con duration/delay sueltos NO funciona — el shorthand
   de mayor especificidad resetea esas longhand a sus valores iniciales
   (0s), aunque las nth-child vengan después en el archivo. */
.cin-header:not(.cin-header--compact) .cin-hero-dust span:nth-child(1){animation:cinDustRise 14s linear 0s infinite}
.cin-header:not(.cin-header--compact) .cin-hero-dust span:nth-child(2){animation:cinDustRise 19s linear 2.4s infinite}
.cin-header:not(.cin-header--compact) .cin-hero-dust span:nth-child(3){animation:cinDustRise 16s linear 5.1s infinite}
.cin-header:not(.cin-header--compact) .cin-hero-dust span:nth-child(4){animation:cinDustRise 21s linear 1.2s infinite}
.cin-header:not(.cin-header--compact) .cin-hero-dust span:nth-child(5){animation:cinDustRise 17s linear 7.6s infinite}
.cin-header:not(.cin-header--compact) .cin-hero-dust span:nth-child(6){animation:cinDustRise 20s linear 4s infinite}
@keyframes cinDustRise{
  0%{translate:0 0;opacity:0}
  8%{opacity:.5}
  50%{translate:14px -140px;opacity:.35}
  92%{opacity:0}
  100%{translate:26px -260px;opacity:0}
}
.cin-header-inner{position:relative;z-index:1;padding:var(--space-8) var(--space-8) var(--space-6);transition:padding var(--dur-slow) var(--ease-standard)}
.cin-identity{display:flex;align-items:flex-start;gap:var(--space-5);flex-wrap:wrap}
.cin-badge{
  width:96px;height:106px;flex:0 0 96px;
  display:grid;place-items:center;margin-top:6px;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.6));
  transition:width var(--dur-slow) var(--ease-standard),height var(--dur-slow) var(--ease-standard);
}
.cin-badge img{width:100%;height:100%;object-fit:contain}
/* Logo de comunidad, clickeable a Inicio — en el header (.cin-badge) y
   en el footer (.cin-footer-brand). Mismo hover en los dos lugares. */
.cin-logo-link{display:block;line-height:0;transition:transform var(--dur-base) var(--ease-standard),filter var(--dur-base) var(--ease-standard)}
.cin-logo-link:hover,.cin-logo-link:focus-visible{transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(184,165,122,.6))}
.cin-logo-link:active{transform:scale(.96)}
.cin-logo-link:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px;border-radius:50%}
.cin-title{padding-right:var(--space-3)}
.cin-title p{margin:0 0 var(--space-2);color:var(--khaki);font-family:var(--font-ui);font-size:var(--fs-md);font-weight:700;letter-spacing:.22em;text-transform:uppercase;text-shadow:0 2px 9px #000;transition:font-size var(--dur-slow) var(--ease-standard),margin var(--dur-slow) var(--ease-standard)}
.cin-title h1{
  color:var(--parchment);
  font-size:clamp(44px,6.4vw,104px);
  line-height:.92;
  text-transform:uppercase;
  letter-spacing:.01em;
  text-shadow:0 8px 30px rgba(0,0,0,.7),0 2px 0 rgba(0,0,0,.4);
  transition:font-size var(--dur-slow) var(--ease-standard),line-height var(--dur-slow) var(--ease-standard);
}
.cin-title h1 em{color:var(--red-bright);font-style:normal;display:block}
/* Entrada palabra por palabra del título del hero — solo en index.html,
   solo mientras el header NO está compacto (nunca se ve en páginas
   interiores: ahí app-shell.js ya aplicó .cin-header--compact antes del
   primer paint). Arranca recién cuando .cin-hero-ready se agrega al
   <html> (después de que la intro cinematográfica termina o se salta —
   ver iniciar() en app-shell.js), para que nunca se desperdicie debajo
   de la pantalla de intro. prefers-reduced-motion ya la anula por
   completo vía la regla general de animation-duration más abajo. */
.cin-title h1 .word{display:inline-block}
/* Oculto SOLO si hay JS (html.has-js, agregado sincrónicamente en
   <head> antes de pintar el <body> — ver index.html) y el header sería
   el hero completo — nunca depende de que .cin-hero-ready realmente
   llegue a agregarse: sin eso (JS que falla a mitad de camino, por
   ejemplo) esta regla no aplicaría y las palabras seguirían visibles,
   nunca escondidas para siempre. */
html.has-js .cin-header:not(.cin-header--compact) .cin-title h1 .word{opacity:0}
.cin-hero-ready .cin-header:not(.cin-header--compact) .cin-title h1 .word{
  animation:cinWordIn .95s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i) * 110ms);
}
/* Más recorrido y un breve destello de luz al aterrizar cada palabra
   (55%: pico de text-shadow cálido) — antes era un fundido discreto de
   16px; esto pega más fuerte, a tono con el resto del hero. */
@keyframes cinWordIn{
  0%{opacity:0;transform:translateY(38px) scale(1.2);filter:blur(13px);text-shadow:0 0 0 transparent}
  55%{opacity:1;filter:blur(0);text-shadow:0 0 32px rgba(255,241,214,.85)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);text-shadow:0 8px 30px rgba(0,0,0,.7)}
}
.cin-pills{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5);transition:margin var(--dur-slow) var(--ease-standard),opacity var(--dur-base) var(--ease-standard),max-height var(--dur-base) var(--ease-standard);max-height:60px;opacity:1;overflow:hidden}
.cin-pills span{padding:var(--space-2) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--khaki);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;background:rgba(10,13,9,.45);backdrop-filter:blur(2px)}

/* Botón de menú móvil — solo visible <850px, en su propia fila DESPUÉS
   de los metadatos (jerarquía: logo → eyebrow → título → metadatos →
   menú → resumen operativo), nunca compitiendo con el título. Sin JS,
   el <nav> de abajo ya es una lista vertical navegable normal (ver
   responsive), así que este botón nunca es el único camino a la nav. */
.cin-menu-row{display:none}
.cin-menu-toggle{
  display:none;align-items:center;gap:8px;min-height:44px;padding:10px 16px;
  border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--parchment);
  background:rgba(9,11,8,.55);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.cin-menu-toggle .bars{display:block;width:18px;height:2px;background:var(--khaki);position:relative;flex:0 0 auto}
.cin-menu-toggle .bars::before,.cin-menu-toggle .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--khaki)}
.cin-menu-toggle .bars::before{top:-6px}
.cin-menu-toggle .bars::after{top:6px}
.cin-menu-toggle:hover{border-color:var(--khaki)}
.cin-nav-backdrop{display:none}

/* Navegación: fila propia, ancho completo, grilla pareja en desktop. */
.cin-nav{position:relative;z-index:1;margin-top:var(--space-7);transition:margin var(--dur-slow) var(--ease-standard)}
/* Desktop: barra segmentada continua (bordes a tope, sin separación entre
   ítems) en vez de una colección de píldoras redondeadas independientes —
   dirección visual "centro de operaciones". El drawer móvil recupera el
   espaciado/radio propios más abajo, donde el patrón vertical los
   necesita para seguir siendo legible como lista. */
.cin-nav ul{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin:0;padding:0}
.cin-nav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:var(--control-h-lg);padding:9px 8px;
  color:var(--cream);border:1px solid rgba(244,239,227,.16);border-left:none;border-radius:0;
  background:rgba(9,11,8,.5);backdrop-filter:blur(5px);
  text-decoration:none;text-transform:uppercase;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  transition:border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}
.cin-nav li:first-child a{border-left:1px solid rgba(244,239,227,.16);border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}
.cin-nav li:last-child a{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}
.cin-nav a span{display:inline-flex;color:var(--khaki);font-size:15px;line-height:1}
.cin-nav a span svg{width:18px;height:18px;display:block}
.cin-nav a:hover{background:rgba(184,165,122,.14);z-index:1;position:relative}
.cin-nav a.active{background:var(--red);border-color:var(--red);color:#fff}
.cin-nav a.active span{color:#fff}

.cin-ticker{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  padding:var(--space-6) var(--space-8) var(--space-7);border-top:1px solid var(--line-soft);
  color:var(--khaki);font-size:var(--fs-sm);letter-spacing:.05em;
  transition:padding var(--dur-slow) var(--ease-standard),opacity var(--dur-base) var(--ease-standard),max-height var(--dur-base) var(--ease-standard);
  max-height:80px;opacity:1;overflow:hidden;
}
.cin-ticker strong{
  font-size:var(--fs-md);letter-spacing:.08em;white-space:nowrap;
  padding-right:var(--space-4);margin-right:2px;border-right:1px solid var(--line-soft);
}
.cin-ticker span{color:var(--parchment);text-transform:uppercase}
.cin-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);margin-right:6px}

/* --- Cabecera compacta: mismo componente, para secciones interiores.
   Conserva identidad/foto/nav, reduce título y paddings. app-shell.js
   activa/desactiva la clase según la vista. --- */
.cin-header--compact .cin-header-inner{padding:var(--space-5) var(--space-8) var(--space-3)}
.cin-header--compact .cin-badge{width:50px;height:55px;flex:0 0 50px;margin-top:2px}
.cin-header--compact .cin-title{padding-right:0}
.cin-header--compact .cin-title p{margin-bottom:4px;font-size:var(--fs-xs)}
.cin-header--compact .cin-title h1{font-size:clamp(22px,2.6vw,32px);line-height:1}
.cin-header--compact .cin-pills{margin-top:8px;max-height:44px}
.cin-header--compact .cin-nav{margin-top:14px}
.cin-header--compact .cin-nav a{min-height:44px}
.cin-header--compact .cin-ticker{padding:12px var(--space-8) 14px}

/* Sticky: solo en interiores, con transición estable (sin layout shift —
   position:sticky nunca saca el header del flujo). Al quedar "pegado"
   (.cin-header--stuck, agregada por JS al hacer scroll) se adelgaza aún
   más y oculta pills/ticker para volverse una barra delgada y sólida. */
.cin-header--compact{position:sticky;top:12px;z-index:40;transition:box-shadow var(--dur-base) var(--ease-standard)}
.cin-header--compact.cin-header--stuck{box-shadow:var(--shadow-lg)}
.cin-header--compact.cin-header--stuck .cin-header-inner{padding-top:12px;padding-bottom:8px}
.cin-header--compact.cin-header--stuck .cin-pills{max-height:0;opacity:0;margin-top:0;overflow:hidden}
.cin-header--compact.cin-header--stuck .cin-ticker{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-top-color:transparent;overflow:hidden}
.cin-header--compact.cin-header--stuck .cin-badge{width:38px;height:42px;flex:0 0 38px}
.cin-header--compact.cin-header--stuck::before{filter:saturate(.5) contrast(1.05) brightness(.7)}
/* Suprime la transición un frame — usada por app-shell.js justo antes de
   restaurar scroll, para que el header no colapse "en cámara lenta" y
   dispare scroll-anchoring que arruine la posición restaurada. */
.cin-header--no-transition,.cin-header--no-transition *{transition:none!important}

/* --- Páginas interiores públicas (Clanes/Jugadores/Mapas/Tabla/Partidos):
   patrones compartidos — todo vive en tokens y clases reutilizables. --- */
/* Intro compartida por las 7 páginas interiores (Calendario, Partidos,
   Tabla, Clanes, Mapas, Reglas, Jugadores) — mismo empuje de escala que
   ya tiene Inicio, para que ninguna se sienta un escalón más chica. */
.cin-page-intro{margin-bottom:calc(var(--section-gap) + var(--space-4))}
.cin-page-intro .eyebrow{color:var(--khaki);font-size:var(--fs-sm);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.cin-page-intro h1{margin:14px 0 var(--space-4);color:var(--parchment);font-size:clamp(38px,5.4vw,72px);line-height:.94;text-transform:uppercase;letter-spacing:.01em}
.cin-page-intro p.lede{max-width:64ch;color:#d3cbb2;font-size:18px;line-height:1.8}
.cin-page-intro .cin-page-meta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.cin-page-meta span{padding:var(--space-2) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--khaki);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;background:rgba(255,255,255,.03)}

/* Tiles de clanes (grilla 01-09) — 3 columnas fijas en desktop para que
   nueve tarjetas siempre cierren en filas completas (3×3), sin una
   última fila huérfana; auto-fit solo entre esos extremos. */
.cin-clan-tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5);margin-bottom:var(--section-gap)}
@media(min-width:901px){
  .cin-clan-tile-grid{grid-template-columns:repeat(3,1fr)}
}
.cin-clan-tile{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-lg);text-align:left;
  background:var(--panel-deep);box-shadow:var(--shadow-warm-sm);
  color:inherit;font-family:inherit;cursor:pointer;
  transform:rotate(var(--tilt,0deg));
  transition:transform var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);
}
/* Micro-inclinación por tarjeta — como fotos clavadas en un tablero de
   operaciones, no una grilla perfectamente maquinada. Se endereza al
   acercarse (hover/focus) — el gesto de "tomar la ficha". */
.cin-clan-tile:nth-child(3n+1){--tilt:-.4deg}
.cin-clan-tile:nth-child(3n+2){--tilt:.3deg}
.cin-clan-tile:nth-child(3n){--tilt:-.2deg}
.cin-clan-tile::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:1;
  background:linear-gradient(90deg,var(--clan-accent,var(--khaki)),transparent 70%);opacity:.5;
}
/* Spotlight que sigue el cursor — app-shell.js escribe --mx/--my en cada
   pointermove; sin JS o fuera de hover, opacity:0 lo deja invisible. */
.cin-clan-tile::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(223,211,180,.10),transparent 70%);
  opacity:0;transition:opacity var(--dur-base) var(--ease-standard);
}
.cin-clan-tile:hover::after,.cin-clan-tile:focus-visible::after{opacity:1}
.cin-clan-tile .num{
  position:absolute;top:var(--space-4);right:var(--space-5);color:rgba(184,165,122,.22);
  font-family:var(--font-display);font-size:52px;line-height:1;letter-spacing:0;
}
.cin-clan-tile:hover,.cin-clan-tile:focus-visible{transform:translateY(-4px) rotate(0deg);border-color:var(--clan-accent,var(--khaki));box-shadow:var(--shadow-warm-md)}
.cin-clan-tile:active{transform:translateY(-1px) rotate(0deg) scale(.98)}
.cin-clan-tile:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}
.cin-clan-tile .crest{
  position:relative;z-index:1;display:block;width:56px;height:56px;border-radius:50%;overflow:hidden;
  /* Parchment, no panel oscuro: algunos escudos son arte en negro sobre
     fondo transparente (recortado de un original blanco) — sobre un
     fondo oscuro, esa tinta negra se vuelve invisible. Parchment da
     contraste sin volver a verse "recorte con fondo blanco". */
  border:2px solid var(--clan-accent,var(--khaki));background:var(--parchment);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.55),inset 0 -1px 2px rgba(244,239,227,.08),0 4px 10px rgba(14,14,7,.4),0 0 14px -3px var(--clan-accent,var(--khaki));
}
.cin-clan-tile .crest img{width:100%;height:100%;object-fit:cover}
.cin-clan-tile .tag{position:relative;color:var(--parchment);font-family:var(--font-display);font-size:34px;text-transform:uppercase;line-height:1}
.cin-clan-tile .nombre{color:var(--text-muted);font-size:var(--fs-xs);letter-spacing:.04em}
.cin-clan-tile .preview-nicks{color:var(--text-quiet);font-size:var(--fs-xs);letter-spacing:.02em}
.cin-clan-tile .footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--line-soft);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cin-clan-tile .footer .ver-roster{display:inline-flex;align-items:center;gap:5px;padding-right:3px;color:var(--red-bright)}
.cin-clan-tile .footer .ver-roster::after{content:"→";transition:transform var(--dur-base) var(--ease-standard)}
.cin-clan-tile:hover .footer .ver-roster::after{transform:translateX(3px)}
.cin-clan-tile .footer .count{color:var(--khaki)}

/* Roster del modal de clan */
.cin-modal-roster{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-2)}
.cin-modal-roster li{padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(0,0,0,.2);color:var(--cream);font-size:var(--fs-sm)}
.cin-modal-roster li small{color:var(--text-quiet);font-size:var(--fs-2xs)}
.cin-modal-roster-empty{grid-column:1/-1;color:var(--text-muted);font-style:normal}

/* Directorio de jugadores */
.cin-directory-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-bottom:var(--space-6);padding:var(--space-4) var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel-quiet)}
.cin-directory-search{flex:1 1 240px;position:relative}
.cin-directory-search input{
  width:100%;height:var(--control-h-md);padding:0 var(--space-4) 0 40px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:rgba(0,0,0,.28);color:var(--cream);font-family:var(--font-ui);font-size:var(--fs-md);
  transition:border-color var(--dur-base) var(--ease-standard);
}
.cin-directory-search input::placeholder{color:var(--text-quiet)}
.cin-directory-search input:focus-visible{outline:2px solid var(--red-bright);outline-offset:1px;border-color:var(--khaki)}
.cin-directory-search::before{content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--khaki);font-size:18px;pointer-events:none}
.cin-directory-filters{display:flex;flex-wrap:wrap;gap:var(--space-2);flex:2 1 auto;overflow-x:auto;padding-bottom:2px}
.cin-chip{
  flex:0 0 auto;height:var(--control-h-sm);padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-pill);background:rgba(255,255,255,.03);
  color:var(--khaki);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}
.cin-chip:hover{border-color:var(--khaki)}
.cin-chip.active{border-color:rgba(140,47,40,.6);background:rgba(140,47,40,.22);color:var(--parchment)}
.cin-chip:focus-visible{outline:2px solid var(--red-bright);outline-offset:2px}
.cin-directory-toggle{
  margin-left:auto;display:flex;align-items:center;gap:0;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--radius-pill);overflow:hidden;height:var(--control-h-sm);
}
.cin-directory-toggle button{
  height:100%;padding:0 var(--space-4);border:0;background:transparent;color:var(--text-muted);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}
.cin-directory-toggle button.active{background:rgba(184,165,122,.16);color:var(--parchment)}
.cin-directory-toggle button:focus-visible{outline:2px solid var(--red-bright);outline-offset:-2px}
.cin-directory-count{color:var(--text-muted);font-size:var(--fs-sm);margin-bottom:var(--space-4)}
.cin-directory-count strong{color:var(--parchment)}

.cin-directory-group{margin-bottom:var(--space-6)}
.cin-directory-group-title{color:var(--clan-accent,var(--khaki));font-size:var(--fs-sm);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--line-soft)}
.cin-directory-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-3);list-style:none;margin:0;padding:0}
.cin-directory-row{
  appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;
  display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);
  border:1px solid var(--line);border-radius:var(--radius-md);min-height:64px;
  background:var(--panel-quiet);
  transition:border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard);
}
.cin-directory-row:hover{border-color:var(--clan-accent,var(--khaki));transform:translateY(-1px);background:rgba(184,165,122,.06);box-shadow:inset 2px 0 var(--clan-accent,var(--khaki))}
.cin-directory-row:focus-visible{outline:2px solid var(--red-bright);outline-offset:2px}
.cin-directory-row .crest-mini{
  display:block;flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;
  border:1px solid var(--clan-accent,var(--line));background:var(--parchment);
}
.cin-directory-row .crest-mini img{width:100%;height:100%;object-fit:cover}
.cin-directory-row .nick{flex:1;color:var(--cream);font-family:var(--font-ui);font-weight:700;font-size:var(--fs-base)}
.cin-directory-row .clan-badge{padding:5px 12px;border:1px solid var(--clan-accent,var(--line));border-radius:var(--radius-pill);color:var(--clan-accent,var(--khaki));font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:.85}
.cin-directory-row .stat-kills{color:var(--text-quiet);font-size:var(--fs-2xs);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.cin-directory-row .rol{color:var(--text-quiet);font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase}
.cin-directory-empty{grid-column:1/-1}

/* --- Estados compartidos: cargando / sin resultados / sin publicar /
   error — un solo patrón visual y de marcado para toda la interfaz. --- */
.cin-state{
  padding:var(--space-7) var(--space-6);border-radius:var(--radius-lg);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  background:var(--surface-empty);border:1px dashed var(--line);
}
.cin-state .cin-state-icon{
  width:44px;height:44px;display:grid;place-items:center;margin-bottom:var(--space-2);
  border:1px solid var(--line);border-radius:50%;color:var(--khaki);font-size:18px;
}
.cin-state-title{color:var(--parchment);font-family:var(--font-display);font-size:17px;text-transform:uppercase;letter-spacing:.02em}
.cin-state-desc{max-width:52ch;color:var(--text-muted);font-size:var(--fs-sm);line-height:1.65}
.cin-state .cin-btn{margin-top:var(--space-3)}
.cin-state--error{border-style:solid;border-color:rgba(140,47,40,.4)}
.cin-state--error .cin-state-icon{border-color:rgba(140,47,40,.5);color:var(--red-bright)}

/* Compat: alias breve usado en varios renders existentes */
.cin-empty{padding:var(--space-6);border:1px dashed var(--line);border-radius:var(--radius-md);text-align:center;color:var(--text-muted);font-size:var(--fs-sm);background:var(--surface-empty)}
.cin-empty strong{display:block;color:var(--parchment);font-family:var(--font-display);font-size:15px;text-transform:uppercase;margin-bottom:7px}

/* Notas / explicaciones elegantes */
.cin-note{padding:var(--space-5) var(--space-6);border:1px dashed var(--line);border-radius:var(--radius-lg);color:var(--text-muted);font-size:var(--fs-sm);line-height:1.65;margin-bottom:var(--section-gap);background:var(--surface-empty)}
.cin-note strong{color:var(--khaki)}

/* --- Tablero de partidos: estado "aún no publicado" + proceso + jornadas --- */
.cin-board-pending{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);border:1px solid var(--line);
  background:
    radial-gradient(65% 90% at 26% 50%,rgba(8,10,8,.9) 0%,rgba(8,10,8,.55) 58%,transparent 86%),
    linear-gradient(100deg,rgba(8,10,8,.48) 0%,transparent 40%),
    url("/img/dday-global-bg.webp") center 30% / cover;
  padding:var(--space-8) var(--space-8);box-shadow:var(--shadow-lg);margin-bottom:var(--space-6);
  min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.cin-board-pending .eyebrow{color:var(--khaki);font-size:var(--fs-sm);font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.cin-board-pending h2{margin:var(--space-4) 0 var(--space-4);color:var(--parchment);font-size:clamp(32px,5vw,58px);line-height:.94;text-transform:uppercase;text-shadow:0 8px 24px rgba(0,0,0,.6)}
.cin-board-pending p{max-width:58ch;color:var(--parchment);font-size:var(--fs-base);line-height:1.7;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.cin-board-pending .cin-btn{margin-top:var(--space-5)}

/* Indicador de proceso (sorteo en vivo → publicación → jornadas) */
.cin-process{display:flex;flex-wrap:wrap;gap:0;margin-bottom:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel-quiet)}
.cin-process-step{flex:1 1 200px;padding:var(--space-5);display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line-soft);position:relative}
.cin-process-step:last-child{border-right:0}
.cin-process-step .n{color:var(--text-quiet);font-family:var(--font-data);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em}
.cin-process-step strong{color:var(--parchment);font-family:var(--font-display);font-size:16px;text-transform:uppercase;letter-spacing:.02em}
.cin-process-step span{color:var(--text-muted);font-size:var(--fs-xs);line-height:1.5}
.cin-process-step.is-active{background:rgba(140,47,40,.1)}
.cin-process-step.is-active .n{color:var(--red-bright)}
.cin-process-step.is-active::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--red-bright)}

/* Resumen real (9 jornadas, 36 enfrentamientos, clan libre) */
.cin-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-bottom:var(--space-6)}
.cin-summary-grid .card{padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel-deep);box-shadow:var(--shadow-sm);text-align:center}
.cin-summary-grid .card strong{display:block;color:var(--parchment);font-size:36px;line-height:1;margin-bottom:6px}
.cin-summary-grid .card span{color:var(--khaki);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.cin-jornada-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel-deep);box-shadow:var(--shadow-warm-sm);margin-bottom:var(--space-4);overflow:hidden;transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.cin-jornada-card:hover{border-color:var(--khaki);box-shadow:var(--shadow-warm-md);transform:translateY(-3px)}
.cin-jornada-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);justify-content:space-between;padding:var(--space-4) var(--space-5);background:rgba(8,10,7,.4);border-bottom:1px solid var(--line)}
.cin-jornada-head .num{color:var(--khaki);font-family:var(--font-data);font-weight:700;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase}
.cin-jornada-head .mapa{color:var(--parchment);font-family:var(--font-display);font-size:18px;text-transform:uppercase}
.cin-jornada-head .fecha{color:var(--text-muted);font-size:var(--fs-xs)}
.cin-jornada-body{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}

/* --- Grilla de 3 columnas con foto del mapa — calendario y partidos --- */
.cin-jornada-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-5);margin-bottom:var(--section-gap)}
@media(min-width:901px){.cin-jornada-grid{grid-template-columns:repeat(3,1fr)}}
.cin-jornada-grid .cin-jornada-card{margin-bottom:0;display:flex;flex-direction:column;height:100%}
.cin-jornada-foto{position:relative;height:150px;flex:0 0 auto;overflow:hidden}
.cin-jornada-foto .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#191d16;filter:grayscale(.15) saturate(.85) contrast(1.08);transition:transform var(--dur-slow) var(--ease-standard)}
.cin-jornada-card--foto:hover .cin-jornada-foto .bg{transform:scale(1.06)}
.cin-jornada-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,10,7,.9) 0%,rgba(8,10,7,.15) 60%,transparent 85%)}
.cin-jornada-foto .jornada-badge{position:absolute;top:var(--space-3);left:var(--space-3);z-index:1;padding:4px 10px;border-radius:var(--radius-pill);background:var(--red);color:#fff;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow-warm-sm)}
.cin-jornada-foto .mapa{position:absolute;bottom:var(--space-3);left:var(--space-4);right:var(--space-4);z-index:1;color:var(--cream);font-family:var(--font-display);font-size:22px;text-transform:uppercase;text-shadow:0 2px 8px #000}
.cin-jornada-grid .cin-jornada-body{flex:1}
.cin-jornada-grid .cin-jornada-body .fecha{color:var(--text-muted);font-size:var(--fs-xs);margin:0 0 6px}
.cin-enfrentamiento-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--line-soft)}
.cin-enfrentamiento-row:last-child{border-bottom:0}
.cin-enfrentamiento-row .clanes{flex:1;min-width:180px;color:var(--cream);font-weight:700;font-size:var(--fs-md)}
.cin-enfrentamiento-row .horario{color:var(--text-muted);font-size:var(--fs-xs)}
.cin-libre-tag{color:var(--khaki);font-family:var(--font-ui);font-size:var(--fs-xs);letter-spacing:.04em}
.stateBadge{display:inline-block;padding:4px 11px;border-radius:var(--radius-pill);border:1px solid var(--line);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--khaki)}
.stateBadge.confirmado{border-color:rgba(108,149,103,.5);color:var(--green)}
.stateBadge.wo{border-color:rgba(140,47,40,.5);color:var(--red-bright)}
.stateBadge.victoria{border-color:rgba(108,149,103,.5);color:var(--green)}
.stateBadge.derrota{border-color:rgba(140,47,40,.5);color:var(--red-bright)}
.stateBadge.empate{border-color:rgba(199,141,79,.5);color:var(--amber)}

/* --- Línea de tiempo vertical — calendario oficial. Misma foto+badge que
   .cin-jornada-grid (partidos) para que se lea como el mismo sitio, pero en
   formato timeline (nodo numerado + spine) porque acá lo que importa es el
   orden cronológico del reveal, no una grilla. */
.cin-timeline{position:relative;display:flex;flex-direction:column;gap:var(--space-6);margin-bottom:var(--section-gap)}
.cin-timeline::before{content:"";position:absolute;top:4px;bottom:4px;left:23px;width:2px;background:linear-gradient(180deg,transparent,var(--line-strong) 8%,var(--line-strong) 92%,transparent);}
.cin-timeline-item{position:relative;display:flex;gap:var(--space-4);align-items:flex-start}
.cin-timeline-node{position:relative;z-index:1;flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--panel-flat);border:1px solid var(--khaki);box-shadow:var(--shadow-warm-sm),0 0 0 4px var(--night);display:flex;align-items:center;justify-content:center}
.cin-timeline-node .num{font-family:var(--font-display);font-size:18px;color:var(--parchment);line-height:1}
.cin-timeline-content{flex:1;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel-deep);box-shadow:var(--shadow-warm-sm);transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.cin-timeline-content:hover{border-color:var(--khaki);box-shadow:var(--shadow-warm-md);transform:translateX(4px)}
.cin-timeline-body{padding:var(--space-3) var(--space-4) var(--space-4)}
.cin-timeline-body .fecha{color:var(--text-muted);font-size:var(--fs-xs);margin:0 0 var(--space-2)}
@media(max-width:600px){
  .cin-timeline::before{left:19px}
  .cin-timeline-node{width:40px;height:40px}
  .cin-timeline-node .num{font-size:15px}
}

/* --- Progreso del reveal en vivo: 9 pasos, uno por jornada. Reemplaza el
   "(X/9)" de puro texto por algo que se lee de un vistazo, sobre todo
   mientras el sorteo sigue en curso y la página se va actualizando sola. */
.cin-reveal-progress{display:flex;gap:6px;margin-top:var(--space-4)}
.cin-reveal-progress .dot{flex:1;height:5px;border-radius:var(--radius-pill);background:var(--line-strong);transition:background var(--dur-base) var(--ease-standard)}
.cin-reveal-progress .dot.is-done{background:var(--khaki);box-shadow:0 0 8px rgba(184,165,122,.5)}

/* --- Hero-grid: tarjeta de misión + tarjeta de reglas --- */
.cin-hero-grid{display:grid;grid-template-columns:1fr 340px;gap:var(--space-5);margin-bottom:var(--section-gap)}
.cin-mission{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel-deep);box-shadow:var(--shadow-md)}
.cin-mission-eyebrow{padding:var(--space-4) var(--space-7);color:var(--khaki);background:rgba(8,10,7,.4);border-bottom:1px solid var(--line);font-size:var(--fs-sm);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cin-mission-inner{
  min-height:520px;display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);flex-wrap:wrap;padding:var(--space-8) calc(var(--space-8) + var(--space-4)) var(--space-8) calc(var(--space-8) + var(--space-4));
  background:linear-gradient(90deg,rgba(15,18,13,.96) 0%,rgba(15,18,13,.8) 55%,rgba(15,18,13,.4)),url("/img/dday-tournament-hero.webp") center 46% / 108% auto;
  transition:background-size var(--dur-slow) var(--ease-standard);
}
.cin-mission:hover .cin-mission-inner{background-size:104% auto}
.cin-mission-copy{max-width:600px}
.cin-map-label{position:relative;display:inline-block;padding-bottom:8px;color:#c9776b;font-size:var(--fs-md);font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.cin-map-label::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red-bright);transform:scaleX(0);transform-origin:left;transition:transform .5s ease .1s}
[data-reveal].is-visible .cin-map-label::after{transform:scaleX(1)}
.cin-mission-copy h2{margin:var(--space-5) 0 var(--space-5);color:var(--parchment);font-size:clamp(42px,5.6vw,76px);letter-spacing:.02em;text-transform:uppercase;line-height:.95}
.cin-mission-copy p{color:#d3cbb2;font-size:18px;line-height:1.9;max-width:50ch}
.cin-mission-actions{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-7)}
.cin-btn{
  min-height:var(--control-h-md);padding:0 var(--space-5);border-radius:var(--radius-sm);border:1px solid var(--line);
  color:var(--parchment);background:rgba(184,165,122,.09);
  font-family:var(--font-ui);font-size:var(--fs-sm);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);
}
.cin-btn:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}
.cin-btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.cin-btn.primary:hover{background:var(--red-bright);border-color:var(--red-bright);box-shadow:0 12px 28px rgba(140,47,40,.4)}

.cin-objective{
  position:relative;width:220px;min-width:220px;align-self:center;overflow:hidden;
  padding:var(--space-6);border:1px solid rgba(202,185,139,.4);border-radius:var(--radius-md);color:var(--khaki);
  background:linear-gradient(145deg,rgba(12,15,10,.86),rgba(43,43,28,.58));
  box-shadow:inset 0 1px rgba(255,255,255,.06),var(--shadow-md);
}
.cin-objective small{display:block;color:#c3b797;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cin-objective .num{display:flex;align-items:flex-end;gap:8px;margin:10px 0}
.cin-objective strong{color:var(--parchment);font-size:52px;line-height:.82;letter-spacing:-.03em;text-shadow:0 5px 18px rgba(0,0,0,.4)}
.cin-objective .num span{padding-bottom:5px;color:#d97a6c;font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em}
.cin-objective i{display:block;width:100%;height:2px;margin:var(--space-3) 0;background:linear-gradient(90deg,var(--red-bright) 0 58%,rgba(184,165,122,.2) 58%)}
.cin-objective b{display:block;color:var(--parchment);font-weight:700;font-size:var(--fs-xs);letter-spacing:.05em}
.cin-mission-footer{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);background:rgba(0,0,0,.2)}
.cin-mission-footer span{flex:1;padding:var(--space-4) var(--space-5);border-right:1px solid var(--line);color:var(--khaki);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}

.cin-rules{padding:var(--space-7);border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(75,69,42,.7),rgba(24,28,20,.97) 62%);box-shadow:var(--shadow-md)}
.cin-rules>small{display:block;color:var(--khaki);font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cin-rules-row{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line)}
.cin-rules-row strong{min-width:52px;color:#e1cc81;font-size:36px}
.cin-rules-row span{color:var(--parchment);font-size:var(--fs-sm);line-height:1.5;letter-spacing:.03em}
.cin-rules>p{margin-top:var(--space-5);color:#b5b09a;font-size:var(--fs-sm);line-height:1.7}

/* --- Fila de estadísticas --- */
.cin-countdown{
  margin:0 0 var(--section-gap);padding:var(--space-7) var(--space-8);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--panel-deep);box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-5);
}
.cin-countdown-label{color:var(--khaki);font-size:var(--fs-md);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0}
.cin-countdown-grid{display:flex;gap:var(--space-7)}
.cin-countdown-grid div{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:58px}
.cin-countdown-grid strong{color:var(--parchment);font-family:var(--font-display);font-size:46px;line-height:1;font-variant-numeric:tabular-nums}
.cin-countdown-grid span{color:var(--text-quiet);font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase}
.cin-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 var(--section-gap);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel-deep);box-shadow:var(--shadow-sm)}
.cin-stats>div{padding:var(--space-6) var(--space-7);display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--line)}
.cin-stats>div:last-child{border-right:0}
.cin-stats span{color:var(--khaki);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cin-stats strong{color:var(--parchment);font-size:42px}
.cin-stats small{color:var(--text-muted);font-size:var(--fs-sm)}

/* --- Accesos rápidos --- */
.cin-access{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-5);margin-bottom:var(--section-gap)}
.cin-access a{
  display:flex;flex-direction:column;gap:10px;padding:var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--line);
  background:var(--panel-quiet);text-decoration:none;color:var(--parchment);box-shadow:var(--shadow-sm);
  transition:border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard);
}
.cin-access a:hover{border-color:var(--khaki);transform:translateY(-4px);box-shadow:var(--shadow-md);background:var(--panel-deep)}
.cin-access a span.ic{display:inline-flex;color:var(--khaki);font-size:26px}
.cin-access a span.ic svg{width:26px;height:26px;display:block}
.cin-access a strong{font-family:var(--font-display);font-size:21px;text-transform:uppercase;letter-spacing:.02em}
.cin-access a small{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.5}

/* --- Bloque de avisos / próxima jornada --- */
.cin-news{padding:var(--space-7) var(--space-8);border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--panel-quiet);box-shadow:var(--shadow-sm);margin-bottom:var(--section-gap)}
.cin-news h3{color:var(--parchment);font-family:var(--font-display);font-size:26px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px}
.cin-news p.hint{color:var(--text-muted);font-size:var(--fs-sm);margin-bottom:var(--space-5)}

/* --- Footer de comunidad: compacto, no compite con las tarjetas --- */
.cin-footer{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;
  margin-top:8px;padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--line-soft);
  background:rgba(15,18,12,.5);
}
.cin-footer-brand{display:flex;align-items:center;gap:var(--space-3)}
.cin-footer-brand img{width:36px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.cin-footer-brand strong{display:block;color:var(--parchment);font-family:var(--font-display);font-size:14px;text-transform:uppercase;letter-spacing:.02em}
.cin-footer-brand span{display:block;color:var(--text-muted);font-size:var(--fs-2xs);letter-spacing:.05em}
.cin-footer-meta{display:flex;gap:var(--space-5);flex-wrap:wrap;color:var(--text-quiet);font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase}
.cin-footer-meta a{text-decoration:none;transition:color var(--dur-base) var(--ease-standard)}
.cin-footer-meta a:hover{color:var(--khaki)}

/* --- Sorteo: portada "antes del reveal" --- */
.cin-reveal-hero{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);border:1px solid var(--line);
  background:
    radial-gradient(65% 90% at 28% 50%,rgba(8,10,8,.92) 0%,rgba(8,10,8,.58) 60%,transparent 88%),
    linear-gradient(100deg,rgba(8,10,8,.5) 0%,transparent 42%),
    url("/img/dday-tournament-hero.webp") center 38% / 106% auto;
  padding:var(--space-8) var(--space-7);box-shadow:var(--shadow-lg);margin-bottom:var(--space-6);
  transition:background-size var(--dur-slow) var(--ease-standard);
  min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.cin-reveal-hero:hover{background-size:110% auto}
.cin-reveal-hero p.eyebrow{color:var(--khaki);font-size:var(--fs-sm);font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.cin-reveal-hero h1{color:var(--parchment);font-size:clamp(42px,6.6vw,88px);line-height:.9;letter-spacing:.01em;text-transform:uppercase;text-shadow:0 10px 30px rgba(0,0,0,.7);margin:var(--space-4) 0 var(--space-5)}
.cin-reveal-hero h1 em{color:var(--red-bright);font-style:normal;display:block}
.cin-reveal-hero p.lede{max-width:60ch;color:var(--parchment);font-size:var(--fs-lg);line-height:1.75;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.cin-reveal-hero .cin-btn{margin-top:var(--space-5)}

.cin-verify{padding:var(--space-5) var(--space-6);border:1px dashed var(--line);border-radius:var(--radius-lg);color:var(--text-muted);font-size:var(--fs-sm);line-height:1.65;margin-bottom:var(--space-6);background:var(--surface-empty)}
.cin-verify strong{color:var(--khaki)}
.cin-status-live{display:inline-flex;align-items:center;gap:6px;color:var(--khaki);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase}

.cin-participants{margin-bottom:var(--section-gap)}
.cin-participants h2,.cin-maps h2{color:var(--parchment);font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--space-4)}
.cin-clan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--space-4)}
.cin-clan-card{
  display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--panel-deep);box-shadow:var(--shadow-sm);
}
.cin-clan-card .badge{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:#191d16;color:var(--khaki);font-family:var(--font-data);font-weight:700;font-size:13px}
.cin-clan-card strong{font-family:var(--font-ui);font-size:16px;letter-spacing:.02em;color:var(--cream);text-transform:uppercase}

/* --- Enfrentamiento con escudos + "VS" (próxima jornada, Inicio) ---
   Más dinámico que el badge de texto plano de .cin-clan-card: dos
   escudos reales, uno de cada lado, con el "VS" como pieza central en
   la fuente de titulares. Sin depender del color por clan (acá solo se
   tiene el tag, no el id, así que el borde queda en khaki fijo). */
.cin-vs-row{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--line-soft)}
.cin-vs-row:last-of-type{border-bottom:0}
.cin-vs-team{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1 1 0;min-width:0}
.cin-vs-team .crest{
  width:60px;height:60px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:2px solid var(--khaki);background:var(--parchment);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.55),0 4px 10px rgba(14,14,7,.4);
}
.cin-vs-team .crest img{width:100%;height:100%;object-fit:cover}
.cin-vs-team .crest.is-empty{display:grid;place-items:center;color:var(--olive);font-family:var(--font-display);font-size:22px}
.cin-vs-team strong{font-size:var(--fs-sm);font-weight:700;color:var(--cream);letter-spacing:.02em;text-align:center;text-transform:uppercase}
.cin-vs-mark{
  flex:0 0 auto;font-family:var(--font-display);font-size:26px;line-height:1;color:var(--red-bright);
  text-shadow:0 0 16px rgba(182,75,64,.55);letter-spacing:.03em;
}
.cin-vs-meta{width:100%;text-align:center;color:var(--text-muted);font-size:var(--fs-xs);margin-top:2px}

/* --- Mapas: la referencia de calidad interior — imágenes protagonistas --- */
.cin-maps{margin-bottom:var(--section-gap)}
.cin-map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-5)}
@media(min-width:901px){
  .cin-map-grid{grid-template-columns:repeat(3,1fr)}
}
.cin-map-card{
  position:relative;isolation:isolate;min-height:210px;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;
  border:1px solid var(--line);box-shadow:var(--shadow-warm-md);display:flex;align-items:flex-end;padding:7px;
  transform:rotate(var(--tilt,0deg));
  transition:transform var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);
}
/* Misma imperfección deliberada que las fichas de clan — ver comentario
   ahí. Ciclo distinto (5n) para que no coincida visualmente en ambas
   grillas si aparecen cerca. */
.cin-map-card:nth-child(5n+1){--tilt:.35deg}
.cin-map-card:nth-child(5n+2){--tilt:-.25deg}
.cin-map-card:nth-child(5n+3){--tilt:.2deg}
.cin-map-card:nth-child(5n+4){--tilt:-.4deg}
/* Marco interior — la foto queda "montada" con un margen, como una
   impresión en un dossier, en vez de sangrar directo al borde de la
   card (el look plano típico de una card genérica). */
.cin-map-card .bg{
  position:absolute;inset:7px;z-index:-1;width:calc(100% - 14px);height:calc(100% - 14px);
  border-radius:calc(var(--radius-lg) - 7px);border:1px solid rgba(223,211,180,.16);
  object-fit:cover;background:#191d16;filter:grayscale(.15) saturate(.85) contrast(1.08);opacity:.88;
  transition:transform var(--dur-slow) var(--ease-standard),opacity var(--dur-base) var(--ease-standard);
}
.cin-map-card:hover .bg,.cin-map-card:focus-visible .bg{transform:scale(1.045);opacity:1}
/* Grano fotográfico (capa 1, encima) + viñeta de legibilidad (capa 2,
   detrás) en un solo pseudo-elemento — misma técnica de ruido SVG que
   el header, para que las fotos de mapa lean "archivo" y no "sticker". */
.cin-map-card::after{
  content:"";position:absolute;inset:7px;border-radius:calc(var(--radius-lg) - 7px);
  /* El grano lleva su propia opacity:.05 DENTRO del SVG (no vía
     background-blend-mode) — el blend "overlay" contra un degradé con
     zonas transparentes aclaraba demasiado la parte de arriba de la
     foto, se leía como niebla/velo blanquecino en vez de grano sutil. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(0deg,rgba(8,10,7,.82) 0%,rgba(8,10,7,.1) 55%,transparent 75%);
  background-size:140px 140px,100% 100%;
}
/* Spotlight — mismo mecanismo que .cin-clan-tile::after, acá va en
   ::before porque ::after ya lo ocupan grano+viñeta. */
.cin-map-card::before{
  content:"";position:absolute;inset:7px;z-index:2;border-radius:calc(var(--radius-lg) - 7px);pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(223,211,180,.14),transparent 70%);
  opacity:0;transition:opacity var(--dur-base) var(--ease-standard);
}
.cin-map-card:hover::before,.cin-map-card:focus-visible::before{opacity:1}
.cin-map-card .label{position:relative;z-index:1;padding:var(--space-4) var(--space-4) var(--space-3);width:100%}
.cin-map-card .label .num{display:block;margin-bottom:6px;color:#e08a7c;font-family:var(--font-data);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-shadow:0 2px 5px #000}
.cin-map-card .label small{display:block;color:var(--khaki);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-shadow:0 2px 5px #000}
.cin-map-card .label strong{display:block;margin-top:6px;color:var(--cream);font-size:22px;text-transform:uppercase;letter-spacing:.03em;text-shadow:0 2px 10px #000}
.cin-map-card .dossier-cta{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  color:var(--parchment);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  opacity:0;transform:translateY(4px);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);
}
.cin-map-card .dossier-cta::after{content:"→"}
.cin-map-card:hover .dossier-cta,.cin-map-card:focus-visible .dossier-cta{opacity:1;transform:translateY(0)}

/* --- Estados de tabla / tarjetas interactivas genéricas --- */
.cin-clan-card,.cin-access a,.cin-map-card{transition:transform var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.cin-clan-card:hover,.cin-clan-card:focus-within{transform:translateY(-2px);border-color:var(--khaki);box-shadow:var(--shadow-sm)}
.cin-map-card:hover,.cin-map-card:focus-visible{transform:translateY(-4px) rotate(0deg);border-color:var(--khaki)}
.cin-map-card:active{transform:translateY(-1px) rotate(0deg) scale(.98)}
.cin-map-card:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}

/* --- Dossier de mapa / clan (modal) --- */
.cin-modal-backdrop{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:var(--space-5);background:rgba(5,7,5,.82);backdrop-filter:blur(4px)}
.cin-modal-backdrop[hidden]{display:none}
.cin-modal{position:relative;width:min(680px,100%);max-height:calc(100vh - 40px);overflow:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:#181c14;box-shadow:inset 0 3px var(--red-bright),var(--shadow-lg)}
.cin-modal img{width:100%;max-height:380px;object-fit:cover;filter:grayscale(.15) saturate(.85) contrast(1.06)}
.cin-modal-body{padding:var(--space-6) var(--space-7)}
.cin-modal-body small{color:var(--khaki);font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.cin-modal-body h3{margin:8px 0 var(--space-4);color:var(--parchment);font-size:32px;text-transform:uppercase}
#clan-modal-backdrop .cin-modal{border-top-color:var(--clan-accent,var(--red-bright))}
/* .cin-modal img (arriba) es clase+tipo — una sola clase no le gana.
   .cin-modal-body img.cin-modal-crest sí, sin necesitar !important. */
.cin-modal-body img.cin-modal-crest{
  display:block;width:88px;height:88px;max-height:88px;border-radius:50%;overflow:hidden;object-fit:cover;background:var(--parchment);
  border:2px solid var(--clan-accent,var(--khaki));box-shadow:var(--shadow-md);margin-bottom:var(--space-4);filter:none;
}
.cin-modal-stats{display:flex;gap:var(--space-6);flex-wrap:wrap}
.cin-modal-stats div{display:flex;flex-direction:column;gap:4px}
.cin-modal-stats strong{color:var(--parchment);font-size:20px}
.cin-modal-stats span{color:var(--text-muted);font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase}
.cin-modal-stats--player{margin-top:var(--space-4)}

/* Ficha de jugador (#jugador-modal-backdrop): historial de partidos de su
   clan, ya resuelto por jugadores-view.js (rival/mapa por nombre, no id). */
.cin-player-matches-title{margin:var(--space-5) 0 var(--space-3);color:var(--khaki);font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.cin-player-matches{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.cin-player-match{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(0,0,0,.18)}
.cin-player-match-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2);color:var(--text-muted);font-size:var(--fs-sm)}
.cin-player-match-info .jornada{color:var(--parchment);font-weight:700}
.cin-player-match-info .rival{color:var(--khaki)}
.cin-player-match-legs{display:flex;flex-wrap:wrap;gap:6px}
.cin-modal-close{position:absolute;right:14px;top:12px;z-index:2;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--parchment);background:rgba(0,0,0,.4);font-size:17px;transition:border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.cin-modal-close:hover{border-color:var(--red-bright);color:var(--red-bright)}

/* --- Modal de resultado de partido (ver .cin-resultado-trigger) --- */
.cin-resultado-leg + .cin-resultado-leg{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--line)}
.cin-resultado-marcador{margin:0 0 var(--space-3);color:var(--parchment);font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em}
.cin-resultado-columnas{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.cin-resultado-jugadores{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cin-resultado-jugadores li{display:flex;justify-content:space-between;gap:var(--space-3);padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(0,0,0,.2);color:var(--cream);font-size:var(--fs-sm)}
.cin-resultado-jugadores b{color:var(--green)}
.cin-resultado-trigger{cursor:pointer;font:inherit}
@media(max-width:520px){.cin-resultado-columnas{grid-template-columns:1fr}}

/* --- Volver arriba --- */
.cin-back-top{display:inline-flex;align-items:center;gap:6px;height:var(--control-h-sm);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 var(--space-4);color:var(--khaki);background:rgba(0,0,0,.2);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.cin-back-top:hover{border-color:var(--khaki);color:var(--parchment)}

.cin-section-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- Tabla oficial: superficie propia, encabezado legible, leyenda --- */
.cin-standings-surface{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel-deep);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:var(--space-6)}
.cin-standings-surface-head{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.cin-standings-surface-head h2{color:var(--parchment);font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cin-standings-surface-head p{color:var(--text-muted);font-size:var(--fs-xs)}
.cin-standings-legend{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-5);padding:var(--space-3) var(--space-6);background:rgba(0,0,0,.18);color:var(--text-quiet);font-size:11px;letter-spacing:.03em}
.cin-standings-legend b{color:var(--khaki)}
.cin-standings-scroll{overflow-x:auto;position:relative}
.cin-standings-scroll.can-scroll::after{
  content:"";position:sticky;top:0;right:0;float:right;width:28px;height:100%;margin-left:-28px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(18,21,15,.85));
}
.cin-standings-table{width:100%;border-collapse:collapse;position:relative}
/* Textura de scanline muy sutil sobre toda la superficie — terminal de
   operaciones, no un simple <table> — sin pisar la legibilidad. */
.cin-standings-surface{position:relative}
.cin-standings-surface::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0px,rgba(0,0,0,.09) 1px,transparent 1px,transparent 3px);
}
.cin-standings-table th{
  color:var(--khaki);text-align:left;font-family:var(--font-data);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:var(--space-3) var(--space-4);border-bottom:2px solid var(--red-bright);white-space:nowrap;
  position:sticky;top:0;background:var(--panel-flat);z-index:1;
}
.cin-standings-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line-soft);font-size:var(--fs-md);font-family:var(--font-data);color:var(--cream);white-space:nowrap;font-variant-numeric:tabular-nums}
.cin-standings-table td.clan{font-family:var(--font-ui)}
/* Primera columna (#) y clan quedan fijas al deslizar horizontalmente en
   pantallas angostas — el resto de las columnas (PJ/PG/.../Pts) se
   desplaza debajo. background:inherit + un th propio evita que se vea
   "flotando" sobre las filas al hacer scroll. */
/* Ancho explícito en la 1ª columna: el offset "left" de la 2ª columna
   fija (sticky) tiene que coincidir exactamente con ese ancho, si no
   quedan superpuestas y tapan el inicio de la 3ª columna (bug real,
   detectado con capturas — el offset anterior, 52px, no coincidía con
   el ancho real de la columna, ~39px, y ocultaba parte de "PJ"). */
.cin-standings-table td:first-child,.cin-standings-table th:first-child{width:44px;min-width:44px;max-width:44px;padding-left:var(--space-4);padding-right:var(--space-2);position:sticky;left:0;z-index:2;background:var(--panel-flat)}
.cin-standings-table td:nth-child(2),.cin-standings-table th:nth-child(2){position:sticky;left:44px;z-index:2;background:var(--panel-flat);border-right:1px solid var(--line-soft)}
.cin-standings-table tbody tr td:first-child,.cin-standings-table tbody tr td:nth-child(2){background:#171b12}
.cin-standings-table tbody tr:hover td:first-child,.cin-standings-table tbody tr:hover td:nth-child(2){background:#1d2318}
.cin-standings-table tbody tr.is-leader td:first-child,.cin-standings-table tbody tr.is-leader td:nth-child(2){background:#241814}
.cin-standings-table tbody tr{transition:background var(--dur-fast) var(--ease-standard)}
.cin-standings-table tbody tr:hover{background:rgba(184,165,122,.06)}
.cin-standings-table td.clan{font-weight:700;color:var(--parchment);letter-spacing:.02em}
/* Rango — número grande en la fuente de titulares, no un dato más entre
   los demás: es lo primero que el ojo tiene que agarrar en una tabla de
   posiciones. */
.cin-standings-table td:first-child{font-family:var(--font-display);font-size:22px;color:var(--khaki);text-align:center;padding-left:var(--space-2);padding-right:var(--space-2)}
.cin-standings-table tr.is-leader td:first-child{color:var(--red-bright)}
/* Puntos — el marcador, tratado como tal: casilla propia, no solo texto
   más grande. */
.cin-standings-table td.pts{padding-left:var(--space-2);padding-right:var(--space-2)}
.cin-standings-table td.pts strong{
  display:inline-block;min-width:32px;padding:3px 8px;border-radius:var(--radius-sm);
  background:rgba(184,165,122,.12);border:1px solid var(--line);
  color:var(--parchment);font-family:var(--font-data);font-size:16px;font-weight:700;text-align:center;
}
.cin-standings-table tr.is-leader td.pts strong{background:rgba(182,75,64,.18);border-color:var(--red-bright);color:#fff}
.cin-zero{color:var(--text-quiet);font-weight:400}
.cin-standings-table tr.is-leader td{background:rgba(140,47,40,.1)}
.cin-standings-table tr.is-leader td:first-child{box-shadow:inset 2px 0 var(--red-bright)}

/* --- Respaldo genérico mínimo para tablas fuera de este sistema --- */
body.cinematic .hint{color:var(--text-muted);font-size:var(--fs-sm)}
body.cinematic table{width:100%;border-collapse:collapse;margin-top:10px}
body.cinematic th{color:var(--khaki);text-align:left;font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;padding:var(--space-3) var(--space-2);border-bottom:2px solid var(--line)}
body.cinematic td{padding:var(--space-2) var(--space-2);border-bottom:1px solid var(--line-soft);font-size:var(--fs-md);color:var(--cream)}
body.cinematic .tableWrap{overflow-x:auto}

/* --- Intro cinematográfica ---
   Secuencia (iniciarIntro() en app-shell.js maneja el timing real):
   1) cin-intro-run se agrega → arranca el zoom del fondo, el estallido
      de estática ("sintonizando señal", coherente con "Transmisión
      cifrada" del copy) y el título entra con impacto.
   2) A los ~2.8s (o al hacer clic en "Saltar"), cin-intro-out dispara
      un flash de luz que cubre la pantalla mientras todo se desvanece
      — un corte, no un simple fundido — revelando el hero, que retoma
      el mismo lenguaje visual (zoom continuo, foco de luz). */
.cin-intro{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  overflow:hidden;
  background:#050603;
  color:var(--cream);
  opacity:1;transition:opacity .45s ease;
}
.cin-intro[hidden]{display:none}
.cin-intro.cin-intro-out{opacity:0;pointer-events:none}

.cin-intro-bg{
  position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(145deg,rgba(5,6,3,.85),rgba(8,10,7,.68) 45%,rgba(5,6,3,.92)),
    url("/img/dday-global-bg.webp") center 36% / cover no-repeat;
  filter:saturate(.6) contrast(1.12) brightness(.72);
  scale:1.22;
  opacity:0;
  transition:opacity 1.2s ease;
}
.cin-intro.cin-intro-run .cin-intro-bg{
  opacity:1;
  animation:cinIntroZoom 2.9s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes cinIntroZoom{
  from{scale:1.32}
  to{scale:1.03}
}

/* Estallido de estática al arrancar — lee como "sintonizando una señal
   cifrada" antes de que la imagen se asiente, no como un error visual:
   por eso dura menos de 1s y siempre termina en opacity:0. */
.cin-intro-static{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:0;
}
.cin-intro.cin-intro-run .cin-intro-static{
  animation:cinStaticBurst 1s steps(2,end) forwards;
}
@keyframes cinStaticBurst{
  0%{opacity:.55}
  8%{opacity:.12}
  16%{opacity:.6}
  24%{opacity:.08}
  40%{opacity:.3}
  60%{opacity:.04}
  100%{opacity:0}
}

.cin-intro-copy{position:relative;z-index:2;text-align:center;width:min(620px,calc(100vw - 48px))}
.cin-intro-copy small{display:block;color:var(--khaki);font-size:var(--fs-xs);font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.cin-intro-title{margin:20px 0 16px;font-family:var(--font-display);font-weight:700;line-height:.85;text-transform:uppercase}
.cin-intro-title span{
  display:block;font-size:clamp(40px,8vw,92px);
  opacity:0;scale:1.5;filter:blur(16px);
}
.cin-intro.cin-intro-run .cin-intro-title span{animation:cinIntroTitleIn 1s cubic-bezier(.16,1,.3,1) forwards}
.cin-intro.cin-intro-run .cin-intro-title .l1{animation-delay:.3s}
.cin-intro.cin-intro-run .cin-intro-title .l2{animation-delay:.5s}
@keyframes cinIntroTitleIn{
  0%{opacity:0;scale:1.5;filter:blur(16px)}
  55%{opacity:1;filter:blur(0)}
  100%{opacity:1;scale:1;filter:blur(0)}
}
.cin-intro-title .l1{color:var(--cream)}
.cin-intro-title .l2{color:var(--red-bright)}
.cin-intro-status{display:block;color:#9a9584;font-size:var(--fs-2xs);letter-spacing:.22em;text-transform:uppercase}
.cin-intro-bar{width:min(340px,72%);height:2px;margin:16px auto 0;overflow:hidden;background:rgba(184,165,122,.18)}
.cin-intro-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--red-bright),var(--khaki));box-shadow:0 0 14px rgba(184,165,122,.55);transition:width 2.7s cubic-bezier(.65,0,.35,1)}
.cin-intro.cin-intro-run .cin-intro-bar i{width:100%}

/* Flash de salida — pulso de luz cálida que cubre toda la pantalla
   mientras la intro se desvanece (mismo .45s que la opacity del
   contenedor, arriba), para que la transición al hero lea como un
   corte de cámara, no un fundido genérico. */
.cin-intro-flash{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(255,247,225,.95),rgba(255,232,195,.45) 45%,transparent 76%);
  opacity:0;
}
.cin-intro.cin-intro-out .cin-intro-flash{animation:cinIntroFlash .45s ease-out forwards}
@keyframes cinIntroFlash{
  0%{opacity:0}
  40%{opacity:1}
  100%{opacity:0}
}

.cin-skip{
  position:absolute;right:24px;bottom:24px;z-index:4;
  padding:10px 16px;border:1px solid rgba(223,211,180,.4);border-radius:var(--radius-sm);
  color:var(--parchment);background:rgba(0,0,0,.35);
  font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.cin-skip:hover{border-color:var(--khaki);background:rgba(184,165,122,.12)}

/* --- Contenido con transición de vista (shell SPA) --- */
#view-root{position:relative;min-height:280px}
#view-root.leaving .view-anim{animation:cinLeave 140ms var(--ease-decel) both}
#view-root.entering .view-anim{animation:cinEnter 360ms var(--ease-decel) both}
@keyframes cinLeave{from{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}to{opacity:0;transform:translateY(-8px) scale(.992);filter:blur(2px)}}
@keyframes cinEnter{from{opacity:0;transform:translateY(16px) scale(.992);filter:blur(3px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes cinNumberIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* --- Aparición progresiva (IntersectionObserver) --- */
[data-reveal]{opacity:0;transform:translateY(28px) scale(.97);filter:blur(2px);transition:opacity .6s var(--ease-decel),transform .6s var(--ease-decel),filter .6s var(--ease-decel)}
[data-reveal].is-visible{opacity:1;transform:translateY(0) scale(1) rotate(var(--tilt,0deg));filter:blur(0)}
.no-js [data-reveal],.reduced-motion [data-reveal]{opacity:1;transform:none;transition:none}

/* --- Parallax del hero ---
   will-change SOLO en ::before (que es lo único que realmente recibe el
   transform del parallax): ponerlo también en .cin-header crearía un
   containing block para descendientes position:fixed, atrapando el
   drawer de navegación móvil dentro de los límites del header. */
.cin-header::before{will-change:translate,scale}

/* --- Navegación móvil (drawer) — solo activa cuando hay JS (html.has-js).
   Sin JS, .cin-nav ya es una lista vertical navegable normal (ver
   breakpoint más abajo), así que nunca depende de esto para funcionar. --- */
html.has-js .cin-nav a{transition:border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}

@media(max-width:850px){
  html.has-js .cin-menu-row{display:flex;justify-content:flex-end;margin-top:var(--space-4)}
  html.has-js .cin-menu-toggle{display:inline-flex}
  html.has-js .cin-nav{
    position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);margin:0;z-index:60;
    background:linear-gradient(165deg,#171c12,#0d0f0a);border-left:1px solid var(--line);
    box-shadow:-24px 0 60px rgba(0,0,0,.55);padding:80px var(--space-5) var(--space-6);
    overflow-y:auto;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-decel);
  }
  html.has-js .cin-nav.is-open{transform:translateX(0)}
  /* El drawer es una lista VERTICAL, no una barra horizontal — recupera
     espaciado y esquinas redondeadas por ítem (la fusión "segmentada" de
     arriba es específica del layout horizontal de escritorio). */
  html.has-js .cin-nav ul{grid-template-columns:1fr;gap:var(--space-2)}
  html.has-js .cin-nav a{flex-direction:row;justify-content:flex-start;gap:var(--space-3);min-height:52px;padding:0 var(--space-4);border-radius:var(--radius-md);border-left:1px solid rgba(244,239,227,.16)}
  html.has-js .cin-nav li:first-child a,html.has-js .cin-nav li:last-child a{border-radius:var(--radius-md)}
  html.has-js .cin-nav-backdrop{
    display:block;position:fixed;inset:0;z-index:55;background:rgba(5,7,5,.6);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard);
  }
  html.has-js .cin-nav-backdrop.is-open{opacity:1;pointer-events:auto}
}

/* --- Dossier de mapa (modal) --- */

/* --- Estados de foco / accesibilidad / movimiento --- */
body.cinematic a:focus-visible,body.cinematic button:focus-visible,body.cinematic .cin-btn:focus-visible{
  outline:2px solid var(--red-bright);outline-offset:2px;
}
.cin-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){
  body.cinematic *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .cin-intro-bg{opacity:1!important;scale:1!important}
  .cin-intro-title span{opacity:1!important;scale:1!important;filter:none!important}
  .cin-intro-mechanism{display:none!important}
  .cin-intro-ready .cin-skip{opacity:1!important;transform:none!important;pointer-events:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  /* El zoom continuo del hero (cinHeroBreathe) es infinito — acelerarlo a
     .001ms con la regla de arriba lo dejaría parpadeando entre 1.04 y
     1.11 sin parar, en vez de quieto. Se anula del todo, no solo rápido. */
  .cin-header::before{animation:none;scale:1.04}
  /* Mismo motivo que arriba: infinita + .001ms parpadearía sin parar. */
  .cin-hero-dust span{animation:none;opacity:0}
  .cin-hero-video{animation:none;scale:1.04}
  /* relative, no static: ver nota en el breakpoint móvil más abajo sobre
     por qué "static" aquí producía overflow horizontal de documento. */
  .cin-header--compact{position:relative;top:0}
}

/* --- Botón flotante de música/SFX --- */
.cin-audio-toggle{
  position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:40;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--panel-deep);color:var(--khaki);
  box-shadow:var(--shadow-warm-md);cursor:pointer;
  transition:transform var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}
.cin-audio-toggle:hover{transform:translateY(-2px);border-color:var(--khaki)}
.cin-audio-toggle:active{transform:translateY(0) scale(.94)}
.cin-audio-toggle:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}
.cin-audio-toggle .ic-on{display:none}
.cin-audio-toggle.is-on{border-color:var(--red-bright);color:var(--red-bright);background:rgba(182,75,64,.14)}
.cin-audio-toggle.is-on .ic-off{display:none}
.cin-audio-toggle.is-on .ic-on{display:block}

/* --- Responsive --- */
@media(max-width:1300px){
  .cin-hero-grid{grid-template-columns:1fr}
  .cin-objective{width:100%;min-width:0}
}
@media(max-width:850px){
  :root{--section-gap:28px}
  .cin-shell{padding:var(--space-4) var(--space-4) 56px}
  .cin-header-inner{padding:var(--space-5) var(--space-5) var(--space-4)}
  .cin-badge{width:60px;height:66px;flex:0 0 60px}
  .cin-title{padding-right:0}
  .cin-title h1{font-size:clamp(32px,9.5vw,48px)}
  /* Las pills (Temporada/Formato/Modalidad) traen max-height:60px del
     desktop, pensado para el colapso del header sticky — en móvil, con
     tres pills envolviendo a dos filas, ese límite recortaba la tercera
     ("Todos contra todos"). Se libera acá; el colapso real al quedar
     "pegado" sigue funcionando por la regla más específica de arriba. */
  /* Especificidad: en desktop, ".cin-header--compact .cin-pills" (dos
     clases) fija max-height:44px — más específico que un simple
     ".cin-pills" de una clase, así que hay que igualar el selector acá
     para que el override móvil realmente gane en páginas interiores. */
  .cin-pills,.cin-header--compact .cin-pills{max-height:none;overflow:visible}
  .cin-nav{margin-top:0}
  .cin-nav a{min-height:52px;padding:8px 6px}
  /* Resumen operativo móvil: el estado ("Sorteo oficial...") ocupa su
     propia fila completa; las cuatro cifras (clanes/mapas/enfrentamientos/
     inicio) forman una grilla de 2 columnas debajo — nunca una fila
     horizontal desbordada. La base .cin-ticker trae flex-wrap:wrap del
     desktop y un max-height pensado solo para el colapso del header
     sticky (ver .cin-header--stuck más abajo); ambos se anulan acá,
     porque combinados con flex-direction:column producían "columnas"
     invisibles que recortaban el contenido (bug real, ya corregido).
     Grid + texto que puede partirse en dos líneas es la solución. */
  .cin-ticker{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:var(--space-2) var(--space-4);
    max-height:none;overflow:visible;
    padding:var(--space-4) var(--space-5) var(--space-5);
  }
  .cin-ticker strong{grid-column:1/-1;padding-right:0;margin-right:0;border-right:0;white-space:normal;line-height:1.4}
  .cin-ticker span{white-space:normal;line-height:1.4}
  .cin-stats{grid-template-columns:1fr}
  .cin-stats>div{border-right:0;border-bottom:1px solid var(--line)}
  .cin-stats>div:last-child{border-bottom:0}
  .cin-mission-inner{padding:var(--space-5)}
  .cin-reveal-hero{padding:var(--space-6) var(--space-4);min-height:0;align-items:stretch}
  .cin-reveal-hero h1{font-size:clamp(30px,9.5vw,46px);overflow-wrap:break-word}
  .cin-reveal-hero .cin-btn{align-self:flex-start}
  .cin-footer{flex-direction:column;align-items:flex-start}
  .cin-summary-grid{grid-template-columns:1fr}
  .cin-process{flex-direction:column}
  .cin-process-step{border-right:0;border-bottom:1px solid var(--line-soft)}
  .cin-process-step:last-child{border-bottom:0}

  /* Cabecera compacta en móvil: NO usar position:static acá. Causa real
     de overflow horizontal de documento verificada con Playwright: con
     el header en static, el drawer de navegación (position:fixed,
     anidado dentro del header) hace que Chromium incluya su geometría
     en el cálculo de document.documentElement.scrollWidth, aunque el
     drawer esté visualmente fuera de pantalla (transform:translateX) y
     ningún elemento individual muestre overflow en su propio rect. Con
     position:relative (sin offset — top:0 explícito para anular el
     top:12px del sticky de escritorio) el header queda geométricamente
     idéntico a static pero aísla correctamente a su descendiente fixed;
     confirmado con document.documentElement.scrollWidth === clientWidth
     en 360/375/390/412/430px, en las 7 rutas. */
  .cin-header--compact{position:relative;top:0}
  .cin-header--compact .cin-header-inner{padding:var(--space-4) var(--space-5) var(--space-3)}
  .cin-header--compact .cin-badge{width:44px;height:48px;flex:0 0 44px}
  .cin-header--compact .cin-title h1{font-size:clamp(20px,7vw,28px)}
  .cin-header--compact .cin-nav{margin-top:0}
  .cin-header--compact .cin-ticker{padding:var(--space-3) var(--space-5) var(--space-4)}

  /* Páginas interiores públicas en móvil */
  .cin-directory-toolbar{flex-direction:column;align-items:stretch}
  .cin-directory-toggle{margin-left:0;align-self:flex-start}
  .cin-directory-list{grid-template-columns:1fr}
  /* Con 3 botones ("Alfabético"/"Agrupar por clan"/"Más kills") la píldora
     de orden ya no entra en su ancho fijo en móvil (overflow:hidden la
     recortaba) -- acá se estira al ancho completo y reparte el espacio en
     partes iguales en vez de por contenido. */
  .cin-directory-toggle{width:100%;align-self:stretch}
  .cin-directory-toggle button{flex:1;padding:0 var(--space-2);font-size:10.5px}
  .cin-clan-tile-grid{grid-template-columns:1fr}
  .cin-board-pending{padding:var(--space-6) var(--space-4)}
  .cin-jornada-head{flex-direction:column;align-items:flex-start}
  .cin-enfrentamiento-row{flex-direction:column;align-items:flex-start;gap:4px}
  .cin-standings-surface-head{flex-direction:column;align-items:flex-start}
}
@media(min-width:601px) and (max-width:1000px){
  .cin-directory-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:601px) and (max-width:900px){
  /* Tablet: 2 columnas, pero la novena tarjeta (impar) ocupa la fila
     completa en vez de quedar sola y "abandonada" a un costado. */
  .cin-clan-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cin-clan-tile-grid > .cin-clan-tile:last-child{grid-column:1/-1}
  .cin-map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cin-map-grid > .cin-map-card:last-child{grid-column:1/-1}
}

/* ============================================================
   Página Reglas — numeración de sección editorial, índice
   interno, bloques destacados y variante "pergamino".
   Solo la usa /reglas por ahora; queda como sistema reutilizable
   para futuras rondas.
   ============================================================ */

/* Badge de posición en la navegación ("06 / 07") + estado — mismo idioma
   visual que la numeración "01, 02, 03…" ya usada en las tarjetas de
   clanes, aplicado ahora al nivel de página. */
.cin-section-index{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
/* Variante con nombre de sección explícito — Inicio no tiene un <h1> que
   diga "Inicio" en el contenido (el <h1> del header es el título del
   sitio), a diferencia de las páginas interiores. */
.cin-section-index .label{color:var(--khaki);font-size:var(--fs-xs);font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding-right:var(--space-2);border-right:1px solid var(--line);margin-right:2px}
.cin-section-index .num{font-family:var(--font-display);font-size:32px;line-height:1;color:var(--parchment)}
.cin-section-index .of{color:var(--text-quiet);font-size:var(--fs-sm);letter-spacing:.05em}
.cin-section-index .rule{flex:1;height:1px;background:var(--line);min-width:32px}
.cin-section-index .estado{padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--khaki);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* Layout de dos columnas: índice interno (sticky) + contenido editorial. */
.cin-rules-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--space-8);align-items:start}
.cin-rules-index{position:sticky;top:calc(var(--control-h-lg) + 32px);padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel-quiet)}
.cin-rules-index-title{margin:0 0 var(--space-3);color:var(--khaki);font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.cin-rules-index ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:none}
.cin-rules-index a{display:flex;align-items:baseline;gap:10px;padding:8px 6px;border-radius:var(--radius-sm);color:var(--text-muted);text-decoration:none;font-size:var(--fs-sm);transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.cin-rules-index a:hover,.cin-rules-index a:focus-visible{background:rgba(184,165,122,.1);color:var(--parchment)}
.cin-rules-index .idx-num{font-family:var(--font-data);font-size:var(--fs-2xs);color:var(--khaki);flex:0 0 auto}

.cin-rules-content{display:flex;flex-direction:column;gap:var(--space-7);min-width:0}
.cin-rules-block{scroll-margin-top:140px;padding-bottom:var(--space-6);border-bottom:1px solid var(--line-soft)}
.cin-rules-block:last-child{border-bottom:none;padding-bottom:0}
.cin-rules-block h2{display:flex;align-items:baseline;gap:14px;margin:0 0 var(--space-4);color:var(--parchment);font-family:var(--font-display);font-size:clamp(20px,2.6vw,26px);text-transform:uppercase;letter-spacing:.01em}
.cin-rules-block h2 .n{font-family:var(--font-data);font-size:var(--fs-sm);color:var(--red-bright);font-weight:700}
.cin-rules-block p{max-width:68ch;color:#d3cbb2;font-size:var(--fs-base);line-height:1.75;margin:0 0 var(--space-3)}
.cin-rules-block p:last-child{margin-bottom:0}
.cin-rules-list{max-width:68ch;margin:0 0 var(--space-3);padding-left:22px;color:#d3cbb2;font-size:var(--fs-base);line-height:1.75;display:flex;flex-direction:column;gap:6px}
.cin-rules-note{max-width:64ch;padding:var(--space-4) var(--space-5);border-left:2px solid var(--khaki);background:rgba(184,165,122,.07);color:var(--text-muted)!important;font-size:var(--fs-sm)!important;line-height:1.6!important}

/* Variante "pergamino": el único bloque cálido/claro de la página, para
   el ritmo de contraste asimétrico pedido (rojo militar/negro/oliva
   alternando con pergamino) — no se usa en ningún otro lugar del sitio
   público todavía. */
.cin-rules-block--parchment{padding:var(--space-6);border:1px solid rgba(13,16,12,.15);border-radius:var(--radius-lg);background:var(--parchment);box-shadow:var(--shadow-md)}
.cin-rules-block--parchment h2{color:#1c1f16}
.cin-rules-block--parchment h2 .n{color:var(--red)}
.cin-rules-block--parchment p{color:#3a3826}

/* Variante "cierre": bloque final de la página (versión vigente + CTA de
   descarga) — panel elevado con borde khaki para que se sienta como el
   punto de llegada del reglamento, no otro bloque más de la lista. */
.cin-rules-block--version{padding:var(--space-6);border:1px solid var(--khaki);border-radius:var(--radius-lg);background:var(--panel-quiet);box-shadow:var(--shadow-md)}
.cin-rules-block--version h2{margin-bottom:var(--space-3)}
.cin-rules-block--version p{margin-bottom:var(--space-4)}

/* Reuso de .cin-objective/.cin-rules (definidos para Inicio) en un
   contexto de fila horizontal en vez del panel asimétrico original. */
.cin-objective--inline{display:flex;align-items:center;gap:var(--space-5);width:100%;min-width:0;background:rgba(28,31,22,.12);border-color:rgba(28,31,22,.18)}
.cin-objective--inline .num{margin:0}
.cin-objective--inline i{display:none}
.cin-objective--inline b{max-width:44ch;font-weight:500;text-transform:none;letter-spacing:0;color:#3a3826}
.cin-objective--inline small{color:#6b6647}
.cin-rules--inline{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;padding:var(--space-5) var(--space-6);margin-bottom:var(--space-4)}
.cin-rules--inline small{flex:0 0 100%}

.cin-modal-link{display:inline-block;margin-top:var(--space-4);color:var(--khaki);font-size:var(--fs-sm);text-decoration:none;letter-spacing:.02em}
.cin-modal-link:hover,.cin-modal-link:focus-visible{color:var(--parchment)}

@media(max-width:900px){
  .cin-rules-layout{grid-template-columns:1fr}
  .cin-rules-index{position:static;top:auto}
}
@media(max-width:600px){
  .cin-objective--inline{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
  .cin-section-index .rule{min-width:16px}
  .cin-section-index .label{padding-right:8px;margin-right:0}

  /* Reglas en móvil: mismo contenido y jerarquía, más aire. Tamaño y
     interlineado explícitos (no dependen de heredar el valor de
     escritorio) para que el piso quede garantizado aunque cambie el
     token compartido más adelante. Sigue siendo un reglamento editorial
     continuo — ningún bloque gana tarjeta/fondo nuevo por esto, solo más
     espacio entre párrafos y entre secciones. */
  .cin-rules-block p,.cin-rules-list{font-size:15.5px;line-height:1.65}
  .cin-rules-block p{margin-bottom:var(--space-4)}
  .cin-rules-content{gap:var(--space-8)}
  .cin-rules-block{padding-bottom:var(--space-7)}
  .cin-rules-note{font-size:14px!important;line-height:1.6!important}

  /* Índice inicial: enlaces con área de toque cómoda (~44px). */
  .cin-rules-index a{padding:12px 10px;min-height:44px}
  .cin-rules-index{padding:var(--space-4)}
}

/* ============================================================
   Panel admin — login y gestión de partidos.
   Antes: <main style="..."> con estilos inline sueltos por cada
   página/render, prestando algún token de color pero sin ningún
   patrón de componente propio (sin card, sin header de marca, sin
   estados de partido diferenciados). Estas clases le dan al admin
   la misma calidad de acabado que el sitio público sin salir del
   sistema de tokens existente — solo lo usan admin-login.html,
   admin-partidos.html y admin-partidos.js.
   ============================================================ */
.cin-admin-page{max-width:960px;margin:0 auto;padding:var(--space-8) var(--space-5) 80px}
.cin-admin-page--narrow{max-width:420px}

.cin-admin-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-7);padding-bottom:var(--space-5);border-bottom:1px solid var(--line)}
.cin-admin-brand{display:flex;align-items:center;gap:var(--space-3)}
.cin-admin-brand img{width:38px;height:42px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.cin-admin-brand-copy small{display:block;color:var(--khaki);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.cin-admin-brand-copy strong{display:block;color:var(--parchment);font-family:var(--font-display);font-size:21px;text-transform:uppercase;letter-spacing:.02em;margin-top:2px}
.cin-admin-session{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;color:var(--text-muted);font-size:var(--fs-xs)}
.cin-admin-session strong{color:var(--khaki);font-weight:700}

.cin-admin-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel-deep);box-shadow:var(--shadow-md);padding:var(--space-7);margin-bottom:var(--space-6)}
.cin-admin-card h2{color:var(--parchment);font-family:var(--font-display);font-size:22px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:var(--space-2)}
.cin-admin-card>p.hint{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.6;margin-bottom:var(--space-5)}

.cin-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)}
.cin-field label{color:var(--khaki);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cin-field input,.cin-field select{
  height:var(--control-h-md);padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm);
  background:rgba(0,0,0,.28);color:var(--cream);font-family:var(--font-ui);font-size:var(--fs-md);
  transition:border-color var(--dur-base) var(--ease-standard);
}
.cin-field input:focus-visible,.cin-field select:focus-visible{outline:2px solid var(--red-bright);outline-offset:1px;border-color:var(--khaki)}
.cin-field-error{color:var(--red-bright);font-size:var(--fs-xs);min-height:16px;margin:-6px 0 var(--space-2)}

.cin-admin-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}

/* Estado del partido — variantes de color que faltaban: solo
   confirmado/wo estaban resueltas (ver más arriba); pendiente/jugado
   quedaban con el color neutro por defecto, indistinguibles entre sí
   a simple vista en la lista del admin. */
.stateBadge.pendiente{border-color:var(--line);color:var(--text-muted)}
.stateBadge.jugado{border-color:rgba(199,141,79,.5);color:var(--amber)}
.stateBadge.uploaded{border-color:var(--line);color:var(--text-muted)}
.stateBadge.needs_review{border-color:rgba(199,141,79,.5);color:var(--amber)}
.stateBadge.analyzed{border-color:rgba(108,149,103,.5);color:var(--green)}
.stateBadge.approved{border-color:rgba(108,149,103,.5);color:var(--green)}
.stateBadge.rejected{border-color:rgba(140,47,40,.5);color:var(--red-bright)}

/* Estado de la fecha de una jornada (sorteo_oficial_jornadas.estado_fecha)
   -- panel admin de Calendario. */
.stateBadge.sin_fecha{border-color:var(--line);color:var(--text-muted)}
.stateBadge.programada{border-color:rgba(108,149,103,.5);color:var(--green)}
.stateBadge.aplazada{border-color:rgba(140,47,40,.5);color:var(--red-bright)}
.stateBadge.reprogramada{border-color:rgba(199,141,79,.5);color:var(--amber)}
.stateBadge.en_curso{border-color:rgba(108,149,103,.5);color:var(--green)}
.stateBadge.completada{border-color:var(--khaki);color:var(--khaki)}

/* --- Panel admin de Calendario: una fila editable por jornada --- */
.cin-jornada-admin-row{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel-deep);padding:var(--space-5);margin-bottom:var(--space-4)}
.cin-jornada-admin-info{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.cin-jornada-admin-info strong{color:var(--parchment);font-family:var(--font-display);font-size:16px;text-transform:uppercase}
.cin-jornada-admin-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-4)}
.cin-jornada-admin-form .cin-field{margin-bottom:0;min-width:160px}
.cin-jornada-admin-form .cin-admin-actions{margin-top:0}
.cin-jornada-admin-form .mensaje-jornada{flex-basis:100%}

.cin-captura-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:var(--space-2);cursor:pointer;background:none;width:100%;text-align:left;color:inherit;font:inherit}
.cin-captura-row:hover{border-color:var(--khaki)}
.cin-captura-row img{width:64px;height:36px;object-fit:cover;border-radius:2px;flex:0 0 auto}
.cin-captura-review{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-4)}
.cin-captura-review img{max-width:420px;width:100%;border-radius:var(--radius-sm);border:1px solid var(--line)}
.cin-captura-review .tabla-jugadores{flex:1;min-width:280px}
.cin-captura-review .fila-jugador{display:flex;align-items:center;gap:var(--space-2);padding:4px 0}
.cin-captura-review .fila-jugador.sin-resolver{color:var(--red-bright)}

.cin-match-list{display:flex;flex-direction:column;gap:var(--space-2)}
.cin-match-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--panel-quiet);cursor:pointer;text-align:left;width:100%;color:inherit;font-family:inherit;
  transition:border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);
}
.cin-match-row:hover{border-color:var(--khaki);background:rgba(184,165,122,.06);transform:translateY(-1px)}
.cin-match-row:focus-visible{outline:2px solid var(--red-bright);outline-offset:2px}
.cin-match-row.is-selected{border-color:var(--red-bright);background:rgba(140,47,40,.12)}
.cin-match-row .jornada{color:var(--khaki);font-family:var(--font-data);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-right:var(--space-2)}
.cin-match-row .matchup{color:var(--cream);font-weight:700}
.cin-match-row .mapa{color:var(--text-muted);font-size:var(--fs-xs)}

.cin-leg-card{margin-bottom:var(--space-5);padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel-quiet)}
.cin-leg-card>legend{padding:0 6px;color:var(--khaki);font-family:var(--font-display);font-size:15px;letter-spacing:.03em;text-transform:uppercase}
.cin-leg-score{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--line-soft)}
.cin-leg-score label{display:flex;align-items:center;gap:var(--space-2);color:var(--parchment);font-size:var(--fs-sm)}
.cin-leg-score input{width:60px;height:var(--control-h-sm);text-align:center;font-variant-numeric:tabular-nums;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(0,0,0,.28);color:var(--cream);font-family:var(--font-data);font-size:var(--fs-md)}
.cin-leg-score input:focus-visible{outline:2px solid var(--red-bright);outline-offset:1px;border-color:var(--khaki)}

.cin-player-row{display:flex;align-items:center;gap:var(--space-3);padding:6px 0;border-bottom:1px solid var(--line-soft)}
.cin-player-row:last-child{border-bottom:0}
.cin-player-row .nombre{flex:1;min-width:0;color:var(--cream);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cin-player-row .nombre small{color:var(--text-quiet);margin-left:4px}
.cin-player-row input{width:64px;flex:0 0 auto;height:var(--control-h-sm);text-align:center;font-variant-numeric:tabular-nums;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(0,0,0,.28);color:var(--cream);font-family:var(--font-data);font-size:var(--fs-sm)}
.cin-player-row input:focus-visible{outline:2px solid var(--red-bright);outline-offset:1px;border-color:var(--khaki)}

.cin-admin-divider{margin:var(--space-6) 0;border:0;border-top:1px solid var(--line)}

@media(max-width:600px){
  .cin-admin-page{padding:var(--space-6) var(--space-4) 60px}
  .cin-admin-card{padding:var(--space-5)}
  .cin-match-row{flex-direction:column;align-items:flex-start}
  .cin-leg-score{flex-direction:column;gap:var(--space-3)}
}

/* ============================================================
   INTRO · metraje histórico real de Normandía
   ============================================================ */
.cin-intro-bg{
  background:
    radial-gradient(circle at 50% 58%,transparent 0 24%,rgba(4,5,3,.28) 55%,rgba(3,4,2,.88) 100%),
    linear-gradient(180deg,rgba(4,5,3,.28),rgba(4,5,3,.04) 42%,rgba(4,5,3,.62)),
    url("/img/intro-bar-m1918.webp") center / cover no-repeat;
  filter:saturate(.45) contrast(1.16) brightness(.56);
  scale:1.03;
}
.cin-intro-video{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(1) sepia(.12) contrast(1.22) brightness(.52);opacity:0;transform:scale(1.045);
}
.cin-intro.cin-intro-run .cin-intro-video{animation:cinArchiveReveal 1.15s ease-out .12s forwards,cinArchiveCamera 8s linear .12s forwards}
.cin-intro-video-fallback .cin-intro-video{display:none}
@keyframes cinArchiveReveal{to{opacity:1}}
@keyframes cinArchiveCamera{
  0%{transform:scale(1.07)}
  100%{transform:scale(1.015)}
}
.cin-intro-copy{align-self:start;margin-top:clamp(54px,8vh,92px);width:min(760px,calc(100vw - 40px));text-shadow:0 3px 18px rgba(0,0,0,.9)}
.cin-intro-copy::before{content:"ARCHIVO DE CAMPAÑA · OPERACIÓN OVERLORD";display:block;margin:0 auto 14px;color:rgba(213,199,158,.7);font-family:var(--font-data);font-size:9px;letter-spacing:.2em}
.cin-intro-title{margin:10px 0 12px;line-height:.9}
.cin-intro-title span{font-size:clamp(36px,5.7vw,78px)}
.cin-intro-title .l2{font-size:clamp(25px,3vw,42px);letter-spacing:.3em;margin-left:.3em}
.cin-intro-status{min-height:15px;color:#c8b98f}
.cin-intro-bar{height:3px;margin-top:13px;background:rgba(184,165,122,.16)}
.cin-intro-bar i{width:100%;transform:scaleX(0);transform-origin:left;transition:none}
.cin-intro.cin-intro-run .cin-intro-bar i{width:100%;animation:cinLoadArchive 4.4s cubic-bezier(.65,0,.35,1) .12s both}
@keyframes cinLoadArchive{to{transform:scaleX(1)}}

.cin-skip{
  position:relative;right:auto;bottom:auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:210px;min-height:48px;margin-top:22px;padding:12px 24px;
  border:1px solid rgba(225,205,150,.68);border-radius:3px;
  color:var(--cream);background:linear-gradient(180deg,rgba(116,26,22,.88),rgba(70,14,12,.96));
  box-shadow:0 12px 30px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.12);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity 320ms var(--ease-decel),transform 320ms var(--ease-decel),border-color 160ms ease,background 160ms ease;
}
.cin-intro-ready .cin-skip{opacity:1;transform:translateY(0);pointer-events:auto}
.cin-skip:hover{border-color:var(--cream);background:linear-gradient(180deg,#9c3029,#621713)}
.cin-skip:active{transform:scale(.97)}
.cin-intro-ready .cin-intro-status{color:var(--parchment)}

@media(max-width:700px){
  .cin-intro-copy{margin-top:42px}
  .cin-intro-bg{background-position:58% center}
  .cin-intro-copy>small:first-child{letter-spacing:.16em}
  .cin-intro-video{object-position:52% center}
}

/* ============================================================
   DIRECCIÓN VISUAL 2026 · ARCHIVO DE CAMPAÑA
   ------------------------------------------------------------
   Segunda capa de refinamiento sobre el sistema cinematográfico:
   jerarquía editorial más marcada, menos "dashboard de tarjetas",
   mejor lectura de datos y una retícula que aprovecha el ancho real.
   No altera estructura, contenido ni comportamiento de las vistas.
   ============================================================ */

:root{
  --night:#0a0d0a;
  --parchment:#e7dcc0;
  --cream:#f7f2e8;
  --text-muted:#b6ad96;
  --text-quiet:#98917d;
  --line:rgba(196,178,132,.3);
  --line-soft:rgba(231,220,192,.11);
  --panel-deep:linear-gradient(148deg,rgba(30,35,25,.97),rgba(12,16,11,.985));
  --panel-quiet:rgba(16,21,15,.76);
  --radius-sm:6px;
  --radius-md:9px;
  --radius-lg:12px;
  --radius-xl:16px;
}

body.cinematic{
  background:#0a0d0a;
  text-rendering:optimizeLegibility;
}
body.cinematic::before{
  background:
    radial-gradient(ellipse at 12% 8%,rgba(100,105,72,.18),transparent 36%),
    linear-gradient(180deg,rgba(10,13,9,.78),rgba(7,9,7,.965) 72%),
    url("/img/dday-global-bg.webp") center top / cover fixed;
}
body.cinematic::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.23;
  background-image:linear-gradient(rgba(231,220,192,.03) 1px,transparent 1px);
  background-size:100% 8px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 70%);
}

.cin-shell{padding-top:14px}
#view-root{position:relative}
#view-root::before{
  content:"DDAY / OPERACIONES / 2026";position:absolute;top:3px;right:0;
  color:rgba(196,178,132,.34);font-family:var(--font-data);font-size:9px;
  letter-spacing:.18em;writing-mode:vertical-rl;transform:translateX(26px);
}

.cin-header{
  border-color:rgba(220,202,155,.4);
  box-shadow:0 24px 70px rgba(0,0,0,.48),0 1px 0 rgba(255,255,255,.04) inset;
}
.cin-header::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  box-shadow:inset 0 0 0 6px rgba(8,10,7,.18),inset 0 -90px 100px rgba(4,6,4,.42);
}
.cin-header-inner,.cin-ticker{z-index:2}
.cin-title p{color:#d1bd86;text-shadow:0 2px 12px #000}
.cin-title h1{letter-spacing:.012em}
.cin-title h1 em{color:#c85145}
.cin-pills span{
  border-radius:2px;border-color:rgba(225,211,172,.28);
  background:rgba(8,10,7,.6);box-shadow:inset 3px 0 0 rgba(184,165,122,.42);
}
.cin-nav{border-top:1px solid rgba(231,220,192,.1);padding-top:12px}
.cin-nav a{background:rgba(7,9,7,.68);border-color:rgba(244,239,227,.14)}
.cin-nav a:hover{background:rgba(184,165,122,.17);color:#fff}
.cin-nav a.active{background:linear-gradient(135deg,#9f362d,#76231f);box-shadow:inset 0 3px 0 rgba(255,255,255,.08)}
.cin-ticker{background:linear-gradient(90deg,rgba(4,6,4,.84),rgba(16,19,13,.68));border-top-color:rgba(231,220,192,.16)}
.cin-ticker strong{color:#d6be83}

.cin-section-index{margin-bottom:22px}
.cin-section-index .num{font-size:38px}
.cin-section-index .rule{background:linear-gradient(90deg,var(--line),transparent)}
.cin-section-index .estado,.cin-page-meta span{border-radius:2px;background:rgba(8,10,7,.42)}
.cin-page-intro{position:relative;padding-left:24px}
.cin-page-intro::before{content:"";position:absolute;left:0;top:2px;bottom:4px;width:3px;background:linear-gradient(var(--red-bright),rgba(182,75,64,.1))}
.cin-page-intro h1{letter-spacing:.018em;text-wrap:balance}
.cin-page-intro p.lede{color:#d9d0b9;line-height:1.72}

.cin-mission,.cin-rules,.cin-countdown,.cin-stats,.cin-news,
.cin-board-pending,.cin-process,.cin-summary-grid .card,.cin-jornada-card,
.cin-timeline-content,.cin-standings-surface,.cin-directory-toolbar,
.cin-clan-tile,.cin-map-card,.cin-rules-index{
  box-shadow:0 14px 40px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.025);
}
.cin-mission,.cin-news,.cin-standings-surface,.cin-board-pending{position:relative}
.cin-mission::before,.cin-news::before,.cin-standings-surface::before,.cin-board-pending::before{
  content:"";position:absolute;top:-1px;left:24px;width:72px;height:3px;z-index:2;
  background:var(--red-bright);box-shadow:92px 0 0 rgba(184,165,122,.45);
}
.cin-mission-inner{min-height:470px;background-size:cover}
.cin-mission:hover .cin-mission-inner{background-size:cover}
.cin-mission-copy p{color:#e1d8c1;line-height:1.72}
.cin-objective{backdrop-filter:blur(5px);border-color:rgba(220,202,155,.5)}
.cin-rules{background:linear-gradient(155deg,rgba(82,72,40,.68),rgba(20,25,17,.98) 58%)}
.cin-rules-row strong{font-family:var(--font-display)}
.cin-btn{border-radius:3px;position:relative;overflow:hidden}
.cin-btn::after{content:"";position:absolute;inset:auto 8px 5px;height:1px;background:currentColor;opacity:.2;transform:scaleX(0);transition:transform var(--dur-base) var(--ease-standard)}
.cin-btn:hover::after{transform:scaleX(1)}

.cin-countdown{box-shadow:inset 2px 0 var(--khaki),var(--shadow-md)}
.cin-countdown-grid strong{font-size:50px}
.cin-stats>div{position:relative}
.cin-stats>div::after{content:"";position:absolute;left:var(--space-7);right:var(--space-7);bottom:0;height:2px;background:linear-gradient(90deg,var(--khaki),transparent);opacity:.45}
.cin-stats strong{font-family:var(--font-display);letter-spacing:.01em}

/* Cinco accesos, cinco columnas: elimina la tarjeta huérfana de la portada. */
.cin-access{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.cin-access a{min-height:156px;border-radius:8px;padding:22px;justify-content:space-between}
.cin-access a span.ic{position:relative;width:34px;height:34px;align-items:center;justify-content:center}
.cin-access a span.ic::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(184,165,122,.18);transform:rotate(45deg)}
.cin-access a strong{font-size:19px}

.cin-clan-tile,.cin-map-card,.cin-jornada-card,.cin-directory-row{border-radius:8px}
.cin-clan-tile{padding:28px;min-height:238px}
.cin-clan-tile .num{font-size:62px;color:rgba(184,165,122,.17)}
.cin-clan-tile .tag{font-size:38px}
.cin-map-card::before{background:linear-gradient(180deg,transparent 35%,rgba(5,7,5,.96) 100%)}

/* Mapas · copias fotográficas de campaña. El marco claro deja de ser un
   borde digital y pasa a comportarse como papel fotográfico envejecido. */
.cin-map-grid--archive{gap:clamp(24px,3vw,38px);padding:10px 6px 18px}
.cin-map-grid--archive .cin-map-card{
  min-height:318px;padding:15px 15px 82px;overflow:visible;
  border:0;border-radius:2px;
  background:
    linear-gradient(112deg,rgba(255,255,255,.16),transparent 24% 72%,rgba(74,49,20,.15)),
    url("/img/map-photo-paper-mud.webp") center / cover no-repeat,
    #cdbd91;
  box-shadow:0 19px 32px rgba(0,0,0,.42),0 5px 9px rgba(0,0,0,.28),inset 0 0 0 2px rgba(255,244,207,.34);
}
.cin-map-grid--archive .cin-map-card:nth-child(3n+1){background-position:center,18% 32%,center}
.cin-map-grid--archive .cin-map-card:nth-child(3n+2){background-position:center,82% 70%,center}
.cin-map-grid--archive .cin-map-card:nth-child(3n){background-position:center,54% 18%,center}
.cin-map-grid--archive .cin-map-card .bg{
  inset:15px 15px 82px;width:calc(100% - 30px);height:calc(100% - 97px);
  border:3px solid rgba(44,32,18,.82);border-radius:0;
  box-shadow:0 1px 0 rgba(255,245,210,.5),0 0 0 1px rgba(23,18,10,.26);
  filter:grayscale(.1) sepia(.06) saturate(.82) contrast(1.08);opacity:.96;
}
.cin-map-grid--archive .cin-map-card::after{
  inset:15px 15px 82px;border-radius:0;
  background:linear-gradient(0deg,rgba(8,10,7,.48),transparent 58%);
}
.cin-map-grid--archive .cin-map-card::before{
  inset:15px 15px 82px;border-radius:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(235,218,167,.16),transparent 72%);
}
.cin-map-grid--archive .cin-map-card .label{
  position:absolute;left:21px;right:21px;bottom:17px;width:auto;padding:0;
  display:grid;grid-template-columns:auto 1fr auto;align-items:end;column-gap:10px;
  text-align:left;text-shadow:none;
}
.cin-map-grid--archive .cin-map-card .label .num{
  grid-row:1/3;margin:0;color:#7c2b25;font-size:12px;line-height:1.15;text-shadow:none;
}
.cin-map-grid--archive .cin-map-card .label small{
  color:#665b40;font-size:9px;line-height:1;letter-spacing:.15em;text-shadow:none;
}
.cin-map-grid--archive .cin-map-card .label strong{
  margin:3px 0 0;color:#251f14;font-family:var(--font-display);font-size:20px;line-height:1;
  letter-spacing:.025em;text-shadow:none;
}
.cin-map-grid--archive .cin-map-card .dossier-cta{
  grid-column:3;grid-row:1/3;align-self:center;margin:0;color:#51472f;font-size:9px;text-shadow:none;
}
.cin-map-grid--archive .cin-map-card:hover,.cin-map-grid--archive .cin-map-card:focus-visible{
  transform:translateY(-7px) rotate(0deg);border-color:transparent;
  box-shadow:0 24px 42px rgba(0,0,0,.46),0 6px 10px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,244,207,.42);
}
.cin-map-grid--archive .cin-map-card:hover .bg,.cin-map-grid--archive .cin-map-card:focus-visible .bg{transform:scale(1.018)}
@media(max-width:700px){
  .cin-map-grid--archive{gap:28px;padding-inline:4px}
  .cin-map-grid--archive .cin-map-card{min-height:306px;padding:13px 13px 78px}
  .cin-map-grid--archive .cin-map-card .bg{inset:13px 13px 78px;width:calc(100% - 26px);height:calc(100% - 91px)}
  .cin-map-grid--archive .cin-map-card::before,.cin-map-grid--archive .cin-map-card::after{inset:13px 13px 78px}
  .cin-map-grid--archive .cin-map-card .dossier-cta{opacity:1;transform:none}
}
.cin-directory-row{background:linear-gradient(90deg,rgba(28,34,24,.92),rgba(14,18,13,.84))}

.cin-standings-table th{background:rgba(5,7,5,.72);color:#c7b785}
.cin-standings-table tbody tr:nth-child(even){background:rgba(231,220,192,.025)}
.cin-standings-table tbody tr:hover{background:rgba(184,165,122,.08)}
.cin-empty,.cin-state{background:repeating-linear-gradient(135deg,rgba(231,220,192,.015) 0 8px,transparent 8px 16px),rgba(8,11,8,.35)}

.cin-footer{border-radius:8px;background:rgba(9,12,8,.74);box-shadow:0 12px 38px rgba(0,0,0,.25)}
.cin-footer::before{content:"";align-self:stretch;width:2px;background:var(--red-bright);margin-right:4px}

@media(min-width:1101px){
  .cin-hero-grid{grid-template-columns:minmax(0,1fr) 300px}
  .cin-rules{display:flex;flex-direction:column;justify-content:center}
}

@media(max-width:1100px){
  .cin-access{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cin-access a:nth-child(4),.cin-access a:nth-child(5){grid-column:span 1}
  #view-root::before{display:none}
}

@media(max-width:700px){
  .cin-shell{padding-top:8px}
  .cin-page-intro{padding-left:16px}
  .cin-access{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cin-access a{min-height:142px;padding:18px}
  .cin-access a:last-child{grid-column:1/-1;min-height:118px}
  .cin-countdown{align-items:flex-start}
  .cin-countdown-grid{width:100%;justify-content:space-between;gap:8px}
  .cin-countdown-grid div{min-width:0}
  .cin-countdown-grid strong{font-size:38px}
  .cin-mission-inner{min-height:440px}
}

@media(max-width:430px){
  .cin-access{grid-template-columns:1fr}
  .cin-access a,.cin-access a:last-child{grid-column:auto;min-height:112px}
  .cin-access a{display:grid;grid-template-columns:44px 1fr;align-items:center;column-gap:14px}
  .cin-access a strong,.cin-access a small{grid-column:2}
  .cin-access a span.ic{grid-row:1/3}
  .cin-page-intro h1{font-size:36px}
}

/* ============================================================
   PODIOS + CRUCES DE JORNADA · refinamiento de alto tráfico
   ============================================================ */

.cin-standing-clan{display:inline-flex;align-items:center;gap:11px;min-width:116px}
.cin-standing-clan img{
  width:38px;height:38px;flex:0 0 38px;object-fit:cover;border-radius:50%;
  border:1px solid rgba(231,220,192,.45);background:var(--parchment);
  box-shadow:0 5px 12px rgba(0,0,0,.36);
}
.cin-standing-clan strong,.cin-standings-table td.player strong{font-family:var(--font-ui);font-size:var(--fs-base);letter-spacing:.025em;color:var(--parchment)}
.cin-rank-number{display:inline-grid;place-items:center;min-width:30px}
.cin-medal{
  --medal:#c79a3d;--medal-light:#f0d77a;--medal-dark:#6f4615;
  position:relative;isolation:isolate;display:inline-grid;place-items:end center;width:42px;height:48px;margin:1px 0;
  clip-path:polygon(50% 0,94% 15%,86% 74%,50% 100%,14% 74%,6% 15%);
  background:
    linear-gradient(120deg,transparent 0 34%,rgba(255,255,255,.26) 35% 38%,transparent 39% 100%),
    linear-gradient(155deg,var(--medal-light),var(--medal) 48%,var(--medal-dark));
  color:#17130a;font-family:var(--font-display);font-size:17px;font-weight:700;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.48)) drop-shadow(0 0 1px var(--medal-light));
}
.cin-medal::before,.cin-medal::after{
  content:"";position:absolute;z-index:-1;left:9px;right:9px;height:8px;
  background:color-mix(in srgb,var(--medal-dark),#090b08 28%);
  clip-path:polygon(0 0,50% 56%,100% 0,100% 38%,50% 100%,0 38%);
}
.cin-medal::before{top:12px}
.cin-medal::after{top:22px}
.cin-medal>span{position:relative;z-index:1;margin-bottom:5px;line-height:1;text-shadow:0 1px rgba(255,255,255,.25)}
.cin-medal--plata{--medal:#aeb4b5;--medal-light:#eceeeb;--medal-dark:#555b5c}
.cin-medal--bronce{--medal:#a76039;--medal-light:#dda071;--medal-dark:#55291b}
.cin-standings-table tr.is-podium td{background-image:linear-gradient(90deg,rgba(231,220,192,.035),transparent 52%)}
.cin-standings-table tr.is-podium td:first-child{overflow:visible}
.cin-standings-table tr.is-podium td.pts strong{box-shadow:0 0 0 1px rgba(231,220,192,.1),0 5px 15px rgba(0,0,0,.22)}

.cin-calendar-matchup{
  display:grid;grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr);align-items:center;
  gap:14px;min-height:82px;padding:12px 16px;border-bottom:1px solid var(--line-soft);
  background:linear-gradient(90deg,rgba(231,220,192,.025),transparent 35% 65%,rgba(231,220,192,.025));
}
.cin-calendar-matchup:last-child{border-bottom:0}
.cin-calendar-team{display:flex;align-items:center;gap:12px;min-width:0}
.cin-clan-profile-trigger{appearance:none;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.cin-clan-profile-trigger:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}
.cin-clan-profile-trigger img{transition:transform var(--dur-base) var(--ease-standard),filter var(--dur-base) var(--ease-standard)}
.cin-clan-profile-trigger:hover img,.cin-clan-profile-trigger:focus-visible img{transform:scale(1.08);filter:saturate(1.08) drop-shadow(0 0 8px rgba(200,81,69,.35))}
.cin-calendar-team:last-child{flex-direction:row-reverse;text-align:right}
.cin-calendar-team img{
  width:48px;height:48px;flex:0 0 48px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(231,220,192,.42);background:var(--parchment);
  box-shadow:0 6px 14px rgba(0,0,0,.45);
}
.cin-calendar-team strong{overflow:hidden;text-overflow:ellipsis;color:var(--cream);font-family:var(--font-display);font-size:20px;letter-spacing:.035em}
.cin-calendar-vs{position:relative;display:grid;place-items:center;width:86px;height:58px;justify-self:center;overflow:hidden}
.cin-calendar-vs img{width:84px;height:56px;object-fit:cover;filter:saturate(.9) contrast(1.08);mix-blend-mode:screen}
.cin-calendar-vs::after{content:"";position:absolute;inset:auto 8px 1px;height:1px;background:linear-gradient(90deg,transparent,var(--red-bright),transparent)}

.cin-instagram-link{display:inline-flex;align-items:center;gap:7px;color:var(--khaki)!important}
.cin-instagram-link svg{transition:transform var(--dur-base) var(--ease-standard),filter var(--dur-base) var(--ease-standard)}
.cin-instagram-link:hover svg,.cin-instagram-link:focus-visible svg{transform:rotate(-7deg) scale(1.12);filter:drop-shadow(0 0 6px rgba(200,81,69,.65))}

#map-modal-backdrop .cin-modal{width:min(980px,100%)}
#map-modal-backdrop .cin-modal>img{max-height:64vh;object-fit:contain;background:#080a08;filter:saturate(.92) contrast(1.04)}
.cin-clan-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0 20px}
.cin-clan-stats>div{padding:10px 8px;border:1px solid var(--line-soft);background:rgba(231,220,192,.035);text-align:center}
.cin-clan-stats dt{color:var(--text-quiet);font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cin-clan-stats dd{margin:3px 0 0;color:var(--cream);font-family:var(--font-display);font-size:22px;font-variant-numeric:tabular-nums}
.cin-modal-roster li{display:flex;justify-content:space-between;gap:16px}
.cin-modal-roster li b{color:var(--khaki);font-family:var(--font-data);font-size:10px;font-weight:700;white-space:nowrap}

@media(max-width:700px){
  .cin-clan-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cin-calendar-matchup{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);gap:7px;padding:12px 8px}
  .cin-calendar-team{flex-direction:column;gap:6px;text-align:center}
  .cin-calendar-team:last-child{flex-direction:column;text-align:center}
  .cin-calendar-team img{width:42px;height:42px;flex-basis:42px}
  .cin-calendar-team strong{font-size:17px}
  .cin-calendar-vs{width:58px;height:44px}
  .cin-calendar-vs img{width:58px;height:40px}
  .cin-standing-clan{min-width:104px;gap:8px}
  .cin-standing-clan img{width:32px;height:32px;flex-basis:32px}
}

/* ============================================================
   CALENDARIO UNIFICADO · fixture + programación + resultados
   ============================================================ */

.cin-calendar-board{display:grid;gap:28px;margin-top:var(--space-7)}
.cin-calendar-round{
  display:grid;grid-template-columns:minmax(250px,34%) minmax(0,1fr);overflow:hidden;
  border:1px solid rgba(196,178,132,.34);border-radius:var(--radius-lg);
  background:linear-gradient(145deg,rgba(28,34,24,.98),rgba(9,12,9,.985));
  box-shadow:0 22px 55px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.035);
}
.cin-calendar-round>.cin-jornada-foto{min-height:100%;height:auto;border:0;border-right:1px solid var(--line)}
.cin-calendar-round>.cin-jornada-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,7,5,.05),rgba(5,7,5,.62));
}
.cin-calendar-round__body{min-width:0;padding:24px}
.cin-calendar-round__header{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:end;
  padding:0 0 18px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.cin-calendar-round__header>span{
  grid-column:1/-1;color:var(--red-bright);font-family:var(--font-data);font-size:10px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px;
}
.cin-calendar-round__header h2{margin:0;color:var(--cream);font-family:var(--font-display);font-size:clamp(22px,2.2vw,32px);letter-spacing:.015em}
.cin-calendar-round__header p{margin:0;color:var(--khaki);font-family:var(--font-data);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:right}
.cin-calendar-round__games{display:grid}
.cin-calendar-game{
  display:grid;grid-template-columns:minmax(250px,1.2fr) minmax(190px,.8fr) auto;align-items:center;gap:20px;
  padding:16px 4px;border-bottom:1px solid var(--line-soft);
  transition:background var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);
}
.cin-calendar-game:last-child{border-bottom:0}
.cin-calendar-game:hover{background:linear-gradient(90deg,rgba(184,165,122,.055),transparent);transform:translateX(3px)}
.cin-calendar-game__teams{display:grid;grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);align-items:center;gap:8px}
.cin-calendar-game__teams .cin-calendar-team{gap:9px}
.cin-calendar-game__teams .cin-calendar-team img{width:42px;height:42px;flex-basis:42px}
.cin-calendar-game__teams .cin-calendar-team strong{font-size:18px}
.cin-calendar-game__teams .cin-calendar-vs{width:62px;height:44px}
.cin-calendar-game__teams .cin-calendar-vs img{width:60px;height:42px}
.cin-calendar-game__schedule{display:flex;flex-direction:column;gap:4px;padding-left:18px;border-left:1px solid var(--line-soft)}
.cin-calendar-game__label{color:var(--text-quiet);font-family:var(--font-data);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cin-calendar-game__schedule time{color:var(--parchment);font-family:var(--font-ui);font-size:13px;line-height:1.45;text-transform:capitalize}
.cin-calendar-game__result{justify-self:end;text-align:right}
.cin-calendar-game__result .stateBadge{white-space:normal;max-width:190px}

@media(max-width:1000px){
  .cin-calendar-round{grid-template-columns:1fr}
  .cin-calendar-round>.cin-jornada-foto{min-height:240px;border-right:0;border-bottom:1px solid var(--line)}
  .cin-calendar-round>.cin-jornada-foto::after{background:linear-gradient(180deg,rgba(5,7,5,.05),rgba(5,7,5,.68))}
}

@media(max-width:760px){
  .cin-calendar-board{gap:20px}
  .cin-calendar-round__body{padding:18px 14px}
  .cin-calendar-round__header{grid-template-columns:1fr;gap:6px}
  .cin-calendar-round__header p{text-align:left}
  .cin-calendar-game{grid-template-columns:1fr;gap:12px;padding:18px 2px}
  .cin-calendar-game:hover{transform:none}
  .cin-calendar-game__schedule{padding:10px 0 0;border-left:0;border-top:1px solid var(--line-soft)}
  .cin-calendar-game__result{justify-self:start;text-align:left}
}

@media(max-width:430px){
  .cin-calendar-round>.cin-jornada-foto{min-height:205px}
  .cin-calendar-game__teams{grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr)}
  .cin-calendar-game__teams .cin-calendar-team{flex-direction:column;text-align:center;gap:5px}
  .cin-calendar-game__teams .cin-calendar-team:last-child{flex-direction:column;text-align:center}
  .cin-calendar-game__teams .cin-calendar-team strong{font-size:16px}
  .cin-calendar-game__teams .cin-calendar-vs{width:52px}
}

/* ============================================================
   ÚLTIMA MILLA · respuesta, legibilidad y estados del navegador
   Impeccable + Taste + Apple Design + Interface Details
   ============================================================ */

html{
  scrollbar-gutter:stable;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.cinematic{accent-color:var(--red-bright)}
body.cinematic.cin-modal-open{overflow:hidden}
body.cinematic ::selection{color:var(--cream);background:rgba(182,75,64,.72)}
body.cinematic *{scrollbar-width:thin;scrollbar-color:rgba(184,165,122,.58) rgba(9,12,8,.72)}
body.cinematic *::-webkit-scrollbar{width:11px;height:11px}
body.cinematic *::-webkit-scrollbar-track{background:rgba(9,12,8,.72)}
body.cinematic *::-webkit-scrollbar-thumb{border:3px solid rgba(9,12,8,.72);border-radius:999px;background:rgba(184,165,122,.58)}
body.cinematic h1,body.cinematic h2,body.cinematic h3{text-wrap:balance;font-optical-sizing:auto}
body.cinematic p,body.cinematic li{text-wrap:pretty}

/* Respuesta desde pointer-down. La escala es breve, interruptible y no
   altera el feedback estático de color/foco. */
.cin-btn,.cin-nav a,.cin-menu-toggle,.cin-modal-close,.cin-back-top,.cin-audio-toggle,.cin-resultado-trigger{
  transform-origin:center;
}
.cin-btn:active,.cin-nav a:active,.cin-menu-toggle:active,.cin-modal-close:active,.cin-back-top:active,.cin-audio-toggle:active,.cin-resultado-trigger:active{
  transform:scale(.96);
  transition-duration:100ms;
}
.cin-menu-toggle,.cin-modal-close,.cin-back-top,.cin-audio-toggle{min-width:44px;min-height:44px}

/* El modal materializa desde su contexto en vez de aparecer de golpe.
   La curva no rebota: conserva la severidad del lenguaje militar. */
.cin-modal-backdrop:not([hidden]){animation:cinScrimIn 180ms var(--ease-decel) both}
.cin-modal-backdrop:not([hidden]) .cin-modal{animation:cinModalIn 320ms var(--ease-decel) both;transform-origin:50% 24%}
@keyframes cinScrimIn{from{opacity:0}to{opacity:1}}
@keyframes cinModalIn{from{opacity:0;transform:translateY(14px) scale(.975);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}

/* Contornos ópticos coherentes para fotografías y escudos sobre fondos
   cambiantes. El blanco puro se usa solo con transparencia, no como color. */
.cin-jornada-foto img,.cin-map-card img,.cin-clan-tile img,.cin-calendar-team img,.cin-standing-clan img,.cin-modal>img{
  outline:1px solid oklch(1 0 0/.1);
  outline-offset:-1px;
}
.cin-countdown-grid strong,.cin-stats strong,.cin-objective strong,.cin-section-index .num,.cin-page-meta,.stateBadge,.cin-calendar-game__schedule time{
  font-variant-numeric:tabular-nums;
}

/* Las preferencias son independientes: menos movimiento no implica que
   la persona también haya pedido menos transparencia o más contraste. */
@media(prefers-reduced-transparency:reduce){
  .cin-nav a,.cin-pills span,.cin-modal-backdrop,.cin-nav-backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .cin-nav a{background:#11150f}
  .cin-pills span{background:#11150f}
  .cin-modal-backdrop{background:rgba(5,7,5,.96)}
}
@media(prefers-contrast:more){
  :root{--line:rgba(231,220,192,.62);--line-soft:rgba(231,220,192,.34);--text-muted:#ded5bf;--text-quiet:#c8bea5}
  .cin-nav a,.cin-btn,.cin-modal-close,.stateBadge{border-color:currentColor}
  body.cinematic a:focus-visible,body.cinematic button:focus-visible,body.cinematic .cin-btn:focus-visible{outline-width:3px;outline-color:var(--cream)}
}
@media(prefers-reduced-motion:reduce){
  .cin-modal-backdrop:not([hidden]),.cin-modal-backdrop:not([hidden]) .cin-modal{animation:none!important}
  .cin-btn:active,.cin-nav a:active,.cin-menu-toggle:active,.cin-modal-close:active,.cin-back-top:active,.cin-audio-toggle:active,.cin-resultado-trigger:active{transform:none}
  .cin-intro-bg{opacity:1!important;scale:1!important;translate:0!important;filter:saturate(.72) contrast(1.12) brightness(.74)!important}
  .cin-intro-title span{opacity:1!important;scale:1!important;filter:none!important}
  .cin-intro-mechanism{display:none!important}
  .cin-intro-ready .cin-skip{opacity:1!important;transform:none!important;pointer-events:auto!important}
}