@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Syne:wght@600;700;800&display=swap');

:root {
  --challenge-ink:#07111f;
  --challenge-panel:#0d1a2d;
  --challenge-paper:#f4f1e8;
  --challenge-cyan:#17c9ed;
  --challenge-pink:#ff3da7;
  --challenge-orange:#ff7a1a;
  --challenge-purple:#a97bff;
}

html,body { font-family:'Manrope',sans-serif!important; }
body {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 8% 12%,rgba(255,61,167,.2),transparent 30rem),
    radial-gradient(circle at 88% 16%,rgba(23,201,237,.17),transparent 28rem),
    var(--challenge-ink)!important;
  background-size:44px 44px,44px 44px,auto,auto,auto!important;
}

.wrap { position:relative; max-width:720px!important; }
.wrap::before {
  content:'persona 0.99';
  position:absolute;
  z-index:-1;
  top:100px;
  right:-72px;
  width:126px;
  height:164px;
  padding:4px 7px;
  border:2px solid var(--challenge-pink);
  color:var(--challenge-ink);
  background:linear-gradient(var(--challenge-pink) 24px,transparent 24px);
  font:800 .65rem/1 'Manrope',sans-serif;
}

.topbar { padding:8px 0 20px; border-bottom:1px solid rgba(255,255,255,.12); }
.logo-img { height:48px!important; }
.eyebrow { color:#30fd28!important; font-weight:800!important; }
h1,h2,.welcome .hi,.challenge__title { font-family:'Syne',sans-serif!important; letter-spacing:-.04em; }
h1 { font-size:clamp(2.5rem,8vw,4.7rem)!important; line-height:.94!important; margin:18px 0!important; }
h2 { font-size:clamp(1.7rem,5vw,2.6rem)!important; }
.lead { font-size:1.03rem!important; color:#bdc7d5!important; }

#viewLogin,#viewProfile {
  position:relative;
  margin-top:28px;
  padding:clamp(24px,5vw,44px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:26px;
  background:rgba(13,26,45,.9);
  box-shadow:12px 12px 0 var(--challenge-cyan);
}
#viewLogin::after,#viewProfile::after {
  content:'reto IA / live';
  position:absolute;
  top:-24px;
  left:-1px;
  padding:4px 8px;
  color:var(--challenge-ink);
  background:var(--challenge-cyan);
  font:800 .65rem/1 'Manrope',sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}

input,select { border-color:#2b3b51!important; border-radius:11px!important; background:#101f33!important; }
input:focus,select:focus { border-color:var(--challenge-cyan)!important; box-shadow:0 0 0 3px rgba(23,201,237,.12); }
.btn { border-radius:11px!important; font-family:'Manrope',sans-serif!important; font-weight:800!important; }
.btn-primary { background:#30fd28!important; color:var(--challenge-ink)!important; box-shadow:0 12px 30px rgba(48,253,40,.17); }
.btn-google { border:2px solid var(--challenge-ink)!important; box-shadow:6px 6px 0 var(--challenge-purple); }
.btn-ghost { background:var(--challenge-panel)!important; }

.cta-buhooo {
  border:2px solid var(--challenge-ink)!important;
  border-radius:18px!important;
  background:var(--challenge-orange)!important;
  color:var(--challenge-ink)!important;
  box-shadow:7px 7px 0 var(--challenge-pink);
}
.cta-buhooo .s { color:rgba(7,17,31,.72)!important; }
.cta-buhooo .go { color:var(--challenge-ink)!important; }

.welcome,.challenge,.cal,table {
  border:2px solid var(--challenge-ink)!important;
  border-radius:20px!important;
  background:var(--challenge-paper)!important;
  color:var(--challenge-ink)!important;
  box-shadow:8px 8px 0 var(--challenge-pink);
}
.welcome { background:var(--challenge-purple)!important; box-shadow-color:var(--challenge-cyan); }
.welcome .city,.challenge__desc,.cal .month-name,table th,table td { color:rgba(7,17,31,.72)!important; }
.stat { border-color:rgba(7,17,31,.18)!important; background:rgba(255,255,255,.45)!important; }
.stat .n { color:var(--challenge-ink)!important; }
.stat .l { color:rgba(7,17,31,.65)!important; }
.rtab,.chip,.depto-btn { border-color:#2b3b51!important; background:var(--challenge-panel)!important; }
.rtab.active,.chip.active,.depto-btn.sel { border-color:#30fd28!important; background:#30fd28!important; color:var(--challenge-ink)!important; }
.trial-banner.ok { background:rgba(48,253,40,.15)!important; }
.trial-banner.warn { background:rgba(255,122,26,.17)!important; }
.trial-banner.bad { background:rgba(255,61,167,.16)!important; }
.foot { padding-top:18px; }

/* Cámara y resultado */
#setup,#result {
  position:relative;
  margin-block:auto!important;
  padding:clamp(24px,5vw,44px)!important;
  border:1px solid rgba(255,255,255,.18);
  border-radius:26px;
  background:rgba(13,26,45,.94);
  box-shadow:12px 12px 0 var(--challenge-cyan);
}
#setup::before {
  content:'pose 0.98';
  position:absolute;
  right:24px;
  top:20px;
  width:88px;
  height:112px;
  padding:3px 6px;
  border:2px solid var(--challenge-pink);
  color:var(--challenge-ink);
  background:linear-gradient(var(--challenge-pink) 20px,transparent 20px);
  font:800 .62rem/1 'Manrope',sans-serif;
}
#setup h1 { max-width:10ch; }
.notice { border:0!important; background:var(--challenge-purple)!important; color:var(--challenge-ink)!important; }
.gating { border-color:var(--challenge-pink)!important; background:rgba(255,61,167,.14)!important; }
#live { background:#02060c!important; }
#localVideo { border-color:var(--challenge-cyan)!important; box-shadow:7px 7px 0 var(--challenge-pink); }
.count-box .n,#result .big { color:#30fd28!important; font-family:'Syne',sans-serif!important; }
.stage.up { background:var(--challenge-purple)!important; color:var(--challenge-ink)!important; }
.stage.down { background:#30fd28!important; }
#result .card { border:0!important; background:var(--challenge-paper)!important; color:var(--challenge-ink)!important; }

@media (max-width:760px) {
  .wrap::before { display:none; }
  #viewLogin,#viewProfile,#setup,#result { box-shadow:7px 7px 0 var(--challenge-cyan); }
  #setup { margin:18px!important; width:calc(100% - 36px)!important; }
  #setup::before { width:64px; height:84px; opacity:.72; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}