/* =========================================================
   Espaço Terapêutico Crescer  ·  Piabetá, Magé/RJ
   Sistema visual v2 "Jardim Editorial"
   Verde da marca + creme de papel + acentos da árvore
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* base */
  --papel:      #FAF6EE;
  --papel-2:    #F2ECDF;
  --sage:       #E9F0E2;
  --sage-2:     #DDE9D4;
  --tinta:      #1B2620;
  --tinta-2:    #47554C;
  --tinta-3:    #71806F;

  /* verde da marca (Instagram e wordmark) */
  --verde-900:  #163B2A;
  --verde-800:  #1E4D36;
  --verde-700:  #256B45;
  --verde-600:  #2A7A50;
  --verde-500:  #3E8A5C;
  --verde-cl:   #E3EFDF;

  /* acentos da árvore */
  --azul:       #2F7FD3;
  --azul-esc:   #1D5FA6;
  --azul-cl:    #E3EEFA;
  --amarelo:    #F0B02E;
  --amarelo-cl: #FBF0D7;
  --coral:      #E2552F;
  --coral-cl:   #FAE6DE;
  --tronco:     #5A4130;

  --linha:      #DFD8C8;
  --linha-sage: #CBDDC2;

  --sombra:     0 1px 2px rgba(22,59,42,.05), 0 10px 28px -14px rgba(22,59,42,.22);
  --sombra-alt: 0 2px 4px rgba(22,59,42,.06), 0 26px 54px -22px rgba(22,59,42,.32);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --corpo:   "Karla", "Segoe UI", sans-serif;
  --marca:   "Baloo 2", var(--display);

  --wrap: 1200px;
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 32px;
  --arco: 999px 999px 22px 22px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:clamp(1rem,.96rem + .22vw,1.125rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* textura de papel */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.45;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

::selection{background:var(--amarelo);color:var(--tinta)}

/* ---------- 3. Tipografia ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--display);
  font-variation-settings:"SOFT" 40,"WONK" 1;
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--verde-900);
}
h1{font-size:clamp(2.4rem,1.5rem + 4.3vw,4.8rem)}
h2{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.3rem)}
h3{font-size:clamp(1.28rem,1.08rem + .85vw,1.75rem);line-height:1.16}
h4{font-size:1.08rem;line-height:1.3;letter-spacing:-.01em}

p{text-wrap:pretty}
.lead{font-size:clamp(1.1rem,1rem + .55vw,1.42rem);line-height:1.55;color:var(--tinta-2)}
.pequeno{font-size:.875rem;line-height:1.55;color:var(--tinta-3)}
strong,b{font-weight:700;color:inherit}
em{font-style:italic}

.sobretitulo{
  font-family:var(--corpo);
  font-size:.78rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--verde-600);
  display:flex;align-items:center;gap:.6rem;
}
.sobretitulo::before{
  content:"";width:26px;height:2px;border-radius:2px;
  background:currentColor;flex:none;
}
.sobretitulo--centro{justify-content:center}

/* marca-texto sob a palavra */
.grifo{
  background-image:linear-gradient(transparent 55%,rgba(240,176,46,.6) 55%,rgba(240,176,46,.6) 94%,transparent 94%);
  padding-inline:.05em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.grifo--coral{background-image:linear-gradient(transparent 55%,rgba(226,85,47,.34) 55%,rgba(226,85,47,.34) 94%,transparent 94%)}
.grifo--verde{background-image:linear-gradient(transparent 55%,rgba(127,174,69,.5) 55%,rgba(127,174,69,.5) 94%,transparent 94%)}

/* ---------- 4. Layout ---------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap--estreito{width:min(100% - 2.5rem,880px);margin-inline:auto}
section{padding-block:clamp(3.6rem,2rem + 7vw,7.5rem);position:relative}
.secao--papel2{background:var(--papel-2)}
.secao--sage{background:var(--sage)}
.secao--verde{background:var(--verde-900);color:var(--papel)}
.secao--verde h1,.secao--verde h2,.secao--verde h3,.secao--verde h4{color:var(--papel)}
.secao--verde .lead{color:#CFE0CA}
.secao--verde .sobretitulo{color:var(--amarelo)}
/* compatibilidade com o nome antigo */
.secao--tinta{background:var(--verde-900);color:var(--papel)}
.secao--tinta h2,.secao--tinta h3{color:var(--papel)}
.secao--tinta .lead{color:#CFE0CA}
.secao--tinta .sobretitulo{color:var(--amarelo)}

.cabeca{max-width:64ch;margin-bottom:clamp(2rem,1rem + 3vw,3.6rem)}
.cabeca--centro{margin-inline:auto;text-align:center}
.cabeca h1,.cabeca h2{margin-block:.7rem .9rem}

.grade{display:grid;gap:clamp(1rem,.6rem + 1.4vw,1.7rem)}
@media(min-width:640px){ .g2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} }
@media(min-width:640px) and (max-width:899px){ .g4{grid-template-columns:repeat(2,1fr)} }

/* decoração orgânica de fundo */
.blob{position:absolute;pointer-events:none;z-index:0;opacity:.55}
.blob svg{width:100%;height:100%}
section>.wrap{position:relative;z-index:1}

/* ---------- 5. Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--corpo);font-weight:700;font-size:1rem;letter-spacing:-.005em;
  padding:.95rem 1.7rem;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s,color .18s,border-color .18s;
  will-change:transform;
}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--azul);outline-offset:3px}

.btn--zap,.btn--principal{
  background:var(--verde-600);color:#fff;
  box-shadow:0 12px 26px -12px rgba(42,122,80,.9);
}
.btn--zap:hover,.btn--principal:hover{background:var(--verde-800)}
.btn--linha{border-color:var(--verde-800);color:var(--verde-800);background:transparent}
.btn--linha:hover{background:var(--verde-800);color:var(--papel)}
.btn--claro{background:var(--papel);color:var(--verde-900)}
.btn--claro:hover{background:#fff}
.btn--amarelo{background:var(--amarelo);color:var(--verde-900);box-shadow:0 12px 26px -12px rgba(240,176,46,.8)}
.btn--amarelo:hover{background:#FFC24F}
.btn--g{padding:1.15rem 2.1rem;font-size:1.06rem}
.btn--bloco{width:100%}

.btn-linha{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ---------- 6. Cabeçalho ---------- */
.topo{
  position:sticky;top:0;z-index:60;
  background:rgba(250,246,238,.92);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s,box-shadow .25s;
}
.topo.rolou{border-bottom-color:var(--linha);box-shadow:0 8px 24px -16px rgba(22,59,42,.4)}
.topo__in{display:flex;align-items:center;gap:1.2rem;padding-block:.75rem}

.marca{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:none}
.marca img{width:42px;height:42px}
.marca__txt{display:flex;flex-direction:column;line-height:1}
.marca__nome{font-family:var(--marca);font-weight:800;font-size:1.5rem;color:var(--verde-800);letter-spacing:-.01em}
.marca__sub{font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-3);font-weight:700;margin-top:.18rem}

.nav{margin-left:auto;display:flex;align-items:center;gap:1.55rem}
.nav a{
  text-decoration:none;font-size:.95rem;font-weight:600;color:var(--tinta-2);
  padding:.3rem 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:2px;
  background:var(--amarelo);transform:scaleX(0);transform-origin:left;transition:transform .25s;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--verde-900);font-weight:700}

.menu-btn{display:none;margin-left:auto;background:none;border:0;padding:.4rem;cursor:pointer;color:var(--verde-900)}
.menu-btn svg{width:27px;height:27px}

@media(max-width:1080px){
  .nav{
    position:fixed;inset:64px 0 auto;background:var(--papel);
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    border-bottom:1px solid var(--linha);
    padding:.5rem 1.25rem 1.25rem;
    box-shadow:var(--sombra);
    display:none;
  }
  .nav.aberto{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--linha);font-size:1.05rem}
  .nav .btn{margin-top:.9rem}
  .topo__cta{display:none}
  .menu-btn{display:block}
}
@media(max-width:430px){
  .marca img{width:36px;height:36px}
  .marca__nome{font-size:1.3rem}
  .marca__sub{font-size:.53rem;letter-spacing:.14em}
}

/* ---------- 7. Hero ---------- */
.hero{padding-block:clamp(2.6rem,1rem + 5.5vw,5.5rem) clamp(3rem,1.5rem + 6vw,6.5rem);overflow:hidden}
.hero__grade{display:grid;gap:clamp(2.2rem,1rem + 4vw,4rem);align-items:center}
@media(min-width:980px){ .hero__grade{grid-template-columns:1.04fr .96fr} }

.hero h1{margin-block:1rem 1.3rem}
.hero .lead{max-width:50ch}
.hero .btn-linha{margin-top:2.1rem}

.hero__selos{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2.3rem;
  padding-top:1.7rem;border-top:1px dashed var(--linha);
}
.selo{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.82rem;font-weight:700;color:var(--verde-800);
  background:var(--verde-cl);border:1px solid var(--linha-sage);
  padding:.45rem .85rem;border-radius:999px;
}
.selo svg{width:1em;height:1em;color:var(--verde-600)}

/* fotos */
.foto{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--papel-2);box-shadow:var(--sombra-alt);
}
.foto img{width:100%;height:100%;object-fit:cover}
.foto--arco{border-radius:var(--arco)}
.foto--gira{transform:rotate(-1.3deg)}
.foto--gira2{transform:rotate(1.2deg)}
.foto__tag{
  position:absolute;left:.85rem;top:.85rem;
  background:rgba(22,59,42,.85);color:var(--papel);
  font-size:.72rem;font-weight:700;letter-spacing:.04em;
  padding:.4rem .8rem;border-radius:999px;backdrop-filter:blur(4px);
}

/* colagem do hero */
.colagem{
  display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;
  gap:clamp(.8rem,.5rem + 1vw,1.2rem);align-items:end;position:relative;
}
.colagem .foto:nth-child(1){grid-row:span 2;aspect-ratio:4/5.4;border-radius:var(--arco)}
.colagem .foto:nth-child(2){aspect-ratio:1/1;border-radius:var(--arco);transform:rotate(1.5deg)}
.colagem .foto:nth-child(3){aspect-ratio:5/4;transform:rotate(-1deg)}
.colagem__pin{
  position:absolute;z-index:3;
  background:var(--papel);border:1px solid var(--linha);
  border-radius:16px;padding:.75rem 1rem;box-shadow:var(--sombra-alt);
  display:flex;align-items:center;gap:.65rem;max-width:250px;
  font-size:.82rem;line-height:1.4;font-weight:600;color:var(--tinta-2);
}
.colagem__pin b{display:block;font-size:.9rem;color:var(--verde-900)}
.colagem__pin svg{width:30px;height:30px;flex:none}
.colagem__pin--1{left:-1rem;bottom:14%;transform:rotate(-2deg)}
@media(max-width:520px){
  .colagem__pin--1{position:static;transform:none;margin-top:.9rem;max-width:none;grid-column:1/-1}
}

/* ---------- 8. Faixa marquee ---------- */
.faixa{background:var(--verde-900);color:var(--papel);padding-block:1rem;overflow:hidden}
.faixa__trilho{display:flex;width:max-content;animation:marquee 36s linear infinite;gap:0}
.faixa__grupo{display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;white-space:nowrap}
.faixa__grupo span{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:.92rem;font-weight:700;letter-spacing:.02em;
}
.faixa__grupo span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amarelo);flex:none}
.faixa__grupo span:nth-child(4n+2)::before{background:var(--coral)}
.faixa__grupo span:nth-child(4n+3)::before{background:#7FAE45}
.faixa__grupo span:nth-child(4n+4)::before{background:var(--azul)}
@keyframes marquee{to{transform:translateX(-50%)}}
/* compatibilidade LP (faixa estática) */
.faixa__in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem 2rem;font-size:.9rem;font-weight:700}
.faixa__in span{display:inline-flex;align-items:center;gap:.55rem}
.faixa__in span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amarelo);flex:none}
.faixa__in span:nth-child(2)::before{background:var(--coral)}
.faixa__in span:nth-child(3)::before{background:#7FAE45}
.faixa__in span:nth-child(4)::before{background:var(--azul)}

/* ---------- 9. Valores (Acolher Cuidar Crescer) ---------- */
.valores{display:grid;gap:clamp(1.2rem,.8rem + 1.5vw,2rem)}
@media(min-width:840px){ .valores{grid-template-columns:repeat(3,1fr)} }
.valor{text-align:center;padding:0 .5rem}
.valor .foto{aspect-ratio:1/1;border-radius:var(--arco);margin-bottom:1.3rem}
.valor h3{margin-bottom:.5rem}
.valor p{color:var(--tinta-2);font-size:.98rem;max-width:34ch;margin-inline:auto}
.valor:nth-child(2) .foto{transform:rotate(1.2deg)}
.valor:nth-child(3) .foto{transform:rotate(-1.2deg)}

/* ---------- 10. Cartões ---------- */
.card{
  background:#fff;border:1px solid var(--linha);border-radius:var(--r);
  padding:clamp(1.3rem,1rem + 1vw,1.9rem);
  box-shadow:var(--sombra);
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,border-color .25s;
  display:flex;flex-direction:column;gap:.7rem;
}
.secao--papel2 .card,.secao--sage .card{background:var(--papel)}
a.card{text-decoration:none}
.card:hover{transform:translateY(-4px);box-shadow:var(--sombra-alt);border-color:var(--verde-500)}
.card h3,.card h4{margin-bottom:.1rem}
.card p{color:var(--tinta-2);font-size:.97rem}
.card__icone{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;flex:none;
  background:var(--verde-cl);color:var(--verde-700);margin-bottom:.4rem;
}
.card__icone svg{width:24px;height:24px}
.card--azul .card__icone{background:var(--azul-cl);color:var(--azul-esc)}
.card--amarelo .card__icone{background:var(--amarelo-cl);color:#96690B}
.card--coral .card__icone{background:var(--coral-cl);color:#A93518}
.card--verde .card__icone{background:var(--verde-cl);color:var(--verde-700)}
.card__mais{
  margin-top:auto;padding-top:.5rem;font-size:.9rem;font-weight:700;color:var(--verde-600);
  display:inline-flex;align-items:center;gap:.4rem;
}
.card:hover .card__mais svg{transform:translateX(3px)}
.card__mais svg{width:1em;height:1em;transition:transform .2s}

/* ---------- 11. Caminho Crescer (jornada) ---------- */
.caminho{position:relative;display:grid;gap:0;max-width:820px}
.caminho::before{
  content:"";position:absolute;left:26px;top:30px;bottom:30px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--tronco) 0%,var(--verde-600) 55%,var(--amarelo) 100%);
  opacity:.4;
}
.etapa{
  position:relative;display:grid;grid-template-columns:56px 1fr;gap:1.2rem;
  padding-block:1.5rem;align-items:start;
}
.etapa__no{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--papel);border:2px solid var(--linha);box-shadow:var(--sombra);
  position:relative;z-index:1;
}
.secao--sage .etapa__no,.secao--papel2 .etapa__no{background:#fff}
.etapa__no svg{width:27px;height:27px}
.etapa__rotulo{
  font-family:var(--corpo);font-size:.74rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--verde-600);display:block;margin-bottom:.25rem;
}
.etapa h3{margin-bottom:.45rem}
.etapa p{color:var(--tinta-2);max-width:58ch}
.etapa p+p{margin-top:.6rem}

/* ---------- 12. Diferenciais ---------- */
.difs{display:grid;gap:1rem}
@media(min-width:700px){ .difs{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1020px){ .difs{grid-template-columns:repeat(3,1fr)} }
.dif{
  display:flex;gap:1rem;align-items:flex-start;
  background:#fff;border:1px solid var(--linha);border-radius:var(--r);
  padding:1.25rem 1.35rem;box-shadow:var(--sombra);
}
.secao--sage .dif,.secao--papel2 .dif{background:var(--papel)}
.dif svg{width:26px;height:26px;flex:none;margin-top:.2rem;color:var(--verde-600)}
.dif b{display:block;font-size:1.02rem;margin-bottom:.25rem;color:var(--verde-900)}
.dif p{font-size:.92rem;color:var(--tinta-2);line-height:1.55}

/* ---------- 13. Lista de sinais ---------- */
.sinais{display:grid;gap:.7rem}
@media(min-width:700px){ .sinais{grid-template-columns:repeat(2,1fr)} }
.sinal{
  display:flex;gap:.85rem;align-items:flex-start;
  background:#fff;border:1px solid var(--linha);border-radius:14px;
  padding:.95rem 1.1rem;font-size:1rem;line-height:1.45;
}
.secao--papel2 .sinal,.secao--sage .sinal{background:var(--papel)}
.sinal__mk{
  width:22px;height:22px;border-radius:7px;flex:none;margin-top:.15rem;
  background:var(--coral-cl);color:var(--coral);display:grid;place-items:center;
}
.sinal__mk svg{width:13px;height:13px}
.sinais-nota{
  margin-top:1.6rem;padding:1.15rem 1.35rem;border-left:3px solid var(--amarelo);
  background:var(--amarelo-cl);border-radius:0 14px 14px 0;font-size:.96rem;color:var(--tinta-2);
}

/* ---------- 14. Passos numerados ---------- */
.passos{counter-reset:p;display:grid;gap:0}
.passo{
  counter-increment:p;display:grid;gap:.4rem 1.5rem;
  grid-template-columns:auto 1fr;align-items:start;
  padding-block:1.6rem;border-top:1px solid var(--linha);
}
.passo:last-child{border-bottom:1px solid var(--linha)}
.passo::before{
  content:counter(p,decimal-leading-zero);
  font-family:var(--display);font-size:clamp(2rem,1.4rem + 2vw,3rem);
  font-weight:500;line-height:.9;color:var(--linha-sage);
  grid-row:span 2;min-width:2.2ch;
}
.passo h3{align-self:center}
.passo p{color:var(--tinta-2);grid-column:2}
@media(max-width:560px){
  .passo{grid-template-columns:1fr;gap:.5rem}
  .passo::before{grid-row:auto;color:var(--coral);font-size:1.6rem}
  .passo p{grid-column:1}
}

/* ---------- 15. Galeria mosaico ---------- */
.galeria{columns:2;column-gap:clamp(.7rem,.4rem + 1vw,1.1rem)}
@media(min-width:820px){ .galeria{columns:3} }
.galeria .foto{break-inside:avoid;margin-bottom:clamp(.7rem,.4rem + 1vw,1.1rem);transform:none}
.galeria .foto img{width:100%;height:auto;object-fit:initial}
.galeria .foto__tag{font-size:.66rem;padding:.32rem .65rem}

/* ---------- 16. Manifesto ---------- */
.manifesto{
  position:relative;text-align:center;max-width:26ch;margin-inline:auto;
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.7rem,1.1rem + 3vw,3.3rem);line-height:1.14;letter-spacing:-.02em;
}
.manifesto span{color:var(--amarelo)}
.manifesto__aut{
  display:block;margin-top:1.8rem;font-family:var(--corpo);font-size:.85rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9DB5A0;
}

/* ---------- 17. Números ---------- */
.numeros{display:grid;gap:1.6rem;text-align:center}
@media(min-width:700px){ .numeros{grid-template-columns:repeat(3,1fr)} }
.numero b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(2.4rem,1.7rem + 3vw,3.8rem);line-height:1.05;color:var(--amarelo);
}
.numero p{font-size:.95rem;color:#CFE0CA;margin-top:.6rem;max-width:30ch;margin-inline:auto}
.fontes{
  margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.78rem;color:#8FA893;text-align:center;line-height:1.6;
}

/* ---------- 18. FAQ ---------- */
.faq{border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.3rem 2.5rem 1.3rem 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,.98rem + .5vw,1.32rem);
  line-height:1.3;letter-spacing:-.01em;color:var(--verde-900);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.3rem;top:1.65rem;width:13px;height:13px;
  border-right:2.5px solid var(--verde-600);border-bottom:2.5px solid var(--verde-600);
  transform:rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.95rem}
.faq details[open] summary{color:var(--verde-600)}
.faq__c{padding-bottom:1.5rem;max-width:72ch;color:var(--tinta-2)}
.faq__c p+p{margin-top:.8rem}

/* ---------- 19. CTA ---------- */
.cta{
  background:var(--verde-800);color:#fff;border-radius:var(--r-lg);
  padding:clamp(2.2rem,1.4rem + 4vw,4.5rem);text-align:center;position:relative;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;left:-8%;top:-45%;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle at 60% 60%,rgba(240,176,46,.28),transparent 62%);
  pointer-events:none;
}
.cta::after{
  content:"";position:absolute;right:-12%;bottom:-55%;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(63,138,92,.5),transparent 62%);
  pointer-events:none;
}
.cta>*{position:relative;z-index:1}
.cta h2{color:#fff;max-width:22ch;margin-inline:auto}
.cta p{color:#D6E5D2;max-width:56ch;margin:1rem auto 0}
.cta .btn-linha{justify-content:center;margin-top:2.1rem}
.cta .btn--zap{background:var(--amarelo);color:var(--verde-900);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.cta .btn--zap:hover{background:#FFC24F}
.cta .btn--linha{border-color:rgba(255,255,255,.55);color:#fff}
.cta .btn--linha:hover{background:#fff;color:var(--verde-900);border-color:#fff}
.cta__nota{font-size:.85rem;color:#AECBB0;margin-top:1.4rem}

/* ---------- 20. Instagram ---------- */
.insta{display:grid;gap:clamp(1.8rem,1rem + 3vw,3rem);align-items:center}
@media(min-width:900px){ .insta{grid-template-columns:1fr 1.1fr} }
.insta__fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;align-items:end}
.insta__fotos .foto{aspect-ratio:3/4;border-radius:var(--r)}
.insta__fotos .foto:nth-child(1){transform:rotate(-2deg)}
.insta__fotos .foto:nth-child(2){border-radius:var(--arco);margin-bottom:1rem}
.insta__fotos .foto:nth-child(3){transform:rotate(2deg)}
.insta__handle{
  display:inline-flex;align-items:center;gap:.6rem;
  font-weight:800;font-size:clamp(1.05rem,1rem + .5vw,1.3rem);color:var(--verde-800);
  text-decoration:none;border-bottom:3px solid var(--amarelo);padding-bottom:.15rem;
}
.insta__handle svg{width:1.3em;height:1.3em}

/* ---------- 21. Contato ---------- */
.contato{display:grid;gap:2rem}
@media(min-width:880px){ .contato{grid-template-columns:1fr 1fr;gap:3rem} }
.dados{display:grid;gap:1.25rem}
.dado{display:flex;gap:.95rem;align-items:flex-start}
.dado svg{width:21px;height:21px;flex:none;margin-top:.28rem;color:var(--verde-600)}
.dado b{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:.15rem}
.dado a{text-decoration:none;border-bottom:1.5px solid var(--linha)}
.dado a:hover{border-color:var(--amarelo)}
.mapa{border:0;width:100%;aspect-ratio:4/3;border-radius:var(--r);filter:saturate(.9);box-shadow:var(--sombra)}

/* ---------- 22. Formulário ---------- */
.form{display:grid;gap:1rem}
.campo{display:grid;gap:.35rem}
.campo label{font-size:.82rem;font-weight:700;letter-spacing:.03em}
.campo input,.campo select,.campo textarea{
  border:1.5px solid var(--linha);border-radius:12px;background:#fff;
  padding:.85rem 1rem;font-size:1rem;transition:border-color .2s,box-shadow .2s;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--verde-600);box-shadow:0 0 0 3px var(--verde-cl);
}
.form__lgpd{font-size:.78rem;color:var(--tinta-3);line-height:1.5}

/* ---------- 23. Rodapé ---------- */
.rodape{background:var(--verde-900);color:#A9C2AC;padding-block:clamp(3rem,2rem + 3vw,4.6rem) 2rem;font-size:.92rem}
.rodape__grade{display:grid;gap:2.2rem}
@media(min-width:820px){ .rodape__grade{grid-template-columns:1.4fr 1fr 1fr 1fr} }
@media(min-width:560px) and (max-width:819px){ .rodape__grade{grid-template-columns:1fr 1fr} }
.rodape h4{color:var(--papel);font-family:var(--corpo);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.rodape a{text-decoration:none;color:#A9C2AC}
.rodape a:hover{color:var(--amarelo)}
.rodape ul{display:grid;gap:.55rem}
.rodape .marca__nome{color:var(--papel)}
.rodape .marca__sub{color:#7E997F}
.rodape__base{
  margin-top:2.8rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;justify-content:space-between;
  font-size:.78rem;color:#7E997F;line-height:1.6;
}
.aviso-legal{max-width:82ch}

/* ---------- 24. WhatsApp fixo ---------- */
.zap-fixo{
  position:fixed;right:1rem;bottom:1rem;z-index:70;
  width:58px;height:58px;border-radius:50%;
  background:var(--verde-600);color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.5);text-decoration:none;
  transition:transform .2s,background .2s;
}
.zap-fixo:hover{transform:scale(1.07);background:var(--verde-800)}
.zap-fixo svg{width:30px;height:30px}
.zap-fixo__txt{display:none}
@media(max-width:900px){
  .zap-fixo{
    left:1rem;right:1rem;width:auto;height:auto;border-radius:999px;
    padding:.95rem;gap:.6rem;grid-auto-flow:column;justify-content:center;
    font-weight:700;font-size:1rem;bottom:.9rem;
  }
  .zap-fixo__txt{display:inline}
}

/* ---------- 25. Índice lateral (serviços) ---------- */
.com-indice{display:grid;gap:2.5rem}
@media(min-width:1060px){ .com-indice{grid-template-columns:230px 1fr;align-items:start} }
.indice{display:none}
@media(min-width:1060px){
  .indice{display:block;position:sticky;top:96px}
  .indice h4{font-family:var(--corpo);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:.8rem}
  .indice ul{display:grid;gap:.15rem}
  .indice a{
    display:block;text-decoration:none;font-size:.9rem;font-weight:600;color:var(--tinta-2);
    padding:.4rem .75rem;border-left:2.5px solid var(--linha);transition:color .2s,border-color .2s,background .2s;
  }
  .indice a:hover{color:var(--verde-800);border-color:var(--amarelo);background:var(--verde-cl)}
}

/* serviço detalhado */
.servico{
  display:grid;gap:clamp(1.4rem,1rem + 2vw,2.5rem);align-items:start;
  padding-block:clamp(2rem,1.2rem + 2.5vw,3.2rem);
  border-top:1px solid var(--linha);scroll-margin-top:90px;
}
@media(min-width:760px){
  .servico{grid-template-columns:1.15fr .85fr}
  .servico--alt{grid-template-columns:.85fr 1.15fr}
  .servico--alt .servico__txt{order:2}
}
.servico__txt h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);margin-bottom:.7rem}
.servico__txt p{color:var(--tinta-2);margin-bottom:.8rem}
.servico__txt .foco{
  margin-top:1rem;background:var(--verde-cl);border:1px solid var(--linha-sage);
  border-radius:14px;padding:1rem 1.2rem;font-size:.93rem;
}
.servico__txt .foco b{display:block;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--verde-700);margin-bottom:.4rem}
.servico__txt .foco ul{display:grid;gap:.3rem;padding-left:1.1rem;list-style:disc;color:var(--tinta-2)}
.servico .foto{aspect-ratio:4/4.6;border-radius:var(--arco)}
.servico--alt .foto{transform:rotate(1.2deg)}
.servico:not(.servico--alt) .foto{transform:rotate(-1.2deg)}
.servico__etiqueta{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.74rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--verde-700);background:var(--verde-cl);border-radius:999px;
  padding:.35rem .85rem;margin-bottom:.9rem;
}

/* ---------- 26. Animação de entrada ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.vis{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .faixa__trilho{animation:none;flex-wrap:wrap;width:auto}
}

/* ---------- 27. Utilitários ---------- */
.centro{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:.8rem}.mt-2{margin-top:1.6rem}.mt-3{margin-top:2.4rem}
.esconde{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.divisor{height:1px;background:var(--linha);border:0;margin-block:clamp(2rem,1rem + 3vw,3.5rem)}

/* ---------- 28. Compat LP ---------- */
.hero__midia{position:relative}
.hero__midia>.foto{aspect-ratio:4/3}
.hero__badge{
  position:absolute;left:1rem;bottom:-1.6rem;z-index:3;
  background:var(--papel);border:1px solid var(--linha);
  border-radius:16px;padding:.85rem 1.05rem;
  box-shadow:var(--sombra-alt);max-width:min(260px,74%);
  transform:rotate(-1.6deg);
  display:flex;gap:.65rem;align-items:center;
  font-size:.82rem;line-height:1.4;font-weight:600;color:var(--tinta-2);
}
.hero__badge b{display:block;font-size:.9rem;color:var(--verde-900)}
.hero__badge svg{width:30px;height:30px;flex:none}
@media(max-width:520px){
  .hero__badge{position:static;transform:none;margin-top:1rem;max-width:none}
  .hero__midia>.foto{aspect-ratio:16/11}
}

/* ---------- 29. Equipe (pessoas reais) ---------- */
.pessoas{display:grid;gap:clamp(1.2rem,.8rem + 1.5vw,2rem)}
@media(min-width:640px){ .pessoas{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1020px){ .pessoas{grid-template-columns:repeat(4,1fr)} }
.pessoa{
  background:#fff;border:1px solid var(--linha);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s;
}
.secao--papel2 .pessoa,.secao--sage .pessoa{background:var(--papel)}
.pessoa:hover{transform:translateY(-4px);box-shadow:var(--sombra-alt)}
.pessoa__foto{aspect-ratio:1/1.04;overflow:hidden;background:var(--sage);position:relative}
.pessoa__foto img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pessoa__ini{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-size:3.2rem;font-weight:600;color:var(--verde-700);
  background:
    radial-gradient(circle at 30% 25%,rgba(240,176,46,.25),transparent 55%),
    radial-gradient(circle at 75% 80%,rgba(47,127,211,.16),transparent 50%),
    var(--verde-cl);
}
.pessoa__info{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.pessoa__info h3{font-size:1.15rem}
.pessoa__cargo{
  display:inline-flex;align-self:flex-start;
  font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--verde-700);background:var(--verde-cl);border-radius:999px;padding:.3rem .7rem;
}
.pessoa__reg{font-size:.78rem;font-weight:700;color:var(--tinta-3);letter-spacing:.04em}
.pessoa__bio{font-size:.88rem;color:var(--tinta-2);line-height:1.55}
.pessoa__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.6rem}
.pessoa__tags span{
  font-size:.72rem;font-weight:700;color:var(--tinta-2);
  background:var(--papel-2);border:1px solid var(--linha);border-radius:999px;padding:.22rem .6rem;
}

/* fila de rostos (home) */
.rostos{display:flex;align-items:center}
.rostos .rosto{
  width:64px;height:64px;border-radius:50%;overflow:hidden;flex:none;
  border:3px solid var(--papel);box-shadow:var(--sombra);margin-left:-14px;background:var(--verde-cl);
}
.rostos .rosto:first-child{margin-left:0}
.rostos .rosto img{width:100%;height:100%;object-fit:cover;object-position:top center}
.rostos .rosto--ini{display:grid;place-items:center;font-family:var(--display);font-weight:600;color:var(--verde-700)}

/* ---------- 30. Polimento ---------- */
.foto img{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
@media(hover:hover){ .foto:hover img{transform:scale(1.045)} }
.colagem__pin{animation:flutua 5.5s ease-in-out infinite}
@keyframes flutua{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-7px)}}
@media(max-width:520px){ .colagem__pin{animation:none} }
@media(max-width:900px){ .rodape{padding-bottom:6.2rem} }
.faq details[open]{background:linear-gradient(90deg,var(--verde-cl) 0,transparent 55%)}
.faq details[open] summary{padding-left:.6rem}
.faq details[open] .faq__c{padding-left:.6rem}

/* ---------- 31. Correção: botão dentro da nav ---------- */
.nav a.btn{
  padding:.72rem 1.4rem;color:#fff;font-weight:700;
  margin-left:.35rem;
}
.nav a.btn::after{display:none}
.nav a.btn:hover{color:#fff}
.nav a.btn:focus-visible{outline-offset:2px}
@media(max-width:1080px){
  .nav a.btn{margin-left:0}
}
.rostos .rosto--ini{font-size:1rem}