/* Las landings de stellatvarg.com (l.html): la prueba gratis en una sola
   pantalla (que tiene, apodo, celular y email, todo junto), con
   la paleta y las fuentes del chat de stellatvplay.com. Despues sigue el chat. */

@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url(/fuentes/inter-latin-var.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:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fuentes/bebas-neue-latin.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;
}

:root{
  --negro:#070710; --oscuro:#0e0e1f;
  --rosa:#ff2d78; --cyan:#00d4ff; --rojo:#ff3d3d; --dorado:#ffb800;
  --texto:#e8e8ff; --suave:#9090b8; --blanco:#fff;
  --linea:rgba(255,255,255,.08);
  --boton:linear-gradient(135deg,#e0115f,#a010e0);
  --rosa-fondo:rgba(255,45,120,.08);  --rosa-borde:rgba(255,45,120,.35);
  --cyan-fondo:rgba(0,212,255,.08);   --cyan-borde:rgba(0,212,255,.35);
  --dorado-fondo:rgba(255,184,0,.08); --dorado-borde:rgba(255,184,0,.35);
  --f-titulo:'Bebas Neue','Arial Narrow','Roboto Condensed',sans-serif-condensed,sans-serif;
  --f-texto:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.125rem; --fs-2xl:1.875rem; --fs-3xl:2.3rem;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --r-md:12px; --r-pill:999px;
  color-scheme:dark;
}

*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh; min-height:100svh;
  background:
    radial-gradient(800px 500px at 20% 0%, rgba(184,32,255,.14), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, rgba(0,212,255,.10), transparent 60%),
    var(--negro);
  color:var(--texto); font-family:var(--f-texto); font-size:var(--fs-base); line-height:1.4;
  -webkit-tap-highlight-color:transparent;
}
a{color:var(--cyan)}

/* La marca, el video, el formulario y el pie, uno pegado al otro. Si no
   entra en la pantalla, scrollea normal: el formulario entero no cabe con
   el video en un celular bajo. */
.prueba{
  min-height:100vh; min-height:100svh; max-width:440px; margin:0 auto;
  display:flex; flex-direction:column; gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) 16px calc(8px + env(safe-area-inset-bottom));
}
.cabeza,.paso,.pie{flex:0 0 auto}

.cabeza{text-align:center}
.marca-sitio{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-titulo); font-size:1.5rem; letter-spacing:1px; line-height:1;
  text-transform:uppercase; color:var(--blanco);
}
.marca-sitio img{height:24px; width:auto; display:block}
.marca-sitio em{font-style:normal; color:var(--rosa)}
.cabeza h1{
  margin-top:2px; font-family:var(--f-titulo); font-weight:400; font-size:1.95rem;
  letter-spacing:.02em; line-height:1; text-transform:uppercase; color:var(--blanco);
}
.oferta-destacada{color:#ff5c9b; white-space:nowrap}
/* Un brillo que pasa por "2 HORAS" (con "reducir movimiento", queda quieto). */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .oferta-destacada{
    background:linear-gradient(100deg,#ff5c9b 0%,#ff5c9b 40%,#ffe1ee 50%,#ff5c9b 60%,#ff5c9b 100%) 0 0/250% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:brillo 3.2s ease-in-out infinite;
  }
}
@keyframes brillo{0%{background-position:100% 0}60%,100%{background-position:0 0}}
.oferta{color:#4ef08f; font-size:.8125rem; font-weight:600}

/* Video normal: controles del navegador, play y pantalla completa. Llena
   el alto que queda sin pasarse del ancho (su proporcion es 1280×728). */
/* Toma solo lo que necesita (no crece): todo queda junto y lo que sobra en
   una pantalla alta va al final. En una baja se achica para que no haya scroll. */
.muestra{flex:0 1 auto; min-height:110px; display:flex; flex-direction:column; align-items:center}
.video-caja{position:relative; flex:0 1 min(232px, calc((100vw - 32px) * 728 / 1280)); min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center}
.muestra video{
  display:block; height:100%; width:auto; max-width:100%;
  max-height:min(calc((100vw - 32px) * 728 / 1280), 232px);
  aspect-ratio:1280/728; object-fit:contain; background:#000;
  border:1px solid var(--linea); border-radius:10px;
}
#errorMuestra{margin-top:4px; font-size:.75rem; text-align:center}
/* Encima del video, al centro: grande para el pulgar. Se va al activar el
   sonido (o si lo activa con los controles). */
.sonido{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1;
  min-height:46px; padding:0 20px; border-radius:var(--r-pill); cursor:pointer; white-space:nowrap;
  background:rgba(7,7,16,.72); border:1.5px solid rgba(255,255,255,.75); color:var(--blanco);
  font:800 1rem var(--f-texto); box-shadow:0 4px 18px rgba(0,0,0,.45)}
button.sonido:not(:disabled):active{transform:translate(-50%,-50%) scale(.97)}
.social{flex:0 0 auto; margin-top:4px; font-size:.8125rem; font-weight:700; color:#ffd27a; text-align:center}

.paso{display:flex; flex-direction:column}
.momento{display:flex; flex-direction:column; gap:6px}

/* "Reclamá tu demo" y que tiene: tres opciones en una linea, como chips. */
.reclama{font-family:var(--f-titulo); font-weight:400; font-size:2rem; line-height:1; letter-spacing:.02em;
  text-transform:uppercase; color:var(--blanco); text-align:center; margin-top:4px}
.reclama span{color:#ff5c9b}
fieldset.tengo{border:0; min-width:0}
.tengo legend{padding:0; margin-bottom:4px; font-size:1.125rem; font-weight:800; color:var(--blanco)}
.tengo-opciones{display:flex; flex-direction:column}
.tengo-op{display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer;
  font-size:1.0625rem; font-weight:600; color:var(--blanco)}
.tengo-op input{flex:0 0 auto; width:22px; height:22px; min-height:0; margin:0; padding:0; accent-color:var(--cyan); cursor:pointer}
.tengo-op .suave{color:var(--suave); font-weight:400; font-size:.875rem}
.tengo-ayuda{margin:2px 0 0; color:var(--suave); font-size:.8125rem; line-height:1.3}
.tengo-op:has(input:focus-visible){outline:2px solid var(--cyan); outline-offset:2px; border-radius:8px}

.campo{display:flex; flex-direction:column; gap:2px}
label{text-align:left; color:var(--texto); font-size:.8125rem; font-weight:600; line-height:1.2}
input,.pais{
  width:100%; min-height:44px; border-radius:12px; padding:0 14px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:var(--blanco); font-family:inherit; font-size:16px;   /* 16px: el iPhone no hace zoom */
}
input::placeholder{color:#6f6f96}
input:focus{border-color:var(--cyan); outline:none}
input[aria-invalid="true"]{border-color:var(--rojo)}
.fila-wpp{display:flex; gap:8px}
.fila-wpp input{flex:1 1 auto; min-width:0}
/* El pais: se ve bandera y codigo; el select nativo va invisible encima. */
.pais{position:relative; flex:0 0 96px; width:96px; padding:0 8px; display:flex; align-items:center; justify-content:center; white-space:nowrap}
.pais::after{content:'▾'; margin-left:4px; color:var(--suave); font-size:.75rem}
.pais select{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:16px}
.pais:focus-within{border-color:var(--cyan)}
select option{background:var(--oscuro); color:var(--texto)}
label .opcional{color:var(--suave); font-weight:400}
.linea:empty{display:none}
.linea{min-height:20px; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:.75rem; line-height:1.25; color:var(--suave); text-align:left}
.linea.bien{color:#4ef08f; font-weight:800}
.linea.mal{color:#ff8a8a; font-weight:600}
@keyframes salta{
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(2px)}
}
.linea.salta{border-radius:8px; background:rgba(255,61,61,.24); box-shadow:0 0 0 2px rgba(255,90,90,.55); animation:salta .45s ease}
.linea.aviso{color:var(--dorado); font-weight:600}
.sugerencia{min-height:26px; padding:0 10px; border-radius:var(--r-pill); cursor:pointer;
  border:1px solid var(--cyan-borde); background:var(--cyan-fondo); color:var(--cyan); font:600 .8125rem var(--f-texto)}
.error{color:#ff8a8a; font-size:.8125rem; text-align:left}
.error:empty{display:none}
.pedir{
  min-height:52px; width:100%; margin-top:2px; border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,#2ee879,#16b45a); color:#04140a; font-family:inherit; font-size:1.125rem; font-weight:800;
  box-shadow:0 5px 24px rgba(37,211,102,.28);
}
.pedir:disabled{opacity:.6; cursor:progress}
.nota-chat{color:var(--suave); font-size:.6875rem; line-height:1.3; text-align:center}
.nota-chat a{color:var(--suave); text-decoration:underline}

/* Ya pidio la prueba en este navegador: "Continuar en el chat" se ve como
   el boton de pedir, pero es otro elemento. */
.ya-pedida{padding:10px 14px; border-radius:12px; text-align:center; font-size:.9375rem;
  background:var(--cyan-fondo); border:1px solid var(--cyan-borde)}
.mi-chat{
  min-height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; text-decoration:none;
  background:linear-gradient(135deg,#2ee879,#16b45a); color:#04140a; font-size:1.125rem; font-weight:800;
}
button.link{
  min-height:44px; padding:0 8px; background:none; border:0; cursor:pointer;
  color:var(--cyan); font-family:inherit; font-size:var(--fs-sm); font-weight:700; text-decoration:underline;
}

.pie{text-align:center; font-size:.75rem; color:var(--suave); line-height:1.3}
.pie a{color:var(--suave)}
.pie .cliente-link{color:var(--cyan); font-weight:600}

:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
button:not(:disabled):active{transform:scale(.97)}
@media (hover:hover){
  .tengo-op:hover{color:var(--cyan)}
  .pedir:not(:disabled):hover, .mi-chat:hover{filter:brightness(1.12)}
}
/* Pantallas altas: lo que sobra se usa en letra y botones mas grandes, no en
   huecos. */
@media (min-height:800px){
  .prueba{gap:12px; padding-top:calc(16px + env(safe-area-inset-top))}
  .marca-sitio{font-size:1.7rem}
  .marca-sitio img{height:28px}
  .cabeza h1{font-size:2.25rem}
  .oferta{font-size:.875rem}
  .social{font-size:.875rem; margin-top:8px}
  .momento{gap:8px}
  .reclama{font-size:2.3rem}
  input,.pais{min-height:48px}
  .pedir{min-height:56px}
}
/* Pantallas bajas (Android con la barra del navegador, el navegador de
   Instagram/Facebook): se achica la cabeza; el video se achica solo. */
@media (max-height:720px){
  .prueba{gap:6px; padding-top:calc(6px + env(safe-area-inset-top))}
  .marca-sitio{font-size:1.25rem}
  .marca-sitio img{height:20px}
  .cabeza h1{font-size:1.6rem}
  .social{font-size:.75rem; margin-top:2px}
  .muestra{min-height:88px}
  .oferta{font-size:.75rem}
  .momento{gap:4px}
  .reclama{font-size:1.75rem}
}
@media (max-width:350px){
  .prueba{padding-left:12px; padding-right:12px}
  .tengo-op .suave{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* l.html, modo "directo al chat": tapa la landing mientras sale el PageView. */
.directo{position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:18px; padding:24px; background:var(--negro); text-align:center}
.directo p{font-family:var(--f-titulo); font-size:var(--fs-2xl); letter-spacing:.02em; color:var(--blanco)}
.directo a{color:var(--suave); min-height:44px; display:inline-flex; align-items:center}
.directo .giro{width:34px; height:34px; border-radius:50%; border:3px solid var(--linea); border-top-color:var(--rosa);
  animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}

/* Rescate por WhatsApp: cartel al medio de la pantalla, encima de todo. */
.hoja{position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.6)}
.caja-hoja{position:relative; width:100%; max-width:440px; display:flex; flex-direction:column; gap:12px;
  padding:24px 20px 12px; border-radius:18px;
  background:var(--oscuro); border:1px solid var(--linea); text-align:center}
.caja-hoja h2{font-family:var(--f-titulo); font-weight:400; font-size:var(--fs-2xl); line-height:1;
  letter-spacing:.02em; text-transform:uppercase; color:var(--blanco)}
.caja-hoja p{font-size:var(--fs-base); color:var(--texto)}
.caja-hoja b{color:#ff5c9b}
.cerrar-hoja{position:absolute; top:6px; right:6px; width:44px; height:44px; border:0; background:none;
  color:var(--suave); font-size:1.75rem; line-height:1; cursor:pointer}
.rescate-wpp{min-height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  text-decoration:none; background:#25d366; color:#04140a; font-size:1.125rem; font-weight:800}

/* ===== Propuesta clicks muertos (2026-10-21) — solo CSS, sin tocar ids ni JS ===== */
/* F1. Video mas bajo: menos superficie "muerta" y el formulario sube. */
.video-caja{flex-basis:min(190px, calc((100vw - 32px) * 728 / 1280))}
.muestra video{max-height:min(calc((100vw - 32px) * 728 / 1280), 190px)}
@media (max-height:720px){
  .video-caja{flex-basis:min(150px, calc((100vw - 32px) * 728 / 1280))}
  .muestra video{max-height:min(calc((100vw - 32px) * 728 / 1280), 150px)}
}
/* F2. "Que tenes" como 3 tarjetas tocables enteras (el label ya marca el radio). */
.tengo legend{font-size:1rem; margin-bottom:6px}
.tengo-opciones{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.tengo-op{position:relative; flex-direction:column; justify-content:center; gap:2px; min-height:64px; padding:8px 4px;
  border:1.5px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(255,255,255,.05);
  text-align:center; font-size:.9375rem; line-height:1.15}
.tengo-op input{position:absolute; opacity:0; width:1px; height:1px}
.tengo-op > span{display:flex; flex-direction:column; align-items:center; gap:2px}
.tengo-op i{font-style:normal; font-size:1.35rem; line-height:1}
.tengo-op .suave{font-size:.6875rem}
.tengo-op:has(input:checked){border-color:var(--cyan); background:var(--cyan-fondo); color:var(--blanco);
  box-shadow:0 0 0 1px var(--cyan) inset}
.tengo-op:has(input:focus-visible){outline:2px solid var(--cyan); outline-offset:2px}
.tengo-op:active{transform:scale(.97)}
fieldset.tengo[aria-invalid="true"] .tengo-op, .tengo:has(.linea.mal) .tengo-op{border-color:var(--rojo)}
@media (max-width:350px){ .tengo-op .suave{display:none} }
/* F3. Titulos que parecian boton: sin brillo animado y "Pedi tus 2 horas" como subtitulo, no como CTA. */
.oferta-destacada{animation:none}
.reclama{font-size:1.5rem; margin-top:2px}
@media (min-height:800px){ .reclama{font-size:1.7rem} }
/* F4. Respuesta visible mientras abre el chat (el boton ya recibe aria-busy desde prueba.js). */
.pedir[aria-busy="true"]{display:flex; align-items:center; justify-content:center; gap:10px}
.pedir[aria-busy="true"]::before{content:""; width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(4,20,10,.25); border-top-color:#04140a; animation:giro .8s linear infinite}
/* F5. Links chicos del pie y del legal con area de toque mas grande. */
.nota-chat a, .pie a{display:inline-block; padding:6px 2px}

/* ===== Email opcional (2026-10-22): con el campo visible, el boton sigue arriba del pliegue en 360x640 ===== */
@media (max-height:720px){
  .prueba:has(#campoEmail:not([hidden])) .video-caja{flex-basis:min(118px, calc((100vw - 32px) * 728 / 1280))}
  .prueba:has(#campoEmail:not([hidden])) .muestra video{max-height:min(calc((100vw - 32px) * 728 / 1280), 118px)}
  .prueba:has(#campoEmail:not([hidden])) .tengo-op{min-height:56px; padding-top:6px; padding-bottom:6px}
  #campoEmail .linea:empty{min-height:0}
}