/* ==========================================================================
   paulinhabraga.com.br — folha de estilo

   Arquivo único. Cores, fontes e espaçamentos vivem na seção 02 (TOKENS):
   mude uma variável lá e ela se propaga pelo site inteiro.

   INDICE
   01. FONTES
   02. TOKENS — cores, tipografia, espaçamentos
   03. RESET
   04. TIPOGRAFIA
   05. LAYOUT — container, seções, grids
   06. BOTÕES
   07. HEADER
   08. FOOTER
   09. CARDS
   10. FORMULÁRIO
   11. GALERIAS
   12. LIGHTBOX
   13. ANIMAÇÃO AO ROLAR
   14. PÁGINA: INÍCIO
   15. PÁGINA: BIOGRAFIA
   16. PÁGINA: GALERIA
   17. PÁGINA: CONTATO
   ========================================================================== */


/* ==========================================================================
   01. FONTES
   ========================================================================== */

/* O subset latino cobre o português inteiro: acentos, cedilha, aspas,
   travessão, símbolos de moeda. Declarar o unicode-range evita que o
   navegador baixe a fonte numa página que só tenha caracteres fora dele.

   As três famílias antigas (Gabarito, DM Sans, Work Sans) saíram junto com a
   identidade antiga. Os arquivos continuam em assets/fonts/ até a Etapa 12,
   caso seja preciso voltar atrás. */

/* Display — títulos. Peso único, bem pesado, com tracking negativo. */
@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivoblack-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Serifada — usada só em palavras de destaque dentro dos títulos, quase
   sempre em itálico. É o contraponto leve ao peso do Archivo Black. */
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrumentserif-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrumentserif-latin-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Corpo e UI — variável de 400 a 900, um arquivo só para todos os pesos. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   02. TOKENS — cores, tipografia, espaçamentos
   ========================================================================== */

:root {
  /* ======================================================================
     IDENTIDADE — extraída do modelo do Claude Design (docs/design/).
     Os valores abaixo foram medidos no mockup renderizado, não estimados.
     ====================================================================== */

  /* ---------- Cores da marca ----------
     Amostradas pixel a pixel das peças oficiais em assets/img, não estimadas
     a olho. O azul #0013E3 aparece idêntico em três arquivos independentes
     (logo empilhado, logo horizontal e a faixa das regiões), então é ele.

     O modelo do Claude Design usava periwinkle #A9BEE4 e verde sálvia
     #72B486. Nenhuma das duas existe nas peças oficiais — foram trocadas
     pelo ciano e pelo laranja da faixa "praia, serra e sertão". */
  --c-azul:        #0013E3;   /* oficial. Primária: botões, títulos */
  --c-amarelo:     #FFBB00;   /* oficial. Base da textura do herói */
  --c-amarelo-2:   #FFCB20;   /* oficial. Onda da textura, tom sobre tom */
  --c-amarelo-logo:#FFCC00;   /* oficial. Amarelo do logo horizontal */
  --c-ouro:        #FFB000;   /* oficial. Numerais do 40345 no logo */
  --c-ciano:       #00CEF3;   /* oficial. Praia, na faixa das regiões */
  --c-laranja:     #FF8E10;   /* oficial. Sertão, na faixa das regiões */
  --c-azul-medio:  #005AFF;   /* oficial. Serra, na faixa das regiões */
  --c-creme:       #FFFBF0;   /* fundo das páginas e texto sobre o azul */

  /* Versão escura do ciano, para escrever sobre branco. O ciano chapado dá
     1,9:1 — serve de fundo, nunca de texto. */
  --c-ciano-escuro: #0E7C99;  /* 4,8:1 sobre branco */

  /* Apelidos de transição: as seções ainda chamam periwinkle e sálvia
     enquanto o HTML não é migrado. REMOVER na Etapa 12. */
  --c-periwinkle:  var(--c-ciano);
  --c-salvia:      var(--c-laranja);
  --c-salvia-escura: var(--c-ciano-escuro);

  /* ---------- Tintas de texto ----------
     Cada fundo da marca tem a sua tinta própria. Não são cinzas neutros:
     puxam para a cor do fundo em que vivem, e é isso que dá a liga. */
  --t-creme:       #0A0A12;   /* sobre creme */
  --t-creme-2:     #2A2A38;   /* sobre creme, secundário */
  --t-ciano:       #04104F;   /* sobre ciano — 8,2:1 */
  --t-laranja:     #0A0A12;   /* sobre laranja — 8,4:1 */
  --t-profundo:    #11113A;   /* fundos escuros pontuais */

  /* Apelidos de transição. REMOVER na Etapa 12. */
  --t-periwinkle:  var(--t-ciano);
  --t-salvia:      var(--t-laranja);

  /* ---------- Legado ----------
     Identidade antiga. As seções 14 a 17 ainda dependem dela enquanto as
     páginas são migradas uma a uma.

     Em vez de manter os valores antigos, cada nome aponta para o seu
     equivalente na paleta nova. Assim as ~40 regras que ainda usam esses
     tokens migram de cor sem serem tocadas, e o site fica coerente durante
     a transição em vez de meio velho e meio novo.

     REMOVER na Etapa 12, junto com as regras que ainda apontarem para cá. */
  --c-navy:        var(--t-creme);     /* era cor de texto na maioria dos usos */
  --c-navy-800:    #0008b4;
  --c-navy-900:    #000689;
  --c-green:       var(--c-azul);
  --c-green-600:   #0008b4;
  --c-mint:        var(--c-amarelo);
  --c-mint-200:    var(--c-periwinkle);

  /* ---------- Cores do jogo ----------
     Vindas da paleta de /jogos. Usadas só no botão de Jogos do menu, para
     ele já parecer o jogo antes mesmo de a criança clicar. */
  --j-amarelo:      #FFC91F;
  --j-amarelo-claro:#FFDE59;
  --j-amarelo-sombra:#D9A200;
  --j-azul-royal:   #1737A3;
  --j-azul-medio:   #1D4FD4;
  --j-azul-claro:   #35B6FF;
  --j-laranja:      #FF8A00;

  /* ---------- Neutros ----------
     Já apontam para a paleta nova. Assim o fundo, o texto corrido e as
     bordas do site inteiro migram de uma vez, enquanto as seções ainda são
     reescritas uma a uma. Os nomes antigos continuam de pé só para as
     regras que ainda não foram tocadas. */
  --c-off-white:   var(--c-creme);
  --c-gray-100:    #F0EADA;   /* cartões e faixas sobre o creme */
  --c-gray-200:    #E0D7C2;   /* bordas sutis */
  --c-white:       #FFFFFF;
  --c-ink:         var(--t-creme);
  --c-muted:       var(--t-creme-2);
  --c-muted-light: #a8b2c1;   /* texto de apoio sobre fundo escuro */

  /* ---------- Tipografia ----------
     Archivo Black nos títulos, Instrument Serif itálico nas palavras de
     destaque dentro deles, Archivo no corpo e na interface. */
  --f-display: 'Archivo Black', 'Archivo', Impact, 'Segoe UI', sans-serif;
  --f-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-body:    'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-ui:      'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Escala fluida — os valores máximos são os medidos no mockup a 1440px */
  --fs-h1:      clamp(2.125rem, 4.40vw, 3.625rem);  /* 34 → 58px, hero */
  --fs-h2:      clamp(1.875rem, 4.40vw, 3.375rem);  /* 30 → 54px, seção */
  --fs-h2-sm:   clamp(1.875rem, 4.00vw, 3.125rem);  /* 30 → 50px, seção menor */
  --fs-h2-xs:   clamp(1.625rem, 3.60vw, 2.875rem);  /* 26 → 46px, CTA final */
  --fs-h3:      clamp(1.5rem,   2.80vw, 2.125rem);  /* 24 → 34px */
  --fs-h4:      1.375rem;                            /* 22px, título de card */
  --fs-lead:    clamp(1rem,     0.96rem + 0.19vw, 1.125rem);  /* 16 → 18px */
  --fs-body:    1rem;                                          /* 16px */

  /* Corpo de leitura. Antes todo o texto corrido do site usava --fs-small
     (14px), pequeno demais para o nosso público — boa parte do eleitorado
     lê no celular e tem mais de 60 anos. --fs-small continua existindo,
     mas agora só para metadados e UI: rodapé, contador, legenda, eyebrow. */
  --fs-text:    clamp(1rem,     0.97rem + 0.14vw, 1.0625rem);  /* 16 → 17px */

  --fs-small:   0.875rem;                                      /* 14px */
  --fs-ui:      0.9375rem;                                     /* 15px */
  --fs-eyebrow: 0.75rem;                                       /* 12px */

  /* Títulos quase colados: é o que dá o ar de cartaz. */
  --lh-h1:    0.94;
  --lh-h2:    1.00;
  --lh-h3:    1.08;
  --lh-body:  1.55;
  --lh-tight: 1.3;

  /* Tracking negativo nos títulos — quanto maior o corpo, mais apertado. */
  --ls-h1:      -2px;
  --ls-h2:      -2px;
  --ls-h2-sm:   -1.6px;
  --ls-h3:      -0.8px;
  --ls-serif:   -0.5px;
  --ls-eyebrow: 0.12em;
  --ls-footnav: 0.08em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ---------- Layout ---------- */
  --container:       1140px;
  --container-wide:  1200px;
  --container-pad:   clamp(1.25rem, 4vw, 2rem);

  /* ---------- Espaçamento ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;

  /* Respiro vertical das seções. O mockup usa 96px no padrão, 80px na faixa
     de canais e 90px no CTA final — daí as três variantes. */
  --section-y:    clamp(3.5rem, 6.7vw, 6rem);    /* 56 → 96px */
  --section-y-sm: clamp(3rem,   5.6vw, 5rem);    /* 48 → 80px */
  --section-y-md: clamp(3.25rem, 6.3vw, 5.625rem); /* 52 → 90px */

  /* ---------- Formas ----------
     A pílula domina: 18 dos 34 raios do mockup são 999px. Botões, chips e
     pastilhas são todos redondos; cartões e imagens ficam quase retos. */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 19, 227, 0.06);
  --shadow:    0 4px 16px rgba(0, 19, 227, 0.08);
  --shadow-md: 0 10px 30px rgba(0, 19, 227, 0.10);
  --shadow-lg: 0 20px 50px rgba(0, 19, 227, 0.14);

  /* ---------- Movimento ---------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  160ms;
  --dur:       280ms;
  --dur-slow:  600ms;

  /* Cena de abertura. A curva passa um pouco do destino e volta: é esse
     overshoot que dá peso às peças, em vez de adesivo deslizando. Vive aqui
     no :root porque a cena deixou de ser exclusiva do herói — a faixa de
     pilares, que hoje fica fora dele, entra na mesma cascata. */
  --ease-entrada: cubic-bezier(0.22, 1.28, 0.36, 1);
  --dur-entrada:  900ms;

  /* ---------- Camadas ---------- */
  --z-header:   100;
  --z-drawer:   200;
  --z-lightbox: 300;

  /* ---------- Gradiente da home ---------- */
  --grad-mint: linear-gradient(180deg, var(--c-gray-100) 0%, var(--c-mint) 100%);

  --header-h: 84px;
}

@media (max-width: 767.98px) {
  :root { --header-h: 68px; }
}

/* Entrelinha dos títulos.

   O mockup usa 0.94 — mas a 58px, onde o título ocupa uma ou duas linhas.
   Abaixo de 992px a escala fluida trava no piso de 34px e o mesmo título
   passa a quebrar em três ou quatro linhas. Com 0.94, "Presença" e
   "construção" batem a cedilha e o til na linha de baixo.

   O corte é 992px e não 768px de propósito: entre 768 e 991 o h1 ainda está
   no piso da clamp, então herdar o valor apertado criaria um salto visível
   bem no meio da faixa de tablet. */
@media (max-width: 991.98px) {
  :root {
    --lh-h1: 1.12;
    --lh-h2: 1.18;
  }
}


/* ==========================================================================
   03. RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  /* dvh acompanha a barra de URL do iOS. Com 100vh, qualquer efeito indexado
     à altura da viewport salta no meio do gesto de rolagem. */
  min-height: 100vh;
  min-height: 100dvh;

  /* O `overflow-x: hidden` que existia aqui foi removido na reestruturação.
     Ele escondia o sintoma e, em alguns engines, transforma o body em
     container de rolagem — o que dessincroniza window.scrollY do scroll real
     e quebra parallax e position:sticky. Overflow lateral agora é tratado na
     origem. Se voltar a aparecer, procure a causa, não recoloque esta linha. */

  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-navy);
  background-color: var(--c-off-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

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

button { background: none; border: none; cursor: pointer; }

/* Foco de teclado.

   O verde da marca sobre o off-white dá 2,42:1 — abaixo do mínimo de 3:1 do
   WCAG 1.4.11, ou seja, o indicador era quase invisível. E o border-radius
   aqui deformava o PRÓPRIO elemento ao receber foco, não a outline.

   A solução é um anel duplo: branco por dentro, navy por fora. Sobre fundo
   claro enxerga-se o navy (16,2:1); sobre as seções navy enxerga-se o branco
   (16,2:1). Sempre um dos dois aparece, sem precisar saber o fundo. */
:focus-visible {
  outline: 3px solid var(--c-creme);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--c-azul);
}

/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Acessível para leitor de tela, invisível na tela */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Pular para o conteúdo */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }


/* ==========================================================================
   04. TIPOGRAFIA
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: var(--fw-regular);   /* Archivo Black só tem o 400 */
  color: var(--t-creme);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }

/* Palavra de destaque dentro de um título. É o gesto que define a marca:
   o peso do Archivo Black cortado por uma serifada leve em itálico.

        Transparência e presença [ativa]
        A deputada [de] Itapipoca

   Por ser decorativo e não semântico, usa <span class="serif">, nunca <em>. */
.serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-serif);
}
.serif--reto { font-style: normal; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-tight); }

/* Parágrafo herda a cor da seção onde está, em vez de fixar a sua própria.

   Na identidade nova cada fundo traz a sua tinta: creme pede #0A0A12,
   periwinkle pede #0A1046, sálvia pede #00110A, azul e amarelo pedem creme.
   Uma cor fixa aqui vencia todas elas por especificidade e deixava, por
   exemplo, o texto da seção de Jogos quase preto sobre o azul elétrico.
   O padrão do site continua vindo do body. */
p { color: inherit; }

/* Rótulo pequeno em maiúsculas acima dos títulos ("CONEXÃO DIRETA", "TRAJETÓRIA") */
.eyebrow {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-4);
}
.eyebrow--green { color: var(--c-green); }
.eyebrow--light { color: var(--c-mint); }

/* Parágrafo de apoio logo abaixo do título */
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--c-navy);
  max-width: 58ch;
}

.text-muted { color: var(--c-muted); }
.text-green { color: var(--c-green); }
.text-center { text-align: center; }

/* Blocos sobre fundo navy */
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark p { color: var(--c-off-white); }
.on-dark .lead { color: var(--c-muted-light); }

/* Destaque em negrito dentro de títulos (ex.: "compromisso real") */
.title-strong { font-weight: var(--fw-bold); }

/* --------------------------------------------------------------------------
   Correções de contexto

   `.on-dark` pinta tudo de claro, mas alguns componentes são "ilhas claras"
   dentro da seção escura (o card branco de redes sociais, por exemplo) e
   precisam voltar ao navy. Também os eyebrows coloridos precisam vencer a
   regra genérica de parágrafo — daí a especificidade dobrada.
   -------------------------------------------------------------------------- */

.on-dark .eyebrow--light,
.eyebrow--light { color: var(--c-mint); }

.on-dark .eyebrow--green,
.eyebrow--green { color: var(--c-green); }

/* Ilha clara: qualquer conteúdo dentro de um card branco volta ao navy */
.on-dark .social-card,
.on-dark .social-card h1,
.on-dark .social-card h2,
.on-dark .social-card h3,
.on-dark .social-card h4 { color: var(--c-navy); }

.on-dark .social-card p { color: var(--c-muted); }
.on-dark .social-card__title { color: var(--c-navy); }

/* Destaque verde dentro de um título sobre fundo escuro ("ideias") */
.on-dark .text-green,
.text-green { color: var(--c-green); }

/* Respiro entre um título e o parágrafo que o segue.
   Blocos com margem própria (classes) continuam mandando. */
h1 + p, h2 + p, h3 + p, h4 + p { margin-top: var(--sp-5); }


/* ==========================================================================
   05. LAYOUT — container, seções, grids
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
/* Seção de fundo cheio. O nome ainda é --navy por causa do HTML que ainda
   não foi migrado, mas a cor agora é o azul elétrico da marca. As seções que
   usam isso hoje (Canais e Pilares) viram periwinkle e sálvia nas Etapas 4
   e 7 — aqui é só o estado de transição. */
.section--navy { background-color: var(--c-azul); }
.section--periwinkle { background-color: var(--c-periwinkle); color: var(--t-periwinkle); }
.section--salvia     { background-color: var(--c-salvia);     color: var(--t-salvia); }
.section--amarelo    { background-color: var(--c-amarelo);    color: var(--c-azul); }
.section--creme      { background-color: var(--c-creme);      color: var(--t-creme); }
.section--gray { background-color: var(--c-gray-100); }
.section--mint { background: var(--grad-mint); }

/* Duas colunas: texto + imagem */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--media-first > .split__media { order: -1; }

@media (max-width: 991.98px) {
  .split { grid-template-columns: 1fr; }
  .split--media-first > .split__media { order: 0; }
}

/* Pilha vertical com espaçamento consistente */
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* Linha de botões */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.actions--center { justify-content: center; }

/* Cabeçalho de seção centralizado */
.section-head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.section-head .lead { margin-inline: auto; }

/* Quando a imagem vem primeiro, ela ocupa menos que a coluna de texto —
   proporção medida no original (~431px de imagem para ~600px de texto). */
.split--media-first { grid-template-columns: 0.8fr 1fr; }

@media (max-width: 991.98px) {
  .split--media-first { grid-template-columns: 1fr; }
}


/* ==========================================================================
   06. BOTÕES
   ========================================================================== */

/* Pílula. Medidas do mockup: 15px 26px, raio 999px, Archivo 16px.
   A altura resultante fica em ~52px, acima do mínimo de 44px de toque. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.9375rem 1.625rem;
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  text-align: center;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}

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

/* Primário — azul elétrico sobre qualquer fundo claro da marca. */
.btn--primary {
  background-color: var(--c-azul);
  color: var(--c-creme);
}
.btn--primary:hover {
  background-color: #0008b4;
  box-shadow: 0 10px 30px rgba(0, 19, 227, 0.30);
}

/* Fantasma — sobre o amarelo do hero. O fundo translúcido dá corpo ao
   botão sem fechar a cor de trás. */
/* Creme sobre o amarelo dava 1,47:1 — o botao sumia. Contorno azul sobre
   veu creme: mesma silhueta, 5,8:1. */
.btn--ghost {
  background-color: rgba(255, 251, 240, 0.55);
  color: var(--c-azul);
  border-color: var(--c-azul);
}
.btn--ghost:hover {
  background-color: var(--c-azul);
  color: var(--c-amarelo);
}

/* Sobre fundos escuros ou saturados (sálvia, azul), o texto do primário
   vira amarelo para ganhar separação. */
.on-azul .btn--primary,
.on-salvia .btn--primary { color: var(--c-amarelo); }

/* Contorno — sobre fundo claro */
.btn--outline {
  background-color: transparent;
  color: var(--c-azul);
  border-color: var(--c-azul);
}
.btn--outline:hover { background-color: var(--c-azul); color: var(--c-creme); }

/* Legado — .btn--green ainda aparece no formulário de contato e no CTA da
   galeria. O verde antigo dava 3,47:1 com branco no hover, abaixo do AA.
   Aponta para o primário até essas páginas serem migradas (Etapas 10 e 11).
   REMOVER na Etapa 12. */
.btn--green {
  background-color: var(--c-azul);
  color: var(--c-creme);
}
.btn--green:hover {
  background-color: #0008b4;
  color: var(--c-creme);
  box-shadow: 0 10px 30px rgba(0, 19, 227, 0.30);
}

.btn--full { width: 100%; }

.btn[disabled], .btn[aria-busy='true'] {
  opacity: 0.6;
  pointer-events: none;
  transform: none;
}


/* ==========================================================================
   07. HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--c-off-white);
  transition: box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
/* SEM backdrop-filter aqui, de proposito.
   Ele criava um "containing block": todo position:fixed dentro do header
   passava a se posicionar em relacao AO HEADER, nao a janela. Isso gerava
   DOIS bugs, ambos so ao rolar a pagina:
     - o menu FECHADO (deslocado 100% para a direita) passava a contar no
       scroll da pagina e criava uma rolagem lateral de ~300px;
     - o menu ABERTO virava uma faixa fina colada no topo.
   O fundo quase opaco + a sombra ja dao a separacao visual ao rolar. */
.site-header.is-scrolled {
  box-shadow: var(--shadow);
  background-color: rgba(248, 250, 252, 0.97);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: var(--header-h);
}

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* A logo oficial é uma imagem: a altura manda, a largura acompanha.
   O arquivo já vem recortado no conteúdo, sem margem branca em volta. */
/* O logo horizontal oficial é bem largo (900×151, proporção 5,96) e traz
   duas linhas finas de assinatura acima e abaixo do "PAULINHA". Com os 42px
   de altura do logo antigo essas linhas ficavam com menos de 3px e
   sumiam — daí a altura maior aqui. */
.logo__img {
  width: auto;
  height: 52px;
  transition: transform var(--dur) var(--ease);
}
.logo:hover .logo__img { transform: scale(1.03); }

@media (max-width: 991.98px) {
  .logo__img { height: 40px; }
}
@media (max-width: 400px) {
  /* Abaixo disso o logo disputaria espaço com o hambúrguer. */
  .logo__img { height: 34px; }
}

/* ---------- Navegação ---------- */
.nav { display: flex; align-items: center; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.5rem;
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  font-weight: var(--fw-regular);
  color: var(--c-navy);
  transition: color var(--dur) var(--ease);
}

/* Sublinhado que cresce no hover e fica fixo no item ativo */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current='page'] {
  font-weight: var(--fw-medium);
}
.nav__link[aria-current='page']::after { transform: scaleX(1); }

/* ---------- Botão hambúrguer ---------- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-right: -10px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--c-navy);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile: drawer lateral ---------- */
@media (max-width: 991.98px) {
  .nav-toggle {
    display: flex;
    /* acima do drawer: sem isto o botão fica atrás do menu aberto e o X,
       que já existe (as barras viram um X), nunca aparece */
    position: relative;
    z-index: calc(var(--z-drawer) + 1);
  }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 82vw);
    /* o .nav é flex com align-items:center por padrão (desktop). No drawer isso
       centralizava tudo na vertical — aqui o conteúdo começa no topo. */
    align-items: flex-start;
    overflow-y: auto;
    padding: calc(var(--header-h) + var(--sp-5)) var(--sp-6) var(--sp-8);
    background-color: var(--c-white);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease-out);
    z-index: var(--z-drawer);
  }
  .nav.is-open { transform: translateX(0); }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
    width: 100%;
  }
  .nav__link { font-size: 1.125rem; }

  /* Telas baixas (paisagem, aparelho pequeno): o menu inteiro não cabe e o
     botão de Jogos, que fica no fim, saía da área visível. Aperta o respiro
     para caber sem precisar rolar. */
  @media (max-height: 620px) {
    .nav { padding-top: calc(var(--header-h) + var(--sp-3)); padding-bottom: var(--sp-5); }
    .nav__list { gap: var(--sp-4); }
    .nav__link { font-size: 1rem; }
    .nav__item--jogos { margin-top: var(--sp-2); }
    .jogos-cta--nav { padding-top: 0.7rem; padding-bottom: 0.7rem; }
    .jogos-cta--nav .jogos-cta__mascote--paulinha { height: 66px; }
    .jogos-cta--nav .jogos-cta__mascote--tico     { height: 50px; }
  }

  /* Véu escuro atrás do drawer */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(10, 10, 18, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
    z-index: calc(var(--z-drawer) - 1);
  }
  .nav-backdrop.is-visible { opacity: 1; visibility: visible; }

  body.nav-open { overflow: hidden; }

  /* O menu vive dentro do header, que tem z-index próprio (100) — e isso prende
     tudo que está dentro dele a esse nível. Como o véu é filho do body e fica
     em 199, ele passava POR CIMA do drawer e o deixava acinzentado. Enquanto o
     menu está aberto, o header sobe junto. */
  body.nav-open .site-header { z-index: var(--z-drawer); }
}


/* --------------------------------------------------------------------------
   JOGOS — o único elemento colorido do site

   O site é sóbrio; o jogo é para criança. Este componente faz a ponte: usa a
   paleta de /jogos (tokens --j-*) para a criança reconhecer o destino antes
   mesmo de clicar.

   Duas formas, mesmo componente:
     .jogos-cta--nav      no menu. Pastilha no desktop, banner no mobile.
     .jogos-cta--banner   na home, acima do hero. SÓ no mobile.

   A forma "pastilha" é o padrão; abaixo de 860px os dois viram banner.
   -------------------------------------------------------------------------- */

.jogos-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.05rem;
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  color: var(--j-azul-royal);
  background: linear-gradient(160deg, var(--j-amarelo-claro) 0%, var(--j-amarelo) 100%);
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 var(--j-amarelo-sombra), 0 6px 16px rgba(255, 201, 31, 0.45);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* no menu, o sublinhado dos outros itens não se aplica */
.jogos-cta::after { content: none; }

.jogos-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--j-amarelo-sombra), 0 10px 22px rgba(255, 201, 31, 0.55);
}
.jogos-cta:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--j-amarelo-sombra), 0 3px 10px rgba(255, 201, 31, 0.4);
}

/* página atual: fica "afundado", sem o relevo de botão */
.jogos-cta[aria-current='page'] {
  box-shadow: inset 0 2px 5px rgba(23, 55, 163, 0.28);
  transform: none;
}

.jogos-cta__icone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Balancinho de vez em quando, só para o olho pegar.
   Silencioso para quem pediu menos movimento (regra na seção 03). */
@keyframes jogos-chama {
  0%, 88%, 100% { transform: rotate(0deg); }
  91%           { transform: rotate(-9deg); }
  94%           { transform: rotate(9deg); }
  97%           { transform: rotate(-4deg); }
}
.jogos-cta__icone { animation: jogos-chama 6s ease-in-out infinite; }

/* No desktop só o rótulo curto aparece, e o banner da home fica fora */
.jogos-cta__sub,
.jogos-cta__mascote { display: none; }
.jogos-cta--banner { display: none; }

/* ---------- Mobile: os dois viram banner ---------- */
@media (max-width: 991.98px) {

  .jogos-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'icone titulo mascote'
      'icone sub    mascote';
    align-items: center;
    column-gap: 0.6rem;
    width: 100%;
    padding: 1.1rem 0.5rem 1.1rem 1rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 0 var(--j-amarelo-sombra), 0 10px 24px rgba(255, 201, 31, 0.4);
  }

  /* raios de sol atrás, como na tela inicial do jogo */
  .jogos-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -30%;
    width: 200px;
    height: 200px;
    transform: translateY(-50%);
    background: repeating-conic-gradient(from 0deg,
                rgba(255, 255, 255, 0.5) 0deg 5deg, transparent 5deg 22deg);
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 70%);
    mask-image: radial-gradient(circle, #000 0%, transparent 70%);
    pointer-events: none;
  }

  .jogos-cta__icone {
    grid-area: icone;
    width: 26px;
    height: 26px;
    animation: none;   /* no banner o mascote já flutua; não precisa balançar */
  }

  .jogos-cta__texto {
    grid-area: titulo;
    font-family: var(--f-display);
    font-size: 1.35rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }

  .jogos-cta__sub {
    display: block;
    grid-area: sub;
    font-size: 0.7rem;
    font-weight: var(--fw-medium);
    line-height: 1.25;
    /* Era var(--j-azul-medio), #1D4FD4. Medido contra a ponta escura do
       gradiente (#FFC91F): 4,37:1 — abaixo dos 4,5:1 que texto pequeno
       exige, e este tem 11,2px. Não passa.

       O valor aqui é escurecido só o necessário: 4,64:1, ainda a 85% do
       caminho entre o azul do título e o médio original, então a hierarquia
       entre título e convite continua visível.

       Por que não corrigir o token: --j-azul-medio é da paleta de /jogos,
       que está fora do redesenho. Mexer nele mudaria o jogo inteiro para
       resolver um subtítulo. */
    color: #1C4BCD;
  }

  /* A dupla: Paulinha e o Tico, como na tela inicial do jogo.
     Ficam colados na base do card e "saem" um pouco por baixo, como adesivo. */
  .jogos-cta__mascotes {
    grid-area: mascote;
    display: flex;
    align-items: flex-end;
    margin: 0 -0.15rem -0.9rem 0;
  }

  .jogos-cta__mascote {
    display: block;
    width: auto;
    filter: drop-shadow(0 4px 6px rgba(23, 55, 163, 0.3));
    animation: jogos-flutua 3.4s ease-in-out infinite;
  }

  /* A Paulinha é bem mais estreita (189x700) que o Tico (577x700), então
     precisa de mais altura para ter a mesma presença visual. */
  .jogos-cta__mascote--paulinha { height: 104px; position: relative; z-index: 1; }
  .jogos-cta__mascote--tico     { height: 78px; margin-left: -0.35rem; animation-delay: 0.9s; }

  /* No menu o card é bem mais estreito que na home (244px contra 320px), então
     a dupla e a tipografia encolhem juntas — senão o título quebra no meio
     ("Jogue / agora") e o convite fica espremido contra os mascotes. */
  .jogos-cta--nav .jogos-cta__mascote--paulinha { height: 84px; }
  .jogos-cta--nav .jogos-cta__mascote--tico     { height: 62px; }
  .jogos-cta--nav .jogos-cta__texto { font-size: 1.05rem; }
  .jogos-cta--nav .jogos-cta__sub   { font-size: 0.66rem; }
  .jogos-cta--nav .jogos-cta__icone { width: 22px; height: 22px; }

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

  /* no menu, empurra o banner para o fim da lista */
  .nav__item--jogos { width: 100%; margin-top: var(--sp-3); }

  /* na home, entra acima do hero */
  .jogos-cta--banner {
    display: grid;
    margin-bottom: var(--sp-6);
  }
}

/* ---------- Faixa que segura o banner, acima do herói ----------

   POR QUE SÓ NO CELULAR
   No desktop a pastilha "Jogue agora" já está no menu, sempre à vista. No
   celular ela fica atrás do sanduíche: medido, a gaveta está deslocada 320px
   para fora da tela, então hoje ninguém vê o jogo sem antes abrir o menu.
   Aqui ele aparece antes de qualquer rolagem, que é onde a criança está.

   POR QUE A SEÇÃO INTEIRA SOME, E NÃO SÓ O CARTÃO
   `.jogos-cta--banner` já nasce `display: none` fora do celular, mas a
   `<section>` em volta continuaria no fluxo: uma faixa vazia com padding,
   empurrando o herói para baixo no desktop sem nada dentro.

   O fundo é creme, igual ao do cabeçalho logo acima — a faixa lê como
   continuação dele, e o amarelo do herói começa depois, inteiro. */
.faixa-jogo { display: none; }

@media (max-width: 991.98px) {
  .faixa-jogo {
    display: block;
    background-color: var(--c-creme);
    padding-top: var(--sp-4);
  }

  .faixa-jogo__interno {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: var(--sp-5);
  }

  /* ---------- Os dois cartões lado a lado ----------

     Em teste: colinha e jogo dividindo a largura que era de um só.

     O QUE SAI NA VERSÃO COMPACTA
     Com metade da largura o convite ("Salve o número no celular" / "Mostre
     que você é o melhor") não cabe em linha legível — sairia com duas ou
     três palavras por linha. Ele some, e ficam ícone, nome e arte: o mínimo
     para a pessoa saber o que o toque vai fazer.

     A arte desce para a linha de baixo, ocupando as duas colunas e
     encostando na borda, em vez de disputar espaço lateral com o nome. */
  .faixa-jogo__par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    align-items: stretch;
    margin-bottom: var(--sp-6);
  }

  /* Ícone ACIMA do nome, não ao lado.

     Medido a 390px: o cartão tem 158px, o ícone ao lado deixa 108px para o
     texto, e "Colinha digital" em Archivo Black a 15,2px precisa de 120px —
     quebrava em duas linhas enquanto "Jogue agora" (103px) ficava em uma. Os
     dois cartões saíam com títulos de alturas diferentes.

     Empilhando, o nome recebe os 135px da largura inteira e cabe em uma
     linha nos dois cartões, sem precisar encolher a fonte. Encolher seria a
     outra saída: 13px faria caber ao lado, mas é pequeno demais para um
     rótulo que é a única explicação do cartão. */
  .faixa-jogo__par .jogos-cta,
  .faixa-jogo__par .colinha-cta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'icone'
      'titulo'
      'arte';
    row-gap: 0.15rem;
    padding: 0.55rem 0.7rem 0;
    /* a arte sangra por baixo; o cartão apara */
    overflow: hidden;
  }

  /* o cartão do jogo carregava a margem sozinho; agora ela é do par */
  .faixa-jogo__par .jogos-cta--banner { margin-bottom: 0; }

  .faixa-jogo__par .jogos-cta__sub,
  .faixa-jogo__par .colinha-cta__sub { display: none; }

  .faixa-jogo__par .jogos-cta__icone,
  .faixa-jogo__par .colinha-cta__icone { width: 18px; height: 18px; }

  .faixa-jogo__par .jogos-cta__texto,
  .faixa-jogo__par .colinha-cta__texto {
    font-size: 0.95rem;
    line-height: 1.05;
    align-self: center;
  }

  /* A dupla de mascotes e a miniatura da colinha ocupam o mesmo lugar: a
     faixa de baixo, encostadas à direita e sangrando para fora. */
  /* A arte é o item mais alto do cartão, então é dela que sai a maior
     parte da redução: 66px -> 50px, e sangra mais por baixo. O recorte do
     cartão apara o excesso, então o que se perde é pé de mascote, não
     rosto. */
  .faixa-jogo__par .jogos-cta__mascotes {
    grid-area: arte;
    justify-content: flex-end;
    margin: 0 -0.2rem -0.7rem 0;
  }
  .faixa-jogo__par .jogos-cta__mascote--paulinha { height: 50px; }
  .faixa-jogo__par .jogos-cta__mascote--tico     { height: 38px; }

  .faixa-jogo__par .colinha-cta__arte {
    grid-area: arte;
    display: flex;
    justify-content: flex-end;
    margin: 0 0 -0.7rem 0;
  }
  .faixa-jogo__par .colinha-cta__arte img {
    height: 50px;
    border-width: 2px;
    transform: rotate(-3deg);
  }

  /* O banner da colinha existe só aqui; fora daqui ela é pastilha de menu. */
  .colinha-cta--banner { display: grid; }
}


/* --------------------------------------------------------------------------
   COLINHA NO MENU

   Irmão do botão dos jogos: mesma ideia de "pastilha no desktop, banner no
   celular", mesma estrutura de ícone + título + convite + arte.

   POR QUE AZUL, E NÃO AMARELO COMO O DOS JOGOS
   Os dois ficam lado a lado. O dos jogos usa a paleta de /jogos para a
   criança reconhecer o destino; este usa o azul primário da marca, que é a
   cor de ação do site inteiro. Cores diferentes porque são ações diferentes
   — e porque duas pastilhas amarelas grudadas viram uma mancha só.

   NO MENU A COLINHA VEM ANTES DO JOGO
   Na gaveta do celular a ordem é a de importância: a colinha é a ação
   eleitoral, o jogo é desvio de atenção.
   -------------------------------------------------------------------------- */

.colinha-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.05rem;
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  color: var(--c-creme);
  background-color: var(--c-azul);
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 #0008b4, 0 6px 16px rgba(0, 19, 227, 0.35);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}

/* no menu, o sublinhado dos outros itens não se aplica */
.colinha-cta::after { content: none; }

.colinha-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #0008b4, 0 10px 22px rgba(0, 19, 227, 0.45);
}
.colinha-cta:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #0008b4, 0 3px 10px rgba(0, 19, 227, 0.3);
}

.colinha-cta__icone { width: 18px; height: 18px; flex-shrink: 0; }

/* A seta desce de leve, de vez em quando: diz "isto baixa" sem texto extra.
   Silenciosa para quem pediu menos movimento (regra na seção 03). */
@keyframes colinha-baixa {
  0%, 86%, 100% { transform: translateY(0); }
  91%           { transform: translateY(3px); }
  96%           { transform: translateY(0); }
}
.colinha-cta__icone { animation: colinha-baixa 7s ease-in-out infinite; }

/* No desktop só o rótulo curto aparece, e o banner não existe */
.colinha-cta__sub,
.colinha-cta__arte { display: none; }
.colinha-cta--banner { display: none; }

/* ---------- Mobile: vira banner, igual ao dos jogos ---------- */
@media (max-width: 991.98px) {
  .colinha-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'icone titulo arte'
      'icone sub    arte';
    align-items: center;
    column-gap: 0.6rem;
    width: 100%;
    padding: 1rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 0 #0008b4, 0 10px 24px rgba(0, 19, 227, 0.32);
  }

  .colinha-cta__icone {
    grid-area: icone;
    width: 26px;
    height: 26px;
    animation: none;   /* no banner a arte já mostra do que se trata */
  }

  .colinha-cta__texto {
    grid-area: titulo;
    font-family: var(--f-display);
    font-size: 1.05rem;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }

  .colinha-cta__sub {
    display: block;
    grid-area: sub;
    font-size: 0.66rem;
    font-weight: var(--fw-medium);
    line-height: 1.25;
    color: var(--c-amarelo);
  }

  /* A miniatura da colinha ocupa aqui o lugar que os mascotes ocupam no
     banner dos jogos: mostra o que vem no download antes do toque. */
  .colinha-cta__arte { display: block; grid-area: arte; }
  .colinha-cta__arte img {
    display: block;
    width: auto;
    height: 62px;
    border-radius: 3px;
    border: 2px solid var(--c-creme);
    box-shadow: 0 4px 10px rgba(4, 16, 79, 0.4);
    transform: rotate(-3deg);
  }

  /* na gaveta, o item ocupa a linha inteira, como o dos jogos */
  .nav__item--colinha { width: 100%; margin-top: var(--sp-3); }
  /* com dois banners seguidos, o segundo não precisa do respiro cheio */
  .nav__item--colinha + .nav__item--jogos { margin-top: var(--sp-3); }
}

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


/* ==========================================================================
   08. FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--c-gray-100);
  padding-block: var(--sp-9) var(--sp-8);
  text-align: center;
}

/* Traço verde curto acima do nome */
.site-footer__rule {
  width: 44px;
  height: 3px;
  margin: 0 auto var(--sp-6);
  background-color: var(--c-green);
  border: 0;
  border-radius: var(--radius-pill);
}

.site-footer__name {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-weight: var(--fw-medium);
  color: var(--c-navy);
}

.site-footer__tagline {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  color: var(--c-muted);
}

/* Navegação secundária: INÍCIO · BIOGRAFIA · GALERIA · CONTATO */
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-6);
  list-style: none;
  padding: 0;
}
.site-footer__nav li { display: flex; align-items: center; gap: var(--sp-4); }
.site-footer__nav li + li::before {
  content: '·';
  color: var(--c-muted);
}
/* Tinha ~23px de altura, metade do mínimo de toque. O padding vertical
   resolve sem mexer no tamanho da letra nem no ritmo visual do rodapé. */
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-2);
  font-family: var(--f-ui);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-footnav);
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--dur) var(--ease);
}
.site-footer__nav a:hover { color: var(--c-navy); }

.site-footer__divider {
  max-width: 680px;
  margin: var(--sp-6) auto;
  border: 0;
  border-top: 1px solid var(--c-gray-200);
}

.site-footer__copy {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* Bloco de dados legais: Nome / CPF / Endereço / E-mail */
.site-footer__legal {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: var(--sp-2) var(--sp-7);
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--c-navy);
  text-align: left;
}
.site-footer__legal dt {
  display: inline;
  font-weight: var(--fw-bold);
}
.site-footer__legal dd {
  display: inline;
  margin: 0;
  color: var(--c-ink);
}
.site-footer__legal a { text-decoration: underline; text-underline-offset: 2px; }
.site-footer__legal a:hover { color: var(--c-green-600); }

.site-footer__legal-item { white-space: nowrap; }

@media (max-width: 575.98px) {
  .site-footer__legal {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--sp-2);
  }
  .site-footer__legal-item { white-space: normal; }
}


/* ==========================================================================
   09. CARDS
   ========================================================================== */

/* ---------- Card de contato (WhatsApp / Instagram / E-mail) ---------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-9);
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-7) var(--sp-6);
  background-color: var(--c-gray-100);
  border-radius: var(--radius-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.contact-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-5);
  background-color: var(--c-mint-200);
  border-radius: var(--radius-md);
  color: var(--c-navy);
}
.contact-card__icon svg { width: 24px; height: 24px; }

.contact-card__title {
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--c-navy);
}

.contact-card__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-text);
  color: var(--c-muted);
  max-width: 26ch;
}

.contact-card .btn { margin-top: var(--sp-6); }

@media (max-width: 991.98px) {
  .contact-cards { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}

/* ---------- Card "Redes Sociais" da home ---------- */
.social-card {
  max-width: 22rem;
  margin: var(--sp-9) auto 0;
  padding: var(--sp-6);
  background-color: var(--c-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  text-align: left;
}

.social-card__badge {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-5);
  background-color: var(--c-gray-100);
  border-radius: var(--radius-sm);
  color: var(--c-navy);
}
.social-card__badge svg { width: 20px; height: 20px; }

.social-card__title {
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--c-navy);
}

.social-card__links {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
/* 44×44 é o mínimo de alvo de toque. Estava 40×40. O ícone continua com
   34px: quem cresce é a área clicável, não o desenho. */
.social-card__links a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--c-navy);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social-card__links a:hover { transform: scale(1.12); color: var(--c-green-600); }
.social-card__links svg { width: 34px; height: 34px; }

.social-card__text {
  margin-top: var(--sp-4);
  font-size: var(--fs-text);
  color: var(--c-muted);
}


/* ==========================================================================
   10. FORMULÁRIO
   ========================================================================== */

.form { display: grid; gap: var(--sp-5); }

.field { display: grid; gap: var(--sp-2); }

.field__label {
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  color: var(--c-off-white);
}
/* O asterisco de campo obrigatório. Apontava para o token verde antigo, que
   na migração virou azul — e o formulário vive numa seção azul, então ele
   sumia. Herda a cor do rótulo, que já é a correta para o fundo. */
.field__required { color: inherit; margin-left: 0.15em; }

.field__control {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  color: var(--c-navy);
  background-color: var(--c-off-white);
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__control::placeholder { color: var(--c-muted); }
.field__control:focus {
  outline: none;
  border-color: var(--c-azul);
  /* O halo era rgba(16,185,129,.2) — o verde da identidade antiga, escrito
     à mão e por isso não migrou junto com os tokens. Agora é o azul oficial. */
  box-shadow: 0 0 0 4px rgba(0, 19, 227, 0.28);
}

textarea.field__control { min-height: 8rem; resize: vertical; }

.field.has-error .field__control { border-color: #ef6b6b; }
.field__error {
  display: none;
  font-size: var(--fs-small);
  color: #ffb4b4;
}
.field.has-error .field__error { display: block; }

/* Honeypot — invisível para humanos, atrativo para bots */
.field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit { margin-top: var(--sp-2); justify-self: start; }

.form__feedback {
  display: none;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  font-size: var(--fs-ui);
  font-family: var(--f-ui);
}
.form__feedback.is-visible { display: block; }
.form__feedback--success {
  background-color: rgba(16, 185, 129, 0.16);
  border: 1px solid var(--c-green);
  color: var(--c-off-white);
}
.form__feedback--error {
  background-color: rgba(239, 107, 107, 0.16);
  border: 1px solid #ef6b6b;
  color: #ffd7d7;
}

.btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn[aria-busy='true'] .btn__spinner { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   11. GALERIAS
   ========================================================================== */

/* ---------- Mosaico da home (4 + 2) ---------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  max-width: 860px;   /* largura de composição, não é breakpoint */
  margin-inline: auto;
}
.mosaic__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1;   /* quadrado, como no site original */
  background-color: var(--c-gray-100);
}
.mosaic__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.mosaic__item:hover img { transform: scale(1.06); }

/* Em 768px (iPad em pé) as 4 colunas davam miniaturas de 164px — não se
   reconhece rosto nenhum nesse tamanho, e são fotos de pessoas. Passa a
   3 colunas no tablet e 2 no celular. */
@media (max-width: 991.98px) {
  .mosaic { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Grade da página /galeria ---------- */

.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1;
  background-color: var(--c-gray-100);
  cursor: zoom-in;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.06); }

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 18, 0.62) 100%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery-item:hover::after { opacity: 1; }


/* ---------- Página /contato: formulário ----------
   Fundo azul. Os rótulos e o texto ficam em creme, que sobre o azul dá
   16,2:1 — o oposto exato do que acontecia no amarelo. */
.contato-form {
  background-color: var(--c-azul);
  color: var(--c-creme);
  padding-block: var(--section-y);
}
.contato-form__grade {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--sp-8);
  align-items: start;
}
.contato-form__titulo { margin: 14px 0 0; color: var(--c-amarelo); }
.contato-form__titulo .serif { color: var(--c-creme); }
.contato-form__texto { margin: var(--sp-4) 0 0; font-size: 1.125rem; line-height: 1.55; max-width: 40ch; }
.contato-form .eyebrow-serif { color: var(--c-amarelo); }

.contato-form .field__label { color: var(--c-creme); }

/* O botão primário é azul. Numa seção azul ele desaparece — 1,00:1, texto
   flutuando sem pílula. Sobre fundo azul o primário vira amarelo.
   Vale para qualquer seção azul, não só esta, para o problema não voltar
   quando surgir a próxima. */
.contato-form :is(.btn--primary, .btn--green),
.jogos-home :is(.btn--primary, .btn--green) {
  background-color: var(--c-amarelo);
  color: var(--c-azul);
}
.contato-form :is(.btn--primary, .btn--green):hover,
.jogos-home :is(.btn--primary, .btn--green):hover {
  background-color: var(--j-amarelo-claro);
  color: var(--c-azul);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.contato-form .form__submit { margin-top: var(--sp-4); }

@media (max-width: 991.98px) {
  .contato-form__grade { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---------- Página /galeria ---------- */
.galeria-pagina { background-color: var(--c-creme); padding-block: var(--section-y); }
.galeria-pagina__interno {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.galeria-pagina__titulo { margin: 14px 0 0; max-width: 20ch; }
.galeria-pagina .pendente { margin-top: var(--sp-8); }


/* ==========================================================================
   GRADE DA GALERIA

   Duas fotos por linha, todas do mesmo tamanho.

   POR QUE NÃO É MAIS MOSAICO
   A versão anterior dava a cada foto um número diferente de colunas e
   linhas, para criar variedade a partir de uma grade — as 25 fotos são
   todas 3:2 deitadas, então a variedade não podia vir delas. Funcionava,
   mas o resultado escolhido foi outro: um formato só, repetido, que dá à
   página ritmo de álbum em vez de ritmo de colagem.

   DE ONDE VEM ESTE FORMATO
   Não foi escolhido no olho: é a medida exata da célula que ficou boa no
   mosaico anterior, a que segurava a caminhada-05. Medido antes de mexer —
   590x287 no desktop (2,06) e 160x164 no celular (0,97), que é o mesmo
   "2 colunas x 2 linhas" nas duas larguras.

   O QUE ISSO CUSTA, DITO CLARO
   A 2,06 o recorte descarta 27% da ALTURA de uma foto 3:2; no celular, a
   0,97, descarta 35% da LARGURA. É bastante, e é a razão de o enquadramento
   ficar apertado: o formato é mais deitado que as fotos. Se alguma foto
   perder cabeça no corte, o conserto é object-position naquela foto, não
   mudar a grade toda.

   O ZOOM AO PASSAR O MOUSE
   A célula inteira cresce e sobe acima das vizinhas, em vez de a imagem
   crescer dentro de um quadro fixo. Crescendo por dentro, veria-se MENOS
   foto, não mais. Crescendo a célula, a foto aparece maior de verdade — que
   é o que o gesto promete.
   ========================================================================== */

.grade-fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 0.9vw, 14px);
  margin-top: var(--sp-7);
}

.grade-fotos .gallery-item {
  /* 2,06 é a proporção medida da célula que ficou boa, não um arredondamento
     de gosto. A grade não usa mais grid-auto-rows: com uma proporção fixa,
     a altura sai da largura da coluna e acompanha qualquer tela. */
  aspect-ratio: 2.06;
  border-radius: var(--radius);
  /* Sem overflow hidden: a célula precisa poder crescer para fora ao receber
     o mouse. O recorte de cantos vem do border-radius da imagem. */
  overflow: visible;
  position: relative;
  z-index: 0;
  transform-origin: center;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.grade-fotos .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* ---------- Zoom ao passar o mouse ---------- */
.grade-fotos .gallery-item:hover,
.grade-fotos .gallery-item:focus-visible {
  transform: scale(1.14);
  z-index: 5;
  box-shadow: 0 26px 60px rgba(0, 19, 227, 0.32);
}

/* ---------- Resquícios da grade antiga que esta não quer ----------

   .grade-fotos reusa a classe .gallery-item, então as regras da grade
   quadrada de /galeria continuam valendo aqui. Duas delas brigam com este
   formato e precisam ser desligadas.

   1. O zoom interno da imagem foi desenhado para ser recortado por
      overflow: hidden. Esta grade usa overflow: visible, porque é a célula
      inteira que cresce. Sem o recorte a foto vazava da caixa — medido:
      9,8px abaixo e 20,2px para fora de cada lado. Como a sombra é
      projetada pela caixa, ela nascia acima da borda visível da foto.
      A célula já cresce 1,14; o segundo zoom não acrescenta nada.

   2. O véu escuro no rodapé existia para dar contraste a uma legenda que
      esta grade não tem. Sobra o escurecido no pé da foto — e o ::after
      não herda o raio, então os cantos quadrados dele apareciam por fora
      da foto arredondada. */
.grade-fotos .gallery-item:hover img,
.grade-fotos .gallery-item:focus-visible img { transform: none; }

.grade-fotos .gallery-item::after { content: none; }

@media (max-width: 767.98px) {
  /* Mesma célula "2 colunas x 2 linhas" do mosaico anterior, que no celular
     dava quase um quadrado. As colunas continuam duas; muda a proporção. */
  .grade-fotos .gallery-item { aspect-ratio: 0.97; }

  /* Sem mouse não há hover, e a escala só atrapalharia o toque. */
  .grade-fotos .gallery-item:hover { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .grade-fotos .gallery-item { transition: none; }
  .grade-fotos .gallery-item:hover { transform: none; }
}

/* ---------- Citação em destaque ----------
   Centralizada e grande. A serifada em itálico faz o contraponto ao peso do
   Archivo Black das seções vizinhas. */
.citacao {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.citacao__texto {
  margin: var(--sp-5) 0 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.375rem);
  line-height: 1.25;
  letter-spacing: -0.5px;

  /* Branco sobre o ciano dá 1,9:1 — bem abaixo do mínimo de 3:1 para texto
     grande. A sombra azul funciona como contorno e devolve a separação que
     a cor sozinha não dá; é o mesmo recurso do título do herói. */
  color: var(--c-white);
  text-shadow: 0 2px 0 rgba(0, 19, 227, 0.55),
               0 4px 16px rgba(0, 19, 227, 0.35);
}
.citacao__autora {
  margin-top: var(--sp-5);
  font-family: var(--f-display);
  font-size: var(--fs-body);
  letter-spacing: -0.4px;
  color: var(--t-periwinkle);
}

/* ---------- Citação de compromisso (legado) ---------- */
.quote {
  max-width: 40rem;
  margin: var(--sp-10) auto 0;
  text-align: center;
}
.quote__text {
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--c-navy);
}
.quote__author {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--c-muted);
}


/* ==========================================================================
   12. LIGHTBOX
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background-color: rgba(7, 18, 48, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  transform: scale(0.96);
  transition: transform var(--dur) var(--ease-out);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }

.lightbox__caption {
  font-size: var(--fs-text);
  color: var(--c-mint);
  text-align: center;
  max-width: 60ch;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--c-white);
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.lightbox__btn:hover { background-color: var(--c-green); color: var(--c-navy); transform: scale(1.08); }
.lightbox__btn svg { width: 22px; height: 22px; }

.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev  { left: clamp(0.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: clamp(0.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
/* O :hover genérico do .lightbox__btn aplica scale(1.08) puro, o que apaga o
   translateY(-50%) que centra as setas. O hover já reescrevia o par; o foco
   por teclado não, e a seta pulava para o meio da tela ao ser focada. */
.lightbox__prev:hover, .lightbox__next:hover,
.lightbox__prev:focus-visible, .lightbox__next:focus-visible {
  transform: translateY(-50%) scale(1.08);
}

.lightbox__counter {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-ui);
  font-size: var(--fs-small);
  color: var(--c-mint);
  letter-spacing: 0.08em;
}

@media (max-width: 575.98px) {
  /* Encolhia para 40×40 justamente no celular, onde o toque é a única
     entrada. Mantém 44×44 e ganha espaço reduzindo a imagem, não o botão. */
  .lightbox__btn { width: 44px; height: 44px; }
  .lightbox__btn svg { width: 20px; height: 20px; }
  .lightbox__img { max-height: 68vh; }
}


/* ==========================================================================
   13. ANIMAÇÃO AO ROLAR
   ========================================================================== */

/* Estado de repouso: escondido, deslocado para baixo.
   O will-change NÃO entra aqui — quem liga e desliga é o motion.js, elemento
   por elemento. Deixá-lo fixo promovia 8 a 10 camadas de GPU por página que
   nunca eram liberadas. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

/* As entradas laterais deslocam o elemento 40px na horizontal. Enquanto a
   transição corre, esse deslocamento passa da borda da tela e o navegador
   abre uma rolagem lateral de 1px — some sozinha, mas treme no celular.

   `clip` e não `hidden`: hidden transformaria a seção em container de
   rolagem, e foi exatamente isso que tiramos do body para o paralaxe
   funcionar. clip recorta sem criar scroller e sem virar containing block. */
main > section { overflow-x: clip; }

/* ---------- Direções de entrada ---------- */
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="down"]  { transform: translateY(-24px); }
[data-reveal="zoom"]  { transform: scale(0.92); }
[data-reveal="fade"]  { transform: none; }

/* Desvenda de baixo para cima, sem mover o elemento. Bom para imagens
   grandes, onde deslocar a moldura inteira fica pesado. */
[data-reveal="clip"] {
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: opacity var(--dur-slow) var(--ease-out),
              clip-path var(--dur-slow) var(--ease-out);
}

/* ---------- Revelado ----------

   ATENÇÃO: "clip-path: inset(0)" NÃO é o mesmo que "clip-path: none".
   Mesmo com recorte zero, o inset continua estabelecendo um retângulo de
   recorte na caixa do elemento, e tudo que passa da borda é cortado —
   sombra de botão, bilhete sobreposto à foto, adesivo girado.

   Aqui isso cortava a sombra arredondada dos botões num canto reto, e a
   pílula parecia quadrada. Por isso o inset de chegada vive só na variante
   "clip", que é a única que realmente precisa dele. */
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

[data-reveal="clip"].is-revealed {
  clip-path: inset(0 0 0 0);
}

/* Já estava à vista quando a página abriu: aparece sem transição.
   É o que impede o herói de piscar e o que tira o JS do caminho do LCP. */
[data-reveal].is-instant { transition: none; }

/* ---------- Saída ----------
   Saiu pela base da tela: volta a descer, desfazendo a entrada.
   Saiu pelo topo: continua subindo. Se voltasse a descer, leria como erro,
   porque o movimento contrariaria o sentido da rolagem.

   O atraso em cascata é zerado na saída de propósito: na entrada ele cria
   ritmo, na saída faria os elementos ficarem para trás uns dos outros. */
[data-reveal].is-leaving {
  opacity: 0;
  transform: translateY(24px);
  transition-delay: 0ms;
}

[data-reveal].is-leaving-up {
  opacity: 0;
  transform: translateY(-24px);
  transition-delay: 0ms;
}

[data-reveal="clip"].is-leaving,
[data-reveal="clip"].is-leaving-up {
  transform: none;
  clip-path: inset(0 0 100% 0);
}

/* ---------- Cascata entre irmãos ---------- */
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal-delay="5"] { transition-delay: 400ms; }

/* ---------- Salvaguardas ----------
   Nunca se esconde conteúdo sem garantir quem vai mostrá-lo de volta. São
   dois modos de falha diferentes, e cada um pede uma rede diferente:

   .no-js          o navegador não roda JS nenhum. A classe está no <html> e
                   um script inline no <head> a remove de forma SÍNCRONA,
                   antes da primeira pintura. Tem de ser inline: se ficasse
                   no main.js, que é defer, o conteúdo apareceria durante o
                   parse e sumiria quando o script rodasse — um piscar feio.

   .motion-falhou  o JS roda, mas o motion.js não carregou ou quebrou. Não dá
                   para escrever isso em CSS puro com :not(.motion-ready),
                   porque o estado inicial é justamente "ainda não carregou"
                   e o conteúdo piscaria do mesmo jeito. Quem decide é o
                   temporizador daquele mesmo script inline. */
.no-js [data-reveal],
.motion-falhou [data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}

/* ---------- Barra de progresso de leitura ---------- */
.progresso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background-color: var(--c-azul);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  [data-parallax] { transform: none !important; }
  .progresso { display: none; }
}


/* ==========================================================================
   14. PÁGINA: INÍCIO
   ========================================================================== */

/* ==========================================================================
   ESPAÇO RESERVADO DE IMAGEM

   Marca, no layout, o lugar de uma foto que ainda não chegou. Ocupa
   exatamente as dimensões finais, então quando a imagem entrar nada se
   desloca — o espaço já estava guardado.

   Para trocar por uma imagem de verdade, substitua o bloco inteiro por um
   <img> com as mesmas medidas:

       <div class="slot" style="aspect-ratio:1200/1600"> ... </div>
       <img src="assets/img/hero-paulinha.webp" width="1200" height="1600" alt="...">

   Todos os arquivos pendentes estão listados em docs/PLANO-REDESIGN.md.
   ========================================================================== */

.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  text-align: center;
  border: 2px dashed rgba(255, 251, 240, 0.75);
  border-radius: var(--radius-sm);
  background-image: repeating-linear-gradient(135deg,
      rgba(255, 251, 240, 0.22) 0 9px,
      rgba(255, 251, 240, 0.06) 9px 18px);
  color: var(--c-creme);
}

/* Sobre fundo claro o creme some. Esta variante inverte para o azul. */
.slot--claro {
  border-color: rgba(0, 19, 227, 0.45);
  background-image: repeating-linear-gradient(135deg,
      rgba(0, 19, 227, 0.14) 0 9px,
      rgba(0, 19, 227, 0.04) 9px 18px);
  color: var(--c-azul);
}

.slot__rotulo {
  font-family: var(--f-serif);
  font-size: 0.8125rem;
  letter-spacing: 2.2px;
}
.slot__arquivo {
  font-family: var(--f-display);
  font-size: clamp(0.875rem, 1.6vw, 1.0625rem);
  letter-spacing: -0.5px;
  line-height: 1.2;
  word-break: break-all;
}
.slot__medida {
  font-family: var(--f-ui);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  opacity: 0.85;
}


/* ==========================================================================
   HERÓI

   Três colunas sobre o amarelo da marca: à esquerda a marca e as ações, no
   centro o retrato, à direita o título. Duas divisórias finas separam as
   colunas, e uma faixa com os pilares fecha embaixo.

   Camadas, de trás para a frente:
     1. mosaico de fotos em luminosity a 20%  — anda devagar (paralaxe)
     2. brilho radial amarelo                 — funde o mosaico no fundo
     3. conteúdo                              — parado
     4. retrato                               — anda ao contrário (paralaxe)

   Nenhum ancestral do herói recebe transform, perspective ou filter: isso
   criaria containing block e quebraria de uma vez o header sticky, o menu
   lateral e o lightbox. Quem se move são só as camadas de dentro.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--c-amarelo);
  color: var(--c-azul);
}

/* ==========================================================================
   ENTRADA EM CENA DO HERÓI

   O fundo já está lá quando a página abre; os elementos é que entram por
   cima dele, um depois do outro, como numa peça de motion design.

   Três decisões que fazem a diferença entre "animado" e "bem animado":

   1. O FUNDO NÃO ANIMA. Textura e véu aparecem prontos. Se tudo entrasse
      junto, viraria um fade só — é o contraste entre o que já está firme e o
      que chega que cria a sensação de camadas.

   2. CADA ELEMENTO ENTRA PELO LADO DE ONDE ELE "VEM". A marca sobe da
      esquerda, a arte desce da direita, os chips brotam de baixo. O
      movimento conta de onde a peça veio, em vez de todos surgirem do nada.

   3. A CURVA TEM VOLTA. `--ease-entrada` passa um pouco do destino e volta
      (overshoot). É isso que dá peso às peças — sem isso, elas parecem
      adesivos deslizando, não objetos chegando.

   Roda uma vez, no carregamento, e só no herói. O resto da página continua
   com o revelar ao rolar.
   ========================================================================== */



/* Estado inicial — só quando o JS está presente e antes de a cena começar.

   O seletor é html:not(.no-js) e não .js porque o script inline do <head>
   apenas REMOVE a classe no-js; ele roda de forma síncrona, antes da
   primeira pintura, então o estado já está correto quando o CSS se aplica.
   Sem JS nenhum, a classe permanece e o herói nasce montado. */
html:not(.no-js):not(.cena-pronta) [data-cena] {
  opacity: 0;
}

[data-cena] {
  animation-duration: var(--dur-entrada);
  animation-timing-function: var(--ease-entrada);
  animation-fill-mode: both;
  animation-play-state: paused;
}

html.cena-pronta [data-cena] { animation-play-state: running; }

/* Cada tipo de entrada tem o seu gesto. */
[data-cena="sobe"]      { animation-name: cena-sobe; }
[data-cena="desce"]     { animation-name: cena-desce; }
[data-cena="esquerda"]  { animation-name: cena-esquerda; }
[data-cena="direita"]   { animation-name: cena-direita; }
[data-cena="cresce"]    { animation-name: cena-cresce; }
[data-cena="revela"]    { animation-name: cena-revela; }

@keyframes cena-sobe {
  from { opacity: 0; transform: translate3d(0, 38px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes cena-desce {
  from { opacity: 0; transform: translate3d(0, -32px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes cena-esquerda {
  from { opacity: 0; transform: translate3d(-46px, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes cena-direita {
  from { opacity: 0; transform: translate3d(46px, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes cena-cresce {
  from { opacity: 0; transform: scale(0.82) rotate(-2deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
/* Desvenda de baixo para cima sem mover a peça — bom para a arte do título,
   que é pesada e ficaria desengonçada deslizando. */
@keyframes cena-revela {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* Ordem de chegada. Os passos são curtos de propósito: acima de ~120ms
   entre peças, a cena deixa de ser uma coisa só e vira uma fila. */
[data-cena-t="1"] { animation-delay:  60ms; }
[data-cena-t="2"] { animation-delay: 160ms; }
[data-cena-t="3"] { animation-delay: 260ms; }
[data-cena-t="4"] { animation-delay: 360ms; }
[data-cena-t="5"] { animation-delay: 460ms; }
[data-cena-t="6"] { animation-delay: 560ms; }
[data-cena-t="7"] { animation-delay: 660ms; }

/* Quem pediu menos movimento recebe a cena montada, sem animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
  html:not(.no-js):not(.cena-pronta) [data-cena],
  [data-cena] {
    opacity: 1;
    animation: none;
    transform: none;
    clip-path: none;
  }
}

/* ---------- Camada 1: textura oficial ----------
   Antes eu montava um mosaico com as fotos da galeria em luminosity, para
   simular textura. A peça oficial (assets/img/textura-amarela.webp) já é
   exatamente isso: ondas tom sobre tom em #FFBB00 e #FFCB20. Fora o mosaico.

   A textura se repete no eixo X, então a mesma imagem cobre qualquer
   largura sem esticar e sem emenda visível. */
.hero__textura {
  position: absolute;
  inset: -12% 0;
  pointer-events: none;
  background-image: url('../img/textura-amarela.webp');
  background-size: auto 130%;
  background-repeat: repeat-x;
  background-position: center;
}

/* ---------- Camada 2: brilho ----------
   Véu parcial, não opaco: agora que a textura de baixo é a peça oficial,
   ela precisa continuar visível. O gradiente só assenta o centro e escurece
   as bordas, dando profundidade sem apagar o desenho. */
.hero__brilho {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 105%,
              rgba(255, 203, 32, 0.55) 0%,
              rgba(255, 187, 0, 0.35) 45%,
              rgba(230, 160, 0, 0.55) 100%);
}

/* ---------- Camada 3: grade ---------- */
.hero__grade {
  position: relative;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.1fr) minmax(240px, 1fr);
  align-items: end;
  min-height: 600px;
}

.hero__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: 3.5rem;
}

/* ---------- Herói ocupando a tela inteira, no desktop ----------

   O QUE HAVIA
   `min-height: 600px` e `max-width: 1240px`, os dois fixos. Medido: em
   1440×900 o herói ocupava 74% da altura útil; em 1920×1080, 60% — sobravam
   396px da seção seguinte aparecendo por baixo. Em qualquer monitor ele
   tinha o mesmo tamanho, o que é o contrário de ocupar a tela.

   ALTURA
   `100svh` menos a altura do cabeçalho, que já existe como token
   (--header-h: 84px no desktop). `svh` e não `vh`: em telas com barra de
   navegador que some, `vh` mede a janela maior e o herói passa da tela.
   A linha com `vh` fica antes como reserva para navegador antigo.

   LARGURA
   `max-width: none` solta o conteúdo do container de 1240px. O respiro
   passa a vir do padding, que cresce com a tela — sem ele, texto e retrato
   encostariam na borda num monitor largo.

   POR QUE align-items MUDA PARA stretch
   Com `end` as três colunas eram do tamanho do conteúdo, e a do meio não
   tinha altura definida para o retrato preencher: a foto ficaria parada nos
   620px que o `max-width: 460px` permitia, com amarelo vazio em cima.
   Com `stretch` a coluna recebe a altura da linha inteira e a foto cresce
   junto. O texto continua ancorado embaixo via `justify-content`, que é o
   que o `end` fazia por ele. */
@media (min-width: 992px) {
  .hero__grade {
    max-width: none;
    padding-inline: clamp(var(--sp-5), 4vw, 4.5rem);
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    align-items: stretch;
    /* A coluna do meio passa de fração para `auto`: ela deixa de ter
       largura própria e fica do tamanho que a foto pedir. Com fração fixa a
       foto era limitada pela LARGURA da coluna (464px a 1440), desenhava
       626px numa caixa de 816 e deixava 190px de amarelo vazio em cima. */
    grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
  }

  /* Texto centrado na vertical, não colado embaixo.

     Com a altura fixa de 600px o rodapé era o lugar natural do texto. Numa
     tela cheia, ancorar embaixo joga tudo para o pé e abre um vazio no topo
     — que foi exatamente o que apareceu. */
  .hero__col { justify-content: center; }
}
.hero__col--esq { gap: 1.625rem; padding-right: 1.75rem; }
.hero__col--dir { gap: 1.125rem; padding-left: 1.75rem; }

/* LEGIBILIDADE SOBRE O AMARELO — desvio consciente do modelo.

   No modelo todo o texto do herói é creme com uma sombra azul suave. Medido,
   creme #FFFBF0 sobre amarelo #FFC204 dá 1,57:1, quando o mínimo do WCAG
   para texto pequeno é 4,5:1. A sombra ajuda a percepção, mas não muda a
   medida — e boa parte do nosso público lê no celular, na rua, sob o sol
   do Ceará.

   O texto pequeno passa a azul #000BE8, que sobre o mesmo amarelo dá 5,83:1
   e continua dentro da paleta. O TÍTULO segue creme com a sombra dura do
   modelo: aos 58px em Archivo Black a sombra funciona como contorno, e ele
   é a assinatura visual da peça.

   Para voltar exatamente ao modelo, troque as cores abaixo por
   var(--c-creme) e devolva a sombra.

   Só recebem azul os elementos que ficam DIRETO sobre o amarelo. Quem tem
   fundo próprio — a pastilha do número, o destaque do título, os botões, o
   selo da foto — já resolve o seu contraste e fica de fora. Uma regra
   genérica em .hero__col vencia todos eles por especificidade e pintava
   azul sobre azul. */
/* ---------- Marca ----------
   O logo empilhado oficial já traz o 40345 e as duas assinaturas
   ("deputada estadual" e "a deputada de Itapipoca"). Substituiu o logo
   simples mais a pastilha de número que eu tinha montado à mão. */
/* Sem cartão por baixo.

   Esta versão do logo traz "DEPUTADA ESTADUAL PAULINHA" em branco e o 40345
   azul dentro de uma placa branca própria. Ou seja: ela já carrega o seu
   contraste e foi desenhada para ficar sobre fundo colorido — lê muito bem
   no amarelo do herói.

   O cartão creme que existia aqui era necessário para a versão anterior do
   logo, cujos numerais eram amarelos. Com esta peça ele fazia o oposto:
   apagava o "PAULINHA" branco contra o creme. */
.hero__marca {
  width: 100%;
  max-width: 340px;
}
.hero__marca img {
  width: 100%;
  height: auto;
  /* A peça é clara sobre fundo claro; a sombra a descola do amarelo. */
  filter: drop-shadow(0 10px 24px rgba(0, 19, 227, 0.28));
}
.hero__numero {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  padding: 0.375rem 0.875rem 0.5rem;
  background-color: var(--c-azul);
  color: var(--c-amarelo);
  border-radius: var(--radius-sm);
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  letter-spacing: -1px;
  line-height: 1;
}
.hero__numero small {
  font-family: var(--f-serif);
  font-size: 0.8125rem;
  letter-spacing: 2.2px;
}

.hero__lema {
  margin: 0;
  max-width: 32ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--c-azul);
}

.hero__acoes { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ---------- Camada 4: retrato ---------- */
.hero__retrato {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;

  /* Sem divisórias laterais.

     O modelo tinha uma linha fina de cada lado, separando as três colunas do
     herói. Aquilo funcionava com um retângulo de foto no meio. Com o recorte
     de fundo removido, as linhas passam a emoldurar a candidata e leem como
     borda branca na imagem — defeito, não estrutura. A separação entre as
     colunas agora vem do próprio espaço. */
}
/* O retrato é um recorte com fundo removido, não uma foto retangular.

   Por isso `contain` e não `cover`: cover preencheria a caixa cortando os
   braços e o topo da cabeça. E `bottom` em vez de `top`, para ela ficar
   apoiada na base da seção, como se estivesse em pé sobre a faixa de
   pilares — é o que faz o recorte parecer parte da composição em vez de
   uma figura flutuando no meio do amarelo. */
.hero__foto {
  width: 100%;
  max-width: 460px;
  height: 100%;
  min-height: 600px;
  object-fit: contain;
  object-position: center bottom;
  align-self: stretch;
  /* Uma folga de 10px no topo, pedida.

     Com `contain` e a âncora em `bottom`, o padding não empurra a imagem
     para baixo: ele encolhe a caixa de conteúdo por cima, e o recorte, que
     continua apoiado na base, fica 10px mais baixo. O pé dela não se move —
     o topo da cabeça é que desce. Como no desktop a largura sai da altura,
     ela também afina cerca de 7px, que é o preço de manter a proporção. */
  padding-top: 10px;
}

/* Este bloco PRECISA vir depois da regra acima.

   Na primeira tentativa ele ficou junto do resto do herói em tela cheia,
   umas cem linhas antes. Media query não acrescenta especificidade: as duas
   regras pesam (0,1,0), e a de cima perde para a de baixo por ordem. O
   sintoma foi a foto travada em 460px e o herói parado em 600px numa tela
   de 640px de altura — a base vencia em silêncio.

   `max-width: 460px` e `min-height: 600px` eram os tetos que impediam a foto
   de acompanhar a altura nova. Sem eles, quem limita é a coluna, e
   `object-fit: contain` garante que crescer não distorce nem corta. */
@media (min-width: 992px) {
  /* A foto passa a ser dirigida pela ALTURA: ocupa a altura inteira do
     herói e a largura sai da proporção. Antes era o contrário — largura
     travada em 460px e altura sobrando.

     `width: auto` com `height` definida faz o elemento assumir a proporção
     natural da imagem, então `object-fit: contain` não tem o que encaixar:
     não sobra tarja nem em cima nem dos lados. */
  .hero__foto {
    width: auto;
    max-width: none;
    height: 100%;
    min-height: 0;
  }
}

/* O reservado ocupa o mesmo lugar que a foto vai ocupar. */
.hero__retrato .slot {
  border-color: rgba(0, 19, 227, 0.45);
  color: var(--c-azul);
  background-image: repeating-linear-gradient(135deg,
      rgba(0, 19, 227, 0.12) 0 9px,
      rgba(0, 19, 227, 0.03) 9px 18px);
  width: 100%;
  max-width: 440px;
  min-height: 600px;
  align-self: stretch;
  border-block: 0;
  border-radius: 0;
}
.hero__credito {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  padding: 9px 14px;
  background-color: var(--c-azul);
  color: var(--c-amarelo);
  border-radius: var(--radius-sm);
  font-family: var(--f-serif);
  font-size: 0.8125rem;
  letter-spacing: 2.2px;
  white-space: nowrap;
}

/* ---------- Título ---------- */
.hero__local,
.hero__rotulo {
  font-family: var(--f-serif);
  font-size: 0.875rem;
  letter-spacing: 2.6px;
  color: var(--c-azul);
}

.hero__titulo {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--c-creme);
  /* Duas sombras: a dura dá o relevo de cartaz, a difusa assenta o título
     no fundo para ele não flutuar. */
  text-shadow: 0 3px 0 rgba(0, 19, 227, 0.55),
               0 6px 18px rgba(0, 19, 227, 0.28);
}

/* Variante com a arte oficial no lugar do título em texto.

   Zera o que só fazia sentido para texto — sombra, entrelinha, tracking —
   e deixa a imagem crescer até o limite da coluna. A proporção 445/255 fica
   travada para a imagem não pular durante o carregamento. */
.hero__titulo--arte {
  text-shadow: none;
  line-height: 0;
  letter-spacing: normal;
  width: 100%;
}
.hero__titulo--arte img {
  width: 100%;
  max-width: 445px;
  height: auto;
  aspect-ratio: 445 / 255;
}

/* A palavra que fica dentro do retângulo azul. */
.hero__destaque {
  display: inline-block;
  padding: 2px 12px 6px;
  background-color: var(--c-azul);
  color: var(--c-amarelo);
  border-radius: var(--radius-sm);
  text-shadow: none;
}

.hero__texto {
  margin: 0;
  max-width: 26ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  color: var(--c-azul);
}

/* ==========================================================================
   FAIXA DAS REGIÕES

   Peça oficial: palmeira (praia), montanha com sol (serra) e cacto (sertão),
   repetindo. Conta a geografia de Itapipoca em três ícones.

   Usada como divisor entre seções. O `background-repeat: repeat-x` com
   altura fixa faz o padrão se repetir sem esticar em qualquer largura.

   É decoração, não conteúdo: entra por CSS, com role="presentation" no HTML,
   para não virar ruído no leitor de tela.
   ========================================================================== */

/* ==========================================================================
   TEXTURA DE FUNDO DAS SEÇÕES

   Mesmas ondas do herói, na cor de cada seção. Entram por `background-image`
   na própria seção — sem elemento novo, sem z-index, sem nada para quebrar:
   o conteúdo já desenha por cima de qualquer fundo, por definição.

   Cada uma leva um véu da própria cor da seção por cima, no mesmo gradiente
   do herói. Sem o véu, o contraste entre as duas ondas comeria a legibilidade
   do texto; com ele, a textura aparece sem disputar com a leitura.

   Os arquivos são WebP a q0.92, medidos contra o PNG original: erro médio de
   1,5 em 255 e 89% menos peso (2.889 KB → 331 KB no total).
   ========================================================================== */

/* Mesma textura em "Nossos pilares" e em "Material de campanha".

   Compartilham o seletor em vez de a segunda copiar os valores da primeira:
   duas cópias da mesma receita de fundo se desencontram no primeiro ajuste
   que alguém fizer em uma só. */
.pilares,
.material {
  background-image:
    linear-gradient(rgba(0, 206, 243, 0.62), rgba(0, 206, 243, 0.62)),
    url('../img/textura-azul.webp');
  background-size: auto, auto 100%;
  background-repeat: repeat, repeat-x;
  background-position: center, center;
}

.jogos-home,
.contato-form {
  background-image:
    linear-gradient(rgba(0, 19, 227, 0.58), rgba(0, 19, 227, 0.58)),
    url('../img/textura-azul-escuro.webp');
  background-size: auto, auto 100%;
  background-repeat: repeat, repeat-x;
  background-position: center, center;
}

.final,
.pagina-hero {
  background-image:
    linear-gradient(rgba(255, 187, 0, 0.55), rgba(255, 187, 0, 0.55)),
    url('../img/textura-amarela.webp');
  background-size: auto, auto 100%;
  background-repeat: repeat, repeat-x;
  background-position: center, center;
}

/* ATENÇÃO: textura-laranja.webp NÃO é uma peça oficial. Foi derivada da
   amarela, remapeando os dois tons (#FFBB00/#FFCB20) para o laranja oficial
   (#FF8E10/#FFA63E), porque não veio arquivo laranja e a seção de Canais
   ficava chapada no meio de vizinhas texturizadas. É o mesmo desenho de
   ondas — só a cor muda. Ao receber a peça oficial, substituir o arquivo. */
.canais {
  background-image:
    linear-gradient(rgba(255, 142, 16, 0.55), rgba(255, 142, 16, 0.55)),
    url('../img/textura-laranja.webp');
  background-size: auto, auto 100%;
  background-repeat: repeat, repeat-x;
  background-position: center, center;
}

/* O herói de página interna já tinha o seu próprio véu radial; com a textura
   embaixo, os dois somados fechavam demais. Fica só o da textura. */
.pagina-hero__brilho { display: none; }

/* Anda de lado, em loop contínuo, como letreiro de telejornal.

   O loop fecha sem emenda porque a peça anda EXATAMENTE a largura de um
   ladrilho e então recomeça. A largura vem da proporção do arquivo
   (5090÷424 = 12,0047), calculada a partir da altura — assim o cálculo
   continua certo quando a altura muda com a largura da tela.

   Medi a repetição interna do desenho: o motivo se repete a cada 849px,
   mas 5090÷849 = 5,995, não é múltiplo exato. Girar pelo motivo acumularia
   deriva e a emenda apareceria; por isso o giro é pela imagem inteira.

   A 26s por ladrilho a faixa anda ~19px/s no desktop: presente no canto do
   olho, sem competir com a leitura. A 9s de antes ela puxava a atenção para
   si toda vez que aparecia.

   O movimento é `transform` num pseudo-elemento, não `background-position`:
   transform é composto na GPU, background-position roda na thread principal
   e engasga junto com a rolagem. */
/* ==========================================================================
   FAIXA DO SLOGAN

   "Cuidado, coragem e voz por Nossa Gente" com o coração 40345. A peça já
   vem com o próprio fundo ciano, então a faixa recebe o mesmo ciano e a
   imagem se funde com ela — sem emenda visível nas laterais, em qualquer
   largura de tela.

   É imagem de texto, o que normalmente se evita. Aqui é aceitável porque
   funciona como peça de marca, igual a um logotipo: o `alt` carrega a frase
   inteira para quem usa leitor de tela ou está com as imagens desligadas, e
   a mensagem não depende só dela para existir na página.
   ========================================================================== */

.faixa-slogan {
  /* Amostrado das quatro bordas da própria peça: #00B0FF, uniforme. Não é o
     #00CEF3 do token de ciano — usar o token deixava duas emendas verticais
     visíveis onde a imagem termina e a faixa continua. */
  background-color: #00B0FF;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.faixa-slogan img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
}

/* Abaixo de 700px a frase fica pequena demais para ler. A peça cresce além
   da largura da tela e é cortada nas pontas: melhor ler metade grande do
   que a frase inteira ilegível. */
@media (max-width: 700px) {
  .faixa-slogan img {
    width: auto;
    max-width: none;
    height: clamp(88px, 26vw, 120px);
  }
}

.faixa-regioes {
  --faixa-h: clamp(26px, 3.2vw, 42px);
  --faixa-w: calc(var(--faixa-h) * 12.0047);

  position: relative;
  overflow: hidden;
  height: var(--faixa-h);
}

.faixa-regioes::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Um ladrilho a mais do que a tela: é ele que cobre o vão enquanto a
     faixa desliza, antes de o ciclo reiniciar. */
  width: calc(100% + var(--faixa-w));
  background-image: url('../img/faixa-praia-serra-sertao.png');
  background-size: var(--faixa-w) 100%;
  background-repeat: repeat-x;
  animation: faixa-anda 26s linear infinite;
  will-change: transform;
}

@keyframes faixa-anda {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--faixa-w) * -1), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .faixa-regioes::before { animation: none; will-change: auto; }
}

/* ---------- Faixa de pilares ----------
   Saiu de dentro do herói e agora vive sobre o creme da página.

   Todas as cores foram refeitas: no amarelo o texto era creme com sombra
   azul; sobre o creme isso sumiria. Agora é azul sobre creme, que dá 15,6:1
   — e a faixa ganha uma borda em cima e outra embaixo para se ler como uma
   régua entre o herói e a primeira seção, em vez de texto solto. */
.faixa-pilares {
  position: relative;
  background-color: var(--c-creme);
  border-block: 1px solid rgba(0, 19, 227, 0.18);
}
.faixa-pilares .hero__rodape-interno,
.hero__rodape-interno {
  max-width: 1240px;
  margin-inline: auto;
  padding: 1.125rem var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  justify-content: space-between;
}
.hero__pilares {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
}
.hero__rotulo {
  font-family: var(--f-serif);
  font-size: 0.875rem;
  letter-spacing: 2.6px;
  color: var(--c-azul);
}
/* Só texto, separado por um ponto.

   Antes eram pílulas com borda e hover. O formato de pílula é o mesmo dos
   botões do site, então os pilares pareciam clicáveis — e não são. Texto
   corrido com separador resolve a ambiguidade e deixa a faixa mais leve. */
.hero__chip {
  font-family: var(--f-serif);
  font-size: 0.875rem;
  letter-spacing: 1.6px;
  color: var(--c-azul);
}

/* O ponto vive no separador, não no texto: fica fora da árvore de leitura
   do leitor de tela, que ouviria "ponto" entre cada pilar. */
.hero__chip + .hero__chip::before {
  content: '•';
  margin-right: 0.875rem;
  opacity: 0.4;
}

.hero__role {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-family: var(--f-serif);
  font-size: 0.875rem;
  letter-spacing: 2.6px;
  color: var(--c-azul);
}
.hero__role span { display: inline-block; animation: hero-pula 1.8s ease-in-out infinite; }

@media (max-width: 575.98px) {
  .faixa-pilares .hero__rodape-interno { justify-content: flex-start; gap: var(--sp-4); }
}

@keyframes hero-pula {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ---------- Tablet: o retrato sai do meio ----------
   Com menos de 992px as três colunas ficam com menos de 240px cada e o
   título quebra em cinco linhas.

   Vira duas linhas: o título ocupa a largura toda em cima, e embaixo a
   marca fica ao lado do retrato. Deixar o retrato sozinho numa linha
   própria desperdiçaria metade da largura do tablet. */
@media (max-width: 991.98px) {
  .hero__grade {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 0;
  }
  .hero__col--dir {
    order: 1;
    grid-column: 1 / -1;
    padding-left: 0;
    padding-bottom: var(--sp-5);
  }
  .hero__col--esq {
    order: 2;
    padding-right: var(--sp-5);
    padding-top: var(--sp-5);
    justify-content: center;
  }
  .hero__retrato {
    order: 3;
    border-inline: 0;
  }
  .hero__foto,
  .hero__retrato .slot {
    min-height: 340px;
    max-height: 56vh;
  }
}

/* ---------- Celular: uma coluna, ordem própria ----------

   No celular a leitura pede outra sequência: primeiro a arte que diz quem
   ela é, logo depois o rosto, e só então marca, lema e botões.

   Para ordenar peça a peça foi preciso dissolver as duas colunas com
   `display: contents`: os filhos viram itens diretos da grade e passam a
   aceitar `order`. Sem isso, só daria para mover as colunas inteiras, e a
   foto ficaria presa entre blocos.

   Como as colunas deixam de existir como caixa, o espaçamento que era
   `gap` delas passa a ser `row-gap` da grade, e o respiro vertical vai para
   a própria grade. */
@media (max-width: 575.98px) {
  .hero__grade {
    grid-template-columns: 1fr;
    row-gap: var(--sp-5);
    padding-block: var(--sp-7);
    align-items: start;
  }

  .hero__col { display: contents; }

  .hero__local   { order: 1; }
  .hero__titulo  { order: 2; }
  .hero__retrato { order: 3; }
  .hero__texto   { order: 4; }
  .hero__marca   { order: 5; }
  .hero__lema    { order: 6; }
  .hero__acoes   { order: 7; }

  /* O retrato perde a divisória lateral, que só fazia sentido entre colunas. */
  .hero__retrato { border-inline: 0; }
  .hero__foto,
  .hero__retrato .slot { min-height: 300px; max-height: 52vh; }

  .hero__rodape-interno { justify-content: flex-start; gap: var(--sp-4); }
}

/* ---------- Faixa dos pilares no celular ----------

   O PROBLEMA
   A faixa foi desenhada para uma linha só: rótulo, os quatro pilares
   separados por ponto, e o convite a rolar do outro lado. No celular ela
   quebra em três linhas, e aí duas coisas desandam ao mesmo tempo:

   1. o rótulo "NOSSOS PILARES" divide a linha com o primeiro pilar e passa
      a parecer mais um item da lista;
   2. o separador "•" vive em `.hero__chip + .hero__chip::before`, ou seja,
      ANTES do item. Numa linha só ele cai entre dois textos e funciona;
      quando a lista quebra, ele sobra no começo da linha, órfão. Medido: as
      bordas esquerdas caíam em três posições diferentes — 24, 158 e 175px.

   A SAÍDA
   Em vez de lista corrida que quebra, lista empilhada de verdade: o rótulo
   ganha a própria linha, cada pilar ganha a sua, e o ponto deixa de ser
   separador para virar MARCADOR, ancorado na mesma coluna em todos. Tudo
   passa a começar no mesmo x.

   Por que o seletor do marcador repete as duas formas: a regra original
   pesa (0,2,1) e uma `.hero__chip::before` sozinha, (0,1,1), perderia para
   ela — os pilares de 2 a 4 ficariam com o ponto antigo e o novo ao mesmo
   tempo. */
@media (max-width: 767.98px) {
  /* Repete o seletor com `.faixa-pilares` na frente porque a regra base é
     uma LISTA de seletores:

         .faixa-pilares .hero__rodape-interno,   (0,2,0)
         .hero__rodape-interno { align-items: center }

     Numa lista cada ramo vale pelo próprio peso. Como o elemento está
     dentro de `.faixa-pilares`, o ramo (0,2,0) casa e derruba uma regra
     (0,1,0) escrita depois. O sintoma foi o "ROLE PRA CONHECER" ficar
     centralizado enquanto os pilares alinhavam à esquerda — 79px de
     diferença. O `flex-direction` passou porque a base não o define. */
  .faixa-pilares .hero__rodape-interno,
  .hero__rodape-interno {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .hero__pilares {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    width: 100%;
  }

  .hero__rotulo { margin-bottom: 0.1rem; }

  .hero__chip {
    position: relative;
    padding-left: 1.15rem;
  }

  .hero__chip::before,
  .hero__chip + .hero__chip::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    margin-right: 0;
    opacity: 0.4;
  }
}

/* ---------- Fora do desktop: só a marca e o retrato ----------

   O herói do celular fica com duas peças: o logo empilhado e a foto. Saem a
   arte "A deputada de Itapipoca", o local, os dois parágrafos e os botões.

   NÃO FOI PRECISO TROCAR IMAGEM NENHUMA
   O logo-empilhado-2 já estava no herói — é a `.hero__marca`, da coluna
   direita. Esconder a arte e reordenar resolve; trocar o `src` do título
   deixaria o mesmo logo aparecendo duas vezes.

   O <h1> SOME DA VISTA, NÃO DA LEITURA
   Aquela arte é o `<h1>` da página, e o texto do cabeçalho vive no `alt`.
   Com `display: none` a página ficaria sem H1 no celular — perda de
   estrutura para leitor de tela e para busca. Por isso ele vai para fora da
   tela pelo recorte, e não para fora da árvore.

   Este bloco precisa vir DEPOIS dos dois blocos de herói acima: os três
   pesam (0,1,0) e quem decide é a ordem. */
@media (max-width: 991.98px) {
  .hero__grade {
    grid-template-columns: 1fr;
    row-gap: var(--sp-5);
    /* Sem respiro embaixo: a foto é recorte de fundo transparente e termina
       no corpo dela, então o padding virava faixa amarela vazia entre o pé
       da imagem e a seção seguinte. */
    padding-block: var(--sp-7) 0;
    align-items: start;
    min-height: 0;
  }

  /* dissolve as colunas para as duas peças que restam aceitarem `order` */
  .hero__col { display: contents; }

  .hero__marca   { order: 1; }
  .hero__retrato { order: 2; }

  .hero__local,
  .hero__lema,
  .hero__texto,
  .hero__acoes { display: none; }

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


/* ==========================================================================
   SEÇÃO: QUEM SOU EU  →  leva para a Biografia

   Duas colunas assimétricas: retrato à esquerda, texto à direita. O retrato
   tem cantos em folha (180px / 18px alternados) e um bilhete verde torto
   sobreposto — é o que tira a seção do genérico.
   ========================================================================== */

.quem { background-color: var(--c-creme); padding-block: var(--section-y); }

.quem__grade {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3.5rem;
  align-items: start;
}

/* Variante com a foto à direita e o texto à esquerda.

   A inversão é feita na ordem do HTML, não com `order` no CSS: assim o
   leitor de tela, o Tab e o empilhamento no celular acompanham o que se vê.
   Aqui só a proporção das colunas é espelhada, para a coluna larga continuar
   sendo a do texto. */
/* Só a partir de 992px.

   A regra da coluna única no celular é `.quem__grade` dentro de um @media,
   especificidade (0,1,0). Este modificador é `.quem--foto-direita
   .quem__grade`, (0,2,0) — vence a regra do celular em QUALQUER largura,
   porque media query não soma especificidade. Sem este @media, o celular
   ficava preso em duas colunas e a foto encolhia para 174px. */
@media (min-width: 992px) {
  .quem--foto-direita .quem__grade {
    /* Espelha a proporção da base: a coluna larga continua sendo a do
       texto, agora à esquerda. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }
}

/* Com a foto à direita, o bilhete passa para o canto de dentro: apontando
   para o texto, ele costura as duas colunas em vez de fugir para a margem.
   Vale para o bilhete de texto da Biografia e para o adesivo da home. */
.quem--foto-direita .quem__bilhete,
.quem--foto-direita .quem__adesivo {
  left: auto;
  right: 4%;
  transform: rotate(3deg);
}

/* Adesivo do slogan sobre a foto.

   Substituiu o bilhete de texto na home. A peça já traz a frase e o coração
   40345 com o próprio fundo ciano, então dispensa moldura: bastam a rotação
   e a sombra para ela ler como algo colado por cima, não como parte da foto.

   A Biografia segue com o bilhete de texto — lá a frase é outra e precisa
   ser texto de verdade, não imagem. */
.quem__adesivo {
  position: absolute;
  left: 4%;
  bottom: 0;
  width: 76%;
  max-width: 330px;
  height: auto;
  border-radius: var(--radius-sm);
  transform: rotate(-3deg);
  box-shadow: 0 12px 28px rgba(10, 10, 18, 0.26);
}

.quem__midia {
  position: relative;
  /* Isola o empilhamento: o z-index negativo do mosaico fica contido aqui
     dentro e não atravessa para trás do fundo da seção. */
  isolation: isolate;
  align-self: center;
  padding-bottom: 26px;
  display: flex;
  justify-content: center;
}
.quem__foto {
  /* 92% da coluna. Não 100%: a folga aos lados é o que deixa a foto ler como
     retrato emoldurado e não como bloco de imagem encostado no texto. Mas
     76% deixava sobrar 57,9px de cada lado numa coluna de 482,8px — folga
     demais, e a foto ficava pequena diante de uma coluna de texto que tem
     705px na home e 923px na Biografia. Em 92% sobram 19,3px por lado: a
     moldura continua respirando e a foto ganha 46% de área. */
  width: 92%;
  min-width: 230px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Cantos em folha: dois arredondados grandes na diagonal, dois quase
     retos na outra. É a assinatura de forma da marca. */
  border-radius: 180px 18px 180px 18px;
}

/* Retrato de corpo inteiro.

   A moldura padrão é 4:5, pensada para um retrato de meio corpo. Uma foto
   de corpo inteiro nessa proporção seria cortada pela cintura ou apareceria
   minúscula no meio de fundo vazio.

   Aqui a moldura passa a 3:4 e o enquadramento sobe: `object-position` em
   58% horizontal porque a pessoa não está centrada na foto original — está
   deslocada para a direita —, e 38% vertical para preservar cabeça e tronco
   quando o corte acontecer. */
.quem__foto--corpo {
  /* Moldura quadrada.

     A foto de origem é 2:3 de corpo inteiro. Num quadrado, o object-fit
     cover descarta 2.080px dos 6.240 de altura — então a posição vertical
     é que decide o que sobra. Em 12% o recorte começa logo acima da cabeça
     e desce até os joelhos.

     Na horizontal são 58% porque a pessoa não está no centro da foto
     original: está deslocada para a direita. Centralizar deixaria fundo
     vazio de um lado e cortaria o braço do outro. */
  aspect-ratio: 1 / 1;
  object-position: 58% 12%;
}


/* Retrato sem recorte, na Biografia.

   As fotos de origem são 768×768. A moldura padrão de 4/5 descartava 20% da
   largura, e o canto de 180px comia mais um pedaço — e o que some num recorte
   desses costuma ser rosto, que é justamente o que a foto tem de útil. Em 1/1
   a foto aparece inteira, e sem raio nenhum não há canto para engolir nada.

   O seletor repete a classe (`.quem__foto.quem__foto--reto`) de propósito: as
   regras que ele precisa vencer são `.quem__foto` na base E `.quem__foto`
   dentro do @media de 767.98px, que reaplica o raio. Com uma classe só, o
   peso empataria em (0,1,0) e quem venceria seria a ordem no arquivo — e
   ordem é exatamente o que já me pegou três vezes neste projeto. Com a classe
   dobrada o peso é (0,2,0) e a ordem deixa de importar. */
.quem__foto.quem__foto--reto {
  aspect-ratio: 1 / 1;
  border-radius: 0;
  /* Moldura de foto impressa: margem creme larga por dentro e um fio azul
     por fora. O fio é `box-shadow` e não `outline` porque outline não
     acompanha o contorno arredondado se um dia a peça voltar a ter raio, e
     porque assim ele empilha com a sombra na mesma propriedade.

     O fio é o que salva a moldura na Biografia: ali o fundo da seção TAMBÉM
     é creme, então a margem creme sozinha sumiria e a foto continuaria seca.
     No herói, que é amarelo texturizado, a margem creme já faz o trabalho e
     o fio só arremata. Uma regra só, legível nos dois fundos. */
  border: clamp(6px, 0.8vw, 12px) solid var(--c-creme);
  box-shadow: 0 0 0 2px var(--c-azul), 0 18px 40px rgba(0, 19, 227, 0.22);
}

.quem__bilhete {
  position: absolute;
  left: 4%;
  bottom: 0;
  max-width: 270px;
  padding: 14px 18px;
  background-color: var(--c-salvia);
  color: var(--t-salvia);
  border-radius: 4px 28px 4px 28px;
  transform: rotate(-3deg);
  box-shadow: 0 10px 30px rgba(10, 10, 18, 0.18);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  line-height: 1.12;
  letter-spacing: -0.4px;
}

.quem__texto { display: flex; flex-direction: column; gap: 1.375rem; }

.quem__banner {
  position: relative;
  max-width: 1240px;
  margin: 3.5rem auto 0;
  padding-inline: var(--sp-5);
}
.quem__banner img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}
.quem__banner .etiqueta { left: calc(var(--sp-5) + 18px); }

@media (max-width: 991.98px) {
  .quem__grade { grid-template-columns: 1fr; gap: var(--sp-8); }
  .quem__foto { width: 100%; max-width: 420px; }
}

/* No celular a foto vira bloco cheio, acima do texto.

   Três coisas apertavam a imagem nesta largura:

   1. `max-width: 420px` num viewport de 390 deixava a foto menor que a
      coluna de texto ao lado — parecia encolhida de propósito.
   2. A proporção 4/5 rendia ~430px de altura: a foto sozinha ocupava mais
      que meia tela antes de o texto começar.
   3. O arredondamento de 180px, desenhado para uma foto de 500px, comia
      metade da largura de uma de 343px e cortava as pessoas do retrato.

   Aqui a foto ocupa a largura toda, fica mais baixa e o canto encolhe na
   proporção certa. */
@media (max-width: 767.98px) {
  .quem__grade { gap: var(--sp-6); }

  .quem__midia {
    display: block;
    width: 100%;
    padding-bottom: 32px;
  }

  .quem__foto {
    width: 100%;
    max-width: none;
    min-width: 0;
    aspect-ratio: 4 / 3.2;
    border-radius: 84px 14px 84px 14px;
  }

  /* O bilhete passa a caber embaixo, encostado à esquerda, em vez de
     invadir a foto num espaço que já é estreito. */
  .quem__bilhete,
  .quem--foto-direita .quem__bilhete {
    left: 0;
    right: auto;
    max-width: 88%;
    transform: rotate(-2deg);
  }
}


/* ==========================================================================
   SEÇÃO: PILARES

   Fundo periwinkle, cartões brancos. A sombra é azul e não cinza: sobre um
   fundo colorido, sombra neutra suja a cor.
   ========================================================================== */

.pilares {
  background-color: var(--c-periwinkle);
  color: var(--t-periwinkle);
  padding-block: var(--section-y);
}
.pilares__interno { max-width: 1240px; margin-inline: auto; padding-inline: var(--sp-5); }
.pilares__titulo { margin: 14px 0 40px; max-width: 20ch; color: var(--c-azul); }
.pilares__titulo .serif { color: var(--t-periwinkle); }

.pilares__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.pilar {
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  color: var(--t-creme);
  border: 1px solid rgba(0, 19, 227, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 19, 227, 0.12);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pilar:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(0, 19, 227, 0.20);
}
/* A moldura era 16:10, herdada do modelo. As fotos de origem são quadradas
   (768×768), então o `cover` descartava 37% da altura de cada uma — e como
   o corte é pelo centro, sumia com cabeça e pés das pessoas.

   Em 1:1 a moldura tem a mesma proporção da fonte: nada é cortado. O card
   fica mais alto, que é a troca que o enquadramento correto custa. */
.pilar__foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: var(--t-profundo);
}
.pilar__corpo { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.pilar__num {
  font-family: var(--f-serif);
  font-size: 0.8125rem;
  letter-spacing: 2.2px;
  color: var(--c-salvia-escura);
}
.pilar__titulo { margin: 0; font-size: var(--fs-h4); color: var(--c-azul); }
.pilar__texto { margin: 0; font-size: 0.96875rem; line-height: 1.55; color: var(--t-creme-2); }


/* ==========================================================================
   SEÇÃO: GALERIA  →  leva para a página Galeria

   Carrossel com rolagem nativa e scroll-snap. Deliberadamente NÃO é um
   carrossel de transform: com overflow nativo o arraste no celular, a roda
   do mouse, o Tab e as setas do teclado funcionam sem uma linha de JS. Os
   botões só chamam scrollBy.
   ========================================================================== */

.galeria-home { background-color: var(--c-creme); padding-block: var(--section-y); }

.galeria-home__topo {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.galeria-home__titulo { margin: 14px 0 10px; max-width: 20ch; }
.galeria-home__texto { margin: 0; font-size: 1.0625rem; color: var(--t-creme-2); max-width: 46ch; }

.carrossel__controles { display: flex; gap: 10px; }
.carrossel__btn {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 2px solid var(--c-azul);
  background-color: transparent;
  color: var(--c-azul);
  font-size: 1.25rem;
  line-height: 1;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.carrossel__btn--cheio { background-color: var(--c-azul); color: var(--c-amarelo); }
.carrossel__btn:hover { background-color: var(--c-azul); color: var(--c-amarelo); }
.carrossel__btn[disabled] { opacity: 0.35; pointer-events: none; }

.carrossel__pista {
  margin-top: 38px;
  padding: 4px var(--sp-5);
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sem isto o snap alinha o cartão à borda do container e ignora o padding,
     o que faz a pista nascer já rolada uns 24px — e o botão "anterior"
     aparece habilitado logo de cara, sem ter para onde voltar. */
  scroll-padding-inline: var(--sp-5);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carrossel__pista::-webkit-scrollbar { display: none; }

.foto-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background-color: var(--c-azul);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.foto-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  opacity: 0.92;
  background-color: var(--t-profundo);
}
.foto-card__corpo { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.foto-card__num {
  font-family: var(--f-serif);
  font-size: 0.8125rem;
  letter-spacing: 2.2px;
  color: var(--c-amarelo);
}
.foto-card__texto { margin: 0; font-size: 0.96875rem; line-height: 1.5; color: var(--c-creme); }

/* Barra de posição: reflete o scrollLeft da pista. */
.carrossel__barra {
  max-width: 1240px;
  margin: 26px auto 0;
  padding-inline: var(--sp-5);
  height: 4px;
  background-color: rgba(0, 19, 227, 0.16);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.carrossel__barra span {
  display: block;
  height: 100%;
  width: 0;
  background-color: var(--c-azul);
  border-radius: var(--radius-pill);
  transition: width 120ms linear;
}

/* A grade da home é a mesma da Galeria — .grade-fotos carrega o formato.
   Aqui só entra o alinhamento com o container da seção, que o carrossel
   antes resolvia sozinho por ser de largura cheia. */
.galeria-home__grade {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.galeria-home__acoes {
  max-width: 1240px;
  margin: var(--sp-7) auto 0;
  padding-inline: var(--sp-5);
}



/* ==========================================================================
   SEÇÃO: REELS

   Duas esteiras de cartões em formato de tela de celular, correndo em
   sentidos opostos. Parar ao passar o mouse, seguir ao tirar, e clicar abre
   o Reel no Instagram.

   POR QUE CAPA ESTÁTICA E NÃO EMBED
   O <iframe> do Instagram carrega cerca de 1 MB de JavaScript por Reel. Com
   doze cartões em movimento, seriam 12 MB e uma rolagem travada no celular —
   justamente o aparelho da maior parte do público. Aqui cada cartão é uma
   imagem leve com link: o vídeo só carrega quando a pessoa decide ver, já no
   Instagram. É o padrão "fachada", o mesmo que o YouTube usa em lite-embed.

   COMO O LOOP FECHA SEM EMENDA
   Cada esteira tem a lista de cartões DUAS vezes. A animação desloca
   exatamente 50% da pista, que é o comprimento de uma cópia inteira — ao
   terminar, o que está na tela é idêntico ao quadro inicial. A segunda cópia
   leva aria-hidden para o leitor de tela não anunciar tudo duas vezes.
   ========================================================================== */

.reels {
  background-color: var(--c-creme);
  padding-block: var(--section-y);
  overflow: hidden;
}

.reels__topo {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.reels__titulo { margin: 14px 0 10px; max-width: 20ch; }
.reels__texto { margin: 0; font-size: 1.0625rem; color: var(--t-creme-2); max-width: 52ch; }

/* ---------- Esteira ---------- */
.reels__esteira { overflow: hidden; }
.reels__esteira + .reels__esteira { margin-top: var(--sp-5); }

.reels__pista {
  display: flex;
  gap: var(--sp-5);
  width: max-content;
  animation: reels-anda 64s linear infinite;
  will-change: transform;
}

/* A segunda esteira corre no sentido oposto. É o contraste entre as duas
   que dá a sensação de movimento — duas esteiras no mesmo sentido leriam
   como uma coisa só, mais lenta. */
.reels__esteira--volta .reels__pista { animation-direction: reverse; }

@keyframes reels-anda {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Para ao passar o mouse e ao receber foco por teclado.

   O foco importa tanto quanto o mouse: sem isso, quem navega por Tab teria
   o cartão focado escapando da tela enquanto tenta lê-lo. */
.reels__esteira:hover .reels__pista,
.reels__esteira:focus-within .reels__pista {
  animation-play-state: paused;
}

/* ---------- Cartão em formato de celular ---------- */
.reel-card {
  flex: 0 0 auto;
  /* Com uma esteira só, o cartão pode crescer: ele passa a ser o assunto
     da seção, não um detalhe em fila dupla. Nesta largura a capa 9:16 fica
     com tamanho de aparelho de verdade. */
  width: clamp(230px, 24vw, 330px);
  aspect-ratio: 9 / 16;
  position: relative;
  display: block;
  border-radius: clamp(20px, 2.2vw, 28px);
  overflow: hidden;
  background-color: var(--t-profundo);
  /* A borda escura faz as vezes da moldura do aparelho; a sombra descola o
     cartão do creme e reforça a ideia de objeto, não de imagem colada. */
  border: 3px solid var(--t-creme);
  box-shadow: 0 14px 34px rgba(0, 19, 227, 0.18);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.reel-card:hover,
.reel-card:focus-visible {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 22px 48px rgba(0, 19, 227, 0.30);
}

.reel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Véu na base: sem ele, legenda clara sobre capa clara some. */
.reel-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 18, 0.82) 100%);
  pointer-events: none;
}

.reel-card__play {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: rgba(10, 10, 18, 0.55);
  backdrop-filter: blur(4px);
  color: var(--c-creme);
  z-index: 1;
}
.reel-card__play svg { width: 18px; height: 18px; }

.reel-card__legenda {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 1;
  font-family: var(--f-ui);
  font-size: 0.9375rem;
  font-weight: var(--fw-semi);
  line-height: 1.3;
  color: var(--c-creme);
}

.reels__acoes {
  max-width: 1240px;
  margin: var(--sp-7) auto 0;
  padding-inline: var(--sp-5);
}

/* Quem pediu menos movimento recebe as esteiras paradas. O conteúdo
   continua todo acessível: é só rolar a esteira, que mantém overflow. */
@media (prefers-reduced-motion: reduce) {
  .reels__pista { animation: none; }
  .reels__esteira { overflow-x: auto; }
}

/* ==========================================================================
   SEÇÃO: JOGOS  →  leva para /jogos/

   Não existe no modelo original — foi acrescentada porque a home precisa de
   uma porta para cada página. Usa a paleta do jogo (--j-*) contida aqui
   dentro, para ela não vazar para o resto do site.
   ========================================================================== */

.jogos-home {
  position: relative;
  overflow: hidden;
  background-color: var(--c-azul);
  color: var(--c-creme);
  padding-block: var(--section-y-sm);
}
.jogos-home__grade {
  position: relative;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sp-8);
  align-items: center;
}
.jogos-home__titulo { margin: 14px 0 0; color: var(--c-amarelo); }
.jogos-home__titulo .serif { color: var(--c-creme); }
.jogos-home__texto { margin: var(--sp-4) 0 0; font-size: 1.125rem; line-height: 1.55; max-width: 44ch; }
.jogos-home .eyebrow-serif { color: var(--c-amarelo); }

.jogos-home__btn {
  margin-top: var(--sp-6);
  background-color: var(--j-amarelo);
  color: var(--c-azul);
}
.jogos-home__btn:hover { background-color: var(--j-amarelo-claro); color: var(--c-azul); }

/* Os mascotes espiam por baixo da borda da seção. */
.jogos-home__mascotes {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sp-4);
  min-height: 260px;
}
.jogos-home__mascote {
  width: auto;
  height: clamp(180px, 22vw, 300px);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35));
}

@media (max-width: 991.98px) {
  .jogos-home__grade { grid-template-columns: 1fr; gap: var(--sp-6); }
  .jogos-home__mascotes { min-height: 0; }
}


/* ==========================================================================
   SEÇÃO: CANAIS  →  leva para Contato
   ========================================================================== */

.canais {
  background-color: var(--c-salvia);
  color: var(--t-salvia);
  padding-block: var(--section-y-sm);
}
.canais__grade {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.canais__titulo { margin: 14px 0 0; color: var(--t-salvia); }
.canais__titulo .serif { color: var(--c-azul); }
.canais__texto { margin: 14px 0 0; font-size: 1.125rem; line-height: 1.55; max-width: 40ch; }
.canais .eyebrow-serif { color: var(--t-salvia); }

/* Duas colunas fixas, não `auto-fit`.

   Com `repeat(auto-fit, minmax(160px, 1fr))` cabiam três cartões na largura
   da coluna e o quarto descia sozinho — uma fileira de três e um órfão
   embaixo, que lê como erro de montagem. São quatro canais, então dois por
   dois fecha o bloco. */
.canais__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

/* ---------- Adesivo do retrato ilustrado ----------

   A peça é um retângulo OPACO, com fundo amarelo próprio — não um recorte.
   Por isso ela não funciona "espiando" por uma borda: aparece cortada por
   uma linha reta e lê como erro de montagem.

   Tratada como adesivo: moldura arredondada, leve rotação e uma borda creme
   que a separa do fundo. É o mesmo vocabulário do bilhete verde da seção
   "quem sou eu". */
.adesivo-retrato {
  display: block;
  width: clamp(104px, 11vw, 148px);
  height: auto;
  border-radius: var(--radius-lg);
  border: 4px solid var(--c-creme);
  transform: rotate(-4deg);
  box-shadow: 0 14px 30px rgba(10, 10, 18, 0.26);
}
/* ---------- Cartão de canal ----------

   O que havia antes: véu creme a 65% sobre o laranja, contorno azul de 2px e
   raio de 8px. Três decisões que, somadas, faziam o cartão ler como campo de
   formulário e não como a marca:

   1. O véu translúcido deixava o laranja atravessar, e o creme virava um
      pêssego apagado — a única cor da página que não está na paleta.
   2. Raio de 8px é o raio utilitário do projeto, o de caixas de texto. A
      assinatura de forma da marca é o canto em folha, grande numa diagonal
      e quase reto na outra, e ele não aparecia aqui.
   3. Contorno fino sem preenchimento não tem peso para segurar um fundo
      texturizado: o cartão parecia recortado com tesoura sobre a textura.

   Agora: creme OPACO (a textura fica por fora, onde ela é fundo), canto em
   folha na escala do cartão, e sombra em vez de contorno — é a sombra que
   descola o cartão do laranja sem precisar de linha. */
.canal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  min-height: 44px;
  background-color: var(--c-creme);
  border: 0;
  border-radius: var(--radius-xl) var(--radius-sm) var(--radius-xl) var(--radius-sm);
  color: var(--c-azul);
  box-shadow: 0 8px 22px rgba(10, 10, 18, 0.16);
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* O selo do ícone repete o canto em folha do cartão, em escala menor. Um
   círculo aqui brigaria com a forma do cartão em vez de ecoá-la. */
.canal__icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px 4px 15px 4px;
  background-color: var(--c-azul);
  color: var(--c-creme);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.canal__icone svg { width: 23px; height: 23px; }

.canal__corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.canal__tag {
  font-family: var(--f-serif);
  font-size: 0.78125rem;
  letter-spacing: 2.2px;
  line-height: 1.1;
  color: var(--t-creme-2);
  transition: color var(--dur) var(--ease);
}

.canal__nome {
  font-family: var(--f-ui);
  font-weight: var(--fw-bold);
  font-size: 1.0625rem;
  line-height: 1.2;
}

/* A seta diz que o cartão leva para fora sem precisar de texto extra. Ela
   anda ao receber o mouse — o único movimento do cartão além da cor. */
.canal__seta { display: grid; place-items: center; opacity: 0.45; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.canal__seta svg { width: 19px; height: 19px; }

.canal:hover,
.canal:focus-visible {
  background-color: var(--c-azul);
  color: var(--c-creme);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(10, 10, 18, 0.26);
}
.canal:hover .canal__tag,
.canal:focus-visible .canal__tag { color: var(--c-amarelo); }
.canal:hover .canal__icone,
.canal:focus-visible .canal__icone { background-color: var(--c-amarelo); color: var(--c-azul); }
.canal:hover .canal__seta,
.canal:focus-visible .canal__seta { opacity: 1; transform: translateX(4px); }

/* Numa coluna só o cartão fica largo e a seta encostada longe do nome;
   duas colunas a 390px espremeriam ícone e texto. Uma coluna, então, mas
   com o cartão inteiro como alvo de toque. */
@media (max-width: 600px) {
  .canais__lista { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
  .canal, .canal__seta { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
  .canal:hover, .canal:focus-visible { transform: none; }
  .canal:hover .canal__seta, .canal:focus-visible .canal__seta { transform: none; }
}

@media (max-width: 991.98px) {
  .canais__grade { grid-template-columns: 1fr; gap: var(--sp-6); }
}


/* ==========================================================================
   SEÇÃO: COLINHA DIGITAL

   A peça que a pessoa leva no bolso até a urna. A seção existe para uma
   coisa só: fazer o arquivo entrar na galeria do celular.

   POR QUE CIANO
   É cor oficial e quase não aparece na home — o fecho da página vinha
   laranja (Canais) e amarelo (CTA final), duas cores quentes seguidas. O
   ciano no meio separa as duas e marca que aqui a ação é outra.

   O BOTÃO
   `download` com nome próprio: o arquivo no servidor se chama
   colinha-digital.jpg, mas chega no celular como
   colinha-paulinha-braga-40345.jpg. Quem abrir a galeria daqui a um mês
   entende o que é sem precisar abrir.

   A DICA DO IPHONE NÃO É ENFEITE
   No Safari do iPhone o atributo `download` salva em Arquivos, não em
   Fotos — e é em Fotos que a pessoa vai procurar na fila da urna. Por isso
   o texto ensina o toque-e-segure, que é o caminho que funciona lá.
   ========================================================================== */

/* A colinha virou um bloco DENTRO de "Material de campanha": quem carrega
   fundo e respiro agora é a seção-mãe. Mantida a classe porque o conteúdo,
   a moldura da arte e o botão não mudaram. */
.colinha__grade {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sp-8);
  align-items: center;
}

.colinha .eyebrow-serif { color: var(--t-ciano); }
.colinha__titulo { margin: 14px 0 0; max-width: 18ch; color: var(--t-ciano); }
.colinha__titulo .serif { color: var(--c-azul); }
.colinha__texto { margin: var(--sp-5) 0 0; font-size: 1.125rem; line-height: 1.55; max-width: 46ch; }
.colinha .actions { margin-top: var(--sp-6); }
.colinha__icone { width: 20px; height: 20px; flex-shrink: 0; }
.colinha__dica { margin: var(--sp-5) 0 0; font-size: 0.9375rem; line-height: 1.5; max-width: 44ch; }

/* A arte usa a mesma moldura das capas — margem creme e fio azul. É o que
   faz ela ler como peça pronta para guardar, e não como banner da seção.
   Sem aspect-ratio: a proporção é a do arquivo, para não recortar nada. */
.colinha__arte { margin: 0; justify-self: center; }
.colinha__arte img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border: clamp(6px, 0.8vw, 12px) solid var(--c-creme);
  box-shadow: 0 0 0 2px var(--c-azul), 0 18px 40px rgba(4, 16, 79, 0.28);
}

@media (max-width: 991.98px) {
  .colinha__grade { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* A arte vem primeiro: ela explica o que é a colinha antes de qualquer
     texto, e o botão fica logo abaixo do que ele baixa. */
  .colinha__arte { order: -1; }
}


/* ==========================================================================
   SEÇÃO: MATERIAL DE CAMPANHA

   Reúne o que a pessoa leva da campanha para a própria rua: o gerador de
   arte com moldura e a colinha digital, que antes era seção separada.

   O GERADOR
   Duas colunas: controles à esquerda, prévia à direita. Os três formatos
   são pílulas porque a escolha é excludente e precisa caber numa linha —
   abas dariam o mesmo resultado com mais estrutura para um controle de três
   opções.

   A PRÉVIA TEM ALTURA TRAVADA
   O Story é 9:16 e o Post é 1:1. Sem travar, a coluna da prévia saltaria de
   altura a cada troca de formato e empurraria a página inteira. Com altura
   fixa e `object-fit` no canvas, o que muda é a largura do desenho.
   ========================================================================== */

.material {
  background-color: var(--c-ciano);
  color: var(--t-ciano);
  padding-block: var(--section-y);
}

.material__topo {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.material .eyebrow-serif { color: var(--t-ciano); }
.material__titulo { margin: 14px 0 0; max-width: 20ch; color: var(--t-ciano); }
/* A palavra de destaque vem em azul: é o gesto da marca — o peso do Archivo
   Black cortado pela serifada leve em itálico. */
.material__titulo .serif { color: var(--c-azul); }
.material__texto { margin: var(--sp-5) 0 0; font-size: 1.125rem; line-height: 1.55; max-width: 52ch; }

.material__divisor {
  max-width: 1240px;
  margin: var(--sp-9) auto;
  border-top: 2px solid rgba(4, 16, 79, 0.18);
}

/* ---------- Gerador ---------- */
.moldura {
  max-width: 1240px;
  margin: var(--sp-8) auto 0;
  padding-inline: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.moldura__controles { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }

.moldura__formatos { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.moldura__pilula {
  padding: 0.6rem 1.5rem;
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  color: var(--c-azul);
  background-color: var(--c-creme);
  border: 2px solid var(--c-azul);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.moldura__pilula:hover { background-color: rgba(0, 19, 227, 0.12); }
.moldura__pilula.is-ativa { background-color: var(--c-azul); color: var(--c-creme); }

.moldura__passo { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; max-width: 360px; }
.moldura__rotulo { font-family: var(--f-ui); font-weight: var(--fw-semi); font-size: 0.9375rem; }

/* O campo de arquivo nativo não aceita estilo; o rótulo faz as vezes de
   botão e o campo fica escondido, mas alcançável — some da vista, não do
   teclado nem do leitor de tela. */
.moldura__arquivo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.5rem;
  font-family: var(--f-ui);
  font-weight: var(--fw-bold);
  color: var(--c-azul);
  background-color: var(--c-creme);
  border: 2px dashed var(--c-azul);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--dur) var(--ease);
}
.moldura__arquivo:hover { background-color: rgba(0, 19, 227, 0.1); }
.moldura__arquivo-campo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Sem isto o foco do teclado no campo escondido não apareceria em lugar
   nenhum: o contorno vai para o rótulo, que é o que se vê. */
.moldura__arquivo-campo:focus-visible + .moldura__arquivo,
.moldura__passo:focus-within .moldura__arquivo {
  outline: 3px solid var(--c-creme);
  box-shadow: 0 0 0 6px var(--c-azul);
}

.moldura__zoom { width: 100%; accent-color: var(--c-azul); }
.moldura__zoom:disabled { opacity: 0.45; cursor: not-allowed; }

.moldura .btn:disabled { opacity: 0.5; pointer-events: none; }

.moldura__aviso {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 44ch;
}

/* ---------- Prévia ---------- */
.moldura__palco {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: var(--sp-5);
  /* Creme a 55% sobre o ciano da seção — que na tela dá um azul claro, não
     um creme: é a cor do fundo vista através de um véu claro. Voltou a ser
     esta depois de experimentos com branco e com o azul da marca.

     A borda branca é o que faltava antes. Sem ela o palco não tinha limite
     próprio e escorria para dentro do ciano; com ela, a mesma transparência
     passa a ler como uma caixa de verdade. Medida contra o ciano da seção
     a borda dá 1,9:1 — é acento, não divisor —, então a espessura é que faz
     o trabalho de torná-la perceptível. */
  background-color: rgba(255, 251, 240, 0.55);
  border: 3px solid var(--c-white);
  border-radius: var(--radius-lg);
}

.moldura__tela {
  display: block;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 16px 36px rgba(4, 16, 79, 0.24);
  /* Sem foto não há o que arrastar, então o cursor não promete nada. */
  cursor: default;
}

/* `touch-action: none` só depois que a foto entra.

   Ele desliga a rolagem da página sobre a prévia, que é o que permite
   arrastar com o dedo. Aplicado desde o começo, prenderia a rolagem num
   quadrado vazio — a pessoa passaria o dedo na área e a página não andaria,
   sem nada ali para justificar. */
.material.tem-foto .moldura__tela {
  cursor: grab;
  touch-action: none;
}
.material.tem-foto .moldura__tela.esta-arrastando { cursor: grabbing; }

.moldura__dica {
  margin: var(--sp-3) 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  opacity: 0.75;
}
/* A dica só faz sentido quando há foto para enquadrar. */
.material:not(.tem-foto) .moldura__dica { display: none; }
/* No avatar o recorte redondo é feito no canvas, mas a sombra continuaria
   quadrada em volta dele — daí o raio também aqui. */
.moldura__tela.e-redonda { border-radius: 50%; }

.moldura__vazio {
  position: absolute;
  margin: 0;
  padding-inline: var(--sp-5);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--t-ciano);
}
.material.tem-foto .moldura__vazio { display: none; }

@media (max-width: 991.98px) {
  .moldura { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* A prévia vem primeiro: é ela que explica o que a seção faz. */
  .moldura__palco { order: -1; }
  .moldura__controles { width: 100%; }
  .moldura__passo { max-width: none; }
}


/* ==========================================================================
   SEÇÃO: CTA FINAL

   O número da urna em corpo gigante é o fecho da página: é o que precisa
   ficar na cabeça de quem chegou até aqui.
   ========================================================================== */

.final {
  position: relative;
  overflow: hidden;
  background-color: var(--c-amarelo);
  color: var(--c-azul);
  padding-block: var(--section-y-md);
}
.final__interno {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  align-items: flex-start;
}
.final__numero {
  font-family: var(--f-display);
  font-size: clamp(4.5rem, 18vw, 13.75rem);
  line-height: 0.82;
  letter-spacing: -8px;
  color: var(--c-azul);
}
.final__titulo { margin: 0; font-size: var(--fs-h2-xs); max-width: 24ch; color: var(--c-azul); }
.final__texto { margin: 0; font-size: 1.125rem; line-height: 1.55; max-width: 48ch; }
.final .eyebrow-serif { color: var(--c-azul); }

/* ---------- Colagem de adesivos, no lado direito ----------

   O lado direito da seção estava vazio. Medido: o número, o título, o texto
   e o botão terminam todos por volta de 60% da largura da tela — 59% a
   1440px, 60% a 1280 e a 992. A colagem ocupa essa faixa, e só ela.

   POR QUE ADESIVO, E NÃO RECORTE
   As peças do mosaico são retângulos OPACOS, com fundo próprio — nenhuma tem
   transparência. Soltas sobre o amarelo, apareceriam cortadas por uma linha
   reta e leriam como erro de montagem. Com moldura creme, giro leve e
   sombra, lêem como adesivos colados. É o mesmo tratamento já dado ao
   retrato ilustrado da Biografia e ao adesivo do slogan.

   TRÊS TRANSFORMAÇÕES, TRÊS ELEMENTOS
   Cada peça precisa de três `transform` que não cabem no mesmo elemento: a
   paralaxe é escrita inline pelo JS, a entrada em cena vem por classe, e o
   giro do adesivo é fixo. Estilo inline vence classe, então empilhar as três
   num elemento só apagaria duas — a peça ficaria sem giro ou sem entrada.
   Daí os três níveis: .final__peca leva a paralaxe, .final__peca__entrada
   leva a entrada, e a própria imagem leva o giro.

   As velocidades de paralaxe alternam de sinal: as peças se afastam umas das
   outras conforme a página rola, em vez de deslizarem em bloco. */
.final__colagem { display: none; }

/* Abaixo de 992px o texto ocupa a largura toda — não há lado direito vazio
   para preencher, e a colagem só roubaria altura da tela no celular. */
@media (min-width: 992px) {
  .final__colagem {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 61%;
    right: 0;
    /* Decoração não intercepta clique. */
    pointer-events: none;
  }

  .final__peca { position: absolute; display: block; }
  .final__peca__entrada { display: block; }

  .final__peca img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 4px solid var(--c-creme);
    box-shadow: 0 16px 36px rgba(10, 10, 18, 0.24);
  }

  .final__peca--igreja       { top: 8%;  right: 2%;  width: 64%; z-index: 1; }
  .final__peca--igreja img   { transform: rotate(-3.5deg); }

  .final__peca--assinatura     { top: 31%; left: 0;   width: 54%; z-index: 2; }
  .final__peca--assinatura img { transform: rotate(3deg); }

  .final__peca--emoji      { top: 47%; right: 11%; width: 26%; z-index: 3; }
  .final__peca--emoji img  { transform: rotate(-6deg); }

  .final__peca--coracao      { top: 62%; left: 14%; width: 17%; z-index: 4; }
  .final__peca--coracao img  { transform: rotate(9deg); }
}

@media (max-width: 575.98px) {
  .final__numero { letter-spacing: -4px; }
}


/* ==========================================================================
   PEÇAS COMPARTILHADAS ENTRE AS SEÇÕES
   ========================================================================== */

/* Rótulo serifado acima dos títulos. Substitui o .eyebrow antigo, que era
   em caixa alta com tracking largo. */
.eyebrow-serif {
  display: block;
  font-family: var(--f-serif);
  font-size: 0.875rem;
  letter-spacing: 2.6px;
  color: var(--c-azul);
}

/* Etiqueta sobre foto — "ATUAÇÃO NAS COMUNIDADES", "FOTO DA CANDIDATA". */
.etiqueta {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 8px 14px;
  background-color: var(--c-amarelo);
  color: var(--c-azul);
  border-radius: var(--radius-sm);
  font-family: var(--f-serif);
  font-size: 0.8125rem;
  letter-spacing: 2.2px;
}

/* Parágrafo de leitura das seções. */
.prosa { margin: 0; font-size: 1.125rem; line-height: 1.65; color: var(--t-creme-2); }
.prosa strong { color: var(--c-azul); font-weight: var(--fw-bold); }



/* ==========================================================================
   PÁGINAS INTERNAS — padrões compartilhados

   Biografia, Galeria e Contato usam a mesma gramática: um herói amarelo mais
   curto que o da home, seções alternando creme / periwinkle / sálvia, e uma
   ponte no fim levando para a próxima página.
   ========================================================================== */

/* ---------- Herói de página interna ----------
   Mais baixo que o da home: aqui o título é o assunto, não a apresentação
   da candidata. Sem as três colunas, sem o mosaico. */
.pagina-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--c-amarelo);
  color: var(--c-azul);
  padding-block: var(--section-y-sm);
}
.pagina-hero__brilho {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 105%,
              rgba(255, 224, 122, 0.96) 0%,
              rgba(255, 194, 4, 0.94) 45%,
              rgba(255, 171, 4, 0.96) 100%);
}
.pagina-hero__grade {
  position: relative;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sp-8);
  align-items: center;
}
.pagina-hero__titulo { margin: 14px 0 0; color: var(--c-creme); text-shadow: 0 3px 0 rgba(0, 19, 227, 0.55), 0 6px 18px rgba(0, 19, 227, 0.28); }
.pagina-hero__texto { margin: var(--sp-5) 0 0; font-size: 1.125rem; line-height: 1.55; max-width: 44ch; color: var(--c-azul); }
.pagina-hero .eyebrow-serif { color: var(--c-azul); }

.pagina-hero__media { position: relative; }
/* Capa das páginas internas.

   POR QUE 1/1 E SEM RAIO
   As fotos de capa da Biografia e da Galeria são 768×768. A moldura de 4/3
   descartava 25% da ALTURA — justamente a faixa onde ficam os rostos — e o
   canto de 180px comia mais um pedaço por cima disso. Em 1/1 essas duas
   aparecem inteiras, e sem raio não há canto para engolir nada.

   O Contato é a exceção e tem regra própria mais abaixo: a foto de lá é um
   recorte em retrato, não uma foto quadrada.

   A MOLDURA
   Margem creme larga por dentro e um fio azul de 2px por fora, mais sombra:
   leitura de foto impressa, mantendo o canto reto.

   O fio azul não é enfeite. Em página de fundo creme a margem creme sumiria
   contra o fundo e a foto ficaria seca; o fio garante o contorno nos dois
   tipos de fundo que o projeto usa. Feito com `box-shadow: 0 0 0 2px` e não
   com `outline` para empilhar com a sombra na mesma propriedade.

   ESCOPO
   Esta é a capa das páginas internas — .pagina-hero existe em Biografia,
   Galeria e Contato, e em nenhum lugar da home. Por isso o tratamento pode
   morar na regra base, sem modificador: ele já é, por construção, "todas as
   páginas menos a home". */
.pagina-hero__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  border: clamp(6px, 0.8vw, 12px) solid var(--c-creme);
  box-shadow: 0 0 0 2px var(--c-azul), 0 18px 40px rgba(0, 19, 227, 0.22);
}

/* Capa do Contato: a foto de lá é um RECORTE, não uma foto de cena.

   É a mesma peça do herói da home — figura sem fundo, 934×1259 em retrato,
   e com a cabeça encostada na borda de cima do arquivo.

   Com `cover` na moldura quadrada, o recorte descartava 26% da altura: 13%
   em cima, que é justamente onde está a coroa da cabeça, e 13% embaixo, que
   cortava os braços cruzados. Medido, não estimado.

   `contain` resolve sem abrir exceção no formato: a moldura continua
   quadrada, igual à das outras páginas, e a figura entra inteira. O que
   sobra dos lados NÃO vira tarja — a peça tem fundo transparente, então
   ali aparece a mesma textura amarela da seção, e a figura lê como se
   estivesse posada dentro do quadro. Truque que só funciona porque é
   recorte; com foto retangular isso deixaria duas barras. */
.pagina-hero__media--recorte img {
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .pagina-hero__grade { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* Trilha de navegação. Era um <p> solto; agora é um <nav> de verdade. */
.trilha {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-serif);
  font-size: 0.8125rem;
  letter-spacing: 2.2px;
  color: var(--c-azul);
}
.trilha a { text-decoration: underline; text-underline-offset: 3px; }
.trilha li { display: flex; align-items: center; gap: var(--sp-2); }
.trilha ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }


/* ---------- Espaço reservado de CONTEÚDO ----------
   Irmão do .slot das imagens. Marca no layout um texto que ainda não chegou,
   dizendo o que precisa vir. Sem isso a alternativa seria eu inventar datas
   e fatos da biografia — o que, num site de campanha, não se faz. */
.pendente {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 2px dashed rgba(0, 19, 227, 0.4);
  border-radius: var(--radius);
  background-image: repeating-linear-gradient(135deg,
      rgba(0, 19, 227, 0.05) 0 9px,
      rgba(0, 19, 227, 0.01) 9px 18px);
  color: var(--c-azul);
}
.pendente__rotulo {
  font-family: var(--f-serif);
  font-size: 0.8125rem;
  letter-spacing: 2.2px;
}
.pendente__titulo { margin: 0; font-size: var(--fs-h4); color: var(--c-azul); }
.pendente__lista { margin: 0; padding-left: 1.2em; font-size: var(--fs-text); line-height: 1.6; color: var(--t-creme-2); }
.pendente__lista li + li { margin-top: var(--sp-2); }


/* ---------- Linha do tempo ---------- */
.linha-tempo { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); }

.marco {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--sp-6);
  align-items: center;
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(0, 19, 227, 0.2);
}
.marco:first-child { border-top: 0; }

/* Alterna o lado da foto, para a coluna não virar uma lista monótona. */
.marco:nth-child(even) .marco__midia { order: 2; }

.marco__midia img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  /* Ancorado no TOPO, não no centro.

     As fotos são 768x768 e a moldura é 16/11, então o recorte descarta 31%
     da altura. Centralizado, isso saía metade em cima e metade embaixo —
     16% do topo. Conferindo as fontes: em 2.jpg o cabelo da senhora encosta
     na borda de cima e em 4.jpg o do rapaz também. Ou seja, os 16% de cima
     eram exatamente onde estavam as cabeças.

     Ancorando no topo, o recorte inteiro sai por baixo e nada se perde
     acima. Não dá para fazer melhor mantendo 16/11: as fontes já vêm sem
     folga sobre as cabeças. */
  object-position: center top;
  border-radius: var(--radius);
}
.marco__ano {
  display: inline-block;
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -2px;
  color: var(--c-azul);
}
.marco__titulo { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-h4); }
.marco__texto { margin: 0; font-size: var(--fs-text); line-height: 1.6; }

@media (max-width: 767.98px) {
  .marco { grid-template-columns: 1fr; gap: var(--sp-4); }
  .marco:nth-child(even) .marco__midia { order: 0; }
}


/* ---------- Ponte para a próxima página ---------- */
.ponte {
  background-color: var(--c-salvia);
  color: var(--t-salvia);
  padding-block: var(--section-y-sm);
}
.ponte__grade {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: center;
}
.ponte__titulo { margin: 14px 0 0; color: var(--t-salvia); }
.ponte__titulo .serif { color: var(--c-azul); }
.ponte__texto { margin: var(--sp-4) 0 0; font-size: 1.125rem; line-height: 1.55; max-width: 48ch; }
.ponte .eyebrow-serif { color: var(--t-salvia); }

.ponte__acao {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

@media (max-width: 767.98px) {
  .ponte__grade { grid-template-columns: 1fr; }
  .ponte__acao { gap: var(--sp-4); }
  .adesivo-retrato { width: 92px; }
}


/* ---------- Bloco de prosa longa ----------
   Largura de leitura travada em ~68 caracteres. Linha mais longa que isso
   cansa: o olho perde o começo da linha seguinte. */
.leitura { max-width: 68ch; }
.leitura > * + * { margin-top: var(--sp-5); }
.leitura h2 { margin-top: var(--sp-8); }
.leitura h3 { margin-top: var(--sp-7); font-size: var(--fs-h4); color: var(--c-azul); }

/* Citação destacada dentro da prosa. */
.destaque-citacao {
  margin-block: var(--sp-7);
  padding: var(--sp-6);
  border-left: 4px solid var(--c-azul);
  background-color: rgba(0, 19, 227, 0.04);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--f-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--c-azul);
}

/* ---------- Faixa de canais oficiais ---------- */
.home-channels { text-align: center; }

/* ---------- Bloco trajetória ---------- */
.home-trajectory__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--c-gray-100);
}
.home-trajectory__media img { width: 100%; height: 100%; object-fit: cover; }

.home-trajectory__text + .home-trajectory__text { margin-top: var(--sp-5); }

/* ---------- CTA gradiente ---------- */
.home-cta {
  background: var(--grad-mint);
  text-align: center;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.home-cta__title { max-width: 20ch; margin-inline: auto; }
.home-cta__text {
  max-width: 46ch;
  margin: var(--sp-6) auto 0;
  font-size: var(--fs-text);
  color: var(--c-navy);
}


/* ==========================================================================
   15. PÁGINA: BIOGRAFIA
   ========================================================================== */

.sobre-hero { padding-block: clamp(3rem, 6vw, 6rem) 0; }

/* Breadcrumb "/ PRÉ-CANDIDATA A DEPUTADA" */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-6);
}
.breadcrumb__sep { color: var(--c-gray-200); }

.sobre-hero__title { max-width: 16ch; }

.sobre-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(2rem, 5vw, 4.5rem);
}

.sobre-hero__text { max-width: 40ch; font-size: var(--fs-text); }

.sobre-hero__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background-color: var(--c-gray-100);
}
/* object-position no topo: este espaço é paisagem (16/11) e as fotos são
   quadradas, então o recorte descarta 31% da altura. Centralizado, ele corta
   exatamente onde ficam os rostos — ancorando no topo, eles são preservados. */
.sobre-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 991.98px) {
  .sobre-hero__grid { grid-template-columns: 1fr; }
  .sobre-hero__title { max-width: none; }
}

/* ---------- Minha história ---------- */
.sobre-story__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--c-gray-100);
}
.sobre-story__media img { width: 100%; height: 100%; object-fit: cover; }
.sobre-story__text + .sobre-story__text { margin-top: var(--sp-5); }

/* ---------- Pilares ---------- */
.sobre-pillars { text-align: center; }
.sobre-pillars__text {
  max-width: 52ch;
  margin: var(--sp-7) auto 0;
  font-size: var(--fs-text);
}

/* ---------- Ponte para a galeria ---------- */
.sobre-bridge__grid {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.sobre-bridge__text { max-width: 56ch; margin-top: var(--sp-4); font-size: var(--fs-text); }

@media (max-width: 767.98px) {
  .sobre-bridge__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   16. PÁGINA: GALERIA
   ========================================================================== */

.galeria-head { padding-block: clamp(3rem, 6vw, 6rem) 0; }
.galeria-head__text { margin-top: var(--sp-5); font-size: var(--fs-text); max-width: 52ch; }

.galeria-cta { text-align: center; }
.galeria-cta__text {
  max-width: 44ch;
  margin: var(--sp-7) auto var(--sp-8);
  font-size: var(--fs-text);
}


/* ==========================================================================
   17. PÁGINA: CONTATO
   ========================================================================== */

.contato-hero { padding-block: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 4rem); }

.contato-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.contato-hero__title { max-width: 13ch; }
.contato-hero__text { margin-top: var(--sp-7); max-width: 42ch; font-size: var(--fs-text); }

.contato-hero__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--c-gray-100);
}
.contato-hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 991.98px) {
  .contato-hero__grid { grid-template-columns: 1fr; }
  .contato-hero__title { max-width: none; }
}

/* ---------- Bloco do formulário ---------- */
.contato-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.contato-form-intro__text {
  margin-top: var(--sp-7);
  max-width: 40ch;
  font-size: var(--fs-text);
  color: var(--c-muted-light);
}

@media (max-width: 991.98px) {
  .contato-form-grid { grid-template-columns: 1fr; }
}