:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height:100%; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#000; color:#fff; }

/* video fondo */
#bgVideo { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:block; }
.bg-dim  { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1; pointer-events:none; }

/* contenido por encima del video */
body > *:not(#bgVideo):not(.bg-dim):not(.thanks) { position:relative; z-index:2; }

/* pase */
.wrap { min-height:100svh; display:grid; place-items:center; padding:16px; }
.card { width:min(760px, 94vw); background:#0b0b0b; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.6); padding:20px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo { font-weight:800; letter-spacing:.2em; font-size:14px; opacity:.85 }
.chip { background:#151515; border-radius:10px; height:26px; min-width:60px; }
.small.chip { height:20px; min-width:40px; }

.potential { margin:14px 0 10px 0; display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.pill { display:flex; gap:6px; align-items:baseline; padding:7px 10px; }
.k { text-transform:uppercase; font-size:10px; letter-spacing:.14em; opacity:.75; }
.v { font-weight:700; white-space:nowrap; }
.arrow { opacity:.85 }

.form label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.12em; opacity:.7; margin-bottom:8px; }
.form .row { gap:8px; }
input[type="email"] { flex:1; padding:10px 12px; border-radius:10px; outline:none; border:none; background:#ffffff; color:#000; }
button { padding:10px 16px; border:none; border-radius:10px; background:#fff; color:#000; font-weight:700; cursor:pointer; }
button:active { transform: scale(.98); }
.hint { font-size:12px; opacity:.65; margin-top:6px; }

/* pantalla blanca final */
.thanks { position:fixed; inset:0; background:#fff; color:#000; z-index:10000; }
.thanks .center { min-height:100%; display:grid; place-items:center; text-align:center; }
.thanks h1 { font-size: clamp(28px, 5vw, 42px); margin:0 0 8px 0; }
.thanks p { margin:0; opacity:.7; }


/* === Seamless dual-video & consents === */
#loopVideo{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:block; }
.bg-dim{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1; pointer-events:none; }
#fullVideo{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:none; opacity:0; }

/* Content above background videos */
body > *:not(#loopVideo):not(.bg-dim):not(#fullVideo):not(.thanks){ position:relative; z-index:2; }

/* Consents + error */
.consents{ margin-top:8px; display:flex; flex-direction:column; gap:6px; font-size:12px; }
.ck{ display:flex; gap:8px; align-items:center; opacity:.9; }
.ck a{ color:#fff; text-decoration:underline; }
.error{ color:#fca5a5; font-size:12px; margin-top:6px; }
/* === end patch === */

/* Brand label above potential row */
.brand{ font-weight:800; letter-spacing:.18em; font-size:12px; opacity:.9; text-transform:uppercase; margin:6px 0 2px 0; }

.thanks{ display:none !important; }


/* === TV overlay (text inside screen) — v2 === */

.tv-frame { border-radius: 18px; padding: 10px; background: #0a0a0a; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.tv-glass { position: relative; border-radius: 14px; background: #000; overflow: hidden;
            width: 100%; aspect-ratio: 16 / 9; }
#tvBg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }

.scanlines { position:absolute; inset:0; background:
             repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px,
                                                  rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
             mix-blend-mode: overlay; pointer-events:none; opacity:.12; z-index:3; }


/* === TV overlay FULLSCREEN with text inside green area === */

.tv-frame { position:absolute; inset:0; }
.tv-glass { position:absolute; inset:0; background:#000; overflow:hidden; }
#tvBg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }

.scanlines { position:absolute; inset:0; background:
             repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px,
                                                  rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
             mix-blend-mode: overlay; pointer-events:none; opacity:.10; z-index:3; }
/* keep pass/content layering from before */
body > *:not(#loopVideo):not(.bg-dim):not(#fullVideo):not(#tv){ position:relative; z-index:2; }

/* === TV mode: hide everything else, prevent scroll === */
html.tv-on, html.tv-on body { overflow: hidden !important; height: 100vh !important; }
html.tv-on body { margin: 0 !important; }

/* fine-tune tv text sizing */


/* Text inside TV */

@keyframes crtFlicker { 0%{opacity:.98;} 93%{opacity:.98;} 94%{opacity:.92;} 96%{opacity:1;} 100%{opacity:.98;} }
.crt-noise { position:absolute; inset:0; pointer-events:none; z-index:4;
             background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.02) 0deg 10deg, rgba(0,0,0,0) 10deg 20deg);
             mix-blend-mode: overlay; opacity:.12; animation: noiseShift 1.2s linear infinite; }
@keyframes noiseShift { from{ transform:translate3d(0,0,0);} to{ transform:translate3d(0,0,0) rotate(360deg);} }

/* TV text (older CRT look, still readable) */

@keyframes crtFlicker { 0%{opacity:.96;} 92%{opacity:.96;} 94%{opacity:.90;} 96%{opacity:1;} 100%{opacity:.96;} }

/* TV text tuned */
.tv-text { position:absolute; z-index:2; margin:0; white-space:pre-wrap; overflow:hidden;
           font: 800 13px/1.32 "JetBrains Mono","SF Mono","Roboto Mono",ui-monospace,monospace;
           color:#f1f1f1; letter-spacing:-0.18px;
           text-shadow: 0 1px 0 #000, -1px 0 0 rgba(255,60,60,.10), 1px 0 0 rgba(60,160,255,.10),
                        0 0 10px rgba(255,255,255,.10);
           filter: contrast(1.05) saturate(1.02) brightness(.98);
           opacity:.97; animation: crtFlicker 2.3s infinite steps(1,end); }
@keyframes crtFlicker { 0%{opacity:.97;} 92%{opacity:.97;} 94%{opacity:.91;} 96%{opacity:1;} 100%{opacity:.97;} }
/* Fallback green background if video not ready */




/* TV overlay: force fixed fullscreen and new-page feel */
html.tv-on, html.tv-on body { overflow: hidden !important; height: 100vh !important; }
html.tv-on body { margin: 0 !important; }
html.tv-on body > *:not(#tv) { display: none !important; }
#tv { position: fixed !important; top:0; left:0; right:0; bottom:0; z-index: 100000 !important; pointer-events: none; }

/* layer content above bg videos */
body > *:not(#loopVideo):not(#fullVideo):not(#tv){ position:relative; z-index:2; }

/* TV overlay fullscreen + CRT */
#tv{ position:fixed; inset:0; z-index:100000; pointer-events:none; }
#tvBg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.tv-text{ position:absolute; z-index:2; margin:0; white-space:pre-wrap; overflow:hidden;
          font:800 13px/1.32 "JetBrains Mono","SF Mono","Roboto Mono",ui-monospace,monospace;
          color:#f1f1f1; letter-spacing:-0.18px;
          text-shadow:0 1px 0 #000, -1px 0 0 rgba(255,60,60,.10), 1px 0 0 rgba(60,160,255,.10),
                      0 0 10px rgba(255,255,255,.10);
          filter:contrast(1.05) saturate(1.02) brightness(.98);
          opacity:.97; animation:crtFlicker 2.3s infinite steps(1,end); display:none; }
@keyframes crtFlicker{0%{opacity:.97;}92%{opacity:.97;}94%{opacity:.91;}96%{opacity:1;}100%{opacity:.97;}}
.crt-noise{ position:absolute; inset:0; pointer-events:none; z-index:4;
            background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.02) 0deg 10deg, rgba(0,0,0,0) 10deg 20deg);
            mix-blend-mode:overlay; opacity:.12; animation:noiseShift 1.2s linear infinite; }
@keyframes noiseShift{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,0,0) rotate(360deg);}}
.scanlines{ position:absolute; inset:0; background:
            repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px,
                                                 rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
            mix-blend-mode:overlay; pointer-events:none; opacity:.10; z-index:3; }

/* submit loading state */
button[disabled]{ opacity:.75; cursor:not-allowed; }
button.loading::after{
  content:"";
  display:inline-block;
  width:0.85em; height:0.85em; margin-left:0.5em;
  border:2px solid currentColor; border-right-color: transparent; border-radius:50%;
  vertical-align:-0.1em; animation: btnSpin .65s linear infinite;
}
@keyframes btnSpin{ to { transform: rotate(360deg); } }