/* ==========================================================================
   Ray-Ban | Meta · Oakley | Meta — Lanzamiento Colombia
   Sistema visual derivado de APP INVITACION.ai (lienzo 1080 x 1920).
   Los fondos son las planchas del .ai con el texto removido; el texto,
   los campos y los botones se dibujan encima como HTML real.
   ========================================================================== */

@font-face {
  font-family: 'Ray-Ban Sans';
  src: url('fonts/Ray-BanSans-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Ray-Ban Sans';
  src: url('fonts/Ray-BanSans-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: block;
}
/* Subconjuntos de Avenir Next extraídos del .ai (solo los datos del evento).
   Van en WOFF2 porque el TTF crudo del PDF lo rechaza el navegador. */
@font-face {
  font-family: 'Avenir Next Ev';
  src: url('fonts/AvenirNext-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Avenir Next Ev';
  src: url('fonts/AvenirNext-Heavy.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: block;
}

:root {
  --rb-red:   #ed1d24;  /* rojo de titulares */
  --rb-red-2: #ef253d;  /* rojo de los datos del evento */
  --rb-white: #ffffff;
  --rb-note:  #ededed;
  --rb-black: #000000;

  /* Lienzo del diseño */
  --design-w: 1080;
  --design-h: 1920;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: var(--rb-white);
  font-family: 'Ray-Ban Sans', 'Arial Narrow', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

/* --------------------------------------------------------------------------
   El "stage": réplica del artboard 1080x1920 escalada al viewport.
   --u = 1 px del diseño. Todo se posiciona en múltiplos de --u.
   -------------------------------------------------------------------------- */
.stage {
  --stage-w: min(100vw, calc(100vh * 0.5625));
  --u: calc(var(--stage-w) / 1080);

  position: relative;
  width: var(--stage-w);
  height: calc(var(--stage-w) * 1920 / 1080);
  overflow: hidden;
  background: #000 center center / cover no-repeat;
  user-select: none;
}
@supports (height: 100dvh) {
  .stage { --stage-w: min(100vw, calc(100dvh * 0.5625)); }
}

.stage.bg-invitacion { background-image: url('img/bg-invitacion.jpg'); }
.stage.bg-registro   { background-image: url('img/bg-registro.jpg'); }
.stage.bg-revelacion { background-image: url('img/bg-revelacion.jpg'); }
.stage.bg-acceso     { background-image: url('img/bg-acceso.jpg'); }

/* Capa de texto: todo absoluto sobre el lienzo. */
.t {
  position: absolute;
  margin: 0;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  font-weight: 400;
  color: var(--rb-white);
}
.b   { font-weight: 700; }
.red { color: var(--rb-red); }
.t.center { left: 0; width: calc(1080 * var(--u)); text-align: center; }

/* --------------------------------------------------------------------------
   Botón pill — se dibuja completo en CSS (relleno negro, trazo y glow rojos)
   para que nunca se desalinee con el fondo.
   -------------------------------------------------------------------------- */
.btn-pill {
  position: absolute;
  display: grid;
  place-items: center;
  background: var(--rb-black);
  border: calc(1.6 * var(--u)) solid var(--rb-red);
  border-radius: 999px;
  cursor: pointer;
  color: var(--rb-white);
  font-family: 'Ray-Ban Sans', sans-serif;
  font-weight: 700;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 calc(10 * var(--u)) calc(46 * var(--u)) calc(-6 * var(--u)) rgba(237,29,36,.75),
    0 0 calc(26 * var(--u)) calc(-4 * var(--u)) rgba(237,29,36,.55);
  transition: box-shadow .18s ease, transform .12s ease;
}
.btn-pill:hover {
  box-shadow:
    0 calc(12 * var(--u)) calc(58 * var(--u)) calc(-4 * var(--u)) rgba(237,29,36,.95),
    0 0 calc(34 * var(--u)) calc(-2 * var(--u)) rgba(237,29,36,.7);
}
.btn-pill:active { transform: scale(.985); }
.btn-pill:focus-visible { outline: calc(3 * var(--u)) solid #fff; outline-offset: calc(4 * var(--u)); }

/* --------------------------------------------------------------------------
   Campos — también se dibujan en CSS: caja negra + glow rojo. Las reglas rojas
   horizontales de arriba y abajo sí son arte del fondo y se quedan ahí.
   -------------------------------------------------------------------------- */
.field {
  position: absolute;
  /* Medidas del artboard: caja de 759.3 x 103.3 con relleno negro y trazo rojo. */
  width: calc(759.3 * var(--u));
  height: calc(103.3 * var(--u));
  background: var(--rb-black);
  border: calc(1 * var(--u)) solid var(--rb-red);
  outline: 0;
  color: var(--rb-white);
  font-family: 'Ray-Ban Sans', sans-serif;
  font-size: calc(44 * var(--u));
  letter-spacing: calc(2 * var(--u));
  /* El texto arranca alineado con la etiqueta de arriba. */
  padding: 0 calc(74.1 * var(--u));
  box-shadow:
    0 calc(12 * var(--u)) calc(42 * var(--u)) calc(-10 * var(--u)) rgba(237,29,36,.85),
    0 0 calc(22 * var(--u)) calc(-6 * var(--u)) rgba(237,29,36,.45);
  transition: box-shadow .18s ease;
}
.field::placeholder { color: rgba(255,255,255,.25); }
.field:focus {
  box-shadow:
    0 calc(14 * var(--u)) calc(54 * var(--u)) calc(-8 * var(--u)) rgba(237,29,36,1),
    0 0 calc(30 * var(--u)) calc(-4 * var(--u)) rgba(237,29,36,.7),
    inset 0 0 0 calc(1.6 * var(--u)) rgba(237,29,36,.9);
}
.field.is-error {
  box-shadow:
    0 calc(14 * var(--u)) calc(54 * var(--u)) calc(-8 * var(--u)) rgba(237,29,36,1),
    inset 0 0 0 calc(2.4 * var(--u)) var(--rb-red);
}
/* El autocompletado de Chrome pinta el campo de amarillo: lo devolvemos a negro. */
.field:-webkit-autofill,
.field:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #000 inset;
  caret-color: #fff;
}

.field-label {
  position: absolute;
  font-weight: 700;
  font-size: calc(46.8 * var(--u));
  color: var(--rb-white);
  white-space: nowrap;
}

/* Aviso corto bajo el campo que falla. */
.field-error {
  position: absolute;
  font-weight: 700;
  font-size: calc(24 * var(--u));
  letter-spacing: calc(2.4 * var(--u));
  color: var(--rb-red);
  white-space: nowrap;
  text-align: right;
  width: calc(759.3 * var(--u));
}

/* --------------------------------------------------------------------------
   Mensajes de la marca — reemplazan los globos nativos del navegador.
   -------------------------------------------------------------------------- */
.rb-alert {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: calc(70 * var(--u));
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(calc(6 * var(--u)));
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.rb-alert.is-open { opacity: 1; visibility: visible; }

.rb-alert__panel {
  width: 100%;
  background: var(--rb-black);
  border: calc(1.6 * var(--u)) solid var(--rb-red);
  padding: calc(56 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u));
  text-align: center;
  box-shadow:
    0 calc(16 * var(--u)) calc(70 * var(--u)) calc(-10 * var(--u)) rgba(237,29,36,.85),
    0 0 calc(34 * var(--u)) calc(-6 * var(--u)) rgba(237,29,36,.5);
  transform: translateY(calc(18 * var(--u)));
  transition: transform .22s ease;
}
.rb-alert.is-open .rb-alert__panel { transform: none; }

.rb-alert__title {
  margin: 0 0 calc(22 * var(--u));
  font-weight: 700;
  font-size: calc(52 * var(--u));
  line-height: 1.05;
  letter-spacing: calc(2 * var(--u));
  color: var(--rb-red);
}
.rb-alert__msg {
  margin: 0;
  font-weight: 400;
  font-size: calc(34 * var(--u));
  line-height: 1.35;
  letter-spacing: calc(1.4 * var(--u));
  color: var(--rb-white);
}
.rb-alert__msg + .rb-alert__msg { margin-top: calc(14 * var(--u)); }

.rb-alert__btn {
  position: static;
  margin: calc(44 * var(--u)) auto 0;
  width: calc(380 * var(--u));
  height: calc(96 * var(--u));
  font-size: calc(40 * var(--u));
  letter-spacing: calc(3.5 * var(--u));
}

/* --------------------------------------------------------------------------
   Pantalla 04 · Estás invitado
   -------------------------------------------------------------------------- */
.p-invitacion .kicker {
  top: calc(746.5 * var(--u));
  font-size: calc(93 * var(--u));
  letter-spacing: 0;
}
.p-invitacion .claim {
  left: calc(71 * var(--u));
  font-size: calc(119.5 * var(--u));
  letter-spacing: 0;
}
.p-invitacion .claim-1 { top: calc(934.1 * var(--u)); }
.p-invitacion .claim-2 { top: calc(1063.7 * var(--u)); }

.p-invitacion .btn-pill {
  left: calc(264.7 * var(--u));
  top: calc(1402.4 * var(--u));
  width: calc(550.6 * var(--u));
  height: calc(105.7 * var(--u));
  /* compensa el centrado para que la caps-height caiga donde la puso el diseño */
  padding-bottom: calc(25.5 * var(--u));
  font-size: calc(46.8 * var(--u));
  letter-spacing: calc(3.538 * var(--u));
}

/* --------------------------------------------------------------------------
   Pantalla 03 · Registro
   -------------------------------------------------------------------------- */
.p-registro .headline {
  left: calc(169 * var(--u));
  font-size: calc(95 * var(--u));
  letter-spacing: 0;
}
.p-registro .hl-1 { top: calc(407.4 * var(--u)); }
.p-registro .hl-2 { top: calc(498.2 * var(--u)); }
.p-registro .hl-3 { top: calc(607.1 * var(--u)); }
.p-registro .hl-4 { top: calc(697.5 * var(--u)); }

.p-registro .field-label { left: calc(248.1 * var(--u)); }
.p-registro .lb-1 { top: calc(924.0 * var(--u)); letter-spacing: calc(3.481 * var(--u)); }
.p-registro .lb-2 { top: calc(1146.0 * var(--u)); letter-spacing: calc(3.526 * var(--u)); }
.p-registro .lb-3 { top: calc(1361.4 * var(--u)); letter-spacing: calc(3.107 * var(--u)); }

.p-registro .field { left: calc(174 * var(--u)); }
.p-registro .fd-1 { top: calc(991.6 * var(--u)); }
.p-registro .fd-2 { top: calc(1213.3 * var(--u)); }
.p-registro .fd-3 { top: calc(1428.7 * var(--u)); }

.p-registro .field-error { left: calc(174 * var(--u)); }
.p-registro .er-1 { top: calc(1103 * var(--u)); }
.p-registro .er-2 { top: calc(1325 * var(--u)); }
.p-registro .er-3 { top: calc(1540 * var(--u)); }

.p-registro .btn-pill {
  left: calc(277.9 * var(--u));
  top: calc(1660.9 * var(--u));
  width: calc(524.2 * var(--u));
  height: calc(105.7 * var(--u));
  padding-bottom: calc(20.3 * var(--u));
  font-size: calc(46.8 * var(--u));
  letter-spacing: calc(3.105 * var(--u));
}

.p-registro .politica {
  top: calc(1844.5 * var(--u));
  font-size: calc(21 * var(--u));
  letter-spacing: calc(1.64 * var(--u));
  color: var(--rb-white);
  text-decoration: underline;
  text-underline-offset: calc(4 * var(--u));
}

/* --------------------------------------------------------------------------
   Pantalla 02 · Revelación (video)
   -------------------------------------------------------------------------- */
.p-revelacion .reveal-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.p-revelacion .headline {
  left: calc(64 * var(--u));
  font-size: calc(116 * var(--u));
  letter-spacing: 0;
  z-index: 2;
  text-shadow: 0 calc(4 * var(--u)) calc(28 * var(--u)) rgba(0,0,0,.55);
}
.p-revelacion .hl-1 { top: calc(326.5 * var(--u)); }
.p-revelacion .hl-2 { top: calc(440.4 * var(--u)); }
.p-revelacion .hl-3 { top: calc(566.7 * var(--u)); }

/* Barra de progreso del video — medidas exactas del artboard 02:
   pista 981.1 x 10.7 en (28.5, 1841.1); knob rojo de 41.6 x 40.9. */
.p-revelacion .progress {
  position: absolute;
  left: calc(28.5 * var(--u));
  top: calc(1841.1 * var(--u));
  width: calc(981.1 * var(--u));
  height: calc(10.7 * var(--u));
  background: var(--rb-white);
  border-radius: calc(5.35 * var(--u));
  z-index: 3;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.p-revelacion .progress-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(41.6 * var(--u));
  height: calc(40.9 * var(--u));
  transform: translate(-50%, -50%);
  background: var(--rb-red);
  border-radius: calc(8 * var(--u));
  display: grid;
  place-items: center;
  pointer-events: none;
}
.p-revelacion .progress-knob svg {
  width: calc(19.6 * var(--u));
  height: calc(31.5 * var(--u));
}
.p-revelacion .progress-knob .icon-pause { display: none; }
.p-revelacion.is-playing .progress-knob .icon-play  { display: none; }
.p-revelacion.is-playing .progress-knob .icon-pause { display: block; }

.p-revelacion .skip {
  position: absolute;
  right: calc(28.5 * var(--u));
  top: calc(1755 * var(--u));
  font-size: calc(24 * var(--u));
  letter-spacing: calc(3 * var(--u));
  color: rgba(255,255,255,.72);
  text-decoration: none;
  z-index: 3;
}
.p-revelacion .skip:hover { color: var(--rb-white); }

/* --------------------------------------------------------------------------
   Pantalla 01 · Tu acceso está listo
   -------------------------------------------------------------------------- */
.p-acceso .headline {
  font-size: calc(123 * var(--u));
  letter-spacing: 0;
  /* el diseño centra este bloque en 548.2, no en 540 */
  left: calc(8.2 * var(--u));
}
.p-acceso .hl-1 { top: calc(607.8 * var(--u)); }
.p-acceso .hl-2 { top: calc(746.2 * var(--u)); }

.p-acceso .qr {
  position: absolute;
  left: calc(379 * var(--u));
  top: calc(930 * var(--u));
  width: calc(312.5 * var(--u));
  height: calc(312.5 * var(--u));
  background: #fff;
  display: grid;
  place-items: center;
  /* Zona de silencio: sin ella muchos lectores no enganchan el código. */
  padding: calc(16 * var(--u));
}
.p-acceso .qr img,
.p-acceso .qr canvas { width: 100%; height: 100%; display: block; }

.p-acceso .qr-hint {
  position: absolute;
  left: calc(740.9 * var(--u));
  top: calc(931.8 * var(--u));
  writing-mode: vertical-rl;
  font-weight: 700;
  font-size: calc(23.8 * var(--u));
  letter-spacing: calc(.461 * var(--u));
  line-height: 1;
  color: var(--rb-white);
  white-space: nowrap;
}

.p-acceso .sub {
  font-size: calc(63.8 * var(--u));
}
.p-acceso .sub-1 { top: calc(1279.5 * var(--u)); letter-spacing: calc(2.367 * var(--u)); text-indent: calc(1.18 * var(--u)); }
.p-acceso .sub-2 { top: calc(1347.5 * var(--u)); letter-spacing: calc(2.071 * var(--u)); text-indent: calc(1.04 * var(--u)); }

.p-acceso .evento {
  position: absolute;
  left: 0;
  width: calc(1080 * var(--u));
  text-align: center;
  font-family: 'Avenir Next Ev', 'Avenir Next', 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: calc(43 * var(--u));
  line-height: 1.24;
  color: var(--rb-red-2);
}
.p-acceso .evento b { font-weight: 800; }
.p-acceso .ev-1 { top: calc(1519.8 * var(--u)); letter-spacing: calc(-0.108 * var(--u)); }
.p-acceso .ev-2 { top: calc(1569.8 * var(--u)); letter-spacing: calc(-0.528 * var(--u)); }
.p-acceso .ev-3 { top: calc(1625.8 * var(--u)); letter-spacing: calc(-0.041 * var(--u)); }

.p-acceso .nota {
  top: calc(1806.8 * var(--u));
  font-family: 'Avenir Next Ev', 'Avenir Next', 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: calc(24 * var(--u));
  letter-spacing: calc(6.487 * var(--u));
  text-indent: calc(3.24 * var(--u));
  color: var(--rb-note);
}

/* --------------------------------------------------------------------------
   Accesibilidad: el texto es HTML real, pero el fondo es una imagen.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-pill { transition: none; }
}