/* O ESTILO DO SITE, NUM LUGAR SO'. Duas folhas para o mesmo site e' o
   mesmo erro do PALAVRAS_VAZIAS: elas divergem, e a pagina nova amanhece
   com outra cor de laranja. Tokens oficiais do manual da marca 2.0. */
/* Tokens oficiais do manual da marca 2.0 -- nao invente cor aqui.
   Texto sobre o laranja e' SEMPRE tinta: branco sobre ele da' 2,91:1. */
:root{
  --gesso:#F7F7F4; --branco:#FFFFFF; --tinta:#101113;
  --superficie-1:#17191C; --superficie-2:#272A2F;
  --sinal:#FF5A1F; --sinal-hover:#FF7A47; --sinal-texto:#C43C0E;
  --texto-2:#3A3D42; --apagado:#63666B;
  --apagado-escuro:#9599A0; --claro-escuro:#D2D5DA; --gesso-escuro:#F2F2EF;
  --linha:#DEDED7; --linha-escura:#272A2F;
  --credito:#0E7A54; --credito-escuro:#3FCF8E;
  --debito:#C0322C; --debito-escuro:#F16B63;
  --raio:20px; --raio-b:12px; --raio-s:10px;
  --sombra-escura:0 1px 2px rgba(16,17,19,.2), 0 30px 60px -30px rgba(16,17,19,.6);
  --display:"Bricolage Grotesque",Helvetica,Arial,sans-serif;
  --corpo:"Schibsted Grotesk",Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--gesso);color:var(--tinta);
  font:16px/1.55 var(--corpo);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.03em}
p{margin:0}
a{color:var(--sinal-texto)}
a:hover{color:#7A2E12}
::selection{background:var(--sinal);color:var(--tinta)}
img{max-width:100%}
@keyframes pulso{0%,100%{opacity:.35}50%{opacity:1}}

.caixa{max-width:1160px;margin:0 auto;padding:0 24px}
.kicker{font-size:13px;font-weight:600;color:var(--sinal-texto);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.botao{display:inline-block;background:var(--sinal);color:var(--tinta);
  text-decoration:none;font-weight:600;border:0;cursor:pointer;font-family:inherit}
.botao:hover{background:var(--sinal-hover);color:var(--tinta)}
.botao.g{font-size:16px;padding:16px 26px;border-radius:var(--raio-b)}
.botao.p{font-size:14px;padding:10px 18px;border-radius:var(--raio-s)}
.botao.vazio{background:var(--branco);color:var(--tinta);
  border:1px solid var(--linha);font-size:16px;padding:16px 20px;border-radius:var(--raio-b)}
.botao.vazio:hover{border-color:var(--tinta);background:var(--branco)}
.pill{font-size:14px;font-weight:600;color:var(--tinta);background:var(--gesso);
  border:1px solid var(--linha);border-radius:99px;padding:6px 14px;display:inline-block}
.cartao{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:28px}

/* ------------------------------------------------------------------ nav */
nav.topo{position:sticky;top:0;z-index:10;background:rgba(247,247,244,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
nav.topo .caixa{padding:14px 24px;display:flex;align-items:center;gap:24px}
nav.topo .links{display:flex;gap:26px;font-size:14px;font-weight:500}
nav.topo .links a{color:var(--texto-2);text-decoration:none}
nav.topo .links a:hover{color:var(--tinta)}
nav.topo .entrar{font-size:14px;font-weight:600;color:var(--tinta);text-decoration:none;
  padding:10px 14px;border-radius:var(--raio-s);border:1px solid var(--linha);
  background:var(--branco);white-space:nowrap}
nav.topo .entrar:hover{border-color:var(--tinta);color:var(--tinta)}

/* ---------------------------------------------------------------- heroi */
.heroi{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:56px;align-items:center;padding:88px 24px 72px}
.heroi h1{font-size:60px;line-height:1;font-weight:800;text-wrap:balance}
.selo{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--sinal-texto);background:var(--branco);border:1px solid var(--linha);
  border-radius:99px;padding:6px 12px;margin-bottom:26px}
.selo i{width:8px;height:8px;border-radius:50%;background:var(--sinal);
  animation:pulso 1.8s ease-in-out infinite;display:block}
/* GRADE, e nao flex: com tres blocos numa coluna de ~570px o flex empurrava o
   terceiro para uma segunda linha, e as tres medidas so' valem lidas juntas. */
.metricas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.metricas b{font-family:var(--mono);font-size:24px;font-weight:500;display:block}
.metricas span{font-size:12.5px;color:var(--apagado);display:block;line-height:1.35}

.mock{background:var(--tinta);border-radius:var(--raio);padding:22px;
  box-shadow:var(--sombra-escura)}
.mock .linha{display:grid;grid-template-columns:20px minmax(0,1fr) 84px 84px;gap:10px;
  align-items:center;background:var(--superficie-1);border-radius:var(--raio-s);
  padding:10px 12px;font-size:13px}
.mock .glifo{width:18px;height:18px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:700}
.mock .hist{color:var(--gesso-escuro);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock .dc{font-family:var(--mono);color:var(--apagado-escuro);font-size:12px}
.mock .valor{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- secoes */
.faixa{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
  background:var(--branco)}
.faixa .fila{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.faixa .rotulo{font-size:13px;font-weight:600;color:var(--apagado);
  text-transform:uppercase;letter-spacing:.08em}
.faixa .nota{font-size:13px;color:var(--apagado)}

h2.secao{font-size:44px;line-height:1.05;font-weight:800;text-wrap:balance}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.numero-dor{font-family:var(--mono);font-size:34px;color:var(--debito);font-weight:500}

.escura{background:var(--tinta);color:var(--gesso-escuro)}
.escura h2{color:var(--gesso-escuro)}
.escura .kicker{color:var(--sinal-hover)}
.check{width:22px;height:22px;border-radius:50%;background:var(--sinal);color:var(--tinta);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:2px}

details{background:var(--branco);border:1px solid var(--linha);border-radius:14px;padding:18px 22px}
details summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;gap:12px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--sinal-texto);font-weight:700}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--texto-2);font-size:15px;text-wrap:pretty}

form.demo{background:var(--tinta);border-radius:var(--raio);padding:28px;display:grid;gap:12px}
form.demo label{display:grid;gap:6px;font-size:12px;font-weight:600;
  color:var(--apagado-escuro);text-transform:uppercase;letter-spacing:.06em}
form.demo input,form.demo select{background:var(--superficie-1);
  border:1px solid var(--linha-escura);border-radius:var(--raio-s);padding:12px 14px;
  color:var(--gesso-escuro);font:inherit;font-size:15px;text-transform:none;
  letter-spacing:0;font-weight:400}
form.demo input:focus,form.demo select:focus{outline:2px solid var(--sinal);outline-offset:1px}

footer{background:var(--tinta);color:var(--apagado-escuro)}
footer .caixa{padding:40px 24px;display:flex;align-items:center;gap:24px;
  flex-wrap:wrap;font-size:13px}

@media(max-width:900px){
  .heroi{grid-template-columns:1fr;padding:56px 24px 48px;gap:36px}
  .heroi h1{font-size:40px}
  h2.secao{font-size:32px}
  .tres{grid-template-columns:1fr}
  nav.topo .links{display:none}
  .duas{grid-template-columns:1fr !important}
  .sticky{position:static !important}
  .demo-grade{grid-template-columns:1fr !important}
  .suporte{grid-template-columns:1fr !important}
  .suporte>*{grid-column:span 1 !important}
  .garantias{grid-template-columns:1fr !important}
}