/* ==========================================================================
   WIENER SHARK EXPERIENCE
   ========================================================================== */

/* ==========================================================================
   0. FUENTES
   ========================================================================== */
@font-face{font-family:'N27';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/N27-Regular.woff2') format('woff2');}
@font-face{font-family:'N27';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/N27-Medium.woff2') format('woff2');}
@font-face{font-family:'N27';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/N27-Bold.woff2') format('woff2');}
@font-face{font-family:'Founders Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/FoundersGrotesk-Regular.woff2') format('woff2');}
@font-face{font-family:'Founders Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/FoundersGrotesk-Semibold.woff2') format('woff2');}
@font-face{font-family:'Founders Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/FoundersGrotesk-Bold.woff2') format('woff2');}

/* ==========================================================================
   1. TOKENS
   Ningún color literal fuera de este bloque: todo por var(--sk-*).
   ========================================================================== */
:root{
  /* Superficie */
  --sk-abyss:        #021221;   /* fondo maestro */
  --sk-deep:         #030b16;   /* zonas profundas */
  --sk-surface:      rgba(4,26,38,.72);   /* tarjeta glass */
  --sk-surface-2:    rgba(9,43,73,.55);   /* superficie elevada */
  --sk-solid:        #092b49;   /* azul marino de marca */

  /* Acento — UNO SOLO */
  --sk-turquoise:    #08e0e5;
  --sk-turquoise-2:  #06c7cb;
  --sk-teal:         #056c7b;
  --sk-brand:        #00adaf;

  /* Texto */
  --sk-text:         #ffffff;
  --sk-text-soft:    rgba(255,255,255,.78);
  --sk-text-mute:    rgba(255,255,255,.55);
  --sk-text-on-acc:  #041830;   /* SIEMPRE sobre superficie turquesa */
  --sk-error:        #ff7a7a;
  --sk-success:      #10b981;

  /* Líneas y luz */
  --sk-border:        rgba(8,224,229,.28);
  --sk-border-strong: rgba(8,224,229,.60);
  --sk-divider:       rgba(255,255,255,.10);
  --sk-glow:          0 0 24px rgba(8,224,229,.28);
  --sk-glow-strong:   0 0 32px rgba(8,224,229,.45);
  --sk-gradient:      linear-gradient(135deg, var(--sk-turquoise-2), var(--sk-teal));

  /* Radios */
  --r-pill:999px; --r-lg:24px; --r-md:16px; --r-sm:10px;

  /* Espaciado */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:80px;

  /* Tipografía fluida */
  --font-display:'N27', system-ui, -apple-system, sans-serif;
  --font-body:'Founders Grotesk', system-ui, -apple-system, sans-serif;
  --fs-display:clamp(1.8rem, 3.8vw, 3rem);
  --fs-h2:clamp(1.45rem, 2.5vw, 2rem);
  --fs-h3:clamp(1.1rem, 1.9vw, 1.4rem);
  --fs-h4:1.15rem;

  /* Escala de texto. No usar tamaños fuera de estos tres:
     --fs-body  todo texto corrido · --fs-small  secundario y botones
     --fs-micro  SOLO overlines en mayúsculas, nunca frases. */
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-micro:.75rem;

  /* Movimiento */
  --ease:cubic-bezier(.25,.8,.25,1);
  --dur:.28s;

  /* Estructura */
  --header-h:74px;
  --hero-brand-top:18px;   /* separación del logo superpuesto al borde */
  --hero-brand-h:64px;     /* alto del logo superpuesto */
  --wrap:1180px;
}

/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;font-size:16px;background:var(--sk-abyss);-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--sk-text);
  background:var(--sk-abyss);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,picture,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none;transition:color var(--dur) var(--ease)}
ul{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.01em}

::selection{background:var(--sk-turquoise);color:var(--sk-text-on-acc)}

:focus-visible{
  outline:2px solid var(--sk-turquoise);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.container{width:min(92%,var(--wrap));margin-inline:auto}

/* Todo destino de ancla compensa la altura del header fijo. Sin esto, al saltar
   a una sección el header aparece y tapa el título de destino. */
section[id],[id="form-section"],[id="formmob"]{
  scroll-margin-top:calc(var(--header-h) + var(--s-4));
}

/* Íconos del sprite SVG */
.ico{width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor}

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

/* --------------------------------------------------------------------------
   UTILIDADES DE APOYO
   Nada que afecte al layout debe depender de un atributo style.
   -------------------------------------------------------------------------- */
.sprite-iconos{display:none}
.oculto{display:none}

/* Escalonado de las animaciones de revelado.
   Con el prefijo `.js` para ganar a `.js .reveal{transition:…}`, cuyo shorthand
   resetea `transition-delay` y anulaba estas reglas. */
.js .reveal[data-delay="1"]{transition-delay:.08s}
.js .reveal[data-delay="2"]{transition-delay:.16s}
.js .reveal[data-delay="3"]{transition-delay:.24s}

/* Fondo con textura de profundidad */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(8,224,229,.07), transparent 70%),
    radial-gradient(45% 35% at 85% 55%, rgba(5,108,123,.10), transparent 70%);
}

/* ==========================================================================
   3. UTILIDADES DE REVELADO
   Solo se ocultan con la clase .js: sin JS el contenido se ve completo.
   ========================================================================== */
.js .reveal,.js .reveal-left,.js .reveal-right{
  opacity:0;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:transform,opacity;
}
.js .reveal{transform:translate3d(0,28px,0)}
.js .reveal-left{transform:translate3d(-28px,0,0)}
.js .reveal-right{transform:translate3d(28px,0,0)}
.js .reveal.visible,.js .reveal-left.visible,.js .reveal-right.visible{opacity:1;transform:none}

/* ==========================================================================
   4. TÍTULOS DE SECCIÓN
   ========================================================================== */
/* 56rem, no 52rem: bajar el tamaño del H2 no bastaba para dejar los títulos
   largos en 2 líneas. Un poco más de ancho + un cuerpo menor sí. */
.section-header{text-align:center;max-width:56rem;margin:0 auto var(--s-7)}
.section-title{
  font-size:var(--fs-h2);
  text-transform:uppercase;
  margin-bottom:var(--s-3);
  text-wrap:balance;   /* evita que un título largo caiga en 4 líneas desiguales */
}
.section-title span{color:var(--sk-turquoise)}
/* El lead NO hereda los 56rem: a ese ancho la línea de lectura se pasa de larga. */
.section-lead{color:var(--sk-text-soft);font-size:var(--fs-body);max-width:52rem;margin-inline:auto}
.section-action{text-align:center;margin-top:var(--s-7)}

section{padding-block:var(--s-9)}

/* ==========================================================================
   5. BOTONES
   El turquesa RELLENO es exclusivo del CTA de conversión.
   ========================================================================== */
.btn-primary{
  display:inline-flex;align-items:center;gap:var(--s-2);
  background:var(--sk-turquoise);color:var(--sk-text-on-acc);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-body);text-transform:uppercase;letter-spacing:.02em;
  padding:15px 30px;border-radius:var(--r-pill);
  box-shadow:var(--sk-glow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn-primary .ico{width:1.15em;height:1.15em;stroke-width:2}
.btn-primary:hover{background:#25f0f5;box-shadow:var(--sk-glow-strong);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(1px)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:var(--s-2);
  border:1.5px solid var(--sk-border-strong);color:var(--sk-turquoise);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.05em;
  padding:12px 26px;border-radius:var(--r-pill);
  background:rgba(8,224,229,.06);
  transition:all var(--dur) var(--ease);
}
.btn-ghost .ico{width:1.05em;height:1.05em}
.btn-ghost:hover{background:rgba(8,224,229,.14);border-color:var(--sk-turquoise);transform:translateY(-2px)}

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.site-header{
  position:fixed;inset:0 0 auto;z-index:2000;
  padding:var(--s-3) 0;
  background:rgba(2,18,33,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--sk-border);
  transition:transform .3s var(--ease), visibility .3s, box-shadow .25s var(--ease), background var(--dur) var(--ease);
}

/* --- Header con inmersión en el hero ---
   no quitar visibility:hidden: sin él el header oculto sigue siendo tabulable. */
.js .site-header{transform:translateY(-100%);visibility:hidden}
.js body.header-shown .site-header{transform:translateY(0);visibility:visible}
/* Cosmético, independiente del mecanismo de aparición */
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.38)}
.header-inner{
  width:min(94%,1280px);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
}
/* Logo institucional de la Universidad Norbert Wiener.
   El logotipo del EVENTO va en el hero, no aquí. */
.header-logo{flex:0 0 auto;display:flex;align-items:center}
.header-logo img{height:40px;width:auto;object-fit:contain}

.header-right-nav{display:flex;align-items:center;justify-content:flex-end;flex:1}
.nav-list{display:flex;align-items:center;gap:var(--s-1)}
.nav-link{
  font-family:var(--font-body);font-weight:600;
  font-size:var(--fs-small);letter-spacing:.01em;
  padding:8px 12px;border-radius:var(--r-pill);
  color:var(--sk-text-soft);white-space:nowrap;
  transition:all var(--dur) var(--ease);
}
.nav-link:hover{color:var(--sk-turquoise);background:rgba(8,224,229,.10)}

.menu-toggle{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:var(--r-sm)}
.menu-toggle .bar{display:block;width:24px;height:2px;background:var(--sk-turquoise);border-radius:2px;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.menu-toggle.active .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.active .bar:nth-child(2){opacity:0}
.menu-toggle.active .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  /* Sin JS el header es visible y fijo → el hero reserva su altura */
  padding-top:calc(var(--header-h) + var(--s-6));padding-bottom:var(--s-8);
  overflow:hidden;isolation:isolate;
}

/* CON JS el header está OCULTO en el hero: reservar su altura dejaba ~106px de
   espacio muerto sobre el contenido. Aquí solo hace falta sitio para el logo
   superpuesto, no para una barra que no está. */
.js .hero{
  padding-top:calc(var(--hero-brand-top) + var(--hero-brand-h) + var(--s-5));
}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* La foto se ancla por ABAJO y sobresale por arriba. */
.hero-bg img{
  position:absolute;bottom:0;left:0;
  width:100%;height:calc(100% + 70px);
  object-fit:cover;object-position:center bottom;
}

/* Scrim superior: garantiza el contraste del logo blanco superpuesto, porque la
   foto puede ser clara justo donde cae (regla de "texto sobre imagen"). */
.hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:160px;z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(2,18,33,.78) 0%, rgba(2,18,33,.28) 55%, transparent 100%);
}

/* --------------------------------------------------------------------------
   HACES DE LUZ ANIMADOS
   Solo se anima 	ransform — no cambiar a propiedades que repinten.
   -------------------------------------------------------------------------- */
.hero-luces{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.hero-luces span{
  position:absolute;
  top:-6%;left:var(--x);
  width:min(34vw,460px);height:118%;
  margin-left:calc(min(34vw,460px) / -2);   /* centra el haz en --x */
  transform-origin:50% 0;                    /* pivota desde el foco */
  /* Arrancan apagados y quietos. El JS los enciende 2 s después de la carga.
     SIN `transition`: en un teatro los focos entran EN SECO, no con fundido. */
  opacity:0;
  /* El haz: más intenso arriba (junto al foco) y disuelto abajo */
  background:linear-gradient(to bottom,
    rgba(140,246,250,.26) 0%,
    rgba(8,224,229,.13) 30%,
    rgba(8,224,229,.05) 60%,
    transparent 85%);
  clip-path:polygon(47% 0, 53% 0, 100% 100%, 0% 100%);
  filter:blur(10px);
  will-change:transform;
  animation:barridoLuz var(--dur,16s) ease-in-out var(--delay,0s) infinite alternate;
  /* DESPUÉS del shorthand `animation`, que resetearía esta propiedad a `running` */
  animation-play-state:paused;
}

/* Parámetros de cada haz — no moverlos a atributos style. */
.hero-luces span:nth-child(1){--x:38%; --dur:15s; --ang:7deg;  --delay:0s}
.hero-luces span:nth-child(2){--x:50%; --dur:19s; --ang:-5deg; --delay:-4s}
.hero-luces span:nth-child(3){--x:62%; --dur:17s; --ang:6deg;  --delay:-9s}
/* Encendido seco: aparecen y arrancan a barrer en el mismo instante */
body.luces-on .hero-luces span{opacity:1;animation-play-state:running}

@keyframes barridoLuz{
  from{ transform:rotate(calc(var(--ang) * -1)); }
  to  { transform:rotate(var(--ang)); }
}

/* En móvil el hero es más alto y estrecho: haces más angostos y sin blur,
   que es lo que más cuesta en gama media. */
@media (max-width:991px){
  .hero-luces span{
    width:min(52vw,300px);
    margin-left:calc(min(52vw,300px) / -2);
    height:75%;
    filter:none;
  }
}

/* Logo institucional superpuesto — solo con JS; sin JS ya está el del header.
   Alineado al mismo eje que el logo del header para que no "salte" al aparecer. */
.hero-brand{
  display:none;position:absolute;z-index:5;
  top:var(--hero-brand-top);
  left:max(3vw, calc((100% - 1280px) / 2));
  transition:opacity var(--dur) var(--ease), visibility var(--dur);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
.hero-brand img{height:var(--hero-brand-h);width:auto}
.js .hero-brand{display:block}
/* Al aparecer el header (que ya lleva el logo), se oculta también para
   accesibilidad: si no, el logo quedaría duplicado para el lector de pantalla. */
.js body.header-shown .hero-brand{opacity:0;visibility:hidden;pointer-events:none}
/* Velo de contraste — calibrado sobre el fondo bg-*. */
.hero-veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg, rgba(2,18,33,.72) 0%, rgba(2,18,33,.20) 45%, rgba(2,18,33,.66) 100%),
    linear-gradient(to top, var(--sk-abyss) 0%, rgba(2,18,33,.10) 42%, transparent 100%);
}
@media (max-width:991px){
  /* En móvil el texto va sobre la imagen a todo el ancho: hace falta más velo
     abajo, que es donde cae el copy sobre el piso iluminado. */
  .hero-veil{
    background:
      linear-gradient(to top, var(--sk-abyss) 6%, rgba(2,18,33,.55) 40%, rgba(2,18,33,.30) 100%);
  }
}

/* Hero de TRES bloques: mensaje · presentadores · formulario.
   La columna central se lleva la figura, así el texto no compite con ella y el
   formulario mantiene su ancho útil. */
.hero-inner{
  position:relative;z-index:2;
  width:min(94%,1280px);margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr) minmax(390px,440px);
  gap:var(--s-6);
/* `start`, no `center`. */
  align-items:start;
}

/* El mensaje se centra verticalmente respecto al formulario, que es mucho más
   alto. Alineado arriba quedaba descolgado, con todo el vacío debajo. */
.hero-text{
  display:flex;flex-direction:column;align-items:flex-start;position:relative;
  align-self:center;
}

/* El formulario sube: el `padding-top` del hero reserva sitio para el logo
   superpuesto, que está a la IZQUIERDA — esta columna no lo necesita, y ese
   espacio empujaba el botón de envío bajo el pliegue en pantallas de 768px. */
#formmob{margin-top:-38px}

/* Los presentadores bajan hasta apoyarse en la madera del estrado del fondo.
   El desplazamiento va en la figura, no en la imagen, para no alterar el flujo
   del grid ni la altura del hero. */
.hero-figura{
  align-self:start;
  display:flex;align-items:flex-start;justify-content:center;
  width:100%;
/* Calibrado sobre la foto de fondo — reajustar si cambia. */
  padding-top:134px;
}

/* --- Escala del bloque de texto ---
   La columna izquierda mide ~430px en 1440: los tamaños se ajustan a ESE ancho,
   no al viewport. Un H1 de 48px aquí se rompería en tres líneas desiguales. */
.badge-audiencia{
  display:inline-flex;align-items:center;gap:var(--s-2);
  background:var(--sk-turquoise);color:var(--sk-text-on-acc);
  font-weight:700;font-size:var(--fs-micro);line-height:1.2;
  padding:7px 16px 7px 13px;border-radius:var(--r-pill);
  margin-bottom:var(--s-4);
}
.badge-audiencia .ico{width:1.2em;height:1.2em;stroke-width:1.9}

/* Manda el logo; el H1 es la línea de apoyo. */
/* --- LOGO DEL HERO ---
   no reducir el margen inferior: el archivo no tiene aire propio abajo. */
.hero-logo{
  width:min(100%,340px);height:auto;display:block;
  margin-bottom:var(--s-6);
  filter:drop-shadow(0 0 7px rgba(8,224,229,.55));
}

/* El H1 acompaña al logo, no compite. Va en UNA sola fila: el tope es fijo
   a propósito — con un vw suelto se sale en pantallas grandes. */
.hero-title{
  font-size:clamp(1rem, 1.3vw, 1.25rem);
  font-weight:700;
  line-height:1.02;
  text-transform:uppercase;
  margin-bottom:var(--s-3);
  text-shadow:0 2px 18px rgba(2,18,33,.75);
/* no quitar el nowrap: el titular debe ir en una sola fila. */
  white-space:nowrap;
}
.hero-title span{color:var(--sk-turquoise)}

.hero-desc{
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--sk-text-soft);max-width:30rem;
  text-shadow:0 1px 10px rgba(2,18,33,.8);
}

.hero-cta-group{margin-top:var(--s-5)}
.hero-text .btn-ghost{font-size:var(--fs-small);padding:11px 22px}

/* Centrados en su columna y con más presencia: son el bloque central del hero */
.hero-personajes{
  width:100%;max-width:400px;height:auto;
  margin:0 auto;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));
  pointer-events:none;
}

/* --- Presentadores en penumbra hasta que encienden los focos ---
   Sin JS quedan con su luz normal: la penumbra nunca es un estado permanente. */
.js .hero-personajes{
  filter:brightness(.30) saturate(.5) drop-shadow(0 24px 40px rgba(0,0,0,.55));
}
body.luces-on .hero-personajes{
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));
}

/* ==========================================================================
   8. FORMULARIO
   ========================================================================== */
.form-glass-pop{
  background:var(--sk-surface);
  border:1px solid var(--sk-border);
  border-radius:var(--r-lg);
  /* --s-5, no --s-6: 32px era generoso de más y se lo quitaba a los campos.
     El bloque de ≤992px tiene su propio relleno y no se toca. */
  padding:var(--s-5);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Título + badge en UNA sola línea. Sin uppercase a propósito: en esta
   familia las mayúsculas no caben sin bajar demasiado el cuerpo. */
.form-title{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:nowrap;white-space:nowrap;gap:8px;
  font-size:1.22rem;text-align:center;
  margin-bottom:var(--s-5);line-height:1.15;
}
.form-title span{
  flex:0 0 auto;
  background:var(--sk-turquoise);color:var(--sk-text-on-acc);
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:.02em;
  padding:3px 9px;border-radius:var(--r-pill);
}

/* no reemplazar por display:none ni visibility:hidden */
.campo-verif{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.form-group{position:relative;width:100%}
.form-group.full{grid-column:1/-1}

/* --------------------------------------------------------------------------
   ETIQUETAS FLOTANTES
   El input va PRIMERO y el label DESPUÉS (combinador +).
   no quitar el placeholder=  (un espacio) de los campos: rompe el efecto.
   -------------------------------------------------------------------------- */
.form-input,.form-select{
  width:100%;display:block;
  padding:22px 15px 7px;          /* el top reserva el hueco del label flotado */
  font-size:var(--fs-body);font-family:var(--font-body);
  color:var(--sk-text);
/* background-COLOR, nunca el shorthand: borraría la flecha del select. */
  background-color:rgba(2,18,33,.55);
  border:1px solid var(--sk-border);
  border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
/* El placeholder solo existe para el selector: se vuelve invisible */
.form-input::placeholder{color:transparent}

.form-input:focus,.form-select:focus{
  outline:none;
  background-color:rgba(9,43,73,.7);   /* no usar el shorthand aquí */
  border-color:var(--sk-turquoise);
  box-shadow:0 0 0 3px rgba(8,224,229,.16);
}

/* Label en reposo: dentro del campo, haciendo de placeholder */
.form-group > label{
  position:absolute;left:15px;top:15px;
  font-size:var(--fs-body);font-weight:400;letter-spacing:0;
  color:var(--sk-text-mute);
  pointer-events:none;             /* el clic siempre cae en el campo */
  transition:top .15s var(--ease), font-size .15s var(--ease), color .15s var(--ease);
}

/* Flotado: al enfocar o cuando el campo tiene contenido */
.form-input:focus + label,
.form-input:not(:placeholder-shown) + label,
.form-select:focus + label,
.form-group > label.label-fija{
  top:6px;
  /* El estándar del kit indica .7rem; se sube a .75rem (12px) para no bajar del
     piso de legibilidad del sistema. */
  font-size:var(--fs-micro);font-weight:700;
  letter-spacing:.03em;
  color:var(--sk-turquoise);
}

/* Estos select siempre tienen valor: su label va permanentemente flotado. */

/* <select>: no quitar appearance:none ni la flecha de fondo.
   Sin eso el campo se encoge en Safari y el label se monta encima. */
.form-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308e0e5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px;
}
.form-select option{color:#041830;background-color:#fff}

/* Autocompletar del navegador: Chrome pinta fondo y color propios y taparía el
   label flotado. Se neutraliza con una sombra interior del color del campo. */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--sk-text);
  -webkit-box-shadow:0 0 0 1000px #0a2033 inset;
  caret-color:var(--sk-text);
}

/* Contenedor con scroll interno */
/* Altura ADAPTATIVA a la pantalla: en un portátil de 768px el formulario no
   cabía y el botón de envío quedaba bajo el pliegue. Con `vh` el scroll interno
   se encoge en pantallas bajas y aprovecha las altas, sin tocar nada más. */
.form-scroll-container{
  max-height:clamp(230px, 40vh, 370px);overflow-y:auto;
  margin:var(--s-5) 0;padding:var(--s-4);
  background:rgba(2,12,22,.45);
  border:1px solid var(--sk-divider);
  border-radius:var(--r-md);
  scrollbar-width:thin;scrollbar-color:var(--sk-turquoise-2) transparent;
}
.form-scroll-container::-webkit-scrollbar{width:6px}
.form-scroll-container::-webkit-scrollbar-track{background:transparent}
.form-scroll-container::-webkit-scrollbar-thumb{background:var(--sk-turquoise-2);border-radius:var(--r-pill)}

/* Indicador de scroll propio. Todo cuelga de .barra-propia, que pone el JS:
   no activarlo desde el CSS. */
.form-scroll-wrap{position:relative}
.form-scroll-riel,
.form-scroll-wrap::after{display:none}

/* Silenciar la barra nativa SOLO donde se monta el indicador propio.
   Una barra superpuesta se dibuja aunque no reserve ancho: sin esto se pintan
   las dos. no sacar estas reglas de .barra-propia. */
.barra-propia .form-scroll-container{
  padding-right:var(--s-5);
  scrollbar-width:none;
}
.barra-propia .form-scroll-container::-webkit-scrollbar{display:none}

/* no adelgazar el riel: los 14px son la zona de agarre, no el grosor visible */
.barra-propia .form-scroll-riel{
  display:block;position:absolute;top:10px;right:3px;bottom:10px;width:14px;
  cursor:pointer;touch-action:none;
}
.barra-propia .form-scroll-riel::before{
  content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:5px;border-radius:var(--r-pill);background:rgba(255,255,255,.10);
}
.barra-propia .form-scroll-pulgar{
  position:absolute;left:50%;transform:translateX(-50%);
  width:5px;border-radius:var(--r-pill);
  background:var(--sk-turquoise);box-shadow:var(--sk-glow);
  cursor:grab;touch-action:none;
  transition:width var(--dur) var(--ease);
}
.barra-propia .form-scroll-riel:hover .form-scroll-pulgar{width:7px}
.barra-propia .form-scroll-pulgar.arrastrando{width:7px;cursor:grabbing}

/* Desvanecido inferior: refuerza que hay más abajo. Se apaga al llegar al final. */
.barra-propia .form-scroll-wrap::after{
  content:'';display:block;position:absolute;left:1px;right:1px;bottom:1px;height:56px;
  pointer-events:none;border-radius:0 0 var(--r-md) var(--r-md);
  background:linear-gradient(to top, rgba(2,12,22,.96) 10%, rgba(2,12,22,0));
  transition:opacity var(--dur) var(--ease);
}
.barra-propia .form-scroll-wrap.al-final::after{opacity:0}

/* Sin tarjeta: eran tres recuadros anidados (formulario → área de scroll →
   participante). Al aplanarlo, el subtítulo con su línea ya agrupa, los campos
   ganan el ancho del relleno y baja el alto del contenido.
   El grupo se separa por margen, no por caja. */
.participant-section{margin-bottom:var(--s-5)}
.participant-section:last-of-type{margin-bottom:0}

.section-subtitle{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-small);
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--sk-turquoise);
  padding-bottom:6px;margin-bottom:var(--s-4);
  border-bottom:1px solid var(--sk-divider);
}

/* Checkbox y errores */
/* Sin tarjeta: el recuadro solo añadía relleno y alto al formulario. */
.form-check-wrap{margin-bottom:var(--s-4)}
.form-check-control{display:flex;align-items:flex-start;gap:var(--s-3)}
/* El control nativo mide ~13px y no escala con la fuente: se fija a 22px. */
/* no quitar el outline ni poner appearance:none:
   sin outline el control es invisible en Safari, y con appearance:none
   desaparece la marca de verificación.

   🪤 El contorno de reposo va AQUÍ, incondicional. Estuvo acotado con
   :not(:focus-visible) y eso lo rompía en Safari ≤15.3, que no conoce esa
   pseudo-clase: :not() no es indulgente, así que la regla entera se descarta
   y la casilla se quedaba SIN NINGÚN contorno. Es el único campo que bloquea
   el envío. no volver a meter :focus-visible dentro de un :not(). */
.form-check-wrap input[type=checkbox]{
  width:22px;height:22px;flex-shrink:0;margin:2px 0 0;
  accent-color:var(--sk-turquoise);cursor:pointer;
  border-radius:4px;
  outline:2px solid var(--sk-border-strong);
  outline-offset:0;
}
/* El foco de teclado se distingue SUMANDO, no quitando: gana por
   especificidad (0,3,1 frente a 0,2,1) y en un navegador sin :focus-visible
   degrada al contorno de reposo, no a la nada. */
.form-check-wrap input[type=checkbox]:focus-visible{
  outline:2px solid var(--sk-turquoise);
  outline-offset:3px;
}
.check-label{font-size:var(--fs-body);line-height:1.45;color:var(--sk-text-soft);cursor:pointer}
.check-label a{color:var(--sk-turquoise);text-decoration:underline;font-weight:600}
.check-label em{font-style:normal;color:var(--sk-turquoise)}

.form-error{
  display:none;margin-top:5px;
  font-size:var(--fs-small);font-weight:600;color:var(--sk-error);
}
.form-error .ico{width:1em;height:1em;vertical-align:-.12em;margin-right:4px}

.btn-submit-wrap{width:100%}
.btn-submit{
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  width:100%;padding:12px 24px;   /* más contenido: el formulario ya es alto */
  background:var(--sk-turquoise);color:var(--sk-text-on-acc);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.03em;
  border-radius:var(--r-pill);
  box-shadow:var(--sk-glow);
  transition:all var(--dur) var(--ease);
}
.btn-submit .ico{width:1.15em;height:1.15em;stroke-width:2}
.btn-submit:hover{background:#25f0f5;box-shadow:var(--sk-glow-strong);transform:translateY(-2px)}
.btn-submit:active{transform:translateY(1px)}
.btn-submit:disabled{
  background:rgba(255,255,255,.12);color:var(--sk-text-mute);
  box-shadow:none;transform:none;cursor:not-allowed;
}

/* ==========================================================================
   9. DATOS + COUNTDOWN
   ========================================================================== */
.datos-section{padding-top:var(--s-9)}
.datos-header{text-align:center;max-width:52rem;margin:0 auto var(--s-7)}
.datos-lead{color:var(--sk-text-soft);margin-top:var(--s-4)}
.datos-lead strong{color:var(--sk-turquoise);font-weight:600}

.countdown-wrap{
  max-width:640px;margin:0 auto var(--s-8);padding:var(--s-5);
  background:var(--sk-surface);border:1px solid var(--sk-border);
  border-radius:var(--r-lg);text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.countdown-label-top{
  font-size:var(--fs-micro);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--sk-turquoise);margin-bottom:var(--s-4);
}
/* `minmax(0,1fr)`, NO `1fr` — mismo motivo que en `.hero-inner`: el mínimo
   automático de una pista `1fr` es el `min-content` de su contenido, así que la
   rejilla se ensanchaba para dar cabida al número y empujaba la página. */
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.countdown-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.countdown-number{
  font-family:var(--font-display);font-weight:700;
/* El mínimo debe escalar hacia abajo: con uno fijo, el número desborda su columna. */
  font-size:clamp(1.55rem,5.5vw,3.2rem);line-height:1;
  color:var(--sk-text);font-variant-numeric:tabular-nums;
}
.countdown-label{
  font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--sk-text-mute);
}

.datos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.dato-block{
  padding:var(--s-5) var(--s-4);text-align:center;
  background:var(--sk-surface-2);
  border:1px solid var(--sk-divider);border-radius:var(--r-lg);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dato-block:hover{border-color:var(--sk-border);transform:translateY(-4px)}
.dato-icon-wrap{
  display:grid;place-items:center;
  width:52px;height:52px;margin:0 auto var(--s-4);
  border:1px solid var(--sk-border);border-radius:var(--r-md);
  color:var(--sk-turquoise);background:rgba(8,224,229,.06);
}
.dato-icon-wrap .ico{width:26px;height:26px}
.dato-label{
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--sk-turquoise);margin-bottom:6px;
}
.dato-desc{font-size:var(--fs-body);color:var(--sk-text)}
/* La dirección va SIEMPRE en su propia línea. */
.dato-desc-2{display:block}

/* ==========================================================================
   10. CINTILLO (marquee)
   ========================================================================== */
.cintillo{
  padding:0;overflow:hidden;
  background:var(--sk-turquoise);
  border-block:1px solid rgba(4,24,48,.15);
}
.cintillo-track{display:flex;width:max-content;animation:cintilloScroll 38s linear infinite}
.cintillo-group{display:flex;align-items:center;flex:0 0 auto}
.cintillo-item{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.05em;
  color:var(--sk-text-on-acc);
  padding:14px var(--s-5);white-space:nowrap;
}
.cintillo-sep{
  width:7px;height:7px;flex:0 0 auto;
  background:var(--sk-text-on-acc);
  transform:rotate(45deg);opacity:.65;
}
@keyframes cintilloScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cintillo:hover .cintillo-track{animation-play-state:paused}

/* ==========================================================================
   11. ¿POR QUÉ PARTICIPAR? (acordeón en móvil)
   ========================================================================== */
.porque-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.porque-item{
  background:var(--sk-surface);
  border:1px solid var(--sk-divider);border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.porque-item:hover{border-color:var(--sk-border);transform:translateY(-4px)}
.porque-header{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);
  width:100%;padding:var(--s-6) var(--s-5) var(--s-3);text-align:left;
}
.porque-icon{
  display:grid;place-items:center;width:54px;height:54px;
  border:1px solid var(--sk-border);border-radius:var(--r-md);
  color:var(--sk-turquoise);background:rgba(8,224,229,.06);
}
.porque-icon .ico{width:27px;height:27px}
.porque-header-title{
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);
  text-transform:uppercase;line-height:1.15;color:var(--sk-text);
}
.porque-toggle{display:none;width:20px;height:20px;color:var(--sk-turquoise)}
.porque-content{overflow:hidden}
.porque-content-inner{padding:0 var(--s-5) var(--s-6);color:var(--sk-text-soft);font-size:var(--fs-body)}
.porque-content-inner strong{color:var(--sk-turquoise);font-weight:600}

/* ==========================================================================
   12. CATEGORÍAS
   ========================================================================== */
.categorias-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.categoria-card{
  position:relative;padding:var(--s-6) var(--s-5);
  background:var(--sk-surface);
  border:1px solid var(--sk-divider);border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.categoria-card::after{
  content:'';position:absolute;inset:auto -40% -60% auto;
  width:70%;aspect-ratio:1;border-radius:50%;
  background:var(--sk-gradient);opacity:.10;
  transition:opacity var(--dur) var(--ease);
}
.categoria-card:hover{border-color:var(--sk-border);transform:translateY(-4px)}
.categoria-card:hover::after{opacity:.2}
.categoria-icon{
  position:relative;z-index:1;
  display:grid;place-items:center;width:58px;height:58px;margin-bottom:var(--s-4);
  border:1px solid var(--sk-border);border-radius:var(--r-md);
  color:var(--sk-turquoise);background:rgba(8,224,229,.06);
}
.categoria-icon .ico{width:29px;height:29px}
.categoria-title{
  position:relative;z-index:1;
  font-size:1.3rem;text-transform:uppercase;color:var(--sk-turquoise);
  margin-bottom:var(--s-3);
}
.categoria-desc{position:relative;z-index:1;color:var(--sk-text-soft);font-size:var(--fs-body)}

/* ==========================================================================
   13. PASOS (acordeón en móvil)
   ========================================================================== */
.pasos-stack{display:flex;flex-direction:column;gap:var(--s-4);max-width:56rem;margin-inline:auto}
.paso-item{
  background:var(--sk-surface);
  border:1px solid var(--sk-divider);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color var(--dur) var(--ease);
}
.paso-item:hover{border-color:var(--sk-border)}
.paso-header{
  display:flex;align-items:center;gap:var(--s-4);
  width:100%;padding:var(--s-5);text-align:left;
}
.paso-num{
  font-family:var(--font-display);font-weight:700;
  font-size:2.2rem;line-height:1;color:var(--sk-turquoise);
  flex:0 0 auto;min-width:1.6ch;
}
.paso-icon{
  display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;
  border:1px solid var(--sk-border);border-radius:var(--r-md);
  color:var(--sk-turquoise);background:rgba(8,224,229,.06);
}
.paso-icon .ico{width:24px;height:24px}
.paso-header-title{
  flex:1;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);
  text-transform:uppercase;line-height:1.15;
}
.paso-toggle{display:none;width:20px;height:20px;color:var(--sk-turquoise);flex:0 0 auto}
.paso-content{overflow:hidden}
.paso-content-inner{
  padding:0 var(--s-5) var(--s-5) calc(var(--s-5) + 2.2ch + var(--s-4));
  color:var(--sk-text-soft);font-size:var(--fs-body);
}
.paso-content-inner strong{color:var(--sk-turquoise);font-weight:600}
.paso-lista{margin-top:var(--s-3);display:flex;flex-direction:column;gap:var(--s-2)}
.paso-lista li{position:relative;padding-left:var(--s-5)}
.paso-lista li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:7px;height:7px;background:var(--sk-turquoise);transform:rotate(45deg);
}
.paso-lista strong{color:var(--sk-text)}

/* Aviso de envío del video (paso 2). Se separa de la lista con una línea de
   acento porque es una ACCIÓN con fecha límite, no un punto más del guion. */
.paso-envio{
  margin-top:var(--s-4);
  padding-left:var(--s-4);
  border-left:3px solid var(--sk-turquoise);
}
.paso-envio a{
  color:var(--sk-turquoise);
  text-decoration:underline;
  text-underline-offset:3px;
  word-break:break-word;   /* el correo es largo: que no desborde en móvil */
}
.paso-envio a:hover{color:var(--sk-text)}

.pasos-footer{text-align:center;margin-top:var(--s-7)}
/* Aviso informativo. No darle relleno turquesa, radio pill ni mayúsculas:
   sería indistinguible del CTA. */
.pasos-reminder{
  display:inline-flex;align-items:center;gap:var(--s-3);
  text-align:left;
  font-family:var(--font-body);font-weight:400;font-size:var(--fs-body);
  color:var(--sk-text-soft);
  background:var(--sk-surface-2);
  border:1px solid var(--sk-divider);
  border-left:3px solid var(--sk-turquoise);
  border-radius:var(--r-sm);
  padding:var(--s-3) var(--s-4);
  cursor:default;   /* refuerza que no es interactivo */
}
.pasos-reminder .ico{width:20px;height:20px;flex:0 0 auto;color:var(--sk-turquoise)}
.pasos-reminder strong{color:var(--sk-turquoise);font-weight:700}
.pasos-disclaimer{display:block;margin-top:var(--s-3);font-size:var(--fs-small);color:var(--sk-text-mute)}

/* ==========================================================================
   14. PREMIOS (tabs + visor)
   ========================================================================== */
.tabs-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);
  margin-bottom:var(--s-7);
}
.btn-tab{
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-small);
  text-transform:uppercase;letter-spacing:.03em;
  color:var(--sk-text-soft);
  padding:10px 20px;border-radius:var(--r-pill);
  border:1px solid var(--sk-divider);
  transition:all var(--dur) var(--ease);
}
.btn-tab:hover{color:var(--sk-turquoise);border-color:var(--sk-border)}
.btn-tab.active{
  color:var(--sk-turquoise);
  border-color:var(--sk-turquoise);
  background:rgba(8,224,229,.10);
  box-shadow:var(--sk-glow);
}

.escenario-3d{perspective:1400px;display:grid;place-items:center;min-height:420px}
.panel-contenido{
  grid-area:1/1;width:100%;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.panel-contenido.active{opacity:1;visibility:visible;transform:none}

.visor-3d{
  position:relative;width:min(100%,720px);aspect-ratio:16/9;
  background:var(--sk-solid);
  border:8px solid #06121f;border-radius:var(--r-lg);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px var(--sk-border);
  transform-style:preserve-3d;
  transition:transform .35s var(--ease);
  /* 🪤 no quitar: la capa de brillo se desplaza hasta 20px con el puntero y el
     borde del marco mide 8px, así que sin recorte asomaba 12px POR FUERA del
     celular, como una placa de color suelta. El recorte la contiene dentro de
     la pantalla, que es donde el reflejo tiene sentido. */
  overflow:hidden;
}
.visor-notch{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;
}
.visor-speaker{width:3px;height:32px;background:rgba(255,255,255,.16);border-radius:var(--r-pill)}
.visor-cam{width:6px;height:6px;background:rgba(8,224,229,.35);border-radius:50%}
.capa-brillo{
  position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:var(--r-md);
  background:linear-gradient(115deg, rgba(255,255,255,.14) 0%, transparent 42%);
  transition:transform .35s var(--ease);
}
.visor-screen{position:absolute;inset:0;overflow:hidden;border-radius:var(--r-md)}
/* 🪤 El <picture> necesita tamaño propio: sin esto, el `height:100%` de la
   imagen se mide contra un contenedor sin altura, la imagen cae a su
   proporción natural y queda corta —en móvil asomaban 9px del marco por
   abajo—. no quitar mientras el arte esté envuelto en <picture>. */
.visor-screen picture{display:block;width:100%;height:100%}
.visor-screen img{width:100%;height:100%;object-fit:cover;display:block}

/* Placeholder de premio — se sustituye por el arte de Marca */
.premio-placeholder{
  position:relative;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s-3);padding:var(--s-5) var(--s-6);text-align:center;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(8,224,229,.16), transparent 65%),
    var(--sk-solid);
}
.premio-pos{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.6rem);text-transform:uppercase;
  color:var(--sk-turquoise);letter-spacing:.02em;
}
.premio-ico{width:clamp(34px,5vw,48px);height:clamp(34px,5vw,48px);color:var(--sk-turquoise);stroke-width:1.5}
.premio-lista{display:flex;flex-direction:column;gap:var(--s-2);max-width:34rem}
.premio-lista li{
  font-size:var(--fs-body);font-weight:600;color:var(--sk-text);
  padding-bottom:var(--s-2);border-bottom:1px solid var(--sk-divider);
}
.premio-lista li:last-child{border-bottom:none}
.premio-lista small{display:block;font-weight:400;font-size:var(--fs-small);color:var(--sk-text-mute);margin-top:2px}
.premio-nota{position:absolute;bottom:8px;right:14px;font-size:var(--fs-small);color:var(--sk-text-mute)}

.premios-legal{text-align:center;margin-top:var(--s-6)}
.link-legal{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-small);color:var(--sk-text-mute);
}
.link-legal .ico{width:1.15em;height:1.15em}
.link-legal:hover{color:var(--sk-turquoise)}

/* ==========================================================================
   15. ¿POR QUÉ ELEGIR? (carrusel)
   ========================================================================== */
.elegir-carousel{position:relative}
.elegir-grid{
  display:flex;gap:var(--s-5);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s-4);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.elegir-grid::-webkit-scrollbar{display:none}
.elegir-card{
  flex:0 0 calc((100% - var(--s-5)*2) / 3);
  scroll-snap-align:start;
  padding:var(--s-6) var(--s-5);
  background:var(--sk-surface);
  border:1px solid var(--sk-divider);border-radius:var(--r-lg);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.elegir-card:hover{border-color:var(--sk-border);transform:translateY(-4px)}
.elegir-icon{
  display:grid;place-items:center;width:52px;height:52px;margin-bottom:var(--s-4);
  border:1px solid var(--sk-border);border-radius:var(--r-md);
  color:var(--sk-turquoise);background:rgba(8,224,229,.06);
}
.elegir-icon .ico{width:26px;height:26px}
.elegir-card-title{font-size:var(--fs-h4);text-transform:uppercase;margin-bottom:var(--s-3)}
.elegir-card-desc{color:var(--sk-text-soft);font-size:var(--fs-body)}
.elegir-card-desc strong{color:var(--sk-turquoise);font-weight:600}

.carousel-nav{display:flex;justify-content:center;gap:var(--s-3);margin-top:var(--s-5)}
.carousel-btn{
  display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--sk-border);border-radius:50%;
  color:var(--sk-turquoise);background:rgba(8,224,229,.06);
  transition:all var(--dur) var(--ease);
}
.carousel-btn .ico{width:20px;height:20px}
.carousel-btn:hover{background:rgba(8,224,229,.16);transform:translateY(-2px)}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer{margin-top:var(--s-9)}
.footer-organiza{background:var(--sk-gradient);padding:var(--s-6) 0}
.footer-organiza-inner{text-align:center}
.footer-label{
  display:block;font-size:var(--fs-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--sk-text-on-acc);opacity:.8;margin-bottom:var(--s-2);
}
.footer-faculty{
  font-size:clamp(1.1rem,2.6vw,1.7rem);
  text-transform:uppercase;color:var(--sk-text-on-acc);
}
.footer-bar{background:var(--sk-deep);padding:var(--s-6) 0;border-top:1px solid var(--sk-divider)}
.footer-bar-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5);
}
.footer-contact-title{
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--sk-turquoise);margin-bottom:4px;
}
.footer-contact-link{font-size:var(--fs-body);color:var(--sk-text);text-decoration:underline}
.footer-contact-link:hover{color:var(--sk-turquoise)}
.footer-copy{font-size:var(--fs-small);color:var(--sk-text-mute)}

/* ==========================================================================
   17. CTA FLOTANTE
   ========================================================================== */
.btnregistro{position:fixed;right:var(--s-5);bottom:var(--s-5);z-index:1500;display:none}
.btn-float{
  display:inline-flex;align-items:center;gap:var(--s-2);
  background:var(--sk-turquoise);color:var(--sk-text-on-acc);
  font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.02em;
  padding:14px 24px;border-radius:var(--r-pill);
  box-shadow:0 12px 30px rgba(0,0,0,.4), var(--sk-glow);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-float .ico{width:1.15em;height:1.15em;stroke-width:2}
.btn-float:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.45), var(--sk-glow-strong)}

/* ==========================================================================
   18. RESPONSIVE
   Breakpoints únicos del sistema: 1200 · 992 · 768 · 480
   ========================================================================== */
@media (max-width:1200px){
  .nav-link{font-size:var(--fs-small);padding:7px 9px}
  /* Con tres columnas el texto se estrangularía: se pasa a DOS columnas y la
     figura baja bajo el texto, en la misma columna. El formulario ocupa las
     dos filas a la derecha, conservando su ancho útil. */
  .hero-inner{
    grid-template-columns:minmax(0,1fr) minmax(370px,420px);
    gap:var(--s-5) var(--s-6);
  }
  /* En dos columnas el texto vuelve arriba: debajo tiene la figura, no vacío */
  .hero-text  {grid-column:1;grid-row:1;align-self:start}
  /* Sin el desplazamiento de 3 columnas: aquí la figura ya va bajo el texto */
  .hero-figura{grid-column:1;grid-row:2;justify-content:flex-start;padding-top:0}
  /* Sin la subida del layout de 3 columnas */
  #formmob    {grid-column:2;grid-row:1 / span 2;margin-top:0}
  .hero-personajes{max-width:290px;margin-left:0}
}

@media (max-width:992px){
  /* El logo no crece hasta 64px aquí: a 390px se comería el 60% del ancho. */
  :root{--header-h:66px;--hero-brand-h:48px}
  .menu-toggle{display:flex}

  .header-nav{
    position:fixed;inset:var(--header-h) 0 auto;
    background:rgba(2,18,33,.98);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--sk-border);
    padding:var(--s-4) var(--s-5) var(--s-6);
    transform:translateY(-120%);opacity:0;visibility:hidden;
    transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur);
  }
  .header-nav.active{transform:translateY(0);opacity:1;visibility:visible}
  .nav-list{flex-direction:column;align-items:stretch;gap:2px}
  .nav-link{display:block;font-size:var(--fs-body);padding:13px var(--s-4);border-radius:var(--r-sm)}

  .hero{min-height:auto;padding-top:calc(var(--header-h) + var(--s-6))}
  /* Una sola columna: mensaje → presentadores → formulario */
  /* minmax(0,1fr) y NO 1fr: con 1fr la pista crece con la imagen y el texto
     del hero se recorta sin avisar. */
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .hero-text  {grid-column:1;grid-row:auto;align-items:center;text-align:center}
  .hero-figura{grid-column:1;grid-row:auto;justify-content:center;padding-top:0}
  #formmob    {grid-column:1;grid-row:auto}
  .hero-title,.hero-desc{text-align:center}
  /* Misma jerarquía que en desktop, y en UNA sola fila. */
  .hero-title{font-size:clamp(.85rem,4.4vw,1.25rem)}
  .hero-desc{margin-inline:auto;font-size:var(--fs-body)}
  .hero-logo{width:min(92%,400px);margin-inline:auto}
  /* no poner margen negativo aquí: taparía a los presentadores.
     margin-inline:auto es necesario para el centrado. */
  .hero-personajes{max-width:290px;margin-bottom:0;margin-inline:auto}
  #formmob{scroll-margin-top:calc(var(--header-h) + 8px)}

  .datos-grid{grid-template-columns:repeat(2,1fr)}
  .porque-grid,.categorias-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .elegir-card{flex-basis:calc((100% - var(--s-5)) / 2)}
  .escenario-3d{min-height:340px}
}

@media (max-width:768px){
  section{padding-block:var(--s-8)}
  .form-glass-pop{padding:var(--s-5) var(--s-4)}
  .form-grid{grid-template-columns:1fr;gap:var(--s-3)}
  .form-scroll-container{max-height:420px;padding:var(--s-3)}

  /* Acordeón: en móvil el contenido se pliega */
  .porque-header,.paso-header{cursor:pointer}
  .porque-toggle,.paso-toggle{display:block;transition:transform var(--dur) var(--ease)}
  .porque-header{flex-direction:row;align-items:center;padding:var(--s-4)}
  .porque-header-title{flex:1;font-size:var(--fs-h4)}
  .porque-icon{width:44px;height:44px}
  .porque-icon .ico{width:22px;height:22px}
  .porque-content,.paso-content{max-height:0;transition:max-height .38s var(--ease)}
  .porque-item.active .porque-content,.paso-item.active .paso-content{max-height:520px}
  .porque-item.active .porque-toggle,.paso-item.active .paso-toggle{transform:rotate(180deg)}
  .porque-content-inner{padding:0 var(--s-4) var(--s-5)}

  .paso-header{padding:var(--s-4);gap:var(--s-3)}
  .paso-num{font-size:1.8rem}
  .paso-icon{width:40px;height:40px}
  .paso-icon .ico{width:21px;height:21px}
  .paso-header-title{font-size:var(--fs-h4)}
  .paso-content-inner{padding:0 var(--s-4) var(--s-5)}

  .elegir-card{flex-basis:86%}
  .visor-3d{border-width:6px}
  .escenario-3d{min-height:auto}
  .premio-placeholder{padding:var(--s-4)}

  /* Los artes de premios vienen en dos versiones: 16:9 para escritorio y 9:16
     para móvil. El visor debe seguir esa proporción o el arte se recorta.
     El punto de corte (768px) es el MISMO que el `media` del <picture> en el
     HTML: si se cambia uno hay que cambiar el otro, o el visor tendrá una
     proporción y la imagen otra. */
  .visor-3d{aspect-ratio:9/16;width:min(100%,420px)}
  /* En vertical el notch va arriba y centrado, como en un móvil real; en
     horizontal estaba en el costado izquierdo. */
  .visor-notch{
    left:50%;top:6px;transform:translateX(-50%);
    flex-direction:row;gap:8px;
  }
  .visor-speaker{width:32px;height:3px}
  .footer-bar-inner{flex-direction:column;text-align:center}
  .cintillo-item{font-size:var(--fs-small);padding:12px var(--s-4)}
}

@media (max-width:480px){
  :root{--s-9:64px}
  .btnregistro{right:var(--s-3);bottom:var(--s-3)}
  .btn-float{font-size:var(--fs-small);padding:12px 18px}
  .datos-grid{grid-template-columns:1fr}
  .countdown{gap:var(--s-2)}
/* En móvil el título no cabe en una línea: aquí sí se le permite saltar. */
  .form-title{font-size:1.25rem;flex-wrap:wrap;white-space:normal}
  /* El badge baja de línea pero conserva su ancho de píldora */
  .form-title span{display:table;width:auto;margin:var(--s-2) auto 0}
  .tabs-nav{gap:6px}
  .btn-tab{font-size:var(--fs-small);padding:9px 14px}
}

/* ==========================================================================
   19. PREFERENCIAS DE MOVIMIENTO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .cintillo-track{animation:none;transform:none}
  .js .reveal,.js .reveal-left,.js .reveal-right{opacity:1;transform:none}
  /* Los haces se quedan quietos, pero siguen iluminando: no desaparece el efecto,
     solo el movimiento (que es lo que molesta con movimiento reducido).
     `opacity:1` es imprescindible: si el JS fallara, quedarían invisibles. */
  .hero-luces span{animation:none;transform:none;opacity:1;transition:none}
  /* Con movimiento reducido, los presentadores no esperan en penumbra */
  .js .hero-personajes{filter:drop-shadow(0 24px 40px rgba(0,0,0,.55))}
}

/* ==========================================================================
   20. PÁGINA DE GRACIAS
   ========================================================================== */
#lpgracias .hero{min-height:80svh}
#lpgracias .hero-inner{grid-template-columns:1fr;text-align:center;place-items:center}
#lpgracias .hero-text{align-items:center;text-align:center;max-width:44rem}
/* El titular de la landing va reducido para no competir con el logo del evento.
   Aquí no hay logo y este H1 es el mensaje principal, así que recupera su tamaño.
   no quitar el white-space: hereda nowrap y un texto más largo se saldría. */
#lpgracias .hero-title{font-size:clamp(1.75rem, 4.5vw, 2.75rem);white-space:normal}