/* ============================================================
   RESPOSTA PRONTA — sistema visual

   Mesmo esqueleto do Mapa da Dose, que já foi aprovado: fundo claro,
   Sora nos títulos, Atkinson Hyperlegible no texto, cartões com borda
   e cantos generosos. A cor de marca é índigo, para as duas marcas
   não se confundirem.

   A cor carrega significado e nunca é enfeite:
     índigo   = marca e botões
     vermelho = o erro, o que fizeram com você
     verde    = a saída certa
     âmbar    = destaque de plano
   ============================================================ */
:root{
  color-scheme: light;
  --tinta:#14213D;
  --suave:#586174;
  --suave-2:#8A92A3;
  --fundo:#F5F6FA;
  --branco:#FFFFFF;
  --linha:#DFE3EC;
  --marca:#4338CA;
  --marca-esc:#3730A3;
  --marca-cl:#EEF0FD;
  --erro:#DC2626;
  --erro-cl:#FDEEEE;
  --certo:#15803D;
  --certo-cl:#EAF6EE;
  --amb:#F59E0B;
  --display:"Sora", "Segoe UI", system-ui, sans-serif;
  --corpo:"Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --raio:16px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font-family:var(--corpo); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%; display:block;}
[hidden]{display:none !important;}
:focus-visible{outline:3px solid var(--marca); outline-offset:3px; border-radius:6px;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

h1,h2,h3{font-family:var(--display); color:var(--tinta); text-wrap:balance; margin:0;}
h1{font-size:clamp(30px,7.4vw,46px); line-height:1.12; font-weight:800; letter-spacing:-.02em;}
h2{font-size:clamp(25px,5.6vw,34px); line-height:1.18; font-weight:800; letter-spacing:-.015em;}
h3{font-size:19px; line-height:1.3; font-weight:700;}
b,strong{font-weight:700; color:var(--tinta);}

/* ---------- botões ---------- */
.acao, .cta{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:var(--marca); color:#fff; border:0; border-radius:12px;
  font-family:var(--display); font-weight:700; font-size:17px;
  padding:18px 20px; cursor:pointer;
  box-shadow:0 6px 18px rgba(67,56,202,.28);
  transition:background .18s ease, transform .15s ease, box-shadow .18s ease;
}
.acao:hover, .cta:hover{background:var(--marca-esc); box-shadow:0 8px 22px rgba(67,56,202,.34);}
.acao:active, .cta:active{transform:translateY(1px);}
.discreto, .cta2{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:var(--branco); color:var(--tinta); border:2px solid var(--tinta);
  border-radius:12px; font-family:var(--display); font-weight:700; font-size:16px;
  padding:15px 18px; cursor:pointer;
}
.discreto:hover, .cta2:hover{background:var(--fundo);}

/* ============================================================
   QUIZ — Sinuca de Bico (index.html)
   ============================================================ */
#trilho{
  position:fixed; left:0; right:0; top:env(safe-area-inset-top,0px);
  height:4px; background:var(--linha); z-index:20; transition:opacity .3s ease;
}
#trilho.oculto{opacity:0;}
#barra{height:100%; width:0; background:var(--marca); transition:width .45s cubic-bezier(.22,.61,.36,1);}

.palco{
  min-height:100%; width:100%; max-width:640px; margin:0 auto;
  padding:40px 20px 56px;
  display:flex; flex-direction:column; justify-content:center;
}
.palco.alto{justify-content:flex-start;}
.tela{animation:sobe .38s cubic-bezier(.22,.61,.36,1) both;}
@keyframes sobe{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}

.etiqueta{
  font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--marca); margin:0 0 14px;
  font-variant-numeric:tabular-nums;
}
.etiqueta b{color:var(--tinta);}
.palco h1{margin-bottom:16px;}
.linha-fina{font-size:18px; color:var(--suave); margin:0 0 22px; max-width:46ch;}
.linha-fina b{color:var(--tinta);}
.rodape{font-size:13.5px; color:var(--suave-2); margin:22px 0 0; line-height:1.55;}
.regua{border:0; height:1px; background:var(--linha); margin:36px 0;}

.cena-rotulo{
  font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--suave); margin:6px 0 10px;
}
.cena-fala{
  font-family:var(--display); font-weight:600;
  font-size:clamp(20px,5vw,25px); line-height:1.38; color:var(--tinta);
  background:var(--branco); border:1px solid var(--linha); border-left:5px solid var(--erro);
  border-radius:var(--raio); padding:20px 22px; margin:0 0 26px;
  box-shadow:0 1px 2px rgba(20,33,61,.04);
}
.cena-pergunta{
  font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--suave); margin:0 0 12px;
}
.opcoes{display:flex; flex-direction:column; gap:10px;}
.opcao{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:var(--branco); color:var(--tinta);
  border:2px solid var(--linha); border-radius:14px; padding:16px 18px;
  font-family:var(--corpo); font-size:16.5px; line-height:1.45;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.opcao:hover{border-color:var(--marca); background:var(--marca-cl);}
.opcao.marcada{border-color:var(--marca); background:var(--marca-cl); transform:scale(.99);}

.vd{font-family:var(--display); font-weight:800; font-size:clamp(25px,6vw,33px); line-height:1.15; margin:4px 0 12px;}
.vd-erro{color:var(--erro);}
.vd-ok{color:var(--certo);}
.vd-txt{font-size:18px; line-height:1.62; color:var(--tinta); margin:0 0 22px;}

.cartao{
  background:var(--certo-cl); border:1px solid #CFE9D8; border-left:5px solid var(--certo);
  border-radius:var(--raio); padding:18px 20px 16px;
}
.cartao .quando{
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--certo); margin:0 0 8px;
}
.cartao .frase{font-family:var(--display); font-weight:600; font-size:17px; line-height:1.4; margin:0 0 14px;}
.cartao .rotulo{
  font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--suave); margin:0 0 6px;
}
.cartao .resposta{font-family:var(--display); font-weight:700; font-size:18px; line-height:1.42; color:var(--tinta); margin:0 0 12px;}
.cartao .porque{font-size:15px; line-height:1.6; color:var(--suave); margin:0; padding-top:12px; border-top:1px solid #CFE9D8;}

.selo{
  font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--marca); margin:0 0 10px;
}
.placar{font-size:clamp(32px,8vw,48px); margin:0 0 14px;}
.placar b{color:var(--marca);}
.leitura{font-size:18.5px; line-height:1.62; color:var(--tinta); margin:0 0 24px;}
.bloco{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:18px 20px; margin:0 0 22px;
}
.bloco h3{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--erro); margin:0 0 8px;
}
.bloco p{margin:0; font-size:16.5px; line-height:1.62;}

.posse{
  display:flex; align-items:center; gap:16px; margin:6px 0 22px;
  background:var(--marca-cl); border-radius:var(--raio); padding:16px 18px;
}
.posse .conta{font-family:var(--display); font-weight:800; font-size:34px; line-height:1; color:var(--marca); white-space:nowrap;}
.posse .conta span{font-size:20px; color:var(--suave-2);}
.posse .desc{font-size:15px; color:var(--tinta); line-height:1.5;}

.oferta{
  background:var(--branco); border:2px solid var(--marca); border-radius:20px;
  padding:26px 22px; margin:6px 0 0; box-shadow:0 10px 30px rgba(20,33,61,.07);
}
.oferta h3{font-size:clamp(22px,5.4vw,27px); line-height:1.2; margin:0 0 12px;}
.oferta p{font-size:16.5px; color:var(--suave); margin:0 0 18px; line-height:1.6;}
.proxima{color:var(--tinta) !important; font-weight:700;}
.selo-garantia{font-size:13px; color:var(--suave-2); text-align:center; margin:12px 0 0;}
.aviso{
  margin:14px 0 0; padding:12px 14px; border-radius:12px;
  background:var(--erro-cl); color:var(--erro); font-size:14px;
}

.indice{
  display:grid; grid-template-columns:1fr; gap:0; margin:0 0 22px;
  border-top:1px solid var(--linha);
}
@media (min-width:560px){ .indice{grid-template-columns:1fr 1fr; column-gap:22px;} }
.indice .item{display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1px solid var(--linha);}
.indice .num{font-family:var(--display); font-weight:700; font-size:12px; color:var(--marca); min-width:2.2ch;}
.indice .tit{font-size:15px; line-height:1.4;}
.indice .qtd{margin-left:auto; font-size:12.5px; color:var(--suave-2); white-space:nowrap;}

.garantia{
  display:flex; gap:14px; align-items:flex-start; margin:20px 0 0;
  padding-top:18px; border-top:1px dashed var(--linha);
}
.garantia .dias, .garantia svg{flex:0 0 auto;}
.garantia .dias{
  width:44px; height:44px; border-radius:12px; background:var(--certo-cl); color:var(--certo);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:20px;
}
.garantia .txt{font-size:14.5px; color:var(--suave); line-height:1.55;}
.garantia .txt b{color:var(--tinta);}

/* ============================================================
   PÁGINA DE VENDAS (vendas.html) — padrão Mapa da Dose
   ============================================================ */
.w{width:100%; max-width:1080px; margin:0 auto; padding:0 20px;}
.estreita{max-width:760px;}

.topo{
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px); -webkit-backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--linha);
}
.topo .w{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; padding-bottom:12px;}
.marca{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:19px; color:var(--tinta); text-decoration:none;}
.marca i{
  width:34px; height:34px; border-radius:10px; background:var(--tinta); color:#fff;
  display:flex; align-items:center; justify-content:center; font-style:normal; font-size:17px;
}
.marca span{color:var(--marca);}
.topo .cta{width:auto; padding:11px 16px; font-size:14.5px; box-shadow:none;}

section{padding:64px 0;}
section.branca{background:var(--branco); border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);}
.kicker{
  font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--marca); margin:0 0 12px;
}
.lead{font-size:18.5px; color:var(--suave); margin:16px 0 0; max-width:60ch; line-height:1.62;}
.lead b{color:var(--tinta);}

/* hero */
.hero{padding:48px 0 56px;}
.hero .w{display:grid; gap:36px; align-items:center;}
@media (min-width:900px){ .hero .w{grid-template-columns:1.05fr .95fr; gap:56px;} }
.hero h1 em{font-style:normal; color:var(--marca);}
.hero .lead{margin-bottom:22px;}
.selos{display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 26px; padding:0; list-style:none;}
.selos li{position:relative; padding-left:24px; font-size:15px; color:var(--tinta); font-weight:600;}
.selos li::before{
  content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%;
  background:var(--certo-cl); color:var(--certo); font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-top:3px;
}
.hero .cta{max-width:420px;}
.nota{font-size:14px; color:var(--suave-2); margin:12px 0 0;}

/* pilha de cartões no hero */
.pilha{position:relative; min-height:430px;}
.ficha{
  position:absolute; left:0; right:0; margin:0 auto; max-width:420px;
  background:var(--branco); border:1px solid var(--linha); border-radius:18px;
  padding:20px 20px 18px; box-shadow:0 14px 36px rgba(20,33,61,.12);
}
.ficha:nth-child(1){top:0; transform:rotate(-3deg); opacity:.55;}
.ficha:nth-child(2){top:34px; transform:rotate(2deg); opacity:.8;}
.ficha:nth-child(3){top:72px; transform:none;}
.ficha .ft{
  font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--suave); margin:0 0 8px;
}
.ficha .fs{font-family:var(--display); font-weight:600; font-size:16px; line-height:1.4; margin:0 0 14px; padding-left:12px; border-left:4px solid var(--erro);}
.ficha .fe{font-size:14px; color:var(--erro); margin:0 0 4px;}
.ficha .fe::before{content:"✗  "; font-weight:800;}
.ficha .fc{font-family:var(--display); font-weight:700; font-size:15px; line-height:1.4; color:var(--certo); margin:10px 0 0; padding-top:12px; border-top:1px solid var(--linha);}
.ficha .fc::before{content:"✓  ";}

/* o problema */
.duvidas{display:grid; gap:14px; margin:28px 0 0;}
@media (min-width:860px){ .duvidas{grid-template-columns:repeat(3,1fr);} }
.duvidas div{background:var(--fundo); border:1px solid var(--linha); border-radius:var(--raio); padding:20px;}
.duvidas b{display:block; font-family:var(--display); font-size:17.5px; line-height:1.35; margin:0 0 8px;}
.duvidas p{margin:0; font-size:15.5px; color:var(--suave); line-height:1.55;}

/* anatomia */
.ramos{display:grid; gap:12px; margin:28px 0 0; counter-reset:r;}
@media (min-width:760px){ .ramos{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .ramos{grid-template-columns:repeat(5,1fr);} }
.ramos div{background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:18px;}
.ramos b{display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:16px; margin:0 0 6px;}
.ramos b i{
  flex:0 0 auto; width:28px; height:28px; border-radius:8px; font-style:normal;
  background:var(--marca-cl); color:var(--marca); font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.ramos div.r-erro b i{background:var(--erro-cl); color:var(--erro);}
.ramos div.r-certo b i{background:var(--certo-cl); color:var(--certo);}
.ramos p{margin:0; font-size:14.5px; color:var(--suave); line-height:1.5;}

/* erros reais */
.erros{display:grid; gap:16px; margin:30px 0 0;}
@media (min-width:860px){ .erros{grid-template-columns:repeat(2,1fr);} }
.erro{
  background:var(--branco); border:1px solid var(--linha); border-top:4px solid var(--erro);
  border-radius:var(--raio); padding:22px 22px 20px;
}
.erro .tag{
  display:inline-block; font-family:var(--display); font-weight:700; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--erro);
  background:var(--erro-cl); padding:5px 10px; border-radius:999px; margin:0 0 12px;
}
.erro h3{font-size:20px; margin:0 0 10px;}
.erro p{margin:0 0 14px; font-size:16px; line-height:1.6; color:var(--tinta);}
.erro .saida{
  margin:0; padding-top:14px; border-top:1px solid var(--linha);
  font-size:15px; line-height:1.5; color:var(--suave);
}
.erro .saida b{color:var(--certo);}

/* por que funciona */
.verif .w{display:grid; gap:30px;}
@media (min-width:900px){ .verif .w{grid-template-columns:1fr 1fr; gap:56px; align-items:start;} }
.lista-chk{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.lista-chk li{display:flex; gap:14px; align-items:flex-start;}
.lista-chk li i{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px; font-style:normal;
  background:var(--marca-cl); color:var(--marca); font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.lista-chk b{display:block; font-family:var(--display); font-size:16.5px; margin:0 0 2px;}
.lista-chk span{font-size:15px; color:var(--suave); line-height:1.5;}

/* o que você recebe: módulos em blocos abertos */
.cats{display:grid; gap:10px; margin:28px 0 0;}
@media (min-width:860px){ .cats{grid-template-columns:repeat(2,1fr);} }
.cat{background:var(--branco); border:1px solid var(--linha); border-radius:14px; overflow:hidden;}
.cat summary{
  list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:700; font-size:16px;
}
.cat summary::-webkit-details-marker{display:none;}
.cat summary .n{font-size:12px; color:var(--marca); min-width:2.2ch;}
.cat summary .q{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--suave); background:var(--fundo); padding:3px 9px; border-radius:999px;}
.cat summary::after{content:"+"; font-size:20px; color:var(--marca); margin-left:6px;}
.cat[open] summary::after{content:"−";}
.cat p{margin:0; padding:0 18px 16px; font-size:15px; color:var(--suave); line-height:1.55;}

/* plano */
.planos{display:grid; gap:18px; margin:30px auto 0; max-width:520px;}
.caixa{
  position:relative; background:var(--branco); border:2px solid var(--marca); border-radius:22px;
  padding:30px 24px 24px; box-shadow:0 14px 40px rgba(67,56,202,.12);
}
.selo-plano{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--amb); color:#3B2400; font-family:var(--display); font-weight:800;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px;
  white-space:nowrap;
}
.caixa h3{text-align:center; font-size:22px; margin:0 0 6px;}
.preco{
  text-align:center; font-family:var(--display); font-weight:800; color:var(--tinta);
  font-size:58px; line-height:1; margin:8px 0 6px; letter-spacing:-.02em;
}
.preco small{font-size:24px; vertical-align:top; position:relative; top:8px; margin-right:4px;}
.parcela{text-align:center; font-size:14.5px; color:var(--suave); margin:0 0 22px;}
.caixa ul{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px;}
.caixa li{position:relative; padding-left:28px; font-size:16px; line-height:1.5;}
.caixa li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--certo); font-weight:800; font-size:17px;}

/* perguntas */
.faq{max-width:760px; margin:28px auto 0; border-top:1px solid var(--linha);}
.faq details{border-bottom:1px solid var(--linha);}
.faq summary{
  list-style:none; cursor:pointer; padding:18px 0; display:flex; justify-content:space-between; gap:16px;
  font-family:var(--display); font-weight:700; font-size:17px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--marca); font-size:22px; line-height:1;}
.faq details[open] summary::after{content:"−";}
.faq p{margin:0 0 18px; font-size:16px; color:var(--suave); line-height:1.62;}

/* fechamento e rodapé */
.fecho{text-align:center;}
.fecho h2{max-width:22ch; margin:0 auto 14px;}
.fecho .lead{margin:0 auto 26px;}
.fecho .cta{max-width:420px; margin:0 auto;}
.rodape-site{padding:32px 0 44px; font-size:13.5px; color:var(--suave-2); text-align:center; line-height:1.6;}
.rodape-site a{color:var(--suave);}
.c{text-align:center;}
.c .lead{margin-left:auto; margin-right:auto;}

@media (min-width:900px){
  section{padding:88px 0;}
  .palco{max-width:680px;}
}

/* ---------- ajustes da revisão visual ---------- */
/* a lista do plano herdava o centro da seção */
.caixa ul, .caixa .garantia, .caixa .garantia .txt{text-align:left;}

/* fichas de trás da pilha: só o papel e o rótulo, sem texto vazando por baixo */
.ficha:nth-child(1) > *:not(.ft),
.ficha:nth-child(2) > *:not(.ft){visibility:hidden;}
.ficha:nth-child(1) .ft, .ficha:nth-child(2) .ft{opacity:.5;}

/* ============================================================
   Seções da tese "ninguém disse nada"
   ============================================================ */
/* os seis ataques sem frase */
.silencios{display:grid; gap:14px; margin:32px 0 0;}
@media (min-width:640px){ .silencios{grid-template-columns:repeat(2,1fr);} }
@media (min-width:980px){ .silencios{grid-template-columns:repeat(3,1fr);} }
.silencios div{
  position:relative; background:var(--fundo); border:1px solid var(--linha);
  border-radius:var(--raio); padding:22px 20px 20px;
}
.silencios span{
  display:block; font-family:var(--display); font-weight:800; font-size:13px;
  color:var(--erro); letter-spacing:.06em; margin:0 0 10px;
}
.silencios b{display:block; font-family:var(--display); font-size:19px; line-height:1.3; margin:0 0 8px;}
.silencios p{margin:0; font-size:15.5px; line-height:1.55; color:var(--suave);}

/* as duas respostas guardadas */
.duas{display:grid; gap:14px; margin:26px 0 26px;}
@media (min-width:640px){ .duas{grid-template-columns:1fr 1fr;} }
.duas div{background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio); padding:22px;}
.duas b{display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:20px; margin:0 0 8px; color:var(--erro);}
.duas b::before{
  content:"✗"; width:28px; height:28px; border-radius:8px; background:var(--erro-cl);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.duas p{margin:0; font-size:16px; line-height:1.58; color:var(--tinta);}

/* a parte que é sua */
.suas{display:grid; gap:12px; margin:26px 0 0;}
.suas div{
  background:var(--fundo); border:1px solid var(--linha); border-left:4px solid var(--amb);
  border-radius:0 var(--raio) var(--raio) 0; padding:18px 20px;
}
.suas b{display:block; font-family:var(--display); font-size:17.5px; line-height:1.35; margin:0 0 6px;}
.suas p{margin:0; font-size:15.5px; line-height:1.58; color:var(--suave);}

.hero h1 em{display:block; margin-top:6px; font-size:.82em; line-height:1.18;}