/* Bitácora 26 — piel v2 (cartel de festival). Hoja única: tokens arriba, nada suelto abajo.
   Referencia medida por DOM el 19-sep-2026 en designbomb.it (Chrome real, 1440×900):
   fondo #141414; paneles crema #F7F6EB de 1408 px a 1440 (16 px de marco), radio 16/30 px, padding 16 px;
   bloques planos lima #CEFF00, azul #4A60FF, rosa #FF3EBA, verde #31A362, todos con texto negro;
   título 132 px itálica extrabold, line-height .9; lineup 112 px mayúsculas ls −3,36 px (−0,03 em), cajas de
   101 px con 10 px de separación; texto 18 px / 1,2 y 24 px / 1,3; cápsulas del marquee 147 px de alto,
   radio 16, padding 16 32 16 16, texto 128 px, 50 px/s; stickers rotados 10°, −10°, 20°, −43°, −75°;
   cursor: `cursor:none` en body + punto de 32 px que llega al destino en ~176 ms; botón TICKET rosa r 8 px
   12/16 px de padding; hover del lineup: color en < 47 ms, salida en ~200 ms. */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: block;   /* precargada y self-hosted: mejor un instante en blanco que «BITÁCORA» en Helvetica */
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-italic-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geistmono-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* paleta plana (designbomb.it, medida) */
  --negro: #141414;
  --crema: #F7F6EB;
  --blanco: #FFFFFF;           /* texto chico sobre azul: crema da 4,38:1 (falla AA por 0,12), blanco 4,77:1 */
  --lima: #CEFF00;
  --azul: #4A60FF;
  --rosa: #FF3EBA;
  --verde: #31A362;
  --tinta: #141414;            /* texto sobre crema (16,1:1), lima (15,8:1), rosa (5,8:1), verde (5,7:1); sobre azul sólo display (3,8:1) */
  --tinta-suave: #5C5B55;      /* meta sobre crema: 6,2:1 */
  --crema-suave: #A8A79E;      /* meta sobre negro: 7,0:1 */
  --gris-pie: #2E2E2C;         /* decorativo del pie, no es texto */
  --error: #B8103F;            /* rosa profundo para errores sobre crema: 6,1:1 (el rosa de marca da 2,9:1) */
  --hair-tinta: rgba(20, 20, 20, .22);
  --hair-crema: rgba(247, 246, 235, .2);

  /* tipografía: Archivo itálica expandida para display, Archivo 400 para texto, Geist Mono para datos */
  --f-texto: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --wdth-display: 125;
  --wght-display: 900;
  --ls-display: -0.03em;       /* designbomb lineup: −3,36 px sobre 112 px */
  --ls-mono: 0.02em;

  /* escala de espacio */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 104px; --s8: 160px;
  /* marco: separación entre paneles y hacia el borde de la ventana (designbomb: 16 px) */
  --marco: 16px;
  /* padding interno de los paneles: manda el VIEWPORT (el panel siempre mide 100vw − 2·marco), por eso vw */
  --pad-panel: clamp(20px, 4.4vw, 64px);
  --radio-panel: 24px;
  --radio-bloque: 16px;
  --radio-boton: 8px;
  --alto-cab: 64px;
  --col-hora: 6.5rem;
  --pxmin: 3.2px;              /* agenda a escala: 1 h = 192 px; 20 min = 64 px = una línea de título + padding */

  /* movimiento */
  --t-rapido: 150ms;
  --t-sticker: 200ms;          /* salida del hover del lineup medida en designbomb (~200 ms) */
  --e-figma: cubic-bezier(.6, 0, .4, 1);
  --e-salida: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;          /* nunca overflow-x:hidden en body: rompe sticky */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cab) + var(--marco));
  -webkit-text-size-adjust: 100%;
  background: var(--negro);
}
html.lenis { scroll-behavior: auto; }   /* con Lenis el suavizado lo hace la librería */
body {
  margin: 0;
  background: var(--negro);
  color: var(--crema);
  font-family: var(--f-texto);
  font-variation-settings: 'wdth' 100;
  font-size: 1.125rem;       /* designbomb: 18 px */
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, dl, dd, figure, fieldset, ol, ul, blockquote { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.panel--azul :focus-visible, .cab :focus-visible, .pie :focus-visible { outline-color: var(--lima); }
::selection { background: var(--lima); color: var(--tinta); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; left: var(--marco); top: -100px; z-index: 50; padding: var(--s2) var(--s3); background: var(--lima); color: var(--tinta); font-family: var(--f-mono); font-size: .875rem; border-radius: var(--radio-boton); }
.saltar:focus { top: var(--s2); }
.solo-movil { display: none; }

.display {
  font-family: var(--f-texto);
  font-style: italic;
  font-weight: 900;
  font-stretch: 125%;
  font-variation-settings: 'wdth' var(--wdth-display), 'wght' var(--wght-display);
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: .9;           /* designbomb: 118,8 / 132 */
  overflow-wrap: anywhere;
}
.mono {
  font-family: var(--f-mono);
  font-style: normal;
  font-weight: 400;
  font-size: .875rem;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ---------- paneles ---------- */
.panel {
  container-type: inline-size;
  position: relative;
  margin: 0 var(--marco) var(--marco);
  padding: var(--pad-panel);
  border-radius: var(--radio-panel);
  background: var(--panel, var(--crema));
  color: var(--tinta);
}
.panel--lima { --panel: var(--lima); }
.panel--azul { --panel: var(--azul); }
.panel--rosa { --panel: var(--rosa); }
.panel--verde { --panel: var(--verde); }
.panel--negro { --panel: var(--negro); color: var(--crema); }

/* enlaces de texto */
.texto-enlace, .que-es a, .llegar a, .faq a, .pie a { border-bottom: 2px solid currentColor; transition: color var(--t-rapido) var(--e-figma), background-color var(--t-rapido) var(--e-figma); }
.que-es a:hover, .llegar a:hover, .faq a:hover { background: var(--tinta); color: var(--crema); }
.pie a:hover { background: var(--lima); color: var(--tinta); }

/* ---------- botones (designbomb TICKET: rosa, r 8, 12/16 px) ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s4);
  border: 2px solid var(--tinta); border-radius: var(--radio-boton);
  color: var(--tinta); background: transparent;
  font-family: var(--f-mono); font-size: .875rem; letter-spacing: var(--ls-mono); text-transform: uppercase;
  transition: background-color var(--t-rapido) var(--e-figma), color var(--t-rapido) var(--e-figma), border-color var(--t-rapido) var(--e-figma), translate var(--t-rapido) var(--e-figma);
}
.boton:hover { background: var(--tinta); color: var(--crema); }
.boton:active { translate: 0 2px; }
.boton--primario { background: var(--rosa); border-color: var(--rosa); color: var(--tinta); }
.boton--primario:hover { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.boton--tinta { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.boton--tinta:hover { background: var(--lima); border-color: var(--lima); color: var(--tinta); }
.boton--chico { min-height: 40px; padding: 0 var(--s3); font-size: .75rem; }
.boton--grande { min-height: 64px; padding: 0 var(--s5); font-size: 1rem; border-radius: 999px; }

/* ---------- cabecera (negra, sobre el marco) ---------- */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--s4);
  height: var(--alto-cab); padding: 0 var(--marco) 0 calc(var(--marco) + var(--s2));
  background: var(--negro); color: var(--crema);
}
.cab__marca { display: inline-flex; align-items: center; gap: var(--s2); font-size: 1.25rem; white-space: nowrap; }
.cab__marca .display { font-size: 1.375rem; letter-spacing: -.02em; }
.cab__marca em { font-style: inherit; color: var(--lima); }
.cab__nav { display: flex; gap: var(--s1); justify-content: center; min-width: 0; }
.cab__nav a, .menu-movil a {
  font-family: var(--f-mono); font-size: .8125rem; letter-spacing: var(--ls-mono); text-transform: uppercase;
  padding: var(--s2) 12px; border-radius: 999px;
  transition: background-color var(--t-rapido) var(--e-figma), color var(--t-rapido) var(--e-figma);
}
.cab__nav a:hover, .menu-movil a:hover { background: var(--lima); color: var(--tinta); }
.cab__nav a.is-activo { color: var(--lima); }
.cab__nav a.is-activo:hover { color: var(--tinta); }
.cab__reloj { display: flex; gap: var(--s2); align-items: center; white-space: nowrap; color: var(--crema-suave); }
.cab__reloj time { color: var(--crema); }
.cab__reloj::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--lima); animation: late 1.2s steps(1) infinite; }
.cab__cta { color: var(--tinta); }
.cab__menu { display: none; width: 44px; height: 44px; place-items: center; align-content: center; gap: 6px; }
.cab__menu-linea { display: block; width: 22px; height: 2px; background: var(--crema); transition: translate var(--t-rapido) var(--e-figma), rotate var(--t-rapido) var(--e-figma); }
.is-menu .cab__menu-linea--1 { translate: 0 4px; rotate: 45deg; }
.is-menu .cab__menu-linea--2 { translate: 0 -4px; rotate: -45deg; }

.menu-movil {
  position: fixed; inset: var(--alto-cab) var(--marco) auto var(--marco); z-index: 39;
  display: none; flex-direction: column;
  padding: var(--s3) var(--s4) var(--s4);
  background: var(--crema); color: var(--tinta); border-radius: var(--radio-panel);
  translate: 0 -8px; opacity: 0; visibility: hidden;
  transition: translate 220ms var(--e-salida), opacity 220ms var(--e-salida), visibility 0s linear 220ms;
}
.menu-movil a { font-size: 1.25rem; padding: var(--s3) var(--s2); border-radius: var(--radio-boton); border-bottom: 1px solid var(--hair-tinta); }
.menu-movil__cta { color: var(--tinta); font-weight: 600; }
.menu-movil__cta::after { content: ' →'; }
.is-menu .menu-movil { translate: 0 0; opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---------- stickers (formas planas rotadas; giran ±10° con el scroll vía --giro) ---------- */
.sticker {
  --rot: 0deg; --giro: 0deg; --fondo: var(--lima); --tinta-st: var(--tinta);
  position: absolute; z-index: 2;
  display: grid; place-items: center; text-align: center;
  width: var(--ancho, 200px); aspect-ratio: 1;
  padding: calc(var(--ancho, 200px) * .22);   /* desde el propio ancho: un % iría contra el contenedor y reventaría la caja */
  background: var(--fondo); color: var(--tinta-st);
  rotate: calc(var(--rot) + var(--giro));
  transition: rotate 80ms linear;
  pointer-events: none;
}
.sticker__txt { display: block; font-size: var(--fs-st, 1rem); line-height: .95; overflow-wrap: normal; }   /* un sticker no parte palabras: su texto se dimensiona desde el contenedor */
.sticker__txt .sticker__grande { display: block; font-size: 2.2em; line-height: .9; }
.sticker__txt small { display: block; font-family: var(--f-mono); font-style: normal; font-weight: 400; font-size: max(.6em, .75rem); letter-spacing: var(--ls-mono); margin-top: .35em; }
.sticker--estrella { clip-path: polygon(50.0% 0.0%, 59.6% 14.3%, 75.0% 6.7%, 76.2% 23.8%, 93.3% 25.0%, 85.7% 40.4%, 100.0% 50.0%, 85.7% 59.6%, 93.3% 75.0%, 76.2% 76.2%, 75.0% 93.3%, 59.6% 85.7%, 50.0% 100.0%, 40.4% 85.7%, 25.0% 93.3%, 23.8% 76.2%, 6.7% 75.0%, 14.3% 59.6%, 0.0% 50.0%, 14.3% 40.4%, 6.7% 25.0%, 23.8% 23.8%, 25.0% 6.7%, 40.4% 14.3%); }
.sticker--explosion { clip-path: polygon(50.0% 0.0%, 56.4% 9.5%, 65.5% 2.4%, 68.6% 13.5%, 79.4% 9.5%, 79.0% 21.0%, 90.5% 20.6%, 86.5% 31.4%, 97.6% 34.5%, 90.5% 43.6%, 100.0% 50.0%, 90.5% 56.4%, 97.6% 65.5%, 86.5% 68.6%, 90.5% 79.4%, 79.0% 79.0%, 79.4% 90.5%, 68.6% 86.5%, 65.5% 97.6%, 56.4% 90.5%, 50.0% 100.0%, 43.6% 90.5%, 34.5% 97.6%, 31.4% 86.5%, 20.6% 90.5%, 21.0% 79.0%, 9.5% 79.4%, 13.5% 68.6%, 2.4% 65.5%, 9.5% 56.4%, 0.0% 50.0%, 9.5% 43.6%, 2.4% 34.5%, 13.5% 31.4%, 9.5% 20.6%, 21.0% 21.0%, 20.6% 9.5%, 31.4% 13.5%, 34.5% 2.4%, 43.6% 9.5%); }
.sticker--capsula { aspect-ratio: auto; width: auto; padding: .55em 1.1em; border-radius: 999px; white-space: nowrap; }
.sticker--lima { --fondo: var(--lima); }
.sticker--rosa { --fondo: var(--rosa); }
.sticker--azul { --fondo: var(--azul); --tinta-st: var(--blanco); }
.sticker--verde { --fondo: var(--verde); }
.sticker--tinta { --fondo: var(--tinta); --tinta-st: var(--crema); }

/* ---------- héroe = cartel ---------- */
.heroe {
  min-height: calc(100svh - var(--alto-cab) - var(--marco));
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--s5);
  padding-block: var(--s4) var(--s5);
}
.heroe__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); color: var(--tinta-suave); }
.heroe__meta span + span::before { content: '·'; margin-right: var(--s4); }
.cartel { position: relative; align-self: center; display: grid; align-content: center; justify-items: center; min-height: clamp(240px, 38cqw, 500px); padding-block: clamp(36px, 7cqw, 96px); }
.cartel::before { content: ''; position: absolute; inset: 0; border-radius: var(--radio-panel); border: 1px dashed var(--hair-tinta); pointer-events: none; }   /* la cinta de pegar del cartel */
.heroe__titulo { position: relative; z-index: 3; text-align: center; }   /* por encima de los stickers: la marca nunca queda tapada */
.heroe__linea { display: block; font-size: min(132px, 12.6cqw); overflow-wrap: normal; word-break: keep-all; }   /* «BITÁCORA» en Archivo itálica wdth 125 wght 900 mide ~6,9 em (medido sobre el h1 real) → 96 cqw / 7,6 */
.heroe__sub { display: block; margin-top: .3em; font-size: clamp(.9375rem, 3.2cqw, 2.25rem); font-style: normal; font-weight: 400; font-variation-settings: 'wdth' 100, 'wght' 400; text-transform: none; letter-spacing: -.01em; line-height: 1.1; }
.js .heroe__titulo { animation: sube 700ms var(--e-salida) both; }
.js .heroe__abajo { animation: sube 700ms var(--e-salida) 260ms both; }
.js .cartel .sticker { animation: pega 500ms var(--e-salida) both; animation-delay: calc(120ms + var(--i, 0) * 90ms); }
@keyframes sube { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes pega { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }

/* stickers del cartel: tamaños y tipografía desde el ancho del CONTENEDOR (cqw); posiciones en % para que
   nunca salgan del cartel. Ángulos medidos en designbomb: 10°, −10°, 20°, −43°. */
.cartel .sticker { --fs-st: clamp(.75rem, 1.75cqw, 1.5rem); }
.sticker--fecha { --ancho: clamp(96px, 19cqw, 250px); --rot: -10deg; right: 2%; top: 0; }
.sticker--edicion { --ancho: clamp(84px, 15cqw, 200px); --rot: 20deg; left: 2%; bottom: 0; }
.sticker--ciudad { --rot: 10deg; left: 4%; top: 6%; --fs-st: clamp(.8125rem, 2cqw, 1.75rem); }
.sticker--cupos { --rot: -6deg; right: 4%; bottom: 8%; --fs-st: clamp(.75rem, 1.6cqw, 1.25rem); }

.heroe__abajo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 52%); gap: var(--s5) var(--s6); align-items: end; }
.heroe__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.heroe__datos dt, .llegar dt, .pie__rotulo { color: var(--tinta-suave); margin-bottom: var(--s2); }
.pie__rotulo { color: var(--crema-suave); }
.heroe__datos dd, .llegar dd { font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }

/* cuenta regresiva como cápsula negra */
.cuenta { container-type: inline-size; display: grid; gap: var(--s3); justify-items: start; padding: var(--s4); background: var(--tinta); color: var(--crema); border-radius: var(--radio-panel); }
.cuenta__rotulo { color: var(--crema-suave); }
.cuenta__grupos { display: flex; gap: clamp(8px, 3cqw, 28px); font-size: clamp(2.25rem, 13cqw, 6rem); line-height: 1; letter-spacing: -.02em; text-transform: none; color: var(--lima); }
.cuenta__grupo { display: grid; justify-items: start; }
.cuenta__num { display: inline-flex; white-space: nowrap; }
.cuenta__unidad { font-size: .75rem; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--crema-suave); margin-top: var(--s2); }
.cuenta__sinjs { font-size: 1rem; color: var(--crema-suave); }
.js .cuenta__sinjs { display: none; }
html:not(.js) .cuenta__grupos { display: none; }   /* sin JS los odómetros no corren: queda la fecha impresa */
html:not(.js) .cab__menu, html:not(.js) .cinta__pausa { display: none; }   /* controles que sólo hacen algo con JS */
.cuenta.is-abierto .cuenta__grupos { display: none; }
.cuenta.is-abierto .cuenta__sinjs { display: block; color: var(--lima); }

/* odómetro: columna 0–9 que rueda; la caja recorta A PROPÓSITO en Y */
.odo { display: inline-block; height: 1em; overflow: hidden; line-height: 1; vertical-align: top; }
.odo__rollo { display: block; translate: 0 calc(var(--d, 0) * -1em); transition: translate 420ms var(--e-salida); }
.odo__rollo span { display: block; height: 1em; }

/* ---------- cinta de temas en cápsulas (designbomb: 147 px, r 16, pad 16/32, 50 px/s) ---------- */
.cinta { position: relative; display: flex; align-items: center; overflow: hidden; margin: 0 0 var(--marco); padding: var(--s1) 0; }
.cinta__pista { display: flex; flex: 1; min-width: 0; will-change: translate; }
.cinta__grupo { display: flex; flex-shrink: 0; gap: var(--marco); padding-right: var(--marco); white-space: nowrap; }
.cinta__grupo span {
  display: block; padding: .18em .4em .2em .3em; border-radius: var(--radio-bloque);
  /* banda a sangre: manda el viewport, por eso vw */
  font-size: clamp(2.25rem, 6.2vw, 5.5rem);
  background: var(--lima); color: var(--tinta);
}
.cinta__grupo span:nth-child(4n+2) { background: var(--azul); color: var(--blanco); }
.cinta__grupo span:nth-child(4n+3) { background: var(--rosa); }
.cinta__grupo span:nth-child(4n+4) { background: var(--crema); }
.cinta__pausa { position: absolute; right: var(--marco); top: 50%; translate: 0 -50%; z-index: 1; min-height: 40px; padding: 0 var(--s3); border-radius: 999px; background: var(--negro); color: var(--crema); border: 2px solid var(--crema); transition: background-color var(--t-rapido) var(--e-figma), color var(--t-rapido) var(--e-figma); }
.cinta__pausa:hover { background: var(--crema); color: var(--tinta); }
.cinta__pausa[aria-pressed="true"] { background: var(--lima); border-color: var(--lima); color: var(--tinta); }
.cinta__pausa[aria-pressed="true"]:hover { background: var(--crema); border-color: var(--crema); }

/* ---------- secciones ---------- */
.seccion__cab { display: grid; grid-template-columns: auto 1fr; gap: var(--s3) var(--s4); align-items: start; margin-bottom: var(--s6); }
.seccion__num { display: inline-grid; place-items: center; min-width: 2.6em; padding: .45em .6em; border-radius: 999px; background: var(--tinta); color: var(--crema); margin-top: .35em; }
.panel--azul .seccion__num { background: var(--crema); color: var(--tinta); }
.seccion__titulo { font-size: clamp(2.75rem, 9.2cqw, 8.25rem); }   /* 132 px a 1440 */
.seccion__bajada { grid-column: 2; max-width: 46ch; color: var(--tinta-suave); font-size: 1.25rem; line-height: 1.3; }   /* designbomb: 24 px / 1,3 */
.panel--azul .seccion__titulo { color: var(--blanco); }   /* blanco puro: 4,77:1 sobre azul (el crema daba 4,39) */
.panel--azul .seccion__bajada { color: var(--blanco); }
.panel--lima .seccion__bajada, .panel--verde .seccion__bajada, .panel--rosa .seccion__bajada { color: var(--tinta); }

/* qué es */
.que-es__texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4) var(--s6); align-items: start; }
.que-es__grande { grid-row: 1 / 3; font-size: clamp(1.5rem, 2.8cqw, 2.5rem); line-height: 1.15; letter-spacing: -.015em; max-width: 24ch; }
.que-es__texto p:not(.que-es__grande) { max-width: 58ch; }

/* ---------- agenda (sobre lima, filas en tinta) ---------- */
.agenda__dia { position: relative; }
.agenda__dia + .agenda__dia { margin-top: var(--s6); }
.dia__cab {
  position: sticky; top: var(--alto-cab); z-index: 5;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  padding: var(--s3) 0; background: var(--panel); border-bottom: 2px solid var(--tinta);
}
.dia__titulo { font-size: clamp(1.75rem, 4cqw, 3rem); }
.dia__titulo span { font-style: normal; font-weight: 400; font-variation-settings: 'wdth' 100, 'wght' 400; text-transform: none; letter-spacing: 0; font-size: .5em; margin-left: .3em; }
.dia__ahora { display: flex; gap: var(--s2); align-items: baseline; white-space: nowrap; }
.dia__ahora-rotulo { color: var(--tinta); }
.dia__ahora-rotulo::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta); margin-right: var(--s2); vertical-align: 0; }
.dia__ahora-hora { font-size: 1rem; }
.dia__ahora.is-vivo .dia__ahora-rotulo::before { animation: late 1.2s steps(1) infinite; }
@keyframes late { 50% { opacity: .25; } }

.tramos { position: relative; }
.tramo {
  position: relative;
  display: grid; grid-template-columns: var(--col-hora) minmax(0, 1fr); gap: 0 var(--s4);
  min-height: calc(var(--dur) * var(--pxmin));
  border-bottom: 1px solid var(--hair-tinta);
  padding: calc(var(--s3) - 1px) 0;   /* 20 min = 64 px: 32 de línea + 30 de aire + 1 de borde */
  transition: background-color var(--t-rapido) var(--e-figma), color var(--t-rapido) var(--e-figma);
}
/* la fila no es un enlace: el hover sólo la señala (hairline de tinta), sin invertir colores ni prometer clic */
.tramo:not(.tramo--pausa):hover { box-shadow: inset 0 -2px 0 var(--tinta); }
.tramo--doble { grid-template-columns: var(--col-hora) minmax(0, 1fr) minmax(0, 1fr); }
.tramo--doble:hover { background: transparent; color: inherit; }
.tramo--doble:hover .mono, .tramo--doble:hover .tramo__orador { color: var(--tinta-suave); }
.tramo--doble:hover .tramo__hora { color: var(--tinta); background: var(--panel); }
.tramo--pausa { color: var(--tinta-suave); background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--hair-tinta) 7px 8px); }
.tramo--pausa .tramo__titulo { font-size: 1rem; font-weight: 400; padding-top: .2em; }
.tramo__hora { font-size: 1rem; color: var(--tinta); padding-top: .35em; position: relative; z-index: 5; }   /* por encima de la línea «ahora» (z 4): la línea pasa por detrás de la hora, nunca la tacha */
.tramo__hora { background: var(--panel); padding-right: .35em; align-self: start; }   /* la <time> es la propia celda: fondo opaco y ancho al contenido */
.tramo__cuerpo { min-width: 0; display: grid; align-content: start; gap: var(--s1); }
.tramo__titulo { font-size: clamp(1.25rem, 2cqw, 1.75rem); line-height: 1.15; letter-spacing: -.015em; font-weight: 600; font-variation-settings: 'wdth' 100, 'wght' 600; overflow-wrap: anywhere; }
.tramo__orador { color: var(--tinta-suave); font-size: 1rem; transition: color var(--t-rapido) var(--e-figma); }
.tramo__meta { color: var(--tinta-suave); margin-top: var(--s1); transition: color var(--t-rapido) var(--e-figma); }
.tramo__cuerpo--col { gap: var(--s3); }
.tramo__sub { min-height: calc(var(--dur) * var(--pxmin)); padding: var(--s2) var(--s3); margin: calc(-1 * var(--s2)) calc(-1 * var(--s3)); border-radius: var(--radio-boton); display: grid; align-content: start; gap: var(--s1); transition: background-color var(--t-rapido) var(--e-figma), color var(--t-rapido) var(--e-figma); }
.tramo__sub + .tramo__sub { margin-top: 0; }
.tramo__cuerpo--taller { padding: var(--s3); margin: calc(-1 * var(--s2)) 0 0; background: var(--crema); border-radius: var(--radio-bloque); transition: background-color var(--t-rapido) var(--e-figma), color var(--t-rapido) var(--e-figma); }
.tramo__sub:hover, .tramo__cuerpo--taller:hover { background: var(--tinta); color: var(--panel); }
.tramo__sub:hover .mono, .tramo__sub:hover .tramo__orador, .tramo__cuerpo--taller:hover .mono, .tramo__cuerpo--taller:hover .tramo__orador { color: var(--panel); }

/* escritorio: título · orador · meta en columnas, así una fila de 20 min entra en su alto a escala */
@media (min-width: 901px) {
  .tramo:not(.tramo--doble) { grid-template-columns: var(--col-hora) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .tramo:not(.tramo--doble) .tramo__cuerpo { display: contents; }
  .tramo:not(.tramo--doble) .tramo__orador { padding-top: .2em; }
  .tramo:not(.tramo--doble) .tramo__meta { margin-top: 0; padding-top: .5em; }
  .tramo--pausa .tramo__meta { grid-column: 3 / -1; }
}

/* marcador «ahora»: lo crea el JS; sin JS no existe. La línea vive en los márgenes (columna de horas y padding
   derecho del panel, fuera de la columna de texto) para no tachar las filas; la fila que lo contiene lleva su
   hora subrayada. El tramo derecho mide --pad-panel: la línea muere en el borde del panel. */
.ahora {
  position: absolute; left: 0; right: 0; top: 0; z-index: 4; pointer-events: none;
  height: 0;
  translate: 0 var(--y, 0px);
  transition: translate 240ms var(--e-salida);
}
.ahora::before, .ahora::after { content: ''; position: absolute; top: 0; height: 3px; background: var(--tinta); }
.ahora::before { left: 0; width: var(--col-hora); }
.ahora::after { right: calc(-1 * var(--pad-panel)); width: var(--pad-panel); }
.tramo.is-ahora .tramo__hora { text-decoration: underline 3px; text-underline-offset: 4px; }
.ahora__hora { position: absolute; right: 0; top: -1.7em; font-size: .75rem; padding: 3px 8px; border-radius: 999px; background: var(--tinta); color: var(--lima); }

/* ---------- oradores = lineup tipográfico (designbomb: 112 px, centrado, cajas de 101 px + 10 px) ---------- */
.lineup { display: grid; gap: 10px; padding: var(--s4) var(--s3); background: var(--crema); color: var(--tinta); border-radius: var(--radio-bloque); }
.lineup__item { position: relative; display: grid; justify-items: center; min-width: 0; }
.lineup__nombre {
  --lleno: var(--lima); --sobre: var(--tinta);
  position: relative; z-index: 1;
  display: block; max-width: 100%; padding: .04em .14em .02em; border-radius: var(--radio-bloque);
  font-size: min(112px, 7cqw);   /* «Valentina Quiroga» mide 12,83 em a wdth 125 (medido) → 92 cqw / 12,9; 112 px recién a partir de 1.790 px de ancho */
  text-align: center; color: var(--tinta); background: transparent;
  transition: background-color var(--t-sticker) var(--e-figma), color var(--t-sticker) var(--e-figma);
}
.lineup__item:nth-child(4n+2) .lineup__nombre { --lleno: var(--azul); --sobre: var(--blanco); }
.lineup__item:nth-child(4n+3) .lineup__nombre { --lleno: var(--rosa); }
.lineup__item:nth-child(4n+4) .lineup__nombre { --lleno: var(--verde); }
.lineup__nombre:hover, .lineup__nombre[aria-expanded="true"], .lineup__nombre:focus-visible { background: var(--lleno); color: var(--sobre); transition-duration: 40ms; }   /* designbomb: entra en < 47 ms, sale en ~200 */
.lineup__nombre:focus-visible { outline-color: var(--tinta); outline-offset: 2px; }   /* el foco pinta el nombre de lima: el anillo va en tinta para verse sobre lima y sobre crema */
.lineup__sticker {
  --ancho: clamp(168px, 20cqw, 260px); --fs-st: clamp(.875rem, 1.2cqw, 1rem);
  right: 6%; top: 50%; margin-top: calc(var(--ancho) * -.5);
  opacity: 0; scale: .6; visibility: hidden;
  transition: opacity var(--t-sticker) var(--e-salida), scale var(--t-sticker) var(--e-salida), rotate 80ms linear, visibility 0s linear var(--t-sticker);
  z-index: 3;
}
.lineup__item:nth-child(even) .lineup__sticker { right: auto; left: 6%; }
.lineup__item:hover .lineup__sticker, .lineup__item:has(.lineup__nombre[aria-expanded="true"]) .lineup__sticker, .lineup__item:has(.lineup__nombre:focus-visible) .lineup__sticker {   /* el botón vive dentro del h3: no es hermano del sticker */ opacity: 1; scale: 1; visibility: visible; transition-delay: 0s; }
.lineup__h { display: contents; }   /* el h3 conserva la semántica; la caja la da el botón */
/* el sticker lleva un color distinto del relleno del nombre y una rotación alterna (designbomb: 10°, −10°, 20°) */
.lineup__item:nth-child(4n+1) .lineup__sticker { --fondo: var(--rosa); --rot: -10deg; }
.lineup__item:nth-child(4n+2) .lineup__sticker { --fondo: var(--lima); --rot: 10deg; }
.lineup__item:nth-child(4n+3) .lineup__sticker { --fondo: var(--verde); --rot: -8deg; }
.lineup__item:nth-child(4n+4) .lineup__sticker { --fondo: var(--azul); --tinta-st: var(--blanco); --rot: 20deg; }
.lineup__mono { font-size: 2.4em; line-height: .9; }
.lineup__rol { display: block; font-size: max(1em, .875rem); line-height: 1.15; margin-top: .4em; font-weight: 600; }
.lineup__empresa { display: block; font-size: max(.7em, .75rem); margin-top: .3em; }
.lineup__charla { display: block; font-size: max(.85em, .8125rem); line-height: 1.15; margin-top: .4em; font-style: italic; }
html:not(.js) .lineup__sticker { position: static; opacity: 1; scale: 1; visibility: visible; rotate: 0deg; width: auto; aspect-ratio: auto; clip-path: none; padding: var(--s2) 0 var(--s4); background: transparent; color: var(--tinta); }   /* sin JS: la ficha se lee debajo del nombre */
html:not(.js) .lineup__nombre { pointer-events: none; }

/* ---------- lugar (verde) ---------- */
.lugar__cuerpo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.plano { display: grid; gap: var(--s2); min-width: 0; }
.plano__svg { width: 100%; height: auto; background: var(--crema); border-radius: var(--radio-bloque); }
.plano__calle line { stroke: var(--tinta-suave); stroke-width: 1; stroke-dasharray: 4 4; }
.plano__sala rect { fill: var(--crema); stroke: var(--tinta); stroke-width: 1.5; rx: 8; }
.plano__sala--nave rect { fill: var(--tinta); }
.plano__sala--nave text { fill: var(--crema); }
.plano__sala--nave .plano__txt { fill: var(--crema); }
.plano__nom { font-family: var(--f-texto); font-style: italic; font-weight: 900; font-variation-settings: 'wdth' 125, 'wght' 900; text-transform: uppercase; font-size: 20px; letter-spacing: -.02em; fill: var(--tinta); }
.plano__nom--g { font-size: 34px; }
.plano__txt { font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .02em; fill: var(--tinta-suave); }
.plano__acceso rect { fill: var(--rosa); rx: 4; }
.plano__acceso text { fill: var(--tinta); }
.plano figcaption { color: var(--tinta); }
.llegar { display: grid; gap: var(--s4); }
.llegar div { padding-top: var(--s3); border-top: 1px solid var(--hair-tinta); }
.panel--verde .llegar dt { color: var(--tinta); }

/* ---------- entradas: tres cápsulas rosas gigantes (una por fila; en móvil, bloques redondeados) ---------- */
.tarifas { display: grid; gap: var(--marco); }
.tarifa {
  container-type: inline-size; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre precio" "corte boton" "detalle boton";
  align-items: center; column-gap: var(--s5); row-gap: var(--s2);
  padding: var(--s5) clamp(40px, 6vw, 96px);   /* la cápsula mide 100vw − marcos: sus extremos redondos crecen con el viewport */
  border-radius: 999px; background: var(--rosa); color: var(--tinta);
}
.tarifa__nombre { grid-area: nombre; overflow-wrap: normal; font-size: min(5rem, calc((100cqw - 340px) / 7.9)); }   /* «ESTUDIANTE» mide 7,8 em a wdth 125; 340 px = precio + gap */
.tarifa__precio { grid-area: precio; font-size: clamp(2rem, 5.5cqw, 3.5rem); line-height: 1; letter-spacing: -.03em; text-transform: none; white-space: nowrap; justify-self: end; }
.tarifa__moneda { font-size: .5em; vertical-align: .4em; }
.tarifa__corte { grid-area: corte; justify-self: start; padding: .35em .8em; border-radius: 999px; background: var(--tinta); color: var(--crema); }
.tarifa__detalle { grid-area: detalle; font-size: 1rem; max-width: 40ch; }
.tarifa .boton { grid-area: boton; justify-self: end; }
.tarifa .boton--primario { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }
.tarifa .boton--primario:hover { background: var(--crema); border-color: var(--crema); color: var(--tinta); }
.tarifa .boton:not(.boton--primario):hover { background: var(--tinta); color: var(--crema); }
.entradas__nota { margin-top: var(--s4); color: var(--tinta-suave); }

/* ---------- preguntas ---------- */
.faq { display: grid; gap: 0; max-width: 72ch; margin-left: auto; }
.faq__item { border-top: 1px solid var(--hair-tinta); }
.faq__item:last-child { border-bottom: 1px solid var(--hair-tinta); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  list-style: none; cursor: pointer; padding: var(--s3) var(--s3); margin: var(--s1) calc(-1 * var(--s3)); border-radius: var(--radio-bloque);
  font-size: 1.375rem; font-weight: 600; font-variation-settings: 'wdth' 100, 'wght' 600; line-height: 1.2;
  transition: background-color var(--t-rapido) var(--e-figma), color var(--t-rapido) var(--e-figma);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; font-family: var(--f-mono); font-size: 1.75rem; line-height: 1; flex-shrink: 0; transition: rotate var(--t-rapido) var(--e-figma); }
.faq__item[open] summary::after { rotate: 45deg; }
.faq__item summary:hover { background: var(--tinta); color: var(--crema); }
.faq__item p { padding: var(--s2) 0 var(--s4); color: var(--tinta-suave); max-width: 62ch; }

/* ---------- inscripción (sobre crema) ---------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s5); max-width: 880px; margin-left: auto; }
.form__campo { display: grid; gap: var(--s2); min-width: 0; align-content: start; }
.form__campo > label, .form__fieldset legend { font-family: var(--f-mono); font-size: .875rem; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--tinta-suave); }
.form__opcional { text-transform: none; letter-spacing: 0; }
.form__campo input:not([type="radio"]), .form__campo select {
  width: 100%; min-height: 52px; padding: var(--s2) 0; background: transparent; border: 0; border-bottom: 2px solid var(--tinta);
  border-radius: 0; font-size: 1.25rem; color: var(--tinta); transition: border-color var(--t-rapido) var(--e-figma);
}
.form__campo input::placeholder { color: color-mix(in srgb, var(--tinta-suave) 60%, var(--crema)); }
.form__campo input:focus, .form__campo select:focus { border-bottom-color: var(--azul); }
.form__campo select { appearance: none; padding-right: var(--s5); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23141414' stroke-width='2'/%3E%3C/svg%3E") no-repeat right var(--s2) center; cursor: pointer; }
.form__campo select option { background: var(--crema); color: var(--tinta); }
.form__campo.is-error input, .form__campo.is-error select { border-bottom-color: var(--error); }
.form__error { color: var(--error); min-height: 1.2em; text-transform: none; letter-spacing: 0; }
.form__error:empty { display: none; }
.form__fieldset { grid-column: 1 / -1; }
.form__fieldset legend { margin-bottom: var(--s2); }
.form__radios { display: flex; flex-wrap: wrap; gap: var(--s2); }
.radio { position: relative; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3) var(--s2) var(--s2); border: 2px solid var(--tinta); border-radius: 999px; cursor: pointer; min-width: 0; transition: background-color var(--t-rapido) var(--e-figma), color var(--t-rapido) var(--e-figma); }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio__caja { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--tinta); transition: background-color var(--t-rapido) var(--e-figma), border-color var(--t-rapido) var(--e-figma); }
.radio input:checked + .radio__caja { background: var(--rosa); border-color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }
.radio input:focus-visible + .radio__caja { outline: 3px solid var(--azul); outline-offset: 3px; }
.radio__txt { display: flex; gap: var(--s2); align-items: baseline; font-size: 1rem; min-width: 0; }
.radio__txt .mono { text-transform: none; }
.radio:hover { background: var(--tinta); color: var(--crema); }
.radio:hover .radio__caja { border-color: var(--crema); }
.radio:has(input:checked) { background: var(--rosa); }
.radio:has(input:checked):hover { background: var(--tinta); }
.form__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__general { grid-column: 1 / -1; color: var(--error); text-transform: none; letter-spacing: 0; }
.form__general:empty { display: none; }
.form .boton--grande { grid-column: 1 / -1; justify-self: start; }
.form .boton--grande[aria-busy="true"] { opacity: .6; pointer-events: none; }
.form__pie { grid-column: 1 / -1; color: var(--tinta-suave); font-size: .9375rem; margin-top: calc(-1 * var(--s4)); }
.listo[hidden] { display: none; }   /* display:grid le ganaba al atributo hidden: el panel «listo» se veía sin enviar */
.listo { max-width: 880px; margin-left: auto; display: grid; gap: var(--s3); justify-items: start; padding: var(--s5); border-radius: var(--radio-panel); background: var(--tinta); color: var(--crema); }
.listo__titulo { font-size: clamp(2.5rem, 7cqw, 6rem); color: var(--lima); }
.listo__id { font-size: 1.25rem; display: flex; gap: var(--s3); align-items: baseline; }
.listo__id span { color: var(--crema-suave); font-size: .875rem; }
.listo__id strong { font-weight: 500; color: var(--lima); }
.listo__texto { max-width: 52ch; color: var(--crema-suave); }
.listo .boton { border-color: var(--crema); color: var(--crema); }
.listo .boton:hover { background: var(--lima); border-color: var(--lima); color: var(--tinta); }

/* ---------- pie (negro, fuera de los paneles) ---------- */
.pie { container-type: inline-size; padding: var(--s6) calc(var(--marco) + var(--s2)) var(--s4); color: var(--crema); }
.pie__grande::before { content: attr(data-txt); }   /* decorativo: va por ::before para que no cuente como texto */
.pie__grande { font-size: min(21rem, 22cqw); line-height: .8; color: var(--gris-pie); margin-bottom: var(--s6); overflow-wrap: anywhere; }   /* «BITÁCORA 26» mide 4,26 em a wdth 125 (medido) → 94 cqw / 4,3 */
.pie__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hair-crema); font-size: 1rem; line-height: 1.7; }
.pie__cols p { overflow-wrap: anywhere; }
.pie__fin { margin-top: var(--s6); color: var(--crema-suave); text-transform: none; letter-spacing: 0; }
.pie__pronto { color: var(--crema-suave); border-bottom: 1px dashed var(--hair-crema); cursor: default; }   /* redes y legales aún sin destino: no son enlaces */

/* ---------- cursor: punto lima de 32 px con retardo (designbomb oculta el nativo con cursor:none) ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%;
  background: var(--lima); outline: 2px solid var(--tinta); outline-offset: -2px;   /* el anillo lo separa de la agenda lima */
  translate: var(--x, -100px) var(--y, -100px);
  opacity: 0; scale: 1;
  transition: opacity var(--t-rapido) var(--e-figma), scale var(--t-rapido) var(--e-figma), background-color var(--t-rapido) var(--e-figma);
}
html.has-cursor .cursor { opacity: 1; }
html.has-cursor .cursor.is-link { scale: 1.75; }
html.has-cursor .cursor.is-oculto { opacity: 0; }
/* el nativo se oculta sólo cuando el punto está activo; en campos de texto y selects vuelve (I-beam y flecha) */
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor summary, html.has-cursor label { cursor: none; }
html.has-cursor input, html.has-cursor select, html.has-cursor textarea { cursor: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .cab__nav a { padding: var(--s2) 8px; }
  .que-es__texto { grid-template-columns: 1fr; }
  .que-es__grande { grid-row: auto; max-width: 30ch; margin-bottom: var(--s3); }
}
@media (max-width: 900px) {
  :root { --col-hora: 4.5rem; }
  .cab { grid-template-columns: auto 1fr auto auto; }
  .cab__nav { display: none; }
  .cab__menu { display: grid; }
  .menu-movil { display: flex; }
  html:not(.js) .menu-movil { position: static; margin: 0 var(--marco) var(--marco); translate: none; opacity: 1; visibility: visible; transition: none; }   /* sin JS: lista simple bajo la cabecera */
  .heroe__abajo { grid-template-columns: 1fr; }
  .lugar__cuerpo { grid-template-columns: 1fr; }
  .tramo--doble { grid-template-columns: var(--col-hora) minmax(0, 1fr); }
  .tramo__cuerpo--taller { grid-column: 2; margin-top: var(--s3); }
  .form, .listo, .faq { margin-left: 0; }
  .tarifa { border-radius: var(--radio-panel); padding: var(--s4); grid-template-columns: minmax(0, 1fr); grid-template-areas: "nombre" "precio" "corte" "detalle" "boton"; justify-items: start; }
  .tarifa__nombre { font-size: min(4rem, 12.5cqw); }
  .tarifa__precio, .tarifa .boton { justify-self: start; }
  .pie__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lineup__sticker { right: 0; }
  .lineup__item:nth-child(even) .lineup__sticker { left: 0; }
}
@media (max-width: 640px) {
  :root { --pxmin: 3px; --alto-cab: 56px; --col-hora: 3.75rem; --radio-panel: 16px; --marco: 10px; }   /* en móvil la escala es piso: una fila de 20 min (60 px) crece si sus tres líneas no entran */
  .solo-movil { display: inline; }
  .cab { gap: var(--s3); }
  .cab__marca .display { font-size: 1.125rem; }
  .cab__lugar, .cab__cta { display: none; }
  .heroe__meta { gap: var(--s1) var(--s3); }
  .heroe__meta span + span::before { content: none; }
  .heroe { gap: var(--s4); padding-bottom: var(--s4); }
  .cartel { min-height: 0; padding-block: 88px 96px; }
  .cartel .sticker { --fs-st: .75rem; }
  .sticker--fecha { --ancho: 112px; right: 0; top: 0; }
  .sticker--edicion { --ancho: 96px; left: 0; bottom: 0; }
  .sticker--ciudad { --fs-st: .875rem; top: 12px; left: 8px; }
  .sticker--cupos { --fs-st: .75rem; bottom: 20px; right: 4px; }
  .heroe__linea { font-size: 12.4cqw; }
  .heroe__datos { grid-template-columns: 1fr; gap: var(--s3); }
  .cuenta { padding: var(--s3); border-radius: var(--radio-panel); }
  .cuenta__grupos { gap: 10px; }
  .seccion__cab { grid-template-columns: 1fr; gap: var(--s2); margin-bottom: var(--s5); }
  .seccion__num { margin-top: 0; justify-self: start; }
  .seccion__bajada { grid-column: 1; font-size: 1.125rem; }
  .dia__cab { flex-wrap: wrap; }
  .lineup { padding: var(--s3) var(--s2); gap: 6px; }
  .lineup__nombre { font-size: 6.9cqw; }   /* 12,83 em × 6,9 % = 88,5 % del panel: entra con el padding del lineup */
  .lineup__sticker { --ancho: 150px; --fs-st: .75rem; }
  .lineup__mono { font-size: 2em; }
  .form { grid-template-columns: 1fr; gap: var(--s4); }
  .form__radios { flex-direction: column; align-items: stretch; }
  .form .boton--grande { justify-self: stretch; }
  .form__pie { margin-top: 0; }
  .cinta__pausa { right: var(--marco); min-height: 36px; font-size: .75rem; }
  .pie__cols { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .cab__marca .display { display: none; }
  .sticker--fecha { --ancho: 96px; }
  .sticker--edicion { --ancho: 84px; }
}
@media (pointer: coarse) {
  .cursor { display: none; }
}

/* ---------- movimiento reducido: sin Lenis, sin cursor, stickers quietos, cinta quieta ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
  .odo__rollo { transition: none; }
  .ahora { transition: none; }
  .cinta__pista { translate: 0 !important; }
  .sticker { --giro: 0deg !important; }
  .cursor { display: none; }
  html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor summary, html.has-cursor label { cursor: auto; }
}
html:not(.js) .cab__reloj { display: none; }   /* sin JS no hay reloj: mejor nada que «--:--:--» */
.tramo--pausa .tramo__hora { background: transparent; }   /* sobre el rayado no hay placa: la pausa es de 20 min y la línea ya se ve como subrayado */