/* ARQUIVO GERADO por build.cjs. Não edite aqui: edite css/src/ e rode `node build.cjs`. */
/* =========================================================
   TOKENS — a única fonte de cor, medida e grid.
   Mexeu aqui, mexeu no site inteiro.
   ========================================================= */
:root {
  /* ---- Cor ---- */
  --navy-hero: #042848;
  --navy-800: #032c56;
  --navy-900: #022546;
  --blue: #005CB9;        /* Pantone 300C — cor de ação (manual, pág. 14) */
  --blue-hover: #004A95;  /* azul-700 do guia web */
  --blue-link: #005CB9;
  --blue-ink: #0b2f5e;
  --sky: #2a9bd8;
  --mint: #90D5AC;        /* Pantone 345C — decorativa, nunca texto sobre branco */
  --green: #6cbf95;
  --green-acao: #1F7A48;  /* verde escurecido do 345C, para botao com texto branco */
  --green-texto: #1F6B45; /* verde ACESSÍVEL p/ texto sobre branco (guia, p.90 — 6,4:1) */
  --teal: #3aa88c;

  --ink: #1f2a37;
  --slate: #3f4a58;
  --muted: #55616f;

  --bg: #ffffff;
  --bg-soft: #f7f9fb;
  --line: #e2e8ef;
  --line-strong: #c9d6e4;
  --field: #d6dee8;

  /* ---- Escala de título ----
     Uma só escala para o site inteiro. Antes cada bloco escolhia o seu
     tamanho e a h2 da home chegava a 58px, maior que a h1 de 48px.
     Quem aplica isso no CSS todo é tools/padroniza-titulos.cjs.

     t1  h1 de banner ........................ 48px
     t2  título de seção ..................... 40px
     t2b título de subseção .................. 28px
     t3  título de bloco / card grande ....... 23px
     t4  título de card pequeno .............. 18px

     Caixa alta é só para RÓTULO (o kicker acima do título, a data de
     notícia, o tipo do arquivo). Título nenhum entra em caixa alta.   */
  --t1:  clamp(33px, 3.35vw, 48px);
  --t2:  clamp(27px, 2.8vw, 40px);
  --t2b: clamp(22px, 2.1vw, 28px);
  --t3:  clamp(19px, 1.7vw, 23px);
  --t4:  18px;
  --titulo: var(--blue-ink);   /* cor única de título sobre fundo claro */
  --titulo-ls: -0.02em;

  --rotulo: 13px;              /* kicker / rótulo, sempre em caixa alta */
  --rotulo-ls: 0.14em;

  /* ---- Grid: 12 colunas ----
     Largura máxima da página .............. 1440
     Margem lateral (respiro da borda) ..... 72   -> some fluido abaixo de 1440
     Faixa de conteúdo ..................... 1296 (1440 - 72 - 72)
     Coluna ................................ 86
     Calha entre colunas ................... 24

     As larguras abaixo estão em % da faixa de conteúdo, então a grade
     encolhe junto com a tela sem precisar de media query.
     w4 = 32.09% de 1296 = 416px, e assim por diante.            */
  --pagina: 1440px;
  --vw: 100vw;   /* largura util real; o app.js corrige pela barra de rolagem */
  /* distancia da borda do conteudo ate a borda da pagina, para blocos que sangram */
  --sangra: calc(var(--margem) + max(0px, (var(--vw) - var(--pagina)) / 2));
  --margem: clamp(20px, 5vw, 72px);
  --calha: 1.8519%;

  --w1:   6.6358%;
  --w2:  15.1235%;
  --w3:  23.6111%;
  --w4:  32.0988%;
  --w5:  40.5864%;
  --w6:  49.0741%;
  --w7:  57.5617%;
  --w8:  66.0494%;
  --w9:  74.5370%;
  --w10: 83.0247%;
  --w11: 91.5123%;
  --w12: 100%;

  /* ---- Outros ---- */
  /* ---- Raio de canto ----
     Uma regra só, para o site não ter cada bloco de um jeito (eram
     8, 10, 12, 16, 18, 24 e um clamp espalhados pelo CSS):

       FOTO NÃO TEM CANTO ARREDONDADO.
       Interface tem --radius. Campo e chip em cápsula têm --radius-pill.

     Foto arredondada com sombra suave em tudo é a assinatura de
     template pronto. Sem raio, a foto vira imagem editorial e o raio
     passa a significar "isto é um controle".                           */
  --radius: 0;
  --radius-lg: 0;       /* painel com respiro interno: card de busca, lightbox */
  --radius-pill: 999px;
  --shadow-card: 0 6px 22px rgba(11, 47, 94, 0.07);
}

/* =========================================================
   FONTES — Prompt auto-hospedada (sem depender do Google)
   Arquivos em assets/fonts/, subsets latin + latin-ext.
   ========================================================= */
@font-face {
  font-family: Prompt;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/prompt-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Prompt;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/prompt-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Prompt;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/prompt-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Prompt;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/prompt-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Prompt;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/prompt-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Prompt;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/prompt-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Prompt;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/prompt-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Prompt;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/prompt-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Prompt;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/prompt-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Prompt;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/prompt-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   BASE — reset, tipografia e acessibilidade
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: Prompt, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  background-color: #fff;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* height:auto é obrigatório junto com os atributos width/height dos <img>:
   sem ele o atributo height vence e o aspect-ratio do CSS é ignorado. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue-link); }
button, input { font: inherit; }
a, button, input, select, textarea { touch-action: manipulation; }
::selection { background: var(--blue); color: #fff; }
:root { accent-color: var(--blue); }
input, textarea { caret-color: var(--blue); }
p { text-wrap: pretty; }

/* âncoras não somem atrás do header fixo */
[id] { scroll-margin-top: 110px; }
@media (max-width: 1024px) {
  [id] { scroll-margin-top: 92px; }
}

.sr-only {
  position: absolute; 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: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: #fff; padding: 12px 20px;
}
.skip:focus { left: 0; color: #fff; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}

/* =========================================================
   GRID — 12 colunas
   ---------------------------------------------------------
   .wrap   faixa de conteúdo centralizada (máx. 1296px úteis)
   .grid   12 colunas dentro de um .wrap
   .col-N  ocupa N colunas
   .w-N    limita a largura de um texto a N colunas

   Para VER a grade na tela: aperte G, ou abra com ?grid
   ========================================================= */

.wrap {
  width: 100%;
  max-width: var(--pagina);
  margin-inline: auto;
  padding-inline: max(var(--margem), env(safe-area-inset-left)) max(var(--margem), env(safe-area-inset-right));
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--calha);
}

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

.w-3  { max-width: var(--w3); }
.w-4  { max-width: var(--w4); }
.w-5  { max-width: var(--w5); }
.w-6  { max-width: var(--w6); }
.w-7  { max-width: var(--w7); }
.w-8  { max-width: var(--w8); }

/* Em tela estreita a calha em % fica fina demais. */
@media (max-width: 900px) {
  .grid { column-gap: 16px; }
}

/* ---------- Régua visual (só em desenvolvimento) ---------- */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: none;
}
body.mostra-grid .grid-overlay { display: block; }

.grid-overlay__wrap {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--calha);
}
.grid-overlay__col { background: rgba(226, 62, 62, 0.12); }

.grid-overlay__info {
  position: fixed;
  right: 12px;
  bottom: 12px;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: rgba(2, 37, 70, 0.92);
  color: #fff;
  font: 400 12px/1.5 Prompt, sans-serif;
  letter-spacing: .02em;
}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: .06s; }

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); color: #fff; box-shadow: 0 8px 30px rgba(0,92,185,.18); }

.btn--ghost { border: 1px solid rgba(255,255,255,.65); color: #fff; font-weight: 300; }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn--outline { background: #fff; border: 1px solid var(--line-strong); color: var(--blue); }
.btn--outline:hover { border-color: var(--blue); color: var(--blue); }

.btn--white { background: #fff; color: var(--blue); }
.btn--white:hover { background: #eef4fc; color: var(--blue); }

/* =========================================================
   ONDAS — transições entre seções (SVG inline no HTML)
   Sempre full-bleed: não seguem o grid, sangram de borda a borda.
   ========================================================= */
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  pointer-events: none;
}

/* Onda canônica dos heros (blocos/comuns/onda-hero.html, gerada por
   tools/onda.cjs a partir da home aprovada — caixa de 1440 x 250).
   A altura 17.361vw mantém a proporção exata do desenho.
   O preenchimento abaixo da fita usa currentColor: a cor define o fundo
   da PRÓXIMA seção (branco por padrão; bg-soft quando a seção seguinte
   é cinza-clara). */
.wave--hero {
  bottom: -1px;
  height: clamp(120px, 17.361vw, 250px);
  z-index: 8;
  color: #ffffff;
}
.hero .wave--hero,
body[data-pagina="coleta"] .hero-int .wave--hero { color: var(--bg-soft); }

.wave--bottom { bottom: -1px; z-index: 8; }
.wave--cross  { top: 41%; height: 140px; z-index: 7; opacity: .76; }

.etapas       .wave--bottom { height: clamp(56px, 7.6vw, 110px); }
.pessoas      .wave--bottom { height: clamp(80px, 11.8vw, 170px); }
.transparencia .wave--bottom { height: clamp(70px, 9.7vw, 140px); }

@media (max-width: 1024px) {
  .wave--cross { display: none; }
}

/* =========================================================
   REVEAL — entrada suave no scroll (ligado pelo js/app.js)
   + ENTRADA — coreografia de carregamento dos heros
   ========================================================= */
@keyframes entradaSobe {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entradaFoto {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}

.hero__title, .hero-int__title { animation: entradaSobe .7s cubic-bezier(.2,.7,.3,1) backwards; }
.hero__lead,  .hero-int__lead  { animation: entradaSobe .7s cubic-bezier(.2,.7,.3,1) .12s backwards; }
.hero__ctas,  .hero-int__ctas  { animation: entradaSobe .7s cubic-bezier(.2,.7,.3,1) .22s backwards; }
.hero .stats                   { animation: entradaSobe .7s cubic-bezier(.2,.7,.3,1) .34s backwards; }
.hero__media img, .hero-int__media img { animation: entradaFoto 1.1s ease-out backwards; }

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  .hero__title, .hero-int__title, .hero__lead, .hero-int__lead,
  .hero__ctas, .hero-int__ctas, .hero .stats,
  .hero__media img, .hero-int__media img { animation: none; }
}

/* =========================================================
   TRILHA (breadcrumb) — dentro do hero interno, acima do título.
   Tipografia pequena, cor branca translúcida no fundo escuro.
   ========================================================= */
.trilha {
  margin-bottom: clamp(14px, 1.4vw, 20px);
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}
.trilha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trilha li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trilha li + li::before {
  content: "/";
  color: rgba(255, 255, 255, .35);
  font-weight: 300;
}
.trilha a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}
.trilha a:hover { color: #fff; }
.trilha [aria-current="page"] { color: #fff; font-weight: 500; }

/* =========================================================
   HEADER
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.header.is-stuck { box-shadow: 0 4px 20px rgba(11,47,94,.08); border-color: var(--line); }

.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  height: 94px;
}
.header__logo img { width: clamp(140px, 12vw, 172px); height: auto; }

.nav {
  margin-left: clamp(12px, 2.6vw, 40px);
  font-size: 14px;
  font-weight: 400;
  color: var(--slate);
}
.nav__item > a,
.nav__item > span { position: relative; padding: 6px 0; }
.nav__item > a { cursor: pointer; }
.nav__item > span { cursor: default; }
.nav__item > a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--teal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav__item > a:hover::after,
.nav__item > a.is-active::after { transform: scaleX(1); }

.header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
}
.header__search {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 400; color: var(--slate);
}
.header__game {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding-inline: 18px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(0,92,185,.25);
  border-radius: var(--radius);
  color: var(--blue);
  background: transparent;
  transition: background .15s, border-color .15s;
}
.header__game-ico { flex-shrink: 0; }
.header__game:hover { background: rgba(0,92,185,.06); border-color: var(--blue); color: var(--blue); }
.header__cta {
  font-size: 14px; font-weight: 500; min-height: 42px;
  padding-inline: 18px;
  animation: ctaPulse 3s ease-in-out 2s infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,92,185,.35); }
  50%      { box-shadow: 0 0 0 7px rgba(0,92,185,0); }
}

.burger {
  display: none;
  width: 44px; height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px;
}
.burger span {
  display: block; height: 2px; width: 24px; margin-inline: auto;
  background: var(--blue-ink); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .header__inner { height: 76px; }
  .nav__lista { white-space: normal; }
  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px var(--margem) 24px;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(11,47,94,.10);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__item > a::after { display: none; }
  .burger { display: flex; }
  .header__search span { display: none; }
  .header__game { display: none; }
  .header__cta { min-width: 0; padding-inline: 18px; }
}

/* =========================================================
   SUBMENU — dropdown do menu principal
   Desktop: abre no hover e no foco de teclado.
   Mobile:  vira acordeão dentro do menu sanduíche.
   ========================================================= */
.nav__lista {
  display: flex;
  gap: clamp(10px, 1.5vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.nav__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--slate);
  cursor: pointer;
}
.nav__seta svg { width: 9px; height: auto; transition: transform .25s ease; }
.nav__item.is-open > .nav__seta svg { transform: rotate(180deg); }

/* ---------- painel ---------- */
.submenu {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 30;
  min-width: 258px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(11, 47, 94, .13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* faixa da marca no topo do painel */
.submenu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--blue) 0%, var(--sky) 55%, var(--mint) 100%);
}
/* ponte invisível: o mouse atravessa o vão sem fechar o painel */
.submenu::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}

.submenu li { margin: 0; }
.submenu a {
  display: block;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--slate);
  border-left: 3px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.submenu a:hover,
.submenu a:focus-visible {
  background: #eef4fb;
  color: var(--blue);
  border-left-color: var(--blue);
}

.submenu--duas { min-width: 480px; columns: 2; column-gap: 0; padding-block: 14px; }
.submenu--duas li { break-inside: avoid; }

.submenu__titulo {
  display: block;
  padding: 14px 24px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  pointer-events: none;
}
.submenu__titulo:first-child { padding-top: 6px; }

/* ---------- mega menu (Serviços) ---------- */
.megamenu {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  top: 94px;
  min-width: 0;
  width: min(1200px, calc(100vw - 40px));
  padding: 28px 32px 32px;
  columns: initial;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 36px;
}
.megamenu .mega__col { display: flex; flex-direction: column; }
.megamenu .mega__titulo {
  display: block;
  padding: 0 0 10px;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  border-bottom: 2px solid var(--mint);
  pointer-events: none;
}
.megamenu .mega__col + .mega__col .mega__titulo { margin-top: 0; }
.megamenu a {
  padding: 8px 0;
  border-left: 0;
  font-size: 14px;
}
.megamenu a:hover { border-left: 0; background: none; color: var(--blue); }

.megamenu .mega__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.megamenu .mega__card {
  display: block;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.megamenu .mega__card:hover { box-shadow: 0 6px 18px rgba(11,47,94,.1); }
.megamenu .mega__card img {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
}
.megamenu .mega__card span {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-ink);
  line-height: 1.3;
}

@media (min-width: 1025px) {
  .nav__item--sub:hover > .submenu,
  .nav__item--sub:focus-within > .submenu,
  .nav__item--sub.is-open > .submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__item--sub:hover > .megamenu,
  .nav__item--sub:focus-within > .megamenu,
  .nav__item--sub.is-open > .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%);
  }
}

/* =========================================================
   MOBILE — acordeão
   ========================================================= */
@media (max-width: 1024px) {
  .nav__lista { flex-direction: column; gap: 0; }

  .nav__item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }
  .nav__item > a { padding: 14px 0; font-size: 16px; }

  .nav__seta {
    width: 44px;
    height: 44px;
    color: var(--blue-ink);
  }
  .nav__seta svg { width: 12px; }

  .submenu {
    position: static;
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
    margin: 0 0 10px;
    padding: 4px 0 4px 14px;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    columns: 1;
  }
  .submenu::before, .submenu::after { display: none; }
  .nav__item.is-open > .submenu { display: block; }
  .submenu a { padding: 9px 12px; font-size: 15px; border-left: 0; }
  .submenu a:hover { background: transparent; }

  .megamenu {
    position: static;
    width: 100%;
    display: block;
    padding: 4px 0 4px 14px;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .megamenu .mega__col { margin-bottom: 8px; }
  .megamenu .mega__titulo { border-bottom: 0; padding: 8px 0 2px; }
  .megamenu .mega__cards { grid-template-columns: 1fr; gap: 6px; }
  .megamenu .mega__card { display: flex; align-items: center; gap: 10px; border: 0; }
  .megamenu .mega__card img { width: 48px; height: 36px; flex: none; }
  .megamenu .mega__card span { padding: 4px 0; }
  .megamenu a { padding: 6px 0; }
}

/* =========================================================
   HERO
   Um banner só (25/08/2026: o Rafael testou o rodízio de 2 banners e
   pediu para tirar, "não ficou bom"). A arte já traz o recorte verde/azul
   desenhado na base, então a home NÃO usa a onda SVG e NÃO usa véu nem
   filtro: a arte entra limpa, o título é azul-marinho.

   Arte: assets/hero.webp (a Ponte Estaiada, 1888x814 já recortada, sem a
   faixa branca da base do PNG original — o corte foi feito na conversão,
   original em assets/originais/).

   min-height = 41vw é o ponto calibrado a olho: mostra a arte inteira e
   corta só um pouco de céu no topo (object-position: bottom), sem cortar
   o recorte da base nem sobrar tira branca embaixo.

   Se trocar a arte: 1) achar o novo % de desenho (varrer linhas de baixo
   para cima até a primeira 100% branca), 2) recortar o arquivo até essa
   linha com sharp (não deixar o CSS lidar com a margem branca).

   Duas colunas: texto + selos à esquerda, busca de coleta à direita.
   ========================================================= */
.hero {
  position: relative;
  background: #fff;
  overflow: hidden;
  min-height: clamp(460px, calc(var(--vw, 100vw) * 0.41), 750px);
  display: flex;
  align-items: flex-start;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.hero__inner {
  position: relative;
  z-index: 6;
  align-items: start;
  row-gap: 22px;
  padding-top: clamp(44px, 4.8vw, 70px);
  padding-bottom: clamp(30px, 3vw, 44px);
}

.hero__copy { grid-column: 1 / span 6; }

.hero__title {
  font-size: var(--t1);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
/* Testado em verde (--mint, igual ao "Ouvidoria CTL") e revertido pelo
   Rafael no mesmo dia (25/08/2026). Também testado em --blue (ação):
   ficava um segundo azul diferente do resto do título, o que o Rafael
   notou e não quis — "ponta a ponta" usa o MESMO --titulo do resto,
   sem destaque de cor nenhum. */
.hero__title em { font-style: normal; color: inherit; }
/* cada linha do título sobe de dentro da própria caixa, ao carregar
   a página (é o primeiro conteúdo visto, não precisa esperar scroll). */
.hero__title .linha { display: block; overflow: hidden; }
.hero__title .linha > span {
  display: block;
  animation: heroSobe .9s cubic-bezier(.19,1,.22,1) backwards;
}
.hero__title .linha:nth-child(2) > span { animation-delay: .09s; }
@keyframes heroSobe {
  from { transform: translateY(105%); }
  to   { transform: none; }
}

.hero__lead {
  max-width: 30rem;
  margin-top: 24px;
  font-size: 17px;
  line-height: 26px;
  color: var(--slate);
}

/* ---------- selos ---------- */
.selos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin-top: clamp(10px, 1.4vw, 18px);
  list-style: none;
}
.selos__item + .selos__item {
  padding-left: 30px;
  border-left: 1px solid rgba(4,40,72,.18);
}
.selo {
  display: block;
  width: auto;
}
.selo--sp    { height: 50px; }
.selo--pacto { height: 60px; }
.selo--iso   { height: 40px; }

/* ---------- busca de coleta ---------- */
.busca {
  grid-column: 9 / span 4;
  align-self: start;
  margin-top: clamp(16px, 2vw, 28px);
  padding: clamp(22px, 1.9vw, 27px) clamp(20px, 1.7vw, 24px) clamp(24px, 2vw, 28px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  background: var(--navy-800);
  box-shadow: 0 24px 60px rgba(2,18,36,.38);
}

.busca__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--rotulo);
  font-weight: 600;
  letter-spacing: var(--rotulo-ls);
  text-transform: uppercase;
  color: var(--mint);
}
.busca__kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
}

.busca__titulo {
  margin-top: 13px;
  font-size: var(--t3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: #fff;
}

.busca__campo {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: clamp(18px, 1.6vw, 22px);
  padding: 5px 5px 5px 20px;
  border-radius: 999px;
  background: #fff;
}
.busca__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.busca__input::placeholder { color: #8b9099; font-style: italic; }
.busca__input:focus { outline: 0; }
.busca__campo:focus-within { box-shadow: 0 0 0 3px rgba(144,213,172,.55); }

.busca__botao {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--green-acao);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.busca__botao:hover { background: #16603a; transform: translateX(2px); }
.busca__botao:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- telas menores ---------- */
@media (max-width: 1180px) {
  .hero__copy { grid-column: 1 / span 7; }
  .busca      { grid-column: 8 / span 5; }
}

@media (max-width: 1024px) {
  .hero { min-height: 0; }
  .hero__inner { padding-bottom: clamp(150px, 22vw, 230px); }
  .hero__copy, .busca { grid-column: 1 / span 12; }
  .hero__lead { max-width: 34rem; }
  .hero__title br { display: none; }
  .busca { align-self: start; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title .linha > span { animation: none; }
}

@media (max-width: 700px) {
  .hero__title, .hero__lead { max-width: none; }
  .selos { gap: 12px 20px; }
  .selos__item + .selos__item { padding-left: 20px; }
  .selo--sp { height: 34px; }
  .selo--pacto { height: 40px; }
  .selo--iso { height: 28px; }
  .busca__campo { padding-left: 18px; }
  .busca__botao { width: 42px; height: 42px; }
}

/* =========================================================
   SÃO PAULO CONTA COM A ECOURBIS
   Bloco logo abaixo do hero: texto em 5 colunas, vídeo em 6.
   O vídeo fica dentro da grade, não sangra até a borda.
   O trecho em loop (institucional.mp4) roda mudo no fundo; o
   play abre o vídeo completo do YouTube num lightbox.
   Atrás do vídeo passa o grafismo da marca, em opacidade baixa:
   respira sozinho no CSS e desliza no scroll pelo --gx/--gy que o
   efeitos.js escreve. Com movimento reduzido ele só fica parado.
   ========================================================= */
.sp {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding-block: clamp(48px, 5vw, 76px);
}
.sp > .wrap { position: relative; z-index: 1; }

/* ---------- pontinhos atrás do vídeo (25/08/2026) ----------
   Substituiu o grafismo em imagem: o Rafael mandou referência com um
   quadriculado de pontos encostado na borda direita do vídeo, não a
   marca d'água que tínhamos. É só decoração (`aria-hidden`), sem JS. */
.sp__pontos {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -1%;
  width: clamp(120px, 11vw, 168px);
  height: clamp(190px, 18vw, 270px);
  transform: translateY(-50%);
  pointer-events: none;
  background-image: radial-gradient(rgba(31,107,69,.24) 1.6px, transparent 1.6px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(circle at 30% 50%, #000 0%, transparent 72%);
          mask-image: radial-gradient(circle at 30% 50%, #000 0%, transparent 72%);
}

.sp__grid {
  align-items: center;
  row-gap: 40px;
}

.sp__copy { grid-column: 1 / span 5; }

.sp__titulo {
  font-size: var(--t2);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}

.sp__texto {
  max-width: 28rem;
  margin-top: clamp(18px, 2.2vw, 26px);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--slate);
}

/* ---------- marcas da operação ---------- */
.marcas {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6vw, 38px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
.marca {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.marca__chip {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(56px, 4.8vw, 68px);
  height: clamp(56px, 4.8vw, 68px);
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: clamp(14.5px, 1.2vw, 17px);
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(0,92,185,.30);
}
.marca__chip::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(0,92,185,.45);
  opacity: 0;
  animation: marcaPing 3.4s ease-out infinite;
}
.marca:nth-child(2) .marca__chip::after { animation-delay: 1.7s; }
.marca__chip svg { animation: marcaBob 3.4s ease-in-out infinite; }

@keyframes marcaPing {
  0%   { opacity: .9; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.38); }
  100% { opacity: 0;  transform: scale(1.38); }
}
@keyframes marcaBob {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(2px); }
}

.marca__texto {
  font-size: clamp(14.5px, 1.2vw, 17.5px);
  line-height: 1.35;
  font-weight: 600;
  color: #41597a;
}

/* fio pontilhado desenhado pelo js, ligando a base dos dois círculos */
.marcas__fio {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
.marcas__fio path {
  fill: none;
  stroke: url(#fioMarcas);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  opacity: .8;
  animation: fioAnda 1.6s linear infinite;
}
@keyframes fioAnda { to { stroke-dashoffset: -24; } }

/* ---------- vídeo ---------- */
.sp__video-bloco { grid-column: 7 / span 6; margin: 0; }
.vsl {
  position: relative;
  aspect-ratio: 16 / 8.6;
  overflow: hidden;
  background: var(--navy-900);
  box-shadow: 0 18px 40px rgba(3,26,54,.18);
  isolation: isolate;
}
.sp__video-legenda {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.vsl__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vsl__loop {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity .9s ease;
}
.vsl.rodando .vsl__loop { opacity: 1; }
.vsl__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.vsl__capa {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.vsl__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(4,22,46,.26) 0%,
    rgba(4,22,46,.04) 38%,
    rgba(3,20,44,.40) 76%,
    rgba(2,16,38,.70) 100%);
}
.vsl__botao {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(62px, 6.4vw, 88px);
  height: clamp(62px, 6.4vw, 88px);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: var(--blue);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  transition: transform .22s ease, background .22s ease;
}
.vsl__botao svg { margin-left: 5px; }
.vsl__botao::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  animation: vslPulso 2.1s ease-out infinite;
}
@keyframes vslPulso {
  0%   { opacity: .85; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.24); }
  100% { opacity: 0;   transform: scale(1.24); }
}
.vsl__capa:hover .vsl__botao { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.vsl__capa:focus-visible { outline: 3px solid var(--mint); outline-offset: -6px; }

/* ---------- lightbox do vídeo completo ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(2,14,30,.86);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.lb.aberto { opacity: 1; visibility: visible; }
.lb__caixa { position: relative; width: min(1100px, 100%); }
.lb__midia { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.lb__midia iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lb__fechar {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lb__fechar:hover { background: rgba(255,255,255,.26); }

@media (prefers-reduced-motion: reduce) {
  .marca__chip::after, .marca__chip svg, .marcas__fio path,
  .vsl__botao::before, .sp__grafismo img { animation: none; }
}

@media (max-width: 1024px) {
  .sp__copy, .sp__video-bloco { grid-column: 1 / span 12; }
  .sp__grafismo { top: auto; bottom: -4%; right: -20%; width: 100%; transform: none; }
  .sp__grafismo img { opacity: .18; }
  .sp__titulo br { display: none; }
  .sp__texto { max-width: 36rem; }
}

@media (max-width: 700px) {
  .marcas { gap: 18px 24px; }
  .marca__texto br { display: none; }
}

/* =========================================================
   BIG NUMBERS (4) — dentro do bloco São Paulo conta com a Ecourbis
   Refeito em 25/08/2026 para bater com uma referência do Rafael: caixa
   com borda ao redor da fileira inteira, divisor vertical entre os itens,
   e ícone em anel fino (não mais círculo preenchido) ao lado do número,
   não empilhado acima dele.

   O ícone e o número usam o MESMO `--mint` (#90D5AC): a referência trazia
   um verde só, e como aqui o ícone virou traço fino sobre um anel
   TRANSPARENTE (não mais sobre `--bg-soft`), o problema de contraste que
   fazia o traço sumir não existe mais — o fundo agora é branco puro por
   trás de um contorno, então mint já não "some" como sumia dentro de um
   disco quase-branco. Ainda é decorativo, dentro da regra do guia.

   4º dado é "22 anos" (2026 − fundação em out/2004): o Rafael pediu
   "+30 anos" igual à referência, mas a Ecourbis foi fundada em 2004,
   então hoje são 22, não 30. O rótulo mudou pra "anos" pra bater com o
   estilo da referência; o número ficou o real (mesma fonte de quem-somos).

   25/08/2026, 2ª rodada: a 1ª versão tinha uma caixa com borda ao redor
   de tudo e divisor vertical entre os itens — nenhum dos dois existe na
   referência do Rafael, que só tem UMA linha fina por cima da fileira
   inteira. Tirado os dois, sem inventar de novo.
   ========================================================= */
.bignum2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--calha);
  margin-top: clamp(48px, 5.4vw, 76px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
  list-style: none;
}
.bignum2__item { padding-inline: clamp(0px, 1vw, 14px); }
.bignum2__item:first-child { padding-left: 0; }

.bignum2__cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bignum2__ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--mint);
  border-radius: 50%;
  background: none;
  color: var(--mint);
}

.bignum2__num {
  font-variant-numeric: tabular-nums;
  font-size: clamp(32px, 3.2vw, 42px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--mint);
}
.bignum2__num em {
  font-size: .42em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--titulo);
}

.bignum2__texto {
  max-width: 15.5rem;
  margin-top: clamp(10px, 1.2vw, 16px);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 900px) {
  .bignum2 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .bignum2__item { padding-left: 0; }
  .bignum2__texto { max-width: none; }
}

/* =========================================================
   ETAPAS — as 5 fases da operação
   ---------------------------------------------------------
   EXCEÇÃO ao grid de 12: 5 cards não cabem em 12 colunas.
   A faixa usa 5 trilhas iguais, com as bordas externas
   alinhadas ao grid. É o único bloco fora das 12 colunas.
   ========================================================= */
.etapas {
  position: relative;
  background: var(--bg-soft);
  overflow: hidden;
  padding-top: clamp(26px, 2.8vw, 40px);
  padding-bottom: clamp(36px, 3vw, 42px);
}

.section-head { text-align: center; }
.section-head__title {
  text-wrap: balance;
  font-size: var(--t2);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.section-head__sub {
  max-width: 62ch;
  margin: 12px auto 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

.steps {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 26px;
}

/* a home mostra os quatro serviços da apresentação; a página Coleta segue com cinco */
.etapas--quatro .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.step {
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: var(--shadow-card);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  overflow: hidden;
}
.step__media { aspect-ratio: 262 / 300; overflow: hidden; }
.step__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.step:hover .step__media img { transform: scale(1.05); }

.step__body { padding: 18px 22px 20px 30px; }
.step__num {
  display: block;
  font-size: 34px;
  line-height: 1;
  font-weight: 600;
  color: var(--blue);
}
.step__name {
  margin-top: 8px;
  font-size: var(--t3);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.step__text {
  margin-top: 12px;
  font-size: 15px;
  line-height: 26px;
  color: var(--muted);
}

.etapas__cta {
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
.etapas__cta .btn { min-width: 316px; }

@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .step { clip-path: none; border-radius: var(--radius); }
}

@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; }
  .etapas__cta .btn { min-width: 0; width: 100%; }
}

/* =========================================================
   FITA DE ETAPAS  (home, "Do seu portão ao destino final")
   Porte do carrossel de programas do PulseFitHero (21st.dev), que é
   React + Tailwind + framer-motion. Aqui não existe React, então o
   `animate={{ x: [...] }}` virou keyframe de CSS e as classes do
   Tailwind viraram este arquivo. Não precisa de JS.

   A pista tem os 4 cartões DUPLICADOS e anda até -50%: no quadro em
   que a cópia chega ao lugar do original, o loop reinicia sem salto.
   ========================================================= */
.fita {
  position: relative;
  width: 100%;
  margin-top: clamp(10px, 1.2vw, 20px);
  padding-block: 26px;
  overflow: hidden;
}

/* as pontas somem no branco, para o corte não parecer defeito */
.fita::before,
.fita::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: clamp(60px, 10vw, 150px);
  pointer-events: none;
}
.fita::before { left: 0;  background: linear-gradient(90deg, var(--bg-soft) 0%, rgba(247,249,251,0) 100%); }
.fita::after  { right: 0; background: linear-gradient(270deg, var(--bg-soft) 0%, rgba(247,249,251,0) 100%); }

.fita__pista {
  display: flex;
  align-items: center;
  width: max-content;
  animation: fitaAnda 40s linear infinite;
}
@keyframes fitaAnda {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* o respiro entre cartões é margin-right, não gap. Com gap, metade da
   pista mede 4 cartões + 3,5 vãos, e o -50% erra o encaixe por 12px:
   dá um solavanco a cada volta. Com margin em todos, metade mede
   exatamente 4 x (cartão + vão). */

.fita:hover .fita__pista { animation-play-state: paused; }

/* quando o Rafael clica numa seta, o JS marca `.no-manual`.
   O CSS para a animação e passa a respeitar o transform inline. */
.fita.no-manual .fita__pista {
  animation: none;
  transition: transform .6s cubic-bezier(.22,.9,.26,1);
}

/* ---------- setas de navegação ---------- */
.fita__seta {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(11,47,94,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: var(--titulo);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(3,26,54,.12);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.fita__seta:hover { background: #fff; border-color: var(--blue); transform: translateY(-50%) scale(1.05); }
.fita__seta:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.fita__seta--ant  { left: clamp(14px, 2vw, 32px); }
.fita__seta--prox { right: clamp(14px, 2vw, 32px); }

/* ---------- cartão ---------- */
.prog {
  position: relative;
  flex: 0 0 auto;
  width: clamp(260px, 24vw, 356px);
  aspect-ratio: 356 / 408;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(3,26,54,.14);
  margin-right: 24px;
  transition: transform .3s cubic-bezier(.22,.9,.26,1), box-shadow .3s ease;
}
.prog__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.prog__link:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.prog:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 22px 54px rgba(3,26,54,.24);
}

.prog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prog__link::after {
  content: "";
  position: absolute;
  inset: 0;
  /* a leitura sobre foto era fraca: o degradê agora fecha bem mais cedo
     e bem mais escuro, e o texto ainda ganha um desfoque atrás. */
  background: linear-gradient(180deg,
    rgba(2,16,34,0) 0%,
    rgba(2,16,34,.30) 34%,
    rgba(2,16,34,.78) 62%,
    rgba(2,16,34,.95) 100%);
}

.prog__texto {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  padding: clamp(20px, 1.8vw, 26px);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%);
          mask-image: linear-gradient(180deg, transparent 0, #000 34%);
}
.prog__cat {
  display: block;
  font-size: var(--rotulo);
  font-weight: 600;
  letter-spacing: var(--rotulo-ls);
  text-transform: uppercase;
  color: var(--mint);
}
.prog__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: var(--t3);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: #fff;
}
.prog__seta {
  flex: 0 0 auto;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .28s ease, transform .28s ease;
}
.prog:hover .prog__seta,
.prog__link:focus-visible .prog__seta { opacity: 1; transform: none; }

.prog__desc {
  margin-top: 10px;
  font-size: 15px;
  line-height: 22px;
  color: rgba(255,255,255,.92);
}

/* ---------- movimento reduzido: vira rolagem manual ---------- */
@media (prefers-reduced-motion: reduce) {
  .fita { overflow-x: auto; }
  .fita__pista { animation: none; }
  .prog, .prog__seta { transition: none; }
  .prog:hover { transform: none; }
  .prog__seta { opacity: 1; transform: none; }
}

/* =========================================================
   ECOPARQUES — reef de painéis
   Portado da home v1 (propostas/ecourbis, bloco .eco-reef).
   Quatro colunas sobre um fundo que cruza em fade; a coluna ativa
   (hover/foco) abre a descrição e o "Saiba mais".
   ========================================================= */
.ecoparques {
  position: relative;
  background: var(--navy-800);
  overflow: hidden;
  padding-block: clamp(48px, 5.4vw, 80px) 0;
}
/* 25/08/2026: título e texto de apoio viraram 2 colunas (o Rafael achou
   que o cabeçalho ficava desequilibrado, tudo empilhado numa faixa de
   640px e o resto da seção azul vazio ao lado). */
.ecoparques__head {
  align-items: center;
  column-gap: var(--calha);
  margin-bottom: clamp(28px, 3.2vw, 46px);
}
.ecoparques__title {
  grid-column: 1 / span 6;
  font-size: var(--t2);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: #fff;
}
.ecoparques__lead {
  grid-column: 8 / span 5;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255,255,255,.8);
}

@media (max-width: 900px) {
  .ecoparques__title, .ecoparques__lead { grid-column: 1 / span 12; }
  .ecoparques__lead { margin-top: 16px; }
}

/* ---------- reef ---------- */
.reef {
  position: relative;
  height: clamp(420px, 50vh, 560px);
  overflow: hidden;
  background: var(--navy-900);
}

.reef__fundos { position: absolute; inset: 0; }
.reef__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .8s ease, transform 7s ease;
}
.reef__fundo.is-ativo { opacity: 1; transform: scale(1.12); }
.reef__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(4,22,46,.42) 0%,
    rgba(4,22,46,.14) 28%,
    rgba(4,22,46,.60) 100%);
}

.reef__cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.reef__col {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.2vw, 36px);
  border-left: 1px solid rgba(255,255,255,.18);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}
.reef__col:first-child { border-left: 0; }
.reef__col:focus-visible { outline: 3px solid var(--mint); outline-offset: -3px; }

/* véu que escurece só a coluna ativa, para o texto ganhar contraste */
.reef__painel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  background: linear-gradient(180deg,
    rgba(6,26,52,.84) 0%,
    rgba(6,26,52,.40) 44%,
    rgba(6,26,52,.88) 100%);
}
.reef__col.is-ativo .reef__painel { opacity: 1; }

.reef__topo { position: relative; z-index: 1; }
.reef__title {
  font-size: var(--t3);
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 10px rgba(4,22,46,.45);
}
.reef__sub {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  font-style: italic;
  color: rgba(255,255,255,.82);
  text-shadow: 0 2px 14px rgba(4,22,46,.55);
}

/* a descrição desce empurrada para a base e só abre na coluna ativa */
.reef__desc {
  position: relative;
  z-index: 1;
  margin-top: auto;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .56s cubic-bezier(.22,.61,.36,1), opacity .42s ease;
}
.reef__col.is-ativo .reef__desc { max-height: 340px; opacity: 1; }
.reef__desc p {
  margin: 0;
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.6;
  color: #e7f0fa;
}
.reef__mais {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mint);
}

/* ---------- variante branca (novos-investimentos) ---------- */
body[data-pagina="novos-investimentos"] .ecoparques {
  background: #fff;
}
body[data-pagina="novos-investimentos"] .ecoparques__title {
  color: var(--titulo);
}
body[data-pagina="novos-investimentos"] .ecoparques__lead {
  color: var(--corpo);
}

/* ---------- telas menores: empilha, sem os fundos cruzando ---------- */
@media (max-width: 860px) {
  .reef { height: auto; }
  .reef__fundos { display: none; }
  .reef__cols { position: relative; grid-auto-flow: row; }
  .reef__col {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.16);
    min-height: 168px;
    background-size: cover;
    background-position: center;
  }
  .reef__col:first-child { border-top: 0; }
  .reef__col:nth-child(1) { background-image: url("../../assets/eco1.webp"); }
  .reef__col:nth-child(2) { background-image: url("../../assets/eco2.webp"); }
  .reef__col:nth-child(3) { background-image: url("../../assets/eco-utmb.webp"); }
  .reef__col:nth-child(4) { background-image: url("../../assets/eco-ure.webp"); }
  .reef__painel { opacity: 1; background: linear-gradient(180deg, rgba(6,26,52,.42) 0%, rgba(6,26,52,.88) 100%); }
  .reef__desc { max-height: none; opacity: 1; margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .reef__fundo { transition: opacity .3s ease; transform: none; }
  .reef__fundo.is-ativo { transform: none; }
}

/* =========================================================
   POR PESSOAS, PARA PESSOAS
   Texto em 4 colunas, retrato alto em 4 e duas fotos empilhadas
   nas 4 últimas. Cada foto carrega um selo de dado branco na base,
   que é o que dá layout ao bloco (antes era só um mosaico de fotos
   com o número escondido no meio do parágrafo).

   O retrato ocupa as duas linhas, então a coluna da direita fecha
   exatamente na mesma altura. Sem isso as fotos terminavam
   desalinhadas, que era o pior defeito da versão anterior.
   ========================================================= */
.pessoas {
  position: relative;
  background: var(--bg-soft);
  padding-block: clamp(56px, 6vw, 92px);
}
/* pontinhos discretos atrás do texto (25/08/2026, a pedido do Rafael:
   "textura no background"). Mesmo recurso do bloco São Paulo conta com
   a Ecourbis, só que sem máscara — aqui é canto, não precisa sumir. */
.pessoas::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: clamp(18px, 3vw, 40px);
  left: -1%;
  width: 168px;
  height: 168px;
  pointer-events: none;
  background-image: radial-gradient(rgba(31,107,69,.22) 1.6px, transparent 1.6px);
  background-size: 15px 15px;
}
.pessoas__grid { position: relative; z-index: 1; }

/* 25/08/2026: a altura das 3 fotos deixou de vir do `1fr 1fr` (calculado
   pelo grid a partir da proporção do retrato) e passou a ser uma conta
   explícita em `--foto-h`. Antes, mudar o `aspect-ratio` do retrato para
   deixar o bloco mais baixo bagunçava o cálculo do grid e o respiro entre
   as fotos sumia. Agora é só mudar `--foto-h` abaixo: o retrato usa o
   valor cheio, e cada foto da direita usa (--foto-h − o vão) ÷ 2 — os
   dois SEMPRE fecham na mesma altura, por conta, não por sorte do grid. */
.pessoas__grid {
  --foto-h: clamp(420px, 29vw, 540px);
  --foto-vao: 24px;
  grid-template-rows: none;
  row-gap: var(--foto-vao);
  align-items: start;
}

.pessoas__copy {
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
  align-self: center;
  padding-right: clamp(0px, 1.6vw, 24px);
}

.pessoas__title {
  font-size: var(--t2);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.pessoas__texto {
  margin-top: clamp(18px, 1.9vw, 26px);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--slate);
}
.pessoas__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 2.8vw, 38px);
}
.pessoas__ctas .btn { flex: 1 1 190px; justify-content: center; text-align: center; }

/* ---------- fotos ---------- */
.pessoas__foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--navy-900);
  box-shadow: 0 14px 40px rgba(3,26,54,.14);
}
.pessoas__foto img,
.pessoas__foto video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pessoas__retrato { grid-column: 5 / span 4; grid-row: 1 / span 2; height: var(--foto-h); }
.pessoas__topo    { grid-column: 9 / span 4; grid-row: 1; height: calc((var(--foto-h) - var(--foto-vao)) / 2); }
.pessoas__base    { grid-column: 9 / span 4; grid-row: 2; height: calc((var(--foto-h) - var(--foto-vao)) / 2); }

/* o vídeo tem legenda queimada na base. Ele é 16:9 num quadro 3:4, então o
   `cover` já corta pelos lados e não sobra folga vertical para reposicionar:
   a saída é ampliar um pouco e ancorar o zoom acima do meio, o que empurra a
   legenda para fora do quadro. */
.pessoas__video {
  transform: scale(1.2);
  transform-origin: center 30%;
}

/* ---------- telas menores ---------- */
@media (max-width: 1024px) {
  .pessoas__grid { grid-template-rows: none; }
  .pessoas__copy { grid-column: 1 / span 12; grid-row: auto; }
  /* abaixo de 1024px as fotos não dividem mais a mesma coluna espremida
     em duas linhas — cada uma tem sua própria proporção, então a altura
     explícita em px do desktop (--foto-h) sai da jogada. */
  .pessoas__retrato { grid-column: 1 / span 6; grid-row: auto; height: auto; aspect-ratio: 3 / 4; }
  .pessoas__topo,
  .pessoas__base { grid-column: 7 / span 6; grid-row: auto; height: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 700px) {
  .pessoas__retrato,
  .pessoas__topo,
  .pessoas__base { grid-column: 1 / span 12; }
  .pessoas__retrato { aspect-ratio: 4 / 5; }
  .pessoas__ctas .btn { width: 100%; }
}

/* =========================================================
   VIVEIRO ECOÍRIS — banner de destaque
   Copiado igual de ecourbis.vercel.app (bloco .eco-360, 25/08/2026): mesma
   foto, mesmas folhas, mesmo CSS. O corte "orgânico" não é SVG: é um
   ::after semicircular por cima da foto, na cor do fundo — bem mais
   simples do que parece.
   ========================================================= */
/* 25/08/2026: o Rafael achou o cartão "grudado" (pouco respiro) e o fundo
   "creme" (a seção não tinha cor própria, então herdava o branco puro
   colado direto no --bg-soft das vizinhas — a costura entre os dois
   brancos é o que lia como creme). Fundo branco explícito + mais
   padding-block resolve as duas coisas. Também mudou de lugar: era entre
   "Por pessoas" e Ecoparques, foi para antes de "O que aconteceu por
   aqui" (arquivo virou 04b, depois de 04-ecoparques). */
.viveirobanner {
  background: #fff;
  padding-block: clamp(40px, 4.4vw, 64px);
}

.viveirobanner__card {
  position: relative;
  display: grid;
  grid-template-columns: 43% 1fr;
  overflow: hidden;
  background: var(--blue);
  min-height: clamp(230px, 21vw, 320px);
}

.viveirobanner__foto { position: relative; overflow: hidden; }
.viveirobanner__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* o "corte orgânico": um semicírculo da cor do fundo, por cima da borda
   direita da foto — não precisa de SVG nem clip-path. */
.viveirobanner__foto::after {
  content: "";
  position: absolute;
  top: -6%;
  right: -2px;
  height: 112%;
  width: clamp(50px, 5vw, 86px);
  background: var(--blue);
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

.viveirobanner__body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 36px);
  padding: clamp(22px, 2.6vw, 38px) clamp(24px, 3vw, 48px);
}
.viveirobanner__selo { flex-shrink: 0; }
.viveirobanner__selo img {
  height: clamp(46px, 4.6vw, 66px);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .95;
}
.viveirobanner__divisor {
  width: 1px;
  align-self: stretch;
  flex-shrink: 0;
  background: rgba(255,255,255,.28);
}

.viveirobanner__num {
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}
.viveirobanner__num b { color: #a9e7c1; font-weight: 800; }

.viveirobanner__texto {
  max-width: 370px;
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  font-size: clamp(13px, 1vw, 15.5px);
  line-height: 1.6;
  color: rgba(255,255,255,.86);
}

/* ---------- folhas ---------- */
.viveirobanner__folha {
  position: absolute;
  z-index: 3;
  width: clamp(42px, 4.6vw, 82px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));
  transform-origin: 50% 20%;
}
.viveirobanner__folha--1 {
  right: clamp(-14px, -1vw, -6px);
  top: clamp(-16px, -1.4vw, -8px);
  animation: folhaBalanca1 5.5s ease-in-out infinite;
}
.viveirobanner__folha--2 {
  left: 39%;
  bottom: clamp(-16px, -1.4vw, -8px);
  animation: folhaBalanca2 6.5s ease-in-out infinite;
  animation-delay: -2s;
}
@keyframes folhaBalanca1 {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(7deg); }
}
@keyframes folhaBalanca2 {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .viveirobanner__folha { animation: none; }
}

@media (max-width: 860px) {
  .viveirobanner__card { grid-template-columns: minmax(0, 1fr); }
  .viveirobanner__foto { aspect-ratio: 16 / 9; }
  .viveirobanner__foto::after { display: none; }
  .viveirobanner__body { flex-direction: column; align-items: flex-start; }
  .viveirobanner__divisor { display: none; }
}

/* =========================================================
   NOTÍCIAS (home)
   Uma manchete grande em 6 colunas e três chamadas em lista nas
   outras 6. Todas as notícias são reais e apontam para a matéria
   na origem (Prefeitura, Band, RedeTV, Investe SP), as mesmas de
   noticias.html.

   As fotos são as que o cliente publica com cada matéria
   (`assets/prod/noticia-0N.webp`), na mesma ordem da página de
   notícias. As de dentro da lista vêm recortadas em círculo na
   origem, por isso a miniatura é redonda: em quadro retangular
   apareceriam os cantos vazios do recorte.
   ========================================================= */
.news {
  background: var(--bg-soft);
  padding-block: clamp(56px, 6vw, 90px);
}

.news__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.news__title {
  font-size: var(--t2);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.news__todas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 15px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}
.news__todas:hover { gap: 13px; color: var(--blue-hover); }

.news__grid {
  margin-top: clamp(28px, 3vw, 42px);
  row-gap: 40px;
  align-items: start;
}

/* ---------- manchete em destaque ---------- */
.news__destaque { grid-column: 1 / span 6; }

.news__capa {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy-900);
}
.news__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,.9,.26,1);
}
.news__destaque:hover .news__capa img { transform: scale(1.04); }

.news__ir {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--titulo);
  transition: transform .25s ease;
}
.news__destaque:hover .news__ir { transform: translate(3px, -3px); }

.news__data {
  margin-top: clamp(18px, 1.8vw, 24px);
  font-size: var(--rotulo);
  font-weight: 600;
  letter-spacing: var(--rotulo-ls);
  text-transform: uppercase;
  color: var(--muted);
}

.news__manchete {
  margin-top: 10px;
  font-size: var(--t3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.news__manchete a { color: inherit; text-decoration: none; }
.news__manchete a:hover { color: var(--blue); }
.news__manchete a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.news__manchete--menor { font-size: 17px; }

.news__fonte {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- lista ---------- */
.news__lista { grid-column: 8 / span 5; }

.news__item {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 20px;
  padding-block: clamp(18px, 1.9vw, 24px);
}
.news__item + .news__item { border-top: 1px solid var(--line); }
.news__item:first-child { padding-top: 0; }

.news__item .news__data { margin-top: 0; }

.news__miniatura {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: #e7edf4;
}
.news__miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.9,.26,1);
}
.news__item:hover .news__miniatura img { transform: scale(1.06); }

/* ---------- telas menores ---------- */
@media (max-width: 1024px) {
  .news__destaque { grid-column: 1 / span 12; }
  .news__lista    { grid-column: 1 / span 12; }
  .news__lista .news__item:first-child { padding-top: clamp(18px, 1.9vw, 24px); border-top: 1px solid var(--line); }
}

@media (max-width: 700px) {
  .news__item { grid-template-columns: 78px 1fr; gap: 14px; }
  .news__manchete--menor { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .news__capa img, .news__miniatura img, .news__ir { transition: none; }
}

/* =========================================================
   TRANSPARÊNCIA
   Grid: título e lista em 6 colunas, textos corridos em 4.
   A foto é full-bleed à direita, recortada em elipse.
   ========================================================= */
.transparencia {
  position: relative;
  z-index: 2;
  background: var(--navy-800);
  overflow: hidden;
  padding-block: clamp(40px, 4.2vw, 60px) clamp(64px, 5.4vw, 78px);
}

.transparencia__media {
  position: absolute;
  top: 0; right: 0;
  width: 61%;
  min-width: 520px;
  height: 92%;
  clip-path: ellipse(98% 200% at 100% 100%);
}
.transparencia__media img { width: 100%; height: 100%; object-fit: cover; }

.transparencia__inner { position: relative; z-index: 6; }

.transparencia__title {
  max-width: var(--w6);
  font-size: var(--t2);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: #fff;
}
.transparencia__lead {
  max-width: var(--w4);
  margin-top: 7px;
  font-size: 16px;
  line-height: 25px;
  color: rgba(255,255,255,.85);
}

.checks {
  max-width: var(--w6);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 15px;
}
.checks li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  color: rgba(255,255,255,.92);
}
.checks li::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.6' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.transparencia__nota {
  max-width: var(--w4);
  margin-top: 22px;
  font-size: 16px;
  line-height: 25px;
  color: rgba(255,255,255,.85);
}
.transparencia__inner .btn { margin-top: 15px; min-width: 240px; }

@media (max-width: 1024px) {
  .transparencia { padding-top: 0; }
  .transparencia__media {
    position: relative;
    width: auto; min-width: 0; height: auto;
    margin: 0 var(--margem) 32px;
    clip-path: none;
    border-radius: var(--radius);
    overflow: hidden;
  }
  .transparencia__media img { aspect-ratio: 16 / 9; }
  .transparencia__title, .checks { max-width: var(--w10); }
  .transparencia__lead, .transparencia__nota { max-width: var(--w7); }
}

@media (max-width: 700px) {
  .transparencia__title, .checks,
  .transparencia__lead, .transparencia__nota { max-width: none; }
  .transparencia__inner .btn { width: 100%; min-width: 0; }
}

/* =========================================================
   FAIXA DE TELEFONES
   Última seção antes do rodapé. Fundo marinho, rótulo em verde
   e o número grande, que é o que a pessoa vem buscar.
   ========================================================= */
.fones {
  background: var(--navy-hero);
  padding-block: clamp(34px, 3.6vw, 50px);
}
.fones__grid { row-gap: 30px; }

.fone { padding-inline: clamp(0px, 1.4vw, 22px); }
.fone:first-child { padding-left: 0; }
.fone + .fone { border-left: 1px solid rgba(255,255,255,.18); }

.fone__rotulo {
  font-size: var(--rotulo);
  font-weight: 600;
  letter-spacing: var(--rotulo-ls);
  text-transform: uppercase;
  color: var(--mint);
}
.fone__numero {
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 2.1vw, 29px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.fone__numero a { color: inherit; }
.fone__numero a:hover { color: var(--mint); }
.fone__nota {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255,255,255,.72);
}
.fone__link { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.fone__link:hover { color: #fff; }

@media (max-width: 900px) {
  .fone { grid-column: span 6; padding-inline: 0; }
  .fone + .fone { border-left: 0; }
  .fone:nth-child(even) { padding-left: clamp(16px, 3vw, 26px); border-left: 1px solid rgba(255,255,255,.18); }
}

@media (max-width: 560px) {
  .fone { grid-column: span 12; }
  .fone:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* =========================================================
   FOOTER
   Fundo azul da marca. De cima para baixo: faixa de consulta,
   marca com redes, quatro colunas de links e a barra final.
   Grid dos links: 3 + 2 + 2 + 3 + 2 (marca | 4 colunas).
   ========================================================= */
.footer {
  position: relative;
  z-index: 1;
  background: var(--blue);
  color: rgba(255,255,255,.86);
  padding-block: clamp(40px, 4.4vw, 60px) 22px;
}

/* ---------- faixa de consulta ---------- */
.footer__chamada {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  flex-wrap: wrap;
  padding-bottom: clamp(34px, 3.8vw, 52px);
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.footer__chamada-titulo {
  flex: 0 0 auto;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--mint);
}
.footer__campo {
  flex: 1 1 300px;
  min-width: 0;
}
.footer__input {
  width: 100%;
  padding: 17px 26px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: #fff;
}
.footer__input::placeholder { color: rgba(255,255,255,.62); font-style: italic; }
.footer__input:focus { outline: 0; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(144,213,172,.35); }

.footer__botao {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--mint);
  font: inherit;
  font-size: var(--rotulo);
  font-weight: 600;
  letter-spacing: var(--rotulo-ls);
  text-transform: uppercase;
  color: var(--titulo);
  cursor: pointer;
  transition: background .2s ease, gap .2s ease;
}
.footer__botao:hover { background: #a6e0bd; gap: 15px; }
.footer__botao:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- marca ---------- */
.footer__grid { margin-top: clamp(34px, 3.8vw, 54px); row-gap: 36px; }

.footer__brand img { width: clamp(150px, 13vw, 178px); height: auto; }
.footer__assinatura {
  max-width: 17rem;
  margin-top: clamp(18px, 1.8vw, 24px);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255,255,255,.82);
}

.footer__redes { display: flex; gap: 14px; margin-top: clamp(20px, 2vw, 28px); }
.rede {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  color: var(--mint);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.rede:hover { background: var(--mint); border-color: var(--mint); color: var(--blue); }
.rede:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- selos ---------- */
.footer__selos {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: clamp(22px, 2.2vw, 30px);
  padding-top: clamp(20px, 2vw, 26px);
  border-top: 1px solid rgba(255,255,255,.15);
}
.footer__selos img {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .8;
}

/* ---------- colunas de links ---------- */
.footer__col { display: flex; flex-direction: column; }
.footer__head {
  font-size: var(--rotulo);
  font-weight: 600;
  letter-spacing: var(--rotulo-ls);
  text-transform: uppercase;
  color: #fff;
}
.footer__col a {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,.82);
}
.footer__col a:first-of-type { margin-top: 18px; }
.footer__col a:hover { color: #fff; }

/* ---------- barra final ---------- */
.footer__bar {
  margin-top: clamp(34px, 3.8vw, 52px);
  border-top: 1px solid rgba(255,255,255,.22);
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,.75);
}
.footer__links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer__links a { color: inherit; }
.footer__links a:hover { color: #fff; }
.footer__links span { opacity: .4; }

.footer__sinnapse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 300;
  text-decoration: none;
  transition: color .2s;
}
.footer__sinnapse:hover { color: #fff; }
.footer__sinnapse img { height: 14px; width: auto; opacity: .55; transition: opacity .2s; }
.footer__sinnapse:hover img { opacity: 1; }

/* ---------- telas menores ---------- */
@media (max-width: 1024px) {
  .footer__brand { grid-column: span 12; }
  .footer__col   { grid-column: span 6; }
}

@media (max-width: 700px) {
  .footer__chamada { gap: 16px; }
  .footer__chamada-titulo br { display: none; }
  .footer__campo { flex: 1 1 100%; }
  .footer__botao { width: 100%; justify-content: center; }
  .footer__col { grid-column: span 12; }
  .footer__bar { justify-content: flex-start; }
}

/* =========================================================
   HOME SEM GRAFISMO ENTRE SEÇÕES
   ---------------------------------------------------------
   A pedido do Rafael (23/08/2026), na home só a onda do hero
   permanece. As seções terminam retas, uma cor encostando na
   outra.

   Sem a onda, o respiro que era dela passa a ser padding. Tudo
   aqui é escopado em body[data-pagina="home"] porque .etapas
   também é usada na página Coleta, que MANTÉM a onda.
   ========================================================= */
/* a arte do hero termina numa faixa branca (o recorte desenhado),
   então a seção seguinte entra com pouco topo, senão vira vazio */
body[data-pagina="home"] .etapas {
  padding-top: clamp(24px, 2.4vw, 34px);
  padding-bottom: clamp(48px, 4.4vw, 64px);
}

body[data-pagina="home"] .pessoas {
  padding-top: clamp(24px, 2.6vw, 38px);
  padding-bottom: clamp(52px, 5vw, 72px);
}

/* =========================================================
   EFEITOS DA HOME
   ---------------------------------------------------------
   Repertório de movimento no espírito do 21st.dev, traduzido
   para a marca: o gradiente azul → verde é o material de
   todos os brilhos.

   Tudo escopado em body[data-pagina="home"]. As páginas
   internas seguem sem nenhum destes efeitos.
   Tudo desliga em prefers-reduced-motion.
   ========================================================= */

/* material da marca, reaproveitado por todos os efeitos */
:root {
  --brilho: linear-gradient(90deg, var(--blue) 0%, var(--sky) 52%, var(--mint) 100%);
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   1. BARRA DE PROGRESSO DE LEITURA
   Fica colada embaixo do header, na cor da marca.
   --------------------------------------------------------- */
.progresso {
  position: fixed;
  top: 0; left: 0;
  z-index: 45;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: var(--brilho);
  pointer-events: none;
}
body:not([data-pagina="home"]) .progresso { display: none; }

/* ---------------------------------------------------------
   2. HEADER EM VIDRO ao rolar
   --------------------------------------------------------- */
body[data-pagina="home"] .header.is-stuck {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* Item 3 (parallax no .hero__media) removido em 25/08/2026: o Rafael
   via um "rasgo" branco sobre a foto enquanto rolava a home. A imagem
   ficava presa certinho dentro do .hero (overflow:hidden), mas o
   transform (translate + scale) rodava a cada frame de scroll via JS
   (js/efeitos.js) e não estava sincronizado 1:1 com o scroll nativo —
   'html { scroll-behavior: smooth }' anima o scroll por conta própria,
   e o parallax lido por rAF não acompanhava o mesmo timing, causando
   o efeito de "arrastão". Era só decorativo; tirar resolve de vez. */

/* ---------------------------------------------------------
   4. NÚMEROS DO HERO com o gradiente da marca
   O @supports evita número invisível se o recorte falhar.
   --------------------------------------------------------- */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  body[data-pagina="home"] .stats__num {
    background: linear-gradient(160deg, #ffffff 32%, var(--mint) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* a régua entre os números acende de cima para baixo */
body[data-pagina="home"] .stats__item + .stats__item {
  border-left-color: transparent;
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(144,213,172,.55), rgba(255,255,255,.05));
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left center;
}

/* ---------------------------------------------------------
   5. CARDS DE ETAPA: holofote seguindo o cursor
   + fio de luz da marca crescendo sob a foto
   --------------------------------------------------------- */
body[data-pagina="home"] .step {
  position: relative;
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
body[data-pagina="home"] .step::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0, 92, 185, .13), rgba(0, 92, 185, 0) 62%);
}
body[data-pagina="home"] .step:hover::after { opacity: 1; }
body[data-pagina="home"] .step:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(11, 47, 94, .16);
}

body[data-pagina="home"] .step__media { position: relative; }
body[data-pagina="home"] .step__media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 2;
  background: var(--brilho);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
body[data-pagina="home"] .step:hover .step__media::after { transform: scaleX(1); }

/* ---------------------------------------------------------
   5b. FOTO QUE ABRE DE BAIXO PARA CIMA
   Em vez de a imagem só aparecer, ela é revelada por uma máscara
   que sobe, e ainda desce um resto de zoom. Vale para as fotos
   editoriais das internas e da home.

   É `clip-path` + `transform`, as duas propriedades que o navegador
   anima na GPU sem repintar. Nada de blur animado: foi um blur
   grande em movimento que travou as transições desta página antes.
   --------------------------------------------------------- */
.duplo__media img,
.destaque__inner img,
.eco__foto img,
.galeria figure img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.08);
  transition: clip-path 1s cubic-bezier(.22,.9,.26,1),
              transform 1.2s cubic-bezier(.22,.9,.26,1);
}
.is-in .duplo__media img,
.duplo__media.is-in img,
.destaque__inner.is-in img,
.eco.is-in .eco__foto img,
.galeria figure.is-in img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
/* o hover de zoom continua valendo depois que a foto abriu */
.eco.is-in:hover .eco__foto img { transform: scale(1.04); }

/* ---------------------------------------------------------
   6. ECOPARQUES
   Aqui havia uma "aurora": um ::before de inset -25% com
   blur(70px) animado por 22s. Saiu em 24/08/2026 por dois
   motivos, nessa ordem:

   1. Ela ENGASGAVA a seção. Uma camada borrada daquele tamanho
      em animação contínua fazia as transições dos filhos ficarem
      com currentTime travado em 0: os cartões nunca apareciam,
      porque o reveal nunca completava. Medido, não suposto.
   2. Mancha colorida borrada em movimento é a assinatura visual
      de template genérico, o oposto do que o Rafael pediu.

   Ficou o grão, que é barato e dá textura ao azul chapado.
   --------------------------------------------------------- */
body[data-pagina="home"] .ecoparques::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  background-image: var(--grao);
}
body[data-pagina="home"] .ecoparques > .wrap { position: relative; z-index: 2; }

/* o 70% ganha o gradiente da marca */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  body[data-pagina="home"] .figure__num {
    background: linear-gradient(140deg, var(--sky) 10%, var(--mint) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  body[data-pagina="home"] .figure__num span { color: var(--mint); -webkit-text-fill-color: var(--mint); }
}

/* ---------------------------------------------------------
   7. BOTÃO PRIMÁRIO: brilho varrendo no hover
   --------------------------------------------------------- */
body[data-pagina="home"] .btn--primary { position: relative; overflow: hidden; isolation: isolate; }
body[data-pagina="home"] .btn--primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -140%;
  width: 55%;
  z-index: -1;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
}
body[data-pagina="home"] .btn--primary:hover::after { animation: varre .75s cubic-bezier(.3,.7,.4,1); }
@keyframes varre { to { left: 140%; } }

/* ---------------------------------------------------------
   8. ATALHOS DE SERVIÇO: anel que abre no hover
   --------------------------------------------------------- */
body[data-pagina="home"] .atalho a { position: relative; }
body[data-pagina="home"] .atalho svg { position: relative; z-index: 1; }
body[data-pagina="home"] .atalho a::before {
  content: "";
  position: absolute;
  top: -14px; left: 50%;
  width: 92px; height: 92px;
  margin-left: -46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,92,185,.10), rgba(0,92,185,0) 70%);
  transform: scale(.6);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
body[data-pagina="home"] .atalho a:hover::before { transform: scale(1); opacity: 1; }

/* ---------------------------------------------------------
   9. FOTOS DO BLOCO PESSOAS: zoom lento no hover
   --------------------------------------------------------- */
body[data-pagina="home"] .pessoas__portrait,
body[data-pagina="home"] .pessoas__top,
body[data-pagina="home"] .pessoas__bottom { overflow: hidden; }
body[data-pagina="home"] .pessoas__portrait img,
body[data-pagina="home"] .pessoas__top img,
body[data-pagina="home"] .pessoas__bottom img {
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
body[data-pagina="home"] .pessoas__portrait:hover img,
body[data-pagina="home"] .pessoas__top:hover img,
body[data-pagina="home"] .pessoas__bottom:hover img { transform: scale(1.045); }

/* ---------------------------------------------------------
   RESPEITO AO MOVIMENTO REDUZIDO
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .duplo__media img, .destaque__inner img, .eco__foto img, .galeria figure img {
    clip-path: none; transform: none; transition: none;
  }
  .progresso { display: none; }
  body[data-pagina="home"] .step:hover { transform: none; }
  body[data-pagina="home"] .step::after,
  body[data-pagina="home"] .step__media::after { transition: none; }
  body[data-pagina="home"] .btn--primary:hover::after { animation: none; }
  body[data-pagina="home"] .atalho a::before { transition: none; }
  body[data-pagina="home"] .pessoas__portrait:hover img,
  body[data-pagina="home"] .pessoas__top:hover img,
  body[data-pagina="home"] .pessoas__bottom:hover img { transform: none; }
}

/* =========================================================
   HERO INTERNO — topo de toda página interna
   Refeito em 25/08/2026 a partir de uma referência que o Rafael trouxe:
   banner mais alto, azul-marinho forte só do lado esquerdo (some suave
   até a foto ficar limpa à direita) e uma curva orgânica grande na base,
   com o grafismo da marca na borda de cima — tudo em SVG inline (a curva
   está em blocos/comuns/hero-int-curva.html, incluída com
   `<!--@inc:hero-int-curva-->`), NADA de PNG.

   Texto em 5 colunas à esquerda, foto full-bleed à direita. A foto de
   cada página continua vindo de `.hero-int__media img`, sem mudar nada
   ali — só a composição por cima dela mudou.
   ========================================================= */
.hero-int {
  position: relative;
  background: var(--navy-hero);
  overflow: hidden;
  height: clamp(520px, 31vw, 600px);
  display: flex;
  align-items: center;
}

/* a foto ocupa o banner inteiro; quem cria a área de leitura é o scrim.
   Sem emenda dura no meio: a imagem só vai clareando para a direita. */
.hero-int__media {
  position: absolute;
  inset: 0;
}
.hero-int__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* azul concentrado nos ~30% da esquerda, sumindo bem devagar até a foto
   ficar natural perto da metade da largura. Base = --navy-hero (a mesma
   cor do fundo do banner, então a transição nunca cria degrau). */
.hero-int__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--navy-hero) 0%,
      var(--navy-hero) 15%,
      rgba(4,40,72,.96) 25%,
      rgba(4,40,72,.86) 31%,
      rgba(4,40,72,.68) 38%,
      rgba(4,40,72,.46) 45%,
      rgba(4,40,72,.26) 52%,
      rgba(4,40,72,.10) 60%,
      rgba(4,40,72,0) 68%),
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.10) 100%);
}

.hero-int__inner {
  position: relative;
  z-index: 6;
  padding-block: clamp(40px, 4.2vw, 58px) clamp(120px, 12vw, 170px);
}

/* curva do fim do banner: a MESMA área branca some no rodapé da seção
   seguinte, então a curva "invade" e nunca sobra linha reta. */
.hero-int__curva {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(120px, 12vw, 200px);
  z-index: 7;
  pointer-events: none;
  user-select: none;
}

/* O bloco logo após o hero interno perde 30px de padding-top: o banner
   com a curva já cria respiro; sobrepor 60px de padding aí deixava um
   vazio grande na abertura. Vale para todos os componentes claros. */
.hero-int + .prosa,
.hero-int + .duplo,
.hero-int + .numeros,
.hero-int + .cards-bloco,
.hero-int + .galeria-bloco,
.hero-int + .icones-bloco,
.hero-int + .tabela-bloco,
.hero-int + .arquivos-bloco,
.hero-int + .noticias-bloco,
.hero-int + .unidades-bloco,
.hero-int + .acoes,
.hero-int + .passos {
  padding-top: clamp(20px, 2vw, 30px);
}

.hero-int__title {
  max-width: var(--w7);
  font-size: var(--t1);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: var(--titulo-ls);
  color: #fff;
  text-wrap: balance;
}
.hero-int__lead {
  max-width: min(var(--w4), 32ch);
  margin-top: 18px;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255,255,255,.86);
}
.hero-int__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}
.hero-int__ctas .btn { min-width: 190px; }

/* ---------- variante slideshow de fotos ---------- */
.hero-int__fotos {
  position: absolute;
  inset: 0;
}
.hero-int__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-int__foto.is-ativo { opacity: 1; }

.hero-int__destaque { color: var(--mint); }

@media (max-width: 1024px) {
  .hero-int { height: auto; min-height: clamp(480px, 58vw, 620px); }
  .hero-int__scrim {
    background:
      linear-gradient(90deg, var(--navy-hero) 0%, rgba(4,40,72,.92) 40%, rgba(4,40,72,.55) 68%, rgba(4,40,72,.18) 100%),
      linear-gradient(180deg, rgba(4,40,72,.30) 0%, rgba(4,40,72,0) 45%);
  }
  .hero-int__title { max-width: var(--w9); }
  .hero-int__lead { max-width: var(--w8); }
  .hero-int__inner { padding-bottom: clamp(110px, 18vw, 160px); }
  .hero-int__curva { height: clamp(90px, 14vw, 150px); }
}

@media (max-width: 700px) {
  .hero-int { min-height: clamp(420px, 92vw, 520px); }
  .hero-int__title, .hero-int__lead { max-width: none; }
  .hero-int__ctas .btn { flex: 1 1 100%; min-width: 0; }
  .hero-int__scrim {
    background:
      linear-gradient(90deg, var(--navy-hero) 0%, rgba(4,40,72,.90) 55%, rgba(4,40,72,.40) 100%),
      linear-gradient(180deg, rgba(4,40,72,.24) 0%, rgba(4,40,72,0) 40%);
  }
  .hero-int__curva { height: clamp(64px, 16vw, 110px); }
}

/* =========================================================
   FAIXA DE NÚMEROS — texto em 5 colunas + indicadores em 7
   Fundo claro. Usada na página institucional.
   ========================================================= */
.numeros {
  position: relative;
  background: var(--bg);
  padding-block: clamp(48px, 5.4vw, 76px);
}
.numeros__grid { align-items: center; row-gap: 36px; }

.numeros__title {
  font-size: var(--t2);
  line-height: 1.15;
  text-wrap: balance;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.numeros__text {
  margin-top: 16px;
  font-size: 15px;
  line-height: 25px;
  color: var(--muted);
}

/* Grade, não flex. Com `flex: 1 1 130px` mais o padding, quatro indicadores
   somavam mais que a largura das 7 colunas e o quarto caía sozinho na linha
   de baixo, com o fio no lugar errado (era o que acontecia em viveiro-ecoiris,
   sobre, estacao-vergueiro e nos três aterros). O auto-fit resolve para
   qualquer quantidade: 2, 3 ou 4 indicadores dividem a mesma linha. */
.numeros__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0;
}
.numeros__item {
  min-width: 0;
  padding-inline: clamp(14px, 2vw, 30px);
}
.numeros__item:first-child { padding-left: 0; }
.numeros__item + .numeros__item { border-left: 1px solid var(--line-strong); }

.numeros__num {
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(36px, 4.1vw, 58px);
  line-height: .95;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--blue);
}
.numeros__num span { font-size: .38em; font-weight: 400; color: var(--slate); }
.numeros__label {
  margin-top: 14px;
  font-size: 15px;
  line-height: 21px;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .numeros__copy, .numeros__lista { grid-column: span 12; }
}

@media (max-width: 620px) {
  .numeros__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .numeros__item:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* =========================================================
   LINHA DO TEMPO — marcos horizontais com trilho e pontos
   ========================================================= */
.linha-tempo {
  position: relative;
  background: var(--bg-soft);
  padding-block: clamp(44px, 5vw, 68px) clamp(52px, 5.6vw, 78px);
}

.linha-tempo__title {
  text-align: center;
  font-size: var(--t2);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}

.marcos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 24px);
  margin-top: 44px;
}
/* trilho: se desenha da esquerda para a direita quando a seção entra na tela */
.marcos::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 7px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--sky) 55%, var(--mint) 100%);
  opacity: .35;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.2,.7,.3,1) .15s;
}
.linha-tempo:has(.marco.is-in) .marcos::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .marcos::before { transform: none; transition: none; }
}

.marco { position: relative; padding-top: 30px; }
.marco::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--bg);
}
.marco--verde::before { background: var(--green); }

.marco__ano {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--blue-ink);
}
.marco__texto {
  margin-top: 10px;
  padding-right: 14px;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .marcos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .marcos::before { display: none; }
  .marco { padding-top: 26px; }
}

@media (max-width: 700px) {
  .marcos { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   DESTAQUE — foto full-bleed com texto sobreposto à esquerda
   Usado em "Presença que transforma São Paulo" e no CTA final
   de sustentabilidade.
   ========================================================= */
.destaque {
  position: relative;
  overflow: hidden;
  background: var(--navy-800);
  min-height: 340px;
  display: flex;
  align-items: center;
}

.destaque__media { position: absolute; inset: 0; }
.destaque__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.destaque__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(3,29,58,.94) 0%, rgba(3,29,58,.78) 26%, rgba(3,29,58,.10) 62%);
}

.destaque__inner {
  position: relative;
  z-index: 4;
  padding-block: clamp(44px, 5vw, 66px);
}
.destaque__title {
  max-width: var(--w5);
  font-size: var(--t2);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: #fff;
}
.destaque__text {
  max-width: var(--w4);
  margin-top: 16px;
  font-size: 15px;
  line-height: 25px;
  color: rgba(255,255,255,.86);
}
.destaque__inner .btn { margin-top: 28px; min-width: 210px; }

/* variante com a onda da marca no rodapé da faixa */
.destaque--onda { padding-bottom: clamp(40px, 6vw, 80px); }

/* variante com busca de endereço embutida, no lugar do botão simples */
.destaque--busca .destaque__title em { font-style: normal; color: var(--mint); }
.destaque__busca {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  margin-top: 28px;
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.98);
}
.destaque__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.destaque__input::placeholder { color: #8b9099; font-style: italic; }
.destaque__input:focus { outline: 0; }
.destaque__busca:focus-within { box-shadow: 0 0 0 3px rgba(144,213,172,.55); }
.destaque__botao {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--green-acao);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease;
}
.destaque__botao:hover { background: #16603a; }
.destaque__botao:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 700px) {
  .destaque__busca { flex-wrap: wrap; max-width: none; border-radius: var(--radius-lg); }
  .destaque__input { flex: 1 1 100%; padding-block: 10px; }
  .destaque__botao { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 1024px) {
  .destaque__media::after {
    background: linear-gradient(180deg, rgba(3,29,58,.92) 20%, rgba(3,29,58,.72) 100%);
  }
  .destaque__title { max-width: var(--w9); }
  .destaque__text { max-width: var(--w8); }
}

@media (max-width: 700px) {
  .destaque__title, .destaque__text { max-width: none; }
  .destaque__inner .btn { width: 100%; min-width: 0; }
}

/* =========================================================
   BLOCO DUPLO — foto (6 col) + texto (5 col), alternando lado
   .duplo             foto à esquerda, texto à direita
   .duplo--inverso    texto à esquerda, foto à direita
   .duplo--escuro     fundo azul-marinho
   .duplo--claro      fundo cinza-claro
   ========================================================= */
.duplo {
  position: relative;
  background: var(--bg);
  padding-block: clamp(36px, 3.6vw, 52px);
}
.duplo--claro  { background: var(--bg-soft); }
.duplo--escuro { background: var(--navy-800); }

.duplo__grid { align-items: center; row-gap: 28px; }

/* grid-row explícito: sem ele o navegador joga o bloco invertido
   para uma segunda linha, porque a mídia vem antes no HTML. */
.duplo__media { grid-column: 1 / span 6;  grid-row: 1; }
.duplo__copy  { grid-column: 8 / span 5;  grid-row: 1; }

.duplo--inverso .duplo__media { grid-column: 7 / span 6; }
.duplo--inverso .duplo__copy  { grid-column: 1 / span 5; }

.duplo__media { overflow: hidden; }
.duplo__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.duplo:hover .duplo__media img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .duplo:hover .duplo__media img { transform: none; }
}

.duplo__title {
  font-size: var(--t2);
  line-height: 1.2;
  text-wrap: balance;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.duplo__text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 28px;
  color: var(--muted);
}
.duplo__copy .btn { margin-top: 28px; min-width: 180px; }

.duplo--escuro .duplo__title { color: #fff; }
.duplo--escuro .duplo__text  { color: rgba(255,255,255,.82); }

@media (max-width: 1024px) {
  .duplo__media, .duplo__copy,
  .duplo--inverso .duplo__media, .duplo--inverso .duplo__copy { grid-column: span 12; }
  .duplo__media { grid-row: 1; }
  .duplo__copy  { grid-row: 2; }
}

@media (max-width: 700px) {
  .duplo__copy .btn { width: 100%; min-width: 0; }
}

/* =========================================================
   FAIXA DE DADOS — bloco escuro com texto em 4 colunas
   e uma malha de indicadores em 7.
   Usada na página de serviços.
   ========================================================= */
.dados {
  position: relative;
  background: var(--navy-800);
  overflow: hidden;
  padding-block: clamp(44px, 5vw, 68px);
}
.dados__grid { align-items: center; row-gap: 40px; }

.dados__copy { grid-column: span 4; }
.dados__malha { grid-column: 6 / span 7; }

.dados__title {
  font-size: var(--t2);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: #fff;
}
.dados__text {
  margin-top: 18px;
  font-size: 15px;
  line-height: 25px;
  color: rgba(255,255,255,.82);
}
.dados__copy .btn { margin-top: 28px; min-width: 210px; }

.dados__malha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px) clamp(16px, 2vw, 28px);
}
.dados__num {
  font-variant-numeric: tabular-nums;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mint);
}
.dados__item:nth-child(-n + 3) .dados__num { color: #fff; }
.dados__label {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255,255,255,.72);
}

@media (max-width: 1024px) {
  .dados__copy, .dados__malha { grid-column: span 12; }
}

@media (max-width: 700px) {
  .dados__malha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dados__copy .btn { width: 100%; min-width: 0; }
}

/* =========================================================
   FAIXA DE ÍCONES — 5 itens em linha
   Usada em "Nossos pilares" (sustentabilidade) e
   "Nossos canais" (contato).
   Mesma exceção da faixa de etapas: 5 trilhas iguais.
   ========================================================= */
.icones-bloco {
  position: relative;
  background: var(--bg);
  padding-block: clamp(36px, 4vw, 54px);
}
.icones-bloco--claro { background: var(--bg-soft); }

.icones__title {
  text-wrap: balance;
  text-align: center;
  font-size: var(--t2b);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}

.icones {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px 0;
  margin-top: 32px;
}
.icone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-inline: 12px;
  text-align: center;
}
.icone + .icone { border-left: 1px solid var(--line); }

.icone__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #eef4fb;
  transition: background-color .25s ease, transform .25s ease;
}
.icone a:hover .icone__marca,
.icone:hover .icone__marca { background: #D6E4F5; transform: translateY(-3px); }

.icone__nome {
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--blue-ink);
}
.icone a { display: flex; flex-direction: column; align-items: center; gap: 16px; }

@media (max-width: 1024px) {
  .icones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 0; }
  .icone:nth-child(3n + 1) { border-left: 0; }
}

@media (max-width: 700px) {
  .icones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icone { border-left: 0 !important; }
}

/* =========================================================
   ITENS DO ECOPARQUE
   Grade de cartões com ícone e nome, para listar o que cada
   Ecoparque vai ter. Sul tem 8 itens e Leste 10, então a grade
   é fluida (auto-fill), não fixa em 5 como a faixa de ícones.
   ========================================================= */
.itens-bloco {
  background: var(--bg-soft);
  padding-block: clamp(40px, 4.4vw, 62px);
}
.itens__titulo {
  text-align: center;
  text-wrap: balance;
  font-size: var(--t2b);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}

.itens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  margin-top: clamp(24px, 2.6vw, 36px);
}

.item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.item__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: #eef4fb;
  color: var(--blue);
}
.item__nome {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--titulo);
}

@media (max-width: 560px) {
  .itens { grid-template-columns: 1fr; }
}

/* =========================================================
   CARDS DE AÇÃO — dois blocos lado a lado (6 + 6 colunas)
   "Horário de coleta" e "Solicite um serviço".
   ========================================================= */
.acoes {
  position: relative;
  background: var(--bg);
  padding-block: clamp(40px, 4.4vw, 60px);
}
.acoes__grid { row-gap: 24px; align-items: stretch; }

.acao {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.acao__title {
  font-size: var(--t3);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.acao__text {
  margin-top: 10px;
  font-size: 15px;
  line-height: 25px;
  color: var(--muted);
}
.acao__rodape { margin-top: auto; padding-top: 22px; }
.acao__rodape .btn { min-width: 200px; }
/* busca do card "Horário de coleta": mesma forma do card .busca do
   hero da home, adaptada para fundo claro (branco + azul no botão). */
.acao .search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 5px 5px 5px 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line-strong);
}
.acao .search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.acao .search input::placeholder { color: #8b9099; font-style: italic; }
.acao .search input:focus { outline: 0; }
.acao .search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,92,185,.14); }

.acao .search button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.acao .search button:hover { background: var(--blue-hover); }
.acao .search button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 1024px) {
  .acao { grid-column: span 12; }
}

@media (max-width: 700px) {
  .acao__rodape .btn { width: 100%; min-width: 0; }
}

/* =========================================================
   PORTA DE ENTRADA — 3 cards de escolha (horário de coleta)
   ========================================================= */
.porta {
  padding-block: clamp(40px, 4.4vw, 56px) clamp(16px, 2vw, 24px);
  background: var(--bg);
}
.porta__titulo {
  font-size: var(--t2b);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
  text-align: center;
  margin-bottom: clamp(24px, 2.6vw, 36px);
}
.porta__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.porta__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 2.8vw, 40px) clamp(20px, 2vw, 32px);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.porta__card:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 28px rgba(11,59,110,.1);
  transform: translateY(-3px);
}

.porta__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  margin-bottom: 20px;
}
.porta__ico--blue  { background: rgba(0,92,185,.08); color: var(--blue); }
.porta__ico--green { background: rgba(31,122,72,.08); color: var(--green-acao); }
.porta__ico--navy  { background: rgba(11,47,94,.08); color: var(--blue-ink); }

.porta__nome {
  font-size: var(--t3);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
  margin-bottom: 10px;
}
.porta__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: auto;
}
.porta__acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
}
.porta__card:hover .porta__acao { color: var(--blue-hover); }

@media (max-width: 700px) {
  .porta__grid { grid-template-columns: 1fr; gap: 14px; }
  .porta__card {
    flex-direction: row;
    text-align: left;
    padding: 20px 24px;
    gap: 18px;
  }
  .porta__ico { flex-shrink: 0; width: 52px; height: 52px; margin-bottom: 0; }
  .porta__ico svg { width: 28px; height: 28px; }
  .porta__nome { margin-bottom: 4px; }
  .porta__desc { display: none; }
  .porta__acao { margin-top: 6px; }
}

/* =========================================================
   FORMULÁRIO DE CONTATO — form em 6 colunas + informações em 5
   ========================================================= */
.contato-form {
  position: relative;
  background: var(--bg-soft);
  padding-block: clamp(40px, 4.4vw, 60px);
}
.contato-form__grid { row-gap: 40px; align-items: start; }

.contato-form__form { grid-column: span 6; }
.contato-form__infos { grid-column: 8 / span 5; }

.contato-form__title {
  font-size: var(--t2b);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.contato-form__sub {
  margin-top: 8px;
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
}

.campo { margin-top: 14px; }
.campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid var(--field);
  border-radius: var(--radius);
  background: #fff;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo textarea { min-height: 118px; resize: vertical; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: #b9c9db; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #D6E4F5;
}
.contato-form__form .btn { margin-top: 22px; min-width: 200px; }

.infos { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.info { display: flex; gap: 16px; }
.info__marca {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #eef4fb;
}
.info__rotulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-ink);
}
.info__valor {
  margin-top: 3px;
  font-size: 15px;
  line-height: 23px;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .contato-form__form, .contato-form__infos { grid-column: span 12; }
}

@media (max-width: 700px) {
  .contato-form__form .btn { width: 100%; min-width: 0; }
}

/* =========================================================
   ONDE ESTAMOS — faixa escura com o endereço
   Era uma imagem de mapa de 480px esticada em 1440. Saiu.
   ========================================================= */
.mapa {
  position: relative;
  overflow: hidden;
  background: var(--navy-hero);
  padding-block: clamp(44px, 4.6vw, 66px);
}
.mapa__rotulo {
  margin-bottom: 12px;
  font-size: var(--rotulo);
  font-weight: 600;
  letter-spacing: var(--rotulo-ls);
  text-transform: uppercase;
  color: var(--blue);
}

.mapa__inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
}
.mapa__card {
  max-width: var(--w4);
  padding: 20px 26px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 10px 30px rgba(11,47,94,.16);
}
.mapa__nome {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t4);
  font-weight: 600;
  color: var(--titulo);
letter-spacing: normal;
}
.mapa__endereco {
  margin-top: 8px;
  font-size: 15px;
  line-height: 23px;
  color: var(--muted);
}
.mapa__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
}

@media (max-width: 700px) {
  .mapa { height: auto; padding-block: 180px 24px; }
  .mapa__card { max-width: none; width: 100%; }
}

/* =========================================================
   CONSULTA DE COLETA — página-ferramenta
   ========================================================= */

/* ---------- hero-busca: o campo é o protagonista ---------- */
.coleta-hero {
  background: var(--navy-800);
  padding-top: 10px;
  padding-bottom: clamp(56px, 6vw, 88px);
}
.coleta-hero .breadcrumb { margin-bottom: 0; }
.coleta-hero .breadcrumb a,
.coleta-hero .breadcrumb span { color: rgba(255,255,255,.5); }
.coleta-hero .breadcrumb--atual { color: #fff; }

.coleta-hero__centro {
  max-width: 680px;
  margin: clamp(40px, 5vw, 72px) auto 0;
  text-align: center;
}

.coleta-hero__titulo {
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--titulo-ls);
  color: #fff;
}

.coleta-hero__lead {
  margin-top: 16px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: rgba(255,255,255,.7);
}

/* ---------- campo grande ---------- */
.coleta-hero__form { margin-top: clamp(28px, 3vw, 40px); }

.coleta-hero__campo {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 6px 6px 6px clamp(20px, 2vw, 28px);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  transition: box-shadow .25s;
}
.coleta-hero__campo:focus-within {
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 0 0 3px rgba(144,213,172,.5);
}

.coleta-hero__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: clamp(16px, 1.2vw, 18px);
  padding: 14px 8px;
  color: var(--titulo);
}
.coleta-hero__input::placeholder { color: #8b9099; }

.coleta-hero__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px clamp(24px, 2.4vw, 32px);
  border: none;
  border-radius: 999px;
  background: var(--blue);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.coleta-hero__btn:hover { background: var(--blue-hover); transform: translateX(2px); }
.coleta-hero__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- wrapper do resultado ---------- */
.coleta-resultado-wrap { background: var(--bg); }
.coleta-resultado-wrap:has(#coleta-resultado:not([hidden])) {
  padding-block: clamp(32px, 3vw, 48px) clamp(40px, 4vw, 56px);
}

/* ---------- card de resultado ---------- */
.coleta-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0,20,45,.08);
  overflow: hidden;
  max-width: 900px;
  margin-inline: auto;
}

.coleta-card__head {
  padding: 28px 36px 24px;
  background: var(--navy-800);
  color: #fff;
}
.coleta-card__rua {
  font-size: var(--t2b);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  line-height: 1.2;
}
.coleta-card__meta {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.coleta-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.coleta-card__obs {
  padding: 18px 36px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--bg);
}

/* ---------- tipo (domiciliar / seletiva) ---------- */
.coleta-tipo { padding: 28px 36px 32px; }
.coleta-tipo + .coleta-tipo { border-left: 1px solid var(--line); }

.coleta-tipo__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.coleta-tipo__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
}
.coleta-tipo--domiciliar .coleta-tipo__badge { background: var(--blue); }
.coleta-tipo--seletiva .coleta-tipo__badge { background: var(--green-text, #1f6b45); }

.coleta-tipo__titulo {
  font-size: var(--t3);
  font-weight: 600;
  color: var(--titulo);
  line-height: 1.2;
}
.coleta-tipo__freq {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- grade de dias ---------- */
.coleta-tipo__grade {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.coleta-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px;
  background: var(--bg);
  border-radius: 6px;
  text-align: center;
}
.coleta-dia--ativo {
  background: var(--blue);
  color: #fff;
}
.coleta-dia--ativo .coleta-dia__nome { color: rgba(255,255,255,.8); }

.coleta-dia__nome {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.coleta-dia__hora {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ---------- loading ---------- */
.coleta-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 40px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}
.coleta-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--line-strong);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: coletaSpin .7s linear infinite;
}
@keyframes coletaSpin { to { transform: rotate(360deg); } }

/* ---------- erro ---------- */
.coleta-erro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 36px;
  background: #fff5f5;
  border-radius: var(--radius);
  color: #9b2c2c;
  font-size: 15px;
  line-height: 1.5;
  max-width: 900px;
  margin-inline: auto;
}
.coleta-erro svg { flex-shrink: 0; margin-top: 2px; }

/* ---------- responsivo ---------- */
@media (max-width: 860px) {
  .coleta-card__body { grid-template-columns: 1fr; }
  .coleta-tipo + .coleta-tipo { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 700px) {
  .coleta-hero__btn span { display: none; }
  .coleta-tipo { padding: 24px 24px 28px; }
  .coleta-card__head { padding: 24px; }
  .coleta-card__obs { padding: 16px 24px; }
}

/* =========================================================
   PROSA — bloco de texto corrido das páginas de conteúdo
   Medida de leitura em 7 colunas (~68 caracteres, guia §5).
   ========================================================= */
.prosa {
  position: relative;
  background: var(--bg);
  padding-block: clamp(40px, 4.4vw, 60px);
}
.prosa--claro { background: var(--bg-soft); }

.prosa__inner { max-width: var(--w7); }
.prosa__inner--largo { max-width: var(--w9); }

.prosa__titulo {
  font-size: var(--t2);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
  text-wrap: balance;
}
.prosa__titulo + p { margin-top: 16px; }

.prosa p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 28px;
  color: var(--muted);
}
.prosa p strong { font-weight: 600; color: var(--slate); }
.prosa p a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

.prosa__sub {
  margin-top: 34px;
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 600;
  color: var(--blue-ink);
}

/* lista com marcador da marca */
.prosa__lista { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.prosa__lista li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 27px;
  color: var(--muted);
}
.prosa__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--blue);
}
.prosa__lista--verde li::before { background: var(--green); }

/* destaque de aviso / nota */
.nota {
  margin-top: 28px;
  padding: 20px 24px;
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #eef4fb;
}
.nota p { margin: 0; font-size: 15px; line-height: 25px; color: var(--slate); }
.nota p + p { margin-top: 10px; }

/* citação (usada no perfil da Carolina Maria de Jesus) */
.citacao {
  margin-top: 30px;
  padding-left: 26px;
  border-left: 3px solid var(--mint);
}
.citacao p {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  font-style: italic;
  color: var(--blue-ink);
}
.citacao cite {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-style: normal;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .prosa__inner, .prosa__inner--largo { max-width: none; }
}

/* =========================================================
   MOSAICO SHUFFLE
   Porte do ShuffleHero (21st.dev) para vanilla. Texto à esquerda,
   grade 4x4 de fotos à direita que trocam de posição a cada 3s.

   A troca é feita com FLIP: mede a posição de cada quadrado, muda
   a ordem no DOM, mede de novo e anima a diferença. Sem framer.
   Comportamento em js/mosaico.js.
   ========================================================= */
.mosaico {
  background: var(--bg);
  padding-block: clamp(56px, 6vw, 88px);
}

.mosaico__grid {
  align-items: center;
  row-gap: 40px;
}

.mosaico__copy {
  grid-column: 1 / span 5;
  padding-right: clamp(0px, 1.6vw, 24px);
}
.mosaico__kicker {
  display: block;
  margin-bottom: 16px;
  font-size: var(--rotulo);
  font-weight: 600;
  letter-spacing: var(--rotulo-ls);
  text-transform: uppercase;
  color: var(--teal);
}
.mosaico__titulo {
  font-size: var(--t2);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.mosaico__texto {
  max-width: 34rem;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--slate);
}
.mosaico__texto + .mosaico__texto { margin-top: 18px; }
.mosaico__texto strong { color: var(--titulo); font-weight: 600; }
.mosaico__copy .btn { margin-top: clamp(24px, 2.6vw, 34px); }

/* ---------- grade ---------- */
.mosaico__quadro {
  grid-column: 7 / span 6;
  aspect-ratio: 1;
  max-height: 520px;
}
.mosaico__pista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows:    repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mosaico__quadrado {
  overflow: hidden;
  background: var(--navy-900);
  will-change: transform;
}
.mosaico__quadrado img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .mosaico__copy    { grid-column: 1 / span 12; padding-right: 0; }
  .mosaico__quadro  { grid-column: 1 / span 12; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mosaico__quadrado { transition: none !important; }
}

/* =========================================================
   EXPLICAÇÃO SELETIVA vs DOMICILIAR
   ========================================================= */
.explica {
  padding-block: clamp(40px, 4.4vw, 64px);
  background: var(--bg-soft);
}

.explica__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 32px);
}

.explica__item {
  padding: clamp(24px, 2.4vw, 36px);
  background: #fff;
  border-radius: var(--radius);
  border-top: 4px solid transparent;
}
.explica__item--dom { border-color: var(--blue); }
.explica__item--sel { border-color: var(--green-text, #1f6b45); }

.explica__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 16px;
}
.explica__item--dom .explica__ico { background: rgba(0,92,185,.08); color: var(--blue); }
.explica__item--sel .explica__ico { background: rgba(31,107,69,.08); color: var(--green-text, #1f6b45); }

.explica__titulo {
  font-size: var(--t3);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
  margin-bottom: 10px;
}

.explica__texto {
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
}

.explica__lista {
  margin-top: 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.explica__lista li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--corpo);
}
.explica__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.explica__item--dom .explica__lista li::before { background: var(--blue); opacity: .3; }
.explica__item--sel .explica__lista li::before { background: var(--green-text, #1f6b45); opacity: .3; }

@media (max-width: 700px) {
  .explica__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   DICAS — 3 blocos com ícone, título curto e texto
   ========================================================= */
.dicas {
  padding-block: clamp(48px, 5.4vw, 76px);
  background: var(--navy-800);
  color: #fff;
}

.dicas__titulo {
  font-size: var(--t2);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: #fff;
  margin-bottom: clamp(28px, 3vw, 44px);
}

.dicas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.4vw, 40px);
}

.dica {
  padding: clamp(24px, 2.2vw, 32px);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
}

.dica__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 20px;
}
.dica__icone--blue  { background: var(--blue); color: #fff; }
.dica__icone--navy  { background: rgba(255,255,255,.12); color: var(--mint); }
.dica__icone--green { background: rgba(144,213,172,.18); color: var(--mint); }

.dica__head {
  font-size: var(--t4);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: #fff;
  line-height: 1.3;
  margin-bottom: 10px;
}

.dica__text {
  font-size: 15px;
  line-height: 24px;
  color: rgba(255,255,255,.7);
}

@media (max-width: 860px) {
  .dicas__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* =========================================================
   TABELA — dados tabulares (áreas atendidas, classificações)
   Rola no próprio contêiner em tela estreita.
   ========================================================= */
.tabela-bloco { position: relative; background: var(--bg); padding-block: clamp(36px, 4vw, 54px); }
.tabela-bloco--claro { background: var(--bg-soft); }

.tabela-titulo {
  font-size: var(--t2b);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.tabela-titulo + .tabela-rolagem,
.tabela-titulo + .tabelas-grade { margin-top: 18px; }

.tabela-rolagem { overflow-x: auto; overscroll-behavior-x: contain; }

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 440px;
}
.tabela caption {
  caption-side: bottom;
  padding-top: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: left;
}
.tabela th, .tabela td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.tabela thead th {
  font-weight: 600;
  color: #fff;
  background: var(--blue-ink);
  border-bottom: 0;
}
.tabela thead th:first-child { border-radius: var(--radius) 0 0 0; }
.tabela thead th:last-child { border-radius: 0 var(--radius) 0 0; }
.tabela td { color: var(--muted); font-weight: 300; }
.tabela tbody tr:nth-child(even) { background: var(--bg-soft); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tr.total td { font-weight: 600; color: var(--blue-ink); background: #e8eff8; }

/* grade de tabelas pequenas lado a lado (subprefeituras) */
.tabelas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(24px, 2.6vw, 36px);
}
.tabelas-grade .tabela { min-width: 0; }
.tabelas-grade .tabela th,
.tabelas-grade .tabela td { padding: 10px 14px; font-size: 14px; }
.tabelas-grade h3 {
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--blue-ink);
}

/* =========================================================
   CARDS — grade de navegação das páginas-hub
   ========================================================= */
.cards-bloco { position: relative; background: var(--bg); padding-block: clamp(40px, 4.4vw, 60px); }
.cards-bloco--claro { background: var(--bg-soft); }

.cards-titulo {
  font-size: var(--t2b);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
  text-wrap: balance;
}
.cards-titulo + .cards { margin-top: 26px; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
}
.cards--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.card:hover,
.card:focus-within {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 12px 34px rgba(0, 92, 185, .12);
}
.card__media { overflow: hidden; }
.card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__media img { transform: scale(1.05); }

.card__corpo { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.card__titulo {
  font-size: var(--t4);
  line-height: 1.3;
  font-weight: 600;
  color: var(--titulo);
  text-wrap: balance;
letter-spacing: normal;
}
.card__texto {
  margin-top: 10px;
  font-size: 15px;
  line-height: 25px;
  color: var(--muted);
}
.card__link {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--blue);
}
.card__link svg { transition: transform .25s ease; }
.card:hover .card__link svg { transform: translateX(4px); }

/* o card inteiro fica clicável, mantendo um só link real */
.card__link::after { content: ""; position: absolute; inset: 0; }

/* ---------- variante com ícone (sem foto) ---------- */
.card--icone { border-top: 3px solid var(--blue); }
.card__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-bottom: 16px;
  color: #fff;
}
.card__ico--blue  { background: var(--blue); }
.card__ico--green { background: var(--green-text, #1f6b45); }
.card__ico--navy  { background: var(--navy-800); }

@media (max-width: 900px) {
  .cards--tres { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover, .card:focus-within { transform: none; }
  .card:hover .card__media img { transform: none; }
  .card:hover .card__link svg { transform: none; }
}

/* =========================================================
   ARQUIVOS — listas de download (RSS, políticas de integridade)
   ========================================================= */
.arquivos-bloco { position: relative; background: var(--bg); padding-block: clamp(36px, 4vw, 54px); }
.arquivos-bloco--claro { background: var(--bg-soft); }

.arquivos-titulo {
  font-size: var(--t2b);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.arquivos-texto {
  margin-top: 12px;
  max-width: var(--w7);
  font-size: 15px;
  line-height: 25px;
  color: var(--muted);
}
.arquivos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.arquivo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 22px;
  color: var(--slate);
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.arquivo:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 6px 20px rgba(0, 92, 185, .10);
}
.arquivo__ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius);
  background: #eef4fb;
  color: var(--blue);
}
.arquivo__nome { flex: 1; min-width: 0; }
.arquivo__tipo {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--muted);
}

/* =========================================================
   JOGO — Acerte o destino do resíduo
   Visual de game app: fundo escuro, cards grandes, feedback forte.
   ========================================================= */

/* ---------- hero compacto ---------- */
.jogo-hero {
  background: linear-gradient(165deg, #001a3a 0%, #002953 40%, #003d6b 100%);
  padding-block: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 44px);
  text-align: center;
}
.jogo-hero__inner {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: 20px;
}
.jogo-hero__title {
  font-size: var(--t1);
  font-weight: 700;
  letter-spacing: var(--titulo-ls);
  line-height: 1.1;
  color: #fff;
}
.jogo-hero__title em {
  font-style: normal;
  color: var(--mint);
}
.jogo-hero__lead {
  margin-top: 12px;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255,255,255,.7);
}
.jogo-hero__badges {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.jogo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 40px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  font-size: 13px;
}
.jogo-badge strong {
  font-size: 17px;
  color: var(--mint);
}

/* ---------- área do jogo — fundo escuro imersivo ---------- */
.jogo {
  position: relative;
  padding: clamp(24px, 3vw, 40px) 16px clamp(48px, 5vw, 72px);
  background: linear-gradient(180deg, #001a3a 0%, #0a2a4a 50%, #0d3055 100%);
  min-height: 70vh;
}

/* ---------- HUD estilo game ---------- */
.jogo__hud {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
  margin-bottom: 20px;
}
.jogo__hud-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  min-width: 96px;
  transition: background .3s, transform .2s, border-color .3s;
}
.jogo__hud-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.jogo__hud-valor {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  transition: transform .15s;
}

/* streak em fogo */
.jogo__hud-item.on-fire {
  background: rgba(255,140,0,.15);
  border-color: rgba(255,140,0,.4);
  transform: scale(1.06);
}
.jogo__hud-item.on-fire::after {
  content: attr(data-streak);
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: #ff8c00;
  text-shadow: 0 0 12px rgba(255,140,0,.6);
  animation: streakPop .4s ease;
}

/* timer com urgência */
.jogo__hud-item.timer-warning .jogo__hud-valor { color: #ffc815; }
.jogo__hud-item.timer-warning { border-color: rgba(255,200,21,.3); }
.jogo__hud-item.timer-danger {
  background: rgba(255,50,50,.12);
  border-color: rgba(255,80,80,.4);
}
.jogo__hud-item.timer-danger .jogo__hud-valor {
  color: #ff5555;
  animation: timerPulse .6s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
@keyframes streakPop {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.7); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ---------- barra de progresso ---------- */
.jogo__progresso {
  max-width: 560px;
  margin: 0 auto 28px;
  text-align: center;
}
.jogo__progresso-barra {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.jogo__progresso-barra i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #005CB9, #2e9b5f, #8ed49a);
  box-shadow: 0 0 12px rgba(142,212,154,.4);
  transition: width .5s cubic-bezier(.4,.0,.2,1);
}
.jogo__progresso-meta {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.5);
}

/* ---------- cards de resíduos — grandes e chamativos ---------- */
.jogo__itens {
  max-width: 780px;
  margin: 0 auto 28px;
}
.jogo__itens-titulo {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.5);
  margin-bottom: 16px;
}
.jogo__itens-pista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  min-height: 80px;
}
.jogo__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 14px;
  cursor: grab;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  text-align: center;
  transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
  user-select: none;
  animation: itemAppear .35s ease both;
}
@keyframes itemAppear {
  0% { opacity: 0; transform: translateY(16px) scale(.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.jogo__item:hover {
  border-color: rgba(142,212,154,.5);
  background: rgba(255,255,255,.1);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.jogo__item.selected {
  border-color: #8ed49a;
  background: rgba(142,212,154,.12);
  box-shadow: 0 0 0 3px rgba(142,212,154,.2), 0 8px 24px rgba(0,0,0,.3);
  transform: translateY(-4px) scale(1.04);
}
.jogo__item.shake {
  animation: itemShake .35s ease;
}
@keyframes itemShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.jogo__item-ico {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

/* ---------- lixeiras — drop zones coloridas ---------- */
.jogo__lixeiras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1vw, 14px);
  max-width: 780px;
  margin: 0 auto 28px;
}
.jogo__lixeira {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border: 2px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
}
.jogo__lixeira:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.07);
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.jogo__lixeira-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transition: transform .2s;
}
.jogo__lixeira strong {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: rgba(255,255,255,.85);
}

/* cores por tipo — glow sutil */
.jogo__lixeira--comum .jogo__lixeira-ico {
  background: rgba(0,92,185,.2);
  color: #5ea8ff;
  box-shadow: 0 0 20px rgba(0,92,185,.15);
}
.jogo__lixeira--seletiva .jogo__lixeira-ico {
  background: rgba(46,155,95,.2);
  color: #5ec97a;
  box-shadow: 0 0 20px rgba(46,155,95,.15);
}
.jogo__lixeira--pev .jogo__lixeira-ico {
  background: rgba(40,164,166,.2);
  color: #50d4d6;
  box-shadow: 0 0 20px rgba(40,164,166,.15);
}
.jogo__lixeira--saude .jogo__lixeira-ico {
  background: rgba(201,62,69,.2);
  color: #f07078;
  box-shadow: 0 0 20px rgba(201,62,69,.15);
}

/* feedback visual */
.jogo__lixeira.drag-over {
  border-color: #8ed49a;
  background: rgba(142,212,154,.08);
  box-shadow: 0 0 0 4px rgba(142,212,154,.15), 0 8px 28px rgba(0,0,0,.2);
  transform: translateY(-5px) scale(1.04);
}
.jogo__lixeira.drag-over .jogo__lixeira-ico { transform: scale(1.15); }
.jogo__lixeira.correct {
  border-color: #2e9b5f;
  background: rgba(46,155,95,.12);
  animation: lixCorreto .55s cubic-bezier(.2,.8,.3,1);
}
.jogo__lixeira.correct .jogo__lixeira-ico {
  animation: icoSwallow .45s ease;
}
.jogo__lixeira.wrong {
  border-color: #ff5555;
  background: rgba(255,50,50,.08);
  animation: lixErrado .4s ease;
}
@keyframes lixCorreto {
  0% { transform: scale(1); }
  25% { transform: scale(1.08); }
  50% { transform: scale(.97); }
  100% { transform: scale(1); }
}
@keyframes icoSwallow {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); }
  60% { transform: scale(.9); }
  100% { transform: scale(1); }
}
@keyframes lixErrado {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* ---------- combo e score pop ---------- */
.jogo__combo-pop {
  position: absolute;
  font-size: 18px;
  font-weight: 800;
  color: #ff8c00;
  text-shadow: 0 0 16px rgba(255,140,0,.6);
  pointer-events: none;
  z-index: 85;
  transform: translate(-50%, 0);
  animation: comboPop .8s ease-out forwards;
}
@keyframes comboPop {
  0% { opacity: 1; transform: translate(-50%, 0) scale(.8); }
  50% { transform: translate(-50%, -30px) scale(1.3); }
  100% { opacity: 0; transform: translate(-50%, -50px) scale(1); }
}
.jogo__score-pop {
  position: absolute;
  font-size: 20px;
  font-weight: 800;
  color: #8ed49a;
  text-shadow: 0 0 12px rgba(142,212,154,.5);
  pointer-events: none;
  z-index: 85;
  transform: translate(-50%, 0);
  animation: scorePop .75s ease-out forwards;
}
@keyframes scorePop {
  0% { opacity: 1; transform: translate(-50%, 0) scale(.7); }
  40% { transform: translate(-50%, -20px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -45px) scale(.9); }
}

/* ---------- dica ---------- */
.jogo__dica {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto 20px;
  padding: 14px 18px;
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  border-left: 3px solid rgba(142,212,154,.5);
}
.jogo__dica-ico { font-size: 18px; flex-shrink: 0; }
.jogo__dica p {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.6);
  margin: 0;
}

/* ---------- controles ---------- */
.jogo__controles {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.jogo__ctrl {
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 40px;
  background: rgba(255,255,255,.06);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.jogo__ctrl:hover {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
  transform: translateY(-1px);
}
.jogo__ctrl:active { transform: translateY(0); }

/* ---------- toast ---------- */
.jogo__toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 14px 32px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.3,1), opacity .35s ease;
  z-index: 90;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.jogo__toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.jogo__toast.good { background: #2e9b5f; }
.jogo__toast.bad { background: #c93e45; }

/* ---------- confetti ---------- */
.jogo__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 80;
}
.jogo__confetti i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: confettiBurst 1s ease-out forwards;
}
@keyframes confettiBurst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -100px)) rotate(360deg) scale(.4); }
}

/* ---------- modal ---------- */
.jogo__modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(0,15,35,.75);
  backdrop-filter: blur(8px);
  animation: modalBgIn .3s ease;
}
.jogo__modal-fundo[hidden] { display: none; }
@keyframes modalBgIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.jogo__modal {
  position: relative;
  max-width: 480px;
  width: 90%;
  background: linear-gradient(170deg, #0d3055, #001a3a);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 40px);
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  animation: modalIn .4s cubic-bezier(.2,.8,.3,1);
}
@keyframes modalIn {
  0% { opacity: 0; transform: translateY(30px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.jogo__modal-fechar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  font-size: 20px;
  line-height: 1;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: background .15s;
}
.jogo__modal-fechar:hover { background: rgba(255,255,255,.12); }
.jogo__modal h2 {
  font-size: var(--t2b);
  font-weight: 700;
  letter-spacing: var(--titulo-ls);
  color: #fff;
  margin-bottom: 10px;
}

/* estrelas */
.jogo__stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}
.jogo__star {
  font-size: 40px;
  color: rgba(255,255,255,.15);
  transition: color .3s, transform .3s;
}
.jogo__star.filled {
  color: #ffc815;
  filter: drop-shadow(0 0 8px rgba(255,200,21,.5));
  animation: starIn .5s cubic-bezier(.2,.8,.3,1) both;
}
.jogo__star.filled:nth-child(2) { animation-delay: .12s; }
.jogo__star.filled:nth-child(3) { animation-delay: .24s; }
@keyframes starIn {
  0% { transform: scale(0) rotate(-30deg); }
  60% { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* medal */
.result-medal {
  font-size: 60px;
  margin-bottom: 8px;
  animation: medalBounce .6s ease;
}
@keyframes medalBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* score */
.jogo__modal .result-score {
  font-size: 56px;
  font-weight: 800;
  color: #8ed49a;
  margin: 12px 0 4px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(142,212,154,.3);
}
.result-pts {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  margin-left: 4px;
}

/* stats row */
.result-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 20px 0 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.result-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.result-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.result-stat-lbl {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.result-msg {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}

.jogo__modal p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}
.jogo__modal-acoes {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
.jogo__modal-acoes .primary {
  padding: 14px 32px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #005CB9, #2e9b5f);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 16px rgba(0,92,185,.3);
}
.jogo__modal-acoes .primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,92,185,.4);
}
.jogo__modal-acoes .secondary {
  padding: 14px 28px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.8);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.jogo__modal-acoes .secondary:hover { background: rgba(255,255,255,.1); }

/* ranking */
.jogo__modal .ranking-list {
  text-align: left;
  margin-top: 16px;
}
.jogo__modal .rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 14px;
  transition: background .15s;
  border-radius: 8px;
}
.jogo__modal .rank-row:hover { background: rgba(255,255,255,.04); }
.jogo__modal .rank-row--top { background: rgba(255,200,21,.08); }
.jogo__modal .rank-pos {
  min-width: 32px;
  text-align: center;
  font-size: 18px;
}
.jogo__modal .rank-date { flex: 1; color: rgba(255,255,255,.4); }
.jogo__modal .rank-score { color: #8ed49a; font-size: 15px; font-weight: 700; }

/* ---------- pausa ---------- */
.jogo__pausa {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,15,35,.8);
  backdrop-filter: blur(8px);
  z-index: 50;
  border-radius: 12px;
  animation: modalBgIn .25s ease;
}
.jogo__pausa-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.jogo__pausa-ico { font-size: 52px; }
.jogo__pausa-inner span { font-size: 26px; font-weight: 700; }
.jogo__pausa-inner small { font-size: 14px; color: rgba(255,255,255,.45); }

/* ---------- responsivo ---------- */
@media (max-width: 700px) {
  .jogo-hero { padding-block: clamp(28px, 6vw, 44px); }
  .jogo-hero__badges { flex-wrap: wrap; }
  .jogo__hud { flex-wrap: wrap; }
  .jogo__hud-item { min-width: 72px; padding: 10px 14px; }
  .jogo__hud-valor { font-size: 20px; }
  .jogo__itens-pista {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
  }
  .jogo__item { padding: 12px 8px; font-size: 12px; }
  .jogo__item-ico { font-size: 26px; }
  .jogo__lixeiras {
    grid-template-columns: repeat(2, 1fr);
    max-width: 380px;
  }
  .jogo__lixeira { padding: 16px 10px; }
  .jogo__lixeira-ico { width: 48px; height: 48px; }
  .jogo__modal { padding: 24px 20px; }
  .result-stats { gap: 16px; }
  .result-stat-val { font-size: 18px; }
  .jogo__modal .result-score { font-size: 44px; }
}

/* =========================================================
   GALERIA — grade de fotos (Ecoparques, relatórios em imagem)
   ========================================================= */
.galeria-bloco { position: relative; background: var(--bg); padding-block: clamp(36px, 4vw, 54px); }
.galeria-bloco--claro { background: var(--bg-soft); }
.galeria-bloco--escuro { background: var(--navy-800); }
.galeria-bloco--escuro .galeria-titulo { color: #fff; }
.galeria-bloco--escuro .galeria-texto,
.galeria-bloco--escuro .galeria__legenda { color: rgba(255,255,255,.82); }

.galeria-titulo {
  font-size: var(--t2b);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
  text-wrap: balance;
}
.galeria-texto {
  margin-top: 12px;
  max-width: var(--w7);
  font-size: 15px;
  line-height: 25px;
  color: var(--muted);
}
.galeria-titulo + .galeria,
.galeria-texto + .galeria { margin-top: 22px; }

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.galeria--dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.galeria--cheia { grid-template-columns: 1fr; }

.galeria figure { margin: 0; overflow: hidden; }
.galeria img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.galeria figure:hover img { transform: scale(1.04); }
.galeria__legenda {
  margin-top: 10px;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}

/* documento em imagem: mostra inteiro, sem cortar nem ampliar */
.galeria--documento figure {
  border: 1px solid var(--line);
  background: #fff;
}
.galeria--documento img { aspect-ratio: auto; object-fit: contain; }
.galeria--documento figure:hover img { transform: none; }

/* infográfico solto, largura total */
.galeria--cheia img { aspect-ratio: auto; }
.galeria--cheia figure:hover img { transform: none; }

@media (max-width: 700px) {
  .galeria--dupla { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .galeria figure:hover img { transform: none; }
}

/* =========================================================
   GALERIA DE VÍDEOS — grid de iframes do YouTube
   ========================================================= */
.videos-bloco {
  position: relative;
  background: var(--navy-800);
  padding-block: clamp(46px, 5vw, 70px);
}

.videos__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 2.6vw, 36px);
}
.videos__title {
  font-size: var(--t2b);
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: #fff;
}
.videos__lead {
  margin-top: 8px;
  max-width: var(--w7);
  font-size: 15px;
  line-height: 25px;
  color: rgba(255,255,255,.72);
}
.videos__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--rotulo);
  font-weight: 600;
  letter-spacing: var(--rotulo-ls);
  text-transform: uppercase;
  color: var(--mint);
}
.videos__cta:hover { color: #fff; }
.videos__cta svg { transition: transform .2s ease; }
.videos__cta:hover svg { transform: translateX(4px); }

.videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}

.video {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  transition: background .2s ease;
}
.video:hover { background: rgba(255,255,255,.1); }

.video__frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__corpo { padding: 16px 18px 20px; }
.video__titulo {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.video__meta {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}

@media (max-width: 1024px) {
  .videos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .videos { grid-template-columns: 1fr; }
}

/* =========================================================
   NOTÍCIAS — lista de clipping de imprensa e vídeos
   ========================================================= */
.noticias-bloco { position: relative; background: var(--bg); padding-block: clamp(36px, 4vw, 54px); }

.noticias { display: flex; flex-direction: column; gap: 14px; }

.noticia {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.noticia:hover,
.noticia:focus-within {
  border-color: var(--line-strong);
  box-shadow: 0 8px 24px rgba(11, 47, 94, .09);
  transform: translateY(-2px);
}
.noticia__data {
  font-size: var(--rotulo);
  font-weight: 600;
  letter-spacing: var(--rotulo-ls);
  text-transform: uppercase;
  color: var(--blue);
}
.noticia__titulo {
  font-size: var(--t4);
  line-height: 1.35;
  font-weight: 600;
  color: var(--titulo);
  text-wrap: pretty;
letter-spacing: normal;
}
.noticia__titulo a::after { content: ""; position: absolute; inset: 0; }
.noticia__texto {
  margin-top: 5px;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}
.noticia__ir {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #eef4fb;
  color: var(--blue);
  transition: background-color .2s ease, transform .2s ease;
}
.noticia:hover .noticia__ir { background: #D6E4F5; transform: translateX(3px); }

@media (max-width: 800px) {
  .noticia { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .noticia__data { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .noticia:hover, .noticia:focus-within { transform: none; }
  .noticia:hover .noticia__ir { transform: none; }
}

/* =========================================================
   UNIDADES — cards com foto, telefone e endereço
   ========================================================= */
.unidades-bloco { position: relative; background: var(--bg-soft); padding-block: clamp(40px, 4.4vw, 60px); }

.unidades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
}
.unidade {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.unidade__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.unidade__corpo { padding: 22px 24px 24px; }
.unidade__nome {
  font-size: var(--t4);
  line-height: 1.3;
  font-weight: 600;
  color: var(--titulo);
  text-wrap: balance;
letter-spacing: normal;
}
.unidade__dado {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 23px;
  color: var(--muted);
}
.unidade__dado svg { flex: none; margin-top: 3px; color: var(--blue); }
.unidade__dado a { color: var(--blue); }

/* =========================================================
   PASSOS — grade numerada
   Substitui lista de tópicos por um recurso de layout:
   orientações, eixos de ação, fases de obra, benefícios.
   ========================================================= */
.passos-bloco {
  position: relative;
  background: var(--bg);
  padding-block: clamp(44px, 4.8vw, 68px);
}
.passos-bloco--claro { background: var(--bg-soft); }
.passos-bloco--escuro { background: var(--navy-800); }

.passos__titulo {
  font-size: var(--t2);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
  text-wrap: balance;
}
.passos__titulo--centro { max-width: var(--w6); margin-inline: auto; text-align: center; }
.passos__intro {
  max-width: var(--w6);
  margin-top: 14px;
  font-size: 16px;
  line-height: 27px;
  color: var(--muted);
}
.passos-bloco--escuro .passos__titulo { color: #fff; }
.passos-bloco--escuro .passos__intro { color: rgba(255,255,255,.82); }

.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(20px, 2.4vw, 34px) clamp(22px, 2.6vw, 38px);
  margin-top: clamp(30px, 3.2vw, 44px);
}

.passo { position: relative; padding-top: 22px; }
/* fio da marca no topo de cada item */
.passo::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
}
.passo:nth-child(3n)::before { background: linear-gradient(90deg, var(--sky), var(--mint)); }

.passo__num {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.passo__titulo {
  margin-top: 8px;
  font-size: var(--t4);
  line-height: 1.35;
  font-weight: 600;
  color: var(--titulo);
  text-wrap: balance;
letter-spacing: normal;
}
.passo__texto {
  margin-top: 10px;
  font-size: 15px;
  line-height: 26px;
  color: var(--muted);
}
.passos-bloco--escuro .passo__num { color: var(--mint); }
.passos-bloco--escuro .passo__titulo { color: #fff; }
.passos-bloco--escuro .passo__texto { color: rgba(255,255,255,.78); }

/* variante sem numeração, para listas de benefícios */
.passos--marcas .passo__num { display: none; }
.passos--marcas .passo__titulo { margin-top: 0; }

/* variante em cartão: para grades curtas de rótulo, como os valores,
   onde o fio sozinho deixa o bloco parecendo uma lista disfarçada */
.passos--cartoes { gap: clamp(12px, 1.2vw, 16px); }
.passos--cartoes .passo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.passos--cartoes .passo::before { display: none; }
.passos--cartoes .passo:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 8px 22px rgba(11, 47, 94, .08);
}
.passos--cartoes .passo__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #eef4fb;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--blue);
}
.passos--cartoes .passo__titulo { margin-top: 0; font-size: 16px; }
.passos--cartoes .passo__texto { margin-top: 4px; font-size: 14px; line-height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .passos--cartoes .passo:hover { transform: none; }
}

/* variante em cartão com ícone no topo, em anel fino — grade curta de
   orientações (3 colunas), quando cada item pede mais respiro do que o
   --cartoes (que é pensado pra listas de rótulo, uma linha só). */
.passos--icones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.passos--icones .passo {
  padding: clamp(22px, 2.2vw, 28px);
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.passos--icones .passo::before { display: none; }
.passos--icones .passo:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 14px 32px rgba(11, 47, 94, .10);
}
.passos--icones .passo__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--mint);
  border-radius: 50%;
  color: var(--green-texto);
}
.passos--icones .passo__titulo { margin-top: 16px; font-size: var(--t4); }
.passos--icones .passo__texto { margin-top: 8px; }

@media (max-width: 860px) {
  .passos--icones { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .passos--icones .passo:hover { transform: none; }
}

/* =========================================================
   CITAÇÃO EM BANDA — fala em destaque, sobre fundo escuro
   Usada no perfil da Carolina Maria de Jesus e onde houver
   uma frase que mereça virar peça gráfica.
   ========================================================= */
.citacao-bloco {
  position: relative;
  overflow: hidden;
  background: var(--navy-800);
  padding-block: clamp(54px, 6vw, 88px);
}
.citacao-bloco--claro { background: var(--bg-soft); }

/* aspas gigantes como marca d'água */
.citacao-bloco::before {
  content: "\201C";
  position: absolute;
  left: clamp(-20px, 1vw, 24px);
  top: clamp(-40px, -2vw, -10px);
  font-size: clamp(220px, 26vw, 380px);
  line-height: 1;
  font-weight: 700;
  color: var(--mint);
  opacity: .13;
  pointer-events: none;
}
.citacao-bloco--claro::before { color: var(--blue); opacity: .08; }

.citacao-bloco__inner { position: relative; z-index: 2; max-width: var(--w9); }

.citacao-bloco blockquote { margin: 0; }
.citacao-bloco p {
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.42;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: pretty;
}
.citacao-bloco cite {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--mint);
}
.citacao-bloco cite::before {
  content: "";
  width: 38px; height: 2px;
  background: var(--mint);
}

.citacao-bloco--claro p { color: var(--blue-ink); }
.citacao-bloco--claro cite { color: var(--blue); }
.citacao-bloco--claro cite::before { background: var(--blue); }

@media (max-width: 1024px) {
  .citacao-bloco__inner { max-width: none; }
}

/* =========================================================
   RESUMO — 3 fatos rápidos, num cartão que sobe por cima do
   hero interno (negative margin-top). Reutilizável em qualquer
   página de serviço que tenha 3 fatos curtos para destacar logo
   no topo.
   ========================================================= */
.resumo {
  position: relative;
  z-index: 8;
  margin-top: clamp(-96px, -8.4vw, -64px);
}
.resumo__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 2.8vw, 36px);
  background: #fff;
  box-shadow: 0 24px 60px rgba(11, 47, 94, .14);
  list-style: none;
}
.resumo__item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.resumo__ico {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--blue);
}
.resumo__titulo {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--titulo);
}
.resumo__texto {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .resumo { margin-top: -40px; }
  .resumo__lista { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* =========================================================
   CANAL — faixa de contato direto
   Para páginas que hoje são só "escreva para tal e-mail":
   vira um bloco com ícone, o dado em destaque e a ação.
   ========================================================= */
.canal-bloco {
  position: relative;
  background: var(--bg-soft);
  padding-block: clamp(44px, 4.8vw, 66px);
}
.canal-bloco--branco { background: var(--bg); }

.canal-bloco__grid { align-items: center; row-gap: 28px; }

.canal__copy { grid-column: span 5; }
.canal__caixa { grid-column: 7 / span 6; }

.canal__titulo {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--blue-ink);
  text-wrap: balance;
}
.canal__texto {
  margin-top: 14px;
  font-size: 16px;
  line-height: 27px;
  color: var(--muted);
}

.canal__caixa {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(26px, 2.8vw, 38px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
/* fio da marca no topo da caixa */
.canal__caixa {
  border-top: 3px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, var(--blue) 0%, var(--sky) 55%, var(--mint) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.canal__linha { display: flex; align-items: flex-start; gap: 16px; }
.canal__ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #eef4fb;
  color: var(--blue);
}
.canal__rotulo {
  font-size: var(--rotulo);
  font-weight: 600;
  letter-spacing: var(--rotulo-ls);
  text-transform: uppercase;
  color: var(--muted);
}
.canal__valor {
  margin-top: 4px;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.35;
  font-weight: 600;
  color: var(--blue-ink);
  word-break: break-word;
}
.canal__valor a { color: var(--blue); }
.canal__caixa .btn { align-self: flex-start; margin-top: 4px; }

@media (max-width: 1024px) {
  .canal__copy, .canal__caixa { grid-column: span 12; }
}

/* =========================================================
   COMPROMISSO — texto + cartão de destaque lado a lado.
   Usa a mesma textura de pontinhos do bloco "São Paulo conta com
   a Ecourbis" da home, bem discreta, atrás do cartão.
   ========================================================= */
.compromisso {
  position: relative;
  padding-block: clamp(48px, 5.4vw, 76px);
}
/* herda o respiro reduzido de logo após o hero, igual .prosa/.duplo */
.hero-int + .compromisso,
.resumo + .compromisso { padding-top: clamp(30px, 3.2vw, 44px); }

.compromisso__grid { align-items: center; }

.compromisso__copy { grid-column: 1 / span 7; }
.compromisso__title {
  font-size: var(--t2);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: var(--titulo-ls);
  color: var(--titulo);
}
.compromisso__folha {
  display: inline-block;
  vertical-align: -3px;
  margin-inline: 2px;
  color: var(--green-texto);
}
.compromisso__texto {
  max-width: var(--w6);
  margin-top: 16px;
  font-size: 16px;
  line-height: 27px;
  color: var(--muted);
}

.compromisso__destaque {
  position: relative;
  grid-column: 9 / span 4;
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--bg-soft);
  overflow: hidden;
}
.compromisso__destaque::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -4%;
  bottom: -8%;
  width: 150px;
  height: 150px;
  pointer-events: none;
  background-image: radial-gradient(rgba(31,107,69,.34) 2px, transparent 2px);
  background-size: 15px 15px;
}
.compromisso__ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-texto);
  color: #fff;
}
.compromisso__destaque-titulo {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  font-size: var(--t4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--titulo);
}
.compromisso__destaque-texto {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .compromisso__copy, .compromisso__destaque { grid-column: 1 / span 12; }
  .compromisso__destaque { margin-top: 28px; }
}

/* =========================================================
   AVISO — faixa de informação complementar, com ícone.
   ========================================================= */
.aviso { padding-block: clamp(8px, 1vw, 16px) clamp(40px, 4.4vw, 60px); }
.aviso__caixa {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 28px);
  background: var(--bg-soft);
}
.aviso__ico {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}
.aviso__texto {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate);
}
.aviso__texto strong { color: var(--titulo); }

@media (max-width: 600px) {
  .aviso__caixa { align-items: flex-start; }
}

/* =========================================================
   PAR — dois painéis grandes lado a lado, em contraste
   Para conteúdos que existem aos pares e se explicam juntos:
   missão e visão, antes e depois, dois programas.
   Um recurso só, no lugar de dois blocos duplo repetidos.
   ========================================================= */
.par-bloco {
  position: relative;
  background: var(--bg);
  padding-block: clamp(44px, 4.8vw, 68px);
}
.par-bloco--claro { background: var(--bg-soft); }

.par-bloco__titulo {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--blue-ink);
  text-wrap: balance;
}
.par-bloco__titulo + .par { margin-top: clamp(26px, 3vw, 40px); }

.par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}

.par__painel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(260px, 26vw, 340px);
  padding: clamp(30px, 3.4vw, 48px);
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
/* numeral gigante como marca d'água */
.par__painel::before {
  content: attr(data-marca);
  position: absolute;
  right: -.06em;
  bottom: -.32em;
  font-size: clamp(150px, 17vw, 250px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--blue);
  opacity: .06;
  pointer-events: none;
}

.par__painel--escuro {
  background: var(--navy-800);
  border-color: transparent;
}
.par__painel--escuro::before { color: var(--mint); opacity: .12; }

/* fio da marca no topo do painel */
.par__painel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--sky) 55%, var(--mint) 100%);
}

.par__rotulo {
  position: relative;
  z-index: 2;
  font-size: var(--rotulo);
  font-weight: 600;
  letter-spacing: var(--rotulo-ls);
  text-transform: uppercase;
  color: var(--blue);
}
.par__titulo {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--blue-ink);
  text-wrap: balance;
}
.par__texto {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  font-size: 16px;
  line-height: 28px;
  color: var(--muted);
}

.par__painel--escuro .par__rotulo { color: var(--mint); }
.par__painel--escuro .par__titulo { color: #fff; }
.par__painel--escuro .par__texto { color: rgba(255,255,255,.84); }

@media (max-width: 860px) {
  .par { grid-template-columns: 1fr; }
  .par__painel { min-height: 0; }
}

/* =========================================================
   SOBRE — teste de redesign (25/08/2026)
   Tudo aqui é escopado em body[data-pagina="sobre"] (o mecanismo que o
   projeto já usa para a home, não precisei criar uma classe nova no
   body). As seções usam os MESMOS componentes compartilhados de outras
   páginas (.numeros, .linha-tempo, .destaque, .duplo, .cards-bloco) —
   só sobrescrevo aqui, então nenhuma outra página muda.

   Sem border-radius em lugar nenhum deste arquivo (a pedido do Rafael):
   nem cards, nem imagem, nem caixa. Único arredondado que sobra na
   página é o ponto sobre a linha do tempo (já existia, é intencional —
   "pode existir um pequeno ponto sobre a linha").
   ========================================================= */

/* ---------- ritmo vertical: mais respiro entre seções ---------- */
body[data-pagina="sobre"] .numeros,
body[data-pagina="sobre"] .prosa,
body[data-pagina="sobre"] .linha-tempo,
body[data-pagina="sobre"] .duplo,
body[data-pagina="sobre"] .cards-bloco {
  padding-block: clamp(56px, 6.2vw, 90px);
}

/* =========================================================
   1. NÚMEROS — "Uma operação do tamanho de São Paulo"
   Já era uma linha contínua com divisores finos (sem cards), então a
   mudança é de escala e de um detalhe gráfico, não de estrutura.
   ========================================================= */
body[data-pagina="sobre"] .numeros__copy {
  position: relative;
  padding-left: 22px;
}
/* fio vertical da marca, only detail — não é decoração aleatória */
body[data-pagina="sobre"] .numeros__copy::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: linear-gradient(180deg, var(--blue), var(--green-texto));
}
body[data-pagina="sobre"] .numeros__title {
  font-size: clamp(30px, 2.7vw, 40px);
  line-height: 1.14;
  max-width: 13ch;
}
body[data-pagina="sobre"] .numeros__text { max-width: 34ch; }

body[data-pagina="sobre"] .numeros__num { color: var(--blue-ink, var(--blue)); }
/* detalhe verde: um traço curto embaixo do rótulo, não um ícone */
body[data-pagina="sobre"] .numeros__label {
  position: relative;
  padding-top: 14px;
}
body[data-pagina="sobre"] .numeros__label::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 2px;
  background: var(--green-texto);
}

/* =========================================================
   2. TEXTO INSTITUCIONAL — texto + mosaico de 3 fotos
   25/08/2026, 2ª rodada: o Rafael achou o bloco só-de-texto vazio e
   pediu o mesmo tipo de grade de fotos que já existe em "Por pessoas,
   para pessoas" da home. Reaproveitei o MESMO truque de altura explícita
   (--foto-h), não o `1fr 1fr` do grid — foi o `1fr 1fr` que quebrou o
   espaçamento das fotos da home quando mexi na proporção lá (ver
   CLAUDE.md), então aqui já nasce sem esse risco.
   ========================================================= */
body[data-pagina="sobre"] .prosa__grid {
  --foto-h: clamp(340px, 24vw, 420px);
  --foto-vao: 18px;
  row-gap: var(--foto-vao);
  align-items: center;
}
body[data-pagina="sobre"] .prosa__copy { grid-column: 1 / span 5; }
body[data-pagina="sobre"] .prosa__copy p {
  font-size: 16px;
  line-height: 28px;
  color: var(--muted);
}
body[data-pagina="sobre"] .prosa__copy p + p { margin-top: 20px; }
body[data-pagina="sobre"] .prosa__copy p strong { color: var(--titulo); }

body[data-pagina="sobre"] .prosa__video {
  grid-column: 6 / span 7;
  margin: 0;
  align-self: center;
}
body[data-pagina="sobre"] .prosa__video .vsl { aspect-ratio: 16 / 8.6; }
body[data-pagina="sobre"] .prosa__legenda {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

@media (max-width: 1024px) {
  body[data-pagina="sobre"] .prosa__copy,
  body[data-pagina="sobre"] .prosa__video { grid-column: 1 / span 12; }
  body[data-pagina="sobre"] .prosa__copy { margin-bottom: 8px; }
}

/* =========================================================
   3. NOSSA HISTÓRIA — linha do tempo, mais espaço, ano maior,
   ponto menor, grafismo em pontinhos bem discreto no fundo (o
   mesmo recurso já usado no bloco "São Paulo conta com a
   Ecourbis" da home — não é ilustração nova).
   ========================================================= */
body[data-pagina="sobre"] .linha-tempo { position: relative; overflow: hidden; }
body[data-pagina="sobre"] .linha-tempo::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 4%;
  bottom: 10%;
  width: 220px;
  height: 220px;
  pointer-events: none;
  background-image: radial-gradient(rgba(31,107,69,.16) 1.6px, transparent 1.6px);
  background-size: 16px 16px;
}
body[data-pagina="sobre"] .linha-tempo > .wrap { position: relative; z-index: 1; }
body[data-pagina="sobre"] .linha-tempo__title {
  text-align: left;
  font-size: var(--t2);
}
body[data-pagina="sobre"] .marcos { margin-top: 60px; gap: clamp(20px, 3vw, 40px); }
body[data-pagina="sobre"] .marco { padding-top: 34px; }
body[data-pagina="sobre"] .marco::before { width: 9px; height: 9px; top: 4px; }
body[data-pagina="sobre"] .marco__ano {
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 700;
  color: var(--titulo);
}
body[data-pagina="sobre"] .marco--verde .marco__ano { color: var(--mint); }
body[data-pagina="sobre"] .marco--verde::before { background: var(--mint); }
body[data-pagina="sobre"] .marco__texto { padding-right: 6px; }

/* =========================================================
   4. DESTAQUE — "Presença que transforma São Paulo"
   Texto mais estreito (mais cinematográfico), sem mudar a foto
   nem o mecanismo de scrim (só a largura do texto).
   ========================================================= */
body[data-pagina="sobre"] .destaque__title,
body[data-pagina="sobre"] .destaque__text { max-width: 38ch; }
body[data-pagina="sobre"] .destaque__inner { padding-block: clamp(64px, 7vw, 100px); }

/* =========================================================
   5. VIVEIRO ECOÍRIS — "mais de 180 mil mudas entregues"
   Duplo já é sem radius e ~50/50 (6/12 foto, 5/12 texto); só o
   destaque de cor no número muda.
   ========================================================= */
body[data-pagina="sobre"] .duplo__title-destaque { color: var(--mint); }
body[data-pagina="sobre"] .duplo__media img { aspect-ratio: 4 / 3; }

/* =========================================================
   6. CONTINUE CONHECENDO A EMPRESA — cards editoriais
   Sem radius, sem sombra, sem borda em volta: só uma linha fina
   embaixo da imagem e o traço verde perto do link.
   ========================================================= */
body[data-pagina="sobre"] .cards-titulo {
  font-size: var(--t2);
  max-width: 20ch;
}
body[data-pagina="sobre"] .card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
body[data-pagina="sobre"] .card:hover,
body[data-pagina="sobre"] .card:focus-within {
  transform: none;
  box-shadow: none;
}
body[data-pagina="sobre"] .card__media { border-bottom: 3px solid var(--green-texto); }
body[data-pagina="sobre"] .card__media img { aspect-ratio: 4 / 3; }
body[data-pagina="sobre"] .card:hover .card__media img { transform: none; }
body[data-pagina="sobre"] .card__corpo { padding: 20px 2px 0; }
body[data-pagina="sobre"] .card__titulo { font-size: var(--t3); }
body[data-pagina="sobre"] .card__link { color: var(--titulo); font-weight: 600; }

/* ---------- mobile: nada de overflow, empilha tudo ---------- */
@media (max-width: 700px) {
  body[data-pagina="sobre"] .numeros__copy { padding-left: 16px; }
  body[data-pagina="sobre"] .linha-tempo::before { display: none; }
}

/* =========================================================
   COLETA DOMICILIAR — estilos inline (importado do Claude Design).
   O HTML usa inline styles; este arquivo fica vazio.
   ========================================================= */