/* Páginas institucionais (quem-somos, metodologia, perguntas, contato): o mesmo mundo de papel da home.
   Tokens, botões, topo e rodapé vêm do comum.css. O fundo só enfeita: nada prende a rolagem. */
html{scroll-behavior:smooth}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.08; text-wrap:balance; margin:0; color:var(--floresta)}
h1{font-size:clamp(2.5rem,6vw,4.4rem); letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:1.45rem}
p{margin:0}
.eyebrow{font-size:1rem; letter-spacing:.18em; text-transform:uppercase; color:var(--verde); font-weight:700}
.mao{font-family:var(--mao); color:var(--verde); font-size:1.7rem; line-height:1.1}
.lead{font-size:1.2rem; color:var(--tinta-suave); max-width:34em}
main{position:relative; z-index:1}
.secao{padding-block:clamp(56px,8vw,104px)}
.secao-cab{display:flex; flex-direction:column; gap:12px; max-width:44em; margin-bottom:clamp(28px,4vw,44px)}

/* ---------- Fundo vivo ---------- */
.fundo{position:fixed; inset:0; z-index:-1; background:var(--papel); overflow:hidden; pointer-events:none}
.fundo .anel{position:absolute; border-radius:50%; border:clamp(28px,5vw,70px) solid rgba(12,51,34,.055);
  transform:rotate(calc(var(--rolagem,0) * 0.05deg)) translateY(calc(var(--rolagem,0) * -0.04px))}
.fundo .anel.a1{width:120vmax; aspect-ratio:1; top:-62vmax; left:-58vmax}
.fundo .anel.a2{width:80vmax; aspect-ratio:1; bottom:-48vmax; right:-40vmax; transform:rotate(calc(var(--rolagem,0) * -0.05deg)) translateY(calc(var(--rolagem,0) * 0.03px))}
.fundo .anel.a3{width:46vmax; aspect-ratio:1; top:34%; right:-16vmax; border-width:3px; border-style:dashed; border-color:rgba(143,176,164,.38); transform:none; animation:gira 90s linear infinite}
.fundo .luz{position:absolute; width:70vmax; aspect-ratio:1; border-radius:50%; left:50%; top:20%;
  background:radial-gradient(circle, rgba(232,201,122,.24), rgba(232,201,122,0) 62%); animation:passeia 26s ease-in-out infinite alternate}
.fundo .luz.l2{left:5%; top:55%; width:52vmax; background:radial-gradient(circle, rgba(143,176,164,.24), rgba(143,176,164,0) 62%); animation-duration:33s; animation-direction:alternate-reverse}
.fundo .doodle{position:absolute; opacity:.5; transform:translateY(calc(var(--rolagem,0) * var(--f) * -1px))}
.fundo .doodle svg{width:100%; height:auto; display:block; animation:flutua var(--t,20s) ease-in-out infinite alternate}
@keyframes passeia{0%{transform:translate(-80%,-30%)} 50%{transform:translate(-20%,10%)} 100%{transform:translate(-60%,30%)}}
@keyframes flutua{0%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(14px,-22px) rotate(6deg)}100%{transform:translate(-10px,12px) rotate(-2deg)}}
@keyframes gira{to{rotate:360deg}}
@keyframes entra{from{opacity:.001; transform:translateY(18px)}to{opacity:1; transform:none}}
@keyframes risca{to{stroke-dashoffset:0}}

/* ---------- Abertura ---------- */
.abre{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,5vw,64px); align-items:center;
  padding-block:clamp(36px,6vw,80px) clamp(40px,6vw,72px)}
.abre-texto{display:flex; flex-direction:column; gap:22px; animation:entra .8s ease both}
.abre .mao{transform:rotate(-2deg); margin-bottom:-8px}
.sublinha{position:relative; white-space:nowrap}
.sublinha svg{position:absolute; left:-2%; bottom:-.16em; width:104%; height:.32em; overflow:visible}
.sublinha path{fill:none; stroke:var(--ouro); stroke-width:5; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420; animation:risca 1.4s .5s ease forwards}
.fichas{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px}
.fichas li, .fichas a{border:1.5px solid var(--borda); background:var(--folha); border-radius:99px; padding:6px 16px; font-size:1rem; font-weight:500; color:var(--floresta); text-decoration:none}
.fichas a:hover{border-color:var(--verde)}
.acoes{display:flex; flex-wrap:wrap; gap:14px}

.colagem{position:relative; aspect-ratio:1; width:min(100%,500px); justify-self:center}
.colagem figure{position:absolute; margin:0; border-radius:18px; overflow:hidden; background:#efe8da; border:6px solid var(--folha);
  box-shadow:0 30px 50px -30px rgba(12,51,34,.6); animation:entra .9s ease both}
.colagem img{width:100%; height:100%; max-width:none; object-fit:cover; display:block}
.colagem .f1{width:70%; aspect-ratio:1; left:0; top:4%; rotate:-3deg; z-index:2}
.colagem .f2{width:52%; aspect-ratio:1; right:0; top:0; rotate:4deg; animation-delay:.12s}
.colagem .f3{width:50%; aspect-ratio:1; right:4%; bottom:0; rotate:-2deg; z-index:3; animation-delay:.24s}
.colagem .bilhete{position:absolute; left:4%; bottom:2%; z-index:4; background:var(--ouro-claro, #E8C97A); color:var(--floresta);
  font-family:var(--mao); font-size:1.45rem; padding:8px 16px; border-radius:6px; rotate:-4deg; box-shadow:0 12px 20px -12px rgba(0,0,0,.4)}
.foto-unica{margin:0; border-radius:20px; overflow:hidden; border:6px solid var(--folha); box-shadow:0 30px 50px -30px rgba(12,51,34,.6);
  rotate:1.5deg; justify-self:center; width:min(100%,480px); animation:entra .9s ease both}
.foto-unica img{width:100%; height:auto; display:block}

/* ---------- Números ---------- */
.numeros{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.numeros li{background:var(--folha); border:1px solid var(--borda); border-radius:18px; padding:20px 22px; display:flex; flex-direction:column; gap:6px}
.numeros strong{font-family:var(--serif); font-size:clamp(2.2rem,4vw,3rem); line-height:1; color:var(--floresta)}
.numeros span{color:var(--tinta-suave); line-height:1.35}

/* ---------- Texto + foto lado a lado ---------- */
.lado{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
.lado.inverte > :first-child{order:2}
.lado-texto{display:flex; flex-direction:column; gap:16px}
.lado-texto p{color:var(--tinta-suave); font-size:1.1rem; max-width:34em}

/* ---------- Cartões com foto ---------- */
.cartoes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:18px}
.cartao{background:var(--folha); border:1px solid var(--borda); border-radius:20px; overflow:hidden; display:flex; flex-direction:column;
  text-decoration:none; color:inherit; transition:transform .3s ease, box-shadow .3s ease}
a.cartao:hover{transform:translateY(-4px); box-shadow:0 24px 40px -28px rgba(12,51,34,.6)}
.cartao img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; background:#e6dccb}
.cartao-corpo{padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1}
.cartao-corpo p{color:var(--tinta-suave)}
.cartao-corpo .ir{margin-top:auto; padding-top:6px; font-weight:700; color:var(--verde)}

@media (min-width: 1100px){ .cartoes.cinco{grid-template-columns:repeat(5,minmax(0,1fr))} .cartoes.cinco .cartao-corpo{padding:16px 16px 20px} }

/* ---------- Passos numerados ---------- */
.passos{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; counter-reset:passo}
.passos li{position:relative; background:var(--folha); border:1px solid var(--borda); border-radius:18px; padding:58px 20px 22px; counter-increment:passo}
.passos li::before{content:counter(passo); position:absolute; top:-18px; left:20px; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:var(--floresta); color:var(--folha); font-family:var(--serif); font-size:1.6rem; font-weight:700;
  box-shadow:0 10px 20px -10px rgba(12,51,34,.7)}
.passos h3{font-size:1.3rem; margin-bottom:6px}
.passos p{color:var(--tinta-suave)}

/* ---------- Ícones em grade (princípios) ---------- */
.grade-icones{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.grade-icones li{list-style:none; background:var(--folha); border:1px solid var(--borda); border-radius:18px; padding:20px 22px; display:flex; flex-direction:column; gap:10px}
.grade-icones{padding:0; margin:0}
.icone{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(27,107,74,.1); color:var(--verde)}
.icone svg{width:26px; height:26px}
.grade-icones h3{font-size:1.25rem}
.grade-icones p{color:var(--tinta-suave)}

/* ---------- Estudos ---------- */
.estudos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.estudo{background:var(--folha); border:1px solid var(--borda); border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden}
.estudo::after{content:""; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%; border:16px solid rgba(232,201,122,.25)}
.estudo .selo{font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.2rem); font-weight:700; color:var(--floresta); line-height:1}
.estudo .selo small{display:block; font-family:var(--sans); font-size:.95rem; font-weight:500; color:var(--tinta-suave); margin-top:6px; letter-spacing:.02em}
.estudo h3{font-size:1.4rem}
.estudo p{color:var(--tinta-suave)}
.estudo .onde{font-size:.95rem; font-weight:700; color:var(--verde); letter-spacing:.06em; text-transform:uppercase}
.estudo a{margin-top:auto; font-weight:500}

/* ---------- Faixa escura de destaque ---------- */
.faixa-escura{background:var(--floresta); color:var(--folha); border-radius:28px; padding:clamp(28px,5vw,56px); display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:28px; align-items:center; position:relative; overflow:hidden}
.faixa-escura::before{content:""; position:absolute; width:340px; height:340px; border-radius:50%; right:-110px; bottom:-150px; border:40px solid rgba(253,250,245,.06)}
.faixa-escura h2{color:var(--folha)}
.faixa-escura p{color:rgba(253,250,245,.82); font-size:1.1rem}
.faixa-escura .mao{color:var(--ouro-claro, #E8C97A)}
.faixa-escura .btn-principal{background:var(--folha); color:var(--floresta)}
.faixa-escura .btn-secundario{border-color:var(--folha); color:var(--folha)}
.faixa-escura .acoes{justify-content:flex-end}

/* ---------- Aviso honesto e fontes ---------- */
.honesto{display:flex; gap:18px; align-items:flex-start; border:1.5px dashed var(--salvia); border-radius:20px; padding:22px 24px; background:rgba(253,250,245,.7)}
.honesto .icone{flex:none}
.honesto p{color:var(--tinta-suave)}
.fontes{font-size:1rem; color:var(--tinta-suave); padding-left:1.3em; display:flex; flex-direction:column; gap:10px; max-width:60em}
.fontes a{overflow-wrap:anywhere}

/* ---------- Perguntas ---------- */
.perguntas{display:flex; flex-direction:column; gap:12px; max-width:52em}
.perguntas details{background:var(--folha); border:1px solid var(--borda); border-radius:14px; padding:0 22px}
.perguntas summary{cursor:pointer; list-style:none; padding:20px 0; font-family:var(--serif); font-size:1.35rem; font-weight:600; color:var(--floresta);
  display:flex; justify-content:space-between; gap:16px; align-items:center}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+"; font-family:var(--sans); font-size:1.6rem; color:var(--ouro); transition:transform .3s; flex:none}
.perguntas details[open] summary::after{transform:rotate(45deg)}
.perguntas details p{padding-bottom:20px; color:var(--tinta-suave); max-width:65ch}
.grupo{scroll-margin-top:100px}
.grupo + .grupo{margin-top:clamp(40px,6vw,64px)}
.grupo-cab{display:flex; align-items:center; gap:14px; margin-bottom:18px}

/* ---------- Contato ---------- */
.email-cartao{background:var(--folha); border:1px solid var(--borda); border-radius:22px; padding:22px 24px; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 24px 40px -30px rgba(12,51,34,.55)}
.email-cartao .rotulo-email{font-size:1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--verde)}
.email-cartao a.email{font-family:var(--serif); font-size:clamp(1.5rem,3.4vw,2.1rem); font-weight:700; color:var(--floresta); overflow-wrap:anywhere; text-decoration:none}
.email-cartao .acoes .btn{min-height:52px}
.copiado{color:var(--verde); font-weight:500; min-height:1.4em}

@media (max-width: 960px){
  .numeros, .passos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .passos{row-gap:34px}
  .grade-icones, .estudos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 860px){
  .abre, .lado, .faixa-escura{grid-template-columns:minmax(0,1fr)}
  .lado.inverte > :first-child{order:0}
  .colagem{width:min(100%,420px)}
  .faixa-escura .acoes{justify-content:flex-start}
  .fundo .doodle{opacity:.36; scale:.75}
}
@media (max-width: 560px){
  .numeros, .grade-icones, .estudos, .passos{grid-template-columns:minmax(0,1fr)}
  .perguntas details{padding:0 16px}
  .perguntas summary{font-size:1.22rem}
  .colagem .bilhete{font-size:1.2rem}
}
@media (prefers-reduced-motion: reduce){
  .fundo *, .fundo .doodle svg, .abre-texto, .colagem figure, .foto-unica, .sublinha path{animation:none}
  .sublinha path{stroke-dashoffset:0}
  .fundo .anel, .fundo .doodle{transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Guias (/guias/<slug>): leitura confortável ---------- */
.migalha{display:flex; flex-wrap:wrap; gap:6px 10px; padding-top:20px; font-size:1rem; color:var(--tinta-suave)}
.migalha a{font-weight:500}
.guia-cab{display:flex; flex-direction:column; gap:16px; max-width:46em; padding-block:clamp(24px,4vw,48px) clamp(20px,3vw,32px); animation:entra .8s ease both}
.guia-cab h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.guia-meta{font-size:1rem; color:var(--tinta-suave)}
.guia-capa{margin:0 0 clamp(28px,4vw,48px); border-radius:22px; overflow:hidden; border:6px solid var(--folha); box-shadow:0 30px 50px -30px rgba(12,51,34,.6); max-width:980px}
.guia-capa img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block}
.guia-capa figcaption{padding:10px 16px; background:var(--folha); color:var(--tinta-suave); font-size:1rem}
.guia-grade{display:grid; grid-template-columns:minmax(0,230px) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:start}
.guia-sumario{position:sticky; top:100px; background:var(--folha); border:1px solid var(--borda); border-radius:18px; padding:18px 20px}
.guia-sumario ol{margin:10px 0 0; padding-left:1.2em; display:flex; flex-direction:column; gap:8px; font-size:1rem}
.guia-sumario a{color:var(--floresta); text-decoration:none}
.guia-sumario a:hover{text-decoration:underline}
.guia-texto{max-width:44em; font-size:1.16rem; line-height:1.7; color:var(--tinta)}
.guia-texto > * + *{margin-top:1em}
.guia-texto h2{font-size:clamp(1.7rem,3.4vw,2.3rem); margin-top:1.8em; scroll-margin-top:100px}
.guia-texto h3{font-size:1.4rem; margin-top:1.5em}
.guia-texto ul, .guia-texto ol{padding-left:1.3em}
.guia-texto li + li{margin-top:.45em}
.guia-abre{font-size:1.3rem; line-height:1.6; color:var(--floresta)}
.guia-dica{background:rgba(232,201,122,.22); border-left:5px solid var(--ouro); border-radius:0 14px 14px 0; padding:16px 20px}
.guia-fontes{margin-top:2.5em; padding-top:1.5em; border-top:1px solid var(--borda); font-size:1rem; color:var(--tinta-suave)}
.guia-fontes h2{font-size:1.5rem; margin-top:0}
.guia-fontes a{overflow-wrap:anywhere}
.guia-produto{display:flex; gap:18px; align-items:center; text-decoration:none; color:inherit; background:var(--folha); border:1.5px solid var(--borda);
  border-radius:18px; padding:14px; margin-block:1.4em; transition:transform .3s ease, box-shadow .3s ease}
.guia-produto:hover{transform:translateY(-3px); box-shadow:0 22px 36px -26px rgba(12,51,34,.6)}
.guia-produto img{width:110px; height:110px; object-fit:cover; border-radius:12px; flex:none; background:#efe8da}
.guia-produto-txt{display:flex; flex-direction:column; gap:4px; line-height:1.3}
.guia-produto-rotulo{font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; color:var(--verde); font-weight:700}
.guia-produto strong{font-family:var(--serif); font-size:1.3rem; color:var(--floresta)}
.guia-produto-preco{font-weight:700; color:var(--floresta)}
.guia-produto-ir{color:var(--verde); font-weight:700; font-size:1rem}
.guia-indicadas{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px}
.guia-indicadas .guia-produto{margin:0}
@media (max-width: 900px){
  .guia-grade{grid-template-columns:minmax(0,1fr)}
  .guia-sumario{position:static}
}
@media (max-width: 560px){ .guia-produto img{width:84px; height:84px} .guia-texto{font-size:1.1rem} }
.guia .cartoes, .lista-guias{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}