/* ==========================================================================
   CAMILA CARDOSO — DEPUTADA FEDERAL 4424
   Folha de estilo única. Ver DESIGN.md para as regras que governam este arquivo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTES
   Tusker Grotesk .......... display (291 glifos, acentuação completa)
   Obviously Extended ...... apenas a palavra CARDOSO (66 glifos, sem acento)
   Termina ................. apenas DEPUTADA FEDERAL (66 glifos, sem acento)
   Archivo ................. texto corrido e UI (Latin Extended completo)
   Tudo servido em WOFF2 (~60% menor que TTF/OTF). Os arquivos-fonte originais
   ficam em Alterações/FONTES.
   O ?v=2 nas URLs (aqui e nos preloads dos quatro HTML — manter em sincronia!)
   invalida caches de uma conversão WOFF2 anterior sem acentos. Se o conteúdo
   de alguma fonte mudar de novo, incremente a versão nos dois lugares.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Tusker Grotesk';
  src: url('../fonts/TuskerGrotesk-5800Super.woff2?v=2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tusker Grotesk';
  src: url('../fonts/TuskerGrotesk-4700Bold.woff2?v=2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Obviously';
  src: url('../fonts/Obviously-ExtendedBold.woff2?v=2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Termina';
  src: url('../fonts/Termina-Medium.woff2?v=2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Termina';
  src: url('../fonts/Termina-Bold.woff2?v=2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-latin-ext.woff2?v=2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-latin.woff2?v=2') format('woff2');
  font-weight: 100 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;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root {
  --azul:       #344DF4;
  --verde:      #06D59F;
  --amarelo:    #FFEB00;
  --branco:     #FFFFFF;
  --papel:      #F8F8F8;
  --tinta:      #0A0A0A;
  --tinta-65:   rgba(10, 10, 10, .65);
  --branco-70:  rgba(255, 255, 255, .70);

  --font-display:  'Tusker Grotesk', 'Archivo', system-ui, sans-serif;
  --font-wordmark: 'Obviously', 'Archivo', system-ui, sans-serif;
  --font-label:    'Termina', 'Archivo', system-ui, sans-serif;
  --font-body:     'Archivo', system-ui, -apple-system, sans-serif;

  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --ritmo:   clamp(4rem, 10vw, 9rem);
  --max:     1400px;

  /* Altura única: o cabeçalho não encolhe na rolagem. */
  --header-h:  84px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, .4vw + 1rem, 1.1875rem);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* height:auto é obrigatório aqui. Sem ele, o atributo height="..." da tag vira
   altura real, e qualquer `aspect-ratio` no CSS passa a ser ignorado — porque
   aspect-ratio só age quando uma das dimensões é automática. Era o que fazia a
   foto do zigue-zague, marcada como 4/5, renderizar em ~1:3,5. */
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Indicador de foco em azul (5,98:1 sobre branco). O verde da marca mede
   1,90:1 sobre branco — reprovado para indicador não-textual (WCAG 1.4.11) —
   e fica reservado aos contextos de fundo azul, logo abaixo. */
:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

.banda--azul :focus-visible,
.eixo--azul :focus-visible,
.jingle :focus-visible,
.hero :focus-visible,
.hero-pagina :focus-visible,
body.nav-aberta .nav :focus-visible,
body.nav-aberta .nav-toggle:focus-visible { outline-color: var(--verde); }

.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;
}

/* Primeiro elemento focável de toda página: invisível até receber foco de
   teclado, quando desce por cima do header. */
.skip-link {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  padding: 1rem 1.5rem;
  background: var(--azul);
  color: var(--branco);
  font-weight: 700;
  transform: translateY(-110%);
  transition: transform .18s var(--ease);
}

.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   4. ESTRUTURA
   -------------------------------------------------------------------------- */

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

.secao { padding-block: var(--ritmo); }

.secao--papel  { background: var(--papel); }

/* Ritmos recorrentes de CTA e introdução — substituem estilos inline. */
.secao__intro { margin-top: 1.5rem; }
.secao__cta   { margin-top: 3rem; }

/* --------------------------------------------------------------------------
   5. TIPOGRAFIA
   -------------------------------------------------------------------------- */

/* Entrelinha 1.0 e não os .84 da spec original: em caixa alta portuguesa a
   Tusker carrega Ã, Ç, Ê, Ú e Õ, e os acentos da linha de baixo batem na
   linha de cima. Escala e entrelinha registradas no DESIGN.md §3. */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: -.01em;
  font-size: clamp(2.75rem, 8vw, 7rem);
  overflow-wrap: break-word;
}

.display--md { font-size: clamp(2.25rem, 6vw, 5rem); }
.display--sm { font-size: clamp(2rem, 5vw, 3.75rem); }

/* Tracking aberto para frases longas em faixa: desfaz o -.01em padrão do
   display e dá um respiro extra entre as letras. */
.display--espacado { letter-spacing: .02em; }

/* Entrelinha aberta para frases em faixa que quebram em mais de uma linha:
   no 1.0 padrão o til de "PLANTÃO" encosta na linha de cima. */
.display--entrelinha { line-height: 1.14; }

.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
}

.olho {
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: clamp(.6875rem, .3vw + .625rem, .8125rem);
  line-height: 1;
}

/* Rótulo com acento não pode usar Termina (fonte demo sem glifos acentuados) */
.rotulo {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: clamp(.6875rem, .3vw + .625rem, .8125rem);
  line-height: 1;
}

/* Rótulo solto acima de um título, fora do zigue-zague. */
.rotulo--bloco { display: block; margin-bottom: 1rem; }

.titulo-secao {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  /* Distribui as palavras entre as linhas em vez de encher cada uma até
     estourar: evita a última linha órfã e o recorte irregular à direita. */
  text-wrap: balance;
  /* Válvula de segurança para palavra longa em coluna estreita. Só age se
     nada mais couber — nunca no fluxo normal. */
  overflow-wrap: break-word;
}

.prosa { max-width: 62ch; }
.prosa p + p { margin-top: 1.15em; }
.prosa strong { font-weight: 700; color: var(--azul); }

.destaque-verde { color: var(--verde); }
.destaque-azul  { color: var(--azul);  }

/* --------------------------------------------------------------------------
   6. BOTÕES
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 1.125rem 2.75rem;
  border: 2px solid var(--azul);
  /* Raio FIXO, não percentual: em porcentagem o raio é calculado por eixo, sai
     elíptico e varia com a largura, deixando cada botão com uma curvatura
     diferente. 12px ≈ 20% da altura do botão, igual em todos. */
  border-radius: 12px;
  background: var(--azul);
  color: var(--branco);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
  /* Sombra em duas camadas: uma rente ao botão para definir a borda, outra
     mais aberta e difusa para a projeção. Uma só camada ou fica dura ou
     fica embaçada demais. */
  box-shadow: 0 1px 2px rgba(10, 10, 10, .10),
              0 4px 12px rgba(10, 10, 10, .10);
  transition: background-color .18s var(--ease),
              color .18s var(--ease),
              border-color .18s var(--ease),
              box-shadow .18s var(--ease),
              transform .18s var(--ease);
}

/* Texto em tinta sobre o verde: azul sobre verde mede 3,1:1 e reprova o AA
   no corpo de 14px do botão (DESIGN.md §2 — em tamanho de corpo, tinta). */
.btn:hover,
.btn:focus-visible {
  background: var(--verde); border-color: var(--verde); color: var(--tinta);
  box-shadow: 0 2px 4px rgba(10, 10, 10, .12),
              0 8px 20px rgba(10, 10, 10, .14);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(10, 10, 10, .12); }

.btn--contorno { background: transparent; color: var(--azul); }
.btn--contorno:hover,
.btn--contorno:focus-visible { background: var(--azul); color: var(--branco); }

.btn--verde { background: var(--verde); border-color: var(--verde); color: var(--tinta); }
/* Hover em branco, não azul: .btn--verde vive nas bandas azuis, e invertido
   para azul o botão sumia contra o fundo da própria banda. */
.btn--verde:hover,
.btn--verde:focus-visible { background: var(--branco); border-color: var(--branco); color: var(--azul); }

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

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Sempre sólido: o hero é foto com véu azul, e um header transparente
     ficaria ilegível conforme o degradê abre. */
  background: var(--branco);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

.header__marca { display: flex; align-items: center; gap: clamp(.7rem, 1.3vw, 1.1rem); }

/* O cargo volta ao cabeçalho como TEXTO, não dentro do PNG: no lockup ele
   renderizava com ~3px e sumia. Em duas linhas curtas com um filete antes,
   lê como legenda da marca em vez de disputar com o nome. O alt da imagem
   virou só "Camila Cardoso" para o leitor de tela não repetir o cargo. */
.header__cargo {
  padding-left: clamp(.7rem, 1.3vw, 1.1rem);
  border-left: 2px solid rgba(52, 77, 244, .28);
  color: var(--azul);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: clamp(.5625rem, .5vw, .6875rem);
  letter-spacing: .2em;
  line-height: 1.45;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Em tela estreita o cargo continua visível (pedido de 2026-08-18); o corpo
   segura no piso do clamp e o nowrap garante as duas linhas curtas de sempre. */

/* Variante compacta do lockup: sem a linha "Deputada Federal", que a esta
   escala teria ~3px e seria ilegível, e com o símbolo reescalado à altura do
   nome. A proporção mais horizontal (3,37:1 contra 2,93:1) faz o lettering
   render 24% mais na mesma altura. Altura maior também: o cabeçalho tem 84px
   e a versão anterior, com 42px, usava só metade. */
.header__logo {
  width: auto;
  height: clamp(34px, 4vw, 52px);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); }

.nav__link {
  position: relative;
  padding-block: .5rem;
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--azul);
  transition: color .18s var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }

.nav__cta {
  padding: .75rem 1.5rem;
  font-size: .75rem;
  /* Texto branco (8,0:1): o verde da marca sobre azul mede ~3,1:1 e a 12px
     em caixa alta reprova o AA — verde sobre azul é só para display. */
  background: var(--azul); border-color: var(--azul); color: var(--branco);
}
/* O hover era branco: sobre o header agora branco, o botão sumiria. */
.nav__cta:hover,
.nav__cta:focus-visible {
  background: var(--verde); border-color: var(--verde); color: var(--tinta);
}
/* Em participe.html o item atual do menu é o próprio CTA: sem esta regra,
   é a única página em que nada aparece marcado como "você está aqui". */
.nav__cta[aria-current='page'] {
  background: var(--verde); border-color: var(--verde); color: var(--tinta);
}

/* Botão hambúrguer */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 26px; height: 2px;
  margin: 6px auto;
  background: var(--azul);
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}

/* Com o menu aberto o hambúrguer fica sobre o painel azul, não sobre o
   header branco: precisa inverter para não desaparecer. */
body.nav-aberta .nav-toggle span { background: var(--branco); }

body.nav-aberta .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-aberta .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-aberta .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */

/* A foto sangra na seção inteira e o conteúdo se sobrepõe a ela. A Camila está
   à esquerda do quadro, por isso o texto ocupa a direita: o degradê cobre o
   fundo do corredor e deixa o rosto dela legível. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100dvh;
  padding-top: var(--header-h);
  overflow: hidden;
}

.hero__foto {
  position: absolute;
  inset: 0;
  background: var(--azul);
  overflow: hidden;
}

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

/* Véu azul em degradê sobre a foto: 70% na borda direita, onde ficam nome e
   número, abrindo até transparente total à esquerda, sobre a Camila.
   O último stop repete o RGB com alfa 0 — usar `transparent` faria o navegador
   interpolar por preto e sujaria o meio do degradê de cinza. */
.hero__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to left,
      rgba(52, 77, 244, .70) 0%,
      rgba(52, 77, 244, .67) 28%,
      rgba(52, 77, 244, .43) 60%,
      rgba(52, 77, 244, 0)   100%);
  pointer-events: none;
}

/* Sobreposto à foto (z-index acima do véu), limitado à metade direita para
   não invadir o rosto da Camila, que agora está à esquerda. O margin-left
   empurra o bloco para a borda direita do flex container. */
.hero__conteudo {
  position: relative;
  z-index: 1;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  /* flex-start alinha assinatura e botão na borda esquerda do container, a
     mesma vertical onde o CARDOSO do lockup começa. */
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  /* Recuo direito próprio, maior que o gutter: afasta o bloco da borda e o
     traz na direção do centro. */
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 7vw, 7rem) clamp(2.5rem, 6vw, 5rem) var(--gutter);
  /* O teto em 36.8rem travava a caixa enquanto a tipografia continuava
     crescendo: em 1600px e 1920px a qualificação caía para a linha de baixo.
     52rem acompanha o corpo maior do número e do texto. */
  width: min(58%, 52rem);
}

/* Tudo vive sobre azul: o subtítulo em tinta sumiria e o botão azul também. */
.hero__conteudo .hero__sub { color: var(--branco); }

.hero__conteudo .btn {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--azul);
}

.hero__lockup { display: flex; flex-direction: column; }

/* Lockup em texto: sem uso desde que o index passou a exibir o KV oficial como
   imagem. Mantido como fallback caso se volte ao nome em texto — e como
   registro de que o contraste Tusker/Obviously com o nome em verde é a marca
   da campanha (ver prancha 07 do CAMILA CARDOSO_IDV.pdf), não um deslize.
   Não unificar. */
.hero__lockup .display   { color: var(--verde); font-size: clamp(3rem, 13vw, 8rem); }
.hero__lockup .wordmark  { color: var(--azul); font-size: clamp(1.75rem, 5.2vw, 4.35rem); margin-top: .12em; }

/* O KV traz o campo azul chapado em #344DF4, idêntico a --azul. Com a coluna
   no mesmo azul, a borda da imagem some e o lockup lê como se estivesse
   composto direto sobre o fundo, sem retângulo aparente. */
.hero__lockup-img img { display: block; width: 100%; height: auto; }

/* Número e qualificação lado a lado. O texto é óptica e não geometricamente
   centrado: alinhar pelo centro da caixa deixaria as três linhas parecendo
   altas demais contra a mancha do número, que tem line-height fechado. */
.hero__assinatura {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.1vw, 1rem);
  flex-wrap: wrap;
}

/* Filete separando o número da qualificação: sem ele os dois blocos, ambos
   em caixa alta, leem como um texto só. */
.hero__assinatura .hero__sub {
  padding-left: clamp(.5rem, 1.1vw, 1rem);
  border-left: 2px solid rgba(255, 255, 255, .35);
}

.hero__sub {
  font-weight: 600;
  font-size: clamp(1rem, 1.45vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.35;
  /* 22ch é o que mantém a quebra em três linhas ("TÉCNICA DE ENFERMAGEM," /
     "COMEDIANTE &" / "TRABALHADORA."). Em 20ch a primeira linha já não cabe
     e o texto vira quatro linhas. Não reduzir. */
  max-width: 22ch;
}

.hero__rodape {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(1rem, 2vw, 1.75rem);
  flex-wrap: wrap;
  /* Sobe 10% da própria altura, encurtando a distância para a assinatura.
     translate em vez de margem negativa: não altera o fluxo nem o gap do
     flex container, então nada abaixo se desloca junto. */
  transform: translateY(-10%);
}

/* Número da urna logo abaixo do nome: arte 3D oficial do KV (Asset 3 do
   material de motion), rasterizada em PNG com transparência — o SVG original
   tem 8 mil paths e 6 MB, inviável na web. O clamp é maior que o do antigo
   número em texto porque a caixa da arte inclui a extrusão embaixo: com a
   mesma altura, os dígitos leriam menores que o corpo tipográfico anterior. */
.hero__numero {
  display: block;
  height: clamp(4rem, 8.6vw, 8rem);
  width: auto;
}

/* --------------------------------------------------------------------------
   9. HERO INTERNO (páginas secundárias)
   -------------------------------------------------------------------------- */

.hero-pagina {
  display: grid;
  grid-template-columns: 58fr 42fr;
  align-items: stretch;
  /* dvh, nunca vh: 62vh salta no Safari iOS quando a barra recolhe. */
  min-height: 62dvh;
  background: var(--azul);
  color: var(--branco);
  padding-top: var(--header-h);
}

.hero-pagina__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: clamp(3rem, 7vw, 6rem) var(--gutter);
}

/* Entrelinha um pouco mais aberta que o 1.02 padrão: no header interno o
   título corre em três/quatro linhas e os acentos encostavam na de cima. */
.hero-pagina__texto .titulo-secao { color: var(--verde); line-height: 1.14; }
.hero-pagina__texto p { max-width: 46ch; color: var(--branco); }

.hero-pagina__foto { position: relative; overflow: hidden; background: var(--azul); }
.hero-pagina__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
}

/* --------------------------------------------------------------------------
   10. BANDA DE CITAÇÃO
   -------------------------------------------------------------------------- */

.banda {
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
  text-align: center;
}

.banda--verde { background: var(--verde); }
.banda--verde .display { color: var(--azul); }
.banda--azul  { background: var(--azul);  }
.banda--azul .display  { color: var(--verde); }

.banda .display { max-width: min(18ch, 100%); margin-inline: auto; }

/* Cada oração na sua linha (fechamento do Participe). O span em bloco quebra
   sem depender da largura da mancha. */
.banda__linha { display: block; }

/* Variante compacta (fechamento de Propostas): faixa mais baixa, corpo menor
   (display--md no HTML), entrelinha aberta e mancha mais larga — a frase é
   longa e, em 18ch com o corpo cheio, virava uma torre de sete linhas
   apertadas. O tracking aberto vem do display--espacado. */
.banda--compacta { padding-block: clamp(2.5rem, 6vw, 5rem); }
.banda--compacta .display {
  max-width: min(28ch, 100%);
  line-height: 1.14;
}

/* --------------------------------------------------------------------------
   MANIFESTO — padrão de ícones à esquerda, verde entrando pela direita
   -------------------------------------------------------------------------- */
.manifesto {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5.5rem, 13vw, 11rem);
}

/* O artboard é um padrão quadriculado (BG oficial do kit de ícones, servido
   em WebP lossless): repetido no eixo X e ajustado pela altura, ele cobre a
   faixa inteira em qualquer proporção de tela.
   inset vertical negativo dá folga para o salto no scroll não descobrir borda. */
.manifesto__padrao {
  position: absolute;
  inset: -12% 0;
  background: url('../img/kv/padrao-icones.webp') left center / auto 100% repeat-x;
  will-change: transform;
}

/* Scrim chapado de tinta a 10% sobre o BG inteiro — sem degradê, por decisão
   de direção: baixa o brilho do xadrez por igual e faz o branco da frase
   saltar, sem esconder o padrão. */
.manifesto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .10);
  pointer-events: none;
}

.manifesto .container { position: relative; z-index: 1; }

/* Frase em BRANCO com drop shadow suave sobre o BG em saturação total + scrim
   de 10% — decisão de direção (2026-08-16), registrada no DESIGN.md como
   exceção ao banimento de sombra em título. Duas camadas, ambas sem
   deslocamento lateral: uma rente ao glifo, que é a que separa a letra do
   fundo, e outra larga e baixa, que dá a projeção. */
.banda--verde .manifesto__frase {
  max-width: min(20ch, 100%);
  color: var(--branco);
  text-align: center;
  /* Respiro extra só na frase do manifesto: o -.01em padrão do .display
     deixava a Tusker grudada demais neste corpo sobre o xadrez. */
  letter-spacing: .025em;
  text-shadow: 0 .015em .1em  rgba(3, 26, 21, .32),
               0 .07em  .55em rgba(3, 26, 21, .45);
}

.manifesto__linha { display: block; }

/* O deslocamento é percentual: em elemento inline-block, translateY em % se
   refere à altura da própria palavra, então o gesto escala junto com o corpo
   da fonte sem precisar recalcular em px. */
.manifesto__palavra {
  display: inline-block;
  will-change: opacity, transform;
}
.banda__sub {
  margin-top: 1.75rem;
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  max-width: 52ch;
  margin-inline: auto;
}

/* CTA de fechamento de banda — substitui o margin-top inline repetido. */
.banda__cta { margin-top: 2.5rem; }
/* Azul sobre verde mede 3,4:1 — aprovado só para texto grande (AA large).
   Todo texto em tamanho de corpo sobre verde vai em tinta (10,5:1). */
.banda--verde .banda__sub { color: var(--tinta); }
.banda--azul  .banda__sub { color: var(--branco); }

.eixo--verde .eixo__desc,
.ladrilho:nth-child(even) .ladrilho__desc,
.ladrilho:hover .ladrilho__desc { color: var(--tinta); }

.ladrilho:nth-child(even):hover .ladrilho__desc { color: var(--branco); }

/* No ladrilho verde o título tem ~26px: ainda conta como texto grande, mas em
   azul sobre verde ele perde força justamente no elemento que o leitor varre
   primeiro. Título em tinta; o azul da marca segue presente no ícone. */
.ladrilho:nth-child(even) .ladrilho__titulo,
.ladrilho:hover .ladrilho__titulo { color: var(--tinta); }

.ladrilho:nth-child(even):hover .ladrilho__titulo { color: var(--branco); }

/* --------------------------------------------------------------------------
   11. TICKER
   -------------------------------------------------------------------------- */

.ticker {
  background: var(--azul);
  overflow: hidden;
  padding-block: .9rem;
  border-block: 0;
}

.ticker__trilha {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: correr 26s linear infinite;
}

.ticker__item {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-inline: 1.25rem;
  color: var(--branco);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker__item span { color: var(--verde); }

/* Os SVGs vêm com fill #344df4 — o mesmo azul do fundo da faixa, o que os
   tornaria invisíveis. brightness(0) achata tudo em preto e invert(1) leva a
   branco, funcionando qualquer que seja a cor original do arquivo. */
.ticker__icone {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  filter: brightness(0) invert(1);
  opacity: .9;
}

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

.ticker:hover .ticker__trilha { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   12. ZIGUE-ZAGUE NARRATIVO
   -------------------------------------------------------------------------- */

.zigue {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.zigue + .zigue { margin-top: var(--ritmo); }

.zigue__foto { grid-column: 1 / span 5; }
.zigue__texto { grid-column: 7 / span 6; }

.zigue--invertido .zigue__foto  { grid-column: 8 / span 5; grid-row: 1; }
.zigue--invertido .zigue__texto { grid-column: 1 / span 6; grid-row: 1; }

/* Fotos em cor 100% natural, sem véu nem duotone — vale para o zigue e para
   os headers de página. A única tinta que resta sobre foto é o degradê azul
   do hero da home, que é peça da marca, não filtro. */
.zigue__foto figure { position: relative; margin: 0; background: var(--azul); overflow: hidden; }
.zigue__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Cartões de foto do zigue (home e biografia): cantos arredondados (16px —
   a família dos botões, que usam 12px, numa escala maior), sombra suave e
   leve elevação no hover com a bezier padrão do site. */
.zigue__foto figure {
  border-radius: 16px;
  box-shadow: 0 18px 42px -14px rgba(10, 10, 10, .28);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.zigue__foto figure:hover {
  transform: scale(1.025);
  box-shadow: 0 26px 54px -16px rgba(10, 10, 10, .34);
}

.zigue__texto .rotulo { color: var(--azul); display: block; margin-bottom: 1rem; }
/* Entrelinha mais aberta que o padrão 1.02 dos títulos: no zigue o título
   convive com blocos longos de prosa e a versão justa lia apertada — os
   acentos de "DÓI" quase tocavam a linha de baixo. */
.zigue__texto .titulo-secao { margin-bottom: 1.5rem; line-height: 1.15; }

/* CTA ao fim do texto do zigue — substitui o margin-top inline repetido. */
.zigue__cta { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   CARROSSEL DE FOTOS — usado dentro do .zigue__foto (Conheça Camila)
   -------------------------------------------------------------------------- */

/* A rolagem com scroll-snap é o motor: o arrastar do dedo e o gesto de duas
   dedos do trackpad já funcionam de graça, com a inércia nativa do sistema, e
   sem JS nenhum a trilha continua navegável. As setas e os pontos são só um
   atalho por cima — por isso ficam escondidos até o JS assumir o comando. */
.carrossel__trilha {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Mesmo cartão do zigue: 16px de raio e a sombra suave. */
  border-radius: 16px;
  background: var(--azul);
  box-shadow: 0 18px 42px -14px rgba(10, 10, 10, .28);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* A barra de rolagem cortaria o pé da foto — a navegação são as setas. */
.carrossel__trilha::-webkit-scrollbar { display: none; }

.carrossel__trilha:focus-visible { outline-offset: 4px; }

.carrossel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.carrossel__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Sem JS não há o que comandar: a trilha rola no dedo e no teclado, e um par
   de setas mortas seria pior que seta nenhuma. */
.carrossel__controles { display: none; }

.carrossel--pronto .carrossel__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}

.carrossel__pontos { display: flex; align-items: center; gap: .625rem; }

/* Alvo de 44px para o dedo, ponto de 10px para o olho: o botão é transparente
   e a bolinha vive no ::before, centralizada nele. */
.carrossel__ponto {
  width: 44px;
  height: 44px;
  margin: -17px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.carrossel__ponto::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(10, 10, 10, .22);
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.carrossel__ponto:hover::before { background: rgba(10, 10, 10, .45); }

.carrossel__ponto[aria-current='true']::before {
  background: var(--azul);
  transform: scale(1.4);
}

.carrossel__setas { display: flex; gap: .5rem; }

.carrossel__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--azul);
  border-radius: 12px;
  background: transparent;
  color: var(--azul);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}

.carrossel__seta svg { width: 22px; height: 22px; }

.carrossel__seta:hover,
.carrossel__seta:focus-visible { background: var(--azul); color: var(--branco); }

/* A trilha não dá a volta: nas pontas a seta correspondente sai de cena, para
   o clique não morrer em silêncio. */
.carrossel__seta[disabled] {
  opacity: .3;
  cursor: default;
  background: transparent;
  color: var(--azul);
}

/* --------------------------------------------------------------------------
   JINGLE — player do jingle da campanha
   -------------------------------------------------------------------------- */

/* Azul sólido entre duas seções brancas (Conheça Camila e Propostas): o bloco
   do som precisa se anunciar na rolagem, senão vira mais um parágrafo. */
.jingle { background: var(--azul); color: var(--branco); }

/* Tudo em branco (8,0:1 sobre o azul). O verde da marca mede 3,4:1 aqui e o
   DESIGN.md o libera só para display — por isso ele aparece neste bloco apenas
   como fundo, borda e barra, nunca como texto. */
.jingle .titulo-secao { color: var(--branco); }

.jingle__player {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .22);
}

.jingle__play {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--verde);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}

.jingle__play:hover,
.jingle__play:focus-visible { background: var(--branco); transform: scale(1.06); }

/* Play e pause desenhados em CSS no mesmo span, como o triângulo do hub de
   mídia: dois glifos sem custar uma requisição de ícone. */
.jingle__icone {
  width: 0;
  height: 0;
  margin-left: 5px;                       /* recentra o triângulo no círculo */
  border-left: 20px solid var(--azul);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

/* Tocando: o triângulo vira duas barras — a segunda é uma box-shadow, e o
   translateX devolve ao par o centro que o elemento sozinho tinha. */
.jingle__player.is-tocando .jingle__icone {
  width: 7px;
  height: 24px;
  margin-left: 0;
  border: 0;
  background: var(--azul);
  box-shadow: 13px 0 0 var(--azul);
  transform: translateX(-6.5px);
}

.jingle__trilha { flex: 1 1 auto; min-width: 0; }

/* A parte já tocada é um gradiente cujo ponto de virada o JS escreve em
   --progresso. Serve a WebKit e a Gecko com uma regra só, coisa que
   ::-webkit-slider-runnable-track e ::-moz-range-progress não fariam. */
.jingle__progresso {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  margin: 0;
  cursor: pointer;
  background: linear-gradient(to right,
              var(--verde) var(--progresso, 0%),
              rgba(255, 255, 255, .25) var(--progresso, 0%));
}

.jingle__progresso::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--branco);
  cursor: pointer;
}

.jingle__progresso::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--branco);
  cursor: pointer;
}

.jingle__tempo {
  margin-top: .6rem;
  font-size: .875rem;
  /* Sem tabular-nums o relógio treme a cada segundo, porque os dígitos da
     Archivo têm larguras diferentes. */
  font-variant-numeric: tabular-nums;
}

.jingle__acoes {
  flex: 0 0 auto;
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
}

/* O verde fica na borda — elemento não-textual, onde 3,4:1 passa o mínimo de
   3:1 da WCAG 1.4.11. No hover o par se inverte para azul sobre branco
   (5,98:1), o mesmo movimento do .btn--verde. */
.jingle__acao {
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .55rem .95rem;
  border: 2px solid var(--verde);
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease);
}

.jingle__acao:hover,
.jingle__acao:focus-visible {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--azul);
}

.jingle__letra { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.jingle__letra-titulo { display: block; margin-bottom: 1.25rem; }

/* Duas colunas para encurtar o bloco. São quatro estrofes de altura parecida
   e nenhuma pode ser partida ao meio, então o balanceamento do navegador cai
   sozinho em duas de cada lado — sem precisar fixar nada por posição. */
.jingle__versos {
  max-width: 70rem;
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
}

/* Margem embaixo, e não em cima: com margin-top a primeira estrofe de cada
   coluna nasceria deslocada em relação à da outra. */
.jingle__versos p {
  break-inside: avoid;
  margin: 0 0 1.6em;
}

.jingle__versos p:last-child { margin-bottom: 0; }

/* O recuo pendente vive no padding, e a barra do verso ativo ocupa o espaço
   que sobra à esquerda. Sem o text-indent negativo, um verso que estoure a
   linha no celular continuaria alinhado com o verso seguinte e ninguém
   distinguiria continuação de verso novo. */
.jingle__verso {
  display: block;
  position: relative;
  padding-left: calc(1.5em + 1.25rem);
  text-indent: -1.5em;
  /* Corpo menor que o do texto corrido: o verso mais longo do refrão tem 66
     caracteres e, em corpo cheio, não caberia na coluna. */
  font-size: .9375rem;
  line-height: 1.75;
  transition: color .3s var(--ease);
}

/* Barra que acende no verso da vez. scaleY em vez de height para a animação
   correr na GPU e não repaginar o texto a cada verso. */
.jingle__verso::before {
  content: '';
  position: absolute;
  left: 0;
  top: .3em;
  width: 3px;
  height: 1.15em;
  background: var(--verde);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .28s var(--ease);
}

/* Com o áudio parado a letra é texto comum, em branco cheio: só enquanto toca
   é que os versos fora da vez recuam para 85% — que ainda mede 4,8:1 sobre o
   azul e continua legível para quem só quer ler a letra. */
.jingle__letra.is-cantando .jingle__verso { color: rgba(255, 255, 255, .85); }

.jingle__letra.is-cantando .jingle__verso.is-ativo {
  color: var(--branco);
  font-weight: 600;
}

.jingle__letra.is-cantando .jingle__verso.is-ativo::before { transform: scaleY(1); }

/* Um recuo em vez da barra verde de antes: a barra passou a ser a marca do
   verso que está tocando, e duas barras disputariam a mesma leitura. */
.jingle__refrao { padding-left: 1.25rem; }

/* Estreito demais para play, trilha e ações na mesma linha: as ações descem
   inteiras, e o play continua colado na barra. */
@media (max-width: 720px) {
  .jingle__player { flex-wrap: wrap; }
  .jingle__acoes  { flex: 1 1 100%; }
  .jingle__versos { columns: 1; }
}

/* --------------------------------------------------------------------------
   13. LADRILHOS XADREZ (eixos de proposta)
   -------------------------------------------------------------------------- */

.ladrilhos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  /* Vidro pede respiro: os cantos arredondados não podem se tocar. */
  gap: clamp(.75rem, 1.2vw, 1.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Manchas de cor da marca atrás da grade: são elas que o backdrop-filter
   borra — vidro sobre branco puro não teria nada para revelar. */
.ladrilhos::before {
  content: '';
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(38% 55% at 12% 20%, rgba(52, 77, 244, .55), transparent 70%),
    radial-gradient(30% 45% at 50% 85%, rgba(255, 235, 0, .50), transparent 70%),
    radial-gradient(36% 55% at 88% 15%, rgba(6, 213, 159, .55), transparent 70%);
  filter: blur(46px);
  pointer-events: none;
}

/* Liquid glass: cor da marca translúcida + blur do fundo, borda especular
   clara e fio de luz interna no topo. Cantos de 16px — o mesmo raio dos
   cartões de foto da home. Os alfas (.82 azul / .78 verde) são o piso para
   o texto branco/azul dentro do ladrilho seguir legível no pior fundo. */
.ladrilho {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 260px;
  padding: 1.75rem;
  background: rgba(52, 77, 244, .82);
  color: var(--branco);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 18px 42px -18px rgba(10, 10, 10, .35);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

.ladrilho:nth-child(even) { background: rgba(6, 213, 159, .78); color: var(--azul); }

.ladrilho:hover { background: rgba(6, 213, 159, .86); color: var(--azul); }
.ladrilho:nth-child(even):hover { background: rgba(52, 77, 244, .88); color: var(--branco); }

.ladrilho__icone { width: 44px; height: 44px; }
.ladrilho__icone svg,
.ladrilho__icone img { width: 100%; height: 100%; }

.ladrilho__titulo {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .98;
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
}

.ladrilho__desc { font-size: .9375rem; line-height: 1.5; margin-top: .625rem; }

/* --------------------------------------------------------------------------
   FAIXA 4424 — número de urna gigante sobre o padrão xadrez da marca
   -------------------------------------------------------------------------- */

/* O véu preto de 20% vive no ::before para escurecer só o padrão de fundo,
   nunca a arte do número, que sobe com position:relative. */
.banda-numero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  background: url('../img/kv/padrao-xadrez.png') center / cover no-repeat;
}

.banda-numero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* 35%: o bastante para o padrão recuar e o 4424 saltar à frente. */
  background: rgba(0, 0, 0, .35);
  pointer-events: none;
}

.banda-numero__arte {
  position: relative;
  width: min(78%, 58rem);
  height: auto;
}

/* --------------------------------------------------------------------------
   14. EIXOS DE PROPOSTA (blocos numerados)
   -------------------------------------------------------------------------- */

/* Alternância declarada por classe, não por nth-child: as seções .eixo dividem
   o <main> com hero, ticker e banda, então a contagem posicional não é confiável. */
.eixo {
  padding-block: clamp(3rem, 7vw, 6rem);
  background: var(--branco);
  color: var(--tinta);
}

.eixo--papel { background: var(--papel); }
.eixo--azul  { background: var(--azul);  color: var(--branco); }
.eixo--verde { background: var(--verde); color: var(--azul);   }

.eixo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.eixo__numero {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 12vw, 11rem);
  line-height: .78;
  color: var(--azul);
  opacity: .16;
}
.eixo--azul  .eixo__numero { color: var(--verde);  opacity: .35; }
.eixo--verde .eixo__numero { color: var(--azul);   opacity: .3;  }

.eixo__icone { width: 52px; height: 52px; margin-bottom: 1.5rem; }
.eixo__titulo { margin-bottom: 1rem; }
.eixo__titulo.titulo-secao { font-size: clamp(2rem, 4.5vw, 3.75rem); }
.eixo__desc { font-size: clamp(1.0625rem, 1.2vw, 1.375rem); max-width: 46ch; }

/* --------------------------------------------------------------------------
   15. HUB DE MÍDIA (Acompanhe Camila na Vida Real)
   -------------------------------------------------------------------------- */

.abas {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-block: clamp(2rem, 4vw, 3rem);
}

.aba {
  padding: .9rem 1.75rem;
  border: 2px solid var(--azul);
  background: transparent;
  color: var(--azul);
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}

/* Tinta sobre verde (10,5:1): azul mede 3,1:1 e reprova AA nos 13px da aba. */
.aba:hover { background: var(--verde); border-color: var(--verde); color: var(--tinta); }
.aba[aria-selected='true'] { background: var(--azul); color: var(--branco); }

.grade-midia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Quebra a fileira uniforme (DESIGN.md §7 bane o 3×1 de cartões iguais):
   o primeiro card vira destaque de duas colunas quando a grade as tem. */
@media (min-width: 861px) {
  .grade-midia .midia:first-child { grid-column: span 2; }
}

.midia { display: flex; flex-direction: column; }

.midia__capa {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--azul);
  display: grid;
  place-items: center;
  overflow: hidden;
}

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

.midia__play {
  position: absolute;
  width: 56px; height: 56px;
  background: var(--verde);
  display: grid; place-items: center;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.midia__play::after {
  content: '';
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 16px solid var(--azul);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.midia:hover .midia__play { background: var(--branco); }

.midia__vazia {
  color: var(--branco-70);
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.midia__info { padding-top: 1rem; border-top: 2px solid var(--azul); margin-top: 1rem; }
.midia__titulo { font-weight: 700; font-size: 1.0625rem; line-height: 1.35; }
.midia__meta { margin-top: .35rem; font-size: .875rem; color: var(--tinta-65); }

/* --------------------------------------------------------------------------
   16. FORMULÁRIO — PLANTÃO DA DENÚNCIA
   -------------------------------------------------------------------------- */

.form { max-width: 760px; margin-inline: auto; }

.form__titulo { margin-bottom: 2.5rem; }

.campo { margin-bottom: clamp(2rem, 4vw, 2.75rem); }

/* Fieldset de chips sem a moldura default do navegador. */
fieldset.campo { border: 0; padding: 0; margin-inline: 0; }
fieldset.campo legend { padding: 0; }

.campo__label {
  display: block;
  margin-bottom: .875rem;
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--azul);
}

.campo__dica { display: block; margin-top: .5rem; font-size: .875rem; color: var(--tinta-65); }

.entrada {
  width: 100%;
  padding: .9rem 0;
  border: 0;
  border-bottom: 2px solid var(--azul);
  border-radius: 0;
  background: transparent;
  font-size: 1.0625rem;
  transition: border-color .18s var(--ease), border-width .18s var(--ease),
              background-color .18s var(--ease);
}

.entrada::placeholder { color: rgba(10, 10, 10, .35); }

/* Indicador de foco do campo: filete azul engrossado (5,98:1) + lavagem verde
   fraca no fundo. O filete verde puro media 1,90:1 sobre branco e reprovava
   como indicador único (WCAG 1.4.11); o verde da marca segue presente na
   lavagem, sem carregar sozinho a sinalização. */
.entrada:focus {
  outline: none;
  border-bottom-color: var(--azul);
  border-bottom-width: 3px;
  background: rgba(6, 213, 159, .10);
}

textarea.entrada { min-height: 150px; resize: vertical; line-height: 1.6; }

.dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* Chips de checkbox */
.chips { display: flex; flex-wrap: wrap; gap: .625rem; }

.chip { position: relative; }
.chip input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}

.chip span {
  display: block;
  padding: .75rem 1.25rem;
  border: 2px solid var(--azul);
  color: var(--azul);
  font-weight: 600;
  font-size: .875rem;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}

.chip input:hover + span { background: rgba(52, 77, 244, .08); }
/* Tinta sobre verde: azul a 14px sobre verde mede 3,1:1 e reprova AA. */
.chip input:checked + span { background: var(--verde); border-color: var(--verde); color: var(--tinta); }
.chip input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 3px; }

/* Zona de upload */
.upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  min-height: 180px;
  padding: 2rem;
  border: 2px dashed var(--azul);
  background: transparent;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}

.upload:hover,
.upload.is-ativo { background: rgba(6, 213, 159, .12); border-color: var(--verde); }

.upload__icone { width: 40px; height: 40px; color: var(--azul); }
.upload__texto { font-weight: 600; color: var(--azul); }
.upload__lista { margin-top: .75rem; font-size: .875rem; color: var(--tinta-65); }
.upload input[type='file'] { display: none; }

.form__legal { margin-top: 1.5rem; font-size: .875rem; color: var(--tinta-65); }

.form__status {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--verde);
  background: rgba(6, 213, 159, .12);
  font-weight: 600;
  display: none;
}
.form__status.is-visivel { display: block; }
.form__status[data-tipo='erro'] { border-left-color: #C81E1E; background: rgba(200, 30, 30, .08); }

/* --------------------------------------------------------------------------
   17. RODAPÉ
   -------------------------------------------------------------------------- */

.rodape { background: var(--branco); color: var(--tinta); padding-block: clamp(3rem, 6vw, 5rem); }

.rodape__topo {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 2px solid rgba(10, 10, 10, .15);
}

/* Lockup em imagem: a NOVA LOGO nas cores originais — o fundo branco do
   rodapé devolve o contraste que o azul-marinho do nome precisa.
   align-items: flex-start é obrigatório: sem ele o stretch padrão do flex
   estica a logo até a altura da linha do grid e deforma a proporção. */
.rodape__lockup { display: flex; align-items: flex-start; }
.rodape__lockup img { width: min(100%, 20rem); height: auto; }

/* Colunas inteiras no azul da IDV — títulos, links e, por herança de
   currentColor, os ícones das redes. */
.rodape__col h3 {
  margin-bottom: 1.25rem;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--azul);
}

.rodape__col li + li { margin-top: .625rem; }
.rodape__col a { color: var(--azul); font-weight: 500; transition: color .18s var(--ease); }
/* Hover no verde da IDV por decisão da campanha (2026-08-16). O contraste
   sobre branco é baixo (1,90:1), mas o estado é transitório e o repouso
   azul permanece legível — não estender o verde a texto estático. */
.rodape__col a:hover { color: var(--verde); }

/* Redes como ícones: fileira horizontal. Os SVGs usam currentColor, então
   herdam o azul dos links e o hover sem regra extra. */
.rodape__redes { display: flex; gap: 1.25rem; }
.rodape__redes li + li { margin-top: 0; }
.rodape__redes a { display: inline-flex; padding: .375rem; margin: -.375rem; }
.rodape__redes svg { width: 1.5rem; height: 1.5rem; }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  padding-top: 2rem;
  font-size: .8125rem;
  color: var(--tinta-65);
}

.rodape__base a { text-decoration: underline; text-underline-offset: 3px; }
.rodape__base a:hover { color: var(--azul); }

/* --------------------------------------------------------------------------
   SELO DE IMAGEM GERADA POR IA
   -------------------------------------------------------------------------- */

/* Marca d'água no canto inferior esquerdo das cinco fotos sintéticas do site.
   Posicionada em absolute sobre containers que já eram posicionados — nenhum
   layout existente se desloca por causa dela.

   O z-index tira o selo de baixo do véu azul do hero (.hero__foto::after), que
   de outro modo o cobriria; e o pointer-events:none garante que ele nunca
   roube um clique de quem está navegando. */
.selo-ia {
  position: absolute;
  left: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  z-index: 2;
  padding: .4rem .7rem;
  font-family: var(--font-body);
  font-size: clamp(.625rem, .25vw + .5625rem, .6875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--branco);
  /* O aviso cai sobre fotos de todo tipo — corredor claro, estúdio preto,
     neon verde. A tarja escura é o que mantém o texto legível em todas sem
     precisar de uma regra por imagem. */
  background: rgba(10, 10, 10, .42);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: .78;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   18. MOVIMENTO
   -------------------------------------------------------------------------- */

/* O estado inicial invisível é escopado em .js — classe posta por um script
   inline no <head> de cada página. Sem JavaScript (bloqueado, com erro ou
   desligado), nada fica escondido: o conteúdo rende direto no estado final. */
.js .revelar {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.revelar {
  transition: opacity .52s var(--ease), transform .52s var(--ease);
  transition-delay: var(--atraso, 0ms);
}

.js .revelar.is-visivel { opacity: 1; transform: translate3d(0, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .revelar { opacity: 1; transform: none; }
  .ticker__trilha { animation: none; }
}

/* --------------------------------------------------------------------------
   19. RESPONSIVO
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* O hero deixou de ser grid; aqui só se alarga a faixa de conteúdo. */
  .hero__conteudo { width: min(68%, 40rem); }
  .rodape__topo { grid-template-columns: 1fr 1fr; }
  .rodape__lockup { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    padding: 6rem var(--gutter) 3rem;
    background: var(--azul);
    transform: translate3d(0, -100%, 0);
    /* visibility tira os links do painel fechado da ordem de Tab — sem ela o
       teclado atravessa quatro links invisíveis fora da tela. O atraso de
       .32s só esconde depois que o painel terminou de subir. */
    visibility: hidden;
    transition: transform .32s var(--ease), visibility 0s .32s;
    overflow-y: auto;
  }

  body.nav-aberta { overflow: hidden; }
  body.nav-aberta .nav {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition-delay: 0s;
  }

  .nav__link { font-size: 1.5rem; letter-spacing: .1em; color: var(--branco); }
  .nav__cta { margin-top: .5rem; padding: 1rem 2rem; font-size: .875rem; }

  .nav-toggle { position: relative; z-index: 2; }

  /* dvh, nunca vh: 90vh é o caso clássico do salto da barra no Safari iOS. */
  /* O rosto da Camila vive no topo do retrato; com o conteúdo centrado o
     lockup caía exatamente sobre ele. align-items: flex-end desce nome,
     número e botão para a base do hero e libera o rosto em cima. */
  .hero { min-height: 90dvh; align-items: flex-end; }

  .hero__conteudo {
    width: 100%;
    padding-block: clamp(2.5rem, 8vw, 4rem);
    /* Desfaz o recuo maior do desktop: aqui a caixa ocupa a largura toda e o
       recuo assimétrico deixaria o bloco visivelmente torto. */
    padding-inline: var(--gutter);
  }

  /* Em tela estreita o conteúdo ocupa a largura toda, então o degradê vira
     vertical — e, com o bloco na base, ele fecha embaixo (onde está o texto)
     e abre em cima, no rosto. 15% no eixo X porque a Camila está colada à
     borda esquerda do quadro: o corte estreito precisa ficar ancorado nela;
     30% no Y sobe o quadro e mantém o rosto na área limpa. */
  .hero__foto img { object-position: 15% 30%; }
  .hero__foto::after {
    background: linear-gradient(
        to bottom,
        rgba(52, 77, 244, 0)   0%,
        rgba(52, 77, 244, .44) 55%,
        rgba(52, 77, 244, .50) 100%);
  }

  .hero-pagina { grid-template-columns: 1fr; min-height: auto; }
  .hero-pagina__foto { aspect-ratio: 16 / 10; order: -1; }

  .zigue { grid-template-columns: 1fr; }
  .zigue__foto,
  .zigue__texto,
  .zigue--invertido .zigue__foto,
  .zigue--invertido .zigue__texto { grid-column: 1 / -1; grid-row: auto; }
  .zigue--invertido .zigue__foto { order: -1; }

  .eixo__inner { grid-template-columns: 1fr; gap: .5rem; }
  .eixo__numero { font-size: clamp(3.5rem, 18vw, 6rem); }

  .dupla { grid-template-columns: 1fr; }

  .rodape__topo { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .hero__rodape { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; padding-inline: 1.5rem; }
  .nav__cta, .btn--auto { width: auto; }
  .ladrilhos { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   20. ÍCONES DA MARCA
   SVGs de ELEMENTOS/ICONES embutidos como máscara CSS: o desenho herda a cor
   do bloco via currentColor, e funciona também em file:// (sem requisição).
   -------------------------------------------------------------------------- */

.icone {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

.icone--lampada {
  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NC44NyA1OC4wMiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbC1ydWxlOiBldmVub2RkOwogICAgICB9CgogICAgICAuY2xzLTEsIC5jbHMtMiB7CiAgICAgICAgZmlsbDogIzM0NGRmNDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Iklzb2xhdGlvbl9Nb2RlIiBkYXRhLW5hbWU9Iklzb2xhdGlvbiBNb2RlIj4KICAgIDxnPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik02MC4wMSw1OC4wMmgtNy4yMWMwLTQuMTQtMy4zNy03LjUxLTcuNTEtNy41MXMtNy41MSwzLjM3LTcuNTEsNy41MWgtNy4yMWMwLTMuOTMsMS41My03LjYyLDQuMzEtMTAuNHM2LjQ3LTQuMzEsMTAuNC00LjMxLDcuNjIsMS41MywxMC40LDQuMzFjMi43OCwyLjc4LDQuMzEsNi40Nyw0LjMxLDEwLjRaIi8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTQ1LjMsNDMuNjdjLTMuODUsMC03LjU5LS43Ni0xMS4xMi0yLjI1LTMuNC0xLjQ0LTYuNDUtMy41LTkuMDgtNi4xMi0yLjYyLTIuNjItNC42OC01LjY3LTYuMTItOS4wOC0xLjQ5LTMuNTItMi4yNS03LjI2LTIuMjUtMTEuMTJoNy4yMWMwLDUuNywyLjIyLDExLjA2LDYuMjUsMTUuMSw0LjAzLDQuMDMsOS4zOSw2LjI1LDE1LjEsNi4yNXMxMS4wNi0yLjIyLDE1LjEtNi4yNWM0LjAzLTQuMDMsNi4yNS05LjM5LDYuMjUtMTUuMWg3LjIxYzAsMy44NS0uNzYsNy41OS0yLjI1LDExLjEyLTEuNDQsMy40LTMuNSw2LjQ1LTYuMTIsOS4wOC0yLjYyLDIuNjItNS42Nyw0LjY4LTkuMDgsNi4xMi0zLjUyLDEuNDktNy4yNiwyLjI1LTExLjEyLDIuMjVaIi8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTEzLjA4LDQxLjI3Yy0zLjQ5LDAtNi43OC0xLjM2LTkuMjUtMy44My0yLjQ3LTIuNDctMy44My01Ljc1LTMuODMtOS4yNXMxLjM2LTYuNzgsMy44My05LjI1YzIuNDctMi40Nyw1Ljc1LTMuODMsOS4yNS0zLjgzczYuNzgsMS4zNiw5LjI1LDMuODMsMy44Myw1Ljc1LDMuODMsOS4yNS0xLjM2LDYuNzgtMy44Myw5LjI1LTUuNzUsMy44My05LjI1LDMuODNaTTEzLjA4LDIyLjMyYy0zLjI0LDAtNS44NywyLjYzLTUuODcsNS44N3MyLjYzLDUuODcsNS44Nyw1Ljg3LDUuODctMi42Myw1Ljg3LTUuODctMi42My01Ljg3LTUuODctNS44N1oiLz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzMuMTQsMy42OGMtLjM3LTEuNTgtMS40MS0yLjkyLTIuODQtMy42OC41NCwxLjM1LS4zNiwzLjAzLTIuNjgsNS4wNC0yLjU4LDEuODItMi41Miw1LjM0LS41NSw3LjI1LjYyLjYsMS40MywxLjA1LDIuNDEsMS4yMywxLjUuMjEsMi45Ny0uMzIsMy45Ny0xLjM4LjM0LS4zNi42My0uNzcuODQtMS4yNC43Mi0xLjc0Ljc2LTMuODYuMTYtNS44Mi0uMjUsMS4yNy0xLjAxLDIuNDMtMi4yLDMuMTYuOTMtMS4zMiwxLjI1LTIuOTkuODgtNC41NmgwWiIvPgogICAgICA8cG9seWxpbmUgY2xhc3M9ImNscy0yIiBwb2ludHM9IjM1LjI4IDU4LjAyIDU1LjQxIDU4LjAyIDUzLjc2IDUyLjQ3IDQ2LjgxIDQ4LjYxIDQwLjUxIDQ4LjYxIDM4LjIyIDUxLjEyIi8+CiAgICAgIDxnPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTU0LjI5LDE1LjEyaC03LjIxYzAtLjk5LS44LTEuNzktMS43OS0xLjc5cy0xLjc5LjgtMS43OSwxLjc5aC03LjIxYzAtNC45Niw0LjA0LTksOS05czksNC4wNCw5LDlaIi8+CiAgICAgICAgPHBvbHlsaW5lIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0MC40MyAxNS4xMiA1MC4yMSAxNS4xMiA0OS40MSAxMi40MiA0Ni4wMyAxMC41NSA0Mi45NyAxMC41NSA0MS44NiAxMS43NiIvPgogICAgICA8L2c+CiAgICAgIDxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxOC44NiAxNS4xMiAxMi43NiAxNS4xMiAxMS45NyAxNi43OCAxOC43MSAxNy42NSAxOC44NiAxNS4xMiIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+");
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NC44NyA1OC4wMiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbC1ydWxlOiBldmVub2RkOwogICAgICB9CgogICAgICAuY2xzLTEsIC5jbHMtMiB7CiAgICAgICAgZmlsbDogIzM0NGRmNDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Iklzb2xhdGlvbl9Nb2RlIiBkYXRhLW5hbWU9Iklzb2xhdGlvbiBNb2RlIj4KICAgIDxnPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik02MC4wMSw1OC4wMmgtNy4yMWMwLTQuMTQtMy4zNy03LjUxLTcuNTEtNy41MXMtNy41MSwzLjM3LTcuNTEsNy41MWgtNy4yMWMwLTMuOTMsMS41My03LjYyLDQuMzEtMTAuNHM2LjQ3LTQuMzEsMTAuNC00LjMxLDcuNjIsMS41MywxMC40LDQuMzFjMi43OCwyLjc4LDQuMzEsNi40Nyw0LjMxLDEwLjRaIi8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTQ1LjMsNDMuNjdjLTMuODUsMC03LjU5LS43Ni0xMS4xMi0yLjI1LTMuNC0xLjQ0LTYuNDUtMy41LTkuMDgtNi4xMi0yLjYyLTIuNjItNC42OC01LjY3LTYuMTItOS4wOC0xLjQ5LTMuNTItMi4yNS03LjI2LTIuMjUtMTEuMTJoNy4yMWMwLDUuNywyLjIyLDExLjA2LDYuMjUsMTUuMSw0LjAzLDQuMDMsOS4zOSw2LjI1LDE1LjEsNi4yNXMxMS4wNi0yLjIyLDE1LjEtNi4yNWM0LjAzLTQuMDMsNi4yNS05LjM5LDYuMjUtMTUuMWg3LjIxYzAsMy44NS0uNzYsNy41OS0yLjI1LDExLjEyLTEuNDQsMy40LTMuNSw2LjQ1LTYuMTIsOS4wOC0yLjYyLDIuNjItNS42Nyw0LjY4LTkuMDgsNi4xMi0zLjUyLDEuNDktNy4yNiwyLjI1LTExLjEyLDIuMjVaIi8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTEzLjA4LDQxLjI3Yy0zLjQ5LDAtNi43OC0xLjM2LTkuMjUtMy44My0yLjQ3LTIuNDctMy44My01Ljc1LTMuODMtOS4yNXMxLjM2LTYuNzgsMy44My05LjI1YzIuNDctMi40Nyw1Ljc1LTMuODMsOS4yNS0zLjgzczYuNzgsMS4zNiw5LjI1LDMuODMsMy44Myw1Ljc1LDMuODMsOS4yNS0xLjM2LDYuNzgtMy44Myw5LjI1LTUuNzUsMy44My05LjI1LDMuODNaTTEzLjA4LDIyLjMyYy0zLjI0LDAtNS44NywyLjYzLTUuODcsNS44N3MyLjYzLDUuODcsNS44Nyw1Ljg3LDUuODctMi42Myw1Ljg3LTUuODctMi42My01Ljg3LTUuODctNS44N1oiLz4KICAgICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzMuMTQsMy42OGMtLjM3LTEuNTgtMS40MS0yLjkyLTIuODQtMy42OC41NCwxLjM1LS4zNiwzLjAzLTIuNjgsNS4wNC0yLjU4LDEuODItMi41Miw1LjM0LS41NSw3LjI1LjYyLjYsMS40MywxLjA1LDIuNDEsMS4yMywxLjUuMjEsMi45Ny0uMzIsMy45Ny0xLjM4LjM0LS4zNi42My0uNzcuODQtMS4yNC43Mi0xLjc0Ljc2LTMuODYuMTYtNS44Mi0uMjUsMS4yNy0xLjAxLDIuNDMtMi4yLDMuMTYuOTMtMS4zMiwxLjI1LTIuOTkuODgtNC41NmgwWiIvPgogICAgICA8cG9seWxpbmUgY2xhc3M9ImNscy0yIiBwb2ludHM9IjM1LjI4IDU4LjAyIDU1LjQxIDU4LjAyIDUzLjc2IDUyLjQ3IDQ2LjgxIDQ4LjYxIDQwLjUxIDQ4LjYxIDM4LjIyIDUxLjEyIi8+CiAgICAgIDxnPgogICAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTU0LjI5LDE1LjEyaC03LjIxYzAtLjk5LS44LTEuNzktMS43OS0xLjc5cy0xLjc5LjgtMS43OSwxLjc5aC03LjIxYzAtNC45Niw0LjA0LTksOS05czksNC4wNCw5LDlaIi8+CiAgICAgICAgPHBvbHlsaW5lIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0MC40MyAxNS4xMiA1MC4yMSAxNS4xMiA0OS40MSAxMi40MiA0Ni4wMyAxMC41NSA0Mi45NyAxMC41NSA0MS44NiAxMS43NiIvPgogICAgICA8L2c+CiAgICAgIDxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxOC44NiAxNS4xMiAxMi43NiAxNS4xMiAxMS45NyAxNi43OCAxOC43MSAxNy42NSAxOC44NiAxNS4xMiIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+");
}

.icone--megafone {
  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NS42NiA1Ny42NiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzM0NGRmNDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Iklzb2xhdGlvbl9Nb2RlIiBkYXRhLW5hbWU9Iklzb2xhdGlvbiBNb2RlIj4KICAgIDxnIGlkPSJtZWdhZm9uZSI+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTM0LjI4LDQ5Ljg3Yy0uMzksMC0uNzktLjA3LTEuMTctLjIxTDIuMTQsMzcuOTdjLTEuMjktLjQ5LTIuMTQtMS43Mi0yLjE0LTMuMVYxNWMwLTEuMzguODUtMi42MSwyLjE0LTMuMUwzMy4xMS4yMWMxLjAyLS4zOCwyLjE2LS4yNCwzLjA1LjM3Ljg5LjYyLDEuNDMsMS42NCwxLjQzLDIuNzJ2NDMuMjRjMCwxLjA5LS41MywyLjExLTEuNDMsMi43Mi0uNTYuMzktMS4yMi41OS0xLjg4LjU5Wk02LjYzLDMyLjU4bDI0LjM0LDkuMTlWOC4xTDYuNjMsMTcuMjl2MTUuMjlaIi8+CiAgICAgIDxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iOC4xOCIgeT0iMzkuNTQiIHdpZHRoPSI2LjYzIiBoZWlnaHQ9IjE4LjExIi8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTUxLjg2LDM0Ljk3bC00LjkyLTQuNDNjMi44OC0zLjE5LDIuODgtOC4wMSwwLTExLjIxbDQuOTItNC40M2M1LjE1LDUuNzIsNS4xNSwxNC4zNSwwLDIwLjA3WiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01OS4yNCw0MS42MmwtNC45Mi00LjQzYzYuMjktNi45OCw2LjI5LTE3LjUyLDAtMjQuNWw0LjkyLTQuNDNjOC41Niw5LjUxLDguNTYsMjMuODYsMCwzMy4zN1oiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NS42NiA1Ny42NiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzM0NGRmNDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Iklzb2xhdGlvbl9Nb2RlIiBkYXRhLW5hbWU9Iklzb2xhdGlvbiBNb2RlIj4KICAgIDxnIGlkPSJtZWdhZm9uZSI+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTM0LjI4LDQ5Ljg3Yy0uMzksMC0uNzktLjA3LTEuMTctLjIxTDIuMTQsMzcuOTdjLTEuMjktLjQ5LTIuMTQtMS43Mi0yLjE0LTMuMVYxNWMwLTEuMzguODUtMi42MSwyLjE0LTMuMUwzMy4xMS4yMWMxLjAyLS4zOCwyLjE2LS4yNCwzLjA1LjM3Ljg5LjYyLDEuNDMsMS42NCwxLjQzLDIuNzJ2NDMuMjRjMCwxLjA5LS41MywyLjExLTEuNDMsMi43Mi0uNTYuMzktMS4yMi41OS0xLjg4LjU5Wk02LjYzLDMyLjU4bDI0LjM0LDkuMTlWOC4xTDYuNjMsMTcuMjl2MTUuMjlaIi8+CiAgICAgIDxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iOC4xOCIgeT0iMzkuNTQiIHdpZHRoPSI2LjYzIiBoZWlnaHQ9IjE4LjExIi8+CiAgICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTUxLjg2LDM0Ljk3bC00LjkyLTQuNDNjMi44OC0zLjE5LDIuODgtOC4wMSwwLTExLjIxbDQuOTItNC40M2M1LjE1LDUuNzIsNS4xNSwxNC4zNSwwLDIwLjA3WiIvPgogICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01OS4yNCw0MS42MmwtNC45Mi00LjQzYzYuMjktNi45OCw2LjI5LTE3LjUyLDAtMjQuNWw0LjkyLTQuNDNjOC41Niw5LjUxLDguNTYsMjMuODYsMCwzMy4zN1oiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
}

.icone--saude {
  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NS41NiA1NS41NiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzM0NGRmNDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Iklzb2xhdGlvbl9Nb2RlIiBkYXRhLW5hbWU9Iklzb2xhdGlvbiBNb2RlIj4KICAgIDxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMTYuNjciIHdpZHRoPSIyMi4yMiIgaGVpZ2h0PSI1NS41NiIvPgogICAgPHJlY3QgY2xhc3M9ImNscy0xIiB5PSIxNi42NyIgd2lkdGg9IjU1LjU2IiBoZWlnaHQ9IjIyLjIyIi8+CiAgPC9nPgo8L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NS41NiA1NS41NiI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzM0NGRmNDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Iklzb2xhdGlvbl9Nb2RlIiBkYXRhLW5hbWU9Iklzb2xhdGlvbiBNb2RlIj4KICAgIDxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMTYuNjciIHdpZHRoPSIyMi4yMiIgaGVpZ2h0PSI1NS41NiIvPgogICAgPHJlY3QgY2xhc3M9ImNscy0xIiB5PSIxNi42NyIgd2lkdGg9IjU1LjU2IiBoZWlnaHQ9IjIyLjIyIi8+CiAgPC9nPgo8L3N2Zz4=");
}

.icone--coracao {
  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NC4zNSA0Ny4yOCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzM0NGRmNDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Iklzb2xhdGlvbl9Nb2RlIiBkYXRhLW5hbWU9Iklzb2xhdGlvbiBNb2RlIj4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTU0LjM1LDE0LjMxYy4wMS42Ni0uMDMsMS4yNC0uMDksMS44My0uMTQsMS4yOS0uNDYsMi41NC0uODksMy43Ny0uMTguNS0uMzguOTktLjYsMS40OC0uNTEsMS4xMS0xLjEyLDIuMTctMS44LDMuMTgtLjU4Ljg1LTEuMiwxLjY3LTEuODYsMi40NS0uNTQuNjUtMS4xLDEuMjgtMS42OCwxLjktMS4yNCwxLjMzLTIuNTMsMi42MS0zLjgzLDMuODgtLjM2LjM1LS43MS43LTEuMDgsMS4wNS0uNDUuNDItLjg5Ljg1LTEuMzUsMS4yNi0uMzcuMzMtLjczLjY5LTEuMDksMS4wNC0uNjcuNjMtMS4zMywxLjI2LTIsMS44OS0uMzQuMzItLjY4LjY0LTEuMDIuOTUtLjc4LjcyLTEuNTUsMS40NC0yLjMyLDIuMTYtLjQ3LjQ1LS45Ni44OS0xLjQzLDEuMzMtLjg0Ljc5LTEuNjksMS41Ny0yLjUyLDIuMzctLjM4LjM2LS43Ny43Mi0xLjE1LDEuMDgtLjMxLjI5LS42LjU5LS45NS44NC0uNjguNS0xLjQzLjY0LTIuMjUuMzktLjQtLjEyLS43My0uMzYtMS4wNC0uNjUtLjUtLjQ3LS45OS0uOTQtMS40OS0xLjQxLS42NC0uNi0xLjI5LTEuMTktMS45My0xLjc4LS41NS0uNTEtMS4wOS0xLjAyLTEuNjQtMS41My0uNy0uNjUtMS40LTEuMy0yLjA5LTEuOTUtLjU4LS41NC0xLjE3LTEuMDktMS43NS0xLjYzLS41OS0uNTYtMS4xOC0xLjEtMS43Ny0xLjY2LS41NS0uNTItMS4xLTEuMDMtMS42NS0xLjU1LS41OC0uNTQtMS4xNS0xLjEtMS43My0xLjY1LTEtLjk1LTEuOTctMS45My0yLjkzLTIuOTEtLjY3LS42OC0xLjMyLTEuMzgtMS45NS0yLjA5LS43NS0uODQtMS40OS0xLjctMi4xNy0yLjYtLjY2LS44OC0xLjI4LTEuNzktMS44My0yLjc0LS45LTEuNTUtMS42LTMuMTgtMi4wMi00LjkzLS4yLS44My0uMzMtMS42OC0uMzktMi41NC0uMDMtLjQtLjA0LS44LS4wNS0xLjE5LDAtLjQ2LjAyLS45Mi4wNi0xLjM3LjA2LS41Ni4xMy0xLjEyLjI0LTEuNjcuMjktMS4zOS43Ni0yLjcyLDEuNDQtMy45Ny4zNS0uNjQuNzQtMS4yNCwxLjE4LTEuODIuNDEtLjU0Ljg1LTEuMDYsMS4zNC0xLjUzLDEuMTctMS4xMiwyLjQ5LTIuMDUsMy45Ny0yLjczLDEuMjEtLjU2LDIuNDgtLjkxLDMuOC0xLjFDMTIuNzIuMDQsMTMuNDEtLjAyLDE0LjExLDBjMS4zNC4wNCwyLjY2LjIzLDMuOTQuNjIuNzQuMjIsMS40Ni41MiwyLjE1Ljg2LDEuMDkuNTMsMi4wOCwxLjIyLDMuMDEsMiwuNTMuNDUsMS4wMy45MywxLjUsMS40NS41My41OCwxLjAyLDEuMiwxLjQ2LDEuODUuMzMuNDguNjcuOTYuOTUsMS40OC4wNy4xMi4wOS4xMi4xNiwwLC41Ni0uOTYsMS4xNy0xLjg4LDEuODgtMi43My41OS0uNzEsMS4yNC0xLjM3LDEuOTUtMS45NywxLS44NSwyLjA5LTEuNTYsMy4yNi0yLjE0LjUyLS4yNiwxLjA2LS40NywxLjYxLS42NS41Ni0uMTksMS4xMy0uMzUsMS43MS0uNDYuNTQtLjExLDEuMDktLjIsMS42NS0uMjMuNC0uMDIuOC0uMDcsMS4xOS0uMDYsMS42OS4wNCwzLjM0LjMxLDQuOTIuOTMuNzEuMjgsMS40LjYyLDIuMDYsMS4wMi41My4zMywxLjA0LjY4LDEuNTMsMS4wNy42Mi40OSwxLjE5LDEuMDQsMS43MiwxLjYzLjQ5LjU1LjkzLDEuMTQsMS4zMywxLjc2LjY5LDEuMDcsMS4yMSwyLjIxLDEuNiwzLjQyLjI3Ljg3LjQ1LDEuNzUuNTUsMi42Ni4wNy42Mi4xMSwxLjI1LjExLDEuODFaIi8+CiAgPC9nPgo8L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NC4zNSA0Ny4yOCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzM0NGRmNDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Iklzb2xhdGlvbl9Nb2RlIiBkYXRhLW5hbWU9Iklzb2xhdGlvbiBNb2RlIj4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTU0LjM1LDE0LjMxYy4wMS42Ni0uMDMsMS4yNC0uMDksMS44My0uMTQsMS4yOS0uNDYsMi41NC0uODksMy43Ny0uMTguNS0uMzguOTktLjYsMS40OC0uNTEsMS4xMS0xLjEyLDIuMTctMS44LDMuMTgtLjU4Ljg1LTEuMiwxLjY3LTEuODYsMi40NS0uNTQuNjUtMS4xLDEuMjgtMS42OCwxLjktMS4yNCwxLjMzLTIuNTMsMi42MS0zLjgzLDMuODgtLjM2LjM1LS43MS43LTEuMDgsMS4wNS0uNDUuNDItLjg5Ljg1LTEuMzUsMS4yNi0uMzcuMzMtLjczLjY5LTEuMDksMS4wNC0uNjcuNjMtMS4zMywxLjI2LTIsMS44OS0uMzQuMzItLjY4LjY0LTEuMDIuOTUtLjc4LjcyLTEuNTUsMS40NC0yLjMyLDIuMTYtLjQ3LjQ1LS45Ni44OS0xLjQzLDEuMzMtLjg0Ljc5LTEuNjksMS41Ny0yLjUyLDIuMzctLjM4LjM2LS43Ny43Mi0xLjE1LDEuMDgtLjMxLjI5LS42LjU5LS45NS44NC0uNjguNS0xLjQzLjY0LTIuMjUuMzktLjQtLjEyLS43My0uMzYtMS4wNC0uNjUtLjUtLjQ3LS45OS0uOTQtMS40OS0xLjQxLS42NC0uNi0xLjI5LTEuMTktMS45My0xLjc4LS41NS0uNTEtMS4wOS0xLjAyLTEuNjQtMS41My0uNy0uNjUtMS40LTEuMy0yLjA5LTEuOTUtLjU4LS41NC0xLjE3LTEuMDktMS43NS0xLjYzLS41OS0uNTYtMS4xOC0xLjEtMS43Ny0xLjY2LS41NS0uNTItMS4xLTEuMDMtMS42NS0xLjU1LS41OC0uNTQtMS4xNS0xLjEtMS43My0xLjY1LTEtLjk1LTEuOTctMS45My0yLjkzLTIuOTEtLjY3LS42OC0xLjMyLTEuMzgtMS45NS0yLjA5LS43NS0uODQtMS40OS0xLjctMi4xNy0yLjYtLjY2LS44OC0xLjI4LTEuNzktMS44My0yLjc0LS45LTEuNTUtMS42LTMuMTgtMi4wMi00LjkzLS4yLS44My0uMzMtMS42OC0uMzktMi41NC0uMDMtLjQtLjA0LS44LS4wNS0xLjE5LDAtLjQ2LjAyLS45Mi4wNi0xLjM3LjA2LS41Ni4xMy0xLjEyLjI0LTEuNjcuMjktMS4zOS43Ni0yLjcyLDEuNDQtMy45Ny4zNS0uNjQuNzQtMS4yNCwxLjE4LTEuODIuNDEtLjU0Ljg1LTEuMDYsMS4zNC0xLjUzLDEuMTctMS4xMiwyLjQ5LTIuMDUsMy45Ny0yLjczLDEuMjEtLjU2LDIuNDgtLjkxLDMuOC0xLjFDMTIuNzIuMDQsMTMuNDEtLjAyLDE0LjExLDBjMS4zNC4wNCwyLjY2LjIzLDMuOTQuNjIuNzQuMjIsMS40Ni41MiwyLjE1Ljg2LDEuMDkuNTMsMi4wOCwxLjIyLDMuMDEsMiwuNTMuNDUsMS4wMy45MywxLjUsMS40NS41My41OCwxLjAyLDEuMiwxLjQ2LDEuODUuMzMuNDguNjcuOTYuOTUsMS40OC4wNy4xMi4wOS4xMi4xNiwwLC41Ni0uOTYsMS4xNy0xLjg4LDEuODgtMi43My41OS0uNzEsMS4yNC0xLjM3LDEuOTUtMS45NywxLS44NSwyLjA5LTEuNTYsMy4yNi0yLjE0LjUyLS4yNiwxLjA2LS40NywxLjYxLS42NS41Ni0uMTksMS4xMy0uMzUsMS43MS0uNDYuNTQtLjExLDEuMDktLjIsMS42NS0uMjMuNC0uMDIuOC0uMDcsMS4xOS0uMDYsMS42OS4wNCwzLjM0LjMxLDQuOTIuOTMuNzEuMjgsMS40LjYyLDIuMDYsMS4wMi41My4zMywxLjA0LjY4LDEuNTMsMS4wNy42Mi40OSwxLjE5LDEuMDQsMS43MiwxLjYzLjQ5LjU1LjkzLDEuMTQsMS4zMywxLjc2LjY5LDEuMDcsMS4yMSwyLjIxLDEuNiwzLjQyLjI3Ljg3LjQ1LDEuNzUuNTUsMi42Ni4wNy42Mi4xMSwxLjI1LjExLDEuODFaIi8+CiAgPC9nPgo8L3N2Zz4=");
}