html{color-scheme:dark}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* ============================================================
   MIRA · landing — protótipo de referência
   Tema escuro único, herdado do produto. Todas as cores pintadas
   explicitamente: a página não empresta o fundo de nenhum host.
   ============================================================ */
:root{
  --abismo:#080a0d; --aco:#0f1319; --aco-2:#161b23; --aco-3:#1c232c;
  --borda:#232c38; --borda-tenue:#19202a;
  --tinta:#e9eef4; --tinta-2:#b9c4d1; --tenue:#8b97a6; --tenue-2:#808b9a;
  --laranja:#ff6b1f; --laranja-fosco:#ff8c4d;
  --verde:#3dd68c; --ambar:#ffb020; --vermelho:#ff5a5a;
  --raio:10px;
  --disp:'Barlow Condensed',ui-sans-serif,system-ui,sans-serif;
  --corpo:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --max:1180px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--abismo); color:var(--tinta);
  font-family:var(--corpo); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:64px 64px;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--disp); font-weight:700; line-height:1.05; text-wrap:balance; margin:0; letter-spacing:-.005em}
p{margin:0}
::selection{background:var(--laranja); color:#0b0d10}
:focus-visible{outline:2px solid var(--laranja); outline-offset:3px; border-radius:4px}

.env{max-width:var(--max); margin:0 auto; padding:0 24px}
.secao{padding:88px 0; border-top:1px solid var(--borda-tenue)}
.secao--solta{border-top:0}
.olho{font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--tenue-2); margin:0 0 18px}
.olho b{color:var(--laranja); font-weight:500}
.titulo{font-size:clamp(30px,4.2vw,46px); text-transform:uppercase}
.sub{color:var(--tinta-2); font-size:17px; max-width:62ch; margin-top:16px}
.sub b{color:var(--tinta); font-weight:600}

/* ---------- nota interna (remover ao publicar) ---------- */

/* ---------- topo ---------- */
.topo{position:sticky; top:0; z-index:50; background:rgba(8,10,13,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--borda-tenue)}
.topo .env{display:flex; align-items:center; gap:28px; height:62px}
.marca{display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; min-height:44px}
.marca span{display:block}
.marca .nome{font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:.14em; line-height:1}
.marca .desc{font-family:var(--mono); font-size:9px; letter-spacing:.2em; color:var(--tenue-2); text-transform:uppercase; margin-top:2px}
.reticula{width:22px; height:22px; flex:0 0 auto}
.navtop{display:flex; gap:26px; margin-left:auto; align-items:center}
.navtop a:not(.btn){font-size:13.5px; color:var(--tinta-2); text-decoration:none; transition:color .15s; padding:15px 0; line-height:1}
.navtop a:not(.btn):hover{color:var(--tinta)}
/* `Entrar` é BOTÃO, e não link de texto, e o motivo é o celular: abaixo de
   940px a regra `.navtop a:not(.btn){display:none}` some com todos os links, e
   sobrava só `Assinar`. Quem já é assinante abria a página no celular e não
   tinha por onde entrar. */
.navtop .entrar{padding-left:14px; padding-right:14px}

/* ---------- botões ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:14.5px; padding:13px 22px; border-radius:8px; text-decoration:none; border:1px solid transparent;
  min-height:44px; cursor:pointer; transition:background .15s,border-color .15s,transform .12s}
.btn--p{background:var(--laranja); color:#120802; border-color:var(--laranja)}
.btn--p:hover{background:var(--laranja-fosco); border-color:var(--laranja-fosco)}
.btn--s{background:transparent; color:var(--tinta); border-color:var(--borda)}
.btn--s:hover{border-color:var(--tenue); background:var(--aco)}
.btn--peq{padding:10px 16px; font-size:13px; min-height:44px}
.btn:active{transform:translateY(1px)}

/* ---------- herói ---------- */
.heroi{padding:76px 0 0; position:relative; overflow:hidden}
.heroi::before{content:""; position:absolute; inset:-30% 20% 40% 20%; background:radial-gradient(closest-side,rgba(255,107,31,.10),transparent 72%); pointer-events:none}
.heroi .env{position:relative}
.heroi h1{font-size:clamp(40px,6.6vw,74px); text-transform:uppercase; max-width:15ch}
.heroi h1 em{font-style:normal; color:var(--laranja)}
.heroi .sub{font-size:19px; margin-top:22px; max-width:64ch}
.acoes{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.garantia{font-family:var(--mono); font-size:12px; color:var(--tenue-2); margin-top:16px; letter-spacing:.02em}
.garantia span{color:var(--verde)}

/* moldura de captura */
.moldura{margin-top:52px; border:1px solid var(--borda); border-radius:12px; background:var(--aco); overflow:hidden; box-shadow:0 40px 90px -40px #000, 0 0 0 1px #ffffff08 inset}
.moldura .barra{display:flex; align-items:center; gap:7px; padding:9px 13px; border-bottom:1px solid var(--borda-tenue); background:var(--aco-2)}
.moldura .barra i{width:9px; height:9px; border-radius:50%; background:#2c3542; display:block}
.moldura .barra .url{font-family:var(--mono); font-size:11px; color:var(--tenue-2); margin-left:10px}
.moldura .rolo{overflow-x:auto; -webkit-overflow-scrolling:touch}
.moldura img{width:100%}
.arraste{display:none}
.legenda{font-family:var(--mono); font-size:11.5px; color:var(--tenue-2); margin-top:12px; letter-spacing:.02em}

/* ---------- faixa de prova ---------- */
.prova{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--borda-tenue); border-radius:var(--raio); overflow:hidden; background:var(--aco)}
.prova div{padding:22px 20px; border-right:1px solid var(--borda-tenue)}
.prova div:last-child{border-right:0}
.prova dt{font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:15px; letter-spacing:.02em; margin-bottom:5px}
.prova dd{margin:0; font-size:13.5px; color:var(--tenue); line-height:1.5}

/* ---------- as contas ---------- */
.contas{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:44px}
.conta{border:1px solid var(--borda-tenue); border-radius:var(--raio); background:var(--aco); padding:24px 24px 22px; display:flex; flex-direction:column; gap:12px}
.conta .rot{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tenue-2)}
.conta .num{font-family:var(--disp); font-weight:700; font-size:38px; letter-spacing:-.01em; line-height:1; font-variant-numeric:tabular-nums}
.conta .num small{font-size:19px; color:var(--tenue); font-weight:600}
.conta h3{font-size:18px; text-transform:uppercase}
.conta p{font-size:14.5px; color:var(--tenue); line-height:1.58}
.conta p b{color:var(--tinta-2); font-weight:600}
.conta .lei{margin-top:auto; padding-top:14px; border-top:1px dashed var(--borda); font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--tenue-2)}

/* ---------- vitrine de telas ---------- */
.vitrine{display:flex; flex-direction:column; gap:72px; margin-top:52px}
.tela{display:block}
.tela .txt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:44px; align-items:end; margin-bottom:26px}
.tela .rot{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--laranja); margin-bottom:12px}
.tela h3{font-size:clamp(24px,3vw,32px); text-transform:uppercase}
.tela p{font-size:15.5px; color:var(--tinta-2); line-height:1.62}
.tela p b{color:var(--tinta); font-weight:600}
.tela .quadro{border:1px solid var(--borda); border-radius:10px; overflow:hidden; background:var(--aco); box-shadow:0 30px 70px -45px #000; margin:0}
.tela .quadro .rolo{overflow-x:auto}
.tela .marca-legal{display:inline-block; margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--tenue-2); border:1px solid var(--borda); border-radius:4px; padding:3px 8px}

/* ---------- grade do resto ---------- */
.grupo-titulo{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tenue-2); margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--borda-tenue)}
.funcs{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.func{border:1px solid var(--borda-tenue); border-radius:var(--raio); background:var(--aco); padding:20px 20px 21px; transition:border-color .15s,background .15s}
.func:hover{border-color:var(--borda); background:var(--aco-2)}
.func h4{font-size:16.5px; text-transform:uppercase; margin-bottom:7px}
.func p{font-size:14px; color:var(--tenue); line-height:1.58}

/* ---------- citação / voz ---------- */
.voz{background:var(--aco); border-top:1px solid var(--borda-tenue); border-bottom:1px solid var(--borda-tenue)}
.citas{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:36px}
.cita{border-left:2px solid var(--laranja); padding:4px 0 4px 20px}
.cita p{font-size:15.5px; color:var(--tinta-2); line-height:1.62}
.cita p b{color:var(--tinta); font-weight:600}
.cita cite{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tenue-2); font-style:normal; margin-top:12px}

/* ---------- duas colunas ---------- */
.duas{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.regras{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1px; background:var(--borda-tenue); border:1px solid var(--borda-tenue); border-radius:var(--raio); overflow:hidden}
.regras li{background:var(--aco); padding:16px 18px; display:grid; grid-template-columns:104px 1fr; gap:16px; align-items:baseline}
.regras .doc{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--laranja)}
.regras .txt{font-size:14.5px; color:var(--tinta-2)}
.regras .txt b{color:var(--tinta); font-weight:600}
.nunca{margin-top:34px; border-left:2px solid var(--borda); padding:2px 0 2px 20px}
.nunca p:first-child{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tenue-2)}
.nunca ul{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px}
.nunca li{font-size:14.5px; color:var(--tinta-2); display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:baseline}
.nunca li span{font-family:var(--mono); color:var(--laranja)}

/* ---------- preço ---------- */
.plano{max-width:620px; margin:44px auto 0; border:1px solid var(--laranja); border-radius:14px; background:var(--aco); padding:34px 34px 30px; position:relative; box-shadow:0 30px 80px -55px var(--laranja)}
.plano .etq{position:absolute; top:-11px; left:32px; background:var(--laranja); color:#120802; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; padding:3px 10px; border-radius:4px; font-weight:600}
.plano h3{font-size:24px; text-transform:uppercase}
.plano .quem{font-size:14.5px; color:var(--tenue); margin-top:6px}
.precos{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0 6px}
.preco{border:1px solid var(--borda); border-radius:10px; padding:18px 18px 16px; background:var(--aco-2)}
.preco--melhor{border-color:var(--verde)}
.preco .per{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tenue-2)}
.preco .val{font-family:var(--disp); font-weight:700; font-size:36px; letter-spacing:-.02em; margin-top:8px; line-height:1; font-variant-numeric:tabular-nums}
.preco .obs{font-family:var(--mono); font-size:11.5px; color:var(--tenue); margin-top:8px; line-height:1.5}
.preco--melhor .obs b{color:var(--verde); font-weight:500}
.plano ul{list-style:none; padding:0; margin:24px 0 26px; display:grid; grid-template-columns:1fr 1fr; gap:11px 20px; font-size:14.5px; color:var(--tinta-2)}
.plano ul li{display:grid; grid-template-columns:16px 1fr; gap:11px; align-items:start}
.plano ul svg{margin-top:5px}
.plano .btn{width:100%}
.nota-preco{font-family:var(--mono); font-size:11.5px; color:var(--tenue-2); text-align:center; margin-top:22px; line-height:1.7}

/* ---------- perguntas ---------- */
.faq{border-top:1px solid var(--borda-tenue); margin-top:36px}
.faq details{border-bottom:1px solid var(--borda-tenue)}
.faq summary{cursor:pointer; list-style:none; padding:22px 40px 22px 0; min-height:44px; font-family:var(--disp); font-weight:600; font-size:18px; position:relative; color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:19px; font-family:var(--mono); font-size:20px; color:var(--laranja); transition:transform .18s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .resp{padding:0 0 22px; font-size:15px; color:var(--tenue); max-width:74ch; line-height:1.65}
.faq .resp b{color:var(--tinta-2); font-weight:600}

/* ---------- fecho ---------- */
.fecho{text-align:center; padding:96px 0}
.fecho h2{font-size:clamp(32px,5vw,54px); text-transform:uppercase}
.fecho .sub{margin:18px auto 0}
.fecho .acoes{justify-content:center}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--borda-tenue); background:var(--aco); padding:44px 0 40px}
.rodape .env{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px}
.rodape .marca{align-self:start}
.rodape h5{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--tenue-2); margin:0 0 14px; font-weight:500}
.rodape a{display:flex; align-items:center; min-height:44px; font-size:14px; color:var(--tinta-2); text-decoration:none}
.rodape a:hover{color:var(--laranja)}
.aviso{font-size:12.5px; color:var(--tenue-2); line-height:1.6; max-width:52ch; margin-top:14px}
.credito{border-top:1px solid var(--borda-tenue); margin-top:34px; padding-top:22px; font-family:var(--mono); font-size:11.5px; color:var(--tenue-2); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ---------- animação ---------- */
.js .rev{opacity:0; transform:translateY(14px); transition:opacity .6s ease,transform .6s ease}
.js .rev.on{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rev{opacity:1; transform:none; transition:none} *{animation:none !important} }

/* ---------- responsivo ---------- */
@media (max-width:940px){
  .duas,.citas{grid-template-columns:1fr; gap:34px}
  .tela .txt{grid-template-columns:1fr; gap:16px; align-items:start}
  .vitrine{gap:56px}
  .funcs{grid-template-columns:1fr 1fr}
  .prova{grid-template-columns:1fr 1fr}
  .prova div:nth-child(2){border-right:0}
  .prova div:nth-child(1),.prova div:nth-child(2){border-bottom:1px solid var(--borda-tenue)}
  .rodape .env{grid-template-columns:1fr 1fr}
  .navtop a:not(.btn){display:none}
}
@media (max-width:820px){
  .moldura .rolo img{min-width:700px}
  .tela .quadro .rolo img{min-width:620px}
  .arraste{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--tenue-2); padding:8px 13px; border-top:1px solid var(--borda-tenue); background:var(--aco-2)}
}
@media (max-width:620px){
  .secao{padding:60px 0}
  .env{padding:0 18px}
  .funcs,.prova,.contas,.precos,.plano ul{grid-template-columns:1fr}
  .heroi{padding-top:52px}
  .regras li{grid-template-columns:1fr; gap:5px}
  .rodape .env{grid-template-columns:1fr}
  .marca .desc{display:none}
  .plano{padding:28px 22px 24px}
}


/* Vindos de atributos `style` no HTML: a CSP do MIRA é `style-src 'self'`,
   sem 'unsafe-inline', e atributo de estilo é inline como qualquer outro. */
.titulo--centro{text-align:center}
.rodape .credito{grid-column:1/-1}

/* O escalonamento da revelação, em classes.
   Era `style.transitionDelay` no script, e a CSP bloqueava — ver landing.js. */
.js .rev.atraso-0{transition-delay:0ms}
.js .rev.atraso-1{transition-delay:60ms}
.js .rev.atraso-2{transition-delay:120ms}
.js .rev.atraso-3{transition-delay:180ms}
.js .rev.atraso-4{transition-delay:240ms}