/* ==========================================================================
   Crisálida Psicologia e Desenvolvimento
   Persona visual: D — Narrativo com Fluxo
   Identidade (paleta e tipografia) fornecida pelo cliente.
   ========================================================================== */

/* ---------- Fontes da marca (arquivos oficiais entregues pelo cliente) ---------- */
/* Carentro é a serifa do logotipo. ATENÇÃO: é uma fonte SÓ CAIXA-ALTA,
   minúsculas renderizam como maiúsculas. Usar apenas via .display. */
@font-face{
  font-family:'Carentro';
  src:url('../fonts/Carentro.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
/* Bellarina é a manuscrita da assinatura "tudo é um processo". Uso ornamental. */
@font-face{
  font-family:'Bellarina';
  src:url('../fonts/Bellarina.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- Sistema ---------- */
:root{
  /* Paleta oficial da marca */
  --pedra:#DBD7C9;
  --salvia:#777E5C;
  --oliva:#626944;
  --profundo:#283106;
  --creme:#EDEFE0;

  /* Derivadas (clareamentos da própria base, para respiro) */
  --areia:#F5F3EB;
  --superficie:#FBFAF4;
  --pedra-suave:#E7E4D8;

  --primaria:var(--oliva);
  --texto:#283106;
  --texto-suave:#5D6349;
  --texto-claro:rgba(237,239,224,.82);
  --linha:rgba(40,49,6,.15);
  --linha-clara:rgba(237,239,224,.22);

  --display:'Carentro','Cormorant Garamond',Georgia,serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --script:'Bellarina','Cormorant Garamond',cursive;

  --raio:12px;
  --raio-p:8px;
  --sombra:0 18px 44px -26px rgba(40,49,6,.34);
  --sombra-suave:0 10px 28px -20px rgba(40,49,6,.28);

  --largura:1180px;
  --largura-estreita:820px;
  --pad-secao:clamp(4.5rem,8vw,7rem);
  --header-h:84px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--areia);
  color:var(--texto);
  font-family:var(--sans);
  font-size:1rem;
  font-weight:300;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--oliva);text-decoration:none;transition:color .22s ease}
a:hover{color:var(--profundo)}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--profundo);
  line-height:1.16;
  margin:0 0 .6em;
  letter-spacing:-.005em;
}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

:focus-visible{outline:2px solid var(--oliva);outline-offset:3px;border-radius:3px}

.pular-para-conteudo{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--profundo);color:var(--creme);
  padding:.8rem 1.2rem;border-radius:0 0 var(--raio-p) 0;
  font-size:.85rem;
}
.pular-para-conteudo:focus{left:0;color:var(--creme)}

.container{width:min(100% - 2.5rem,var(--largura));margin-inline:auto}
.container.estreito{width:min(100% - 2.5rem,var(--largura-estreita))}

/* Carentro: exclusivamente caixa-alta */
.display{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:400;
}
.script{font-family:var(--script);text-transform:none;letter-spacing:.01em}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.85rem 1.7rem;
  font-family:var(--sans);font-size:.83rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--raio-p);
  cursor:pointer;text-align:center;white-space:nowrap;flex-shrink:0;
  transition:background-color .24s ease,color .24s ease,border-color .24s ease,transform .24s ease,box-shadow .24s ease;
}
.btn:hover{transform:translateY(-2px)}

.btn-primario{background:var(--oliva);color:var(--creme);box-shadow:var(--sombra-suave)}
.btn-primario:hover{background:var(--profundo);color:var(--creme);box-shadow:0 16px 32px -20px rgba(40,49,6,.55)}

.btn-claro{background:var(--creme);color:var(--profundo)}
.btn-claro:hover{background:#fff;color:var(--profundo)}

.btn-fantasma{background:transparent;color:var(--creme);border-color:rgba(237,239,224,.5)}
.btn-fantasma:hover{background:rgba(237,239,224,.12);color:var(--creme);border-color:var(--creme)}

.btn-contorno{background:transparent;color:var(--oliva);border-color:var(--linha)}
.btn-contorno:hover{background:var(--oliva);color:var(--creme);border-color:var(--oliva)}

/* ---------- Cabeçalho ---------- */
.cabecalho{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(245,243,235,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.cabecalho.compacto{
  background:rgba(245,243,235,.97);
  border-bottom-color:var(--linha);
  box-shadow:0 10px 30px -26px rgba(40,49,6,.5);
}
.cabecalho__interno{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:var(--header-h);
  transition:min-height .3s ease;
}
.cabecalho.compacto .cabecalho__interno{min-height:70px}

.cabecalho__marca img{height:46px;width:auto;transition:height .3s ease}
.cabecalho.compacto .cabecalho__marca img{height:40px}

.nav{display:flex;align-items:center;gap:2rem}
.nav-links{
  display:flex;align-items:center;gap:1.6rem;
  list-style:none;margin:0;padding:0;
}
.nav-links a{
  position:relative;
  font-size:.83rem;font-weight:400;letter-spacing:.045em;
  color:var(--texto-suave);
  padding:.35rem 0;
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;
  height:1px;background:var(--oliva);
  transition:right .28s ease;
}
.nav-links a:hover,.nav-links a.ativo{color:var(--profundo)}
.nav-links a:hover::after,.nav-links a.ativo::after{right:0}

.cabecalho__progresso{
  height:2px;width:0;background:var(--oliva);
  transition:width .12s linear;
}

.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  color:var(--profundo);padding:.4rem;margin:-.4rem;line-height:0;
}
.nav-toggle svg{width:28px;height:28px}

/* ---------- Menu mobile (drawer padrão, fundo sólido fora de @media) ---------- */
.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;z-index:1200;
  width:min(86vw,360px);
  display:flex;flex-direction:column;
  padding:1.1rem 1.5rem 2rem;
  background:var(--superficie);
  box-shadow:-18px 0 50px -22px rgba(40,49,6,.3);
  transform:translateX(100%);visibility:hidden;
  transition:transform .34s cubic-bezier(.4,0,.2,1),visibility .34s;
  overscroll-behavior:contain;overflow-y:auto;
}
.mobile-menu.open{transform:none;visibility:visible}
.mobile-menu__head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:1rem;margin-bottom:.4rem;border-bottom:1px solid var(--linha);
}
.mobile-menu__logo{height:38px;width:auto}
.mobile-menu__links{display:flex;flex-direction:column;margin:0 0 1.5rem;padding:0;list-style:none}
.mobile-menu__links li{border-bottom:1px solid var(--linha)}
.mobile-menu__links a{
  display:flex;align-items:center;min-height:54px;
  font-size:1.02rem;font-weight:400;color:var(--texto);
}
.mobile-menu__links a:hover{color:var(--oliva)}
.mobile-menu__cta{margin-top:auto;width:100%}
.mobile-close{background:none;border:none;color:var(--oliva);cursor:pointer;padding:.3rem;margin:-.3rem;line-height:0}
.mobile-close svg{width:30px;height:30px}
.menu-backdrop{
  position:fixed;inset:0;z-index:1100;
  background:rgba(40,49,6,.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.menu-backdrop.open{opacity:1;visibility:visible}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:min(100svh,860px);
  display:flex;align-items:center;
  padding:calc(var(--header-h) + 4rem) 0 5rem;
  overflow:hidden;
  color:var(--creme);
  background:var(--profundo);
}
.hero__fundo{position:absolute;inset:-8% 0 -8%;z-index:0}
.hero__fundo img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  opacity:.42;
}
.hero__veu{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 50% 8%,rgba(40,49,6,.24) 0%,rgba(40,49,6,.72) 46%,rgba(40,49,6,.94) 100%),
    linear-gradient(180deg,rgba(40,49,6,.55) 0%,rgba(40,49,6,.2) 38%,rgba(40,49,6,.9) 100%);
}
.hero__brilho{
  position:absolute;left:50%;top:34%;
  width:min(78vw,760px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(119,126,92,.4) 0%,rgba(119,126,92,0) 66%);
  filter:blur(12px);
  pointer-events:none;
}

.hero__conteudo{position:relative;z-index:2;text-align:center}
.hero__eyebrow{
  font-size:clamp(1.5rem,4.4vw,2.4rem);
  color:var(--pedra);
  margin:0 0 1.2rem;
  opacity:.92;
}
.hero__titulo{
  font-size:clamp(2.5rem,6.4vw,4.6rem);
  font-weight:300;
  color:var(--creme);
  margin:0 0 1.3rem;
  line-height:1.1;
}
.hero__texto{
  max-width:60ch;margin:0 auto 2.4rem;
  font-size:clamp(1rem,1.6vw,1.14rem);
  color:var(--texto-claro);
  line-height:1.8;
}
.hero__acoes{
  display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;
  margin-bottom:3.4rem;
}

/* Assinatura: a metamorfose que se desenha (transição-assinatura do site).
   Estado base = VISÍVEL. O desenho é uma animação adicionada por JS,
   para o conteúdo nunca depender do script nem sumir na captura. */
.assinatura{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.assinatura__simbolo{
  width:min(74vw,500px);height:auto;opacity:.9;
}
.assinatura.desenhar .assinatura__simbolo{
  animation:desenhar-simbolo 2s cubic-bezier(.55,.06,.3,1) .35s both;
}
@keyframes desenhar-simbolo{
  from{clip-path:inset(0 100% 0 0);opacity:.2}
  to{clip-path:inset(0 0 0 0);opacity:.9}
}
.assinatura__frase{
  font-size:clamp(1.5rem,3.6vw,2.05rem);
  color:var(--pedra);
  margin:0;line-height:1.3;
}
.assinatura.desenhar .assinatura__frase{
  animation:subir-suave 1s ease-out 1.9s both;
}
@keyframes subir-suave{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.hero__rolagem{
  position:absolute;left:50%;bottom:2rem;z-index:2;
  transform:translateX(-50%);
  width:44px;height:56px;
  display:flex;align-items:flex-end;justify-content:center;
}
.hero__rolagem-linha{
  width:1px;height:44px;
  background:linear-gradient(180deg,rgba(237,239,224,0),rgba(237,239,224,.75));
  animation:pulsar-linha 2.6s ease-in-out infinite;
}
@keyframes pulsar-linha{0%,100%{opacity:.35;height:30px}50%{opacity:.9;height:46px}}

/* Entrada do hero no load */
.hero__eyebrow,.hero__titulo,.hero__texto,.hero__acoes,.assinatura{
  animation:entrada-hero .9s ease-out both;
}
.hero__titulo{animation-delay:.1s}
.hero__texto{animation-delay:.22s}
.hero__acoes{animation-delay:.34s}
.assinatura{animation-delay:.46s}
@keyframes entrada-hero{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Seções ---------- */
.secao{position:relative;padding-block:var(--pad-secao)}

.secao__textura{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(119,126,92,.16),transparent 42%),
    radial-gradient(circle at 88% 78%,rgba(98,105,68,.14),transparent 46%);
}
.secao__textura--clara{
  background-image:
    radial-gradient(circle at 82% 12%,rgba(119,126,92,.12),transparent 44%),
    radial-gradient(circle at 8% 84%,rgba(219,215,201,.6),transparent 48%);
}
.secao > .container{position:relative;z-index:1}

.cabecalho-secao{margin-bottom:3rem;max-width:70ch}
.cabecalho-secao.centro{text-align:center;margin-inline:auto}
.cabecalho-secao.centro .titulo-secao,
.cabecalho-secao.centro .intro-secao{margin-inline:auto}

.eyebrow{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:.55rem;
  font-family:var(--sans);
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oliva);
  margin:0 0 .9rem;
}
.eyebrow::after{content:'';width:28px;height:2px;border-radius:2px;background:var(--oliva)}
.cabecalho-secao.centro .eyebrow{align-items:center}

.titulo-secao{
  font-size:clamp(1.9rem,4vw,3rem);
  font-weight:300;
  max-width:22ch;
  margin-bottom:.5em;
}
.intro-secao{
  max-width:62ch;
  font-size:1.06rem;
  color:var(--texto-suave);
  margin:0;
}

.prosa{max-width:66ch;font-size:1.045rem;color:var(--texto-suave);line-height:1.85}
/* Bloco com max-width não se centraliza sozinho: text-align do pai só alinha o
   texto DENTRO da caixa, não a caixa. Sem isto a prosa cola na borda esquerda
   enquanto o resto da seção fica centralizado. */
.prosa--eixo{margin-inline:auto}
.prosa--centro{margin-inline:auto;text-align:center}
.prosa p{margin-bottom:1.3em}

.centro-bloco{text-align:center;margin:2.8rem 0 0}

/* ---------- Divisor entre seções (fio com nó, estático por CSS) ---------- */
.divisor{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:64px;
  width:min(100% - 2.5rem,var(--largura));
  margin-inline:auto;
}
.divisor__linha{
  position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--linha) 18%,var(--linha) 82%,transparent);
}
.divisor__no{
  position:relative;
  width:9px;height:9px;
  background:var(--salvia);
  transform:rotate(45deg);
  box-shadow:0 0 0 5px var(--areia);
}

/* ---------- Seção: o nome ---------- */
.secao--nome{background:var(--areia)}
.secao--nome .fio{
  position:absolute;left:50%;top:0;width:1px;height:56px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--linha),transparent);
}
.citacao{
  margin:0 0 2.6rem;padding:0;
  text-align:center;
}
.citacao p{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3.6vw,2.5rem);
  font-style:italic;font-weight:300;
  color:var(--oliva);
  line-height:1.35;margin:0;
}
.citacao--clara{margin-top:3.4rem}
.citacao--clara p{color:var(--pedra)}

.marca-conceito{
  margin:3.4rem auto 0;text-align:center;max-width:640px;
}
.marca-conceito img{width:100%;height:auto;opacity:.82;margin-inline:auto}
.marca-conceito figcaption{
  margin-top:1.2rem;
  font-size:.86rem;letter-spacing:.06em;
  color:var(--oliva);
}

/* ---------- Seção: sobre ---------- */
.secao--sobre{background:var(--superficie)}
.sobre__grade{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.sobre__foto{margin:0;position:relative}
.sobre__foto::before{
  content:'';position:absolute;inset:18px -18px -18px 18px;
  border:1px solid var(--linha);border-radius:var(--raio);
  z-index:0;
}
.sobre__foto img{
  position:relative;z-index:1;
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 26%;
  border-radius:var(--raio);
  box-shadow:var(--sombra);
}

/* Trajetória (timeline da persona D) */
.trajetoria{position:relative;margin-top:clamp(3rem,6vw,4.5rem);padding-top:.5rem}
.trajetoria__trilho{
  position:absolute;left:11px;top:14px;bottom:14px;width:1px;
  background:var(--linha);
}
.trajetoria__preenche{
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:var(--salvia);
  transform-origin:top;
}
.trajetoria.animar .trajetoria__preenche{animation:preencher-y 1.6s ease-out .2s both}
@keyframes preencher-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.trajetoria__lista{
  list-style:none;margin:0;padding:0;
  display:grid;gap:2rem;
}
.trajetoria__item{position:relative;padding-left:3rem}
.trajetoria__item::before{
  content:'';position:absolute;left:6px;top:.55rem;
  width:11px;height:11px;border-radius:50%;
  background:var(--superficie);
  border:1.5px solid var(--oliva);
}
.trajetoria__titulo{
  font-size:1.22rem;font-weight:500;margin:0 0 .35em;
}
.trajetoria__item p{
  margin:0;font-size:.97rem;color:var(--texto-suave);max-width:58ch;
}

@media (min-width:900px){
  .trajetoria__trilho{left:11px;right:calc(25% - 1.35rem - 11px);top:11px;bottom:auto;width:auto;height:1px}
  .trajetoria__preenche{transform-origin:left}
  .trajetoria.animar .trajetoria__preenche{animation-name:preencher-x}
  .trajetoria__lista{grid-template-columns:repeat(4,1fr);gap:1.8rem}
  .trajetoria__item{padding-left:0;padding-top:2.6rem}
  .trajetoria__item::before{left:0;top:6px}
}
@keyframes preencher-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Seção: abordagem (tema escuro) ---------- */
.tema-escuro{background:var(--profundo);color:var(--texto-claro)}
.tema-escuro h1,.tema-escuro h2,.tema-escuro h3,.tema-escuro h4{color:var(--creme)}
.tema-escuro .eyebrow{color:var(--pedra)}
.tema-escuro .eyebrow::after{background:var(--salvia)}
.tema-escuro .intro-secao,.tema-escuro .prosa{color:var(--texto-claro)}
.secao--abordagem .secao__textura{
  opacity:.9;
  background-image:
    radial-gradient(circle at 20% 14%,rgba(119,126,92,.3),transparent 45%),
    radial-gradient(circle at 82% 82%,rgba(98,105,68,.34),transparent 48%);
}

.triade{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:2.4rem;align-items:center;
  margin:3rem auto 3.4rem;max-width:900px;
}
.triade__mapa{
  position:relative;
  width:min(84vw,360px);margin-inline:auto;
  color:var(--salvia);
}
.triade__desenho{width:100%;height:auto;display:block;opacity:.9}
.triade__ciclo{stroke-dasharray:540;stroke-dashoffset:0}
.triade.animar .triade__ciclo{animation:tracar 1.8s ease-out both}
@keyframes tracar{from{stroke-dashoffset:540}to{stroke-dashoffset:0}}

.triade__vertice{
  position:absolute;
  font-family:var(--sans);
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--creme);white-space:nowrap;
}
.triade__vertice--topo{left:50%;top:30%;transform:translate(-50%,-190%)}
.triade__vertice--dir{left:81.9%;top:74.3%;transform:translate(-62%,90%)}
.triade__vertice--esq{left:18.1%;top:74.3%;transform:translate(-38%,90%)}

.triade__itens{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.triade__itens li{
  padding-left:1.3rem;border-left:1px solid var(--linha-clara);
}
.triade__rotulo{
  display:block;
  font-family:var(--serif);font-size:1.4rem;color:var(--creme);
  margin-bottom:.2rem;
}
.triade__nota{display:block;font-size:.96rem;color:var(--texto-claro)}

@media (min-width:820px){
  .triade{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:3.5rem}
  .triade__mapa{margin:0}
}

.pratica{
  margin:3.4rem auto 0;max-width:820px;
  padding:clamp(1.8rem,4vw,2.8rem);
  border:1px solid var(--linha-clara);border-radius:var(--raio);
  background:rgba(237,239,224,.045);
}
.pratica__titulo{font-size:1.4rem;font-weight:400;margin-bottom:1.2em}
.pratica__lista{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.9rem}
.pratica__lista li{
  position:relative;padding-left:1.7rem;
  font-size:1rem;color:var(--texto-claro);
}
.pratica__lista li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:7px;height:7px;border-radius:50%;
  background:var(--salvia);
}
.pratica__fecho{
  margin:0;padding-top:1.4rem;border-top:1px solid var(--linha-clara);
  font-family:var(--serif);font-size:1.16rem;font-style:italic;
  color:var(--pedra);
}

/* ---------- Seção: fases ---------- */
.secao--fases{background:var(--areia)}
.fases{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(1.6rem,3.4vw,2.6rem);
}
.fase{position:relative}
.fase__foto{margin:0 0 1.4rem;position:relative}
.fase__foto::after{
  content:'';position:absolute;inset:0;border-radius:var(--raio);
  box-shadow:inset 0 0 0 1px rgba(237,239,224,.28);
  pointer-events:none;
}
.fase__foto img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--raio);
  box-shadow:var(--sombra-suave);
  transition:transform .5s ease;
}
.fase:hover .fase__foto img{transform:scale(1.025)}
.fase__titulo{
  font-size:1.5rem;font-weight:400;margin-bottom:.45em;
  display:flex;align-items:center;gap:.7rem;
}
.fase__titulo::after{
  content:'';flex:1;height:1px;background:var(--linha);
}
.fase p{font-size:.99rem;color:var(--texto-suave);margin:0}

.fases__nota{
  margin:3rem auto 0;max-width:56ch;text-align:center;
  font-family:var(--serif);font-size:1.2rem;font-style:italic;
  color:var(--oliva);
}

/* ---------- Seção: como funciona (fluxograma) ---------- */
.secao--processo{background:var(--superficie)}
.fluxo{position:relative;margin-top:1rem}
.fluxo__trilho{
  position:absolute;left:19px;top:20px;bottom:20px;width:1px;
  background:var(--linha);
}
.fluxo__preenche{
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:linear-gradient(180deg,var(--oliva),var(--salvia));
  transform-origin:top;
}
.fluxo.animar .fluxo__preenche{animation:preencher-y 2s ease-out .2s both}

.fluxo__lista{list-style:none;margin:0;padding:0;display:grid;gap:2.2rem}
.passo{position:relative;padding-left:3.6rem}
.passo__marco{
  position:absolute;left:0;top:0;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--superficie);
  border:1px solid var(--oliva);
  color:var(--oliva);
}
.passo__numero{
  font-family:var(--serif);font-size:1.16rem;line-height:1;
}
.passo__titulo{font-size:1.28rem;font-weight:400;margin:.35em 0 .4em}
.passo p{margin:0;font-size:.99rem;color:var(--texto-suave);max-width:56ch}

@media (min-width:1000px){
  /* Fluxo centrado: cada marco fica no eixo da própria coluna e o trilho vai do
     centro do primeiro ao centro do último. Com 5 colunas e gap de 1.6rem, o
     centro da coluna 1 fica em 10% menos 0.4 do gap. */
  .fluxo__trilho{left:calc(10% - .64rem);right:calc(10% - .64rem);top:20px;bottom:auto;width:auto;height:1px}
  .fluxo__preenche{transform-origin:left}
  .fluxo.animar .fluxo__preenche{animation-name:preencher-x}
  .fluxo__lista{grid-template-columns:repeat(5,1fr);gap:1.6rem}
  .passo{padding-left:0;padding-top:3.6rem;text-align:center}
  .passo__marco{left:50%;top:0;transform:translateX(-50%)}
  .passo p{font-size:.93rem;margin-inline:auto}
}


/* ---------- Seção: espaço ---------- */
.secao--espaco{background:var(--pedra-suave)}
/* Mosaico 3x3 sem buracos: largo(2x1) + alto(1x2) na primeira faixa,
   dois quadros normais na segunda, largo(2x1) + normal na terceira.
   Nenhuma foto é recortada em retrato, para a logo da parede não sair cortada. */
.galeria{
  display:grid;grid-template-columns:1fr;
  gap:clamp(.8rem,2vw,1.4rem);
}
.galeria__item{margin:0;overflow:hidden;border-radius:var(--raio)}
.galeria__item img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .6s cubic-bezier(.2,.6,.3,1);
}
.galeria__item:hover img{transform:scale(1.04)}

@media (min-width:900px){
  .galeria{grid-template-columns:repeat(3,1fr);grid-auto-rows:230px}
  .galeria__item img{aspect-ratio:auto;height:100%}
  .galeria__item--largo{grid-column:span 2}
  .galeria__item--alto{grid-row:span 2}
}

/* ---------- CTA intermediária ---------- */
.cta{
  position:relative;overflow:hidden;
  padding-block:clamp(4rem,7vw,6rem);
  background:var(--oliva);color:var(--creme);
  text-align:center;
}
.cta h2,.cta h3{color:var(--creme)}
.cta .eyebrow{color:var(--pedra);align-items:center}
.cta .eyebrow::after{background:var(--pedra)}
.cta__fundo{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta__brilho{
  position:absolute;left:50%;top:50%;
  width:min(120vw,900px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(237,239,224,.16) 0%,rgba(237,239,224,0) 62%);
}
.cta__conteudo{position:relative;z-index:1}
.cta .titulo-secao{margin-inline:auto}
.cta__texto{
  max-width:56ch;margin:0 auto 2.2rem;
  color:rgba(237,239,224,.9);font-size:1.06rem;
}

/* ---------- Blog ---------- */
.secao--blog{background:var(--areia)}
.blog-previa{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(1.2rem,2.6vw,1.8rem);
}
.blog-card{
  position:relative;
  border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--superficie);
  padding:0 0 1.6rem;overflow:hidden;
  text-align:center;
}
/* A capa carrega a marca d'água do símbolo: sem isso o card lê como
   "imagem que não carregou" em vez de arte intencional. */
.blog-card__capa{
  display:block;width:100%;aspect-ratio:16/10;
  background-image:
    url('../images/simbolo-oliva.png'),
    radial-gradient(circle at 30% 30%,rgba(119,126,92,.3),transparent 60%),
    linear-gradient(140deg,var(--pedra),var(--pedra-suave));
  background-repeat:no-repeat;
  background-position:center 56%,center,center;
  background-size:66% auto,cover,cover;
  opacity:.96;
}
.blog-card__capa--b{
  background-image:
    url('../images/simbolo-oliva.png'),
    radial-gradient(circle at 70% 36%,rgba(98,105,68,.26),transparent 60%),
    linear-gradient(140deg,var(--pedra-suave),var(--creme));
}
.blog-card__capa--c{
  background-image:
    url('../images/simbolo-oliva.png'),
    radial-gradient(circle at 46% 66%,rgba(40,49,6,.16),transparent 60%),
    linear-gradient(140deg,var(--creme),var(--pedra));
}
.blog-card__selo{
  display:inline-block;margin:1.4rem 0 .5rem;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oliva);
}
.blog-card__nota{
  margin:0;padding-inline:1.4rem;
  font-size:.93rem;color:var(--texto-suave);
}

/* ---------- FAQ ---------- */
.secao--faq{background:var(--superficie)}
.faq{border-top:1px solid var(--linha)}
.faq__item{border-bottom:1px solid var(--linha)}
.faq__pergunta{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.4rem 0;min-height:60px;
  background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--serif);font-size:1.18rem;font-weight:400;
  color:var(--profundo);
  transition:color .22s ease;
}
.faq__pergunta:hover{color:var(--oliva)}
.faq__seta{
  width:22px;height:22px;flex-shrink:0;color:var(--salvia);
  transition:transform .3s ease;
}
.faq__item.aberto .faq__seta{transform:rotate(180deg)}
.faq__resposta{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .34s ease;
}
.faq__item.aberto .faq__resposta{grid-template-rows:1fr}
.faq__interior{overflow:hidden}
.faq__interior p{
  margin:0;padding:0 0 1.5rem;max-width:68ch;
  font-size:.99rem;color:var(--texto-suave);
}

/* ---------- Contato ---------- */
.secao--contato{background:var(--areia)}
.contato__grade{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.formulario{
  background:var(--superficie);
  border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(1.6rem,3.4vw,2.4rem);
  box-shadow:var(--sombra-suave);
}
.campo{margin-bottom:1.3rem}
.campo label{
  display:block;margin-bottom:.5rem;
  font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-suave);
}
.campo input,.campo textarea{
  width:100%;
  padding:.85rem 1rem;min-height:50px;
  font-family:var(--sans);font-size:1rem;font-weight:300;
  color:var(--texto);
  background:var(--areia);
  border:1px solid var(--linha);border-radius:var(--raio-p);
  transition:border-color .22s ease,box-shadow .22s ease;
}
.campo textarea{resize:vertical;min-height:110px;line-height:1.65}
.campo input:focus,.campo textarea:focus{
  outline:none;border-color:var(--oliva);
  box-shadow:0 0 0 3px rgba(98,105,68,.14);
}
.campo.invalido input,.campo.invalido textarea{border-color:#a4482f}
.campo__erro{
  display:block;min-height:1.1rem;margin-top:.35rem;
  font-size:.78rem;color:#a4482f;
}
.formulario__enviar{width:100%;margin-top:.4rem}
.formulario__aviso{
  margin:1.2rem 0 0;
  font-size:.8rem;line-height:1.6;color:var(--texto-suave);
}

.contato__dados{display:grid;gap:2rem}
.dado__titulo{
  font-family:var(--sans);
  font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oliva);margin-bottom:.7em;
}
.dado p{margin:0;color:var(--texto-suave);font-size:1rem;line-height:1.8}

.contatos{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0}
.contatos a{
  display:inline-flex;align-items:center;gap:.65rem;
  min-height:44px;color:currentColor;
  font-size:.98rem;
}
.contatos svg{flex:0 0 auto;color:var(--oliva)}
.contatos a:hover{color:var(--oliva)}

/* ---------- Rodapé ---------- */
.rodape{
  background:var(--profundo);color:var(--texto-claro);
  padding-top:clamp(3.5rem,6vw,5rem);
}
.rodape h3{color:var(--creme)}
.rodape__interno{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:3rem;
}
.rodape__marca img{height:auto;width:min(100%,260px);margin-bottom:1.4rem}
.rodape__institucional{
  font-size:.93rem;line-height:1.8;color:var(--texto-claro);max-width:44ch;margin:0;
}
.rodape__titulo{
  font-family:var(--sans);
  font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pedra);margin-bottom:1.2em;
}
.rodape__links ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.rodape__links a,.rodape__contato a{color:var(--texto-claro);font-size:.94rem}
.rodape__links a:hover,.rodape__contato a:hover{color:var(--creme)}
.rodape__contato .contatos{margin-bottom:1.4rem}
.rodape__contato .contatos svg{color:var(--pedra)}
.rodape__endereco{
  font-style:normal;font-size:.9rem;line-height:1.8;
  color:var(--texto-claro);margin-bottom:1rem;
}
.rodape__crp{font-size:.86rem;color:var(--pedra);margin:0;letter-spacing:.02em}

.rodape__base{
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;
  align-items:center;justify-content:space-between;
  padding-block:1.6rem;
  border-top:1px solid var(--linha-clara);
  font-size:.84rem;
}
.rodape__base p{margin:0}
.rodape__legais{display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.rodape__separador{width:3px;height:3px;border-radius:50%;background:var(--salvia)}

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-flutuante{
  position:fixed;bottom:2rem;right:2rem;z-index:900;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;color:#fff;
  box-shadow:0 8px 24px -8px rgba(37,211,102,.6);
  will-change:transform,box-shadow;
  animation:wa-float 3.2s ease-in-out infinite,wa-pulse 2.8s ease-out 1.2s infinite;
  transition:transform .24s ease;
}
.whatsapp-flutuante:hover{
  color:#fff;transform:scale(1.13);
  animation-play-state:paused;
}
@keyframes wa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes wa-pulse{
  0%{box-shadow:0 8px 24px -8px rgba(37,211,102,.6),0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 8px 24px -8px rgba(37,211,102,.6),0 0 0 20px rgba(37,211,102,0)}
  100%{box-shadow:0 8px 24px -8px rgba(37,211,102,.6),0 0 0 0 rgba(37,211,102,0)}
}

/* ---------- Reveal on-scroll + stagger ---------- */
.animate-on-scroll{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease-out,transform .7s ease-out;
  transition-delay:calc(var(--i,0) * 110ms);
}
.animate-on-scroll.visible{opacity:1;transform:none}

@keyframes drift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-16px,0)}
  100%{transform:translate3d(0,0,0)}
}
.decor-drift{animation:drift 20s ease-in-out infinite;will-change:transform}
.hero__brilho.decor-drift{animation:drift-hero 22s ease-in-out infinite}
@keyframes drift-hero{
  0%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 22px))}
  100%{transform:translate(-50%,-50%)}
}
.cta__brilho.decor-drift{animation:drift-cta 24s ease-in-out infinite}
@keyframes drift-cta{
  0%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.07)}
  100%{transform:translate(-50%,-50%) scale(1)}
}

/* ---------- Responsivo ---------- */
@media (max-width:1000px){
  .nav-links{display:none}
  .nav .btn-primario{display:none}
  .nav-toggle{display:block}
}
@media (max-width:880px){
  :root{--header-h:74px}
  .sobre__grade{grid-template-columns:minmax(0,1fr)}
  .sobre__foto::before{inset:14px -14px -14px 14px}
  .sobre__foto img{aspect-ratio:3/4;max-height:520px}
  .contato__grade{grid-template-columns:minmax(0,1fr)}
  .rodape__interno{grid-template-columns:minmax(0,1fr);gap:2.4rem}
}
@media (max-width:640px){
  body{font-size:1rem}
  .hero{min-height:auto;padding:calc(var(--header-h) + 3.2rem) 0 4rem}
  .hero__acoes{margin-bottom:2.6rem}
  .hero__acoes .btn{width:100%}
  .hero__rolagem{display:none}
  .galeria{grid-template-columns:1fr}
  .galeria__item--alto{grid-row:auto}
  .galeria__item--alto img{aspect-ratio:4/3;min-height:0}
  .galeria__item--largo{grid-column:auto}
  .galeria__item--largo img{aspect-ratio:4/3}
  .whatsapp-flutuante{bottom:1.2rem;right:1.2rem;width:54px;height:54px}
  .rodape__base{flex-direction:column;align-items:flex-start;text-align:left}
}

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .animate-on-scroll{opacity:1!important;transform:none!important;transition:none!important}
  .decor-drift,.hero__rolagem-linha,.whatsapp-flutuante{animation:none!important}
  .hero__eyebrow,.hero__titulo,.hero__texto,.hero__acoes,.assinatura,
  .assinatura.desenhar .assinatura__simbolo,.assinatura.desenhar .assinatura__frase,
  .trajetoria.animar .trajetoria__preenche,.fluxo.animar .fluxo__preenche,
  .triade.animar .triade__ciclo{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .mobile-menu,.menu-backdrop{transition:none!important}
  .galeria__item img,.fase__foto img{transition:none!important}
}

/* Cada card do blog recorta o símbolo numa escala e posição próprias,
   para os três não ficarem idênticos enquanto não há artigo publicado. */
.blog-card__capa--b{background-position:38% 46%,center,center;background-size:88% auto,cover,cover}
.blog-card__capa--c{background-position:66% 62%,center,center;background-size:54% auto,cover,cover}