/* Fontes servidas pelo próprio site. Vinham do Google Fonts: uma folha de estilo de
   terceiro que bloqueava a primeira pintura (~0,8 s no celular, pelo Lighthouse) e
   mandava o IP de cada visitante ao Google. Rubik e Signika são fontes variáveis, então
   um arquivo cobre todos os pesos; só o subconjunto latino, que tem todos os acentos
   do português. Licença SIL Open Font License. A versão no nome do arquivo deixa o
   cache ser de um ano: fonte nova, nome novo. */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/rubik-v31-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/signika-v29-latin.woff2') format('woff2');
  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;
}

:root {
  /* Cores — confirmar valores exatos com a logo em vetor */
  --preto: #0d0d0d;
  --preto-suave: #1a1a1a;
  --vermelho: #d62828;
  --vermelho-escuro: #a81e1e;
  /* Só para os degradês de fundo. Separadas de --vermelho de propósito: mexer
     naquela mudaria todo botão do site. */
  --grad-vermelho-fundo: #9d0208;
  --grad-vermelho-topo: #d00000;
  --grad-escuro-alto: #3a3a3a;
  --grad-escuro-meio: #111111;
  --grad-escuro-baixo: #050505;
  --branco: #ffffff;
  --cinza-fundo: #f5f5f5;
  --cinza-metal: #9aa0a6; /* só decorativo (borda, ícone, texto sobre --preto — 7.36:1); como texto sobre branco dá 2.64:1, falha WCAG AA */
  --cinza-texto: #4a4a4a;
  --cinza-texto-suave: #6b7178; /* texto secundário sobre --branco/--cinza-fundo — 4.93:1, passa WCAG AA */
  --cinza-borda: #ececec;      /* borda de card claro sobre --cinza-fundo */
  --vermelho-lavado: #fdeaea;  /* fundo de selo; com --vermelho-escuro dá 6,3:1 */

  --font-titulo: 'Rubik', Arial, sans-serif;
  --font-texto: 'Rubik', Arial, sans-serif;
  --font-destaque: 'Signika', 'Rubik', Arial, sans-serif;  /* sobre imagem e fundo colorido */

  /* Cores da tipografia */
  --tinta-titulo: #071F1D;
  --tinta-texto: #808080;
  --tinta-subtitulo: #707070;
  --vinho: #990000;

  --raio: 0;
  --raio-pill: 0;      /* cantos retos por decisão de design */
  --raio-botao: 999px; /* exceção: botão é arredondado */
  --sombra-card: 0 4px 20px rgba(0,0,0,.08);
  --container: 1200px;
  --transicao: .3s ease;
}

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

body {
  margin: 0;
  font-family: var(--font-texto);
  color: var(--cinza-texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  color: var(--preto);
  margin: 0;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

img {
  max-width: 100%;
  display: block;
  outline: 1px solid rgba(0, 0, 0, 0.08);
  outline-offset: -1px;
}

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: var(--reveal-atraso, 0s);
}

.reveal--visivel {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Texto revelado palavra por palavra (data-revela-texto no HTML).
   Sem JavaScript nada disso existe e o texto aparece normal. */

.revela__palavra {
  display: inline-block;
  white-space: nowrap;
}

.revela__unidade {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(8px);
  transition:
    opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.revela--visivel .revela__unidade {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  /* Sem transição, a unidade ficaria invisível para sempre */
  .revela__unidade {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}