/* EPSA Brand System — generated from tokens.json */
:root, [data-theme="branco"] {
  --vermelho-epsa: #ff010b; /* Vermelho oficial atual da EPSA. No Photoshop (documentos em Adobe RGB 1998) é #E30613; CMYK de referência 0/100/100/0, a confirmar com a gráfica. Use em títulos de destaque, números, pílulas de segmento, corações, ícones e blocos sobre fundo branco. Texto branco sobre ele só em 24px+ ou bold 19px+ (contraste 4,0:1). */
  --vermelho-profundo: #e0000d; /* Vermelho institucional profundo, sem deslocamento para vinho. Fundo de peças inteiras e áreas de alto contraste. */
  --vermelho-capa: #d6000c; /* Vermelho escuro para capas e seções extensas, mantendo leitura inequívoca de vermelho. */
  --padrao-fundo: #cc000b; /* Vermelho de base do padrão, sem componentes arroxeados. */
  --padrao-bloco-claro: #dc000e; /* Tom claro dos blocos do padrão, resultado do vetor #EE3F43 em Luz Direta 61% sobre padrao-fundo (Adobe RGB #BC0015). É o mesmo vermelho das capas. */
  --padrao-bloco-escuro: #d40008; /* Tom escuro dos blocos do padrão, resultado do vetor #D60D17 em Luz Direta 61% sobre padrao-fundo (Adobe RGB #B50010). */
  --bordo: #c3000b; /* Alias técnico legado. Visualmente é vermelho escuro puro; não usar bordô na identidade. */
  --vinho: #b8000a; /* Alias técnico legado para profundidade. Mantém matiz vermelho puro, nunca vinho. */
  --preto-epsa: #171714; /* Títulos e chamadas sobre branco e cinza-fundo; o logotipo EPSA em positivo. Adobe RGB #1D1D1B. */
  --grafite: #393938; /* Texto corrido sobre branco e cinza-fundo (11,5:1). Adobe RGB #3C3C3B. */
  --cinza-apoio: #717171; /* Legendas, cabeçalhos de coluna em tabelas ('Valor', 'Irmãos (cada)'), datas secundárias. Sobre branco: 4,8:1. */
  --cinza-linha: #d1d1d1; /* Divisórias finas de tabelas e listas. */
  --cinza-fundo: #f3f3f3; /* Fundo das seções em caixa arredondada sobre página branca (tabelas de valores, passos). */
  --cinza-nevoa: #f5f5f5; /* Superfície mais clara. Padrão para novas criações em vez de bege. */
  --cinza-superficie: #f1f1f1; /* Fundo neutro principal de seções e painéis. */
  --cinza-suave: #e8e8e8; /* Contraste suave entre cartões, imagens e áreas agrupadas. */
  --cinza-medio: #d6d6d6; /* Linhas, estados e separadores com presença moderada. */
  --branco: #ffffff; /* Fundo das peças claras; texto, ícones e cards sobre os vermelhos. */
  --pessego-lapis: #fad6a7; /* Somente na madeira do lápis do logotipo. Adobe RGB #F0D5A8. Não usar como cor de layout. */
  --rosa-coracao: #ffbfc4; /* Corações suaves e detalhes afetivos (Dia das Mães, despedidas). Nunca para texto. */
  --legado-coral-2023: #f23d4c; /* LEGADO. Vermelho da paleta original de 2023 (biblioteca 'EPSA - PALETA DE CORES ORIGINAL'). Não usar em peças novas: foi substituído por vermelho-epsa. */
  --legado-vermelho-2023: #ff3d41; /* LEGADO, paleta original de 2023. Não usar. */
  --legado-grafite-2023: #383c3e; /* LEGADO, paleta original de 2023. Hoje: preto-epsa e grafite. */
  --legado-pessego-2023: #ffd7a8; /* LEGADO, paleta original de 2023. Hoje: pessego-lapis. */
  --fundo: var(--branco); /* Fundo da peça no modo escolhido. */
  --fundo-secao: var(--cinza-fundo); /* Caixa de seção que agrupa conteúdo (tabela, passos). */
  --padrao-bloco: #ececec; /* Cor dos blocos do padrão no modo da peça: cinza bem claro nas peças brancas, tom sobre tom nas vermelhas. */
  --texto-titulo: var(--preto-epsa); /* Títulos e chamadas em caixa alta sobre fundo. */
  --texto-corpo: var(--grafite); /* Texto corrido sobre fundo. */
  --destaque: var(--vermelho-epsa); /* Palavras-chave, valores e números em destaque dentro de títulos e textos. */
  --card: var(--cinza-fundo); /* Cartão de conteúdo: cinza sobre branco, branco sobre vermelho. */
  --card-texto: var(--preto-epsa); /* Texto dentro do card. */
  --pilula: var(--vermelho-epsa); /* Pílula de segmento (Infantil, Fundamental I…) e cabeçalhos de coluna. */
  --pilula-texto: var(--branco); /* Texto da pílula. */
}
[data-theme="vermelho"] {
  --fundo: var(--vermelho-profundo);
  --fundo-secao: var(--padrao-fundo);
  --padrao-bloco: var(--padrao-bloco-claro);
  --texto-titulo: var(--branco);
  --texto-corpo: var(--branco);
  --destaque: var(--branco);
  --card: var(--branco);
  --card-texto: var(--preto-epsa);
  --pilula: var(--branco);
  --pilula-texto: var(--vermelho-epsa);
}
:root {
  --espaco-1: 8px; /* Entre ícone e texto. */
  --espaco-2: 16px; /* Entre pílulas e linhas de tabela. */
  --espaco-3: 24px; /* Padding interno de pílulas e cards pequenos. */
  --espaco-4: 40px; /* Padding interno de cards e caixas de seção. */
  --espaco-5: 64px; /* Entre seções. */
  --margem: 80px; /* Margem externa da peça (cerca de 7,5% da largura). No A4: cerca de 190 px. */
  --raio-card: 32px; /* Caixas de seção e cards (cerca de 3% da largura da peça). */
  --raio-botao: 16px; /* Pílulas retangulares de segmento e cabeçalhos de coluna. */
  --raio-pilula: 999px; /* Números em círculo, selos e etiquetas totalmente arredondadas. */
  --font-campanha: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-documento: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --text-campanha-display: 900 120px/0.92 var(--font-campanha); /* Título principal de peças de campanha (matrículas, outdoors, Story Ads, capas de campanha). SF Pro Display Black ou Heavy, caixa alta. */
  --text-campanha-titulo: 800 64px/0.98 var(--font-campanha); /* Títulos e frases-assinatura de campanha. SF Pro Display Heavy ou Bold, caixa alta. */
  --text-campanha-chamada: 600 30px/1.15 var(--font-campanha); /* Linha de apoio em campanha. SF Pro Display Semibold. */
  --text-campanha-texto: 400 24px/1.35 var(--font-campanha); /* Texto curto em peças de campanha. SF Pro Display Regular. */
  --text-display: 900 120px/0.92 var(--font-documento); /* Título principal da peça, sempre em CAIXA ALTA, Barlow Black. Num A4 300 dpi o ano chega a 72 pt e a palavra a 36 pt. */
  --text-titulo-1: 900 64px/1 var(--font-documento); /* Títulos de capa e de bloco principal. Barlow Black, caixa alta. */
  --text-titulo-2: 800 44px/1.05 var(--font-documento); /* Títulos de seção. Barlow ExtraBold, caixa alta. No A4: 14–15 pt. */
  --text-chamada: 600 30px/1.15 var(--font-documento); /* Linha de apoio sob o título, caixa alta, Barlow SemiBold a Bold. No A4: 11–12 pt. */
  --text-corpo: 400 28px/1.38 var(--font-documento); /* Texto corrido, frase normal (não caixa alta), Barlow Regular. No A4: 7–9 pt. */
  --text-corpo-destaque: 700 28px/1.38 var(--font-documento); /* Trechos em negrito dentro do texto corrido. Barlow Bold. */
  --text-valor: 700 34px/1.1 var(--font-documento); /* Valores em tabela. Barlow Bold, números tabulares. */
  --text-numero: 900 96px/1 var(--font-documento); /* Preço ou número de impacto, em destaque. Barlow Black. */
  --text-legenda: 500 20px/1.3 var(--font-documento); /* Cabeçalhos de coluna, notas, prazos. Barlow Medium em cinza-apoio. */
  --text-rodape-legal: 600 14px/1.2 var(--font-documento); /* Linha legal no pé de capas, caixa alta bem espaçada. */
}
.campanha-display {
  font-family: var(--font-campanha);
  font-size: 120px;
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -2px;
}
.campanha-titulo {
  font-family: var(--font-campanha);
  font-size: 64px;
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -1px;
}
.campanha-chamada {
  font-family: var(--font-campanha);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0;
}
.campanha-texto {
  font-family: var(--font-campanha);
  font-size: 24px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
}
.display {
  font-family: var(--font-documento);
  font-size: 120px;
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -1px;
}
.titulo-1 {
  font-family: var(--font-documento);
  font-size: 64px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}
.titulo-2 {
  font-family: var(--font-documento);
  font-size: 44px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: 0;
}
.chamada {
  font-family: var(--font-documento);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0;
}
.corpo {
  font-family: var(--font-documento);
  font-size: 28px;
  line-height: 1.38;
  font-weight: 400;
  letter-spacing: 0;
}
.corpo-destaque {
  font-family: var(--font-documento);
  font-size: 28px;
  line-height: 1.38;
  font-weight: 700;
  letter-spacing: 0;
}
.valor {
  font-family: var(--font-documento);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}
.numero {
  font-family: var(--font-documento);
  font-size: 96px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}
.legenda {
  font-family: var(--font-documento);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0;
}
.rodape-legal {
  font-family: var(--font-documento);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 4px;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}