/*!
 * paginas.css — Universo FX (site estático)
 * =============================================================================
 * CAMADA 4 de 4:  base.css -> componentes.css -> efeitos.css -> [paginas.css]
 *
 * Última camada da cascata: só entra aqui o que pertence a UMA página ou a UM
 * dos 9 templates e não se repete em lugar nenhum. Por vir por último, este
 * arquivo consegue ajustar qualquer camada anterior sem !important — mas só
 * deve fazê-lo quando o desvio for mesmo específico da página.
 *
 * Os 9 templates: home · institucional · servico · curso · listagem-blog ·
 * post · contato · politica · todos-os-cursos.
 *
 * CONTRATO DE IMAGEM (igual ao de componentes.css)
 *   A foto que varia por página entra por --uf-imagem-fundo em style="".
 *   A posição, quando não for `center center`, por --uf-imagem-posicao.
 *
 * Referências: spec/04-home.md, spec/05-cursos.md, spec/06-blog.md,
 *              spec/07-institucionais.md, spec/09-plano.md §2.
 * =============================================================================
 */

/* ===========================================================================
 * 0. ESQUELETO COMUM ÀS 103 PÁGINAS
 * ========================================================================= */
.pagina { display: flex; flex-direction: column; min-height: 100vh; }
.pagina > main { flex: 1 0 auto; }
.pagina > .rodape { flex-shrink: 0; }


/* ===========================================================================
 * 1. HERÓI "PAGE TITLE" — 10 das 11 institucionais + as 12 páginas de post
 * Gradiente azul + foto dessaturada em multiply a 50% + onda de 90px na base.
 * (07 §0.3 · 06 §2.2 e §3.2)
 * ========================================================================= */
.hero-pagina {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--uf-min-h-500);
  padding: 0 var(--uf-container-padding-x);
  background-image: var(--uf-grad-faixa-servico);   /* #042E97 -> #092B65 */
  color: var(--uf-branco);
  overflow: hidden;
}
.hero-pagina::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);      /* foto em preto e branco */
  opacity: var(--uf-overlay-op-05);
  mix-blend-mode: var(--uf-overlay-blend);
  pointer-events: none;
}
.hero-pagina__interno {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin: var(--uf-space-180) 0 var(--uf-space-120);
  text-align: center;
}
.hero-pagina__titulo {
  margin: 0;
  color: var(--uf-branco);
}
.hero-pagina__subtitulo {
  margin: var(--uf-space-20) 0 0;
  color: var(--uf-branco);
}

/* Variantes de gradiente realmente usadas no site. */
.hero-pagina--b       { background-image: var(--uf-grad-faixa-b); }       /* #002E97 -> #092B65 */
.hero-pagina--c       { background-image: var(--uf-grad-faixa-c); }       /* #052E97 -> #092B65 */
.hero-pagina--blog    { background-image: var(--uf-grad-azul-vertical); } /* #062F95 -> #092B65 */
.hero-pagina--post    { background-image: var(--uf-grad-chapado); }       /* #092B65 chapado    */
.hero-pagina--curso   { background-image: var(--uf-grad-cinza-azul); }    /* #909095 -> #092B65 */

@media (max-width: 1024px) {
  .hero-pagina__interno { margin: var(--uf-space-120) 0 var(--uf-space-80); }
}
@media (max-width: 767px) {
  .hero-pagina { min-height: var(--uf-min-h-350); }
  .hero-pagina__interno { margin: var(--uf-space-80) 0 var(--uf-space-60); }
}


/* ===========================================================================
 * 2. HOME
 * ========================================================================= */

/* 2.1 Herói com slideshow (a estrutura e o Ken Burns estão em efeitos.css). */
.hero-home__coluna {
  flex: 0 1 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--uf-gap-20);
  margin: var(--uf-space-160) 0;
  color: var(--uf-branco);
}
.hero-home__coluna h1,
.hero-home__titulo { color: var(--uf-branco); }
/* A coluna B é vazia de propósito: abre o lado direito para o slideshow. */
.hero-home__vazio { flex: 0 1 50%; }

@media (max-width: 1366px) { .hero-home__coluna { align-items: stretch; } }
@media (max-width: 1200px) {
  .hero-home__coluna { flex-basis: 55%; }
  .hero-home__vazio  { flex-basis: 45%; }
}
@media (max-width: 1024px) {
  .hero-home__coluna { flex-basis: 100%; margin: var(--uf-space-160) 0 0; }
  .hero-home__vazio  { flex-basis: 100%; margin: var(--uf-space-30) 0 var(--uf-space-90); }
}
@media (max-width: 767px) {
  .hero-home__coluna { padding: var(--uf-space-20); margin: var(--uf-space-40) 0 0; }
  .hero-home__vazio  { display: none; }
}

/* 2.2 Grupo empresarial — fundo Ghost White, onda de 30px no topo. */
.grupo-empresarial {
  position: relative;
  background-color: var(--uf-cinza-claro);
  padding: var(--uf-space-60) var(--uf-container-padding-x);
}
.grupo-empresarial__interno {
  display: flex;
  flex-direction: column;
  gap: var(--uf-gap-30);
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
}
.grupo-empresarial__cabecalho {
  max-width: min(100%, var(--uf-content-1100));
  margin-inline: auto;
  text-align: center;
}
.grupo-empresarial__cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--uf-gap-10);
}
.grupo-empresarial__cards > * { flex: 0 1 33%; }

@media (max-width: 1024px) {
  .grupo-empresarial__cards { justify-content: space-between; gap: var(--uf-gap-30); }
  .grupo-empresarial__cards > * { flex: 0 1 47.7%; }
}
@media (max-width: 767px) {
  .grupo-empresarial__cards > * { flex: 1 1 100%; }
}

/* 2.3 Sobre a Universo FX — container de 1382px, 2 colunas. */
.sobre-fx {
  position: relative;
  padding: var(--uf-space-30) var(--uf-container-padding-x);
}
.sobre-fx__interno {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--uf-gap-40);
  width: 100%;
  max-width: min(100%, var(--uf-content-1382));
  margin-inline: auto;
}
.sobre-fx__texto  { flex: 1 1 50%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.sobre-fx__figura { flex: 1 1 50%; position: relative; z-index: 5; display: flex; justify-content: center; }
.sobre-fx__figura img { border-radius: var(--uf-raio-5pct); }

@media (max-width: 1024px) {
  .sobre-fx__interno { flex-wrap: wrap; gap: var(--uf-gap-20); }
  .sobre-fx__texto,
  .sobre-fx__figura { flex: 1 1 100%; }
}
@media (max-width: 767px) { .sobre-fx__texto { padding: var(--uf-space-20); } }

/* 2.4 Faixa-frase institucional — ondas espelhadas em cima e embaixo. */
.faixa-frase {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--uf-min-h-350);
  padding-inline: var(--uf-container-padding-x);
  background-image: var(--uf-grad-faixa-b);
  color: var(--uf-branco);
  z-index: 5;
}
.faixa-frase::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: center center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: var(--uf-filtro-cinza);
  opacity: var(--uf-overlay-op-1);
  mix-blend-mode: var(--uf-overlay-blend);
  pointer-events: none;
}
.faixa-frase__interno {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--uf-gap-40);
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
}
.faixa-frase__texto {
  margin: 0;
  color: var(--uf-branco);
  font-size: var(--uf-fs-titulo-faixa);
  font-weight: var(--uf-peso-extra);
  line-height: var(--uf-lh-h3);
  text-align: center;
}
@media (max-width: 1200px) { .faixa-frase__interno { margin-block: var(--uf-space-60); } }
@media (max-width: 1024px) { .faixa-frase { min-height: var(--uf-min-h-450); } }
@media (max-width: 767px) {
  .faixa-frase__interno { gap: var(--uf-gap-60); padding: var(--uf-space-20); }
  .faixa-frase__texto { font-size: var(--uf-fs-titulo-faixa-sm); }
}

/* 2.5 Nossos Serviços — grade 3x2 de flip-box com giro para cima. */
.servicos-home {
  padding: var(--uf-space-7em) 0;
}
.servicos-home__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
  padding-inline: var(--uf-container-padding-x);
}
.servicos-home__texto { max-width: 46%; text-align: center; }
.servicos-home__grade {
  display: grid;
  grid-template-columns: var(--uf-grid-cols-3);
  gap: var(--uf-gap-20);
  width: 100%;
  margin-top: var(--uf-space-40);
}
@media (max-width: 1024px) { .servicos-home__grade { grid-template-columns: var(--uf-grid-cols-2); } }
@media (max-width: 767px) {
  .servicos-home { padding: var(--uf-space-60) 0; }
  .servicos-home__texto { max-width: 100%; padding: var(--uf-space-20); }
  .servicos-home__grade { grid-template-columns: var(--uf-grid-cols-1); }
}

/* 2.6 Conheça a Universo FX + vídeo. */
.video-home {
  position: relative;
  isolation: isolate;
  padding: var(--uf-space-60) var(--uf-container-padding-x) var(--uf-space-90);
  background-image: var(--uf-grad-faixa-b);
}
.video-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("../img/2025/04/colorful-wavy-gradient-backgrounds-min.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: var(--uf-filtro-cinza);
  opacity: var(--uf-overlay-op-091);
  mix-blend-mode: var(--uf-overlay-blend);
  pointer-events: none;
}
.video-home__interno {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--uf-grid-cols-2);
  gap: var(--uf-gap-30);
  align-items: stretch;
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
}
.video-home__cartao {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: var(--uf-space-60) var(--uf-space-40) var(--uf-space-40);
  background-color: var(--uf-branco);
  border-radius: var(--uf-raio-card);
  box-shadow: var(--uf-sombra-card-suave);
  transition: box-shadow var(--uf-dur-rapida);
}
.video-home__cartao:hover { box-shadow: var(--uf-sombra-card); }
.video-home__player { align-self: flex-end; width: 100%; }
@media (max-width: 767px) {
  .video-home__interno { grid-template-columns: var(--uf-grid-cols-1); }
  .video-home__cartao  { padding: var(--uf-space-30); }
}


/* ===========================================================================
 * 3. PÁGINAS DE SERVIÇO (6 + analise-de-riscos)
 * Bloco de 2 colunas: kicker + h2 + parágrafo + botão | imagem decorada.
 * (07 §0.4)
 * ========================================================================= */
.bloco-servico {
  position: relative;
  padding: 0 var(--uf-container-padding-x) var(--uf-space-30);
}
.bloco-servico__interno {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--uf-gap-40);
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
}
.bloco-servico__texto {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bloco-servico__texto h2 { color: var(--uf-azul-royal); margin-top: 0; }
.bloco-servico__figura {
  flex: 1 1 50%;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(.9);
}
@media (max-width: 1024px) {
  .bloco-servico__interno { flex-wrap: wrap; }
  .bloco-servico__texto,
  .bloco-servico__figura { flex: 1 1 100%; }
  .bloco-servico__figura { transform: none; }
}


/* ===========================================================================
 * 4. PÁGINAS DE CURSO (76)
 * 4 containers: herói · apresentação · detalhes (2 colunas) · CTA.
 * (05-cursos.md §3 a §6)
 * ========================================================================= */

/* 4.1 Herói do curso: título alinhado à esquerda, padding de 80px. */
.hero-curso { padding: var(--uf-space-80) var(--uf-container-padding-x); }
.hero-curso .hero-pagina__interno {
  align-items: center;
  margin: var(--uf-space-120) 0 var(--uf-space-80);
}
.hero-curso .hero-pagina__titulo { text-align: start; width: 100%; }

/* 4.2 Apresentação: imagem do curso + card escuro. */
.curso-apresentacao { padding: var(--uf-space-60) var(--uf-container-padding-x); }
.curso-apresentacao__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;
}
.curso-apresentacao__figura { flex: 0 1 auto; }
.curso-apresentacao__figura img { border-radius: var(--uf-raio-grande); }

.curso-cartao {
  position: relative;
  isolation: isolate;
  flex: 1 1 50%;
  padding: var(--uf-space-60) var(--uf-space-40);
  border-radius: var(--uf-raio-card);
  background-image: var(--uf-grad-cinza-azul-241);
  color: var(--uf-branco);
  overflow: hidden;
}
.curso-cartao::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: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: var(--uf-overlay-op-1);
  mix-blend-mode: var(--uf-overlay-blend);
  pointer-events: none;
}
.curso-cartao > * { position: relative; z-index: 2; }
.curso-cartao h2,
.curso-cartao h3,
.curso-cartao p,
.curso-cartao li { color: var(--uf-branco); }

@media (max-width: 1024px) {
  .curso-apresentacao__interno { flex-wrap: wrap; justify-content: center; align-items: center; }
  .curso-apresentacao__figura,
  .curso-cartao { flex: 1 1 100%; }
}
@media (max-width: 767px) {
  .curso-apresentacao { padding-block: var(--uf-space-40); }
  .curso-cartao { padding: var(--uf-space-60) var(--uf-space-20); }
}

/* 4.3 Detalhes: coluna estreita (25%) + coluna larga (70%). */
.curso-detalhes { padding: var(--uf-space-80) var(--uf-container-padding-x); }
.curso-detalhes__interno {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;      /* exigido pelo position:sticky da lateral */
  gap: var(--uf-gap-40);
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
}
.curso-detalhes__lateral {
  flex: 0 0 25%;
  padding: var(--uf-space-10) var(--uf-space-10) var(--uf-space-90);
}
.curso-detalhes__principal { flex: 1 1 70%; min-width: 0; }
.curso-detalhes__principal h2,
.curso-detalhes__principal h3 { margin-top: 0; }

@media (max-width: 1024px) {
  .curso-detalhes__interno { flex-wrap: wrap; }
  .curso-detalhes__lateral,
  .curso-detalhes__principal { flex: 1 1 100%; }
  .curso-detalhes__lateral { padding-bottom: var(--uf-space-40); }
}
@media (max-width: 767px) {
  .curso-detalhes { padding: 0 var(--uf-container-padding-x) var(--uf-space-60); }
}

/* 4.4 CTA final: dois botões centralizados. */
.curso-cta {
  padding: var(--uf-space-40) var(--uf-container-padding-x) var(--uf-space-80);
}
.curso-cta__interno {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--uf-gap-20);
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
}


/* ===========================================================================
 * 5. LISTAGEM DO BLOG  (/blog/ e /blog/page/2/)
 * Grade 3 / 2 / 1 colunas, com os gaps reais do widget de arquivo.
 * ========================================================================= */
.blog-listagem { padding: var(--uf-space-60) var(--uf-container-padding-x); }
.blog-listagem__interno {
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
}
.blog-listagem__grade {
  display: grid;
  grid-template-columns: var(--uf-grid-cols-3);
  column-gap: 26px;
  row-gap: var(--uf-gap-40);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1366px) { .blog-listagem__grade { column-gap: 25px; row-gap: 18px; } }
@media (max-width: 1024px) { .blog-listagem__grade { grid-template-columns: var(--uf-grid-cols-2); } }
@media (max-width: 880px)  { .blog-listagem__grade { grid-template-columns: var(--uf-grid-cols-1); } }


/* ===========================================================================
 * 6. POST INDIVIDUAL (12 páginas)
 * Corpo Gutenberg num container de 1000px. Sem metadados, sem sidebar,
 * sem botões de compartilhamento (é assim no original).
 * ========================================================================= */
.post { position: relative; z-index: 5; padding: 0 var(--uf-container-padding-x) var(--uf-space-60); }
.post__interno {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--uf-gap-30);
  width: 100%;
  max-width: min(100%, var(--uf-content-1000));
  margin: var(--uf-space-80) auto 0;
}
.post__capa { width: 100%; }
.post__capa img { width: 100%; height: auto; border-radius: var(--uf-raio-card); }

/* Corpo do artigo — os blocos que realmente existem nos 12 posts. */
.post__corpo { width: 100%; }
.post__corpo > :first-child { margin-top: 0; }
.post__corpo p { margin: 0 0 1.2em; }
.post__corpo h2,
.post__corpo h3,
.post__corpo h4 { margin-block: 1.6em .6em; }
.post__corpo ul,
.post__corpo ol { margin: 0 0 1.2em; padding-inline-start: 1.5em; }
.post__corpo li { margin-bottom: .4em; }
.post__corpo strong { font-weight: var(--uf-peso-bold); }
.post__corpo a { color: var(--uf-azul-royal); text-decoration: underline; text-underline-offset: .18em; }
.post__corpo a:hover { color: var(--uf-amarelo); }
/* Prontos para quando o cliente publicar blocos que hoje não existem. */
.post__corpo img,
.post__corpo figure { max-width: 100%; height: auto; border-radius: var(--uf-raio-card); }
.post__corpo figcaption { font-size: var(--uf-fs-rotulo); color: var(--uf-cinza-texto-a11y); margin-top: .5em; }
.post__corpo blockquote {
  margin: 1.5em 0;
  padding: .2em 0 .2em 1.2em;
  border-inline-start: 4px solid var(--uf-amarelo);
  color: var(--uf-cinza-texto);
}
.post__corpo table { margin-bottom: 1.2em; }

/* "Veja também" — 3 posts estáticos, sem paginação (plano §2.6). */
.post__relacionados { width: 100%; margin-top: var(--uf-space-60); }
.post__relacionados-grade {
  display: grid;
  grid-template-columns: var(--uf-grid-cols-3);
  gap: var(--uf-gap-30);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1024px) {
  .post { padding-inline: var(--uf-space-30); }
  .post__relacionados-grade { grid-template-columns: var(--uf-grid-cols-2); }
}
@media (max-width: 767px) {
  .post { padding-inline: var(--uf-container-padding-x); padding-top: var(--uf-space-20); }
  .post__interno { margin-top: var(--uf-space-40); }
  .post__relacionados-grade { grid-template-columns: var(--uf-grid-cols-1); }
}


/* ===========================================================================
 * 7. CONTATO
 * Única página em Poppins; única com coluna sticky; único botão verde.
 * ========================================================================= */
.contato { padding: var(--uf-space-60) var(--uf-container-padding-x); }
.contato__interno {
  display: flex;
  flex-direction: row;
  align-items: flex-start;      /* necessário para o sticky da coluna direita */
  gap: var(--uf-gap-40);
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
}
.contato__coluna { flex: 1 1 50%; min-width: 0; }
.contato__coluna--formulario { position: sticky; top: 10px; }
.contato__titulo { margin-top: 0; }
.contato__subtitulo {
  text-align: center;
  color: var(--uf-azul-suave);
  font-family: var(--uf-fonte-form);
}
.contato .lista-icones__texto { font-family: var(--uf-fonte-form); font-size: var(--uf-fs-contato-lista); }

@media (max-width: 767px) {
  .contato__interno { flex-wrap: wrap; }
  .contato__coluna { flex: 1 1 100%; }
  /* Em telas pequenas o sticky atrapalha mais do que ajuda. */
  .contato__coluna--formulario { position: static; }
}


/* ===========================================================================
 * 8. POLÍTICA DE PRIVACIDADE
 * Única página sem herói (template `default` do WordPress). Um único <h1>.
 * ========================================================================= */
.politica {
  margin: var(--uf-space-80) 0;
  padding-inline: var(--uf-container-padding-x);
}
.politica__interno {
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
  color: var(--uf-cinza-texto);
}
.politica__titulo { text-align: center; color: var(--uf-azul-escuro); }
.politica__interno h2 { margin-block: 1.8em .6em; color: var(--uf-azul-escuro); }
.politica__interno p  { margin: 0 0 1.2em; }
.politica__interno ul,
.politica__interno ol { margin: 0 0 1.2em; padding-inline-start: 1.5em; }
.politica__interno a  { color: var(--uf-azul-royal); text-decoration: underline; text-underline-offset: .18em; }


/* ===========================================================================
 * 9. TODOS OS CURSOS  (a maior página do site: 14 categorias, 78 cards)
 * Seções alternam fundo branco / Ghost White.
 * ========================================================================= */
.catalogo { padding: var(--uf-space-60) var(--uf-container-padding-x); }
.catalogo--alternada { background-color: var(--uf-cinza-claro); }
.catalogo__interno {
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
}
.catalogo__titulo {
  margin: 0 0 var(--uf-space-40);
  color: var(--uf-azul-escuro);
  text-align: center;
}

/* CTA "Capacite-se…" entre as categorias: ondas largas e espelhadas. */
.catalogo-cta {
  position: relative;
  isolation: isolate;
  padding: var(--uf-space-90) var(--uf-container-padding-x);
  background-color: var(--uf-navy-overlay);
  color: var(--uf-branco);
  overflow: hidden;
}
.catalogo-cta::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: center 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;
}
.catalogo-cta__interno {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--uf-gap-40);
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
}
.catalogo-cta__texto { flex: 1 1 60%; }
.catalogo-cta__texto h2,
.catalogo-cta__texto p { color: var(--uf-branco); }
.catalogo-cta__acao { flex: 0 1 auto; margin-inline-start: auto; }

/* Formulário de fim de página ("Quer saber mais?"). */
.catalogo-formulario { padding: var(--uf-space-60) var(--uf-container-padding-x) var(--uf-space-90); }
.catalogo-formulario__interno {
  width: 100%;
  max-width: min(100%, var(--uf-content-800));
  margin-inline: auto;
  text-align: center;
}
.catalogo-formulario .formulario { text-align: start; }

@media (max-width: 767px) {
  .catalogo-cta__texto,
  .catalogo-cta__acao { flex: 1 1 100%; margin-inline-start: 0; }
}


/* ===========================================================================
 * 10. INSTITUCIONAIS (Quem Somos e Nossos Serviços)
 * O que não é comum aos demais templates.
 * ========================================================================= */
.institucional { padding: var(--uf-space-60) var(--uf-container-padding-x); }
.institucional__interno {
  width: 100%;
  max-width: min(100%, var(--uf-container-max));
  margin-inline: auto;
}
/* "No que acreditamos": 3 cards Missão / Visão / Valores. */
.crencas {
  display: grid;
  grid-template-columns: var(--uf-grid-cols-3);
  gap: var(--uf-gap-30);
}
@media (max-width: 880px) { .crencas { grid-template-columns: var(--uf-grid-cols-1); } }

/* O texto das 3 caixas é o ÚNICO Poppins fora de /contato/ (01 §3.1 e §3.2:
   "Poppins 14px/1.5em, 500, #FFFFFF"). É o que faz a fonte ser baixada nesta
   página — e só nesta, porque nenhuma outra regra do site pede a família. */
.crencas .uf-texto {
  font-family: var(--uf-fonte-form);
  font-size: var(--uf-fs-form-campo);
  font-weight: var(--uf-peso-medio);
  line-height: var(--uf-lh-compacta);
}

/* Carrossel de clientes — único do site (Quem Somos). */
.clientes__logo { max-height: 90px; width: auto; margin-inline: auto; filter: var(--uf-filtro-cinza); }
/* [PRECEDÊNCIA] efeitos.css impõe `width:100%` a toda imagem do trilho
   (`.fx-carrossel__slide img`, especificidade 0-1-1). O logo precisa manter a
   proporção sob o teto de 90px, então ganha por dois seletores de classe. */
.fx-carrossel__slide .clientes__logo { width: auto; }

/* ==========================================================================
   CORREÇÕES VISUAIS — conferidas lado a lado com o WordPress original
   Este arquivo é o último da cascata (base → componentes → efeitos → paginas),
   então estas regras vencem sem precisar de !important.
   ========================================================================== */

/* [CV-1] Herói da home
   .fx-hero traz "padding: 20px 20px 80px", o que encosta o texto na borda da janela.
   No original o conteúdo respeita o container de 1280px. Sobrescrevemos só o eixo
   horizontal, preservando o ritmo vertical que já vem de efeitos.css. */
.hero-home.fx-hero {
  padding-inline: max(
    var(--uf-container-padding-x),
    calc((100% - var(--uf-container-max)) / 2)
  );
}
@media (max-width: 1366px) {
  .hero-home.fx-hero {
    padding-inline: max(80px, calc((100% - var(--uf-container-max)) / 2));
  }
}
@media (max-width: 767px) {
  .hero-home.fx-hero { padding-inline: 10px; }
}

/* [CV-2] Item ativo do menu principal
   O original usa o "pointer framed" do ElementsKit, cujo ::after recebe
   background-color: var(--e-global-color-secondary) — o amarelo #EAB618.
   Resultado: pílula amarela com texto azul-escuro atrás do item da página atual. */
.menu-principal__link.ativo {
  background-color: var(--uf-amarelo);
  color: var(--uf-azul-escuro);
  border-radius: 4px;
}
.menu-principal__link.ativo:hover,
.menu-principal__link.ativo:focus-visible {
  background-color: var(--uf-amarelo-saiba);
  color: var(--uf-azul-escuro);
}