/* =========================================================
   IALEXTREMO · Tipografias
   Se cargan desde el propio CSS (no desde el head del HTML):
   BOBAX solo toma el HTML del body, asi que la etiqueta link
   de Google Fonts se perderia y todo caeria a Arial.
   Space Grotesk (titulares) · Manrope (texto) · JetBrains Mono (detalle)
   ========================================================= */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSuXd.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPb94C-s0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPb94C-s0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPb94C-s0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   IALEXTREMO · Sistema de diseno del funnel
   HTML + CSS + JS puro. El popup, el formulario, el submit y la
   navegacion entre steps los inyecta el renderer de BOBAX.
   ========================================================= */

:root {
  color-scheme: dark;

  /* === BOBAX brand tokens (obligatorio) === */
  --brand-primary:          #6F42E8;   /* violeta IALEXTREMO: botones, ticker, rellenos */
  --brand-primary-contrast: #FFFFFF;   /* texto sobre el violeta (contraste AA 5.6:1) */
  --brand-bg:               #110E1C;   /* fondo del popup / tarjetas */
  --brand-text:             #F4F1FF;   /* texto principal */
  --brand-muted:            #A9A3C2;   /* labels, subtitulos, footer */
  --brand-border:           #2A2440;   /* borde de inputs */
  --brand-radius:           14px;      /* esquinas */
  --brand-font:             'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* === Tokens propios del funnel === */
  --ink:        #07060D;               /* fondo de pagina: casi negro */
  --surface:    var(--brand-bg);
  --surface-2:  #181428;               /* campos y bloques hundidos */
  --line:       var(--brand-border);
  --violet:     var(--brand-primary);
  --violet-deep: #4A22B8;              /* violeta mas hondo: bordes y degradados */
  --lilac:      #B9A2FF;               /* lila: resaltados, acentos y texto de acento */
  --text:       var(--brand-text);
  --muted:      var(--brand-muted);
  --faint:      #8983A3;               /* legal */
  --danger:     #FF7A6B;               /* errores, legible sobre fondo oscuro */
  --warn:       #FFC27A;               /* ultimos lugares / pendientes */

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-sans:    var(--brand-font);

  --wrap:   620px;
  --gutter: 20px;
  --r-lg:   20px;
  --r-md:   var(--brand-radius);
  --glow:   0 0 0 1px rgba(124, 92, 255, .06), 0 24px 60px -30px rgba(124, 92, 255, .45);
}

/* ---------------- Reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img, svg, video, iframe { max-width: 100%; display: block; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--violet); color: var(--brand-primary-contrast); }
:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------------- Fondo: retícula de puntos + halos violeta ----------------
   Negro arriba y el violeta subiendo desde abajo, como en las referencias. */
/* Van en pseudo-elementos fijos para que nunca aporten scroll horizontal. */
body::before,
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body::before {
  background-image: radial-gradient(rgba(185, 162, 255, .11) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 90%);
}
body::after {
  background:
    radial-gradient(120% 60% at 50% 112%, rgba(124, 92, 255, .42), transparent 68%),
    radial-gradient(620px 420px at 96% 4%, rgba(124, 92, 255, .22), transparent 65%),
    radial-gradient(520px 380px at -6% 38%, rgba(185, 162, 255, .08), transparent 65%);
}

/* ---------------- Layout ---------------- */
.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(26px, 6.5vw, 44px) var(--gutter) clamp(40px, 9vw, 72px);
  display: grid;
  /* Columna fija: si una tarjeta se hace mas ancha (el video en escritorio)
     se sale por los lados, pero no estira la columna ni arrastra al resto. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 5vw, 30px);
}

/* ---------------- Ticker ---------------- */
.ticker {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, var(--violet-deep), var(--violet) 50%, var(--violet-deep));
  color: var(--brand-primary-contrast);
  overflow: hidden;
  padding-block: 9px;
}
.ticker__track { display: flex; width: max-content; animation: ticker 28s linear infinite; }
.ticker__group { display: flex; align-items: center; gap: 18px; padding-right: 18px; }
.ticker__item {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__dot { opacity: .5; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------------- Hero ---------------- */
.mark {
  display: block;
  width: clamp(150px, 42vw, 200px);
  height: auto;
  margin-bottom: clamp(20px, 5vw, 28px);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lilac);
}
.eyebrow--sm { font-size: 11px; letter-spacing: .18em; }

/* Titulares en caja baja, no en mayusculas. */
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(31px, 8.2vw, 50px);
  line-height: 1.05;
  letter-spacing: -.022em;
  margin-top: 14px;
  text-wrap: balance;
}
/* Resaltado IALEXTREMO: la frase clave en degradado lila sobre el titular blanco. */
.hl {
  color: var(--lilac);
  background: linear-gradient(100deg, #D9CCFF 0%, var(--lilac) 45%, #8E6BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* La segunda mitad del titular arranca en su propia linea: primero la
   condicion, luego lo que hay que hacer. */
.h1__b { display: block; }
.lede {
  margin-top: 16px;
  color: var(--muted);
  font-size: clamp(15px, 3.6vw, 17px);
  line-height: 1.55;
  max-width: 46ch;
}

/* ---------------- Tarjetas ---------------- */
.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(124, 92, 255, .09), transparent 45%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--glow);
}

/* ---------------- Botones ---------------- */
/* Mono en mayusculas, degradado con brillo interior, halo violeta y un
   destello que barre el boton al pasar por encima. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border: 1px solid var(--violet-deep);
  border-radius: 999px;              /* pill */
  background: linear-gradient(180deg, #8A63FF 0%, var(--violet) 48%, #5327C9 100%);
  color: var(--brand-primary-contrast);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(12px, 3vw, 13.5px);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 10px 30px -12px rgba(124, 92, 255, .5);
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease,
              background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    0 16px 40px -12px rgba(124, 92, 255, .6);
}
.btn:active { transform: translateY(0); }

/* El destello. Va en z-index negativo: pinta sobre el fondo del boton
   pero por debajo del texto. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .65s cubic-bezier(.22, .61, .36, 1);
}
.btn:hover::after { transform: translateX(130%); }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }

.btn__ico {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn--block { display: flex; width: 100%; }

.btn--ghost {
  background: linear-gradient(180deg, rgba(124, 92, 255, .08), rgba(124, 92, 255, .02));
  color: var(--lilac);
  border-color: rgba(124, 92, 255, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 8px 26px -16px rgba(124, 92, 255, .4);
}
.btn--ghost:hover {
  background: var(--violet);
  color: var(--brand-primary-contrast);
  border-color: var(--violet);
}
/* ---------------- Marcador de pendiente ---------------- */
/* Bloque deliberadamente visible: marca los datos que faltan por
   confirmar con el cliente. Se borra al pegar el dato definitivo. */
.pending {
  font-family: var(--font-mono);
  font-size: clamp(11px, 2.9vw, 12.5px);
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--warn);
  background: rgba(185, 162, 255, .08);
  border: 1px dashed rgba(185, 162, 255, .5);
  border-radius: 10px;
  padding: 10px 12px;
}
.pending b { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }

/* ---------------- Legal ---------------- */
.legal {
  display: grid;
  gap: 12px;
  color: var(--faint);
  font-size: clamp(12.5px, 3vw, 13.5px);
  line-height: 1.6;
  padding-inline: 4px;
}
.legal a[href] { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.legal a[href]:hover { color: var(--lilac); }

/* ---------------- Desktop ---------------- */
@media (min-width: 700px) {
  :root { --wrap: 680px; }
  .page { padding-top: 52px; }
}

/* =========================================================
   PAGINA 1 · Video + CTA con desbloqueo + formulario
   ========================================================= */

/* ---------------- Video ---------------- */
/* El video manda en esta pagina: la tarjeta lleva poco relleno
   para que la imagen sea lo mas grande posible. */
.vsl-card { padding: clamp(10px, 2.4vw, 14px); }
.vsl {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .14), transparent 65%),
    linear-gradient(160deg, #5B36D6 0%, #1A1036 58%, #0A0814 100%);
}
/* contain = el video se ve siempre completo, nunca recortado.
   Si el video final no es 16/9, ajusta aqui el aspect-ratio al formato real. */
.vsl__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.vsl__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(5, 4, 12, .12), rgba(5, 4, 12, .42));
  transition: opacity .25s ease;
}
.vsl.is-playing .vsl__overlay { opacity: 0; pointer-events: none; }
.vsl__play {
  width: clamp(62px, 15vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--violet);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .12), 0 12px 46px -10px rgba(124, 92, 255, .9);
  transition: transform .2s ease;
}
.vsl__play svg { width: 44%; fill: currentColor; margin-left: 8%; }
.vsl__overlay:hover .vsl__play { transform: scale(1.07); }
.vsl__time {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(5, 4, 12, .85);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
}

/* ---------------- CTA con temporizador ---------------- */
.cta {
  padding: clamp(20px, 5vw, 28px);
  text-align: center;
  display: grid;
  gap: 18px;
  justify-items: center;
}
.cta__line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 4.4vw, 22px);
  line-height: 1.3;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.cta__sub {
  margin-top: -6px;
  color: var(--muted);
  font-size: clamp(14px, 3.5vw, 16px);
  line-height: 1.45;
  text-wrap: balance;
}

/* El boton lleva el contador dentro. Mientras cuenta esta bloqueado:
   se ve apagado, con el candado, el reloj y una barra que se va llenando
   por debajo. Al llegar a cero se convierte en el CTA de verdad. */
.cta__btn { position: relative; min-width: min(100%, 320px); }

.cta__btn .btn__ico,
.cta__btn .cta__btn-go { display: none; }
.cta__btn.is-open .cta__btn-go,
.cta__btn.is-open .btn__ico { display: inline-flex; }
.cta__btn.is-open .cta__btn-wait { display: none; }

.cta__btn-wait { display: inline-flex; align-items: center; gap: 9px; }
.cta__time { font-variant-numeric: tabular-nums; letter-spacing: .12em; }

/* Estado bloqueado */
.cta__btn:not(.is-open) {
  cursor: not-allowed;
  pointer-events: none;          /* no se puede pulsar hasta que termine */
  background: linear-gradient(180deg, #1C1830, #151226);
  border-color: var(--line);
  color: var(--muted);
  box-shadow: none;
}
.cta__btn:not(.is-open) .cta__lock { stroke: var(--muted); }
.cta__lock {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* La barra de progreso va pegada al borde inferior del propio boton. */
.cta__fill {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 0;
  background: var(--lilac);
  box-shadow: 0 0 10px rgba(185, 162, 255, .6);
  transition: width .22s linear;
}
.cta__btn.is-open .cta__fill { display: none; }

/* Aviso pequeño debajo del boton */
.cta__hint {
  font-family: var(--font-mono);
  font-size: clamp(10.5px, 2.7vw, 12px);
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--muted);
}
.cta.is-open .cta__hint { display: none; }

/* ---------------- Marco violeta del video ----------------
   La tarjeta del video no es una tarjeta mas: es lo unico que hay que mirar.
   Se le da un marco violeta de verdad, con un aro por dentro pegado a la imagen
   y un halo por fuera, en vez del borde gris del resto de tarjetas. */
.vsl-card {
  border-color: rgba(124, 92, 255, .5);
  background:
    linear-gradient(180deg, rgba(124, 92, 255, .1), transparent 55%),
    var(--surface);
  box-shadow:
    inset 0 0 0 1px rgba(124, 92, 255, .12),
    0 0 32px -4px rgba(124, 92, 255, .18),
    0 30px 80px -40px rgba(124, 92, 255, .5);
}
.vsl {
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .3);
}

/* ---------------- Primera pantalla ----------------
   El boton tiene que verse al entrar, sin scroll. Por eso esta pagina va
   mas apretada que las demas: logo pequeño, titular contenido y el CTA
   sin tanto aire. */
.page { padding-top: clamp(16px, 4vw, 24px); gap: clamp(14px, 3.6vw, 20px); }
.mark { width: clamp(132px, 36vw, 160px); margin-bottom: clamp(10px, 3vw, 14px); }
.h1 { margin-top: 0; font-size: clamp(26px, 7.4vw, 36px); }

.stage { display: grid; gap: clamp(14px, 3.6vw, 20px); }
.vsl-card { padding: 8px; }

.cta { padding: 18px 18px 16px; gap: 12px; }
.cta__line { font-size: clamp(16px, 4.3vw, 20px); }
.cta__sub { margin-top: -4px; font-size: clamp(13.5px, 3.5vw, 15px); }
.cta__btn { width: 100%; }

/* ---------------- Escritorio ----------------
   El video a la izquierda y el CTA a la derecha, en una sola fila, para que
   el boton quede a la vista junto al video. El titular va encima, al ancho
   de los dos.

   --vid (ancho del video) lo manda el menor de tres: un tope fijo, lo que
   quepa a lo ancho dejando sitio a la columna del CTA, y lo que quepa a lo
   alto con el 16:9 (el alto de la ventana menos ticker, logo y titular). */
@media (min-width: 960px) {
  .page {
    --col: 340px;
    --vid: min(820px, calc(100vw - 64px - var(--col) - 36px), calc((100vh - 270px) * 16 / 9));
    padding-top: 22px;
  }

  .hero,
  .stage {
    justify-self: center;
    min-width: 100%;
    width: calc(var(--vid) + var(--col) + 36px);
  }

  .hero { text-align: center; }
  .mark { width: 168px; margin-inline: auto; margin-bottom: 12px; }
  .h1 { max-width: none; font-size: clamp(34px, 3.3vw, 48px); }
  /* En escritorio el titular corre seguido: dos lineas en vez de tres. */
  .h1__b { display: inline; }

  .stage {
    grid-template-columns: var(--vid) var(--col);
    gap: 36px;
    align-items: center;
  }

  .vsl-card { padding: 12px; border-width: 2px; }
  .vsl__play { width: 88px; }
  .vsl__time { right: 16px; bottom: 16px; font-size: 13px; }

  .cta { padding: 28px 24px 22px; gap: 16px; }
  .cta__line { font-size: 22px; }
  .cta__sub { font-size: 15.5px; }

  .legal { text-align: center; }
}

@media (min-width: 1500px) {
  .page {
    --col: 380px;
    --vid: min(980px, calc(100vw - 64px - var(--col) - 36px), calc((100vh - 290px) * 16 / 9));
  }
  .h1 { font-size: 52px; }
  .cta__line { font-size: 24px; }
}