/*!
 * componentes.css — Universo FX (site estático)
 * =============================================================================
 * CAMADA 2 de 4:  base.css -> [componentes.css] -> efeitos.css -> paginas.css
 *
 * A PELE dos componentes recorrentes. Estrutura, cor e espaçamento; o
 * movimento e os estados animados ficam em efeitos.css (classes fx-*).
 *
 * CONTRATO DE CASCATA (importante)
 * --------------------------------
 * efeitos.css é carregado DEPOIS deste arquivo. Quando um elemento acumula as
 * duas camadas — ex.: <a class="redes-sociais__link fx-social"> — e as duas
 * disputam a MESMA propriedade, quem vence é efeitos.css. Nos poucos casos em
 * que a pele precisa prevalecer (tamanho do ícone social, fundo do rodapé,
 * hover do hambúrguer, título do flip-box), este arquivo usa deliberadamente
 * DOIS seletores de classe — `.redes-sociais .redes-sociais__link` — para
 * ganhar por especificidade, nunca por !important. Cada caso está comentado
 * com a marca [PRECEDÊNCIA].
 *
 * CONTRATO DE IMAGEM
 * ------------------
 * Toda imagem que varia por instância (foto do card, overlay do herói) entra
 * pela custom property --uf-imagem-fundo, escrita em `style=""` pelo gerador:
 *     <div class="hero-pagina" style="--uf-imagem-fundo:url(../assets/img/…)">
 * Assim o CSS não precisa conhecer as 140 imagens do acervo.
 *
 * Nomes: BEM em português, sem acento e sem cedilha (plano §3.2).
 * Referências: spec/03-header-footer.md, spec/01-design-tokens.md §9 e §10,
 *              spec/06-blog.md §2.4-2.5, spec/09-plano.md §3.
 * =============================================================================
 */

/* ===========================================================================
 * 1. LINK DE PULO (skip-link) — corrige o bug M3
 * ========================================================================= */
.pular-para-conteudo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10001;
  transform: translateY(-120%);
  padding: 12px 20px;
  background-color: var(--uf-amarelo);
  color: var(--uf-azul-escuro);
  font-weight: var(--uf-peso-semi);
  border-radius: 0 0 var(--uf-raio-pequeno) 0;
  transition: transform var(--uf-dur-rapida);
}
.pular-para-conteudo:focus,
.pular-para-conteudo:focus-visible {
  transform: translateY(0);
  color: var(--uf-azul-escuro);
}


/* ===========================================================================
 * 2. CABEÇALHO
 * 3 colunas em linha (logo 12% · menu 77% · redes ~11%), fundo azul royal.
 * NÃO é sticky: rola junto com a página (03 §1.6).
 * ========================================================================= */
.cabecalho {
  position: relative;
  z-index: 100;
  background-color: var(--uf-azul-royal);
}

.cabecalho__interno {
  position: relative;          /* âncora do painel absoluto do menu mobile */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--uf-gap-0);
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
  padding: var(--uf-container-padding-default);
}

/* Coluna 1 — logotipo */
.cabecalho__marca {
  flex: 0 0 12%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cabecalho__marca-link { display: block; line-height: 0; }
.cabecalho__logo { width: 100%; height: auto; }

/* Coluna 2 — navegação */
.cabecalho__navegacao {
  flex: 0 1 77%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

/* Coluna 3 — redes sociais (só a partir de 1201px) */
.cabecalho__redes {
  flex: 0 0 10.996%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ===========================================================================
 * 3. MENU PRINCIPAL (desktop e tablet, >= 768px)
 * O ponteiro amarelo em ::before mora em efeitos.css (.fx-menu__link).
 * ========================================================================= */
.menu-principal { display: flex; justify-content: center; width: 100%; }

.menu-principal__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--uf-gap-0);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-principal__item { display: block; }

.menu-principal__link {
  position: relative;
  z-index: 0;
  display: block;
  padding: 13px 20px;
  color: var(--uf-branco);
  fill: 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-acento);
  text-decoration: none;
  white-space: nowrap;
}
/* O item em repouso, em hover e o ativo têm a MESMA cor de texto:
   só o retângulo amarelo de trás muda (03 §1.4). */
.menu-principal__link:hover,
.menu-principal__link.ativo { color: var(--uf-branco); }


/* ===========================================================================
 * 4. HAMBÚRGUER E MENU MOBILE (<= 767px)
 * ========================================================================= */
.cabecalho__hamburguer {
  display: none;                       /* efeitos.css liga em <=767px */
  align-items: center;
  justify-content: center;
  min-height: var(--uf-alvo-toque);
  min-width: var(--uf-alvo-toque);
  padding: .25em;
  margin: 0 auto;
  font-size: 22px;
  color: var(--uf-branco);
  background-color: rgba(0, 0, 0, .05);
  border: 0 solid;
  border-radius: var(--uf-raio-pequeno);
  cursor: pointer;
}
/* [PRECEDÊNCIA] base.css pinta todo button:hover de azul escuro; o hambúrguer
   do original não muda no hover. Dois seletores para vencer sem !important. */
.cabecalho .cabecalho__hamburguer:hover,
.cabecalho .cabecalho__hamburguer:focus-visible {
  background-color: rgba(0, 0, 0, .12);
  color: var(--uf-branco);
}
.cabecalho__hamburguer svg { width: 1em; height: 1em; fill: currentColor; }
.cabecalho__hamburguer-abrir  { display: block; }
.cabecalho__hamburguer-fechar { display: none; }

.menu-mobile__lista { list-style: none; margin: 0; padding: 0; }
.menu-mobile__item  { display: block; }
.menu-mobile__link {
  display: flex;
  align-items: center;
  min-height: var(--uf-alvo-toque);
  padding: 13px 20px;
  color: var(--uf-cinza-menu-mobile);
  text-decoration: none;
  border-inline-start: 8px solid transparent;
}
.menu-mobile__link:hover,
.menu-mobile__link.ativo {
  background-color: var(--uf-cinza-menu-ativo);
  color: var(--uf-branco);
}

/* Sem JavaScript o painel nunca abriria (max-height:0). Degrada para lista
   aberta em coluna. [PRECEDÊNCIA] sobre .fx-menu-mobile de efeitos.css. */
@media (max-width: 767px) {
  html:not(.js) .menu-mobile {
    position: static;
    max-height: none;
    transform: none;
    margin-top: 0;
  }
  html:not(.js) .cabecalho__hamburguer { display: none; }
}
/* Acima de 768px o painel mobile não existe, com ou sem JS. */
@media (min-width: 768px) {
  .menu-mobile { display: none; }
}

/* Cabeçalho em <= 767px: empilha, alinhado à esquerda, conteúdo de 500px. */
@media (max-width: 767px) {
  .cabecalho__interno {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: min(100%, var(--uf-content-500));
  }
  .cabecalho__marca { flex: 0 1 auto; align-self: flex-start; }
  .cabecalho__logo  { width: 160px; }
  .cabecalho__navegacao { flex: 1 1 auto; width: 100%; }
}
/* As redes sociais do cabeçalho somem de 1200px para baixo (03 §1.7). */
@media (max-width: 1200px) {
  .cabecalho__redes { display: none; }
}


/* ===========================================================================
 * 5. ÍCONES SOCIAIS  (cabeçalho, rodapé e página Contato)
 * Círculo amarelo com glifo azul escuro; no hover inverte para azul/branco.
 * ========================================================================= */
.redes-sociais {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  column-gap: var(--uf-grid-col-gap-icones);
  row-gap: var(--uf-grid-row-gap-icones);
  list-style: none;
  margin: 0;
  padding: 0;
}
.redes-sociais__item { display: block; }

/* [PRECEDÊNCIA] .fx-social fixa 25px (default do Elementor); aqui valem os
   tamanhos reais do site: 18px no cabeçalho, 15px no rodapé. */
.redes-sociais .redes-sociais__link {
  --uf-icone-social: var(--uf-icone-social-header);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--uf-icone-social) + 1em);
  height: calc(var(--uf-icone-social) + 1em);
  min-width: var(--uf-alvo-toque);
  min-height: var(--uf-alvo-toque);
  font-size: var(--uf-icone-social);
  line-height: 1;
  background-color: var(--uf-amarelo);
  border-radius: var(--uf-raio-circulo);
  color: var(--uf-azul-escuro);
  text-decoration: none;
}
.redes-sociais__link svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  transition: fill var(--uf-dur-rapida);
}
.redes-sociais .redes-sociais__link:hover {
  background-color: var(--uf-azul-royal);
  color: var(--uf-branco);
}
/* ATENÇÃO — divergência entre documentos, resolvida por fidelidade ao original:
   os 3 ícones do CABEÇALHO usam as cores de marca do Elementor (03 §1.5), não o
   círculo amarelo. Só os do RODAPÉ são amarelos com glifo azul (03 §2.2). A
   emenda 7 do plano §3.4.2 acrescenta `fx-social` aos links do cabeçalho, o que
   os pintaria de amarelo; os dois seletores abaixo prevalecem sobre .fx-social
   e devolvem as cores medidas no site. Ver retorno do agente. */
.redes-sociais--cabecalho .redes-sociais__link { color: var(--uf-branco); }
.redes-sociais--cabecalho .redes-sociais__link--facebook { background-color: var(--uf-facebook); }
.redes-sociais--cabecalho .redes-sociais__link--linkedin { background-color: var(--uf-linkedin); }
.redes-sociais--cabecalho .redes-sociais__link--youtube  { background-color: var(--uf-youtube); }
.redes-sociais--cabecalho .redes-sociais__link:hover {
  opacity: .9;                                  /* hover padrão do widget social-icons */
  color: var(--uf-branco);
}

/* Rodapé: círculo amarelo de 15px, glifo azul escuro; no hover azul royal + branco. */
.redes-sociais--rodape .redes-sociais__link { --uf-icone-social: var(--uf-icone-social-rodape); }
/* Variante da página Contato: o fundo vira azul escuro no hover. */
.redes-sociais--contato .redes-sociais__link:hover { background-color: var(--uf-azul-escuro); }


/* ===========================================================================
 * 6. RODAPÉ
 * Faixa principal: radial azul + textura dessaturada em multiply (03 §2.1).
 * Duas ondas: 60px no topo (negativa, branca) e 30px na base (azul #002E97).
 * ========================================================================= */
.rodape {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding-top: var(--uf-space-90);
  background-color: var(--uf-azul-hero);
  background-image: var(--uf-grad-rodape);
  color: var(--uf-branco);
}
/* [PRECEDÊNCIA] efeitos.css põe o radial no ::before a 55%; o original usa o
   ::before para a TEXTURA e mantém o radial como fundo do elemento. O segundo
   seletor da lista tem duas classes e prevalece sem !important. */
.rodape::before,
.rodape.fx-rodape::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("../img/2025/04/abstract-grey-tech-vector-corporate-background-min.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: var(--uf-filtro-cinza);
  opacity: var(--uf-overlay-op-055);
  mix-blend-mode: var(--uf-overlay-blend);
  pointer-events: none;
}
.rodape > * { position: relative; z-index: 2; }

/* Ondas do rodapé: o posicionamento vem de .fx-onda (efeitos.css). */
.rodape__onda { position: absolute; left: 50%; }
.rodape__onda--topo { top: -1px; }
.rodape__onda--base { bottom: -1px; }
.rodape__onda-preenchimento { display: none; } /* o SVG virou máscara em fx-onda */

/* Faixa principal — 4 colunas de 25% a partir de 768px. */
.rodape__faixa { position: relative; }
.rodape__interno {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--uf-gap-40);
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
  padding-inline: var(--uf-container-padding-x);
}
.rodape__coluna { flex: 1 1 25%; min-width: 0; }
.rodape__coluna--marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--uf-gap-20);
}
.rodape__marca-link { display: block; line-height: 0; }
.rodape__logo { width: 130px; height: auto; }
.rodape__descricao { color: var(--uf-branco); margin: 0; }

.rodape__titulo {
  color: var(--uf-amarelo);
  font-family: var(--uf-fonte-base);
  font-size: var(--uf-fs-h6);
  font-weight: var(--uf-peso-extra);
  line-height: var(--uf-lh-h6);
  margin: 0 0 var(--uf-space-20);
}

.rodape__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--uf-gap-10);
}
.rodape__lista--contato { gap: 15px; }
.rodape__lista-item { display: flex; align-items: center; gap: .6em; }
.rodape__lista-icone {
  flex: 0 0 auto;
  display: inline-flex;
  width: var(--uf-icone-lista);
  height: var(--uf-icone-lista);
  color: var(--uf-branco);
}
.rodape__lista-icone svg { width: 100%; height: 100%; fill: currentColor; }
.rodape__lista-texto {
  color: var(--uf-branco);
  font-size: var(--uf-fs-acento);
  font-weight: var(--uf-peso-semi);
  line-height: var(--uf-lh-acento);
}
.rodape__lista-link {
  display: flex;
  align-items: center;
  gap: .6em;
  min-height: var(--uf-alvo-toque);
  color: var(--uf-branco);
  text-decoration: none;
}
.rodape__lista-link:hover,
.rodape__lista-link:hover .rodape__lista-texto { color: var(--uf-amarelo); }

/* Barra de copyright — azul chapado, conteúdo de 700px. */
.rodape__copyright {
  position: relative;
  padding: var(--uf-space-10) var(--uf-space-20);
  background-color: var(--uf-azul-hero);
}
.rodape__copyright-interno {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: min(100%, var(--uf-content-700));
  margin-inline: auto;
}
.rodape__copyright-texto {
  margin: 0;
  color: var(--uf-branco);
  text-align: center;
}

@media (max-width: 1200px) {
  .rodape__interno { flex-wrap: wrap; }
  .rodape__coluna  { flex: 1 1 45%; }
}
@media (max-width: 767px) {
  .rodape__interno { flex-direction: column; gap: var(--uf-gap-30); }
  .rodape__coluna  { flex: 1 1 100%; }
  .rodape { padding-top: var(--uf-space-60); }
}


/* ===========================================================================
 * 7. BOTÃO "VOLTAR AO TOPO"
 * Círculo preto de 50px, 15px do canto. A visibilidade é do JS (.esta-visivel).
 * ========================================================================= */
.voltar-ao-topo {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  background-color: var(--uf-preto);
  color: var(--uf-branco);
  border: none;
  border-radius: 50px;
  cursor: pointer;
}
/* [PRECEDÊNCIA] impede que o button:hover amarelo/azul de base.css vaze. */
.voltar-ao-topo.voltar-ao-topo:hover,
.voltar-ao-topo.voltar-ao-topo:focus-visible {
  background-color: var(--uf-azul-royal);
  color: var(--uf-branco);
}
.voltar-ao-topo svg { width: 16px; height: 16px; fill: currentColor; }
.voltar-ao-topo--oculto { opacity: 0; visibility: hidden; }


/* ===========================================================================
 * 8. SEÇÕES COM ONDA E COM SOBREPOSIÇÃO
 * .fx-onda é absoluta: o hospedeiro precisa de position:relative e, quando a
 * onda é maior que a borda, de overflow visível.
 * ========================================================================= */
.secao--onda { position: relative; overflow: hidden; }
.secao--onda-solta { overflow: visible; }

/* Fundo em duas camadas: cor/gradiente no elemento, imagem no ::before. */
.secao--fundo {
  position: relative;
  isolation: isolate;
}
.secao--fundo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--uf-imagem-fundo, none);
  background-position: var(--uf-imagem-posicao, center center);
  background-repeat: no-repeat;
  background-size: cover;
  filter: var(--uf-filtro-cinza);
  opacity: var(--uf-overlay-opacidade, var(--uf-overlay-op-05));
  mix-blend-mode: var(--uf-overlay-blend);
  pointer-events: none;
}
.secao--fundo > * { position: relative; z-index: 2; }
.secao--fundo-colorido::before { filter: none; }


/* ===========================================================================
 * 9. SOBRETÍTULO (eyebrow)
 * Preset "secondary" do kit: 14px / 600 / caixa alta / azul royal.
 * ========================================================================= */
.sobretitulo {
  display: block;
  margin: 0 0 15px;
  font-family: var(--uf-fonte-base);
  font-size: var(--uf-fs-rotulo);
  font-weight: var(--uf-peso-semi);
  line-height: var(--uf-lh-rotulo);
  letter-spacing: var(--uf-ls-normal);
  text-transform: var(--uf-tt-rotulo);
  color: var(--uf-azul-royal);
}
.sobretitulo--claro { color: var(--uf-branco); }
.sobretitulo--amarelo { color: var(--uf-amarelo); }


/* ===========================================================================
 * 10. CARTÃO BRANCO GENÉRICO
 * ========================================================================= */
.cartao {
  background-color: var(--uf-branco);
  border-radius: var(--uf-raio-card);
  padding: var(--uf-space-30);
  transition: box-shadow var(--uf-dur-rapida);
}
.cartao--sombra { box-shadow: var(--uf-sombra-card-suave); }
.cartao--sombra:hover { box-shadow: var(--uf-sombra-card); }
.cartao--flutuante { box-shadow: var(--uf-sombra-flutuante); }
.cartao__titulo { margin-top: 0; }


/* ===========================================================================
 * 11. FLIP-BOX  (94 instâncias fade + 12 flip-up — o card dominante do site)
 * A mecânica 3D e o fade vivem em efeitos.css (.fx-flipbox*). Aqui ficam:
 *   · o card inteiro virar link (corrige o bug A1: 74 botões sem href);
 *   · os tamanhos de texto reais do site;
 *   · o alvo de toque do "botão" (que é um <span>, pois já estamos num <a>).
 * ========================================================================= */
.cartao-flip {
  display: block;
  color: inherit;
  text-decoration: none;
  outline-offset: 4px;
}
.cartao-flip:hover { color: inherit; }

/* A foto do card entra por --uf-imagem-fundo (frente e verso usam a mesma). */
.cartao-flip .fx-flipbox__frente,
.cartao-flip .fx-flipbox__verso {
  background-image: var(--uf-imagem-fundo, none);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* [PRECEDÊNCIA] tamanhos reais: 24px na frente, preset H4 no verso. */
.cartao-flip .fx-flipbox__titulo {
  font-size: var(--uf-fs-flipbox-frente);
  font-weight: var(--uf-peso-semi);
  line-height: var(--uf-lh-compacta);
  color: var(--uf-branco);
}
.cartao-flip .fx-flipbox__verso .fx-flipbox__titulo {
  font-size: var(--uf-fs-h4);
  font-weight: var(--uf-peso-extra);
  line-height: var(--uf-lh-h4);
  margin-bottom: var(--uf-space-25);
}
.cartao-flip .fx-flipbox__desc {
  font-size: var(--uf-fs-flipbox-desc);
  line-height: var(--uf-lh-icon-list);
  color: var(--uf-branco);
}
.cartao-flip .fx-flipbox__botao {
  min-height: var(--uf-alvo-toque);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--uf-fs-acento);
  font-weight: var(--uf-peso-semi);
  line-height: var(--uf-lh-acento);
}
/* Variante do catálogo (/todos-os-cursos/): amarelo levemente distinto. */
.cartao-flip--catalogo .fx-flipbox__botao {
  background-color: var(--uf-amarelo-saiba);
  border-color: var(--uf-amarelo-saiba);
  color: var(--uf-navy-overlay);
}

/* Grade de cards de catálogo: 4 -> 3 -> 2 -> 1 colunas. */
.grade-flip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--uf-gap-30);
}
@media (max-width: 1200px) { .grade-flip { grid-template-columns: var(--uf-grid-cols-3); } }
@media (max-width: 1024px) { .grade-flip { grid-template-columns: var(--uf-grid-cols-2); } }
@media (max-width: 767px)  { .grade-flip { grid-template-columns: var(--uf-grid-cols-1); } }


/* ===========================================================================
 * 12. CARTÃO DE POST (grade do blog e "veja também")
 * Miniatura 0.66 de proporção, título 23px azul royal, resumo, "Leia Mais »".
 * ========================================================================= */
.cartao-post {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cartao-post__link-miniatura {
  display: block;
  width: 100%;
  margin-bottom: var(--uf-space-25);
}
.cartao-post__miniatura {
  position: relative;
  width: 100%;
  padding-bottom: calc(.66 * 100%);
  border-radius: var(--uf-raio-card);
  overflow: hidden;
  background-color: var(--uf-cinza-claro);
}
.cartao-post__miniatura img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cartao-post__titulo {
  margin: 0 0 var(--uf-space-25);
  color: var(--uf-azul-royal);
  font-size: var(--uf-fs-h5);
  font-weight: var(--uf-peso-extra);
  line-height: var(--uf-lh-h5);
}
.cartao-post__titulo a { color: inherit; text-decoration: none; }
.cartao-post__titulo a:hover { color: var(--uf-amarelo); }
.cartao-post__resumo { margin: 0 0 var(--uf-space-20); }
.cartao-post__leia-mais {
  align-self: flex-start;
  min-height: var(--uf-alvo-toque);
  display: inline-flex;
  align-items: center;
  font-size: var(--uf-fs-acento);
  font-weight: var(--uf-peso-semi);
  line-height: var(--uf-lh-acento);
  text-transform: capitalize;
  text-decoration: none;
}
@media (max-width: 767px) {
  .cartao-post__miniatura { padding-bottom: calc(.5 * 100%); }
}


/* ===========================================================================
 * 13. PAGINAÇÃO NUMÉRICA (só /blog/)
 * ========================================================================= */
.paginacao {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--uf-gap-10);
  margin-top: var(--uf-space-40);
  text-align: center;
}
.paginacao__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--uf-alvo-toque);
  min-height: var(--uf-alvo-toque);
  padding-inline: 5px;
  color: var(--uf-azul-escuro);
  text-decoration: none;
  border-radius: var(--uf-raio-pequeno);
}
.paginacao__item:hover { color: var(--uf-amarelo); }
.paginacao__item--atual {
  color: var(--uf-branco);
  background-color: var(--uf-azul-royal);
  font-weight: var(--uf-peso-semi);
}


/* ===========================================================================
 * 14. LISTA DE ÍCONES (icon-list — rodapé, contato, "o que está incluso")
 * Ícone de 14px, espaçamento vertical de 15px, texto no preset accent.
 * ========================================================================= */
.lista-icones {
  list-style: none;
  margin: 0 0 var(--uf-gap-widgets);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.lista-icones--10 { gap: var(--uf-gap-10); }
.lista-icones__item {
  display: flex;
  align-items: center;
  gap: .6em;
}
.lista-icones__icone {
  flex: 0 0 auto;
  display: inline-flex;
  width: var(--uf-icone-lista);
  height: var(--uf-icone-lista);
  color: var(--uf-amarelo);
}
.lista-icones__icone svg { width: 100%; height: 100%; fill: currentColor; }
.lista-icones__texto {
  font-size: var(--uf-fs-acento);
  font-weight: var(--uf-peso-semi);
  line-height: var(--uf-lh-acento);
  color: var(--uf-azul-escuro);
}
.lista-icones--clara .lista-icones__icone { color: var(--uf-branco); }
.lista-icones--clara .lista-icones__texto { color: var(--uf-branco); }
.lista-icones__link {
  display: flex;
  align-items: center;
  gap: .6em;
  min-height: var(--uf-alvo-toque);
  text-decoration: none;
  color: inherit;
}


/* ===========================================================================
 * 15. CAIXA-ÍCONE (icon-box) e CAIXA-INFO (image-box)
 * ========================================================================= */
.caixa-icone { text-align: start; }
.caixa-icone__titulo { margin: 0 0 15px; }
.caixa-icone__descricao { margin: 0; }
.caixa-icone--servico .caixa-icone__titulo { font-size: var(--uf-fs-iconbox-titulo); line-height: var(--uf-lh-compacta); }

/* "Quer mais informações?" — 76 das 77 páginas de curso. Sem imagem e sem link. */
.caixa-info {
  padding: var(--uf-space-20) var(--uf-space-30) var(--uf-space-30);
  background-color: var(--uf-branco);
  border-radius: var(--uf-raio-card);
  box-shadow: var(--uf-sombra-card);
  text-align: start;
}
.caixa-info__titulo {
  margin: 0 0 var(--uf-space-10);
  font-size: var(--uf-fs-h6);
  font-weight: var(--uf-peso-extra);
  line-height: var(--uf-lh-h6);
  /* Cinza acessível no lugar do #909095 original (3,18:1) — plano §7 P2-3. */
  color: var(--uf-cinza-texto-a11y);
}
.caixa-info__descricao { margin: 0; }


/* ===========================================================================
 * 16. FORMULÁRIOS  (Contato e Todos os Cursos)
 * ========================================================================= */
.formulario {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--uf-gap-10) / -2);
  margin-bottom: calc(var(--uf-gap-10) * -1);
}
.formulario__grupo {
  flex: 1 1 100%;
  padding-inline: calc(var(--uf-gap-10) / 2);
  margin-bottom: var(--uf-gap-10);
}
.formulario__grupo--metade { flex: 1 1 50%; max-width: 50%; }
.formulario__acoes {
  flex: 1 1 100%;
  padding-inline: calc(var(--uf-gap-10) / 2);
  margin-top: var(--uf-gap-10);
}
/* Armadilha antisspam: fora da tela, sem foco e sem leitura. */
.formulario__isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Área de resposta do envio (aria-live). Nunca comunica só pela cor. */
.formulario__mensagem {
  flex: 1 1 100%;
  margin-top: var(--uf-gap-10);
  padding: 12px 16px;
  border-radius: var(--uf-raio-campo);
  font-weight: var(--uf-peso-semi);
}
.formulario__mensagem:empty { display: none; }
.formulario__mensagem--ok  { background-color: #E8F5EA; color: #10651F; border: 1px solid #10651F; }
.formulario__mensagem--erro{ background-color: #FDECEA; color: #8C1D18; border: 1px solid #8C1D18; }

@media (max-width: 767px) {
  .formulario__grupo--metade { flex: 1 1 100%; max-width: 100%; }
}


/* ===========================================================================
 * 17. TRILHA DE NAVEGAÇÃO (breadcrumb)
 * O site original NÃO exibe trilha em página nenhuma (05 §3, 06 §3.4); ela
 * existe aqui para o BreadcrumbList do JSON-LD e para uso futuro. Só aparece
 * se o gerador emitir a marcação.
 * ========================================================================= */
.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4em;
  list-style: none;
  margin: 0 0 var(--uf-space-20);
  padding: 0;
  font-size: var(--uf-fs-rotulo);
}
.trilha__item { display: inline-flex; align-items: center; gap: .4em; }
.trilha__item a { text-decoration: none; }
.trilha__separador { color: var(--uf-cinza-texto-a11y); }
.trilha__item[aria-current="page"] { color: var(--uf-cinza-texto-a11y); }


/* ===========================================================================
 * 18. BANNER DE COOKIES
 * Desligado por padrão (o original usa o SaaS goadopt.io — plano §8.6).
 * A entrada/saída animada está em efeitos.css (.fx-cookies).
 * ========================================================================= */
.banner-cookies {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--uf-content-1100);
  margin-inline: auto;
  padding: 18px 22px;
  background-color: var(--uf-branco);
  color: var(--uf-azul-escuro);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}
.banner-cookies__texto { margin: 0; font-size: var(--uf-fs-rotulo); line-height: 1.6; }
.banner-cookies__acoes { display: flex; flex-wrap: wrap; gap: var(--uf-gap-10); }


/* ===========================================================================
 * 19. MAPA (fachada clicável — evita carregar o Google Maps de saída, M19)
 * ========================================================================= */
.mapa {
  position: relative;
  width: 100%;
  height: 490px;
  overflow: hidden;
  background-color: var(--uf-cinza-claro);
  filter: saturate(0);
}
.mapa iframe { width: 100%; height: 100%; border: 0; }
.mapa__fachada {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--uf-gap-10);
  width: 100%;
  background-color: var(--uf-cinza-claro);
  background-position: center center;
  background-size: cover;
  border: 0;
  cursor: pointer;
}
.mapa.esta-carregado .mapa__fachada { display: none; }


/* ===========================================================================
 * 20. CARTÃO DE EQUIPE (2 na Home: Universo FX e Life Laboral)
 * O overlay de hover com as redes sociais está em efeitos.css (.fx-equipe).
 * ========================================================================= */
.cartao-equipe {
  position: relative;
  overflow: hidden;
  border-radius: var(--uf-raio-card);
  background-color: var(--uf-branco);
  padding: var(--uf-space-2em);
  text-align: center;
}
.cartao-equipe__imagem { margin-inline: auto; }
.cartao-equipe__titulo { margin: var(--uf-space-20) 0 0; font-size: var(--uf-fs-h5); }