/* ══════════════════════════════════════════════════════════════
   MARCOS TRANSFER — folha única
   Mesma base dos sites anteriores: curva --mola, reveal [data-rv],
   onda diagonal nas grades, brilho de cursor nos botões.
   Paleta azul/marinho puxada da referência de aeroporto.
   ══════════════════════════════════════════════════════════════ */
:root{
 /* Verde e dourado amostrados da logo do Wagner; o creme e o sage vêm
    da referência limpa que o cliente escolheu. O verde é a cor de ação
    (botão com texto branco, 9:1 de contraste); o dourado fica só em
    detalhe pequeno, porque sobre creme ele tem contraste baixo. */
 --verde:#1B4D22;         /* ação e superfícies escuras */
 --verde-cl:#2C6B34;      /* hover */
 --verde-txt:#25562C;     /* texto de marca sobre creme */
 --sage:#7E9B77;
 --sage-cl:#E9F0E5;       /* círculo dos ícones, painéis */
 --ouro:#C9A227;          /* detalhe: estrelas, numerais */
 --creme:#FBF8F2;
 --creme-2:#F4F0E6;
 --tinta:#26312A;
 --corpo:#5C6660;
 --suave:#8D968E;
 --bg:#FFFFFF;
 --areia:#F6F4EC;
 --linha:#E6E2D6;
 --linha-2:#F0ECE2;
 --verde-check:#4A7C50;
 --sombra:0 1px 2px rgba(31,44,24,.04),0 8px 24px -12px rgba(31,44,24,.14);
 --sombra-alta:0 2px 6px rgba(31,44,24,.06),0 26px 52px -22px rgba(31,44,24,.22);
 --mola:cubic-bezier(.16,1,.3,1);
 --r:14px; --r-g:20px;
 --topo:88px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--corpo);
 font:400 16px/1.65 'Inter','Segoe UI',system-ui,sans-serif;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
/* Todo ícone é <svg><use>. Sem medida o SVG vale 300x150 e estoura o grid. */
svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
 stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--tinta);font-family:'Cormorant Garamond',Georgia,serif;
 font-weight:600;letter-spacing:0;line-height:1.14}
p{margin:0}
.wrap{width:min(1320px,calc(100% - 120px));margin-inline:auto}
.az{color:var(--verde)}

/* ── rótulo de seção ──────────────────────────────────────────── */
.kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;
 text-transform:uppercase;color:var(--verde-txt);margin-bottom:14px}
.sechd{text-align:center;max-width:680px;margin:0 auto 54px}
.sechd h2{font-size:clamp(28px,3.2vw,42px)}
.sechd .risco{width:56px;height:3px;border-radius:2px;background:var(--verde);
 margin:20px auto 0}
.sechd p{margin-top:18px;font-size:17px;color:var(--corpo)}
.sechd.esq{text-align:left;margin-inline:0}
.sechd.esq .risco{margin-inline:0}


/* ══ BOTÕES ════════════════════════════════════════════════════
   Âmbar preenchido com texto marinho: branco sobre âmbar daria 2:1
   de contraste e ninguém leria. O brilho que segue o cursor é
   injetado pelo anim.js (.btn-glow). */
.btn,.btn-o{position:relative;display:inline-flex;align-items:center;justify-content:center;
 gap:10px;padding:15px 26px;border-radius:9px;font-weight:700;font-size:15px;
 letter-spacing:.01em;overflow:hidden;white-space:nowrap;
 transition:transform .5s var(--mola),box-shadow .5s var(--mola),
            background .3s ease,color .3s ease,border-color .3s ease}
.btn{background:var(--verde);color:#fff;font-weight:600;
 box-shadow:0 10px 26px -14px rgba(27,77,34,.85)}
.btn:hover{background:var(--verde-cl);transform:translateY(-2px);
 box-shadow:0 20px 36px -16px rgba(242,162,28,.7)}
.btn-o{background:#fff;color:var(--tinta);border:1px solid var(--linha);font-weight:600}
.btn-o:hover{border-color:var(--verde-txt);color:var(--verde-txt);transform:translateY(-2px);
 box-shadow:var(--sombra)}
.btn .seta,.btn-o .seta{width:17px;height:17px;transition:transform .5s var(--mola)}
.btn:hover .seta,.btn-o:hover .seta{transform:translateX(4px)}
.btn-glow{position:absolute;inset:0;pointer-events:none;opacity:0;
 background:radial-gradient(130px circle at var(--gx,50%) var(--gy,50%),
 rgba(255,255,255,.5),transparent 62%);transition:opacity .35s ease}
.btn-glow.on{opacity:1}
.btn-o .btn-glow{background:radial-gradient(130px circle at var(--gx,50%) var(--gy,50%),
 rgba(30,60,110,.10),transparent 62%)}
.link-t{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--verde-txt);
 font-size:15px;transition:gap .4s var(--mola)}
.link-t svg{width:15px;height:15px}
.link-t:hover{gap:13px}

/* ══ NAV ═══════════════════════════════════════════════════════
   Dois estados: sobre o hero escuro ela é transparente com texto
   claro; passado o hero, .compact (do anim.js) traz o fundo branco
   e o texto escuro. Só as cores mudam — a geometria é a mesma. */
.nav{position:fixed;inset:0 0 auto;z-index:900;background:rgba(251,248,242,.88);
 border-bottom:1px solid transparent;
 transition:background .45s ease,box-shadow .45s ease,border-color .45s ease}
.nav.compact{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
 border-color:var(--linha);box-shadow:0 10px 30px -24px rgba(6,40,44,.55)}
.navin{display:flex;align-items:center;gap:42px;height:var(--topo);
 transition:height .45s var(--mola)}
.nav.compact .navin{height:70px}

.logo{display:flex;align-items:center;gap:13px}
.logo .mk{width:186px;height:auto;flex:none;
 transition:width .45s var(--mola),transform .55s var(--mola)}
.logo:hover .mk{transform:translateY(-2px) scale(1.04)}
.logo b{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:800;
 color:#fff;letter-spacing:-.03em;line-height:1;transition:color .45s ease}
.logo b span{font-weight:500;color:#9DB8DE;transition:color .45s ease}
.logo small{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
 color:rgba(255,255,255,.55);font-weight:600;margin-top:5px;transition:color .45s ease}
.nav.compact .logo b{color:var(--tinta)}
.nav.compact .logo b span{color:var(--suave)}
.nav.compact .logo small{color:var(--suave)}

.navlinks{display:flex;gap:34px;margin-inline:auto;font-size:15.5px;font-weight:500}
.navlinks a{position:relative;padding:7px 0;color:var(--corpo);
 transition:color .3s ease}
.navlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
 border-radius:2px;background:var(--verde-cl);transition:right .45s var(--mola)}
.navlinks a:hover,.navlinks a.active{color:var(--verde-txt)}
.navlinks a:hover::after,.navlinks a.active::after{right:0}
.nav.compact .navlinks a{color:var(--corpo)}
.nav.compact .navlinks a:hover,.nav.compact .navlinks a.active{color:var(--tinta)}
.nav.compact .navlinks a::after{background:var(--verde-txt)}

.navright{display:flex;align-items:center;gap:22px}
.navfone{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px;
 color:#fff;transition:color .3s ease,opacity .3s ease}
.navfone svg{width:19px;height:19px;fill:currentColor;stroke:none}
.navfone:hover{opacity:.8}
.nav.compact .navfone{color:var(--tinta)}
.navright .btn{padding:14px 24px;font-size:14.5px}
.burger{display:none;width:44px;height:44px;border-radius:10px;place-items:center;
 border:1px solid var(--linha);transition:border-color .45s ease}
.burger span{display:block;width:19px;height:1.8px;background:var(--tinta);border-radius:2px;
 transition:transform .45s var(--mola),opacity .3s ease,background .45s ease}
.burger span+span{margin-top:5px}
.nav.compact .burger{border-color:var(--linha)}
.nav.compact .burger span{background:var(--tinta)}
.nav.aberto .burger span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.nav.aberto .burger span:nth-child(2){opacity:0}
.nav.aberto .burger span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* ══ ENTRADA DO HERO ═══════════════════════════════════════════
   Keyframes disparados no próprio carregamento, sem classe posta por
   JS. A versão anterior fazia o contrário — escondia tudo no CSS e
   esperava o JS revelar depois de document.fonts.ready — e por isso
   não rodava: a fonte demorava ~900ms, o hero ficava em branco esse
   tempo todo, e qualquer engasgo no caminho (erro de script, aba em
   segundo plano) deixava a primeira tela vazia de vez.

   Aqui o navegador já começa a animação ao ler o CSS. O fill "both"
   segura o primeiro quadro durante o atraso e trava o último no fim,
   então o elemento nunca depende de ninguém para terminar visível.
   Com "reduzir movimento" a regra *{animation:none} lá embaixo zera
   tudo e cada elemento fica no seu estado natural, que já é o final.

   A ordem é a que o olho percorre: a foto fecha o zoom, depois entram
   rótulo, as duas linhas do título saindo de dentro da própria
   máscara, o texto, os selos em cascata e por fim o cartão. */
@keyframes sobe{
 from{opacity:0;transform:translate3d(0,26px,0)}
 to{opacity:1;transform:none}
}
@keyframes desce{
 from{opacity:0;transform:translate3d(0,-18px,0)}
 to{opacity:1;transform:none}
}
@keyframes revela-linha{
 from{transform:translate3d(0,112%,0)}
 to{transform:none}
}
@keyframes aproxima{
 from{transform:scale(1.13)}
 to{transform:none}
}

.nav{animation:desce .9s var(--mola) .05s both}
.hero-foto img{animation:aproxima 2.6s cubic-bezier(.22,1,.26,1) both}
.hero .kicker{animation:sobe .9s var(--mola) .20s both}
.hcopy h1 .linha > span{animation:revela-linha 1.2s cubic-bezier(.19,1,.22,1) both}
.hcopy h1 .linha:nth-child(1) > span{animation-delay:.30s}
.hcopy h1 .linha:nth-child(2) > span{animation-delay:.42s}
.hcopy > p{animation:sobe .95s var(--mola) .60s both}
.heroacoes{animation:sobe .95s var(--mola) .70s both}
.htrust li{animation:sobe .95s var(--mola) both}
.htrust li:nth-child(1){animation-delay:.82s}
.htrust li:nth-child(2){animation-delay:.90s}
.htrust li:nth-child(3){animation-delay:.98s}
.hfecho{animation:sobe 1s var(--mola) 1.06s both}
@keyframes sobe-folha{from{transform:translate3d(0,26px,0)}to{transform:none}}
.heroassin{animation:sobe 1.2s var(--mola) 1.16s both}
.herofolhas,.herofolhas2{animation:sobe-folha 1.2s var(--mola) 1.16s both}

/* ══ 2 · POR QUE ═══════════════════════════════════════════════ */
.por{position:relative;overflow:hidden;isolation:isolate;
 padding:clamp(80px,7.6vw,118px) 0 clamp(72px,7vw,104px);background:var(--creme)}

/* folhagem em aquarela nas bordas; o miolo da arte é creme liso, então
   cortar em `cover` nunca come conteúdo */
.porbg,.servbg{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.82;
 background:url(img/folhagem-topo.webp) center top/100% auto no-repeat,
            url(img/folhagem-base.webp) center bottom/100% auto no-repeat}

.por .sechd{max-width:760px;margin-bottom:clamp(38px,4vw,58px)}
.por .sechd h2{font-size:clamp(29px,3.3vw,44px);line-height:1.16}
.por .sechd .risco{width:64px;height:2px;background:var(--ouro);margin-top:22px}
.por .sechd p{max-width:700px;margin-inline:auto;font-size:16.5px;line-height:1.72}

.porgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,22px)}
.porcard{display:flex;flex-direction:column;text-align:left;color:inherit;
 padding:clamp(26px,2.4vw,34px) clamp(24px,2.2vw,32px) clamp(24px,2.2vw,30px);
 border-radius:18px;background:rgba(255,255,255,.82);
 border:1px solid var(--linha-2);backdrop-filter:blur(3px);
 transition:transform .6s var(--mola),box-shadow .6s var(--mola),
            border-color .4s ease,background .4s ease}
.porcard:hover{transform:translateY(-7px);background:#fff;border-color:transparent;
 box-shadow:0 26px 52px -32px rgba(31,44,24,.45)}
.porcard i{align-self:flex-start;flex:none;
 width:clamp(58px,4.7vw,68px);height:clamp(58px,4.7vw,68px);border-radius:50%;
 display:grid;place-items:center;background:var(--sage-cl);
 margin:0 0 clamp(20px,2vw,28px);
 transition:background .45s ease,transform .6s var(--mola)}
.porcard:hover i{background:var(--verde);transform:scale(1.05) rotate(-5deg)}
.porcard i svg{width:44%;height:44%;stroke:var(--verde);stroke-width:1.7;
 transition:stroke .45s ease}
.porcard:hover i svg{stroke:#fff}
.porcard h3{font-size:clamp(19px,1.5vw,23px);color:var(--verde-txt);margin-bottom:12px}

/* descrição e seta na mesma linha, a seta ancorada à direita */
.porpe{display:flex;align-items:center;gap:20px;margin-top:auto}
.porpe p{flex:1;font-size:clamp(14px,1.03vw,15.2px);line-height:1.62;color:var(--corpo)}
.porseta{width:21px;height:21px;flex:none;stroke:var(--verde);stroke-width:1.7;
 transition:transform .5s var(--mola)}
.porcard:hover .porseta{transform:translateX(5px)}

/* ── faixa de chamada logo abaixo da grade ── */
.porcta{display:flex;align-items:center;gap:clamp(20px,2.4vw,34px);
 margin-top:clamp(16px,1.6vw,24px);border-radius:18px;
 padding:clamp(20px,2vw,28px) clamp(24px,2.4vw,34px);
 background:linear-gradient(100deg,rgba(233,240,229,.92),rgba(246,244,236,.86));
 border:1px solid var(--linha)}
.porctaic{width:clamp(40px,3.4vw,50px);height:clamp(40px,3.4vw,50px);flex:none;
 stroke:var(--sage);stroke-width:1.3;
 padding-right:clamp(20px,2.4vw,34px);box-sizing:content-box;
 border-right:1px solid var(--linha)}
.porctatxt{flex:1;min-width:0}
.porctatxt b{display:block;font-family:'Cormorant Garamond',Georgia,serif;
 font-size:clamp(19px,1.55vw,24px);font-weight:600;color:var(--tinta);line-height:1.25}
.porctatxt span{display:block;margin-top:6px;font-size:clamp(13.8px,1.02vw,15.2px);
 line-height:1.6;color:var(--corpo)}
.porcta .btn{flex:none}

/* fecho da seção: fio, frase, fio */
.porfecho{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,28px);
 margin-top:clamp(42px,4.4vw,62px);
 font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
 color:var(--suave);text-align:center}
.porfecho::before,.porfecho::after{content:'';height:1px;width:clamp(40px,7vw,104px);
 background:var(--linha);flex:none}

/* ── faixa de números ─────────────────────────────────────────── */
.nums{margin-top:76px;display:grid;grid-template-columns:repeat(4,1fr);
 background:var(--verde);border-radius:var(--r-g);overflow:hidden;
 background-image:radial-gradient(900px 300px at 15% -40%,rgba(242,162,28,.40),transparent 70%)}
.num{padding:42px 26px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.num:last-child{border-right:0}
.num b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(30px,3.4vw,42px);
 font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1;
 transition:text-shadow .6s ease,color .6s ease}
.num b.num-glow{color:#fff;text-shadow:0 0 22px rgba(94,231,214,.85)}
.num span{display:block;margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.62);
 letter-spacing:.03em}

/* ══ 3 · CATÁLOGO DE SERVIÇOS ══════════════════════════════════
   Cartão-link inteiro: foto com etiqueta, título, rota, o que inclui e
   o preço na base. O .sin é coluna flex com a lista em flex:1 para que
   a faixa de preço encoste embaixo em todos os cartões, mesmo com
   títulos de uma ou duas linhas — senão os doze preços dançam. */
.serv{padding:110px 0 120px;background:var(--bg)}
.servgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.scard{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-g);
 overflow:hidden;border:1px solid var(--linha-2);color:inherit;
 transition:transform .6s var(--mola),box-shadow .6s var(--mola),border-color .4s ease}
.scard:hover{transform:translateY(-9px);box-shadow:var(--sombra-alta);border-color:transparent}
.scard[hidden]{display:none}
.sfoto{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;flex:none}
.sfoto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--mola)}
.scard:hover .sfoto img{transform:scale(1.07)}
.stag{position:absolute;z-index:2;left:12px;top:12px;display:inline-flex;align-items:center;
 gap:6px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.95);
 backdrop-filter:blur(6px);font-size:11.5px;font-weight:700;color:var(--tinta);
 box-shadow:0 6px 16px -9px rgba(6,40,44,.55)}
.stag svg{width:13px;height:13px;stroke:var(--verde-txt)}
.sin{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.stit{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;
 font-weight:800;color:var(--tinta);letter-spacing:-.025em;line-height:1.3}
.srota{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px;
 color:var(--suave);line-height:1.35}
.srota svg{width:14px;height:14px;stroke:var(--verde-txt);flex:none}
.slist{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:8px;align-content:start;flex:1}
.slist li{display:flex;gap:8px;align-items:flex-start;font-size:13.2px;line-height:1.45;
 color:var(--corpo)}
.slist svg{width:14px;height:14px;stroke:var(--verde);stroke-width:2.2;flex:none;margin-top:3px}
.spreco{display:flex;align-items:baseline;gap:8px;margin-top:18px;padding-top:16px;
 border-top:1px solid var(--linha-2)}
.spreco > span:first-child{font-size:12.5px;color:var(--suave)}
.spreco b{font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;font-weight:800;
 color:var(--ouro);letter-spacing:-.03em}
.sseta{margin-left:auto;align-self:center;width:32px;height:32px;border-radius:50%;
 background:var(--sage-cl);display:grid;place-items:center;flex:none;
 transition:background .4s ease,transform .5s var(--mola)}
.sseta svg{width:15px;height:15px;stroke:var(--verde-txt);stroke-width:2;
 transition:stroke .4s ease}
.scard:hover .sseta{background:var(--verde);transform:translateX(3px)}
.scard:hover .sseta svg{stroke:#fff}
.servnota{max-width:660px;margin:36px auto 0;text-align:center;font-size:13.5px;
 line-height:1.6;color:var(--suave)}

/* ══ 5 · COMO FUNCIONA ═════════════════════════════════════════ */
.como{padding:110px 0 120px;background:var(--bg)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.passo{text-align:center;padding:0 22px;position:relative}
/* linha pontilhada entre os passos — some no último e no mobile */
.passo::after{content:'';position:absolute;top:38px;left:calc(50% + 52px);
 right:calc(-50% + 52px);height:2px;
 background-image:linear-gradient(90deg,var(--linha) 55%,transparent 0);
 background-size:9px 2px}
.passo:last-child::after{display:none}
.passo i{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
 background:var(--verde);margin:0 auto 22px;position:relative;z-index:1;
 box-shadow:0 14px 30px -14px rgba(242,162,28,.8);
 transition:transform .6s var(--mola),box-shadow .6s var(--mola)}
.passo:hover i{transform:translateY(-6px) scale(1.05);
 box-shadow:0 22px 38px -16px rgba(242,162,28,.8)}
.passo i svg{width:30px;height:30px;stroke:#fff;stroke-width:1.9}
.passo .et{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
 text-transform:uppercase;color:var(--verde-txt);margin-bottom:8px}
.passo h3{font-size:18px;margin-bottom:10px}
.passo p{font-size:14.5px;line-height:1.65;max-width:230px;margin-inline:auto}

/* ══ 9 · RODAPÉ ════════════════════════════════════════════════ */
.rod{background:var(--verde);color:rgba(255,255,255,.6);padding:0 0 0;
 background-image:radial-gradient(900px 400px at 85% 0%,rgba(242,162,28,.26),transparent 66%)}
.rodgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.15fr;gap:40px;
 padding-bottom:58px}
.rodmarca .logo b{color:#fff}
.rodmarca .logo b span{color:rgba(255,255,255,.45)}
.rodmarca .logo small{color:rgba(255,255,255,.42)}
.rodmarca p{margin-top:22px;font-size:14.5px;line-height:1.7;max-width:290px}
.social{display:flex;gap:10px;margin-top:24px}
.social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);
 display:grid;place-items:center;
 transition:background .35s ease,transform .5s var(--mola)}
.social a:hover{background:var(--verde);transform:translateY(-3px)}
.social a:hover svg{stroke:#fff}
.social svg{width:17px;height:17px;stroke:#fff;stroke-width:1.7}
.rodcol h4{color:#fff;font-size:15px;font-weight:700;margin-bottom:20px;
 letter-spacing:-.01em}
.rodcol ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rodcol a{font-size:14.2px;color:rgba(255,255,255,.58);
 transition:color .3s ease,padding-left .4s var(--mola)}
.rodcol a:hover{color:#fff;padding-left:5px}
.rodcol .linha-c{display:flex;gap:11px;font-size:14.2px;line-height:1.55;
 color:rgba(255,255,255,.58)}
.rodcol .linha-c svg{width:16px;height:16px;stroke:var(--verde-cl);margin-top:3px}
.rodbase{border-top:1px solid rgba(255,255,255,.09);padding:22px 0;text-align:center;
 font-size:13px;color:rgba(255,255,255,.4)}

/* ══ BOTÃO FLUTUANTE DO WHATSAPP ═══════════════════════════════ */
.wa{position:fixed;right:24px;bottom:24px;z-index:950;width:58px;height:58px;
 border-radius:50%;background:#25D366;display:grid;place-items:center;
 box-shadow:0 14px 30px -10px rgba(37,211,102,.75);
 transition:transform .55s var(--mola),box-shadow .55s var(--mola)}
.wa:hover{transform:scale(1.08) translateY(-2px);
 box-shadow:0 20px 38px -12px rgba(37,211,102,.85)}
.wa svg{width:29px;height:29px;fill:#fff;stroke:none}
.wa::before{content:'';position:absolute;inset:0;border-radius:50%;
 border:2px solid rgba(37,211,102,.55);animation:pulso 2.6s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.5);opacity:0}
 100%{opacity:0}}

/* ══ REVEAL — mesmo sistema [data-rv] dos sites anteriores ══════ */
.anim [data-rv]{opacity:0;transform:translate3d(0,26px,0);
 transition:opacity .85s var(--mola) var(--d,0s),transform .95s var(--mola) var(--d,0s)}
.anim [data-rv="left"]{transform:translate3d(-34px,0,0)}
.anim [data-rv="right"]{transform:translate3d(34px,0,0)}
.anim [data-rv="zoom"]{transform:scale(.94)}
.anim [data-rv].in{opacity:1;transform:none}

/* onda diagonal das grades — o atraso --wd vem do anim.js */
.anim .porgrid .porcard[data-wave],
.anim .servgrid .scard[data-wave],
.anim .avalgrid .acard[data-wave],
.anim .fgrid .fcard[data-wave],
.anim .rgrid .rcard[data-wave],
.anim .pgrid .passo[data-wave],
.anim .dgrid .dcard[data-wave],
.anim .egrid .ecard[data-wave]{
 opacity:0;transform:translate3d(0,34px,0) scale(.97);
 transition:opacity 1s var(--mola) var(--wd,0s),transform 1s var(--mola) var(--wd,0s)}
.anim .porgrid .porcard[data-wave].wv-in,
.anim .servgrid .scard[data-wave].wv-in,
.anim .avalgrid .acard[data-wave].wv-in,
.anim .fgrid .fcard[data-wave].wv-in,
.anim .rgrid .rcard[data-wave].wv-in,
.anim .pgrid .passo[data-wave].wv-in,
.anim .dgrid .dcard[data-wave].wv-in,
.anim .egrid .ecard[data-wave].wv-in{opacity:1;transform:none}

/* cursor do título datilografado */
.cursor{display:inline-block;width:2px;height:.82em;background:currentColor;
 margin-left:3px;vertical-align:-1px;animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.cursor.off{display:none}

@media (prefers-reduced-motion:reduce){
 *{animation:none!important;transition-duration:.01ms!important}
 html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVO
   O hero é uma foto de fundo, então ele não precisa reorganizar peça
   nenhuma ao estreitar: o que muda é o véu (fica vertical, para o
   texto não cair em cima do carro) e a barra de cotação, que passa de
   uma linha para campos empilhados.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1240px){
 .wrap{width:min(1320px,calc(100% - 72px))}
 .navlinks{gap:26px;font-size:15px}
 .servgrid{grid-template-columns:repeat(3,1fr)}
 .navin{gap:28px}
 .rotapanel{padding:44px}
}
@media (max-width:1080px){
 .navfone{display:none}
 .fgrid,.egrid{grid-template-columns:repeat(3,1fr)}
 .rotapanel{grid-template-columns:1fr;gap:34px}
 .rotacopy p{max-width:none}
 .cotaform{grid-template-columns:1fr 1fr;gap:22px 0}
 .campo{padding:0 22px 14px 0;border-right:0;
  border-bottom:1px solid rgba(255,255,255,.13)}
 .cotaform .btn{grid-column:1/-1;margin-left:0;margin-top:10px}
}
@media (max-width:980px){
 .porgrid{grid-template-columns:repeat(2,1fr)}
 .porcta{flex-wrap:wrap;row-gap:20px}
 .porctatxt{flex:1 1 60%}
 .nums{grid-template-columns:repeat(2,1fr)}
 .num:nth-child(2){border-right:0}
 .num:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}
 .pgrid{grid-template-columns:repeat(2,1fr);gap:46px 0}
 .passo:nth-child(2)::after{display:none}
 .dgrid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
 .rodgrid{grid-template-columns:1fr 1fr 1fr;gap:38px}
 .rodmarca{grid-column:1/-1}
 .rodmarca p{max-width:460px}
}
@media (max-width:900px){
 :root{--topo:74px}
 .wrap{width:calc(100% - 44px)}
 .burger{display:grid}
 /* menu em painel deslizante — a nav vira coluna quando .aberto */
 .navlinks{position:fixed;inset:var(--topo) 0 auto;flex-direction:column;gap:0;
  background:#fff;border-bottom:1px solid var(--linha);padding:8px 22px 20px;
  margin:0;transform:translateY(-14px);opacity:0;pointer-events:none;
  box-shadow:0 22px 40px -26px rgba(6,40,44,.55);
  transition:transform .5s var(--mola),opacity .4s ease}
 .nav.aberto .navlinks{transform:none;opacity:1;pointer-events:auto}
 .navlinks a{padding:14px 0;border-bottom:1px solid var(--linha-2);font-size:16px}
 .navlinks a::after{display:none}
 .navright{margin-left:auto}
 .navright .btn{padding:12px 18px;font-size:14px}
 /* o painel do menu é branco, então a nav assume o tema claro enquanto
    estiver aberta, mesmo parada no topo sobre o hero escuro */
 .nav.aberto{background:rgba(255,255,255,.96);border-color:var(--linha)}
 .nav.aberto .logo b{color:var(--tinta)}
 .nav.aberto .logo b span,.nav.aberto .logo small{color:var(--suave)}
 .nav.aberto .navfone{color:var(--tinta)}
 .nav.aberto .burger{border-color:var(--linha)}
 .nav.aberto .burger span{background:var(--tinta)}
 .nav.aberto .navlinks a{color:var(--corpo)}
 /* véu na vertical: o texto ocupa a largura toda e o carro fica embaixo */
 .hero-foto img{object-position:70% 62%}
 .hero-foto::after{background:
  linear-gradient(180deg,rgba(8,18,34,.92) 0%,rgba(8,18,34,.88) 42%,
   rgba(4,30,34,.72) 64%,rgba(4,30,34,.58) 82%,rgba(4,30,34,.66) 100%)}
 .heroin{min-height:0;padding:44px 0 40px}
 .hcopy{margin-top:0}
 .cota{margin-top:36px}
 .hcopy{max-width:none}
 .hcopy > p{max-width:540px}
 .hcopy > p br{display:none}
 .cota{margin-top:40px;padding:22px 20px 24px}
 .por{padding:110px 0 90px}
 .frota,.como,.dep,.dest,.serv{padding:84px 0}
 .servgrid{grid-template-columns:repeat(2,1fr);gap:16px}
 .frotanota{text-align:left;max-width:none}
 .frotatop,.desttop{flex-direction:column;align-items:flex-start;gap:20px}
 .faixain{grid-template-columns:1fr;gap:22px;padding:30px 0}
 .fx{justify-content:flex-start}
}
@media (max-width:680px){
 .fgrid,.egrid{grid-template-columns:repeat(2,1fr)}

 .hselos{margin-top:32px}
 .hselo{padding:0 20px}
 .cotaform{grid-template-columns:1fr}
 .sechd{margin-bottom:38px}
 .rodgrid{grid-template-columns:1fr 1fr}
 .rodcol:last-child{grid-column:1/-1}
 .wa{right:16px;bottom:16px;width:54px;height:54px}
}
@media (max-width:600px){
 /* logo + CTA + hambúrguer não cabem lado a lado: o CTA sai e a conversa
    continua pelo botão flutuante do WhatsApp e pelo formulário do hero */
 .navright .btn{display:none}
 /* sem divisórias verticais quando os selos empilham */
 .hselos{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:30px}
 .hselo{padding:0;border-left:0;gap:11px}
 .hselo > svg{width:25px;height:25px}
 .hselo b{font-size:15px}
 .hselo > span > span{font-size:12.5px}
}
@media (max-width:480px){
 .hcopy h1{font-size:33px}
 .hcopy > p{font-size:16.5px}
 .hselos{grid-template-columns:1fr}
 .cotahd{flex-direction:column;gap:4px}
 .porgrid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
 .nums{grid-template-columns:1fr}
 .num{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
 .num:last-child{border-bottom:0}
 .pgrid{grid-template-columns:1fr;gap:38px}
 .passo::after{display:none}
 .passo p{max-width:none}
 .fgrid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
 .egrid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
 .servgrid{grid-template-columns:1fr;max-width:400px;margin-inline:auto}
 .chip{padding:10px 18px;font-size:14px}
 .logo small{display:none}
}

/* ══ cartão de serviço sem preço: o título leva o ícone ══════════ */
.stit{display:flex;align-items:center;gap:10px;font-family:'Cormorant Garamond',Georgia,serif;
 font-size:18px;font-weight:800;color:var(--tinta);letter-spacing:-.025em;line-height:1.3}
.stit svg{width:21px;height:21px;stroke:var(--verde-txt);flex:none}
.scard p{margin-top:11px;font-size:14.6px;line-height:1.65;color:var(--corpo);flex:1}
.scard .slist{margin-top:16px;padding-top:15px;border-top:1px solid var(--linha-2)}

.rodlogo{width:200px;height:auto;filter:brightness(0) invert(1);opacity:.95}
.rodmarca p{margin-top:20px}

@media (max-width:900px){
 .burger{display:none!important}
 .navlinks{display:none}
 .so-desk{display:none}
 .so-mob{display:inline}
 .navright{margin-left:auto}
 .navright .btn{display:inline-flex;padding:12px 18px;font-size:14.5px}
 .hselos{display:none}
 .hcopy > p{margin-bottom:6px}
}

/* ══ LOGO ═══════════════════════════════════════════════════════ */
.logo .mk{width:46px;height:46px;border-radius:50%;flex:none;
 transition:width .45s var(--mola),height .45s var(--mola)}
.nav.compact .logo .mk{width:40px;height:40px}
.logo b{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-weight:600;
 color:var(--tinta);line-height:1.1;letter-spacing:.01em}
.logo small{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
 color:var(--suave);font-weight:600;margin-top:3px}

/* ══ 2 · PILARES ════════════════════════════════════════════════
   Faixa de apoio logo abaixo do hero, como na referência: quatro
   fundamentos que guiam o cuidado, em texto curto. */
.pilares{background:var(--creme-2);border-block:1px solid var(--linha)}
.pilgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
.pilar{display:flex;align-items:flex-start;gap:14px;padding:34px 30px;
 border-right:1px solid var(--linha)}
.pilar:last-child{border-right:0}
.pilar > svg{width:26px;height:26px;stroke:var(--sage);flex:none;margin-top:2px}
.pilar b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;
 font-weight:600;color:var(--tinta);line-height:1.2}
.pilar > span > span{display:block;margin-top:6px;font-size:13.8px;line-height:1.6;
 color:var(--corpo)}

/* ══ 3 · SOBRE ══════════════════════════════════════════════════ */
.sobre{padding:110px 0;background:var(--creme)}
.sobregrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.sobrefoto{position:relative;border-radius:var(--r-g);overflow:hidden;aspect-ratio:4/4.4}
.sobrefoto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.sobretxt h2{font-size:clamp(30px,3.4vw,42px);margin-bottom:20px}
.sobretxt p{font-size:16.5px;line-height:1.78;color:var(--corpo);margin-bottom:16px}
.sobretxt em{color:var(--verde-txt);font-style:italic}
.sobrelista{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:12px}
.sobrelista li{display:flex;align-items:flex-start;gap:11px;font-size:15px;
 line-height:1.55;color:var(--corpo)}
.sobrelista svg{width:17px;height:17px;stroke:var(--verde-check);stroke-width:2.2;
 flex:none;margin-top:3px}

/* ══ 4 · PRÁTICAS ═══════════════════════════════════════════════
   Mesma folhagem em aquarela da seção de áreas de atuação, quatro
   textos soltos nas margens (só em telas largas) e duas fileiras:
   três cartões com foto e três recursos complementares. */
.serv{position:relative;overflow:hidden;isolation:isolate;
 padding:clamp(80px,7.6vw,118px) 0 clamp(76px,7.4vw,110px);background:var(--areia)}

/* textos decorativos das margens: só entram quando sobra margem fora
   do container de 1320px, senão colidem com os cartões */
.margem{display:none;position:absolute;z-index:1;font-size:11px;font-weight:600;
 letter-spacing:.22em;text-transform:uppercase;line-height:2.05;color:var(--sage)}
.m-ce{left:clamp(24px,3.2vw,62px);top:clamp(150px,17vw,220px)}
.m-di{right:clamp(24px,3.2vw,62px);bottom:clamp(60px,7vw,110px);text-align:right}
.m-di::before{content:'';display:block;width:40px;height:1px;background:var(--linha);
 margin:0 0 18px auto}
.m-de,.m-ci{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
 font-size:clamp(15px,1.15vw,17.5px);font-weight:500;letter-spacing:0;line-height:1.55;
 text-transform:none;color:var(--suave)}
.m-de{right:clamp(24px,3.2vw,62px);top:clamp(96px,11vw,150px);text-align:right}
.m-de::after{content:'';display:block;width:40px;height:1px;background:var(--ouro);
 opacity:.65;margin:16px 0 0 auto}
.m-ci{left:clamp(24px,3.2vw,62px);bottom:clamp(60px,7vw,110px)}
@media (min-width:1560px){ .margem{display:block} }

.serv .sechd{max-width:760px}
.serv .sechd .risco{width:64px;height:2px;background:var(--ouro);margin-top:22px}

.servgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)}
.scard{display:flex;flex-direction:column;overflow:hidden;background:#fff;
 border:1px solid var(--linha-2);border-radius:18px;color:inherit;
 transition:transform .6s var(--mola),box-shadow .6s var(--mola),border-color .4s ease}
.scard:hover{transform:translateY(-7px);border-color:transparent;
 box-shadow:0 28px 56px -34px rgba(31,44,24,.45)}
.sfoto{position:relative;display:block;aspect-ratio:16/10.4;overflow:hidden;flex:none}
.sfoto img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--mola)}
.scard:hover .sfoto img{transform:scale(1.06)}

.sin{display:flex;flex-direction:column;flex:1;
 padding:clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px) clamp(22px,2.2vw,28px)}
.smeta{display:flex;align-items:center;gap:10px;margin-bottom:14px;
 font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
 color:var(--suave)}
.smeta svg{width:17px;height:17px;stroke:var(--sage);flex:none}
.scard h3{font-size:clamp(21px,1.72vw,26px);color:var(--tinta);margin-bottom:12px}
.scard p{margin:0;font-size:clamp(14.2px,1.05vw,15.5px);line-height:1.7;color:var(--corpo)}

/* rodapé do cartão: link de texto à esquerda, botão redondo à direita */
.spe{display:flex;align-items:center;justify-content:space-between;gap:16px;
 margin-top:clamp(22px,2.4vw,32px);padding-top:0}
.slk{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;
 color:var(--verde);transition:gap .4s var(--mola)}
.slk svg{width:17px;height:17px;stroke:var(--verde);stroke-width:1.9}
.scard:hover .slk{gap:14px}
.sarr{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:none;
 background:var(--sage-cl);
 transition:background .4s ease,transform .5s var(--mola)}
.sarr svg{width:17px;height:17px;stroke:var(--verde);stroke-width:1.9;
 transition:stroke .4s ease}
.scard:hover .sarr,.mcard:hover .sarr{background:var(--verde);transform:translateX(3px)}
.scard:hover .sarr svg,.mcard:hover .sarr svg{stroke:#fff}

/* fio — rótulo — fio antes dos recursos complementares */
.servsep{display:flex;align-items:center;gap:clamp(16px,2vw,30px);
 margin:clamp(40px,4.2vw,60px) 0 clamp(18px,1.9vw,26px);
 font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
 color:var(--suave);white-space:nowrap}
.servsep::before,.servsep::after{content:'';height:1px;flex:1;background:var(--linha)}

.servmini{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px);
 margin-top:0}
.mcard{display:flex;align-items:center;gap:clamp(14px,1.5vw,20px);color:inherit;
 padding:clamp(20px,2vw,26px) clamp(20px,2vw,26px);
 background:#fff;border:1px solid var(--linha-2);border-radius:18px;
 transition:transform .6s var(--mola),box-shadow .6s var(--mola),border-color .4s ease}
.mcard:hover{transform:translateY(-5px);border-color:transparent;
 box-shadow:0 22px 46px -32px rgba(31,44,24,.42)}
.mcard .mic{width:28px;height:28px;flex:none;stroke:var(--sage);stroke-width:1.5;
 align-self:flex-start;margin-top:2px}
.mcard > span:not(.sarr){flex:1;min-width:0}   /* o .sarr também é um
   span filho direto: sem o :not ele herdava o flex:1 e virava uma elipse */
.mcard b{display:block;font-family:'Cormorant Garamond',Georgia,serif;
 font-size:clamp(18px,1.4vw,21px);font-weight:600;color:var(--tinta);line-height:1.25;
 margin-bottom:8px}
.mcard b + span{display:block;font-size:13.6px;line-height:1.62;color:var(--corpo)}
.mcard .sarr{width:38px;height:38px}
.mcard .sarr svg{width:15px;height:15px}

/* ══ 5 · FILOSOFIA ══════════════════════════════════════════════ */
.filo{position:relative;overflow:hidden;isolation:isolate;
 padding:clamp(76px,8vw,112px) 0 clamp(96px,9vw,132px);
 background:var(--verde);color:#fff}

/* foto de folhas sangrando da esquerda; o degradê a dissolve no verde
   antes de chegar no texto, para o contraste da leitura não cair */
.filobg{position:absolute;inset:0;z-index:-2;
 background:url(img/folhas-fundo.webp) left center/cover no-repeat;
 filter:saturate(1.08) brightness(1.06)}
.filobg::after{content:'';position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(21,58,27,.10) 0%,rgba(21,58,27,.34) 11%,
 rgba(22,62,28,.70) 21%,rgba(25,70,31,.92) 32%,rgba(27,77,34,.99) 44%,var(--verde) 58%)}

/* arcos dourados finos do lado direito */
.filoarco{position:absolute;z-index:-1;right:-9%;top:-4%;height:108%;width:auto;
 fill:none;stroke:var(--ouro);stroke-width:1.6;opacity:.6;
 stroke-dasharray:none;vector-effect:non-scaling-stroke}

/* “Saúde em equilíbrio” de pé na borda direita, com o fio embaixo */
.filovert{display:none;position:absolute;z-index:1;right:clamp(20px,3vw,52px);top:36%;
 writing-mode:vertical-rl;font-size:11.5px;font-weight:600;letter-spacing:.34em;
 text-transform:uppercase;color:rgba(226,238,222,.50)}
.filovert::after{content:'';display:block;width:1px;height:72px;margin:20px auto 0;
 background:linear-gradient(rgba(201,162,39,.7),rgba(201,162,39,0))}

.filogrid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.2fr;
 gap:clamp(36px,4vw,54px);align-items:center}

.filo .kicker{color:var(--ouro);margin-bottom:18px}
.filotxt h2{color:#fff;font-size:clamp(30px,3.9vw,54px);line-height:1.13;margin-bottom:22px}
.filotxt h2 em{font-style:normal;color:#E0CFA0}
.filotxt p{color:#C6D8C0;font-size:clamp(15.5px,1.12vw,17px);line-height:1.76;margin-bottom:16px}
.filonota{color:#E9F0E5 !important}
.filonota strong{color:#fff;font-weight:600}

/* trio de ganhos, separado por fios verticais */
.filoganhos{display:flex;align-items:center;gap:clamp(16px,1.9vw,28px);
 margin:clamp(28px,3vw,40px) 0 0;padding:0;list-style:none}
.filoganhos li{display:flex;align-items:center;gap:12px;flex:1}
.filoganhos li + li{border-left:1px solid rgba(255,255,255,.16);
 padding-left:clamp(16px,1.9vw,28px)}
.filoganhos svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--ouro);
 stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.filoganhos span{font-size:13.5px;line-height:1.42;color:#DCE8D8}

.filocit{margin:clamp(28px,3vw,42px) 0 0;padding:0;border:0;
 font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
 font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:rgba(226,238,222,.72)}
.filocit::after{content:'';display:block;width:74px;height:1px;margin-top:22px;
 background:var(--ouro);opacity:.75}

/* ── os quatro cartões ── */
.filocomp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.3vw,20px)}
.fbox{position:relative;border-radius:16px;
 padding:clamp(26px,2.5vw,38px) clamp(22px,2.1vw,32px);
 background:rgba(9,33,15,.40);border:1px solid rgba(255,255,255,.12);
 backdrop-filter:blur(2px);
 transition:transform .55s var(--mola),background .45s ease,border-color .45s ease}
.fbox:hover{transform:translateY(-4px);background:rgba(9,33,15,.54)}
.fbox i{display:grid;place-items:center;width:clamp(56px,4.6vw,66px);
 aspect-ratio:1;border-radius:50%;
 background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
 float:left;margin:0 20px 0 0}
.fbox i svg{width:47%;height:47%;fill:none;stroke:#CFE0C8;stroke-width:1.5;
 stroke-linecap:round;stroke-linejoin:round}
.fbox h4{font-family:'Inter',sans-serif;font-size:clamp(11.5px,.87vw,13px);
 font-weight:700;text-transform:uppercase;letter-spacing:.11em;line-height:1.6;
 color:#fff;padding-top:clamp(6px,.7vw,11px);margin:0}
.fbox p{clear:both;margin:0;padding-top:clamp(20px,2vw,28px);
 font-size:clamp(14px,1.02vw,15.5px);line-height:1.68;color:#BFD2BA;
 border-top:1px solid transparent;position:relative}
.fbox p::before{content:'';position:absolute;top:clamp(10px,1vw,14px);left:0;
 width:40px;height:1px;background:rgba(255,255,255,.34)}

/* a coluna da direita é a abordagem dele: entra dourada */
.fbox.alt{border-color:rgba(201,162,39,.58);
 background:linear-gradient(135deg,rgba(201,162,39,.17),rgba(201,162,39,.05) 62%,rgba(9,33,15,.34));
 box-shadow:0 0 0 1px rgba(201,162,39,.10),0 18px 46px -30px rgba(201,162,39,.55)}
.fbox.alt:hover{border-color:rgba(228,196,90,.8)}
.fbox.alt i{background:linear-gradient(145deg,#E7CA6C,#BE9530);border-color:rgba(232,200,94,.5)}
.fbox.alt i svg{stroke:#1B4D22;stroke-width:1.7}
.fbox.alt h4{color:#E8C75F}
.fbox.alt p::before{background:rgba(232,200,94,.55)}

/* abaixo de 1500px o container de 1320 encosta na borda e não sobra
   pista para o texto de pé — ele é decorativo, então some */
@media (min-width:1500px){ .filovert{display:block} }

/* assinatura manuscrita no rodapé da seção */
.filoassin{position:absolute;z-index:1;right:clamp(64px,9vw,150px);
 bottom:clamp(18px,2.4vw,34px);display:flex;align-items:center;gap:22px;
 font-family:'Mrs Saint Delafield',cursive;font-size:clamp(26px,2.6vw,38px);
 line-height:1;color:rgba(226,238,222,.46)}
.filoassin::after{content:'';width:clamp(40px,4vw,66px);height:1px;
 background:rgba(226,238,222,.34)}

/* ══ 7 · PROCESSO — o círculo agora leva o numeral ══════════════ */
.passo i{background:var(--verde)}
.passo i span{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;
 font-weight:700;color:#fff;line-height:1}
.passo .et{color:var(--sage)}

/* ══ 8 · AVALIAÇÕES ═════════════════════════════════════════════ */
.aval{padding:110px 0;background:var(--creme)}
.notag{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:10px 20px;
 border-radius:999px;background:#fff;border:1px solid var(--linha);
 font-size:14px;font-weight:600;color:var(--corpo)}
.estrelas{display:inline-flex;gap:3px}
.estrelas svg{width:16px;height:16px;fill:var(--ouro);stroke:none}
.avalgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.acard{background:#fff;border:1px solid var(--linha-2);border-radius:var(--r-g);
 padding:28px 26px;display:flex;flex-direction:column;
 transition:transform .6s var(--mola),box-shadow .6s var(--mola)}
.acard:hover{transform:translateY(-6px);box-shadow:var(--sombra-alta)}
.acard p{margin:15px 0 18px;font-size:15.5px;line-height:1.75;color:var(--corpo);
 font-style:italic;flex:1}
.acard .autor{font-size:13.5px;font-weight:600;color:var(--verde-txt)}

/* ══ 9 · CHAMADA FINAL ══════════════════════════════════════════
   Cartão escuro sobre o creme: foto de folhas ao fundo, texto à
   esquerda e a citação dentro de um anel dourado à direita. */
.cta{padding:clamp(40px,4vw,64px) 0 clamp(72px,7vw,104px);background:var(--creme)}

.ctabox{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;
 display:grid;grid-template-columns:1.55fr 1fr;align-items:center;
 gap:clamp(24px,3vw,48px);
 padding:clamp(40px,4.4vw,64px) clamp(30px,3.6vw,56px)
         clamp(40px,4.4vw,64px) clamp(30px,4.2vw,62px);
 background:var(--verde);color:#fff;
 box-shadow:0 34px 70px -42px rgba(27,77,34,.65)}

.ctafoto{position:absolute;inset:0;z-index:-2;
 background:url(img/folhas-cta.webp) center right/cover no-repeat}
.ctafoto::after{content:'';position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(21,58,27,.97) 0%,rgba(21,58,27,.93) 30%,
 rgba(22,62,28,.74) 50%,rgba(24,68,30,.34) 70%,rgba(24,68,30,.06) 100%)}

/* anel dourado atrás da citação */
.ctaanel{position:absolute;z-index:-1;right:6%;top:50%;translate:0 -50%;
 height:86%;aspect-ratio:1;border-radius:50%;
 border:1.4px solid rgba(201,162,39,.85);pointer-events:none}

.ctacopy .kicker{color:var(--ouro);margin-bottom:18px}
/* variante com o fio ANTES do rótulo, como na referência */
.kicker.risc-e{display:flex;align-items:center;gap:16px}
.kicker.risc-e::before{content:'';height:1px;width:52px;background:var(--ouro);opacity:.75}

.ctabox h2{color:#fff;font-size:clamp(30px,3.7vw,52px);line-height:1.12;
 margin-bottom:20px;letter-spacing:-.005em}
.ctabox h2 em{font-style:normal;color:#E0CFA0}
.ctacopy > p{max-width:56ch;color:#C6D8C0;font-size:clamp(15.5px,1.15vw,17.5px);
 line-height:1.72}

.ctameta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;
 margin-top:clamp(22px,2.4vw,32px);color:#DCE8D8;font-size:clamp(14px,1.05vw,15.5px)}
.ctameta span{display:inline-flex;align-items:center;gap:10px}
.ctameta svg{width:19px;height:19px;stroke:#CFE0C8;stroke-width:1.5;flex:none}
.ctameta i{width:4px;height:4px;border-radius:50%;background:rgba(220,232,216,.6)}

.ctaacoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,2.8vw,38px)}
.ctaacoes .btn{background:#fff;color:var(--verde);padding:17px 26px}
.ctaacoes .btn:hover{background:var(--creme)}
.ctaacoes .btn .seta{margin-left:6px}
.ctaacoes .btn-o{background:transparent;border:1.5px solid rgba(255,255,255,.42);
 color:#fff;padding:17px 26px}
.ctaacoes .btn-o:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.ctaacoes svg{width:19px;height:19px}

.ctacit{margin:0;padding:0}
.ctacit blockquote{margin:0;padding:0;border:0;
 font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(21px,2.05vw,29px);
 line-height:1.36;color:#F0F5EE}
.ctacit blockquote::after{content:'';display:block;width:42px;height:1px;
 margin-top:22px;background:var(--ouro);opacity:.85}

/* ══ ONDA E ABERTURA DO RODAPÉ ═════════════════════════════════
   A onda é pintada em creme POR CIMA do verde do rodapé: assim o
   rodapé continua com o fundo dele e a curva recorta a emenda. */
.rodonda{display:block;width:100%;height:clamp(46px,5.4vw,92px);
 fill:var(--creme);stroke:none;margin-bottom:clamp(18px,2.6vw,42px)}

.rodintro{display:grid;grid-template-columns:1.35fr 1fr;align-items:center;
 gap:clamp(24px,3vw,48px);
 padding-bottom:clamp(38px,4vw,58px);margin-bottom:clamp(38px,4vw,58px);
 border-bottom:1px solid rgba(255,255,255,.12)}
.rodintro .kicker{color:var(--ouro);margin-bottom:14px}
.rodintro h2{color:#fff;font-size:clamp(27px,3.1vw,42px);line-height:1.16}
.rodintro > p{padding-left:clamp(24px,3vw,48px);
 border-left:1px solid rgba(255,255,255,.18);
 font-size:clamp(15px,1.1vw,16.5px);line-height:1.8;color:rgba(255,255,255,.72)}

/* ══ RODAPÉ — aviso legal ═══════════════════════════════════════ */
.rodbase .aviso{max-width:680px;margin:0 auto 12px;font-size:12.2px;line-height:1.6;
 color:rgba(255,255,255,.42)}
.rodmarca .logo b{color:#fff}
.rodmarca .logo small{color:rgba(255,255,255,.5)}

/* ══ RESPONSIVO DESTE SITE ══════════════════════════════════════ */
@media (max-width:1080px){
 .servgrid,.servmini,.avalgrid{grid-template-columns:repeat(2,1fr)}
 .pilgrid{grid-template-columns:repeat(2,1fr)}
 .pilar:nth-child(2n){border-right:0}
 .pilar:nth-child(-n+2){border-bottom:1px solid var(--linha)}
 .filogrid{grid-template-columns:1fr;gap:38px}
 .filoarco,.filovert{display:none}
 .filoassin{position:static;margin:34px auto 0;width:max-content;
  justify-content:center;right:auto;bottom:auto}
 .filobg::after{background:linear-gradient(90deg,rgba(21,58,27,.55) 0%,
  rgba(24,66,30,.90) 22%,var(--verde) 46%)}
}
@media (max-width:900px){
 /* o hero deixa de ser duas colunas: texto em cima, foto embaixo */
 .hero{grid-template-columns:1fr;min-height:0}
 .hero::before{right:auto;left:-30%;top:-10%;width:90vw;height:90vw}
 .heroin{max-width:none;margin-inline:auto;padding:calc(var(--topo) + 34px) 0 42px;
  width:min(1320px,calc(100% - 44px))}
 .hero-foto{height:46vh;min-height:300px}
 .sobregrid{grid-template-columns:1fr;gap:34px}
 .sobrefoto{aspect-ratio:4/3;max-width:460px}
 .sobre,.serv,.aval{padding:80px 0}
 .cta{padding:10px 0 80px}
 .ctabox{padding:48px 24px}
}
@media (max-width:680px){
 .servgrid,.servmini,.avalgrid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
 .servmini{margin-top:20px}
 .pilgrid{grid-template-columns:1fr}
 .pilar{border-right:0;border-bottom:1px solid var(--linha);padding:24px 0}
 .pilar:last-child{border-bottom:0}
 .filocomp{grid-template-columns:1fr}
 .heroacoes .btn,.heroacoes .btn-o{flex:1;justify-content:center}
}

/* rótulo curto do CTA: só aparece quando a nav perde o menu */
.so-mob{display:none}
@media (max-width:900px){
 .so-desk{display:none}
 .so-mob{display:inline}
}

@media (max-width:900px){
 /* a marca de duas linhas + CTA não cabem lado a lado no estreito */
 /* o vão de 42px da nav larga é o que empurrava o CTA para fora */
 .navin{gap:12px}
 .navright{margin-left:auto}
 .logo .mk{width:36px;height:36px}
 .logo{gap:10px}
 .logo b{font-size:16px;white-space:nowrap}
 .logo small{display:none}
 .navright .btn{padding:11px 16px;font-size:14px}
}
@media (max-width:680px){
 /* os dois botões do hero empilham; lado a lado um deles vazava */
 .heroacoes{flex-direction:column;align-items:stretch}
 .heroacoes .btn,.heroacoes .btn-o{flex:none;justify-content:center}
}

/* ══ 1 · HERO ══════════════════════════════════════════════════
   Duas colunas dentro de um container de 1460px: texto à esquerda
   (47%), foto à direita (53%). O creme é o mesmo --creme do resto do
   site; a paleta pedida no briefing (bg #F7F5EE, verde #1D5A34, ouro
   #C29A44…) já existia em tokens equivalentes, então reutilizo em vez
   de duplicar variáveis. A curva da base é um SVG pintado com a cor
   da seção seguinte — sem imagem e sem JS. */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;
 min-height:clamp(680px,100svh,860px);background:var(--creme);
 padding:calc(var(--topo) + 40px) 0 clamp(76px,7vw,104px)}
.hero::before{display:none}

/* folhagem linear de fundo — decorativa, não intercepta clique */
.herofolhas2{display:none}
.herofolhas{position:absolute;z-index:0;left:clamp(-330px,-17vw,-150px);top:-4%;
 height:108%;width:auto;max-width:min(420px,30vw);
 opacity:.04;pointer-events:none;user-select:none}

.heroin{position:relative;z-index:2;
 width:min(1460px,calc(100% - 96px));margin-inline:auto;
 display:grid;grid-template-columns:47fr 53fr;
 gap:clamp(36px,4.2vw,68px);align-items:center}

.hcopy{max-width:690px}
.hero .kicker{color:var(--sage);font-size:12.5px;letter-spacing:.2em;margin-bottom:22px}
.hero .kicker.risc-e::before{width:40px;background:var(--ouro);opacity:.9}

.hcopy h1{font-size:clamp(42px,4.3vw,68px);line-height:1.02;color:var(--tinta);
 letter-spacing:-.012em}
.hcopy h1 .az{color:var(--verde-txt);font-style:italic}
.hcopy h1 .linha{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.hcopy h1 .linha > span{display:block}

.hcopy > p:not(.hfecho){margin-top:26px;max-width:580px;
 font-size:clamp(17px,1.28vw,19.5px);line-height:1.62;color:var(--corpo)}

/* ── as duas ações ── */
.heroacoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
 margin-top:clamp(30px,3.2vw,40px)}
.heroacoes .btn{padding:17px 32px;border-radius:11px;font-size:15.5px;
 box-shadow:0 12px 26px -18px rgba(18,63,39,.85)}
.heroacoes .btn:hover{background:#143D1B}
.heroacoes .btn svg{width:19px;height:19px}

/* secundária: mesmo peso visual, borda fina em vez de preenchimento */
.btn-o2{display:inline-flex;align-items:center;justify-content:center;gap:11px;
 padding:17px 30px;border-radius:11px;
 border:1.5px solid var(--linha);background:transparent;
 font-size:15.5px;font-weight:600;color:var(--verde-txt);
 transition:background .22s ease,border-color .22s ease,transform .22s ease}
.btn-o2 .seta{width:18px;height:18px;stroke:var(--verde-txt);stroke-width:1.8;
 transition:transform .22s ease}
.btn-o2:hover{background:var(--sage-cl);border-color:var(--verde-cl);transform:translateY(-2px)}
.btn-o2:hover .seta{transform:translateX(3px)}

/* ── três provas, separadas por fios ── */
.htrust{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(14px,1.6vw,24px);
 margin:clamp(30px,3.2vw,42px) 0 0;padding:0;list-style:none}
.htrust li{display:flex;align-items:center;gap:13px}
.htrust li + li{border-left:1px solid var(--linha);padding-left:clamp(14px,1.6vw,24px)}
.htrust svg{width:27px;height:27px;flex:none;stroke:var(--sage);stroke-width:1.5}
.htrust span{font-size:14px;line-height:1.42;color:var(--corpo)}

.hfecho{display:flex;align-items:center;gap:18px;white-space:nowrap;
 margin-top:clamp(34px,3.8vw,52px);
 font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
 color:var(--sage)}
.hfecho::before{content:'';height:1px;width:40px;flex:none;background:var(--ouro);opacity:.9}

/* ── a foto ── */
.hero-foto{position:relative;z-index:1;aspect-ratio:1.14;
 border-radius:30px;overflow:hidden;
 box-shadow:0 34px 70px -46px rgba(31,44,24,.42)}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:58% 46%;
 display:block}

/* ── curva da base: pintada com a cor da seção seguinte ── */
.heroonda{position:absolute;z-index:1;left:0;right:0;bottom:-1px;
 width:100%;height:clamp(52px,6vw,96px);fill:var(--creme-2);stroke:none}
.pilares{border-top:0}

.heroassin{position:absolute;z-index:3;
 right:clamp(96px,8vw,150px);bottom:clamp(14px,1.8vw,28px);
 display:flex;align-items:center;gap:20px;text-align:right;
 font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
 line-height:1.9;color:var(--suave)}
.heroassin::before{content:'';height:1px;width:clamp(30px,3vw,56px);flex:none;
 background:var(--linha)}
@media (max-width:1100px){ .heroassin{display:none} }

/* ══ MARCA — selo redondo em SVG ════════════════════════════════ */
/* a marca agora é o emblema da logo do cliente (xícara + folhas). Sem
   border-radius: ele não é circular como o selo antigo, e arredondar
   cortava as pontas das folhas e o laço dourado. */
.logo .mk{width:52px;height:52px;border-radius:0;flex:none;object-fit:contain;
 transition:width .45s var(--mola),height .45s var(--mola)}
/* no rodapé o fundo é verde escuro: as folhas verdes sumiriam, então a
   marca entra como silhueta branca */
.logo .mk-clara{filter:brightness(0) invert(1);opacity:.95}
.nav.compact .logo .mk{width:44px;height:44px}
.logo b{font-size:23px;letter-spacing:.005em}
.logo small{font-size:9.8px;letter-spacing:.22em}

/* CTA da nav: vazado, como no mockup */
.btn-nav{display:inline-flex;align-items:center;justify-content:center;
 padding:14px 26px;border-radius:9px;border:1.5px solid var(--verde);
 background:transparent;color:var(--verde);font-weight:600;font-size:15px;
 white-space:nowrap;
 transition:background .3s ease,color .3s ease,transform .5s var(--mola)}
.btn-nav:hover{background:var(--verde);color:#fff;transform:translateY(-2px)}

/* ── tablet: mantém duas colunas enquanto couber ── */
@media (max-width:1199px){
 .heroin{width:min(1460px,calc(100% - 64px));gap:34px}
 .hcopy h1{font-size:clamp(40px,4.7vw,56px)}
 .htrust{gap:12px}
 .htrust li + li{padding-left:12px}
 .htrust span{font-size:13.2px}
 .hero-foto{aspect-ratio:1/1.02}
 /* quando os dois botões não cabem lado a lado, que pelo menos quebrem
    com a mesma largura em vez de um curto e um comprido */
 .heroacoes .btn,.btn-o2{flex:1 1 210px;justify-content:center}
 .herofolhas{left:-19vw}
}

/* entre 900 e 1100 a nav ainda é horizontal, mas logo + 6 links + CTA
   não cabem: sem apertar, os itens quebram em duas linhas */
@media (max-width:1100px) and (min-width:901px){
 .navin{gap:18px}
 .navlinks{gap:18px;font-size:14.2px}
 .btn-nav{padding:12px 18px;font-size:14px}
 .logo .mk{width:42px;height:42px}
 .logo b{font-size:19px}
 .logo small{font-size:8.8px;letter-spacing:.18em}
}
/* ── celular ───────────────────────────────────────────────────
   Sem foto e sem a faixa de pilares (pedido do usuário): a primeira
   dobra fica só texto, provas em três colunas e o fecho centralizado
   sobre a curva, com folhagem no canto superior direito e no inferior
   esquerdo. */
@media (max-width:767px){
 .hero{min-height:0;padding:calc(var(--topo) + 26px) 0 clamp(78px,16vw,110px)}
 .heroin{grid-template-columns:1fr;width:calc(100% - 44px);gap:0;padding:0}
 .hcopy{max-width:none}
 .hero-foto{display:none}
 .pilares{display:none}

 /* o rótulo precisa caber numa linha só, como na referência */
 .hero .kicker{font-size:9.5px;letter-spacing:.09em;gap:12px;margin-bottom:20px}
 .hero .kicker.risc-e::before{width:26px}

 /* 9vw mantém “não apenas do sintoma.” numa linha só até 375px */
 .hcopy h1{font-size:clamp(31px,9vw,46px);max-width:none}
 .hcopy > p:not(.hfecho){font-size:16.5px;margin-top:22px}

 .heroacoes{flex-direction:column;align-items:stretch;gap:10px;margin-top:30px}
 .heroacoes .btn,.btn-o2{width:100%;flex:none}

 /* três colunas com fios entre elas, ícone em cima e texto centrado */
 .htrust{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  text-align:center;margin-top:clamp(34px,9vw,44px)}
 .htrust li{flex-direction:column;align-items:center;justify-content:flex-start;
  gap:11px;padding:0 6px}
 .htrust li + li{border-left:1px solid var(--linha);padding-left:6px}
 .htrust svg{width:26px;height:26px}
 .htrust span{font-size:12px;line-height:1.4}

 /* fecho centralizado com o fio embaixo (o ::before vira o último item) */
 .hfecho{flex-direction:column;align-items:center;text-align:center;gap:15px;
  white-space:normal;max-width:300px;margin:clamp(34px,9vw,46px) auto 0;
  letter-spacing:.16em;font-size:10.5px;line-height:1.92}
 .hfecho::before{order:2;width:54px}

 /* folhagem nos cantos: o ramo vertical do desktop é alto demais aqui,
    então os dois cantos usam a arte de canto (a de cima, girada 180°) */
 .herofolhas,.herofolhas2{content:url(img/decor-folhas-canto.svg);
  display:block;position:absolute;z-index:0;pointer-events:none;
  height:auto;max-width:none;opacity:.07}
 .herofolhas{left:-11vw;right:auto;top:auto;bottom:0;width:44vw}
 .herofolhas2{right:-7vw;left:auto;top:6px;bottom:auto;width:58vw;
  transform:rotate(180deg)}
}
@media (max-width:360px){
 .htrust span{font-size:11.2px}
 .htrust li{padding:0 3px}
 .htrust li + li{padding-left:3px}
}

/* logo e CTA da nav no estreito */
@media (max-width:900px){
 .logo .mk{width:38px;height:38px}
 .nav.compact .logo .mk{width:38px;height:38px}
 .logo b{font-size:17px}
 .btn-nav{padding:11px 16px;font-size:14px}
}

/* foco visível — o teclado precisa enxergar onde está */
a:focus-visible,button:focus-visible{outline:2px solid var(--verde-cl);
 outline-offset:3px;border-radius:6px}

/* ══ 3 · SOBRE — três colunas ════════════════════════════════════
   Retrato redondo · ficha · cartão de citação. O cartão é foto com
   texto por cima em HTML: a frase e a assinatura continuam sendo
   texto de verdade, então dá para editar, traduzir e ler em leitor
   de tela — o que uma arte com o texto queimado não permite. */
.sobre{padding:96px 0 104px;background:var(--creme)}
/* Proporções medidas no mockup (que tem 1737px de largura), em % da
   própria largura, para a seção ficar idêntica em qualquer tela:
     6% margem · 18,8% retrato · 1,9% vão · 27,1% texto · 4,7% vão
     · 39% cartão · 2,5% margem
   O vão da esquerda e o da direita são diferentes, por isso os vãos
   moram no padding da coluna do meio em vez de num gap único. */
.sobregrid{display:grid;grid-template-columns:18.8fr 33.7fr 39fr;gap:0;
 align-items:center;width:min(1737px,100%);margin-inline:auto;
 padding:0 2.5% 0 6%}
.sobretxt{padding:0 13.9% 0 5.6%}

.sobrefoto{aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--sage-cl);
 justify-self:stretch}
.sobrefoto img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* rótulo com o risco dourado ao lado, como no mockup */
.kicker.risc{display:flex;align-items:center;gap:16px}
.kicker.risc::after{content:'';height:1px;width:80px;background:var(--ouro);opacity:.6}
.sobretxt h2{font-size:clamp(32px,3.6vw,46px);margin-bottom:4px}
.cargo{font-size:19px;color:var(--corpo);margin-bottom:26px}

.numeros{display:flex;gap:0;margin-bottom:26px}
.numeros > div{padding-right:34px;margin-right:34px;border-right:1px solid var(--linha)}
.numeros > div:last-child{border-right:0;padding-right:0;margin-right:0}
.numeros b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;
 font-weight:600;color:var(--tinta);line-height:1}
.numeros span{display:block;margin-top:5px;font-size:13.5px;color:var(--suave)}

.sobretxt > p{font-size:15.8px;line-height:1.78;color:var(--corpo);margin-bottom:20px}
.linhaic{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.6;
 color:var(--corpo);margin-bottom:14px}
.linhaic svg{width:19px;height:19px;stroke:var(--sage);flex:none;margin-top:2px}
.linhaic.lk{color:var(--verde-txt);font-weight:500;transition:color .3s ease}
.linhaic.lk:hover{color:var(--verde)}
.sobretxt .btn-o{margin-top:14px}

/* ── cartão de citação ────────────────────────────────────────── */
/* estica para acompanhar a altura do bloco de texto */
.citacao{position:relative;margin:0;border-radius:18px;overflow:hidden;
 align-self:stretch;min-height:440px;
 box-shadow:0 26px 54px -30px rgba(31,44,24,.4)}
.citacao img{width:100%;height:100%;object-fit:cover}
/* véu puxado para a esquerda: é lá que a frase fica */
.citacao::after{content:'';position:absolute;inset:0;
 background:linear-gradient(94deg,rgba(24,44,26,.90) 0%,rgba(24,44,26,.78) 34%,
 rgba(26,48,28,.42) 58%,rgba(26,48,28,.14) 82%)}
.citacao figcaption{position:absolute;z-index:2;inset:auto auto 0 0;width:100%;
 padding:clamp(24px,3vw,42px)}
.citacao figcaption p{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
 font-size:clamp(21px,2.1vw,29px);line-height:1.34;color:#fff;margin-bottom:22px}
.citacao .rule{display:block;width:62px;height:1px;background:#D9BE7A;opacity:.85;
 margin-bottom:24px}
.citacao .assin{display:flex;align-items:center;gap:13px}
.citacao .assin > svg{width:44px;height:44px;flex:none}
.citacao .assin b{display:block;font-family:'Cormorant Garamond',Georgia,serif;
 font-size:21px;font-weight:600;color:#fff;line-height:1.15}
.citacao .assin small{display:block;margin-top:3px;font-size:9.5px;letter-spacing:.22em;
 text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:600}

/* ── faixa dos pilares: divisória curta, como no mockup ───────── */
.pilar{border-right:0;position:relative;padding:32px 26px}
.pilar::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
 width:1px;height:58%;background:var(--linha)}
.pilar:last-child::after{display:none}

@media (max-width:1180px){
 .sobregrid{grid-template-columns:.9fr 1.5fr;gap:0 38px;padding:0 5%}
 .sobretxt{padding:0}
 .citacao{grid-column:1/-1;min-height:0;aspect-ratio:16/6.4;margin-top:12px}
}
@media (max-width:860px){
 .sobregrid{grid-template-columns:1fr;gap:32px;justify-items:center;text-align:center;
  padding:0 22px}
 .sobrefoto{max-width:320px;justify-self:center}
 .citacao{border-radius:18px;margin-right:0}
 .kicker.risc{justify-content:center}
 .numeros{justify-content:center}
 .linhaic{justify-content:center;text-align:left}
 .citacao{aspect-ratio:4/3.4;width:100%}
 .citacao::after{background:linear-gradient(180deg,rgba(24,44,26,.45) 0%,
  rgba(24,44,26,.86) 52%)}
 .citacao figcaption{text-align:left}
 .pilar::after{display:none}
 .pilar{border-bottom:1px solid var(--linha)}
 .pilar:last-child{border-bottom:0}
}

/* ── filosofia no estreito: o trio vira 2×2 e os cartões empilham ── */
@media (max-width:680px){
 .filoganhos{flex-wrap:wrap;gap:18px 16px}
 .filoganhos li{flex:1 1 42%}
 .filoganhos li + li{border-left:0;padding-left:0}
 .filocomp{grid-template-columns:1fr}
 .fbox i{margin-right:16px}
}

/* ── faixa de chamada de "áreas de atuação" no estreito ── */
@media (max-width:720px){
 .porcta{flex-direction:column;align-items:flex-start;text-align:left}
 .porctaic{border-right:0;padding-right:0;border-bottom:1px solid var(--linha);
  padding-bottom:16px}
 .porcta .btn{width:100%}
 .porfecho{letter-spacing:.18em}
 .porfecho::before,.porfecho::after{width:clamp(20px,6vw,50px)}
}

/* ── chamada final e abertura do rodapé no estreito ── */
@media (max-width:980px){
 .ctabox{grid-template-columns:1fr;gap:34px}
 .ctaanel{right:auto;left:50%;top:auto;bottom:-14%;translate:-50% 0;height:auto;
  width:78%;opacity:.55}
 .ctacit blockquote{font-size:clamp(20px,3.4vw,26px)}
 .ctafoto::after{background:linear-gradient(170deg,rgba(21,58,27,.95) 0%,
  rgba(23,64,29,.88) 48%,rgba(25,70,31,.62) 100%)}
 .rodintro{grid-template-columns:1fr;gap:26px}
 .rodintro > p{padding-left:0;border-left:0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.18)}
}
@media (max-width:560px){
 .ctaacoes .btn,.ctaacoes .btn-o{width:100%}
 .ctameta{gap:8px 12px}
 .ctameta i{display:none}
}

/* ── práticas no estreito ── */
@media (max-width:980px){
 .servgrid,.servmini{grid-template-columns:repeat(2,1fr)}
 .servmini .mcard:last-child{grid-column:1/-1}
 .servsep{letter-spacing:.14em;white-space:normal;text-align:center}
}
@media (max-width:640px){
 .servgrid,.servmini{grid-template-columns:1fr}
 .servmini .mcard:last-child{grid-column:auto}
 .spe{flex-wrap:wrap}
}