/* =========================================================
   Placas Express — base
   Cores, fontes, espaçamentos e reset. Tudo que as outras
   folhas usam vem daqui. Nenhuma cor ou fonte fora do :root.
   ========================================================= */

:root {
  /* ---------- marca (Manual de Identidade Visual 2026) ---------- */
  /* ---------- marca Placas Express: azul + branco (sem laranja) ---------- */
  --acao: #335da6;             /* azul Express: botões e destaques */
  --acao-2: #274d9e;           /* hover */
  --azul-faixa: #296cb3;       /* azul do logo */
  --cinza-marca: #535253;      /* cinza institucional */
  --acao-viva: var(--acao-2);
  --acao-texto: #274d9e;       /* azul legível em fundo claro (AA) */
  --azul: #335da6;             /* azul Express (LP atual): faixas, etiquetas, links */
  --azul-escuro: #24457f;
  --azul-mercosul: #003399;    /* SÓ em detalhes de placa */
  --marinho: #24457f;          /* azul-marinho: blocos escuros (hero, passos, rodapé) */
  --marinho-fundo: #1c3766;    /* fundo do hero atrás da foto */
  --rodape-azul: #162c52;       /* fundo do rodapé: azul da marca mais fechado */
  --azul-claro: #e8eef8;       /* etiqueta de estado nos cartões */
  --sobre-marinho: #dfe6f3;    /* texto secundário sobre o marinho (AA) */
  --sobre-marinho-2: #c9d6ee;
  --titulo: #26262b;
  --titulo-escuro: #26262b;
  --acao-suave: #e8eef8;
  --fundo-foto: #030406;          /* preto da foto do estúdio, para emendar sem corte */       /* fundo do ícone dos diferenciais */
  --veu-cartao: linear-gradient(180deg, rgb(36 69 127 / 0%) 0%, rgb(36 69 127 / 12%) 30%, rgb(36 69 127 / 88%) 60%, rgb(36 69 127 / 98%) 100%);           /* títulos: cinza bem escuro (mais contraste que o cinza da marca) */
  --acao-claro: #a9c6f2;       /* destaques sobre o azul-marinho */
  --linha-marinho: rgb(255 255 255 / 14%);
  --vidro-marinho: rgb(255 255 255 / 6%);
  --veu-heroi: linear-gradient(90deg, rgb(36 69 127 / 97%) 0%, rgb(51 92 165 / 88%) 34%, rgb(51 92 165 / 38%) 58%, rgb(51 92 165 / 0%) 80%);
  --veu-heroi-celular: linear-gradient(180deg, rgb(36 69 127 / 5%) 0%, rgb(51 92 165 / 25%) 34%, rgb(51 92 165 / 94%) 56%, rgb(36 69 127) 72%);
  --veu-chamada: linear-gradient(90deg, rgb(36 69 127 / 97%) 0%, rgb(51 92 165 / 90%) 45%, rgb(51 92 165 / 55%) 100%);
  --vitrine-clara: linear-gradient(180deg, #f8f7f4 0%, #ecE9e3 100%);
  --sobre-grafite: #c8c6c2;       /* texto secundário sobre grafite (AA) */
  --linha-grafite: rgb(255 255 255 / 16%);
  --linha-acao: rgb(38 38 43 / 18%);
  --sobre-cinza: #e6e4e1;         /* texto secundário sobre o cinza da marca (AA) */
  --vitrine-placa: linear-gradient(180deg, #eef1f6, #e2e7ef);
  --grafite: #1d1d21;
  --grafite-2: #26262b;
  --grafite-3: #34343b;
  --preto: #131316;

  /* ---------- neutros ---------- */
  --branco: #ffffff;
  --papel: #f4f2ee;            /* seção clara quente */
  --aluminio: #e7e5e0;         /* chapa, textura */
  --aluminio-2: #d6d3cc;
  --linha: #dcd9d2;
  --cinza: var(--cinza-marca); /* tinta principal do tema claro */
  --cinza-2: #686768;          /* texto secundário (AA sobre branco e papel) */
  --cinza-3: #6b6a6b;          /* legendas e rodapé */

  /* ---------- papéis de cor (tema) ----------
     O site usa só estes papéis. O tema claro é o padrão;
     para testar o escuro: <html lang="pt-BR" data-tema="escuro"> */
  --tinta: var(--cinza);               /* textos, títulos, bordas, sombra seca */
  --tinta-suave: var(--cinza-2);
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  --fundo-forte: var(--branco);        /* cabeçalho, topo, seções "de destaque" */
  --fundo-forte-hover: var(--papel);
  --fundo-rodape: var(--papel);
  --fundo-neutro: var(--papel);        /* seção "como funciona" */
  --sobre-forte: var(--tinta);         /* texto sobre fundo-forte */
  --sobre-forte-2: var(--cinza-2);
  --sobre-forte-3: var(--cinza-3);
  --linha-forte: var(--linha);
  --borda-etiqueta-forte: var(--tinta);
  --sobre-acao: #ffffff;               /* texto sobre o azul */
  --botao-forte-fundo: var(--branco);
  --botao-forte-texto: var(--tinta);
  --botao-forte-hover: var(--branco);
  --botao-forte-sombra: var(--tinta);
  --inverso-fundo: var(--tinta);
  --inverso-texto: var(--branco);
  --rebite-sombra: #8c8c95;
  --acao-rodape: var(--acao-claro); /* azul claro legível sobre o rodapé */

  /* ---------- placa ---------- */
  --placa-preto: #111114;
  --placa-vermelho: #c8102e;
  --placa-cinza: #d7d7d7;
  --bandeira-verde: #009c3b;
  --bandeira-amarelo: #ffdf00;
  --bandeira-azul: #002776;

  /* ---------- apoio ---------- */
  --whatsapp: #25d366;
  --whatsapp-escuro: #128c4b;
  --whatsapp-vivo: #3ee07a;
  --whatsapp-texto: #06301a;
  --veu: rgb(19 19 22 / 72%);

  /* ---------- tipografia ---------- */
  /* Manual: Montserrat Extra Bold (principal) + Montserrat (secundária).
     Barlow Condensed só desenha os caracteres das placas ilustradas. */
  --fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-placa: "Barlow Condensed", "Arial Narrow", sans-serif;

  /* escala: contraste forte entre título e texto */
  --t-mega: clamp(2.3rem, 5.6vw, 4.8rem);
  --t-1: clamp(1.8rem, 3.4vw, 2.9rem);
  --t-2: clamp(1.45rem, 2.4vw, 2.1rem);
  --t-3: clamp(1.1rem, 1.4vw, 1.3rem);
  --t-legenda: 0.68rem;

  /* ---------- espaçamento ---------- */
  --largura: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --secao: clamp(60px, 8vw, 112px);

  /* raios diferentes de propósito: cada peça tem o seu */
  --raio-placa: 10px;
  --raio-botao: 6px;
  --raio-etiqueta: 3px;

  --sombra-seca: 6px 6px 0 var(--tinta);
  --sombra-placa: 0 1px 0 rgb(0 0 0 / 20%), 0 24px 48px -12px rgb(0 0 0 / 45%);
  --sombra-dialogo: 0 30px 80px -20px rgb(0 0 0 / 50%);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* tema escuro (versão anterior), para comparar */
:root[data-tema="escuro"] {
  --tinta: var(--grafite);
  --tinta-suave: #56565e;
  --fundo-forte: var(--grafite);
  --fundo-forte-hover: var(--grafite-3);
  --fundo-rodape: var(--preto);
  --fundo-neutro: var(--branco);
  --sobre-forte: var(--branco);
  --sobre-forte-2: #b4b4bc;
  --sobre-forte-3: #8c8c95;
  --linha-forte: rgb(255 255 255 / 14%);
  --borda-etiqueta-forte: rgb(255 255 255 / 40%);
  --sobre-acao: var(--grafite);
  --botao-forte-fundo: var(--grafite);
  --botao-forte-texto: var(--branco);
  --botao-forte-hover: var(--preto);
  --botao-forte-sombra: var(--branco);
  --inverso-fundo: var(--branco);
  --inverso-texto: var(--grafite);
  --acao-rodape: var(--acao);
}

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

html {
  overflow-x: clip;
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--titulo);
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

strong, b { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pular-conteudo {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--acao);
  color: var(--sobre-acao);
  font-weight: 600;
  border-radius: var(--raio-botao);
}
.pular-conteudo:focus { top: 12px; }