/* Páginas internas do site (conta, ajuda, termos): o mesmo escuro, a mesma letra e o mesmo degradê da página inicial. Só escuro. */
:root{
  --bg:#030407;--panel:#0A0D15;--field:#0C0F18;--ink:#F5F6FA;--ink-2:#AEB4C7;--ink-3:#7E8599;--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.16);
  --grad:linear-gradient(98deg,#8B6CFF 0%,#4C7BFF 50%,#3CC8FF 100%);--ok:#3DDC97;--warn:#F5B547;--err:#FF6B6B;--focus:#8DB7FF;--link:#8DB7FF;
  --f:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--f);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
a{color:var(--link);font-weight:600;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* topo */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;height:64px;padding:0 clamp(16px,4vw,48px);border-bottom:1px solid var(--line);background:rgba(3,4,7,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top .lg{display:block;width:120px;height:auto}
.top .r{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:14px}
.top .r a{color:var(--ink-2);font-weight:600}
.langs{height:32px;max-width:160px;color-scheme:dark;padding:0 10px;border-radius:16px;border:0;font:inherit;font-size:12.5px;color:var(--ink);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer}
.langs option{color:var(--ink);background:#10131D}
@media (max-width:560px){.top .r .hide-s{display:none}.top .lg{width:104px}}
/* no celular, o topo encolhe em vez de alargar a página */
.top>a{flex:none}
.top .r{min-width:0}
.langs{min-width:0}

main{flex:1;width:100%}
.wrap{width:min(100% - 32px,720px);margin:0 auto;padding:48px 0 72px}
.wrap.narrow{width:min(100% - 32px,480px)}

/* formulários */
.form{display:grid;gap:18px}
.form h1,.doc h1{font-size:clamp(30px,6vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.sub{font-size:16px;line-height:1.5;color:var(--ink-2)}
.fl{display:grid;gap:8px}
.fl label{font-size:14px;font-weight:650}
.in{position:relative;display:flex;align-items:center}
.in input{width:100%;height:52px;padding:0 16px;border:0;border-radius:12px;background:var(--field);box-shadow:inset 0 0 0 1px var(--line-2);font:16px var(--f);color:var(--ink);outline:none}
.in input:focus{box-shadow:inset 0 0 0 2px var(--focus),0 0 0 4px rgba(141,183,255,.18)}
.in input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--err)}
.in .eye{position:absolute;right:10px;height:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;font:650 13px var(--f);color:var(--ink-2);cursor:pointer}
.msg{font-size:13.5px;line-height:1.4;color:var(--err)}
.msg:empty{display:none}
.hint{font-size:13px;color:var(--ink-3)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:520px){.plans{grid-template-columns:1fr}}
.pl{display:grid;gap:4px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:13px;color:var(--ink-2);cursor:pointer;text-align:left;background:transparent;font-family:var(--f)}
.pl b{font-size:15px;color:var(--ink)}
.pl[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #8B6CFF;background:rgba(104,66,253,.12)}
.ck{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.ck input{width:20px;height:20px;margin:1px 0 0;accent-color:#8B6CFF;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:999px;font:700 16px/1.2 var(--f);text-decoration:none;cursor:pointer}
.btn:hover{text-decoration:none}
.btn.pri{background:#fff;color:#05060B}
.btn.gh{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink)}
.btn.w{width:100%}
.btn[disabled]{opacity:.6;cursor:default}
/* RES-679: Continuar com Google */
.gsl{display:grid;gap:12px}
.gsl:empty{display:none}
.or{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-3)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line-2)}
.links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14.5px}
.tiny{font-size:13px;line-height:1.5;color:var(--ink-3)}
.alert{padding:14px 16px;border-radius:12px;font-size:14.5px;line-height:1.5}
.alert:empty{display:none}
.alert.err{background:rgba(255,107,107,.1);box-shadow:inset 0 0 0 1px rgba(255,107,107,.35)}
.alert.ok{background:rgba(61,220,151,.08);box-shadow:inset 0 0 0 1px rgba(61,220,151,.3)}
.alert.warn{background:rgba(245,181,71,.08);box-shadow:inset 0 0 0 1px rgba(245,181,71,.32)}
.card{display:grid;gap:18px;justify-items:center;text-align:center}
.card .sub b{color:var(--ink)}
.badge{display:grid;place-items:center;width:76px;height:76px;border-radius:50%}
.badge .i{width:36px;height:36px;stroke-width:2}
.badge.ok{background:rgba(61,220,151,.14);color:var(--ok)}
.badge.mail{background:rgba(139,108,255,.16);color:#B4A4FF}
.who{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-3)}
.who button{border:0;background:transparent;font:600 13.5px var(--f);color:var(--link);cursor:pointer}

/* assinar */
.offer{display:grid;gap:12px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;background:transparent;font-family:var(--f);color:var(--ink);text-align:left}
.opt[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #8B6CFF;background:rgba(104,66,253,.12)}
.opt b{font-size:17px}
.opt small{display:block;margin-top:4px;font-size:13.5px;color:var(--ink-2)}
.opt .pr{font-size:20px;font-weight:800;white-space:nowrap}
.opt .pr small{display:inline;font-size:13px;font-weight:600}
.opt .pr .fxv{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--ink-2);text-align:right}
.pl .gm{font-style:normal;font-size:12px;font-weight:600;color:#B9A6FF}
.fxn{margin-top:8px}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.ways{grid-template-columns:1fr}}
.way{padding:14px 16px;border-radius:12px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.way b{display:block;font-size:14.5px}
.way p{margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.today{display:flex;justify-content:space-between;font-size:15px;color:var(--ink-2)}
.today b{color:var(--ink)}

/* textos (termos, ajuda) */
.doc{display:grid;gap:22px}
.doc .note{justify-self:start;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;color:#f0b46c;background:#2a2113;box-shadow:inset 0 0 0 1px #5c4527}
.doc section{display:grid;gap:8px}
.doc h2{font-size:19px;font-weight:700;letter-spacing:-.01em}
.doc p{font-size:16px;line-height:1.6;color:var(--ink-2)}
.faq{display:grid;gap:10px}
.faq details{border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:12px;padding:18px 20px;font-size:17px;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-3);font-weight:400;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 20px 18px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.contact{display:grid;gap:14px;padding:22px;border-radius:16px;background:linear-gradient(135deg,rgba(104,66,253,.16),rgba(60,200,255,.08));box-shadow:inset 0 0 0 1px var(--line-2)}
.contact .row{display:flex;flex-wrap:wrap;gap:10px}

/* rodapé */
.foot{border-top:1px solid var(--line);padding:28px clamp(16px,4vw,48px) 40px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:13.5px;color:var(--ink-3)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a{color:var(--ink-2);font-weight:500}
/* Baixar o RespoTV (06/10): um cartão por aparelho */
.dl .devs{display:grid;gap:14px}
.dl .dev{display:grid;gap:10px;padding:20px;border-radius:16px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.dl .dev h2{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.dl .dev p{margin:0}
.dl .soon{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:0;color:#B4A4FF;background:rgba(139,108,255,.14)}
.dl .how summary{cursor:pointer;font-size:15px;font-weight:650;color:var(--link)}
.dl .how ol{margin:10px 0 0;padding-left:22px;display:grid;gap:8px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.dl .how b{color:var(--ink);word-break:break-all}
.faq details p .btn{min-height:44px;font-size:15px}
