/* ============================================================
   Dulce Rita — identidade oficial (docs/DULCE ID.pdf, pg 6)
   Paleta medida do próprio PDF: navy #094b68, navy-claro #0a6089
   (padrão), mint #5ac2ad, lime #add136, off-white #f0f4f2.
   Fontes oficiais: Geometos (títulos/destaques) + Avenir (corpo),
   servidas localmente de public/fonts.
   Assinatura visual: padrão de "pessoinhas" (pernas em Λ/V) com
   parallax, logotipo vetor extraído do ID, número 44400 em Gunterz.
   Mobile-first.
   ============================================================ */

@font-face { font-family: "Geometos"; src: url("../public/fonts/geometos.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geometos Neue"; src: url("../public/fonts/geometos-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geometos Neue"; src: url("../public/fonts/geometos-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Avenir LT Std"; src: url("../public/fonts/avenir-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Avenir LT Std"; src: url("../public/fonts/avenir-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Avenir LT Std"; src: url("../public/fonts/avenir-i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Avenir LT Std"; src: url("../public/fonts/avenir-500.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }

:root {
  --navy: #094b68;
  --navy-claro: #0a6089;   /* padrão sobre navy, hovers */
  --navy-fundo: #083a52;   /* rodapé, degradês */
  --mint: #5ac2ad;
  --lime: #add136;
  --off: #f0f4f2;
  --branco: #ffffff;
  --tinta: #10333f;        /* corpo de texto sobre claro */
  --tinta-suave: #48626e;

  --fonte-display: "Geometos Neue", "Geometos", "Avenir LT Std", sans-serif;
  --fonte-corpo: "Avenir LT Std", "Avenir Next", "Avenir", "Segoe UI", sans-serif;

  --miolo: 72rem;
  --raio: 14px;
  /* header sticky fica no fluxo e empurra o hero; o hero de 100svh
     desconta isto pra fechar exatamente na dobra */
  --topo-h: 4.1rem;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--fonte-corpo);
  color: var(--tinta);
  background: var(--off);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}

.miolo {
  max-width: var(--miolo);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- tipografia ---------- */

/* Regra da identidade (confirmada pelo user): título em Geometos REGULAR;
   a BOLD (Neue Black) só na palavra destacada — peso + cor juntos fazem
   o destaque. Subtítulos e conteúdo em Avenir. */
h2 {
  font-family: "Geometos", var(--fonte-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.45rem, 4.2vw, 2.3rem);
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-wrap: balance;
}

/* palavra destacada dentro do título (BOLD Geometos + cor da marca) */
.destaque, .destaque-lime {
  font-family: "Geometos Neue", "Geometos", var(--fonte-display);
  font-weight: 900;
}
.destaque { color: var(--mint); }
.destaque-lime { color: var(--lime); }

.prosa p, .prosa-clara {
  max-width: 65ch;
  margin-bottom: 1rem;
}

.prosa-clara { color: rgba(240, 244, 242, 0.92); margin-bottom: 2rem; }

/* ---------- cabeçalho de seção (centralizado) ---------- */

.secao-cabeca {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 2.6rem;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
}

.secao-cabeca-esq {
  text-align: left;
  justify-items: start;
  margin: 0 0 1.4rem;
}

.secao-icone {
  width: 1.9rem;
  height: auto;
  color: var(--mint);
}

.secao-navy .secao-icone { color: var(--lime); }

.secao-linha {
  font-size: clamp(1.02rem, 2.6vw, 1.2rem);
  color: var(--tinta-suave);
}

/* ---------- botões ---------- */

.botao {
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 1rem;
  /* <button> não herda o line-height do body como o <a> herda: sem isto o
     botão de enviar do formulário saía 9px mais baixo que o do hero, com o
     mesmo padding. Fixar aqui iguala os dois. */
  line-height: 1.6;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.botao-lime {
  background: var(--lime);
  color: var(--navy);
  box-shadow: 0 4px 16px rgba(173, 209, 54, 0.35);
}

.botao-lime:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(173, 209, 54, 0.5); }

.botao-linha {
  border: 1px solid rgba(240, 244, 242, 0.45);
  color: var(--off);
  background: rgba(240, 244, 242, 0.07);
  /* desconta a borda do padding: em altura automática a borda soma por
     fora e este botão saía 2px maior que os de fundo cheio */
  padding: calc(0.95rem - 1px) calc(1.9rem - 1px);
}

.botao-linha:hover { background: rgba(240, 244, 242, 0.16); transform: translateY(-2px); }

/* ---------- topo (pg 6: header branco, logo navy, nav) ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--topo-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.85rem 1.25rem;
  background: color-mix(in srgb, var(--branco) 96%, transparent);
  backdrop-filter: blur(6px);
  color: var(--navy);
  box-shadow: 0 1px 0 rgba(9, 75, 104, 0.08);
}

.topo-marca { display: inline-flex; align-items: center; gap: 0.55rem; justify-self: start; }

/* coração oficial ao lado do logotipo */
.topo-coracao {
  width: 1.35rem;
  height: auto;
  color: var(--mint);
  flex: none;
  /* alinha com o olho ótico do logotipo (as letras têm respiro no viewBox) */
  margin-top: 0.1rem;
}

.logotipo {
  width: clamp(9.5rem, 30vw, 11.5rem);
  height: auto;
  display: block;
  color: var(--navy);
}

.topo-nav { display: none; align-items: center; gap: 1.5rem; }

.topo-nav a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}

.topo-nav a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--mint); }

/* mesma pílula lime dos outros CTAs, só que em corpo de nav: peso e sombra
   iguais, tamanho menor porque convive com os links do menu.
   Seletor com .topo-nav na frente de propósito: `.topo-nav a` (0,1,1) tem
   especificidade maior que `.topo-cta` (0,1,0) e vinha ganhando o
   font-weight 500, deixando este botão mais leve que os outros. */
.topo-nav .topo-cta {
  background: var(--lime);
  color: var(--navy) !important;
  font-weight: 700;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(173, 209, 54, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.topo-nav .topo-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(173, 209, 54, 0.45);
  text-decoration: none;
}

/* frase da identidade colada na borda direita (pg 6) — só telas largas */
/* A frase era quem mandava na altura do header: 4 linhas numa caixa de
   15rem davam 86px e esticavam o topo pra 89px, 20px acima do --topo-h que
   o hero usa pra fechar na dobra. Caixa mais larga + entrelinha menor =
   3 linhas curtas dentro da altura nominal. */
.topo-frase {
  display: none;
  font-family: var(--fonte-display);
  font-weight: 900;
  font-size: 0.6rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* sem a tarja mint: o texto assenta direto no branco do header. Segue
     em navy (contraste alto) e perde a sangria — sem fundo, encostar na
     borda da tela faria a frase parecer cortada. */
  color: var(--navy);
  max-width: 20rem;
  align-self: center;
  justify-self: end;
  text-align: right;
  text-wrap: balance;
}

/* ---------- hero (pg 6 do DULCE ID) ---------- */

.hero {
  position: relative;
  min-height: calc(100svh - var(--topo-h));
  display: flex;
  flex-direction: column;
  overflow: clip;
  color: var(--off);
  background:
    radial-gradient(90% 70% at 78% 30%, rgba(10, 96, 137, 0.55), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, #08425c 100%);
  padding: 2.2rem 0 0;
}

/* padrão oficial: tile SVG repetido; o JS move com o scroll (parallax).
   Nasce mais alto que o hero pra ter curso de sobra ao deslocar. */
.padrao {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20%;
  height: 75%;
  background: url("../public/assets/marca/padrao-navy.svg");
  background-size: 194px auto;
  pointer-events: none;
  will-change: transform;
  /* dissolve no topo pra não terminar em linha reta */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
}

.padrao-hero { z-index: 1; opacity: 0.6; }

/* camadas: padrão (1) → retrato (2) → conteúdo (3) */

/* Foto oficial em MEIO CORPO (pedido da campanha + pg 6): a caixa tem
   proporção fixa e a foto preenche com cover ancorado no topo — o corte
   fica na cintura, igual no mockup. */
.hero-retrato {
  order: 2;
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  min-height: min(34svh, 17rem);
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.hero-retrato img {
  width: min(88vw, 24rem);
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;   /* folga do topo ja vem na propria imagem */
  /* sem drop-shadow: a sombra de 40px em volta da silhueta escurecia o
     padrão atrás e lia como um "quadrado meio transparente" na foto */
  filter: contrast(1.04) saturate(1.02);
  /* base dissolve no padrão em vez de cortar reto — faixa curta (3%), só
     o suficiente pra matar a linha reta do corte */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 3%);
  mask-image: linear-gradient(to top, transparent 0%, #000 3%);
}

.sem-foto { display: none; }

.hero-conteudo {
  order: 1;
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  gap: 2rem;
}

/* citação da identidade (esquerda no desktop) */
.hero-citacao p {
  font-size: clamp(1.15rem, 3.6vw, 1.55rem);
  line-height: 1.4;
  max-width: 21ch;
  margin-bottom: 1.4rem;
  color: rgba(240, 244, 242, 0.94);
  text-wrap: pretty;
}

.hero-citacao strong { color: var(--mint); font-weight: 700; }

/* align-items center, não o stretch padrão do flex: esticados, os dois
   botões do hero ficavam 2px mais altos que o de enviar do formulário */
.hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }

/* lockup oficial: // DEPUTADA ESTADUAL + DULCE RITΛ + 44400 + pessoinhas */
.hero-lockup {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
}

.lockup-cargo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Geometos", var(--fonte-display);
  font-weight: 400;
  font-size: clamp(0.78rem, 2vw, 0.95rem);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--branco);
}

.lockup-barras { width: 0.85em; height: auto; color: var(--lime); flex: none; }

.lockup-nome {
  width: min(78vw, 26rem);
  height: auto;
  color: var(--off);
}

.lockup-voto {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.9rem;
}

.lockup-numero {
  width: min(56vw, 19rem);
  height: auto;
  color: var(--branco);
  filter: drop-shadow(0 0 30px rgba(173, 209, 54, 0.25));
}

.lockup-coracao {
  width: clamp(2.1rem, 6vw, 2.9rem);
  height: auto;
  color: var(--mint);
  /* respira junto com o número, sem transform (não briga com reduced-motion) */
  animation: coracao-pulsa 2.4s ease-in-out infinite;
}

@keyframes coracao-pulsa {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* seta de rolagem (pg 6): círculo mint com seta navy */
.hero-seta {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 6vw, 4rem);
  bottom: clamp(1rem, 5svh, 2.6rem);
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--mint);
  color: var(--navy);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(4, 24, 35, 0.4);
  animation: seta-flutua 2.6s ease-in-out infinite;
}

.hero-seta svg { width: 1.3rem; height: 1.3rem; }

.hero-seta:hover { background: var(--lime); }

@keyframes seta-flutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- seções ---------- */

.secao {
  position: relative;
  padding: 4rem 0 4.5rem;
  overflow: clip;
}

/* navy um tom acima do oficial: o #094b68 puro deixava o texto do corpo
   pesado demais pra leitura corrida. O navy fechado fica no hero e no
   rodapé (blocos curtos); as seções de leitura usam esta faixa clara. */
.secao-navy {
  color: var(--off);
  background: linear-gradient(180deg, #0b5c7e 0%, #0a5271 100%);
}

.secao-navy h2 { color: var(--branco); }

/* padrão discreto nas seções navy, também com parallax */
.padrao-secao {
  bottom: -25%;
  height: 70%;
  opacity: 0.35;
}

.secao-navy .miolo { position: relative; z-index: 1; }

.bio-grade { display: grid; gap: 2.5rem; }

.prosa-abre {
  font-size: clamp(1.12rem, 3vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
}

/* ---------- trajetória ---------- */

.trajetoria {
  list-style: none;
  margin-top: 2.5rem;
  display: grid;
  gap: 1.6rem;
}

.trajetoria li {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 1rem;
  align-items: start;
}

.traj-ano {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy);
  background: color-mix(in srgb, var(--mint) 18%, var(--branco));
  border: 1px solid color-mix(in srgb, var(--mint) 45%, transparent);
  border-radius: 999px;
  text-align: center;
  padding: 0.25rem 0.4rem;
  margin-top: 0.15rem;
}

.trajetoria h3 { font-size: 1.05rem; margin-bottom: 0.15rem; color: var(--navy); }

.trajetoria p { color: var(--tinta-suave); font-size: 0.95rem; }

/* ---------- propostas ---------- */

.eixos { display: grid; gap: 2.4rem; }

/* subtítulo em Avenir (regra do user: Geometos só pra destaque) */
/* subtítulo dos eixos: centralizado sobre a coluna, com um filete lime
   embaixo pra dar peso sem sair da Avenir (Geometos é só destaque) */
.eixo-titulo {
  font-family: var(--fonte-corpo);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.6vw, 1.22rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.28;
  color: var(--lime);
  text-align: center;
  text-wrap: balance;
  margin-bottom: 1rem;
  /* o filete acompanha o texto (não a coluna inteira): inline-block dentro
     de um bloco centralizado deixaria o ::after do tamanho da caixa toda */
  display: grid;
  justify-items: center;
  /* no desktop o subgrid estica esta caixa até a altura do maior título
     (2 linhas); ancorar o conteúdo no fim deixa os três filetes na mesma
     linha e à mesma distância do cartão */
  align-content: end;
  gap: 0.6rem;
}

.eixo-titulo::after {
  content: "";
  width: 2.4rem;
  height: 3px;
  border-radius: 999px;
  background: var(--lime);
}

.cartoes { display: grid; gap: 1rem; }

.cartao {
  background: rgba(240, 244, 242, 0.07);
  border: 1px solid rgba(240, 244, 242, 0.16);
  border-radius: var(--raio);
  padding: 1.5rem 1.6rem;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cartao:hover {
  transform: translateY(-4px);
  border-color: rgba(90, 194, 173, 0.65);
  background: rgba(240, 244, 242, 0.11);
}

.cartao h4 {
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  color: var(--branco);
}

.cartao p { font-size: 0.95rem; color: rgba(240, 244, 242, 0.85); }

/* prioridades com a pessoinha oficial como marcador (pedido: trocar o "-") */
.prioridades {
  list-style: none;
  margin-top: 1.1rem;
  display: grid;
  gap: 0.65rem;
}

.prioridades li {
  position: relative;
  padding-left: 1.55rem;
  font-size: 0.93rem;
  color: rgba(240, 244, 242, 0.92);
  line-height: 1.45;
}

.prioridades li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 0.95em;
  height: 1.1em;
  background: var(--mint);
  -webkit-mask: url("../public/assets/marca/pessoinha.svg") no-repeat center / contain;
  mask: url("../public/assets/marca/pessoinha.svg") no-repeat center / contain;
}

/* citação dela dentro da bio */
.citacao {
  margin-top: 1.8rem;
  padding: 1.3rem 1.4rem;
  background: color-mix(in srgb, var(--mint) 12%, var(--branco));
  border-radius: var(--raio);
}

.citacao p {
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--navy);
  margin-bottom: 0.6rem;
}

.citacao footer {
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tinta-suave);
}

/* ---------- depoimentos: cartazes subindo e empilhando ----------
   Mesmo padrão do site do Tozi: cada card é sticky e os anteriores
   encolhem conforme o próximo cobre (scroll-driven). 3 camadas:
   1. sem view-timeline  -> só o empilhado sticky (todo browser)
   2. com view-timeline  -> + scale dirigido pelo scroll
   3. reduced-motion     -> sem scale (sticky fica: é layout, não animação) */

.depoimentos {
  --numcards: 7;
  --stack-top: calc(var(--topo-h) + 1.1rem);
  --stack-step: 12px;   /* degrau visível entre cards empilhados */
  max-width: 50rem;
  margin: 0 auto 3rem;
  view-timeline-name: --depos-rolando;
}

.depo {
  --index0: calc(var(--index) - 1);
  --reverse-index: calc(var(--numcards) - var(--index0));
  position: sticky;
  top: calc(var(--stack-top) + var(--index0) * var(--stack-step));
  margin-bottom: 1.2rem;
  background: var(--branco);
  border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent);
  border-radius: var(--raio);
  padding: 1.5rem 1.6rem;
  box-shadow: 0 12px 32px rgba(9, 75, 104, 0.12);
  transform-origin: 50% 0;
}

.depo:nth-child(1) { --index: 1; }
.depo:nth-child(2) { --index: 2; }
.depo:nth-child(3) { --index: 3; }
.depo:nth-child(4) { --index: 4; }
.depo:nth-child(5) { --index: 5; }
.depo:nth-child(6) { --index: 6; }
.depo:nth-child(7) { --index: 7; }
.depo:last-child { margin-bottom: 0; }

/* scale só onde há timeline E o usuário aceita motion; fora do @supports o
   browser rodaria a animação com 0s e congelaria os cards encolhidos */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .depo {
      --faixa-ini: calc(var(--index0) / var(--numcards) * 100%);
      --faixa-fim: calc(var(--index) / var(--numcards) * 100%);
      animation: linear depo-encolhe forwards;
      animation-timeline: --depos-rolando;
      animation-range: exit-crossing var(--faixa-ini) exit-crossing var(--faixa-fim);
    }
    /* fator 0.03: com 7 cards, 0.05 encolheria o 1º a 0.70 */
    @keyframes depo-encolhe {
      to { transform: scale(calc(1.03 - (0.03 * var(--reverse-index)))); }
    }
  }
}

.depo p {
  font-size: 1.02rem;
  line-height: 1.55;
  margin-bottom: 0.9rem;
  color: var(--tinta);
}

.depo footer { font-size: 0.88rem; color: var(--tinta-suave); }

.depo footer strong { color: var(--navy); }

/* ---------- depoimentos em vídeo ---------- */

.video-depoimentos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin: 2rem 0;
}

.video-item {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--raio);
  overflow: hidden;
  border: none;
  padding: 0.8rem;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  background: var(--navy-fundo);   /* aparece durante o carregamento do poster */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s ease;
}

.video-item::after {
  content: "";
  position: absolute;
  inset: 0;
  /* scrim fundo o bastante pra legenda de 2 linhas sobre poster claro */
  background: linear-gradient(to top, rgba(4, 24, 35, 0.9) 0%, rgba(4, 24, 35, 0.62) 26%, rgba(4, 24, 35, 0.2) 52%, transparent 72%);
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 999px;
  background: rgba(4, 24, 35, 0.55);
  border: 1.5px solid rgba(240, 244, 242, 0.85);
  transition: transform 0.2s ease, background 0.2s ease;
}

.video-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 56%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.9rem;
  border-color: transparent transparent transparent var(--off);
}

.video-item:hover .video-play,
.video-item:focus-visible .video-play { transform: translate(-50%, -50%) scale(1.1); background: var(--mint); }
.video-item:hover img { transform: scale(1.04); }

.video-item:hover { transform: scale(1.02); box-shadow: 0 12px 30px rgba(9, 75, 104, 0.28); }
.video-item:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

.video-legenda {
  position: relative;
  z-index: 1;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--branco);
  text-shadow: 0 1px 6px rgba(4, 24, 35, 0.6);
  text-align: left;
}

.video-lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.video-lightbox::backdrop { background: rgba(4, 24, 35, 0.92); }

.video-lightbox[open] { display: flex; align-items: center; justify-content: center; }

.video-lightbox figure { max-width: min(90vw, 32rem); max-height: 88vh; }

.video-lightbox-player {
  display: block;
  max-width: min(90vw, 32rem);
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--raio);
  background: #000;
}

@media (min-width: 640px) {
  .video-depoimentos { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- galeria ---------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}

.galeria-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0.8rem;
  cursor: zoom-in;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.galeria-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;   /* prioriza rostos ao cortar retratos */
  transition: transform 0.4s ease;
}

/* véu na base: legenda clara legível sobre qualquer foto */
.galeria-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 24, 35, 0.82) 0%, rgba(4, 24, 35, 0.28) 28%, transparent 52%);
  transition: opacity 0.3s ease;
}

.galeria-item figcaption {
  position: relative;   /* acima do véu */
  z-index: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--branco);
  text-shadow: 0 1px 6px rgba(4, 24, 35, 0.6);
}

.galeria-item:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 30px rgba(9, 75, 104, 0.28);
}

.galeria-item:hover img { transform: scale(1.04); }

.galeria-item:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* ---------- lightbox da galeria ---------- */

.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.lightbox::backdrop { background: rgba(4, 24, 35, 0.92); }

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox figure { max-width: min(90vw, 60rem); max-height: 82vh; }

.lightbox-img {
  display: block;
  max-width: min(90vw, 60rem);
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: var(--raio);
  object-fit: contain;
}

.lightbox-legenda {
  margin-top: 0.7rem;
  text-align: center;
  color: var(--off);
  font-size: 0.92rem;
}

.lightbox-fechar,
.lightbox-nav {
  position: fixed;
  background: rgba(240, 244, 242, 0.14);
  color: var(--off);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.lightbox-fechar:hover,
.lightbox-nav:hover { background: rgba(240, 244, 242, 0.26); }

.lightbox-fechar {
  top: 1.2rem;
  right: 1.2rem;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.1rem;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 1.8rem;
  line-height: 1;
}

.lightbox-anterior { left: 1rem; }
.lightbox-proxima { right: 1rem; }

@media (max-width: 640px) {
  .lightbox-nav { width: 2.6rem; height: 2.6rem; font-size: 1.5rem; }
  .lightbox-anterior { left: 0.4rem; }
  .lightbox-proxima { right: 0.4rem; }
}

/* ---------- formulário ---------- */

/* convite + formulário centralizados como um par: as duas colunas dividem
   o miolo pelo próprio conteúdo (max-content) em vez de esticar até as
   bordas, senão sobra um rio de vazio entre elas no desktop */
/* seção mais compacta que as outras: é um bloco de ação curto (convite +
   4 campos), o respiro padrão de 4rem/4.5rem deixava vazio dos dois lados */
#participar { padding: 2.6rem 0 3rem; }

/* coluna única centralizada: convite e formulário empilhados no eixo do
   miolo, como as outras seções. Antes eram duas colunas lado a lado. */
/* ==================== materiais: card da Colinha Digital ====================
   Quadro navy sobre a seção clara; número em Geometos itálico como no
   santinho. O card inteiro é o link. */
.material-card {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-fundo) 100%);
  color: var(--off);
  border-radius: 18px; padding: clamp(1.75rem, 4vw, 3rem);
  text-decoration: none;
  transition: transform .18s ease-out, box-shadow .25s ease-out;
}
.material-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -20px rgba(8, 58, 82, .6); }
.material-card h3 { font-family: var(--fonte-display); font-size: 1.5rem; margin: 0 0 .6rem; color: var(--branco); }
.material-card p { color: var(--off); max-width: 46ch; margin: 0 0 1.4rem; }
.material-ballot { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; margin: 0; }
.material-ballot-label {
  font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  font-size: .72rem; color: var(--mint);
}
.material-ballot-num {
  font-family: var(--fonte-display); font-style: italic; font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; color: var(--branco);
  letter-spacing: .04em;
}
@media (min-width: 720px) {
  .material-card { grid-template-columns: 1.2fr auto; }
  .material-ballot { align-items: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .material-card { transition: none; } }

/* PDFs da seção: capa em miniatura ao lado do texto, também no celular —
   em largura cheia a capa 9:16 ocupava uma tela inteira. */
.materiais-lista { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.material-card:has(.material-thumb) {
  grid-template-columns: 1fr auto; align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.material-card:has(.material-thumb) p { margin-bottom: 1rem; }
.material-card:has(.material-thumb) .botao { padding-inline: 1.1rem; }
.material-thumb {
  display: block; width: clamp(84px, 20vw, 150px); height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 24px -16px rgba(8, 58, 82, .75);
}

.participar-grade {
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  text-align: center;
}

.participar-convite { display: grid; justify-items: center; }

.participar-grade .prosa-clara {
  margin: 0 auto;
  max-width: 46ch;
}

.formulario {
  width: min(100%, 28rem);
  display: grid;
  gap: 1.1rem;
  margin: 0.5rem auto 0;
  /* rótulo e consentimento voltam a alinhar à esquerda DENTRO do bloco: o
     bloco é que fica centrado. Texto de formulário centralizado obriga o
     olho a reencontrar o início de cada linha a cada campo. */
  text-align: left;
}

.formulario .botao { justify-self: center; }

.form-retorno { text-align: center; }

.campo label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.campo input {
  width: 100%;
  font: inherit;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(240, 244, 242, 0.4);
  background: rgba(240, 244, 242, 0.1);
  color: var(--branco);
}

.campo input::placeholder { color: rgba(240, 244, 242, 0.55); }

.campo input:focus { outline: 3px solid var(--lime); outline-offset: 1px; border-color: transparent; }

.campo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.campo-consentimento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.82rem;
  color: rgba(240, 244, 242, 0.88);
}

.campo-consentimento input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--lime);
}

.form-retorno { font-size: 0.92rem; font-weight: 600; min-height: 1.4em; }

.form-retorno.ok { color: var(--lime); }
.form-retorno.erro { color: #ffb4c4; }

/* ---------- rodapé (3 colunas no desktop) ---------- */

.rodape {
  background: var(--navy-fundo);
  color: var(--off);
  padding: 3rem 0 6rem;   /* respiro pro CTA fixo no mobile */
}

.rodape-grade { display: grid; gap: 2.2rem; }

.logotipo-rodape { width: 10rem; color: var(--branco); margin-bottom: 0.9rem; }

.rodape-voto {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

.rodape-numero { width: 7.6rem; height: auto; color: var(--branco); }

.rodape-voto img { width: 2.4rem; height: auto; }

.rodape-slogan { color: var(--mint); font-size: 0.95rem; }

.rodape-titulo {
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mint);
  margin-bottom: 0.9rem;
}

.rodape-nav { display: grid; gap: 0.45rem; justify-items: start; }

.rodape-nav > a {
  text-decoration: none;
  font-size: 0.95rem;
  color: rgba(240, 244, 242, 0.85);
}

.rodape-nav > a:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 4px; }

.rodape-social { display: flex; gap: 0.9rem; margin-top: 1.3rem; }

.rodape-social a {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid rgba(240, 244, 242, 0.3);
  color: var(--off);
}

.rodape-social a:hover { background: rgba(240, 244, 242, 0.12); }

/* marca do partido: mesma família visual do logotipo do rodapé (off-white
   sobre navy), num corpo menor — é assinatura institucional, não marca
   principal. Opacidade leve pra não competir com o lockup da candidata. */
/* marca da federação: mesmas medidas dos sites do Tozi e do Dr. Elton
   (lockup horizontal transparente, 190px de teto e opacidade .92) */
.rodape-partido {
  display: block;
  width: min(190px, 66%);
  height: auto;
  opacity: 0.92;
  margin-bottom: 1rem;
}

.rodape-legal { font-size: 0.8rem; line-height: 1.7; color: rgba(240, 244, 242, 0.68); }

/* ---------- CTA fixo (mobile) ---------- */

.cta-fixo {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 50;
  white-space: nowrap;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.cta-fixo.escondido {
  opacity: 0;
  transform: translateX(-50%) translateY(150%);
  pointer-events: none;
}

/* ---------- scroll-driven (só browsers com suporte; fora do @supports
   um browser antigo rodaria com duração 0s e congelaria no estado final) ---------- */

@supports (animation-timeline: view()) {

  /* régua de leitura: linha mint sob o header preenchendo com o scroll.
     Scroll-linked 1:1 com o gesto do usuário — deliberadamente sem gate
     de reduced-motion (não é movimento autônomo). */
  .topo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--mint);
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: regua-leitura linear both;
    animation-timeline: scroll(root);
  }

  @keyframes regua-leitura {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* cards empilhando — SÓ MOBILE. Os 3 .eixo empilham; no desktop são
     colunas lado a lado e empilhar não se aplica. */
  @media (max-width: 759px) and (prefers-reduced-motion: no-preference) {
    .eixos {
      view-timeline: --eixos block;
    }

    .eixos > .eixo {
      position: sticky;
      /* fundo próprio: os cartões são translúcidos, sem isto o eixo
         de baixo vazaria através do de cima durante o empilhamento */
      background: linear-gradient(175deg, #0a5578, #094b68);
      border-radius: var(--raio);
      padding: 1.2rem 1.1rem;
      box-shadow: 0 -10px 30px rgba(4, 24, 35, 0.35);
      transform-origin: 50% 0;
    }

    .eixos > .eixo:nth-child(1) {
      top: 4.4rem;
      animation: eixo-encolhe linear both;
      animation-timeline: --eixos;
      animation-range: cover 22% cover 52%;
      --escala-alvo: 0.90;
    }

    .eixos > .eixo:nth-child(2) {
      top: 5.7rem;
      animation: eixo-encolhe linear both;
      animation-timeline: --eixos;
      animation-range: cover 48% cover 78%;
      --escala-alvo: 0.95;
    }

    .eixos > .eixo:nth-child(3) { top: 7rem; }

    @keyframes eixo-encolhe {
      to { transform: scale(var(--escala-alvo, 0.95)); }
    }
  }
}

/* ---------- animação de entrada (cards sobem ao entrar na tela) ---------- */

.revela {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1), transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: var(--atraso, 0s);
}

/* transform via :where (especificidade zero): o hover dos cards e da
   galeria (scale) precisa vencer depois que a entrada termina */
.revela.visivel { opacity: 1; }
:where(.revela.visivel) { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; transition: none; }
  .botao, .cta-fixo, .cartao, .galeria-item, .galeria-item img { transition: none; }
  .cartao:hover, .galeria-item:hover, .galeria-item:hover img { transform: none; }
  .hero-seta { animation: none; }
  /* o parallax do padrão é desligado no JS pelo mesmo media query */
}

/* ============================================================
   Desktop
   ============================================================ */

@media (min-width: 760px) {
  /* medido: o CTA do nav é o item mais alto do header no desktop (71px).
     A variável precisa bater com a altura real, senão o hero de 100svh
     estoura a dobra pela diferença. */
  :root { --topo-h: 4.45rem; }

  .topo { padding: 0.95rem 2rem; }
  .topo-nav { display: flex; }

  .secao { padding: 5.5rem 0 6rem; }

  .eixos { grid-template-columns: repeat(3, 1fr); gap: 2rem; grid-template-rows: auto 1fr; }

  /* Títulos de 1 e de 2 linhas convivem: com subgrid os três eixos
     dividem as mesmas faixas e os cards alinham. */
  .eixo { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .eixo .cartoes, .eixo .cartao { height: 100%; }

  @supports not (grid-template-rows: subgrid) {
    .eixo { grid-row: auto; grid-template-rows: auto 1fr; }
    .eixo-titulo { min-height: 3.2em; }
  }

  .galeria { grid-template-columns: repeat(3, 1fr); }

  .bio-grade { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }

  /* colunas pelo conteúdo (não 1fr 1fr): o convite tem ~30rem de texto e o
     form 28rem — esticados até as bordas do miolo de 72rem sobrava um vão
     morto no meio. Assim o par fica centralizado e colado. */
  #participar { padding: 3.6rem 0 4rem; }

  .formulario { margin-top: 0.5rem; }

  .trajetoria { margin-top: 0; }

  .cta-fixo { display: none; }   /* CTA fixo é recurso mobile */

  .rodape { padding: 3.5rem 0 3rem; }

  /* pedido: rodapé em 3 colunas */
  .rodape-grade {
    grid-template-columns: 1.2fr 0.9fr 1.2fr;
    gap: 3rem;
    align-items: start;
  }
}

/* frase da identidade no header (pg 6) — só quando sobra largura */
@media (min-width: 1280px) {
  .topo-frase { display: block; }

  /* Só aqui o header vira grid de 3 faixas: com as laterais em 1fr o nav
     fica no centro ÓPTICO da tela, não no meio da sobra entre a marca e a
     frase (larguras bem diferentes). Abaixo de 1280 falta largura — as
     colunas laterais ficavam assimétricas e o nav quebrava em 2 linhas,
     esticando o header; lá o space-between do flex resolve melhor. */
  .topo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .topo-marca { justify-self: start; }
  .topo-frase { justify-self: end; }
}

/* ============================================================
   Hero lado a lado (pg 6) — só quando há largura real pra isso.
   Entre 760 e 899 o hero mantém o empilhado do mobile.
   ============================================================ */

@media (min-width: 900px) {
  .hero {
    padding: 0;
    display: block;
    min-height: calc(100svh - var(--topo-h));
  }

  /* foto central, meio corpo, ancorada na base (pg 6) */
  .hero-retrato {
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: min(34vw, 30rem);
    height: min(78svh, 46rem);
    min-height: 0;
    display: block;
  }

  .hero-retrato img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;   /* folga do topo ja vem na propria imagem */
  }

  /* conteúdo em 2 colunas nas laterais da foto */
  .hero-conteudo {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr minmax(30vw, 32rem) 1.2fr;
    align-items: center;
    gap: 0;
    min-height: calc(100svh - var(--topo-h));
    padding-top: 1rem;
  }

  .hero-citacao { grid-column: 1; }

  .hero-citacao p { font-size: clamp(1.25rem, 1.9vw, 1.7rem); }

  .hero-lockup {
    grid-column: 3;
    justify-self: start;
    padding-left: clamp(0.5rem, 2vw, 2.5rem);
  }

  .lockup-nome { width: min(30vw, 27rem); }
  .lockup-numero { width: min(21vw, 19rem); }

  .padrao { background-size: 240px auto; }

  /* o miolo do hero pode ser mais largo que o das seções */
  .hero .miolo { max-width: 86rem; }
}