/* ==========================================================================
   Base: fontes, tokens de design, reset e animações compartilhadas
   ========================================================================== */

/* Figtree (fonte variável, pesos 300–700), servida localmente. Nome próprio ("Figtree 2026") para não
   se misturar com a Figtree que o Elementor carrega (arquivos estáticos, com medidas um pouco diferentes) */
@font-face {
  font-family: 'Figtree 2026';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree 2026';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/figtree-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 {
  --roxo: #411787;
  --roxo-vivo: #5926B7;
  --roxo-escuro: #1E1433;
  --lilas: #F1ECF8;
  --lilas-hover: #E4DAF2;
  --lilas-borda: #D9CFEA;
  --amarelo: #FBB03B;
  --amarelo-claro: #FFD36B;
  --amarelo-hover: #E99A1F;
  --gradiente-amarelo: linear-gradient(90deg, #FFD36B 0%, #FBB03B 100%);
  --cinza: #EDEDED;
  --cinza-borda: #DDDDDD;
  --branco: #FFFFFF;
  --preto: #000000;
  --erro: #8A1C1C;
  --obrigatorio: #D62828;
}

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

/* Regras gerais de body, links, campos e .pagina. Com o WordPress completo (modelo "Padrão 2026",
   que também carrega o CSS do tema e do Elementor; o <body> ganha a classe wordpress-completo-2026),
   elas não valem para o conteúdo feito no Elementor, que segue só o CSS dele e do tema.
   Os :where() mantêm a mesma especificidade de antes (body, a, .pagina). */
body:where(:not(.wordpress-completo-2026)) {
  margin: 0;
  background: #fff;
  font-family: 'Figtree 2026', sans-serif;
  color: var(--preto);
  -webkit-font-smoothing: antialiased;
}

a:where(:not(.pagina-padrao__elementor *)) {
  color: var(--roxo);
  text-decoration: none;
}
a:where(:not(.pagina-padrao__elementor *)):hover {
  color: var(--roxo);
}

button:where(:not(.pagina-padrao__elementor *)),
input:where(:not(.pagina-padrao__elementor *)),
textarea:where(:not(.pagina-padrao__elementor *)),
select:where(:not(.pagina-padrao__elementor *)) {
  font-family: inherit;
}

/* Envolve a página inteira: corta qualquer transbordo horizontal */
.pagina {
  overflow-x: hidden;
}
.pagina:where(:not(.wordpress-completo-2026 *)) {
  font-family: 'Figtree 2026', sans-serif;
  color: var(--preto);
  background: #fff;
}

/* Topo, rodapé e botão do WhatsApp: fonte, cor e altura de linha próprias, e desfaz o que o tema
   Phlox aplica a elementos genéricos nas páginas que carregam o CSS dele (modelo "Padrão 2026"):
   altura de linha, margem dos <li>, fonte dos <h2>, alinhamento de SVGs e imagens.
   Especificidade de uma classe: as regras dos próprios componentes, que vêm depois, continuam
   valendo. Na home, sem o CSS do tema, o resultado é o mesmo de antes. */
:is(.pular-conteudo, .aviso-fisp, .cabecalho, .menu-mobile, .rodape, .whatsapp-botao, .whatsapp-dialogo) {
  font-family: 'Figtree 2026', sans-serif;
  color: var(--preto);
  line-height: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
:is(.pular-conteudo, .aviso-fisp, .cabecalho, .menu-mobile, .rodape, .whatsapp-botao, .whatsapp-dialogo) * {
  font-family: inherit;
  line-height: inherit;
}
:is(.aviso-fisp, .cabecalho, .menu-mobile, .rodape, .whatsapp-dialogo) :where(li) {
  margin: 0;
}
:is(.cabecalho, .menu-mobile, .whatsapp-dialogo) :where(button) {
  margin: 0;
  font-weight: inherit;
  position: static;
}
:is(.aviso-fisp, .cabecalho, .menu-mobile, .rodape, .whatsapp-botao, .whatsapp-dialogo) :where(svg, img) {
  vertical-align: baseline;
  max-width: none;
}

/* Elementos com o atributo hidden ficam sempre ocultos, mesmo que a classe defina display */
[hidden] {
  display: none !important;
}

/* Trava a rolagem enquanto o menu mobile está aberto */
html.menu-aberto {
  overflow: hidden;
}

/* Conteúdo só para leitores de tela */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link "pular para o conteúdo": aparece só ao receber foco pelo teclado */
.pular-conteudo {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 2000;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--roxo);
  color: var(--branco);
  font-weight: 600;
}
.pular-conteudo:focus {
  top: 16px;
  color: var(--branco);
}

/* Listas usadas só pela semântica (sem marcadores nem recuos) */
.lista-limpa {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Animações */
@keyframes pulsar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(var(--s, 1.18)); }
}
@keyframes letreiro {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes entrada-palavra {
  0% { opacity: 0; transform: translateY(.45em); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: none; }
}