/* =========================================================================
   Enfermeiro Wagner Batista — Deputado Estadual 44240
   Sistema de estilos derivado da identidade visual oficial da candidatura.
   Tokens extraídos dos vetores master (docs/identidade-visual.pdf, docs/logos/).
   ========================================================================= */

/* ----------------------------------------------------------------- fontes */
/* Kurdis — largura normal */
@font-face {
  font-family: 'Kurdis';
  src: url('../fonts/Kurdis-Regular.woff2') format('woff2'),
       url('../fonts/Kurdis-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kurdis';
  src: url('../fonts/Kurdis-Bold.woff2') format('woff2'),
       url('../fonts/Kurdis-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kurdis';
  src: url('../fonts/Kurdis-ExtraBold.woff2') format('woff2'),
       url('../fonts/Kurdis-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kurdis';
  src: url('../fonts/Kurdis-Black.woff2') format('woff2'),
       url('../fonts/Kurdis-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Kurdis Condensed — eyebrows, labels, navegação, botões */
@font-face {
  font-family: 'Kurdis Condensed';
  src: url('../fonts/Kurdis-Condensed.woff2') format('woff2'),
       url('../fonts/Kurdis-Condensed.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kurdis Condensed';
  src: url('../fonts/Kurdis-CondensedBold.woff2') format('woff2'),
       url('../fonts/Kurdis-CondensedBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Kurdis Wide — numerais em escala grande */
@font-face {
  font-family: 'Kurdis Wide';
  src: url('../fonts/Kurdis-Wide.woff2') format('woff2'),
       url('../fonts/Kurdis-Wide.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kurdis Wide';
  src: url('../fonts/Kurdis-WideBlack.woff2') format('woff2'),
       url('../fonts/Kurdis-WideBlack.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */
:root {
  /* paleta oficial */
  --navy: #002d5f;
  --cyan: #00b6ec;
  --blue-mid: #009dd3;
  --green: #00b55d;
  --green-deep: #008960;
  /* amarelo é faísca, não base: fica restrito a pontos únicos (detalhes da malha
     e do selo). Áreas e recorrências vão em verde/azul */
  --yellow: #ffdd00;
  --cream: #fffcf2;
  --bone: #f1eee6;

  /* papéis semânticos */
  --bg: var(--cream);
  --bg-alt: var(--bone);
  --bg-dark: var(--navy);
  --text: var(--navy);
  --text-on-dark: var(--cream);

  /* tipografia */
  --font-body: 'Kurdis', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label: 'Kurdis Condensed', 'Kurdis', system-ui, sans-serif;
  --font-num: 'Kurdis Wide', 'Kurdis', system-ui, sans-serif;

  /* escala de cartaz: a marca é tipografia grande em bloco, não editorial comedida.
     o teto foi calibrado para o hero caber em uma tela de notebook (~850px de altura)
     sem empurrar a foto para fora do primeiro quadro */
  --fs-display: clamp(2.75rem, 8.5vw, 7rem);
  /* o kicker é ~44% da altura de caixa do display na arte oficial */
  --fs-kicker: clamp(1.5rem, 3.6vw, 2.875rem);
  /* o piso é 1.875rem, não 2.25: em tela de 360px um h2 de 36px não deixa nem
     "REPRESENTATIVI-" caber na linha, e a palavra quebrava sem hífen no meio */
  --fs-h2: clamp(1.875rem, 5.5vw, 4.25rem);
  --fs-h3: clamp(1.125rem, 2vw, 1.5rem);
  /* o piso é 1.25rem, não 1.125: com 1.125 o lead ficava em 18px até a tela passar
     de 1125px, ou seja, 1,06x o corpo de 17px — indistinguível de um parágrafo comum
     em quase todo o tráfego. Com 20px o degrau volta a existir (1,18x), e a rampa
     começa antes (0.9vw + 0.7rem cruza o piso em ~980px) em vez de um degrau seco. */
  --fs-lead: clamp(1.25rem, 0.9vw + 0.7rem, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-label: 0.8125rem;
  --fs-num: clamp(3.5rem, 8vw, 6.5rem);
  /* o 44240 ocupa ~77% da largura da faixa em qualquer tela — mesma relação com o
     display (1,25x) que a arte oficial. O teto é o que mantém o hero dentro da
     primeira dobra de um notebook */
  --fs-num-hero: clamp(3.5rem, 9.4vw, 8.75rem);

  /* estrutura */
  --wrap: 1440px;
  --gutter: 1.5rem;
  --gutter-lg: 4rem;
  /* o gutter corrente do .wrap: sangrias (faixa do 44240, malha do hero) compensam
     exatamente este valor, em qualquer largura — os dois lados mudam juntos */
  --wrap-gutter: var(--gutter);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --radius: 20px;

  /* movimento */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ------------------------------------------------------------------ reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
}

/* foco visível — ciano tem 5.8:1 sobre navy e é bem perceptível sobre creme */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs-label);
  text-decoration: none;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* o campo honeypot herda a largura padrão do input e, mesmo recortado, somava
   21px ao scrollWidth do documento no celular */
.visually-hidden * {
  max-width: 100%;
}

/* ---------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--wrap-gutter);
}
@media (min-width: 768px) {
  :root {
    --wrap-gutter: var(--gutter-lg);
  }
}

.section {
  padding-block: var(--section-y);
}
.section--alt {
  background: var(--bg-alt);
}
.section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

/* --------------------------------------------------------- tipografia */
.eyebrow {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.75rem;
  color: var(--navy);
}
.section--dark .eyebrow {
  color: var(--cyan);
}

/* régua de acento — é ela que carrega a cor, não o texto do eyebrow */
.rule {
  width: 56px;
  height: 4px;
  border: 0;
  margin: 0 0 1.25rem;
  background: var(--cyan);
}
.rule--green {
  background: var(--green);
}
.rule--yellow {
  background: var(--yellow);
}
.rule--blue {
  background: var(--blue-mid);
}

.display {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--fs-display);
  /* o que decide este valor não é a altura de caixa, é o diacrítico: em Kurdis
     Black o til do à sobe acima da caixa e a cedilha do Ç desce abaixo dela, então
     duas linhas em caixa alta acentuada pedem mais folga do que o desenho de cartaz
     sugere. 0.82 e 0.9 sufocavam; 0.97 ainda deixava o til de "ATUAÇÃO" encostando
     no S de "FRENTES". 1.1 é onde os dois descolam. */
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  margin: 0 0 1.5rem;
}

/* headline longa (Participe). Antes o problema era só o piso, para "TRANSFORMAR"
   não partir no celular; agora a headline divide a linha com a foto do hero, então
   o que manda é o coeficiente: com 8.5vw a palavra partia no meio entre 900 e
   1280px, onde o vw ainda governa e o teto nem entra. Medido de 375 a 1600px,
   o painel de malha ocupa metade do container, então a coluna de texto é metade do
   hero. Medido de 900 a 1600px, 4.6vw/4rem é o maior par que mantém "TRANSFORMAR"
   inteiro numa linha com essa divisão — subir para 5vw já parte a palavra em 900 e
   1024px. */
.display--long {
  font-size: clamp(2.125rem, 4.6vw, 4rem);
}

/* "ENFERMEIRO" — na IDV é grande e ciano, não um eyebrow discreto */
.kicker {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-kicker);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 0.25rem;
}
.section--dark .kicker {
  color: var(--cyan);
}

/* numeral da campanha: amarelo chapado em Kurdis Black — o tratamento da arte
   oficial do hero (docs/logos-v2/Ativo 37.png). Medido nela: largura/altura-de-caixa
   4,68, que bate com Kurdis Black (4,65) e não com Kurdis Wide Black (5,25); por
   isso aqui é --font-body, não --font-num. A versão extrudada verde/creme das peças
   impressas saiu junto com a faixa amarela — o número agora vive sobre ciano. */
.numeral {
  display: block;
  font-family: var(--font-body);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: var(--yellow);
}
h2,
.h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-h2);
  /* 1.18, não 1.05: mesma questão do display — em "CONHEÇA AS / FRENTES DE ATUAÇÃO"
     a cedilha do Ç descia sobre o T da linha seguinte e o til do à subia no S. */
  line-height: 1.18;
  letter-spacing: -0.01em;
  /* rede de segurança: sem isto uma palavra longa ("REPRESENTATIVIDADE") estica
     o documento inteiro no celular. hyphens:auto foi descartado porque hifenizava
     palavras que caberiam na linha seguinte ("MU-DAR"); onde a quebra precisa de
     hífen, o HTML usa ­ no ponto certo */
  overflow-wrap: break-word;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
h3,
.h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 62ch;
  margin: 0 0 1.5rem;
}
.body {
  max-width: 68ch;
  margin: 0 0 1.25rem;
}
.body:last-child,
.lead:last-child {
  margin-bottom: 0;
}

/* frase-âncora: ciano sobre navy = 5.8:1, folgado para texto grande */
.anchor {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15;
  color: var(--cyan);
  max-width: 55ch;
  margin: 0 0 2rem;
}
.statement {
  font-weight: 700;
  font-size: var(--fs-lead);
  max-width: 60ch;
  margin: 0;
}

/* ------------------------------------------------------- quebra de linha */
/* pretty impede a palavra solta na última linha do parágrafo — o rodapé terminava
   com "espaços de decisão!" ocupando 14% da linha. Navegador sem suporte ignora e
   volta à quebra normal; nada depende disto para funcionar. */
p,
li,
.lead,
.body,
.statement {
  text-wrap: pretty;
}

/* balance equilibra o tamanho das linhas de um título, mas SÓ pode ser usado onde
   não existe overflow-wrap: break-word. Medido: com os dois juntos, o balanceador
   trata a quebra no meio da palavra como oportunidade legítima e a usa para igualar
   as linhas — "FORTALECIMENTO DO SUS" virava "FORTALECIM / ENTO DO SUS" mesmo em
   tela onde a palavra caberia inteira. Por isso .display e h2, que precisam do
   break-word como rede de segurança, ficam de fora. */
h3,
.anchor,
.card__title {
  text-wrap: balance;
}

.num {
  font-family: var(--font-num);
  font-weight: 900;
  font-size: var(--fs-num);
  line-height: 0.85;
  display: block;
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------- botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(0 45 95 / 0.18);
}
/* CTA principal em verde: marinho sobre verde = 5.0:1 (passa em AA para o
   corpo condensado dos botões) e tira o amarelo do elemento mais repetido do site */
.btn--primary {
  background: var(--green);
  color: var(--navy);
}
.btn--secondary {
  background: var(--navy);
  color: var(--cream);
}
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.section--dark .btn--ghost {
  color: var(--cream);
  border-color: var(--cream);
}
.btn--cyan {
  background: var(--cyan);
  color: var(--navy);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
/* em tela estreita os dois botões quebram em linhas de larguras diferentes;
   esticados viram uma pilha alinhada */
.btn-row > .btn {
  flex: 1 1 100%;
}
@media (min-width: 560px) {
  .btn-row > .btn {
    flex: 0 0 auto;
  }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
  transition: gap 0.18s var(--ease);
}
.link-arrow:hover {
  gap: 0.875rem;
}

/* --------------------------------------------------------------- header */
/* o hero sangra cor e padrão até o topo, então o header precisa de fundo próprio —
   transparente deixaria a navegação sobre a malha, ilegível */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--cream);
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid rgb(0 45 95 / 0.1);
}
.header.is-stuck {
  border-bottom-color: rgb(0 45 95 / 0.16);
  box-shadow: 0 2px 12px rgb(0 45 95 / 0.08);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* o gap que conta é o entre o último item do menu e o botão */
  gap: clamp(1rem, 2vw, 2rem);
  padding-block: 0.875rem;
}
.header__logo {
  display: block;
  flex: 0 0 auto;
}
/* 48px, e não 44: o arquivo do cabeçalho tem ~8% de margem transparente embaixo,
   então a mancha visível fica do mesmo tamanho óptico do lockup anterior */
.header__logo img {
  height: 48px;
  width: auto;
}
.nav {
  display: none;
  align-items: center;
  gap: 2rem;
  /* empurra menu e CTA juntos para a direita, com o logo sozinho à esquerda */
  margin-left: auto;
}
.nav a {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--navy);
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s var(--ease);
}
.nav a:hover {
  border-bottom-color: var(--green);
}
.nav a[aria-current='page'] {
  border-bottom-color: var(--cyan);
}
.header__cta {
  display: none;
}
@media (min-width: 900px) {
  .nav,
  .header__cta {
    display: inline-flex;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 2px solid var(--navy);
  border-radius: 999px;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  content: '';
  position: relative;
}
.nav-toggle__bars::before {
  position: absolute;
  top: -6px;
}
.nav-toggle__bars::after {
  position: absolute;
  top: 6px;
}
/* precisa vir depois da regra base do .nav-toggle para vencer no cascade */
@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }
}

/* menu mobile em overlay navy — acima do header (100), senão a faixa creme do
   header cobre o botão de fechar e o menu fica sem saída no toque */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 101;
  background: var(--navy);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--gutter);
  /* fechado: fora da tela E realmente inerte — visibility impede que os links
     continuem focáveis por teclado enquanto o menu está oculto */
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
}
.mobile-nav[data-open='true'] {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.35s var(--ease), visibility 0s;
}
.mobile-nav a {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(2rem, 9vw, 3rem);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  line-height: 1.1;
  padding-block: 0.5rem;
}
.mobile-nav a[aria-current='page'] {
  color: var(--cyan);
}
.mobile-nav__close {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: transparent;
  border: 2px solid var(--cream);
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
body.nav-open {
  overflow: hidden;
}

/* ----------------------------------------------------------------- malha */
/* padrão geométrico oficial da marca (elementos de apoio) */
.malha {
  background-image: url('../svg/malha.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.malha-band {
  height: 12px;
  background-image: url('../svg/malha.svg');
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: left center;
}

/* ------------------------------------------------------------------ hero */
/* HERO reproduzindo a arte oficial da campanha (docs/logos-v2/Ativo 37.png):
   cópia no topo-esquerda, faixa ciano com o 44240 amarelo abaixo dela, e a foto
   sobre a malha à direita, entrando por cima da faixa. O selo saiu da faixa e foi
   para o jaleco, como na arte. Proporções conferidas contra a referência. */
.hero {
  position: relative;
  background: var(--cream);
  overflow: hidden;
  /* respiro de creme no pé: sem ele a faixa marinho do 44240 encosta na seção
     escura seguinte e as duas viram uma única mancha. Fora da caixa (margin, não
     padding) para que o overflow do hero continue cortando a malha no fio */
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
}
.hero__copy {
  /* o topo só precisa livrar o header fixo (~72px) com um respiro; mais do que
     isso empurrava o bloco inteiro — e a foto — para fora do primeiro quadro */
  grid-column: 1;
  grid-row: 1;
  padding-top: clamp(6rem, 8vw, 7rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.hero__lead {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.1875rem, 2vw, 1.625rem);
  line-height: 1.2;
  /* 30ch, não 26: com 26 a frase da Biografia caía em três linhas com "do SUS."
     pendurado sozinho na terceira, em toda largura acima de 414px. Medido: 30ch
     resolve em duas linhas de 55–64% a partir de 560px, e 32/34ch pioram o
     equilíbrio da última linha. */
  max-width: 30ch;
  margin: 1rem 0 1.75rem;
}

/* faixa do 44240 — ciano, sangra pela borda esquerda, raio grande no topo-esquerda */
.hero__band {
  grid-column: 1;
  grid-row: 3;
  position: relative;
  background: var(--cyan);
  border-radius: 48px 0 0 0;
  margin-inline: calc(-1 * var(--wrap-gutter));
  padding: clamp(1rem, 2vw, 1.5rem) var(--wrap-gutter);
}
/* numeral e cargo empilhados e alinhados à esquerda, como na arte */
.hero__band-inner {
  display: grid;
  justify-items: start;
  gap: 0.375rem;
}
.hero__number {
  font-size: var(--fs-num-hero);
}
/* o cargo é Kurdis Wide Regular com tracking largo: medido na arte, a linha tem
   16,1x a altura de caixa, largura que só essa combinação alcança */
.hero__office {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: clamp(0.875rem, 2.2vw, 2.125rem);
  line-height: 1;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--cream);
}

/* mídia: malha sangrando na borda direita, foto por cima */
.hero__media {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  min-height: 360px;
}
/* no empilhado a malha sangra pelos dois lados: recuada só de um deles, sobrava
   uma tira de creme atrás do ombro e a foto parecia escapar do painel */
.hero__pattern {
  position: absolute;
  inset: 0 calc(-1 * var(--wrap-gutter));
  z-index: 0;
}
/* a moldura tem exatamente a proporção do arquivo (1080x1350), então o selo do
   jaleco pode ser posicionado em % — as coordenadas vêm da arte oficial */
.hero__figure {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 380px);
  margin-inline: auto;
  aspect-ratio: 1080 / 1350;
}
.hero__figure picture {
  display: block;
  height: 100%;
}
.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
/* o selo ocupa ~72% da largura do painel do jaleco e fica levemente à esquerda do
   centro dele — a mesma relação medida na arte. (Os números não são a conversão
   direta das coordenadas da arte: lá o braço direito aparece um pouco mais largo
   que neste recorte da foto, então a proporção com o jaleco é a referência boa.) */
.hero__badge {
  position: absolute;
  left: 55.8%;
  top: 65.9%;
  width: 28.1%;
  height: auto;
}

/* hero em fundo marinho (Participe). O respiro de creme no pé não faz sentido
   aqui: existe na Home para separar a faixa do 44240 da seção escura seguinte, e
   nesta página a seção seguinte já é clara. */
.hero--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  margin-bottom: 0;
}
@media (min-width: 900px) {
  /* metade para o padrão, metade para o texto. A headline daqui tem 44 caracteres,
     então a divisão em dois obriga o display a ser menor — ver .display--long. */
  .hero--dark .hero__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* páginas internas: mesmo hero de cartaz, sem a faixa do 44240 (a faixa é
   assinatura da Home). No empilhado a foto continua na linha 2, abaixo do texto:
   subi-la para a linha 1 a punha na mesma célula da cópia, e a foto — que é
   posicionada — cobria o título e o lead da Biografia no celular. A troca de
   célula só vale a partir de 900px, onde ela vai para a segunda coluna. */

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.08fr 0.92fr;
    grid-template-rows: 1fr auto;
    align-items: end;
  }
  .hero--noband .hero__inner {
    grid-template-rows: 1fr;
  }
  .hero--noband .hero__media {
    grid-column: 2;
    grid-row: 1;
  }
  .hero__copy {
    grid-column: 1;
    grid-row: 1;
  }
  .hero__band {
    grid-column: 1;
    grid-row: 2;
  }
  /* sobra vertical na malha: o parallax (que só roda deste breakpoint para cima)
     a desloca já no carregamento, e sem essa folga a borda dela aparecia dentro
     do hero — faixa creme no topo e malha descendo por baixo da faixa do 44240.
     Só aqui: no empilhado do mobile a sobra cobriria os botões da coluna de cima.
     O overflow do .hero apara o excedente */
  .hero__pattern {
    inset-block: -100px;
    /* na arte sobra um vão de creme entre a coluna de texto e o painel
       geométrico, e é a foto que atravessa esse vão */
    inset-inline: 8% calc(-1 * var(--wrap-gutter));
  }
  .hero__band {
    margin-right: 0;
    padding-right: 0;
  }
  /* a foto atravessa as duas linhas e cobre a faixa do 44240, como na peça */
  .hero__media {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 520px;
    align-self: stretch;
  }
  /* a figura ocupa a altura inteira do hero e sangra um pouco por baixo — é isso
     que põe o rosto no primeiro décimo da composição, como na arte. O teto em vw
     impede que, em telas estreitas, ela fique larga demais e invada os botões */
  .hero__figure {
    position: absolute;
    left: 50%;
    bottom: -6%;
    transform: translateX(-50%);
    width: auto;
    height: min(106%, 56vw);
    margin-inline: 0;
  }
}

/* ------------------------------------------------------------------ cards */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  /* quebra intencional do ritmo do grid */
  .cards > :nth-child(4) {
    transform: translateY(2.5rem);
  }
  .cards > :nth-child(5) {
    transform: translateY(1.25rem);
  }
}

.card {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  background: var(--bone);
  /* raio assimétrico — espelha os quartos de círculo da marca */
  border-radius: var(--radius) 0 var(--radius) 0;
  transition: transform 0.18s var(--ease);
}
.section--alt .card {
  background: var(--cream);
}
.card__rule {
  width: 48px;
  height: 4px;
  background: var(--navy);
  margin: 0.5rem 0 1rem;
  transition: width 0.18s var(--ease);
}
.card:hover .card__rule {
  width: 72px;
}
.card__title {
  margin-bottom: 0;
}
.card--cyan .num {
  color: var(--cyan);
}
.card--green .num {
  color: var(--green);
}
.card--navy .num {
  color: var(--navy);
}
.card--blue .num {
  color: var(--blue-mid);
}
.card--green-deep .num {
  color: var(--green-deep);
}
.card--cyan .card__rule {
  background: var(--cyan);
}
.card--green .card__rule {
  background: var(--green);
}
.card--navy .card__rule {
  background: var(--navy);
}
.card--blue .card__rule {
  background: var(--blue-mid);
}
.card--green-deep .card__rule {
  background: var(--green-deep);
}

/* -------------------------------------------------- bandas de declaração */
.statement-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .statement-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}
.statement-grid__accent {
  border-left: 4px solid var(--cyan);
  padding-left: 2rem;
}

/* --------------------------------------------------------------- timeline */
.timeline {
  border-left: 2px solid rgb(0 45 95 / 0.2);
  padding-left: 2rem;
  display: grid;
  gap: 2.5rem;
  max-width: 68ch;
}
.timeline__item {
  position: relative;
}
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-2rem - 1px);
  top: 0.6em;
  width: 18px;
  height: 4px;
  background: var(--cyan);
}
.timeline__item:nth-child(2)::before {
  background: var(--green);
}
.timeline__item:nth-child(3)::before {
  background: var(--blue-mid);
}
.timeline__item:nth-child(4)::before {
  background: var(--green-deep);
}
.timeline__item:nth-child(5)::before {
  background: var(--navy);
}

/* ------------------------------------------------------------- propostas */
.frente {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
/* sem isto o min-content do h2 estica a coluna e espreme o painel de formas */
.frente__copy {
  min-width: 0;
}
@media (min-width: 900px) {
  .frente {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .frente:nth-child(even) .frente__copy {
    order: 2;
  }
  /* a partir de 900px a coluna do texto cai pela metade, mas o --fs-h2 continua
     crescendo com 5.5vw até 68px — e "FORTALECIMENTO" a 68px pede 679px numa coluna
     de 624px, então a palavra partia no meio em toda largura de desktop. Aqui o
     título é item de uma lista de duas colunas, não abertura de seção: teto de 3rem
     resolve a origem do problema e ainda corrige a hierarquia. */
  .frente__copy h2 {
    font-size: clamp(1.875rem, 3.6vw, 3rem);
  }
}
.frente + .frente {
  margin-top: var(--section-y);
}
/* a foto da frente ocupa o painel inteiro, no mesmo raio assimétrico dos cards.
   O osso aparece só enquanto a imagem carrega. */
.frente__foto {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius) 0 var(--radius) 0;
  overflow: hidden;
  background: var(--bone);
}
.frente__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------- método */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  counter-reset: step;
}
@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}
.step {
  position: relative;
  padding: 1.75rem;
  background: var(--cream);
  border-radius: var(--radius) 0 var(--radius) 0;
}
.section--dark .step {
  background: rgb(255 252 242 / 0.06);
  color: var(--cream);
}
.step .num {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}

/* -------------------------------------------------------------- jingle */
/* player próprio, no mesmo painel de borda e raio assimétrico dos cards. O
   controle nativo toca igual, mas vem com a cara do navegador — cinza chapado no
   Chrome, barra preta no Safari — e não há como vesti-lo com a marca. Só que ele
   continua sendo a rede: o <audio> nasce com controls no HTML e o JS os remove ao
   assumir a interface, então sem JS o que sobra ainda funciona. */
.player {
  max-width: 960px;
  margin-inline: auto;
  padding: 1.25rem;
  border: 2px solid var(--cyan);
  border-radius: var(--radius) 0 var(--radius) 0;
}
/* o nativo só aparece enquanto o JS não assumiu — ou se nunca for assumir */
.player__audio {
  display: block;
  width: 100%;
}
.player__audio:not([controls]) {
  display: none;
}
.player__ui {
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* display:flex vence o display:none que o [hidden] traz do navegador; sem esta
   regra a interface aparece antes do JS ligar nela */
.player__ui[hidden] {
  display: none;
}

.player__toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.18s var(--ease);
}
.player__toggle:hover {
  background: var(--cream);
}
/* os dois ícones dividem a mesma célula do grid: trocar um pelo outro não mexe
   no tamanho do botão */
.player__icon {
  grid-area: 1 / 1;
}
/* o triângulo tem o bico à direita e a base à esquerda: centrado de verdade ele
   parece caído para trás */
.player__icon--play {
  margin-left: 3px;
}
.player__icon--pause,
.player[data-tocando='true'] .player__icon--play {
  display: none;
}
.player[data-tocando='true'] .player__icon--pause {
  display: block;
}

.player__corpo {
  /* min-width:0 senão o título comprido impede a barra de encolher no celular */
  flex: 1 1 auto;
  min-width: 0;
}
.player__titulo {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.player__tempo {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  /* sem tabular-nums o "1:11" é mais estreito que o "0:00" e o tempo treme a
     cada segundo; navegador sem suporte ignora e volta ao normal */
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  margin: 0.375rem 0 0;
}

/* a trilha preenchida é um gradiente porque o WebKit não tem equivalente ao
   ::-moz-range-progress do Firefox: o JS escreve a porcentagem em --progresso e
   as duas engines leem de lá */
.player__seek {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  /* 24px é o alvo de toque; a trilha desenhada tem 6px */
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.player__seek::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  /* dois stops na mesma posição = corte seco, sem o degradê no meio */
  background: linear-gradient(
    to right,
    var(--cyan) calc(var(--progresso, 0) * 1%),
    rgba(255, 252, 242, 0.28) calc(var(--progresso, 0) * 1%)
  );
}
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  /* (18 - 6) / 2: o WebKit alinha o polegar pelo topo da trilha, não pelo meio */
  margin-top: -6px;
  border: 0;
  border-radius: 999px;
  background: var(--cream);
}
.player__seek::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 252, 242, 0.28);
}
.player__seek::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--cyan);
}
.player__seek::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: var(--cream);
}

@media (min-width: 560px) {
  .player {
    padding: 1.5rem;
  }
  .player__ui {
    gap: 1.25rem;
  }
  .player__toggle {
    width: 64px;
    height: 64px;
  }
}

/* --------------------------------------------------------------- vídeo */
/* o position:relative daqui existia só para ancorar o selo sobreposto, que saiu
   junto com o placeholder — a vinheta já traz o selo animado dentro dela */
.video {
  max-width: 960px;
  margin-inline: auto;
}
.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy);
  border: 4px solid var(--navy);
  border-radius: var(--radius) 0 var(--radius) 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* a vinheta ocupa o frame inteiro. Sem véu por cima: ele existia só para dar
   contraste ao botão de play, que saiu junto com o placeholder. */
.video__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------- instagram */
/* carrossel horizontal das fotos do trabalho. Rola por scroll nativo — arrasto
   no touch, setas do teclado com o trilho focado, botões no mouse. O número de
   quadrados visíveis muda por breakpoint e o último sempre aparece pela metade,
   para deixar claro que a fila continua. */
.carrossel {
  margin-bottom: 2rem;
}
.carrossel__trilho {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* impede que o arrasto lateral dispare o "voltar" do navegador */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* a barra nativa some: a navegação são os botões, o arrasto e o meio quadrado
     espiando na borda */
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar {
  display: none;
}
.carrossel__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* mobile: um quadrado e meio, o segundo espiando */
  width: 68%;
}
@media (min-width: 560px) {
  .carrossel__item {
    width: calc((100% - 1rem) / 2.4);
  }
}
@media (min-width: 900px) {
  .carrossel__item {
    width: calc((100% - 2rem) / 3.4);
  }
}
@media (min-width: 1200px) {
  .carrossel__item {
    width: calc((100% - 3rem) / 4.4);
  }
}

/* a foto ocupa o quadrado inteiro, no mesmo raio assimétrico dos cards;
   o osso aparece só enquanto a imagem carrega */
.carrossel__foto {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius) 0 var(--radius) 0;
  overflow: hidden;
  background: var(--bone);
}
.carrossel__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carrossel__nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  margin-bottom: 1rem;
}
.carrossel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 2px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
    opacity 0.18s var(--ease);
}
.carrossel__btn:hover:not(:disabled) {
  background: var(--navy);
  color: var(--cream);
}
.carrossel__btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.ig-handle {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.ig-handle__text {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------ formulário */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .form-grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    align-items: start;
  }
  /* a coluna de texto é bem mais curta que o formulário e deixava ~300px de vazio
     embaixo. Grudada, ela acompanha a rolagem: o "por que preencher" continua à
     vista enquanto a pessoa desce o formulário, e o vazio deixa de existir.
     O topo livra o header fixo (~72px) com respiro. */
  .form-grid > :first-child {
    position: sticky;
    top: 7rem;
  }
}
.form-card {
  background: var(--bone);
  border-radius: var(--radius) 0 var(--radius) 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.section--alt .form-card {
  background: var(--cream);
}
.field {
  margin-bottom: 1.5rem;
}
.field > label,
.fieldset__legend {
  display: block;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.field input[type='text'],
.field input[type='email'],
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  background: var(--cream);
  border: 2px solid rgb(0 45 95 / 0.18);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--navy);
  transition: border-color 0.18s var(--ease);
}
.section--alt .field input,
.section--alt .field textarea {
  background: var(--bone);
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgb(0 45 95 / 0.45);
}
.field input:focus,
.field textarea:focus {
  border-color: var(--navy);
  outline: none;
}
.field textarea {
  resize: vertical;
  line-height: 1.6;
}
.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.pill span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.625rem 1.25rem;
  border: 2px solid rgb(0 45 95 / 0.25);
  border-radius: 999px;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}
.pill input:checked + span {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
}
.pill input:focus-visible + span {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}
.form-note {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 1rem 0 0;
  color: rgb(0 45 95 / 0.75);
  max-width: 52ch;
}
.btn--submit {
  width: 100%;
}

/* ---------------------------------------------------------------- footer */
/* rodapé claro, no mesmo creme do corpo do site. Como ele encosta em seções
   também claras (Home e Biografia terminam em creme), a régua no topo é o que
   marca onde o rodapé começa; a faixa da malha fecha embaixo. */
.footer {
  background: var(--cream);
  color: var(--navy);
  border-top: 1px solid rgb(0 45 95 / 0.14);
}
/* sobre creme o ciano da frase-âncora cairia para 2,3:1 */
.footer .anchor {
  color: var(--navy);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: var(--section-y) 3rem;
}
@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 0.8fr 1.4fr 0.8fr;
    gap: 3rem;
  }
}
/* o lockup do rodapé é horizontal (832x370), não o vertical de antes: precisa de
   mais largura para o nome não ficar minúsculo dentro da coluna */
.footer__logo img {
  width: clamp(210px, 25vw, 300px);
  height: auto;
}
.footer__nav {
  display: grid;
  gap: 0.875rem;
  align-content: start;
}
.footer__nav a {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--navy);
  transition: color 0.18s var(--ease);
}
/* verde escuro, não o verde claro: sobre creme ele dá 4,3:1 contra 2,6:1 do
   #00B55D, que sumiria no hover */
.footer__nav a:hover,
.footer__nav a[aria-current='page'] {
  color: var(--green-deep);
}

/* redes sociais: rótulo em cima, ícone abaixo */
.footer__social {
  margin-top: 2.25rem;
}
.footer__social-title {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.875rem;
}
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid rgb(0 45 95 / 0.25);
  border-radius: 999px;
  color: var(--navy);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
    transform 0.18s var(--ease);
}
.footer__social-link svg {
  width: 24px;
  height: 24px;
}
.footer__social-link:hover {
  color: var(--green-deep);
  border-color: var(--green-deep);
  transform: translateY(-2px);
}
.footer__legal {
  border-top: 1px solid rgb(0 45 95 / 0.14);
  padding-block: 1.5rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(0 45 95 / 0.65);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* -------------------------------------------------------------- movimento */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* parallax leve, só no padrão geométrico e só em telas grandes */
@media (min-width: 900px) {
  .parallax {
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .btn:hover,
  .footer__social-link:hover {
    transform: none;
  }
  .cards > :nth-child(4),
  .cards > :nth-child(5) {
    transform: none;
  }
  .parallax {
    transform: none !important;
  }
}

/* ------------------------------------------------------------- utilitários */
.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.stack > * + * {
  margin-top: 1.25rem;
}
.center {
  text-align: center;
  margin-inline: auto;
}
.narrow {
  max-width: 62ch;
}