/* ============================================================
   OLIMPIADAS EN VALORES — IES Lacimurga CI
   Sistema de diseño v2 · 24/08/2026
   Mundo: la exposición itinerante, recorrida con el scroll.
   Collage de recortes · campos de color a sangre con corte
   diagonal · semitono impreso · duotono por época · círculos
   numerados · rótulo condensado y letras rayadas multilínea.
   Paleta extraída de las 12 lonas, no inventada.
   ============================================================ */

@font-face { font-family:'Shoulders'; font-weight:100 900; font-display:swap;
  src:url('../fonts/bigshoulders.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:400; font-display:swap;
  src:url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:500; font-display:swap;
  src:url('../fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:700; font-display:swap;
  src:url('../fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family:'BarlowC'; font-weight:600; font-display:swap;
  src:url('../fonts/barlowcond-600.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --papel:  #f2f0e9;
  --papel2: #e6e3d8;
  --ink:    #14141a;
  --negro:  #0d0d0f;
  --rojo:   #bf042b;
  --rojo-d: #8f0320;
  --azul:   #2f6fb0;
  --azul-d: #1d4c7d;
  --oro:    #e8b64a;
  --verde:  #4e8a5c;
  --verde-d:#33613f;
  --tierra: #88785a;
  --muted:  #5f5f57;
  --line:   rgba(20,20,26,.18);
  --line-l: rgba(242,240,233,.26);
  --container: 1240px;
  --header-h: 62px;
  --ease: cubic-bezier(.16,1,.3,1);
  /* color de la época actual — lo cambia el scroll */
  --era: var(--verde);
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--papel); color:var(--ink);
  font-family:'Barlow', system-ui, sans-serif; font-size:17.5px; line-height:1.58;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video,svg { max-width:100%; height:auto; display:block; }
a { color:inherit; text-underline-offset:3px; }
p { margin:0 0 1.05em; } p:last-child { margin-bottom:0; }
strong { font-weight:700; }

/* ---------- Rótulo ---------- */
h1,h2,h3 { margin:0 0 .38em; font-family:'Shoulders', 'Barlow', sans-serif; font-weight:800;
  text-transform:uppercase; line-height:.92; letter-spacing:-.005em; text-wrap:balance; }
h1 { font-size:clamp(3.4rem, 11vw, 9.5rem); }
h2 { font-size:clamp(2.4rem, 6.4vw, 5.2rem); }
h3 { font-size:clamp(1.35rem, 2.2vw, 1.85rem); letter-spacing:0; }

.label { font-family:'BarlowC', sans-serif; font-weight:600; font-size:.82rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.label--era { color:var(--era); }
.label--l { color:rgba(242,240,233,.72); }
.lead { font-size:clamp(1.08rem, 1.55vw, 1.28rem); line-height:1.5; max-width:60ch; color:var(--muted); }
.lead--l { color:rgba(242,240,233,.84); }
.num { font-variant-numeric:tabular-nums; }

/* Letras rayadas multilínea — la firma gráfica de la exposición.
   Se apilan copias con contorno y sin relleno: el text-shadow no sirve
   porque rellena la letra entera en vez de repetir el contorno. */
.rayada { position:relative; display:inline-block;
  font-family:'Shoulders',sans-serif; font-weight:900; text-transform:uppercase;
  line-height:.86; letter-spacing:.01em; }
.rayada__g { display:block; visibility:hidden; }          /* fantasma: sostiene la caja */
.rayada__l { position:absolute; top:0; left:0; display:block; white-space:nowrap;
  color:transparent; -webkit-text-stroke:.045em var(--c);
  transform:translate(var(--o), calc(var(--o) * -.34)); }

/* Rejilla del hero: en clase, no en línea, para que la media query pueda con ella */
.hero-grid { display:grid; gap:clamp(28px,5vw,66px); align-items:center;
  grid-template-columns:1.22fr .78fr; }
@media (max-width:860px){ .hero-grid { grid-template-columns:1fr; } }

/* ---------- Estructura ---------- */
.container { max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,52px); }
.section { padding-block:clamp(72px,10vw,140px); position:relative; }
.section--tight { padding-block:clamp(48px,6vw,80px); }

/* Campos de color a sangre */
.band { position:relative; }
.band--papel2 { background:var(--papel2); }
.band--verde  { background:var(--verde);  color:var(--papel); }
.band--azul   { background:var(--azul);   color:var(--papel); }
.band--negro  { background:var(--negro);  color:var(--papel); }
.band--rojo   { background:var(--rojo);   color:var(--papel); }
.band--oro    { background:var(--oro);    color:var(--negro); }
.band--verde .lead, .band--azul .lead, .band--negro .lead, .band--rojo .lead { color:rgba(242,240,233,.84); }
.band--oro .lead { color:rgba(13,13,15,.76); }

/* El corte diagonal entre épocas — el recurso de las lonas.
   --p va de 0 a 1 según entra la banda en pantalla (lo pone el JS):
   el corte llega abierto y se va cerrando hasta su ángulo final.
   Sin JS, --p vale 1 y todo queda en su sitio. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 1; }
.band { --p: 1; --corte: calc(5vw + (1 - var(--p)) * 12vw); }
.cut     { clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--corte))); }
.cut--rev{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), 0 100%); }
.cut--in { clip-path:polygon(0 var(--corte), 100% 0, 100% 100%, 0 100%); }

/* Paralaje por capas: cada plano llega a distinta velocidad.
   El fondo casi no se mueve, el texto un poco, y las figuras mucho.
   Esa diferencia es la profundidad; un solo plano no se nota. */
.band > .container { transform: translateY(calc((1 - var(--p)) * 26px)); will-change: transform; }

/* Plano delantero: figuras, collage, televisor y marcador */
.parada__fig, .collage, .tv, .score, .media,
.section > .container > .recorte, .grid > .recorte {
  transform: translateY(calc((1 - var(--p)) * 78px));
  will-change: transform;
}
/* Plano de fondo: el año en contorno va al revés, se queda atrás */
.parada__anyo { transform: translateY(calc((1 - var(--p)) * -52px)); }
/* Y la trama impresa se desliza en contra */
.halftone::after { background-position: 0 calc((1 - var(--p)) * -30px); }

@media (prefers-reduced-motion: reduce) {
  .band { --p: 1 !important; }
  .band > .container, .parada__fig, .collage, .tv, .score, .media, .parada__anyo,
  .section > .container > .recorte, .grid > .recorte { transform: none; }
}

/* Semitono impreso sobre los campos de color */
.halftone::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,.5) 1px, transparent 1.4px);
  background-size:5px 5px; mix-blend-mode:soft-light; opacity:.55;
}
.halftone > * { position:relative; z-index:2; }

/* ---------- Cabecera ---------- */
.site-header { position:sticky; top:0; z-index:80; height:var(--header-h); display:flex;
  align-items:center; background:var(--negro); color:var(--papel); }
.site-header__inner { display:flex; align-items:center; gap:24px; width:100%; position:static; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.brand__mark { font-family:'Shoulders',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:1.32rem; letter-spacing:.01em; }
.brand__sub { font-family:'BarlowC',sans-serif; font-weight:600; font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--oro); }
.nav { display:flex; align-items:center; gap:20px; }
.nav a { font-family:'BarlowC',sans-serif; font-weight:600; font-size:.92rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:rgba(242,240,233,.74); }
.nav a:hover { color:var(--papel); }
.nav a.btn { color:var(--papel); }

/* ---------- Botones ---------- */
.btn { display:inline-flex; align-items:center; gap:.5em; padding:.72em 1.35em;
  font-family:'BarlowC',sans-serif; font-weight:600; font-size:1rem; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; border:2px solid transparent; border-radius:0;
  transition:transform .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease); }
.btn:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 currentColor; }
.btn--rojo  { background:var(--rojo); color:var(--papel); }
.btn--rojo:hover { box-shadow:4px 4px 0 var(--ink); }
.btn--ink   { background:var(--ink); color:var(--papel); }
.btn--ink:hover { box-shadow:4px 4px 0 var(--rojo); }
.btn--ghost { border-color:currentColor; }
.btn--ghost:hover { box-shadow:4px 4px 0 currentColor; }

/* ---------- Recortes de collage ---------- */
.recorte { position:relative; display:block; box-shadow:6px 7px 0 rgba(13,13,15,.22); }
.recorte img { width:100%; }
.recorte--l  { transform:rotate(-1.6deg); }
.recorte--r  { transform:rotate(1.4deg); }
.recorte--l2 { transform:rotate(-2.6deg); }
.duo-azul  img { filter:grayscale(1) contrast(1.12) sepia(.5) hue-rotate(160deg) saturate(2.6); }
.duo-rojo  img { filter:grayscale(1) contrast(1.14) sepia(.7) hue-rotate(-24deg) saturate(3.4); }
.duo-oro   img { filter:grayscale(1) contrast(1.06) sepia(.85) saturate(1.9); }
.duo-verde img { filter:grayscale(1) contrast(1.1) sepia(.55) hue-rotate(60deg) saturate(1.7); }

/* Collage del hero: cuatro recortes solapados, sin huecos */
.collage { display:grid; gap:12px;
  grid-template-columns:1.05fr .95fr;
  grid-template-areas: "a b" "a c" "d c"; }
.collage .recorte { height:100%; overflow:hidden; }
.collage .recorte img { height:100%; object-fit:cover; }
@media (max-width:680px){ .collage { grid-template-columns:1fr 1fr;
  grid-template-areas:"a b" "c d"; } }

/* Círculo numerado — la anotación de las visitas guiadas */
.marca { display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border:2px solid currentColor; border-radius:50%;
  font-family:'Barlow',sans-serif; font-weight:700; font-size:1rem; font-variant-numeric:tabular-nums;
  flex:none; }

/* Caja de año, como la cabecera de cada lona */
.anyo { display:inline-flex; flex-direction:column; align-items:center; gap:.1em;
  border:2px solid currentColor; padding:.35em .7em .3em; }
.anyo b { font-family:'Shoulders',sans-serif; font-weight:600; font-size:clamp(1.5rem,2.6vw,2.3rem);
  line-height:1; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.anyo span { font-family:'BarlowC',sans-serif; font-weight:600; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.anyos { display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Cabecera de página interior ---------- */
.page-head { padding-block:clamp(44px,6vw,84px) clamp(56px,8vw,104px); }
.page-head__meta { display:flex; flex-wrap:wrap; gap:8px 26px; align-items:baseline;
  padding-bottom:18px; margin-bottom:clamp(28px,4.5vw,50px); border-bottom:1px solid var(--line-l); }
.page-head h1 { font-size:clamp(2.6rem,7.5vw,6.2rem); }
.page-head h1 em { font-style:normal; color:var(--oro); }
.page-head__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3.5vw,38px); }
.sec-head { max-width:66ch; margin-bottom:clamp(32px,4.5vw,58px); }
.sec-head .label { display:block; margin-bottom:1.1em; }
.label--rojo { color:var(--rojo); }

/* ---------- La línea de tiempo: el corredor avanza con el scroll ---------- */
.track { position:sticky; top:var(--header-h); z-index:60;
  background:var(--era); color:var(--papel); transition:background-color .55s var(--ease); }
.track__in { position:relative; padding-block:10px 52px; }
.track__line { position:absolute; left:clamp(20px,5vw,52px); right:clamp(20px,5vw,52px); bottom:15px;
  height:2px; background:rgba(242,240,233,.32); }
.track__marks { display:flex; justify-content:space-between; align-items:baseline;
  font-family:'BarlowC',sans-serif; font-weight:600; letter-spacing:.12em; font-size:.72rem; }
.track__mark { opacity:.45; transition:opacity .4s var(--ease); font-variant-numeric:tabular-nums; }
.track__mark[data-on="true"] { opacity:1; }
.track__mark b { display:block; font-family:'Shoulders',sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:.03em; }

/* El corredor: ocho fotogramas, uno a uno, sin interpolar */
.runner { position:absolute; bottom:15px; left:0; width:30px; height:40px; overflow:hidden;
  transform:translateX(-50%); transition:left .18s linear; pointer-events:none; }
.runner i { display:block; width:240px; height:40px; background-color:currentColor;
  -webkit-mask:url('../assets/img/corredor.svg') 0 0/240px 40px no-repeat;
          mask:url('../assets/img/corredor.svg') 0 0/240px 40px no-repeat;
  animation:correr .68s steps(8) infinite; }
@keyframes correr { to { transform:translateX(-240px); } }
@media (prefers-reduced-motion:reduce) { .runner i { animation:none; } }

/* ---------- Paradas de la línea de tiempo ---------- */
.parada { padding-block:clamp(64px,9vw,124px); position:relative; overflow:hidden; }
.parada__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(28px,5vw,68px); align-items:center; }
.parada__fig { position:relative; isolation:isolate; }
.parada__fig img { width:100%; }
/* La lámina: el marco de expo. Fondo papel, filo de tinta, pie de museo. */
.parada__lamina { position:relative; z-index:2; margin:0;
  background:var(--papel); border:2px solid var(--ink);
  padding:clamp(12px,1.5vw,20px) clamp(12px,1.5vw,20px) 0;
  box-shadow:10px 12px 0 rgba(13,13,15,.3);
  transform:rotate(-1.4deg); }
.parada[data-m="1"] .parada__lamina, .parada[data-m="3"] .parada__lamina { transform:rotate(1.3deg); }
.parada__lamina .parada__sede { color:var(--muted); opacity:1; text-align:center;
  border-top:1px solid var(--line);
  margin:clamp(10px,1.2vw,14px) 0 0; padding:10px 4px 12px; }
.parada__anyo { position:absolute; top:-.24em; left:-.08em; z-index:1;
  font-family:'Shoulders',sans-serif; font-weight:900; font-size:clamp(5rem,13vw,11rem);
  line-height:.8; letter-spacing:-.02em; color:transparent;
  -webkit-text-stroke:2px currentColor; opacity:.4; font-variant-numeric:tabular-nums; }
.parada__sede { font-family:'BarlowC',sans-serif; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; font-size:.74rem; }

/* ---------- El televisor de la LACNN ----------
   Marco: mockup de Envato con la pantalla recortada en transparente.
   La emisión va detrás, en un rectángulo redondeado ajustado al bloque
   exterior de la pantalla y ligeramente inclinado. Sin filigranas.   */
.tv { position:relative; }
.tv__marco { position:relative; z-index:3; width:100%; display:block;
  filter:drop-shadow(14px 16px 0 rgba(13,13,15,.34)); }
.tv__pantalla { position:absolute; left:18.432%; top:16.333%; width:52.844%; height:53.521%;
  z-index:1; background:#0b0b0b;
  /* Contorno del área de pantalla del mockup, medido sobre el propio archivo:
     lateral izq -0,77°, der +1,28°, superior +0,45°, inferior -2,63°. El lado
     derecho es 25 px más corto que el izquierdo: esa es la perspectiva real.
     El agujero del PNG está punzado con este mismo polígono. */
  clip-path: polygon(0.89% 8.18%, 1.05% 5.99%, 1.47% 4.15%, 2.15% 2.64%, 3.1% 1.47%, 4.3% 0.64%, 5.77% 0.15%, 7.51% 0.0%, 91.96% 0.84%, 93.7% 1.02%, 95.17% 1.54%, 96.38% 2.4%, 97.34% 3.58%, 98.03% 5.1%, 98.46% 6.96%, 98.63% 9.14%, 100.0% 86.32%, 99.91% 88.51%, 99.54% 90.39%, 98.9% 91.94%, 97.99% 93.17%, 96.81% 94.08%, 95.35% 94.67%, 93.63% 94.94%, 6.43% 100.0%, 4.7% 99.93%, 3.25% 99.51%, 2.06% 98.74%, 1.14% 97.62%, 0.49% 96.14%, 0.11% 94.32%, 0.0% 92.14%); }
.tv__emision { position:absolute; inset:0; }
.tv__emision img { width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .18s linear; }
.tv__emision::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.24) 0 1px, transparent 1px 3px),
             radial-gradient(120% 100% at 45% 50%, transparent 48%, rgba(0,0,0,.6) 100%); }
.tv__nieve { position:absolute; inset:-10%; opacity:0; pointer-events:none; z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  filter:grayscale(1) contrast(2.8) brightness(1.5); }
.tv.is-cambiando .tv__nieve { opacity:.95; }
.tv.is-cambiando .tv__emision img { opacity:.1; }
.tv__ch { position:absolute; top:6%; left:6%; z-index:4;
  font-family:'BarlowC',sans-serif; font-weight:600; letter-spacing:.14em; font-size:.74rem;
  color:#9dfb9d; background:rgba(6,10,6,.62); padding:.32em .7em;
  text-shadow:0 0 8px rgba(157,251,157,.8); }

/* Mando de canales, fuera del aparato */
.tv__panel { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:clamp(16px,2vw,22px); }
.tv__panel { justify-content:flex-end; }
.tv__btn { width:34px; height:34px; border-radius:50%; border:2px solid currentColor;
  background:transparent; color:inherit; font:inherit; font-family:'BarlowC',sans-serif;
  font-weight:600; font-size:.82rem; cursor:pointer; padding:0; font-variant-numeric:tabular-nums;
  transition:background-color .15s, color .15s; }
.tv__btn:hover { background:rgba(242,240,233,.16); }
.tv__btn[aria-pressed="true"] { background:var(--rojo); border-color:var(--rojo); color:#fff; }
.tv__btn--pm { width:46px; height:46px; font-family:'Barlow',sans-serif; font-weight:700;
  font-size:1.5rem; line-height:1; letter-spacing:0; }
.tv__btn--pm:active { background:var(--rojo); border-color:var(--rojo); color:#fff; }
.tv__chnum { margin-right:auto; font-family:'BarlowC',sans-serif; font-weight:600;
  letter-spacing:.18em; font-size:.92rem; opacity:.85; }
.tv__pie { font-family:'BarlowC',sans-serif; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; font-size:.72rem; margin-top:14px; opacity:.6; }

/* ---------- Tarjetas ---------- */
.grid { display:grid; gap:clamp(14px,1.8vw,20px); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.card { background:var(--papel); color:var(--ink); border:2px solid var(--ink); padding:clamp(22px,2.6vw,30px); }
.card--l { background:transparent; color:inherit; border-color:currentColor; }
.card p { color:var(--muted); margin-bottom:0; }
.card--l p { color:rgba(242,240,233,.8); }
.card__icon { display:block; width:44px; height:44px; margin-bottom:14px; }
.card__tag { display:inline-block; font-family:'BarlowC',sans-serif; font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; background:var(--ink); color:var(--papel);
  padding:.28em .7em; margin-bottom:1em; }
.card--l .card__tag { background:var(--papel); color:var(--negro); }

/* ---------- Marcador ---------- */
.score { display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid currentColor; }
.score__c { padding:clamp(20px,2.6vw,30px) 16px clamp(24px,3vw,36px) 0; border-right:1px solid currentColor; }
.score__c + .score__c { padding-left:clamp(18px,2.4vw,32px); }
/* Fila secundaria de cifras, más pequeña */
.score--mini { border-top-width:1px; }
.score--mini .score__n { font-size:clamp(1.7rem,3.4vw,3rem); }
.score--mini .score__c { padding-block:clamp(16px,2vw,24px) clamp(18px,2.2vw,28px); }
.score__c:last-child { border-right:0; }
.score__n { display:block; font-family:'Shoulders',sans-serif; font-weight:800;
  font-size:clamp(3rem,8vw,6.4rem); line-height:.84; font-variant-numeric:tabular-nums; }
.score__t { display:block; margin-top:.6em; }

/* ---------- Cita ---------- */
.pull { font-family:'Shoulders',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:.96; max-width:20ch; margin:0; }
.pull cite { display:block; margin-top:.7em; font-family:'BarlowC',sans-serif; font-weight:600;
  font-size:.78rem; letter-spacing:.16em; text-transform:none; font-style:normal; opacity:.72; }

/* ---------- Hueco de imagen ---------- */
.slot { border:2px dashed currentColor; min-height:220px; display:grid; place-content:center;
  text-align:center; padding:26px; gap:.35em; opacity:.72; }
.slot__t { font-family:'BarlowC',sans-serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.slot small { font-size:.84rem; }

/* ---------- Media ---------- */
.media { aspect-ratio:16/9; background:#000; box-shadow:10px 12px 0 rgba(13,13,15,.28); }
.media iframe { width:100%; height:100%; border:0; display:block; }

/* ---------- Acta (páginas interiores) ---------- */
.acta { border-top:2px solid currentColor; }
.acta__row { display:grid; grid-template-columns:3.4rem minmax(0,14rem) minmax(0,1fr);
  gap:clamp(14px,3vw,34px); align-items:start; padding-block:clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--line); }
.band--verde .acta__row,.band--azul .acta__row,.band--negro .acta__row,.band--rojo .acta__row { border-bottom-color:var(--line-l); }
.acta__n { font-family:'Shoulders',sans-serif; font-weight:800; font-size:1.5rem;
  font-variant-numeric:tabular-nums; color:var(--rojo); line-height:1; padding-top:.1em; }
.band--rojo .acta__n,.band--negro .acta__n,.band--azul .acta__n,.band--verde .acta__n { color:var(--oro); }
.acta__row h3 { margin:0; }
.acta__row p { margin:0; color:var(--muted); }
.band--verde .acta__row p,.band--azul .acta__row p,.band--negro .acta__row p,.band--rojo .acta__row p { color:rgba(242,240,233,.8); }

/* ---------- Formularios ---------- */
.form { display:grid; gap:16px; max-width:620px; }
.field { display:grid; gap:6px; }
.field label { font-family:'BarlowC',sans-serif; font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.8rem; }
.field input,.field textarea { font:inherit; font-size:1rem; color:inherit; padding:.7em .85em;
  background:var(--papel); border:2px solid var(--ink); border-radius:0; }
.field input:focus-visible,.field textarea:focus-visible { outline:3px solid var(--rojo); outline-offset:1px; }
.field textarea { min-height:130px; resize:vertical; }
.field__hint { font-size:.86rem; color:var(--muted); }
.form__legal { font-size:.86rem; color:var(--muted); max-width:620px; }

/* ---------- Aviso de borrador ---------- */
.draft { background:var(--oro); color:#241a02; font-family:'BarlowC',sans-serif; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; text-align:center; padding:.65em 1em; }

/* ---------- Pie ---------- */
.site-footer { background:var(--negro); color:rgba(242,240,233,.68); padding-block:clamp(52px,6vw,80px) 30px; }
.site-footer a { color:rgba(242,240,233,.88); text-decoration:none; }
.site-footer a:hover { color:var(--oro); }
.site-footer h4 { font-family:'BarlowC',sans-serif; font-weight:600; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--oro); margin:0 0 1.1em; }
.footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(26px,4vw,54px); }
.footer__grid ul { list-style:none; margin:0; padding:0; display:grid; gap:.55em; }
.footer__bottom { margin-top:clamp(36px,5vw,56px); padding-top:22px; border-top:1px solid rgba(242,240,233,.18);
  display:flex; flex-wrap:wrap; gap:10px 24px; font-size:.85rem; }
.footer__bottom .sep { opacity:.4; }

/* ---------- Logotipos del centro ----------
   Salvaguarda primero: un logo sin altura acotada se cuela a tamaño
   natural, estira su contenedor y descoloca todo lo que dentro esté
   posicionado en %. Pasó con el del televisor y con el de la cabecera. */
.site-header img, .tv__panel img, .footer__bottom img { max-height:40px; width:auto; }

.brand { min-width:0; }
.brand__logo { height:32px; width:auto; flex:none; }
.pie-logo { height:56px; width:auto; margin-bottom:1.1em; }
.sello { display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); flex-wrap:wrap;
  padding-top:clamp(24px,3.5vw,38px); margin-top:clamp(28px,4vw,46px);
  border-top:1px solid rgba(242,240,233,.18); }
.sello img { height:clamp(40px,4.6vw,58px); width:auto; flex:none; }
.sello p { margin:0; font-family:'BarlowC',sans-serif; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; font-size:.72rem; opacity:.66; max-width:32ch; }
@media (max-width:680px) { .brand__logo { height:26px; } .sello img { height:38px; } }

/* ---------- Botón de menú ---------- */
.nav-toggle { display:none; align-items:center; gap:.5em; margin-left:auto; padding:.45em .85em;
  background:transparent; border:2px solid rgba(242,240,233,.4); color:var(--papel);
  font-family:'BarlowC',sans-serif; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  font-size:.82rem; cursor:pointer; }
.nav-toggle:hover { border-color:var(--papel); }
.nav-toggle__bars { display:grid; gap:3px; }
.nav-toggle__bars i { display:block; width:16px; height:2px; background:currentColor; }

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion:no-preference) {
  .reveal { opacity:0; transform:translateY(20px); }
  .reveal.is-in { opacity:1; transform:none; transition:opacity .75s var(--ease), transform .75s var(--ease); }
  .reveal:nth-child(2).is-in { transition-delay:.08s; }
  .reveal:nth-child(3).is-in { transition-delay:.16s; }
  .reveal:nth-child(4).is-in { transition-delay:.24s; }
}

/* ---------- Utilidades ---------- */
.stack > * + * { margin-top:clamp(30px,4vw,52px); }
.skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--papel); padding:.8em 1.2em; }
.skip:focus { left:0; }
:focus-visible { outline:3px solid var(--rojo); outline-offset:3px; }
.band--rojo :focus-visible,.band--negro :focus-visible { outline-color:var(--oro); }

/* ---------- Responsive ---------- */
@media (max-width:980px) {
  .grid--4 { grid-template-columns:repeat(2,1fr); }
  .parada__grid { grid-template-columns:1fr; }
  .parada__fig { max-width:320px; }
}
@media (max-width:900px) {
  .grid--3 { grid-template-columns:repeat(2,1fr); }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .nav-toggle { display:inline-flex; }
  .brand__sub { display:none; }
  .nav { position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column;
    align-items:stretch; gap:0; background:var(--negro); padding:6px clamp(20px,5vw,52px) 18px; }
  .nav[data-open="true"] { display:flex; }
  .nav a { padding-block:13px; border-bottom:1px solid rgba(242,240,233,.18); font-size:1rem; color:var(--papel); }
  .nav a.btn { margin-top:14px; border-bottom:0; justify-content:center; }
}
@media (max-width:680px) {
  body { font-size:16.5px; }
  /* El marcador de época, reducido a lo esencial: año y ciudad */
  .track__marks { font-size:.62rem; letter-spacing:.06em; }
  .track__mark b { font-size:.86rem; }
  .track__mark span { display:none; }
  .runner { width:28px; height:37px; }
  .runner i { width:224px; height:37px;
    -webkit-mask-size:224px 37px; mask-size:224px 37px; }
  @keyframes correr { to { transform:translateX(-224px); } }
  .grid--2,.grid--3,.grid--4 { grid-template-columns:1fr; }
  .score { grid-template-columns:repeat(2,1fr); }
  .score__c:nth-child(2n) { border-right:0; }
  .score__c:nth-child(odd) { padding-left:0; }
  .acta__row { grid-template-columns:2.6rem 1fr; }
  .acta__row p { grid-column:2; }
  .footer__grid { grid-template-columns:1fr; }
  .vf__row { grid-template-columns:2.2rem 1fr; }
  .vf__btns { grid-column:2; margin-top:.5em; }
  .cut,.cut--rev,.cut--in { clip-path:none; }
}