/* Aquaterra — Ambientes Aquáticos · proposta · KRX */

/* ---------- Fontes (self-hosted, subset latin) ---------- */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cinzel-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
/* Fallbacks com métricas ajustadas (sem salto na troca de fonte).
   Cinzel é só caixa alta: títulos usam text-transform:uppercase, e a largura foi medida em maiúsculas
   contra Times New Roman Bold (size-adjust 102%). Inter: Arial/Roboto.
   Só 2 local() por face (desktop + Android): cada nome a mais custa lookup no 1º layout. */
@font-face{font-family:"Cinzel Fallback";font-weight:600;src:local("Times New Roman Bold"),local("Noto Serif Bold");ascent-override:95.7%;descent-override:36.5%;line-gap-override:0%;size-adjust:102%}
@font-face{font-family:"Inter Fallback";font-weight:400;src:local("Arial"),local("Roboto");ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;size-adjust:107.12%}
@font-face{font-family:"Inter Fallback";font-weight:600;src:local("Arial Bold"),local("Roboto Medium");ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;size-adjust:103%}

/* posição do slider antes/depois como propriedade animável (dica de vaivém) */
@property --pos{syntax:'<percentage>';inherits:true;initial-value:50%}

/* ---------- Tokens (paleta amostrada dos arquivos da marca) ---------- */
:root{
  --petrol:#12475a;        /* AQUA — títulos, texto de marca (9,3:1 no creme) */
  --petrol-deep:#0a2f3b;   /* seções escuras */
  --petrol-900:#072530;
  --terra:#7b4a26;         /* TERRA — acentos (6,8:1 no creme) */
  --terra-soft:#b58458;    /* linhas e detalhes decorativos */
  --terra-light:#d9b98f;   /* acento sobre o escuro (7,6:1) */
  --leaf:#5a7d2e;          /* CTA: branco sobre ele = 4,8:1 */
  --leaf-700:#4a6b22;
  --leaf-ink:#4a6b22;      /* verde como texto no creme (5,6:1) */
  --leaf-light:#a9c46c;    /* verde sobre o escuro (7,3:1) */
  --turq:#2a9fb3;          /* água — só decorativo */
  --turq-ink:#17707f;      /* turquesa como texto/ícone no creme (5,3:1) */
  --turq-light:#5cc3d2;    /* turquesa sobre o escuro (6,9:1) */
  --cream:#f8f5ee;
  --sand:#f1ebdf;
  --white:#ffffff;
  --ink:#1f2a2e;
  --muted:#55584c;
  --line:#e3dac8;
  --on-dark:#eef3f0;
  --on-dark-muted:#b9ccc8;

  --f-display:"Cinzel","Cinzel Fallback",Georgia,serif;
  --f-body:"Inter","Inter Fallback",system-ui,sans-serif;

  --radius:14px;
  --radius-lg:24px;
  --shadow:0 1px 2px rgb(10 47 59 / .05),0 10px 30px -14px rgb(10 47 59 / .22);
  --shadow-hover:0 2px 4px rgb(10 47 59 / .06),0 26px 44px -20px rgb(10 47 59 / .34);
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:80px;
  --gutter:clamp(1rem,4vw,2rem);
}
@media (max-width:640px){:root{--header-h:66px}}
@media (max-width:960px) and (max-height:500px){:root{--header-h:60px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-body);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.12;text-transform:uppercase;letter-spacing:.03em;text-wrap:balance;color:var(--petrol)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--turq-ink);outline-offset:3px;border-radius:4px}
.section--dark :focus-visible,.cta :focus-visible,.footer :focus-visible{outline-color:var(--turq-light)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-100px;z-index:100;background:var(--petrol);color:var(--white);padding:.6rem 1rem;border-radius:var(--radius);font-weight:600;transition:top .2s var(--ease)}
.skip:focus{top:1rem}
.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.accent{color:var(--terra)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.ico{width:1.25em;height:1.25em;flex:none}
.kicker,.mission__title,.why__lead,.section-head p{text-wrap:balance}

/* ---------- Botões ---------- */
.btn{--bg:transparent;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.8rem 1.6rem;border:1.5px solid transparent;border-radius:999px;background:var(--bg);font-family:var(--f-body);font-weight:600;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn .ico{width:1.4em;height:1.4em}
.btn--green{--bg:var(--leaf);color:var(--white);box-shadow:0 10px 22px -14px rgb(74 107 34 / .9)}
.btn--green:hover{--bg:var(--leaf-700);transform:translateY(-2px);box-shadow:0 16px 28px -14px rgb(74 107 34 / .85)}
.btn--ghost{color:var(--petrol);border-color:rgb(18 71 90 / .45);background:rgb(255 255 255 / .5)}
.btn--ghost:hover{background:var(--petrol);color:var(--white);border-color:var(--petrol);transform:translateY(-2px)}
.btn--outline{--bg:transparent;color:var(--leaf-ink);border-color:var(--leaf)}
.btn--outline:hover{--bg:var(--leaf);color:var(--white);transform:translateY(-2px)}
.btn--light{--bg:var(--cream);color:var(--petrol)}
.btn--light:hover{--bg:var(--white);transform:translateY(-2px)}
.btn--sm{min-height:44px;padding:.55rem 1.15rem;font-size:.78rem;letter-spacing:.06em}
.btn--block{width:100%}
.btn:active{transform:translateY(0)}
.actions{display:flex;flex-wrap:wrap;gap:.9rem}
@media (max-width:400px){.btn{padding-inline:1.1rem;letter-spacing:.07em}}

/* ---------- Header (claro, para o logo ler bem) ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h);background:rgb(248 245 238 / 0);border-bottom:1px solid transparent;transition:background-color .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.site-header.is-scrolled,body.menu-open .site-header{background:rgb(250 248 242 / .97);border-bottom-color:var(--line);box-shadow:0 12px 30px -22px rgb(10 47 59 / .45)}
@supports (backdrop-filter:blur(8px)){.site-header.is-scrolled{background:rgb(250 248 242 / .93);backdrop-filter:blur(12px) saturate(1.2)}}
.site-header__row{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:inline-flex;align-items:center;text-decoration:none;border-radius:6px}
.brand__logo{width:228px;height:auto;aspect-ratio:1073/274}
@media (max-width:1100px) and (min-width:961px){.brand__logo{width:196px}}
@media (max-width:640px){.brand__logo{width:176px}}
@media (max-width:360px){.brand__logo{width:160px}}
/* paisagem baixa: logo menor para respirar no header de 60px */
@media (max-width:960px) and (max-height:500px){.brand__logo{width:168px}}
.nav{display:flex;align-items:center;gap:2rem}
.nav__list{display:flex;gap:1.75rem}
.nav__list a{position:relative;display:block;padding:.5rem 0;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--petrol);transition:color .25s var(--ease)}
.nav__list a::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:2px;border-radius:2px;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav__list a:hover{color:var(--terra)}
.nav__list a:hover::after,.nav__list a[aria-current="true"]::after{transform:scaleX(1)}
.nav-toggle{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgb(18 71 90 / .25);border-radius:50%;background:transparent;color:var(--petrol);cursor:pointer;transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.nav-toggle:hover{background:rgb(18 71 90 / .06);border-color:rgb(18 71 90 / .45)}
.nav-toggle .ico{width:22px;height:22px}
.nav-toggle .ico--close{display:none}
.nav-toggle[aria-expanded="true"] .ico--open{display:none}
.nav-toggle[aria-expanded="true"] .ico--close{display:block}

@media (max-width:960px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:var(--header-h) 0 auto;max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:1.25rem;padding:.75rem var(--gutter) 1.75rem;background:var(--cream);border-top:1px solid var(--line);border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:0 30px 40px -24px rgb(10 47 59 / .45);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
  .nav.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .nav__list{flex-direction:column;gap:0}
  .nav__list a{padding:.95rem 0;font-size:.875rem;border-bottom:1px solid var(--line)}
  .nav__list a::after{display:none}
  .nav__list a[aria-current="true"]{color:var(--terra)}
  .nav__cta{min-height:52px;flex:none}
  /* menu aberto: trava a rolagem, escurece o fundo, esconde o flutuante */
  body.menu-open{overflow:hidden}
  body.menu-open::after{content:"";position:fixed;inset:var(--header-h) 0 0;z-index:45;background:rgb(7 37 48 / .5)}
  body.menu-open .wa-float{opacity:0;visibility:hidden}
}
/* paisagem baixa: menu em 3 colunas para caber */
@media (max-width:960px) and (max-height:500px){
  .nav{padding-block:.5rem 1rem;gap:.75rem}
  .nav__list{display:grid;grid-template-columns:repeat(3,1fr);column-gap:1.5rem}
  .nav__list a{padding:.7rem 0}
}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-top:calc(var(--header-h) + clamp(1.5rem,5vh,3.5rem));padding-bottom:clamp(2rem,4vw,3rem);background:
  radial-gradient(60% 70% at 78% 42%,rgb(233 223 200 / .75) 0%,rgb(233 223 200 / 0) 70%),
  radial-gradient(40% 50% at 8% 95%,rgb(42 159 179 / .08) 0%,rgb(42 159 179 / 0) 70%),
  var(--cream)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(1.5rem,4vw,4rem)}
.hero__content{padding-block:1rem}
.kicker{display:flex;align-items:center;gap:.8rem;font-weight:600;font-size:clamp(.74rem,.7rem + .2vw,.82rem);letter-spacing:.22em;text-transform:uppercase;color:var(--leaf-ink)}
.kicker::before{content:"";flex:none;width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--leaf),var(--terra-soft))}
.hero h1{max-width:18ch;margin-top:1.1rem;font-size:clamp(2.05rem,1.1rem + 2.9vw,3.25rem);line-height:1.1}
.hero__lead{max-width:32rem;margin-top:1.3rem;text-wrap:pretty;font-size:clamp(1rem,.96rem + .25vw,1.14rem);color:var(--muted)}
.hero .actions{margin-top:2rem}

/* emblema ilustrado + carpas nadando */
.hero__art{position:relative;container-type:inline-size;width:100%;max-width:600px;margin-inline:auto;aspect-ratio:990/885}
.hero__art picture,.hero__emblem{width:100%;height:100%}
.hero__emblem{object-fit:contain}
/* sem drop-shadow: ele escurecia os vãos transparentes (faixas cinza no lugar do creme da marca).
   Halo creme que "respira" como o fundo do arquivo da marca + sombra de contato só sob a base. */
.hero__art::before{content:"";position:absolute;inset:-5%;z-index:-2;border-radius:50%;background:radial-gradient(closest-side,#fffdf8 0%,rgb(255 253 248 / .7) 55%,rgb(255 253 248 / 0) 100%);pointer-events:none}
.hero__art::after{content:"";position:absolute;left:14%;right:14%;bottom:-1%;height:9%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgb(10 47 59 / .13),rgb(10 47 59 / 0));pointer-events:none}
.koi{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:auto;pointer-events:none;opacity:0;will-change:transform,opacity}
.koi img{width:100%;height:auto;animation:koi-tail 1.6s ease-in-out infinite alternate;transform-origin:var(--tail,70% 50%)}
.koi--1{--x:70%;--y:52%;--w:8.4cqw;--dx:-23cqw;--dy:-6cqw;animation:koi-swim 19s linear infinite}
.koi--2{--x:64%;--y:72%;--w:7.2cqw;--dx:-17cqw;--dy:-8cqw;animation:koi-swim 23s linear infinite -9s}
.koi--3{--x:37%;--y:47%;--w:6.6cqw;--dx:15cqw;--dy:10cqw;--tail:25% 30%;animation:koi-swim 27s linear infinite -17s}
@keyframes koi-swim{
  0%{opacity:0;transform:translate(0,0) scale(.9)}
  12%{opacity:.9}
  82%{opacity:.9}
  100%{opacity:0;transform:translate(var(--dx),var(--dy))}
}
@keyframes koi-tail{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
/* hero fora da tela: carpas pausadas (bateria/GPU) */
.hero.is-off .koi,.hero.is-off .koi img{animation-play-state:paused}

/* faixa de diferenciais */
.perks{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(1.75rem,4vw,3rem);padding:.4rem;background:rgb(255 255 255 / .72);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.perks li{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.25rem;font-size:.9rem;line-height:1.35;color:var(--muted)}
.perks li+li{border-left:1px solid var(--line)}
.perks strong{display:block;font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol)}
.perks .ico{width:42px;height:42px;padding:9px;border-radius:50%;background:rgb(42 159 179 / .1);color:var(--turq-ink)}
.perks li:nth-child(even) .ico{background:rgb(123 74 38 / .09);color:var(--terra)}

@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr;gap:.25rem}
  .hero__art{grid-row:1;max-width:min(400px,78vw)}
  .hero__content{text-align:left}
  .perks{grid-template-columns:repeat(2,1fr)}
  .perks li{padding:.95rem .9rem}
  .perks li:nth-child(odd){border-left:0}
  .perks li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .hero{padding-top:calc(var(--header-h) + .75rem)}
  .hero__art{max-width:min(292px,74vw)}
  .kicker{letter-spacing:.18em}
  .hero h1{margin-top:.9rem}
  .hero__lead{margin-top:1rem}
  .hero .actions{margin-top:1.5rem}
  .hero .actions .btn{flex:1 1 100%}
  .perks li{gap:.6rem;padding:.85rem .7rem;font-size:.875rem}
  .perks strong{font-size:.75rem;letter-spacing:.07em}
  .perks .ico{width:36px;height:36px;padding:8px}
}
/* paisagem baixa (celular deitado): emblema ao lado do texto, menor */
@media (max-width:960px) and (max-height:500px) and (orientation:landscape){
  .hero__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:1.5rem}
  .hero__art{grid-row:auto;grid-column:2;max-width:300px}
  .hero__content{grid-row:1}
  .hero .actions .btn{flex:0 1 auto}
}

/* ---------- Seções ---------- */
.section{position:relative;padding-block:clamp(3.5rem,7vw,6rem)}
.section--sand{background:var(--sand)}
.section--dark{background:var(--petrol-deep);color:var(--on-dark)}
.section-head{max-width:40rem;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.section-head h2,.why h2,.contact h2{font-size:clamp(1.55rem,1.1rem + 1.7vw,2.35rem)}
/* ornamento: as ondas de água do kit da marca sob o título */
.section-head h2::after,.contact h2::after{content:"";display:block;width:88px;height:31px;margin:.9rem auto 0;background:url(../img/brand/kit-ondas-240.webp) center/contain no-repeat;background-image:image-set(url(../img/brand/kit-ondas-240.avif) type("image/avif"),url(../img/brand/kit-ondas-240.webp) type("image/webp"))}
.contact h2::after{margin-left:0}
.section-head p{margin-top:.9rem;color:var(--muted);font-size:1.0625rem}

/* ---------- Serviços ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.svc{position:relative;display:flex;flex-direction:column;padding:.55rem .55rem 0;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.svc__media{aspect-ratio:4/3;overflow:hidden;border-radius:calc(var(--radius-lg) - 6px) calc(var(--radius-lg) - 6px) 44% 44% / calc(var(--radius-lg) - 6px) calc(var(--radius-lg) - 6px) 14% 14%;background:var(--sand)}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s var(--ease)}
/* gradação única nas fotos: aproxima origens diferentes do tom quente da ilustração */
.svc__media img,.ba__img{filter:saturate(.88) sepia(.08) contrast(.97)}
.svc:hover .svc__media img{transform:scale(1.05);filter:none}
.svc__icon{position:relative;display:grid;place-items:center;width:62px;height:62px;margin:-2.3rem auto .3rem;border-radius:50%;background:var(--cream);color:var(--petrol);border:1px solid var(--line);box-shadow:0 0 0 5px var(--white),0 10px 20px -12px rgb(10 47 59 / .5)}
.svc:nth-child(even) .svc__icon{color:var(--terra)}
.svc__icon .ico{width:27px;height:27px}
.svc__body{flex:1;display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:0 1.1rem 1.6rem;text-align:center}
.svc__title{font-size:1.02rem;letter-spacing:.04em}
.svc__body p{color:var(--muted);font-size:.9375rem;line-height:1.55}
.svc__short{display:none}
.link-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.5rem;font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--leaf-ink)}
.link-more .ico{width:1.1em;height:1.1em;transition:transform .3s var(--ease)}
.link-more:hover .ico{transform:translateX(4px)}
.link-more::before{content:"";position:absolute;inset:0;border-radius:inherit} /* card inteiro clicável */
@media (max-width:1100px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .svc-grid{grid-template-columns:1fr;gap:1.25rem}
  .svc__media{aspect-ratio:16/9}
  .svc__icon{width:56px;height:56px;margin-top:-2rem}
  .svc__icon .ico{width:24px;height:24px}
  .svc__body{gap:.5rem;padding:0 1rem 1.35rem}
  .svc__desc{font-size:1rem}
  .link-more{padding-top:.25rem;font-size:.8125rem}
}
/* celular: grade 2×2 compacta (foto quadrada + título + frase curta); a descrição longa fica no desktop */
@media (max-width:640px){
  .svc-grid{grid-template-columns:1fr 1fr;gap:.75rem}
  .svc{padding:.4rem .4rem 0;border-radius:18px}
  .svc__media{aspect-ratio:1/1;border-radius:14px 14px 44% 44% / 14px 14px 12% 12%}
  .svc__icon{width:44px;height:44px;margin:-1.5rem auto .15rem;box-shadow:0 0 0 4px var(--white),0 8px 16px -10px rgb(10 47 59 / .5)}
  .svc__icon .ico{width:20px;height:20px}
  .svc__body{gap:.3rem;padding:0 .35rem .9rem}
  .svc__title{font-size:.8rem;letter-spacing:.02em;line-height:1.2}
  .svc__desc{display:none}
  .svc__short{display:block;font-size:.8125rem;line-height:1.35}
  .link-more{padding-top:.2rem;font-size:.72rem;letter-spacing:.1em}
}
@media (max-width:374px){.svc__short{font-size:.75rem}.svc__body{padding-inline:.2rem}}

/* ---------- Por que (seção escura com ondas nas duas bordas) ---------- */
.why{padding-block:calc(clamp(3.5rem,7vw,6rem) + clamp(34px,6vw,86px))}
.why::before,.why::after{content:"";position:absolute;left:0;right:0;height:clamp(34px,6vw,86px);background:center/100% 100% no-repeat;pointer-events:none}
.why::before{top:-1px;background-image:url(../img/brand/onda-topo.svg?v=4)}
.why::after{bottom:-1px;background-image:url(../img/brand/onda-base.svg?v=4)}
.why__grid{display:grid;grid-template-columns:1fr 380px;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.why h2{color:var(--white)}
.why h2 .accent{color:var(--terra-light)}
.why__lead{margin-top:.9rem;color:var(--on-dark-muted);font-size:1.0625rem}
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem 2.5rem;margin-top:2.25rem}
.pillar{display:flex;gap:1rem;align-items:flex-start}
.pillar__ico{width:44px;height:44px;padding:10px;border-radius:50%;border:1px solid rgb(92 195 210 / .35);background:rgb(92 195 210 / .08);color:var(--turq-light)}
.pillar:nth-child(even) .pillar__ico{border-color:rgb(217 185 143 / .35);background:rgb(217 185 143 / .08);color:var(--terra-light)}
.pillar h3{font-size:.95rem;letter-spacing:.06em;color:var(--white)}
.pillar p{margin-top:.35rem;color:var(--on-dark-muted);font-size:.9375rem;line-height:1.5}
/* missão: selo creme emoldurado pelo anel da marca (arco verde, arco terra, onda e folha) */
.mission{position:relative;display:grid;place-items:center;width:100%;max-width:380px;margin-inline:auto;aspect-ratio:760/714;text-align:center}
.mission::before{content:"";position:absolute;left:10%;right:10%;top:7%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fffdf8 0%,var(--cream) 60%,#efe6d4 100%);box-shadow:inset 0 0 0 1px rgb(123 74 38 / .08)}
.mission__ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mission__ring img{width:100%;height:100%;object-fit:contain}
.mission__txt{position:relative;max-width:62%;margin-top:-9%}
.mission__kicker{font-weight:600;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terra)}
.mission__title{margin-top:.6rem;font-family:var(--f-display);font-weight:600;font-size:clamp(1.02rem,.9rem + .5vw,1.22rem);line-height:1.3;text-transform:uppercase;letter-spacing:.03em;color:var(--petrol)}
@media (max-width:960px){.why__grid{grid-template-columns:1fr}.mission{max-width:340px}}
@media (max-width:560px){
  .pillars{grid-template-columns:1fr;gap:1.25rem;margin-top:1.75rem}
  .pillar p{font-size:1rem}
  .mission{max-width:260px;margin-top:-.5rem}
  .mission__title{font-size:.9rem}
  .why__grid{gap:1.75rem}
}

/* ---------- Projetos (antes/depois) ---------- */
.carousel{position:relative}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3rem) / 3);gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:.25rem;scroll-behavior:smooth;overscroll-behavior-x:contain;padding:.5rem .25rem 1.5rem;margin:-.5rem -.25rem 0;scrollbar-width:none}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track:focus-visible{outline-offset:-2px}
.proj{scroll-snap-align:start;display:flex;flex-direction:column;padding:.55rem .55rem 0;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.proj__body{padding:1.1rem .9rem 1.4rem}
.proj h3{font-size:.98rem;letter-spacing:.05em}
.proj p{margin-top:.4rem;color:var(--muted);font-size:.9375rem;line-height:1.5}
.proj__note{margin-top:.25rem;text-align:center;font-size:.8125rem;color:var(--muted)}
.ba{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:calc(var(--radius-lg) - 6px);background:var(--sand);--pos:50%}
.ba picture,.ba__img{width:100%;height:100%}
.ba__img{object-fit:cover;user-select:none;-webkit-user-drag:none}
.ba__before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--white);box-shadow:0 0 0 1px rgb(0 0 0 / .08);pointer-events:none}
.ba__handle::before{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--petrol);border:2px solid var(--white);box-shadow:0 4px 14px rgb(0 0 0 / .3);transition:transform .25s var(--ease)}
.ba__handle .ico{position:absolute;top:50%;width:16px;height:16px;max-width:none;margin-top:-8px;color:var(--white)}
.ba__handle .ico:first-child{right:-1px}
.ba__handle .ico:last-child{left:-1px}
.ba__tag{position:absolute;bottom:.75rem;padding:.28rem .7rem;border-radius:999px;background:rgb(248 245 238 / .92);color:var(--petrol);font-weight:600;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.ba__tag--before{left:.75rem}
.ba__tag--after{right:.75rem}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.ba__range:focus-visible{opacity:1;background:transparent;outline:3px solid var(--turq-ink);outline-offset:-3px}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100vh;background:transparent;cursor:ew-resize}
.ba__range::-moz-range-thumb{width:44px;height:100vh;border:0;background:transparent;cursor:ew-resize}
.ba:hover .ba__handle::before,.ba__range:focus-visible~.ba__handle::before,.ba.is-dragging .ba__handle::before{transform:scale(1.12)}
/* toque: o slider só é arrastado pela alça; o resto da foto rola o carrossel */
@media (pointer:coarse){
  .ba__range{pointer-events:none}          /* segue focável por teclado/leitor */
  .ba{touch-action:pan-x pan-y}
  .ba.is-dragging{touch-action:none}
  /* faixa de 64px em volta da alça: touch-action:none decidido já no toque inicial */
  .ba__handle{pointer-events:auto;touch-action:none}
  .ba__handle::after{content:"";position:absolute;top:0;bottom:0;left:-31px;width:64px}
  .ba__handle::before{width:48px;height:48px;margin:-24px 0 0 -24px}
}
.carousel__btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--petrol);box-shadow:var(--shadow);cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease),transform .3s var(--ease)}
.carousel__btn .ico{width:22px;height:22px}
@media (hover:hover){.carousel__btn:hover:not([aria-disabled="true"]){background:var(--petrol);color:var(--white);transform:scale(1.05)}}
.carousel__btn[aria-disabled="true"]{opacity:.35;cursor:default}
/* telas largas: setas FORA dos cards, na altura das fotos; no fim, a desabilitada some */
@media (min-width:1361px){
  .carousel__btn{position:absolute;top:calc(50% - 3.5rem);z-index:2}
  .carousel__btn--prev{left:-64px}
  .carousel__btn--next{right:-64px}
  .carousel__btn[aria-disabled="true"]{opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
  .carousel__btn[aria-disabled="true"]:focus{opacity:.35;visibility:visible} /* focada por teclado: não some sob o foco */
}
/* demais larguras: setas centralizadas abaixo do trilho (nunca sobre as fotos) */
@media (max-width:1360px){
  .carousel{display:grid;grid-template-columns:1fr auto auto 1fr;column-gap:1rem}
  .carousel__track{grid-column:1 / -1;grid-row:1}
  .carousel__btn{grid-row:2;margin-top:.25rem}
  .carousel__btn--prev{grid-column:2}
  .carousel__btn--next{grid-column:3}
}
.projects .center{margin-top:1.75rem}
@media (max-width:1100px){.carousel__track{grid-auto-columns:calc((100% - 1.5rem) / 2.15)}}
@media (max-width:640px){
  .carousel__track{grid-auto-columns:84%;gap:1rem;scroll-padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .proj p{font-size:1rem}
}

/* ---------- CTA (painel arredondado, água ao fundo) ---------- */
.cta-wrap{padding-bottom:clamp(3rem,6vw,5rem)}
.cta{position:relative;isolation:isolate;overflow:hidden;padding:clamp(2rem,5vw,3.5rem) clamp(1.5rem,5vw,4rem);border-radius:calc(var(--radius-lg) + 8px);background:var(--petrol-deep);color:var(--white);box-shadow:0 30px 60px -36px rgb(10 47 59 / .8)}
.cta__bg{position:absolute;inset:0;z-index:-1}
.cta__bg picture,.cta__img{width:100%;height:100%}
.cta__img{object-fit:cover}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgb(10 47 59 / .95) 0%,rgb(10 47 59 / .86) 50%,rgb(18 71 90 / .6) 100%)}
.cta__row{display:flex;align-items:center;justify-content:space-between;gap:1.75rem 3rem;flex-wrap:wrap}
.cta__text{max-width:40rem}
.cta h2{font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem);line-height:1.22;color:var(--white)}
.cta p{margin-top:.6rem;color:var(--on-dark)}
@media (max-width:640px){.cta .actions,.cta .actions .btn{flex:1 1 100%}}

/* ---------- Contato ---------- */
.contact{overflow:hidden}
.contact__leaf{position:absolute;top:clamp(1rem,3vw,2.5rem);right:max(.75rem,calc((100vw - 1200px) / 2 - 5.5rem));width:clamp(64px,8vw,112px);height:auto;opacity:.95;transform:rotate(8deg);pointer-events:none}
.contact__grid{position:relative;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contact__info>p{margin-top:1rem;color:var(--muted);font-size:1.0625rem;max-width:30rem}
.contact__list{margin-top:1.75rem;display:grid;gap:.75rem}
.contact__list li{display:flex;align-items:center;gap:.85rem;color:var(--ink)}
.contact__list .ico{width:42px;height:42px;padding:10px;border-radius:50%;background:var(--white);color:var(--turq-ink);box-shadow:var(--shadow)}
.contact__list li:nth-child(even) .ico{color:var(--terra)}
.contact__list a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600;transition:color .25s var(--ease);overflow-wrap:anywhere}
.contact__list a:hover{color:var(--leaf-ink);text-decoration:underline;text-underline-offset:3px}
.form{display:grid;gap:1.1rem;padding:clamp(1.25rem,4vw,2.5rem);background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.field{display:grid;gap:.4rem}
.field label{font-weight:600;font-size:.9375rem;color:var(--petrol)}
.opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:.75rem .95rem;border:1.5px solid #9d9a88;border-radius:12px;background:var(--white);transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field textarea{resize:vertical;min-height:110px}
.field select{appearance:none;padding-right:2.5rem;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2312475a' stroke-width='2' stroke-linecap='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center/18px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#6f6c5c}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--turq-ink);box-shadow:0 0 0 4px rgb(23 112 127 / .16)}
.field [aria-invalid="true"],.field [aria-invalid="true"]:focus{border-color:#b3261e;box-shadow:0 0 0 4px rgb(179 38 30 / .14)}
.form__error{min-height:1.4em;margin:-.25rem 0 0;color:#b3261e;font-size:.9rem;font-weight:600}
.form__error:empty{min-height:0}
@media (max-width:860px){.contact__grid{grid-template-columns:1fr}}
/* desktop: a folha ocupa o vão sob a coluna de contato, em vez de grudar na quina do form */
@media (min-width:861px){.contact__leaf{top:auto;bottom:clamp(1.5rem,4vw,3rem);right:auto;left:max(.75rem,calc((100vw - 1200px) / 2 - 1rem));transform:rotate(-14deg) scaleX(-1)}}
@media (max-width:560px){.contact__leaf{top:.75rem;right:.5rem;width:58px}}

/* ---------- Footer ---------- */
.footer{background:var(--petrol-deep);color:var(--on-dark-muted);font-size:.9375rem}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1.1fr 1.3fr;gap:2.5rem;padding-block:3.5rem 2.5rem}
.footer__brand{display:flex;flex-direction:column;align-items:flex-start}
/* selo: logo círculo sobre disco creme */
.footer__seal{display:grid;place-items:center;width:172px;height:172px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fffdf8,var(--cream) 70%,#ece3d0);box-shadow:0 0 0 6px rgb(248 245 238 / .08),0 18px 36px -20px rgb(0 0 0 / .6);transition:transform .45s var(--ease)}
.footer__seal:hover{transform:rotate(-4deg) scale(1.02)}
.footer__seal img{width:130px;height:auto;aspect-ratio:360/338}
.footer__brand p{margin-top:1.25rem;max-width:22rem;line-height:1.55}
.footer__h{font-family:var(--f-display);font-weight:600;line-height:1.1;text-transform:uppercase;font-size:.85rem;letter-spacing:.12em;color:var(--terra-light);margin-bottom:.6rem}
.footer ul li+li{margin-top:0}
.footer a{text-decoration:none;transition:color .25s var(--ease)}
.footer a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.footer nav a,.footer__grid>div:nth-child(3) a{display:inline-flex;align-items:center;min-height:36px}
@media (pointer:coarse){.footer nav a,.footer__grid>div:nth-child(3) a{min-height:44px}}
.footer__contact li{display:flex;align-items:center;gap:.6rem;min-height:36px;overflow-wrap:anywhere}
.footer__contact .ico{color:var(--turq-light);width:1.1rem;height:1.1rem}
.footer__contact a{display:inline-flex;align-items:center;min-height:36px}
@media (pointer:coarse){.footer__contact li,.footer__contact a{min-height:44px}}
.footer__bottom{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 2rem;padding-block:1.25rem;font-size:.8125rem}
.footer__bottom::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:rgb(255 255 255 / .1)}
.footer__bottom a{display:inline-block;padding:.75rem 8px;margin:-.75rem -8px;color:var(--white);font-weight:600}
@media (max-width:960px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr;gap:1.5rem;padding-block:2.75rem 1.75rem}
  .footer__brand{align-items:center;text-align:center}
  .footer__brand p{margin-inline:auto}
  /* rodapé mobile só com a marca: menu, serviços e contato já estão logo acima (seção Contato) */
  .footer__grid>nav,.footer__grid>div:nth-child(3),.footer__grid>div:nth-child(4){display:none}
}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{transition:opacity .35s var(--ease),transform .35s var(--ease),background-color .3s var(--ease);position:fixed;right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem);z-index:40;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--leaf);color:var(--white);box-shadow:0 12px 26px -10px rgb(10 47 59 / .55)}
.wa-float .ico{width:32px;height:32px}
.wa-float.is-hidden{opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
.wa-float:hover{transform:scale(1.08);background:var(--leaf-700)}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html,.carousel__track{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .svc:hover,.btn:hover,.svc:hover .svc__media img,.footer__seal:hover{transform:none}
  /* carpas paradas, visíveis, no ponto de partida */
  .koi,.koi img{animation:none!important;opacity:1}
}