/* ===== TOKENS / TEMA (apenas login) ===== */
:root{
  --bg1:#0b0f14; --bg2:#0b1f29;
  --hud:#2fd1ff; --hud-2:#56e0ff; --hud-soft:rgba(47,209,255,.18);
  --ok:#34d399; --err:#ff4d5e;
  --glass:rgba(15,25,35,.55); --stroke:rgba(255,255,255,.12);
  --cta1:#ff7a1a; --cta2:#fb5904;
  --text:#eaf6ff; --text-2:#bfefff;
  --radius:16px; --padX:24px; --padY:28px;
  --arc-y: 0vh;
}
:root[data-theme="friday"]{
  --bg1:#0c0917; --bg2:#19112a;
  --hud:#a977ff; --hud-2:#caa7ff; --hud-soft:rgba(169,119,255,.22);
  --glass:rgba(26,14,44,.5); --stroke:rgba(255,255,255,.14);
  --cta1:#b689ff; --cta2:#8e5bff;
}

/* ===== BASE da página de login (aproveita tipografia do styles.css) ===== */
html,body{height:100%}
body.login-page{
  margin:0; color:var(--text);
  font:500 16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding:calc(env(safe-area-inset-top,0px)) calc(env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px)) calc(env(safe-area-inset-left,0px));
  background:
    radial-gradient(1200px 600px at 70% 20%, #12202b 0%, transparent 55%),
    radial-gradient(900px 500px at 20% 80%, #101b23 0%, transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  display:flex; flex-direction:column; min-height:100svh;
  overflow-x:hidden; overflow-y:auto;
}

/* grade de fundo */
.grid{
  position:fixed; inset:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(transparent 31px, rgba(255,255,255,.06) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.06) 32px);
  background-size:32px 32px;
  mask: radial-gradient(ellipse at center, #000 55%, transparent 100%);
  animation: drift 18s linear infinite;
}
@keyframes drift{ to{ transform:translate3d(-32px,-32px,0) } }

/* ===== HUD / ANIMAÇÃO ===== */
.arc-wrap{ position:fixed; inset:0; display:grid; place-items:center; pointer-events:none; transform: translateY(var(--arc-y)); will-change: transform; }
.arc{ width:min(52vmin,520px); opacity:.22; filter:drop-shadow(0 0 24px var(--hud-soft)); animation:spin 18s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.arc-wrap::after{
  content:""; position:absolute; width:min(52vmin,520px); height:min(52vmin,520px);
  border-radius:50%; background:conic-gradient(var(--hud) 0 15deg, transparent 15deg);
  animation:radarSpin 6s linear infinite; opacity:.15;
}
@keyframes radarSpin{ to{ transform:rotate(360deg) } }

/* ===== CARD ===== */
.wrap{
  position:relative; width:min(520px,92vw);
  margin:10vh auto 0; padding:var(--padY) var(--padX) 24px; border-radius:var(--radius);
  background:linear-gradient(to bottom right, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(8px) saturate(120%); -webkit-backdrop-filter:blur(8px) saturate(120%);
  isolation:isolate; animation:hudGlow 5s ease-in-out infinite;
}
@keyframes hudGlow{
  0%,100%{ box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08) }
  50%{    box-shadow:0 14px 38px rgba(0,0,0,.42), 0 0 24px var(--hud-soft), inset 0 0 0 1px rgba(255,255,255,.1) }
}
.wrap::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(90deg, transparent, var(--hud), transparent);
  background-size:200% 100%; opacity:.12; animation:borderFlow 6s linear infinite; pointer-events:none;
}
@keyframes borderFlow{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.hud-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.logo{ display:flex; align-items:center; gap:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; font-size:.9rem; color:#c6f3ff; text-shadow:0 0 10px rgba(47,209,255,.25); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--hud); box-shadow:0 0 14px var(--hud); }
.ts{ font-size:.7rem; color:var(--text-2) }

/* ===== TIPOGRAFIA ===== */
h1{
  margin:8px 0 14px;
  font:900 clamp(1.4rem, 2.6vw, 1.7rem)/1.2 "Segoe UI", Roboto, ui-sans-serif;
  background:linear-gradient(90deg, var(--hud), #fff, var(--hud-2));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; animation:textShine 5s linear infinite; letter-spacing:.01em;
}
@keyframes textShine{ to{ background-position:200% center } }

/* ===== FORM ===== */
.field{ position:relative; margin:10px 0 10px; }
.field input{
  box-sizing:border-box; width:100%; height:50px; padding:0 14px 0 46px;
  background:var(--glass); color:#e6faff; border:1px solid var(--stroke); border-radius:12px; outline:none;
  box-shadow:inset 0 0 0 1px var(--hud-soft);
  transition: box-shadow .2s, border-color .2s; caret-color:var(--hud); font-size:1rem;
}
.field input::placeholder{ color:#9ec8d6 }
.field input:focus{ border-color:var(--hud); box-shadow:inset 0 0 0 1px var(--hud-soft), 0 0 22px var(--hud-soft) }
.field input:focus-visible{ outline:2px solid var(--hud); outline-offset:2px }
.lock{ position:absolute; left:14px; top:50%; transform:translateY(-216%); width:18px; height:18px; opacity:.9; filter:drop-shadow(0 0 6px var(--hud-soft)); pointer-events:none; animation:lockPulse 3.2s ease-in-out infinite; }
@keyframes lockPulse{ 0%,100%{ filter:drop-shadow(0 0 6px var(--hud-soft)) } 50%{ filter:drop-shadow(0 0 12px var(--hud-soft)) } }
.scan{ position:absolute; left:10px; right:10px; top:0; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--hud), transparent); opacity:.0; pointer-events:none; }
.field input:focus + .scan{ animation:scan 1.9s linear infinite; opacity:.9 }
@keyframes scan{ 0%{transform:translateY(8px)} 50%{transform:translateY(40px)} 100%{transform:translateY(8px)} }

/* ===== CTAs ===== */
.btn{
  position:relative; overflow:hidden; width:100%;
  padding:13px; border:0; border-radius:12px; cursor:pointer; margin-top:12px;
  background:linear-gradient(180deg, var(--cta1), var(--cta2)); color:#fff; font-weight:900; letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(251,89,4,.35), inset 0 -2px 0 rgba(0,0,0,.2);
  transition:transform .06s ease, filter .2s ease; font-size:1rem;
}
.btn:hover{ filter:brightness(1.06) saturate(1.08) }
.btn:active{ transform:translateY(1px) }
.btn svg{ margin-right:6px; vertical-align:-2px }

.cta-row{ display:flex; justify-content:center; margin-top:18px }
.btn-assinar{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; font:700 .92rem/1 ui-sans-serif,system-ui; text-decoration:none;
  color:var(--hud); background:rgba(47,209,255,.06);
  border:1px solid var(--hud); border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.22), 0 0 0 1px rgba(47,209,255,.08) inset;
  transition:filter .2s, transform .12s, background .2s;
}
.btn-assinar:hover{ background:var(--hud); color:#0b0f14; filter:brightness(1.05) }
.btn-assinar:active{ transform:translateY(1px) }
.btn-assinar svg{ width:16px; height:16px }
.btn-assinar::before{
  content:""; position:absolute; inset:-8px; border-radius:inherit; z-index:-1;
  background:radial-gradient(60% 80% at 50% 50%, var(--hud-soft), transparent 70%); opacity:.7;
}

.msg{ margin-top:10px; min-height:22px; font-size:.92rem }
.ok{ color:var(--ok); text-shadow:0 0 8px rgba(52,211,153,.35) }
.err{ color:var(--err) }
.shake{ animation:shake .35s ease }
@keyframes shake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-6px) } 50%{ transform:translateX(6px) } 75%{ transform:translateX(-3px) } }

.hud-lines{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; overflow:hidden; }
.hud-lines::before, .hud-lines::after{
  content:""; position:absolute; inset:0; border-radius:inherit; border:1px dashed rgba(255,255,255,.12); mask:linear-gradient(#000 70%, transparent);
}
.hud-lines::after{ inset:10px; border-style:solid; border-width:0 0 1px 0; border-color:rgba(255,255,255,.2); transform:skewX(-6deg) }

/* Marca d’água (pavão) à direita, como nas demais páginas */
.brand-mark{
  position:fixed;
  right:-80px;                 /* empurra um pouco pra fora */
  top:50%;
  transform:translateY(-50%);
  width:min(38vw,520px);
  aspect-ratio:1/1;
  background:url("/assets/img/pavao-misterioso.png") center/contain no-repeat;
  opacity:.08;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.35));
  pointer-events:none;
  z-index:0;                   /* atrás do card */
}

/* garante que o card fique acima */
.wrap{ position:relative; z-index:1; }

/* Esconde no mobile (opcional) */
@media (max-width:1024px){
  .brand-mark{ display:none; }
}


/* ===== RESPONSIVO ===== */
@media (max-width:1024px){
  .wrap{ margin:8vh auto 0 }
  .arc{ width:min(58vmin,520px) }
  .arc-wrap::after{ width:min(58vmin,520px); height:min(58vmin,520px) }
  :root{ --arc-y: 12vh; }
}
@media (max-width:768px){
  :root{ --radius:14px; --padX:16px; --padY:18px; --arc-y: 16vh; }
  body.login-page{ font-size:15.5px }
  .wrap{ width:min(560px,94vw) }
  .hud-top{ flex-wrap:wrap; gap:6px }
  h1{ font-size:1.22rem }
  .field input{ height:50px; font-size:.96rem; border-radius:11px; margin-top:10px; }
  .btn{ height:50px; font-size:.96rem; border-radius:11px; letter-spacing:.01em }
  .arc{ width:64vmin } .arc-wrap::after{ width:64vmin; height:64vmin }
  .cta-row{ margin-top:16px }
}
@media (max-width:480px){
  :root{ --radius:12px; --padX:12px; --padY:14px; --arc-y: 24vh; }
  body.login-page{ font-size:14.5px }
  .wrap{
    width:92vw; margin:5vh auto 0;
    box-shadow:0 8px 20px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.07);
    transform:scale(.96); transform-origin:top center;
  }
  .wrap::before{ opacity:.05 }
  .grid{ opacity:.22 }
  .arc{ width:68vmin } .arc-wrap::after{ width:68vmin; height:68vmin; opacity:.07 }
  h1{ font-size:1.12rem; margin:6px 0 12px; letter-spacing:.004em; animation:textShine 9s linear infinite }
  .field{ margin:8px 0 }
  .field input{ height:44px; font-size:.92rem; border-radius:10px }
  .lock{ width:15px; height:15px; transform:translateY(-228%) }
  .btn{ height:44px; padding:0 12px; font-size:.9rem; border-radius:10px; font-weight:800; letter-spacing:.005em;
        box-shadow:0 6px 14px rgba(251,89,4,.22), inset 0 -2px 0 rgba(0,0,0,.16) }
  .cta-row{ margin-top:14px }
  .btn-assinar{ padding:8px 12px; font-size:.86rem }
  .btn-assinar svg{ width:14px; height:14px }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}


.hero h2{
  text-shadow:0 0 12px rgba(47,209,255,.45);
}
.btn-cta{
  background:linear-gradient(90deg,#2ee59d,#2fd1ff);
  background-size:200% 200%;
  animation:gradientShift 6s ease infinite;
}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.card:hover{
  border-color:rgba(47,209,255,.4);
  box-shadow:0 0 12px rgba(47,209,255,.25);
  transform:translateY(-2px);
}


/* Destaque gradiente nos termos-chave */
.hl{
  background:linear-gradient(90deg,#2ee59d,#2fd1ff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:800;
  text-shadow:0 0 10px rgba(47,209,255,.18);
}
.nowrap{ white-space:nowrap; }


.btn-assinar{background:linear-gradient(90deg,#2ee59d,#2fd1ff);box-shadow:0 8px 24px rgba(47,209,255,.22)}
.btn-assinar:hover{filter:brightness(1.06)}
.btn-assinar:active{transform:translateY(1px)}


.expect{display:flex;align-items:center;gap:8px}
.expect-bar{width:160px;height:10px;border-radius:8px;background:#13222f}
.expect-fill{height:100%;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,#ffb703,#2ee59d,#2fd1ff);border-radius:8px;transition:width .6s}
.expect-val{min-width:38px;text-align:right;font-weight:800;color:#cfeaff}


.card{transition:transform .15s,box-shadow .15s,border-color .15s}
.card:hover{transform:translateY(-2px);border-color:rgba(47,209,255,.35);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.card:focus-within{outline:2px solid rgba(47,209,255,.4);outline-offset:2px}

.hero{max-width:920px;margin:0 auto;padding:28px 22px}
.hero h1{line-height:1.15;margin:6px 0 14px}
.hero .kicker{letter-spacing:.18em;opacity:.8}


.hero p{max-width:820px;margin:0 auto 14px}
.hl-underline{
  background:
    linear-gradient(90deg,#2ee59d,#2fd1ff) bottom/100% 2px no-repeat;
  font-weight:800;
}

.btn-assinar{
  background:linear-gradient(90deg,#2ee59d,#2fd1ff);
  background-size:200% 200%;
  box-shadow:0 10px 26px rgba(47,209,255,.22);
  animation:ctaShift 6s ease infinite;
}
.btn-login{background:transparent;border:1px solid rgba(125,211,252,.28)}
@keyframes ctaShift{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

.hero-benefits{display:flex;gap:14px;justify-content:center;margin-top:10px;flex-wrap:wrap;color:#cfe3f7;font-weight:600}
.hero-benefits .b{display:flex;align-items:center;gap:6px}
.hero-benefits .b i{width:8px;height:8px;border-radius:50%;background:#2fd1ff;box-shadow:0 0 8px #2fd1ff}


/* BIA magra no “vão” à esquerda dos cards */
.features{ position:relative; z-index:1 }

/* pseudo-elemento decorativo, não interfere no layout */
.features::before{
  content:"";
  position:absolute;
  bottom:-20px;                                /* ajuste fino vertical */
  left: calc(50% - min(1280px, 90vw)/2);       /* borda esquerda do trilho (90%/1280px) */
  width:369px;
  height:944px;
  background:url("/assets/img/biabg.png") left bottom / contain no-repeat;
  pointer-events:none;
  z-index:0;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.45));
  opacity:.98;
}

/* garante que os cards fiquem acima da arte */
.features > *{ position:relative; z-index:1 }

/* Tablets: reduz para não encostar nos cards */
@media (max-width:1200px){
  .features::before{ width:300px; height:auto; aspect-ratio:369/944; opacity:.9 }
}

/* Mobile: oculta */
@media (max-width:768px){
  .features::before{ display:none }
}


.features{
  position:relative;
  z-index:2;
  overflow:visible;
}

.features::before{
  content:"";
  position:absolute;
  bottom:-20px;
  left: calc(50% - (min(1280px, 90vw) / 2));
  width:369px;
  height:944px;
  background: url("/assets/img/biabg.png") left bottom / contain no-repeat;
  pointer-events:none;
  z-index:3; /* sobe acima do fundo e atrás dos cards */
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.45));
  opacity:.98;
}

@media (max-width:1200px){
  .features::before{ width:300px; height:auto; aspect-ratio:369/944; opacity:.9 }
}
@media (max-width:768px){
  .features::before{ display:none }
}