/* ==========================================================================
   EULER 1515 — DESIGN SYSTEM
   03. components.css
   Depende de: tokens.css, base.css

   Convenção de nomes:  .bloco  .bloco__parte  .bloco--variante
   Contexto de cor:     .on-dark / .on-accent  em um ancestral inverte o texto
   ========================================================================== */

/* ==========================================================================
   TIPOGRAFIA APLICADA
   Classes utilitárias para quando a semântica do HTML não bate com a escala.
   ========================================================================== */

.type-display-1,
.type-display-2,
.type-display-3,
.type-display-4,
.type-title-1,
.type-title-2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.type-display-1 {
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-1);
}
.type-display-2 {
  font-size: var(--fs-display-2);
  line-height: var(--lh-display-2);
  letter-spacing: var(--ls-display-2);
}
.type-display-3 {
  font-size: var(--fs-display-3);
  line-height: var(--lh-display-3);
  letter-spacing: var(--ls-display-2);
}
.type-display-4 {
  font-size: var(--fs-display-4);
  line-height: var(--lh-quote);
  letter-spacing: var(--ls-quote);
}
.type-title-1 {
  font-size: var(--fs-title-1);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.type-title-2 {
  font-size: var(--fs-title-2);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

.type-story {
  font-size: var(--fs-story);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-story);
  letter-spacing: 0.002em;
}
.type-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  max-width: var(--measure);
}
.type-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
}
.type-meta {
  font-size: var(--fs-meta);
  font-weight: var(--weight-black);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}

/* Kicker — o rótulo numerado que abre cada seção. */
.kicker {
  font-size: var(--fs-meta);
  font-weight: var(--weight-black);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eu-blue-500);
  margin-bottom: var(--space-8);
}
.on-dark .kicker {
  color: var(--eu-yellow-500);
}

/* Numeral gigante — o "1515", a marca d'água, a contagem. */
.numeral {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: 0.85;
  letter-spacing: var(--ls-numeral-1);
}
.numeral--watermark {
  font-size: var(--fs-numeral-2);
  line-height: 0.8;
  letter-spacing: var(--ls-numeral-2);
  color: var(--eu-blue-400);
  position: absolute;
  top: 12%;
  right: -5%;
  pointer-events: none;
  user-select: none;
}
.numeral--index {
  font-size: var(--fs-numeral-3);
  line-height: 0.85;
  letter-spacing: var(--ls-numeral-3);
  color: var(--eu-green-500);
}

/* Contexto de cor. Aplique no container, não em cada filho.
   A superfície escura já troca a cor de ênfase sozinha — a classe .on-dark
   existe para ajustar corpo de texto e para casos sem classe de superfície
   (foto, vídeo, gradiente). */
.on-dark {
  color: var(--text-on-brand);
}
.on-dark .type-lead,
.on-dark .type-body {
  color: var(--text-on-brand-soft);
}
.surface-brand em,
.surface-action em,
.surface-raised em,
.on-dark em,
.hero em,
.card em {
  color: var(--text-emphasis);
}
.on-accent {
  color: var(--text-on-accent);
}
.surface-accent em,
.on-accent em,
.card--accent em,
.quote em {
  color: var(--text-emphasis-alt);
}
.on-light .type-lead,
.on-light .type-body {
  color: var(--text-secondary);
}

/* ==========================================================================
   SUPERFÍCIES
   ========================================================================== */

.surface-paper {
  background: var(--surface-paper);
  color: var(--text-primary);
}
.surface-brand {
  background: var(--surface-brand);
  color: var(--text-on-brand);
}
.surface-action {
  background: var(--surface-action);
  color: var(--text-on-brand);
}
.surface-accent {
  background: var(--surface-accent);
  color: var(--text-on-accent);
}
.surface-raised {
  background: var(--surface-raised);
  color: var(--text-on-brand);
}

/* ==========================================================================
   SETA DE MARCA
   Ícone assinatura: diagonal ascendente com rastro verde. Construída em CSS
   para herdar currentColor e animar no hover do pai.
   ========================================================================== */

.arrow {
  position: relative;
  display: inline-block;
  flex: none;
  width: 25px;
  height: 16px;
  transition: transform 0.22s var(--ease-out-quint);
}
.arrow::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 1px;
  width: 24px;
  height: 2px;
  background: currentColor;
  transform: rotate(-28deg);
  transform-origin: 0;
}
.arrow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-top: 2px solid;
  border-right: 2px solid;
}
.arrow i {
  position: absolute;
  top: 15px;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--eu-green-500);
  transform: rotate(-28deg);
  transform-origin: 0;
}
a:hover > .arrow,
.btn:hover > .arrow {
  transform: translate(3px, -2px);
}

/* ==========================================================================
   BOTÃO
   Retangular, caixa alta, 900. Altura mínima 52px = alvo de toque seguro.
   ========================================================================== */

.btn {
  --btn-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) 14px;
  min-height: var(--btn-height);
  padding: 0 var(--space-5);
  font-size: var(--fs-nav);
  font-weight: var(--weight-black);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: transform var(--dur-instant), background var(--dur-instant),
    color var(--dur-instant), border-color var(--dur-instant);
}

/* Primário — amarelo. Uma única ação primária por tela. */
.btn--primary {
  background: var(--eu-yellow-500);
  color: var(--eu-blue-800);
}
.btn--primary:hover {
  background: var(--eu-white);
  transform: translateY(-2px);
}

/* Fantasma — para uso sobre foto ou fundo escuro. */
.btn--ghost {
  color: var(--eu-white);
  background: rgba(0, 42, 89, 0.19);
  border: var(--border-hairline) solid var(--border-on-dark-strong);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.btn--ghost:hover {
  background: rgba(0, 42, 89, 0.4);
  border-color: var(--eu-white);
}

/* Sólido — azul institucional sobre papel. */
.btn--solid {
  background: var(--eu-blue-800);
  color: var(--eu-yellow-500);
}
.btn--solid:hover {
  background: var(--eu-blue-500);
  color: var(--eu-white);
  transform: translateY(-2px);
}

/* Contorno — ação secundária sobre papel. */
.btn--outline {
  color: var(--eu-blue-800);
  border: var(--border-hairline) solid var(--border-on-light);
}
.btn--outline:hover {
  background: var(--eu-blue-800);
  color: var(--eu-white);
}

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

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* ==========================================================================
   TAG / ETIQUETA
   Bloco sólido, micro-texto, tracking largo. Sem raio.
   ========================================================================== */

.tag {
  display: inline-block;
  padding: 7px var(--space-3);
  font-size: var(--fs-meta);
  font-weight: var(--weight-black);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  background: var(--eu-yellow-500);
  color: var(--eu-blue-800);
}
.tag--affirm {
  background: var(--eu-green-500);
  color: var(--eu-blue-800);
}
.tag--ink {
  background: var(--eu-blue-800);
  color: var(--eu-yellow-500);
}
.tag--micro {
  padding: 7px 11px;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-micro);
}

/* Fila de etiquetas acima do título. */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-7);
}

/* ==========================================================================
   NAVEGAÇÃO
   ========================================================================== */

.nav {
  position: absolute;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 86px;
  padding: 0 var(--gutter-page);
  color: var(--eu-white);
  border-bottom: var(--border-hairline) solid var(--eu-white-a24);
}
.nav__brand {
  display: flex;
  align-items: center;
  width: 255px;
}
.nav__links {
  display: flex;
  gap: var(--space-8);
  font-size: var(--fs-nav);
  font-weight: var(--weight-medium-plus);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}
.nav__links a:hover {
  color: var(--eu-yellow-500);
}
.nav__cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 13px 17px;
  font-size: var(--fs-nav);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  border: var(--border-hairline) solid var(--border-on-dark-strong);
  transition: background var(--dur-instant), color var(--dur-instant);
}
.nav__cta:hover {
  background: var(--eu-white);
  color: var(--eu-blue-800);
}

/* ==========================================================================
   SEÇÃO
   ========================================================================== */

.section {
  position: relative;
  padding: var(--section-py) var(--gutter-section);
  overflow: hidden;
}
.section--flush {
  padding: var(--section-py) var(--gutter-page);
}

/* Cabeçalho em duas colunas: título à esquerda, lead à direita. */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  column-gap: var(--column-gap);
  margin-bottom: 55px;
}
.section-head .kicker {
  grid-column: 1 / -1;
}
.section-head h2 {
  margin: 0;
  font-size: var(--fs-display-3);
  line-height: var(--lh-display-3);
  letter-spacing: var(--ls-display-2);
}
.section-head > p {
  margin: 0;
  max-width: 500px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

/* ==========================================================================
   PROVA / ESTATÍSTICA
   Número display + rótulo micro. Separados por régua superior.
   ========================================================================== */

/* Quebra de linha e vão fluido: três estatísticas lado a lado não cabem em
   390px, e sem wrap a linha empurra a página inteira para o lado. */
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) clamp(16px, 3vw, 34px);
  max-width: 590px;
  padding-top: 22px;
  border-top: var(--border-hairline) solid var(--eu-white-a35);
}
.stat {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stat__value {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-numeral-4);
  line-height: var(--lh-flat);
  letter-spacing: 0;
  color: var(--eu-yellow-500);
}
.stat__label {
  font-size: var(--fs-meta-sm);
  line-height: var(--lh-tight);
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

/* ==========================================================================
   ADESIVO
   Disco amarelo rotacionado. Chamada curta, nunca mais de 4 palavras.
   ========================================================================== */

.sticker {
  position: absolute;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  border-radius: var(--radius-circle);
  background: var(--eu-yellow-500);
  color: var(--eu-blue-800);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 18px;
  line-height: var(--lh-flat);
  text-align: center;
  transform: rotate(7deg);
  box-shadow: var(--shadow-sticker);
}
.sticker strong {
  font-size: 25px;
}
.sticker .arrow {
  margin-top: 7px;
  color: var(--eu-blue-800);
}
.sticker .arrow i {
  background: var(--eu-blue-500);
}

/* Variante WhatsApp. Verde do sistema, que já é próximo do verde do
   WhatsApp, com tinta azul por cima: 7,1:1. Branco sobre verde reprovaria.
   A página que usa define só a posição. */
.sticker--wa {
  gap: 4px;
  width: clamp(112px, 12vw, 138px);
  height: clamp(112px, 12vw, 138px);
  background: var(--eu-green-500);
  color: var(--eu-blue-800);
  font-size: 12px;
  transform: rotate(-6deg);
  transition: background var(--dur-instant), transform var(--dur-instant);
}
.sticker--wa svg {
  width: 24px;
  height: 24px;
}
.sticker--wa span {
  display: block;
  line-height: 1.05;
}
.sticker--wa strong {
  display: block;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.sticker--wa:hover {
  background: var(--eu-yellow-500);
  transform: rotate(-6deg) scale(1.05);
}

/* ==========================================================================
   NOTA
   Rótulo amarelo com sombra sólida verde. Usado para creditar mídia.
   ========================================================================== */

.note {
  padding: 14px 17px 13px;
  background: var(--eu-yellow-500);
  color: var(--eu-blue-800);
  text-align: right;
  box-shadow: var(--shadow-block-affirm);
  transform: rotate(-2deg);
}
.note span {
  display: block;
  font-size: var(--fs-micro);
  font-weight: var(--weight-black);
  letter-spacing: 0.13em;
}
.note strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 22px;
  line-height: 0.9;
  text-transform: uppercase;
}

/* ==========================================================================
   RETRATO
   Recorte diagonal com moldura amarela interna. A forma é a assinatura.
   ========================================================================== */

.portrait {
  position: relative;
  z-index: var(--z-content);
  width: min(520px, 100%);
  height: 610px;
  overflow: hidden;
  clip-path: var(--clip-portrait);
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 6px var(--eu-yellow-500);
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* ==========================================================================
   TICKER
   Faixa amarela em rolagem infinita. Duplique o conteúdo dentro da trilha.
   ========================================================================== */

.ticker {
  display: flex;
  align-items: center;
  height: 54px;
  overflow: hidden;
  white-space: nowrap;
  background: var(--eu-yellow-500);
  color: var(--eu-blue-800);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-ticker);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-ticker);
}
.ticker__track {
  display: flex;
  min-width: max-content;
  animation: ticker var(--ticker-cycle) linear infinite;
}
.ticker__seq {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.ticker span {
  padding: 0 var(--space-6);
}
.ticker span + span {
  color: var(--eu-blue-500);
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   LINHA DO TEMPO
   Régua vertical royal, marcadores circulares, ano em display.
   ========================================================================== */

.timeline {
  position: relative;
  border-left: var(--rule-timeline) solid var(--border-rule);
}
.timeline::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--rule-timeline) * -1);
  width: var(--rule-timeline);
  height: 100%;
  background: var(--eu-blue-500);
  transform: scaleY(var(--progress, 1));
  transform-origin: top;
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(96px, 9vw, 132px) 1fr;
  gap: clamp(20px, 2.4vw, 34px);
  padding: 0 0 clamp(52px, 6.5vw, 104px) clamp(30px, 3.4vw, 46px);
}
.timeline__item:last-child {
  padding-bottom: var(--space-2);
}
.timeline__item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -8px;
  width: 13px;
  height: 13px;
  border: 5px solid var(--surface-paper);
  border-radius: var(--radius-circle);
  background: var(--eu-blue-500);
}
.timeline__year {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-title-3);
  line-height: var(--lh-year);
  letter-spacing: var(--ls-year);
  color: var(--eu-blue-500);
}
.timeline__item p {
  max-width: var(--measure-narrow);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Estado progressivo: marcadores acendem conforme entram na tela. */
[data-motion="on"] .timeline::after {
  transform: scaleY(var(--progress, 0));
}
[data-motion="on"] .timeline__item::before {
  background: var(--border-rule);
  transform: scale(0.35);
  transition: background var(--dur-fast) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart);
}
[data-motion="on"] .timeline__item[data-on]::before {
  background: var(--eu-blue-500);
  transform: scale(1.15);
}
[data-motion="on"] .timeline__item > * {
  opacity: 0;
  transform: translate(-22px, 10px);
  transition: opacity var(--dur-base) var(--ease-out-quart),
    transform 0.7s var(--ease-out-quint);
}
[data-motion="on"] .timeline__item > p {
  transition-delay: 0.11s;
}
[data-motion="on"] .timeline__item[data-on] > * {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   CARD DE BANDEIRA
   Canto inferior direito cortado. Índice no topo, conteúdo ancorado embaixo.
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: 1.32fr 0.88fr;
  align-items: stretch;
  gap: 10px;
}

.card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 18px;
  min-height: 236px;
  padding: clamp(26px, 2.5vw, 40px);
  overflow: hidden;
  background: var(--surface-raised);
  color: var(--text-on-brand);
  clip-path: var(--clip-card);
}
.card__num {
  position: relative;
  z-index: var(--z-scrim);
  align-self: start;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-numeral-3);
  line-height: 0.85;
  letter-spacing: var(--ls-numeral-3);
  color: var(--eu-green-500);
}
.card__body {
  position: relative;
  z-index: var(--z-scrim);
  align-self: end;
  max-width: var(--measure);
}
.card__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 11px;
  background: var(--eu-yellow-500);
  color: var(--eu-blue-800);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-micro);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
.card h3 {
  margin-bottom: 13px;
  font-size: var(--fs-title-2);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.card p {
  margin: 0;
  line-height: var(--lh-body);
  color: var(--eu-blue-100);
}

/* Variante líder — ocupa duas linhas, fundo royal, título maior. */
.card--lead {
  grid-row: span 2;
  min-height: 492px;
  background: var(--surface-action);
}
.card--lead h3 {
  font-size: var(--fs-title-1);
}

/* Variante valores — amarela, largura total. Inverte todos os papéis de cor. */
.card--accent {
  grid-column: 1 / -1;
  min-height: 200px;
  background: var(--surface-accent);
  color: var(--text-on-accent);
}
.card--accent .card__num {
  color: var(--eu-blue-500);
}
.card--accent .card__tag {
  background: var(--eu-blue-800);
  color: var(--eu-yellow-500);
}
.card--accent p {
  color: var(--text-on-accent-soft);
}

/* Variante compacta: card sem altura mínima, para grades densas e colunas.
   Mora aqui e não na folha de uma página porque é usada por várias. */
.card--compact {
  grid-template-rows: auto;
  row-gap: 0;
  min-height: 0;
  padding: clamp(20px, 1.9vw, 28px);
}
.card--compact h3 {
  margin-bottom: 10px;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.1;
}
.card--compact p {
  font-size: 14px;
  line-height: 1.5;
}

/* Variantes de cor de marca. Só trocam superfície e tinta — nenhuma delas
   mexe em layout, então combinam com qualquer modificador de tamanho.
   A tinta de cada uma é a que passa no contraste: branco sobre azul e royal,
   azul sobre verde e amarelo. */
.card--royal {
  background: var(--eu-blue-500);
}
.card--ink {
  background: var(--eu-blue-800);
}
.card--green {
  background: var(--eu-green-500);
  color: var(--text-on-accent);
}
.card--yellow {
  background: var(--eu-yellow-500);
  color: var(--text-on-accent);
}
.card--green p,
.card--yellow p {
  color: var(--eu-blue-650);
}
.card--green .card__num,
.card--yellow .card__num {
  color: var(--eu-blue-500);
}
.card--green .card__tag,
.card--yellow .card__tag {
  background: var(--eu-blue-800);
  color: var(--eu-yellow-500);
}

/* Entrada por cortina lateral, escalonada pelo índice --i. */
[data-motion="on"] .card {
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.75s var(--ease-out-quint) calc(var(--i, 0) * var(--stagger)),
    opacity var(--dur-fast) linear calc(var(--i, 0) * var(--stagger));
}
[data-motion="on"] .card[data-enter] {
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ==========================================================================
   GRADE DE LINKS
   Células divididas por hairline. Hover inverte para amarelo.
   ========================================================================== */

.link-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--border-hairline) solid var(--eu-white-a35);
  border-left: var(--border-hairline) solid var(--eu-white-a35);
}
.link-grid > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 96px;
  padding: 18px var(--space-5);
  border-right: var(--border-hairline) solid var(--eu-white-a35);
  border-bottom: var(--border-hairline) solid var(--eu-white-a35);
  transition: background 0.22s, color 0.22s;
}
.link-grid > a:hover {
  background: var(--eu-yellow-500);
  color: var(--eu-blue-800);
}
.link-grid b {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-title-4);
  text-transform: uppercase;
}
.link-grid span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-meta);
}

/* ==========================================================================
   CITAÇÃO
   Fundo amarelo, foto à esquerda, fala em display. Máximo 12 palavras.
   ========================================================================== */

.quote {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 570px;
  overflow: hidden;
  background: var(--surface-accent);
  color: var(--text-on-accent);
}
.quote__photo {
  overflow: hidden;
}
.quote__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.quote blockquote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-11) clamp(30px, 6vw, 100px);
}
.quote__mark {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: var(--weight-display);
  font-size: 150px;
  line-height: 0.5;
  color: var(--eu-white);
}
.quote blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-display-4);
  line-height: var(--lh-quote);
  letter-spacing: var(--ls-quote);
  text-transform: uppercase;
}
.quote blockquote em {
  font-style: normal;
  color: var(--eu-blue-500);
}
.quote footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: clamp(28px, 3vw, 44px);
  font-size: var(--fs-meta);
  font-weight: var(--weight-black);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}

/* Controles do carrossel de citações. */
.quote-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.quote-nav button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--eu-blue-800);
  border: var(--border-hairline) solid var(--border-on-light);
  transition: background var(--dur-instant), border-color var(--dur-instant),
    color var(--dur-instant);
}
.quote-nav button:hover {
  background: var(--eu-blue-800);
  border-color: var(--eu-blue-800);
  color: var(--eu-yellow-500);
}
.quote-count {
  min-width: 52px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-meta);
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-meta);
  color: var(--eu-blue-600);
}

/* Entrada palavra a palavra. Envolva cada palavra em <span style="--w:N">. */
[data-running] p span {
  display: inline-block;
  white-space: pre-wrap;
  opacity: 0;
  transform: translateY(0.42em);
  animation: quote-word 0.58s var(--ease-out-quint) forwards;
  animation-delay: calc(var(--w, 0) * 42ms);
}
@keyframes quote-word {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   CÉDULA
   O objeto-símbolo. Recorte diagonal, sombra sólida amarela, leve rotação.
   ========================================================================== */

.ballot {
  position: relative;
  z-index: var(--z-scrim);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(460px, 100%);
  min-height: 410px;
  padding: 50px var(--space-9) 38px;
  justify-self: center;
  text-align: center;
  background: var(--surface-action);
  color: var(--text-on-brand);
  clip-path: var(--clip-ballot);
  filter: var(--drop-block-accent);
  transform: rotate(2deg);
}
.ballot__number {
  display: block;
  margin: var(--space-2) 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-numeral-1);
  line-height: 0.85;
  letter-spacing: var(--ls-numeral-1);
  color: var(--eu-yellow-500);
}
.ballot__number span {
  color: var(--eu-green-500);
}
.ballot__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-hairline) solid var(--eu-white-a50);
  font-weight: var(--weight-black);
  letter-spacing: var(--ls-ticker);
}
.ballot__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 10px;
  border-radius: var(--radius-circle);
  background: var(--eu-green-500);
  color: var(--eu-blue-800);
  font-style: normal;
}

[data-motion="on"] .ballot {
  opacity: 0;
  transform: rotate(0) translateY(26px);
  transition: transform 0.8s var(--ease-out-expo), opacity 0.5s linear;
}
[data-motion="on"] .ballot[data-enter] {
  opacity: 1;
  transform: rotate(2deg) translateY(0);
}

/* ==========================================================================
   RODAPÉ E ASSINATURA
   ========================================================================== */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 110px;
  padding: var(--space-5) var(--gutter-page);
  background: var(--surface-brand);
  color: var(--text-on-brand);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-ticker);
  text-transform: uppercase;
}
.footer > img {
  width: 250px;
}
.footer > div {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.footer a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--eu-yellow-500);
  font-weight: var(--weight-display);
}

.party-signature {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--eu-white-a50);
  font-family: var(--font-display);
  font-weight: var(--weight-medium-plus);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}
/* Sem esta regra o logo do partido entra no tamanho natural do arquivo e
   estoura o rodapé inteiro. O logo é conteúdo obrigatório, então ele tem
   medida fixa aqui e não depende de style inline na página. */
.party-signature img {
  flex: none;
  width: 43px;
  height: 30px;
  object-fit: contain;
}
.party-signature b {
  color: var(--eu-yellow-500);
  font-size: 1.125rem;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 800px;
  padding: 140px var(--gutter-page) var(--space-11);
  overflow: hidden;
  background: var(--surface-brand);
  color: var(--text-on-brand);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  overflow: hidden;
  background: var(--surface-brand);
}
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.92) contrast(1.03);
  pointer-events: none;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim-hero);
}
.hero__copy {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(680px, 62vw);
}
.hero h1 {
  margin-bottom: var(--space-7);
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-1);
  text-shadow: var(--text-shadow-hero);
}
.hero .type-lead {
  color: var(--eu-white);
  max-width: 590px;
  text-shadow: var(--text-shadow-lead);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-9);
}

/* Entrada escalonada dos filhos do hero. */
.hero__copy > * {
  animation: copy-in var(--dur-base) var(--ease-out-expo) both;
}
.hero__copy > *:nth-child(2) {
  animation-delay: 70ms;
}
.hero__copy > *:nth-child(3) {
  animation-delay: 0.13s;
}
.hero__copy > *:nth-child(4) {
  animation-delay: 0.19s;
}
.hero__copy > *:nth-child(5) {
  animation-delay: 0.25s;
}
@keyframes copy-in {
  from {
    transform: translateX(-28px);
  }
  to {
    transform: translateX(0);
  }
}

.portrait {
  animation: portrait-in var(--dur-slow) var(--ease-out-expo) both;
}
.portrait img {
  animation: portrait-image-in var(--dur-slower) var(--ease-out-expo) both;
}
@keyframes portrait-in {
  from {
    clip-path: polygon(48% 0, 100% 0, 100% 88%, 86% 100%, 35% 100%, 35% 12%);
  }
  to {
    clip-path: var(--clip-portrait);
  }
}
@keyframes portrait-image-in {
  from {
    transform: scale(1.06) translateX(16px);
  }
  to {
    transform: scale(1) translateX(0);
  }
}
.sticker {
  animation: sticker-in 0.72s var(--ease-out-expo) 0.26s both;
}
@keyframes sticker-in {
  from {
    transform: translate(38px, 28px) rotate(18deg) scale(0.86);
  }
  to {
    transform: translate(0, 0) rotate(7deg) scale(1);
  }
}

/* ==========================================================================
   RESPONSIVO
   Dois pontos de quebra apenas: 900px (tablet) e 560px (telefone).
   ========================================================================== */

@media (max-width: 900px) {
  .nav__links {
    display: none;
  }
  .hero {
    min-height: 760px;
    padding-top: 122px;
  }
  .hero__copy {
    width: min(670px, 86vw);
  }
  .section-head {
    display: block;
  }
  .section-head h2 {
    margin-bottom: 25px;
  }
  .card-grid,
  .quote,
  .link-grid {
    grid-template-columns: 1fr;
  }
  .card--lead {
    grid-row: auto;
    min-height: 300px;
  }
  .card--accent {
    grid-column: auto;
  }
  .portrait {
    height: 540px;
  }
  .quote__photo {
    height: 480px;
  }
  .footer {
    flex-wrap: wrap;
    gap: var(--space-5);
  }
}

@media (max-width: 560px) {
  .nav {
    height: 72px;
  }
  .nav__brand {
    width: 180px;
  }
  .nav__cta {
    padding: 10px;
    font-size: var(--fs-micro);
  }
  .hero {
    align-items: flex-end;
    min-height: 720px;
    padding-bottom: 45px;
  }
  .hero__copy {
    width: 100%;
  }
  .hero__actions .btn {
    width: 100%;
  }
  .note {
    display: none;
  }
  .portrait {
    height: 440px;
  }
  .sticker {
    width: 104px;
    height: 104px;
  }
  .quote__photo {
    height: 360px;
  }
  .quote blockquote {
    padding: 55px var(--space-6);
  }
  .card {
    padding: var(--space-6);
  }
  .ballot {
    min-height: 340px;
    padding: 32px 22px;
  }
  .footer {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
  .portrait {
    clip-path: var(--clip-portrait);
  }
  [data-motion="on"] .timeline__item > *,
  [data-motion="on"] .card,
  [data-motion="on"] .ballot {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}