/* Fontes servidas deste mesmo dominio, nunca de terceiro. A Newsreader
   teve o eixo opsz fixado em 40, o que cortou 71% do arquivo. */
@font-face{font-family:'Karla';font-style:normal;font-weight:400 700;font-display:swap;src:url('fontes/karla-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Karla';font-style:normal;font-weight:400 700;font-display:swap;src:url('fontes/karla-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('fontes/newsreader-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('fontes/newsreader-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --verde:#1F3D2E;          /* accent unico */
  --verde-claro:#3D6B52;
  --papel:#FAFAF8;
  --papel-2:#FFFFFF;
  --tinta:#16201B;
  --suave:#5D6B62;
  --linha:rgba(31,61,46,.14);
  --areia:rgba(31,61,46,.05);
  --r:12px; --r-g:20px;
  --mola:cubic-bezier(.22,1,.36,1);
  --wa:5521967793405;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Karla',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.65;color:var(--tinta);background:var(--papel);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* grao: tira o aspecto de vetor chapado sem aparecer conscientemente */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--verde);outline-offset:3px;border-radius:3px}
/* atalho de teclado: fica fora da tela ate receber foco */
.pula{position:absolute;left:-9999px;top:0;z-index:300;background:var(--verde);color:var(--papel);padding:12px 20px;border-radius:0 0 var(--r) 0}
.pula:focus{left:0}

h1,h2,h3{font-family:'Newsreader',Georgia,serif;font-weight:400;line-height:1.1;letter-spacing:-.018em;text-wrap:balance}
p{text-wrap:pretty}

.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(22px,5vw,40px)}
.sec{padding:clamp(64px,9vw,118px) 0}
.sec-branco{background:var(--papel-2)}
.sec-verde{background:var(--verde);color:#F2F5F3}

.olho{
  display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--verde);margin-bottom:18px;
}
.olho::before{content:"";width:22px;height:1.5px;background:currentColor;flex:none;opacity:.55}
.sec-verde .olho{color:#A9C4B4}
.cab{max-width:620px;margin-bottom:clamp(38px,5vw,58px)}
.cab h2{font-size:clamp(28px,4.2vw,44px);margin-bottom:16px}
.cab p{color:var(--suave);font-size:17px}
.sec-verde .cab p{color:rgba(242,245,243,.76)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:15px 30px;border-radius:100px;font-weight:700;font-size:16px;
  transition:transform .3s var(--mola),box-shadow .3s var(--mola),background .2s,border-color .2s;
}
.btn-p{background:var(--verde);color:#F2F5F3;box-shadow:0 2px 6px rgba(31,61,46,.16),0 14px 30px -10px rgba(31,61,46,.3)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(31,61,46,.18),0 22px 44px -14px rgba(31,61,46,.38)}
.btn-p:active{transform:translateY(0) scale(.985)}
.btn-l{border:1.5px solid var(--linha);color:var(--tinta)}
.btn-l:hover{border-color:var(--verde);transform:translateY(-2px)}
.sec-verde .btn-l{border-color:rgba(242,245,243,.38);color:#F2F5F3}
.sec-verde .btn-l:hover{background:rgba(242,245,243,.1);border-color:rgba(242,245,243,.7)}

/* ---------- topo ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.hd.on{background:rgba(250,250,248,.9);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--linha)}
.hd-in{display:flex;align-items:center;gap:18px;height:74px}
.marca{font-family:'Newsreader',Georgia,serif;font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--verde)}
.marca small{display:block;font-family:'Karla',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--suave);margin-top:2px}
.nav{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav a{font-size:14.5px;font-weight:500;color:var(--suave);position:relative;padding:5px 0;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--verde);transition:width .3s var(--mola)}
.nav a:hover{color:var(--verde)}
.nav a:hover::after{width:100%}
.hd .btn{min-height:44px;padding:11px 22px;font-size:14.5px}

/* menu mobile: <dialog> nativo, sem biblioteca e sem estado em JS */
.burger{display:none;width:44px;height:44px;margin-left:auto;border:1px solid var(--linha);border-radius:10px;background:var(--papel-2);align-items:center;justify-content:center;cursor:pointer;flex:none}
.burger span,.burger span::before,.burger span::after{display:block;width:17px;height:1.5px;background:var(--tinta);border-radius:2px}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
/* <dialog> abre sem transicao nenhuma por padrao: showModal() so joga o
   elemento no top layer. Para animar e preciso transicionar display e overlay,
   que sao propriedades discretas -- dai o allow-discrete -- e declarar o estado
   inicial em @starting-style, porque o elemento nasce ja aberto no top layer.
   Sem suporte, volta a abrir instantaneo: ninguem perde funcionalidade. */
#menu{
  border:none;padding:0;max-width:none;width:100%;max-height:none;height:100%;
  background:var(--papel);color:var(--tinta);
  opacity:0;transform:translateY(-10px);
  transition:opacity .32s var(--mola),transform .38s var(--mola),
             overlay .38s allow-discrete,display .38s allow-discrete;
}
#menu[open]{opacity:1;transform:none}
@starting-style{#menu[open]{opacity:0;transform:translateY(-10px)}}

#menu::backdrop{
  background:rgba(22,32,27,0);
  transition:background .38s ease,overlay .38s allow-discrete,display .38s allow-discrete;
}
#menu[open]::backdrop{background:rgba(22,32,27,.5)}
@starting-style{#menu[open]::backdrop{background:rgba(22,32,27,0)}}
.menu-in{display:flex;flex-direction:column;height:100%;padding:24px clamp(22px,5vw,40px) 40px}
/* o filho do flex e o <form>, nao o botao: o align-self tem que vir nele */
.menu-in form{align-self:flex-end}
.menu-x{width:44px;height:44px;border:1px solid var(--linha);border-radius:10px;background:none;cursor:pointer;font-size:22px;line-height:1;color:var(--tinta)}
.menu-in nav{display:flex;flex-direction:column;justify-content:center;flex:1;gap:4px}
.menu-in nav a{
  font-family:'Newsreader',Georgia,serif;font-size:clamp(26px,7vw,34px);
  padding:12px 0;border-bottom:1px solid var(--linha);
  opacity:0;transform:translateY(12px);
}
#menu[open] .menu-in nav a{
  opacity:1;transform:none;
  transition:opacity .4s var(--mola),transform .4s var(--mola);
}
#menu[open] .menu-in nav a:nth-child(1){transition-delay:.08s}
#menu[open] .menu-in nav a:nth-child(2){transition-delay:.13s}
#menu[open] .menu-in nav a:nth-child(3){transition-delay:.18s}
#menu[open] .menu-in nav a:nth-child(4){transition-delay:.23s}
#menu[open] .menu-in nav a:nth-child(5){transition-delay:.28s}
#menu[open] .menu-in .btn{
  transition:opacity .4s var(--mola) .33s,transform .4s var(--mola) .33s,
             background .2s,border-color .2s,box-shadow .3s;
}
.menu-in .btn{opacity:0;transform:translateY(12px)}
#menu[open] .menu-in .btn{opacity:1;transform:none}

/* Sem isto a escada nao acontece: os links nascem junto com o dialog, que vem
   de display:none, entao ja aparecem no estado final e nao ha de onde
   interpolar. O @starting-style da o ponto de partida. */
@starting-style{
  #menu[open] .menu-in nav a{opacity:0;transform:translateY(12px)}
  #menu[open] .menu-in .btn{opacity:0;transform:translateY(12px)}
}
.menu-in .btn{margin-top:26px}

/* ---------- capa ---------- */
.capa{position:relative;padding:clamp(128px,17vw,176px) 0 clamp(64px,8vw,92px);overflow:hidden}
.capa::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 460px at 88% 6%,rgba(31,61,46,.09),transparent 68%),
    radial-gradient(520px 400px at 4% 92%,rgba(61,107,82,.07),transparent 72%);
  animation:deriva 46s ease-in-out infinite alternate;
}
@keyframes deriva{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,1.4%,0) scale(1.05)}}
.capa .wrap{position:relative;z-index:2}
.capa h1{font-size:clamp(38px,6.6vw,74px);line-height:1.02;max-width:15ch;margin-bottom:24px}
.capa h1 em{font-style:italic;color:var(--verde)}
.capa-lead{font-size:clamp(17px,1.9vw,20px);color:var(--suave);max-width:50ch;margin-bottom:34px}
.capa-act{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:34px}
.capa-nota{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:14.5px;color:var(--suave)}
.capa-nota span{display:inline-flex;align-items:center;gap:8px}
.capa-nota svg{color:var(--verde-claro);flex:none}

/* painel da capa: ocupa o lado direito que hoje e vazio por nao haver foto.
   Quando houver retrato, este painel desce para baixo dos botoes. */
.capa-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(30px,5vw,64px);align-items:center}
.capa-painel{background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--r-g);padding:clamp(26px,3vw,34px);box-shadow:0 2px 6px rgba(31,61,46,.04),0 18px 40px -18px rgba(31,61,46,.16)}
.capa-painel h2{font-size:17px;font-family:'Karla',sans-serif;font-weight:700;letter-spacing:.01em;margin-bottom:18px}
.pf{display:flex;gap:13px;padding:14px 0;border-top:1px solid var(--linha)}
.pf:first-of-type{border-top:none;padding-top:0}
.pf svg{color:var(--verde-claro);flex:none;margin-top:3px}
.pf b{display:block;font-size:15px;font-weight:700;margin-bottom:2px}
.pf span{font-size:14px;color:var(--suave);line-height:1.5}
@media (max-width:900px){.capa-grid{grid-template-columns:1fr}}

/* ---------- o que esta incluido ---------- */
.inclui{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,26px)}
.it{display:flex;gap:14px;align-items:flex-start;background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--r);padding:20px 22px;transition:transform .35s var(--mola),box-shadow .35s var(--mola)}
.it:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(31,61,46,.2)}
.sec-branco .it{background:var(--papel)}
.it svg{color:var(--verde);flex:none;margin-top:3px}
.it b{display:block;font-family:'Newsreader',Georgia,serif;font-size:18px;font-weight:500;margin-bottom:4px}
.it p{font-size:14.5px;color:var(--suave);line-height:1.55}

/* ---------- para quem e / nao e ---------- */
.escopo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,44px)}
.esc h3{font-size:20px;margin-bottom:16px;padding-bottom:14px;border-bottom:1.5px solid var(--linha)}
.esc ul{list-style:none}
.esc li{display:flex;gap:11px;padding:11px 0;font-size:15.5px;color:var(--suave);line-height:1.55}
.esc li svg{flex:none;margin-top:4px}
.esc-sim li svg{color:var(--verde)}
.esc-nao li svg{color:#A8A29A}

/* ---------- queixas ---------- */
/* minmax 280px e proposital: com o container em 1080px a grade resolve para
   3 colunas no maximo, e os 6 cartoes fecham duas linhas exatas. Com 240px
   ela virava 4 colunas e sobravam duas celulas vazias, que apareciam como
   buraco cinza porque o fundo do gap vaza onde nao ha item. */
.queixas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--r-g);overflow:hidden}
.q{background:var(--papel-2);padding:clamp(24px,3vw,32px);transition:background .3s}
.q:hover{background:var(--areia)}
.q b{display:block;font-family:'Newsreader',Georgia,serif;font-size:20px;font-weight:500;margin-bottom:8px}
.q p{font-size:15px;color:var(--suave);line-height:1.6}

/* ---------- como funciona ---------- */
/* ---------- passos ----------
   Linha do tempo vertical, nao grade de quatro colunas iguais. A grade
   punha os quatro passos lado a lado com o mesmo peso, o que some com a
   ideia de ordem -- e quatro cartoes identicos numa fileira sao o tell
   mais obvio de pagina montada por template.

   A mecanica (trilho vertical, numeral em cima dele, conteudo deslocado a
   direita) vem de um padrao de timeline do 21st.dev, reimplementada aqui:
   la e React com Tailwind e cartao de borda, e neste site nao ha cartao --
   o que separa um passo do outro e o espaco e o numeral. */
.passos{
  --px:clamp(42px,5vw,66px);
  position:relative;counter-reset:p;max-width:720px;
  padding-left:var(--px);border-left:1.5px solid var(--linha);
  display:flex;flex-direction:column;gap:clamp(28px,3.6vw,46px);
}
/* trilho verde por cima da borda clara: e ele que o anime.js desenha */
.passos::before{
  content:"";position:absolute;left:-1.5px;top:0;bottom:0;width:1.5px;
  background:var(--verde);transform:scaleY(var(--traco,1));transform-origin:top;
}
.passo{counter-increment:p;position:relative}
.passo::before{
  content:counter(p,decimal-leading-zero);
  position:absolute;left:calc(var(--px) * -1);top:-2px;
  transform:translateX(-50%);
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--papel);border:1.5px solid var(--linha);
  font-family:'Karla',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;color:var(--verde);
}
.sec-branco .passo::before{background:var(--papel-2)}
.passo h3{font-size:clamp(19px,2.1vw,24px);margin-bottom:9px}
.passo p{font-size:15.5px;color:var(--suave);max-width:54ch}

@media (max-width:560px){
  .passos{--px:34px}
  .passo::before{width:31px;height:31px;font-size:10.5px}
}

/* ---------- sobre ---------- */
.sobre{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,34px);align-items:start;max-width:760px}
.sobre img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;background:var(--areia)}
.sobre p{color:var(--suave);margin-bottom:14px}
.sobre p:last-child{margin-bottom:0}
.sobre strong{color:var(--tinta);font-weight:700}

/* ---------- faq ---------- */
.faq{max-width:760px;border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 42px 22px 0;position:relative;
  font-family:'Newsreader',Georgia,serif;font-size:19px;transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--verde)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--mola);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 0 24px;color:var(--suave);font-size:15.5px;max-width:64ch}

/* ---------- fechamento ---------- */
.fecha{text-align:center;max-width:620px;margin:0 auto}
.fecha h2{font-size:clamp(28px,4.4vw,46px);margin-bottom:16px}
.fecha p{color:rgba(242,245,243,.78);margin-bottom:30px}

/* ---------- rodape ---------- */
.rod{background:var(--papel-2);border-top:1px solid var(--linha);padding:clamp(40px,5vw,58px) 0 34px;font-size:14.5px;color:var(--suave)}
.rod-in{display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-start}
.rod a:hover{color:var(--verde)}
.rod-reg{font-size:13px;line-height:1.7;max-width:56ch;margin-top:22px;padding-top:20px;border-top:1px solid var(--linha)}
.rod-bs{margin-top:16px;display:flex;align-items:center;gap:6px;font-size:13px;flex-wrap:wrap}
.rod-bs a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--verde);transition:opacity .2s}
.rod-bs a:hover{opacity:.72}
.rod-bs img{width:18px;height:18px;flex:none}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .75s var(--mola),transform .75s var(--mola)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.07s}
.rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s}
.rv[data-d="4"]{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .capa::before{animation:none}
}
@media (max-width:900px){
  .nav,.hd .btn{display:none}
  .burger{display:flex}
}
@media (max-width:640px){
  .sobre{grid-template-columns:1fr}
  .capa h1{max-width:none}
  .capa-painel{margin-top:38px}
  .escopo{grid-template-columns:1fr}
}

/* ---------- link de continuidade entre paginas ---------- */
.mais{margin-top:clamp(28px,3.4vw,40px)}
.sobre .mais{margin-top:18px}
.mais a{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;color:var(--verde)}
.mais a span{transition:transform .32s var(--mola);display:inline-block}
.mais a:hover span{transform:translateX(5px)}

/* pagina atual */
.nav a[aria-current="page"]{color:var(--verde)}
.nav a[aria-current="page"]::after{width:100%}

/* ==========================================================================
   PAGINAS INTERNAS
   Capa verde no topo, para a interna se distinguir da home sem mudar de
   linguagem. O cabecalho e fixo e transparente no topo: sobre o verde, o
   texto dele precisa inverter, senao some.
   ========================================================================== */
.ph{
  background:var(--verde);color:#F2F5F3;position:relative;overflow:hidden;
  padding:clamp(122px,15vw,166px) 0 clamp(52px,6.5vw,76px);
}
.ph::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 440px at 86% 8%,rgba(255,255,255,.07),transparent 66%),
    radial-gradient(520px 400px at 6% 94%,rgba(0,0,0,.14),transparent 70%);
}
.ph .wrap{position:relative;z-index:2}
.ph-crumb{font-size:13.5px;color:rgba(242,245,243,.62);margin-bottom:22px}
.ph-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ph h1{font-size:clamp(32px,5.2vw,58px);max-width:18ch;margin-bottom:18px}
.ph-lead{font-size:clamp(16.5px,1.8vw,19px);color:rgba(242,245,243,.78);max-width:56ch}
.olho.on-dark{color:#A9C4B4}
.olho.on-dark::before{background:currentColor;opacity:.6}

/* cabecalho sobre a capa verde, enquanto nao rolou */
body.interna .hd:not(.on) .marca{color:#F2F5F3}
body.interna .hd:not(.on) .marca small{color:rgba(242,245,243,.6)}
body.interna .hd:not(.on) .nav a{color:rgba(242,245,243,.8)}
body.interna .hd:not(.on) .nav a:hover,
body.interna .hd:not(.on) .nav a[aria-current="page"]{color:#fff}
body.interna .hd:not(.on) .nav a::after{background:#F2F5F3}
body.interna .hd:not(.on) .btn-p{background:#F2F5F3;color:var(--verde);box-shadow:none}
body.interna .hd:not(.on) .burger{background:transparent;border-color:rgba(242,245,243,.34)}
body.interna .hd:not(.on) .burger span,
body.interna .hd:not(.on) .burger span::before,
body.interna .hd:not(.on) .burger span::after{background:#F2F5F3}

/* ---------- texto corrido de artigo ----------
   .artigo vive no MESMO elemento que .wrap. Se ele definir max-width, encolhe
   o proprio wrap, e o margin:0 auto do wrap centraliza esse bloco estreito --
   a secao sai desalinhada das outras. A medida de leitura vai nos paragrafos. */
.wrap.artigo{max-width:1080px}
.artigo p{margin-bottom:18px;color:var(--suave);font-size:16.5px;max-width:72ch}
.artigo p:last-of-type{margin-bottom:0}
.artigo strong{color:var(--tinta);font-weight:700}

/* ---------- sobre: retrato + texto ---------- */
.sobre-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,52px);align-items:start}
.sobre-foto img{width:120px;height:120px;border-radius:50%;object-fit:cover;background:var(--areia)}
@media (max-width:640px){.sobre-grid{grid-template-columns:1fr}}

/* ---------- bloco de pendencia (nao vai para producao assim) ---------- */
.pendente{border:1.5px dashed var(--linha);border-radius:var(--r);padding:24px 26px;max-width:72ch;background:var(--areia)}
.pendente b{display:block;font-family:'Newsreader',Georgia,serif;font-size:19px;font-weight:500;margin-bottom:8px}
.pendente p{font-size:15px;color:var(--suave);margin:0}

/* ---------- contato ---------- */
.contato-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,24px)}
.ct{display:flex;gap:16px;align-items:flex-start;background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--r-g);padding:26px 28px;transition:transform .35s var(--mola),box-shadow .35s var(--mola),border-color .3s}
.ct:hover{transform:translateY(-4px);box-shadow:0 18px 38px -16px rgba(31,61,46,.24);border-color:transparent}
.ct svg{color:var(--verde);flex:none;margin-top:2px}
.ct b{display:block;font-family:'Newsreader',Georgia,serif;font-size:20px;font-weight:500;margin-bottom:3px}
.ct span{display:block;font-size:16px;font-weight:700;color:var(--verde);margin-bottom:7px}
.ct em{display:block;font-style:normal;font-size:14.5px;color:var(--suave);line-height:1.55}

/* ==========================================================================
   TRANSICAO ENTRE PAGINAS
   Sao 5 arquivos separados e cada clique era recarga inteira com estouro de
   branco. @view-transition resolve no navegador, por ~300 bytes de CSS --
   biblioteca de transicao (barba.js, GSAP) custaria dezenas de KB.

   Melhoria progressiva: onde nao houver suporte, a navegacao volta a ser a
   de sempre e nada se perde.
   ========================================================================== */
@view-transition{navigation:auto}

/* o miolo sai apagando e entra subindo de leve: da direcao ao movimento sem
   virar efeito. A saida e mais curta que a entrada para nao dar sensacao de
   espera entre uma pagina e outra. */
::view-transition-old(root){animation:vtSai .2s ease both}
::view-transition-new(root){animation:vtEntra .34s cubic-bezier(.22,1,.36,1) both}
@keyframes vtSai{to{opacity:0}}
@keyframes vtEntra{from{opacity:0;transform:translateY(10px)}}

/* o cabecalho e o mesmo nas 5 paginas: nomeado, ele fica parado enquanto o
   miolo troca, em vez de piscar junto. A cor dele muda entre a home e as
   internas, e essa diferenca passa a ser uma transicao em vez de um corte. */
.hd{view-transition-name:cabecalho}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
}

/* ---------- posts do Instagram ----------
   Enquadrados como conteudo dela, nao como ilustracao do site: a identidade
   do perfil e mais quente que a daqui, e a moldura deixa isso explicito em
   vez de parecer emenda. */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2.2vw,24px);max-width:760px}
.post{
  display:block;border-radius:var(--r-g);overflow:hidden;background:var(--areia);
  border:1px solid var(--linha);
  transition:transform .4s var(--mola),box-shadow .4s var(--mola);
}
.post:hover{transform:translateY(-5px);box-shadow:0 20px 42px -18px rgba(31,61,46,.26)}
/* sem aspect-ratio forcado: as originais sao ~697x760 e ~686x760, e quadrar
   cortava a assinatura @nutri.sahtorres do rodape de cada post. As duas tem
   proporcao quase igual, entao a grade fica pareja sozinha. */
.post img{width:100%;height:auto;display:block}

/* ---------- formacao ---------- */
.form-grid{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:clamp(28px,4vw,60px);align-items:start}
.form-bloco h3{font-size:14px;font-family:'Karla',sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--verde);margin-bottom:20px;padding-bottom:12px;border-bottom:1.5px solid var(--linha)}
.fitem b{display:block;font-family:'Newsreader',Georgia,serif;font-size:21px;font-weight:500;margin-bottom:5px}
.fitem span{display:block;font-size:15.5px;color:var(--suave)}
.fitem em{display:block;font-style:normal;font-size:14px;color:var(--suave);opacity:.8;margin-top:6px;font-variant-numeric:tabular-nums}
.fcerts{list-style:none}
.fcerts li{padding:14px 0;border-bottom:1px solid var(--linha)}
.fcerts li:last-child{border-bottom:none}
.fcerts b{display:block;font-weight:500;font-size:16px;margin-bottom:3px;line-height:1.45}
.fcerts span{font-size:14px;color:var(--suave)}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}

/* ==========================================================================
   CAMADAS DE BIBLIOTECA
   Three.js, Motion e anime.js entram com trabalho proprio e carregamento por
   pagina -- a home nao paga pelos 148,7 KB do three.js, que so existe na
   pagina de saude intestinal.
   ========================================================================== */

/* --- canvas do campo de micro-organismos (three.js) --- */
#cena{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#cena canvas{display:block;width:100%;height:100%}
.ph.tem-cena .wrap{position:relative;z-index:2}

/* --- passos com anime.js ---
   So valem quando o JS assumiu: sem ele, .passos-js nunca entra no <html>
   e os passos ficam no estado final do CSS, visiveis e com a regra desenhada. */
/* anime.js desenha SO a regua. O conteudo dos passos ja e revelado pelo
   Motion, porque cada .passo tem classe .rv -- esconder os filhos aqui fazia
   os dois sistemas brigarem, e o resultado era numeral visivel com titulo
   invisivel no meio da rolagem. Cada biblioteca com um alvo. */
.passos-js .passos{--traco:0}

/* ==========================================================================
   PAGINAS INTERNAS
   Capa verde no topo, para a interna se distinguir da home sem mudar de
   linguagem. O cabecalho e fixo e transparente no topo: sobre o verde, o
   texto dele precisa inverter, senao some.
   ========================================================================== */
.ph{
  background:var(--verde);color:#F2F5F3;position:relative;overflow:hidden;
  padding:clamp(122px,15vw,166px) 0 clamp(52px,6.5vw,76px);
}
.ph::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 440px at 86% 8%,rgba(255,255,255,.07),transparent 66%),
    radial-gradient(520px 400px at 6% 94%,rgba(0,0,0,.14),transparent 70%);
}
.ph .wrap{position:relative;z-index:2}
.ph-crumb{font-size:13.5px;color:rgba(242,245,243,.62);margin-bottom:22px}
.ph-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ph h1{font-size:clamp(32px,5.2vw,58px);max-width:18ch;margin-bottom:18px}
.ph-lead{font-size:clamp(16.5px,1.8vw,19px);color:rgba(242,245,243,.78);max-width:56ch}
.olho.on-dark{color:#A9C4B4}
.olho.on-dark::before{background:currentColor;opacity:.6}

/* cabecalho sobre a capa verde, enquanto nao rolou */
body.interna .hd:not(.on) .marca{color:#F2F5F3}
body.interna .hd:not(.on) .marca small{color:rgba(242,245,243,.6)}
body.interna .hd:not(.on) .nav a{color:rgba(242,245,243,.8)}
body.interna .hd:not(.on) .nav a:hover,
body.interna .hd:not(.on) .nav a[aria-current="page"]{color:#fff}
body.interna .hd:not(.on) .nav a::after{background:#F2F5F3}
body.interna .hd:not(.on) .btn-p{background:#F2F5F3;color:var(--verde);box-shadow:none}
body.interna .hd:not(.on) .burger{background:transparent;border-color:rgba(242,245,243,.34)}
body.interna .hd:not(.on) .burger span,
body.interna .hd:not(.on) .burger span::before,
body.interna .hd:not(.on) .burger span::after{background:#F2F5F3}

/* ---------- texto corrido de artigo ----------
   .artigo vive no MESMO elemento que .wrap. Se ele definir max-width, encolhe
   o proprio wrap, e o margin:0 auto do wrap centraliza esse bloco estreito --
   a secao sai desalinhada das outras. A medida de leitura vai nos paragrafos. */
.wrap.artigo{max-width:1080px}
.artigo p{margin-bottom:18px;color:var(--suave);font-size:16.5px;max-width:72ch}
.artigo p:last-of-type{margin-bottom:0}
.artigo strong{color:var(--tinta);font-weight:700}

/* ---------- sobre: retrato + texto ---------- */
.sobre-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,52px);align-items:start}
.sobre-foto img{width:120px;height:120px;border-radius:50%;object-fit:cover;background:var(--areia)}
@media (max-width:640px){.sobre-grid{grid-template-columns:1fr}}

/* ---------- bloco de pendencia (nao vai para producao assim) ---------- */
.pendente{border:1.5px dashed var(--linha);border-radius:var(--r);padding:24px 26px;max-width:72ch;background:var(--areia)}
.pendente b{display:block;font-family:'Newsreader',Georgia,serif;font-size:19px;font-weight:500;margin-bottom:8px}
.pendente p{font-size:15px;color:var(--suave);margin:0}

/* ---------- contato ---------- */
.contato-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,24px)}
.ct{display:flex;gap:16px;align-items:flex-start;background:var(--papel-2);border:1px solid var(--linha);border-radius:var(--r-g);padding:26px 28px;transition:transform .35s var(--mola),box-shadow .35s var(--mola),border-color .3s}
.ct:hover{transform:translateY(-4px);box-shadow:0 18px 38px -16px rgba(31,61,46,.24);border-color:transparent}
.ct svg{color:var(--verde);flex:none;margin-top:2px}
.ct b{display:block;font-family:'Newsreader',Georgia,serif;font-size:20px;font-weight:500;margin-bottom:3px}
.ct span{display:block;font-size:16px;font-weight:700;color:var(--verde);margin-bottom:7px}
.ct em{display:block;font-style:normal;font-size:14.5px;color:var(--suave);line-height:1.55}

/* ==========================================================================
   TRANSICAO ENTRE PAGINAS
   Sao 5 arquivos separados e cada clique era recarga inteira com estouro de
   branco. @view-transition resolve no navegador, por ~300 bytes de CSS --
   biblioteca de transicao (barba.js, GSAP) custaria dezenas de KB.

   Melhoria progressiva: onde nao houver suporte, a navegacao volta a ser a
   de sempre e nada se perde.
   ========================================================================== */
@view-transition{navigation:auto}

/* o miolo sai apagando e entra subindo de leve: da direcao ao movimento sem
   virar efeito. A saida e mais curta que a entrada para nao dar sensacao de
   espera entre uma pagina e outra. */
::view-transition-old(root){animation:vtSai .2s ease both}
::view-transition-new(root){animation:vtEntra .34s cubic-bezier(.22,1,.36,1) both}
@keyframes vtSai{to{opacity:0}}
@keyframes vtEntra{from{opacity:0;transform:translateY(10px)}}

/* o cabecalho e o mesmo nas 5 paginas: nomeado, ele fica parado enquanto o
   miolo troca, em vez de piscar junto. A cor dele muda entre a home e as
   internas, e essa diferenca passa a ser uma transicao em vez de um corte. */
.hd{view-transition-name:cabecalho}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
}

/* ---------- posts do Instagram ----------
   Enquadrados como conteudo dela, nao como ilustracao do site: a identidade
   do perfil e mais quente que a daqui, e a moldura deixa isso explicito em
   vez de parecer emenda. */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2.2vw,24px);max-width:760px}
.post{
  display:block;border-radius:var(--r-g);overflow:hidden;background:var(--areia);
  border:1px solid var(--linha);
  transition:transform .4s var(--mola),box-shadow .4s var(--mola);
}
.post:hover{transform:translateY(-5px);box-shadow:0 20px 42px -18px rgba(31,61,46,.26)}
/* sem aspect-ratio forcado: as originais sao ~697x760 e ~686x760, e quadrar
   cortava a assinatura @nutri.sahtorres do rodape de cada post. As duas tem
   proporcao quase igual, entao a grade fica pareja sozinha. */
.post img{width:100%;height:auto;display:block}

/* ---------- formacao ---------- */
.form-grid{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;gap:clamp(28px,4vw,60px);align-items:start}
.form-bloco h3{font-size:14px;font-family:'Karla',sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--verde);margin-bottom:20px;padding-bottom:12px;border-bottom:1.5px solid var(--linha)}
.fitem b{display:block;font-family:'Newsreader',Georgia,serif;font-size:21px;font-weight:500;margin-bottom:5px}
.fitem span{display:block;font-size:15.5px;color:var(--suave)}
.fitem em{display:block;font-style:normal;font-size:14px;color:var(--suave);opacity:.8;margin-top:6px;font-variant-numeric:tabular-nums}
.fcerts{list-style:none}
.fcerts li{padding:14px 0;border-bottom:1px solid var(--linha)}
.fcerts li:last-child{border-bottom:none}
.fcerts b{display:block;font-weight:500;font-size:16px;margin-bottom:3px;line-height:1.45}
.fcerts span{font-size:14px;color:var(--suave)}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}

/* ==========================================================================
   CAMADAS DE BIBLIOTECA
   Three.js, Motion e anime.js entram com trabalho proprio e carregamento por
   pagina -- a home nao paga pelos 148,7 KB do three.js, que so existe na
   pagina de saude intestinal.
   ========================================================================== */

/* --- canvas do campo de micro-organismos (three.js) --- */
#cena{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#cena canvas{display:block;width:100%;height:100%}
.ph.tem-cena .wrap{position:relative;z-index:2}

/* --- passos com anime.js ---
   So valem quando o JS assumiu: sem ele, .passos-js nunca entra no <html>
   e os passos ficam no estado final do CSS, visiveis e com a regra desenhada. */
/* anime.js desenha SO o trilho. O conteudo dos passos ja e revelado pelo
   Motion, porque cada .passo tem classe .rv -- esconder os filhos aqui fazia
   os dois sistemas brigarem, e o resultado era numeral visivel com titulo
   invisivel no meio da rolagem. Cada biblioteca com um alvo. */

/* ==========================================================================
   QUEBRA DE UNIFORMIDADE
   O que denunciava template nao era a paleta: era o ritmo. Toda secao com
   eyebrow + titulo + grade uniforme, tudo comecando no mesmo x, todos os
   cartoes do mesmo peso, nenhuma escala destoando. Isto quebra isso em
   quatro pontos, sem trocar a linguagem.
   ========================================================================== */

/* 1. CONTRASTE DE ESCALA. O h1 da capa passa a ser desproporcional ao resto
      -- e a unica coisa grande da pagina, e por isso comanda. */
/* 92px mandava bem no 1440 e jogava o CTA abaixo da dobra no 1366x768, que
   e a resolucao de notebook mais comum. Escala editorial nao vale um botao
   de agendamento que ninguem ve. */
.capa h1{font-size:clamp(42px,6.4vw,78px);line-height:.98;letter-spacing:-.032em;max-width:13ch}
.capa{padding-top:clamp(112px,13vw,132px)}
.capa-lead{margin-bottom:28px}
.capa h1 em{font-style:italic}
.capa-lead{font-size:clamp(17px,1.9vw,19.5px);max-width:44ch}

/* 2. ASSIMETRIA. A grade de queixas deixa de ser 3x2 igual: o primeiro
      cartao ocupa duas colunas e ganha respiro, os outros correm menores.
      Some a simetria que faz o olho ler "gerado". */
/* A conta precisa fechar em multiplos de 6, senao sobra celula vazia e o
   fundo do gap vaza como bloco cinza -- foi o que aconteceu na primeira
   tentativa, com 3+3+2+2+2+2 = 14 colunas numa grade de 6.
   Com 6 itens: duas de 3 (linha 1), tres de 2 (linha 2), uma de 6 (linha 3).
   6 + 6 + 6, sem buraco, e assimetrico de verdade. */
@media (min-width:860px){
  .queixas{grid-template-columns:repeat(6,1fr)}
  .queixas .q:nth-child(1),.queixas .q:nth-child(2){grid-column:span 3}
  .queixas .q:nth-child(3),.queixas .q:nth-child(4),.queixas .q:nth-child(5){grid-column:span 2}
  .queixas .q:nth-child(6){grid-column:span 6}
  .queixas .q:nth-child(1) b,.queixas .q:nth-child(2) b{font-size:25px}
  .queixas .q:nth-child(1) p,.queixas .q:nth-child(2) p{font-size:16px;max-width:38ch}
  .queixas .q:nth-child(6){display:flex;gap:28px;align-items:baseline}
  .queixas .q:nth-child(6) b{font-size:25px;flex:0 0 30%;margin-bottom:0}
  .queixas .q:nth-child(6) p{max-width:52ch}
}

/* 3. (removido) O numeral editorial solto em cima de uma regua por passo
      foi substituido pela linha do tempo: o numeral agora mora no trilho
      vertical, definido junto de .passos. Os dois estilos no mesmo
      .passo::before brigavam, e este, por vir depois, ganhava. */

/* 4. SANGRIA. A faixa de fechamento deixa de respeitar o container e vai de
      borda a borda, com o texto ainda alinhado ao resto. Um ponto so de
      ruptura -- se tudo sangra, sangrar deixa de significar alguma coisa. */
.sec-verde{position:relative}
.sec-verde::before{
  content:"";position:absolute;inset:0;background:var(--verde);
  width:100vw;left:50%;transform:translateX(-50%);
}
.sec-verde > *{position:relative;z-index:1}

/* ---------- relatos ----------
   Padrao editorial: a citacao carrega tudo, sem foto e sem nome. Aqui isso
   nao e escolha estetica apenas -- foto de paciente no site de profissional
   de saude e exposicao que nao se desfaz, e nome tambem identifica. */
/* Relato: uma citacao em escala editorial, nao grade de cartoes.
   Grade faz contar, e duas citacoes lidas como conjunto viram escassez.
   A segunda entra como eco, em escala muito menor, para as duas nao
   formarem par -- contraste de escala no lugar de repeticao.
   Os spans fecham em 12 (8+4): grade que nao fecha deixa celula vazia. */
.relato{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(22px,3vw,40px);align-items:end}
.citacao{grid-column:1/span 8;position:relative;margin:0}
.citacao::before{
  content:"\201C";position:absolute;left:-.05em;top:-.40em;
  font-family:'Newsreader',Georgia,serif;font-size:clamp(84px,11vw,150px);
  line-height:1;color:var(--verde);opacity:.09;pointer-events:none;
}
.citacao blockquote{margin:0}
.citacao blockquote p{
  font-family:'Newsreader',Georgia,serif;position:relative;
  font-size:clamp(29px,5vw,54px);line-height:1.14;letter-spacing:-.025em;
  text-wrap:balance;margin:0 0 22px;
}
.citacao figcaption{font-size:13px;line-height:1.6;color:var(--suave);max-width:38ch}
.eco{
  grid-column:9/span 4;margin:0;padding-left:clamp(14px,1.6vw,20px);
  border-left:2px solid var(--linha);
  font-family:'Newsreader',Georgia,serif;font-size:clamp(17px,1.8vw,21px);
  line-height:1.35;color:var(--suave);
}
@media (max-width:820px){
  .relato{grid-template-columns:1fr;gap:26px}
  .citacao,.eco{grid-column:1/-1}
}

/* ---------- lema ----------
   Fala dela, nao de paciente. Sem citacao decorativa e centrado, para nao
   se confundir com os relatos acima. */
.lema{max-width:860px;margin:0 auto;text-align:center}
.lema blockquote p{
  font-family:'Newsreader',Georgia,serif;font-size:clamp(24px,3.6vw,42px);
  line-height:1.22;letter-spacing:-.02em;text-wrap:balance;margin-bottom:20px;
}
.lema em{font-style:italic;color:var(--verde)}
.lema figcaption{font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--suave)}

/* ==========================================================================
   AUDITORIA DE SETEMBRO
   Medido: padding identico em seis secoes seguidas da home, 60 a 80% dos
   titulos no mesmo x, e em atendimento seis cartoes iguais numa grade.
   ========================================================================== */

/* Um padrao so para "o que inclui" e para o FAQ: o tema a esquerda, o
   conteudo a direita. Tira a grade de cartoes e desloca a margem. */
.grupo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(16px,4vw,64px);padding:clamp(24px,3vw,36px) 0;border-top:1px solid var(--linha)}
.grupo-tema h3{font-size:clamp(20px,2.2vw,26px);margin-bottom:6px}
.grupo-tema p{font-size:14.5px;color:var(--suave);max-width:30ch}
.grupo-lista{list-style:none;margin:0;padding:0}
.grupo-lista li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid var(--linha)}
.grupo-lista li:first-child{padding-top:2px}
.grupo-lista li svg{color:var(--verde);flex:none;margin-top:4px}
.grupo-lista li b{display:block;font-family:'Newsreader',Georgia,serif;font-size:18px;
  font-weight:500;margin-bottom:3px}
.grupo-lista li p{font-size:15px;color:var(--suave);line-height:1.55;max-width:58ch}
/* o FAQ herda .faq (details e summary), mas sem a largura maxima da lista linear */
.grupos.faq{max-width:none;border-top:0}
.grupos.faq .grupo-lista details:first-child summary{padding-top:4px}
@media (max-width:760px){ .grupo{grid-template-columns:1fr} }

/* Home: a linha do tempo leva o cabecalho para uma coluna propria, que fica
   parada enquanto os passos rolam. Unica secao cujo conteudo nao comeca no
   mesmo x das outras. */
@media (min-width:960px){
  #como .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    gap:clamp(40px,5vw,88px);align-items:start}
  #como .cab{position:sticky;top:112px;margin-bottom:0}
  #como .passos,#como .mais{grid-column:2}
}

/* Padding variado: as secoes brancas ja alternavam com as de papel, mas
   com o mesmo respiro. Branca mais densa, papel mais arejada -- e o ritmo
   passa a existir em todas as paginas sem regra por pagina. A primeira
   secao depois do cabecalho da pagina encosta nele. */
.sec-branco{padding-block:clamp(52px,7vw,92px)}
.ph + .sec{padding-top:clamp(44px,5.5vw,76px)}
/* e na home, dois pontos fora do padrao: */
#sobre{padding-block:clamp(48px,6vw,84px)}
#relatos{padding-block:clamp(88px,12vw,168px)}
#principio{padding-top:clamp(36px,4.5vw,60px)}