/* ==========================================================================
   PANTERA FITNESS · ESTILOS
   Motivo: la diagonal de los tubos de luz del techo ( / \ / \ ).
   Movimiento: tres gestos y nada más.
     1. Encendido: parpadeo de fluorescente que arranca y queda.
     2. Barrido: luz o máscara que avanza en diagonal (52°, el ángulo de los tubos).
     3. Respiración: brillo que sube y baja muy lento.
   ========================================================================== */

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/barlow-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("assets/fonts/barlow-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Respaldo con métricas parecidas mientras cargan las fuentes (evita saltos). */
@font-face {
  font-family: "Condensada Respaldo";
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Roboto Condensed Bold"), local("Arial Bold"), local("Arial");
  size-adjust: 88%; ascent-override: 102%; descent-override: 26%;
}

:root {
  /* Color: el naranja sale del logo oficial (#E97740). */
  --negro: #000;
  --s1: #0e0e0e;
  --s2: #171717;
  --s3: #232323;
  --linea: #2d2d2d;
  --naranja: #e97740;
  --naranja-vivo: #f38d59;
  --texto: #f3eee7;
  --texto-2: #bdb6ac;
  --texto-3: #958f86;
  --luz: #fff9ee;
  --grano: url("assets/img/grano.webp");

  --f-titulo: "Barlow Condensed", "Condensada Respaldo", "Arial Narrow", sans-serif;
  --f-texto: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --ancho: 1240px;
  --d: clamp(28px, 6vw, 88px); /* altura de la diagonal entre secciones */
  --barra: 64px;
  --radio: 3px;
  /* margen lateral que alinea encabezado y héroe con el ancho del contenido */
  --borde: max(var(--gutter), calc((100vw - var(--ancho)) / 2));

  /* ---- Tokens de movimiento ---- */
  --dur-destello: 120ms;  /* parpadeos */
  --dur-rapida: 180ms;    /* respuesta a hover y clic */
  --dur-media: 360ms;     /* transiciones de interfaz */
  --dur-lenta: 700ms;     /* revelados con el scroll */
  --curva-salida: cubic-bezier(.16, 1, .3, 1);  /* encendido: rápido y se asienta, sin rebote */
  --curva-entrada: cubic-bezier(.7, 0, .84, 0); /* apagado */
  --curva-suave: cubic-bezier(.4, 0, .2, 1);
  --dist-1: 12px;
  --dist-2: 32px;
  --dist-3: 64px;
  --diag: 52deg;          /* ángulo de los tubos del techo */
}
@media (min-width: 900px) { :root { --barra: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--negro);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--barra) + 12px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font: 400 1.0625rem/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
/* Mientras llega secciones.css no hay transiciones: si no, los colores "animarían" desde los valores por defecto. */
.precarga *, .precarga *::before, .precarga *::after { transition: none !important; }

h1, h2, h3 { margin: 0; font-family: var(--f-titulo); font-weight: 800; line-height: .92; letter-spacing: -.005em; text-wrap: balance; }
h2 { font-size: clamp(2.6rem, 1.7rem + 4.2vw, 5.4rem); max-width: 15ch; margin-bottom: .35em; }
h3 { font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.3rem); }

.i { width: 1.25em; height: 1.25em; flex: none; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--luz); outline-offset: 3px; }

.envase { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; position: relative; z-index: 1; }
.seccion { position: relative; padding-block: clamp(72px, 9vw, 136px); }
.bajada { color: var(--texto-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); max-width: 52ch; }
.nota { color: var(--texto-3); font-size: .95rem; max-width: 62ch; margin-top: 28px; }

/* Links: subrayado con punta diagonal que se barre al pasar el mouse. */
.enlace {
  position: relative; display: inline-block; color: var(--naranja); font-weight: 600;
  text-decoration: none; padding-bottom: 3px;
}
.enlace::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor; transform-origin: 0 50%;
  clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.enlace:hover { color: var(--naranja-vivo); }
.enlace--boton { background: none; border: 0; padding: 0 0 3px; font: inherit; font-weight: 600; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .enlace:hover::after { animation: subrayar var(--dur-media) var(--curva-salida); }
}
@keyframes subrayar { from { transform: scaleX(0); } }

/* ---------- Ritmo entre secciones: negro, gris con grano, naranja pleno ---------- */
.corte {
  position: relative;
  margin-top: calc(var(--d) * -1);
  padding-top: calc(var(--d) + clamp(64px, 8vw, 120px));
  clip-path: polygon(0 var(--d), 100% 0, 100% 100%, 0 100%);
}
.corte--inv { clip-path: polygon(0 0, 100% var(--d), 100% 100%, 0 100%); }
/* El grano es una baldosa de 5 KB que se repite de fondo: no tapa texto ni se anima.
   Se aplica cuando la página terminó de cargar (clase .cargada) para no competir con la foto principal. */
.porque, .clases, .planes, .preguntas, .pie { background: var(--s1); }
.espacios, .equipo, .comunidad, .testimonios, .ubicacion, .instagram { background: var(--negro); }
.cargada :is(.porque, .clases, .planes, .preguntas, .pie) { background: var(--grano), var(--s1); }
.cargada :is(.espacios, .equipo, .comunidad, .testimonios, .ubicacion, .instagram) { background: var(--grano), var(--negro); }
.comunidad, .instagram { overflow: clip; }
/* Lo que está lejos de la pantalla no se maqueta ni se pinta hasta que se acerca. */
.espacios, .clases, .equipo, .planes, .visita, .comunidad, .testimonios, .instagram, .preguntas, .ubicacion, .pie {
  content-visibility: auto; contain-intrinsic-size: auto 1400px;
}

/* Haces de luz diagonales que derivan muy lento (solo transform; se pausan fuera de pantalla). */
.con-haces { overflow: clip; }
.con-haces::before {
  /* Tamaño fijo: si dependiera del alto de la sección, la capa "saltaría" cuando la sección crece
     (al cargar la fuente o las cifras). La sección la recorta igual. */
  content: ""; position: absolute; top: -120px; left: -35%; width: 170%; height: 3200px; z-index: 0; pointer-events: none;
  transform: translate3d(-5%, 0, 0); will-change: transform;
  background:
    linear-gradient(128deg, transparent 18%, rgba(255, 236, 214, .045) 22%, transparent 27%),
    linear-gradient(128deg, transparent 52%, rgba(255, 236, 214, .03) 55%, transparent 59%),
    linear-gradient(128deg, transparent 74%, rgba(233, 119, 64, .05) 77%, transparent 81%);
}
@media (prefers-reduced-motion: no-preference) {
  .con-haces::before { animation: deriva 38s var(--curva-suave) 1.5s infinite alternate both; }
}
@keyframes deriva { from { transform: translate3d(-5%, 0, 0); } to { transform: translate3d(5%, 0, 0); } }

/* Luz de neón que sigue al puntero (la mueve movimiento.js con transform). */
.luz-puntero {
  position: absolute; left: 0; top: 0; z-index: 0; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 119, 64, .13) 0, rgba(233, 119, 64, .05) 38%, transparent 68%);
  pointer-events: none; opacity: 0; transition: opacity var(--dur-media) var(--curva-suave);
  will-change: transform;
}
.luz-puntero.visible { opacity: 1; }

/* Animaciones continuas pausadas cuando su bloque no está en pantalla. */
.en-pausa, .en-pausa *, .en-pausa::before, .en-pausa *::before, .en-pausa *::after { animation-play-state: paused !important; }

/* ---------- Botones: brillo neón, barrido de luz y presión al clic ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 1.35em;
  border: 2px solid transparent; border-radius: var(--radio);
  font: 600 1.0625rem/1.1 var(--f-texto); text-decoration: none; text-align: center;
  transition: background-color var(--dur-rapida), color var(--dur-rapida), border-color var(--dur-rapida),
    transform 90ms var(--curva-suave);
}
.btn::before { /* franja de luz */
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: -45%; width: 32%;
  background: linear-gradient(100deg, transparent, rgba(255, 250, 240, .5), transparent);
  transform: skewX(-28deg); opacity: 0; pointer-events: none;
}
.btn::after { /* brillo interior, como un tubo encendido */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 16px 1px rgba(255, 236, 210, .55); opacity: 0;
  transition: opacity var(--dur-rapida) var(--curva-suave);
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover::before {
    opacity: 1; transform: translateX(480%) skewX(-28deg);
    transition: transform .65s var(--curva-salida), opacity var(--dur-destello);
  }
}
.btn--primario { background: var(--naranja); color: #000; }
.btn--primario:hover { background: var(--naranja-vivo); }
.btn--linea { border-color: #6d675f; color: var(--texto); }
.btn--linea:hover { border-color: var(--texto); }
.btn--linea::after { box-shadow: inset 0 0 14px rgba(233, 119, 64, .45); }
.btn--negro { background: #000; color: var(--texto); }
.btn--negro:hover { background: #1c1c1c; }
.btn--wa { background: var(--naranja); color: #000; min-height: 44px; padding: 0 1em; }
.btn--wa:hover { background: var(--naranja-vivo); }
.btn:disabled { opacity: .4; cursor: default; }
.btn:disabled::before, .btn:disabled::after { display: none; }

/* ---------- Encabezado ---------- */
.saltar {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  background: var(--naranja); color: #000; padding: 12px 18px; font-weight: 600;
  transform: translateY(-160%);
}
.saltar:focus { transform: none; }

.barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  height: var(--barra); padding-inline: max(var(--gutter), calc((100% - var(--ancho)) / 2));
  background: rgba(0, 0, 0, .94);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, transform var(--dur-media) var(--curva-salida);
}
/* Al bajar se esconde y deja visible solo la línea de progreso (3 px). */
.barra.oculta { transform: translateY(calc(-100% + 3px)); }
.barra.con-borde { border-bottom-color: #1c1c1c; }
.barra__progreso {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--naranja) 85%, #ffc9a4);
  transform-origin: 0 50%; transform: skewX(-45deg) scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .barra__progreso { animation: progreso linear both; animation-timeline: scroll(root); }
}
@keyframes progreso { from { transform: skewX(-45deg) scaleX(0); } to { transform: skewX(-45deg) scaleX(1); } }
.barra__logo { flex: none; display: block; }
.barra__logo img { height: 46px; width: auto; }
.estado {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 4px; margin-right: auto;
  font-size: .875rem; line-height: 1.2; color: var(--texto-2); text-decoration: none;
  min-width: 0;
}
.estado__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estado__luz { position: relative; width: 14px; height: 4px; border-radius: 2px; background: #4a4a4a; transform: rotate(-35deg); flex: none; }
.estado__luz::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: var(--luz); box-shadow: 0 0 8px 2px rgba(255, 236, 205, .55);
}
.estado.abierto .estado__luz::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .estado.abierto .estado__luz::after { animation: encender .9s linear 1.2s backwards; }
}
.estado.abierto .estado__txt { color: var(--texto); }

.barra__nav { display: none; }
.barra__menu {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 10px; border: 0; background: none; font-weight: 600; font-size: .95rem;
}
.barra__menu-raya, .barra__menu-raya::before {
  display: block; width: 18px; height: 2px; background: currentColor; position: relative;
  transition: transform var(--dur-rapida) var(--curva-salida);
}
.barra__menu-raya::before { content: ""; position: absolute; top: 6px; left: 0; }
.barra__menu[aria-expanded="true"] .barra__menu-raya { transform: translateY(3px) rotate(45deg); }
.barra__menu[aria-expanded="true"] .barra__menu-raya::before { transform: translateY(-6px) rotate(-90deg); }
.barra__wa span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 899.98px) {
  .barra__nav.abierto {
    display: flex; flex-direction: column;
    position: absolute; top: var(--barra); left: 0; right: 0;
    padding: 8px var(--gutter) 24px; background: #000; border-bottom: 1px solid var(--linea);
  }
  .barra__nav.abierto a {
    padding: 12px 0; font: 800 2rem/1 var(--f-titulo); text-decoration: none;
    border-bottom: 1px solid var(--s3);
  }
  @media (prefers-reduced-motion: no-preference) {
    .barra__nav.abierto { animation: persiana var(--dur-media) var(--curva-salida); }
    .barra__nav.abierto a { animation: asomar var(--dur-media) var(--curva-salida) backwards; }
    .barra__nav.abierto a:nth-child(2) { animation-delay: 40ms; }
    .barra__nav.abierto a:nth-child(3) { animation-delay: 80ms; }
    .barra__nav.abierto a:nth-child(4) { animation-delay: 120ms; }
    .barra__nav.abierto a:nth-child(5) { animation-delay: 160ms; }
  }
}
@keyframes persiana { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 359.98px) { .barra__menu-txt { display: none; } }
@media (min-width: 480px) { .barra__wa span { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
@media (min-width: 900px) {
  .barra { gap: 24px; }
  .barra__logo img { height: 56px; }
  .estado { font-size: .9375rem; }
  .barra__menu { display: none; }
  .barra__nav { display: flex; gap: 4px; }
  .barra__nav a {
    position: relative; padding: 10px 12px; text-decoration: none; font-weight: 600; font-size: .98rem; color: var(--texto-2);
  }
  .barra__nav a::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--naranja);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-media) var(--curva-salida);
    clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
  }
  .barra__nav a:hover { color: var(--texto); }
  .barra__nav a:hover::after { transform: scaleX(1); }
}

/* ---------- Héroe: el momento firma ---------- */
.heroe { display: grid; grid-template-columns: 100%; background: var(--negro); position: relative; z-index: 1; container-type: inline-size; }
@supports (width: 1cqw) { .heroe > * { --borde: max(var(--gutter), calc((100cqw - var(--ancho)) / 2)); } }
.heroe__foto {
  grid-area: 1 / 1; position: relative; overflow: hidden;
  aspect-ratio: 4284 / 5262;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--d)), 0 100%);
}
/* Foto, luces y penumbra se mueven juntas: así los tubos siguen alineados. */
.heroe__parallax, .heroe__camara { position: absolute; inset: 0; }
.heroe__camara picture { display: block; height: 100%; }
.heroe__foto img, .heroe__video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.heroe__video { position: absolute; inset: 0; }
.con-video .luces { display: none; }
/* En tablets y celulares acostados la foto vertical se recorta abajo para que
   los botones entren en la primera pantalla. Las luces siguen la foto entera. */
@media (max-width: 899.98px) {
  .heroe__foto { aspect-ratio: auto; height: min(100cqw * 5262 / 4284, max(72svh, 420px)); }
}
.heroe__foto::after {
  /* Oscurece la parte baja (el piso) para que el título se lea. */
  content: ""; position: absolute; inset: 45% 0 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.82) 70%);
}
.heroe__penumbra { position: absolute; inset: 0; background: #000; opacity: .12; }
/* Tubos de luz sobre los tubos reales de la foto. Las variables --x0/--y0/--w0/--h0
   son el recorte de la foto original que se ve en cada pantalla. Solo se anima
   la opacidad, que el navegador resuelve en la GPU. */
.luces {
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 4284 / 5262;
  pointer-events: none; container-type: inline-size;
  --x0: 0; --y0: 450; --w0: 4284; --h0: 5262;
}
.tubo {
  position: absolute;
  left: calc((var(--cx) - var(--x0)) / var(--w0) * 100%);
  top: calc((var(--cy) - var(--y0)) / var(--h0) * 100%);
  width: calc((var(--l) + 44) / var(--w0) * 100cqw);
  height: calc(44 / var(--w0) * 100cqw);
  border-radius: 999px;
  background: #fffdf6;
  box-shadow: 0 0 1.4cqw .5cqw rgba(255, 226, 184, .7), 0 0 5cqw 1.6cqw rgba(255, 206, 150, .28);
  transform: translate(-50%, -50%) rotate(var(--a));
}
@media (min-width: 900px) { .luces { --y0: 600; --h0: 3300; aspect-ratio: 4284 / 3300; } }

/* Título: dos líneas que suben desde una máscara; "por el nombre." carga como un neón. */
.heroe__titulo {
  grid-area: 1 / 1; align-self: end; position: relative; z-index: 2;
  padding: 0 var(--gutter) calc(var(--d) * .55);
  font-size: clamp(2.9rem, .9rem + 9.4vw, 7.2rem); line-height: .88;
}
.heroe__titulo .linea {
  /* La máscara recorta solo en vertical: así el brillo del neón no queda en un rectángulo. */
  display: block; overflow-x: visible; overflow-y: clip;
  padding: .3em 0 .3em; margin: -.3em 0 -.3em; /* aire para acentos, descendentes y brillo */
}
.heroe__titulo .linea > span { display: block; }
/* El brillo es un pseudo-elemento: no duplica el texto en el HTML (Google, copiar y pegar, lectores). */
.neon { display: inline-grid; color: var(--naranja); }
.neon > span, .neon::after { grid-area: 1 / 1; } /* el texto y su brillo en la misma celda */
.neon::after { pointer-events: none; user-select: none; opacity: .88;
  content: attr(data-texto); content: attr(data-texto) / "";
  color: #ff9a62;
  text-shadow: 0 0 .02em rgba(255, 240, 225, .6), 0 0 .12em rgba(255, 130, 70, .75), 0 0 .38em rgba(233, 119, 64, .32);
}
.heroe__resto { padding: 18px var(--gutter) clamp(48px, 7vw, 88px); position: relative; z-index: 2; }
.heroe__bajada { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3rem); color: var(--texto-2); max-width: 40ch; margin-bottom: 24px; }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.heroe__acciones .btn { flex: 1 1 auto; }
/* Indicador de scroll: una luz que baja por un tubo. */
.heroe__bajar {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; min-height: 44px;
  color: var(--texto-2); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.heroe__bajar:hover { color: var(--texto); }
.heroe__bajar-tubo { position: relative; width: 3px; height: 40px; border-radius: 2px; background: #2c2c2c; overflow: hidden; }
.heroe__bajar-tubo::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%;
  background: var(--luz); box-shadow: 0 0 6px var(--luz); transform: translateY(80%);
}

@media (prefers-reduced-motion: no-preference) {
  .heroe__penumbra { opacity: .84; animation: amanecer 1.5s cubic-bezier(.2, .7, .2, 1) 1.7s forwards; will-change: opacity; }
  .tubo { opacity: 0; will-change: opacity; animation: encender .95s linear forwards; animation-delay: calc(.4s + var(--i) * .24s); }
  .heroe__titulo .linea > span { animation: subir var(--dur-lenta) var(--curva-salida) .1s backwards; }
  .heroe__titulo .linea:nth-child(2) > span { animation-delay: .24s; }
  /* Una animación por elemento (la carga en el brillo, la respiración en la palabra):
     así las dos se resuelven en la GPU sin repintar. */
  .neon { will-change: opacity; animation: respira 5s var(--curva-suave) 2.6s infinite alternate; }
  .neon::after { opacity: 0; will-change: opacity; animation: neon-carga 1.1s linear 1.35s forwards; }
  .heroe__resto > * { animation: asomar var(--dur-lenta) var(--curva-salida) backwards; }
  .heroe__bajada { animation-delay: .45s !important; }
  .heroe__acciones { animation-delay: .6s !important; }
  .heroe__bajar { animation-delay: 1.1s !important; }
  .heroe__bajar-tubo::after { animation: bajar 2.4s var(--curva-suave) 2.2s 3 backwards; } /* tres pasadas y queda quieto */
  /* Parallax suave (solo transform, ligado al scroll) y cámara lenta. */
  .heroe__parallax { transform: scale(1.1); transform-origin: 50% 100%; }
  .heroe__camara { animation: camara 24s var(--curva-suave) 3s infinite alternate; transform-origin: 62% 40%; } /* arranca con las luces ya encendidas */
  @supports (animation-timeline: scroll()) {
    .heroe__parallax { animation: parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes encender {
  0% { opacity: 0; } 5% { opacity: .9; } 9% { opacity: .08; } 15% { opacity: .75; }
  19% { opacity: .2; } 27% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes neon-carga {
  0% { opacity: 0; } 7% { opacity: .75; } 11% { opacity: .05; } 20% { opacity: .9; }
  25% { opacity: .25; } 38% { opacity: 1; } 100% { opacity: .95; }
}
@keyframes respira { from { opacity: 1; } to { opacity: .8; } }
@keyframes amanecer { to { opacity: .12; } }
@keyframes subir { from { transform: translateY(160%); } } /* sale de más abajo que el aire de la máscara */
@keyframes asomar { from { opacity: 0; transform: translate(calc(var(--dist-1) * -1), var(--dist-1)); } }
@keyframes bajar { 0% { transform: translateY(-110%); } 55%, 100% { transform: translateY(260%); } }
@keyframes camara { from { transform: scale(1); } to { transform: scale(1.045) translate3d(-.8%, .6%, 0); } }
@keyframes parallax { from { transform: translateY(0) scale(1.1); } to { transform: translateY(8%) scale(1.1); } }

@media (min-width: 900px) {
  .heroe {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    grid-template-rows: 1fr auto;
  }
  .heroe__foto {
    grid-area: 1 / 2 / 3 / 3; aspect-ratio: 4284 / 3300;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 100%);
  }
  .heroe__foto::after { display: none; }
  .heroe__titulo { grid-area: 1 / 1; padding: 0 0 0 var(--borde); margin-right: -6vw; font-size: clamp(3.6rem, 1rem + 5.4vw, 7.4rem); }
  .heroe__resto { grid-area: 2 / 1; padding: 28px 24px 36px var(--borde); }
  .heroe__acciones .btn { flex: 0 0 auto; }
}

/* ---------- Banda de actividades (marquee inclinado) ---------- */
.banda { position: relative; z-index: 3; margin: calc(var(--d) * -.55) 0 calc(var(--d) * -.35); overflow-x: clip; }
html:not(.js) .banda { display: none; }
.banda__giro {
  width: 112%; margin-left: -6%; overflow: hidden;
  background: var(--naranja); transform: rotate(-2.2deg);
  padding: clamp(10px, 1.4vw, 16px) 0;
  /* Alto reservado desde el primer pintado: los textos llegan con app.js y no deben empujar nada. */
  min-height: calc(clamp(2.3rem, 1.5rem + 3.4vw, 4.4rem) + 2 * clamp(10px, 1.4vw, 16px));
}
.banda__pista { display: flex; width: max-content; }
.banda__grupo { display: flex; align-items: center; flex: none; }
.banda__item {
  font: 800 clamp(2.3rem, 1.5rem + 3.4vw, 4.4rem)/1 var(--f-titulo); color: #000;
  padding: 0 .32em; white-space: nowrap; letter-spacing: -.005em;
}
.banda__item--contorno { color: transparent; -webkit-text-stroke: 2px #000; }
.banda__sep { flex: none; width: 34px; height: 5px; border-radius: 3px; background: #000; transform: rotate(calc(var(--diag) * -1)); }
@media (prefers-reduced-motion: no-preference) {
  .banda__pista { animation: banda var(--dur-banda, 40s) linear infinite; }
  .banda:hover .banda__pista, .banda.pausada .banda__pista { animation-play-state: paused; }
}
@keyframes banda { to { transform: translateX(-50%); } }
.banda__pausa {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #000; color: var(--naranja);
}
.banda__pausa-icono { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.banda__pausa[aria-pressed="true"] .banda__pausa-icono {
  border: 0; background: currentColor; clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}

/* "Por qué" va en el CSS crítico: en pantallas altas asoma en la primera vista. */
/* ---------- Por qué ---------- */
.porque { padding-top: calc(var(--d) + clamp(88px, 10vw, 150px)); }
.porque__titulo { max-width: 20ch; font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.6rem); }
.porque__a { display: block; color: var(--texto-3); }
.porque__b { display: block; color: var(--texto); }
.razones { list-style: none; display: grid; gap: 44px; margin-top: clamp(48px, 7vw, 96px); }
.razones li { border-top: 3px solid var(--naranja); padding-top: 20px; }
.razones h3 { margin-bottom: .45em; }
.razones p { color: var(--texto-2); max-width: 38ch; margin: 0; }
@media (min-width: 820px) {
  .razones { grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: start; }
  /* Escalonado en diagonal, como los tubos. */
  .razones li:nth-child(2) { margin-top: 56px; }
  .razones li:nth-child(3) { margin-top: 112px; }
}
/* Cifras: salen de data.js y se muestran como un odómetro. */
.cifras {
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px;
  margin-top: clamp(64px, 9vw, 128px); padding-top: 32px; border-top: 1px solid var(--linea);
}
.cifra__num {
  display: flex; align-items: baseline; gap: .18em;
  font: 800 clamp(3.4rem, 2rem + 5vw, 6.4rem)/1 var(--f-titulo); color: var(--naranja);
  font-variant-numeric: tabular-nums;
}
.cifra__pre { font-size: .36em; color: var(--texto); }
.cifra__texto { display: block; margin-top: 10px; color: var(--texto-2); max-width: 24ch; }
.odometro { display: inline-flex; }
.dig { display: inline-block; height: 1em; overflow: clip; }
.dig__tira {
  display: block; width: 1ch; line-height: 1em; text-align: center;
  transform: translateY(calc(var(--d) * -1em));
}
.anim .dig__tira { transition: transform 1.3s var(--curva-salida); transition-delay: calc(var(--k, 0) * 90ms + var(--i, 0) * 140ms); }
.anim .cifras:not(.revelado) .dig__tira { transform: translateY(0); }
@media (min-width: 820px) { .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Reducir movimiento: nada se mueve si no es imprescindible ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}