/* VOOC — tokens de marca. Cole no topo do CSS do site.
   Logo: use os arquivos SVG de svg/final. Nunca escreva VOOC com fonte. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,600;6..12,700&family=Spectral:wght@300;400;600&family=Mulish:wght@300;400;600;700&display=swap');

:root {
  /* Cores — paleta Mariana (assinatura institucional) */
  --vooc-azul: #1D3F8F;
  --vooc-ouro: #B8923A;
  --vooc-marfim: #F3EEE3;
  --vooc-profundo: #152C63;
  --vooc-tinta: #1C1A17;
  --vooc-apagado: #7A7368;

  /* Cores — paleta Alfaiataria (materiais e ambientes) */
  --vooc-marinho: #0F2456;
  --vooc-camisa: #A9C4E8;
  --vooc-caqui: #C3B091;
  --vooc-areia: #E6DCC3;
  --vooc-caramelo: #9A5B2B;
  --vooc-marrom: #5E3A1E;

  /* Tipografia */
  --vooc-titulo: 'EB Garamond', 'Garamond', 'Georgia', serif;
  --vooc-texto: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  /* Escala (razão 1,25) */
  --vooc-display: 61px;
  --vooc-display-lh: 1.05;
  --vooc-titulo1: 49px;
  --vooc-titulo1-lh: 1.1;
  --vooc-titulo2: 33px;
  --vooc-titulo2-lh: 1.2;
  --vooc-titulo3: 25px;
  --vooc-titulo3-lh: 1.3;
  --vooc-destaque: 21px;
  --vooc-destaque-lh: 1.55;
  --vooc-corpo: 17px;
  --vooc-corpo-lh: 1.65;
  --vooc-apoio: 15px;
  --vooc-apoio-lh: 1.6;
  --vooc-rotulo: 12px;
  --vooc-rotulo-lh: 1.4;

  /* Medidas */
  --vooc-medida: 66ch;      /* largura máxima do texto corrido */
  --vooc-respiro: 1.5rem;
}

body {
  font-family: var(--vooc-texto);
  font-size: var(--vooc-corpo);
  line-height: var(--vooc-corpo-lh);
  font-weight: 400;
  color: var(--vooc-tinta);
  background: var(--vooc-marfim);
  text-wrap: pretty;
}

h1, h2 { font-family: var(--vooc-titulo); font-weight: 500; color: var(--vooc-azul); text-wrap: balance; }
h1 { font-size: var(--vooc-titulo1); line-height: var(--vooc-titulo1-lh); }
h2 { font-size: var(--vooc-titulo2); line-height: var(--vooc-titulo2-lh); }
h3 { font-family: var(--vooc-texto); font-weight: 600; font-size: var(--vooc-titulo3); line-height: var(--vooc-titulo3-lh); }

p { max-width: var(--vooc-medida); }
a { color: var(--vooc-azul); text-underline-offset: 3px; }
a:hover { color: var(--vooc-profundo); }

.vooc-display { font-family: var(--vooc-titulo); font-size: var(--vooc-display); line-height: var(--vooc-display-lh); font-weight: 500; }
.vooc-destaque { font-size: var(--vooc-destaque); line-height: var(--vooc-destaque-lh); font-weight: 300; }
.vooc-apoio { font-size: var(--vooc-apoio); line-height: var(--vooc-apoio-lh); }
.vooc-rotulo { font-size: var(--vooc-rotulo); line-height: var(--vooc-rotulo-lh); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; }

/* O ouro nunca é cor de texto: contraste 2.52:1 sobre marfim, abaixo do mínimo de 4,5:1.
   Use-o em filetes, ícones e detalhes. */
.vooc-filete { border-left: 2px solid var(--vooc-ouro); padding-left: 0.9rem; }