/* =========================================================
   MAIS AMBIENTAL — folha de estilo
   Referência: layout Photoshop 1920px (Home.jpg.jpeg)
   Todas as cores foram amostradas do layout original.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Cores */
  --c-teal-dark:  #076E81;   /* botões, quadrados dos ícones, números, barra do rodapé */
  --c-teal-top:   #0C6C82;   /* barra superior */
  --c-teal-blog:  #0A7D90;   /* fundo do blog */
  --c-btn-teal:   #0A6D82;   /* botão "Fale conosco" */
  --c-btn-mint:   #63AD94;   /* botão "Conheça nossas soluções" */
  --c-mint:       #70B49F;   /* fundo "A Mais Ambiental" */
  --c-mint-2:     #62A38F;   /* fundo "Sustentabilidade" */
  --c-mint-3:     #6FB39E;   /* fundo contato */
  --c-green:      #60A890;   /* título dos números, ícones do rodapé, detalhes */
  --c-green-2:    #68B090;   /* ícones da barra superior / chevron */
  --c-petrol:     #296365;   /* fundo "O Ciclo da Transformação" */
  --c-paper:      #F5F5F5;   /* fundo números */
  --c-paper-2:    #F0F0F0;   /* fundo economia circular */
  --c-white:      #FFFFFF;
  --c-text:       #181818;
  --c-text-2:     #404040;
  --c-text-3:     #484848;
  --c-menu:       #575755;
  --c-footer:     #474747;
  --c-footer-line:#5F5F5F;
  --c-input:      #F3F3F3;
  --c-blog-num:   #90E0C8;
  --c-rule:       #686868;

  /* Ciclo — degradê do petróleo ao ciano */
  --cy-1: #04697D; --cy-2: #0C8695; --cy-3: #0A98A8;
  --cy-4: #0AB3B8; --cy-5: #12CFD1; --cy-6: #17E6E0;

  /* Tipografia */
  --font: "Plus Jakarta Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Escala fluida: valor mínimo em ~1024px → valor medido no layout em 1920px */
  --fs-body:     clamp(16px, 10.3px + 0.56vw, 21px);    /* parágrafos: 21px */
  --fs-small:    clamp(16px, 10.3px + 0.56vw, 21px);
  --fs-xs:       clamp(15px, 9.3px + 0.56vw, 20px);     /* resumo do blog: 20px */
  --fs-sub:      clamp(22px, 7.1px + 1.45vw, 35px);     /* subtítulos: 33–36px */
  --fs-h2:       clamp(36px, 6.3px + 2.9vw, 62px);      /* "A Mais Ambiental": 62px */
  --fs-h2-lg:    clamp(36px, 4px + 3.125vw, 64px);      /* Gestão / Sustentabilidade / Economia: 64px */
  --fs-h2-xl:    clamp(32px, -8px + 3.7vw, 62px);       /* "O que fizemos até agora:" */
  --fs-blog:     clamp(40px, -5.7px + 4.46vw, 80px);    /* "Blog Mais Ambiental": 80px */
  --fs-cycle:    clamp(34px, 11.1px + 2.23vw, 54px);    /* "O Ciclo da Transformação": 54px */
  --fs-h3:       clamp(36px, 8.6px + 2.68vw, 60px);     /* Visão / Missão: 60px */
  --fs-h3-sm:    clamp(34px, 6.6px + 2.68vw, 58px);     /* Valores: 58px */
  --fs-h4:       clamp(22px, 12.9px + 0.89vw, 30px);    /* títulos de post: 30px */
  --fs-h5:       clamp(17px, 11.3px + 0.56vw, 22px);    /* tópicos da gestão: 22px */
  --fs-col:      clamp(21px, 7.3px + 1.34vw, 33px);     /* títulos das colunas da economia circular: 33px */
  --fs-hero:     clamp(30px, 14px + 1.5625vw, 44px);    /* título do hero: 44px */
  --fs-stat:     clamp(26px, 3.4px + 2.1vw, 44px);      /* números */
  --fs-stat-lbl: clamp(15px, 3.4px + 1vw, 22px);        /* legendas dos números */
  --fs-menu:     clamp(16px, 12.6px + 0.335vw, 19px);   /* menu: 19px */
  --fs-nav-ft:   clamp(15px, 12.4px + 0.2vw, 17px);     /* menu do rodapé */
  --fs-post-num: clamp(38px, 12.9px + 2.46vw, 60px);    /* 01 02 03: 60px */
  --fs-feat:     clamp(24px, 10.3px + 1.34vw, 36px);    /* destaque do blog / título do formulário: 36px */

  /* Espaçamentos fluidos */
  --sp-xl: clamp(90px, -1.4px + 8.93vw, 170px);
  --sp-l:  clamp(70px, 12.9px + 5.58vw, 120px);
  --sp-m:  clamp(50px, 10px + 3.9vw, 85px);
  --sp-s:  clamp(32px, 11.4px + 2.01vw, 50px);
  --sp-xs: clamp(20px, 9px + 1.1vw, 30px);

  /* Layout */
  --container: min(1360px, calc(100vw - 112px));
  --gutter: max(56px, (100vw - 1360px) / 2);
  --radius: 14px;
  --radius-lg: 28px;
  --header-h: clamp(76px, 6.1vw, 117px);
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.25;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure, fieldset { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--c-green); outline-offset: 3px; }

.container { width: var(--container); margin-inline: auto; }
.ico { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* ---------- Componentes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: clamp(200px, 15.6vw, 300px); min-height: 44px;
  padding: 8px 28px; border-radius: 6px;
  color: var(--c-white); font-size: var(--fs-body); font-weight: 500; line-height: 1.2;
  text-align: center; transition: filter .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.btn:active { transform: translateY(0); }
.btn--mint { background: var(--c-btn-mint); }
.btn--teal { background: var(--c-btn-teal); }
.btn--dark { background: var(--c-teal-dark); min-width: 188px; min-height: 50px; border-radius: 5px; }

.dash { display: block; width: clamp(32px, 2.4vw, 46px); height: 4px; border-radius: 2px; margin-bottom: clamp(12px, 1.05vw, 20px); }
.dash--white { background: var(--c-white); }
.dash--green { background: var(--c-green); }
.dash--teal  { background: #289098; }

.section-title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
.section-sub   { font-size: var(--fs-sub); font-weight: 400; line-height: 1.15; margin-top: .25em; }

/* Textura de papel (fundos claros) */
.paper { position: relative; isolation: isolate; }
.paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0 0.2 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .22; mix-blend-mode: multiply;
}

/* Animação de entrada (só com JS ativo) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.js .reveal--left  { transform: translateX(-40px); }
.js .reveal--right { transform: translateX(40px); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
.js.noanim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* =========================================================
   BARRA SUPERIOR
   ========================================================= */
.topbar { background: var(--c-teal-top); color: var(--c-white); font-size: clamp(12px, 9.7px + .12vw, 14px); font-weight: 500; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 66px; padding-block: 10px; }
.topbar__left, .topbar__right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 40px; }
.topbar__item { display: inline-flex; align-items: center; gap: 12px; transition: opacity .2s; white-space: nowrap; }
.topbar__item:hover { opacity: .8; }
.topbar__item .ico { font-size: 18px; color: var(--c-green-2); }
.topbar__right { gap: 0; }
.topbar__right .topbar__item { padding-inline: 22px; }
.topbar__right .topbar__item + .topbar__item { border-left: 1px solid rgba(255,255,255,.35); }
.topbar__right .topbar__item:last-child { padding-right: 0; }

/* =========================================================
   HEADER
   ========================================================= */
.header { position: sticky; top: 0; z-index: 115; background: var(--c-white); transition: box-shadow .3s ease; }
.header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: var(--header-h); padding-block: 14px; }
.logo img { width: auto; height: clamp(46px, 4vw, 76px); }

.nav__list { display: flex; align-items: center; gap: clamp(18px, 2.1vw, 40px); }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 0; font-size: var(--fs-menu); font-weight: 600; color: var(--c-menu); white-space: nowrap;
  transition: color .2s;
}
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-green); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav__link:hover, .nav__link.is-active { color: var(--c-teal-dark); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.ico--chev { font-size: .8em; color: var(--c-green-2); transition: transform .3s; }
.has-sub { position: relative; }
.has-sub:hover .ico--chev, .has-sub:focus-within .ico--chev { transform: rotate(180deg); }
.sub {
  position: absolute; top: 100%; left: -18px; min-width: 300px; padding: 10px 0;
  background: var(--c-white); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.14);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.sub::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 12px; } /* ponte para o hover */
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: block; padding: 10px 22px; font-size: 16px; font-weight: 500; color: var(--c-menu); transition: background .2s, color .2s; }
.sub a:hover { background: var(--c-paper); color: var(--c-teal-dark); }

.nav-toggle { display: none; position: relative; z-index: 120; width: 44px; height: 44px; padding: 8px; border-radius: 8px; }
.nav-toggle span { display: block; width: 26px; height: 3px; margin: 5px auto; background: var(--c-teal-dark); border-radius: 2px; transition: transform .3s, opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: clamp(560px, 43.5vw, 835px); color: var(--c-white);
  background: url("../img/hero.jpg") center / cover no-repeat;
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,50,60,.54) 0%, rgba(8,50,60,.6) 100%); }
.hero__inner { position: relative; padding-block: clamp(60px, 8vw, 120px) clamp(90px, 15vw, 280px); }
.hero__content { max-width: 720px; padding-left: clamp(0px, 1.4vw, 27px); }
.hero__title { max-width: 600px; font-size: var(--fs-hero); font-weight: 700; line-height: 1.0; letter-spacing: -.012em; margin-bottom: clamp(18px, 1.6vw, 30px); }
.hero__text { max-width: 630px; font-size: var(--fs-body); line-height: 1.2; margin-bottom: clamp(24px, 1.8vw, 36px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px 26px; margin-left: clamp(-8px, -0.4vw, 0px); }

/* =========================================================
   NÚMEROS
   ========================================================= */
.stats { background: var(--c-paper); padding: clamp(56px, 4.6vw, 88px) 0 var(--sp-xl); }
.stats__title {
  position: relative; text-align: center; color: var(--c-green);
  font-size: var(--fs-h2-xl); font-weight: 800; letter-spacing: -.01em; line-height: 1.1;
  padding-bottom: clamp(12px, 1.1vw, 22px); margin-bottom: clamp(48px, 6.5vw, 124px);
}
.stats__title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(1040px, 100%); height: 1px; background: var(--c-rule); opacity: .6; }
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 2.4vw, 46px) clamp(20px, 1.2vw, 24px); }
.stat { display: flex; align-items: center; gap: clamp(14px, 1.2vw, 22px); }
.stat__icon { width: clamp(56px, 4.1vw, 78px); height: auto; flex: none; }
.stat__body { display: flex; flex-direction: column; }
.stat__num { font-size: var(--fs-stat); font-weight: 800; line-height: 1.05; color: var(--c-teal-dark); letter-spacing: -.015em; }
.stat__label { font-size: var(--fs-stat-lbl); color: var(--c-text-3); margin-top: .2em; }
.stats__grid .reveal:nth-child(2n) { transition-delay: .1s; }

/* =========================================================
   A MAIS AMBIENTAL
   ========================================================= */
.about { position: relative; isolation: isolate; background: var(--c-mint); color: var(--c-white); padding: var(--sp-m) 0 var(--sp-s); }
.about::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/hero.jpg") center / cover no-repeat;
  filter: grayscale(1); mix-blend-mode: soft-light; opacity: .32;
}
.about__intro { display: grid; grid-template-columns: 34% 1fr; column-gap: clamp(28px, 4.6%, 68px); align-items: start; width: var(--container); margin-inline: auto; }
.about__photo { margin-left: calc(-1 * var(--gutter)); }
.about__photo img { width: 100%; aspect-ratio: 726 / 380; object-fit: cover; border-radius: 0 30px 30px 0; }
.about__text p { line-height: 1.2; }
.about__text .section-sub { margin-bottom: clamp(18px, 1.9vw, 36px); }
.about__text p + p { margin-top: .6em; }

.about__vm { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px clamp(24px, 1.2vw, 24px); margin-top: clamp(36px, 3.1vw, 60px); }
.about__vm-title { font-size: var(--fs-h3); font-weight: 700; line-height: 1; margin-bottom: clamp(8px, .7vw, 14px); }
.about__vm p { line-height: 1.2; max-width: 720px; }

.values { border: 2px solid var(--c-white); border-radius: 26px; padding: clamp(6px, .6vw, 12px) clamp(24px, 4.2vw, 80px) clamp(18px, 1.8vw, 34px); margin-top: clamp(24px, 1.8vw, 35px); min-width: 0; }
.values__title { margin-inline: auto; padding-inline: clamp(16px, 2.4vw, 46px); font-size: var(--fs-h3-sm); font-weight: 700; line-height: 1; text-align: center; color: var(--c-white); }
.values__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }
.values__cols li { position: relative; padding-left: 16px; line-height: 1.25; }
.values__cols li + li { margin-top: .38em; }
.values__cols li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--c-white); }

/* =========================================================
   O CICLO DA TRANSFORMAÇÃO
   ========================================================= */
.cycle { position: relative; isolation: isolate; background: var(--c-petrol); color: var(--c-white); padding: clamp(80px, 7.3vw, 140px) 0 clamp(80px, 8.33vw, 160px); text-align: center; }
.cycle::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/hero.jpg") center 70% / cover no-repeat;
  filter: grayscale(1) contrast(1.15); mix-blend-mode: soft-light; opacity: .4;
}
.cycle__head .dash { margin-inline: auto; }
.cycle__head .section-title { font-size: var(--fs-cycle); }
.cycle__head .section-sub { font-size: clamp(22px, 6px + 1.5625vw, 36px); }
.cycle__text { max-width: 1300px; margin: clamp(16px, 1.5vw, 28px) auto 0; font-size: clamp(15px, 9.5px + .47vw, 18px); line-height: 1.22; }

/* Diagrama: anéis finos atrás de TODOS os círculos cheios; círculos seguintes sobrepõem os anteriores */
.cycle__steps { --ring: clamp(150px, 16.56vw, 318px); position: relative; isolation: isolate; display: flex; justify-content: center; margin-top: clamp(48px, 4.2vw, 80px); padding-inline: 8px; }
.step { position: relative; width: var(--ring); height: var(--ring); flex: none; }
.step + .step { margin-left: calc(var(--ring) * -0.384); }
.step--1 { --c: var(--cy-1); } .step--2 { --c: var(--cy-2); } .step--3 { --c: var(--cy-3); }
.step--4 { --c: var(--cy-4); } .step--5 { --c: var(--cy-5); } .step--6 { --c: var(--cy-6); }
.step__ring { position: absolute; inset: 0; z-index: 1; border-radius: 50%; border: 3px solid var(--c); }
.step__fill {
  position: absolute; z-index: 2; left: 14.15%; top: 14.15%;
  display: grid; place-items: center; width: 71.7%; height: 71.7%; padding: 0 11%; border-radius: 50%;
  background: var(--c); color: var(--c-white); text-transform: uppercase; font-weight: 700; text-align: center;
  font-size: calc(var(--ring) * 0.06); line-height: 1.15; letter-spacing: .01em;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  transition: transform .35s ease;
}
.step:hover .step__fill { transform: scale(1.06); }

/* Entrada em cascata: cada círculo desliza da esquerda e se sobrepõe ao anterior */
.js .cycle__steps .step.reveal {
  opacity: 0;
  transform: translateX(-64%) scale(.78);
  transition: opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1);
}
.js .cycle__steps .step.reveal.is-visible { opacity: 1; transform: none; }
.js .cycle__steps .step.reveal:nth-child(1) { transition-delay: 0s; }
.js .cycle__steps .step.reveal:nth-child(2) { transition-delay: .22s; }
.js .cycle__steps .step.reveal:nth-child(3) { transition-delay: .44s; }
.js .cycle__steps .step.reveal:nth-child(4) { transition-delay: .66s; }
.js .cycle__steps .step.reveal:nth-child(5) { transition-delay: .88s; }
.js .cycle__steps .step.reveal:nth-child(6) { transition-delay: 1.1s; }

/* =========================================================
   GESTÃO INTEGRADA DE RESÍDUOS
   ========================================================= */
.services { background: var(--c-white); padding: clamp(50px, 4.4vw, 85px) 0 clamp(50px, 3.7vw, 70px); }
.services__grid {
  display: grid; grid-template-columns: 23.5% 1fr 21.5%; grid-template-rows: auto 1fr; align-items: stretch;
  /* no layout os vãos são assimétricos: 68px à esquerda do texto e 36px à direita */
  --gap-l: clamp(24px, 3.5vw, 68px); --gap-r: clamp(16px, 1.9vw, 36px);
}
.services__head { padding-left: var(--gap-l); }
.services__text { padding-inline: var(--gap-l) var(--gap-r); }
.services__photos { display: flex; flex-direction: column; gap: clamp(20px, 2.3vw, 44px); }
.services__photos img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.services__photos--left { grid-column: 1; grid-row: 1 / 3; }
.services__photos--left img:nth-child(1) { aspect-ratio: 345 / 511; }
.services__photos--left img:nth-child(2) { aspect-ratio: 345 / 355; }
.services__photos--right { grid-column: 3; grid-row: 2; justify-content: flex-end; }
.services__photos--right img:nth-child(1) { aspect-ratio: 315 / 327; }
.services__photos--right img:nth-child(2) { aspect-ratio: 315 / 297; }
.services__head { grid-column: 2 / 4; grid-row: 1; }
.services__text { grid-column: 2; grid-row: 2; }
.services__title { font-size: var(--fs-h2-lg); font-weight: 700; line-height: 1.08; letter-spacing: -.012em; color: var(--c-text); margin-top: clamp(6px, 1.5vw, 28px); }
.services__sub { font-size: clamp(21px, 7.3px + 1.34vw, 33px); line-height: 1.15; color: var(--c-text); margin-top: clamp(10px, 1vw, 20px); }
.services__list { margin-top: clamp(18px, 1.9vw, 36px); }
.service + .service { margin-top: clamp(8px, .55vw, 10px); }
.service dt { font-size: clamp(15px, 9.7px + .47vw, 19px); font-weight: 700; line-height: 1.2; color: var(--c-teal-dark); }
.service dd { font-size: var(--fs-small); line-height: 1.15; color: var(--c-text); margin-top: .2em; max-width: 700px; }
.service:target dt { color: var(--c-teal-dark); }

/* =========================================================
   SUSTENTABILIDADE QUE TRANSFORMA PESSOAS
   ========================================================= */
.impact { position: relative; isolation: isolate; background: var(--c-mint-2); color: var(--c-white); padding: clamp(64px, 6vw, 115px) 0 clamp(50px, 4.2vw, 80px); }
.impact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/hero.jpg") center / cover no-repeat;
  filter: grayscale(1) contrast(1.2); mix-blend-mode: soft-light; opacity: .25;
}
.impact__top { display: grid; grid-template-columns: 48.7% 1fr; column-gap: clamp(24px, 3.1%, 45px); align-items: start; }
.impact__photo img { width: 100%; aspect-ratio: 713 / 366; object-fit: cover; border-radius: var(--radius-lg); }
.impact__text { padding-top: clamp(0px, 1.6vw, 30px); }
.impact__text .section-title { font-size: var(--fs-h2-lg); margin-bottom: clamp(10px, 1vw, 18px); }
.impact__text p { line-height: 1.22; }
.impact__text p + p { margin-top: .6em; }
.impact__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3.3%, 48px); margin-top: clamp(32px, 3.6vw, 70px); }
.impact__gallery img { width: 100%; aspect-ratio: 458 / 241; object-fit: cover; border-radius: 20px; }
.impact__gallery .reveal:nth-child(2) { transition-delay: .12s; } .impact__gallery .reveal:nth-child(3) { transition-delay: .24s; }

/* =========================================================
   BANNER
   ========================================================= */
.banner img { width: 100%; height: auto; min-height: 240px; object-fit: cover; object-position: center; }

/* =========================================================
   ECONOMIA CIRCULAR NA PRÁTICA
   ========================================================= */
.circular { background: var(--c-paper-2); color: var(--c-text-2); padding: clamp(60px, 5.2vw, 100px) 0 clamp(50px, 4.2vw, 80px); text-align: center; }
.circular__head .dash { margin-inline: auto; }
.circular__head .section-title { font-size: var(--fs-h2-lg); color: var(--c-text-2); }
.circular__head .section-sub { font-size: clamp(21px, 7.3px + 1.34vw, 33px); color: var(--c-text-2); }
.circular__text { max-width: 1420px; margin: clamp(12px, 1vw, 18px) auto 0; font-size: var(--fs-small); line-height: 1.22; color: var(--c-text-3); }
.circular__cols { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 3.6vw, 70px); row-gap: 48px; margin-top: clamp(40px, 4.2vw, 80px); }
.pillar { display: flex; flex-direction: column; align-items: center; }
.pillar__icon { width: clamp(112px, 9.1vw, 175px); height: auto; margin-bottom: clamp(16px, 1.4vw, 27px); transition: transform .35s ease; }
.pillar:hover .pillar__icon { transform: translateY(-6px); }
.pillar__title { font-size: var(--fs-col); font-weight: 400; line-height: 1.12; color: var(--c-text-2); min-height: 2.24em; display: flex; align-items: center; }
.pillar__lead { font-size: var(--fs-small); font-weight: 700; line-height: 1.15; color: var(--c-text); margin-top: clamp(14px, 1.4vw, 26px); max-width: 420px; }
.pillar p:not(.pillar__lead) { font-size: var(--fs-small); line-height: 1.2; color: var(--c-text-2); margin-top: .5em; max-width: 440px; }
.circular__cols .reveal:nth-child(2) { transition-delay: .12s; } .circular__cols .reveal:nth-child(3) { transition-delay: .24s; }

/* =========================================================
   BLOG
   ========================================================= */
.blog { background: var(--c-teal-blog); color: var(--c-white); padding: clamp(80px, 7.5vw, 145px) 0 clamp(60px, 5.3vw, 102px); }
.blog__head { text-align: center; }
.blog__head .dash { margin-inline: auto; }
.blog__title { font-size: var(--fs-blog); font-weight: 700; line-height: 1; letter-spacing: -.01em; display: inline-flex; align-items: baseline; }
.blog__leaf { display: inline-block; width: .61em; height: auto; margin: 0 .05em 0 .03em; transform: translateY(.19em); }
.blog__grid { display: grid; grid-template-columns: 48.6% 1fr; column-gap: clamp(28px, 4.4%, 65px); margin-top: clamp(48px, 5.6vw, 108px); align-items: start; }
.blog__cover { display: block; overflow: hidden; border-radius: 20px; }
.blog__cover img { width: 100%; aspect-ratio: 711 / 735; object-fit: cover; transition: transform .6s ease; }
.blog__cover:hover img { transform: scale(1.04); }
.posts { padding-top: clamp(8px, 1.6vw, 30px); }
.post { display: grid; grid-template-columns: 1fr auto; column-gap: clamp(16px, 2vw, 40px); align-items: start; }
.post + .post { margin-top: clamp(16px, 1.25vw, 24px); }
.post__title { font-size: var(--fs-h4); font-weight: 400; line-height: 1.1; }
.post__title strong { font-weight: 700; }
.post__title a { transition: color .2s; }
.post__title a:hover { color: var(--c-blog-num); }
.post p { font-size: var(--fs-xs); line-height: 1.15; margin-top: clamp(10px, 1vw, 20px); max-width: 580px; }
.post__num { font-size: var(--fs-post-num); font-weight: 700; line-height: 1; color: var(--c-blog-num); padding-top: .12em; }
.posts .reveal:nth-child(2) { transition-delay: .12s; } .posts .reveal:nth-child(3) { transition-delay: .24s; }

.featured { display: grid; grid-template-columns: 48.6% 1fr; column-gap: clamp(28px, 4.4%, 65px); align-items: center; margin-top: clamp(20px, 2vw, 40px); }
.featured__title { font-size: var(--fs-feat); font-weight: 400; line-height: 1.12; }
.featured__title strong { font-weight: 700; }
.featured__title a:hover { color: var(--c-blog-num); }
.featured__text p { font-size: var(--fs-body); line-height: 1.2; margin-top: clamp(16px, 2vw, 38px); max-width: 700px; }
.featured__photo { display: block; overflow: hidden; border-radius: 20px; }
.featured__photo img { width: 100%; aspect-ratio: 711 / 277; object-fit: cover; transition: transform .6s ease; }
.featured__photo:hover img { transform: scale(1.04); }

/* =========================================================
   CONTATO
   ========================================================= */
.contact { position: relative; isolation: isolate; background: var(--c-mint-3); color: var(--c-white); padding: clamp(70px, 6.8vw, 130px) 0 clamp(70px, 5.9vw, 113px); }
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 90c0-38 30-68 74-70 0 40-30 70-74 70Z'/%3E%3Cpath d='M22 88 88 24'/%3E%3Cpath d='M126 200c0-38 30-68 74-70 0 40-30 70-74 70Z'/%3E%3Cpath d='M128 198l66-64'/%3E%3Cpath d='M200 20c-4 34-32 58-72 58 2-38 30-62 72-58Z'/%3E%3Cpath d='M198 22l-68 54'/%3E%3Cpath d='M92 130c-4 34-32 58-72 58 2-38 30-62 72-58Z'/%3E%3Cpath d='M90 132l-68 54'/%3E%3Cpath d='M116 66c22-6 44 6 52 32-24 6-46-6-52-32Z'/%3E%3Cpath d='M118 68l48 28'/%3E%3Cpath d='M20 208c-2-18 8-34 28-40 2 20-8 36-28 40Z'/%3E%3Cpath d='M22 206l24-36'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.form { padding-inline: clamp(0px, 2.9%, 42px); }
.form__title { font-size: var(--fs-feat); font-weight: 700; line-height: 1.1; margin-bottom: clamp(20px, 1.4vw, 27px); }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(20px, 2.9%, 42px); }
.field { position: relative; margin-bottom: clamp(14px, .75vw, 15px); }
.field label { display: block; font-size: var(--fs-body); line-height: 1.2; margin-bottom: 5px; }
.field input, .field textarea {
  display: block; width: 100%; min-height: clamp(48px, 3.1vw, 60px); padding: 12px 18px;
  background: var(--c-input); color: var(--c-text); border: 2px solid transparent; border-radius: 6px;
  font-size: var(--fs-xs); outline: none; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: clamp(140px, 9.1vw, 175px); resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--c-teal-dark); box-shadow: 0 0 0 4px rgba(7,110,129,.18); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #E2574C; }
.field__error { display: block; font-size: 13px; line-height: 1.2; font-weight: 600; color: #FFF1E6; }
.field__error:empty { display: none; }
.field.is-invalid { margin-bottom: 4px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 5px; }
.form__status { font-size: var(--fs-xs); font-weight: 600; }
.form__status.is-ok { color: #F4FFF9; }
.form__status.is-error { color: #FFE9E4; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--c-footer); color: var(--c-white); padding-top: clamp(56px, 4.4vw, 84px); }
.footer__logo img { width: auto; height: clamp(54px, 4.3vw, 82px); }
.footer__grid { display: grid; grid-template-columns: 27% 1fr 27%; column-gap: clamp(24px, 4.5%, 66px); row-gap: 40px; margin-top: clamp(34px, 2.8vw, 50px); align-items: start; }
.footer__tagline { font-size: 14px; line-height: 1.55; color: #D9D9D9; max-width: 380px; }
.footer__nav { display: grid; grid-template-columns: auto auto; column-gap: clamp(40px, 4vw, 76px); justify-content: start; }
.footer__nav li + li { margin-top: 15px; }
.footer__nav a, .footer__addr, .footer__contact { display: flex; align-items: center; gap: 20px; font-size: var(--fs-nav-ft); line-height: 1.25; }
.footer__nav a { transition: color .2s; }
.footer__nav a:hover { color: var(--c-green); }
.footer__nav .ico, .footer__addr .ico, .footer__contact .ico, .footer__social .ico { font-size: 20px; color: var(--c-green); }
.footer__addr { align-items: flex-start; }
.footer__addr .ico { margin-top: .2em; }
.sq { display: inline-block; width: 5px; height: 5px; margin: 0 6px 3px; background: var(--c-green); }
.footer__bottom { display: grid; grid-template-columns: 27% 1fr 27%; column-gap: clamp(24px, 4.5%, 66px); row-gap: 16px; align-items: center; margin-top: clamp(44px, 4vw, 76px); padding: clamp(28px, 2.7vw, 52px) 0 clamp(36px, 2.6vw, 50px); border-top: 1px solid var(--c-footer-line); font-size: 15px; }
.footer__social { display: flex; align-items: center; gap: 16px; font-size: 15px; }
.footer__social span { margin-right: 2px; }
.footer__social a { transition: transform .2s, color .2s; }
.footer__social a:hover { transform: translateY(-2px); color: var(--c-white); }
.footer__contact { display: flex; align-items: center; gap: 12px; font-size: 15px; transition: color .2s; }
.footer__contact:hover { color: var(--c-green); }

.copyright { background: var(--c-teal-dark); color: var(--c-white); font-size: clamp(14px, 11px + .16vw, 17px); }
.copyright__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; min-height: 74px; padding-block: 18px; align-items: center; }
.copyright__year { margin-right: 14px; }

/* =========================================================
   PÁGINA QUEM SOMOS
   ========================================================= */
.qs-hero { min-height: clamp(420px, 27vw, 517px); background-image: url("../img/sobre.jpg"); background-position: center 40%; }
.qs-hero::before { background: linear-gradient(180deg, rgba(14,34,38,.5) 0%, rgba(14,34,38,.62) 100%); }
.qs-hero .hero__inner { padding-block: clamp(40px, 4vw, 76px) clamp(40px, 4vw, 76px); }
.qs-hero .hero__content { max-width: 840px; }
.qs-hero .hero__title { margin-bottom: .3em; max-width: none; }
.qs-hero__sub { font-size: clamp(17px, 7.6px + .8vw, 23px); font-weight: 700; line-height: 1.2; margin-bottom: clamp(14px, 1.3vw, 24px); }
.qs-hero .hero__text { max-width: 640px; }

/* blocos de texto compartilhados pelas seções */
.qs-text .dash { margin-bottom: clamp(14px, 1.2vw, 22px); }
.qs-title { font-size: var(--fs-h2-lg); font-weight: 700; line-height: 1.05; letter-spacing: -.012em; margin-bottom: .35em; }
.qs-sub { font-size: clamp(20px, 9.4px + .94vw, 28px); font-weight: 400; line-height: 1.2; margin: .4em 0 clamp(16px, 1.4vw, 26px); }
.qs-text p:not(.qs-sub) { font-size: var(--fs-body); line-height: 1.2; max-width: 720px; }
.qs-text p:not(.qs-sub) + p:not(.qs-sub) { margin-top: .6em; }

/* Nossa história */
.qs-historia { background: var(--c-white); color: var(--c-text); padding: clamp(70px, 6.5vw, 125px) 0 clamp(70px, 6.6vw, 126px); }
.qs-historia__grid { display: grid; grid-template-columns: 49.8% 1fr; column-gap: clamp(20px, 1.85%, 27px); align-items: start; }
.qs-historia .qs-text { padding-top: 0; }
.qs-historia .qs-sub { color: var(--c-text-2); }
.qs-historia .qs-text p:not(.qs-sub) { color: var(--c-text-3); }
.qs-collage { display: flex; flex-direction: column; gap: clamp(12px, 1.15vw, 22px); }
.qs-collage__row { display: flex; gap: clamp(12px, 1.15vw, 22px); }
.qs-collage__row--top { align-items: flex-end; }
.qs-collage img { display: block; min-width: 0; object-fit: cover; border-radius: var(--radius); }
.qs-collage__row--top img:nth-child(1)    { flex: 432 1 0; aspect-ratio: 432 / 328; }
.qs-collage__row--top img:nth-child(2)    { flex: 275 1 0; aspect-ratio: 275 / 225; }
.qs-collage__row--bottom img:nth-child(1) { flex: 270 1 0; aspect-ratio: 270 / 292; }
.qs-collage__row--bottom img:nth-child(2) { flex: 437 1 0; aspect-ratio: 437 / 292; }

/* Nossa atuação */
.qs-atuacao { position: relative; isolation: isolate; background: var(--c-petrol); color: var(--c-white); padding: clamp(60px, 5.2vw, 100px) 0 clamp(50px, 4.7vw, 90px); }
.qs-atuacao::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/hero.jpg") center 70% / cover no-repeat;
  filter: grayscale(1) contrast(1.15); mix-blend-mode: soft-light; opacity: .4;
}
.qs-atuacao__grid { display: grid; grid-template-columns: 1fr 48.4%; column-gap: clamp(20px, 2.5%, 36px); align-items: start; }
.qs-list__title { font-weight: 700; margin-top: clamp(20px, 2vw, 40px) !important; }
.qs-list { margin-top: .3em; margin-bottom: .6em; }
.qs-list li { font-size: var(--fs-body); line-height: 1.7; }
.qs-list li::before { content: "- "; }
.qs-mosaic {
  display: grid; grid-template-columns: 37.8% 1fr; grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.66vw, 32px); aspect-ratio: 709 / 684; margin-top: clamp(0px, 3vw, 58px);
}
.qs-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.qs-mosaic__a { grid-column: 1; grid-row: 1; }
.qs-mosaic__b { grid-column: 2; grid-row: 1 / 3; }
.qs-mosaic__c { grid-column: 1; grid-row: 2; }
.qs-mosaic__d { grid-column: 1; grid-row: 3; }
.qs-mosaic__e { grid-column: 2; grid-row: 3; }
.qs-mosaic .reveal:nth-child(2) { transition-delay: .1s; } .qs-mosaic .reveal:nth-child(3) { transition-delay: .2s; }
.qs-mosaic .reveal:nth-child(4) { transition-delay: .3s; } .qs-mosaic .reveal:nth-child(5) { transition-delay: .4s; }

/* Aruã */
.qs-arua { background: var(--c-paper-2); color: var(--c-text); padding: clamp(30px, 3vw, 58px) 0 clamp(10px, 1vw, 12px); }
.qs-arua__grid { display: grid; grid-template-columns: 1fr 48.4%; column-gap: clamp(20px, 2.5%, 36px); align-items: start; }
.qs-arua .qs-text { padding-top: clamp(30px, 7.1vw, 136px); padding-bottom: clamp(30px, 3vw, 58px); }
.qs-arua .qs-sub { color: var(--c-text-2); }
.qs-arua .qs-text p:not(.qs-sub) { color: var(--c-text-3); }
.qs-arua__figure { justify-self: center; width: min(100%, clamp(280px, 30.5vw, 585px)); }
.qs-arua__figure img { width: 100%; height: auto; }

/* Nosso compromisso */
.qs-compromisso { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(420px, 47vw, 905px); background: var(--c-teal-top); color: var(--c-white); }
.qs-compromisso__text { display: grid; align-content: center; padding: clamp(50px, 5vw, 100px) clamp(24px, 3vw, 60px) clamp(50px, 5vw, 100px) var(--gutter); }
.qs-compromisso__photo { margin: 0; min-height: 100%; }
.qs-compromisso__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 20% center; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1280px) {
  .nav__list { gap: 18px; }
}

/* ---- Tablet / menu mobile ---- */
@media (max-width: 1100px) {
  :root { --header-h: 84px; }
  .header__inner { min-height: var(--header-h); }
  .nav-toggle { display: block; }
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 110; width: min(380px, 100%);
    padding: 100px 28px 40px; background: var(--c-white); overflow-y: auto;
    transform: translateX(100%); transition: transform .4s cubic-bezier(.22,.61,.36,1); box-shadow: -10px 0 40px rgba(0,0,0,.12);
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__link { display: flex; justify-content: space-between; padding: 12px 0; font-size: 18px; border-bottom: 1px solid #ECECEC; }
  .nav__link::after { display: none; }
  .sub { position: static; min-width: 0; padding: 4px 0 8px 16px; box-shadow: none; border-radius: 0; opacity: 1; visibility: visible; transform: none; }
  .sub a { padding: 8px 0; font-size: 15px; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 105; background: rgba(7,58,70,.45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }

  .services__grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 32px; }
  .services__head, .services__text, .services__photos--left, .services__photos--right { grid-column: 1; grid-row: auto; padding-inline: 0; }
  .services__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .services__photos img { aspect-ratio: 4 / 3 !important; }
  .services__head { order: 1; }
  .services__text { order: 2; }
  .services__photos--left { order: 3; }
  .services__photos--right { order: 4; }
  .service dd { max-width: none; }
}

@media (max-width: 900px) {
  .topbar__item--addr { display: none; }
  .topbar__right .topbar__item span { display: none; }
  .topbar__right .topbar__item { padding-inline: 14px; }

  .hero__content { max-width: 620px; }

  .about__intro { grid-template-columns: 1fr; row-gap: 32px; }
  .about__photo { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .about__photo img { border-radius: 0; aspect-ratio: 16 / 9; }
  .about__vm { grid-template-columns: 1fr; }
  .values__cols { grid-template-columns: 1fr 1fr; }

  .impact__top { grid-template-columns: 1fr; row-gap: 28px; }
  .impact__text { padding-top: 0; }

  .circular__cols { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .pillar__title { min-height: 0; }

  .blog__grid, .featured { grid-template-columns: 1fr; row-gap: 32px; }
  .blog__cover img { aspect-ratio: 16 / 11; }
  .featured__photo { order: -1; }
  .post p { max-width: none; }

  /* Quem somos */
  .qs-historia__grid, .qs-atuacao__grid, .qs-arua__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .qs-historia .qs-text { order: -1; }
  .qs-mosaic { margin-top: 0; }
  .qs-arua { padding-block: clamp(50px, 6vw, 80px) 0; }
  .qs-arua .qs-text { padding-top: 0; padding-bottom: 0; }
  .qs-arua__figure { width: min(70%, 380px); }
  .qs-compromisso { grid-template-columns: 1fr; min-height: 0; }
  .qs-compromisso__text { padding-inline: var(--gutter); }
  .qs-compromisso__photo img { aspect-ratio: 4 / 3; height: auto; }

  .footer__grid, .footer__bottom { grid-template-columns: 1fr; }
  .footer__nav { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --header-h: 76px; }
  .stats__grid { grid-template-columns: 1fr; }
  .stat__icon { width: 54px; }
  .stats__title::after { width: 100%; }

  .cycle__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; --ring: 100%; padding-inline: 0; }
  .step { width: 100%; height: auto; aspect-ratio: 1; }
  .step + .step { margin-left: 0; }
  .step__fill { font-size: clamp(9px, 2.3vw, 13px); padding: 0 8%; box-shadow: 0 4px 14px rgba(0,0,0,.18); }

  .values__cols { grid-template-columns: 1fr; }
  .values { padding-inline: 20px; }
  .impact__gallery { grid-template-columns: 1fr; gap: 16px; }
  .form__row { grid-template-columns: 1fr; }
  .post { grid-template-columns: 1fr auto; column-gap: 16px; }
  .footer__nav { grid-template-columns: 1fr; }
  .copyright__inner { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
  .topbar__inner { flex-wrap: wrap; justify-content: center; gap: 6px 16px; min-height: 0; padding-block: 8px; }
  .topbar__item { white-space: normal; min-width: 0; }
  .topbar__right .topbar__item { padding-inline: 12px; }
}

@media (max-width: 480px) {
  .hero__actions .btn { width: 100%; }
  .services__photos { grid-template-columns: 1fr; }
  .topbar__left .topbar__item span { font-size: 12px; }
  .cycle__steps { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   PÁGINA — PEVs BANDEIRA AZUL
   ========================================================= */
.ba-hero { min-height: clamp(440px, 29vw, 600px); background-image: url("../img/ba/hero.jpg"); background-position: center; }
.ba-hero::before { background: linear-gradient(100deg, rgba(8,40,48,.18) 0%, rgba(8,45,54,.66) 46%, rgba(8,45,54,.82) 100%); }
.ba-hero .hero__content { margin-left: auto; max-width: 620px; }
.ba-hero .hero__title { font-size: clamp(28px, 2.6vw, 42px); margin-bottom: .18em; }
.ba-hero__sub { font-size: clamp(18px, 1.5vw, 25px); font-weight: 700; line-height: 1.25; margin: 0 0 .55em; }
.ba-hero .btn--cta {
  display: inline-block; width: auto; min-width: 0; max-width: 360px; text-align: left;
  line-height: 1.35; padding: 18px 26px; border-radius: 10px; font-weight: 600;
}

.ba-split { display: grid; grid-template-columns: 1fr 46%; column-gap: clamp(32px, 4.4vw, 76px); align-items: center; padding: clamp(60px, 5.6vw, 104px) 0; }
.ba-split--rev { grid-template-columns: 46% 1fr; }
.ba-split--rev .ba-split__media { order: -1; }
.ba-split__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); object-fit: cover; }
.ba-split__text p { font-size: var(--fs-body); line-height: 1.25; }
.ba-split__text p + p { margin-top: .6em; }

.ba-intro, .ba-beaches, .ba-resp-grid-wrap { background: var(--c-paper-2); }
.ba-beaches { padding: clamp(60px, 5.6vw, 104px) 0; }
.ba-howto, .ba-resp-intro, .ba-closing { background: var(--c-white); }
.ba-howto, .ba-closing { color: var(--c-text); }

.ba-beaches__lead { font-size: var(--fs-body); line-height: 1.3; max-width: 900px; margin-top: .2em; }
.beach-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 32px); margin-top: clamp(32px, 3vw, 56px); }
.beach-card__photo { display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 335 / 300; }
.beach-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.beach-card:hover .beach-card__photo img { transform: scale(1.05); }
.beach-card h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.2; margin-top: .65em; }
.beach-card h3 span { color: var(--c-teal-dark); margin-right: 4px; }
.btn-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-top: .85em; padding: 12px 20px;
  border-radius: 999px; background: var(--c-teal-dark); color: var(--c-white);
  font-size: 14px; font-weight: 600; line-height: 1.25; transition: filter .2s, transform .2s;
}
.btn-pill:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-pill .ico { font-size: 17px; flex: none; }
.beach-cards > .beach-card:nth-child(1) .btn-pill { background: var(--c-teal-dark); }
.beach-cards > .beach-card:nth-child(2) .btn-pill { background: var(--c-btn-teal); }
.beach-cards > .beach-card:nth-child(3) .btn-pill { background: var(--c-mint-2); }
.beach-cards > .beach-card:nth-child(4) .btn-pill { background: var(--c-btn-mint); }

.ba-locator { background: var(--c-teal-top); color: var(--c-white); }
.ba-locator .ba-split__text p { color: var(--c-white); }
.legend { margin-top: .9em; }
.legend li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body); line-height: 1.9; }
.legend .dot { width: 17px; height: 17px; border-radius: 50%; flex: none; }
.legend + p { margin-top: .8em; }

.resp-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: clamp(28px, 3.4vw, 48px); row-gap: 40px; margin-top: clamp(12px, 1.5vw, 20px); }
.resp-item__head { display: block; margin-bottom: clamp(10px, 1vw, 16px); }
.resp-item__num { display: block; font-size: clamp(28px, 2.2vw, 38px); font-weight: 800; color: var(--c-teal-dark); line-height: 1; margin-bottom: .3em; }
.resp-item h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.25; }
.resp-item p { font-size: var(--fs-small); line-height: 1.32; margin-top: .6em; color: var(--c-text-3); }
.resp-item p strong { color: var(--c-text); }
.ba-resp-grid-wrap { padding-top: clamp(56px, 5.6vw, 100px); padding-bottom: clamp(64px, 5.8vw, 108px); }

@media (max-width: 900px) {
  .ba-split, .ba-split--rev { grid-template-columns: 1fr; row-gap: 28px; }
  .ba-split--rev .ba-split__media { order: 0; }
  .ba-hero .hero__content { margin-left: 0; max-width: 620px; }
  .beach-cards { grid-template-columns: 1fr 1fr; }
  .resp-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}
@media (max-width: 560px) {
  .beach-cards { grid-template-columns: 1fr; }
  .resp-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PRODUTOS — vitrine (home) e página de produtos
   ========================================================= */
.shop { padding: clamp(60px, 5.6vw, 104px) 0; background: var(--c-white); }
.shop__head { max-width: 640px; }
.shop__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 32px); margin-top: clamp(32px, 3vw, 56px); }

.shop-card { display: flex; flex-direction: column; background: var(--c-paper); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; }
.shop-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.09); }
.shop-card__photo {
  display: block; aspect-ratio: 1 / 1; overflow: hidden; padding: 7%; box-sizing: border-box;
  background: radial-gradient(circle at 50% 40%, #E9F4EF 0%, #DCEEE6 55%, #CDE7DB 100%);
}
.shop-card__photo img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.shop-card:hover .shop-card__photo img { transform: scale(1.06); }
.shop-card__body { display: flex; flex-direction: column; gap: .35em; padding: clamp(16px, 1.6vw, 24px); flex: 1; }
.shop-card__body h3 { font-size: var(--fs-h5); font-weight: 700; line-height: 1.25; }
.shop-card__body h3 a:hover { color: var(--c-teal-dark); }
.shop-card__desc { font-size: var(--fs-xs); color: var(--c-text-3); line-height: 1.3; }
.shop-card__price { font-size: clamp(20px, 1.7vw, 27px); font-weight: 800; color: var(--c-teal-dark); margin-top: .15em; }
.shop-card__actions { margin-top: auto; padding-top: clamp(12px, 1.2vw, 18px); display: flex; flex-direction: column; align-items: stretch; gap: 10px; }

.btn-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 8px; background: #25D366; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; transition: filter .2s ease, transform .2s ease; }
.btn-whatsapp:hover { filter: brightness(1.07); transform: translateY(-2px); }
.btn-whatsapp .ico { font-size: 18px; flex: none; }

.shop-card__more { align-self: center; font-size: 14px; font-weight: 600; color: var(--c-teal-dark); text-underline-offset: 3px; text-decoration: underline; }
.shop-card__more:hover { color: var(--c-btn-teal); }

/* Página de produtos — detalhe */
.prod-detail { padding: clamp(60px, 5.6vw, 104px) 0; }
.prod-detail:nth-child(even) { background: var(--c-paper-2); }
.prod-detail__photo {
  border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1 / 1; padding: 9%; box-sizing: border-box;
  background: radial-gradient(circle at 50% 40%, #E9F4EF 0%, #DCEEE6 55%, #CDE7DB 100%);
}
.prod-detail__photo img { width: 100%; height: 100%; object-fit: contain; }
.prod-detail__price { display: block; font-size: clamp(26px, 2.2vw, 36px); font-weight: 800; color: var(--c-teal-dark); margin: .3em 0 .5em; }
.prod-detail__specs { margin-top: 1em; border-top: 1px solid var(--c-rule); padding-top: 1em; }
.prod-detail__specs li { display: flex; gap: 8px; font-size: var(--fs-small); line-height: 1.6; }
.prod-detail__specs li strong { min-width: 130px; flex: none; color: var(--c-text); }
.prod-detail .btn-whatsapp { margin-top: 1.2em; align-self: flex-start; min-width: 260px; padding: 14px 26px; font-size: 15px; }

/* entrada em cascata dos cards de produto */
.js .shop-card.reveal { transform: translateY(46px) scale(.92); transition-duration: .7s; }
.js .shop-card.reveal.is-visible { transform: none; }
.shop__grid .reveal:nth-child(1) { transition-delay: 0s; }
.shop__grid .reveal:nth-child(2) { transition-delay: .13s; }
.shop__grid .reveal:nth-child(3) { transition-delay: .26s; }
.shop__grid .reveal:nth-child(4) { transition-delay: .39s; }

@media (max-width: 900px) {
  .shop__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .shop__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .shop-card__body { padding: 12px; gap: .3em; }
  .shop-card__actions { gap: 8px; }
  .btn-whatsapp { padding: 10px 8px; font-size: 12.5px; }
  .shop-card__more { font-size: 13px; }
}

/* =========================================================
   BOTÃO VOLTAR AO TOPO
   ========================================================= */
.back-to-top {
  position: fixed; left: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-teal-dark); color: var(--c-white);
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, filter .2s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { filter: brightness(1.1); transform: translateY(-2px); }
.back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .back-to-top { left: 14px; bottom: 92px; width: 48px; height: 48px; }
  .back-to-top svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity .25s ease, visibility .25s ease; transform: none; }
}

/* =========================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   ========================================================= */
.whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 95;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  animation: wa-pulse 2.4s ease-in-out infinite;
  transition: filter .2s ease;
}
.whatsapp-float::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: #25D366;
  animation: wa-ring 2.4s ease-out infinite;
}
.whatsapp-float:hover { filter: brightness(1.06); }
.whatsapp-float svg { width: 30px; height: 30px; }
@keyframes wa-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
@keyframes wa-ring {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 560px) {
  .whatsapp-float { right: 14px; bottom: 168px; width: 56px; height: 56px; }
  .whatsapp-float svg { width: 29px; height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float, .whatsapp-float::before { animation: none; }
}