@charset "UTF-8";
/* ============================================================================
   ELIANA FERNANDES 7755 — Landing page de campanha
   Fiel ao Figma "LP Eliana" (node 1:2) no desktop; responsivo autoral abaixo.
   Ordem: 1 Fontes · 2 Tokens · 3 Reset · 4 Utilitários · 5 Movimento
          6 Cabeçalho · 7 Hero · 8 Propostas · 9 Quem é · 10 Lutar
          11 Doação · 12 Vídeo · 13 Insta · 14 Rodapé · 15 Ajustes finos
   ========================================================================= */

/* ── 1. FONTES ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 2. TOKENS ──────────────────────────────────────────────────────────── */
:root {
  /* Cores — amostradas pixel a pixel do render do Figma */
  --azul-eletrico: #042bb5;   /* títulos de seção */
  --azul-royal:    #0042c1;   /* botão, "dessa caminhada" */
  --azul-marinho:  #0b2c60;   /* links do menu, logo */
  --azul-noite:    #001e4b;   /* faixa Lutar, rodapé */
  --azul-hero-1:   #043fc2;   /* centro do campo do hero */
  --azul-hero-2:   #0430bb;
  --azul-hero-3:   #0219aa;   /* bordas do campo do hero */
  --ciano:         #39cde6;

  --laranja:       #e94c20;   /* acento, títulos de card, réguas */
  --laranja-texto: #cc3d0e;   /* mesmo laranja escurecido p/ texto pequeno: 4,95:1 */
  --laranja-grad1: #fa7e01;   /* faixa de doação, exata do Figma */
  --laranja-grad2: #ffa501;
  --ambar:         #fc9800;
  --ambar-claro:   #ffa401;
  --ambar-escuro:  #fb8402;

  --creme:         #faf2e9;
  --quase-branco:  #fafafa;
  --lavanda:       #e8effb;
  --branco:        #fff;
  --borda-card:    #dadada;

  --tinta:         #111318;   /* corpo sobre claro */

  /* Tipografia */
  --fonte: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --t-corpo:       clamp(1rem, 0.955rem + 0.19vw, 1.125rem);      /* 16 → 18 */
  --t-corpo-alt:   1.667;
  --t-secao:       clamp(1.75rem, 1.25rem + 2.2vw, 2.5rem);       /* 28 → 40 */
  /* Piso em 19px, não 16: o laranja da marca sobre fundo claro dá 3,65:1, que
     só é suficiente para "texto grande" (>=18,66px em peso >=700). Abaixo
     disso o título de card reprovaria em contraste. */
  --t-card:        clamp(1.1875rem, 1rem + 0.42vw, 1.375rem);     /* 19 → 22 */
  --t-menu:        clamp(0.9375rem, 0.88rem + 0.19vw, 1rem);      /* 15 → 16 */

  /* Ritmo */
  --envolto-max: 1200px;
  --gutter:      clamp(1.25rem, 0.9rem + 1.7vw, 2.25rem);
  --secao-y:     clamp(3.5rem, 2.2rem + 4.2vw, 5.75rem);
  --gap-cards:   clamp(1rem, 0.55rem + 1.5vw, 1.625rem);          /* 16 → 26 */

  /* Cabeçalho — proporções fechadas, não valores soltos:
     faixa 104px @1440 · logo 60% da faixa · respiro do logo = 20% em cima e
     embaixo · distância logo→menu = 2× o vão entre itens (60 e 28).
     A faixa de 150px do Figma pesava demais no topo da página. */
  --cabecalho-h:       clamp(4.75rem, 3.45rem + 5.333vw, 8.25rem); /* 76 → 132 */
  --cabecalho-h-fixo:  clamp(4.25rem, 3.55rem + 2.857vw, 6.125rem);/* 68 → 98  */
  --menu-vao:          clamp(1.25rem, -4.281rem + 9.615vw, 4.375rem); /* 30 @1024 → 70 @1440 */
  --menu-recuo:        clamp(2rem, 0.6714rem + 6.476vw, 7.9375rem); /* 36 → 127 */

  --raio-card:   20px;
  --raio-painel: clamp(2.5rem, 5.6vw, 5rem);

  /* Movimento — uma curva só, exponencial, para toda a página */
  --saida:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:    0.62s;
  --dur-ui: 0.24s;

  /* Grades de bolinhas: ø 11.2 · passo 22.4 (medido no Figma) */
  --bola-passo: 22.4px;
  --bola-raio:  5.6px;
}

/* ── 3. RESET ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecalho-h-fixo) + 1rem);
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: var(--t-corpo-alt);
  color: var(--tinta);
  background: var(--quase-branco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p { margin: 0; font-size: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

strong { font-weight: 700; }

/* Texto só para leitor de tela e para o robô de busca. Não use display:none
   nem visibility:hidden — os dois removem o conteúdo da árvore de acessibilidade,
   que é exatamente o que se quer preservar aqui. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--laranja); color: #fff; }

/* ── 4. UTILITÁRIOS ─────────────────────────────────────────────────────── */
.envolto {
  width: 100%;
  max-width: calc(var(--envolto-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pular {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 200;
  transform: translate(-50%, -120%);
  padding: 0.75rem 1.5rem;
  background: var(--azul-noite);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 10px 10px;
  transition: transform var(--dur-ui) var(--saida);
}
.pular:focus { transform: translate(-50%, 0); }

/* Régua laranja 101×8 (Figma) sob os títulos */
.regua {
  display: block;
  width: clamp(72px, 8vw, 101px);
  height: clamp(6px, 0.7vw, 8px);
  background: var(--laranja);
  border-radius: 2px;
}

/* Grades de bolinhas — CSS puro, zero requisição.
   O radial-gradient centraliza o ponto na célula; sem compensar isso, a última
   coluna e a última linha saem sempre cortadas. Deslocando o padrão em -raio,
   o ponto passa a encostar na borda da célula, como no Figma.
   As caixas usam múltiplos exatos: largura = (colunas-1) × passo + diâmetro. */
.hero__bolinhas,
.lutar__bolinhas,
.doacao__bolinhas,
.video__bolinhas,
.insta__bolinhas {
  --colunas: 5;
  --linhas: 5;
  width: calc((var(--colunas) - 1) * var(--bola-passo) + var(--bola-raio) * 2);
  height: calc((var(--linhas) - 1) * var(--bola-passo) + var(--bola-raio) * 2);
  background-image: radial-gradient(currentColor var(--bola-raio), transparent calc(var(--bola-raio) + 0.6px));
  background-size: var(--bola-passo) var(--bola-passo);
  background-position: calc(var(--bola-raio) * -1) calc(var(--bola-raio) * -1);
  background-repeat: repeat;
  pointer-events: none;
}

/* ── 5. MOVIMENTO ───────────────────────────────────────────────────────── */
/* Conteúdo é visível por padrão. O JS marca <html class="js"> e só então
   esconde os alvos, para nada sumir sem JS ou com erro de script. */
.js [data-anima] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--dur) var(--saida), transform var(--dur) var(--saida);
  transition-delay: var(--atraso, 0ms);
}
.js [data-anima].visivel {
  opacity: 1;
  transform: none;
}

/* Abertura do hero: cada peça do lockup entra em sequência */
.js .hero__nome,
.js .hero__numero,
.js .hero__assinatura,
.js .hero__foto,
.js .hero__onda {
  opacity: 0;
  animation: entrar var(--dur) var(--saida) forwards;
}
.js .hero__nome        { animation-delay: 0.06s; }
.js .hero__numero      { animation-delay: 0.16s; }
.js .hero__assinatura  { animation-delay: 0.26s; }
.js .hero__foto        { animation-delay: 0.10s; animation-name: entrar-base; }
.js .hero__onda--dir   { animation-delay: 0s;    animation-name: entrar-dir; animation-duration: 1.1s; }
.js .hero__onda--esq   { animation-delay: 0.08s; animation-name: entrar-esq; animation-duration: 1.1s; }

@keyframes entrar      { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes entrar-base { from { opacity: 0; transform: translate3d(0, 56px, 0); } to { opacity: 1; transform: none; } }
@keyframes entrar-dir  { from { opacity: 0; transform: translate3d(7%, 0, 0) scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes entrar-esq  { from { opacity: 0; transform: translate3d(-9%, 4%, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-anima] { opacity: 1; transform: none; transition: none; }
  .js .hero__nome, .js .hero__numero, .js .hero__assinatura,
  .js .hero__foto, .js .hero__onda { opacity: 1; animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 6. CABEÇALHO ───────────────────────────────────────────────────────── */
/* Um único cabeçalho, fixo desde o topo. Ao rolar ele só encolhe — nunca some
   e nunca é trocado por outro. */
.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: var(--cabecalho-h);
  background: var(--branco);
  border-bottom: 1px solid #e6e8ec;
  transition: height 0.34s var(--saida), box-shadow 0.34s var(--saida), border-color 0.34s linear;
}
/* No repouso o cabeçalho fica ABAIXO da foto do hero, para o cabelo passar por
   cima da faixa branca como no design. Assim que a página rola, ele sobe para
   o topo da pilha e volta a cobrir o conteúdo. */
/* Com o menu aberto o cabeçalho sobe acima do hero. Sem isto, o overlay fica
   preso no contexto de empilhamento do cabeçalho (60) e perde para
   .hero__interno (70): o menu abre ATRÁS da foto nos primeiros 80px de scroll,
   que é exatamente onde o visitante de celular cai. */
body.nav-aberta .cabecalho { z-index: 100; }

.cabecalho--reduzido {
  z-index: 90;
  height: var(--cabecalho-h-fixo);
  border-bottom-color: #dcdfe6;
  box-shadow: 0 6px 28px -14px rgb(4 27 80 / 0.28);
}

/* Logo na margem esquerda do site e menu logo em seguida; a folga sobra à
   direita. O respiro entre os itens vem de --menu-vao. */
.cabecalho__interno {
  display: flex;
  align-items: center;
  gap: var(--menu-recuo);
  height: 100%;
  width: 100%;
  max-width: calc(var(--envolto-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* O logo é medido pela ALTURA da faixa (70%, a proporção do Figma: 105 em 150),
   não por uma largura em vw. Assim a margem em volta dele é sempre a mesma —
   no desktop, no celular e com a faixa reduzida. */
.marca {
  display: flex;
  align-items: center;
  height: 100%;
  padding-block: 1px;
}
.marca img {
  width: auto;
  height: 64%;   /* 18% de respiro em cima e embaixo da faixa */
  max-width: none;
  transition: transform var(--dur-ui) var(--saida);
}
.marca:hover img { transform: scale(1.035); }

.menu { margin-right: auto; }

.menu__lista {
  display: flex;
  align-items: center;
  gap: var(--menu-vao);
}

.menu__lista a {
  position: relative;
  display: block;
  padding-block: 0.4rem;
  font-size: var(--t-menu);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--azul-marinho);
  white-space: nowrap;
  transition: color var(--dur-ui) var(--saida);
}
.menu__lista a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--laranja);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-ui) var(--saida);
}
.menu__lista a:hover { color: var(--laranja-texto); }
.menu__lista a:hover::after,
.menu__lista a[aria-current='true']::after { transform: scaleX(1); }
.menu__lista a[aria-current='true'] { color: var(--laranja-texto); }

.menu-botao {
  display: none;
  position: relative;
  z-index: 90;
  width: 48px;
  height: 48px;
  margin-right: -6px;
  border-radius: 12px;
}
.menu-botao__traco {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px auto;
  border-radius: 2px;
  background: var(--azul-marinho);
  transition: transform var(--dur-ui) var(--saida), opacity 0.14s linear, background-color var(--dur-ui) linear;
}

@media (max-width: 899px) {
  /* No celular a faixa não segue a escala do canvas de 1440 — vira barra de app */
  :root {
    --cabecalho-h:      clamp(4.75rem, 4.1rem + 1.7vw, 5.25rem);
    --cabecalho-h-fixo: clamp(4.125rem, 3.6rem + 1.4vw, 4.625rem);
  }
}

@media (max-width: 1023px) {
  /* o menu vira overlay fixo e sai do fluxo, então o botão é empurrado para a
     margem direita da faixa */
  .menu-botao { display: block; margin-left: auto; }

  .menu {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    background: var(--azul-noite);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--saida), transform 0.3s var(--saida), visibility 0s 0.3s;
  }
  .menu--aberto {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s var(--saida), transform 0.3s var(--saida), visibility 0s 0s;
  }

  .menu__lista {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  .menu__lista a {
    padding: 0.85rem 1.5rem;
    font-size: clamp(1.375rem, 1.1rem + 1.6vw, 1.875rem);
    color: #fff;
  }
  .menu__lista a::after { display: none; }
  .menu__lista a:hover,
  .menu__lista a[aria-current='true'] { color: var(--ambar); }

  .menu--aberto .menu__lista li {
    animation: entrar 0.42s var(--saida) backwards;
    animation-delay: calc(60ms + var(--i, 0) * 45ms);
  }

  .nav-aberta .menu-botao__traco { background: #fff; }
  .nav-aberta .menu-botao__traco:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-aberta .menu-botao__traco:nth-child(2) { opacity: 0; }
  .nav-aberta .menu-botao__traco:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

body.nav-travada { overflow: hidden; }

/* ── 7. HERO ────────────────────────────────────────────────────────────── */
/* O hero ocupa exatamente a primeira dobra (100svh) e a composição inteira
   cabe dentro dela. O truque: um canvas com a proporção do quadro do Figma
   (1440×1021) escalado pela ALTURA disponível — assim lockup e foto mantêm
   entre si as mesmas relações do design, em qualquer tela, sem refluir.
   O fundo e as ondas sangram até as bordas da janela. */
/* Sem `isolation` aqui de propósito: a foto precisa poder subir acima do
   cabeçalho na pilha. A textura em mix-blend-mode continua correta porque o
   gradiente opaco do próprio hero é o que está imediatamente abaixo dela. */
.hero {
  /* largura do canvas: a menor entre a janela, os 1440 do design e a largura
     que a altura disponível comporta */
  --canvas: min(100vw, 1440px, calc(100svh * 1.41038));
  position: relative;
  display: grid;
  align-items: end;
  justify-items: center;
  /* a altura É a do canvas — nunca passa da primeira dobra e nunca deixa
     faixa vazia em cima em telas altas */
  height: calc(var(--canvas) / 1.41038);
  min-height: 560px;
  background:
    radial-gradient(ellipse 78% 72% at 46% 40%,
      var(--azul-hero-1) 0%, var(--azul-hero-2) 46%, var(--azul-hero-3) 100%);
  overflow: hidden;
}
/* Trama de tecido do material impresso — tile 256px sem emenda, 5,5 KB */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('../assets/img/textura-tecido.webp') repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  opacity: 0.55;
  pointer-events: none;
}

.hero__grafismos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.hero__onda { position: absolute; max-width: none; }
.hero__onda--dir { right: 0; top: 0; height: 100%; width: auto; }
.hero__onda--esq { left: -1.5%; bottom: -1px; width: 44.6%; height: auto; }

.hero__bolinhas {
  position: absolute;
  left: 1.2%;
  top: 18%;
  --colunas: 3;
  --linhas: 5;
  color: var(--ciano);
}

/* Quadro de composição. A largura é a menor entre a janela, os 1440 do design
   e a largura que a altura disponível comporta (100svh × 1440/1021).
   Os filhos ficam em % dele, replicando as coordenadas exatas do Figma. */
.hero__interno {
  position: relative;
  /* z-index acima do cabeçalho EM REPOUSO (60), para o cabelo passar por cima da
     faixa branca como no design. Ao rolar, o cabeçalho reduz e sobe para z90:
     aí ele cobre TODO o hero (cabeça e texto) — é a lógica pedida, cabeça por
     cima parado e tudo por baixo ao rolar. Depende do cabeçalho encolher de
     verdade (ver seção 2 do main.js). */
  z-index: 70;
  /* o canvas cobre a área do cabeçalho para a cabeça passar por cima dele;
     sem isto ele engoliria os cliques do menu. Nada aqui é interativo. */
  pointer-events: none;
  width: var(--canvas);
  aspect-ratio: 1440 / 1021;
  max-height: 100%;
}

.hero__lockup {
  position: absolute;
  /* deslocados para fora do centro: o lockup encosta mais na margem esquerda
     e a foto na direita, abrindo o vão de respiro entre os dois. */
  left: 16.5%;
  top: 22.72%;     /* 232 / 1021 */
  width: 26.39%;   /* 380 / 1440 */
}
.hero__nome       { width: 100%; }
.hero__numero     { width: 100%; margin-top: 8.03%; }   /* 30,5 / 380 */
.hero__assinatura { width: 100%; margin-top: 12.53%; }  /* 47,6 / 380 */

/* z-index acima do cabeçalho em repouso: a cabeça passa por cima da faixa
   branca de propósito (é assim no Figma). */
.hero__foto {
  position: absolute;
  right: -1.5%;
  /* O topo é ancorado no cabeçalho, não no canvas: garante que a cabeça sempre
     invada a faixa branca na mesma medida, em qualquer altura de tela. */
  top: calc(var(--cabecalho-h) - clamp(8px, 1.3vw, 19px));
  width: 52%;
}
.hero__foto img { width: 100%; height: auto; }

/* ── Hero no celular: empilha e ancora a foto na base ───────────────────── */
/* Até 700px o hero mantém a composição do desktop (lockup à esquerda, foto à
   direita), só escalada — no tablet ainda cabe bem e é mais fiel ao design.
   A foto sangra 1,5% pela direita, o que corta de leve o braço: é intencional. */
@media (max-width: 699px) {
  /* A altura vem do CONTEÚDO, com teto na primeira dobra. Esticar até 100svh
     deixava um vão entre o lockup e a foto em telas altas, porque a foto tem
     teto na própria proporção e não acompanha o esticão. Se o conteúdo passar
     da dobra, o `overflow: hidden` da seção recorta pela base — que é o corte
     desejado. */
  .hero {
    height: auto;
    min-height: 0;
    max-height: 100svh;
    padding-top: var(--cabecalho-h);
  }
  .hero__interno {
    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    padding-inline: var(--gutter);
  }
  /* Lockup reduzido de propósito: com 60vw ele comia metade da altura e a
     foto saía cortada no peito. Aqui ele cede espaço para o corpo aparecer. */
  .hero__lockup {
    position: static;
    width: clamp(165px, 45vw, 250px);
    margin-inline: auto;
    padding-block: clamp(1.25rem, 4.5vw, 2.25rem) clamp(0.75rem, 2vw, 1.25rem);
  }
  /* A caixa nunca fica mais alta que a proporção da foto (859/1269 = 0,677).
     Sem esse teto, em tela alta o `cover` escalava pela altura e comia as
     laterais — cortava os braços. Com o teto, o recorte só pode acontecer pela
     base, que é o corte desejado. */
  /* proporção natural: nada de object-fit, então não há corte lateral nenhum */
  .hero__foto {
    position: static;
    top: auto;
    align-self: end;
    justify-self: center;
    width: min(86vw, 360px);
    height: auto;
    min-height: 0;
    margin-bottom: -1px;
  }
  .hero__foto img { width: 100%; height: auto; }
  .hero__onda--dir { top: auto; bottom: 0; height: 66%; opacity: 0.85; }
  .hero__onda--esq { width: clamp(190px, 54vw, 330px); opacity: 0.9; }
  .hero__bolinhas {
    top: calc(var(--cabecalho-h) + clamp(0.75rem, 2.4vw, 1.5rem));
    left: clamp(0.5rem, 2vw, 1rem);
    --colunas: 3;
    --linhas: 3;
  }
}

/* Telas baixas: o lockup cede mais espaço para a foto não ser recortada no
   peito quando a dobra é curta. */
@media (max-width: 699px) and (max-height: 720px) {
  .hero__lockup {
    width: clamp(140px, 34vw, 200px);
    padding-block: clamp(0.75rem, 2.5vw, 1.25rem) clamp(0.5rem, 1.5vw, 0.75rem);
  }
  .hero__foto { width: min(66vw, 280px); }
}

/* ── 8. PROPOSTAS ───────────────────────────────────────────────────────── */
.propostas {
  background: var(--quase-branco);
  padding-block: clamp(2.75rem, 1.8rem + 3vw, 3.75rem) var(--secao-y);
}

.titulo-secao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.9rem);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  font-size: var(--t-secao);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--azul-eletrico);
  text-wrap: balance;
}
.titulo-secao__ponto {
  flex: none;
  width: clamp(24px, 3vw, 44px);
  height: clamp(4px, 0.5vw, 6px);
  border-radius: 3px;
  background: var(--laranja);
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem) var(--gap-cards);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--quase-branco);
  box-shadow: 0 0 0 2px var(--borda-card);
  border-radius: var(--raio-card);
  overflow: hidden;
  /* O card se move como uma peça só: nada escala por dentro. */
  transition: transform 0.34s var(--saida), box-shadow 0.34s var(--saida);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 0 2px var(--laranja), 0 22px 40px -24px rgb(11 44 96 / 0.45);
}

/* 275×169 = a área interna do card, já sem o stroke de 2px (o Figma exportava
   a borda assada dentro do PNG, o que duplicava o traço do card).
   A foto é rente ao traço em cima e nas laterais; o card a recorta pelo raio. */
.card__figura {
  aspect-ratio: 275 / 169;
  overflow: hidden;
  background: #e9e9e9;
}
.card__figura img { width: 100%; height: 100%; object-fit: cover; }

.card__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.1rem, 1.5vw, 1.5rem) clamp(1.1rem, 1.4vw, 1.25rem) clamp(1.75rem, 2.4vw, 2.4rem);
}

/* Os 8 títulos têm a quebra escrita no HTML (<br>), então são sempre 2 linhas
   e a régua e o texto começam na mesma altura em todos os cards, em qualquer
   largura. balance/pretty ficam de fora justamente para não mexer nisso. */
.card__titulo {
  min-height: calc(2 * 1.16em);
  font-size: var(--t-card);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--laranja);
}
.card__titulo::after {
  content: '';
  display: block;
  width: 61px;
  height: 4px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--laranja);
}
/* Entrelinha mais curta que o corpo padrão: é o que mantém o card na altura
   do design. 1.5 em vez dos 1.22 do Figma — legibilidade para leitor de 60+
   sem esticar o card. */
.card__corpo p {
  /* Margens automáticas em cima E embaixo: quando um card da fileira é mais
     alto que os outros, a sobra se divide igualmente entre o fio e o pé, em
     vez de cair inteira embaixo do texto. Sem sobra, as duas viram zero e
     valem os espaços definidos aqui — que é o caso em quase toda a faixa. */
  margin-block: auto;
  /* o vão fio→texto vem do padding, não da margem: `margin-top: auto` a
     substituiria e o texto colaria no fio */
  padding-top: clamp(1.15rem, 1.6vw, 1.55rem);
  /* Piso em 17px, não 15: a curva antiga só chegava aos 17 perto de 1440, e no
     celular — onde o card ocupa quase a tela toda e sobra largura — o texto
     ficava pequeno demais. Agora são 17px em qualquer largura; o desktop não
     muda, porque 17 já era o teto lá. */
  font-size: 1.0625rem;                                          /* 17 fixo */
  line-height: 1.5;
}
/* A reserva de linhas saiu daqui. Ela fixava 3 linhas, mas o texto fecha em 2
   em boa parte da faixa (380-619px e 760-1179px) — e a linha reservada que
   sobrava virava um vão de 53px no pé do card, contra 13px acima do texto.
   Sem reserva, o pé é sempre o padding e as duas folgas ficam equilibradas.
   O papel de cinto de segurança passou para o `margin-block: auto`. */

/* A grade só existe em 4 ou 2 colunas — nunca 3. Três colunas deixavam a
   última linha com dois cards órfãos e quebravam a simetria da leitura. */
@media (max-width: 1179px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* No celular o card continua empilhado, como no design: a foto ocupa a largura
   toda e o texto respira. Card deitado foi testado e some com a foto. */
@media (max-width: 619px) {
  .cards { grid-template-columns: 1fr; gap: 1.5rem; }
  .card { max-width: 460px; width: 100%; margin-inline: auto; }
  .card__figura { aspect-ratio: 275 / 156; }
}

/* ── 9. QUEM É ELIANA ───────────────────────────────────────────────────── */
.quem {
  position: relative;
  isolation: isolate;
  /* faixa clara de 33px antes do creme, como no Figma (Rectangle 4 em y=33):
     é o que faz a cabeça dela "vazar" o fundo creme por cima. */
  background: linear-gradient(to bottom, var(--quase-branco) 0 33px, var(--creme) 33px);
  /* sem overflow:hidden aqui — a foto precisa transbordar pelo topo.
     O recorte dos grafismos fica no próprio .quem__grafismos. */
}

.quem__grafismos {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --folga: sobreposição além da borda da seção. A deriva no scroll nunca pode
   exceder esse valor, senão abre uma fresta entre o grafismo e o fim da seção.
   O JS lê --folga e limita a amplitude a ela. */
.quem__blob {
  position: absolute;
  max-width: none;
  --folga: 34px;
}
/* A largura é DERIVADA da coluna da foto, não um vw solto: o grafismo avançava
   ~140px para dentro da coluna de texto e o traço laranja cruzava o último
   parágrafo entre 960 e 1280px. Agora ele termina 24px antes da coluna começar,
   em qualquer largura. */
.quem__blob--azul {
  left: -2%;
  bottom: calc(var(--folga) * -1);
  width: calc(min(41%, 600px) + 2% - 24px);
}
.quem__blob--laranja {
  /* recuada para o canto inferior direito e menor que os 428 do Figma:
     some de trás do texto e fica mais delicada */
  /* entra mais na seção (aparecia pouco) e um pouco menor, mantendo folga
     em relação à coluna de texto, que termina em 88,2% */
  right: -2%;
  bottom: calc(var(--folga) * -1);
  width: clamp(140px, 17.5vw, 252px);
}

/* Colunas nas proporções do Figma: foto 631/1440 = 43.8% sangrando na borda
   esquerda, texto começando em 45.3% e terminando em 88.2%. */
.quem__interno {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: min(41%, 600px) minmax(0, 1fr);
  align-items: end;
  gap: clamp(2rem, 4.5%, 6rem);   /* respiro entre a foto e a coluna de texto */
  /* até 1440 a foto sangra na borda, como no Figma; acima disso o par é
     centralizado e os grafismos ficam nas laterais */
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 0;
}

/* A foto sobe acima do topo da seção (y=-15 no Figma): a cabeça fica sobre o
   fundo claro da seção anterior antes de o creme começar. */
.quem__foto {
  position: relative;
  z-index: 2;
  margin: clamp(-22px, -1.05vw, -9px) 0 -1px 0;
  align-self: end;
}
.quem__foto img { width: 100%; height: auto; }

.quem__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* centralizado na altura da seção: a altura é ditada pela foto, e ancorar
     pelo topo deixava um vazio grande embaixo do último parágrafo.
     O recuo à direita é maior que o grafismo laranja, então o texto nunca
     passa por cima dele. */
  align-self: center;
  padding: clamp(4rem, 3.4vw, 4.75rem) max(var(--gutter), 11.8%) clamp(4rem, 3.9vw, 5.25rem) 0;
}

.quem__titulo {
  font-size: var(--t-secao);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--azul-eletrico);
  text-wrap: balance;
}
.quem__titulo em { font-style: normal; color: var(--laranja); }
.quem__texto .regua { margin-top: clamp(0.9rem, 1.6vw, 1.35rem); }
/* Herdava --t-corpo, que no celular encosta no piso de 16px. Mesma lógica dos
   cards: sobe o piso para 17 e mantém os 18 do desktop no topo da curva. */
.quem__texto p {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  max-width: 62ch;
  font-size: clamp(1.0625rem, 0.98rem + 0.36vw, 1.125rem);       /* 17 → 18 */
}


/* O recuo de 11,8% não é decorativo: é o que mantém a coluna de texto longe do
   grafismo laranja da direita. Tentei reduzi-lo entre 900 e 1280px para ganhar
   linhas mais largas, e o texto passou a cruzar o grafismo — a proporção do
   Figma estava certa. Fica registrado para não se tentar de novo. */
.quem__texto p:first-of-type { margin-top: clamp(1.4rem, 2.6vw, 2.1rem); }

@media (max-width: 899px) {
  .quem__interno {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0;
    padding-top: clamp(2.25rem, 6vw, 3.5rem);
  }
  .quem__foto {
    order: 1;
    margin-left: 0;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    width: min(78vw, 400px);
  }
  .quem__texto {
    align-items: flex-start;
    text-align: left;
    /* margem lateral (no desktop o recuo esquerdo é 0 por causa do grid).
       A faixa livre para os grafismos passou para DEPOIS da foto, que agora é
       o último elemento — senão abria um vão entre o texto e ela. */
    padding-inline: var(--gutter);
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
  /* encostada no fim da seção: os grafismos ficam ATRÁS dela (z-index 0 contra
     2), como no desktop — não precisam de faixa livre própria */
  .quem__foto { margin-bottom: -1px; }
  /* título e régua alinhados à esquerda, na mesma margem do texto abaixo */
  .quem__titulo { align-self: flex-start; }
  .quem__texto .regua { align-self: flex-start; }
  .quem__texto p { max-width: 62ch; }
  /* Empilhado, a coluna de texto ocupa a largura toda e passava por cima dos
     grafismos (2,4:1 de contraste no último parágrafo). Aqui eles são
     reduzidos a uma faixa decorativa no pé da seção, e o texto reserva
     exatamente a altura dessa faixa. --blob-l é a razão do bg_02 (1100/884). */
  .quem { --blob-w: clamp(200px, 46vw, 320px); --blob-r: 1.2443; }
  .quem__blob--azul {
    width: var(--blob-w);
    opacity: 0.9;
  }
  .quem__blob--laranja {
    right: -6%;
    width: calc(var(--blob-w) * 0.58);
    opacity: 0.9;
  }
}

/* ── 10. LUTAR POR QUEM LUTOU ───────────────────────────────────────────── */
.lutar {
  position: relative;
  display: grid;
  grid-template-columns: 675fr 765fr;
  background: var(--azul-noite);
  overflow: hidden;
}

.lutar__foto { grid-area: 1 / 1 / 2 / 2; margin: 0; }
.lutar__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }

/* A altura da faixa é ditada pela foto. O bloco de texto se centraliza dentro
   dela — senão sobra um vazio grande embaixo, já que o texto é mais curto. */
.lutar__painel {
  grid-area: 1 / 1 / 2 / 3;
  position: relative;
  display: grid;
  align-content: center;
  margin-left: 33.13%;   /* 477/1440 — encosto do painel navy sobre a foto */
  background: var(--azul-noite);
  border-top-left-radius: var(--raio-painel);
  overflow: hidden;
}

.lutar__bolinhas {
  position: absolute;
  right: clamp(0.75rem, 1.2vw, 1.125rem);
  bottom: clamp(1rem, 2.4vw, 1.75rem);
  --colunas: 5;
  --linhas: 4;
  color: rgb(255 255 255 / 0.24);
}

.lutar__interno {
  display: grid;
  grid-template-columns: auto 3px minmax(0, 1fr);
  /* bloco fechado e centralizado no painel azul */
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
  /* stretch, não start: assim o fio branco e o bloco da direita têm exatamente
     a altura do título — vale no desktop e no tablet. */
  align-items: stretch;
  /* só vão de COLUNA: o de linha separava o texto da assinatura em 54px */
  gap: 0 clamp(1.5rem, 4vw, 3.4rem);
  /* O topo é maior que a base de propósito: a caixa da linha de texto embute
     entrelinha acima das maiúsculas, então padding igual faz o bloco parecer
     alto demais. Isto é compensação óptica, não desalinhamento. */
  padding-block: clamp(2.75rem, 6vw, 6.5rem) clamp(2rem, 4.4vw, 3.6rem);
  padding-inline: clamp(1.5rem, 3.4vw, 3.5rem);
  color: #fff;
}

/* Entrelinha 1.22 do próprio corpo de cada linha — é a medida do Figma
   (85 → 153,8 → 211,4 com corpos de 56,2 / 47,5 / 65,8). Unitless para que
   cada linha multiplique pelo SEU tamanho, não pelo do bloco. */
.lutar__titulo {
  display: flex;
  flex-direction: column;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lutar__linha1 { font-size: clamp(1.875rem, 0.67rem + 4.21vw, 3.79rem); }
.lutar__linha2 { font-size: clamp(1.59rem, 0.56rem + 3.56vw, 3.21rem); }
.lutar__linha3 {
  font-size: clamp(2.2rem, 0.78rem + 4.94vw, 4.44rem);
  background: linear-gradient(90deg, var(--ambar-claro), var(--ambar-escuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Desktop: título na coluna 1 atravessando as duas linhas, fio na 2, texto na
   3 e a assinatura logo abaixo do texto. */
.lutar__titulo { grid-column: 1; grid-row: 1 / span 2; }
.lutar__fio    { grid-column: 2; grid-row: 1 / span 2; background: rgb(255 255 255 / 0.9); border-radius: 2px; }
.lutar__aparte { grid-column: 3; grid-row: 1; align-self: end; }
.lutar__conte  { grid-column: 3; grid-row: 2; align-self: start; }
.lutar__aparte p { max-width: 42ch; }
.lutar__conte {
  width: clamp(160px, 20vw, 243px);
  height: auto;
  margin-top: clamp(0.75rem, 1.1vw, 1.15rem);
  justify-self: start;
}
/* espaço à direita do bloco para a assinatura nunca encostar nas bolinhas */


@media (max-width: 1023px) {
  .lutar { grid-template-columns: 1fr; }
  /* Full-width, o par de mulheres vive entre 6% e 62% da largura da imagem:
     o terço direito é rua vazia, e era ele que empurrava as duas para o canto
     esquerdo do quadro (centro do par em 34% em vez de 50%).
     Em vez de mudar a altura da caixa, dou à imagem uma largura de 135,3%
     (= 100 / 73,9) ancorada à esquerda e deixo a figure cortar o que passa:
     aparecem só os 73,9% da esquerda, e o centro do par sobe para ~46%.
     Como o corte vem da largura da própria img, vale igual para as duas
     proporções de caixa usadas no empilhado — não depende do aspect-ratio. */
  .lutar__foto {
    grid-area: auto;
    aspect-ratio: 16 / 8;
    position: relative;
    overflow: hidden;
  }
  .lutar__foto img {
    position: absolute;
    left: 0;
    top: 0;
    width: 135.3%;
    max-width: none;   /* o reset do topo (img { max-width: 100% }) trava os 135,3% */
    object-position: 0% 34%;
  }
  .lutar__painel {
    grid-area: auto;
    margin-left: 0;
    margin-top: calc(var(--raio-painel) * -1);
    border-top-left-radius: var(--raio-painel);
    border-top-right-radius: var(--raio-painel);
  }
  .lutar__titulo { white-space: normal; }
  .lutar__linha1, .lutar__linha2, .lutar__linha3 { white-space: nowrap; }
  /* o vão dos dois lados do fio vem só do gap da grade — sem padding aqui,
     senão o fio sai do meio */
  .lutar__aparte p { max-width: 58ch; }
}

/* No empilhado a grade continua no canto inferior direito: o bloco de texto
   agora é estreito e centralizado, então sobra espaço para ela. Só abaixo de
   760px, quando o painel encolhe de vez, ela sai de cena. */
@media (max-width: 759px) {
  .lutar__bolinhas { display: none; }
}



/* Com o texto empilhado o painel precisa de menos largura — e a foto ganha
   espaço para as duas mulheres aparecerem, não só a Eliana. Só vale enquanto
   foto e painel dividem a linha; abaixo de 1024 a foto vai acima e o painel
   volta a ser inteiro. */
/* Faixa 1024-1339: o painel é estreito (a foto ocupa mais) e o título cresce
   com a janela — sem compensar, a coluna de texto caía para 15 caracteres por
   linha. O painel cede um pouco e o título encolhe, devolvendo medida ao texto. */
@media (min-width: 1024px) and (max-width: 1339px) {
  .lutar__painel { margin-left: 36%; }
  /* Aqui a foto é uma coluna estreita: o corte horizontal é forte e o X do
     object-position é o que decide quem aparece. Fica só nesta faixa — no
     empilhado (<=1023) o enquadramento é outro, logo abaixo. */
  .lutar__foto img { object-position: 34% 34%; }
  .lutar__linha1 { font-size: clamp(1.75rem, 0.62rem + 2.9vw, 2.55rem); }
  .lutar__linha2 { font-size: clamp(1.48rem, 0.52rem + 2.45vw, 2.16rem); }
  .lutar__linha3 { font-size: clamp(2.05rem, 0.73rem + 3.4vw, 2.99rem); }
  .lutar__interno { padding-inline: clamp(1.25rem, 2.4vw, 2.25rem); }
}

@media (max-width: 1339px) {
  /* Título e texto continuam lado a lado com o fio entre eles; só a assinatura
     desce para uma linha própria, centralizada sob os dois. */
  .lutar__interno {
    justify-content: center;
    gap: 0 clamp(1.75rem, 5.6vw, 3.5rem);   /* respiro dos dois lados do fio */
    padding-top: clamp(2.5rem, 7vw, 4rem);
  }
  /* O fio acompanha a altura do TÍTULO (as duas colunas ficam blocadas na
     mesma altura), e a coluna de texto é estreita — é o desenho pedido. */
  /* Colunas encolhidas ao conteúdo (auto, não 1fr): o bloco passa a ter a
     largura real do título + fio + texto, e `justify-content: center` o
     centraliza com margens iguais dos dois lados.
     O título tem teto baixo para não crescer além do texto — é isso que mantém
     as duas colunas na mesma altura. */
  .lutar__interno {
    align-items: stretch;
    grid-template-columns: auto 3px auto;
    justify-content: center;
    max-width: 46rem;
  }
  .lutar__linha1 { font-size: clamp(1.6rem, 0.55rem + 3.6vw, 2.3rem); }
  .lutar__linha2 { font-size: clamp(1.36rem, 0.47rem + 3.05vw, 1.95rem); }
  .lutar__linha3 { font-size: clamp(1.88rem, 0.64rem + 4.22vw, 2.7rem); }
  .lutar__titulo { grid-row: 1; }
  .lutar__fio    { grid-row: 1; grid-column: 2; }
  /* Abaixo de 1024 a seção herda text-align:center e o parágrafo ficava
     centralizado dentro da própria caixa — o texto começava ~20px depois da
     borda dela, e o fio parecia deslocado para a esquerda. */
  .lutar__aparte { grid-row: 1; grid-column: 3; text-align: left; }
  /* entrelinha maior: as 4 linhas do texto fecham na mesma altura do título,
     e as duas colunas ficam blocadas */
  .lutar__aparte p {
    max-width: 26ch;
    font-size: clamp(0.875rem, 0.78rem + 0.36vw, 1rem);
    line-height: 2.05;
  }
  .lutar__conte {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: clamp(180px, 32vw, 270px);
    padding-left: 0;
    margin-top: clamp(1.5rem, 5vw, 2.5rem);
  }
}

/* ── Celular: uma coluna só ──────────────────────────────────────────────
   Medido: abaixo de 560px as duas colunas espremem o parágrafo até 9-16
   caracteres por linha (12 linhas em 360px). Aqui tudo empilha em uma
   coluna — título, régua horizontal, texto e assinatura — e o parágrafo
   volta a usar a largura inteira do painel. */
@media (max-width: 559px) {
  .lutar__interno {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    max-width: 32rem;
  }
  .lutar__titulo { grid-column: 1; grid-row: 1; }
  /* Em uma coluna só sobra muita largura — o título ocupava só ~50% dela.
     Escalado para usar ~80%, mantendo as proporções entre as três linhas.
     Continua nowrap; a medição confirma que não estoura nem em 300px. */
  .lutar__linha1 { font-size: clamp(2.35rem, 0.93rem + 8.68vw, 3.88rem); }
  .lutar__linha2 { font-size: clamp(1.99rem, 0.79rem + 7.36vw, 3.29rem); }
  .lutar__linha3 { font-size: clamp(2.75rem, 1.09rem + 10.23vw, 4.56rem); }

  /* o fio vertical vira régua horizontal, atravessando a coluna */
  .lutar__fio {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 3px;
    margin-block: clamp(1.1rem, 5vw, 1.6rem);
  }

  .lutar__aparte { grid-column: 1; grid-row: 3; }
  .lutar__aparte p {
    max-width: none;           /* sem teto de 26ch: usa a largura toda */
    line-height: 1.75;         /* entrelinha menor, já que não precisa
                                  bater com a altura do título */
    /* Os 14px vinham do bloco de 1339px, onde as 4 linhas precisam fechar na
       mesma altura do título. Aqui é uma coluna só, essa amarra não existe —
       e 14px de texto branco sobre azul-noite no celular é pequeno demais. */
    font-size: clamp(1.0625rem, 0.98rem + 0.36vw, 1.125rem);   /* 17 → 18 */
  }

  .lutar__conte {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    margin-top: clamp(1.5rem, 6vw, 2.25rem);
  }
}
@media (max-width: 599px) {
  .lutar__foto { aspect-ratio: 16 / 10; }
  /* Os font-size do título saíram daqui: este bloco vinha DEPOIS do de 559px
     e anulava o escalonamento do modo empilhado. Os tamanhos do celular vivem
     no bloco de 559px, junto com o resto do layout de uma coluna. */
}

/* ── AVISO DE COOKIES (LGPD) ─────────────────────────────────────────────── */
/* Barra fixa no rodapé, não modal: um modal bloqueante logo na chegada esconde
   a página e derruba a leitura. O aviso informa e deixa escolher sem travar. */
.consentimento {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;                      /* acima do cabeçalho, inclusive com o menu aberto */
  background: var(--azul-noite);
  color: #fff;
  border-top: 3px solid var(--laranja);
  box-shadow: 0 -0.75rem 2rem rgb(0 30 75 / 0.28);
  padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 5vw, 2.5rem);
  padding-bottom: max(clamp(0.9rem, 2vw, 1.25rem), env(safe-area-inset-bottom));
}
.consentimento[hidden] { display: none; }

.consentimento__interno {
  max-width: 78rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2.4vw, 2rem);
  flex-wrap: wrap;
}

.consentimento__texto {
  flex: 1 1 22rem;
  margin: 0;
  font-size: clamp(0.875rem, 0.83rem + 0.19vw, 0.9375rem);
  line-height: 1.55;
  color: rgb(255 255 255 / 0.9);
  text-wrap: pretty;
}

/* Botão que parece link: é um controle de verdade (abre diálogo), então não
   pode ser <a href="#"> — teclado e leitor de tela anunciariam errado. */
.consentimento__link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.consentimento__acoes {
  display: flex;
  gap: 0.6rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.consentimento__btn {
  font: inherit;
  font-size: clamp(0.875rem, 0.83rem + 0.19vw, 0.9375rem);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.7rem clamp(1.1rem, 2.4vw, 1.75rem);
  min-height: 2.75rem;              /* alvo de toque de 44px */
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.consentimento__btn--aceitar {
  border: 2px solid var(--ambar);
  background: var(--ambar);
  color: var(--azul-noite);
}
.consentimento__btn--aceitar:hover { background: var(--ambar-claro); border-color: var(--ambar-claro); }
/* Recusar tem o MESMO peso de leitura que aceitar — só muda o preenchimento.
   Esconder ou apagar a recusa é dark pattern e a LGPD trata como consentimento
   viciado: a escolha precisa ser livre. */
.consentimento__btn--recusar {
  border: 2px solid rgb(255 255 255 / 0.55);
  background: none;
  color: #fff;
}
.consentimento__btn--recusar:hover { background: rgb(255 255 255 / 0.12); }

/* Em uma linha só o texto fica longo e os botões encostam na borda direita:
   desequilibrado. Abaixo de 900px o aviso empilha e centraliza, e os dois
   botões dividem a mesma largura, com teto para não virarem faixas enormes. */
@media (max-width: 899px) {
  .consentimento__interno {
    flex-direction: column;
    text-align: center;
    gap: clamp(0.8rem, 2.4vw, 1.1rem);
  }
  .consentimento__texto { flex: none; }
  .consentimento__acoes {
    margin-left: 0;
    width: 100%;
    max-width: 26rem;
    justify-content: center;
  }
  .consentimento__btn { flex: 1 1 0; }
}

/* Subtítulos dentro da política (o diálogo já existia só com <p>) */
.dialogo__caixa h3 {
  margin: clamp(1.1rem, 2.2vw, 1.5rem) 0 0.4rem;
  font-size: clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem);
  font-weight: 800;
  color: var(--azul-noite);
}
.dialogo__caixa h3:first-of-type { margin-top: 0; }
.dialogo__caixa code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--lavanda);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* ── 11. FAÇA PARTE / DOAÇÃO ────────────────────────────────────────────── */
.doacao {
  position: relative;
  isolation: isolate;
  background: linear-gradient(90deg, var(--laranja-grad1), var(--laranja-grad2));
  overflow: hidden;
}

.doacao__bolinhas {
  position: absolute;
  left: clamp(0.75rem, 3vw, 43px);
  top: 50%;
  transform: translateY(-50%);
  /* grade própria, menor que a das outras seções */
  --bola-passo: 18px;
  --bola-raio: 4.5px;
  --colunas: 6;
  --linhas: 5;
  color: #fff;
}

/* Recorte exato do render do Figma, com fundo removido: encosta no canto
   inferior direito e mantém a proporção original em qualquer largura. */
.doacao__deco {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  right: -3.5%;
  width: clamp(110px, 14vw, 200px);
  height: auto;
  max-width: none;
  pointer-events: none;
}

.doacao__interno {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* linha × coluna: o vão vertical é curto de propósito — quando o botão quebra
     para baixo ele fica logo abaixo do título, sem abrir buraco. */
  gap: clamp(1rem, 0.6rem + 1.1vw, 1.5rem) clamp(1.75rem, 0.3rem + 4.9vw, 5.5rem);
  padding-block: clamp(2rem, 3.6vw, 2.5rem);
  /* Recuo SIMÉTRICO e derivado da grade de bolinhas: mantém o par centralizado
     na janela e, ao mesmo tempo, longe dos grafismos dos dois lados. */
  max-width: none;
  /* derivado da grade: posição + largura (6 col × passo 18) + respiro maior */
  padding-inline: max(
    var(--gutter),
    calc(clamp(0.75rem, 3vw, 43px) + 5 * 18px + 9px
       + clamp(1.25rem, 0.4rem + 2.2vw, 3rem))
  );
}

/* "FAÇA PARTE" em branco sobre o laranja mede 1,97-2,61:1, abaixo do piso de
   3:1 de texto grande — e não há laranja que sirva aos dois textos (branco pede
   luminância <= 0,300; o azul royal da linha de baixo pede >= 0,321). Mantido
   em branco por decisão do cliente, ciente da medição. Ver DESIGN.md. */
.doacao__titulo {
  display: flex;
  flex-direction: column;
  font-size: clamp(1.5rem, 0.75rem + 2.6vw, 2.72rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #fff;
}
.doacao__realce { color: var(--azul-royal); }

.botao-doacao {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, 0.28rem + 0.57vw, 0.75rem);
  padding: clamp(0.7rem, 0.42rem + 0.72vw, 0.9rem) clamp(1.1rem, 0.62rem + 1.24vw, 1.45rem);
  border-radius: 999px;
  background: var(--azul-royal);
  color: #fff;
  font-size: clamp(1.0625rem, 0.83rem + 0.95vw, 1.75rem);    /* 17 → 28 */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 12px 26px -14px rgb(0 30 75 / 0.65);
  transition: transform var(--dur-ui) var(--saida), background-color var(--dur-ui) linear, box-shadow var(--dur-ui) var(--saida);
}
.botao-doacao__icone {
  flex: none;
  width: clamp(20px, 0.78rem + 0.95vw, 31px);
  height: auto;
  aspect-ratio: 1 / 1;          /* viewBox do ícone do WhatsApp é quadrado */
}
/* O <a> com href real já traria o cursor de mão, mas fica explícito: o botão
   passou por uma fase inerte (aria-disabled) em que o cursor era default. */
.botao-doacao { cursor: pointer; }
.botao-doacao:hover {
  transform: translateY(-3px);
  background: #0036a4;
  box-shadow: 0 18px 34px -14px rgb(0 30 75 / 0.75);
}
.botao-doacao:active { transform: translateY(-1px); }
.botao-doacao[aria-disabled='true'] { cursor: default; }
.botao-doacao[aria-disabled='true']:hover { transform: none; background: var(--azul-royal); }

/* Entre 900 e 1180 o botão desce para a segunda linha. Aí ele não pode ficar
   centralizado sob o texto: vira coluna com os dois alinhados pela esquerda, e
   o grupo inteiro (largura do título) é que se centraliza na faixa. */
@media (min-width: 900px) and (max-width: 1179px) {
  .doacao__interno {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin-inline: auto;
  }
}

@media (max-width: 899px) {
  .doacao__interno {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: var(--gutter);
    /* simétrico: a grade de bolinhas encolheu e foi para o canto, não precisa
       mais de reserva no topo — o respiro em cima e embaixo é o mesmo */
    padding-block: clamp(2.5rem, 7vw, 3.25rem);
  }
  .doacao__titulo { align-items: center; text-align: center; }
  .doacao__bolinhas {
    top: clamp(0.75rem, 3vw, 1.25rem);
    left: clamp(0.75rem, 3vw, 1.25rem);
    transform: none;
    --colunas: 4;
    --linhas: 3;
    opacity: 0.5;
  }
  .botao-doacao { width: min(100%, 380px); min-height: 48px; justify-content: center; }
}

/* ── 12. VÍDEO ──────────────────────────────────────────────────────────── */
.video {
  position: relative;
  isolation: isolate;
  background: var(--quase-branco);
  overflow: hidden;
  padding-block: var(--secao-y);
}

.video__deco {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: clamp(72px, 11vw, 158px);      /* 158 / 1440 */
  height: auto;
  max-width: none;
  pointer-events: none;
}
.video__bolinhas {
  position: absolute;
  right: clamp(1rem, 2.4vw, 2.5rem);
  bottom: clamp(0.75rem, 2vw, 1.75rem);
  z-index: 0;
  --colunas: 5;
  --linhas: 5;
  color: var(--azul-noite);
}

.video__interno {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.75rem, 5vw, 5.75rem);
}

/* O recuo esquerdo é derivado do grafismo do canto (11% da largura + folga):
   em 1180-1280 a coluna estreita empurrava o título para 4 linhas e a primeira
   delas passava por cima dele. 11,4vw = os 164px do Figma em 1440. */
@media (min-width: 900px) {
  .video__interno { padding-left: max(var(--gutter), 11.4vw); }
}

.video__texto { display: flex; flex-direction: column; align-items: flex-start; }
.video__titulo {
  font-size: var(--t-secao);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--azul-eletrico);
  text-wrap: balance;
}
.video__texto .regua { margin-top: clamp(0.9rem, 1.6vw, 1.35rem); }
.video__texto p { margin-top: clamp(1.1rem, 2vw, 1.75rem); max-width: 36ch; }

.video__player {
  position: relative;
  aspect-ratio: 612 / 344;
  border-radius: clamp(10px, 1.2vw, 16px);
  overflow: hidden;
  background: #cbc4bb;
}
.video__player img,
.video__player iframe,
.video__player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(58px, 7vw, 100px);
  aspect-ratio: 1;
  filter: drop-shadow(0 10px 22px rgb(0 0 0 / 0.28));
  transition: scale var(--dur-ui) var(--saida);
  pointer-events: none;
}
.video__play svg { width: 100%; height: 100%; }

/* Só vira botão quando o vídeo estiver configurado (ver PENDENCIAS.md) */
.video__player--ativo { cursor: pointer; }
.video__player--ativo:hover .video__play,
.video__player--ativo:focus-visible .video__play { scale: 1.09; }
.video__player--ativo:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; }
.video__player--tocando .video__play,
.video__player--tocando .video__capa { display: none; }

@media (max-width: 899px) {
  .video__interno { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.25rem); }
  .video__bolinhas { --colunas: 4; --linhas: 4; }
  .video__texto { align-items: center; text-align: center; }
  .video__texto p { max-width: 56ch; }
  .video__bolinhas { opacity: 0.35; }
  .video__deco { opacity: 0.75; }
}

/* ── 13. INSTAGRAM ──────────────────────────────────────────────────────── */
.insta {
  position: relative;
  isolation: isolate;
  background: var(--lavanda);
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.insta__deco {
  position: absolute;
  bottom: 0;
  z-index: 0;
  height: auto;
  max-width: none;
  pointer-events: none;
}
.insta__deco--esq { left: 0;  width: clamp(112px, 17.5vw, 252px); }  /* 252 / 1440 */
.insta__deco--dir { right: 0; width: clamp(160px, 24.9vw, 358px); }  /* 358 / 1440 */

/* Em telas estreitas o grafismo da direita subia atrás de "Siga nosso Insta".
   Menor e com respiro extra embaixo, ele fica confinado ao pé da faixa. */
@media (max-width: 619px) {
  .insta { padding-bottom: clamp(3.5rem, 14vw, 4.5rem); }
  .insta__deco--esq { width: clamp(72px, 22vw, 120px); }
  .insta__deco--dir { width: clamp(80px, 25vw, 140px); }
  /* Com a faixa estreita o título centralizado alcança o canto: a grade sai
     de cena em vez de ficar atrás do texto (mesma decisão da faixa "Lutar"). */
  .insta__bolinhas { display: none; }
}
.insta__bolinhas {
  position: absolute;
  left: clamp(0.75rem, 2vw, 27px);
  top: clamp(0.75rem, 2vw, 26px);
  z-index: 0;
  --colunas: 4;
  --linhas: 3;
  color: #b9cbe8;
}

.insta__interno {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  text-align: center;
}

.insta__titulo {
  font-size: clamp(1.6rem, 0.85rem + 2.6vw, 2.75rem);
  font-weight: 900;
  font-style: oblique 10deg;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--laranja);
}

.insta__perfil {
  display: inline-flex;
  align-items: center;
  min-height: 48px;   /* alvo de toque */
  padding-inline: 0.25rem;
  gap: clamp(0.55rem, 1.1vw, 0.8rem);
  font-size: clamp(1.125rem, 0.7rem + 1.5vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--azul-noite);
  transition: color var(--dur-ui) linear, transform var(--dur-ui) var(--saida);
  overflow-wrap: anywhere;
}
.insta__icone { flex: none; width: clamp(26px, 2.8vw, 41px); height: auto; }
.insta__perfil:hover { color: var(--laranja); transform: translateY(-2px); }

/* ── 14. RODAPÉ ─────────────────────────────────────────────────────────── */
.rodape {
  background: var(--azul-noite);
  color: #fff;
  padding-block: clamp(2.5rem, 5vw, 3.9rem) clamp(1.5rem, 2.4vw, 2rem);
}

.rodape__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.4rem);
}

.rodape__marcas {
  display: flex;
  /* Pela BASE, não pelo centro. As três peças da direita têm alturas diferentes
     do logotipo; centralizando, cada uma flutuava num nível próprio e o bloco
     ficava sem linha de apoio. Alinhadas embaixo, todas descansam na mesma
     base da palavra "Fernandes". */
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.5rem, 4.6vw, 4.5rem);
  flex-wrap: wrap;
}
.rodape__logo   { width: clamp(150px, 17vw, 256px); height: auto; }
.rodape__numero { width: clamp(116px, 13vw, 197px); height: auto; }

.rodape__lema {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.4rem);
}
.rodape__coracao    { width: clamp(58px, 7vw, 108px); height: auto; }
.rodape__assinatura { width: clamp(160px, 19vw, 276px); height: auto; }

.rodape__legal {
  font-size: clamp(0.625rem, 0.5rem + 0.42vw, 0.8125rem);
  line-height: 1.5;
  text-align: center;
  text-wrap: nowrap;
  color: rgb(255 255 255 / 0.86);
  max-width: 100%;
}
/* Abaixo de ~560px não cabe em uma linha sem ficar ilegível: aí quebra. */
@media (max-width: 574px) {
  .rodape__legal { text-wrap: pretty; font-size: 0.6875rem; }
}

/* Aviso legal: precisa ser encontrável, não chamativo. Fica um degrau abaixo do
   texto legal em peso visual, mas sublinhado — é um controle, e sublinhado é o
   que sinaliza isso sem depender de cor. */
.rodape__transparencia {
  margin-top: calc(clamp(1.75rem, 4vw, 3.4rem) * -0.62);   /* encosta no legal, não no gap do rodapé */
  background: none;
  border: 0;
  padding: 0.35rem 0.2rem;
  font: inherit;
  font-size: clamp(0.625rem, 0.5rem + 0.42vw, 0.8125rem);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.74);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
  cursor: pointer;
  transition: color 0.2s ease;
}
.rodape__transparencia:hover { color: #fff; }

/* ── Diálogo (aviso de IA) ───────────────────────────────────────────────── */
.dialogo {
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(84svh, 44rem);
  margin: auto;                      /* centraliza no viewport do top layer */
  padding: 0;
  border: 0;
  border-radius: clamp(0.85rem, 1.6vw, 1.25rem);
  background: var(--branco);
  color: var(--tinta);
  box-shadow: 0 1.5rem 3.5rem rgb(0 30 75 / 0.32);
  overflow: hidden;                  /* o scroll é da caixa, para o topo não cortar */
}
.dialogo::backdrop {
  background: rgb(0 30 75 / 0.62);
  backdrop-filter: blur(2px);
}

.dialogo__caixa {
  position: relative;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;      /* rolar até o fim não arrasta a página atrás */
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  /* espaço reservado para o X não passar por cima da primeira linha do título */
  padding-right: clamp(3.4rem, 3.4vw + 1.9rem, 4.4rem);
}

.dialogo__fechar {
  position: absolute;
  top: clamp(0.7rem, 1.4vw, 1.05rem);
  right: clamp(0.7rem, 1.4vw, 1.05rem);
  display: grid;
  place-items: center;
  width: 2.75rem;                    /* alvo de toque de 44px, não só o ícone */
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--azul-noite);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.dialogo__fechar:hover { background: var(--lavanda); }

.dialogo__titulo {
  margin: 0 0 clamp(0.9rem, 1.8vw, 1.25rem);
  font-size: clamp(1.125rem, 0.98rem + 0.62vw, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--azul-eletrico);
  text-wrap: balance;
}
.dialogo__caixa p {
  margin: 0 0 0.9em;
  font-size: clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem);
  line-height: 1.65;
  color: rgb(17 19 24 / 0.86);
}
.dialogo__caixa p:last-child { margin-bottom: 0; }

.dialogo__nota {
  margin-top: clamp(1.1rem, 2.2vw, 1.5rem);
  padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
  border-top: 1px solid var(--borda-card);
}
.dialogo__nota strong { color: var(--tinta); }

/* A abertura anima; quem pediu menos movimento recebe o diálogo já posto. */
@media (prefers-reduced-motion: no-preference) {
  .dialogo[open] { animation: dialogo-entra 0.24s cubic-bezier(0.16, 1, 0.3, 1); }
  .dialogo[open]::backdrop { animation: dialogo-fundo 0.24s ease; }
}
@keyframes dialogo-entra {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.985); }
}
@keyframes dialogo-fundo { from { opacity: 0; } }

@media (max-width: 599px) {
  .rodape__marcas { gap: 1.5rem 2rem; }
  .rodape__lema { width: 100%; justify-content: center; }
}

/* ── 15. AJUSTES FINOS ──────────────────────────────────────────────────── */
/* Telas muito largas: o hero não estica a foto além do desenho original */
@media (min-width: 1600px) {
  .hero__onda--dir { right: calc((100vw - 1600px) / -2); }
}

@media print {
  .cabecalho, .menu-botao, .hero__grafismos, .quem__grafismos,
  .doacao__deco, .video__deco, .insta__deco { display: none !important; }
  body { background: #fff; }
  .js [data-anima] { opacity: 1 !important; transform: none !important; }
}