/* ============================================================================
   SPORT FEST VITACURA 2026 — ESTILOS
   ----------------------------------------------------------------------------
     1. Tipografía        7. Cinta            13. Entradas
     2. Colores           8. Cifras           14. Preguntas
     3. Base              9. Zonas            15. Newsletter
     4. Barra superior   10. Disciplinas      16. Auspiciadores
     5. Botones          11. Beach Volley     17. Pie y borrador
     6. Afiche           12. Rostros          18. Movimiento y teléfono
   ========================================================================== */

/* ── 1. Tipografía ────────────────────────────────────────────────────────
   Apex New es la tipografía del Manual de Marca de la corporación. Los pesos
   de texto vienen en woff2, los mismos que usa la plataforma de reportes.
   El peso Ultra solo existe en ttf y se usa en titulares, así que su descarga
   no retrasa la lectura del cuerpo.
   El logotipo del festival —el de letra redonda con el monito— no es Apex:
   es la marca del evento y va como imagen, tal como viene de la presentación. */
@font-face{ font-family:'Apex New'; src:url('fuentes/apex-book.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Apex New'; src:url('fuentes/apex-medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Apex New'; src:url('fuentes/apex-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Apex New'; src:url('fuentes/apex-heavy.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Apex Ultra'; src:url('fuentes/apex-ultra.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap; }

/* ── 2. Colores ───────────────────────────────────────────────────────────
   El azul petróleo y el turquesa salen de la presentación del evento; el
   tricolor magenta/turquesa/lima es el del Manual de Marca.

   En los reportes el tricolor solo se usa en la regla de 4px, porque sobre
   blanco el turquesa #00C5B4 da 2,2:1 de contraste y no alcanza ni para un
   borde. Acá el fondo es oscuro: el mismo turquesa pasa de 9:1 y sí puede
   llevar texto. Por eso las secciones claras vuelven a los tonos apagados de
   los reportes (#00AA95, #CE009F, #A6AD1F), que sí están hechos para #F5F6F5. */
:root{
  --negro:#0F1A20;
  --negro2:#16242C;
  --negro3:#1E2F38;
  --hondo:#0B4F4A;
  --blanco:#ffffff;
  --tenue:#A6B4B6;

  --magenta:#C9009C;
  --turquesa:#00C5B4;
  --lima:#BED600;

  --claro:#F5F6F5;
  --tarjeta:#ffffff;
  --tinta:#2B3230;
  --gris:#3E4543;
  --mudo:#7A827F;
  --borde:#E6E8E7;

  --magenta-claro:#CE009F;
  --turquesa-claro:#00AA95;
  --lima-claro:#A6AD1F;

  --ancho:1320px;
  --curva:14px;
}

/* ── 3. Base ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:80px; }

body{
  margin:0;
  background:var(--negro);
  color:var(--blanco);
  font-family:'Apex New',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }

:focus-visible{ outline:3px solid var(--turquesa); outline-offset:3px; border-radius:4px; }

.ancho{ max-width:var(--ancho); margin:0 auto; padding:0 26px; position:relative; }
.ancho--angosto{ max-width:820px; }

.oculto-visual{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.saltar{
  position:fixed; top:-100px; left:12px; z-index:300;
  background:var(--turquesa); color:#04211E; font-weight:900;
  padding:12px 18px; border-radius:10px; transition:top .18s ease;
}
.saltar:focus{ top:12px; }

.tricolor{
  height:4px; width:100%;
  background:linear-gradient(90deg,
    var(--magenta) 0 33.34%, var(--turquesa) 33.34% 66.67%, var(--lima) 66.67% 100%);
}

.seccion{ padding:96px 0; position:relative; }
.seccion--apretada{ padding:60px 0; }
.seccion--oscura{
  background:
    radial-gradient(80% 120% at 88% 8%, rgba(11,79,74,.42) 0%, rgba(11,79,74,0) 62%),
    var(--negro);
}
.seccion--clara{ background:var(--claro); color:var(--tinta); }

/* Sección con foto de fondo (el bloque de Beach Volley). */
.seccion--foto{ isolation:isolate; overflow:hidden; }
.seccion__foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.seccion__velo{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(15,26,32,.93) 0%, rgba(15,26,32,.78) 42%, rgba(15,26,32,.96) 100%);
}

/* Encabezado de sección */
.titulo{ margin:0 0 46px; }
.titulo__ojo{
  margin:0 0 10px; font-size:12px; font-weight:900; letter-spacing:.18em;
  text-transform:uppercase; color:var(--turquesa);
}
.titulo--claro .titulo__ojo{ color:var(--turquesa-claro); }
.titulo__texto{
  margin:0; font-family:'Apex Ultra','Apex New',sans-serif; font-weight:400;
  font-size:clamp(38px,6vw,76px); line-height:.92; letter-spacing:-.025em;
  text-transform:uppercase;
}
.titulo__nota{ margin:16px 0 0; max-width:58ch; font-size:15.5px; color:var(--tenue); }
.titulo--claro .titulo__nota{ color:var(--mudo); }

/* ── 4. Barra superior ────────────────────────────────────────────────────── */
.barra{
  position:fixed; inset:0 0 auto 0; z-index:200;
  background:transparent; transition:background .25s ease, box-shadow .25s ease;
}
.barra--pegada{
  background:rgba(15,26,32,.93);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 26px rgba(0,0,0,.42);
}
.barra__fila{
  max-width:var(--ancho); margin:0 auto; padding:11px 26px;
  display:flex; align-items:center; gap:26px;
}

.marca{ flex:none; display:block; }
.marca__logo{ width:auto; height:38px; }

.nav{ margin-left:auto; }
.nav__lista{ display:flex; gap:3px; }
.nav__lista a{
  display:block; padding:9px 14px; border-radius:999px;
  font-size:12.5px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tenue); transition:color .16s ease, background .16s ease;
}
.nav__lista a:hover{ color:var(--blanco); background:rgba(255,255,255,.08); }
.nav__lista a[aria-current="true"]{ color:var(--blanco); background:rgba(255,255,255,.13); }

.barra__acciones{ display:flex; align-items:center; gap:12px; flex:none; }

.hamburguesa{
  display:none; width:44px; height:44px; padding:0;
  background:transparent; border:1px solid rgba(255,255,255,.24); border-radius:12px;
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hamburguesa span{
  display:block; width:19px; height:2px; background:var(--blanco); border-radius:2px;
  transition:transform .22s ease, opacity .18s ease;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── 5. Botones ───────────────────────────────────────────────────────────── */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 22px; border-radius:999px; border:2px solid transparent;
  font-family:inherit; font-size:13px; font-weight:900;
  letter-spacing:.09em; text-transform:uppercase; cursor:pointer; white-space:nowrap;
  transition:transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.boton--relleno{ background:var(--magenta); color:var(--blanco); }
.boton--relleno:hover{ background:var(--blanco); color:var(--negro); transform:translateY(-2px); }
.boton--borde{ border-color:rgba(255,255,255,.42); color:var(--blanco); }
.boton--borde:hover{ border-color:var(--blanco); background:var(--blanco); color:var(--negro); transform:translateY(-2px); }
.boton--grande{ padding:16px 34px; font-size:14.5px; }

/* ── 6. Afiche ────────────────────────────────────────────────────────────── */
.afiche{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding:132px 26px 92px; overflow:hidden; isolation:isolate; text-align:center;
}
.afiche__foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.afiche__velo{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(15,26,32,.28) 0%, rgba(15,26,32,.82) 66%, var(--negro) 100%),
    linear-gradient(180deg, rgba(15,26,32,.72) 0%, rgba(15,26,32,.25) 34%, var(--negro) 100%);
}

.afiche__centro{ position:relative; max-width:1060px; width:100%; }

.afiche__titulo{ margin:0; display:flex; flex-direction:column; align-items:center; gap:8px; }
.afiche__titulo img{
  width:min(100%,860px); height:auto;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.55));
}
.afiche__anio{
  font-family:'Apex Ultra','Apex New',sans-serif; line-height:.9;
  font-size:clamp(46px,9vw,104px); letter-spacing:.06em;
  background:linear-gradient(96deg,var(--magenta) 6%,var(--turquesa) 52%,var(--lima) 94%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
/* Si el navegador no sabe recortar el fondo al texto, se ve turquesa sólido
   en vez de un bloque de color tapando las cifras. */
@supports not (background-clip:text){
  .afiche__anio{ color:var(--turquesa); -webkit-text-fill-color:var(--turquesa); }
}

.afiche__cuando{
  margin:24px 0 0; display:inline-flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
  padding:10px 22px; border:1px solid rgba(255,255,255,.28); border-radius:999px;
  font-size:12.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.afiche__cuando em{ font-style:normal; color:var(--turquesa); }

.afiche__bajada{
  margin:24px auto 0; max-width:52ch; font-size:clamp(16px,1.9vw,19px); color:#D5DDDE;
}

.cuenta{ margin:32px 0 0; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.cuenta__caja{
  min-width:84px; padding:12px 8px 10px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.cuenta__caja b{
  display:block; font-size:30px; font-weight:900; line-height:1;
  font-variant-numeric:tabular-nums;
}
.cuenta__caja span{
  display:block; margin-top:5px; font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tenue);
}

.afiche__botones{ margin:36px 0 0; display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

.afiche__bajar{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  width:38px; height:38px; display:grid; place-items:center;
}
.afiche__bajar span{
  width:11px; height:11px; border-right:2px solid var(--tenue); border-bottom:2px solid var(--tenue);
  transform:rotate(45deg); animation:rebotar 2s ease-in-out infinite;
}
@keyframes rebotar{ 0%,100%{ transform:rotate(45deg) translate(0,0); } 50%{ transform:rotate(45deg) translate(4px,4px); } }

/* ── 7. Cinta ─────────────────────────────────────────────────────────────── */
.cinta{
  overflow:hidden; padding:14px 0;
  background:linear-gradient(90deg,var(--negro2),var(--hondo) 55%,var(--negro2));
  border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
}
.cinta__pista{ display:flex; width:max-content; animation:correr 48s linear infinite; }
.cinta__pista span{
  display:inline-flex; align-items:center; gap:24px; padding-right:24px;
  font-family:'Apex Ultra','Apex New',sans-serif; font-size:25px;
  text-transform:uppercase; white-space:nowrap;
}
.cinta__pista span::after{
  content:''; width:9px; height:9px; border-radius:50%; background:var(--turquesa); flex:none;
}
.cinta__pista span:nth-child(3n)::after{ background:var(--magenta); }
.cinta__pista span:nth-child(3n+2)::after{ background:var(--lima); }
@keyframes correr{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ── 8. Cifras ────────────────────────────────────────────────────────────── */
.cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; }
.cifra b{
  display:block; font-family:'Apex Ultra','Apex New',sans-serif; font-weight:400;
  font-size:clamp(40px,5.6vw,68px); line-height:.9; letter-spacing:-.02em;
}
.cifra:nth-child(1) b{ color:var(--turquesa); }
.cifra:nth-child(2) b{ color:var(--lima); }
.cifra:nth-child(3) b{ color:var(--magenta); }
.cifra:nth-child(4) b{ color:var(--blanco); }
.cifra span{
  display:block; margin-top:9px; font-size:12px; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tenue);
}

/* ── 9. Zonas ─────────────────────────────────────────────────────────────── */
.zonas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:18px; }
.zona{
  padding:28px 26px 26px; border-radius:var(--curva);
  background:var(--negro2); border:1px solid rgba(255,255,255,.1);
  transition:transform .18s ease, border-color .18s ease;
}
.zona:hover{ transform:translateY(-4px); border-color:rgba(0,197,180,.55); }
.zona--destacada{
  background:linear-gradient(150deg,rgba(11,79,74,.85),var(--negro2) 62%);
  border-color:rgba(0,197,180,.4);
}
.zona__disco{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  margin-bottom:18px; color:var(--blanco);
  background:linear-gradient(150deg,var(--turquesa),var(--hondo));
}
.zona__disco svg{ width:28px; height:28px; }
.zona h3{ margin:0 0 8px; font-size:21px; font-weight:900; letter-spacing:-.01em; line-height:1.2; }
.zona p{ margin:0; font-size:14.5px; color:var(--tenue); }

/* ── 9b. Galería de renders ───────────────────────────────────────────────
   Cuatro columnas, y la primera foto ocupa un cuadrado de 2×2. El alto de
   las filas lo fijan las fotos chicas —16:10 cada una—, así que la grande
   calza sola sin tener que escribirle una altura. */
.galeria{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.foto{
  margin:0; position:relative; overflow:hidden; border-radius:var(--curva);
  border:1px solid rgba(255,255,255,.12); background:var(--negro2);
  aspect-ratio:16/10;
}
.foto--grande{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
/* Ocupa dos columnas de una sola fila: cierra el hueco que dejaría la
   última fila, recortada en panorámica. */
.foto--ancha{ grid-column:span 2; aspect-ratio:auto; }
.foto img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.foto:hover img{ transform:scale(1.045); }
.foto figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:30px 16px 13px;
  font-size:12px; font-weight:900; letter-spacing:.11em; text-transform:uppercase;
  background:linear-gradient(to top,rgba(15,26,32,.94),rgba(15,26,32,0));
}
.foto--grande figcaption{ font-size:14px; padding:40px 20px 18px; }

.pie-nota{ margin:26px 0 0; font-size:13px; color:var(--tenue); }

/* ── 10. Disciplinas (el afiche del line-up) ──────────────────────────────── */
.cartel{ text-align:center; }
.cartel__nivel{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  column-gap:24px; row-gap:2px;
  font-family:'Apex Ultra','Apex New',sans-serif; text-transform:uppercase;
  line-height:1.02; letter-spacing:-.02em; color:var(--gris);
}
.cartel__nivel--1{ font-size:clamp(34px,7.2vw,88px); margin-bottom:26px; }
.cartel__nivel--2{ font-size:clamp(22px,3.5vw,42px); margin-bottom:24px; }
.cartel__nivel--3{
  font-family:'Apex New',sans-serif; font-weight:700; letter-spacing:0;
  font-size:clamp(14px,1.7vw,20px); color:var(--mudo); column-gap:15px;
}
/* El punto separador rota entre los tres colores de marca. Es decorativo: si
   no se distinguen los colores, el separador se lee exactamente igual. */
.cartel__nivel span::after{ content:'·'; margin-left:24px; color:var(--turquesa-claro); }
.cartel__nivel--3 span::after{ margin-left:15px; }
.cartel__nivel span:nth-child(3n)::after{ color:var(--magenta-claro); }
.cartel__nivel span:nth-child(3n+2)::after{ color:var(--lima-claro); }
.cartel__nivel span:last-child::after{ content:''; margin:0; }

/* ── 11. Beach Volley ─────────────────────────────────────────────────────── */
.duplas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:18px; }
.dupla{
  border-radius:var(--curva); overflow:hidden;
  background:rgba(22,36,44,.82); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; flex-direction:column;
  transition:transform .18s ease, border-color .18s ease;
}
.dupla:hover{ transform:translateY(-4px); border-color:rgba(0,197,180,.5); }
.dupla__foto{
  height:230px; display:grid; place-items:end center; padding-top:14px;
  background:linear-gradient(170deg,rgba(0,197,180,.24),rgba(11,79,74,.06) 70%);
}
.dupla__foto img{ max-height:100%; width:auto; object-fit:contain; }
.dupla__cuerpo{ padding:20px 22px 24px; }
.dupla__pais{
  display:inline-block; margin-bottom:9px; padding:4px 12px; border-radius:999px;
  background:rgba(0,197,180,.16); color:var(--turquesa);
  font-size:10.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
}
.dupla h3{ margin:0 0 8px; font-size:19px; font-weight:900; line-height:1.2; letter-spacing:-.01em; }
.dupla p{ margin:0; font-size:14px; color:var(--tenue); }
.dupla__redes{ display:block; margin-top:12px; font-size:12.5px; font-weight:700; color:var(--turquesa); }

/* ── 12. Rostros ──────────────────────────────────────────────────────────── */
.rostros{ display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:12px; }
.rostro{
  padding:16px 18px; border-radius:12px;
  background:var(--negro2); border:1px solid rgba(255,255,255,.1);
}
.rostro b{ display:block; font-size:15.5px; font-weight:900; line-height:1.25; }
.rostro span{
  display:block; margin-top:4px; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--turquesa);
}

/* ── 13. Destacados y entradas ────────────────────────────────────────────── */
.destacados{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.destacado{
  background:var(--tarjeta); border:1px solid var(--borde); border-radius:var(--curva);
  padding:0 0 24px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 1px 3px rgba(43,50,48,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}
.destacado:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(43,50,48,.13); }
.destacado__regla{ height:6px; }
.destacado__regla--magenta{ background:var(--magenta-claro); }
.destacado__regla--turquesa{ background:var(--turquesa-claro); }
.destacado__regla--lima{ background:var(--lima-claro); }
.destacado h3{
  margin:24px 24px 10px; font-size:24px; font-weight:900; color:var(--gris);
  letter-spacing:-.01em; line-height:1.15;
}
.destacado p{ margin:0 24px; font-size:15px; color:var(--mudo); flex:1; }
.destacado a{
  margin:20px 24px 0; align-self:flex-start;
  font-size:12.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  color:var(--turquesa-claro); display:inline-flex; align-items:center; gap:7px;
}
.destacado a::after{ content:'→'; transition:transform .16s ease; }
.destacado a:hover::after{ transform:translateX(4px); }

.pases{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.pase{
  position:relative; padding:32px 28px 30px; border-radius:var(--curva);
  background:var(--negro2); border:1px solid rgba(255,255,255,.13);
  display:flex; flex-direction:column;
}
.pase--destacado{
  border-color:var(--turquesa);
  background:linear-gradient(160deg,rgba(11,79,74,.7),var(--negro3) 66%);
}
.pase__sello{
  position:absolute; top:-13px; left:28px; padding:5px 15px; border-radius:999px;
  background:var(--turquesa); color:#06231F;
  font-size:10.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
}
.pase h3{
  margin:0 0 6px; font-family:'Apex Ultra','Apex New',sans-serif; font-weight:400;
  font-size:30px; text-transform:uppercase; letter-spacing:-.01em; line-height:1;
}
.pase__nota{
  margin:0 0 20px; font-size:12px; font-weight:900;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tenue);
}
.pase__precio{ margin:0 0 22px; font-size:44px; font-weight:900; line-height:1; letter-spacing:-.02em; }
.pase ul{ margin:0 0 26px; display:grid; gap:9px; flex:1; }
.pase li{ font-size:14.5px; color:var(--tenue); display:flex; gap:10px; align-items:flex-start; }
.pase li::before{ content:'✓'; color:var(--lima); font-weight:900; flex:none; }

/* ── 14. Preguntas ────────────────────────────────────────────────────────── */
.preguntas{ border-top:1px solid var(--borde); }
.pregunta{ border-bottom:1px solid var(--borde); }
.pregunta__boton{
  width:100%; padding:22px 46px 22px 0; background:transparent; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:inherit; font-size:17.5px; font-weight:700; color:var(--tinta); text-align:left;
  position:relative;
}
.pregunta__boton::after{
  content:''; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2.5px solid var(--turquesa-claro); border-bottom:2.5px solid var(--turquesa-claro);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.pregunta__boton[aria-expanded="true"]::after{ transform:translateY(-20%) rotate(-135deg); }
.pregunta__cuerpo{ display:none; padding:0 46px 24px 0; }
.pregunta__cuerpo[data-abierta="si"]{ display:block; }
.pregunta__cuerpo p{ margin:0; font-size:15.5px; color:var(--mudo); max-width:70ch; }

/* ── 15. Newsletter ───────────────────────────────────────────────────────── */
.formulario{
  padding:38px 34px; border-radius:var(--curva); text-align:center;
  background:linear-gradient(160deg,rgba(11,79,74,.62),var(--negro2) 68%);
  border:1px solid rgba(255,255,255,.14);
}
.formulario__titulo{
  margin:0 0 10px; font-family:'Apex Ultra','Apex New',sans-serif; font-weight:400;
  font-size:clamp(28px,4.4vw,46px); text-transform:uppercase; letter-spacing:-.02em; line-height:.96;
}
.formulario__texto{ margin:0 auto 24px; max-width:52ch; font-size:15px; color:var(--tenue); }
.formulario__fila{ display:flex; gap:11px; flex-wrap:wrap; justify-content:center; }
.formulario input{
  flex:1 1 280px; max-width:420px; padding:14px 18px; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.22);
  color:var(--blanco); font-family:inherit; font-size:15px;
}
.formulario input::placeholder{ color:#8C9A9C; }
.formulario input:focus{ border-color:var(--turquesa); }
.formulario__aviso{ margin:16px auto 0; max-width:56ch; font-size:13.5px; color:var(--tenue); min-height:1.2em; }
.formulario__aviso[data-estado="error"]{ color:#FF8A7A; }

/* ── 16. Auspiciadores ────────────────────────────────────────────────────── */
.grupo{ margin-bottom:36px; }
.grupo:last-child{ margin-bottom:0; }
.grupo__titulo{
  margin:0 0 16px; font-size:11.5px; font-weight:900; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tenue); text-align:center;
}
.grupo__muro{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; }
.grupo__marca{
  min-width:168px; min-height:76px; padding:14px 22px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.18);
  display:grid; place-items:center; text-align:center;
  font-size:12px; font-weight:700; color:#8C9A9C;
}
.grupo__marca img{ max-height:52px; width:auto; }
.grupo--principal .grupo__marca{
  min-width:280px; border-style:solid; border-color:rgba(255,255,255,.22);
  font-size:13.5px; color:var(--blanco);
}

/* ── 17. Pie y aviso de borrador ──────────────────────────────────────────── */
.pie{ background:var(--negro2); }
.pie__fila{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:34px; flex-wrap:wrap; padding-top:44px; padding-bottom:34px;
}
.pie__marca{ display:flex; align-items:center; gap:14px; }
.pie__logo{ width:44px; height:44px; flex:none; }
.pie__marca p{ margin:0; max-width:22ch; font-size:14px; font-weight:700; line-height:1.35; }
.pie__redes ul{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:12px; }
.pie__redes ul a{
  display:block; padding:9px 17px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2); font-size:12px; font-weight:900;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tenue);
  transition:color .16s ease, border-color .16s ease;
}
.pie__redes ul a:hover{ color:var(--blanco); border-color:var(--blanco); }
.pie__redes p{ margin:0; font-size:13.5px; color:var(--tenue); }
.pie__redes p a{ text-decoration:underline; }
.pie__legal{
  margin:0; padding:18px 26px 26px; text-align:center; font-size:12px; color:#7E8C8E;
  border-top:1px solid rgba(255,255,255,.08);
}

.borrador{
  position:fixed; left:14px; bottom:14px; z-index:250;
  display:flex; align-items:center; gap:10px; max-width:min(330px,calc(100vw - 28px));
  padding:9px 15px; border-radius:999px;
  background:rgba(15,26,32,.95); border:1px solid var(--lima);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
}
.borrador b{
  flex:none; font-size:10.5px; font-weight:900; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lima);
}
.borrador span{ font-size:11.5px; color:var(--tenue); line-height:1.3; }

/* ── 18. Movimiento, teléfono y pantallas chicas ──────────────────────────── */
/* El contenido nace VISIBLE. Recién cuando el guion confirma que puede
   animar agrega `js-anima` al <html> y ahí se esconde para aparecer al bajar.
   Al revés —esconder por CSS y mostrar por JavaScript— basta que el guion no
   cargue para que media página quede en blanco sin que nadie se entere. */
.js-anima .aparece{ opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease; }
.js-anima .aparece--visible{ opacity:1; transform:none; }

/* Quien pidió menos movimiento no ve ninguno: ni la cinta, ni las
   apariciones. El contenido queda igual de completo. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .aparece{ opacity:1; transform:none; }
}

@media (max-width:1080px){
  .destacados{ grid-template-columns:1fr; }
  .pases{ grid-template-columns:1fr; }
  .cifras{ grid-template-columns:repeat(2,1fr); gap:28px 18px; }
  .galeria{ grid-template-columns:repeat(2,1fr); }
  .foto--grande{ grid-row:span 1; aspect-ratio:16/10; }
}

@media (max-width:900px){
  .hamburguesa{ display:flex; }

  /* El menú pasa a ser un panel completo. Mismo contenido, no una versión
     recortada: la regla del proyecto es una sola versión que se adapta. */
  .nav{
    position:fixed; inset:0; margin:0; z-index:-1;
    background:rgba(15,26,32,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    display:grid; place-items:center;
    opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  .nav--abierto{ opacity:1; pointer-events:auto; z-index:190; }
  .nav__lista{ flex-direction:column; gap:6px; text-align:center; }
  .nav__lista a{ font-size:22px; padding:14px 30px; letter-spacing:.04em; }

  .seccion{ padding:72px 0; }
  .ancho{ padding:0 20px; }
  .barra__fila{ padding:10px 20px; gap:14px; }
  .marca__logo{ height:32px; }
}

@media (max-width:560px){
  html{ scroll-padding-top:64px; }
  .afiche{ padding:110px 20px 78px; }
  .afiche__cuando{ font-size:11px; letter-spacing:.1em; padding:8px 14px; gap:7px; }
  .cuenta__caja{ min-width:70px; padding:10px 6px 8px; }
  .cuenta__caja b{ font-size:24px; }
  .afiche__botones .boton{ width:100%; }
  .cinta__pista span{ font-size:20px; gap:18px; padding-right:18px; }
  .formulario{ padding:28px 20px; }
  .formulario__fila .boton{ width:100%; }
  .formulario input{ max-width:none; }
  .pregunta__boton{ font-size:16px; }
  .rostros{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .galeria{ grid-template-columns:1fr; }
  .foto--grande,
  .foto--ancha{ grid-column:span 1; aspect-ratio:16/10; }
  .grupo__marca{ min-width:calc(50% - 7px); }
  .grupo--principal .grupo__marca{ min-width:100%; }
  .borrador{ left:10px; right:10px; bottom:10px; max-width:none; }
}