/* ============================================================
   Hcor · Relatório de Sustentabilidade 2025
   Paleta e tipografia extraídas do design Figma
   ============================================================ */

/* ============================================================
   Fontes — UMA só: Figtree (SIL OFL), auto-hospedada.

   O design do Figma usa TT Norms Pro (sans) + Better Times (script), mas o
   Hcor só tem a licença DESKTOP das duas — que proíbe servi-las como webfont.
   A TT Norms Pro virou Figtree (geométrica, x-height alto).

   ⚠️ NÃO existe fonte cursiva no projeto, e isso é uma DECISÃO, não um vazio a
   preencher. A Better Times chegou a ser substituída pela Parisienne, mas o
   cliente preferiu tirar a cursiva de vez: uma script de licença aberta que
   não é a da marca afasta a peça da identidade do Hcor mais do que uma sans
   neutra afasta. Os três momentos que eram script (o "2025" do hero, as abas
   dos Destaques e a assinatura do fechamento) fazem hoje o mesmo contraste
   com PESO (Light 300 contra o bold), não com forma. Não reintroduzir uma
   cursiva "para ficar mais parecido com o Figma".

   ⚠️ NÃO reintroduzir as TT Norms Pro / Better Times aqui sem a licença web.

   A Figtree é VARIÁVEL: um arquivo cobre a faixa 300–800 inteira, então os
   pesos usados no projeto (300/400/500/700/800 + itálicos) saem de 2 arquivos
   — e todos são desenhados, nenhum é sintetizado pelo navegador.
   Os pares latin / latin-ext são os subsets do Google Fonts; o unicode-range
   faz o browser baixar o latin-ext só se a página usar algum caractere dele.
   ============================================================ */
@font-face {
  font-family: 'Figtree';
  src: url('assets/fonts/figtree-latin-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  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: 'Figtree';
  src: url('assets/fonts/figtree-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  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: 'Figtree';
  src: url('assets/fonts/figtree-italic-latin-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
  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: 'Figtree';
  src: url('assets/fonts/figtree-italic-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
  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;
}

:root {
  --azul-1: #1d68aa;   /* Hcor Azul 1  */
  --azul-2: #0e5383;   /* Hcor Azul 2  */
  --azul-excelencia: #3378b9; /* Fundo seção Excelência (pílulas = --azul-1) */
  --azul-claro: #86cee4;
  --rosa: #e25c79;     /* Hcor Rosa    */
  --roxo: #5e4e9c;     /* Hcor Roxo    */
  --amarelo: #f5b72c;  /* Governança   */
  --teal: #63c0cb;
  --verde: #4e9e7e;    /* Ambiental    */
  --verde-esc: #3d8168;
  --creme: #f8f1eb;
  --creme-2: #f3ebe1;
  --hero-beige: #ffeedf;
  --branco-azul: #f2f6f9;
  --preto: #1d1d1b;
  --coral-1: #f5a25c;
  --coral-2: #ec7f74;

  --salmao: #f6ad79;      /* Hcor Salmão — cards / abas       */
  --verde-gov: #448758;   /* Card "Gestão Sustentável"        */
  --amarelo-amb: #fcb525; /* Destaques das abas de Ambiental  */
  --roxo-claro: #7665bb;  /* Proadi — painel aberto           */
  --roxo-pill: #8474c2;   /* Proadi — pílulas                 */
  --roxo-fechado: rgba(145, 131, 199, .75); /* Proadi fechado */

  --sans: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --container: 1200px;
  --destaques-width: 1197px;
  --header-h: 96px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  font-family: var(--sans);
  color: var(--preto);
  background: #fff;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 700; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}

.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;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s ease, transform .7s ease;
}
/* Slide lateral: o modificador troca o translateY padrão por um translateX.
   `.reveal.is-visible` (0,2,0) vence os modificadores (0,1,0) e zera o transform. */
.reveal--left  { transform: translateX(-70px); }
.reveal--right { transform: translateX(70px); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--left, .reveal--right { transition: none; transform: none; }
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  border-radius: 30px;
  padding: 13px 26px;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
  border: 1.5px solid var(--azul-2);
}
.btn-outline { background: var(--creme); color: var(--azul-2); }
.btn-outline:hover { background: var(--azul-2); color: #fff; transform: translateY(-2px); }

/* ============================================================
   HEADER / MENU
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: #fff;
  z-index: 100;
  transition: box-shadow .3s ease, height .3s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.08); }

.header-inner {
  height: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 34px; width: auto; }
.brand-50 { height: 34px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.main-nav a {
  color: var(--azul-1);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.15;
  white-space: nowrap;
  transition: color .2s ease;
}
/* Fantasma em bold: reserva a largura do :hover, senão bolar um link empurra os
   vizinhos e a linha inteira treme. `data-label` vive no HTML, em cada <a>. */
.main-nav a::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}
.main-nav a:hover,
.main-nav a.active { color: var(--azul-2); font-weight: 700; }

.menu-toggle {
  display: block;
  margin-left: 24px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.menu-toggle img { width: 28px; height: auto; }

/* ---------- Barra compacta (hambúrguer) ----------
   Não é um breakpoint fixo: o `script.js` compara a largura natural da nav com o
   espaço livre da barra e liga `.is-compact` quando os links deixam de caber ao
   lado do logo (hoje por volta de 870px — mas o ponto se move sozinho se um
   rótulo ou a fonte mudarem, que era o furo do antigo `@media (max-width: 820px)`:
   a nav já estourava a barra a partir de 860px e o hambúrguer só entrava em 820px).
   O hambúrguer é visível sempre (nó 2:2011): na barra larga ele volta ao topo da
   página; aqui, com os links fora da linha, volta a abrir o off-canvas. */
.site-header.is-compact .main-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: #fff;
  padding: 10px 22px 20px;
  box-shadow: 0 12px 24px rgba(0,0,0,.1);
  transform: translateY(-140%);
  transition: transform .35s ease;
  z-index: 99;
}
.site-header.is-compact .main-nav.open { transform: none; }
.site-header.is-compact .main-nav a {
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}
.site-header.is-compact .main-nav a::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .site-header.is-compact .main-nav { transition: none; }
}

/* ============================================================
   HERO / CAPA
   ============================================================ */
/* O `padding-top` é o que mantém a foto fora do alcance da barra fixa: sem ele o
   hero começa em y=0 e o header (branco, opaco) cobre os ~29px onde está a cabeça
   da criança. Em % (os ~100px de bege do nó 2:1956) a folga encolheria com a tela
   e a cabeça voltaria para baixo da barra; em `--header-h` ela nunca encosta. */
.hero {
  padding-top: var(--header-h);
  background: var(--hero-beige);
  overflow: hidden;
}
/* Geometria do PNG hero-baby.png (4096×2340): o frame usa a mesma proporção
   da foto (~1440 × 822) para encaixá-la inteira, no maior tamanho possível. */
.hero-frame {
  position: relative;
  aspect-ratio: 4096 / 2340;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/* Título (nós 2:1959/2:1958): y≈377 de 950 — menos os 96px do header, que agora
   vêm antes da foto, dão os 281px daqui até o topo do frame. */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(60px, 19.51vw, 281px);
}
.hero-title { line-height: 1.05; max-width: 569px; }
.hero-title span { display: block; }
.hero-title .l1 { font-size: clamp(34px, 4.4vw, 64px); font-weight: 500; color: var(--azul-2); }
.hero-title .l2 { font-size: clamp(26px, 3.4vw, 48px); font-weight: 800; color: var(--azul-2); letter-spacing: .5px; }
/* O "2025" era a Better Times (script) no Figma. Sem cursiva no projeto, quem
   faz o contraste com o SUSTENTABILIDADE em ExtraBold é o PESO: Light 300.

   ⚠️ O tamanho NÃO é o 128px do Figma: aquele valor era da métrica da script.
   Os dígitos da Figtree são bem mais altos dentro do em, então o corpo cai
   para reproduzir a ALTURA DE TINTA do design (214 × 75px em 1440px, medidos
   na Better Times). `font-size` de display não se transfere entre fontes —
   se a fonte mudar, medir a tinta de novo, não converter o número. */
.hero-title .l3 {
  font-size: clamp(62px, 7.2vw, 104px);
  font-weight: 300;
  color: var(--rosa);
  line-height: 1;
  margin-top: 14px;
}
/* Nó 2:1957: x≈102 / largura 434,5px; 261px abaixo da base do "2025" (950px),
   escalado ao frame nativo (~822px). */
.hero-caption {
  margin-top: clamp(20px, 15.69vw, 226px);
  max-width: 434.5px;
  font-size: 15px;
  font-weight: 300;
  line-height: normal;
  color: var(--preto);
}

/* ============================================================
   O HCOR
   ============================================================ */
.section-blue-title { color: var(--azul-1); font-weight: 700; font-size: clamp(38px, 5vw, 58px); line-height: 1.05; }
.section-blue-title.sm { font-size: clamp(26px, 3vw, 34px); margin-bottom: 14px; }

.o-hcor {
  position: relative;
  z-index: 2;
  padding: 0;
  overflow: visible;
  background: #fff;
}
/* Geometria do nó 2:1950 (frame 1295 × 1096 numa prancheta de 1440).
   Tudo em % / vw da prancheta para escalar junto:
   foto x0 w830 h1096 · título x830 y213 · texto x833 y303 w462.
   A faixa branca tem 748px; a foto (1096) ultrapassa o restante para dentro da seção 4.
   O PNG predio-hcor.png é 2362×2362 (fonte inteira); o frame 830×1096 (nó 2:1953)
   interpola o crop conforme o zoom: 110% numa tela 1440 (vw≈1309) = enquadramento
   Figma; ao diminuir o zoom a arte vai abrindo até 100%/left 0 em vw≥1440. */
.o-hcor-inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  min-height: min(748px, 51.94vw);
}
.o-hcor-photo {
  position: absolute;
  left: min(0px, calc((1440px - 100vw) / 2)); /* encosta na borda esquerda da página */
  top: 0;
  width: 57.64%;        /* 830 / 1440 */
  aspect-ratio: 830 / 1096;
  overflow: hidden;
  z-index: 2;
  line-height: 0;
}
.o-hcor-photo img {
  position: absolute;
  display: block;
  max-width: none;
  /* t=1 em vw≤1309 (110% numa tela 1440) · t=0 em vw≥1440 (100% zoom) */
  --t: clamp(0, 1, (1440px - 100vw) / 131px);
  width: calc(100% + 44.23% * var(--t));
  height: calc(100% + 9.17% * var(--t));
  left: calc(-44.23% * var(--t));
  top: calc(-9.17% * var(--t));
  transition: width 0.12s linear, height 0.12s linear, left 0.12s linear, top 0.12s linear;
}
@media (prefers-reduced-motion: reduce) {
  .o-hcor-photo img { transition: none; }
}
.o-hcor-text {
  position: absolute;
  left: 57.85%;                 /* 833 / 1440 */
  top: min(213px, 14.79vw);     /* topo do título */
  width: clamp(320px, 32.08%, 462px);
  z-index: 1;
  color: var(--preto);
}
.o-hcor-text .section-blue-title {
  font-size: clamp(38px, 3.97vw, 57.2px);
  line-height: 50px;
  margin-bottom: 40px;          /* título em y213 + texto em y303 */
}
.o-hcor-text .lead {
  font-weight: 700;
  font-size: 23.4px;
  line-height: 1.25;
  color: var(--preto);
  margin: 0 0 20px;
}
.o-hcor-text p { font-size: 18.75px; line-height: 1.3; color: var(--preto); }

/* ============================================================
   EXCELÊNCIA DE ATENDIMENTO
   ============================================================ */
.excelencia {
  position: relative;
  z-index: 1;
  background: var(--azul-excelencia);
  color: #fff;
  /* 90px base + ~198px extras: faixa branca do Hcor caiu para 748px e a foto
     (1096) agora ultrapassa ~348px — o padding empurra o título para fora da curva. */
  padding: clamp(120px, 19.44vw, 288px) 0 100px;
}
/* No Figma o bloco tem 1294px e começa em x=124 (vai até 1418 de 1440): não é
   centralizado como o container padrão — ele sangra à direita, onde os pontos continuam. */
.excelencia-inner {
  position: relative;
  max-width: 1440px;
  padding-left: clamp(22px, 8.61vw, 124px);
  padding-right: clamp(16px, 1.53vw, 22px);
}

/* Sem min-height: os pontos são absolutos e passam POR TRÁS das barras, como no Figma */
.excelencia-head {
  position: relative;
  margin-bottom: clamp(48px, 7vw, 100px);
}
.excelencia-dots {
  position: absolute;
  top: 0;
  right: 3.93%;
  width: 48.53%;
  height: auto;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.excelencia-title {
  position: relative;
  z-index: 1;
  margin-left: 37%;
  font-size: clamp(34px, 4.4vw, 57.2px);
  font-weight: 700;
  line-height: 50px;
  text-align: left;
  white-space: nowrap;
}

/* ---------- Barras de dados (nó 2:7062) ----------
   Medidas em % da barra (1215,4 × 131px num frame de 1294) para escalarem juntas.
   As barras ficam acima dos pontos decorativos. */
.exc-bars {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.exc-bar {
  width: 93.93%;
  min-height: 131px;
  display: grid;
  grid-template-columns: 23.24% 1fr;
  align-items: center;
  padding: 18px 0 18px 3.48%;
  border-radius: 100px;
  background: var(--azul-1);
}
.exc-bar:nth-child(2) { transition-delay: .12s; }
.exc-bar:nth-child(3) { transition-delay: .24s; }

.exc-bar-title {
  font-size: 29.2px;
  font-weight: 700;
  line-height: 1.15;
}
.exc-bar-stats {
  display: grid;
  grid-template-columns: repeat(4, 20.55%);
  align-items: start;
}
.exc-stat { padding-right: 30px; }
.exc-stat strong {
  display: block;
  font-size: 23.4px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--azul-claro);
}
.exc-stat span { font-size: 18.75px; line-height: 1.25; }

/* A 3ª barra tem um parágrafo corrido no lugar das 4 colunas */
.exc-bar--text .exc-bar-stats { display: block; }
.exc-bar-text {
  max-width: 73.4%;
  font-size: 18.75px;
  line-height: 1.4;
}
.exc-bar-text strong {
  font-size: 23.4px;
  font-weight: 700;
  color: var(--azul-claro);
}

.multiesp { margin-top: clamp(48px, 6vw, 80px); }
.multiesp-title {
  font-size: 29.2px;
  font-weight: 700;
  margin-bottom: 37px;
  text-transform: lowercase;
}
.multiesp-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px clamp(12px, 2vw, 24px);
  max-width: 1172px;
}
/* `min-width: 0`: sem isso o item trava no min-content (ícone + "Diagnóstica") e a
   grade estoura a viewport em vez de deixar o rótulo quebrar em duas linhas. */
.multiesp-grid li {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 28px;
  min-width: 0;
}
.multiesp-grid span {
  font-size: 23.4px;
  font-weight: 500;
  line-height: 1.2;
}
.multiesp-icon {
  position: relative;
  width: 69px;
  height: 67px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.multiesp-circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.multiesp-picto {
  position: relative;
  z-index: 1;
  width: 52%;
  height: auto;
  max-height: 58%;
  object-fit: contain;
}

/* ============================================================
   Cabeçalhos de seção numeradas
   ============================================================ */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 8px; }
.sec-head--center { align-items: center; text-align: center; }
/* Figma: TT Norms Pro Light 32px — traço fino e dígitos altos. */
.sec-num { font-size: 32px; font-weight: 300; line-height: 1.1; letter-spacing: 0; opacity: 1; }
.sec-title { font-size: clamp(34px, 4.6vw, 56px); font-weight: 700; line-height: 1; }

/* ============================================================
   01 · TRAJETÓRIA DO CUIDADO
   ============================================================ */
.trajetoria { background: #fff; }
.trajetoria-photo { height: 1000px; }
.trajetoria-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.trajetoria-body {
  color: #fff;
  /* Figma node 2:1919 — gradiente vertical, cor final atingida a 90,2% da altura */
  background: linear-gradient(180deg, #f7ad79 0%, #e35d7a 90.2%);
  padding-top: 70px;
}
/* Medidas do Figma (prancheta 1440): a coluna de conteúdo vai de x=122 a x=1319,
   ou seja 1197px — a mesma largura dos Destaques, e não os 1120px do `.container`. */
.trajetoria-body > .container {
  width: min(var(--destaques-width), calc(100% - 48px));
  max-width: var(--destaques-width);
  padding: 0;
}
/* "01" (Light 32px) e título ficam centrados, com 16px entre eles (nós 2:1944/2:1945). */
.trajetoria .sec-head { color: #fff; gap: 16px; margin-bottom: 0; }
.trajetoria .sec-title {
  font-size: clamp(34px, 4.4vw, 57.2px);
  font-weight: 700;
  line-height: 50px;
}
/* Subtítulo (nó 2:1942): Bold 36,6px, alinhado à esquerda; 69px abaixo do título e
   46px acima do ícone da coluna esquerda. */
.traj-subtitle {
  font-size: clamp(24px, 3.05vw, 36.6px);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  margin: 69px 0 46px;
}
/* Colunas do Figma: 466px | gap 20px | 711px (nós 2:1938 e 2:1937). */
.traj-cols {
  display: grid;
  grid-template-columns: 466fr 711fr;
  column-gap: 20px;
  padding-bottom: 20px;
}
/* O texto da direita começa 23px abaixo do topo do ícone. */
.traj-cols > :last-child { padding-top: 23px; }
/* O ícone recua 6px à esquerda do texto no Figma (x=116 vs. x=122). */
.traj-icon { width: 61px; height: 63px; margin: 0 0 13px -6px; }
.traj-cols p { color: rgba(255,255,255,.95); margin-bottom: 20px; font-size: clamp(15px, 1.56vw, 18.75px); line-height: 1.45; }
/* Depois de `.traj-cols p` — mesma especificidade, mas precisa vencer o tamanho acima. */
.traj-cols .traj-lead {
  color: #fff;
  font-weight: 700;
  font-size: clamp(18px, 1.95vw, 23.4px);
  line-height: 1.25;
  margin-bottom: 0;
}

/* Destaques — painel com abas integradas (Figma node 2:3657) */
.destaques {
  --destaques-gov: #f6ad79;
  --destaques-soc: #e25c79;
  --destaques-amb: #87cfe5;
  padding: 50px 0 70px;
}
.destaques-inner {
  width: min(var(--destaques-width), calc(100% - 48px));
  max-width: var(--destaques-width);
  margin: 0 auto;
}
.destaques-shell {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0;
}
.destaques-title {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  font-size: 34px;
  font-weight: 700;
  padding-bottom: 10px;
}
.destaques-tabs {
  grid-column: 2 / 5;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.destaques-tab-spacer { display: none; }
/* As labels eram script 48px no Figma. Numa sans, 48px pesa demais para uma aba:
   o rótulo passa a 34px. O peso é 700 (a pedido do cliente, para os títulos das
   abas baterem com o do rótulo "Destaques" e com os títulos dos demais boxes do
   site — antes ficava em Light 300 e destoava).
   ⚠️ O `padding` mantém a faixa de abas nos MESMOS 66px de altura: o bloco dos
   Destaques inteiro depende disso (276px, com o painel de 210px embaixo). O peso
   não muda a altura; se mexer no `font-size`, refaz a conta:
   altura da faixa = font-size + padding-top + padding-bottom. */
.destaques-tab {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  border: 0;
  cursor: pointer;
  padding: 18px 12px 14px;
  border-radius: 15px 15px 0 0;
  opacity: 0.25;
  transition: opacity 0.25s ease;
}
.destaques-tab--gov { background: var(--destaques-gov); }
.destaques-tab--soc { background: var(--destaques-soc); }
.destaques-tab--amb { background: var(--destaques-amb); }
.destaques-tab.is-active { opacity: 1; }
.destaques-tab:not(.is-active):hover { opacity: 0.45; }

/* Painel dos Destaques — nós 2:3658 / 2:3670 / 2:3681: as três variantes têm
   exatamente 1197 × 270px, ou seja, a label não muda de tamanho ao trocar de aba.
   Por isso os 3 painéis ficam empilhados na MESMA célula do grid (todos ocupam
   espaço, e a caixa fica com a altura do maior); o inativo é escondido com
   `visibility` + `opacity`, e não com `display: none`, que o tiraria do fluxo. */
.destaques-panel {
  grid-column: 1 / 5;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 30px;
  background: var(--destaques-gov);
  border-radius: 0 0 10px 10px;
  /* 194px = os 270px do nó menos os 79px da faixa de abas (inset 29,26%). */
  min-height: 194px;
  padding: 18px 24px 21px;
  /* O texto é centrado na vertical pela célula do grid, não por um flex no próprio <p>:
     um <p> flex transforma cada filho inline (o <sup> da nota, o <span> do rodapé) num
     item de flex, e a chamada "¹" ia parar numa linha só dela. */
  align-items: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.destaques-panel.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
.destaques-panel[data-destaques-panel="gov"] { background: var(--destaques-gov); }
.destaques-panel[data-destaques-panel="soc"] { background: var(--destaques-soc); }
.destaques-panel[data-destaques-panel="amb"] { background: var(--destaques-amb); }
/* Social tem 3 textos (não 4) e no nó eles ocupam a largura toda em colunas quase
   iguais — 351 / 379 / 351px —, e não 25% / 50% / 25%. */
.destaques-panel[data-destaques-panel="soc"] { grid-template-columns: 351fr 379fr 351fr; }
.destaques-panel p {
  color: #fff;
  font-size: 18.75px;
  /* `normal` (≈1,2), como no nó — com 1,35 o texto ganhava ~10% de altura e a label
     esticava para além dos 270px do design. */
  line-height: normal;
  text-align: center;
  padding: 0;
  margin: 0;
}
.destaques-footnote {
  display: block;
  font-size: 13px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.35;
  margin-top: 14px;
}
.destaques-footnote em { font-style: italic; font-weight: 300; }

/* Reconhecimentos — Figma node 2:1920 */
/* Sem fundo próprio: o gradiente de .trajetoria-body corre contínuo até o fim da seção. */
.reconhecimentos {
  padding: 36px 0 88px;
  position: relative;
}
.reconhecimentos-inner {
  width: min(1312px, calc(100% - 48px));
  max-width: 1312px;
  margin: 0 auto;
}
/* A arte (reco-forma.png, 2:1) traz margens transparentes próprias: o miolo branco
   vai de 3,8%–99% na horizontal e 12,1%–83,2% na vertical.
   `50vw + 50%` é a distância da borda esquerda do container até a borda direita da
   janela; com o fator 1.06 e o recuo de 3,8% (a margem transparente da arte), o miolo
   encosta na esquerda do container e passa da borda direita da página, sendo cortado
   por ela — como no Figma. Nessa escala, a borda direita da janela cai sempre a
   98,1% da forma, qualquer que seja a largura (usado nos recuos abaixo). */
.reco-stage {
  position: relative;
  width: calc((50vw + 50%) * 1.06);
  margin-left: calc((50vw + 50%) * -0.0403);
}
/* A arte é 2:1, o que sobra em branco embaixo dos cards. Aqui ela é achatada na
   vertical (object-fit padrão de <img> é `fill`) para 2,5:1 — a forma é orgânica e
   absorve bem o achatamento. Os recuos abaixo são % desta altura já reduzida. */
.reco-shape {
  width: 100%;
  height: auto;
  aspect-ratio: 2.4 / 1;
  display: block;
  pointer-events: none;
  user-select: none;
}
/* Selo e título (nós 2:1922 / 2:1923): na faixa transparente acima do miolo branco
   (que começa a 12,1% da altura da arte). O selo cavalga a borda superior do miolo e
   o título fica inteiro sobre o gradiente. Medidas em % da forma, para escalarem. */
.reco-head {
  position: absolute;
  top: 2.3%;
  left: 1.5%;
  width: 98.5%;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 1.4%;
}
/* 8,8% (era 9,7%): a forma está achatada em `aspect-ratio: 2.4/1`, o que tirou ~17% da
   altura útil — mas o selo, dimensionado pela largura, não encolheu junto, e acabava
   colado no título e no logo do 1º card. */
.reco-medal {
  width: 8.8%;
  height: auto;
  flex: 0 0 auto;
}
.reco-head h3 {
  color: #fff;
  font-size: clamp(24px, 2.79vw, 36.6px);
  font-weight: 700;
  line-height: 1;
  margin-top: 0.9%;   /* sobe o título, abrindo respiro entre ele e a curva da forma */
}
/* Área útil: começa dentro do miolo e termina exatamente na borda direita da janela
   (98,1% da forma), de modo que o card seguinte fica cortado pela borda da página,
   como no Figma. É esse recuo que define quantos cards cabem (~4,5). */
.reco-body {
  position: absolute;
  /* 9%: a fita do nó 2:1930 começa em x=201 numa forma que começa em x=128 — ou seja,
     ~77px para dentro do miolo branco. Com 6% o 1º texto encostava na borda do miolo. */
  left: 9%;
  right: 1.9%;
  /* Os cards começam abaixo do selo, que mergulha no miolo branco, e a faixa fica
     centrada no espaço que sobra. */
  top: 28%;
  bottom: 24%;
  z-index: 2;
}
.reco-track {
  display: flex;
  gap: 0;
  overflow: hidden;
  scroll-behavior: smooth;
  height: 100%;
  align-items: stretch;
}
/* Cada card ocupa ~295px dos 1239px visíveis no Figma (pitch entre os "Prêmio N"),
   com o texto encostado à esquerda, logo acima e sem divisores — o card seguinte é
   cortado pela borda da página. */
.reco-card {
  flex: 0 0 22.2%;
  /* % de padding resolve contra a largura da FITA (não do card): 3,15% ≈ os 42px de
     folga entre os 253px de texto e os 295px de passo do Figma. `min-width: 0` impede
     que uma palavra longa (min-content) estufe o card e quebre o passo. */
  min-width: 0;
  padding: 0 3.15% 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
  position: relative;
}
.reco-logo {
  width: auto;
  height: clamp(56px, 6vw, 86px);
  max-width: 100%;
  object-fit: contain;
  flex: 0 0 auto;
}
.reco-logo--tall { height: clamp(57px, 6.05vw, 87px); }
.reco-logo--wide { height: clamp(57px, 6.05vw, 87px); max-width: 93px; }
.reco-logo--round { height: clamp(52px, 5.5vw, 79px); }
.reco-logo--dual { height: clamp(47px, 4.9vw, 71px); max-width: 142px; }
/* Figma: corpo TT Norms Pro Regular 18,75px; destaques em Bold 23,4px azul. */
.reco-card p {
  font-size: clamp(14px, 1.3vw, 18.75px);
  line-height: 1.3;
  color: var(--preto);
  max-width: none;
  margin: 0;
}
.reco-card b {
  color: var(--azul-1);
  font-weight: 700;
  font-size: clamp(17px, 1.63vw, 23.4px);
  line-height: 1.25;
}

/* Fora da .reco-body (que sangra para fora da página).
   ⚠️ Os seletores levam a classe duas vezes (`.carousel-dots.carousel-dots--reco`) de
   propósito: com `.carousel-dots--reco button` a especificidade é a mesma (0,1,1) de
   `.carousel-dots button`, que vem **depois** no arquivo e vencia — estas regras eram
   código morto, e os pontos saíam com a pílula azul do estilo genérico.
   Eixo: a caixa começa junto com a pista (9%) e tem largura tal que o centro do grupo
   cai no **vão entre o 2º e o 3º card** — a pedido. Como o card é `flex: 0 0 22.2%` da
   pista, esse vão fica a ~42,8% dela; daí a largura de 2 × 42,8% ≈ 85,6% da pista, que
   em % do palco (a pista ocupa 89,1% dele) dá os 76,3% abaixo.
   As proporções verticais do nó não valem aqui porque a forma está achatada em 2.4/1. */
.carousel-dots.carousel-dots--reco {
  position: absolute;
  left: 9%;           /* mesmo eixo da `.reco-body` */
  right: auto;
  width: 76.3%;
  bottom: 22.5%;
  gap: 17px;          /* 16,67px no nó 2:6779 */
  margin-top: 0;
  padding-top: 0;
  z-index: 2;
}
/* Nó 2:6779: três círculos de 10px do **mesmo tamanho** — o ativo só muda de cor. */
.carousel-dots.carousel-dots--reco button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: #efa6b5;
  cursor: pointer;
  transition: background .2s;
}
.carousel-dots.carousel-dots--reco button.active {
  width: 10px;
  border-radius: 50%;
  background: var(--rosa);   /* #e25c79 */
}
/* Setas do reco: só existem no mobile (posicionadas no bloco @820). No desktop a
   navegação é por pontos, como no design aprovado — as setas ficam ocultas. */
.reco-arrow { display: none; }

.carousel-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--azul-1);
  background: #fff;
  color: var(--azul-1);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  align-self: center;
  transition: background .2s, color .2s;
}
.carousel-btn:hover { background: var(--azul-1); color: #fff; }

.carousel-dots { display: flex; gap: 8px; justify-content: center; margin-top: 26px; }
.carousel-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: #cfcfcf; cursor: pointer; transition: background .2s, width .2s; }
.carousel-dots button.active { background: var(--azul-1); width: 24px; border-radius: 6px; }

/* ============================================================
   02 · GOVERNANÇA
   ============================================================ */
.governanca { background: #fff; }
.gov-hero { background: var(--amarelo); padding-bottom: 129px; }
/* O nó da forma no Figma é mais largo que a prancheta (1556px p/ 1440px):
   escala e recorta para o excedente ficar fora do container.
   ⚠️ `gov-hero-shape.png` foi exportado com o fundo BRANCO OPACO (0% de pixels
   transparentes — mesmo artefato do mapa do Brasil). A forma orgânica vem da
   máscara `gov-hero-mask.svg` (path do clip do nó 2:1908), que recorta o branco
   e deixa o amarelo da seção aparecer, como no Figma. */
.gov-hero-photo { line-height: 0; overflow: hidden; }
.gov-hero-photo img {
  width: 108.1%;
  max-width: none;
  /* 20% mais baixa que a forma do Figma (770px → 616px), mantendo o full-bleed:
     a foto é RECORTADA (cover, ancorada na base — o topo é só parede), nunca
     espremida. A máscara usa o mesmo recorte (viewBox começa em y=154,2), senão
     o branco queimado do PNG sai de registro com a curva e vaza pelas bordas. */
  aspect-ratio: 1556.03 / 616.27;
  height: auto;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  margin-left: -0.07%;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20154.2%201557%20616.8%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22foto%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%221440%22%20height%3D%22771%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20clip-path%3D%22url(%23foto)%22%20fill%3D%22%23ffffff%22%20d%3D%22M1.58548e-05%20200.434C1.30955%20203.712%202.55249%20207.034%203.72885%20210.379C8.52306%20225.216%2012.2075%20240.369%2014.6268%20255.768C19.3544%20286.588%2020.1091%20317.813%2019.7318%20348.88C19.5764%20364.414%2019.1325%20379.948%2018.8217%20395.481C18.511%20411.015%2018.1337%20426.526%2018.733%20442.015C19.8871%20472.97%2024.1486%20503.926%2032.8271%20533.646C37.1774%20548.484%2042.6818%20563.008%2049.629%20576.79C56.5318%20590.596%2064.9882%20603.615%2075.1315%20615.176C85.2527%20626.736%2097.0384%20636.838%20110.2%20644.672C123.407%20652.439%20137.878%20657.916%20152.793%20661.126C167.731%20664.381%20183.09%20665.301%20198.383%20664.785C213.698%20664.224%20228.946%20662.518%20244.172%20660.475C274.557%20656.434%20305.098%20651.249%20335.994%20652.079C343.718%20652.237%20351.376%20653.135%20359.055%20653.898L370.464%20655.761L373.327%20656.232L376.146%20656.861L381.784%20658.118C396.81%20661.552%20411.592%20666.087%20425.953%20671.676C483.616%20693.585%20536.242%20727.032%20594.815%20746.045C653.034%20765.642%20715.004%20773.588%20776.196%20769.144C806.804%20767.056%20837.145%20761.624%20866.865%20753.969C896.584%20746.27%20925.683%20736.168%20954.004%20724.248C982.325%20712.306%201009.96%20698.681%201036.77%20683.573C1063.58%20668.466%201089.71%20652.102%201115.23%20634.84C1166.33%20600.36%201214.87%20562.177%201262.23%20522.647C1285.91%20502.871%201309.31%20482.735%201332.55%20462.42C1355.74%20442.06%201378.69%20421.408%201400.73%20399.791C1422.75%20378.152%201443.99%20355.659%201463.43%20331.663C1482.85%20307.666%201500.59%20282.166%201515.28%20254.937C1529.93%20227.686%201541.36%20198.639%201548.35%20168.424C1550.13%20160.882%201551.51%20153.25%201552.75%20145.617C1553.7%20137.918%201554.99%20130.263%201555.41%20122.519C1555.59%20120.678%201555.74%20118.815%201555.88%20116.952L1556.03%2080.4297C1555.94%2078.9706%201555.86%2077.5115%201555.77%2076.0524C1554.81%2060.586%201552.3%2045.2319%201548.77%2030.1471C1546.95%2022.2904%201544.82%2014.5236%201542.4%206.84651L0.865638%200L1.58548e-05%20200.434Z%22%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20154.2%201557%20616.8%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22foto%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%221440%22%20height%3D%22771%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20clip-path%3D%22url(%23foto)%22%20fill%3D%22%23ffffff%22%20d%3D%22M1.58548e-05%20200.434C1.30955%20203.712%202.55249%20207.034%203.72885%20210.379C8.52306%20225.216%2012.2075%20240.369%2014.6268%20255.768C19.3544%20286.588%2020.1091%20317.813%2019.7318%20348.88C19.5764%20364.414%2019.1325%20379.948%2018.8217%20395.481C18.511%20411.015%2018.1337%20426.526%2018.733%20442.015C19.8871%20472.97%2024.1486%20503.926%2032.8271%20533.646C37.1774%20548.484%2042.6818%20563.008%2049.629%20576.79C56.5318%20590.596%2064.9882%20603.615%2075.1315%20615.176C85.2527%20626.736%2097.0384%20636.838%20110.2%20644.672C123.407%20652.439%20137.878%20657.916%20152.793%20661.126C167.731%20664.381%20183.09%20665.301%20198.383%20664.785C213.698%20664.224%20228.946%20662.518%20244.172%20660.475C274.557%20656.434%20305.098%20651.249%20335.994%20652.079C343.718%20652.237%20351.376%20653.135%20359.055%20653.898L370.464%20655.761L373.327%20656.232L376.146%20656.861L381.784%20658.118C396.81%20661.552%20411.592%20666.087%20425.953%20671.676C483.616%20693.585%20536.242%20727.032%20594.815%20746.045C653.034%20765.642%20715.004%20773.588%20776.196%20769.144C806.804%20767.056%20837.145%20761.624%20866.865%20753.969C896.584%20746.27%20925.683%20736.168%20954.004%20724.248C982.325%20712.306%201009.96%20698.681%201036.77%20683.573C1063.58%20668.466%201089.71%20652.102%201115.23%20634.84C1166.33%20600.36%201214.87%20562.177%201262.23%20522.647C1285.91%20502.871%201309.31%20482.735%201332.55%20462.42C1355.74%20442.06%201378.69%20421.408%201400.73%20399.791C1422.75%20378.152%201443.99%20355.659%201463.43%20331.663C1482.85%20307.666%201500.59%20282.166%201515.28%20254.937C1529.93%20227.686%201541.36%20198.639%201548.35%20168.424C1550.13%20160.882%201551.51%20153.25%201552.75%20145.617C1553.7%20137.918%201554.99%20130.263%201555.41%20122.519C1555.59%20120.678%201555.74%20118.815%201555.88%20116.952L1556.03%2080.4297C1555.94%2078.9706%201555.86%2077.5115%201555.77%2076.0524C1554.81%2060.586%201552.3%2045.2319%201548.77%2030.1471C1546.95%2022.2904%201544.82%2014.5236%201542.4%206.84651L0.865638%200L1.58548e-05%20200.434Z%22%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
}
.gov-hero-content { color: #fff; text-align: center; }
.gov-hero .sec-head { margin-top: 67px; }
.gov-subtitle { font-size: 26px; font-weight: 700; margin: 48px 0 16px; }
.gov-intro { max-width: 900px; margin: 0 auto 96px; font-size: 18.75px; line-height: 1.35; }

/* Cards de Governança — 3 cards, 1 por vez (Figma node 2:1917).
   No Figma o card tem 904 × 406px numa prancheta de 1440 (não a largura cheia
   do container): a pista fica com 904px e a seta/dots ficam fora dela. */
.gov-cards-carousel { position: relative; width: min(904px, 100%); margin: 0 auto; }
.gov-cards-viewport { overflow: hidden; border-radius: 20px; }
.gov-cards-track { display: flex; transition: transform .5s ease; }
.gov-card {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 316px minmax(0, 1fr);
  gap: 55px;
  align-items: center;
  background: var(--branco-azul);
  color: var(--preto);
  text-align: left;
  border-radius: 20px;
  padding: 16px 53px 15px 15px;
  box-shadow: 0 10px 8px rgba(110, 110, 110, .25);
}
.gov-card-aside {
  align-self: stretch;
  min-height: 325px;
  border-radius: 16px;
  padding: 73px 28px 40px 27px;
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.gov-card-aside--salmao { background: var(--salmao); }
.gov-card-aside--azul { background: var(--azul-1); }
.gov-card-aside--verde { background: var(--verde-gov); }
.gov-card-ico { position: relative; width: 59px; height: 59px; display: grid; place-items: center; flex-shrink: 0; }
.gov-card-ico img { display: block; object-fit: contain; }
/* Círculo #F2F6F9 de 59px (nós 2:7215 / 2:7265) — no card 1 a arte já vem com o
   pictograma dentro, nos outros dois o picto é uma camada por cima. */
.gov-card-ico-circle { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Tamanhos do Figma dentro do círculo de 59px: thumbs-up 32px, world 37px.
   ⚠️ Precisa da mesma especificidade de `.gov-card-ico img` (0,1,1), senão
   aquela regra vence e o picto vira 59px, cobrindo o círculo. */
.gov-card-ico img.gov-card-ico-picto { position: relative; z-index: 1; width: 54.24%; height: 54.24%; }
.gov-card-ico img.gov-card-ico-picto--lg { width: 62.71%; height: 62.71%; }
.gov-card-aside h4 { font-size: 29.2px; font-weight: 700; line-height: 1.1; color: #fff; }
.gov-card-body p { font-size: 18.75px; line-height: 1.35; margin-bottom: 16px; color: var(--preto); }
.gov-card-body p:last-child { margin-bottom: 0; }
.gov-card-body em { font-style: italic; }
.gov-card-footnote { font-size: 13px !important; font-weight: 300; }
/* A chamada da nota (¹ do HCAHPS, ² dos ODSs) tem o mesmo corpo dentro do texto e
   dentro do rodapé — sem isso o `sup` herda 0,83em dos 18,75px do corpo e fica grande. */
.gov-card-body sup { font-size: 8.5px; }

/* Setas laterais: cada uma só aparece quando há card para aquele lado — o JS
   liga/desliga o atributo `hidden` (o primeiro card não tem seta à esquerda, o
   último não tem à direita). */
.gov-cards-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  transition: transform .2s ease, opacity .2s ease;
}
.gov-cards-prev { left: -96px; }
.gov-cards-next { right: -96px; }
.gov-cards-prev:hover { transform: translateY(-50%) translateX(-3px); }
.gov-cards-next:hover { transform: translateY(-50%) translateX(3px); }
.gov-cards-arrow img { width: 22px; height: auto; }
/* O vetor do Figma aponta para a esquerda: serve direto na seta anterior e
   espelhado na próxima. */
.gov-cards-next img { transform: scaleX(-1); }
.gov-cards-carousel .carousel-dots { margin-top: 74px; }
.gov-cards-carousel .carousel-dots button { background: rgba(255,255,255,.5); }
.gov-cards-carousel .carousel-dots button.active { background: #fff; }

/* Respiros do bloco branco — medidas do Figma (nó 2:1903, a faixa amarela de
   1690px, e os nós vizinhos): 167px entre o fim do amarelo e o "Valor em Saúde",
   80px entre a coluna de texto e as capas, 192px até os cards teal. */
.gov-white { padding: clamp(70px, 11.6vw, 167px) 40px clamp(60px, 7.4vw, 106px); }
.valor-grid { display: grid; grid-template-columns: 0.75fr 1fr; gap: 80px; align-items: center; }
.valor-grid p { margin-bottom: 14px; font-size: 15.5px; color: #333; }
.valor-grid .btn { margin-top: 12px; }

/* Mapa de Valor — capas + downloads (Figma node 2:1882) */
.valor-maps { display: flex; flex-direction: column; gap: 14px; }
/* A arte original é mais alta que o quadro do Figma — o corte esconde os QR codes. */
.valor-maps-frame { aspect-ratio: 666 / 438; overflow: hidden; }
.valor-maps-art { width: 100%; height: auto; display: block; }
/* Cada ícone é ancorado à borda direita da sua capa. As capas não ocupam metades
   exatas da arte (1915px de largura): a 1ª termina em x=911 (47,57%) e a 2ª em
   x=1839 (96,03%) — os ~4% restantes são a margem branca do PNG. Daí os `right`
   em %, que acompanham a escala da arte. */
.valor-maps-links { position: relative; height: 20px; }
.valor-map-dl {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  color: #555;
  transition: color .2s ease;
}
.valor-map-dl--tecnico { right: 52.43%; }   /* borda direita da capa 1 */
.valor-map-dl--pacientes { right: 3.97%; }  /* borda direita da capa 2 */
.valor-map-dl:hover { color: var(--azul-1); }
.valor-map-dl img { width: 18px; height: auto; display: block; }

/* Cards teal — o clique troca a face azul (node 2:4044) pelo painel branco
   (nodes 2:4049 / 2:4056 / 2:4062), mantendo o mesmo tamanho e formato */
.teal-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(80px, 13.3vw, 192px); align-items: start; }
.teal-card {
  --teal-fonte: clamp(24px, 2.6vw, 36.6px);
  --teal-caixa: calc(var(--teal-fonte) * 3.3); /* as 3 linhas do maior título */
  position: relative;
  background: var(--azul-claro);
  color: #fff;
  border: 0;
  text-align: left;
  border-radius: 20px;
  /* proporção do Figma: 379,8 × 661px */
  aspect-ratio: 380 / 661;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .28);
  transition: transform .25s ease, box-shadow .25s ease, background .35s ease;
}
.teal-card:hover { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, .34); }
.teal-card.is-open { background: #fff; }

/* Face azul (estado fechado) */
/* O ícone fica no topo; o "Clique para saber mais" é ancorado na METADE da altura
   do card (igual nos três, independente de o título ter 2 ou 3 linhas) e o título
   é pendurado logo acima dessa mesma linha — por isso os dois são absolutos. */
.teal-face {
  position: absolute;
  inset: 0;
  padding: 40px;
  opacity: 1;
  transition: opacity .3s ease;
}
.teal-card.is-open .teal-face { opacity: 0; pointer-events: none; }
.teal-ico { width: auto; height: 90px; object-fit: contain; }
/* Figma: o TÍTULO é o que fica centrado no card — os de 2 e de 3 linhas dividem o
   mesmo eixo central — e o "Clique para saber mais" vem logo abaixo, na mesma
   altura nos três. Por isso o título ocupa uma caixa fixa (as 3 linhas do maior
   título) centrada em 50%, com o texto centrado dentro dela, e a frase é ancorada
   na base dessa caixa. `--teal-caixa` mantém os dois em sincronia. */
.teal-title {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 50%;
  height: var(--teal-caixa);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-size: var(--teal-fonte);
  font-weight: 700;
  line-height: 1.1;
}
.teal-more {
  position: absolute;
  left: 40px;
  right: 40px;
  top: calc(50% + var(--teal-caixa) / 2 + 22px);
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  color: var(--branco-azul);
  opacity: .85;
}
.teal-more img { width: 24px; height: 24px; flex: 0 0 auto; }

/* Face branca (estado aberto) — mesma caixa do card */
.teal-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.teal-card.is-open .teal-panel { opacity: 1; pointer-events: auto; }
.teal-panel-inner {
  height: 100%;
  overflow-y: auto;
  border-radius: 20px;
  padding: 26px;
  color: #000;
}
.teal-panel-inner h4 {
  color: var(--azul-claro);
  font-size: clamp(20px, 1.85vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 14px;
}
/* corpo um pouco menor que os 18,75px do Figma: a Poppins é mais larga que a
   TT Norms Pro e o texto não cabia na altura do card */
.teal-panel-inner p { font-size: clamp(13.5px, 1.16vw, 16.5px); line-height: 1.3; margin: 0 0 11px; }
.teal-panel-inner p:last-child { margin-bottom: 0; }
.teal-panel-inner strong { color: var(--azul-1); font-size: clamp(15px, 1.4vw, 20px); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .teal-face, .teal-panel { transition: none; }
}

/* Expandindo o Cuidado — geometria dos nós 2:1886 (texto) e 2:1874 (cards).
   No Figma o bloco tem 1196px (x122 → 1318): a intro é uma coluna estreita de
   223px à esquerda, 20px de gap e o card de 953 × 344px à direita. Tudo em % do
   bloco para escalar junto com o container. */
.expandindo {
  display: grid;
  grid-template-columns: 18.65% 79.68%;   /* 223px / 953px de 1196 */
  gap: 1.67%;                             /* 20px */
  margin-top: clamp(70px, 7.4vw, 106px);
  align-items: start;
}
.expandindo-intro .section-blue-title.sm {
  font-size: clamp(28px, 2.54vw, 36.6px);
  line-height: normal;
  margin-bottom: 40px;                    /* a linha vazia de 36,6px do nó 2:1886 */
}
.expandindo-intro p { font-size: 18.75px; line-height: normal; color: var(--preto); }

.expandindo-panel { --exp-cor: var(--salmao); border-radius: 10px; }
.expandindo-panel[data-exp-panel="exp-1"] { --exp-cor: var(--rosa); }
.expandindo-panel[data-exp-panel="exp-2"] { --exp-cor: var(--roxo); }

.tabs { display: flex; flex-wrap: wrap; }
.tabs--exp { gap: 7px; }                  /* as 3 abas de 313px deixam 7px entre si */
.tabs--exp .tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;                       /* 17,44% dos 344px do card */
  color: #fff;
  border: 0;
  padding: 10px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(14px, 1.63vw, 23.4px);
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  opacity: .25;
  transition: opacity .25s ease;
}
.tabs--exp .tab--pesquisa { background: var(--salmao); }
.tabs--exp .tab--academy { background: var(--rosa); }
.tabs--exp .tab--consultoria { background: var(--roxo); }
.tabs--exp .tab.is-active { opacity: 1; }
.tabs--exp .tab:not(.is-active):hover { opacity: .45; }

/* Recuos do painel em % da largura do card (953px): 40px à esquerda, 28px do topo
   das abas até o texto, 24px até a base e 17px à direita. */
.expandindo-panel .tab-panels {
  background: var(--exp-cor);
  border-radius: 0 0 10px 10px;
  padding: 2.94% 1.78% 2.52% 4.2%;
  min-height: 284px;                      /* 344px do card − 60px das abas */
  transition: background .3s ease;
}
/* Coluna de texto de 508px e stats de 290px, com 98px entre elas (% da caixa de
   conteúdo do card). O row-gap fica em px: gap em % na direção do bloco resolve
   contra a altura, que aqui é automática. */
.tab-panel { display: none; grid-template-columns: 1.6fr 1fr; gap: 40px; }
.tab-panel.is-active { display: grid; }
.expandindo-panel .tab-panel { grid-template-columns: 56.7% 1fr; column-gap: 10.9%; row-gap: 26px; }
.exp-text { color: #fff; font-size: 18.75px; line-height: normal; }
.exp-text em { font-style: italic; }
.exp-stats { display: flex; flex-direction: column; gap: 14px; }
.mini-stat { color: #fff; }
.mini-stat strong { display: block; font-size: 23.4px; font-weight: 700; line-height: normal; }
.mini-stat span { font-size: 18.75px; line-height: normal; }

/* ============================================================
   03 · SOCIAL
   ============================================================ */
.social { background: #fff; }
/* `100% 100%` estica a arte até as bordas: aparece inteira, sem corte (o `cover` recortava as laterais). */
.social-top {
  background: var(--roxo) url('assets/secao-7-background.png') center top / 100% 100% no-repeat;
  color: #fff;
  padding: 60px 0 130px;
}
/* Coluna de conteúdo do topo da Social: x124 → x1320,8 (nós 2:1868 / 2:1869),
   e não os 1120px do container padrão. */
.social-top > .container {
  max-width: 1440px;
  padding-left: clamp(22px, 8.61vw, 124px);
  padding-right: clamp(22px, 8.28vw, 119px);
}
/* "03" (Light 32px) + "Social" (Bold 57,2px / line-height 50px), 16px entre eles — nó 2:1870. */
.social .sec-head { gap: 16px; margin-bottom: 0; }
.social .sec-title { font-size: clamp(34px, 4.4vw, 57.2px); line-height: 50px; }

/* Nossa Essência (nó 2:1868): título Bold 36,6px e corpo 18,75px (estavam 26px/15,5px),
   numa coluna de 464px ao lado da foto de 671 × 448 (nó 2:1869), com 62px entre elas. */
.social-h3 { font-size: clamp(26px, 3.05vw, 36.6px); font-weight: 700; line-height: 1.2; margin-bottom: 19px; }
.social-essencia {
  display: grid;
  grid-template-columns: 464fr 671fr;
  gap: 62px;
  align-items: center;
  margin-top: clamp(56px, 9.65vw, 139px);
}
.social-essencia p { font-size: 18.75px; line-height: normal; margin-bottom: 19px; }
.social-essencia p:last-child { margin-bottom: 0; }
.social-essencia-img img { border-radius: 24px; width: 100%; height: auto; aspect-ratio: 671 / 448; object-fit: cover; }
/* Proadi-SUS — acordeão + foto que troca por item (Figma nós 2:1866 / 2:6472) */
/* Geometria do nó 2:6472 (frame 1196 × 755): acordeão 467px, foto 716px (x=480),
   13px entre eles. A soma dos cards dá exatamente a altura da foto —
   547 (aberto) + 15 + 89 (fechado) + 15 + 89 = 755 — então a base do último card
   alinha com a base da foto sem nenhum truque de altura.
   `stretch` + `align-self: start` na foto: a foto mantém a proporção fixa e define
   a altura da linha; o acordeão então estica até acompanhá-la.
   ⚠️ Por isso **todas** as medidas internas do card estão em `clamp(min, Xvw, max)`,
   e não nos px crus do nó: as colunas encolhem com a tela, mas a foto (que define a
   altura) encolhe junto. Com tamanhos fixos, o texto quebrava mais e o acordeão
   estourava a foto — chegava a passar 232px em 1024px. Cada `Xvw` é a medida do nó
   dividida pela prancheta de 1440, então em 1440 o valor cai exatamente no do Figma. */
.proadi { margin-top: 90px; display: grid; grid-template-columns: 467fr 716fr; gap: 13px; align-items: stretch; }
.proadi-accordion { display: flex; flex-direction: column; gap: clamp(10px, 1.04vw, 15px); height: 100%; }
.proadi-item { background: var(--roxo-fechado); border-radius: 16px; transition: background .25s ease; }
/* O card aberto absorve a sobra residual, alinhando a base do acordeão com a da foto.
   Com as medidas do nó o conteúdo do 1º card já preenche a caixa (~546 de 547), então
   aqui não sobra praticamente nada — era a combinação de fontes/pílulas pequenas com
   este `flex: 1` que abria o vazio roxo embaixo das pílulas. */
.proadi-item.is-open { background: var(--roxo-claro); flex: 1; display: flex; flex-direction: column; }
.proadi-item.is-open .proadi-panel { flex: 1; }
/* Fechado, o recuo de baixo do head é metade da altura do card (26+37+26 = os 89px
   do nó). Aberto, o nó pede só 15px entre o título e a descrição. */
.proadi-item.is-open .proadi-item-head { padding-bottom: clamp(9px, 1.04vw, 15px); }
.proadi-item-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  padding: clamp(16px, 1.81vw, 26px) clamp(16px, 1.74vw, 25px) clamp(16px, 1.81vw, 26px) clamp(20px, 2.78vw, 40px);
}
.proadi-item-title { font-size: clamp(19px, 2.03vw, 29.2px); font-weight: 700; line-height: 1.15; }
.proadi-toggle {
  flex: 0 0 auto;
  width: clamp(28px, 2.57vw, 37px); height: clamp(28px, 2.57vw, 37px);
  border-radius: 100px;
  background: var(--roxo);
  color: #fff;
  font-size: clamp(19px, 2.03vw, 29.2px);
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background .2s ease;
}
.proadi-item:not(.is-open) .proadi-toggle { background: #7d6eb9; }
.proadi-item-head:hover .proadi-toggle { background: var(--azul-2); }

/* Colapsado mostra apenas o título — o painel só existe quando aberto. */
/* Recuo direito de 18px (não os 25px do head): o bloco de texto do nó 2:6484 vai de
   x=40 a x=449, ou seja 409px — com 402 a descrição ganhava uma 6ª linha. */
.proadi-panel { padding: 0 clamp(14px, 1.25vw, 18px) clamp(17px, 1.88vw, 27px) clamp(20px, 2.78vw, 40px); }
/* Mesmo slide vertical da foto: o texto do card recém-aberto entra por baixo.
   O painel fechado sai do fluxo (`hidden`), então o `display: none` reinicia a
   animação a cada abertura — não é preciso mexer no JS. O atraso de .3s casa
   com o momento em que a foto nova entra. */
@keyframes proadiPanelIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.proadi-item.is-open .proadi-panel { animation: proadiPanelIn .32s ease .3s both; }
@media (prefers-reduced-motion: reduce) {
  .proadi-item.is-open .proadi-panel { animation: none; }
}
/* Nó 2:6484: título 29,2px com 15px até a descrição, e 30px da descrição à 1ª pílula
   (a 1ª pílula começa em y=211 e o título em y=27: 34 de título + 15 + 5 linhas de
   descrição ≈ 105 + 30 = 184). Ⓐ altura declarada do bloco de texto no nó (82px) não
   bate com o que ele desenha — quem manda é a distância entre os nós vizinhos. */
.proadi-desc { font-size: clamp(12px, 1.24vw, 17.8px); line-height: normal; }
.proadi-list { list-style: none; margin-top: clamp(14px, 1.67vw, 24px); display: flex; flex-direction: column; gap: clamp(10px, 1.11vw, 16px); }
.proadi-list li {
  background: var(--roxo-pill);
  border-radius: 50px;
  padding: clamp(12px, 1.39vw, 20px) clamp(12px, 1.25vw, 18px);
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 700;
  line-height: normal;
  text-align: center;
}
.proadi-footnote { margin-top: 20px; font-size: 12px; font-weight: 300; line-height: 1.35; text-align: center; }

/* Tamanho fixo (proporção nativa 716×755): não muda conforme o card aberto. */
.proadi-photo { border-radius: 16px; overflow: hidden; aspect-ratio: 716 / 755; align-self: start; }
/* `object-position: right`: a `social-proadi.png` é mais larga (1387×1134) que o
   frame do nó 2:1866 e o `cover` centralizado cortava o lado direito da cena —
   no Figma a foto está encostada na borda direita da arte. */
.proadi-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
  transition: transform .3s ease, opacity .3s ease;
}
/* Troca de card: a foto sai por cima e a nova entra por baixo. O `scale(1.06)`
   nos estados de saída/entrada dá folga para o deslocamento de 6% não descobrir
   as bordas do recorte (a imagem preenche o frame exatamente no repouso). */
.proadi-photo img.is-leaving { transform: translateY(-6%) scale(1.06); opacity: 0; }
.proadi-photo img.is-entering { transform: translateY(6%) scale(1.06); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .proadi-photo img,
  .proadi-photo img.is-leaving,
  .proadi-photo img.is-entering { transition: none; transform: none; opacity: 1; }
}

.social-blue-h3 { color: var(--azul-1); font-size: clamp(26px, 3vw, 34px); font-weight: 700; margin-bottom: 26px; }

/* Coluna de conteúdo Social — largura Figma (nós 2:1863 / 2:1407) */
.social-impacto.container {
  max-width: 1440px;
  padding-left: clamp(22px, 8.54vw, 123px);
  padding-right: clamp(22px, 7.78vw, 112px);
}
.social-time.container {
  max-width: 1440px;
  padding-left: clamp(22px, 8.33vw, 120px);
  padding-right: clamp(22px, 8.33vw, 120px);
}
.social-impacto { padding-top: 70px; padding-bottom: 40px; }

/* Foto 1205×596 (nó 2:1863) — crop interno do Figma */
.social-impacto-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1205 / 596;
  border-radius: 25px;
  overflow: hidden;
}
.social-impacto-img img {
  position: absolute;
  width: 100.1%;
  height: 151.53%;
  left: -0.03%;
  top: -51.55%;
  max-width: none;
}

/* Impacto — 7 indicadores em scroll lateral (Figma node 2:1865) */
/* O viewport rola de verdade (`overflow-x: auto`), com a barra nativa escondida: o
   arrasto, o toque no celular e as setas do teclado saem de graça, e a barra
   desenhada abaixo é dirigida pelo `scrollLeft`. Antes era `overflow: hidden` +
   `translateX`, e a barra era decorativa — não dava para arrastar nada. */
.impacto-carousel { margin-top: 40px; }
.impacto-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.impacto-viewport::-webkit-scrollbar { display: none; }
.impacto-stats { display: flex; gap: 98px; }
.impacto-stat { flex: 0 0 223px; }
.impacto-stat strong { display: block; font-size: 45.7px; font-weight: 700; color: var(--azul-claro); line-height: 1.1; margin-bottom: 20px; }
.impacto-stat span { font-size: 23.4px; line-height: 1.25; color: var(--preto); display: block; }

/* Trilho 1201×15 (nó 2:6428). O thumb tem a largura da fração visível do conteúdo —
   é o que faz o arrasto corresponder ao que se vê; a seta fica sempre na ponta
   oposta ao thumb, então as duas nunca se sobrepõem. */
.impacto-scrollbar { position: relative; height: 15px; margin-top: 34px; border-radius: 100px; background: #d9d9d9; }
.impacto-thumb {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  border-radius: 100px;
  background: var(--azul-claro);
  cursor: grab;
  touch-action: none;
}
.impacto-thumb:active { cursor: grabbing; }
.impacto-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.impacto-arrow[hidden] { display: none; }
.impacto-arrow img { width: 17px; height: 17px; display: block; }
.impacto-arrow--next { right: 0; }
.impacto-arrow--next:hover { transform: translate(3px, -50%); }
/* O secao-7.2.svg aponta para a direita: a seta de voltar é o mesmo vetor espelhado
   (mesmo truque das setas de Governança). */
.impacto-arrow--prev { left: 0; }
.impacto-arrow--prev img { transform: scaleX(-1); }
.impacto-arrow--prev:hover { transform: translate(-3px, -50%); }

.social-brasil { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; padding: 60px 40px; }
.brasil-map { display: flex; justify-content: center; align-items: center; }
.brasil-map-inner { position: relative; width: 100%; }
/* Proporções do Figma (nós 2:1419 mapa / 2:1410 forma): a forma tem 150,8% da largura
   do mapa e seu centro fica 19,2% à direita e 10,2% acima do centro do mapa.
   As margens em % se referem sempre à LARGURA do contêiner — inclusive margin-top. */
.brasil-map-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150.8%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  margin-left: 19.2%;
  margin-top: -10.2%;
  z-index: 0;
  pointer-events: none;
}
.brasil-map-img { position: relative; z-index: 1; width: 100%; height: auto; display: block; }
.brasil-nums { display: flex; gap: 50px; margin-top: 10px; }
.brasil-nums strong { display: block; font-size: 52px; font-weight: 700; color: var(--azul-1); line-height: 1; }
.brasil-nums span { font-size: 15px; color: #555; }

/* Odômetro (roleta vertical) */
.odometer { position: relative; font-variant-numeric: tabular-nums; }
/* os dígitos são <span>, então precisam escapar do `.brasil-nums span { font-size: 15px }` */
.brasil-nums .odometer span { font-size: inherit; color: inherit; }
.odometer-reels { display: flex; }
.odometer-digit { display: block; height: 1em; overflow: hidden; }
.odometer-strip { display: flex; flex-direction: column; transform: translateY(0); will-change: transform; }
.odometer-strip span { display: block; height: 1em; line-height: 1em; text-align: center; }
.odometer.is-spinning .odometer-strip {
  transform: translateY(var(--odometer-offset));
  transition: transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--odometer-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .odometer.is-spinning .odometer-strip { transition: none; }
}

.social-time { padding-top: 40px; padding-bottom: 80px; }

/* Foto 1200×631 (nó 2:1407) — crop interno do Figma */
.social-time-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 631;
  border-radius: 25px;
  overflow: hidden;
}
.social-time-img img {
  position: absolute;
  width: 100.01%;
  height: 126.99%;
  left: -0.01%;
  top: -22.84%;
  max-width: none;
}
.donuts { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 44px; }
.donut-card img { width: 100%; height: auto; display: block; }

/* Liderança (x122, 435px) + idade (x609, 709px), com 52px entre as colunas — nós 2:1368 / 2:1369. */
.lideranca { display: grid; grid-template-columns: 435fr 709fr; gap: 52px; margin-top: 50px; }
.lideranca h4 { color: var(--azul-1); font-size: 23.4px; font-weight: 700; margin-bottom: 36px; }
.lideranca p { font-size: 18.75px; line-height: normal; color: var(--preto); margin-bottom: 19px; }
.lideranca p:last-child { margin-bottom: 0; }
/* O corpo do texto quebra em 417px, não nos 435px do título (nó 2:1367) — sem isso as
   linhas ficam mais longas que no design. */
.lideranca-text p { max-width: 417px; }

/* Ordem do Figma: título → pictogramas → números (o grupo 2:1310 fica em y15465, acima
   dos textos 2:1370–2:1372, em y15568). O SVG tem 500px de largura numa coluna de 709. */
.idade h4 { margin-bottom: 45px; }
.idade-picto { display: block; width: 70.52%; max-width: 500px; height: auto; margin: 0 0 21px; }
.idade-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 0; }
.idade-nums strong { display: block; font-size: 45.7px; font-weight: 700; color: var(--azul-claro); line-height: 1.1; }
.idade-nums span { font-size: 23.4px; line-height: 1.25; color: var(--preto); }
/* Recortes por grupo só aparecem no mobile (ver @media 820px) — desktop usa o SVG inteiro. */
.idade-picto-crop { display: none; }

/* Barra de estatísticas — faixa full-bleed 1440×344 (Figma nó 2:1340) */
.social-stats-bar {
  background: var(--azul-claro);
  min-height: clamp(260px, 23.89vw, 344px);
  display: flex;
  align-items: center;
  padding: 0;
  color: #fff;
}
/* Colunas do nó 2:1339 — os 4 itens medem 227 / 285 / 262 / 272px e o conteúdo vai
   de x=122 a x=1327. A sobra (1205 − 1046 = 159, em 3 vãos) dá o gap de 53px.
   Não é `repeat(4, 1fr)`: isso daria 259px por coluna, e a do "6,58 anos" precisa de
   285 (58 do ícone + 20 + 207 do texto) — era por isso que "anos" caía para a linha
   de baixo, longe do número. O x=122 é o mesmo dos textos acima (nó 2:1368); com o
   `.container` padrão (max 1200 + padding 40) o primeiro item começava em x=160. */
/* Sem a classe `.container`: o padding de 22px dela (no breakpoint de 820) vencia
   estes clamps e desalinhava o primeiro item do texto acima. */
.social-stats-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: clamp(22px, 8.47vw, 122px);
  padding-right: clamp(22px, 7.85vw, 113px);
  display: grid;
  grid-template-columns: 227fr 285fr 262fr 272fr;
  gap: 53px;
}
/* `min-width: 0` nos dois níveis: sem isso o `min-width: auto` do item de grid/flex
   trava a coluna no min-content do texto ("treinamentos", "Administração") e a barra
   inteira estoura a viewport — chegava a +77px à direita entre 820 e 1050px. */
.ssb-item { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
.ssb-item > div { min-width: 0; }
/* Cada ícone tem o tamanho do nó, que vem dos atributos `width`/`height` do HTML —
   por isso esta regra **não** declara width/height. ⚠️ Declarar `width: auto` aqui
   anula os atributos (são presentational hints, de especificidade mínima) e, como
   estes SVGs não têm tamanho intrínseco (artefato nº 2 das notas de exportação), os
   ícones incham até a largura da coluna. Um `height: 58px` para todos também não
   serve: inflava o do EAD (76×47) para 94×58. Os 9px de recuo são o quanto o ícone
   fica abaixo do topo do bloco de texto no Figma. */
.ssb-ico { flex: 0 0 auto; margin-top: 9px; }
/* `nowrap`: o número e a unidade ("6,58 anos", "52,5 h") são uma unidade de leitura
   e nunca podem se separar em duas linhas. */
.ssb-item strong { display: block; font-size: 45.7px; font-weight: 700; color: var(--branco-azul); line-height: 1.1; white-space: nowrap; }
/* A quebra de "treinamento/profissional" vem do <wbr> depois da barra, no HTML —
   como no nó. O `overflow-wrap: break-word` parte a palavra no meio ("profi/ssional")
   e por isso só vale no celular, em coluna única, onde ela realmente não cabe. */
.ssb-item span { font-size: 23.4px; line-height: 1.25; }

.cuidar { color: #fff; }
/* Foto full-bleed como header do bloco (Figma 2:1304 — 1440×718 sobre um original 3:2,
   recortado na base: por isso `object-position` perto de 86%). */
.cuidar-hero { line-height: 0; }
/* Altura reduzida em 20% em relação ao Figma (718px → 574px). */
.cuidar-hero img { display: block; width: 100%; aspect-ratio: 1440 / 574; object-fit: cover; object-position: center 86%; }
/* Fundo do bloco é a arte do Figma (2:1303), não o roxo chapado. */
.cuidar-body {
  background: var(--roxo) url('assets/cuidar-background.png') center / cover no-repeat;
  padding: clamp(60px, 9.9vw, 143px) 0 clamp(70px, 11.3vw, 163px);
}
.cuidar-title { text-align: center; font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; margin-bottom: 44px; }
.cuidar-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8.8vw, 106px); }
.cuidar-cols p { font-size: 18.75px; line-height: 1.35; }
.cuidar-card { background: var(--roxo); border-radius: 20px; padding: 50px; text-align: center; margin-top: 48px; }
.cuidar-card h4 { font-size: 23.4px; margin-bottom: 12px; }
.cuidar-card p { font-size: 18.75px; line-height: 1.35; }

/* ============================================================
   04 · AMBIENTAL
   ============================================================ */
/* O fundo da seção é a arte do Figma (node 2:1279), não um degradê chapado.
   `100% 100%` estica a arte de ponta a ponta, como em `.social-top`. */
.ambiental {
  background: var(--verde) url('assets/background-ambiental.png') center top / 100% 100% no-repeat;
  color: #fff;
}
.amb-hero { padding: 0; }
.amb-hero-photo { line-height: 0; overflow: hidden; }
/* ⚠️ `amb-hero-shape.png` foi exportado com o fundo OPACO (cinza #1E1E1E fora da
   prancheta + branco dentro dela — mesmo artefato do mapa do Brasil e do hero de
   Governança). A forma orgânica vem da máscara do clip do nó 2:1294, que tem os
   mesmos limites do PNG (1546 × 779,5), e deixa o fundo da seção aparecer em volta. */
.amb-hero-photo img {
  width: 107.4%;
  max-width: none;
  /* 20% mais baixa que a forma do Figma (779,5px → 623,6px), mantendo o full-bleed:
     a foto é RECORTADA (cover, ancorada na base — o topo é só parede), nunca espremida.
     A máscara usa o mesmo recorte (viewBox começa em y=155,9), senão a curva sai de
     registro com a foto. */
  aspect-ratio: 1546 / 623.6;
  height: auto;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  margin-left: -5.7%;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20155.9%201546%20623.6%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M35.3922%200.0758578C30.3705%205.87774%2025.7612%2012.0588%2021.6764%2018.5812C15.0246%2029.2749%209.81564%2040.8976%206.2368%2052.9943C2.63922%2065.0911%200.671795%2077.6618%200.147149%2090.2325C-0.377498%20102.822%200.521896%20115.431%202.50806%20127.793C6.51786%20152.593%2014.8185%20176.464%2025.4614%20198.989C36.1604%20221.533%2049.2766%20242.826%2064.0604%20262.791C71.4429%20272.783%2079.3313%20282.415%2087.5196%20291.706C95.6516%20301.053%20104.008%20310.192%20112.384%20319.274C129.154%20337.457%20146.168%20355.375%20162.469%20373.937C178.752%20392.499%20194.379%20411.687%20208.02%20432.297C209.687%20434.781%20211.299%20437.322%20212.891%20439.862C214.184%20441.929%20216.489%20445.702%20217.726%20447.807C219.3%20450.48%20220.799%20453.192%20222.298%20455.903C223.778%20458.633%20225.258%20461.364%20226.645%20464.132C227.75%20466.312%20229.661%20470.294%20230.692%20472.512C232.004%20475.318%20233.296%20478.143%20234.458%20481.025C236.838%20486.751%20239.105%20492.534%20241.054%20498.431C244.989%20510.168%20247.799%20522.245%20249.898%20534.456C252.015%20546.666%20253.477%20559.01%20254.751%20571.353C257.318%20596.058%20259.06%20620.915%20263.501%20645.431C265.712%20657.679%20268.616%20669.833%20272.776%20681.57C276.955%20693.287%20282.388%20704.587%20289.452%20714.826C289.546%20714.959%20290.67%20716.627%20290.764%20716.76C291.195%20717.405%20291.701%20717.992%20292.169%20718.618C292.375%20718.884%20294.811%20722.05%20295.017%20722.296C295.935%20723.548%20297.004%20724.667%20298.034%20725.842C298.259%20726.089%20300.901%20729.065%20301.144%20729.312C302.213%20730.431%20303.337%20731.492%20304.442%20732.592C305.566%20733.673%20306.653%20734.772%20307.796%20735.796C308.04%20736.024%20311.094%20738.583%20311.338%20738.792C311.469%20738.906%20312.987%20740.176%20313.118%20740.29C313.174%20740.347%20313.942%20740.972%20314.017%20741.029C314.073%20741.086%20314.879%20741.674%20314.954%20741.712C324.791%20749.239%20335.734%20755.174%20347.145%20759.838C358.575%20764.483%20370.473%20767.82%20382.54%20770.209C394.607%20772.617%20406.842%20774.077%20419.096%20775.006C431.369%20775.916%20443.661%20776.315%20455.934%20776.485C468.207%20776.675%20480.499%20776.675%20492.772%20776.732L566.466%20777.035C576.884%20777.187%20703.436%20777.509%20713.873%20777.585C724.291%20777.68%20846.271%20777.983%20856.689%20777.926C856.914%20777.926%20858.263%20777.926%20859.631%20777.926C860.999%20777.926%20862.348%20777.926%20862.573%20777.926C864.578%20777.926%20875.689%20777.926%20888.205%20777.926C905.406%20777.926%20925.287%20777.945%20928.041%20777.926C928.453%20777.926%20931.732%20777.926%20934.206%20777.926C935.573%20777.926%20936.679%20777.926%20936.923%20777.926C939.64%20777.926%20971.381%20778.021%20974.098%20778.097C982.53%20778.135%20990.961%20778.249%20999.412%20778.4C1003.37%20778.476%201007.3%20778.552%201011.25%20778.628C1030.97%20779.045%201050.7%20779.481%201070.43%20779.5H1072.39C1076.8%20779.5%201081.22%20779.481%201085.62%20779.424C1104.47%20779.197%201123.32%20778.495%201142.12%20776.921C1145.08%20776.694%201148.04%20776.391%201151.02%20776.106C1153.98%20775.803%201156.94%20775.499%201159.9%20775.158C1166.51%20774.362%201173.13%20773.509%201179.72%20772.428C1191.54%20770.551%201203.27%20768.105%201214.85%20765.071C1217.12%20764.502%201221.24%20763.289%201223.51%20762.644C1226.4%20761.81%201229.24%20760.881%201232.09%20759.952C1238.2%20757.98%201244.2%20755.705%201250.16%20753.278C1253.12%20752.045%201256.06%20750.737%201258.98%20749.372C1260.44%20748.689%201261.9%20748.007%201263.35%20747.305C1264.51%20746.755%201266.49%20745.675%201267.64%20745.106C1270.49%20743.608%201273.31%20742.091%201276.09%20740.461C1278.34%20739.209%201282.12%20736.744%201284.31%20735.379C1284.86%20735.038%201285.79%20734.393%201286.34%20734.052C1286.88%20733.711%201287.8%20733.028%201288.32%20732.687C1289.39%20731.966%201291.21%20730.62%201292.26%20729.862C1293.83%20728.705%201295.39%20727.549%201296.92%20726.354C1297.94%20725.558%201298.93%20724.761%201299.9%20723.946C1301.93%20722.353%201305.3%20719.301%201307.21%20717.594C1309.57%20715.395%201311.86%20713.12%201314.11%20710.806C1315.01%20709.896%201316.54%20708.209%201317.42%20707.28C1318.3%20706.351%201319.76%20704.588%201320.61%20703.621C1322.71%20701.156%201324.75%20698.653%201326.72%20696.074C1328.31%20694.045%201330.88%20690.272%201332.32%20688.149C1333.22%20686.803%201334.12%20685.456%201334.98%20684.072C1335.67%20682.992%201336.82%20681.02%201337.49%20679.901C1339.5%20676.488%201341.37%20672.999%201343.09%20669.454C1347.08%20661.358%201350.4%20652.939%201353%20644.293C1353.98%20641.089%201354.86%20637.866%201355.65%20634.624C1357.95%20625.238%201359.53%20615.701%201360.57%20606.107C1360.86%20603.415%201361.12%20600.722%201361.32%20598.011C1362.11%20587.735%201362.35%20577.458%201362.26%20567.181C1362.13%20554.194%201361.46%20541.225%201360.59%20528.294C1360.5%20526.91%201360.41%20525.506%201360.31%20524.122C1358.64%20499.588%201356.45%20475.11%201356.06%20450.613C1355.85%20438.725%201356.06%20426.818%201357.01%20414.986C1358.05%20402.169%201359.96%20389.447%201363.07%20376.99C1366.05%20365.026%201370.13%20353.346%201375.19%20342.121C1380.27%20330.897%201386.26%20320.09%201392.78%20309.604C1399.16%20299.423%201405.99%20289.582%201413.17%20279.95C1420.74%20269.788%201428.69%20259.852%201436.7%20250.012C1452.33%20230.862%201468.43%20212.034%201483.44%20192.259C1490.78%20182.551%201497.9%20172.616%201504.5%20162.32C1511.32%20151.645%201517.59%20140.61%201523.05%20129.12C1528.24%20118.18%201532.62%20106.842%201536.05%2095.2002C1536.61%2093.2852%201537.16%2091.3512%201537.68%2089.4173C1540.29%2079.6337%201542.27%2069.6985%201543.64%2059.6495C1544.18%2055.6678%201544.63%2051.6861%201544.99%2047.7044C1545.64%2040.1961%201545.98%2032.6688%201546%2025.1415V23.8143C1546%2017.6521%201545.76%2011.49%201545.33%205.34685C1545.21%203.56457%201545.08%201.78228%201544.93%200H35.3922V0.0758578Z%22%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20155.9%201546%20623.6%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M35.3922%200.0758578C30.3705%205.87774%2025.7612%2012.0588%2021.6764%2018.5812C15.0246%2029.2749%209.81564%2040.8976%206.2368%2052.9943C2.63922%2065.0911%200.671795%2077.6618%200.147149%2090.2325C-0.377498%20102.822%200.521896%20115.431%202.50806%20127.793C6.51786%20152.593%2014.8185%20176.464%2025.4614%20198.989C36.1604%20221.533%2049.2766%20242.826%2064.0604%20262.791C71.4429%20272.783%2079.3313%20282.415%2087.5196%20291.706C95.6516%20301.053%20104.008%20310.192%20112.384%20319.274C129.154%20337.457%20146.168%20355.375%20162.469%20373.937C178.752%20392.499%20194.379%20411.687%20208.02%20432.297C209.687%20434.781%20211.299%20437.322%20212.891%20439.862C214.184%20441.929%20216.489%20445.702%20217.726%20447.807C219.3%20450.48%20220.799%20453.192%20222.298%20455.903C223.778%20458.633%20225.258%20461.364%20226.645%20464.132C227.75%20466.312%20229.661%20470.294%20230.692%20472.512C232.004%20475.318%20233.296%20478.143%20234.458%20481.025C236.838%20486.751%20239.105%20492.534%20241.054%20498.431C244.989%20510.168%20247.799%20522.245%20249.898%20534.456C252.015%20546.666%20253.477%20559.01%20254.751%20571.353C257.318%20596.058%20259.06%20620.915%20263.501%20645.431C265.712%20657.679%20268.616%20669.833%20272.776%20681.57C276.955%20693.287%20282.388%20704.587%20289.452%20714.826C289.546%20714.959%20290.67%20716.627%20290.764%20716.76C291.195%20717.405%20291.701%20717.992%20292.169%20718.618C292.375%20718.884%20294.811%20722.05%20295.017%20722.296C295.935%20723.548%20297.004%20724.667%20298.034%20725.842C298.259%20726.089%20300.901%20729.065%20301.144%20729.312C302.213%20730.431%20303.337%20731.492%20304.442%20732.592C305.566%20733.673%20306.653%20734.772%20307.796%20735.796C308.04%20736.024%20311.094%20738.583%20311.338%20738.792C311.469%20738.906%20312.987%20740.176%20313.118%20740.29C313.174%20740.347%20313.942%20740.972%20314.017%20741.029C314.073%20741.086%20314.879%20741.674%20314.954%20741.712C324.791%20749.239%20335.734%20755.174%20347.145%20759.838C358.575%20764.483%20370.473%20767.82%20382.54%20770.209C394.607%20772.617%20406.842%20774.077%20419.096%20775.006C431.369%20775.916%20443.661%20776.315%20455.934%20776.485C468.207%20776.675%20480.499%20776.675%20492.772%20776.732L566.466%20777.035C576.884%20777.187%20703.436%20777.509%20713.873%20777.585C724.291%20777.68%20846.271%20777.983%20856.689%20777.926C856.914%20777.926%20858.263%20777.926%20859.631%20777.926C860.999%20777.926%20862.348%20777.926%20862.573%20777.926C864.578%20777.926%20875.689%20777.926%20888.205%20777.926C905.406%20777.926%20925.287%20777.945%20928.041%20777.926C928.453%20777.926%20931.732%20777.926%20934.206%20777.926C935.573%20777.926%20936.679%20777.926%20936.923%20777.926C939.64%20777.926%20971.381%20778.021%20974.098%20778.097C982.53%20778.135%20990.961%20778.249%20999.412%20778.4C1003.37%20778.476%201007.3%20778.552%201011.25%20778.628C1030.97%20779.045%201050.7%20779.481%201070.43%20779.5H1072.39C1076.8%20779.5%201081.22%20779.481%201085.62%20779.424C1104.47%20779.197%201123.32%20778.495%201142.12%20776.921C1145.08%20776.694%201148.04%20776.391%201151.02%20776.106C1153.98%20775.803%201156.94%20775.499%201159.9%20775.158C1166.51%20774.362%201173.13%20773.509%201179.72%20772.428C1191.54%20770.551%201203.27%20768.105%201214.85%20765.071C1217.12%20764.502%201221.24%20763.289%201223.51%20762.644C1226.4%20761.81%201229.24%20760.881%201232.09%20759.952C1238.2%20757.98%201244.2%20755.705%201250.16%20753.278C1253.12%20752.045%201256.06%20750.737%201258.98%20749.372C1260.44%20748.689%201261.9%20748.007%201263.35%20747.305C1264.51%20746.755%201266.49%20745.675%201267.64%20745.106C1270.49%20743.608%201273.31%20742.091%201276.09%20740.461C1278.34%20739.209%201282.12%20736.744%201284.31%20735.379C1284.86%20735.038%201285.79%20734.393%201286.34%20734.052C1286.88%20733.711%201287.8%20733.028%201288.32%20732.687C1289.39%20731.966%201291.21%20730.62%201292.26%20729.862C1293.83%20728.705%201295.39%20727.549%201296.92%20726.354C1297.94%20725.558%201298.93%20724.761%201299.9%20723.946C1301.93%20722.353%201305.3%20719.301%201307.21%20717.594C1309.57%20715.395%201311.86%20713.12%201314.11%20710.806C1315.01%20709.896%201316.54%20708.209%201317.42%20707.28C1318.3%20706.351%201319.76%20704.588%201320.61%20703.621C1322.71%20701.156%201324.75%20698.653%201326.72%20696.074C1328.31%20694.045%201330.88%20690.272%201332.32%20688.149C1333.22%20686.803%201334.12%20685.456%201334.98%20684.072C1335.67%20682.992%201336.82%20681.02%201337.49%20679.901C1339.5%20676.488%201341.37%20672.999%201343.09%20669.454C1347.08%20661.358%201350.4%20652.939%201353%20644.293C1353.98%20641.089%201354.86%20637.866%201355.65%20634.624C1357.95%20625.238%201359.53%20615.701%201360.57%20606.107C1360.86%20603.415%201361.12%20600.722%201361.32%20598.011C1362.11%20587.735%201362.35%20577.458%201362.26%20567.181C1362.13%20554.194%201361.46%20541.225%201360.59%20528.294C1360.5%20526.91%201360.41%20525.506%201360.31%20524.122C1358.64%20499.588%201356.45%20475.11%201356.06%20450.613C1355.85%20438.725%201356.06%20426.818%201357.01%20414.986C1358.05%20402.169%201359.96%20389.447%201363.07%20376.99C1366.05%20365.026%201370.13%20353.346%201375.19%20342.121C1380.27%20330.897%201386.26%20320.09%201392.78%20309.604C1399.16%20299.423%201405.99%20289.582%201413.17%20279.95C1420.74%20269.788%201428.69%20259.852%201436.7%20250.012C1452.33%20230.862%201468.43%20212.034%201483.44%20192.259C1490.78%20182.551%201497.9%20172.616%201504.5%20162.32C1511.32%20151.645%201517.59%20140.61%201523.05%20129.12C1528.24%20118.18%201532.62%20106.842%201536.05%2095.2002C1536.61%2093.2852%201537.16%2091.3512%201537.68%2089.4173C1540.29%2079.6337%201542.27%2069.6985%201543.64%2059.6495C1544.18%2055.6678%201544.63%2051.6861%201544.99%2047.7044C1545.64%2040.1961%201545.98%2032.6688%201546%2025.1415V23.8143C1546%2017.6521%201545.76%2011.49%201545.33%205.34685C1545.21%203.56457%201545.08%201.78228%201544.93%200H35.3922V0.0758578Z%22%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat;
}
/* 200px do fim das abas (y19450) até o fim da seção (y19650), nós 2:1285 / 2:1278 */
.amb-body {
  padding: 40px 0 clamp(80px, 13.9vw, 200px);
  position: relative;
}
/* O conteúdo da seção tem 1195px no Figma (x 122 → 1317), maior que o .container padrão */
.amb-body .container { max-width: 1275px; }
/* "04" (Light 32px) e título Bold 57,2px / line-height 50px (nós 2:1290 / 2:1291) */
.ambiental .sec-head { gap: 16px; margin-bottom: 0; }
.ambiental .sec-title { font-size: clamp(34px, 4.4vw, 57.2px); line-height: 50px; }

/* Do fim do título (y18672) ao topo do texto (y18771), nós 2:1289 / 2:1287 */
.amb-compromisso { display: grid; grid-template-columns: 628fr 469fr; gap: 102px; margin-top: clamp(48px, 6.8vw, 98px); }
.amb-h3 { font-size: clamp(26px, 3.05vw, 36.6px); font-weight: 700; line-height: 1.2; margin-bottom: 40px; }
.amb-compromisso p { font-size: 18.75px; line-height: 1.4; margin-bottom: 22px; color: rgba(255,255,255,.95); }
.amb-ico { width: 57px; height: 51px; display: block; margin-bottom: 15px; }
/* Aside (nó 2:1288): Bold 23,4px, não os 18,75px da coluna de texto */
.amb-aside p { font-size: clamp(18px, 1.63vw, 23.4px); font-weight: 700; line-height: 1.3; }
.amb-aside b { color: #fff; }

/* Abas de Ambiental (Figma nodes 2:1285 / 2:7108) — cada aba tem a sua cor */
/* 118px do fim da coluna de texto (y19074) ao topo das abas (y19192) */
.amb-tabs { margin-top: clamp(56px, 8.2vw, 118px); }
.tabs--amb {
  position: relative;
  justify-content: space-between;
  border-bottom: 2px solid rgba(255,255,255,.55);
  background: transparent;
  gap: clamp(12px, 1.6vw, 24px);
  flex-wrap: nowrap;
}
.tabs--amb .tab {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(13px, 1.53vw, 22px);   /* 22px no nó 2:1285 */
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;      /* no Figma cada título ocupa uma única linha */
  text-align: left;
  cursor: pointer;
  padding: 0 0 15px;
  transition: color .35s ease;
}
/* Fantasma em bold (mesmo padrão de `.main-nav a::after`): a caixa da aba já nasce
   com a largura do bold. Sem ele a pílula, medida no clique, ficava com a largura do
   texto em regular — o `font-weight` só engrossa depois — e saía menor que o título.
   De quebra, bolar uma aba deixa de empurrar as vizinhas. `data-label` vive no HTML. */
.tabs--amb .tab::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}
.tabs--amb .tab.is-active { color: var(--amb-accent); font-weight: 700; }
.tabs--amb .tab:not(.is-active):hover { color: rgba(255,255,255,.75); }

/* Pílula que desliza e troca de cor ao selecionar cada título */
.amb-ink {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 5px;
  width: 0;
  border-radius: 100px;
  background: var(--amb-accent);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1),
              width .45s cubic-bezier(.4, 0, .2, 1),
              background-color .45s ease;
}

/* Altura FIXA do bloco de abas (258px no nó 2:1285, qualquer que seja a variante).
   Os 3 painéis ficam empilhados na mesma célula do grid — todos ocupam espaço, e a
   caixa fica com a altura do mais alto. Se em vez disso o painel inativo saísse do
   fluxo (`display: none`), a seção mudaria de altura a cada clique e o fundo, que é
   `background-size: 100% 100%`, encolheria/esticaria junto. */
.amb-tabs .tab-panels { display: grid; padding: 24px 0 0; }
.amb-tabs .tab-panel {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: 426fr 314fr 325fr;
  column-gap: 65px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.amb-tabs .tab-panel.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: ambFade .45s ease both;
}
@keyframes ambFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.amb-col { position: relative; }
.amb-col + .amb-col::before {
  content: '';
  position: absolute;
  left: -40px; top: 0; bottom: 0;
  border-left: 1.5px dashed var(--amb-accent);
  transition: border-color .45s ease;
}
.amb-col-lead { font-weight: 500; font-size: 19px !important; }
.amb-col h5 {
  color: var(--amb-accent);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 15px;
  transition: color .45s ease;
}
.amb-col p { font-size: 18px; line-height: 1.4; color: rgba(255,255,255,.95); }

/* Cor de destaque por aba (Figma node 2:7108) — herdada por títulos, pílula,
   divisores tracejados e subtítulos das colunas */
.amb-tabs { --amb-accent: #fcb525; }
.amb-tabs[data-amb-active="amb-1"] { --amb-accent: #86cee4; }
.amb-tabs[data-amb-active="amb-2"] { --amb-accent: #f6ad79; }

@media (prefers-reduced-motion: reduce) {
  .amb-ink, .amb-col h5, .amb-col + .amb-col::before, .tabs--amb .tab { transition: none; }
  .amb-tabs .tab-panel.is-active { animation: none; }
}

/* ============================================================
   FECHAMENTO
   ============================================================ */
.fechamento { position: relative; background: var(--creme-2); overflow: hidden; }
/* Figma 2:1217 — imagem 117,79% de largura, deslocada −8,16% à esquerda (centro da cena) */
.fechamento-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 117.79%;
  height: 100%;
  max-width: none;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center center;
}
/* Texto alinhado à esquerda como o restante do site (Figma 2:1275 — x 124) */
.fechamento-content {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  padding: 90px clamp(22px, 8.61vw, 124px);
  text-align: left;
}
.fechamento-title { color: var(--azul-1); font-size: clamp(30px, 4vw, 57.2px); font-weight: 700; line-height: 50px; margin-bottom: 28px; max-width: 639px; }
.fechamento-content p { font-size: clamp(15px, 1.3vw, 18.75px); color: #000; margin-bottom: 14px; max-width: 539px; }
/* A assinatura "Hcor. A gente não para." era script 64px. Numa sans, 64px numa
   frase dessas estoura a coluna de 539px e briga com o título da seção — vira
   Light 300 em 44px, que é o mesmo gesto (leve, destacado) com o peso no lugar
   da forma. `line-height` explícito: sem ele a frase herda o 1.55 do body e as
   duas linhas abrem demais nesse corpo. */
.fechamento-content p.fechamento-script {
  color: var(--azul-1);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 300;
  line-height: 1.2;
  margin: 20px 0 26px;
  max-width: 539px;
}
/* Botão Figma 2:1274 — 298×44, padding 10/20, borda 1px, fonte 20px */
.fechamento-content .btn-outline {
  padding: 10px 20px;
  font-size: 20px;
  line-height: normal;
  border-width: 1px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--branco-azul); padding: 46px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.copyright { width: 100%; font-size: 14px; color: #444; }
.social-links { display: flex; gap: 20px; }
.social-links a { width: 40px; height: 40px; display: grid; place-items: center; transition: transform .2s ease, opacity .2s ease; }
.social-links a:hover { transform: translateY(-2px); opacity: .75; }
.social-links img { width: 100%; height: 100%; object-fit: contain; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
/* As setas do carrossel de Governança ficam 96px FORA da pista (medida do Figma).
   A pista tem 904px e vive dentro do container: abaixo de ~1120px sobra menos de
   96px de cada lado e as setas caíam fora da tela — ficavam invisíveis entre
   820px (onde a regra antiga as trazia para dentro) e ~1120px. */
@media (max-width: 1120px) {
  .gov-cards-prev { left: 6px; }
  .gov-cards-next { right: 6px; }
}

@media (max-width: 1024px) {
  .main-nav { gap: 20px; }
  .main-nav a { font-size: 14px; }
  .traj-cols { grid-template-columns: 1fr; gap: 30px; }
  .traj-cols > :last-child { padding-top: 0; }
  .traj-subtitle { margin: 40px 0 28px; }
  .destaques-shell { grid-template-columns: 1fr 1fr; }
  .destaques-title { grid-column: 1 / 3; padding-bottom: 16px; }
  .destaques-tabs { grid-column: 1 / 3; }
  /* Em 2 colunas o texto precisa de altura livre: o min-height do nó sai de cena
     (os painéis continuam empilhados, então a label segue com tamanho fixo). */
  .destaques-panel,
  .destaques-panel[data-destaques-panel="soc"] {
    grid-column: 1 / 3;
    grid-template-columns: 1fr 1fr;
    row-gap: 22px;
    min-height: 0;
  }
  /* Abaixo de 1024px a forma orgânica (proporção fixa) não comporta os cards sem
     cortar o texto: ela sai de cena e o conteúdo vira um painel branco em fluxo. */
  .reco-stage { width: 100%; margin-left: 0; }
  .reco-shape { display: none; }
  .reco-head {
    position: static;
    left: auto;
    width: 100%;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }
  .reco-medal { width: 96px; }
  .reco-head h3 { margin-top: 0; }
  .reco-body {
    position: static;
    background: #fff;
    border-radius: 40px;
    padding: 28px 24px 18px;
  }
  .reco-card { flex: 0 0 50%; padding: 0 14px; }
  .reco-card:nth-child(odd)::before { display: none; }
  /* Mesma especificidade da regra base (0,2,0), senão ela vence e os pontos continuam
     absolutos aqui, onde a forma nem existe. */
  .carousel-dots.carousel-dots--reco { position: static; width: auto; padding-top: 18px; }
  /* Aqui os pontos caem **fora** do painel branco, sobre o gradiente — e o rosa do nó
     (#e25c79) é a própria cor do fundo nesse ponto: o ativo sumiria. Sobre o gradiente
     eles viram brancos, como os de Governança sobre o amarelo. */
  .carousel-dots.carousel-dots--reco button { background: rgba(255, 255, 255, .5); }
  .carousel-dots.carousel-dots--reco button.active { background: #fff; }
  /* Sem a coluna estreita da intro, o card ocupa a largura toda e o texto define
     a altura: os recuos em % da largura ficariam enormes e o min-height sobra. */
  .expandindo { grid-template-columns: 1fr; gap: 30px; }
  .expandindo-panel .tab-panels { padding: 28px 24px 26px; min-height: 0; }
  .tabs--exp .tab { min-height: 52px; }

  /* Abaixo de 1024px a coluna de texto do Hcor ficaria estreita demais ao lado da
     foto: o bloco sai do posicionamento absoluto e volta para o fluxo, embaixo dela. */
  .o-hcor-inner { min-height: 0; padding-bottom: 29px; }
  .o-hcor-photo { position: relative; width: min(100%, 830px); }
  .o-hcor-text {
    position: static;
    width: auto;
    max-width: none;
    padding: 38px 22px 29px;
  }
  .o-hcor-text .section-blue-title { line-height: 1.05; margin-bottom: 20px; }

  /* Em 4 colunas cada rótulo fica com ~90px nessa largura — menos que a palavra
     "treinamentos" — e a barra estourava a tela. Passa a 2 colunas já aqui (antes
     só em 820px). */
  .social-stats-inner { grid-template-columns: repeat(2, 1fr); }

  /* A pílula não comporta título + 4 colunas nessa largura: o título sobe para cima das colunas */
  .exc-bar {
    width: 100%;
    grid-template-columns: 1fr;
    row-gap: 16px;
    min-height: 0;
    padding: 26px 30px;
    border-radius: 44px;
  }
  .exc-bar-title br { display: none; }
  .exc-bar-stats { grid-template-columns: repeat(4, 1fr); gap: 22px 20px; }
  .exc-stat { padding-right: 0; }
  .exc-bar-text { max-width: none; }
}

@media (max-width: 820px) {
  :root { --header-h: 78px; }
  /* Mobile: o hero é uma FAIXA COMPACTA com a imagem INTEIRA (nós Figma
     92-3750/3752/3753/3754/3755). ⚠️ A tentativa anterior usava um frame de 72vh
     com `cover`, que dava zoom de ~2,5× e CORTAVA a foto. Agora o `.hero-frame`
     tem a **proporção nativa do PNG** (`4096/2340`), então `cover` mostra a imagem
     **100% inteira**, sem corte e sem faixas bege (a proporção da caixa = a da
     foto). O texto fica **sobreposto** sobre a área clara à esquerda (médico/parede),
     como no Figma: "Relatório de" / "SUSTENTABILIDADE" pequenos (~18px) e o "2025"
     grande (~46px), com a legenda no rodapé. O `.hero-content` é **absoluto**
     (`inset: 0`) para NÃO esticar a faixa — se ficasse no fluxo, o texto (mais alto
     que a faixa) forçaria o frame a crescer e o `cover` voltaria a cortar. */
  .hero-frame { aspect-ratio: 4096 / 2340; min-height: 0; }
  .hero-bg { object-fit: cover; object-position: center; }
  .hero .hero-content {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    margin: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(12px, 3.5vw, 20px) clamp(20px, 6.5vw, 30px);
    box-sizing: border-box;
  }
  /* Título mobile: bem menor que o desktop — quem domina é o "2025". As duas
     `margin-top: auto` distribuem o espaço: título no terço superior, legenda na base. */
  .hero-title { margin-top: auto; max-width: 58%; }
  .hero-title .l1 { font-size: clamp(15px, 4.7vw, 19px); }
  .hero-title .l2 { font-size: clamp(15px, 4.8vw, 19px); }
  .hero-title .l3 { font-size: clamp(34px, 11.8vw, 48px); margin-top: 2px; }
  .hero-caption { margin-top: auto; max-width: 54%; font-size: 10.5px; }
  .header-inner { padding: 0 22px; }
  /* A nav off-canvas e o botão do hambúrguer moram em `.site-header.is-compact`
     (ligado por medição no `script.js`), não neste breakpoint. */

  .container { padding: 0 22px; }
  .valor-grid,
  .social-essencia,
  .social-brasil,
  .amb-compromisso,
  .lideranca,
  .cuidar-cols { grid-template-columns: 1fr; gap: 30px; }
  /* Idade: no mobile cada número vem logo abaixo do(s) seu(s) boneco(s), empilhados
     (nós Figma / imagem de referência). O SVG combinado (9 bonecos numa linha) sai de
     cena; cada `.idade-picto-crop` mostra um RECORTE do próprio secao-7.6.svg. Os limites
     saem dos clip-rects do SVG: cada boneco ocupa 15×38; grupo "one" = 1 boneco em
     x[0–15]/y[44–82]; grupo "seven" = 7 bonecos (2 linhas) em x[242–329]/y[0–82].
     Escala S=1.4 → bg-size 700×115. */
  .idade-picto { display: none; }
  .idade-nums > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 34px;
  }
  .idade-nums > div:last-child { margin-bottom: 0; }
  .idade-picto-crop {
    display: block;
    background-image: url('assets/secao-7.6.svg');
    background-repeat: no-repeat;
    background-size: 700px 115px;
  }
  .idade-picto-crop--one { width: 21px; height: 53px; background-position: 0 -62px; }
  .idade-picto-crop--seven { width: 122px; height: 115px; background-position: -339px 0; }
  .lideranca-text p { max-width: none; }
  .o-hcor-photo img { margin-bottom: -78px; }
  .o-hcor-text { padding: 38px 26px 29px; }
  .multiesp-grid { grid-template-columns: repeat(2, 1fr); }
  .exc-bar-stats { grid-template-columns: repeat(2, 1fr); }
  .excelencia-dots { right: -20px; width: min(240px, 55vw); }
  .excelencia-title {
    margin-left: 0;
    white-space: normal;
    line-height: 1.05;
  }
  /* No desktop a foto é uma faixa de 1000px com `cover` (só uma fatia aparece).
     No celular isso vira uma tira altíssima e cortada — a altura passa a seguir a
     proporção nativa da foto (`height: auto`) e a imagem aparece INTEIRA, sem corte. */
  .trajetoria-photo { height: auto; }
  .trajetoria-photo img { height: auto; object-fit: initial; }

  /* Destaques — no celular vira um ACCORDION vertical (nós Figma 92-989 / 92-1009 /
     92-999): título "Destaques" no topo, as 3 abas empilhadas como faixas coloridas
     e a aba ativa expande o seu painel logo abaixo dela. Sem mexer no DOM nem no JS:
     `display: contents` dissolve o wrapper das abas para que os 3 botões e os 3
     painéis fiquem no MESMO fluxo flex do shell e possam ser intercalados por `order`. */
  .destaques-shell { display: flex; flex-direction: column; gap: 0; }
  .destaques-title { order: 0; grid-column: auto; align-self: start; padding-bottom: 12px; }
  .destaques-tabs { display: contents; }
  .destaques-tab--gov { order: 1; }
  .destaques-panel[data-destaques-panel="gov"] { order: 2; }
  .destaques-tab--soc { order: 3; }
  .destaques-panel[data-destaques-panel="soc"] { order: 4; }
  .destaques-tab--amb { order: 5; }
  .destaques-panel[data-destaques-panel="amb"] { order: 6; }
  /* Faixa da aba: largura cheia, um pouco mais de respiro que o desktop. As inativas
     seguem em `opacity: .25` (herdado), o que reproduz o visual escurecido do Figma. */
  .destaques-tab { padding: 20px 16px; border-radius: 0; }
  /* Cantos externos arredondados: topo da 1ª faixa e base do último elemento visível. */
  .destaques-tab--gov { border-radius: 14px 14px 0 0; }
  .destaques-tab--amb { border-radius: 0 0 14px 14px; }
  /* Quando Ambiental está ativa, a base arredondada passa para o seu painel. */
  .destaques-tab--amb.is-active { border-radius: 0; }
  /* Painel inativo COLAPSA (o accordion muda de altura conforme a aba — a trava de
     altura fixa era exclusiva do desktop). O ativo abre logo abaixo da sua aba. */
  .destaques-panel,
  .destaques-panel[data-destaques-panel="soc"] {
    display: none;
    grid-column: auto;
    grid-template-columns: 1fr;
    row-gap: 14px;
    min-height: 0;
    border-radius: 0;
    padding: 22px 24px 26px;
  }
  .destaques-panel.is-active {
    display: grid;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .destaques-panel[data-destaques-panel="amb"].is-active { border-radius: 0 0 14px 14px; }
  .destaques-panel[data-destaques-panel="soc"] p:nth-child(1),
  .destaques-panel[data-destaques-panel="soc"] p:nth-child(2),
  .destaques-panel[data-destaques-panel="soc"] p:nth-child(3) { grid-column: auto; }
  /* No celular a forma dos Reconhecimentos é FULL-BLEED: ocupa toda a largura da tela
     (sem as margens laterais do container 1312/-48px). O conteúdo é que ganha recuo. */
  .reconhecimentos-inner { width: 100%; max-width: none; }
  /* Fundo dos prêmios: a FORMA ORGÂNICA do Figma (nó 92-3816 "forma orgânica longa"),
     não mais um retângulo branco genérico. A arte `reco-forma-mobile.png` (1550×596,
     branca sobre TRANSPARENTE) entra como background do palco. O miolo branco cobre toda
     a largura; topo e canto inferior são transparentes: o gradiente coral da seção
     aparece como "faixa" atrás do selo/título e como "onda" na base. */
  .reco-stage {
    background-image: url('assets/reco-forma-mobile.png');
    background-repeat: no-repeat;
    /* 72,3% no X reproduz o deslize do nó; a 360% o miolo branco cobre a largura toda
       (full-bleed). Y=0 deixa a borda superior do miolo cruzar o meio do selo — ele
       fica metade no coral (topo), metade no branco. */
    background-position: 72.3% 0;
    background-size: 360% auto;
  }
  /* O miolo branco vem da própria forma — o box perde o retângulo/bordas brancas. Recuo
     lateral maior porque o palco agora é full-bleed (o texto não pode encostar na borda). */
  .reco-body { background: none; border-radius: 0; padding: 24px 26px 16px; }
  /* Selo + título rentes à forma: o selo sobe e cresce, cavalgando a borda superior do
     miolo (metade dentro, metade fora), como no nó 2:3819; o título fica logo ao lado. */
  .reco-head { padding-left: 22px; gap: 14px; margin-bottom: 10px; align-items: center; }
  .reco-head h3 { font-size: 26px; }
  /* +10px a pedido: selo um pouco mais baixo sobre a borda do miolo. */
  .reco-medal { width: 100px; margin-top: 20px; }
  /* 2 prêmios por vez (design mobile do Figma, nó 92-3826). O carrossel anda de 2 em
     2 (JS: pageStarts [0,2,4,6,8,10]), então nenhum prêmio é pulado. */
  .reco-card { flex: 0 0 50%; padding: 0 10px 8px; }
  .reco-card::before { display: none; }
  /* Logos menores, a pedido — num card de 50% da tela os 56px anteriores ficavam
     grandes demais. Variantes reduzidas na mesma proporção. */
  .reco-logo { height: 44px; }
  .reco-logo--tall { height: 46px; }
  .reco-logo--wide { height: 44px; max-width: 76px; }
  .reco-logo--round { height: 42px; }
  .reco-logo--dual { height: 38px; max-width: 116px; }
  /* Setas prev/next (nós 2:609 / 2:610 — chevron ~11×22): no rodapé do palco,
     flanqueando os pontos centrais, sobre o gradiente coral. Chevron branco de
     secao-6.6.svg, como os pontos brancos daqui. */
  /* ⚠️ A forma (miolo branco) cobre TODO o palco (`background-size: 360% auto`), então a
     navegação branca (pontos/setas) ficaria "white-on-white" e sumiria. Como a altura do
     corpo varia com a largura (não dá para cortar a forma numa altura fixa), a navegação
     é tirada do fluxo e ancorada LOGO ABAIXO do palco (`top: 100%`), sobre o gradiente
     coral — onde os brancos aparecem, como no resto da seção.
     Pontos e setas compartilham o mesmo eixo vertical (altura 38px + margin-top 16px). */
  .carousel-dots.carousel-dots--reco {
    position: absolute;
    top: 100%;
    margin-top: 16px;
    left: 0;
    right: 0;
    width: auto;
    height: 38px;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .reco-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    bottom: auto;
    margin-top: 16px;
    height: 38px;
    background: none;
    border: 0;
    padding: 0 12px;
    cursor: pointer;
    z-index: 3;
  }
  .reco-arrow img { width: 13px; height: auto; display: block; }
  .reco-arrow--prev { left: 4%; }
  .reco-arrow--next { right: 4%; }
  .reco-arrow--next img { transform: scaleX(-1); }
  .reco-arrow[hidden] { display: none; }
  .teal-cards { grid-template-columns: 1fr; gap: 20px; }
  .teal-card { aspect-ratio: 380 / 500; }
  .teal-face { padding: 30px; }
  .teal-title,
  .teal-more { left: 30px; right: 30px; }
  .teal-more { top: calc(50% + var(--teal-caixa) / 2 + 14px); }
  .teal-panel-inner { padding: 24px; }
  /* Card compacto do Figma (nó 92-3827 "GOV MOB"): faixa colorida de ~166px no topo
     (ícone + título 23,4px), corpo 15px. UM card por vez, SEM peek: a viewport encolhe
     44px de cada lado e o card ocupa 100% dela — os vizinhos ficam fora da área visível
     (clipados pelo `overflow: hidden`). Os 44px de folga viram os VÃOS onde as setas
     ficam bem visíveis, sobre o amarelo, longe do texto do card. */
  .gov-cards-viewport { width: calc(100% - 88px); margin: 0 auto; }
  .gov-cards-track { gap: 0; }
  /* `align-content/-items: start`: os cards têm altura igual (flex row) e o `align-items:
     center` do base centralizava o corpo dos cards curtos (NPS, Gestão) na sobra vertical,
     abrindo uma margem enorme entre a faixa colorida e a 1ª linha. Empacotando no topo, o
     texto encosta logo abaixo do box e a sobra fica no rodapé do card. */
  .gov-card { flex: 0 0 100%; grid-template-columns: 1fr; gap: 16px; padding: 15px; align-content: start; align-items: start; }
  /* `align-self: start` (o base é `stretch`): sem isso o card com menos texto no corpo
     (NPS) tem mais folga vertical, que o grid estica na faixa colorida — deixando o box
     do NPS mais alto que os demais. Com `start` a faixa fica sempre em ~166px. */
  .gov-card-aside { align-self: start; min-height: 166px; padding: 18px 20px; justify-content: space-between; gap: 14px; }
  .gov-card-aside h4 { font-size: 23.4px; }
  .gov-card-body p { font-size: 15px; }
  /* Setas nos vãos laterais (fora do card). Sobrepõe o `left/right: 6px` do @media
     1120px, que as jogava para DENTRO do card. O JS já esconde cada seta na ponta. */
  .gov-cards-prev { left: 0; }
  .gov-cards-next { right: 0; }
  /* `.gov-white.container`: o `.container { padding: 0 22px }` zera o padding-top
     do desktop e cola "Valor em Saúde" no amarelo do hero. Restaura o respiro. */
  .gov-white { padding: 48px 22px 40px; }
  /* Painel colorido de Expandindo o Cuidado: no mobile a largura cheia deixa o
     texto colado nas bordas com o padding de 24px do ≤1024. */
  .expandindo-panel .tab-panels { padding: 28px 32px 30px; }
  /* Proadi mobile: acordeão + foto no mesmo fluxo flex (`display: contents` no
     wrapper). O JS define `order` para a foto ficar logo após o card aberto
     (card → imagem → próximo card). Desktop (grid lado a lado) intacto. */
  .proadi {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 16px;
  }
  .proadi-accordion { display: contents; height: auto; }
  /* No desktop o aberto estica até a altura da foto (`flex: 1`); no mobile empilhado
     isso só abre um buraco roxo sob o conteúdo. */
  .proadi-item.is-open { flex: 0 0 auto; }
  /* A caixa segue a proporção 716/755 das fotos (nó 2:1866) — a altura fixa de 280px
     era paisagem e o `cover` cortava as fotos quase quadradas (`foto-essencial3/2`,
     716×755). Com a proporção certa elas aparecem inteiras; a `social-proadi` (paisagem)
     continua recortada à direita, como no desktop. */
  .proadi-photo { width: 100%; aspect-ratio: 716 / 755; }
  /* Os recuos do nó (40px à esquerda) e as pílulas de 65px são para a coluna de
     467px do desktop; na largura cheia do celular ficam desproporcionais. */
  .proadi-item-head { padding: 18px 28px; }
  .proadi-item.is-open .proadi-item-head { padding-bottom: 12px; }
  .proadi-panel { padding: 0 28px 24px; }
  .proadi-item-title { font-size: 24px; }
  .proadi-toggle { width: 32px; height: 32px; font-size: 24px; }
  .proadi-desc { font-size: 15.5px; }
  .proadi-list { margin-top: 26px; gap: 12px; }
  .proadi-list li { padding: 14px 16px; font-size: 15.5px; }
  /* Mesma armadilha do `.container { padding: 0 22px }`: laterais sobem para 28px
     e o padding vertical de `.social-time` / `.social-impacto` é restaurado.
     Em Impacto o topo zerado colava o título no fim da faixa roxa. */
  .social-impacto.container {
    padding: 64px 28px 40px;
  }
  .social-time.container {
    padding: 40px 28px 80px;
  }
  .social-stats-inner {
    grid-template-columns: repeat(2, 1fr);
    padding-left: 28px;
    padding-right: 28px;
  }
  /* Em coluna (≤480) / 2 colunas o conteúdo enche a faixa e cola no branco acima e
     na foto abaixo. Padding vertical cresce o azul; `min-height: 0` evita o
     border-box do desktop comprimir o conteúdo dentro dos 260px. */
  .social-stats-bar {
    padding: 44px 0;
    min-height: 0;
  }
  /* Impacto Social (nó 92-3861): UM indicador por vez (flex:100% + scroll-snap) e a
     barra colada nos indicadores (a margem de 34px do desktop era grande demais). */
  /* Um indicador por vez, SEM gap: o passo é exatamente a largura da viewport, então
     paginar por `clientWidth` (ou arrastar com o snap) alinha cada indicador ao início
     sem cortar. Com gap o passo virava `100% + gap` e cada scroll cortava um pouco mais. */
  .impacto-viewport { scroll-snap-type: x mandatory; }
  .impacto-stats { gap: 0; }
  .impacto-stat { flex: 0 0 100%; scroll-snap-align: start; }
  .impacto-scrollbar { margin-top: 16px; }
  /* No mobile o `.container { padding: 0 22px }` zera o padding vertical de `.social-brasil`
     (mesma especificidade, vem depois) — sem isso "Estamos em todo o Brasil" cola na barra
     de scroll. Um respiro abaixo do carrossel resolve. */
  .impacto-carousel { margin-bottom: 44px; }
  .idade-nums { grid-template-columns: 1fr; }
  .donuts { grid-template-columns: 1fr; }
  /* Em coluna única o mapa ocupa a largura toda, e a forma (150,8% dele, deslocada
     19,2% à direita) passava a sangrar +300px para fora da tela. As proporções do
     Figma só fazem sentido com o mapa na sua coluna: no empilhado a forma volta a
     ficar centrada atrás dele, com uma sangria discreta. */
  .brasil-map-bg { width: 112%; margin-left: 4%; margin-top: -6%; }
  .cuidar-hero img { aspect-ratio: 5 / 3; }
  .cuidar-card { padding: 30px 24px; }
  .cuidar-card p { font-size: 16px; }
  .tab-panel { grid-template-columns: 1fr !important; }
  /* Nessa largura os 3 títulos não cabem em uma linha só (no Figma cabem, com 313px cada) */
  .tabs--exp { gap: 4px; }
  .tabs--exp .tab { white-space: normal; font-size: 13px; padding: 10px 6px; min-height: 48px; }

  /* Ambiental — no mobile as abas viram um ACORDEÃO de pílulas full-width (nós Figma
     92-1289 / 92-1290 / 92-1295), mais linear que a barra horizontal do desktop.
     `display: contents` dissolve os wrappers para intercalar botões e painéis por
     `order` (mesmo padrão do accordion dos Destaques). Sem mexer no DOM nem no JS: o
     handler de `[data-tabs]` continua alternando `is-active`. */
  .amb-tabs { display: flex; flex-direction: column; gap: 12px; }
  .tabs--amb { display: contents; }
  .amb-tabs .tab-panels { display: contents; }
  .amb-ink { display: none; }
  /* Ordem: aba1 · painel1 · aba2 · painel2 · aba3 · painel3 */
  .tabs--amb .tab:nth-of-type(1) { order: 1; }
  .amb-tabs #amb-0 { order: 2; }
  .tabs--amb .tab:nth-of-type(2) { order: 3; }
  .amb-tabs #amb-1 { order: 4; }
  .tabs--amb .tab:nth-of-type(3) { order: 5; }
  .amb-tabs #amb-2 { order: 6; }
  /* Pílula: contornada (inativa) / preenchida na cor do tema (ativa). O clamp do desktop
     daria ~13px nessa largura — daí o font-size fixo aqui. */
  .tabs--amb .tab {
    border: 1px solid #fff;
    border-radius: 100px;
    padding: 14px 18px;
    text-align: center;
    white-space: normal;
    font-size: 19px;
    line-height: 1.2;
    color: #fff;
    opacity: .75;
  }
  .tabs--amb .tab.is-active {
    background: var(--amb-accent);
    border-color: var(--amb-accent);
    color: #1d68aa;
    opacity: 1;
  }
  /* Painel: inativo colapsa (accordion muda de altura); ativo abre logo abaixo da sua
     pílula, com o texto centralizado. Desfaz o empilhamento (visibility/opacity) do desktop. */
  .amb-tabs .tab-panel {
    grid-template-columns: 1fr !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    text-align: center;
    padding: 4px 0 10px;
  }
  .amb-tabs .tab-panel:not(.is-active) { display: none; }
  .amb-col + .amb-col { padding-top: 24px; }
  .amb-col + .amb-col::before { left: 0; right: 0; top: 0; bottom: auto; border-left: 0; border-top: 1.5px dashed var(--amb-accent); }
  .fechamento-bg { opacity: .18; width: 100%; left: 0; transform: none; }
  /* `.fechamento-content.container`: o shorthand do `.container` zera o padding
     vertical e deixa o texto colado na seção anterior / nas laterais. */
  .fechamento-content { padding: 56px 28px; }
}

@media (max-width: 480px) {
  /* (Havia aqui um `.hero-title .l3 { font-size: 78px }` da época da Better Times:
     um corpo grande compensava a tinta pequena da script. Na Figtree ele deixava o
     "2025" 3× maior que o SUSTENTABILIDADE — o `clamp` do seletor base resolve.) */
  /* Selo grande (metade dentro/fora da forma) também no celular estreito; o título
     acompanha. Em 320px ainda cabe ao lado do selo. */
  .reco-medal { width: 84px; }
  .reco-head h3 { font-size: 22px; }
  .multiesp-grid { grid-template-columns: 1fr; }
  .exc-bar-stats { grid-template-columns: 1fr; }
  .social-stats-inner { grid-template-columns: 1fr; }
  /* Em coluna única "treinamento/profissional" pode não caber nem depois do <wbr>;
     aqui a quebra dentro da palavra é preferível ao estouro da viewport. */
  .ssb-item span { overflow-wrap: break-word; }
  .brasil-nums { gap: 26px; }
}