/* ══════════════════════════════════════════════════════════════════
   SANTIAGO BAILA SALSA — Santiago Centro — demo CristalWeb
   ------------------------------------------------------------------
   DIRECCIÓN: «LUZ DE PISTA». Negro cálido de sala con las luces
   apagadas, y UN acento: el violeta de los focos de una pista de
   baile, que es lo que se ve cuando la música empieza. Las huellas del
   paso básico llevan un segundo tono, ámbar de escenario, que sólo
   existe ahí (la escena y el dibujo del paso): es el objeto de la
   página, no un color de texto. Transmite noche de baile sin disfraz
   de discoteque: cálida, cercana, de barrio.

   Deslinde escrito (registro de 240 filas + los cinco de Santiago):
     · El prompt pedía «noche de salsa» con vino y dorado. El vino y el
       burdeos ya existen (58-rostock guinda, y cuatro vinos más) y el
       negro con oro está DOS veces (the-temple, 132-lubricentro-sr).
       La alternativa del prompt, fucsia caliente, chocaría con el
       magenta de proceso de stgo-21-bazar-july, hecho ayer. Por eso el
       acento es VIOLETA DE FOCO (#B466FF): no hay ningún violeta sobre
       oscuro en el registro (59, 71 y 52 van sobre papel; el de
       cristalweb es un canto de dispersión, no un acento).
     · 09-san-pio (mismo lote): negro puro + rojo-naranja; acá el negro
       es CÁLIDO (#17110F) y el acento frío-violeta.
     · 208-life-motion (gimnasio, tinta azul de lapicera): se esquiva
       en color, en pieza (allá «qué preguntar antes de firmar») y en
       escena.

   TRÍO
     Display · Kaushan Script — 0 usos. Un pincel con ritmo, el de los
       afiches de salsa de toda la vida. Va sólo en los titulares y a
       tamaño grande, donde se lee sin esfuerzo.
     Cuerpo  · Be Vietnam Pro — tercera aparición, lejos en rubro.
       Grotesca clara y redonda que aguanta bien los párrafos largos
       de la pieza firma.
     Dato    · Lekton — sexta aparición, ninguna de baile. Los horarios
       y las cuentas del paso (1-2-3 · 5-6-7) con cifras tabulares.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --noche:   #17110F;
  --noche-2: #221917;
  --noche-3: #2E2321;
  --hueso:   #F4EDE6;   /* texto sobre noche: 16,4:1 */
  --medio:   #B3A79F;   /* secundario sobre noche: 8,1:1 */
  --foco:    #B466FF;   /* único acento — 5,5:1 sobre noche */
  --foco-o:  #C88CFF;   /* hover */
  --foco-t:  #6A2FB5;   /* el acento sobre hueso: 6,5:1 */
  --foco-s:  rgba(180,102,255,.12);
  --huella:  #F2B544;   /* sólo las huellas y las cuentas del paso: 9,8:1 sobre noche */
  --tinta:   #17110F;   /* texto sobre hueso */
  --medio-l: #5E534D;   /* secundario sobre hueso: 6,1:1 */
  --linea:   rgba(244,237,230,.13);
  --linea-l: rgba(23,17,15,.14);

  --display: 'Kaushan Script', 'Brush Script MT', cursive;
  --cuerpo:  'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --mono:    'Lekton', 'Consolas', ui-monospace, monospace;

  --p--1: clamp(.8rem, .77rem + .12vw, .88rem);
  --p-0:  clamp(1rem, .96rem + .2vw, 1.1rem);
  --p-1:  clamp(1.15rem, 1.08rem + .3vw, 1.35rem);
  --p-2:  clamp(1.6rem, 1.35rem + .9vw, 2.3rem);
  --p-3:  clamp(2.2rem, 1.7rem + 2vw, 3.6rem);
  --p-4:  clamp(2.9rem, 2rem + 4.2vw, 5.8rem);

  --aire:  clamp(4rem, 2.4rem + 5.5vw, 7.5rem);
  --ancho: min(100% - 2.5rem, 1120px);
  --sale:   cubic-bezier(.16, 1, .3, 1);
  --sale-2: cubic-bezier(.2, 0, 0, 1);
  /* muelle (linear(), Baseline 2026): entra, se pasa un poco y se asienta */
  --muelle: linear(0, .32 14%, .68 26%, .92 38%, 1.04 50%, 1.01 64%, .99 78%, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--noche); color: var(--hueso); font-family: var(--cuerpo); font-size: var(--p-0); line-height: 1.66; }
img { max-width: 100%; height: auto; }
a { color: var(--foco); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ancho { width: var(--ancho); margin-inline: auto; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: .005em; }
h3 { font-family: var(--cuerpo); font-weight: 600; margin: 0; line-height: 1.3; }
p { text-wrap: pretty; }

.rotulo { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .14em; text-transform: uppercase; color: var(--foco); margin: 0 0 .8rem; }
.rotulo--claro { color: var(--foco-o); }
.titulo { font-size: var(--p-3); max-width: 20ch; margin-bottom: 1rem; text-wrap: balance; }
.titulo--claro { color: var(--hueso); }
.entradilla { max-width: 60ch; color: var(--medio); font-size: var(--p-1); margin: 0 0 2rem; }
.entradilla b { color: var(--hueso); font-weight: 600; }
.sobre { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .12em; text-transform: uppercase; color: var(--foco); margin: 0 0 1.2rem; }

/* ── Dato de ejemplo ───────────────────────────────────────────── */
.ej { position: relative; border: 1px dashed rgba(180,102,255,.45); border-radius: 4px; }
.ej::after {
  content: attr(data-ejemplo); position: absolute; top: -.62rem; right: .6rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--foco); background: var(--noche); padding: 0 .35rem; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
p.ej { padding: .5rem .7rem .4rem; margin-top: .8rem; }

/* ── Botones ───────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .85rem 1.6rem;
  border: 1px solid var(--foco); border-radius: 999px;
  background: var(--foco); color: var(--noche);
  font-family: var(--cuerpo); font-size: var(--p-0); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--sale), background-color .18s, border-color .18s, box-shadow .18s;
}
.boton:hover { background: var(--foco-o); border-color: var(--foco-o); transform: translateY(-2px); box-shadow: 0 10px 30px -14px rgba(180,102,255,.8); }
.boton:active { transform: translateY(0); }
.boton--linea { background: transparent; color: var(--foco); }
.boton--linea:hover { background: var(--foco-s); box-shadow: none; }
.boton--chico { min-height: 40px; padding: .5rem 1.1rem; font-size: var(--p--1); }

/* ── Propuesta ─────────────────────────────────────────────────── */
.propuesta { background: #0E0908; color: var(--hueso); padding: .85rem clamp(1.2rem, 5vw, 3rem); border-bottom: 3px solid var(--foco); }
.propuesta__que { margin: 0 0 .3rem; font-size: var(--p--1); font-family: var(--mono); }
.propuesta__que b { color: var(--foco-o); }
.propuesta__gancho { margin: 0; font-size: var(--p--1); color: var(--medio); max-width: 96ch; line-height: 1.5; }

/* ── Cabecera ──────────────────────────────────────────────────── */
.cab { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 1rem; padding: .6rem clamp(1rem, 4vw, 2.4rem); background: rgba(23,17,15,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); transition: box-shadow .2s, background-color .2s; }
.cab--flota { box-shadow: 0 8px 26px -14px rgba(0,0,0,.9); background: rgba(23,17,15,.97); }
.cab__marca { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--hueso); min-height: 44px; }
.cab__sello { width: 30px; height: 40px; flex: none; }
.cab__sello svg { width: 100%; height: 100%; fill: var(--huella); }
.cab__nombre { font-family: var(--display); font-size: var(--p-1); line-height: 1; }
.cab__sub { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--foco); margin-top: .35rem; }
.cab__nav { display: flex; gap: 1.2rem; margin-left: auto; overflow-x: auto; }
.cab__nav a { color: var(--medio); text-decoration: none; font-size: var(--p--1); white-space: nowrap; padding: .4rem 0; border-bottom: 2px solid transparent; }
.cab__nav a:hover { color: var(--hueso); border-bottom-color: var(--foco); }
.cab__cta { margin-left: .4rem; }
@media (max-width: 1000px) { .cab__nav { display: none; } .cab__cta { margin-left: auto; min-height: 44px; } }

/* ── Portada ───────────────────────────────────────────────────── */
.portada { position: relative; isolation: isolate; min-height: min(88vh, 780px); display: flex; flex-direction: column; justify-content: center; padding: var(--aire) 0; overflow: hidden; }
.portada__foto { position: absolute; inset: 0; z-index: -2; }
.portada__foto img, .portada__video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0,0,0,.3) 40%, rgba(0,0,0,.85) 62%, #000 78%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0,0,0,.3) 40%, rgba(0,0,0,.85) 62%, #000 78%, #000 100%);
}
/* Velo del color DE la portada, en rgba y terminando en 0. */
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
      rgba(23,17,15,1) 0%, rgba(23,17,15,1) 24%,
      rgba(23,17,15,.76) 44%, rgba(23,17,15,.42) 62%,
      rgba(23,17,15,.14) 82%, rgba(23,17,15,0) 96%);
}
@media (max-width: 760px) {
  /* En el teléfono el clip va ABAJO y el texto arriba: los zapatos están en el
     borde inferior del cuadro (clip de Pexels 19851286) y con el texto abajo
     quedaban tapados por el velo. El cuadro ocupa el 64 % inferior para que la
     rebanada vertical muestre un tercio del ancho del clip y no un detalle. */
  .portada__foto { inset: auto 0 0 0; height: 64%; }
  .portada__foto img, .portada__video { object-position: 35% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 30%, #000 52%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 30%, #000 52%); }
  .portada__foto::after { background: linear-gradient(180deg, rgba(23,17,15,1) 0%, rgba(23,17,15,.7) 26%, rgba(23,17,15,.22) 56%, rgba(23,17,15,0) 100%); }
  .portada { justify-content: flex-start; min-height: 0; padding-top: 1.6rem; padding-bottom: 40vh; }
}
.portada__cols { width: var(--ancho); margin-inline: auto; position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.portada__titulo { font-size: var(--p-4); max-width: 12ch; line-height: 1.02; }
.portada__titulo span { display: block; }
.portada__titulo span:nth-child(3) { color: var(--foco); }
.portada__bajada { max-width: 46ch; color: var(--medio); font-size: var(--p-1); margin: 1.4rem 0 2rem; }
.portada__bajada b { color: var(--hueso); font-weight: 600; }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* La escena · las huellas al compás (reposo, el único bucle). Cada
   huella se enciende en su cuenta: 1-2-3, pausa, 5-6-7, pausa; el ciclo
   dura 4 s como un compás lento de salsa. Sólo opacity y scale. Con
   reduced-motion, las seis encendidas y quietas. */
.compas { justify-self: end; width: min(100%, 300px); text-align: center; position: relative; }
/* Respaldo del color DE la portada detrás de las huellas: el clip trae pantalones
   blancos justo en esa columna y el ámbar se perdía encima. */
.compas::before { content: ""; position: absolute; inset: -14% -22%; z-index: -1; background: radial-gradient(closest-side, rgba(23,17,15,.7), rgba(23,17,15,0)); }
.compas__svg { display: block; width: 100%; height: auto; overflow: visible; }
.compas__pie { margin: .4rem 0 0; font-family: var(--mono); font-size: var(--p--1); letter-spacing: .12em; text-transform: uppercase; color: var(--medio); }
.huella ellipse { fill: var(--huella); }
.huella text { font-family: var(--mono); font-weight: 700; font-size: 20px; fill: var(--noche); text-anchor: middle; }
.huella--der { transform-box: fill-box; transform-origin: center; }
.compas .huella { opacity: .22; transform-box: fill-box; transform-origin: center; animation: pisa 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.compas .h1 { --d: 0s; }   .compas .h2 { --d: .3s; }  .compas .h3 { --d: .6s; }
.compas .h5 { --d: 1.6s; } .compas .h6 { --d: 1.9s; } .compas .h7 { --d: 2.2s; }
@keyframes pisa {
  0%, 4%   { opacity: .22; transform: scale(.9); }
  9%, 26%  { opacity: 1;   transform: scale(1); }
  36%, 100% { opacity: .22; transform: scale(.9); }
}
@media (max-width: 760px) {
  .portada__cols { grid-template-columns: 1fr; }
  .compas { justify-self: start; width: min(60%, 220px); margin-top: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .compas .huella { animation: none; opacity: 1; transform: none; } }

/* ── Cifras ────────────────────────────────────────────────────── */
.cifras { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--noche-2); }
.cifras__lista { list-style: none; margin: 0 auto; padding: 1.6rem 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.cifras__lista li { display: grid; gap: .1rem; }
.cifras__lista b { font-family: var(--display); font-weight: 400; font-size: var(--p-3); line-height: 1; color: var(--foco); transform-origin: 0 60%; font-variant-numeric: tabular-nums; }
.cifras__lista span { font-size: var(--p--1); color: var(--medio); }

/* ── PIEZA FIRMA · tu primera clase ────────────────────────────── */
.primera { padding: var(--aire) 0; }
.momentos { list-style: none; margin: 0 auto; padding: 0; border-top: 1px solid var(--linea); }
.momento { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: start; padding: 1.6rem 0; border-bottom: 1px solid var(--linea); }
/* .momento__n: número hueco (relleno noche-3 + trazo hueso .55). El auditor de contraste mide el relleno y da 1,2:1; el número se lee por el trazo, es decorativo y va aria-hidden. */
.momento__n { font-family: var(--display); font-size: var(--p-4); line-height: .85; color: var(--noche-3); -webkit-text-stroke: 1.5px rgba(244,237,230,.55); }
.momento h3 { font-size: var(--p-1); margin-bottom: .35rem; }
.momento p { margin: 0; color: var(--medio); max-width: 62ch; }
.momento p b { color: var(--hueso); }
.momento--clave { background: linear-gradient(90deg, var(--foco-s), transparent 70%); border-left: 3px solid var(--foco); padding-left: 1rem; margin-left: -1.2rem; padding-right: 1rem; }
.momento--clave .momento__n { color: var(--foco); -webkit-text-stroke: 0; }
@media (max-width: 760px) { .momento { grid-template-columns: 3.2rem 1fr; } .momento--clave { margin-left: 0; } }
.paso { margin: 1.2rem 0 0; padding: 1.2rem; background: var(--noche-2); border-radius: 12px; max-width: 640px; }
.paso__svg { display: block; width: 100%; height: auto; overflow: visible; }
.paso__linea { stroke: rgba(244,237,230,.18); stroke-width: 2; stroke-dasharray: 6 8; }
.paso figcaption { margin: .8rem 0 0; font-size: var(--p--1); color: var(--medio); }
.huella.quieta { opacity: 1; }
.primera__extras { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); margin-top: 2.5rem; align-items: start; }
@media (max-width: 860px) { .primera__extras { grid-template-columns: 1fr; } }
.llevar { padding: 1.4rem 1.6rem; background: var(--noche-2); border-radius: 12px; }
.llevar__t { font-family: var(--display); font-weight: 400; font-size: var(--p-2); margin-bottom: .8rem; }
.llevar__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; color: var(--medio); font-size: var(--p--1); }
.llevar__lista li { padding-left: 1.4rem; position: relative; }
.llevar__lista li::before { content: ""; position: absolute; left: 0; top: .5rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--huella); }
.llevar__lista b { color: var(--hueso); }
.reserva { padding: clamp(1.2rem, 3vw, 2rem); background: var(--noche-2); border-radius: 12px; }
.reserva.ej::after { background: var(--noche-2); }
.reserva__t { font-family: var(--display); font-weight: 400; font-size: var(--p-2); margin: 0 0 1rem; }
.reserva__campos { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.reserva label { display: grid; gap: .35rem; font-family: var(--mono); font-size: var(--p--1); letter-spacing: .06em; text-transform: uppercase; color: var(--medio); min-width: 0; }
.reserva input, .reserva select { width: 100%; min-width: 0; min-height: 48px; padding: .6rem .8rem; background: var(--noche); color: var(--hueso); border: 1px solid var(--linea); border-radius: 8px; font-family: var(--cuerpo); font-size: var(--p-0); letter-spacing: 0; text-transform: none; }
.reserva input:focus, .reserva select:focus { border-color: var(--foco); outline: none; box-shadow: 0 0 0 3px var(--foco-s); }
.reserva input::placeholder { color: #7E736C; }
.reserva__salida { margin: 1.2rem 0 0; font-family: var(--mono); font-size: var(--p--1); color: var(--medio); white-space: pre-wrap; border-left: 3px solid var(--foco); padding: .5rem .8rem; }
.reserva__salida:empty { display: none; }
.reserva__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.reserva__nota { margin: 1rem 0 0; font-size: var(--p--1); color: var(--medio); max-width: 72ch; }

/* ── Niveles y horarios (sección CLARA) ────────────────────────── */
.niveles { padding: var(--aire) 0; background: var(--hueso); color: var(--tinta); }
.niveles .rotulo { color: var(--foco-t); }
.niveles .entradilla { color: var(--medio-l); }
.niveles .ej { border-color: rgba(106,47,181,.5); }
.niveles .ej::after { color: var(--foco-t); background: var(--hueso); }
.niveles__cols { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); align-items: start; }
@media (max-width: 860px) { .niveles__cols { grid-template-columns: 1fr; } }
.tabla-niveles { list-style: none; margin: 0; padding: 1rem 1.2rem .6rem; display: grid; }
.tabla-niveles li { display: grid; grid-template-columns: 9rem 1fr; gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--linea-l); }
.tabla-niveles li:first-child { border-top: 0; }
.tabla-niveles b { font-family: var(--display); font-weight: 400; font-size: var(--p-1); color: var(--foco-t); }
.tabla-niveles span { color: var(--medio-l); font-size: var(--p--1); }
@media (max-width: 480px) { .tabla-niveles li { grid-template-columns: 1fr; gap: .2rem; } }
.horario { margin: 0; display: grid; padding: 1rem 1.2rem .6rem; background: #FFFFFF; border-radius: 10px; }
.horario > div { display: grid; grid-template-columns: 1fr auto; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--linea-l); font-size: var(--p--1); }
.horario > div:first-child { border-top: 0; }
.horario dt { color: var(--medio-l); }
.horario dd { margin: 0; font-family: var(--mono); font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.horario.ej::after { background: #FFFFFF; }

/* ── Tajo ──────────────────────────────────────────────────────── */
.tajo { position: relative; margin: 0; isolation: isolate; min-height: min(54vh, 460px); display: flex; align-items: flex-end; overflow: hidden; }
.tajo img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.tajo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(23,17,15,.96) 0%, rgba(23,17,15,.8) 32%, rgba(23,17,15,.3) 62%, rgba(23,17,15,0) 92%); }
.tajo__txt { width: var(--ancho); margin-inline: auto; padding: 2.5rem 0; }
.tajo__txt h2 { font-size: var(--p-3); max-width: 22ch; }
.tajo__txt p { max-width: 52ch; color: var(--medio); margin: .9rem 0 0; }

/* ── La escuela, con telón ─────────────────────────────────────── */
.escuela { padding: var(--aire) 0; background: var(--noche-2); }
.con-telon { position: relative; isolation: isolate; overflow: hidden; }
.telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.telon img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: .14;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 74%, transparent 100%);
}
.escuela .entradilla.ej { padding: .8rem 1rem .6rem; }
.escuela .ej::after { background: var(--noche-2); }
.fichas { list-style: none; margin: 0; padding: 1.2rem 1rem .8rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ficha { padding: 1rem; background: var(--noche); border-radius: 10px; }
.ficha h3 { font-size: var(--p-0); margin: 0 0 .25rem; }
.ficha p { margin: 0; font-size: var(--p--1); color: var(--medio); }
.ficha__hueco { aspect-ratio: 3 / 4; margin-bottom: .8rem; display: grid; place-items: center; border: 1px dashed rgba(244,237,230,.24); border-radius: 6px; color: var(--medio); font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; background: repeating-linear-gradient(135deg, rgba(244,237,230,.03) 0 8px, transparent 8px 16px); }

/* ── Cita ──────────────────────────────────────────────────────── */
.cita { position: relative; margin: 0; isolation: isolate; min-height: min(52vh, 420px); display: grid; place-items: center; overflow: hidden; }
.cita img, .cita__video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cita::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(14,9,8,.72); }
.cita__txt { margin: 0; width: var(--ancho); padding: 3rem 0; }
.cita__txt p { font-family: var(--display); font-size: var(--p-3); color: var(--hueso); max-width: 24ch; margin: 0 auto; text-align: center; line-height: 1.2; }

/* ── Mosaico ───────────────────────────────────────────────────── */
.mos { padding: var(--aire) 0; }
.mos__grilla { display: grid; gap: 4px; grid-template-columns: repeat(3, 1fr); width: var(--ancho); margin: 1rem auto 0; border-radius: 12px; overflow: hidden; }
.mos__p { margin: 0; overflow: hidden; background: var(--noche-3); }
.mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
.mos__p img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--sale), filter .5s; filter: saturate(.9); }
.mos__p:hover img { transform: scale(1.05); filter: saturate(1.05); }
@media (max-width: 640px) { .mos__grilla { grid-template-columns: repeat(2, 1fr); } }

/* ── Dónde y reserva ───────────────────────────────────────────── */
.reserva-sec { padding: var(--aire) 0; background: var(--noche-2); }
.reserva-sec__cols { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.datos { margin: 0 0 1rem; display: grid; }
.datos > div { display: grid; grid-template-columns: 7rem 1fr; gap: .6rem; padding: .6rem .4rem; border-top: 1px solid var(--linea); align-items: center; }
.datos dt { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .06em; text-transform: uppercase; color: var(--medio); }
.datos dd { margin: 0; }
.datos dd a { display: inline-flex; align-items: center; min-height: 44px; }
.datos > div.ej { border-top: 0; margin-top: .6rem; padding: .7rem .6rem .5rem; }
.datos > div.ej::after { background: var(--noche-2); }
@media (max-width: 480px) { .datos > div { grid-template-columns: 1fr; gap: .1rem; } }
.pedir { background: var(--noche); border: 1px solid var(--linea); border-radius: 12px; padding: clamp(1.2rem, 3vw, 2rem); }
.pedir__t { font-family: var(--display); font-weight: 400; font-size: var(--p-2); margin-bottom: 1rem; }
.pasos { margin: 0 0 1.2rem; padding-left: 1.2rem; display: grid; gap: .7rem; color: var(--medio); }
.pasos b { color: var(--hueso); }
.flecha { display: inline-flex; align-items: center; min-height: 44px; color: var(--foco); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(180,102,255,.4); padding-bottom: .05rem; }
.flecha:hover { border-bottom-color: var(--foco); }
.flecha--claro { color: var(--foco-o); }

/* ── Para la escuela ───────────────────────────────────────────── */
.dueno { padding: var(--aire) 0; background: #0E0908; color: var(--hueso); border-top: 1px solid var(--linea); }
.dueno__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1rem; }
.dueno__cols h3 { font-size: var(--p-1); color: var(--foco-o); margin-bottom: .5rem; }
.dueno__cols p { margin: 0; color: var(--medio); font-size: var(--p--1); }
.dueno__cols b { color: var(--hueso); }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 2.5rem 0 0; }

/* ── Pie ───────────────────────────────────────────────────────── */
.pie { background: #080504; color: #8E837B; padding: 2rem clamp(1.2rem, 5vw, 3rem); }
.pie p { margin: 0; font-size: var(--p--1); max-width: 92ch; }

/* ══ Animación (reglas atómicas: opacidad corta, transform largo) ═══ */
.js .rev { opacity: 0; transform: translateY(22px); }
.js .rev.ok { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .6s var(--sale); }
.js .portada__texto > * { animation: entra .8s var(--muelle) both; }
.js .sobre           { animation-delay: .05s; }
.js .portada__titulo { animation-delay: .14s; }
.js .portada__bajada { animation-delay: .26s; }
.js .acciones        { animation-delay: .36s; }
@keyframes entra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* El dibujo del paso se enciende huella por huella al entrar en vista
   (@starting-style no aplica a transitions disparadas por clase; se usa
   transition-delay por hijo, como el resto de la casa). */
.js .paso.rev .huella.quieta { opacity: 0; transform: scale(.85); }
.js .paso.rev.ok .huella.quieta { opacity: 1; transform: scale(1); transition: opacity .3s ease-out, transform .5s var(--muelle); transition-delay: calc(var(--i, 0) * 140ms); }
.paso .huella:nth-of-type(1) { --i: 0; } .paso .huella:nth-of-type(2) { --i: 1; } .paso .huella:nth-of-type(3) { --i: 2; }
.paso .huella:nth-of-type(4) { --i: 4; } .paso .huella:nth-of-type(5) { --i: 5; } .paso .huella:nth-of-type(6) { --i: 6; }

/* Cascadas por contenedor: 70 ms de stagger. */
.js .momentos.rev, .js .mos__grilla.rev, .js .cifras__lista.rev, .js .fichas.rev, .js .llevar__lista.rev, .js .tabla-niveles.rev { opacity: 1; transform: none; transition: none; }
.js .momentos.rev > *, .js .mos__grilla.rev > *, .js .cifras__lista.rev > *, .js .fichas.rev > *, .js .llevar__lista.rev > *, .js .tabla-niveles.rev > * { opacity: 0; transform: translateY(26px); }
.js .momentos.rev.ok > *, .js .mos__grilla.rev.ok > *, .js .cifras__lista.rev.ok > *, .js .fichas.rev.ok > *, .js .llevar__lista.rev.ok > *, .js .tabla-niveles.rev.ok > * {
  opacity: 1; transform: none;
  transition: opacity .3s ease-out, transform .6s var(--sale);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.momentos > :nth-child(1), .mos__grilla > :nth-child(1), .cifras__lista > :nth-child(1), .fichas > :nth-child(1), .llevar__lista > :nth-child(1), .tabla-niveles > :nth-child(1) { --i: 0; }
.momentos > :nth-child(2), .mos__grilla > :nth-child(2), .cifras__lista > :nth-child(2), .fichas > :nth-child(2), .llevar__lista > :nth-child(2), .tabla-niveles > :nth-child(2) { --i: 1; }
.momentos > :nth-child(3), .mos__grilla > :nth-child(3), .cifras__lista > :nth-child(3), .fichas > :nth-child(3), .llevar__lista > :nth-child(3), .tabla-niveles > :nth-child(3) { --i: 2; }
.momentos > :nth-child(4), .mos__grilla > :nth-child(4), .cifras__lista > :nth-child(4), .llevar__lista > :nth-child(4) { --i: 3; }
.momentos > :nth-child(5), .mos__grilla > :nth-child(5) { --i: 4; }
.mos__grilla > :nth-child(6) { --i: 5; }

@media (prefers-reduced-motion: reduce) {
  .js .portada__texto > * { animation: none; }
  .mos__p:hover img { transform: none; }
  .js .rev, .js .momentos.rev > *, .js .mos__grilla.rev > *, .js .cifras__lista.rev > *, .js .fichas.rev > *, .js .llevar__lista.rev > *, .js .tabla-niveles.rev > *, .js .paso.rev .huella.quieta { opacity: 1; transform: none; }
  .boton:hover { transform: none; }
}

/* ══ Video de fondo (05-09-2026) ══════════════════════════════════
   La foto de portada es la base (siempre se carga; es lo que ve quien
   pidió menos movimiento, quien ahorra datos o quien no tiene JS). El
   video va ENCIMA, con la misma máscara y encuadre (comparte el
   selector de la foto), y aparece cuando ya puede reproducirse.
   Presupuesto: portada ≤ 1,8 MB, banda ≤ 1,2 MB, 720p sin audio. */
.portada__video, .cita__video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.portada__video.video--ver, .cita__video.video--ver { opacity: 1; }
/* Difuminado al hacer scroll (scroll-driven animations, Baseline 2026). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .portada__foto { animation: portada-se-va linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; }
    .cita { animation: cita-enfoca linear both; animation-timeline: view(block); animation-range: entry 0% entry 95%; }
  }
}
@keyframes portada-se-va { to { filter: blur(14px) brightness(.8); transform: scale(1.06); } }
@keyframes cita-enfoca { from { filter: blur(16px); } to { filter: blur(0); } }

/* ── WHATSAPP FLOTANTE ──────────────────────────────────────────────
   56 px de alto, por encima del minimo tactil de 44. Verde de WhatsApp
   a proposito: se reconoce sin leerlo, y eso es lo que hace que se toque.
   Se ve SIEMPRE por defecto; el JS solo lo aparta sobre la portada. Al
   reves, un fallo del script se llevaria el CTA principal. */
.wapp {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex; align-items: center; gap: .55rem;
  height: 56px; padding: 0 1.15rem 0 1rem;
  border-radius: 999px;
  background: #25D366; color: #07310F;
  text-decoration: none;
  font-family: var(--cuerpo, system-ui, sans-serif);
  font-size: .95rem; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .26), 0 2px 6px rgba(0, 0, 0, .16);
  transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease;
}
.wapp__i { width: 26px; height: 26px; fill: currentColor; flex: none; }
.wapp:hover, .wapp:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.js .wapp--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }

@media (max-width: 520px) {
  .wapp { width: 56px; padding: 0; justify-content: center; }
  .wapp__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .wapp { transition: opacity .28s ease; }
  .wapp:hover, .wapp:focus-visible { transform: none; }
  .js .wapp--arriba { transform: none; }
}
/* ── MAPA DE UBICACIÓN ──────────────────────────────────────────────
   La escuela no publica dirección exacta, sólo el sector. El mapa va a
   ese nivel y el pie lo dice: marcar una puerta que no sabemos sería
   inventar. Reemplaza al enlace suelto de «Ver en el mapa».
   Imagen propia con mosaicos de OpenStreetMap: la CSP prohíbe pedir nada
   a un tercero y un iframe de Google Maps quedaría en blanco sin dar un
   solo error. La atribución a OSM la exige su licencia. */
.mapa { margin: 1.4rem 0 0; border: 1px solid rgba(244,237,230,.16); border-radius: 10px; overflow: hidden; }
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: .75rem .9rem;
  font-size: var(--p--1); line-height: 1.45;
  color: var(--medio); background: rgba(23,17,15,.94);
  border-top: 1px solid rgba(244,237,230,.16);
}
.mapa__pie b { color: var(--hueso); }
.mapa__ir { color: var(--foco-o); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.mapa__ir:hover, .mapa__ir:focus-visible { text-decoration: underline; }
.mapa__cred { width: 100%; font-size: .82em; opacity: .85; }
.mapa__cred a { color: var(--medio); }