/* Carolina Lopes | folha de estilo
   Organizada por secções. Uma regra por seletor, sem sobreposições. */

/* ---------- 1. Variáveis ---------- */
:root{
  --fundo:#E8E8ED;
  --fundo-2:#CEC0DD;
  --tinta:#151718;
  --tinta-suave:#54545E;
  --linha:#CFCFD8;
  --linha-forte:#B9A9CC;
  --lima:#E8F1AB;
  --alerta:#8A3350;

  --raio:16px;
  --raio-pequeno:10px;
  --largura:41rem;
  --margem:1.4rem;

  --sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --display:'Archivo',system-ui,sans-serif;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html{overflow-x:hidden}
body{max-width:100%;overflow-x:clip}

body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto}
table{max-width:100%}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  font-stretch:125%;
  letter-spacing:-.015em;
  overflow-wrap:break-word;
}
h1{font-size:clamp(2rem,7.5vw,2.9rem);line-height:1.08;margin:0 0 1.2rem}
h2{font-size:clamp(1.35rem,5vw,1.6rem);line-height:1.2;margin:2.8rem 0 1rem}
h3{font-size:1.1rem;line-height:1.35;margin:0 0 .6rem}

p{margin:0 0 1.1rem;overflow-wrap:break-word}
ul,ol{margin:0 0 1.1rem;padding-left:1.2rem}
li{margin-bottom:.4rem}

a{color:var(--tinta);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{background:var(--lima)}

:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

/* ---------- 3. Estrutura ---------- */
.env{
  width:100%;
  max-width:var(--largura);
  margin:0 auto;
  padding-left:var(--margem);
  padding-right:var(--margem);
}
.abertura{padding-top:3rem;padding-bottom:1.8rem}
main{display:block;padding-bottom:2rem}

.topo{border-bottom:1px solid var(--linha)}
.topo .env{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding-top:1rem;
  padding-bottom:1rem;
}
.marca{
  font-family:var(--display);
  font-stretch:125%;
  font-weight:700;
  font-size:.88rem;
  letter-spacing:.03em;
  text-decoration:none;
  white-space:nowrap;
}
.marca:hover{background:none}
.topo nav{display:flex;gap:.85rem;align-items:center}
.topo nav a.nav-botao{
  background:var(--tinta);
  color:var(--lima);
  font-weight:600;
  padding:.45rem .95rem;
  border-radius:999px;
}
.topo nav a.nav-botao:hover,.topo nav a.nav-botao[aria-current="page"]{background:#2E2E30;color:var(--lima)}
.topo nav a{
  font-size:.82rem;
  font-weight:500;
  color:var(--tinta-suave);
  text-decoration:none;
  white-space:nowrap;
}
.topo nav a:hover,.topo nav a[aria-current="page"]{color:var(--tinta);background:none}
.topo nav a[aria-current="page"]{font-weight:600}

footer{
  border-top:1px solid var(--linha);
  margin-top:2.5rem;
  padding:2rem 0 3rem;
  font-size:.82rem;
  color:var(--tinta-suave);
}
footer a{color:var(--tinta-suave)}
footer p{margin:0 0 .5rem}

/* ---------- 4. Tipografia auxiliar ---------- */
.resumo{font-size:1.08rem;color:var(--tinta-suave);margin-bottom:1.5rem}
.nota{font-size:.86rem;line-height:1.55;color:var(--tinta-suave)}
.assinatura{
  display:flex;align-items:center;gap:.9rem;
  border-top:1px solid var(--linha);
  padding-top:1rem;font-size:.83rem;color:var(--tinta-suave);
}
.assinatura p{margin:0}
.assinatura strong{color:var(--tinta)}

.etiqueta{
  display:inline-block;
  background:var(--lima);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.04em;
  padding:.3rem .8rem;
  border-radius:999px;
  margin:0 0 1rem;
}
mark,.destaque{
  background:var(--lima);
  color:var(--tinta);
  padding:.08em .35em;
  border-radius:999px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ---------- 5. Botões ---------- */
.botao{
  display:inline-block;
  background:var(--tinta);
  color:var(--lima);
  font-family:var(--sans);
  font-weight:600;
  font-size:.95rem;
  line-height:1.3;
  text-decoration:none;
  text-align:center;
  padding:.85rem 1.6rem;
  border:none;
  border-radius:999px;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}
.botao:hover{background:#2E2E30}
.botao:active{transform:scale(.97)}
.botao.secundario{background:transparent;color:var(--tinta);border:1.5px solid var(--tinta)}
.botao.secundario:hover{background:var(--lima)}
.preco{font-weight:600;font-size:.95rem;margin-bottom:1.2rem}
.botoes{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1rem}

/* Passos numerados (Como funciona) */
.passo h3 .n{color:var(--tinta-suave);font-variant-numeric:tabular-nums;margin-right:.5rem}
.frase{font-family:var(--display);font-stretch:125%}

/* ---------- 6. Cartões e listas ---------- */
.blocos{border-top:1px solid var(--linha)}
.bloco{border-bottom:1px solid var(--linha);padding:1.7rem 0}
.bloco h3{margin-bottom:.45rem}
.bloco p{font-size:.96rem;margin:0}

.lista{border-top:1px solid var(--linha);margin-top:1.6rem}
.cartao{
  display:block;
  border-bottom:1px solid var(--linha);
  padding:1.5rem 0;
  text-decoration:none;
}
.cartao:hover{background:none}
.cartao:hover h3{background:var(--lima)}
.cartao h3{display:inline;font-size:1.1rem}
.cartao p{font-size:.94rem;color:var(--tinta-suave);margin:.5rem 0 0}
.cartao .etiqueta{margin-bottom:.5rem}
.cartao .acao{
  display:inline-block;margin-top:.7rem;
  font-size:.88rem;font-weight:600;
}

.destaque-bloco{
  background:var(--fundo-2);
  border:1px solid var(--linha-forte);
  border-radius:var(--raio);
  padding:1.8rem 1.5rem;
  margin:2.5rem 0;
}
.destaque-bloco :last-child{margin-bottom:0}

.cta{
  border:1.5px solid var(--tinta);
  border-radius:var(--raio);
  padding:1.8rem 1.5rem;
  margin:2.8rem 0;
}
.cta h2{margin-top:0;font-size:1.25rem}
.cta p{font-size:.96rem}
.cta .botao+.botao{margin-left:.6rem}

/* ---------- 7. Filtro de categorias ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0}
.filtro{
  font-family:var(--sans);
  font-size:.82rem;font-weight:600;
  padding:.4rem .9rem;
  border:1.5px solid var(--linha-forte);
  border-radius:999px;
  background:transparent;color:var(--tinta);
  cursor:pointer;
}
.filtro[aria-pressed="true"]{background:var(--lima);border-color:var(--lima)}

/* ---------- 8. Conteúdo de guia ---------- */
.ponto{border-top:1px solid var(--linha);padding:1.6rem 0}
.ponto:last-of-type{border-bottom:1px solid var(--linha)}
.ponto h3{font-family:var(--display);font-stretch:125%}
.ponto h3 .n{color:var(--tinta-suave);font-variant-numeric:tabular-nums;margin-right:.5rem}
.ponto p{font-size:.96rem;margin-bottom:.7rem}
.ponto p:last-child{margin-bottom:0}
.sinal{
  background:var(--lima);
  border-radius:var(--raio-pequeno);
  padding:.8rem 1rem;
  font-size:.92rem;
  line-height:1.5;
  margin:.6rem 0 0;
}
.tabela{width:100%;border-collapse:collapse;font-size:.86rem;margin:1.3rem 0;display:block;overflow-x:auto}
.tabela th{text-align:left;font-weight:600;padding:.6rem .5rem;border-bottom:2px solid var(--tinta);white-space:nowrap}
.tabela td{padding:.6rem .5rem;border-bottom:1px solid var(--linha);font-variant-numeric:tabular-nums}

/* ---------- 9. Formulários e ferramentas ---------- */
.campo{margin-bottom:1rem}
.campo label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem}
.campo .ajuda{display:block;font-size:.8rem;font-weight:400;color:var(--tinta-suave);margin-top:.15rem}
.campo input,.campo select,.campo textarea{
  width:100%;
  padding:.75rem .85rem;
  border:1.5px solid var(--linha-forte);
  border-radius:var(--raio-pequeno);
  background:var(--fundo);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:1rem;
  font-variant-numeric:tabular-nums;
}
.campo textarea{min-height:7rem;resize:vertical;font-variant-numeric:normal}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--tinta)}
.linha-campos{display:flex;flex-wrap:wrap;gap:.9rem}
.linha-campos .campo{flex:1 1 9rem;margin-bottom:0}
.linha-campos+.linha-campos{margin-top:1rem}

.ferramenta{
  background:var(--fundo-2);
  border:1px solid var(--linha-forte);
  border-radius:var(--raio);
  padding:1.6rem 1.4rem;
  margin:2rem 0;
}
.ferramenta h2{margin-top:0}
.resultado{border-top:2px solid var(--tinta);padding-top:1.2rem;margin-top:1.4rem}
.valor{
  display:inline-block;
  background:var(--lima);
  font-family:var(--display);
  font-stretch:125%;
  font-weight:700;
  font-size:2rem;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  padding:.12em .5em;
  border-radius:999px;
  margin:0;
}
.rotulo{font-size:.92rem;color:var(--tinta-suave);margin:.5rem 0 0}
.leitura{font-size:.95rem;line-height:1.55;margin:.9rem 0 0}
.erro{font-size:.88rem;color:var(--alerta);margin:.6rem 0 0}

/* ---------- 10. Checklist ---------- */
.checklist{
  background:var(--fundo-2);
  border:1px solid var(--linha-forte);
  border-radius:var(--raio);
  padding:1.8rem 1.4rem;
  margin:2.5rem 0;
}
.checklist h2{margin-top:0}
.item{display:flex;gap:.85rem;align-items:flex-start;padding:.6rem 0;border-bottom:1px solid var(--linha-forte);cursor:pointer}
.item:last-of-type{border-bottom:none}
.item input{
  appearance:none;-webkit-appearance:none;
  flex:0 0 1.15rem;height:1.15rem;margin:.32rem 0 0;
  border:1.5px solid var(--tinta-suave);border-radius:50%;
  background:transparent;cursor:pointer;
}
.item input:checked{background:var(--tinta);border-color:var(--tinta)}
.item input:checked::after{
  content:"";display:block;width:.34rem;height:.62rem;margin:.08rem auto 0;
  border:solid var(--lima);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.item span{font-size:.95rem;line-height:1.45}
.contagem{
  font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:2.2rem;line-height:1;font-variant-numeric:tabular-nums;margin:0;
}

/* ---------- 11. Perguntas frequentes ---------- */
.faq{border-bottom:1px solid var(--linha)}
.faq:first-of-type{border-top:1px solid var(--linha)}
.faq summary{
  font-weight:600;font-size:.98rem;line-height:1.4;
  padding:1rem 2.2rem 1rem 0;
  cursor:pointer;list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.3rem;top:.9rem;
  font-size:1.35rem;font-weight:500;line-height:1;color:var(--tinta-suave);
}
.faq[open] summary{background:var(--lima);border-radius:999px;padding-left:.9rem;padding-right:2.4rem}
.faq[open] summary::after{content:"\2013";right:1rem}
.faq p{font-size:.95rem;color:var(--tinta-suave);margin:.3rem 0 1.1rem}

/* ---------- 12. Retrato ---------- */
.retrato{
  width:104px;height:104px;flex:0 0 104px;
  border-radius:50%;overflow:hidden;position:relative;
  background:var(--fundo-2);
  display:flex;align-items:center;justify-content:center;
}
.retrato span{font-family:var(--display);font-weight:700;font-size:1.5rem}
.retrato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.retrato.pequeno{width:46px;height:46px;flex:0 0 46px}
.retrato.pequeno span{font-size:.85rem}
.com-retrato{display:flex;gap:1.2rem;align-items:flex-start}

/* ---------- 13. Movimento ---------- */
.revela{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.revela.visivel{opacity:1;transform:none}

/* ---------- 14. Mobile ---------- */
@media (max-width:600px){
  body{font-size:17px}
  .topo .env{padding-top:.8rem;padding-bottom:.8rem;flex-wrap:wrap;row-gap:.6rem}
  .topo nav{width:100%;justify-content:space-between}
  .topo nav{gap:.7rem}
  .topo nav a{font-size:.78rem}
  .topo nav a.nav-botao{padding:.4rem .75rem}
  .so-largo{display:none}
  .marca{font-size:.8rem}
  .botoes .botao{display:block;width:100%}
  h2{margin-top:2.2rem}
  .cta,.ferramenta,.checklist,.destaque-bloco{padding-left:1.2rem;padding-right:1.2rem}
  .cta .botao{display:block}
  .cta .botao+.botao{margin-left:0;margin-top:.6rem}
  .com-retrato{flex-direction:column;gap:1rem}
  .assinatura{flex-direction:row}
  .linha-campos .campo{flex:1 1 100%}
}

/* ---------- 15. Interação e movimento ---------- */
/* Barra de progresso de leitura */
.progresso{
  position:fixed;top:0;left:0;height:3px;width:100%;
  background:var(--tinta);transform-origin:0 50%;transform:scaleX(0);
  z-index:20;pointer-events:none;
}

/* Cabeçalho fixo que ganha fundo ao fazer scroll */
.topo{position:sticky;top:0;z-index:10;background:var(--fundo);transition:box-shadow .25s ease,background .25s ease}
.topo.rolado{background:rgba(232,232,237,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 24px -14px rgba(21,23,24,.35)}

/* Título a entrar palavra a palavra */
.palavra{display:inline-block;opacity:0;transform:translateY(.45em);animation:sobe .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes sobe{to{opacity:1;transform:none}}

/* Revelação com entrada escalonada */
.revela{transition-delay:var(--atraso,0s)}

/* Marcador que se pinta quando aparece */
mark{background:linear-gradient(var(--lima),var(--lima)) no-repeat 0 0/0% 100%;transition:background-size .7s cubic-bezier(.2,.7,.2,1) .15s}
mark.pintado{background-size:100% 100%}

/* Passos numerados que acendem */
.passo h3 .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.9rem;height:1.9rem;border-radius:50%;
  border:1.5px solid var(--tinta-suave);font-size:.9rem;
  transition:background .4s ease,border-color .4s ease,color .4s ease,transform .4s ease;
}
.passo.visivel h3 .n{background:var(--lima);border-color:var(--lima);color:var(--tinta);transform:rotate(-8deg)}

/* Luz que segue o cursor nos blocos de destaque */
.cta,.ferramenta,.destaque-bloco{position:relative;overflow:hidden}
.cta::before,.ferramenta::before,.destaque-bloco::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(232,241,171,.8),transparent 70%);
  transition:opacity .3s ease;
}
.cta > *,.ferramenta > *,.destaque-bloco > *{position:relative}

@media (hover:hover) and (pointer:fine){
  .cta:hover::before,.ferramenta:hover::before,.destaque-bloco:hover::before{opacity:1}

  /* Cartões: barra lateral, deslize e seta */
  .cartao{position:relative;transition:padding-left .3s cubic-bezier(.2,.7,.2,1)}
  .cartao::before{
    content:"";position:absolute;left:0;top:1.5rem;bottom:1.5rem;width:4px;border-radius:4px;
    background:var(--tinta);transform:scaleY(0);transform-origin:50% 0;
    transition:transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .cartao:hover{padding-left:1.1rem}
  .cartao:hover::before{transform:scaleY(1)}
  .cartao h3{transition:background .2s ease}
  .cartao .acao{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .cartao:hover .acao{transform:translateX(6px)}

  /* Botões: sobem ligeiramente */
  .botao{transition:background .18s ease,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
  .botao:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(21,23,24,.6)}
  .botao:active{transform:translateY(0) scale(.97)}
  .topo nav a.nav-botao{transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s ease}
  .topo nav a.nav-botao:hover{transform:translateY(-1px)}

  /* Links do menu: sublinhado que cresce */
  .topo nav a:not(.nav-botao){position:relative}
  .topo nav a:not(.nav-botao)::after{
    content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--lima);
    transform:scaleX(0);transform-origin:0 50%;transition:transform .25s ease;
  }
  .topo nav a:not(.nav-botao):hover::after,.topo nav a[aria-current="page"]:not(.nav-botao)::after{transform:scaleX(1)}

  /* Retrato com leve inclinação */
  .retrato{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .com-retrato:hover .retrato{transform:rotate(-4deg) scale(1.04)}

  /* Filtros */
  .filtro{transition:background .2s ease,border-color .2s ease,transform .2s ease}
  .filtro:hover{transform:translateY(-1px);border-color:var(--tinta)}
}

/* Resultado das calculadoras a saltar quando muda */
.valor.salta{animation:salta .45s cubic-bezier(.2,.7,.2,1)}
@keyframes salta{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .revela{opacity:1;transform:none}
  .palavra{opacity:1;transform:none}
  mark{background-size:100% 100%}
  .progresso{display:none}
}