/* =========================================================================
   Novologic × Capla Festival 2026 — hoja de estilos de la web pública.

   Dos marcas en una página: el coral de Novologic (#f3474b) y el turquesa de
   Capla. Funcionan juntos porque son los dos colores del propio cartel del
   festival, así que no hay que inventar una tercera paleta de compromiso.

   Todo el movimiento de esta hoja se apaga entero en el bloque
   `prefers-reduced-motion` del final: hay mucha animación a propósito, y
   quien no la quiera no la ve.
   ========================================================================= */

/* ---------------------------------------------------------- tipografías --- */
@font-face{font-family:'Anton';src:url('../fuentes/anton-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Outfit';src:url('../fuentes/outfit-300-800.woff2') format('woff2');
  font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fuentes/jetbrainsmono-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* ------------------------------------------------------------- variables --- */
:root{
  --tinta:#061318;
  --fondo:#08181f;
  --fondo-2:#0c242d;
  --carta:rgba(255,255,255,.045);
  --borde:rgba(255,255,255,.11);
  --texto:#e9f3f5;
  --apagado:#9db6bf;
  --coral:#f3474b;
  --coral-claro:#ff6d70;
  --turquesa:#2fd4bd;
  --turquesa-claro:#7df0dd;
  --aqua:#5eead4;
  --marino:#0f2830;
  --radio:22px;
  --radio-s:14px;
  --ancho:1850px;
  --ancho-texto:1320px;
  --sombra:0 28px 70px rgba(0,0,0,.5);
  --suave:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font:400 17px/1.65 'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
/* `height:auto` es imprescindible: las imágenes llevan `width` y `height` en
   el HTML para que el navegador reserve el hueco y la página no dé saltos al
   cargar, pero sin esto el alto se queda clavado en el del fichero mientras el
   ancho se reduce, y la imagen sale estirada. */
img{max-width:100%;height:auto;display:block}
a{color:var(--aqua);text-decoration:none}
button{font-family:inherit}
::selection{background:var(--coral);color:#fff}

/* Barra de desplazamiento propia, en los colores de la casa */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#061318}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--coral),var(--turquesa));border-radius:9px}

.contenedor{width:min(100% - 48px,var(--ancho));margin-inline:auto}
.estrecho{width:min(100% - 48px,var(--ancho-texto));margin-inline:auto}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================== cortinilla === */
#cortina{display:none}
.js #cortina{
  position:fixed;inset:0;z-index:9999;background:#061318;
  display:grid;place-items:center;transition:opacity .7s var(--suave),visibility .7s;
}
#cortina.fuera{opacity:0;visibility:hidden}
#cortina .marca{text-align:center;animation:latido 1.6s ease-in-out infinite}
#cortina img{width:210px;margin:0 auto 22px}
#cortina .barra{width:200px;height:3px;background:rgba(255,255,255,.12);border-radius:9px;overflow:hidden;margin:0 auto}
#cortina .barra i{display:block;height:100%;width:40%;border-radius:9px;
  background:linear-gradient(90deg,var(--coral),var(--turquesa));animation:cargando 1.1s ease-in-out infinite}
@keyframes cargando{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* ------------------------------------------------- progreso de lectura --- */
#progreso{position:fixed;top:0;left:0;height:3px;width:0;z-index:900;
  background:linear-gradient(90deg,var(--coral),var(--turquesa),var(--aqua));
  box-shadow:0 0 14px rgba(47,212,189,.7)}

/* ------------------------------------------------------------ halo ratón --- */
#halo{position:fixed;width:340px;height:340px;border-radius:50%;pointer-events:none;
  z-index:2;mix-blend-mode:screen;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle,rgba(47,212,189,.16),transparent 62%)}
body.raton #halo{opacity:1}

/* =================================================================== nav === */
/* La cabecera va fija, así que SIEMPRE tiene que tener algo detrás: sin fondo
   se leía el texto de la página a través de los enlaces. Arriba del todo lleva
   un degradado que se funde con el héroe; en cuanto se baja, fondo sólido. */
.nav{position:fixed;top:0;left:0;right:0;z-index:800;padding:16px 0;
  background:linear-gradient(180deg,rgba(4,12,16,.94) 0%,rgba(4,12,16,.72) 55%,transparent 100%);
  transition:background .4s var(--suave),padding .4s var(--suave),box-shadow .4s,
             backdrop-filter .4s}
.nav.pegada{background:rgba(6,19,24,.93);backdrop-filter:blur(20px) saturate(1.3);
  padding:10px 0;box-shadow:0 1px 0 rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.5)}
/* Sin JavaScript nadie le pone la clase «pegada»: fondo sólido desde el principio. */
html:not(.js) .nav{background:rgba(6,19,24,.93);backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav .fila{display:flex;align-items:center;gap:26px}
.nav .logo{display:flex;align-items:center;gap:13px;flex-shrink:0}
.nav .logo img{width:132px;transition:transform .4s var(--suave)}
.nav .logo:hover img{transform:scale(1.05)}
.nav .separa{width:1px;height:26px;background:rgba(255,255,255,.18)}
.nav .capla{width:78px;opacity:.95}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav nav > a{color:var(--apagado);font-size:14.5px;font-weight:500;padding:9px 14px;
  border-radius:99px;position:relative;transition:color .25s,background .25s}
.nav nav > a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav .btn-nav{margin-left:10px}

/* ================================================================ botones === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 30px;border-radius:99px;border:0;cursor:pointer;font-weight:700;
  font-size:15.5px;letter-spacing:.2px;position:relative;overflow:hidden;
  transition:transform .32s var(--suave),box-shadow .32s var(--suave),filter .3s;
  text-decoration:none;white-space:nowrap}
.btn span{position:relative;z-index:2}
.btn-coral{background:linear-gradient(120deg,var(--coral),#ff7a5e);color:#fff;
  box-shadow:0 14px 34px rgba(243,71,75,.38)}
.btn-coral::before{content:'';position:absolute;inset:0;z-index:1;opacity:0;
  background:linear-gradient(120deg,#ff7a5e,var(--coral));transition:opacity .35s}
.btn-coral:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 46px rgba(243,71,75,.52)}
.btn-coral:hover::before{opacity:1}
.btn-linea{background:transparent;color:var(--texto);border:1.5px solid rgba(255,255,255,.26)}
.btn-linea:hover{background:rgba(255,255,255,.09);border-color:var(--aqua);color:#fff;transform:translateY(-2px)}
.btn-aqua{background:var(--aqua);color:#06232a;box-shadow:0 14px 34px rgba(94,234,212,.3)}
.btn-aqua:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 46px rgba(94,234,212,.45)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
/* brillo que cruza el botón */
.btn::after{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:3;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-22deg);transition:left .75s var(--suave)}
.btn:hover::after{left:135%}

/* ================================================================== hero === */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:150px 0 140px;overflow:hidden;isolation:isolate}
.hero__fondo{position:absolute;inset:-8% 0 0;z-index:-3;background:#07161c}
.hero__fondo img{width:100%;height:118%;object-fit:cover;opacity:.92;
  transform:scale(1.08);filter:saturate(1.2) contrast(1.05)}
.hero__velo{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(1100px 560px at 18% 12%,rgba(243,71,75,.2),transparent 62%),
    radial-gradient(900px 620px at 84% 74%,rgba(47,212,189,.2),transparent 64%),
    linear-gradient(180deg,rgba(6,19,24,.5) 0%,rgba(6,19,24,.3) 34%,rgba(8,24,31,.94) 100%)}
#chispas{position:absolute;inset:0;z-index:-1;pointer-events:none}

.hero .rejilla{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:72px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:11px;padding:9px 18px 9px 11px;
  border-radius:99px;background:rgba(255,255,255,.07);border:1px solid var(--borde);
  backdrop-filter:blur(10px);font-size:12.5px;font-weight:700;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--aqua);margin-bottom:26px}
.kicker img{width:82px}
.kicker b{color:#fff;font-weight:700}
.punto{width:7px;height:7px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 0 0 rgba(243,71,75,.75);animation:pulso 2s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 12px rgba(243,71,75,0)}100%{box-shadow:0 0 0 0 rgba(243,71,75,0)}}

h1.titular{font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(44px,6.9vw,136px);line-height:.9;letter-spacing:-.015em;
  text-transform:uppercase;margin:0 0 24px}
h1.titular .linea{display:block;overflow:hidden}
h1.titular .linea>span{display:block}
.js h1.titular .linea>span{transform:translateY(105%);
  animation:sube .95s var(--suave) forwards}
h1.titular .linea:nth-child(2)>span{animation-delay:.1s}
h1.titular .linea:nth-child(3)>span{animation-delay:.2s}
@keyframes sube{to{transform:translateY(0)}}
.degradado{background:linear-gradient(100deg,var(--coral) 0%,#ff8a5c 34%,var(--turquesa-claro) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% auto;animation:desliza 7s linear infinite}
@keyframes desliza{
  from{background-position:220% center}
  to{background-position:0 center}}

.hero p.entrada{font-size:clamp(17px,1.15vw,21.5px);line-height:1.62;color:#c8dde3;
  max-width:74ch;margin:0 0 36px}
.hero p.entrada strong{color:#fff;font-weight:600}
.hero .acciones{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* -------------------------------------------------- tarjeta del contador --- */
.panel-cupo{background:linear-gradient(155deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid var(--borde);border-radius:var(--radio);padding:32px 34px;
  backdrop-filter:blur(22px);box-shadow:var(--sombra);position:relative;overflow:hidden}
.panel-cupo::before{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:2px;
  background:linear-gradient(130deg,var(--coral),transparent 42%,var(--turquesa));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.75;pointer-events:none}
.panel-cupo h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:15px;letter-spacing:3px;color:var(--aqua);margin:0 0 4px}
.cifra{font-family:'Anton',sans-serif;font-size:clamp(58px,6vw,86px);line-height:1;
  color:#fff;letter-spacing:-.02em}
/* El reclamo que sustituye al contador: dice el gancho y no enseña ninguna
   cuenta que vaya bajando delante de la gente. */
.reclamo{margin:8px 0 0;font-family:'Anton',sans-serif;font-weight:400;
  text-transform:uppercase;line-height:1.02;letter-spacing:-.005em;
  font-size:clamp(23px,1.85vw,31px);color:#fff}
/* Solo el número va en degradado; la palabra en blanco, que sobre fondo
   oscuro un degradado claro se lee gris y pierde fuerza. */
.reclamo u{text-decoration:none;font-size:1.55em;color:#fff}
.reclamo b{font-weight:400;font-size:1.55em;display:inline-block;
  background:linear-gradient(100deg,#ff6a5c 0%,var(--turquesa-claro) 55%,#ff9a5c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% auto;animation:desliza 7s linear infinite}
.cifra small{display:block;font-size:.19em;color:var(--apagado);letter-spacing:.6px;
  font-family:'Outfit',sans-serif;font-weight:600;text-transform:uppercase;margin-top:2px}
.barra-cupo{height:9px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin:16px 0 10px}
.barra-cupo i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--coral),#ff9a5a,var(--turquesa));
  box-shadow:0 0 18px rgba(47,212,189,.55);transition:width 1.5s var(--suave)}
.panel-cupo .nota{font-size:13.5px;color:var(--apagado);margin:0}

.cuenta-atras{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:22px;
  padding-top:22px;border-top:1px solid var(--borde)}
.cuenta-atras div{text-align:center;background:rgba(0,0,0,.3);border-radius:14px;
  padding:14px 4px;border:1px solid rgba(255,255,255,.07)}
.cuenta-atras b{display:block;font-family:'Anton',sans-serif;font-size:clamp(26px,2vw,36px);
  line-height:1;color:#fff;letter-spacing:-.01em}
.cuenta-atras span{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--apagado)}

/* ----------------------------------------------------- sello de partner --- */
.sello{position:relative;width:132px;height:132px;flex-shrink:0}
.sello .gira{animation:rota 30s linear infinite;transform-origin:center}
@keyframes rota{to{transform:rotate(360deg)}}
.sello:hover .gira{animation-duration:6s}

/* ------------------------------------------------------------ marquesina --- */
.marquesina{margin-top:58px;border-block:1px solid var(--borde);width:100%;
  background:rgba(0,0,0,.28);padding:15px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquesina .pista{display:flex;gap:0;width:max-content;animation:corre 42s linear infinite}
.marquesina:hover .pista{animation-play-state:paused}
@keyframes corre{to{transform:translateX(-50%)}}
.marquesina b{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(18px,1.35vw,26px);
  letter-spacing:.5px;text-transform:uppercase;color:#fff;padding:0 26px;white-space:nowrap}
.marquesina i{color:var(--coral);font-style:normal;font-size:18px;align-self:center}

/* ============================================================== secciones === */
section{position:relative;padding:112px 0}
.seccion-titulo{text-align:center;margin-bottom:58px}
.seccion-titulo .eti{display:inline-block;font-size:12px;font-weight:700;letter-spacing:3.4px;
  text-transform:uppercase;color:var(--coral);margin-bottom:14px}
.seccion-titulo h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(32px,3.9vw,60px);line-height:1.02;margin:0 0 16px;letter-spacing:-.008em}
.seccion-titulo p{color:var(--apagado);font-size:18.5px;max-width:72ch;margin:0 auto;line-height:1.65}

/* rejilla de datos del festival */
.rejilla-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.rejilla-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tarjeta{background:var(--carta);border:1px solid var(--borde);border-radius:var(--radio);
  padding:32px 30px;position:relative;overflow:hidden;
  transition:transform .45s var(--suave),border-color .45s,box-shadow .45s;
  transform-style:preserve-3d}
.tarjeta::after{content:'';position:absolute;width:260px;height:260px;border-radius:50%;
  top:var(--my,50%);left:var(--mx,50%);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(47,212,189,.16),transparent 66%);opacity:0;transition:opacity .4s}
.tarjeta:hover{border-color:rgba(94,234,212,.42);box-shadow:0 26px 56px rgba(0,0,0,.42)}
.tarjeta:hover::after{opacity:1}
.tarjeta .icono{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  margin-bottom:20px;background:linear-gradient(140deg,rgba(243,71,75,.24),rgba(47,212,189,.24));
  border:1px solid var(--borde)}
.tarjeta .icono svg{width:25px;height:25px;stroke:var(--aqua);fill:none;stroke-width:1.9}
.tarjeta h3{font-size:19.5px;font-weight:700;margin:0 0 9px;color:#fff;letter-spacing:-.01em}
.tarjeta p{margin:0;color:var(--apagado);font-size:15.5px;line-height:1.62}

/* ---------------------------------------------------------------- cartel --- */
.bloque-cartel{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);
  gap:76px;align-items:start}
.marco-cartel{position:relative;border-radius:var(--radio);overflow:hidden;
  box-shadow:0 38px 80px rgba(0,0,0,.6);transition:transform .6s var(--suave);
  position:sticky;top:104px}
.marco-cartel img{width:100%;transition:transform .9s var(--suave)}
.marco-cartel:hover img{transform:scale(1.035)}
.marco-cartel::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 48%,transparent 58%);
  transform:translateX(-120%);transition:transform 1.1s var(--suave)}
.marco-cartel:hover::before{transform:translateX(120%)}
.marco-cartel .lupa{position:absolute;right:16px;bottom:16px;z-index:3;
  background:rgba(6,19,24,.82);border:1px solid var(--borde);border-radius:99px;
  padding:9px 16px;font-size:12.5px;color:#fff;backdrop-filter:blur(8px)}

.escenario{margin-bottom:34px}
.escenario .cab{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.escenario .cab span{font-size:11.5px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--coral);white-space:nowrap}
.escenario .cab i{flex:1;height:1px;background:var(--borde)}
.artistas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.artistas li{padding:10px 19px;border-radius:99px;border:1px solid var(--borde);
  background:rgba(255,255,255,.04);font-weight:600;font-size:15.5px;
  transition:all .3s var(--suave);cursor:default}
.artistas li:hover{background:var(--coral);border-color:var(--coral);color:#fff;
  transform:translateY(-3px);box-shadow:0 12px 26px rgba(243,71,75,.36)}
.artistas li.grande{font-family:'Anton',sans-serif;font-weight:400;font-size:24px;
  letter-spacing:.4px;text-transform:uppercase;padding:9px 22px}

/* --------------------------------------------------------------- 3 pasos --- */
.pasos{counter-reset:paso;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.paso{position:relative;padding:42px 32px 34px;border-radius:var(--radio);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--borde);overflow:hidden}
.paso::before{counter-increment:paso;content:counter(paso,decimal-leading-zero);
  position:absolute;top:-16px;right:14px;font-family:'Anton',sans-serif;font-size:96px;
  line-height:1;color:rgba(255,255,255,.055);letter-spacing:-.04em}
.paso h3{font-size:21px;margin:0 0 10px;color:#fff}
.paso p{margin:0;color:var(--apagado);font-size:15.5px}
.paso .marca{width:38px;height:3px;border-radius:9px;margin-bottom:22px;
  background:linear-gradient(90deg,var(--coral),var(--turquesa))}

/* ------------------------------------------------------------ formulario --- */
#pedir{background:
   linear-gradient(180deg,rgba(8,24,31,1) 0%,rgba(10,32,40,.88) 34%,rgba(8,24,31,1) 100%)}
#pedir .fondo{position:absolute;inset:0;z-index:-1;overflow:hidden}
#pedir .fondo img{width:100%;height:100%;object-fit:cover;opacity:.18;filter:saturate(1.2)}
.caja-form{max-width:1180px;margin:0 auto;background:rgba(6,19,24,.72);
  border:1px solid var(--borde);border-radius:26px;backdrop-filter:blur(26px);
  box-shadow:var(--sombra);overflow:hidden}
.caja-form .cab{padding:30px 44px;border-bottom:1px solid var(--borde);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:linear-gradient(100deg,rgba(243,71,75,.14),rgba(47,212,189,.11))}
.caja-form .cab h3{margin:0;font-family:'Anton',sans-serif;font-weight:400;
  text-transform:uppercase;font-size:27px;letter-spacing:.4px}
.caja-form .cab .restan{margin-left:auto;font-size:13px;color:var(--apagado);text-align:right;
  letter-spacing:.4px}
.caja-form .cab .restan b{display:block;font-family:'Anton',sans-serif;font-weight:400;
  font-size:21px;letter-spacing:.6px;text-transform:uppercase;color:var(--aqua)}
.caja-form .cuerpo{padding:36px 44px 42px}

.pistas{display:flex;gap:0;margin-bottom:30px;list-style:none;padding:0}
.pistas li{flex:1;text-align:center;position:relative;font-size:12.5px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;color:#8aa6b0;padding-top:30px}
.pistas li::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:19px;height:19px;border-radius:50%;background:#12303a;border:2px solid #2b4d58;
  transition:all .45s var(--suave)}
.pistas li::after{content:'';position:absolute;top:9px;left:50%;width:100%;height:2px;background:#1b3d47}
.pistas li:last-child::after{display:none}
.pistas li.activo{color:#fff}
.pistas li.activo::before{background:var(--coral);border-color:var(--coral);
  box-shadow:0 0 0 6px rgba(243,71,75,.2)}
.pistas li.hecho{color:var(--aqua)}
.pistas li.hecho::before{background:var(--turquesa);border-color:var(--turquesa)}
.pistas li.hecho::after{background:var(--turquesa)}

/* Sin JavaScript los tres pasos se ven seguidos, como un formulario normal:
   es la única forma de que se pueda rellenar. Con JavaScript, uno cada vez. */
.paso-form{display:block}
.js .paso-form{display:none;animation:entra .5s var(--suave)}
.js .paso-form.visible{display:block}
html:not(.js) .pistas,html:not(.js) .siguiente,html:not(.js) .atras{display:none}
html:not(.js) .llave{padding-bottom:26px;border-bottom:1px solid var(--borde);margin-bottom:26px}
@keyframes entra{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

.campos{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.campo{position:relative}
.campo.ancho{grid-column:1/-1}
.campo label{display:block;font-size:12.5px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:#8fb0ba;margin-bottom:8px}
.campo label .req{color:var(--coral)}
.campo input,.campo select{width:100%;padding:15px 17px;border-radius:13px;
  border:1.5px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);
  color:#fff;font:400 16px/1.3 'Outfit',sans-serif;transition:all .3s var(--suave)}
.campo select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238fb0ba' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;padding-right:38px}
.campo select option{background:#0c242d;color:#fff}
.campo input:focus,.campo select:focus{outline:0;border-color:var(--turquesa);
  background:rgba(47,212,189,.09);box-shadow:0 0 0 4px rgba(47,212,189,.14)}
.campo input::placeholder{color:#5b7883}
.campo.error input,.campo.error select{border-color:var(--coral);background:rgba(243,71,75,.09)}
.campo .aviso{display:none;margin-top:7px;font-size:13.5px;color:var(--coral-claro)}
.campo.error .aviso{display:block;animation:tiembla .4s}
.campo .ayuda{margin-top:7px;font-size:13px;color:#7c98a2}
.campo .ok{position:absolute;right:14px;top:37px;color:var(--turquesa);opacity:0;
  transition:opacity .3s;font-size:19px}
.campo.valido .ok{opacity:1}
@keyframes tiembla{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* El año necesita más sitio que el día: con columnas iguales, «Año» se corta
   en «Añc» en un móvil estrecho. */
.trio{display:grid;grid-template-columns:.9fr 1.45fr 1.1fr;gap:9px}
.duo-tel{display:grid;grid-template-columns:110px 1fr;gap:10px}

.radios{display:flex;gap:10px;flex-wrap:wrap}
.radios label{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:13px;
  border:1.5px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);cursor:pointer;
  font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--texto);
  margin:0;transition:all .3s var(--suave)}
.radios input{position:absolute;opacity:0;pointer-events:none}
.radios label:hover{border-color:rgba(94,234,212,.5)}
.radios input:checked+span{color:#fff}
.radios label:has(input:checked){background:linear-gradient(120deg,rgba(243,71,75,.28),rgba(47,212,189,.2));
  border-color:var(--turquesa);box-shadow:0 0 0 4px rgba(47,212,189,.12)}

.casilla{display:flex;gap:13px;align-items:flex-start;margin-top:16px;
  font-size:14.5px;line-height:1.55;color:#bdd4da;cursor:pointer}
.casilla input{appearance:none;width:22px;height:22px;flex-shrink:0;margin-top:1px;
  border:1.6px solid rgba(255,255,255,.26);border-radius:7px;background:rgba(255,255,255,.05);
  cursor:pointer;transition:all .25s;position:relative}
.casilla input:checked{background:var(--turquesa);border-color:var(--turquesa)}
.casilla input:checked::after{content:'';position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #06232a;border-width:0 2.6px 2.6px 0;transform:rotate(43deg)}
.casilla.error input{border-color:var(--coral);box-shadow:0 0 0 4px rgba(243,71,75,.18)}

.pie-form{display:flex;gap:14px;align-items:center;margin-top:30px;flex-wrap:wrap}
.pie-form .atras{margin-right:auto}

/* el bloque del código de invitación, el primer paso */
.llave{text-align:center;padding:12px 0 8px}
.llave .candado{width:74px;height:74px;margin:0 auto 22px;border-radius:24px;display:grid;
  place-items:center;background:linear-gradient(140deg,rgba(243,71,75,.24),rgba(47,212,189,.24));
  border:1px solid var(--borde);animation:flota 3.6s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.llave .candado svg{width:34px;height:34px;stroke:var(--aqua);fill:none;stroke-width:1.8}
.llave h4{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:26px;margin:0 0 10px}
.llave p{color:var(--apagado);margin:0 auto 26px;max-width:52ch}
#codigo{text-align:center;font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:21px;letter-spacing:3px;text-transform:none;max-width:420px;margin:0 auto}

/* mensaje de resultado */
.resultado{display:none;text-align:center;padding:26px 0}
.resultado.visible{display:block}
.resultado .tic{width:96px;height:96px;margin:0 auto 26px;border-radius:50%;display:grid;
  place-items:center;background:linear-gradient(140deg,var(--turquesa),#1aa38f);
  box-shadow:0 0 0 12px rgba(47,212,189,.14),0 22px 48px rgba(47,212,189,.3);
  animation:aparece .7s var(--suave)}
@keyframes aparece{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.resultado .tic svg{width:46px;height:46px;stroke:#06232a;fill:none;stroke-width:3.4}
.localizador-caja{display:inline-block;padding:18px 30px;border-radius:16px;margin:20px 0 6px;
  background:rgba(0,0,0,.34);border:1px dashed rgba(94,234,212,.42);
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(15px,2.4vw,24px);
  letter-spacing:3px;color:var(--aqua);word-break:break-all}

.cargando{display:none;text-align:center;padding:52px 0}
.cargando.visible{display:block}
.cargando .aro{width:62px;height:62px;margin:0 auto 24px;border-radius:50%;
  border:4px solid rgba(255,255,255,.12);border-top-color:var(--coral);
  animation:vuelta .85s linear infinite}
@keyframes vuelta{to{transform:rotate(360deg)}}

/* ----------------------------------------------------------------- extras --- */
.franja-jornada{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mini{padding:26px 24px;border-radius:var(--radio-s);border:1px solid var(--borde);
  background:rgba(255,255,255,.04);transition:all .4s var(--suave)}
.mini:hover{background:rgba(255,255,255,.08);transform:translateY(-6px)}
.mini b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:19px;
  text-transform:uppercase;margin-bottom:8px;color:#fff;letter-spacing:.3px}
.mini span{font-size:14.8px;color:var(--apagado);line-height:1.6}

/* -------------------------------------------------------------------- pie --- */
footer{background:#050f14;border-top:1px solid var(--borde);padding:66px 0 26px;position:relative}
footer .rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;margin-bottom:44px}
footer h5{font-size:12px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--coral);margin:0 0 18px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:10px}
footer a{color:var(--apagado);font-size:15px;transition:color .25s,padding-left .25s}
footer a:hover{color:var(--aqua);padding-left:5px}
footer .datos{font-size:14.5px;color:#7c98a2;line-height:1.75}
footer .logos{display:flex;align-items:center;gap:18px;margin-bottom:20px}
footer .logos img{width:150px}
.redes{display:flex;gap:10px;flex-wrap:wrap}
.redes a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--borde);background:rgba(255,255,255,.04);padding:0;
  transition:all .32s var(--suave)}
.redes a:hover{background:var(--coral);border-color:var(--coral);transform:translateY(-4px)}
.redes svg{width:19px;height:19px;fill:var(--apagado);transition:fill .3s}
.redes a:hover svg{fill:#fff}
.pie-fino{border-top:1px solid var(--borde);padding-top:24px;display:flex;gap:18px;
  align-items:center;flex-wrap:wrap;font-size:13.5px;color:#6d8c96}
.pie-fino .legales{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.rueda{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--borde);background:rgba(255,255,255,.04);
  transition:all .5s var(--suave)}
.rueda svg{width:17px;height:17px;stroke:#6d8c96;fill:none;stroke-width:1.7;transition:stroke .3s}
.rueda:hover{background:rgba(94,234,212,.14);border-color:var(--aqua);transform:rotate(180deg)}
.rueda:hover svg{stroke:var(--aqua)}

/* ------------------------------------------------- aparición al bajar --- */
.js .revelar{opacity:0;transform:translateY(38px);
  transition:opacity .85s var(--suave),transform .85s var(--suave)}
.revelar.dentro{opacity:1;transform:none}
.revelar.d1{transition-delay:.09s}.revelar.d2{transition-delay:.18s}
.revelar.d3{transition-delay:.27s}.revelar.d4{transition-delay:.36s}

/* ------------------------------------------------------------- páginas de texto --- */
.pagina-texto{padding:170px 0 90px;max-width:1180px;margin:0 auto}
.pagina-texto h1{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,4.4vw,56px);margin:0 0 12px;line-height:1.04}
.pagina-texto h2{font-size:23px;margin:44px 0 14px;color:#fff;font-weight:700}
.pagina-texto h3{font-size:18px;margin:28px 0 10px;color:var(--aqua);font-weight:600}
.pagina-texto p,.pagina-texto li{color:#c3d8de;font-size:16.5px;line-height:1.78}
.pagina-texto ul{padding-left:22px}
.pagina-texto li{margin-bottom:9px}
.pagina-texto table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px}
.pagina-texto th,.pagina-texto td{padding:13px 16px;border:1px solid var(--borde);text-align:left;
  vertical-align:top}
.pagina-texto th{background:rgba(255,255,255,.05);color:#fff;font-weight:600}
.pagina-texto .fecha{color:var(--apagado);font-size:14.5px}
.pestanas{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 40px}
.pestanas a{padding:11px 22px;border-radius:99px;border:1px solid var(--borde);
  background:rgba(255,255,255,.04);color:var(--apagado);font-size:14.5px;font-weight:600;
  transition:all .3s}
.pestanas a.activa,.pestanas a:hover{background:var(--coral);border-color:var(--coral);color:#fff}

/* ----------------------------------------------------------------- error --- */
.pagina-error{min-height:100svh;display:grid;place-items:center;text-align:center;padding:40px}
.pagina-error .codigo{font-family:'Anton',sans-serif;font-size:clamp(90px,17vw,200px);
  line-height:.85;margin:0}

/* ============================================================== responsive === */
@media (max-width:1500px){
  .contenedor{width:min(100% - 44px,1680px)}
}
@media (max-width:1280px){
  .rejilla-4,.franja-jornada{grid-template-columns:repeat(2,1fr)}
  .hero .rejilla{grid-template-columns:1fr;gap:44px}
  .bloque-cartel{grid-template-columns:1fr;gap:42px}
  .marco-cartel{max-width:520px;margin:0 auto;position:static}
  footer .rejilla{grid-template-columns:repeat(2,1fr);gap:34px}
}
@media (max-width:900px){
  .rejilla-3{grid-template-columns:1fr}
  .caja-form .cuerpo,.caja-form .cab{padding-inline:26px}
  .campos{grid-template-columns:1fr}
  section{padding:76px 0}
  .contenedor,.estrecho{width:min(100% - 32px,var(--ancho))}
  .pistas li{font-size:0;letter-spacing:0}
  .pistas li.activo{font-size:11px}
}
@media (max-width:620px){
  .rejilla-4,.franja-jornada{grid-template-columns:1fr}
  .campo select{padding-right:30px;background-position:right 10px center;font-size:15px}
  .trio{gap:7px}
  footer .rejilla{grid-template-columns:1fr}
  .nav .capla,.nav .separa{display:none}
  .cuenta-atras{grid-template-columns:repeat(4,1fr);gap:6px}
  .cuenta-atras b{font-size:22px}
  .hero{padding-top:124px}
  #halo{display:none}
  .pagina-texto{padding-top:130px}
}

/* ============================================ quien no quiere movimiento === */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .revelar{opacity:1;transform:none}
  h1.titular .linea>span{transform:none}
  #chispas{display:none}
}

/* =========================================================================
   Movimiento adicional. Todo lo de aquí abajo es decorativo y se apaga entero
   en el bloque `prefers-reduced-motion`, que está al final del fichero y
   también cubre estas reglas.
   ========================================================================= */

/* ---- Auroras: dos manchas de color que se mueven despacio detrás de cada
        sección. Dan la sensación de que la página respira sin distraer, y son
        dos pseudoelementos, no imágenes. --------------------------------- */
section.aurora{isolation:isolate}
section.aurora::before,section.aurora::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  filter:blur(90px);opacity:.28}
section.aurora::before{
  width:44vw;height:44vw;max-width:680px;max-height:680px;top:-14%;left:-10%;
  background:radial-gradient(circle,rgba(243,71,75,.75),transparent 66%);
  animation:vagar1 26s ease-in-out infinite alternate}
section.aurora::after{
  width:40vw;height:40vw;max-width:620px;max-height:620px;bottom:-16%;right:-8%;
  background:radial-gradient(circle,rgba(47,212,189,.7),transparent 66%);
  animation:vagar2 32s ease-in-out infinite alternate}
@keyframes vagar1{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(9vw,7vh,0) scale(1.14)}
  100%{transform:translate3d(-4vw,12vh,0) scale(.94)}}
@keyframes vagar2{
  0%{transform:translate3d(0,0,0) scale(1.06)}
  50%{transform:translate3d(-11vw,-8vh,0) scale(.9)}
  100%{transform:translate3d(5vw,-13vh,0) scale(1.18)}}

/* ---- Los títulos de sección entran palabra a palabra ------------------- */
.porpalabras .pal{display:inline-block;overflow:hidden;vertical-align:bottom}
.porpalabras .pal>i{display:inline-block;font-style:inherit;
  transition:transform .8s var(--suave)}
.js .porpalabras:not(.dentro) .pal>i{transform:translateY(112%)}
.porpalabras.dentro .pal>i{transform:translateY(0)}

/* ---- Filo de luz que recorre el borde de la tarjeta al pasar el ratón --- */
.tarjeta.filo::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--giro,0turn),transparent 0 62%,
             var(--aqua) 74%,var(--coral) 86%,transparent 92% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;
  transition:opacity .4s;pointer-events:none;z-index:1}
.tarjeta.filo:hover::before{opacity:1;animation:girarFilo 2.6s linear infinite}
@keyframes girarFilo{to{--giro:1turn}}
@property --giro{syntax:'<angle>';initial-value:0turn;inherits:false}

/* ---- Los artistas entran escalonados ----------------------------------- */
.js .artistas li{opacity:0;transform:translateY(14px) scale(.96)}
.artistas li{
  transition:opacity .5s var(--suave),transform .5s var(--suave),
             background .3s,border-color .3s,box-shadow .3s}
.escenario.dentro .artistas li{opacity:1;transform:none}

/* ---- Separador entre secciones: una línea que se enciende -------------- */
.separador{height:1px;width:min(100% - 48px,var(--ancho));margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--borde) 18%,var(--borde) 82%,transparent);
  position:relative;overflow:hidden}
.separador::after{content:'';position:absolute;top:0;left:-30%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,var(--aqua),transparent);
  animation:recorrer 6s ease-in-out infinite}
@keyframes recorrer{0%{left:-30%}55%,100%{left:105%}}

/* ---- Los iconos de las tarjetas laten al entrar en pantalla ------------ */
.tarjeta.dentro .icono{animation:aparecerIcono .7s var(--suave) backwards}
@keyframes aparecerIcono{
  from{transform:scale(.4) rotate(-12deg);opacity:0}
  to{transform:none;opacity:1}}

/* ---- El número del paso, con su propia entrada ------------------------- */
.paso.dentro::before{animation:entraNumero 1s var(--suave) backwards}
@keyframes entraNumero{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

/* =========================================================================
   Segunda tanda de movimiento (pedida el 21-09-2026). Igual que la primera:
   todo cuelga de `html.js` cuando esconde algo, y el bloque de
   `prefers-reduced-motion` del final lo apaga entero.
   ========================================================================= */

/* ---- El fondo del héroe respira: un zoom lentísimo, de ida y vuelta ----- */
.hero__fondo img{animation:respirar 34s ease-in-out infinite alternate}
@keyframes respirar{
  from{transform:scale(1.08)}
  to{transform:scale(1.2) translate3d(-1.5%,-1%,0)}}

/* ---- Barrido de luz sobre el héroe, cada pocos segundos ---------------- */
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.055) 47%,
             rgba(94,234,212,.09) 50%,transparent 60%);
  transform:translateX(-120%);animation:barrido 9s ease-in-out infinite}
@keyframes barrido{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ---- Flecha que invita a bajar ----------------------------------------- */
.bajar{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--apagado);
  font-size:11px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;
  text-decoration:none;transition:color .3s}
.bajar:hover{color:var(--aqua)}
.bajar .raya{width:1px;height:42px;background:linear-gradient(var(--aqua),transparent);
  position:relative;overflow:hidden}
.bajar .raya::after{content:'';position:absolute;top:-42px;left:0;width:1px;height:42px;
  background:linear-gradient(transparent,var(--coral));animation:gotear 2.2s ease-in-out infinite}
@keyframes gotear{0%{top:-42px}70%,100%{top:42px}}
@media (max-width:1280px){.bajar{display:none}}

/* ---- Botones magnéticos: se inclinan hacia donde está el ratón --------- */
.btn{will-change:transform}

/* ---- El titular, con un destello que lo recorre ------------------------ */
h1.titular .linea>span{position:relative}
.degradado{position:relative}

/* ---- Halo que late detrás del cartel ----------------------------------- */
.marco-cartel::after{content:'';position:absolute;inset:-26px;z-index:-1;border-radius:34px;
  background:radial-gradient(closest-side,rgba(47,212,189,.34),transparent 72%);
  filter:blur(26px);animation:latirHalo 5.5s ease-in-out infinite}
@keyframes latirHalo{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}

/* ---- Las tarjetas se levantan y el icono gira un poco ------------------ */
.tarjeta .icono{transition:transform .5s var(--suave),box-shadow .5s}
.tarjeta:hover .icono{transform:translateY(-4px) rotate(-7deg) scale(1.08);
  box-shadow:0 12px 26px rgba(47,212,189,.28)}
.mini{position:relative;overflow:hidden}
.mini::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--coral),var(--turquesa));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--suave)}
.mini:hover::after{transform:scaleX(1)}
.paso{transition:transform .45s var(--suave),border-color .45s}
.paso:hover{transform:translateY(-7px);border-color:rgba(94,234,212,.4)}
.paso .marca{transition:width .45s var(--suave)}
.paso:hover .marca{width:78px}

/* ---- Cifras de la cuenta atrás: cada cambio se nota -------------------- */
.cuenta-atras b{transition:transform .25s var(--suave),color .25s}
.cuenta-atras b.cambia{transform:scale(1.22);color:var(--aqua)}
.cuenta-atras div{position:relative;overflow:hidden}
.cuenta-atras div::after{content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent,rgba(94,234,212,.12),transparent);
  transform:translateX(-100%);animation:brilloCaja 4.5s ease-in-out infinite}
.cuenta-atras div:nth-child(2)::after{animation-delay:.4s}
.cuenta-atras div:nth-child(3)::after{animation-delay:.8s}
.cuenta-atras div:nth-child(4)::after{animation-delay:1.2s}
@keyframes brilloCaja{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ---- Reguero de progreso en el lateral --------------------------------- */
#aguja{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:700;
  display:flex;flex-direction:column;gap:11px;align-items:center}
#aguja a{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2);
  transition:all .35s var(--suave);position:relative}
#aguja a:hover{background:var(--aqua);transform:scale(1.4)}
#aguja a.aqui{background:var(--coral);height:26px;border-radius:9px;
  box-shadow:0 0 14px rgba(243,71,75,.65)}
#aguja a span{position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(8px);
  white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--aqua);opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s}
#aguja a:hover span{opacity:1;transform:translateY(-50%) translateX(0)}
@media (max-width:1500px){#aguja{display:none}}

/* ---- El sello también reacciona al ratón ------------------------------- */
.sello{transition:transform .5s var(--suave)}
.sello:hover{transform:scale(1.07) rotate(4deg)}

/* ---- Los enlaces del pie, con subrayado que crece ---------------------- */
footer li a{position:relative}
footer li a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--aqua);transition:width .35s var(--suave)}
footer li a:hover::after{width:calc(100% - 5px)}

/* ---- El reclamo del cupo, con latido suave ----------------------------- */
.reclamo b{animation:desliza 7s linear infinite,acento 3.4s ease-in-out infinite}
@keyframes acento{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---- El kicker de «partner oficial», con su punto y un aro ------------- */
.kicker{position:relative;overflow:hidden}
.kicker::after{content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent,rgba(94,234,212,.22),transparent);
  transform:translateX(-100%);animation:brilloCaja 5.5s ease-in-out infinite}

/* =========================================================================
   La fecha, en grande. Era lo más pequeño de la página y es el dato que más
   pesa en la decisión de venir: ahora es un bloque con entidad propia.
   ========================================================================= */

/* ---- Cinta de fecha del héroe ------------------------------------------ */
.cinta-fecha{display:inline-flex;align-items:center;gap:20px;margin:0 0 28px;
  padding:16px 26px 16px 20px;border-radius:20px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(243,71,75,.18),rgba(47,212,189,.14));
  border:1px solid var(--borde);backdrop-filter:blur(14px)}
.cinta-fecha::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translateX(-120%);animation:brilloCaja 6s ease-in-out infinite}
.cinta-fecha .dia{font-family:'Anton',sans-serif;font-size:clamp(52px,4.6vw,76px);
  line-height:.84;letter-spacing:-.03em;
  background:linear-gradient(140deg,#fff 20%,var(--turquesa-claro));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cinta-fecha .mes{display:flex;flex-direction:column;line-height:1}
.cinta-fecha .mes b{font-family:'Anton',sans-serif;font-weight:400;font-size:26px;
  letter-spacing:.06em;color:var(--coral)}
.cinta-fecha .mes i{font-style:normal;font-family:'Anton',sans-serif;font-size:19px;
  letter-spacing:.08em;color:#fff;opacity:.82}
.cinta-fecha .vertical{width:1px;align-self:stretch;background:var(--borde)}
.cinta-fecha .lugar{display:flex;flex-direction:column;gap:3px}
.cinta-fecha .lugar b{font-size:16px;font-weight:700;color:#fff;letter-spacing:.2px}
.cinta-fecha .lugar i{font-style:normal;font-size:13px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--aqua)}

/* ---- Fecha grande de la sección del festival --------------------------- */
.fecha-grande{display:inline-flex;align-items:baseline;gap:10px;margin-bottom:18px;
  font-family:'Anton',sans-serif;line-height:.9}
.fecha-grande b{font-weight:400;font-size:clamp(46px,5.4vw,84px);letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--coral) 0%,#ff8a5c 46%,var(--turquesa-claro) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:230% auto;animation:desliza 8s linear infinite}
.fecha-grande s{text-decoration:none;font-size:clamp(26px,2.6vw,42px);color:#5f8591;
  transform:translateY(-.12em)}
.fecha-grande em{font-family:'Outfit',sans-serif;font-style:normal;font-weight:700;
  font-size:14px;letter-spacing:4px;text-transform:uppercase;color:var(--aqua);
  margin-left:12px;align-self:center}
@media (max-width:620px){
  .cinta-fecha{gap:14px;padding:13px 18px 13px 15px;width:100%}
  .cinta-fecha .lugar i{font-size:11.5px;letter-spacing:.8px}
  .fecha-grande{flex-wrap:wrap;justify-content:center;gap:7px}
  .fecha-grande em{width:100%;margin:6px 0 0;text-align:center}
}

/* =========================================================================
   Tercera tanda de movimiento. Lo que se busca aquí es que la página no esté
   nunca del todo quieta, pero sin que nada compita con el texto: todo lo que
   se mueve son fondos, bordes y entradas, nunca el contenido que se está
   leyendo.
   ========================================================================= */

/* ---- Parallax por capas: cada elemento con `data-capa` se desplaza a su
        propio ritmo mientras se baja. Lo mueve el JavaScript. ------------ */
[data-capa]{will-change:transform}

/* ---- Rejilla de puntos que se desliza detrás de las secciones --------- */
section.aurora::before{z-index:-2}
.trama{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask:radial-gradient(120% 80% at 50% 40%,#000 25%,transparent 78%);
          mask:radial-gradient(120% 80% at 50% 40%,#000 25%,transparent 78%);
  animation:derivarTrama 40s linear infinite}
@keyframes derivarTrama{to{background-position:34px 68px}}

/* ---- Onda que separa secciones, dibujada y en movimiento -------------- */
.onda{display:block;width:100%;height:56px;overflow:hidden;line-height:0}
.onda svg{width:220%;height:100%;animation:oleaje 18s linear infinite}
@keyframes oleaje{to{transform:translateX(-50%)}}

/* ---- Líneas que se dibujan solas al entrar en pantalla ---------------- */
.escenario .cab i{transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--suave) .15s}
.escenario.dentro .cab i{transform:scaleX(1)}
.seccion-titulo::after{content:'';display:block;width:0;height:2px;margin:26px auto 0;
  border-radius:9px;background:linear-gradient(90deg,var(--coral),var(--turquesa));
  transition:width 1s var(--suave) .25s}
.seccion-titulo.dentro::after{width:96px}

/* ---- Las tarjetas entran con un poco de perspectiva ------------------- */
.js .tarjeta,.js .mini,.js .paso{opacity:0;transform:translateY(26px) rotateX(6deg);
  transform-origin:center bottom;
  transition:opacity .7s var(--suave),transform .7s var(--suave),
             border-color .4s,box-shadow .4s,background .4s}
.js .tarjeta.dentro,.js .mini.dentro,.js .paso.dentro{opacity:1;transform:none}
.js .mini:nth-child(2){transition-delay:.08s}
.js .mini:nth-child(3){transition-delay:.16s}
.js .mini:nth-child(4){transition-delay:.24s}

/* ---- El logotipo del pie, con su latido ------------------------------- */
footer .logos img{transition:transform .5s var(--suave),filter .5s}
footer .logos img:hover{transform:scale(1.05);filter:drop-shadow(0 0 16px rgba(94,234,212,.5))}

/* ---- Puntitos que suben por el formulario ----------------------------- */
#pedir .fondo::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(94,234,212,.5) 1.4px,transparent 1.4px);
  background-size:120px 120px;opacity:.22;animation:subirPuntos 24s linear infinite}
@keyframes subirPuntos{to{background-position:0 -240px}}

/* ---- La caja del formulario, con un borde que respira ----------------- */
.caja-form{position:relative}
.caja-form::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(130deg,rgba(243,71,75,.65),transparent 38%,
             transparent 62%,rgba(47,212,189,.65));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
  animation:respirarBorde 6s ease-in-out infinite}
@keyframes respirarBorde{0%,100%{opacity:.45}50%{opacity:1}}

/* ---- Los campos, con un filo turquesa que aparece al escribir --------- */
.campo input,.campo select{position:relative}
.campo.valido input,.campo.valido select{border-color:rgba(47,212,189,.5)}

/* ---- El marcador del paso activo, con un aro que pulsa ---------------- */
.pistas li.activo::before{animation:aroPaso 2s ease-in-out infinite}
@keyframes aroPaso{
  0%,100%{box-shadow:0 0 0 6px rgba(243,71,75,.2)}
  50%{box-shadow:0 0 0 11px rgba(243,71,75,.06)}}

/* =========================================================================
   Cuarta tanda: los iconos se dibujan solos, el cartel se inclina con el
   ratón y las chispas del héroe reaccionan a dónde está el cursor.
   ========================================================================= */

/* ---- Los iconos de las tarjetas se dibujan con el trazo ---------------- */
.js .tarjeta .icono svg path,
.js .tarjeta .icono svg rect,
.js .tarjeta .icono svg circle{
  stroke-dasharray:var(--largo,120);stroke-dashoffset:var(--largo,120)}
.js .tarjeta.dentro .icono svg path,
.js .tarjeta.dentro .icono svg rect,
.js .tarjeta.dentro .icono svg circle{
  animation:dibujar 1.1s var(--suave) .25s forwards}
@keyframes dibujar{to{stroke-dashoffset:0}}

/* ---- El cartel se inclina hacia donde está el ratón -------------------- */
.marco-cartel{transform-style:preserve-3d;will-change:transform}
.marco-cartel img{backface-visibility:hidden}

/* ---- Las etiquetas de artista, con un rebote al aparecer -------------- */
.escenario.dentro .artistas li{animation:rebotito .55s var(--suave) backwards}
.escenario.dentro .artistas li:nth-child(2){animation-delay:.06s}
.escenario.dentro .artistas li:nth-child(3){animation-delay:.12s}
.escenario.dentro .artistas li:nth-child(4){animation-delay:.18s}
.escenario.dentro .artistas li:nth-child(5){animation-delay:.24s}
.escenario.dentro .artistas li:nth-child(6){animation-delay:.3s}
@keyframes rebotito{
  0%{opacity:0;transform:translateY(16px) scale(.9)}
  62%{opacity:1;transform:translateY(-4px) scale(1.03)}
  100%{opacity:1;transform:none}}

/* ---- El titular del formulario, con las letras revueltas al entrar ----- */
.revuelto{font-variant-numeric:tabular-nums}

/* ---- Los pasos numerados: el número crece al pasar por encima ---------- */
.paso::before{transition:color .45s var(--suave),transform .45s var(--suave)}
.paso:hover::before{color:rgba(243,71,75,.16);transform:scale(1.1) translateX(-6px)}

/* ---- El pie, con una línea de color que respira ------------------------ */
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--coral),var(--turquesa),transparent);
  background-size:200% 100%;animation:desliza 9s linear infinite}

/* ---- Las cuatro cifras del cartel, que además llenan el hueco que dejaba
        la columna de texto al lado de un cartel tan alto. ---------------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px;
  padding-top:30px;border-top:1px solid var(--borde)}
.cifras div{position:relative}
.cifras b{display:block;font-family:'Anton',sans-serif;font-weight:400;
  font-size:clamp(34px,3vw,52px);line-height:1;letter-spacing:-.02em;color:#fff;
  margin-bottom:8px}
.cifras b::after{content:'';display:block;width:26px;height:3px;border-radius:9px;
  margin-top:11px;background:linear-gradient(90deg,var(--coral),var(--turquesa));
  transition:width .5s var(--suave)}
.cifras div:hover b::after{width:56px}
.cifras span{font-size:14px;color:var(--apagado);line-height:1.45;display:block}
@media (max-width:900px){.cifras{grid-template-columns:repeat(2,1fr);gap:22px}}

/* =========================================================================
   Ajustes de móvil y tableta, salidos de la revisión del 21-09-2026 a 360,
   390, 430, 768, 834, 1024 y 1280 px. Van al final para que ganen a todo lo
   anterior sin tener que tocarlo pieza a pieza.
   ========================================================================= */

/* ---- A 360 px el panel del cupo empujaba toda la columna del héroe -----
        El culpable era la fila «reclamo + sello»: 139 px de texto, 148 de
        sello y 64 de relleno no caben en 328. Se apila y el sello encoge. */
@media (max-width:700px){
  .panel-cupo{padding:24px 20px}
  .panel-cupo>div:first-child{flex-wrap:wrap;gap:14px!important}
  .sello{width:104px;height:104px}
  .reclamo{font-size:clamp(22px,6.4vw,28px)}
  .cinta-fecha{flex-wrap:wrap;row-gap:12px}
  .cinta-fecha .vertical{display:none}
  .cuenta-atras{gap:7px}
  /* Todo elemento de rejilla puede encogerse: sin esto, un hijo ancho estira
     la columna entera y saca el contenido de la pantalla. */
  .hero .rejilla>*,.bloque-cartel>*,.rejilla-4>*,.rejilla-3>*,
  .franja-jornada>*,.pasos>*,footer .rejilla>*{min-width:0}
}

/* ---- La cabecera de la caja del formulario, apilada en móvil ---------- */
@media (max-width:820px){
  .caja-form .cab{flex-direction:column;align-items:flex-start;gap:12px}
  .caja-form .cab .restan{margin-left:0;text-align:left}
  .caja-form .cab h3{font-size:22px}
}

/* ---- Los cuatro pasos del formulario, legibles en móvil --------------- */
@media (max-width:900px){
  .pistas li{font-size:10.5px;letter-spacing:.4px;padding-top:26px}
  .pistas li.activo{font-size:10.5px}
  .pistas li::before{width:16px;height:16px}
  .pistas li::after{top:7px}
}

/* ---- Zona de toque de 44 px en los enlaces del pie -------------------- */
@media (pointer:coarse){
  footer li{margin-bottom:2px}
  footer li a{display:inline-block;padding:11px 0;min-height:44px;line-height:22px}
  .pie-fino .legales a{padding:12px 0;display:inline-block;min-height:44px;line-height:20px}
  .rueda{width:44px;height:44px}
  .redes a{width:46px;height:46px}
}

/* ---- La onda decorativa no tiene por qué salirse de la caja ----------- */
.onda{overflow:hidden}
.onda svg{display:block}

/* ---- Menú para pantallas estrechas ------------------------------------ */
.menu-movil{display:none;position:relative}
.menu-movil summary{list-style:none;cursor:pointer;width:46px;height:46px;
  border-radius:13px;border:1px solid var(--borde);background:rgba(255,255,255,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:background .3s,border-color .3s}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil summary:hover{background:rgba(255,255,255,.11);border-color:var(--aqua)}
.menu-movil summary span{display:block;width:19px;height:2px;border-radius:9px;
  background:#fff;transition:transform .32s var(--suave),opacity .25s}
.menu-movil[open] summary span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-movil[open] summary span:nth-child(2){opacity:0}
.menu-movil[open] summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-movil .desplegable{position:absolute;right:0;top:calc(100% + 12px);min-width:216px;
  padding:10px;border-radius:18px;background:rgba(6,19,24,.97);
  border:1px solid var(--borde);box-shadow:0 22px 52px rgba(0,0,0,.6);
  backdrop-filter:blur(20px);display:flex;flex-direction:column;gap:2px;
  animation:caeMenu .28s var(--suave)}
@keyframes caeMenu{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.menu-movil .desplegable a{padding:13px 16px;border-radius:12px;color:var(--texto);
  font-size:15.5px;font-weight:500;min-height:44px;display:flex;align-items:center;
  transition:background .25s,color .25s}
.menu-movil .desplegable a:hover{background:rgba(94,234,212,.14);color:#fff}
.menu-movil .desplegable a:last-child{color:var(--coral);font-weight:700;
  background:rgba(243,71,75,.12);margin-top:4px}

/* ---- Reajustes de tableta (900-1500 px) ------------------------------- */
@media (max-width:1280px){
  /* El distintivo del cartel iba con `position:absolute` y, al perder el
     cartel su `position`, se anclaba a la sección y acababa flotando 600 px
     más abajo, suelto en mitad de la página. */
  .marco-cartel{position:relative;top:auto;max-width:620px}
  .nav{padding:12px 0}
  .nav.pegada{padding:9px 0}
  .pasos{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
  .hero{padding:126px 0 120px}
  /* Líneas de texto que no se estiren hasta hacerse incómodas de leer. */
  .paso p,.mini span,.tarjeta p,.panel-cupo .nota,.hero p.entrada,
  .pagina-texto p,.pagina-texto li{max-width:62ch}
  .seccion-titulo p{max-width:58ch}
  footer .datos{max-width:46ch}
}
@media (max-width:1150px){
  /* Ojo con el `>`: sin él, la regla se lleva por delante los enlaces de
     dentro del desplegable y el menú se abre vacío. */
  .nav nav > a:not(.btn-nav){display:none}
  .menu-movil{display:block}
  .nav nav{gap:10px}
}
@media (max-width:760px){
  .nav .btn-nav{padding:12px 18px;font-size:14px}
  .nav .logo img{width:112px}
}
@media (max-width:420px){
  .nav .btn-nav span{font-size:13px}
  .nav .btn-nav{padding:11px 14px}
}

/* =========================================================================
   Segunda ronda de arreglos de la revisión (tableta apaisada y portátil).
   ========================================================================= */

/* ---- La cabecera fija se comía el arranque de cada sección ------------
        Al pulsar un enlace del menú, el navegador dejaba la sección en el
        borde de arriba y los 103 px de la barra la tapaban. `scroll-margin`
        le dice dónde tiene que parar de verdad. */
:root{scroll-padding-top:118px}
section[id],[id^="top"]{scroll-margin-top:118px}
@media (max-width:1280px){:root{scroll-padding-top:100px}
  section[id]{scroll-margin-top:100px}}
@media (max-width:760px){:root{scroll-padding-top:86px}
  section[id]{scroll-margin-top:86px}}

/* ---- La barra dejaba ver el texto de debajo (era un 7 % transparente) -- */
.nav.pegada{background:rgba(6,19,24,.975)}
html:not(.js) .nav{background:rgba(6,19,24,.975)}

/* ---- El cartel y su texto, en dos columnas ya desde 1100 px ----------- */
@media (min-width:1101px) and (max-width:1280px){
  .bloque-cartel{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px}
  .marco-cartel{max-width:420px;margin:0}
}

/* ---- Menos aire entre secciones en pantallas bajas -------------------- */
@media (max-height:900px) and (min-width:901px){
  section{padding:78px 0}
  .hero{min-height:auto;padding:118px 0 104px}
}
@media (max-width:1280px){
  section{padding:84px 0}
  .separador{margin-block:0}
}

/* ---- El pie, con las cuatro columnas mientras quepan ------------------ */
@media (min-width:901px) and (max-width:1280px){
  footer .rejilla{grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:30px}
}

/* ---- La barra de navegación en pantallas muy estrechas ----------------
        A 360 px no caben a la vez el logotipo, el botón y el menú: suman
        324 px en un contenedor de 312. Por debajo de 470 px se deja el menú,
        que ya lleva «Tu invitación» destacado como primera acción. */
@media (max-width:760px){
  .nav .fila{gap:12px}
  .nav nav{gap:8px}
}
@media (max-width:470px){
  .nav .btn-nav{display:none}
  .nav .logo img{width:120px}
  .menu-movil .desplegable{min-width:min(238px,calc(100vw - 40px))}
}
/* Y el desplegable nunca puede salirse de la pantalla. */
.menu-movil .desplegable{max-width:calc(100vw - 32px)}

/* =========================================================================
   Tercera ronda de arreglos de la revisión: tabla de cookies en móvil,
   opciones de género, fondos que no aportaban y zonas de toque.
   ========================================================================= */

/* ---- Las tablas de las páginas legales, en fichas cuando no caben -----
        La de cookies tiene cuatro columnas y a 390 px medía 598: la última
        se perdía por la derecha sin barra con la que llegar a ella. */
@media (max-width:760px){
  .pagina-texto table,.pagina-texto thead,.pagina-texto tbody,
  .pagina-texto tr,.pagina-texto th,.pagina-texto td{display:block;width:100%}
  .pagina-texto thead{display:none}
  .pagina-texto tr{border:1px solid var(--borde);border-radius:14px;
    margin-bottom:14px;overflow:hidden;background:rgba(255,255,255,.03)}
  .pagina-texto td,.pagina-texto th{border:0;border-bottom:1px solid rgba(255,255,255,.07);
    padding:13px 16px}
  .pagina-texto tr td:last-child,.pagina-texto tr th:last-child{border-bottom:0}
  /* La primera celda de cada fila hace de título de la ficha. */
  .pagina-texto tbody th:first-child,
  .pagina-texto tbody td:first-child{background:rgba(255,255,255,.05);color:#fff;
    font-weight:600}
  /* En la tabla de cookies, que sí tiene cabecera, cada celda lleva su rótulo. */
  .pagina-texto thead + tbody td::before{content:attr(data-eti);display:block;
    font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
    color:var(--coral);margin-bottom:5px}
}

/* ---- «Prefiero no decirlo» se partía en tres líneas -------------------- */
.radios label{white-space:nowrap}
@media (max-width:420px){
  .radios{gap:8px}
  .radios label{padding:12px 15px;font-size:14.5px}
}

/* ---- Las fotos de fondo, en móvil, no se ven: solo una franja del 10 % -
        Se sustituyen por el degradado, que es lo que de verdad da ambiente. */
@media (max-width:820px){
  .hero__fondo img{object-position:center 22%}
  #pedir .fondo img{display:none}
  #pedir .fondo{background:radial-gradient(90% 60% at 50% 20%,rgba(47,212,189,.12),transparent 70%)}
}

/* ---- Zona de toque del logotipo y de los datos de contacto ------------- */
@media (pointer:coarse){
  .nav .logo{padding:10px 0;min-height:44px;align-items:center}
  footer .datos a{display:inline-block;padding:9px 0;min-height:40px;line-height:22px}
}

/* ---- Las etiquetas del contador, un punto más grandes ------------------ */
.cuenta-atras span{font-size:11.5px}
@media (max-width:420px){.cuenta-atras span{font-size:10.5px;letter-spacing:1px}}