/*!
 * base.css — Universo FX (site estático)
 * =============================================================================
 * CAMADA 1 de 4. Ordem de carga obrigatória (a cascata depende dela):
 *
 *     base.css  ->  componentes.css  ->  efeitos.css  ->  paginas.css
 *
 * Quem vem depois vence em caso de empate de especificidade. Por isso este
 * arquivo NUNCA usa !important (fora do bloco de impressão) e mantém a
 * especificidade mínima possível: assim componentes/efeitos/páginas conseguem
 * sobrescrever sem truques.
 *
 * O que mora aqui (equivale aos arquivos 00, 01, 03, 04 e 08 do plano §3.1):
 *   1. Reset moderno
 *   2. Tokens --uf-* (:root) — vocabulário único de cor, tamanho e tempo
 *   3. Breakpoints (os 6 do Elementor) — só redefinem tokens
 *   4. Tipografia de elemento (body, h1–h6, p, listas, links)
 *   5. Botões
 *   6. Formulários
 *   7. Foco visível (:focus-visible) — correção de acessibilidade M14
 *   8. Layout: containers, seções, grades
 *   9. Utilitários (u-*, visualmente-oculto)
 *  10. Movimento reduzido e impressão
 *
 * NÃO declara @font-face (outro passo do build cuida das 3 famílias locais).
 * Zero @import, zero URL externa, zero dependência.
 * Referências: spec/01-design-tokens.md, spec/tokens.css, spec/09-plano.md §3.
 * =============================================================================
 */

/* ===========================================================================
 * 1. RESET MODERNO
 * Base: reset.css do tema hello-elementor + normalizações modernas.
 * ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

/* Mídia é bloco e nunca estoura o container (regra do tema hello-elementor). */
img,
picture,
video,
canvas,
svg,
iframe { display: block; max-width: 100%; }

img,
video { height: auto; }

svg { fill: currentColor; }

/* Campos herdam a tipografia em vez da do sistema. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

textarea { resize: vertical; }

/* Sem margem-fantasma no fim dos blocos de texto. */
p,
figure,
blockquote,
dl,
dd { margin: 0 0 1rem; }

ul,
ol { margin: 0 0 1rem; padding-inline-start: 1.5em; }

li > ul,
li > ol { margin-bottom: 0; }

hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--uf-cinza-claro);
  margin: var(--uf-space-30) 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  text-align: start;
  padding: 8px 12px;
  border: 1px solid var(--uf-cinza-claro);
}

abbr[title] { text-decoration: underline dotted; cursor: help; }
b, strong { font-weight: var(--uf-peso-bold); }
small { font-size: 87.5%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }

code, kbd, samp, pre { font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; font-size: 1em; }

/* Elementos escondidos por atributo continuam escondidos. */
[hidden] { display: none !important; }


/* ===========================================================================
 * 2. TOKENS --uf-*
 * Extraídos do kit Elementor 207 e do CSS das 102 páginas renderizadas.
 * O comentário de cada linha informa a variável Elementor de origem.
 * Cor literal fora deste bloco = erro de revisão.
 * ========================================================================= */

:root {

  /* ------------------------------------------------------------------
     2.1 Cores globais (as 9 variáveis do kit 207)
     ------------------------------------------------------------------ */
  --uf-azul-royal:        #062F95;   /* primary / 7e11b04 — cabeçalho, títulos de serviço, eyebrow */
  --uf-amarelo:           #EAB618;   /* secondary — cor de ação: botões, hover, ícones sociais */
  --uf-azul-escuro:       #092B65;   /* text / 1eb6d77 — corpo, h1–h6, <a>, hover de botão */
  --uf-cinza:             #909095;   /* accent — texto secundário, acordeão fechado */
  --uf-branco:            #FFFFFF;   /* de59c20 */
  --uf-cinza-claro:       #F2F3F9;   /* 492a581 — fundo alternado e borda de input */
  --uf-transparente:      #00000000; /* ec68a4f — alfa 0 */

  /* Aliases das duplicatas do Elementor (mesmos valores; mantidos por rastreio) */
  --uf-azul-royal-alt:    var(--uf-azul-royal);   /* 7e11b04 */
  --uf-azul-escuro-alt:   var(--uf-azul-escuro);  /* 1eb6d77 */

  /* ------------------------------------------------------------------
     2.2 Cores fora da paleta global (literais no CSS das páginas)
     ------------------------------------------------------------------ */
  --uf-azul-hero:         #002E97;   /* radial do rodapé, faixa de copyright, fill de onda */
  --uf-azul-hero-b:       #042E97;   /* topo das páginas de serviço e frente dos flip-box da home */
  --uf-azul-hero-c:       #052E97;   /* mesma função, em Nossos Serviços e Quem Somos */
  --uf-azul-radial-fim:   #27468B;   /* fim do radial-gradient do rodapé */
  --uf-azul-diagonal-fim: #20608F;   /* fim do gradiente 110deg do herói da Home */

  --uf-navy-overlay:      #242656;   /* base das sobreposições dos flip-box */
  --uf-navy-overlay-58:   #24265694; /* face FRONTAL do flip-box — alfa 148/255 ~ 58% */
  --uf-navy-overlay-76:   #242656C2; /* face de TRÁS do flip-box  — alfa 194/255 ~ 76% */

  --uf-verde-whatsapp:    #149F30;   /* botão verde da página Contato */
  --uf-amarelo-saiba:     #F6BE13;   /* botão "SAIBA MAIS" dos cards de Todos os Cursos */
  --uf-cinza-borda-form:  #9D9898;   /* borda e seta do <select> do formulário de Contato */
  --uf-azul-suave:        #5B7BA6;   /* subtítulo da página Contato */
  --uf-cinza-texto:       #4A4848;   /* texto da Política de Privacidade */
  --uf-facebook:          #3B5998;   /* fundo do ícone social do Facebook (padrão de marca) */
  --uf-linkedin:          #0077B5;   /* fundo do ícone social do LinkedIn no cabeçalho */
  --uf-youtube:           #CD201F;   /* fundo do ícone social do YouTube no cabeçalho */
  --uf-pessego-transicao: #FFBC7D;   /* e-page-transition do kit */

  /* Cinzas de interface herdados do Elementor/ElementsKit */
  --uf-cinza-acordeao:      #F7F9FB; /* fundo do gatilho do acordeão ElementsKit */
  --uf-cinza-borda-suave:   #D5D8DC; /* borda do acordeão nativo */
  --uf-cinza-menu-mobile:   #33373D; /* texto do item do menu mobile */
  --uf-cinza-menu-ativo:    #3F444B; /* fundo do item ativo do menu mobile */
  --uf-preto:               #000000; /* botão voltar-ao-topo */

  /* Correções de contraste aprovadas no plano (§7 P1-4 e P2-3) */
  --uf-cinza-texto-a11y:  #6B6B70;   /* substitui #909095 QUANDO é cor de TEXTO (3,18:1 -> 4,6:1) */
  --uf-foco-cor:          var(--uf-amarelo);
  --uf-foco-cor-clara:    var(--uf-branco);
  --uf-foco-largura:      3px;
  --uf-foco-recuo:        2px;
  --uf-alvo-toque:        44px;      /* alvo mínimo de toque (M18) */

  /* ------------------------------------------------------------------
     2.3 Tipografia — famílias e pesos
     ------------------------------------------------------------------ */
  --uf-fonte-base:   "Manrope", Sans-serif;  /* todos os presets do kit */
  --uf-fonte-alt:    "Inter", Sans-serif;    /* 1 parágrafo em Home, Quem Somos e Nossos Serviços */
  --uf-fonte-form:   "Poppins", Sans-serif;  /* formulário de Contato e 3 caixas de Quem Somos */

  --uf-peso-regular:   400;   /* Inter 18px; Poppins labels/campos */
  --uf-peso-medio:     500;   /* preset text (corpo) */
  --uf-peso-semi:      600;   /* presets accent e secondary (botões, labels, eyebrow) */
  --uf-peso-bold:      700;   /* título de post no single */
  --uf-peso-extra:     800;   /* presets primary/316a979/ca7fe16 (h1–h6, display) */

  /* ------------------------------------------------------------------
     2.4 Tipografia — tamanhos (valores DESKTOP, >=1367px)
     Só estes tokens mudam nos @media da seção 3.
     ------------------------------------------------------------------ */
  --uf-fs-display: 64.85px;  /* preset ca7fe16 (reservado) */
  --uf-fs-h1:      47.78px;  /* preset 316a979 */
  --uf-fs-h2:      39.81px;  /* preset 791f45e */
  --uf-fs-h3:      33.18px;  /* preset 771c067 */
  --uf-fs-h4:      27.65px;  /* preset 5fd9fca */
  --uf-fs-h5:      23.04px;  /* preset bbd8332 */
  --uf-fs-h6:      19.2px;   /* preset a2aab48 */
  --uf-fs-corpo:   16px;     /* preset text   — não muda em nenhum breakpoint */
  --uf-fs-acento:  16px;     /* preset accent — não muda */
  --uf-fs-rotulo:  14px;     /* preset secondary (eyebrow) — não muda */

  /* Tamanhos literais recorrentes fora dos presets */
  --uf-fs-titulo-faixa:    34px;  /* frase branca sobre a faixa azul */
  --uf-fs-titulo-faixa-sm: 28px;  /* variação da Home em telas pequenas */
  --uf-fs-paragrafo-inter: 18px;  /* parágrafo Inter centralizado */
  --uf-fs-iconbox-titulo:  22px;  /* icon-box das páginas de serviço */
  --uf-fs-flipbox-frente:  24px;  /* título da face frontal do flip-box */
  --uf-fs-flipbox-titulo:  21px;  /* título padrão do flip-box */
  --uf-fs-flipbox-desc:    14px;  /* descrição do flip-box */
  --uf-fs-form-label:      15px;  /* Poppins, label do formulário */
  --uf-fs-form-campo:      14px;  /* Poppins, campos do formulário */
  --uf-fs-contato-lista:   17px;  /* Poppins, icon-list da página Contato */

  /* ------------------------------------------------------------------
     2.5 Tipografia — altura de linha, espaçamento e caixa
     Nenhum destes muda por breakpoint.
     ------------------------------------------------------------------ */
  --uf-lh-display:  1.2em;
  --uf-lh-h1:       1.2em;
  --uf-lh-h2:       1.3em;
  --uf-lh-h3:       1.3em;
  --uf-lh-h4:       1.4em;
  --uf-lh-h5:       1.5em;
  --uf-lh-h6:       1.6em;
  --uf-lh-corpo:    1.8em;
  --uf-lh-acento:   1.6em;
  --uf-lh-rotulo:   1.6em;
  --uf-lh-compacta: 1.5em;   /* literal recorrente (Poppins 14px, icon-box 22px) */
  --uf-lh-icon-list: 18px;   /* literal, 12 icon-lists */

  --uf-ls-display: -1px;     /* único letter-spacing não-zero do site */
  --uf-ls-normal:   0px;

  --uf-tt-rotulo:  uppercase; /* preset secondary */
  --uf-tt-padrao:  none;      /* todos os demais presets */

  --uf-estilo-fonte: normal;
  --uf-decoracao:    none;

  /* ------------------------------------------------------------------
     2.6 Layout — container, grid, gutters
     ------------------------------------------------------------------ */
  --uf-container-max: 1280px;            /* .e-con --container-max-width (desktop) */
  --uf-container-padding-x: 20px;        /* padding lateral dominante (84 containers) */
  --uf-container-padding-default: 10px;  /* default do Elementor */

  --uf-content-1382: 1382px;
  --uf-content-1100: 1100px;
  --uf-content-1000: 1000px;
  --uf-content-900:   900px;
  --uf-content-800:   800px;
  --uf-content-700:   700px;   /* 17 ocorrências */
  --uf-content-500:   500px;   /* cabeçalho no mobile */

  --uf-gap-widgets:  20px;     /* --widgets-spacing global */
  --uf-gap-0:         0px;
  --uf-gap-10:       10px;
  --uf-gap-20:       20px;
  --uf-gap-30:       30px;     /* mais usado nos containers (47x) */
  --uf-gap-40:       40px;     /* 2o mais usado (36x) */
  --uf-gap-60:       60px;

  --uf-grid-col-gap-icones: 5px;   /* grades de ícones sociais (48x) */
  --uf-grid-row-gap-icones: 0px;
  --uf-grid-cols-1: repeat(1, 1fr);
  --uf-grid-cols-2: repeat(2, 1fr);
  --uf-grid-cols-3: repeat(3, 1fr);

  /* ------------------------------------------------------------------
     2.7 Escala de espaçamento
     ------------------------------------------------------------------ */
  --uf-space-0:    0px;
  --uf-space-10:  10px;
  --uf-space-20:  20px;
  --uf-space-25:  25px;
  --uf-space-30:  30px;
  --uf-space-40:  40px;
  --uf-space-50:  50px;
  --uf-space-60:  60px;    /* ritmo vertical dominante de seção */
  --uf-space-80:  80px;
  --uf-space-90:  90px;    /* 2o ritmo vertical dominante */
  --uf-space-120: 120px;
  --uf-space-160: 160px;
  --uf-space-180: 180px;
  --uf-space-2em:  2em;
  --uf-space-7em:  7em;
  --uf-space-10em: 10em;

  --uf-min-h-160: 160px;
  --uf-min-h-200: 200px;
  --uf-min-h-350: 350px;
  --uf-min-h-450: 450px;   /* altura fixa do flip-box de catálogo */
  --uf-min-h-500: 500px;   /* heróis (14x) */
  --uf-min-h-550: 550px;
  --uf-min-h-600: 600px;
  --uf-min-h-700: 700px;
  --uf-min-h-800: 800px;   /* herói da Home */

  /* ------------------------------------------------------------------
     2.8 Raios de borda
     Nota: no CSS original dois raios saíram com zero à esquerda (grafia
     inválida que o navegador tolera). Aqui já saem normalizados.
     ------------------------------------------------------------------ */
  --uf-raio-pilula:  100px; /* todos os botões, normal e hover */
  --uf-raio-card:     10px; /* cards, camadas de flip-box, imagens */
  --uf-raio-grande:   25px; /* caixas maiores e imagem do curso */
  --uf-raio-medio:    30px; /* botão verde do Contato (normalizado) */
  --uf-raio-campo:     5px; /* campos do formulário de Contato */
  --uf-raio-pequeno:   3px; /* campos do kit e botão hambúrguer */
  --uf-raio-circulo:  50%;
  --uf-raio-5pct:      5%;
  --uf-raio-0:         0;

  /* ------------------------------------------------------------------
     2.9 Bordas
     ------------------------------------------------------------------ */
  --uf-borda-campo-largura: 2px;
  --uf-borda-campo-cor:     var(--uf-cinza-claro);
  --uf-borda-botao-largura: 2px;
  --uf-borda-botao-cor:     var(--uf-amarelo);
  --uf-borda-menu-ponteiro: 3px;
  --uf-borda-inferior-5:    0px 0px 5px 0px;

  /* ------------------------------------------------------------------
     2.10 Sombras
     ------------------------------------------------------------------ */
  --uf-sombra-header:      0px 0px 10px 0px rgba(0, 0, 0, .1);
  --uf-sombra-card:        0px 0px 30px 0px rgba(0, 0, 0, .1);
  --uf-sombra-card-suave:  0px 0px 30px 0px rgba(0, 0, 0, .05);
  --uf-sombra-flutuante:   0px 40px 60px 0px rgba(0, 0, 0, .05);
  --uf-sombra-flutuante-f: 0px 40px 60px 0px rgba(0, 0, 0, .1);
  --uf-sombra-botao:       0px 0px 10px 0px rgba(0, 0, 0, .5);
  --uf-sombra-leve:        0px 5px 10px 0px rgba(0, 0, 0, .17);
  /* O site não usa text-shadow em lugar nenhum. */

  /* ------------------------------------------------------------------
     2.11 Gradientes (ângulos e paradas exatos)
     ------------------------------------------------------------------ */
  --uf-grad-rodape:        radial-gradient(at center center, #002E97 0%, #27468B 100%);
  --uf-grad-hero-home:     linear-gradient(110deg, #002E97 20%, #20608F 86%);
  --uf-grad-faixa-servico: linear-gradient(180deg, #042E97 0%, #092B65 100%);
  --uf-grad-faixa-b:       linear-gradient(180deg, #002E97 0%, #092B65 100%);
  --uf-grad-faixa-c:       linear-gradient(180deg, #052E97 0%, #092B65 100%);
  --uf-grad-azul-vertical: linear-gradient(180deg, #062F95 0%, #092B65 100%);
  --uf-grad-amarelo-fade:  linear-gradient(180deg, #EAB618 0%, #00000000 100%);
  --uf-grad-azul-fade:     linear-gradient(180deg, #062F95 0%, #00000000 100%);
  --uf-grad-escuro-fade:   linear-gradient(180deg, #092B65 0%, #00000000 100%);
  --uf-grad-cinza-azul:    linear-gradient(180deg, #909095 0%, #092B65 100%);
  --uf-grad-cinza-azul-241:linear-gradient(241deg, #909095 0%, #092B65 100%);
  --uf-grad-azul-branco:   linear-gradient(180deg, #062F95 0%, #FFFFFF 100%);
  --uf-grad-navy-azul:     linear-gradient(180deg, #242656 0%, #092B65 100%);
  --uf-grad-chapado:       linear-gradient(180deg, #092B65 0%, #092B65 100%);

  /* ------------------------------------------------------------------
     2.12 Sobreposições e filtros de fundo
     ------------------------------------------------------------------ */
  --uf-overlay-blend:     multiply;  /* em 42 containers */
  --uf-overlay-op-055:    0.55;
  --uf-overlay-op-05:     0.5;
  --uf-overlay-op-091:    0.91;
  --uf-overlay-op-1:      1;
  --uf-overlay-transicao: 0.3s;
  --uf-filtro-cinza:      brightness(100%) contrast(100%) saturate(0%) blur(0px) hue-rotate(0deg);

  /* ------------------------------------------------------------------
     2.13 Movimento
     ------------------------------------------------------------------ */
  --uf-dur-rapida:    .3s;    /* color/fill .3s e `all .3s` dos botões */
  --uf-dur-media:     .4s;    /* transform de container */
  --uf-dur-lenta:     .5s;
  --uf-dur-entrada: 1.25s;    /* .animated do Elementor */
  --uf-easing-menu: cubic-bezier(.58, .3, .005, 1);
  --uf-delay-100:   100ms;
  --uf-delay-150:   150ms;
  --uf-delay-200:   200ms;
  --uf-delay-300:   300ms;    /* delay dominante (39x) */
  --uf-delay-400:   400ms;
  --uf-delay-900:   900ms;
  --uf-hover-escala: 1.1;

  /* ------------------------------------------------------------------
     2.14 Ícones
     ------------------------------------------------------------------ */
  --uf-icone-lista:               14px; /* --e-icon-list-icon-size (50x) */
  --uf-icone-lista-grande:        24px;
  --uf-icone-social-header:       18px;
  --uf-icone-social-header-mobile:14px;
  --uf-icone-social-rodape:       15px;

  /* ------------------------------------------------------------------
     2.15 Contrato com o gerador de HTML
     Estas três NÃO têm valor fixo: o gerador as escreve em style="" na
     própria instância (a foto muda a cada card, herói e seção). Ficam aqui
     declaradas para que o var() tenha sempre um padrão previsível.
     ------------------------------------------------------------------ */
  --uf-imagem-fundo:      none;
  --uf-imagem-posicao:    center center;
  --uf-overlay-opacidade: var(--uf-overlay-op-05);

  /* ------------------------------------------------------------------
     2.16 Breakpoints (valores de referência; os @media estão na seção 3)
     Elementor com hasCustomBreakpoints = true, os 6 extras habilitados.
     ------------------------------------------------------------------ */
  --uf-bp-widescreen:   2400px; /* min-width */
  --uf-bp-laptop:       1366px; /* max-width */
  --uf-bp-tablet-extra: 1200px; /* max-width */
  --uf-bp-tablet:       1024px; /* max-width */
  --uf-bp-mobile-extra:  880px; /* max-width */
  --uf-bp-mobile:        767px; /* max-width */
}


/* ===========================================================================
 * 3. BREAKPOINTS — redefinição de tokens
 * Mesma ordem e mesmos valores que o kit 207 emite. São todos max-width
 * (desktop-first), logo a ordem entre eles importa.
 * ========================================================================= */

/* 3.1 Notebook — o kit só reduz o preset Display. */
@media (max-width: 1366px) {
  :root {
    --uf-fs-display: 52px;
  }
}

/* 3.2 Tablet em paisagem */
@media (max-width: 1200px) {
  :root {
    --uf-fs-h1:      44px;
    --uf-fs-h2:      37.1733px;
    --uf-fs-h3:      31.4057px;
    --uf-fs-h4:      26.53px;
    --uf-fs-h5:      22.41px;
    --uf-fs-h6:      18.93px;
    --uf-fs-display: 52px;
  }
}

/* 3.3 Tablet em retrato — o kit NÃO redefine o Display aqui (segue 52px). */
@media (max-width: 1024px) {
  :root {
    --uf-fs-h1:      36px;
    --uf-fs-h2:      31.44px;
    --uf-fs-h3:      27.47px;
    --uf-fs-h4:      24px;
    --uf-fs-h5:      20.96px;
    --uf-fs-h6:      18.31px;
    --uf-container-max: 1024px;
  }
}

/* 3.4 Celular em paisagem */
@media (max-width: 880px) {
  :root {
    --uf-fs-h1:      28px;
    --uf-fs-h2:      25.5px;
    --uf-fs-h3:      23.23px;
    --uf-fs-h4:      21.16px;
    --uf-fs-h5:      19.28px;
    --uf-fs-h6:      17.56px;
    --uf-fs-display: 36px;
  }
}

/* 3.5 Celular em retrato — o kit só muda a largura do container e o ícone social. */
@media (max-width: 767px) {
  :root {
    --uf-container-max: 767px;
    --uf-icone-social-header: var(--uf-icone-social-header-mobile);
  }
}

/* 3.6 Tela ampla — o kit reaplica as variáveis sem alterar nenhum valor.
   Bloco mantido por paridade estrutural com o CSS original. */
@media (min-width: 2400px) {
  :root { --uf-container-max: 1280px; }
}


/* ===========================================================================
 * 4. TIPOGRAFIA DE ELEMENTO
 * Reproduz o que .elementor-kit-207 aplica hoje.
 * ========================================================================= */

body {
  color: var(--uf-azul-escuro);
  background-color: var(--uf-branco);
  font-family: var(--uf-fonte-base);
  font-size: var(--uf-fs-corpo);
  font-weight: var(--uf-peso-medio);
  line-height: var(--uf-lh-corpo);
  text-transform: var(--uf-tt-padrao);
  font-style: var(--uf-estilo-fonte);
  text-decoration: var(--uf-decoracao);
}

/* Margens de heading herdadas do reset do hello-elementor (o kit não sobrescreve). */
h1, h2, h3, h4, h5, h6 {
  color: var(--uf-azul-escuro);
  font-family: var(--uf-fonte-base);
  font-weight: var(--uf-peso-extra);
  text-transform: var(--uf-tt-padrao);
  font-style: var(--uf-estilo-fonte);
  text-decoration: var(--uf-decoracao);
  letter-spacing: var(--uf-ls-normal);
  margin-block-start: .5rem;
  margin-block-end: 1rem;
  text-wrap: balance;
}

h1 { font-size: var(--uf-fs-h1); line-height: var(--uf-lh-h1); }
h2 { font-size: var(--uf-fs-h2); line-height: var(--uf-lh-h2); }
h3 { font-size: var(--uf-fs-h3); line-height: var(--uf-lh-h3); }
h4 { font-size: var(--uf-fs-h4); line-height: var(--uf-lh-h4); }
h5 { font-size: var(--uf-fs-h5); line-height: var(--uf-lh-h5); }
h6 { font-size: var(--uf-fs-h6); line-height: var(--uf-lh-h6); }

/* Rótulo / eyebrow — preset secondary, sempre em azul royal. */
.uf-rotulo {
  display: block;
  font-family: var(--uf-fonte-base);
  font-size: var(--uf-fs-rotulo);
  font-weight: var(--uf-peso-semi);
  line-height: var(--uf-lh-rotulo);
  text-transform: var(--uf-tt-rotulo);
  color: var(--uf-azul-royal);
}

/* Display — preset ca7fe16 (reservado; nenhum widget usa hoje). */
.uf-display {
  font-family: var(--uf-fonte-base);
  font-size: var(--uf-fs-display);
  font-weight: var(--uf-peso-extra);
  line-height: var(--uf-lh-display);
  letter-spacing: var(--uf-ls-display);
}

/* Parágrafo em Inter (Home, Quem Somos e Nossos Serviços). */
.uf-paragrafo-alt {
  font-family: var(--uf-fonte-alt);
  font-size: var(--uf-fs-paragrafo-inter);
  font-weight: var(--uf-peso-regular);
}

a {
  color: var(--uf-azul-escuro);
  text-decoration: var(--uf-decoracao);
  transition: color var(--uf-dur-rapida);
}
a:hover { color: var(--uf-amarelo); }

/* Sublinhado só no corpo de texto corrido (posts e política), como no original. */
.uf-texto a { text-decoration: underline; text-underline-offset: .18em; }


/* ===========================================================================
 * 5. BOTÕES
 * Kit 207: pílula amarela com texto azul escuro; no hover inverte.
 * O texto NUNCA é branco sobre o amarelo (bug A12: 1,87:1).
 * Alvo de toque mínimo de 44px (bug M18).
 * ========================================================================= */

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.uf-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: var(--uf-alvo-toque);
  padding: 12px 24px;                 /* tamanho "sm", o padrão do site */
  background-color: var(--uf-amarelo);
  color: var(--uf-azul-escuro);
  fill: var(--uf-azul-escuro);
  font-family: var(--uf-fonte-base);
  font-size: var(--uf-fs-acento);
  font-weight: var(--uf-peso-semi);
  line-height: var(--uf-lh-acento);
  text-transform: var(--uf-tt-padrao);
  font-style: var(--uf-estilo-fonte);
  text-decoration: var(--uf-decoracao);
  text-align: center;
  border-style: none;
  border-radius: var(--uf-raio-pilula);
  cursor: pointer;
  transition:
    background-color var(--uf-dur-rapida),
    color var(--uf-dur-rapida),
    border-color var(--uf-dur-rapida),
    transform var(--uf-dur-rapida);
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.uf-botao:hover {
  background-color: var(--uf-azul-escuro);
  color: var(--uf-branco);
  fill: var(--uf-branco);
  border-style: none;
  border-radius: var(--uf-raio-pilula);
}

button:disabled,
input:disabled,
.uf-botao--desativado {
  opacity: .55;
  cursor: not-allowed;
}

/* Tamanhos do Elementor. O font-size é sempre 16px por força do kit;
   o que muda é só o padding. xs ganha min-height para virar alvo de toque. */
.uf-botao--xs { padding: 10px 20px; }
.uf-botao--sm { padding: 12px 24px; }
.uf-botao--md { padding: 15px 30px; }
.uf-botao--lg { padding: 20px 40px; }
.uf-botao--xl { padding: 25px 50px; }

/* Variantes observadas nas páginas */
.uf-botao--contornado {
  border-style: solid;
  border-width: var(--uf-borda-botao-largura);
  border-color: var(--uf-borda-botao-cor);
}
.uf-botao--fantasma:hover {
  background-color: transparent;
  border-color: var(--uf-branco);
  color: var(--uf-branco);
}
.uf-botao--texto-branco { color: var(--uf-branco); fill: var(--uf-branco); }
.uf-botao--sombra { box-shadow: var(--uf-sombra-botao); }
.uf-botao--bloco { display: flex; width: 100%; }
.uf-botao--whatsapp {
  background-color: var(--uf-verde-whatsapp);
  color: var(--uf-branco);
  fill: var(--uf-branco);
  border-style: solid;
  border-color: var(--uf-verde-whatsapp);
  border-radius: var(--uf-raio-medio);
}
.uf-botao--whatsapp:hover {
  background-color: var(--uf-azul-escuro);
  border-color: var(--uf-azul-escuro);
  color: var(--uf-branco);
  border-radius: var(--uf-raio-medio);
}
.uf-botao--crescer {
  transition-duration: var(--uf-dur-rapida);
  transition-property: transform;
}
.uf-botao--crescer:hover,
.uf-botao--crescer:active { transform: scale(var(--uf-hover-escala)); }

/* Agrupador de botões (o CTA final das páginas de curso usa dois). */
.uf-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uf-gap-20);
  justify-content: center;
  align-items: center;
}
.uf-botoes--inicio { justify-content: flex-start; }
.uf-botoes--fim    { justify-content: flex-end; }


/* ===========================================================================
 * 6. FORMULÁRIOS
 * ========================================================================= */

label,
.uf-label {
  display: inline-block;
  font-family: var(--uf-fonte-base);
  font-size: var(--uf-fs-acento);
  font-weight: var(--uf-peso-semi);
  line-height: var(--uf-lh-acento);
  text-transform: var(--uf-tt-padrao);
  margin-bottom: 6px;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.uf-campo {
  display: block;
  width: 100%;
  min-height: var(--uf-alvo-toque);
  padding: 5px 14px;
  font-family: var(--uf-fonte-base);
  font-size: var(--uf-fs-corpo);
  font-weight: var(--uf-peso-medio);
  line-height: var(--uf-lh-corpo);
  text-transform: var(--uf-tt-padrao);
  font-style: var(--uf-estilo-fonte);
  text-decoration: var(--uf-decoracao);
  color: var(--uf-azul-escuro);
  background-color: var(--uf-branco);
  border-style: solid;
  border-width: var(--uf-borda-campo-largura);
  border-color: var(--uf-borda-campo-cor);
  border-radius: var(--uf-raio-pequeno);
  transition: border-color var(--uf-dur-rapida);
}

textarea,
textarea.uf-campo { min-height: calc(var(--uf-lh-corpo) * 4); padding-block: 10px; }

select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 34px;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  /* Seta desenhada em SVG embutido: sem requisição e sem fonte de ícone. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239D9898' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
}

::placeholder { color: var(--uf-cinza-texto-a11y); opacity: 1; }

input[type="checkbox"],
input[type="radio"] { width: 1.15em; height: 1.15em; accent-color: var(--uf-azul-royal); }

/* Campo com erro — usado pelo formulario.js. Nunca só a cor: some o texto também. */
.uf-campo--erro,
[aria-invalid="true"] { border-color: #B3261E; }

fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; font-weight: var(--uf-peso-semi); }

/* Formulário da página Contato (família Poppins). */
.uf-form-contato label { font-family: var(--uf-fonte-form); font-size: var(--uf-fs-form-label); font-weight: var(--uf-peso-regular); }
.uf-form-contato .uf-campo,
.uf-form-contato input:not([type="button"]):not([type="submit"]),
.uf-form-contato textarea,
.uf-form-contato select {
  font-family: var(--uf-fonte-form);
  font-size: var(--uf-fs-form-campo);
  font-weight: var(--uf-peso-regular);
  background-color: var(--uf-branco);
  border-color: var(--uf-cinza-borda-form);
  border-radius: var(--uf-raio-campo);
}


/* ===========================================================================
 * 7. FOCO VISÍVEL  (correção de acessibilidade M14 — o site original apaga o foco)
 * Regra de partida; efeitos.css §18 reforça o mesmo contrato no fim da cascata.
 * ========================================================================= */

:focus-visible {
  outline: var(--uf-foco-largura) solid var(--uf-foco-cor);
  outline-offset: var(--uf-foco-recuo);
}

/* Sobre fundo azul escuro o amarelo perde contraste: o anel vira branco. */
.fx-hero :focus-visible,
.cabecalho :focus-visible,
.rodape :focus-visible { outline-color: var(--uf-foco-cor-clara); }

/* Campos também ganham realce de borda, não só o anel. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.uf-campo:focus-visible { border-color: var(--uf-azul-royal); }

/* Alvo de âncora (o <main id="conteudo" tabindex="-1"> do skip-link)
   não deve desenhar anel ao receber foco por programa. */
main:focus { outline: none; }


/* ===========================================================================
 * 8. LAYOUT — containers, seções e grades
 * Equivale a .e-con / .e-con-inner do Elementor, sem o vocabulário do plugin.
 * ========================================================================= */

.uf-container {
  width: 100%;
  padding-inline: var(--uf-container-padding-x);
}
.uf-container > .uf-container-inner,
.uf-container-inner {
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
  width: 100%;
}

/* Larguras de conteúdo customizadas (mesmos 7 valores do original). */
.uf-container--1382 > .uf-container-inner { max-width: min(100%, var(--uf-content-1382)); }
.uf-container--1100 > .uf-container-inner { max-width: min(100%, var(--uf-content-1100)); }
.uf-container--1000 > .uf-container-inner { max-width: min(100%, var(--uf-content-1000)); }
.uf-container--900  > .uf-container-inner { max-width: min(100%, var(--uf-content-900)); }
.uf-container--800  > .uf-container-inner { max-width: min(100%, var(--uf-content-800)); }
.uf-container--700  > .uf-container-inner { max-width: min(100%, var(--uf-content-700)); }
.uf-container--500  > .uf-container-inner { max-width: min(100%, var(--uf-content-500)); }

/* Ritmo vertical de seção: 60px e 90px são as duas medidas dominantes.
   .secao é o hospedeiro natural das ondas (fx-onda é absoluto). */
.secao {
  position: relative;
  padding-block: var(--uf-space-60);
}
.secao--90     { padding-block: var(--uf-space-90); }
.secao--60-90  { padding-block: var(--uf-space-60) var(--uf-space-90); }
.secao--0      { padding-block: var(--uf-space-0); }
.secao--sem-topo  { padding-block-start: var(--uf-space-0); }
.secao--sem-base  { padding-block-end: var(--uf-space-0); }
.secao--recorta { overflow: hidden; }

/* Camada de conteúdo acima de overlays e ondas. */
.secao__conteudo { position: relative; z-index: 2; }

/* Cabeçalho de seção (eyebrow + título + parágrafo), centralizado. */
.secao__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--uf-gap-10);
  margin-bottom: var(--uf-space-40);
}
.secao__cabecalho--inicio { align-items: flex-start; text-align: start; }
.secao__texto { max-width: 46%; }

/* Pilha vertical genérica com o gap padrão de widget do Elementor. */
.uf-pilha { display: flex; flex-direction: column; gap: var(--uf-gap-widgets); }
.uf-pilha--30 { gap: var(--uf-gap-30); }
.uf-pilha--40 { gap: var(--uf-gap-40); }

/* Linha flexível (o padrão dos containers de 2 colunas). */
.uf-linha {
  display: flex;
  flex-direction: row;
  gap: var(--uf-gap-40);
  align-items: center;
  justify-content: space-between;
}
.uf-linha--topo   { align-items: flex-start; }
.uf-linha--quebra { flex-wrap: wrap; }
.uf-linha--30 { gap: var(--uf-gap-30); }
.uf-linha--60 { gap: var(--uf-gap-60); }

/* Grades. A colapsagem 3 -> 2 -> 1 é a do widget de posts do Elementor. */
.uf-grade {
  display: grid;
  grid-template-columns: var(--uf-grid-cols-1);
  gap: var(--uf-gap-30);
}
.uf-grade--2 { grid-template-columns: var(--uf-grid-cols-2); }
.uf-grade--3 { grid-template-columns: var(--uf-grid-cols-3); }
.uf-grade--icones {
  grid-template-columns: repeat(auto-fit, minmax(0, max-content));
  column-gap: var(--uf-grid-col-gap-icones);
  row-gap: var(--uf-grid-row-gap-icones);
}

@media (max-width: 1024px) {
  .uf-grade--3 { grid-template-columns: var(--uf-grid-cols-2); }
  .uf-linha    { flex-wrap: wrap; gap: var(--uf-gap-20); }
  .secao__texto { max-width: 100%; }
}
@media (max-width: 880px) {
  .uf-grade--2,
  .uf-grade--3 { grid-template-columns: var(--uf-grid-cols-1); }
}
@media (max-width: 767px) {
  .secao { padding-block: var(--uf-space-40); }
  .secao--90 { padding-block: var(--uf-space-60); }
}


/* ===========================================================================
 * 9. UTILITÁRIOS  (uma propriedade cada; prefixo u-)
 * ========================================================================= */

/* Visível só para leitor de tela. Usado no cabeçalho, no rodapé e na paginação. */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-centro       { text-align: center; }
.u-inicio       { text-align: start; }
.u-fim          { text-align: end; }
.u-bloco        { display: block; }
.u-relativo     { position: relative; }
.u-recorta      { overflow: hidden; }
.u-largura-total{ width: 100%; }
.u-sem-margem   { margin: 0; }
.u-sem-lista    { list-style: none; margin: 0; padding: 0; }
.u-branco       { color: var(--uf-branco); }
.u-amarelo      { color: var(--uf-amarelo); }
.u-azul         { color: var(--uf-azul-royal); }
.u-fundo-claro  { background-color: var(--uf-cinza-claro); }
.u-fundo-branco { background-color: var(--uf-branco); }
.u-dessatura    { filter: var(--uf-filtro-cinza); }
.u-arredonda    { border-radius: var(--uf-raio-card); }
.u-arredonda-25 { border-radius: var(--uf-raio-grande); }

@media (max-width: 767px) { .u-oculto-ate-768 { display: none; } }
@media (min-width: 768px) { .u-oculto-de-768  { display: none; } }
@media (max-width: 1200px) { .u-oculto-ate-1201 { display: none; } }


/* ===========================================================================
 * 10. MOVIMENTO REDUZIDO E IMPRESSÃO
 * O desligamento fino de cada efeito está em efeitos.css §17; aqui fica só o
 * contrato geral, para o que não é efeito.
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Regra de impressão do hello-elementor (reset.css). */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
  }
  a { text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
  .cabecalho,
  .rodape,
  .voltar-ao-topo,
  .banner-cookies { display: none !important; }
  main { padding: 0 !important; }
}