/* =============================================================
   EL COLISEO by Marta García · WEB03
   Concepto: ARENA EDITORIAL — marca unificada, riel visual de
   actividades, Marta protagonista, Visítanos con fachada real.
   ============================================================= */

/* ---------- 01 · TOKENS ------------------------------------ */

:root {
  --black: #090909;
  --graphite: #151515;
  --gold: #c89d54;
  --gold-light: #e2be7a;
  --gold-ink: #6b4e1e;          /* oro legible sobre fondo claro */
  --ivory: #f4efe6;
  --paper: #fbf8f2;
  --ink: #14120f;

  --ivory-strong: rgba(244, 239, 230, .92);
  --ivory-soft: rgba(244, 239, 230, .72);
  --ivory-mute: rgba(244, 239, 230, .55);
  --ink-soft: rgba(20, 18, 15, .74);
  --ink-mute: rgba(20, 18, 15, .55);

  --rule-dark: rgba(244, 239, 230, .16);
  --rule-light: rgba(20, 18, 15, .16);
  --rule-gold: rgba(200, 157, 84, .42);

  --font-display: "Bahnschrift Condensed", "Bahnschrift SemiCondensed",
    "HelveticaNeue-CondensedBold", "Helvetica Neue Condensed",
    "Roboto Condensed", "Arial Narrow", Impact, sans-serif;
  --font-text: "Corbel", "Optima", "Gill Sans MT", "Segoe UI",
    "Helvetica Neue", sans-serif;
  /* La marca NO se compone con fuentes: vive vectorizada en
     assets/brand/*.svg. Aqui no queda ninguna --font-word ni --font-sig
     porque el sitio no puede depender de las fuentes del visitante. */

  --t-hero: clamp(2.4rem, min(7vw, 10svh), 5.6rem);
  --t-scene: clamp(2.2rem, 5.6vw, 5rem);
  --t-index: clamp(1.75rem, 4.4vw, 3.9rem);

  /* ═══ SUELO TIPOGRÁFICO DEL PRODUCTO PÚBLICO (gate §9.5) ═══════════════
     `--t-lead` es el cuerpo del párrafo de referencia —«Fuerza, capacidad,
     técnica y recuperación…»— y el gate lo declara el MENOR tamaño visible
     de toda la web pública. No se toca y no se baja: bajarlo para que el
     resto cumpla sería cumplir el contrato al revés.

     `--t-min` es ese mismo valor con otro nombre, y ese otro nombre es el
     que usan las etiquetas, los botones, la navegación, el pie y las
     leyendas. Así el suelo es UNA declaración: si mañana cambia la escala,
     cambia con ella todo lo que se apoyaba en él, y no queda un `.62rem`
     olvidado en la línea 254 rompiendo el contrato en silencio.

     La jerarquía ya no la sostiene el tamaño hacia abajo —no hay abajo—:
     la sostienen el peso, el color, el tracking y la escala hacia arriba. */
  --t-lead: clamp(1.05rem, 1.5vw, 1.4rem);
  --t-min: var(--t-lead);
  --t-body: var(--t-min);
  --t-label: var(--t-min);

  /* Tracking de versalita. A 10 px un .22em era legible; a 17-22 px la misma
     cifra separa tanto las letras que la palabra deja de leerse como palabra
     y además desborda en 320. Se recalibra a la escala nueva. */
  --track-label: .12em;
  --track-label-wide: .16em;

  /* ═══ ESCALA DE CHROME (gate WEB03-CORRECCIÓN-VISUAL-FINAL 20260903 §3) ═══
     La navegación, su CTA y la fila de acciones de Visítanos NO son contenido:
     son controles de la cáscara. A la escala de `--t-min` la cabecera pesaba
     tanto como el hero, medía 76 px de alto y partía «EL COLISEO» y «VEN A
     CONOCERNOS» en dos líneas. El gate ordena bajarlas un 25-30%.

     Se declara como token propio y no bajando `--t-min`: el suelo tipográfico
     del CONTENIDO (§9.5) sigue intacto y sigue siendo una sola declaración.
     Esto es una excepción NOMBRADA para la cáscara, no una grieta en el suelo.
     A 1440 px: 23,8 px → 17,1 px (-28%). Nunca por debajo de 14 px. */
  --t-chrome: clamp(.88rem, 1.19vw, 1.12rem);

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 104px; --s7: 168px; --s8: 272px;

  --gutter: 6vw;
  --measure: 1440px;
  --scene-pad: clamp(4.5rem, 8.5vh, 8rem);
  --header-h: 62px;

  /* Tiempos heredados del prototipo v1b (destello prolongado) */
  --door-delay: .85s;
  --door-duration: 2.25s;
  --light-delay: .42s;
  --light-duration: 3.05s;
  --intro-out-delay: 3.15s;
}

/* ---------- 02 · RESET ------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
/* el margen de user-agent de <figure> (1em 40px) impedia que la
   fotografia llegase al borde de su columna (visto en C1-R2). */
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }

::selection { background: var(--gold); color: var(--black); }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 14px 20px;
  background: var(--ivory);
  color: var(--ink);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

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

/* ---------- 03 · TIPOGRAFÍA -------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .9;
  text-transform: uppercase;
  margin: 0;
}

.label {
  font-family: var(--font-text);
  font-size: var(--t-label);
  letter-spacing: var(--track-label-wide);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

.scene-label {
  display: inline-block;
  margin: 0 0 var(--s3);
  padding-bottom: .5em;
  border-bottom: 1px solid var(--rule-gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(clamp(.95rem, 1.5vw, 1.3rem), var(--t-min));
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: inherit;
}
.scene-label--xl {
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  color: var(--ivory-strong);
}
/* Expansión de oro (brief §15, R1-08): sólo en 3 escenas protagonistas. */
.scene-label--gold { color: var(--gold-light); }

.lead { font-size: var(--t-lead); line-height: 1.5; margin: 0; }
.body-soft { color: var(--ivory-soft); max-width: 46ch; margin: 0; }
.on-light .body-soft { color: var(--ink-soft); }

/* ---------- 04 · ESTRUCTURA -------------------------------- */

.shell {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sistema de tres anchos (brief §6): content = .shell; breakout = .bleed;
   full bleed = 100vw nativo (hero, riel, fotografía a sangre). */
.bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.scene {
  position: relative;
  padding-block: var(--scene-pad);
}

.scene--dark, .marta, .hero, .footer {
  background-color: var(--black);
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.scene--dark { color: var(--ivory); }
.scene--paper { background: var(--paper); color: var(--ink); }

/* ---------- 05 · HEADER ------------------------------------ */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 300;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height .35s ease, background-color .35s ease,
              border-color .35s ease;
  border-bottom: 1px solid transparent;
}

/* Transición limpia hacia el contenido: en reposo la cabecera no lleva caja ni
   filete, sólo un velo que se disuelve hacia abajo. Así el hero empieza donde
   acaba el degradado y no donde acaba una línea. Al compactar, el velo estorba
   —ya hay fondo sólido— y se retira. */
.header::after {
  content: "";
  position: absolute;
  inset: 0 0 -28px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 9, 9, .72) 0%,
    rgba(9, 9, 9, .34) 52%, transparent 100%);
  transition: opacity .35s ease;
}
.header.is-compact::after, .header--static::after { opacity: 0; }

.header.is-compact, .header.header--static {
  height: 52px;
  background: rgba(9, 9, 9, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--rule-dark);
}

.header__inner {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* Wordmark legible antes que emblema ilegible: a 34 px el elefante con el
   anfiteatro dentro se volvia una mancha. En cabecera manda la palabra. */
.brandmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-decoration: none;
  margin-right: auto;
  line-height: 1;
}

.brandmark__word {
  display: block;
  width: clamp(94px, 7.6vw, 116px);
  height: auto;
}

/* La firma subordinada NO va en Kunstler: a 10 px era un borron. Va en la
   familia de titulares, en versalitas espaciadas, y por eso sobrevive a
   cualquier sustitucion tipografica sin cambiar la marca. */
.brandmark__sig {
  font-family: var(--font-display);
  /* Subordinada de verdad: a `--t-min` medía más que el alto del propio
     rótulo y duplicaba el peso visual de la marca en la cabecera. */
  font-size: calc(var(--t-chrome) * .78);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ivory-mute);
}

.brandmark--footer { flex: none; margin-right: 0; }
.brandmark--footer .brandmark__word { width: clamp(132px, 13vw, 168px); }
.brandmark--footer .brandmark__sig { font-size: var(--t-min); }

.brandmark__emblem {
  width: 34px; height: 34px;
  mix-blend-mode: screen;
  flex: none;
}

.nav { display: flex; align-items: center; gap: clamp(12px, 1.45vw, 22px); }
/* El color se mantiene (marfil fuerte, dirección 20260901); lo que baja es el
   cuerpo, a la escala de chrome. `nowrap` es aquí funcional y no cosmético:
   es lo que impide que «El Coliseo» y «Ven a conocernos» partan en dos
   líneas y estiren la cabecera. */
.nav a {
  font-size: var(--t-chrome);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ivory-strong);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.nav a:hover { color: var(--ivory); border-bottom-color: var(--rule-gold); }

/* «Mi Coliseo» es un acceso, no contenido (brief §7.1): oro, no marfil. */
.nav__app { color: var(--gold-light) !important; }
.nav__app:hover { border-bottom-color: var(--gold) !important; }

.nav__cta {
  font-size: var(--t-chrome);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--gold-light);
  border: 1px solid var(--rule-gold);
  padding: 8px 15px;
  transition: background-color .25s ease, color .25s ease;
}
.nav__cta:hover { background: var(--gold); color: var(--black); }

.burger {
  display: none;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--t-chrome);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ivory-soft);
  padding: 10px 2px;
}
.burger__bars { display: grid; gap: 5px; width: 24px; }
.burger__bars i { height: 1px; background: currentColor; display: block; }

/* Panel móvil */
.menu {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--header-h) var(--gutter) var(--s5);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .5s cubic-bezier(.72, .03, .22, 1), visibility .5s;
}
.menu.is-open { transform: translateY(0); visibility: visible; }
.menu a {
  display: block;
  padding: clamp(12px, 2.1vh, 20px) 0;
  border-bottom: 1px solid var(--rule-dark);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 7.6vw, 2.4rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0;
  transform: translateY(14px);
}
.menu a.menu__app { color: var(--gold-light); }
.menu a.menu__cta {
  margin-top: var(--s2);
  border: 1px solid var(--rule-gold);
  border-bottom: 1px solid var(--rule-gold);
  padding: 16px 20px;
  text-align: center;
  font-family: var(--font-text);
  font-size: var(--t-min);
  letter-spacing: .24em;
  color: var(--gold-light);
}
.menu.is-open a { animation: menuIn .5s ease forwards; }
.menu.is-open a:nth-child(1) { animation-delay: .06s; }
.menu.is-open a:nth-child(2) { animation-delay: .11s; }
.menu.is-open a:nth-child(3) { animation-delay: .16s; }
.menu.is-open a:nth-child(4) { animation-delay: .21s; }
.menu.is-open a:nth-child(5) { animation-delay: .26s; }
.menu.is-open a:nth-child(6) { animation-delay: .31s; }
.menu.is-open a:nth-child(7) { animation-delay: .36s; }
@keyframes menuIn { to { opacity: 1; transform: none; } }

/* ---------- 06 · WORDMARK SYSTEM ----------------------------
   Dirección de arte (20260901): el hero ya no compone tres piezas (emblema
   PNG + wordmark + firma). Un único SVG —`lockup-el-coliseo.svg`, aportado
   por dirección— trae el lockup completo: emblema cálido rasterizado con
   máscara de luminancia + «EL COLISEO» en serifa romana + firma en cursiva,
   contornos en oro. Cabecera/pie siguen con su wordmark plano y su firma
   en versalitas (sin cambios). El texto accesible viaja en `alt`. */

.wordmark { position: relative; display: block; margin: 0; line-height: 1; }

.wordmark__img {
  display: block;
  margin-inline: auto;
  width: min(84vw, calc(var(--word-scale) * 3.4));
  height: auto;
}

/* La firma «by Marta García» ahora vive dentro de `lockup-el-coliseo.svg`.
   Este bloque queda oculto (atributo `hidden` + esta regla, que gana en
   especificidad a la hoja de UA) y sólo conserva el texto accesible. */
.wordmark__sig { display: none; }

/* ---------- 07 · CTA SYSTEM (brief §16) --------------------- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px de alto mínimo: es el objetivo táctil, no una preferencia. Con el
     padding solo salían 41,3 px y el dedo fallaba justo en los dos botones
     que abren el embudo. */
  min-height: 44px;
  gap: 12px;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cta span[aria-hidden] { display: inline-block; transition: transform .25s ease; }
/* `nowrap` es correcto mientras quepa. A 320 px, con el cuerpo ya en el suelo
   tipográfico, «Ver semana completa →» mide 335 px y saca el DOCUMENTO
   entero de su eje. Antes que desbordar la página, el botón parte. */
@media (max-width: 430px) {
  .cta {
    white-space: normal;
    text-align: center;
    max-width: 100%;
    overflow-wrap: break-word;
  }
}
.cta:hover span[aria-hidden] { transform: translateX(3px); }

.cta--primary {
  padding: 17px 30px;
  background: var(--gold);
  color: var(--black);
  font-weight: 600;
}
.cta--primary:hover { background: var(--gold-light); }

.cta--secondary {
  padding: 15px 26px;
  border: 1.5px solid var(--gold-light);
  color: var(--ivory-strong);
}
.cta--secondary:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.on-light .cta--secondary { border-color: var(--gold-ink); color: var(--gold-ink); }
.on-light .cta--secondary:hover { background: var(--gold-ink); border-color: var(--gold-ink); color: var(--paper); }

.cta--textual {
  color: var(--gold-light);
  border-bottom: 1px solid var(--rule-gold);
  padding-bottom: 4px;
  letter-spacing: .16em;
}
.cta--textual:hover { border-bottom-color: var(--gold); }
.on-light .cta--textual { color: var(--gold-ink); }

/* ---------- 08 · HERO + APERTURA DE PUERTAS ----------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--black);
  padding: calc(var(--header-h) + var(--s4)) var(--gutter) var(--s6);
  padding-bottom: clamp(96px, 12vh, 132px);
  text-align: center;
}

.hero__glow {
  position: absolute;
  left: 50%; top: 46%;
  width: min(1100px, 120vw); height: min(1100px, 120vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center,
    rgba(200, 157, 84, .13) 0%,
    rgba(200, 157, 84, .05) 34%,
    transparent 64%);
  pointer-events: none;
}

/* Fondo de arena: fotografia de demostracion muy rebajada. Da profundidad
   y textura reales sin competir con la marca ni fingir la instalacion
   (gate C1 §10). Se sustituye 1:1 por la sesion real.
   Dirección de arte (20260901): el hero queda en negro con niebla dorada
   —sólo `.hero__glow` + `.hero__texture` sobre el negro base—; se retira la
   fotografía de fondo y su viñeta. El markup del póster se conserva en el
   HTML (fondo estático crítico) por si vuelve la imagen. */
.hero__scene {
  display: none;
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__scene picture {
  position: absolute; inset: 0; display: block;
  transition: opacity .8s ease;
}
.hero__scene img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
  opacity: .62;
  filter: grayscale(.14) brightness(.8) contrast(1.06);
}

.hero__scene::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 78% 62% at 50% 44%, rgba(9, 9, 9, .82) 0%, rgba(9, 9, 9, .5) 46%, transparent 78%),
    /* Caída lateral para que la escena estática conserve profundidad sin
       competir con la lectura principal de la marca. */
    linear-gradient(90deg, rgba(9, 9, 9, .8) 0%, rgba(9, 9, 9, .12) 27%,
      rgba(9, 9, 9, .12) 73%, rgba(9, 9, 9, .8) 100%),
    linear-gradient(180deg, rgba(9, 9, 9, .92) 0%, rgba(9, 9, 9, .18) 34%,
      rgba(9, 9, 9, .42) 72%, rgba(9, 9, 9, .95) 100%);
}

/* Textura interina AI_DEMO_PLACEHOLDER (brief §5.3): grano abstracto muy
   sutil, nunca una escena reconocible. */
.hero__texture {
  position: absolute;
  inset: 0;
  opacity: .07;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .78 0 0 0 0 .64 0 0 0 0 .38 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23t)'/%3E%3C/svg%3E");
  background-size: 480px 480px;
  mix-blend-mode: screen;
}

.hero__inner {
  position: relative;
  /* Una sola escala gobierna wordmark y firma: nunca se separan. */
  --word-scale: clamp(2.6rem, min(11.5vw, 15svh), 8.4rem);
}

/* ═══ §9.2 · Los dos accesos del hero, un 10% por encima del suelo ═══════
   No se agranda el contenedor: se agranda la TIPOGRAFÍA, y el padding sigue
   al cuerpo por estar en `em`. Así el botón crece proporcionado y conserva
   centrado, contraste y objetivo táctil en lugar de convertirse en una caja
   grande con una letra pequeña dentro. El 1,1 se declara sobre `--t-min`
   —el suelo del producto— y no sobre un número suelto: si el suelo sube,
   estos dos suben con él y siguen siendo los mayores de la portada. */
.hero__cta .cta {
  font-size: calc(var(--t-min) * 1.1);
  padding-inline: 1.55em;
  padding-block: .78em;
}
.hero__cta .cta--textual {
  padding-inline: 0;
  padding-block: .3em;
}

/* .hero__emblem retirado: el emblema viaja dentro de `lockup-el-coliseo.svg`. */

.hero__claim {
  margin: clamp(18px, 3svh, 34px) 0 0;
  font-size: max(clamp(.82rem, 1.5vw, 1.12rem), var(--t-min));
  text-transform: uppercase;
  letter-spacing: .34em;
  color: var(--ivory-soft);
}

.hero__cta {
  margin-top: clamp(26px, 4svh, 42px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.hero__foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 18px var(--gutter);
  border-top: 1px solid var(--rule-dark);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ivory-mute);
}
.hero__foot span { white-space: nowrap; }

/* Puertas — mecánica heredada de v1b.
   Ocultas por defecto: sólo existen mientras corre la apertura,
   así una visita repetida no ve un fotograma de puertas cerradas. */
.doors { display: none; position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.intro-run .doors { display: block; }

.door {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.25%;
  overflow: hidden;
  background: linear-gradient(90deg, #090909 0%, #11100e 42%,
              #17130d 78%, #0b0a09 100%);
  box-shadow: 0 0 80px rgba(0, 0, 0, .75);
  will-change: transform;
}

.door::before {
  content: "";
  position: absolute; inset: 0;
  opacity: .72;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 83px,
      rgba(190, 147, 64, .08) 84px, transparent 85px),
    linear-gradient(90deg, rgba(255, 255, 255, .018), transparent 18%,
      transparent 80%, rgba(0, 0, 0, .55));
  border: clamp(14px, 2vw, 30px) solid rgba(49, 39, 22, .15);
}

.door::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(133, 85, 17, .15),
    var(--gold-light) 25%, #f8d675 52%, var(--gold-light) 77%,
    rgba(133, 85, 17, .15));
  box-shadow: 0 0 5px rgba(244, 193, 77, .75),
              0 0 18px rgba(223, 154, 36, .65),
              0 0 42px rgba(191, 121, 19, .4);
}

.door--left { left: 0; }
.door--left::after { right: 0; }

.door--right {
  right: 0;
  background: linear-gradient(-90deg, #090909 0%, #11100e 42%,
              #17130d 78%, #0b0a09 100%);
}
.door--right::after { left: 0; }

.intro-run .door--left {
  animation: openLeft var(--door-duration)
    cubic-bezier(.72, .03, .22, 1) var(--door-delay) forwards;
}
.intro-run .door--right {
  animation: openRight var(--door-duration)
    cubic-bezier(.72, .03, .22, 1) var(--door-delay) forwards;
}

.bloom {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 49;
  width: 10vw; height: 125vh;
  transform: translate(-50%, -50%) scaleX(.04);
  opacity: 0;
  background: radial-gradient(ellipse at center,
    rgba(255, 226, 148, .52), rgba(235, 176, 59, .18) 32%,
    rgba(176, 98, 9, .06) 52%, transparent 74%);
  filter: blur(20px);
  animation: bloomOpen var(--light-duration)
    cubic-bezier(.18, .82, .18, 1) var(--light-delay) forwards;
}

@keyframes openLeft {
  0% { transform: translateX(0); }
  18% { transform: translateX(-.8%); }
  100% { transform: translateX(-96%); }
}
@keyframes openRight {
  0% { transform: translateX(0); }
  18% { transform: translateX(.8%); }
  100% { transform: translateX(96%); }
}
@keyframes bloomOpen {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.025); }
  20% { opacity: .88; }
  55% { opacity: .42; }
  100% { opacity: .11; transform: translate(-50%, -50%) scaleX(4.2); }
}

/* Contenido del hero: aparece cuando las puertas ya han abierto.
   El emblema queda FUERA del fundido: lleva mix-blend-mode:screen, y
   cualquier capa con opacity<1 lo aísla en su propio grupo de composición,
   donde el «screen» ya no tiene fondo oscuro contra el que fundir su matte
   y aflora el cuadrado negro del PNG durante la transición. Se mantiene
   opaco, componiendo contra el hero oscuro; las puertas al abrir lo
   descubren. El resto del bloque (wordmark, firma, claim, CTAs) sí sube
   en fundido, cada hijo con el mismo tiempo: el efecto es idéntico. */
.intro-run .hero__inner { opacity: 1; }
.intro-run .hero__inner > :not(.hero__emblem) {
  opacity: 0;
  animation: heroIn 1.1s ease 1.85s forwards;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
/* Estado terminal: sin puertas, sin destello, nada animándose */
.intro-done .doors, .intro-done .bloom { display: none; }

/* ---------- 09 · DECLARACIÓN · ESCENA AUDIOVISUAL (R1-D2..D8) -------
   La escena marfil pasa a fondo de vídeo a sangre. Se trata como escena,
   no como tarjeta: sin marco, sin borde, sin esquina redondeada, sin
   control visible. Negro dominante arriba —empalma con el hero oscuro—;
   el vídeo gana presencia hacia el centro/inferior. */

.scene--video {
  position: relative;
  overflow: hidden;
  padding: 0;                       /* el vídeo llega a sangre por los cuatro lados */
  min-height: 100svh;
  display: grid;
  align-items: center;              /* dirección de arte 20260901: el titular al centro vertical */
  background: var(--black);
  color: var(--ivory);
  isolation: isolate;
}

.scene-video {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.scene-video picture { position: absolute; inset: 0; display: block; transition: opacity 1s ease; }
.scene-video__poster,
.scene-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* R1-D3: crop, sin deformar, sin caja */
  object-position: center 42%;
}
.scene-video__media {
  opacity: 0;
  transition: opacity 1s ease;
}
.scene--video.is-video .scene-video__media { opacity: 1; }
.scene--video.is-video .scene-video picture { opacity: 0; }

/* R1-D3 · tratamiento: negro dominante, matiz cálido mínimo, contraste
   para tipografía blanca; sin filtro naranja evidente ni sepia. La zona
   superior entra casi en negro para que la transición desde el hero sea
   continua; el velo se abre hacia el centro y vuelve a cerrar abajo para
   asentar el titular. */
.scene-video__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(135% 92% at 20% 84%,
      rgba(200, 157, 84, .12) 0%, rgba(200, 157, 84, .035) 34%, transparent 62%),
    linear-gradient(90deg,
      rgba(9, 9, 9, .70) 0%, rgba(9, 9, 9, .08) 28%,
      rgba(9, 9, 9, .04) 70%, rgba(9, 9, 9, .44) 100%),
    linear-gradient(180deg,
      rgba(9, 9, 9, .96) 0%, rgba(9, 9, 9, .78) 8%,
      rgba(9, 9, 9, .32) 32%, rgba(9, 9, 9, .26) 55%,
      rgba(9, 9, 9, .58) 82%, rgba(9, 9, 9, .90) 100%);
}

/* Grano muy sutil: rompe el banding del degradado sobre vídeo de 8 bits
   y aporta la textura de la casa (misma técnica que .scene--dark). */
.scene-video__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='vn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23vn)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* R1-D6 · composición desktop: aprovecha el ancho, titular grande a la
   izquierda, texto secundario respirando en una segunda zona a la derecha.
   Dirección de arte (20260901): el bloque pasa de anclado abajo a centrado
   vertical (la sección lo centra); mantiene el margen izquierdo y las dos
   zonas. Padding vertical simétrico para que el centrado sea real. */
.scene-video__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s3) var(--s4);
  align-items: center;
  padding-block: var(--s6);
}
.scene-video__headline { grid-column: 1 / 8; }
.scene-video__headline .display {
  font-size: var(--t-scene);
  line-height: .9;
  color: var(--ivory);             /* R1-D4: headline blanco / marfil muy claro */
  overflow-wrap: break-word;
  text-shadow: 0 2px 34px rgba(9, 9, 9, .5);
}
/* Dirección de arte (20260901): el texto de apoyo deja de flotar en una
   columna a la derecha (quedaba huérfano sobre el vídeo) y pasa a ser un
   sumario bajo el titular, en el mismo eje izquierdo. Tipo condensada de
   titulares en redonda —emparenta con el titular sin competir—, medida
   corta para dos líneas. El lado derecho queda libre: el vídeo respira. */
.scene-video__aside {
  grid-column: 1 / 8;
  align-self: start;
  margin-top: var(--s3);
  max-width: 44ch;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  line-height: 1.4;
  letter-spacing: .012em;
  color: var(--ivory-soft);        /* R1-D5: texto aprobado, integrado en blanco/marfil */
  text-shadow: 0 1px 18px rgba(9, 9, 9, .62);
}

/* ---------- 10 · ENTRENA · VISUAL ACTIVITY RAIL ------------- */

.index__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s3) var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.index__title { max-width: none; }
.index__head .display { font-size: var(--t-scene); color: var(--ivory); }
/* Los controles ya no viven en la cabecera: se superponen al viewport del
   riel (gate FINAL-PRODUCT §9.1). La regla se conserva vacía a propósito para
   que un `.rail__controls` heredado en otra página no herede un flex suelto. */
.rail__controls { display: contents; }

.scene--rail { padding-bottom: var(--s4); }

.rail {
  position: relative;
  width: 100%;
}

.rail__track {
  display: flex;
  gap: var(--s3);
  margin: 0;
  padding: 0 var(--gutter) var(--s2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  /* Sin esto, `scroll-snap-align: start` alinea la tarjeta con el borde del
     scrollport y se salta el `padding-inline`: el riel nacía desplazado 86 px,
     la primera tarjeta pegada al canto y la flecha «anterior» activa desde el
     primer momento apuntando a un hueco que no existe. El padding de scroll es
     lo que le dice al snap dónde está de verdad el principio. */
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }
/* El riel es focalizable (recorrido por teclado). El foco tiene que verse, y
   el borde no puede recortarse contra el desbordamiento del propio riel. */
.rail__track:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: -3px;
}
/* Durante el arrastre con puntero el desplazamiento lo gobierna el guion:
   dejar el snap activo pelea con él y da un movimiento a tirones. */
.rail__track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.rail__track.is-dragging a { pointer-events: none; }

/* Desktop: 3 tarjetas completas + la fraccion de la cuarta que
   anuncia que el riel sigue (gate C1 §5). */
.rail__card {
  flex: 0 0 clamp(288px, 27vw, 384px);
  scroll-snap-align: start;
}

.rail__link {
  position: relative;
  display: block;
  height: clamp(380px, 42vw, 540px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--graphite);
  border-bottom: 3px solid var(--rule-gold);
  transition: border-color .3s ease;
}
.rail__link:hover, .rail__link:focus-visible { border-bottom-color: var(--gold-light); }
.rail__link:hover .rail__name, .rail__link:focus-visible .rail__name { color: var(--gold-light); }

.rail__media { position: absolute; inset: 0; margin: 0; }
/* Velo comun: cohesiona una foto de dojo muy clara con cinco tomas
   oscuras sin falsear ninguna (gate C1 §5). */
.rail__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.9) saturate(.94) contrast(1.04);
}
/* (Retirado el grado extra de la toma de dojo clara: las seis tarjetas
   comparten ya una misma direccion de luz.)
   lea como una sola serie; es gradacion, no recorte ni montaje. */
 /* Las seis tarjetas llevan fotografia: el degradado sube lo justo para
   sostener el rotulo sin apagar la imagen (gate C1 §5). */
.rail__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(9, 9, 9, .94) 0%, rgba(9, 9, 9, .55) 30%,
    rgba(9, 9, 9, .12) 58%, transparent 78%);
}

.rail__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--s3);
}
.rail__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ivory);
  transition: color .25s ease;
}
.rail__note {
  margin: 8px 0 0;
  font-size: var(--t-label);
  letter-spacing: .12em;
  color: var(--ivory-soft);
  max-width: 32ch;
}
.rail__cta {
  display: inline-block;
  margin-top: 14px;
  font-size: var(--t-min);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.rail__cta span { display: inline-block; transition: transform .25s ease; }
.rail__link:hover .rail__cta span, .rail__link:focus-visible .rail__cta span { transform: translateX(3px); }

/* ── Tarjeta audiovisual (KARATE) ───────────────────────────────────────
   La pieza es VERTICAL (720x1280), igual que la tarjeta: entra con su
   encuadre nativo, a toda altura, y no hay nada que recortar. Sobran unos
   40 px a cada lado —la tarjeta es 384x540, algo menos esbelta que un 9:16—,
   y esos los llena el propio fotograma ampliado y desenfocado. Así el
   recuadro queda lleno de borde a borde sin perder acción, que es lo que
   pidió dirección el 20260903.

   Aquí NO se usa `cover` sobre la tarjeta entera: cubrir 384x540 con un 9:16
   obliga a cortar un 21% de la altura, y ahí se van la cabeza y los pies. */
.rail__card--video .rail__link { background: #000; }

.rail__media--video { background: transparent; }
/* Ambiente: el mismo fotograma, ampliado y desenfocado. Se desborda a
   propósito —un desenfoque grande aclara los bordes de su propia caja y sin
   este margen se vería el marco del difuminado—. */
.rail__media--video::before {
  content: "";
  position: absolute;
  inset: -12%;
  background-image: url("../images/karate-secuencia-poster-760.webp");
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(.8) brightness(.42);
  transform: scale(1.08);
  pointer-events: none;
}
.rail__band {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  /* Filetes por sombra y no por borde: no alteran la caja y por tanto no
     falsean la proporción. La sombra larga despega la pieza del ambiente
     desenfocado sin dibujarle un marco. */
  box-shadow: -1px 0 0 var(--rule-gold), 1px 0 0 var(--rule-gold),
              0 24px 52px -14px rgba(0, 0, 0, .9);
}
.rail__band picture,
.rail__band .rail__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity .7s ease;
}
/* `contain` y no `cover`: la banda ya tiene la proporción exacta del
   material, así que hoy pintan igual —ni un píxel recortado—, pero si mañana
   se sustituye la pieza por otra de proporción distinta, `contain` la
   respeta y `cover` la recortaría en silencio. */
.rail__band img,
.rail__band .rail__video {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}
.rail__band img { filter: none; }
.rail__video { opacity: 0; }
.rail__media--video.is-playing .rail__video { opacity: 1; }
.rail__media--video.is-playing picture { opacity: 0; }
/* El velo de pie del riel sigue sosteniendo el rótulo, pero sobre negro no
   necesita tanta carga: se aligera para que la banda no se apague. */
.rail__media--video::after {
  background: linear-gradient(0deg, rgba(9, 9, 9, .96) 0%, rgba(9, 9, 9, .62) 22%,
    transparent 44%);
}

/* Capa por encima de las tarjetas, anclada a los laterales del viewport del
   riel y centrada sobre la fotografía —no sobre el rótulo—. El fondo es opaco
   de verdad: una flecha translúcida sobre una foto clara deja de leerse justo
   en la tarjeta donde más falta hace. 48px de lado: por encima del mínimo
   táctil, y el área real la amplía `::before` sin mover el dibujo. */
.rail__arrow {
  position: absolute;
  top: clamp(150px, 17vw, 220px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--rule-gold);
  background: rgba(9, 9, 9, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease,
              opacity .2s ease, visibility .2s ease;
}
/* Área táctil por encima del dibujo, sin empujar a nadie. */
.rail__arrow::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
.rail__arrow--prev { left: max(10px, calc(var(--gutter) - 22px)); }
.rail__arrow--next { right: max(10px, calc(var(--gutter) - 22px)); }
.rail__arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.rail__arrow:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 3px;
}
/* Sin contenido en esa dirección la flecha desaparece por completo. Dejarla
   atenuada invita a pulsar algo que no hace nada; `visibility` la retira del
   foco y del lector de pantalla sin reservar ni liberar espacio. */
.rail__arrow:disabled {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- 11 · MARTA --------------------------------------
   Escena protagonista: el retrato sangra por el borde izquierdo y
   ocupa la altura completa; el nombre en oro y el titular monumental
   comparten el eje derecho. Tratamiento no destructivo (grano +
   vinneta) sobre un fichero 480x640 (ASSET_QUALITY_RISK).
   ------------------------------------------------------------- */

/* display:block a proposito: como flex item, .shell se encogia al
   contenido y el retrato nunca llegaba a sangrar (medido en C1-R1). */
.marta {
  position: relative;
  display: block;
  overflow: hidden;
}

.marta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(36px, 4.4vw, 76px);
  /* `stretch` estiraba el retrato a la altura de la columna de texto y su
     `cover` recortaba lo que sobraba. Con `center` la figura conserva su
     proporción y decide su propia altura. */
  align-items: center;
  padding-block: var(--scene-pad);
}

/* El retrato sangra por el borde izquierdo y conserva ÍNTEGRA la proporción
   del original (1536x2048 = 3:4). Al declarar esa misma proporción en el
   contenedor, `cover` no recorta ni un píxel: no hay cabeza, manos ni pies
   perdidos, y tampoco se deforma. Antes se le imponía una altura mínima en
   `svh` que en pantallas anchas obligaba a recortar por los lados. */
.marta__figure {
  position: relative;
  margin-left: calc(var(--gutter) * -1);
  aspect-ratio: 3 / 4;
  max-height: min(92svh, 980px);
}
.marta__figure picture { display: block; position: absolute; inset: 0; }
.marta__figure img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
/* El retrato nuevo (1536x2048) ya no necesita grano para disimular
   resolucion: basta una vinneta que lo funda con el negro de la escena. */
.marta__figure::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  box-shadow: inset 0 0 120px 26px rgba(9, 9, 9, .5);
}

.marta__text {
  align-self: center;
  padding-block: var(--s2);
}

/* El nombre es lo que hay que recordar: oro, gran escala, sin caja. */
.marta__text .scene-label--xl {
  display: block;
  margin-bottom: var(--s2);
  padding-bottom: .28em;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: .12em;
  color: var(--gold-light);
  border-bottom-color: var(--rule-gold);
}

.marta__title {
  display: block;
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: .92;
  color: var(--ivory);
}

/* Dirección de arte (20260901): la biografía y el palmarés secundario toman
   la tipografía del sumario de #el-coliseo (.scene-video__aside) — condensada
   de titulares en redonda, cuerpo de lead, interlineado e interletraje suaves. */
.marta__text .lead {
  margin-top: var(--s3);
  max-width: 40ch;
  font-family: var(--font-display);
  line-height: 1.4;
  letter-spacing: .012em;
  color: var(--ivory-strong);
}

.marta__record { margin: var(--s4) 0 0; max-width: 52ch; }
.marta__record-main {
  margin: 0 0 var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule-gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.marta__record-list { list-style: none; margin: 0; padding: 0; }
.marta__record-list li {
  padding: 12px 0;
  border-top: 1px solid var(--rule-dark);
  font-family: var(--font-display);   /* misma tipografía que el sumario de #el-coliseo */
  font-size: var(--t-lead);
  line-height: 1.4;
  letter-spacing: .012em;
  color: var(--ivory-soft);
}

/* ---------- 12 · DISCIPLINA · KARATE -------------------------
   La escena la construye la fotografía: la toma mayor sangra por el
   borde izquierdo y la menor por el derecho. Dirección de arte
   (20260901): retirada la cabecera (título «Karate», lista de
   modalidades y credencial) — la sección son las dos tomas y el enlace.
   ------------------------------------------------------------- */

.discipline__pair {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  align-items: end;
}

.discipline__major, .discipline__minor { margin: 0; }
/* `contain` y no `cover`: el retrato vertical (1152x1536) metido a la fuerza
   en una caja apaisada perdía cabeza, manos y pies. Aquí se muestra la
   postura entera; el negro de la escena absorbe lo que sobra, que es el
   fondo de la casa y no una banda de error. Cada toma se ancla a su borde
   —la mayor a la izquierda, la menor a la derecha— para que el conjunto
   componga un díptico deliberado y siga sangrando por los laterales. */
.discipline__major img,
.discipline__minor img { width: 100%; object-fit: contain; }
.discipline__major img { height: min(84svh, 880px); object-position: left center; }
.discipline__minor img { height: min(62svh, 660px); object-position: right center; }

/* Dirección de arte (20260901): sin cabecera en la sección, el enlace es
   el único texto — sube de tamaño para que se lea bien y afloja el
   interletraje que a ese cuerpo quedaba demasiado abierto. */
.discipline__link {
  margin-top: var(--s4);
  display: inline-flex;
  font-size: max(clamp(.9rem, 1.3vw, 1.1rem), var(--t-min));
  letter-spacing: .12em;
}

/* ---------- 13 · HORARIO ------------------------------------- */

.schedule__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}
/* Sin `grid-column` propia, «Horarios» caía en la columna 1 de 12: a 360 px
   son cuatro píxeles de ancho y la palabra se partía en vertical letra a
   letra. Es el defecto de referencia del gate §15, y su causa no es
   tipográfica sino de rejilla: un hijo sin asignar hereda una sola columna. */
.schedule__head .scene-label,
.schedule__head > p:not(.display) { grid-column: 1 / 13; }
.schedule__head .display {
  grid-column: 1 / 11;
  max-width: 16ch;
  font-size: clamp(1.9rem, 3.8vw, 3.4rem);
  color: var(--ink);
}
/* «TU SEMANA» en tinta, «EN EL COLISEO» en oro cálido. Es `--gold-ink` y no
   `--gold`: sobre marfil el oro claro se vuelve amarillo chillón y pierde
   contraste; el oro oscuro conserva el color de la casa y se lee. */
.schedule__accent { color: var(--gold-ink); }
.schedule__facts {
  grid-column: 1 / 13;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  /* Información superior más compacta: menos aire por encima y filete de oro
     en vez del rayado de tinta maciza. */
  margin: var(--s3) 0 0;
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--rule-gold);
  list-style: none;
}
/* Dirección de arte (20260901): los datos de horario y el enlace a la
   semana completa suben un 10% de cuerpo y de opacidad (tinta .74 → .92)
   para que se lean mejor sobre el papel. */
/* Marcador dorado por dato: es el «pequeño marcador» del gate, y a la vez lo
   que separa los tres hechos sin necesidad de tres filetes. */
.schedule__facts li {
  position: relative;
  padding-left: 18px;
  font-size: calc(var(--t-label) * 1.1);
  /* .16em a este cuerpo abría tanto las letras que la línea dejaba de leerse
     como frase. Se aprieta sin tocar el cuerpo. */
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(20, 18, 15, .92);
}
.schedule__facts li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 1px;
  background: var(--gold-ink);
}

/* Selector de día — vinculante en HOME también en desktop (brief §11,
   R1-02: ya no es la tabla de 84 celdas la que abre Horarios). */
.daybar {
  display: flex;
  gap: 6px;
  margin-bottom: var(--s3);
  max-width: 560px;
  /* Si los siete no caben sin bajar de 44 px, el grupo se desplaza dentro de
     sí mismo. El documento nunca se desborda: el scroll vive en la barra. */
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.daybar::-webkit-scrollbar { display: none; }
.daybar button {
  flex: 1 1 0;
  /* Siete botones en fila a 320 px dan 34 px de ancho: por debajo del dedo.
     Se les da altura suficiente y se permite que la fila se desplace dentro
     de su propio contenedor antes que encoger cada botón por debajo de 44. */
  min-width: 44px;
  min-height: 48px;
  padding: 12px 4px;
  border: 1px solid var(--rule-light);
  font-size: var(--t-label);
  letter-spacing: .12em;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
/* Día seleccionado: fondo dorado y texto negro (gate §7). El oro macizo con
   tinta encima es el par de mayor contraste de la paleta sobre marfil. */
.daybar button[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  font-weight: 700;
}
.daybar button:hover { border-color: var(--gold-ink); color: var(--ink); }
.daybar button[aria-pressed="true"]:hover { color: var(--black); }

/* Dos columnas en desktop: una unica columna dejaba media escena de
   marfil vacio bajo el listado (gate C1 §12). El orden sigue siendo
   cronologico de arriba abajo y luego a la derecha. */
.day-sessions {
  margin: var(--s4) 0 0;
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--rule-gold);
  list-style: none;
  columns: 2;
  column-gap: clamp(32px, 5vw, 88px);
  column-fill: balance;
}
.day-sessions li {
  display: flex;
  gap: var(--s3);
  padding: 12px 0 12px 14px;
  border-bottom: 1px solid var(--rule-light);
  border-left: 2px solid transparent;
  font-size: var(--t-min);
  break-inside: avoid;
  transition: border-color .2s ease, background-color .2s ease;
}
.day-sessions li:hover { border-left-color: var(--gold); background: rgba(200, 157, 84, .06); }
/* Las horas en oro oscuro: es el dato que se busca y el que ordena la lista. */
.day-sessions__time {
  flex: none;
  width: 11ch;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.day-sessions__name { color: var(--ink-soft); }
.day-sessions__empty { color: var(--ink-mute); font-style: italic; border-bottom: 0; }

/* CTA de la semana completa: oro macizo con texto negro, y al pasar por
   encima OSCURECE en vez de aclarar —es el gesto que el gate pide y el que
   distingue este botón del primario del hero, que aclara. */
.schedule__link {
  margin-top: var(--s4);
  display: inline-flex;
  font-size: calc(var(--t-label) * 1.1);   /* +10%, a juego con los datos de arriba */
}
.schedule__link.cta--primary:hover {
  background: var(--gold-ink);
  color: var(--paper);
}

.schedule__note {
  margin: var(--s4) 0 0;
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* Página /horarios: tabla semanal completa, migrada tal cual de WEB02. */
.schedule-page .back-link {
  /* Enlace de vuelta: es el unico control de la pagina y a 29 px de alto el
     dedo falla. Se le da el objetivo tactil sin cambiar su dibujo. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  display: inline-block;
  margin-bottom: var(--s4);
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--rule-light);
}

.week {
  width: 100%;
  border-collapse: collapse;
}
.week caption { text-align: left; }
.week th, .week td {
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-light);
  font-size: var(--t-min);
  line-height: 1.35;
}
/* Encabezados de los días en oro oscuro; el filete inferior deja de ser
   tinta maciza y pasa a ser oro: la tabla se lee como parte de la casa y no
   como una hoja de cálculo. */
.week thead th {
  font-size: var(--t-label);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 700;
  border-bottom: 1px solid var(--rule-gold);
  padding-bottom: 12px;
}
/* Las horas, en oro oscuro y legible: son la clave de lectura de la rejilla. */
.week tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-min);
  letter-spacing: .02em;
}
.week td { color: var(--ink); }
/* Filas alternas en marfil cálido, no en gris: el gris enfriaba el papel. */
.week tbody tr:nth-child(odd) td,
.week tbody tr:nth-child(odd) th { background: rgba(200, 157, 84, .07); }
.week tbody tr:hover td,
.week tbody tr:hover th { background: rgba(200, 157, 84, .14); }

/* Columna del día activo: banda dorada MUY leve. El realce va en la celda y
   no en el texto, así el color no le come contraste a lo que hay que leer.
   La clase la pone el guion, que es quien sabe qué día está elegido. */
.week thead th.is-active-day,
.week tbody td.is-active-day {
  background: rgba(200, 157, 84, .17);
  box-shadow: inset 2px 0 0 var(--rule-gold), inset -2px 0 0 var(--rule-gold);
}
.week thead th.is-active-day { color: var(--ink); }
.week tbody tr:nth-child(odd) td.is-active-day { background: rgba(200, 157, 84, .21); }
.week td:empty::after { content: "·"; color: var(--rule-light); }
.week td i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: var(--t-min);
  letter-spacing: .02em;
  color: var(--ink-mute);
}

.week-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 1023px) { .week-scroll { overflow-x: visible; } }

/* Por debajo de 1024 la semana completa no cabe: selector de día. */
@media (max-width: 1023px) {
  .week thead { display: none; }
  .week, .week tbody, .week tr, .week th, .week td { display: block; width: 100%; }
  .week tr { border-bottom: 1px solid var(--rule-light); padding-block: 12px; }
  .week tbody tr:nth-child(odd) td,
  .week tbody tr:nth-child(odd) th { background: none; }
  .week tbody th { border: 0; padding: 0 0 4px; color: var(--gold-ink); }
  .week td { border: 0; padding: 2px 0; font-size: var(--t-min); }
  .week td[hidden] { display: none; }
  .week td:empty { display: none; }
  .week tr.is-hidden-row { display: none; }
}

/* ---------- 14 · MI COLISEO ----------------------------------- */

.app-scene { position: relative; overflow: hidden; }

.app-scene__field {
  position: absolute;
  left: 78%; top: 50%;
  width: min(96vw, 1020px); height: auto;
  transform: translate(-50%, -50%);
  opacity: .05;
  mix-blend-mode: screen;
  pointer-events: none;
}

.app-scene__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s3);
  align-items: center;
}
.app-scene__head { grid-column: 1 / 6; }
/* ═══ §9.3 · Mi Coliseo: sumario y acceso, un 10% por encima del suelo ═══
   Es la sección que explica el producto que Marta va a enseñar; su promesa y
   su acceso pesan más que el texto corriente que los rodea. */
.app-scene__head .body-soft {
  max-width: 34ch;
  margin-top: var(--s3);
  font-size: calc(var(--t-min) * 1.1);
  line-height: 1.5;
}
.app-scene__head .display { font-size: var(--t-scene); color: var(--ivory); }
.app-scene__cta {
  margin-top: var(--s4);
  font-size: calc(var(--t-min) * 1.1);
  padding-inline: 1.55em;
  padding-block: .78em;
}

/* Composicion de producto, no tres rectangulos alineados: escalonados,
   con solape y profundidad, y el frame central por delante (gate C1 §11). */
.app-scene__phones {
  grid-column: 6 / 13;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0;
  padding-right: clamp(0px, 2vw, 28px);
}

.phone { position: relative; width: 196px; }
/* Escalonado por margen y no por transform: el rotulo viaja con su
   frame y no se solapa con el de al lado (visto en C1-R3).

   El solape de -26px valia cuando las pantallas eran tres rectangulos con
   barras: tapar un borde vacio no costaba nada. Ahora dentro hay un horario y
   unas marcas que se leen, y el mismo solape se comia la columna del estado
   de la izquierda y el titulo de la derecha. Se separan: la profundidad la dan
   la escala, el desnivel y la sombra, que es de donde venia de verdad. */
.phone:nth-child(1) { z-index: 1; }
.phone:nth-child(2) { z-index: 3; width: 226px; margin: 0 14px 46px; }
.phone:nth-child(3) { z-index: 2; width: 178px; }

.phone__screen {
  position: relative;
  aspect-ratio: 9 / 19;
  border-radius: 30px;
  border: 3px solid rgba(244, 239, 230, .18);
  background: linear-gradient(165deg, #202020, #0a0a0a);
  box-shadow: 0 28px 60px -24px rgba(0, 0, 0, .95),
              inset 0 1px 0 rgba(244, 239, 230, .1);
  overflow: hidden;
  padding: 20px 15px;
}
.phone:nth-child(2) .phone__screen { border-color: var(--rule-gold); }
.phone__bar { display: block; width: 40%; height: 5px; border-radius: 3px; background: var(--rule-gold); margin-bottom: 16px; }
.phone__row { display: block; height: 9px; border-radius: 2px; background: rgba(244, 239, 230, .14); margin-bottom: 10px; }
.phone__row:nth-child(2) { width: 82%; }
.phone__row--accent { width: 55%; background: var(--gold); }
/* Codigo cuadrado esquematico dibujado a mano: modulos y marcas de
   posicion, nunca una captura de Mi Coliseo (gate C1 §11). */
.phone__qr {
  position: absolute;
  left: 15%; right: 15%;
  top: 46%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  padding: 8%;
  background-color: var(--ivory);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%2021%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20width%3D%2221%22%20height%3D%2221%22%20fill%3D%22%23f4efe6%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%227%22%20height%3D%227%22%20fill%3D%22%2314120f%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23f4efe6%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%2314120f%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%227%22%20height%3D%227%22%20fill%3D%22%2314120f%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%221%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23f4efe6%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%222%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%2314120f%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20fill%3D%22%2314120f%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%2215%22%20width%3D%225%22%20height%3D%225%22%20fill%3D%22%23f4efe6%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2216%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%2314120f%22%2F%3E%3Cpath%20d%3D%22M0%208h1v1h-1zM0%209h1v1h-1zM0%2011h1v1h-1zM0%2013h1v1h-1zM1%208h1v1h-1zM1%2010h1v1h-1zM1%2011h1v1h-1zM1%2012h1v1h-1zM1%2013h1v1h-1zM2%208h1v1h-1zM2%2010h1v1h-1zM2%2011h1v1h-1zM3%209h1v1h-1zM3%2011h1v1h-1zM3%2013h1v1h-1zM4%208h1v1h-1zM4%209h1v1h-1zM4%2010h1v1h-1zM4%2012h1v1h-1zM5%209h1v1h-1zM5%2011h1v1h-1zM5%2012h1v1h-1zM5%2013h1v1h-1zM6%209h1v1h-1zM6%2010h1v1h-1zM6%2012h1v1h-1zM6%2013h1v1h-1zM7%2010h1v1h-1zM8%201h1v1h-1zM8%203h1v1h-1zM8%204h1v1h-1zM8%206h1v1h-1zM8%208h1v1h-1zM8%2013h1v1h-1zM8%2017h1v1h-1zM9%201h1v1h-1zM9%206h1v1h-1zM9%207h1v1h-1zM9%209h1v1h-1zM9%2011h1v1h-1zM9%2012h1v1h-1zM9%2013h1v1h-1zM9%2015h1v1h-1zM9%2016h1v1h-1zM9%2017h1v1h-1zM9%2019h1v1h-1zM9%2020h1v1h-1zM10%204h1v1h-1zM10%205h1v1h-1zM10%206h1v1h-1zM10%209h1v1h-1zM10%2010h1v1h-1zM10%2011h1v1h-1zM10%2012h1v1h-1zM10%2015h1v1h-1zM10%2016h1v1h-1zM10%2017h1v1h-1zM10%2018h1v1h-1zM11%204h1v1h-1zM11%209h1v1h-1zM11%2010h1v1h-1zM11%2011h1v1h-1zM11%2013h1v1h-1zM11%2014h1v1h-1zM11%2015h1v1h-1zM11%2016h1v1h-1zM11%2017h1v1h-1zM11%2018h1v1h-1zM11%2019h1v1h-1zM11%2020h1v1h-1zM12%200h1v1h-1zM12%201h1v1h-1zM12%202h1v1h-1zM12%205h1v1h-1zM12%206h1v1h-1zM12%207h1v1h-1zM12%208h1v1h-1zM12%209h1v1h-1zM12%2014h1v1h-1zM12%2015h1v1h-1zM12%2016h1v1h-1zM12%2017h1v1h-1zM12%2019h1v1h-1zM12%2020h1v1h-1zM13%202h1v1h-1zM13%204h1v1h-1zM13%209h1v1h-1zM13%2010h1v1h-1zM13%2011h1v1h-1zM13%2015h1v1h-1zM13%2016h1v1h-1zM14%2010h1v1h-1zM14%2012h1v1h-1zM14%2013h1v1h-1zM14%2014h1v1h-1zM14%2015h1v1h-1zM14%2016h1v1h-1zM14%2019h1v1h-1zM15%2010h1v1h-1zM15%2011h1v1h-1zM15%2012h1v1h-1zM15%2013h1v1h-1zM15%2014h1v1h-1zM16%208h1v1h-1zM16%2014h1v1h-1zM16%2016h1v1h-1zM16%2019h1v1h-1zM16%2020h1v1h-1zM17%2010h1v1h-1zM17%2011h1v1h-1zM17%2012h1v1h-1zM17%2015h1v1h-1zM17%2019h1v1h-1zM18%208h1v1h-1zM18%209h1v1h-1zM18%2014h1v1h-1zM18%2017h1v1h-1zM18%2018h1v1h-1zM18%2019h1v1h-1zM18%2020h1v1h-1zM19%209h1v1h-1zM19%2010h1v1h-1zM19%2011h1v1h-1zM19%2013h1v1h-1zM19%2014h1v1h-1zM19%2017h1v1h-1zM20%209h1v1h-1zM20%2010h1v1h-1zM20%2011h1v1h-1zM20%2012h1v1h-1zM20%2014h1v1h-1zM20%2018h1v1h-1z%22%20fill%3D%22%2314120f%22%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-shadow: 0 0 0 1px rgba(244, 239, 230, .2);
}
/* Barras esquematicas, sin cifras: es un boceto de producto. */
.phone__chart {
  position: absolute; left: 18px; right: 18px; bottom: 28px; height: 52%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2077%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%220%22%20y%3D%2266%22%20width%3D%227%22%20height%3D%2234%22%20fill%3D%22rgba%28244%2C239%2C230%2C.26%29%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2248%22%20width%3D%227%22%20height%3D%2252%22%20fill%3D%22rgba%28244%2C239%2C230%2C.26%29%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2259%22%20width%3D%227%22%20height%3D%2241%22%20fill%3D%22rgba%28244%2C239%2C230%2C.26%29%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2237%22%20width%3D%227%22%20height%3D%2263%22%20fill%3D%22rgba%28244%2C239%2C230%2C.26%29%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2242%22%20width%3D%227%22%20height%3D%2258%22%20fill%3D%22rgba%28244%2C239%2C230%2C.26%29%22%2F%3E%3Crect%20x%3D%2250%22%20y%3D%2224%22%20width%3D%227%22%20height%3D%2276%22%20fill%3D%22rgba%28244%2C239%2C230%2C.26%29%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%2229%22%20width%3D%227%22%20height%3D%2271%22%20fill%3D%22rgba%28244%2C239%2C230%2C.26%29%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%228%22%20width%3D%227%22%20height%3D%2292%22%20fill%3D%22%23c89d54%22%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* ── Interior de las tres pantallas ───────────────────────────────────
   Tipografía en `cqw` —unidades del propio teléfono— para que las tres
   miniaturas compongan igual pese a medir 178, 196 y 226 px de ancho. Con
   `rem` la pequeña quedaba con el texto proporcionalmente enorme. */
.phone__screen { container-type: inline-size; }
.mock {
  position: absolute;
  inset: 0;
  padding: 9cqw 7cqw;
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
  font-family: var(--font-text);
  color: var(--ivory);
  overflow: hidden;
}
.mock__eyebrow {
  margin: 0;
  font-size: 4.4cqw;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.mock__title {
  margin: 0 0 1.5cqw;
  font-family: var(--font-display);
  font-size: 9cqw;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--ivory);
}
.mock__days { display: flex; gap: 1.6cqw; margin-bottom: 2cqw; }
.mock__days span {
  flex: 1 1 0;
  padding: 2.2cqw 0;
  text-align: center;
  font-size: 4.4cqw;
  border: 1px solid rgba(244, 239, 230, .16);
  color: var(--ivory-mute);
}
.mock__days .is-on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  font-weight: 700;
}
.mock__list, .mock__marks { list-style: none; margin: 0; padding: 0; }
.mock__row {
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 3cqw 0;
  border-top: 1px solid rgba(244, 239, 230, .12);
  font-size: 4.6cqw;
  white-space: nowrap;
}
.mock__row b { font-variant-numeric: tabular-nums; color: var(--ivory); }
.mock__row span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ivory-soft);
}
.mock__tag {
  font-style: normal;
  font-size: 3.9cqw;
  padding: 1cqw 2.2cqw;
  border: 1px solid rgba(244, 239, 230, .22);
  color: var(--ivory-mute);
}
.mock__tag--mine { background: var(--gold); border-color: var(--gold); color: var(--black); }

.mock--acceso { align-items: center; text-align: center; }
.mock--acceso .phone__qr {
  position: static;
  transform: none;
  width: 66cqw;
  margin: 3cqw 0;
  padding: 4cqw;
}
.mock__note { margin: 0; font-size: 4cqw; color: var(--ivory-mute); }
.mock__state {
  margin: 2cqw 0 0;
  display: flex;
  align-items: center;
  gap: 2cqw;
  font-size: 4.4cqw;
  color: var(--ivory-soft);
}
.mock__dot {
  width: 2.6cqw; height: 2.6cqw;
  border-radius: 50%;
  background: #4FBF7B;
  box-shadow: 0 0 0 1.4cqw rgba(79, 191, 123, .22);
}

.mock__marks li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1cqw 2cqw;
  padding: 2.8cqw 0 3.4cqw;
  border-top: 1px solid rgba(244, 239, 230, .12);
  font-size: 4.4cqw;
  color: var(--ivory-soft);
}
.mock__marks b { color: var(--ivory); font-variant-numeric: tabular-nums; }
.mock__marks em {
  grid-column: 1 / 3;
  height: 1.6cqw;
  background: rgba(244, 239, 230, .14);
}
.mock__marks em::before {
  content: "";
  display: block;
  width: var(--p, 50%);
  height: 100%;
  background: var(--gold);
}
.phone__screen--evolucion .phone__chart {
  position: static;
  margin-top: auto;
  height: 22cqw;
}

.phone__caption {
  margin: 16px 0 0;
  text-align: center;
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory-mute);
}

/* ---------- 15 · FAQ -------------------------------------------
   Acordeón real sobre `<details>`: cerrado de origen, abre y cierra sin
   guion y sigue funcionando con JavaScript desactivado.

   DOS COLUMNAS EXPLÍCITAS, no `columns: 2` ni una rejilla de dos columnas.
   Con `columns` un `<details>` se parte por la mitad justo al abrirse; con
   una rejilla, abrir una respuesta estira la fila entera y deja un hueco
   enfrente. Dos contenedores que fluyen por su cuenta no tienen ninguno de
   los dos problemas, y en móvil se apilan solos. */

/* 860 px dejaba dos vacíos laterales enormes en escritorio (gate §5). */
.faq__shell { max-width: var(--measure); }

.faq__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(40px, 6vw, 104px);
  align-items: start;
}

.faq__item {
  border-top: 1px solid var(--rule-light);
  padding: var(--s3) 0;
  transition: border-color .25s ease;
}
.faq__col > .faq__item:last-child { border-bottom: 1px solid var(--rule-light); }
/* Estado abierto marcado en oro. */
.faq__item[open] { border-top-color: var(--gold-ink); }
.faq__item summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  letter-spacing: -.005em;
  color: var(--ink);
  transition: color .2s ease;
}
.faq__item summary:hover { color: var(--gold-ink); }
.faq__item summary::-webkit-details-marker { display: none; }
/* Indicador dorado: signo dentro de un aro, de «+» a «×». El giro lo sostiene
   una transición corta que la regla global de movimiento reducido anula. */
.faq__item summary::after {
  content: "+";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--rule-gold);
  border-radius: 50%;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--gold-ink);
  transition: background-color .2s ease, color .2s ease, transform .25s ease;
}
.faq__item summary:hover::after { background: var(--gold); color: var(--black); border-color: var(--gold); }
.faq__item[open] summary::after { content: "×"; transform: rotate(90deg); }
.faq__item[open] summary { color: var(--gold-ink); }

.faq__answer { overflow: hidden; }
.faq__item[open] .faq__answer { animation: faqOpen .24s cubic-bezier(.2, .7, .2, 1); }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.faq__item p { margin: var(--s2) 0 0; max-width: 52ch; color: var(--ink-soft); }
.faq__item a { color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid var(--rule-gold); }
.faq__item a:hover { border-bottom-color: var(--gold-ink); }

.faq__close {
  margin: var(--s5) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.faq__close a {
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-gold);
}
.faq__close a:hover { border-bottom-color: var(--gold-ink); }

/* ---------- 16 · VISÍTANOS --------------------------------------
   Negocio fisico real: la fachada vigente ocupa media escena y sangra
   por el borde derecho; la informacion vive en la columna izquierda
   en un unico orden que en movil ya es el pedido por el gate:
   VISITANOS -> direccion -> como llegar -> fachada -> datos -> CTA.
   ---------------------------------------------------------------- */

.visit { padding-inline: 0; overflow: hidden; }

/* El mural de la fachada es casi cuadrado (1400x1263): la columna visual
   se dimensiona a esa misma proporcion para que entre entero — a sangre
   por el borde derecho, ni recortado por los lados ni por arriba.
   Un unico orden de DOM que en movil ya es el que pide el gate:
   VISITANOS -> direccion -> como llegar -> fachada -> datos -> CTA. */
.visit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.72fr);
  grid-template-areas:
    "head    visual"
    "address visual"
    "info    visual"
    "cta     visual";
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(32px, 4vw, 72px);
  align-items: start;
  padding-left: var(--gutter);
  position: relative;
  isolation: isolate;
}

/* Marca de agua muy discreta inspirada en el Coliseo: una arcada de medio
   punto repetida, en oro translúcido y sólo bajo la columna de información.
   Es dibujo vectorial dentro de la propia hoja —ni un recurso más que
   descargar— y a esta opacidad da profundidad sin volverse ornamento. */
.visit__grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  width: min(46%, 640px);
  height: min(78%, 560px);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='150' viewBox='0 0 120 150'%3E%3Cg fill='none' stroke='%23c89d54' stroke-width='2' opacity='.17'%3E%3Cpath d='M12 148V60a18 18 0 0 1 36 0v88'/%3E%3Cpath d='M72 148V60a18 18 0 0 1 36 0v88'/%3E%3Cpath d='M0 46h120M0 51h120'/%3E%3Cpath d='M12 44V-4a18 18 0 0 1 36 0v48'/%3E%3Cpath d='M72 44V-4a18 18 0 0 1 36 0v48'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 150px;
  background-position: left bottom;
  -webkit-mask-image: linear-gradient(20deg, rgba(0, 0, 0, .6) 0%, transparent 66%);
  mask-image: linear-gradient(20deg, rgba(0, 0, 0, .6) 0%, transparent 66%);
}

.visit__head { grid-area: head; }
.visit__address { grid-area: address; margin-top: var(--s3); }
.visit__visual { grid-area: visual; }
.visit__info { grid-area: info; }
/* Tres acciones del mismo peso y del mismo ancho: la sucesión de botones
   desiguales era parte de lo que hacía que el panel pareciese una ficha.
   Rejilla de tres, y no `flex-wrap`, para que midan igual sí o sí. */
.visit__actions {
  grid-area: cta;
  align-self: start;
  margin-top: var(--s4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 540px;
}
.visit__actions .cta {
  font-size: var(--t-chrome);
  padding: 13px 10px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.visit__head .display { font-size: clamp(1.9rem, 3.8vw, 3.4rem); color: var(--ink); }

.visit__address .display {
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  line-height: 1;
  color: var(--ink);
}
.visit__address p { margin: var(--s2) 0 0; color: var(--ink-soft); }
.visit__address .visit__city {
  margin-top: var(--s1);
  font-size: var(--t-label);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.visit__address .cta { margin-top: var(--s3); }

/* Dos bloques compactos bajo UN solo filete de oro, en lugar de la sucesión
   de cinco líneas divisorias que convertía el panel en una ficha. El correo
   largo ya no se imprime: vive detrás de ESCRIBIR. */
.visit__info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-gold);
}
.visit__block-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.visit__block-body {
  margin: 6px 0 0;
  font-size: var(--t-min);
  line-height: 1.4;
  color: var(--ink);
}

/* grid-area + separacion en la MISMA regla: declararlo arriba y volver a
   escribir `margin: 0` mas abajo lo anulaba en silencio (visto en C1-R1). */
.visit__lines {
  grid-area: lines;
  margin: var(--s4) 0 0;
  list-style: none;
  padding: 0;
}
.visit__lines li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  /* El correo es largo: sin esto desborda la columna en 320-360 px. Se parte
     por puntos y arrobas, no carácter a carácter. */
  overflow-wrap: anywhere;
  border-top: 1px solid var(--rule-light);
  font-size: var(--t-min);
  color: var(--ink);
}
.visit__lines li:first-child { border-top: 0; padding-top: 0; }
/* Teléfono y correo son acciones reales dentro de la lista. */
.visit__lines a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.visit__lines span {
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.visit__lines a {
  width: fit-content;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-light);
}
.visit__lines a:hover { border-bottom-color: var(--gold-ink); color: var(--gold-ink); }

/* Fachada real (H10), INTACTA: sangra por el borde derecho y se muestra
   entera. «Casi en la proporción del mural» dependía de que la columna de
   datos midiese lo que medía; al rediseñar el panel eso deja de ser cierto y
   el recorte volvería por la puerta de atrás. Se declara la proporción exacta
   del fichero (1400x1263): con ella `cover` no recorta nada y la puerta
   pintada entra completa a cualquier ancho. El fichero no se toca. */
.visit__visual {
  position: relative;
  align-self: start;
  aspect-ratio: 1400 / 1263;
  overflow: hidden;
}
.visit__visual picture { display: block; position: absolute; inset: 0; }
.visit__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---------- 17 · FOOTER ------------------------------------------ */

.footer {
  background: var(--black);
  color: var(--ivory);
  padding: var(--s6) 0 var(--s4);
  border-top: 1px solid var(--rule-dark);
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s4);
  flex-wrap: wrap;
}
.footer__emblem { width: 52px; height: auto; mix-blend-mode: screen; }
.footer__mark { display: flex; align-items: center; gap: var(--s3); }

.footer__legal { display: flex; gap: var(--s3); flex-wrap: wrap; }
/* Enlaces legales: son destinos, no texto corrido. Se les da el alto táctil
   sin subrayarlos ni convertirlos en botones. */
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ivory-mute);
  border-bottom: 1px solid transparent;
}
.footer__legal a:hover { color: var(--ivory); border-bottom-color: var(--rule-gold); }

.footer__base {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-dark);
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory-mute);
}

/* ---------- 18 · REVELADO ----------------------------------------- */

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.no-js .reveal, .is-static .reveal { opacity: 1; transform: none; }

/* ---------- 19 · LEGAL --------------------------------------------- */

.legal-page { background: var(--paper); color: var(--ink); }
.legal-page .legal-body {
  max-width: 72ch;
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--s6)) var(--gutter) var(--s7);
}
.legal-page h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 var(--s4);
}
.legal-page h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(1.15rem, var(--t-min));
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: var(--s5) 0 var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-light);
}
.legal-page p, .legal-page li { color: var(--ink-soft); }
.legal-page .back {
  /* Enlace de vuelta: es el unico control de la pagina y a 29 px de alto el
     dedo falla. Se le da el objetivo tactil sin cambiar su dibujo. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  display: inline-block;
  margin-bottom: var(--s4);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--rule-light);
}
.legal-page mark {
  background: rgba(200, 157, 84, .22);
  color: var(--ink);
  padding: 0 4px;
}

/* ---------- 20 · RESPONSIVE ----------------------------------------- */

@media (max-width: 1180px) {
  .marta__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
  .discipline__pair { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  :root { --gutter: 5vw; --header-h: 68px; }
  .nav { display: none; }
  .burger { display: flex; }

  .scene-video__headline { grid-column: 1 / 13; }
  .scene-video__aside { grid-column: 1 / 13; align-self: start; margin-top: var(--s2); max-width: 46ch; }

  .schedule__head .display { grid-column: 1 / 9; }
  .schedule__facts { grid-column: 1 / 13; margin-top: var(--s3); }

  .app-scene__head { grid-column: 1 / 7; }
  .app-scene__phones { grid-column: 7 / 13; }

  /* MARTA: el retrato pasa arriba, a sangre por los dos lados */
  .marta { display: block; }
  .marta__inner {
    display: block;
    padding-inline: var(--gutter);
  }
  .marta__figure {
    margin: calc(var(--scene-pad) * -1) calc(var(--gutter) * -1) var(--s4);
    min-height: 62svh;
  }

  /* VISITANOS: una columna. El gate ordena INFORMACIÓN primero y fachada
     después: la dirección, los dos bloques y las tres acciones se leen antes
     de que aparezca la foto. `grid-template-areas` recoloca sin tocar el DOM,
     así que el orden de lectura y el de tabulación siguen coincidiendo. */
  .visit__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "address" "info" "cta" "visual";
    grid-template-rows: auto;
    align-content: start;
    padding-right: var(--gutter);
  }
  .visit__grid::before { width: 68%; height: 46%; }
  /* Proporción exacta del mural también aquí: la fachada entra entera, con su
     puerta pintada, sin recorte por arriba ni por los lados. */
  .visit__visual {
    margin: var(--s5) calc(var(--gutter) * -1) 0;
    aspect-ratio: 1400 / 1263;
  }
  .visit__actions { margin-top: var(--s4); max-width: none; }
}

/* Mobile: decisiones propias, no desktop comprimido */
@media (max-width: 767px) {
  /* Objetivo tactil de 44 px (gate C1.1 §16). Se gana con area de
     pulsacion, no agrandando la tipografia: el enlace subrayado conserva
     su filete donde estaba y solo crece la zona sensible. */
  .burger { min-height: 44px; padding-block: 12px; }
  .cta--textual {
    min-height: 44px;
    align-items: flex-end;
    padding-bottom: 12px;
  }
  .daybar button { min-height: 44px; }

  :root {
    --gutter: 22px;
    --scene-pad: clamp(3.4rem, 7vh, 5rem);
    /* El `--t-label: .64rem` que vivía aquí bajaba las versalitas a 10 px en
       el ancho donde MÁS se lee el sitio. Es exactamente el defecto que el
       gate §9.5 persigue: el suelo se mide en CADA breakpoint, y en móvil el
       suelo es el mismo párrafo de referencia. En móvil se aprieta el
       tracking, no el cuerpo. */
    --track-label: .08em;
    --track-label-wide: .11em;
  }

  .hero { padding-bottom: clamp(76px, 10vh, 96px); }
  .hero__inner { --word-scale: clamp(2.6rem, 17.5vw, 4.6rem); }
  .hero__cta { flex-direction: column; gap: 18px; }
  .hero__foot { justify-content: center; padding-inline: var(--gutter); }
  .hero__foot span:last-child { display: none; }

  .scene-video__headline .display,
  .index__head .display,
  .schedule__head .display,
  .app-scene__head .display,
  .visit__head .display { font-size: clamp(2.1rem, 10vw, 3.4rem); overflow-wrap: break-word; }

  /* ═══ Vídeo general de la segunda escena en móvil (gate §8) ═══════════
     Como FONDO a sangre de una escena de 90svh, un 16:9 con `cover` se
     ampliaba a 1351 px de ancho para cubrir 390: se veía el 29% del
     fotograma y la acción desaparecía. No existe en el proyecto ninguna
     variante vertical de esta pieza —comprobado en `assets/video/`—, así que
     la corrección no es reencuadrar sino cambiar de figura: en móvil la
     escena deja de ser un fondo y pasa a ser una BANDA de proporción exacta
     arriba, con el texto debajo sobre negro.

     Así el encuadre completo se ve sin `cover` y sin deformar, y el negro de
     abajo es la escena tipográfica, no un hueco. El velo y el grano dejan de
     cubrir la sección entera y se ciñen a la banda: si siguieran a `inset:0`
     apagarían también el titular. */
  .scene--video {
    min-height: 0;
    display: block;
    padding: 0 0 var(--scene-pad);
  }
  .scene-video {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--black);
  }
  .scene-video__poster,
  .scene-video__media {
    object-fit: contain;
    object-position: center;
  }
  .scene-video__wash,
  .scene-video__grain {
    inset: 0 0 auto 0;
    aspect-ratio: 16 / 9;
  }
  .scene-video__wash {
    background:
      radial-gradient(150% 78% at 26% 96%, rgba(200, 157, 84, .16) 0%, transparent 62%),
      linear-gradient(180deg,
        rgba(9, 9, 9, .55) 0%, rgba(9, 9, 9, .06) 26%,
        rgba(9, 9, 9, .06) 62%, rgba(9, 9, 9, .72) 100%);
  }
  .scene-video__inner {
    display: block;
    padding: var(--s5) var(--gutter) 0;
  }
  /* Sin la fotografía detrás, el titular necesita su propia atmósfera: una
     niebla dorada baja, la misma del hero, para que el negro no quede plano. */
  .scene-video__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -10%; right: -10%; top: 0; bottom: -20%;
    pointer-events: none;
    background: radial-gradient(70% 60% at 26% 30%,
      rgba(200, 157, 84, .13) 0%, transparent 70%);
  }
  .scene-video__aside { margin-top: var(--s3); max-width: none; }

  /* ENTRENA: 1 tarjeta + fracción de la siguiente. Las flechas se QUEDAN:
     en táctil el swipe ya funciona, pero sin un control visible nadie sabe
     que la sección continúa hacia la derecha. Se sientan sobre la fotografía
     —a la altura del tercio superior—, lejos del rótulo del pie. */
  .rail__controls { display: contents; }
  .rail__arrow { top: 22svh; width: 44px; height: 44px; font-size: 1.35rem; }
  .rail__arrow--prev { left: 10px; }
  .rail__arrow--next { right: 10px; }
  .rail__card { flex-basis: 78vw; }
  .rail__link { height: 60svh; }
  .rail__body { padding: var(--s3) var(--s2); }

  /* MARTA: retrato primero, entero, a sangre por los dos lados. Sin altura
     forzada: manda la proporción del original, así que no se pierde ni la
     cabeza ni los pies. */
  .marta__figure { margin-bottom: var(--s3); max-height: none; }
  .marta__text .scene-label--xl { font-size: clamp(1.7rem, 8.4vw, 2.4rem); letter-spacing: .08em; }
  .marta__title { font-size: clamp(2rem, 10vw, 3rem); }
  .marta__text .lead { max-width: none; }
  .marta__record { max-width: none; margin-top: var(--s4); }

  /* DISCIPLINA: apiladas y COMPLETAS —primero una, después la otra, sin
     superponerse y sin cortar manos, cabeza ni pies. Centradas, porque en una
     sola columna anclarlas a un lado sí dejaría un hueco que parece error. */
  .discipline__pair { display: block; }
  .discipline__major img { height: 62svh; object-position: center; }
  .discipline__minor { margin-top: var(--s3); }
  .discipline__minor img { height: 48svh; object-position: center; }

  .daybar { max-width: none; }
  .day-sessions { columns: 1; }

  /* MI COLISEO: apilado, una captura destacada (brief §18.9) */
  .app-scene__grid { display: block; }
  .app-scene__head { margin-bottom: var(--s4); }
  .app-scene__phones { justify-content: center; }
  .app-scene__phones .phone:nth-child(1),
  .app-scene__phones .phone:nth-child(3) { display: none; }
  .app-scene__phones .phone:nth-child(2) { width: 232px; margin-inline: 0; }
  .app-scene__field { width: 150vw; opacity: .022; left: 60%; }

  /* FAQ: una columna. */
  .faq__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .faq__col > .faq__item:last-child { border-bottom: 0; }
  .faq__cols > .faq__col:last-child > .faq__item:last-child {
    border-bottom: 1px solid var(--rule-light);
  }

  /* VISITANOS: los tres botones se apilan en dos filas antes que desbordar
     —«Cómo llegar» ocupa la fila entera y los otros dos se reparten la
     siguiente—, y la fachada conserva su proporción y su pintura. */
  .visit__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
  .visit__actions .cta:first-child { grid-column: 1 / -1; }
  .visit__actions .cta { white-space: normal; }
  .visit__info { gap: var(--s3); }
  .visit__info > * { flex: 1 1 220px; }
  .visit__address .display { font-size: clamp(1.6rem, 7.6vw, 2.2rem); }
  .visit__address .cta { width: 100%; justify-content: center; }

  .footer__top { align-items: flex-start; }
  .footer__base { flex-direction: column; gap: 10px; }
}

@media (max-width: 380px) {
  .hero__inner { --word-scale: clamp(2.4rem, 17vw, 4.2rem); }
}

/* ---------- 21 · MOVIMIENTO REDUCIDO --------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .doors, .bloom { display: none !important; }
  .intro-run .hero__inner { opacity: 1; }
  .intro-run .hero__inner > :not(.hero__emblem) { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .menu a { opacity: 1; transform: none; }

  /* R1-D8: sin autoplay. El póster permanece como fotograma estático y la
     composición tipográfica se conserva exactamente. JS nunca asigna src
     ni añade .is-video; esto sólo evita que el <video> llegue a pintarse.
     Lo mismo para la tarjeta audiovisual de KARATE: manda su póster. */
  .scene-video__media,
  .rail__video { display: none !important; }
}