/* ============================================================
   TEMA DO CANDIDATO — BLOCO A EDITAR POR CLIENTE
   ------------------------------------------------------------
   Troque apenas estes valores para retematizar a página inteira.
   Nomeados por FUNÇÃO, não por cor: o "destaque" pode virar
   vermelho, laranja, roxo... sem tocar em mais nada.
   ============================================================ */
/* Marca: MAURO FILHO 4455 — Deputado Federal */
:root {
  --cor-fundo: #052c9a;          /* azul principal extraído da logo */
  --cor-fundo-alt: #1c429b;      /* segundo azul da assinatura Mauro */
  --cor-rodape: #222222;         /* grafite presente no texto Deputado Federal */
  --cor-card: #1c429b;           /* cartões e superfícies */
  --cor-borda: #51aee1;          /* bordas sutis */

  --cor-destaque: #f0c913;       /* amarelo oficial do 4455 */
  --cor-destaque-escuro: #d4aa00;
  --cor-sobre-destaque: #052c9a; /* azul oficial em cima do amarelo */

  --cor-apoio: #51aee1;          /* azul claro do globo da marca */
  --cor-laranja: #ca5c1c;        /* laranja de Benevides Filho / Experiência */
  --cor-creme: #fdf7e2;          /* branco quente presente nos detalhes */
  --cor-whatsapp: #22c15e;

  --cor-texto: #ffffff;
  --cor-texto-suave: #d2dcfa;

  --fonte-display: "Sora", sans-serif;
  --fonte-corpo: "Roboto", sans-serif;

  --raio: 12px;
  --largura-max: 1160px;
}

/* ============================================================
   BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fonte-corpo);
  background-color: var(--cor-fundo);
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 24px),
    radial-gradient(circle at 8% 20%, rgba(81, 174, 225, 0.2), transparent 28rem),
    radial-gradient(circle at 92% 72%, rgba(240, 201, 19, 0.11), transparent 26rem),
    linear-gradient(180deg, #052c9a 0%, #1c429b 46%, #052c9a 100%);
  color: var(--cor-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* nunca rolar de lado no celular */
}

/* height:auto é obrigatório junto com width/height no HTML — sem ele
   o atributo vira altura fixa em pixels e a imagem estica. */
img { max-width: 100%; height: auto; display: block; }

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

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

.container {
  width: min(var(--largura-max), 100% - 2.5rem);
  margin-inline: auto;
}

/* Rótulo pequeno acima dos títulos, com o traço amarelo da marca */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cor-destaque);
  margin-bottom: 0.9rem;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  flex: 0 0 auto;
  background: var(--cor-destaque);
}

/* Depois do herói, o site inteiro tem UMA cor de fundo (o body);
   as seções são transparentes e herdam esse fundo */
.secao { padding: 5.5rem 0; }

/* Depois do herói todas as seções dividem o mesmo fundo (o do body):
   a única troca de cor da página é o rodapé. */

/* Cabeçalho de seção: sempre olho + título (+ texto opcional) */
.secao__cabecalho { margin-bottom: 2.5rem; }

.secao__cabecalho .secao__texto:last-child { margin-bottom: 0; }

.secao__titulo {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

.secao__texto {
  color: var(--cor-texto-suave);
  max-width: 62ch;
  margin-bottom: 1.5rem;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  min-height: 48px; /* alvo de toque confortável */
  border-radius: var(--raio);
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

/* CTA principal do herói — retângulo sólido com ícone em caixinha */
.btn--principal {
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  gap: 0.9rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.btn--principal:hover { filter: brightness(1.06); }

.btn__icone {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.16);
}

/* ============================================================
   PRELOADER (logo + número enquanto a página carrega)
   ============================================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(150deg, var(--cor-fundo-alt), var(--cor-fundo) 75%);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.3rem;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.preloader img {
  width: min(64vw, 340px);
  height: auto;
  animation: preloader-pulso 1.6s ease-in-out infinite;
  /* mesmo contorno de adesivo do logo do topo (logo colorido em fundo azul) */
  filter:
    drop-shadow(1.5px 0 0 rgba(255, 255, 255, 0.92))
    drop-shadow(-1.5px 0 0 rgba(255, 255, 255, 0.92))
    drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.92))
    drop-shadow(0 -1.5px 0 rgba(255, 255, 255, 0.92));
}

.preloader__cargo {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.preloader__cargo b { color: var(--cor-destaque); }

.preloader__barra {
  width: min(50vw, 220px);
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.preloader__barra i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: var(--cor-destaque);
  animation: preloader-carga 1.1s ease-in-out infinite;
}

.preloader.saiu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes preloader-pulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@keyframes preloader-carga {
  from { transform: translateX(-110%); }
  to { transform: translateX(370%); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader img, .preloader__barra i { animation: none; }
  .preloader { transition: none; }
}

/* ============================================================
   CABEÇALHO
   ============================================================ */
.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  transition: background 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

/* Sobre o herói não há véu nenhum: a arte oficial aparece inteira. Quem
   garante a leitura do menu é a pílula translúcida abaixo — ela ocupa só
   o espaço do próprio texto e funciona tanto no azul quanto no branco
   da capa. */

/* Ganha fundo sólido depois que a página rola */
.topo.rolou {
  background: color-mix(in srgb, var(--cor-fundo) 90%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--cor-borda), 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Âncoras não ficam escondidas atrás do menu fixo */
section[id] { scroll-margin-top: 84px; }

.topo__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem 0;
}

.marca { display: block; }

.marca img {
  display: block;
  height: 44px;
  width: auto;
  /* Contorno branco de adesivo: o logo do Mauro é colorido (azul/laranja
     sobre transparência) e precisa se descolar do fundo azul da página.
     Ao receber a versão toda branca do logo, basta trocar o PNG e
     remover este filtro. */
  filter:
    drop-shadow(1px 0 0 rgba(255, 255, 255, 0.92))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.92))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.92))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.92));
}

.menu {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
  transition: background 0.25s ease, padding 0.25s ease;
}

/* Enquanto o cabeçalho está transparente, o menu carrega o próprio fundo:
   a capa tem azul de um lado e branco do outro, e nenhuma cor de texto
   sozinha resolveria os dois. */
@media (min-width: 821px) {
  .topo:not(.rolou) .menu {
    padding: 0.45rem 1.3rem;
    border-radius: 999px;
    background: rgba(4, 24, 84, 0.62);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 22px rgba(3, 20, 74, 0.22);
  }
}

.menu a {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto);
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* O item aberto vem no amarelo da marca — branco em cima de branco não
   dizia em que seção o visitante está. */
.menu a:hover,
.menu a.ativo { color: var(--cor-destaque); border-color: var(--cor-destaque); }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  width: 48px;   /* alvo de toque confortável */
  height: 48px;
  cursor: pointer;
  margin-left: auto;
}

.menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--cor-texto);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Aberto: as três barras viram um X — sem isso não há sinal de que
   tocar de novo fecha o menu */
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERÓI (INÍCIO) — reprodução da arte oficial "CAPA"
   ------------------------------------------------------------
   Tudo vive dentro de .hero__palco, uma caixa com a proporção
   exata da arte (1080×600). O palco cobre a seção como um
   `background-size: cover` e os elementos são posicionados em %
   dele — assim a composição da CAPA não se deforma em tela
   nenhuma, só ganha ou perde margem nas bordas.
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  min-height: 460px;
  background: #00289e; /* mesma chapa do fundo: nada pisca no carregamento */
}

.hero__palco {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  aspect-ratio: 1080 / 600;
  container-type: inline-size;
  will-change: transform;
}

/* Tela mais "quadrada" que a arte: o palco passa a ser medido pela altura */
@media (max-aspect-ratio: 1080 / 600) {
  .hero__palco { width: auto; height: 100%; }
}

/* Fundo vetorial gerado a partir da CAPA (tools/gerar_capa_svg.py) */
.capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.capa--alta { display: none; }

.hero__federacao--cor { display: none; }

/* Os círculos .capa__corte são a própria animação de entrada: o JS zera o
   raio deles e reabre a partir do canto onde o swoosh nasce. No HTML eles
   já vêm com o raio cheio — sem JS a capa aparece pronta. */

/* --------------------------------------------------- peças por cima */
.hero__federacao,
.hero__foto,
.hero__lockup {
  position: absolute;
  margin: 0;
}

.hero__federacao {
  left: 10.93%;
  top: 19.17%;
  width: 7.32%;
  height: auto;
}

/* A sombra reproduz o halo suave que a arte original tem em volta do
   recorte. Em cqw para acompanhar a escala do palco; os valores foram
   ajustados comparando o render com a CAPA pixel a pixel. */
.hero__foto {
  left: 2.04%;
  top: 11.83%;
  width: 50.28%;
  height: auto;
  filter:
    drop-shadow(0.7cqw 0.8cqw 2.4cqw rgba(10, 16, 40, 0.52));
}

.hero__lockup {
  left: 48.33%;
  top: 23.67%;
  width: 40.03%;
  display: block;
}

.hero__lockup-link {
  display: block;
  transition: transform 0.2s ease;
}

.hero__lockup-link:hover { transform: translateY(-0.6%) scale(1.012); }

.hero__lockup-img { display: block; width: 100%; height: auto; }

/* Texto do h1 acessível a leitores de tela, invisível na tela */
.oculto-acessivel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   APRESENTAÇÃO
   ============================================================ */
.apresentacao__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Retrato: a foto editorial do candidato preenche o painel inteiro;
   a cunha amarela do cartaz oficial assina o canto por cima dela. */
.retrato {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--raio);
  background: linear-gradient(150deg, #2453d1, var(--cor-fundo-alt) 55%, #071d6b);
  box-shadow: 0 26px 50px rgba(3, 15, 66, 0.35);
}

/* Cunha amarela no canto, igual à do cartaz */
.retrato::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 34%;
  aspect-ratio: 1;
  background: var(--cor-destaque);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: 0.95;
}

/* Escurecido discreto na base, para a foto assentar no painel */
.retrato::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(4, 18, 72, 0.6));
  pointer-events: none;
}

.retrato__foto {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.retrato__selo {
  position: absolute;
  z-index: 3;
  right: 1.1rem;
  top: 1.1rem;
  height: clamp(26px, 3vw, 38px);
  width: auto;
  opacity: 0.9;
}

/* Destaques: três números que sustentam o texto da apresentação */
.destaques {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.4rem;
}

.destaques li {
  padding: 1.1rem 1.2rem;
  border-radius: var(--raio);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid var(--cor-destaque);
}

.destaques .num {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  color: var(--cor-destaque);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.destaques .leg {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--cor-texto-suave);
}

/* ============================================================
   MINHA HISTÓRIA — TRAJETÓRIA EM MOVIMENTO
   ------------------------------------------------------------
   Uma leitura editorial própria para Mauro Filho: cada marco é um
   capítulo, enquanto o trilho amarelo e o cursor acompanham o scroll.
   ============================================================ */
.secao--historia {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(6rem, 9vw, 8.5rem);
  border-block: 1px solid rgba(81, 174, 225, 0.32);
  background:
    radial-gradient(circle at 82% 16%, rgba(240, 201, 19, 0.2), transparent 25rem),
    radial-gradient(circle at 5% 84%, rgba(81, 174, 225, 0.24), transparent 28rem),
    linear-gradient(138deg, rgba(5, 44, 154, 0.98), rgba(28, 66, 155, 0.9) 54%, rgba(5, 44, 154, 0.98));
}

.secao--historia::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 1;
  background-image:
    linear-gradient(
      112deg,
      transparent 0 61%,
      rgba(240, 201, 19, 0.12) 61% 62.2%,
      rgba(202, 92, 28, 0.15) 62.2% 65%,
      transparent 65%
    ),
    radial-gradient(rgba(253, 247, 226, 0.13) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px;
  background-repeat: no-repeat, repeat;
  -webkit-mask-image: linear-gradient(105deg, transparent 12%, #000 50%, transparent 88%);
  mask-image: linear-gradient(105deg, transparent 12%, #000 50%, transparent 88%);
}

.secao--historia::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -13%;
  bottom: -27%;
  width: min(58vw, 680px);
  aspect-ratio: 1;
  border: clamp(42px, 7vw, 84px) solid rgba(81, 174, 225, 0.11);
  border-right-color: rgba(240, 201, 19, 0.14);
  border-bottom-color: rgba(202, 92, 28, 0.12);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.historia__numero {
  position: absolute;
  z-index: -1;
  top: -0.16em;
  right: -0.07em;
  color: rgba(253, 247, 226, 0.05);
  font-family: var(--fonte-display);
  font-size: clamp(12rem, 30vw, 29rem);
  font-weight: 800;
  font-style: italic;
  line-height: 0.8;
  letter-spacing: -0.1em;
  pointer-events: none;
  user-select: none;
}

.historia__grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: start;
}

.historia__cabecalho {
  position: sticky;
  top: 8.5rem;
  margin-bottom: 0;
}

.historia__cabecalho .secao__titulo {
  max-width: 11ch;
  font-size: clamp(2.25rem, 4.2vw, 3.65rem);
}

.historia__resumo {
  max-width: 39ch;
  color: var(--cor-texto-suave);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}

.historia__instrucao {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  color: rgba(253, 247, 226, 0.7);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.historia__instrucao span {
  position: relative;
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: rgba(81, 174, 225, 0.34);
}

.historia__instrucao span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cor-destaque);
  transform: translateY(-50%);
  box-shadow: 0 0 0 5px rgba(240, 201, 19, 0.12);
}

.timeline-shell {
  --timeline-progress: 0;
  --timeline-rail-x: 1.15rem;
  --timeline-content-offset: 4.8rem;
  --timeline-start: 5rem;
  --timeline-end-gap: 5rem;
  position: relative;
  min-width: 0;
}

.timeline__track {
  position: absolute;
  z-index: 2;
  top: var(--timeline-start);
  bottom: var(--timeline-end-gap);
  left: var(--timeline-rail-x);
  width: 4px;
  border-radius: 999px;
  background: rgba(81, 174, 225, 0.25);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.timeline__progress {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--cor-apoio), var(--cor-destaque) 65%, var(--cor-laranja));
  box-shadow: 0 0 18px rgba(240, 201, 19, 0.34);
  transform: scaleY(var(--timeline-progress));
  transform-origin: center top;
  will-change: transform;
}

.timeline__cursor {
  position: absolute;
  z-index: 3;
  top: calc(var(--timeline-progress) * 100%);
  left: 50%;
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid var(--cor-creme);
  border-radius: 50%;
  background: var(--cor-destaque);
  box-shadow:
    0 0 0 7px rgba(202, 92, 28, 0.18),
    0 7px 24px rgba(3, 12, 54, 0.42);
  transform: translate(-50%, -50%);
  will-change: top;
}

.timeline__cursor i {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cor-sobre-destaque);
}

.timeline {
  position: relative;
  list-style: none;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding-left: var(--timeline-content-offset);
}

.timeline__item {
  position: relative;
  min-width: 0;
}

.timeline__node {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(var(--timeline-rail-x) - var(--timeline-content-offset));
  width: 17px;
  aspect-ratio: 1;
  border: 3px solid var(--cor-apoio);
  border-radius: 50%;
  background: var(--cor-fundo-alt);
  box-shadow: 0 0 0 6px rgba(5, 44, 154, 0.9);
  transform: translate(-50%, -50%);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.timeline__card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(112px, 0.32fr) minmax(0, 1fr);
  gap: clamp(1.35rem, 3vw, 2.2rem);
  align-items: center;
  min-height: 176px;
  padding: clamp(1.45rem, 3vw, 2.15rem);
  border: 1px solid rgba(253, 247, 226, 0.15);
  border-radius: 22px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.075), transparent 38%),
    rgba(5, 44, 154, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 44px rgba(3, 14, 65, 0.2);
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.timeline__card::after {
  content: attr(data-capitulo);
  position: absolute;
  right: 0.22em;
  bottom: -0.25em;
  color: rgba(255, 255, 255, 0.035);
  font-family: var(--fonte-display);
  font-size: 6.8rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.timeline__meta {
  position: relative;
  z-index: 1;
}

.timeline__chapter {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--cor-apoio);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.timeline .ano {
  display: block;
  color: rgba(253, 247, 226, 0.82);
  font-family: var(--fonte-corpo);
  font-size: clamp(2.5rem, 5vw, 3.6rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.92;
  letter-spacing: -0.055em;
  -webkit-text-stroke: 2px rgba(253, 247, 226, 0.72);
  transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}

@supports (-webkit-text-stroke: 1px #fff) {
  .timeline .ano { color: transparent; }
}

.timeline__conteudo {
  position: relative;
  z-index: 1;
}

.timeline h3 {
  margin-bottom: 0.65rem;
  color: #fff;
  font-family: var(--fonte-display);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.timeline p {
  max-width: 53ch;
  color: var(--cor-texto-suave);
  line-height: 1.62;
}

.timeline__item.is-reached .timeline__node {
  border-color: var(--cor-creme);
  background: var(--cor-destaque);
  box-shadow:
    0 0 0 6px rgba(240, 201, 19, 0.13),
    0 0 18px rgba(240, 201, 19, 0.3);
}

.timeline__item.is-reached .ano {
  -webkit-text-stroke-color: var(--cor-destaque);
}

.timeline__item.is-active .timeline__card {
  border-color: rgba(240, 201, 19, 0.62);
  background:
    linear-gradient(118deg, rgba(240, 201, 19, 0.14), transparent 44%),
    rgba(28, 66, 155, 0.94);
  box-shadow:
    inset 4px 0 0 var(--cor-laranja),
    0 24px 58px rgba(3, 13, 60, 0.34);
  transform: translateX(8px);
}

.timeline__item.is-active .ano {
  color: var(--cor-destaque);
  -webkit-text-stroke-color: transparent;
  text-shadow: 0 10px 28px rgba(240, 201, 19, 0.22);
}

.timeline__item:last-child .timeline__chapter::after {
  content: "agora";
  display: inline-block;
  margin-left: 0.65rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  vertical-align: middle;
}

@media (max-width: 980px) {
  .historia__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .historia__cabecalho {
    position: relative;
    top: auto;
    max-width: 680px;
  }

  .historia__cabecalho .secao__titulo { max-width: 15ch; }
}

@media (max-width: 620px) {
  .secao--historia { padding-block: 4.75rem; }

  .historia__numero {
    top: 0.05em;
    font-size: 13rem;
  }

  .historia__instrucao { margin-top: 1.5rem; }

  .timeline-shell {
    --timeline-rail-x: 0.65rem;
    --timeline-content-offset: 2.5rem;
    --timeline-start: 4.5rem;
    --timeline-end-gap: 4.5rem;
  }

  .timeline { gap: 1.2rem; }

  .timeline__track { width: 3px; }

  .timeline__cursor {
    width: 28px;
    border-width: 2px;
    box-shadow: 0 0 0 5px rgba(202, 92, 28, 0.16);
  }

  .timeline__node {
    width: 13px;
    border-width: 2px;
    box-shadow: 0 0 0 4px rgba(5, 44, 154, 0.9);
  }

  .timeline__card {
    grid-template-columns: 1fr;
    gap: 1rem;
    min-height: 0;
    padding: 1.35rem 1.25rem 1.45rem;
    border-radius: 18px;
  }

  .timeline__meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
  }

  .timeline__chapter {
    order: 2;
    margin-bottom: 0.25rem;
    text-align: right;
  }

  .timeline .ano { font-size: clamp(2.35rem, 13vw, 3rem); }

  .timeline h3 { font-size: 1rem; }

  .timeline__card::after { font-size: 5rem; }

  .timeline__item.is-active .timeline__card {
    box-shadow:
      inset 3px 0 0 var(--cor-laranja),
      0 18px 42px rgba(3, 13, 60, 0.3);
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline__card,
  .timeline__node,
  .timeline .ano {
    transition: none;
  }
}
/* ============================================================
   PROPOSTAS — carrossel lateral de cards em banner
   ------------------------------------------------------------
   Trilho com scroll-snap: arrasta com o mouse, desliza no dedo,
   anda com as setas/teclado. A rolagem da página não é sequestrada.
   ============================================================ */
.propostas__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.propostas__topo .secao__cabecalho { margin-bottom: 0; }

.carrossel__controles {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.carrossel__contador {
  font-family: var(--fonte-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
  margin-right: 0.4rem;
}

.carrossel__contador b {
  color: var(--cor-destaque);
  font-size: 1.5rem;
}

.carrossel__contador span { margin: 0 0.2rem; opacity: 0.5; }
.carrossel__contador i { font-style: normal; }

.carrossel__seta {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--cor-sobre-destaque);
  background: var(--cor-destaque);
  border: 0;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.carrossel__seta:hover { transform: translateY(-2px); }

.carrossel__seta:disabled {
  opacity: 0.32;
  cursor: default;
  transform: none;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.propostas__trilho {
  display: grid;
  grid-auto-flow: column;
  /* o card seguinte espia na borda: mostra que dá para andar de lado */
  grid-auto-columns: calc(100% - 3.5rem);
  gap: 1.4rem;
  margin-top: 2.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* deslizar entre as propostas não pode acionar o "voltar" por gesto
     lateral do navegador no celular */
  overscroll-behavior-x: contain;
  /* respiro nas pontas para o card não colar na borda ao arrastar */
  padding-bottom: 0.4rem;
}

.propostas__trilho::-webkit-scrollbar { display: none; }

.propostas__trilho:focus-visible {
  outline: 3px solid var(--cor-destaque);
  outline-offset: 6px;
  border-radius: 22px;
}

/* Enquanto arrasta: cursor de mão fechada e sem snap brigando */
.propostas__trilho.arrastando {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.propostas__trilho.arrastando .proposta { pointer-events: none; }

.proposta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  overflow: hidden;
  min-height: 360px;
  scroll-snap-align: start;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(115deg, #2453d1, var(--cor-fundo-alt) 55%, #071d6b);
}

/* Pontos: posição no carrossel e atalho para cada proposta */
.carrossel__pontos {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
}

.carrossel__pontos button {
  position: relative;
  width: 26px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.18s ease, width 0.18s ease;
}

/* O traço tem 5px de altura: a área de toque é maior que o desenho,
   senão é impossível acertar com o dedo. */
.carrossel__pontos button::after {
  content: "";
  position: absolute;
  inset: -15px -5px;
}

.carrossel__pontos button[aria-current="true"] {
  width: 46px;
  background: var(--cor-destaque);
}

/* Brilho diagonal, como o degradê varrido da referência */
.proposta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 45%);
  pointer-events: none;
}

.proposta__conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.9rem;
  padding: clamp(1.8rem, 4vw, 3.4rem);
}

.proposta__icone {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(4, 16, 70, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  display: grid;
  place-items: center;
}

.proposta h3 {
  font-family: var(--fonte-display);
  font-weight: 800;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height: 1.15;
}

.proposta p {
  color: var(--cor-texto-suave);
  font-size: 1rem;
  max-width: 46ch;
}

.btn--proposta {
  background: var(--cor-destaque);
  color: var(--cor-sobre-destaque);
  border-radius: 10px;
  padding: 0.75rem 1.4rem;
  font-size: 0.82rem;
  min-height: 46px;
  margin-top: 0.5rem;
  box-shadow: 0 10px 26px rgba(3, 13, 56, 0.3);
}

/* Lado direito: marca-d'água do ícone + foto do candidato */
.proposta__arte {
  position: relative;
  z-index: 1;
  min-height: 220px;
}

.proposta__icone-marca {
  position: absolute;
  top: 6%;
  right: 14%;
  width: 46%;
  aspect-ratio: 1;
  color: #ffffff;
  opacity: 0.13;
  transform: rotate(-8deg);
}

.proposta__icone-marca svg {
  width: 100%;
  height: 100%;
}

.proposta__foto {
  position: absolute;
  right: clamp(1rem, 3vw, 3.5rem);
  bottom: 0;
  height: 94%;
  width: auto;
  max-width: none;
  filter: drop-shadow(-14px 12px 30px rgba(3, 13, 56, 0.35));
}

/* ============================================================
   GALERIA DE FOTOS
   ============================================================ */
.galeria {
  display: grid;
  /* minmax(0,…) e não 1fr puro: senão o texto do espaço reservado
     define um mínimo e a grade estoura a tela em aparelhos estreitos */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.galeria button {
  position: relative;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
  cursor: pointer;
  background: var(--cor-card);
  padding: 0;
  aspect-ratio: 4 / 3;
}

/* Espaço reservado: a legenda já está definida, falta a foto.
   Fica claro que é um lugar à espera de conteúdo, não um erro. */
.galeria .vaga {
  display: grid;
  place-content: center;
  gap: 0.55rem;
  aspect-ratio: 4 / 3;
  padding: 1rem;
  text-align: center;
  border-radius: var(--raio);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

.galeria .vaga svg { margin-inline: auto; opacity: 0.55; }

.galeria .vaga b {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

.galeria .vaga span {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  opacity: 0.75;
}

.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.galeria button:hover img { transform: scale(1.05); }

.galeria figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2rem 1rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 9, 30, 0.92);
  display: grid;
  place-content: center;
  gap: 1rem;
  padding: 2rem;
}

.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: min(900px, 90vw);
  max-height: 78vh;
  border-radius: var(--raio);
}

.lightbox__legenda { text-align: center; color: var(--cor-texto-suave); }

.lightbox__fechar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 2.2rem;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

/* ============================================================
   INSTAGRAM
   ============================================================ */
.insta__cabecalho {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}

.insta__cabecalho .secao__titulo { margin-bottom: 0; }

.insta__perfil {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  min-height: 46px; /* alvo de toque confortável */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.insta__perfil span {
  color: var(--cor-destaque);
  font-size: 1.15rem;
}

.insta__perfil:hover {
  border-color: var(--cor-destaque);
  background: rgba(255, 255, 255, 0.08);
}

/* O embed define a largura máxima aqui: o padding em % de .insta__embed
   resolve sobre a largura DESTE elemento. */
.insta__area {
  width: min(960px, 100% - 2.5rem);
  margin: 2.5rem auto 0;
}

/* ---- Grade de publicações (um embed por post) ----
   O embed de post tem geometria fixa e previsível: 54px de cabeçalho +
   área de mídia na proporção 4:5 da largura. Dentro dessa área o reel
   (9:16) aparece deitado entre duas tarjas pretas, ocupando 70,3% da
   largura — então a mídia precisa aparecer ampliada 1/0,703 = 1,4225
   vezes para preencher a célula, como faz a grade do próprio perfil.

   Esse aumento é o produto largura-do-iframe × escala, e os dois lados
   são livres. O botão de play do Instagram tem tamanho FIXO (42px), não
   proporcional: renderizando o iframe numa largura maior e reduzindo na
   mesma medida, a foto continua preenchendo igual e só o play encolhe.
   --escala menor = play menor. */
.insta__grade {
  --escala: 0.55;     /* play na tela = 42px × escala ≈ 23px */
  --preenche: 1.4225; /* 1/0,703: joga as tarjas do reel para fora */
  --centro: 21.13%;   /* centraliza verticalmente a mídia 4:5 na célula */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  border-top: 3px solid var(--cor-destaque);
  padding-top: 4px;
}

.insta__post {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #000;
  border-radius: 4px;
}

/* Foto deitada: o Instagram encurta a área de mídia para a proporção
   real da imagem (não completa até 4:5), e sem ampliar mais o rodapé do
   embed apareceria embaixo. Amplia o bastante para cobrir até 16:9 e
   alinha no topo, onde a mídia sempre começa. */
.insta__post--deitada {
  --escala: 0.8;
  --preenche: 2.3;
  --centro: 0%;
}

.insta__post-frame {
  position: absolute;
  left: 50%;
  /* o cabeçalho de 54px sai de cena já na escala aplicada */
  top: calc(-54px * var(--escala) - var(--centro));
  width: calc(100% * var(--preenche) / var(--escala));
  /* sobra de altura para o embed nunca criar barra de rolagem interna
     (o excesso fica escondido pelo overflow da célula) */
  height: calc(100% / var(--escala) + 620px);
  border: 0;
  transform: translateX(-50%) scale(var(--escala));
  transform-origin: center top;
}

/* Altura do embed do Instagram = cabeçalho do perfil + grade 3×2, onde
   cada célula é um quadrado de largura/3. Ou seja: 157px + 2/3 da
   largura (o cabeçalho cai para 146px abaixo de 500px, onde o próprio
   Instagram troca o layout — ver media query no fim do arquivo).
   Como padding em % resolve sobre a largura, a caixa fica na medida
   exata do embed: nada é cortado e não sobra faixa branca. */
.insta__embed {
  position: relative;
  width: 100%;
  padding-top: calc(200% / 3 + 157px);
  overflow: hidden;
  border-radius: var(--raio);
  background: #fff;
  border-top: 3px solid var(--cor-destaque);
}

.insta__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.insta__convite {
  background: var(--cor-card);
  border: 1px dashed var(--cor-borda);
  border-radius: var(--raio);
  padding: 3rem 2rem;
  text-align: center;
  width: min(560px, 100%);
  margin: 0 auto;
}

.insta__convite p { color: var(--cor-texto-suave); margin-bottom: 1.5rem; }

.btn--insta {
  background: linear-gradient(45deg, #bc1888, #833ab4);
  color: #fff;
}

/* ============================================================
   DOWNLOADS
   ============================================================ */
.secao--downloads {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--cor-fundo);
  background:
    radial-gradient(circle at 92% 12%, rgba(81, 174, 225, 0.2), transparent 22rem),
    radial-gradient(circle at 4% 92%, rgba(240, 201, 19, 0.16), transparent 18rem),
    linear-gradient(180deg, #f4f8ff 0%, #e9f3ff 100%);
  border-block: 1px solid rgba(81, 174, 225, 0.38);
}

.secao--downloads::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--cor-destaque) 0 18%,
    var(--cor-laranja) 18% 29%,
    var(--cor-apoio) 29%
  );
}

.secao--downloads::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 19rem;
  aspect-ratio: 1;
  right: -8rem;
  bottom: -10rem;
  border: 3.5rem solid rgba(81, 174, 225, 0.12);
  border-radius: 50%;
}

.secao--downloads .secao__cabecalho {
  max-width: 720px;
}

.secao--downloads .eyebrow { color: #087fda; }
.secao--downloads .eyebrow::before { background: var(--cor-destaque); }

.secao--downloads .secao__titulo {
  color: var(--cor-fundo);
  font-size: clamp(2rem, 4.2vw, 3rem);
}

.secao--downloads .secao__titulo span { color: #087fda; }
.secao--downloads .secao__texto { color: #31557f; }

.downloads__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Cada card mostra o material antes de baixar — a arte é o argumento */
.download-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  color: var(--cor-fundo);
  background: #fff;
  border: 1px solid rgba(5, 44, 154, 0.1);
  border-radius: 14px;
  box-shadow: 0 15px 34px rgba(5, 44, 154, 0.1);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.download-card:hover {
  transform: translateY(-5px);
  border-color: rgba(240, 201, 19, 0.85);
  box-shadow: 0 21px 42px rgba(5, 44, 154, 0.16);
}

.download-card__capa {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(81, 174, 225, 0.16), rgba(5, 44, 154, 0.08)),
    #edf4fc;
}

.download-card__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.download-card__capa--conter img {
  object-fit: contain;
  padding: 1.4rem;
}

.download-card:hover .download-card__capa img { transform: scale(1.04); }

.download-card__corpo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  padding: 1.2rem 1.2rem 1.3rem;
}

.download-card__tipo {
  position: absolute;
  z-index: 1;
  left: 0.8rem;
  top: 0.8rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-sobre-destaque);
  background: var(--cor-destaque);
  padding: 0.32rem 0.65rem;
  border-radius: 5px;
  box-shadow: 0 5px 14px rgba(5, 44, 154, 0.16);
}

/* Sem capa, o rótulo volta para dentro do corpo do card */
.download-card--sem-capa .download-card__tipo {
  position: static;
  align-self: flex-start;
  margin-bottom: 0.3rem;
}

.download-card h3 {
  font-family: var(--fonte-display);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--cor-fundo);
}

.download-card p {
  flex: 1;
  color: #31557f;
  font-size: 0.86rem;
  line-height: 1.55;
}

.download-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 47px;
  margin-top: 0.65rem;
  padding: 0.72rem 0.8rem;
  color: var(--cor-sobre-destaque);
  background: var(--cor-destaque);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.download-card a:hover {
  transform: translateY(-2px);
  background: #ffd91a;
  box-shadow: 0 8px 18px rgba(212, 170, 0, 0.28);
}

/* ============================================================
   RODAPÉ
   ============================================================ */
/* Único bloco da página com cor própria: fecha a leitura e destaca o
   selo da campanha. A costura em 3 listras é a mesma que revela as
   imagens e abre o herói. */
.rodape {
  position: relative;
  overflow: hidden;
  padding: 3.6rem 0 2.4rem;
  background: var(--cor-rodape);
}

.rodape::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--cor-destaque) 0 16%,
    var(--cor-apoio) 16% 27%,
    var(--cor-fundo-alt) 27%
  );
}

.rodape__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.rodape__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.marca--rodape img { height: 56px; margin-inline: auto; }

.rodape__menu {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.rodape__menu a {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-texto-suave);
  padding: 0.6rem 0.2rem; /* área de toque maior */
}

.rodape__menu a:hover { color: var(--cor-destaque); }

.rodape__legal {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  max-width: 70ch;
}

/* ============================================================
   EFEITOS GSAP (máscaras de título e revelação por listras)
   ============================================================ */

/* Cada palavra do título vira uma "janela" que esconde o texto
   deslizando por baixo (títulos de seção e do herói) */
.secao__titulo .line,
.hero__titulo .line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.secao__titulo .line > span,
.hero__titulo .line > span {
  display: inline-block;
  will-change: transform;
}

/* Listras que cobrem a imagem e deslizam para revelá-la.
   Só cobrem quando o JS está ativo (classe .pronto) */
.reveal-stripes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  pointer-events: none;
}

/* Três faixas nas cores do tema */
.reveal-stripes i {
  background: var(--cor-fundo-alt);
  transform: scaleX(0);
}

.reveal-stripes i:nth-child(2) { background: var(--cor-destaque); }
.reveal-stripes i:nth-child(3) { background: var(--cor-apoio); }

.pronto .reveal-stripes i { transform: scaleX(1); }

/* ============================================================
   ANIMAÇÕES DE ENTRADA
   ============================================================ */
.revela {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; transition: none; }
  .btn, .proposta, .download-card, .galeria img { transition: none; }
  /* o carrossel continua funcionando, só pula direto para o card */
  .propostas__trilho { scroll-behavior: auto; }
  .carrossel__seta, .carrossel__pontos button { transition: none; }
  /* o cabeçalho do celular aparece/some sem deslizar */
  .topo { transition: none; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1024px) {
  .downloads__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu { display: none; }
  .menu-toggle { display: flex; }

  /* No mobile o topo fica sempre sólido (sem blur: pesa na GPU
     de aparelhos básicos) */
  .topo,
  .topo.rolou {
    background: var(--cor-fundo);
    backdrop-filter: none;
    box-shadow: 0 1px 0 var(--cor-borda);
  }

  /* Na tela pequena a capa não divide espaço com nada: o cabeçalho fica
     recolhido enquanto o herói está em cena e desce quando a segunda
     seção encosta no topo (classe posta pelo main.js). */
  .topo {
    transition:
      transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.25s ease,
      box-shadow 0.25s ease;
  }

  .topo--recolhido {
    transform: translateY(-100%);
    box-shadow: none;
    pointer-events: none;
  }

  .menu.aberto {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    /* tom próprio + sombra: o painel precisa se descolar da página,
       que é azul quase igual ao antigo fundo do menu */
    background: var(--cor-rodape);
    border-bottom: 3px solid var(--cor-destaque);
    box-shadow: 0 20px 40px rgba(3, 8, 36, 0.45);
    padding: 0.5rem 1.25rem 1rem;
    /* em telas baixas (paisagem) o menu rola em vez de sair da tela */
    max-height: calc(100svh - 4.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Itens do menu grandes e fáceis de tocar */
  .menu.aberto a {
    padding: 1rem 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .menu.aberto a:last-child { border-bottom: 0; }
}

/* Logo do topo em telas estreitas: ocupava dois terços da largura e
   encostava no botão do menu */
@media (max-width: 420px) {
  .marca { display: flex; align-items: center; min-height: 44px; }
  .marca img { height: 36px; }
  .topo__inner { gap: 0.75rem; }
}

/* ------------------------------------------------------------
   RETRATO — a mesma arte, recomposta na vertical
   O swoosh é a MESMA curva espelhada (ver tools/gerar_capa_svg.py):
   entra por cima, deixando a área branca no topo para o cartaz, e
   a foto desce sobre o Ceará azul. Nada de composição nova: só
   outra montagem das mesmas peças.
   ------------------------------------------------------------ */
@media (max-aspect-ratio: 1 / 1) {
  /* ancorado no topo: a sobra de altura sai toda embaixo, onde só existe
     o corpo da foto — nunca em cima do cartaz */
  .hero__palco {
    top: 0;
    transform: translate(-50%, 0);
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 1400;
  }

  .capa--larga { display: none; }
  .capa--alta { display: block; }

  /* Tudo entre 15% e 85%: é a faixa que sobrevive ao recorte lateral
     tanto no celular estreito quanto no tablet em pé. */
  .hero__lockup { left: 22%; top: 15%; width: 56%; }

  .hero__foto {
    left: 11%;
    top: auto;
    bottom: 0;
    width: 78%;
    filter:
      drop-shadow(0.9cqw 1cqw 2cqw rgba(3, 20, 84, 0.4))
      drop-shadow(0.2cqw 0.3cqw 0.5cqw rgba(3, 20, 84, 0.2));
  }

  /* No retrato o selo cai sobre a área branca: entra a versão colorida */
  .hero__federacao { left: 22%; top: 10%; width: 22%; }
  .hero__federacao--branca { display: none; }
  .hero__federacao--cor { display: block; }
}

/* Retrato bem estreito: o palco passa a ser medido pela altura */
@media (max-aspect-ratio: 900 / 1400) {
  .hero__palco { width: auto; height: 100%; }
}

@media (max-width: 820px) {
  .apresentacao__grid { grid-template-columns: 1fr; gap: 2rem; }

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

  /* width: 100% é obrigatório aqui — o conteúdo do retrato é todo
     absoluto, então sem largura declarada a margem automática o
     encolhe para zero e a foto some. */
  .retrato {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 3 / 4;
    margin-inline: auto;
  }
  .destaques { grid-template-columns: 1fr; gap: 0.7rem; }
  .destaques li { display: flex; align-items: baseline; gap: 0.9rem; }
  .destaques .num { margin-bottom: 0; }

  /* Cabeçalho e controles do carrossel empilham */
  .propostas__topo { align-items: flex-start; flex-direction: column; gap: 1.2rem; }

  /* Cards de proposta empilham; a arte vira faixa compacta embaixo */
  .proposta { grid-template-columns: 1fr; min-height: 0; }
  .proposta__arte { min-height: 170px; }
  .proposta__foto { right: 1rem; height: 105%; }
  .proposta__icone-marca { width: 34%; right: auto; left: 8%; top: 12%; }

  .insta__cabecalho {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  /* menos colunas para a foto não virar selo */
  .insta__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .secao { padding: 4rem 0; }
}

@media (max-width: 560px) {
  /* Uma coluna virava uma fila de cards gigantes: seis fotos e quatro
     materiais davam mais de 3.000px de rolagem. Em duas colunas a seção
     inteira cabe em uma ou duas telas e continua legível. */
  .downloads__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }

  .download-card__corpo { gap: 0.3rem; padding: 0.9rem 0.9rem 1rem; }
  .download-card h3 { font-size: 0.92rem; }
  .download-card p { font-size: 0.78rem; }
  .download-card a { font-size: 0.72rem; letter-spacing: 0.06em; }
  .download-card__tipo { font-size: 0.6rem; letter-spacing: 0.12em; }

  /* o texto do espaço reservado precisa caber na célula menor */
  .galeria .vaga { padding: 0.7rem; gap: 0.4rem; }
  .galeria .vaga b { font-size: 0.78rem; line-height: 1.25; }
  .galeria .vaga span { font-size: 0.6rem; letter-spacing: 0.1em; }
  .galeria figcaption { padding: 1.6rem 0.7rem 0.6rem; font-size: 0.74rem; }

  /* mantém 3 colunas no celular: com 2 seriam 8 fileiras de rolagem */
  .insta__grade { gap: 3px; }

  /* CTAs em largura total: fáceis de acertar com o polegar */
  .btn--insta { width: 100%; }

  .secao__texto { font-size: 1rem; }
  .secao { padding: 3.25rem 0; }

  .rodape { padding: 2.8rem 0 2rem; }
  .marca--rodape img { height: 40px; }

  /* duas colunas alinhadas em vez de linhas quebradas em 2-3-1 */
  .rodape__menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.1rem 1rem;
    width: 100%;
    text-align: center;
  }

  .rodape__legal { font-size: 0.74rem; }
}

/* Abaixo de 540px de viewport o embed fica com menos de 500px e o
   Instagram usa um cabeçalho mais baixo (146px em vez de 157px) */
@media (max-width: 540px) {
  .insta__embed { padding-top: calc(200% / 3 + 146px); }
}

/* Celular deitado: a arte é larga, então ela cabe inteira — só o resto
   da página é que precisa respirar menos. */
@media (max-height: 520px) and (orientation: landscape) {
  .secao { padding: 3rem 0; }
}

/* ============================================================
   TELA DE PRÉ-LANÇAMENTO
   ------------------------------------------------------------
   A classe em-obras é aplicada no <head>, antes da primeira pintura.
   Sem a classe, este bloco fica oculto e o site completo roda normal.

   Composição: um cartão creme centralizado sobre o azul da campanha.
   Metade esquerda = retrato no amarelo 4455; metade direita = selo,
   nome completo, cargo, CNPJ e cronômetro. Os elementos azuis (selo e
   caixas do cronômetro) apoiam-se numa faixa amarela — é a assinatura
   visual da tela e a única liberdade gráfica; o resto fica quieto.
   ============================================================ */
.obras { display: none; }

html.em-obras,
html.em-obras body {
  min-height: 100%;
}

html.em-obras body {
  overflow-x: hidden;
  background: var(--cor-fundo);
  background-image: none;
  color: var(--cor-fundo);
  font-family: var(--fonte-display);
}

/* Mantém o restante do site no arquivo, mas fora da tela e da árvore
   de layout enquanto o cronômetro estiver ativo. */
html.em-obras body > *:not(.obras) { display: none !important; }

html.em-obras .obras {
  display: flex;
  align-items: center;
  /* safe: em telas mais baixas que o cartão, ele encosta no topo em vez
     de ficar centralizado com a cabeça cortada fora da rolagem. */
  align-items: safe center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(1rem, 4vh, 3.4rem) clamp(0.9rem, 5vw, 4rem);
  isolation: isolate;
  background:
    radial-gradient(58rem 44rem at 20% 10%, rgba(33, 106, 228, 0.85), transparent 70%),
    radial-gradient(48rem 40rem at 88% 92%, rgba(12, 64, 190, 0.7), transparent 72%),
    linear-gradient(145deg, #06309f 0%, #032061 100%);
}

/* ---- Cartão ------------------------------------------------ */
.obras__cartao {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  width: min(100%, 1160px);
  overflow: hidden;
  border-radius: clamp(14px, 1.8vw, 26px);
  background: var(--cor-creme);
  box-shadow: 0 38px 90px rgba(1, 14, 58, 0.45);
  animation: obras-entrada 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes obras-entrada {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---- Retrato no amarelo da campanha ------------------------ */
.obras__retrato {
  position: relative;
  min-height: clamp(280px, 30vw, 440px);
  overflow: hidden;
  background: linear-gradient(168deg, #f8dc57 0%, var(--cor-destaque) 46%, #dfa806 100%);
}

/* Clareia o fundo atrás do rosto e escurece a base: dá profundidade
   sem precisar de mais uma imagem. */
.obras__retrato::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 72% at 50% 16%, rgba(255, 255, 255, 0.42), transparent 62%),
    linear-gradient(180deg, transparent 62%, rgba(150, 96, 0, 0.16) 100%);
}

/* Absoluto de propósito: a altura em % só resolve contra um bloco de
   altura definida — e é a coluna de texto que define a altura da linha. */
.obras__retrato img {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  width: auto;
  max-width: none;
  height: 97%;
  filter: drop-shadow(0 16px 24px rgba(126, 82, 0, 0.26));
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
}

/* ---- Painel de conteúdo ------------------------------------ */
.obras__painel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.9rem, 4.4vw, 4.6rem) clamp(1.4rem, 4vw, 4.4rem);
  text-align: left;
}

.obras__eyebrow {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--cor-fundo);
  box-shadow: 0 4px 0 var(--cor-destaque);
  color: #ffffff;
  font-size: clamp(0.62rem, 0.85vw, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.obras__painel h1 {
  margin-top: clamp(1.3rem, 3vw, 2.1rem);
  color: var(--cor-fundo);
  font-size: clamp(2rem, 4.3vw, 3.85rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.obras__cargo {
  margin-top: 0.6rem;
  color: var(--cor-laranja);
  font-size: clamp(0.95rem, 1.55vw, 1.4rem);
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1.15;
  text-transform: uppercase;
}

.obras__cnpj {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  width: 100%;
  margin-top: clamp(1.5rem, 3.2vw, 2.4rem);
  padding: clamp(0.75rem, 1.5vw, 1.05rem) clamp(0.95rem, 1.8vw, 1.35rem);
  border: 1px solid rgba(5, 44, 154, 0.14);
  border-left: 5px solid var(--cor-destaque);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(5, 44, 154, 0.07);
}

.obras__cnpj-rotulo {
  color: var(--cor-fundo);
  font-size: clamp(0.6rem, 0.8vw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.obras__cnpj-numero {
  color: #1b2333;
  font-size: clamp(1.05rem, 1.75vw, 1.55rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.obras__texto {
  margin-top: clamp(1.3rem, 2.6vw, 1.9rem);
  color: #1b2333;
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  font-weight: 700;
}

/* ---- Cronômetro -------------------------------------------- */
.obras__contador {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.45rem, 1vw, 0.85rem);
  width: 100%;
  margin-top: clamp(0.7rem, 1.5vw, 1.05rem);
}

.obras__contador span {
  display: grid;
  min-width: 0;
  min-height: clamp(70px, 7vw, 92px);
  place-content: center;
  border-radius: 10px;
  background: var(--cor-fundo);
  box-shadow:
    0 5px 0 var(--cor-destaque),
    0 14px 26px rgba(5, 44, 154, 0.22);
  text-align: center;
}

.obras__contador b {
  display: block;
  color: #ffffff;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.obras__contador small {
  display: block;
  margin-top: 0.4rem;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--fonte-corpo);
  font-size: clamp(0.56rem, 0.78vw, 0.7rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* ---- Telas estreitas: o cartão empilha --------------------- */
@media (max-width: 760px) {
  html.em-obras .obras {
    padding: clamp(0.8rem, 3vh, 1.6rem) clamp(0.8rem, 4vw, 1.4rem);
  }

  .obras__cartao {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 560px);
    margin-inline: auto;
  }

  /* Deitado, o recorte é largo demais para caber inteiro: ele ocupa a
     largura do cartão e a faixa corta o peito, como no desktop. */
  .obras__retrato {
    min-height: clamp(255px, 72vw, 340px);
  }

  .obras__retrato img {
    top: 6%;
    bottom: auto;
    width: 100%;
    height: auto;
  }

  .obras__painel {
    padding: clamp(1.4rem, 5.5vw, 2.2rem) clamp(1.2rem, 5vw, 2rem) clamp(1.6rem, 6vw, 2.4rem);
  }

  .obras__painel h1 { font-size: clamp(1.75rem, 7.6vw, 2.7rem); }
  .obras__cargo { font-size: clamp(0.88rem, 3.4vw, 1.2rem); }
  .obras__cnpj-numero { font-size: clamp(1rem, 4.4vw, 1.4rem); }
  .obras__contador span { min-height: clamp(62px, 17vw, 82px); }
  .obras__contador b { font-size: clamp(1.35rem, 6.4vw, 2rem); }
  .obras__contador small { font-size: clamp(0.5rem, 2vw, 0.62rem); }
}

@media (max-width: 380px) {
  .obras__eyebrow { padding: 0.5rem 0.75rem; font-size: 0.58rem; letter-spacing: 0.12em; }
  .obras__painel h1 { font-size: 1.62rem; }
  .obras__cnpj { padding: 0.7rem 0.8rem; }
  .obras__contador { gap: 0.35rem; }
}

/* Celular deitado: cabe melhor em duas colunas do que empilhado. */
@media (max-height: 560px) and (orientation: landscape) {
  html.em-obras .obras {
    align-items: center;
    padding: 0.7rem 2.5vw;
  }

  .obras__cartao {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    width: min(100%, 1000px);
  }

  .obras__retrato { min-height: 0; }

  .obras__retrato img {
    top: auto;
    bottom: 0;
    width: auto;
    height: 98%;
  }

  .obras__painel { padding: 1.2rem 1.6rem; }
  .obras__painel h1 { margin-top: 0.7rem; font-size: clamp(1.4rem, 3.6vw, 2rem); }
  .obras__cargo { margin-top: 0.35rem; font-size: 0.82rem; }
  .obras__cnpj { margin-top: 0.7rem; padding: 0.55rem 0.8rem; }
  .obras__cnpj-numero { font-size: 1rem; }
  .obras__texto { margin-top: 0.7rem; font-size: 0.74rem; }
  .obras__contador span { min-height: 54px; }
  .obras__contador b { font-size: 1.25rem; }
  .obras__contador small { margin-top: 0.25rem; font-size: 0.46rem; }
}

@media (prefers-reduced-motion: reduce) {
  .obras__cartao { animation: none; }
}