/* ============================================================
   FX Consultoria — CSS complementar (Agência KOR)
   Enfileirado pelo child theme (functions.php).
   ⚠️ NÃO colar também no "CSS personalizado" do Elementor —
      fonte única de verdade é este arquivo.
   Tokens extraídos do layout aprovado de 24/07/2026.
   ============================================================ */

:root{
  --fx-navy:#0A1628;        --fx-verde:#16A34A;      --fx-verde-2:#22C55E;
  --fx-fundo:#F8FAFB;       --fx-tag-fundo:#DCFCE7;  --fx-texto-sec:#64748B;
  --fx-branco:#FFFFFF;
  --fx-grad:linear-gradient(135deg,#16A34A 0%,#22C55E 100%);
  --fx-r-card:20px;  --fx-r-btn:12px;  --fx-r-tag:8px;
  --fx-shadow:0 2px 12px rgba(10,22,40,.05);
  --fx-shadow-lift:0 18px 44px rgba(10,22,40,.10);
  --fx-glow:0 10px 30px rgba(22,163,74,.35);
}

/* ---------- 0. UTILITÁRIO — texto só para leitores de tela ---------- */
.fx-sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 1. BOTÃO FLUTUANTE DE WHATSAPP ----------
   Fiel ao layout aprovado: círculo 60px, gradiente da marca, glow. */
.fx-fab{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;
  background:var(--fx-grad);display:grid;place-items:center;z-index:9999;
  box-shadow:var(--fx-glow);transition:transform .18s}
.fx-fab:hover{transform:translateY(-3px)}
.fx-fab:focus-visible{outline:3px solid var(--fx-navy);outline-offset:3px}
.fx-fab svg{width:30px;height:30px;fill:#fff}
@media (max-width:768px){.fx-fab{bottom:16px;right:16px}}
@media (prefers-reduced-motion:reduce){.fx-fab{transition:none}.fx-fab:hover{transform:none}}

/* ---------- 2. AJUSTES GLOBAIS LEVES ----------
   O grosso do estilo vem do Style Kit do Elementor (cores/fontes globais).
   Aqui só o que o Elementor não cobre. */

/* Foco visível consistente em links e botões (acessibilidade) */
a:focus-visible,button:focus-visible{outline:3px solid var(--fx-verde);outline-offset:2px}

/* Seleção de texto na cor da marca */
::selection{background:var(--fx-tag-fundo);color:var(--fx-navy)}
