:root{
  --fundo:#0B0F14; --painel:#141a22; --linha:#222a36;
  --tinta:#e8ebf2; --fraca:#9aa3b5;
  /* dois verdes de proposito: o vivo preenche, o fundo escuro nao aguenta
     texto verde claro em papel branco. Ver brand/BRANDING.md. */
  --marca-forte:#00D47E;   /* preenchimento: ladrilho, botao, numero */
  --marca-texto:#00D47E;   /* texto e link - trocado no tema claro */
  --largura:68rem;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --fundo:#ffffff; --painel:#f6f8fb; --linha:#e3e8f0;
    --tinta:#0f1521; --fraca:#5b6678; --marca-texto:#00794A;
  }
}
:root[data-theme="light"]{
  --fundo:#ffffff; --painel:#f6f8fb; --linha:#e3e8f0;
  --tinta:#0f1521; --fraca:#5b6678; --marca-texto:#00794A;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--fundo); color:var(--tinta); overflow-x:hidden;
  font:400 16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.env{max-width:var(--largura); margin:0 auto; padding:0 16px}
a{color:var(--marca-texto)}
header.topo{border-bottom:1px solid var(--linha); padding:14px 0}
header.topo .env{display:flex; align-items:center; justify-content:space-between; gap:12px}
.marca{display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:-.03em;
  color:var(--tinta); text-decoration:none; font-size:19px}
.marca .mk{border-radius:6px; flex:none}
.moeda{border:1px solid var(--linha); background:var(--painel); color:var(--tinta);
  border-radius:8px; padding:6px 10px; font-size:14px}
nav.trilha{font-size:13px; color:var(--fraca); margin:18px 0 4px}
nav.trilha i{font-style:normal; margin:0 7px}
h1{font-size:clamp(1.8rem,5vw,2.7rem); line-height:1.14; letter-spacing:-.025em; margin:6px 0 14px}
h2{font-size:clamp(1.3rem,2.8vw,1.75rem); letter-spacing:-.015em; margin:42px 0 12px; line-height:1.25}
h3{font-size:1.06rem; margin:22px 0 6px; line-height:1.35}
p{margin:0 0 14px}
.chamada{font-size:1.1rem; color:var(--fraca); margin-bottom:20px}
.botoes{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px}
.btn{display:inline-block; text-decoration:none; font-weight:700; padding:13px 20px;
  border-radius:10px; font-size:15px}
.btn-1{background:var(--marca-forte); color:#04140a}
.btn-2{background:var(--painel); color:var(--tinta); border:1px solid var(--linha)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; padding:0; list-style:none}
.chips li{display:flex; align-items:center; gap:7px; background:var(--painel);
  border:1px solid var(--linha); border-radius:999px; padding:7px 13px;
  font-size:13.5px; color:var(--tinta)}
.chips .ic{color:var(--marca-texto); flex:none}
.selo{display:inline-block; background:rgba(0,212,126,.12); color:var(--marca-texto);
  border:1px solid rgba(0,212,126,.38); border-radius:999px;
  padding:6px 13px; font-size:13px; font-weight:700; margin:2px 0 14px}
.unidade{font-size:1.12rem; font-weight:700; margin:4px 0 16px}
.cartoes{display:grid; gap:12px; grid-template-columns:1fr; margin:0 0 14px; padding:0; list-style:none}
@media(min-width:560px){.cartoes{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.cartoes{grid-template-columns:repeat(3,1fr)}}
.cartao{background:var(--painel); border:1px solid var(--linha); border-radius:13px;
  padding:16px 17px; display:flex; flex-direction:column; gap:5px}
.cartao .qtd{font-size:1.45rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.cartao .un{font-size:12.5px; color:var(--fraca); text-transform:uppercase; letter-spacing:.05em}
.cartao .valor{font-size:1.15rem; font-weight:700; color:var(--marca-texto); font-variant-numeric:tabular-nums}
.cartao .razao{font-size:13.5px; color:var(--fraca); flex:1; margin:2px 0 8px}
.cartao .btn{text-align:center; padding:10px 14px; font-size:14px}
.nota{font-size:14px; color:var(--fraca); margin:0 0 6px}
.tabela{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0 8px}
table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:36rem}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--linha); white-space:nowrap}
th{color:var(--fraca); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em}
td.price{font-variant-numeric:tabular-nums; font-weight:700}
.passos{list-style:none; padding:0; margin:14px 0; counter-reset:p}
.passos li{counter-increment:p; position:relative; padding:0 0 4px 42px; margin-bottom:16px}
.passos li::before{content:counter(p); position:absolute; left:0; top:1px;
  width:28px; height:28px; border-radius:50%; background:var(--painel);
  border:1px solid var(--linha); color:var(--marca-forte);
  display:grid; place-items:center; font-size:13px; font-weight:700}
.grade{display:grid; gap:16px; grid-template-columns:1fr}
@media(min-width:760px){.grade{grid-template-columns:1fr 1fr}}
.caixa{background:var(--painel); border:1px solid var(--linha); border-radius:13px; padding:17px 19px}
.caixa h3{margin-top:0}
.caixa ul{margin:8px 0 0; padding-left:18px}
.caixa li{margin:6px 0; color:var(--fraca)}
.caixa.ok{border-color:rgba(0,212,126,.34)}
.caixa.nao{border-color:rgba(248,113,113,.3)}
details{border-bottom:1px solid var(--linha); padding:14px 0}
details summary{cursor:pointer; font-weight:600; list-style:none; display:flex;
  justify-content:space-between; gap:14px; align-items:flex-start}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; color:var(--fraca); font-weight:400; flex:none}
details[open] summary::after{content:"\2212"}
details p{margin:11px 0 2px; color:var(--fraca)}
.cruz{list-style:none; padding:0; margin:12px 0}
.cruz li{padding:11px 0; border-bottom:1px solid var(--linha)}
.cruz a{font-weight:600; text-decoration:none}
.cruz span{display:block; font-size:14px; color:var(--fraca); margin-top:3px}
.fim{background:var(--painel); border:1px solid var(--linha); border-radius:14px;
  padding:22px 20px; margin:34px 0 0}
.fim h2{margin-top:0}
footer.rodape{border-top:1px solid var(--linha); margin-top:52px; padding:26px 0 44px;
  color:var(--fraca); font-size:14px}
.moedas{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 18px; padding:0; list-style:none}
.moedas li{border:1px solid var(--linha); background:var(--painel); border-radius:8px;
  padding:5px 11px; font-size:13px; font-weight:700; color:var(--tinta)}
.rodape-links{display:flex; flex-wrap:wrap; gap:16px; margin:0 0 14px; padding:0; list-style:none}
.rodape-links a{color:var(--fraca); text-decoration:none}