/* =========================================================================
   CORRENTE — Design System
   02. BASE
   Reset opinativo, tipografia de documento, primitivas de superfície
   (pinceladas, diagonais, grão) e utilitários de layout.
   ========================================================================= */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--e-9);
}

body {
  background: var(--fundo-base);
  color: var(--texto-base);
  font-family: var(--fonte-texto);
  font-size: var(--txt-md);
  line-height: var(--entrelinha-media);
  font-weight: var(--peso-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

::selection { background: var(--cor-voto); color: var(--azul-950); }

:focus-visible {
  outline: none;
  box-shadow: var(--sombra-foco);
  border-radius: var(--raio-sm);
}

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

/* -------------------------------------------------------------------------
   TIPOGRAFIA DE DOCUMENTO
   ------------------------------------------------------------------------- */

.display,
.d1, .d2, .d3 {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  line-height: var(--entrelinha-rente);
  letter-spacing: var(--letra-apertada);
  color: var(--texto-forte);
  text-transform: uppercase;
}

.d1 { font-size: var(--txt-6xl); }
.d2 { font-size: var(--txt-5xl); }
.d3 { font-size: var(--txt-4xl); }

h1, .t1, h2, .t2, h3, .t3, h4, .t4 {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  color: var(--texto-forte);
  line-height: var(--entrelinha-curta);
  letter-spacing: var(--letra-apertada);
  text-transform: uppercase;
}

h1, .t1 { font-size: var(--txt-3xl); }
h2, .t2 { font-size: var(--txt-2xl); }
h3, .t3 { font-size: var(--txt-xl); }
h4, .t4 { font-size: var(--txt-lg); letter-spacing: var(--letra-normal); }

/* Rótulo institucional — o "DEPUTADO FEDERAL" do material impresso */
.rotulo {
  font-family: var(--fonte-texto);
  font-size: var(--txt-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-placa);
  text-transform: uppercase;
  color: var(--texto-suave);
  line-height: var(--entrelinha-curta);
}
.rotulo--voto  { color: var(--cor-voto-forte); }
.rotulo--marca { color: var(--cor-marca); }

.corpo    { font-size: var(--txt-md); line-height: var(--entrelinha-solta); max-width: var(--largura-texto); }
.corpo-lg { font-size: var(--txt-lg); line-height: var(--entrelinha-solta); max-width: var(--largura-texto); color: var(--texto-suave); }
.corpo-sm { font-size: var(--txt-sm); line-height: var(--entrelinha-media); }
.legenda  { font-size: var(--txt-xs); color: var(--texto-tenue); line-height: var(--entrelinha-media); }

.numero {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letra-apertada);
  color: var(--texto-forte);
}

a {
  color: var(--cor-marca);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur-rapido) var(--curva-padrao);
}
a:hover { color: var(--cor-voto-forte); }

/* -------------------------------------------------------------------------
   PRIMITIVAS DE SUPERFÍCIE
   As formas do cartaz viram peças reutilizáveis do sistema.
   ------------------------------------------------------------------------- */

/* Campo de campanha: azul saturado com diagonal de luz */
.superficie-campanha {
  position: relative;
  background: var(--fundo-campanha);
  color: var(--texto-inverso);
  isolation: isolate;
  overflow: hidden;
}
.superficie-campanha::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -2;
  background:
    radial-gradient(120% 90% at 12% 0%, var(--azul-600) 0%, transparent 55%),
    radial-gradient(100% 80% at 92% 100%, var(--azul-900) 0%, transparent 60%),
    linear-gradient(160deg, var(--azul-700) 0%, var(--azul-800) 55%, var(--azul-900) 100%);
}

/* Fotografia sob o campo azul.
   A foto entra como textura, nunca como assunto: o azul continua sendo a
   cor da peça, e a imagem só dá lastro de rua por baixo. Exige o
   modificador --foto na superfície, que afina a camada de cor. */
.foto-fundo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.78) contrast(1.08) brightness(1.04);
}

/* A cor é densa do lado do texto e abre para a foto do lado oposto:
   legibilidade onde ela é necessária, imagem onde há espaço livre. */
.superficie-campanha--foto::before {
  background:
    linear-gradient(to top, rgba(5, 15, 46, 0.55) 0%, rgba(5, 15, 46, 0) 18%),
    linear-gradient(103deg,
      rgba(5, 15, 46, 0.93) 0%,
      rgba(16, 42, 115, 0.87) 36%,
      rgba(22, 57, 155, 0.66) 66%,
      rgba(29, 75, 196, 0.48) 100%);
}

/* Pincelada diagonal — a faixa amarela varrendo o quadro */
.pincelada {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: var(--cor-voto);
  opacity: 0.95;
}
.pincelada--ouro {
  inset: auto -14% -30% -14%;
  height: 78%;
  clip-path: polygon(0% 46%, 100% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(105deg, var(--amarelo-600) 0%, var(--amarelo-500) 42%, var(--amarelo-400) 100%);
}
.pincelada--luz {
  inset: -34% -18% auto -18%;
  height: 92%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 58%, 0% 96%);
  background: linear-gradient(100deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02));
}
/* Fitas diagonais do impresso: uma pincelada clara e uma fita de ouro
   varrendo o terço médio. Deixam o pé do cartaz limpo, que é onde mora
   toda a tipografia. */
.pincelada--fita-branca {
  inset: 0;
  height: 100%;
  clip-path: polygon(0% 85%, 100% 33%, 100% 37%, 0% 89%);
  background: linear-gradient(100deg, rgba(255,255,255,0.22), rgba(255,255,255,0.07));
  opacity: 1;
}
.pincelada--fita-ouro {
  inset: 0;
  height: 100%;
  clip-path: polygon(0% 92%, 100% 40%, 100% 56%, 0% 108%);
  background: linear-gradient(100deg, var(--amarelo-600) 0%, var(--amarelo-500) 45%, var(--amarelo-400) 100%);
}
/* Canto de ouro no pé, como o remate do impresso */
.pincelada--canto-ouro {
  inset: auto 0 0 0;
  height: 22%;
  clip-path: polygon(0% 58%, 16% 100%, 0% 100%);
  background: var(--amarelo-500);
}

/* Traço rasgado, imitando cerda de pincel */
.pincelada--traco {
  height: 14px;
  width: min(360px, 60%);
  position: relative;
  inset: auto;
  z-index: auto;
  display: block;
  clip-path: polygon(0% 30%, 6% 0%, 96% 12%, 100% 62%, 90% 100%, 4% 84%);
  background: var(--cor-voto);
}

/* Grão de impressão — dá textura de material gráfico, não de tela */
.grao::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Moldura de cartaz — o filete branco interno do impresso */
.moldura {
  position: relative;
}
.moldura::after {
  content: "";
  position: absolute;
  inset: var(--e-4);
  border: var(--borda-media-l) solid var(--borda-inversa);
  border-radius: var(--raio-md);
  pointer-events: none;
  z-index: 2;
}

/* -------------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: var(--calha);
}
.container--largo { max-width: 88rem; }

.secao { padding-block: var(--e-10); }
.secao--densa { padding-block: var(--e-8); }
.secao--ampla { padding-block: var(--e-12); }

.pilha { display: flex; flex-direction: column; }
.pilha--1 { gap: var(--e-1); }
.pilha--2 { gap: var(--e-2); }
.pilha--3 { gap: var(--e-3); }
.pilha--4 { gap: var(--e-4); }
.pilha--5 { gap: var(--e-5); }
.pilha--6 { gap: var(--e-6); }
.pilha--8 { gap: var(--e-8); }

.linha { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.linha--fim   { justify-content: flex-end; }
.linha--entre { justify-content: space-between; }
.linha--centro{ justify-content: center; }
.linha--topo  { align-items: flex-start; }

.grade { display: grid; gap: var(--e-5); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* Utilitários mínimos e nomeados — não é uma biblioteca utilitária */
.centro-texto { text-align: center; }
.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   MOVIMENTO — entrada de cena escalonada
   ------------------------------------------------------------------------- */

@keyframes sobe {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes varre {
  from { opacity: 0; transform: translateX(-40px) skewX(-6deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes placa {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulso-voto {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 194, 14, 0.55); }
  70%      { box-shadow: 0 0 0 16px rgba(255, 194, 14, 0); }
}

.cena > * {
  animation: sobe var(--dur-lento) var(--curva-comicio) both;
}
.cena > *:nth-child(1) { animation-delay: 60ms; }
.cena > *:nth-child(2) { animation-delay: 140ms; }
.cena > *:nth-child(3) { animation-delay: 220ms; }
.cena > *:nth-child(4) { animation-delay: 300ms; }
.cena > *:nth-child(5) { animation-delay: 380ms; }
.cena > *:nth-child(6) { animation-delay: 460ms; }