/* Site do MafiaReborn Automation: mesmo tema Grafite do app. */
@font-face{font-family:"Geist";src:url(fontes/geist-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fontes/geist-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --fundo:#09090b;--superficie:#0c0c0e;--cartao:#111113;--cartao-alto:#18181b;--borda:#232326;--borda-forte:#2e2e33;
  --texto:#ededee;--suave:#a1a1aa;--fraco:#63636b;--destaque:#fafafa;--destaque-texto:#09090b;
  --verde:#4ade80;--ambar:#facc15;--vermelho:#f87171;
  --sans:"Geist","Segoe UI",system-ui,sans-serif;--mono:"Geist Mono",Consolas,ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--texto);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.largura{max-width:1080px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono)}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border-radius:10px;border:1px solid var(--borda-forte);background:var(--cartao-alto);color:var(--texto);font:600 15px var(--sans);text-decoration:none;cursor:pointer;transition:filter .15s,border-color .15s}
.botao:hover{border-color:var(--fraco)}
.botao.primario{background:var(--destaque);color:var(--destaque-texto);border-color:transparent}
.botao.primario:hover{filter:brightness(.9)}
.botao:disabled{opacity:.45;cursor:default}

/* Topo */
.topo{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--fundo) 85%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--borda)}
.topo .largura{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.marca img{width:32px;height:32px;border-radius:50%;box-shadow:0 0 0 1px var(--borda-forte)}
.nome-marca{display:flex;flex-direction:column;line-height:1.05}
.nome-marca b{font:650 16px var(--sans);letter-spacing:-.02em}
.nome-marca span{font:400 12px var(--sans);color:var(--suave)}
.topo nav{display:flex;align-items:center;gap:14px}
.topo .botao{padding:8px 14px;font-size:14px}
.idiomas{display:flex;border:1px solid var(--borda-forte);border-radius:9px;overflow:hidden}
.idiomas button{background:transparent;border:0;color:var(--fraco);font:600 12px var(--mono);padding:7px 9px;cursor:pointer}
.idiomas button:hover{color:var(--texto)}
.idiomas button[aria-pressed=true]{background:var(--cartao-alto);color:var(--texto)}

/* Início */
.inicio{padding:80px 0 56px}
.inicio .largura{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.selo{display:inline-block;font:500 12px var(--mono);letter-spacing:.12em;color:var(--suave);border:1px solid var(--borda-forte);border-radius:99px;padding:5px 12px}
h1{font-size:clamp(40px,6vw,68px);line-height:1;letter-spacing:-.04em;margin:20px 0 16px;font-weight:700}
h1 span{color:var(--suave)}
.inicio p.lead{font-size:20px;color:var(--suave);margin:0 0 28px}
.acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.botao.grande{padding:15px 26px;font-size:16px}
.detalhe-download{margin-top:14px;font:13px var(--mono);color:var(--fraco)}
.vitrine{position:relative;border:1px solid var(--borda);border-radius:14px;background:var(--superficie);padding:14px;display:flex;gap:14px;align-items:flex-start;overflow:hidden}
.vitrine img{border-radius:8px;border:1px solid var(--borda)}
.vitrine .painel{width:62%}
.vitrine .mini{width:38%;margin-top:40px}

/* Seções */
section.bloco{padding:56px 0;border-top:1px solid var(--borda)}
h2{font-size:28px;letter-spacing:-.02em;margin:0 0 24px;font-weight:650}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.recurso{border:1px solid var(--borda);border-radius:12px;background:var(--cartao);padding:20px 22px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
.recurso .num{grid-row:span 2;font:600 13px var(--mono);color:var(--fraco)}
.recurso h3{margin:0;font-size:19px;font-weight:650;letter-spacing:-.01em}
.recurso p{margin:4px 0 0;color:var(--suave);font-size:14.5px}
.passos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;counter-reset:passo}
.passos li{flex:1;min-width:180px;border:1px solid var(--borda);border-radius:12px;padding:18px 20px;font-size:18px;display:flex;gap:12px;align-items:baseline}
.passos li::before{counter-increment:passo;content:"0" counter(passo);font:600 13px var(--mono);color:var(--fraco)}
.aviso{margin:14px 0 0;color:var(--fraco);font-size:13.5px}
.aviso em{color:var(--suave);font-style:normal}
.tipo-plano{display:inline-flex;border:1px solid var(--borda-forte);border-radius:10px;overflow:hidden;margin:0 0 16px}
.tipo-plano button{background:transparent;border:0;color:var(--suave);font:600 14px var(--sans);padding:9px 16px;cursor:pointer}
.tipo-plano button:hover{color:var(--texto)}
.tipo-plano button[aria-pressed=true]{background:var(--destaque);color:var(--destaque-texto)}
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.plano{position:relative;border:1px solid var(--borda);border-radius:12px;padding:22px;background:var(--cartao)}
.plano.destaque-plano{border-color:var(--borda-forte)}
.plano .dias{font:600 14px var(--mono);color:var(--suave)}
.plano .preco{font:700 36px var(--sans);letter-spacing:-.03em;margin:6px 0 2px}
.plano p{color:var(--fraco);margin:0;font:13px var(--mono)}
.economia{position:absolute;top:16px;right:16px;font:600 11px var(--mono);color:var(--verde);border:1px solid color-mix(in srgb,var(--verde) 40%,transparent);border-radius:99px;padding:3px 9px}
.em-breve{margin-top:14px;color:var(--fraco);font-size:14px}

/* Rodapé */
footer{border-top:1px solid var(--borda);padding:36px 0 48px;color:var(--fraco);font-size:13px}
footer .largura{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer p{margin:0;max-width:620px}

@media (max-width:860px){
  .inicio{padding:44px 0 36px}
  .inicio .largura{grid-template-columns:1fr;gap:32px}
  .grade{grid-template-columns:1fr 1fr}
  .planos{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grade{grid-template-columns:1fr}
  .topo a.botao{display:none}
  .nome-marca span{display:none}
}