/* ============================================
   ALENCAR 1358 — Site de campanha
   Paleta oficial (APR_IDENTIDADE_ALENCAR):
   vermelho #ED1C24 | verde #A6CE39 | azul #016FF0
   azul-escuro #0238CB | amarelo #FFCB05
   Azul da peça de abertura: #32509C
   Tipografia: Antonio (títulos, secundária oficial),
   Archivo (texto), Baloo 2 (faixa), Caveat (manuscrito)
   ============================================ */

:root {
  --vermelho: #ED1C24;
  --vermelho-vivo: #E31E25;
  --vermelho-secao: #D91419;
  --verde: #A6CE39;
  --azul: #016FF0;
  --azul-escuro: #0238CB;
  --azul-faixa: #0238CC;
  --amarelo: #FFCB05;
  --preto: #1A1A1A;
  --branco: #FFFFFF;
  --cinza-claro: #F5F4EF;
  --creme: #FBF6E9;
  --marinho: #1B3688;
  --amarelo-escuro: #4A3600;
  --amarelo-medio: #6B4F00;
  --creme-escuro: #5A4A2E;
  --bege-escuro: #7A6A4A;
  --bege-linha: #E6DCC4;
  --sombra-suave: 0 16px 40px -16px rgba(26, 26, 26, .35);
  --font-display: "Antonio", "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Caveat", cursive;
  --font-redonda: "Baloo 2", "Archivo", sans-serif;
  --container: 1240px;

  /* escala de espaçamento base 4 — usada no ritmo do hero */
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--vermelho) var(--cinza-claro);
}

body {
  font-family: var(--font-body);
  color: var(--preto);
  background: var(--branco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

::selection { background: var(--amarelo); color: var(--preto); }

:focus-visible { outline: 3px solid var(--azul-escuro); outline-offset: 3px; border-radius: 4px; }
.section--vermelha :focus-visible,
.section--azul :focus-visible,
.faixa13 :focus-visible,
.footer :focus-visible { outline-color: var(--amarelo); }
.hero :focus-visible { outline-color: var(--amarelo); }

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

/* mesma sangria do hero: começa em 5vw (coluna do lockup) e termina em 96vw
   (borda direita da barra de selos), pra não "sanfonar" ao rolar a página */
.container--largo {
  max-width: none;
  padding: 0 4vw 0 5vw;
}

/* ---------- Header (barra creme sólida, colada no topo) ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0;
  background: transparent;
}

/* o header é fixo: as páginas internas abrem espaço pra ele */
.header + .section { padding-top: 160px; }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  padding: 0 2.6vw 0 5vw;
  height: clamp(80px, 6.6vw, 104px);
  max-width: none;
  margin: 0;
  background: var(--creme);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 10px 26px -16px rgba(26, 26, 26, .3);
}

.header__logo { flex-shrink: 0; }

.header__logo img { height: clamp(48px, 3.6vw, 58px); width: auto; }

.nav { display: flex; gap: clamp(18px, 2.6vw, 48px); align-items: center; }

.nav a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--preto);
  padding: 6px 2px;
  border-radius: 6px;
  transition: color .15s ease-out;
}

.nav a:hover { color: var(--vermelho-vivo); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--preto);
}
.nav-toggle svg { display: block; }

/* ---------- Hero (cartaz âmbar, 100vw × 100vh, sem moldura) ----------
   Empilhamento (de baixo pra cima): gradiente/mapa, conteúdo, barra
   de selos, FOTO e card do QR. O corpo do candidato passa por cima
   da barra de selos; o QR fica por cima da foto. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.hero,
.gru-hero {
  /* centro quente e claro saindo de trás do candidato (~65% da largura) */
  background: radial-gradient(72% 92% at 65% 35%, #FF6A5C 0%, #F5423C 30%, #E31E25 56%, #C81219 82%, #A50D12 100%);
}

/* estrela tom-sobre-tom, sutil, atrás dos cards */
.hero::before,
.gru-hero::before {
  content: "";
  position: absolute;
  left: 24%;
  bottom: -8%;
  width: clamp(320px, 40vw, 620px);
  aspect-ratio: 472 / 451;
  background: url("../img/el-estrela-silhueta.webp") no-repeat center / contain;
  opacity: .12;
  pointer-events: none;
}

/* mapa do Brasil em outline branco atrás do candidato */
.hero::after,
.gru-hero::after {
  content: "";
  position: absolute;
  right: -8vw;
  top: 4vh;
  width: 46vw;
  aspect-ratio: 800 / 806;
  background: url("../img/mapa-brasil.svg") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  padding: calc(clamp(80px, 6.6vw, 104px) + 65px) 0 0 5vw;
  display: block;
}

.hero__conteudo {
  width: 52vw;
  padding-bottom: calc(8vh + 56px);
}

/* Ritmo vertical: apertado dentro do lockup, folga nas trocas de grupo. */

/* lockup recomposto a partir da marca oficial */
.hero__lockup {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, .9vw, 12px);
  /* mesmo valor do vão acima do eyebrow (.hero__inner padding-top), para as
     duas folgas ficarem iguais. Mede do fim do traço vermelho do "você",
     porque o PNG da tagline é aparado no bbox. */
  margin-bottom: 65px;
}

/* fundo vermelho pede a versão de fundo escuro da marca: peças recoloridas
   via filtro — texto branco, número amarelo (mesma gramática do logo do
   footer, logo-fund-esc.png) */
.lk-eyebrow,
.lk-alencar,
.lk-tagline { filter: brightness(0) invert(1); }

.lk-1358 { filter: brightness(0) invert(74%) sepia(60%) saturate(1440%) hue-rotate(2deg) brightness(1.06); }

.lk-eyebrow { width: 48%; min-width: 240px; height: auto; }

.lk-linha {
  display: flex;
  align-items: flex-end;
  gap: 3.5%;
}

/* ALENCAR ≈ 32% da viewport; 1358 maior, subindo acima do topo da palavra */
.lk-alencar { width: 62%; height: auto; }
.lk-1358 { width: 34.5%; height: auto; }
.lk-tagline { width: 62%; min-width: 280px; height: auto; margin-top: -2px; }

/* grid inteiro ≈ 46% da viewport: cards largos e baixos */
.hero__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  width: 48vw;
  margin-bottom: 36px;
}

.hero-card {
  background: var(--creme);
  border-radius: 16px;
  padding: var(--sp-4) var(--sp-3) var(--sp-4);
  text-align: center;
  box-shadow: 0 10px 22px -14px rgba(96, 7, 10, .5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.hero-card__icone {
  width: clamp(48px, 3.5vw, 56px);
  height: clamp(48px, 3.5vw, 56px);
  border-radius: 50%;
  background: var(--marinho);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-card__icone svg { width: 45%; height: 45%; }

/* título e texto do card precisam de respiro entre si */
.hero-card__texto {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hero-card h3 {
  font-size: clamp(.88rem, .98vw, 1rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--marinho);
  text-wrap: balance;
}

.hero-card p {
  font-size: clamp(.78rem, .86vw, .875rem);
  line-height: 1.42;
  color: #4A4840;
  text-wrap: pretty;
}

.hero__acoes { display: flex; gap: var(--sp-4); flex-wrap: wrap; width: 48vw; }

.btn-hero {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none;
  border-radius: 12px;
  /* largura vem do conteúdo; padding equilibrado dos dois lados */
  padding: 22px 40px;
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}

.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(96, 7, 10, .55); }
.btn-hero:active { transform: translateY(0); }

.btn-hero__icone {
  width: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-hero svg { width: 27px; height: 27px; }

/* rótulo e subtítulo do botão também precisam de respiro */
.btn-hero__rotulo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.2;
}

.btn-hero strong {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.btn-hero small { font-size: .875rem; opacity: .92; }

.btn-hero--amarelo { background: var(--amarelo); color: var(--amarelo-escuro); }

/* Foto do candidato: ancorada pelo TOPO, ~20px abaixo do header,
   maior que o quadro — o hero (overflow:hidden) corta o corpo na
   altura do quadril e a mão esquerda sai do quadro.
   Empilhamento: mapa(bg), FOTO(1), barra de selos(2), header(100), QR(101). */
.hero__foto {
  position: absolute;
  top: calc(clamp(80px, 6.6vw, 104px) + 20px);
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* 59vw de altura = 42vw de largura (proporção 0,712): a figura ocupa a mesma
   fatia da viewport em qualquer largura, mantendo o vão central constante.
   O termo em vh só entra em janelas altas e estreitas, como proteção. */
.hero__foto img {
  height: min(calc((100vh - clamp(80px, 6.6vw, 104px) - 20px) * 1.40), 59vw);
  width: auto;
  max-width: none;
  filter: drop-shadow(0 14px 34px rgba(80, 6, 9, .45));
}

.hero__carimbo {
  position: absolute;
  top: 35%;
  right: 6%;
  z-index: 3;
  display: flex;
  width: clamp(132px, 10.5vw, 172px);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 4px solid var(--amarelo);
  border-radius: 50%;
  color: var(--branco);
  background: var(--azul-escuro);
  box-shadow: 0 18px 34px -16px rgba(53, 5, 90, .72);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.35vw, 1.4rem);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: .98;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-7deg);
}

.hero__carimbo strong {
  margin-top: .12em;
  color: var(--amarelo);
  font-size: 1.28em;
}

/* Card do QR: acima da foto (1) e da barra de selos (2), mas ABAIXO do header
   fixo (100) — com 101 ele passava por cima da barra do topo ao rolar */
.hero__social {
  position: absolute;
  right: 4vw;
  bottom: calc(7vh + 62px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  background: var(--creme);
  border-radius: 18px;
  padding: var(--sp-5) var(--sp-5);
  box-shadow: 0 18px 38px -16px rgba(80, 6, 9, .5);
}

.hero__social-info { display: flex; flex-direction: column; gap: 8px; }

.hero__social-info strong {
  font-size: clamp(.95rem, 1.06vw, 1.06rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--marinho);
}

.hero__social-info a.arroba {
  color: var(--vermelho-vivo);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  text-decoration: none;
  text-transform: uppercase;
}

.hero__social-info a.arroba:hover { text-decoration: underline; text-underline-offset: 3px; }

.hero__redes { display: flex; gap: 10px; margin-top: 2px; }

.hero__redes a {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease-out;
}

.hero__redes a:hover { transform: translateY(-2px); }
.hero__redes svg { width: 22px; height: 22px; }

.rede--ig { background: #D62976; }
.rede--fb { background: #1877F2; }
.rede--x { background: #0F0F0F; }
.rede--yt { background: #FF0000; }

.hero__social > img {
  width: clamp(110px, 8.5vw, 132px);
  height: clamp(110px, 8.5vw, 132px);
  border-radius: 12px;
}

/* ---------- Barra de selos: pill creme colada no rodapé do hero,
   ACIMA da foto — os três textos ficam sempre 100% legíveis ---------- */
.hero__selos {
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 3vh;
  z-index: 2;
}

.hero__selos-inner {
  background: var(--creme);
  border-radius: 999px;
  padding: 15px var(--sp-8);
  box-shadow: 0 12px 28px -14px rgba(80, 6, 9, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px clamp(24px, 3.5vw, 56px);
  font-size: clamp(.95rem, 1.1vw, 1.12rem);
  font-weight: 600;
  color: var(--marinho);
  line-height: 1.35;
  text-align: center;
}

.hero__selos-inner .sep,
.faixa13 .estrela {
  display: inline-block;
  width: .85em;
  height: .85em;
  flex: 0 0 .85em;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 93%, 50% 72%, 21% 93%, 32% 57%, 2% 35%, 39% 35%);
}
.hero__selos-inner .sep { color: var(--vermelho-vivo); }

/* z-index acima do .hero__inner (1) e das marcas d'água: a faixa é uma barra
   sólida — deve cortar a estrela e os pés da foto, nunca ser invadida. */
faixa-13 { display: block; }

.faixa13 {
  position: relative;
  z-index: 2;
  background: var(--azul-faixa);
  color: var(--branco);
  overflow: hidden;
  padding: 12px 0 16px;
}

/* 6 grupos idênticos; -50% desloca 3 grupos e cai em ponto idêntico do padrão.
   108s = mesma velocidade dos antigos 36s por grupo. */
.faixa13__trilho {
  display: flex;
  width: max-content;
  animation: faixa-desliza 108s linear infinite;
}

.faixa13__grupo {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  font-family: var(--font-redonda);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.1;
  white-space: nowrap;
}

.faixa13 .estrela { width: .7em; height: .7em; flex-basis: .7em; color: var(--vermelho-vivo); }
.faixa13 .num { color: var(--amarelo); }
.faixa13 .e13 { display: inline-flex; align-items: baseline; gap: .24em; }
.faixa13 .e13 em { color: var(--amarelo); }
.faixa13 em {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 700;
  color: var(--amarelo);
  font-size: 1.15em;
}

@keyframes faixa-desliza {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .faixa13__trilho { animation: none; justify-content: center; width: 100%; }
  .faixa13__grupo + .faixa13__grupo { display: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Seções ---------- */
.section { padding: 88px 0; }

.section--cinza { background: var(--cinza-claro); }
.section--creme { background: var(--creme); }
.section--vermelha { background: var(--vermelho-secao); color: var(--branco); }
.section--azul { background: var(--azul-escuro); color: var(--branco); }
.section--verde { background: linear-gradient(170deg, var(--verde), #8FBC2E); }

.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  text-transform: uppercase;
  line-height: 1.02;
  margin-bottom: 14px;
  text-wrap: balance;
}

.section__title em {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.1em;
  color: var(--vermelho);
}

.section--vermelha .section__title em,
.section--azul .section__title em { color: var(--amarelo); }

.section__lead {
  font-size: 1.15rem;
  max-width: 62ch;
  margin-bottom: 48px;
}

.section--vermelha .section__lead { color: #FFE3E3; }
.section--azul .section__lead { color: #D9E4FF; }

/* ---------- Fotos com adesivo da identidade ---------- */
.foto-adesivo { position: relative; }

.foto-adesivo img:first-child {
  border-radius: 16px;
  box-shadow: var(--sombra-suave);
}

.foto-adesivo .adesivo {
  position: absolute;
  width: clamp(90px, 12vw, 150px);
  filter: drop-shadow(0 6px 12px rgba(26, 26, 26, .25));
  pointer-events: none;
}

.adesivo--alto-dir { top: -36px; right: -30px; transform: rotate(12deg); }
.adesivo--baixo-esq { bottom: -30px; left: -34px; transform: rotate(-8deg); }
.adesivo--baixo-dir { bottom: -30px; right: -26px; transform: rotate(8deg); }
.adesivo--seta { top: -14px; right: -56px; transform: scaleX(-1) rotate(-18deg); width: clamp(110px, 13vw, 160px); }

/* ---------- Biografia ---------- */
.bio {
  display: grid;
  grid-template-columns: 44% 49%;
  gap: 7%;
  align-items: center;
}

/* painel amarelo atrás da foto, deslocado 24px pra esquerda e pra baixo */
.bio__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(-24px, 24px);
  background: var(--amarelo);
  border-radius: 16px;
  z-index: 0;
}

/* proporção mais larga + cover: mostra o rosto e a mensagem da camiseta
   sem alongar a foto vertical de estúdio. */
.bio__picture {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1.12;
  max-height: 820px;
  border-radius: 16px;
  box-shadow: none;
}

.bio__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

.bio__foto .adesivo { z-index: 2; }

.bio__texto { max-width: 880px; }

.bio__texto p {
  margin-bottom: 18px;
  font-size: 19px;
  line-height: 1.65;
}

/* dois níveis de classe para vencer .bio__texto p, que é mais específico
   que .bio__assinatura sozinho e estava impondo os 19px do corpo de texto */
.bio__texto .bio__assinatura {
  font-family: var(--font-script);
  font-size: 2.6rem;
  line-height: 1.2;
  color: var(--vermelho);
  margin-top: 26px;
  margin-bottom: 0;
  transform: rotate(-2deg);
  transform-origin: left center;
}

/* ---------- 5 motivos (grid 3x2, sem foto e sem cards) ---------- */
.motivos__cabecalho { margin-bottom: 56px; }
.motivos__cabecalho .section__lead { max-width: 520px; margin-bottom: 0; }

.motivos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 48px;
}

/* célula sem caixa: só a régua amarela no topo separa; o fundo é o vermelho
   da própria seção */
.motivo {
  border-top: 3px solid var(--amarelo);
  padding-top: 16px;
}

/* numeral solto, sem chip */
.motivo__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--amarelo);
  margin-bottom: 10px;
}

.motivo h3 {
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--branco);
  margin-bottom: 8px;
  text-wrap: balance;
}

.motivo p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}

/* célula 6: CTA amarelo, a célula inteira é o link */
.motivo-cta {
  background: var(--amarelo);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}

.motivo-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -14px rgba(26, 26, 26, .45);
}

.motivo-cta strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--amarelo-escuro);
}

.motivo-cta small {
  font-size: 15px;
  line-height: 1.45;
  color: var(--amarelo-medio);
}

/* ---------- Bandeiras / propostas ---------- */
/* mesmo ritmo 3×2 e mesmos respiros da grade dos 5 motivos */
.bandeiras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 48px;
}

.bandeira {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.bandeira__icone {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--branco);
}

.bandeira__icone svg { width: 28px; height: 28px; }

.bandeira__icone--vermelho { background: var(--vermelho); }
.bandeira__icone--azul { background: var(--azul); }
.bandeira__icone--verde { background: var(--verde); color: var(--preto); }
.bandeira__icone--amarelo { background: var(--amarelo); color: var(--preto); }
.bandeira__icone--azul-escuro { background: var(--azul-escuro); }

.bandeira h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 4px 0 8px;
  text-wrap: balance;
}

.bandeira p {
  color: #4A4840;
  font-size: 16px;
  line-height: 1.6;
  max-width: 46ch;
}

.propostas__cta { margin-top: 52px; }

/* ---------- Coragem contra o bolsonarismo ---------- */
.coragem__grid {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}

.coragem__media {
  position: relative;
  padding: 0 0 12px 12px;
}

.coragem__media::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius: 16px;
  background: var(--amarelo);
  content: "";
}

.coragem__media picture { position: relative; display: block; }

.coragem__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  object-fit: cover;
  object-position: center 20%;
}

.coragem__star {
  position: absolute;
  top: -18px;
  right: -10px;
  z-index: 2;
  width: 56px;
  height: 56px;
  fill: var(--amarelo);
}

.coragem__texto .section__title { max-width: 16ch; }

.coragem__texto p {
  max-width: 56ch;
  margin-top: 24px;
  color: var(--branco);
  font-size: 1.125rem;
  line-height: 1.7;
}

.coragem__texto strong { color: var(--amarelo); }

/* ---------- Guarulhos: verde folhagem, texto e encontro com Lula ---------- */
.section--gru {
  position: relative;
  min-height: clamp(640px, 58.5vw, 840px);
  padding: 90px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #256B2B;
}

/* na página gru/ a seção abre a página por baixo do header fixo: mais
   respiro no topo, figura um pouco menor e coluna de texto centrada na
   vertical, com título em escala de cartaz pra preencher o quadro */
.header + .section--gru {
  padding-top: calc(clamp(80px, 6.6vw, 104px) + 40px);
  padding-bottom: 70px;
}

.header + .section--gru .gru-bloco {
  min-height: min(56vw, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header + .section--gru .section__title {
  font-size: clamp(2.6rem, 6vw, 6.5rem);
  margin-bottom: 26px;
}

/* mesma sangria do hero: texto começa em 5% da borda */
.gru-bloco {
  position: relative;
  z-index: 2;
  padding-left: 5%;
}

.gru-bloco__texto { max-width: 46%; }

.gru-sobretitulo {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: var(--amarelo);
  margin-bottom: 10px;
}

/* creme, condensada, dimensionada pra preencher a largura da coluna */
.section--gru .section__title {
  color: var(--creme);
  font-size: clamp(2.3rem, 4.42vw, 5rem);
}

.section--gru .section__title span { color: var(--amarelo); }

/* botão amarelo da página gru/ */
.section--gru .gru-cta {
  margin-top: 4px;
  padding: 16px 32px;
  border-radius: 10px;
  background: var(--amarelo);
  color: var(--amarelo-escuro);
}

.section--gru .gru-cta:hover { background: #EDBB00; }

.gru-encontro {
  position: absolute;
  top: 72px;
  right: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  border-radius: 18px 0 0 0;
}

.gru-encontro img {
  height: 100%;
  width: 150%;
  max-width: none;
  object-fit: cover;
  object-position: left top;
}

/* ---------- Cadastro (2 colunas, foto sangrando à direita) ---------- */
.cadastro-sec { overflow: hidden; }

.cadastro {
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: stretch;
}

/* a altura da seção é ditada por esta coluna: 80px acima do sobretítulo
   e 80px abaixo do cartão; a foto estica para acompanhar */
.cadastro__col { padding: 80px 4vw 80px 5vw; }

.cadastro__sobretitulo {
  color: var(--amarelo);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .18em;
  margin-bottom: 12px;
}

.cadastro__col .section__lead { max-width: 420px; margin-bottom: 0; }

/* foto sangra: preenche a coluna da borda superior à inferior e até a borda
   direita da janela, sem raio nem sombra. A imagem é absoluta para NÃO entrar
   na conta da altura da linha — quem dita a altura é a coluna da esquerda. */
.cadastro__foto { position: relative; }

.cadastro__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* enviesado pro topo: em telas largas a coluna fica mais larga que alta
     e o "center" cortava a cabeça */
  object-position: 50% 12%;
  display: block;
}

/* ---------- Cartão do formulário ---------- */
.cadastro__cartao {
  margin-top: 28px;
  width: 100%;
  max-width: 680px;
  background: var(--creme);
  border-radius: 18px;
  padding: 40px;
}

/* o cartão é claro: o anel de foco amarelo da seção azul não serve aqui */
.cadastro__cartao :focus-visible { outline-color: var(--azul-escuro); }

.form { display: flex; flex-direction: column; gap: 20px; }

/* NOME sozinho na 1ª linha; WHATSAPP e CIDADE lado a lado na 2ª */
.form__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.form label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--creme-escuro);
  margin-bottom: 6px;
}

.form input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--bege-linha);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  background: var(--branco);
  color: var(--preto);
  caret-color: var(--vermelho);
}

.form input::placeholder { color: #948A72; }

.form__acao { display: flex; flex-direction: column; gap: 12px; }

.form__botao {
  width: 100%;
  height: 58px;
  border: 0;
  border-radius: 10px;
  background: var(--amarelo);
  color: var(--amarelo-escuro);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .15s ease-out;
}

.form__botao:hover { filter: brightness(1.06); }

.form__nota { font-size: 13px; line-height: 1.45; color: var(--bege-escuro); }

.form__consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--creme-escuro);
  font-size: 13px;
  line-height: 1.45;
}

.form__consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--azul-escuro);
  cursor: pointer;
}

.form__consent label {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
  line-height: inherit;
  text-transform: none;
}

.form__consent a,
.footer__legal a {
  color: var(--azul-escuro);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__consent label > span { display: block; margin-top: 4px; }

.form__msg { font-weight: 700; display: none; font-size: 14px; }
.form__msg.ok { display: block; color: #1E6B2E; }
.form__msg.erro { display: block; color: #A31419; }

/* lista de sugestões do campo cidade ("Cidade - UF") */
.form__campo { position: relative; }

.cidade-lista {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 10;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--branco);
  border-radius: 12px;
  box-shadow: 0 18px 38px -12px rgba(26, 26, 26, .35);
  max-height: 264px;
  overflow-y: auto;
}

.cidade-lista.aberta { display: block; }

.cidade-lista li {
  padding: 11px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  color: var(--preto);
}

.cidade-lista li.ativo,
.cidade-lista li:hover { background: var(--cinza-claro); }

/* ---------- Botões ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  text-align: center;
  padding: 14px 30px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  transition: transform .15s ease-out, box-shadow .15s ease-out, background .15s ease-out;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(26, 26, 26, .4); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--vermelho { background: var(--vermelho); color: var(--branco); }
.btn--azul { background: var(--azul-escuro); color: var(--branco); }
.btn--amarelo { background: var(--amarelo); color: var(--preto); }
.btn--contorno {
  background: var(--branco);
  color: var(--marinho);
  border: 2px solid var(--marinho);
}

.bio__cta { margin-top: 40px; }

/* ---------- Kit ---------- */

/* chamada pro gerador "Faça sua foto", acima dos cards do kit */
.chamada-foto {
  margin: 4px 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 36px;
  background: var(--amarelo);
  border-radius: 18px;
}

.chamada-foto__texto h3 {
  margin: 0 0 8px;
  padding-top: .12em; /* respiro pros acentos do display */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--preto);
}

.chamada-foto__texto h3 em {
  font-family: var(--font-script);
  font-style: normal;
  font-size: 1.1em;
  text-transform: none;
  color: var(--vermelho);
}

.chamada-foto__texto p {
  margin: 0;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--amarelo-escuro);
}

.chamada-foto__botao { flex-shrink: 0; }

@media (max-width: 700px) {
  .chamada-foto {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 24px 20px;
  }
  .chamada-foto__texto p { max-width: none; }
}

.kit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.kit-card {
  background: var(--branco);
  border-radius: 16px;
  padding: 28px 24px;
  text-decoration: none;
  color: var(--preto);
  box-shadow: 0 10px 30px -14px rgba(26, 26, 26, .25);
  transition: transform .15s ease-out, box-shadow .15s ease-out;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kit-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -14px rgba(26, 26, 26, .35); }

.kit-card__icone {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cinza-claro);
  color: var(--vermelho);
  margin-bottom: 6px;
}

.kit-card:nth-child(2) .kit-card__icone { color: var(--azul); }
.kit-card:nth-child(3) .kit-card__icone { color: var(--azul-escuro); }
.kit-card:nth-child(4) .kit-card__icone { color: #7A9A21; }

.kit-card__icone svg { width: 26px; height: 26px; }

.kit-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.25rem;
}

.kit-card p { font-size: .95rem; color: #4A4840; }

.kit-card__acao {
  margin-top: auto;
  padding-top: 10px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--vermelho);
}
.kit-card__acao::after {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .35em;
  background: currentColor;
  clip-path: polygon(0 44%, 68% 44%, 44% 20%, 56% 8%, 100% 50%, 56% 92%, 44% 80%, 68% 56%, 0 56%);
  content: "";
}

.kit-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Galeria de logos (página kit) */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.logo-grid a {
  border-radius: 16px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cinza-claro);
  min-height: 170px;
  transition: transform .15s ease-out;
}

.logo-grid a:hover { transform: translateY(-3px); }
.logo-grid a.escuro { background: var(--preto); }
.logo-grid img { max-height: 120px; width: auto; }

/* ---------- Footer ---------- */
.footer {
  background: var(--preto);
  color: var(--branco);
  padding: 56px 0 36px;
}

.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.footer__logo { display: block; max-width: 250px; height: auto; }

.footer__social a {
  color: var(--amarelo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  font-size: 1.05rem;
}

.footer__social a:hover { color: var(--branco); }

.footer__legal {
  font-size: .85rem;
  color: #CFC9BD;
  max-width: 640px;
  line-height: 1.7;
}

.footer__legal a { color: var(--amarelo); }

/* ---------- Responsivo ---------- */
/* cadastro: 1 coluna com a foto no topo */
@media (max-width: 900px) {
  .cadastro { grid-template-columns: minmax(0, 1fr); }
  .cadastro__foto { order: -1; height: 320px; }
  .cadastro__col { padding: 56px 24px; }
  .cadastro__cartao { max-width: none; }
}

@media (max-width: 600px) {
  .form__linha { grid-template-columns: minmax(0, 1fr); }
}

/* 5 motivos: 3 colunas, depois 2 e 1. Com 2 colunas o CTA cai naturalmente como
   6ª célula da 3ª linha, ao lado do motivo 5 — sem buraco no grid. */
@media (max-width: 1100px) {
  .motivos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bandeiras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .motivos { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .motivos__cabecalho { margin-bottom: 44px; }
  .bandeiras { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}


/* abaixo de 1024px: o hero vira cartaz vertical — lockup, foto do candidato,
   ação principal, cards, redes e selos. display:contents achata os wrappers
   pra reordenar tudo num único fluxo de coluna. */
@media (max-width: 1024px) {
  .hero,
  .gru-hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* centro quente atrás do candidato, que agora fica no meio */
    background: radial-gradient(130% 82% at 50% 40%, #FF6A5C 0%, #F5423C 34%, #E31E25 64%, #C81219 88%, #A50D12 100%);
  }

  .hero__inner,
  .hero__conteudo,
  .hero__acoes { display: contents; }

  /* marcas d'água fora: o cartaz mobile vive de lockup + figura */
  .hero::before,
  .hero::after,
  .gru-hero::before,
  .gru-hero::after { display: none; }

  .hero__lockup {
    order: 1;
    margin: calc(clamp(80px, 6.6vw, 104px) + 30px) 4vw 0 5vw;
    min-width: 0;
  }
  .lk-eyebrow { width: min(58%, 300px); }
  .lk-linha { gap: 2.5%; }
  .lk-alencar { width: 62%; }
  .lk-1358 { width: 33%; }
  .lk-tagline { width: 82%; }

  /* A figura domina o quadro e MERGULHA atrás da faixa vermelha do CTA:
     a linha de corte da calça some atrás do bloco sólido, como a barra
     de selos faz no desktop. Nada de recorte terminando no ar. */
  .hero__foto {
    order: 2;
    display: block;
    position: relative;
    top: auto;
    right: auto;
    z-index: 1;
    width: 100%;
    height: min(122vw, 540px);
    margin: 10px 0 -60px;
  }

  .hero__foto img {
    position: absolute;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
  }

  .hero__carimbo {
    top: 31%;
    right: 24px;
    width: clamp(108px, 28vw, 128px);
    font-size: clamp(.96rem, 3.6vw, 1.22rem);
  }

  /* CTA vira faixa full-bleed: âncora sólida do cartaz */
  .btn-hero {
    order: 3;
    position: relative;
    z-index: 2;
    margin: 0;
    max-width: none;
    border-radius: 0;
    justify-content: center;
    padding: 20px 24px;
  }
  .btn-hero:hover { transform: none; box-shadow: none; }

  .hero__cards {
    order: 4;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 26px 5vw 34px;
  }

  /* redes/QR e selos ficam só no desktop; o cartaz mobile termina nos cards */
  .hero__social,
  .hero__selos { display: none; }
}

@media (max-width: 900px) {
  .bio { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .container--largo { padding: 0 24px; }
  .bio__foto::before { transform: translate(-14px, 14px); }
  .bio__texto { max-width: none; }
  .coragem__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .coragem__media { width: min(100%, 520px); }
  .coragem__texto .section__title { max-width: 18ch; }
  /* Guarulhos: texto primeiro; a foto fecha a seção sem mostrar o terceiro
     participante do arquivo original. */
  .section--gru { display: block; padding: 64px 0 0; }
  .header + .section--gru { padding-top: calc(clamp(80px, 6.6vw, 104px) + 40px); }
  .gru-bloco { padding: 0 24px; }
  .gru-bloco__texto { max-width: none; }
  .gru-encontro {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: min(112vw, 560px);
    margin-top: 36px;
    border-radius: 18px 18px 0 0;
  }
  .kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adesivo--alto-dir { right: -10px; }
  .adesivo--baixo-esq { left: -12px; }
  .adesivo--baixo-dir { right: -8px; }
}

/* com 6 itens de nome longo, o nav em linha só cabe com folga acima de
   ~1260px; abaixo disso o último item encosta na borda — vira hambúrguer */
@media (max-width: 1260px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--branco);
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 16px 30px -14px rgba(80, 56, 0, .45);
  }
  .nav.aberto { display: flex; }
  .nav a { padding: 12px; text-align: center; }
}

@media (max-width: 640px) {
  .section { padding: 60px 0; }
  .kit-grid { grid-template-columns: minmax(0, 1fr); }
  .logo-grid { grid-template-columns: minmax(0, 1fr); }

  /* os 4 cards viram trilho deslizável: um card inteiro e a espiada
     do próximo convidam o dedo, sem empilhar 700px de cartão */
  .hero__cards {
    display: flex;
    margin: 22px 0 30px;
    padding: 0 5vw 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 5vw;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hero__cards::-webkit-scrollbar { display: none; }

  .hero-card {
    flex: 0 0 78%;
    max-width: 330px;
    scroll-snap-align: start;
    flex-direction: row;
    /* conteúdo centrado na vertical: os cards do trilho têm a mesma
       altura e o texto curto deixava um buraco embaixo */
    align-items: center;
    text-align: left;
    padding: 16px 18px;
    gap: 14px;
  }
  .hero-card__icone { flex-shrink: 0; width: 46px; height: 46px; }
  .hero-card__texto { align-items: flex-start; text-align: left; gap: 4px; }
}