/*
Theme Name: LP Vestibular PUC 2027.1
Description: Tema destinado Vestibular PUC
Author: Marketing
Version: 2027.1
*/

/* ============================================================
   INDICE
   ============================================================
   1. BASE / RESET       — variáveis, tipografia, reset genérico
   2. NAV / MENU          — .navMain, navMain-pill, dropdown
   3. HEADER              — .header-blur (header.php)
   4. FOOTER              — .footer, #footer-social (footer.php)
   5. MODEL PAGE / SWIPER — #page-fullbanner, .swiper (carrossel)
   6. LITY (modal)        — .lity, skin claro com blur
   ------------------------------------------------------------
   7. CURSO.CSS  (unificado em 2026-08-12 — era css/curso.css)
   8. HOME.CSS   (unificado em 2026-08-12 — era css/home.css)
   ============================================================ */

/* ============================================================
   1. BASE / RESET
   ============================================================ */
:root {
  --font-bold: "Poppins", Helvetica, Arial, sans-serif;
  --font-regular: "Poppins", Helvetica, Arial, sans-serif;
}

/* Evita que o menu fixo (#navMain, fixed-top) cubra o topo da seção ao
   navegar por âncora (#formas-de-ingresso, #faq, #nossos-cursos, etc). */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 230px;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-bold);
}

p, li {
  font-family: var(--font-regular);
}

body {
  overflow-x: hidden;
  font-family: "Poppins", Helvetica;
}
section {
  padding: 3rem 0;
  overflow: hidden;
}
/* #menu-principal (header.php) precisa ficar de fora: é o <section> que
   envolve o <nav id="navMain">, e o overflow:hidden acima cortava a sombra
   (e o próprio menu suspenso) do submenu do menu principal. */
#menu-principal {
  overflow: visible;
}
@media (max-width: 728px) {
  section {
      padding: 2rem 0;
  }
}
img {
  max-width: 100%;
}


/* base */
.tab-content section {
    padding: 0 !important; /* RD forms fix */
    overflow: hidden;
}

/* listas */
#areas-atuacao ul li {
    position: relative;
    list-style: none;
    padding: 2px 0;
  }
#areas-atuacao .tab-pane ul li:before, #areas-atuacao .accordion-body ul li:before {
  content: '';
  position: absolute;
  left: -1.75rem;
  top: 6px;
  width: 12px;
  height: 12px;
  background: LightSkyBlue;
}

strong{
  font-family: "Poppins", Helvetica;
}

/* ============================================================
   2. NAV / MENU (navMain)
   ============================================================ */
.navMain{
  padding: unset;
}
.navMain .logo{
  height: 68px;
   margin: 0.5rem;
}
.navMain .navbar-expand-lg .navbar-nav .nav-link, .navMain .menu-item a {
  margin: 0.6rem 0.4rem;
}
.navMain ul li a{
  color: #111;
  transition: all 0.35s ease;
  text-decoration: none;
}
.navMain .navbar-nav .nav-link, .navMain .menu-item a {
  margin: 1rem 0.4rem;
  font-size: 1.2rem;
  color: #000;
  padding: 0;
}
.navMain .menu-item a {
  display: block;
}
.navMain .navbar-nav .nav-link:hover {
	background-color: #ddd;
}

.menu-principal{
  padding: 0;
}
/* abrir dropdown do menu principal ao passar o mouse (desktop) */
@media (min-width: 992px) {
  .navMain .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}
/* submenu simples, sem borda nem cantos arredondados */
.navMain .dropdown-menu {
  border: none;
  border-radius: 0;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

/* navMain-pill: menu + botão Inscreva-se dentro da pílula azul-marinho */
#navMain .navMain-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #132764;
  border-radius: 0;
  padding: 0.4rem 0.4rem 0.4rem 1.5rem;
}
#navMain .navMain-pill .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}
#navMain .navMain-pill .nav-link {
  color: #fff;
  padding: 0.5rem 1rem;
  margin: 0;
  border-radius: 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  font-weight: 400;
}
#navMain .navMain-pill .nav-link:hover,
#navMain .navMain-pill .nav-link:focus {
  color: #132764;
  background-color: #E7EA21;
}
#navMain .navMain-pill .nav-link.active {
  background-color: #E7EA21;
  color: #132764;
}
#navMain .navMain-pill .btn-inscreva-se {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  color: #132764;
  border-radius: 0;
  padding: 0rem 0rem 0rem 1rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
#navMain .navMain-pill .btn-inscreva-se:hover {
  opacity: 0.9;
  color: #132764;
}
/* Página de curso: o botão fica escondido até passar da 1ª dobra (hero) —
   ver #navMain.curso-menu-inscreva-visivel, ligado via scroll em js/tema.js.
   Opacity/visibility em vez de display:none pra não mudar a largura do menu
   (e "pular" o resto dos itens) quando o botão aparece. */
body.single-curso #navMain .navMain-pill .btn-inscreva-se {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
body.single-curso #navMain.curso-menu-inscreva-visivel .navMain-pill .btn-inscreva-se {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease, visibility 0s;
}
#navMain .navMain-pill .seta-inscreva-se {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.33rem;
  height: 2.33rem;
  border-radius: 0;
  background: #E7EA21;
  color: #132764;
  font-size: 0.8rem;
  overflow: hidden;
}
#navMain .navMain-pill .btn-inscreva-se:hover .seta-inscreva-se i {
  animation: seta-inscreva-se-loop 0.9s ease-in-out infinite;
}
@keyframes seta-inscreva-se-loop {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  45% {
    transform: translateX(10px);
    opacity: 0;
  }
  55% {
    transform: translateX(-10px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@media (max-width: 991.98px) {
  #navMain .navMain-pill {
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    border-radius: 0;
    padding: 0.5rem 0 0;
    gap: 0;
  }
  #navMain .navMain-pill .navbar-nav {
    flex-direction: column;
    align-items: stretch;
  }
  #navMain .navMain-pill .nav-link {
    color: #111;
    border-radius: 0;
  }
  #navMain .navMain-pill .nav-link.active {
    color: #132764;
  }
  #navMain .navMain-pill .btn-inscreva-se {
    margin-top: 0.5rem;
    justify-content: center;
  }
}
.navMain .dropdown-item {
  border-radius: 0;
}
.navMain .dropdown-item:hover {
	background-color: #ddd;
}
.dropdown-menu {
  box-shadow: 0px 6px 13px -3px rgba(0,0,0,0.4);
  text-transform: uppercase;
}

/* ============================================================
   3. HEADER (efeito de blur usado no header.php)
   ============================================================ */
.header-blur::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black 40%,
        transparent 100%
    );
}

.header-blur::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    mask-image: linear-gradient(
        to bottom,
        transparent 20%,
        black 100%
    );
}

/* ============================================================
   4. FOOTER
   ============================================================ */
.footer{
  padding-top: 3rem;
  padding-bottom: 0;
  position: static;
  background: #fff;
}
/* Efeito de reveal (footer sticky) só nas páginas "landing": Home e Curso —
   depende das sections anteriores terem position:relative;z-index:1 pra
   "cobrir" o footer até o fim do scroll. Nas páginas internas (genéricas,
   Pais, resultado, etc.) o footer fica normal/estático. */
body.page-template-page-home-php .footer,
body.single-curso .footer{
  position: sticky;
  bottom: 0;
  z-index: 0;
}

@media (max-width: 728px) {
  .footer {
      padding-top: 2rem;
    }
}
.footer .row{
  border-top: 1px solid #D2D1D1;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.footer p{
  font-size: 0.8rem;
}
.footer h4{
  font-size: 1.25em !important;
  font-weight: normal;
  color: #42c4ea;
}
.footer .como-chegar p{
  margin: 0;
  padding: 0;
}
.footer .como-chegar p.destacado{
  color: #42c4ea;
}
.footer .como-chegar img {
  height: 28px !important;
  width: auto !important;
  opacity: 0.5;
}
.footer .logo-footer {
  height: 140px;
  width: auto;
}
.footer .ouro a{
  color: #D4A23F;
}
.footer .ouro a:hover{
  color: #888;
  text-decoration: none;
}
.footer .ouro div{
  transition: all 0.35s ease;
}
.footer .ouro div:hover{
  transform: translateY(-5px);
}
#footer-social li {
  list-style: none;
  float: left;
}
#footer-social img {
  width: 22px;
  height: auto;
}
#footer-social a {
  display: inline-block;
  padding: 0px 2px;
  transition: all 0.2s ease;
  opacity: 0.5;
}
#footer-social a:hover {
  transform: scale(1.25);
  opacity: 1;
}
#footer .logos-group {
  max-height: 80px;
  width: auto !important;
}

/* ============================================================
   5. MODEL PAGE / SWIPER
   ============================================================ */
#page-fullbanner .row {
  min-height: 33vh;
}

/* swiper (carrossel de depoimentos - page-home.php / page-pais.php) */
.swiper {
  padding-bottom: 56px;
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background: #eeeeee;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 6px);
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 15px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 15px));
}

@media (max-width: 576px) {
  .swiper {
    width: 250px;
    height: 440px;
    padding-bottom: 0px;
  }
  
}

.swiper-slide:hover {
  cursor: pointer;
}

/* ============================================================
   6. LITY (modal)
   ============================================================ */
/* Skin claro com blur, usado no card "Destaques" da home (abre
   page-destaque.php num iframe via data-lity). Sem cor de fundo no iframe
   pra qualquer elemento transparente da página carregada continuar
   transparente por cima do blur, em vez do preto padrão do Lity. */
.lity{
	background: rgba(255,255,255,.7);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}
.lity-iframe .lity-container{ width:94vw; max-width:440px; } /* acompanha a largura do .phone (min(380px,90vw)) em page-destaque.php, + uma margem */
.lity-iframe-container{ height:90vh; padding-top:0; background:transparent; }
.lity-iframe-container iframe{ background:transparent; box-shadow:none; }
.lity-content:after{ box-shadow:none; }
/* spinner girando no lugar do texto "Loading..." nativo do Lity (que fica
   branco-invisível no nosso skin claro) */
.lity-loader{
	color: transparent;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
}
.lity-loader::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border: 4px solid rgba(19,39,100,.15);
	border-top-color: var(--curso-azul,#132764);
	border-radius: 50%;
	animation: lity-spin .8s linear infinite;
}
@keyframes lity-spin{
	to{ transform: rotate(360deg); }
}
.lity-close{ color:var(--curso-azul,#132764); text-shadow:none; }
.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited{ color:var(--curso-azul,#132764); text-shadow:none; }


/* ============================================================
   7. CURSO.CSS (unificado em 2026-08-12 — era css/curso.css)
   ============================================================ */
@font-face{
	font-family:'Antihero';
	src:url('vendor/font/Antihero.otf') format('opentype'),
	    url('vendor/font/Antihero.ttf') format('truetype');
	font-display:swap;
}
.curso-page{ --curso-azul:#132764; --curso-amarelo:#E7EA21; --curso-azul-claro:#1F88E3; color:#132764; }
.curso-page section{ padding:3.5rem 0; position:relative; z-index:1; }
.curso-page h2{ font-weight:800; }
.curso-antihero{ font-family:'Antihero','Poppins',Helvetica,sans-serif; font-weight:400; line-height:1; }
/* Efeito de "flash" ao entrar na tela: pisca branco/preto/amarelo/azul-claro/
   azul-escuro e para na cor final que já está definida no CSS de cada
   contexto (o 100% fica implícito de propósito — sem ele, o navegador cai de
   volta na cor "normal" do elemento, seja qual for). Classe ativada via JS
   (js/tema.js) quando o texto entra no viewport. */
@keyframes curso-antihero-flash{
	0%  { color:#fff; }
	20% { color:#000; }
	40% { color:var(--curso-amarelo); }
	60% { color:var(--curso-azul-claro); }
	80% { color:var(--curso-azul); }
}
.curso-antihero.curso-antihero-flash{ animation:curso-antihero-flash .27s steps(1) 2 forwards; }

/* logo do menu fica branca ao passar por cima das dobras escuras (curso-ingresso / curso-emocional) */
#navMain .logo{ transition:filter .25s ease; }
#navMain.curso-logo-branca .logo{ filter:brightness(0) invert(1); }

/* ---------- Hero ---------- */
.curso-hero{ background:#f3f5f9; padding-top:7rem !important; }
.curso-hero-topo{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
.curso-hero-topo .curso-voltar{ margin-bottom:0; }
.curso-voltar{ display:inline-flex; align-items:stretch; text-decoration:none; margin-bottom:1.5rem; font-weight:700; text-transform:uppercase; font-size:.85rem; }
.curso-voltar:hover{ opacity:.9; }
.curso-voltar-seta{ background:var(--curso-azul); color:#fff; display:flex; align-items:center; justify-content:center; padding:.5rem .8rem; }
.curso-voltar-texto{ background:var(--curso-amarelo); color:var(--curso-azul); display:flex; align-items:center; padding:.5rem 1.1rem; }
.curso-hero-video{ position:relative; width:100%; aspect-ratio:1/1; background:#000; overflow:hidden; }
.curso-hero-video.vertical{ aspect-ratio:9/16; max-width:320px; margin:0 auto; }
.curso-hero-video video, .curso-hero-video iframe{ width:100%; height:100%; object-fit:cover; border:0; }
.curso-hero-thumbs{ display:flex; gap:.6rem; margin-top:.75rem; }
.curso-hero-thumbs img{ width:80px; height:80px; object-fit:cover; flex:0 0 auto; cursor:pointer; }
.curso-hero-thumbs img.active{ outline:3px solid var(--curso-amarelo); outline-offset:-3px; }
.curso-hero-titulo{ font-size:2.1rem; font-weight:800; margin-bottom:1rem; line-height:1.2; }
.curso-selo-novo, .curso-selo-ativo{ font-size:.85rem; text-transform:uppercase; padding:.25rem .6rem; margin-left:.5rem; vertical-align:middle; color:#fff; font-weight:700; border-radius:0; }
.curso-selo-novo{ background:var(--curso-azul-claro); }
.curso-selo-ativo{ background:#2c8f4d; }
.curso-hero-badges{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.25rem; }
.curso-hero-badge{ display:inline-flex; align-items:stretch; border-radius:0; }
.curso-hero-badge-icone{ background:var(--curso-azul); color:#fff; display:flex; align-items:center; justify-content:center; padding:.5rem .7rem; font-size:.9rem; }
.curso-hero-badge-texto{ background:var(--curso-amarelo); color:var(--curso-azul); padding:.5rem 1.1rem; font-size:.85rem; font-weight:600; display:flex; align-items:center; }
.curso-hero-badge-inverso .curso-hero-badge-icone{ background:var(--curso-amarelo); color:var(--curso-azul); }
.curso-hero-badge-inverso .curso-hero-badge-texto{ background:var(--curso-azul); color:#fff; }
.curso-hero-resumo{ font-size:1.05rem; margin-bottom:1.25rem; }
.curso-hero-info{ margin-bottom:1.75rem; }
.curso-hero-info strong{ color:var(--curso-azul); }

/* ---------- Cards (tipo/turno/carga) ---------- */
.curso-stats-row{ margin-top:auto; }
.curso-stat-card{ background:var(--curso-azul); padding:1.5rem 1rem; text-align:center; height:100%; }
.curso-stat-card .curso-stat-icone{ display:flex; align-items:center; justify-content:center; margin:0 auto .75rem; }
.curso-stat-card .curso-stat-icone i{ font-size:2.5rem; color:#fff; }
.curso-stat-card h3{ font-size:1rem; font-weight:700; margin-bottom:.35rem; color:var(--curso-amarelo); }
.curso-stat-card p{ margin:0; color:#fff; font-size:.9rem; line-height:1.4; }

/* ---------- Selos ---------- */
.curso-selos{ padding:2rem 0; background:#fff; }
.curso-selos img{ max-height:80px; width:auto; max-width:100%; filter:grayscale(100%); opacity:.75; transition:.3s; }
.curso-selos img:hover{ filter:grayscale(0); opacity:1; }

/* ---------- Formas de ingresso ---------- */
.curso-ingresso{ background:var(--curso-azul); color:#fff; }
.curso-ingresso .curso-antihero { font-size: 3rem; }
.curso-ingresso h2{ font-size:2rem; text-align:center; margin-bottom:2rem; }
.curso-ingresso h2 strong{ position:relative; display:inline-block; padding-bottom:.35rem; color:#fff; text-transform:uppercase; }
.curso-ingresso h2 strong::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg, var(--curso-amarelo), #132764); }
.curso-ingresso .d-lg-block .col-lg-4{ display:flex; flex-direction:column; justify-content:flex-start; }
.curso-acc-item{ margin-bottom:.6rem; }
.curso-acc-item a { color: var(--curso-amarelo); }
.curso-acc-btn{ width:100%; text-align:left; background:#fff; border:0; color:var(--curso-azul); padding:0; font-size:1.1rem; font-weight:700; display:flex; align-items:center; justify-content:space-between; }
.curso-acc-btn > span:first-child{ padding:.85rem 1.1rem; }
.curso-acc-btn .curso-acc-icon{ flex:0 0 auto; width:2.2rem; height:2.2rem; margin:0 .6rem; display:flex; align-items:center; justify-content:center; background:var(--curso-amarelo); color:var(--curso-azul); border:2px solid var(--curso-amarelo); font-size:1.3rem; line-height:1; }
.curso-acc-btn .curso-acc-icon-mais{ display:inline-block; transition:transform .25s ease; }
.curso-acc-btn[aria-expanded="true"], .curso-acc-btn.active{ background:var(--curso-amarelo); }
.curso-acc-btn[aria-expanded="true"] .curso-acc-icon, .curso-acc-btn.active .curso-acc-icon{ background:var(--curso-azul); color:#fff; border-color:var(--curso-azul); }
.curso-acc-btn[aria-expanded="true"] .curso-acc-icon-mais, .curso-acc-btn.active .curso-acc-icon-mais{ transform:rotate(45deg); }
.curso-acc-body{ padding:1rem 1.1rem 1.5rem; font-size:.95rem; background:rgba(255,255,255,.04); }
.curso-acc-body h2{ font-size:1.15rem; margin-bottom:.5rem; }
.curso-acc-body p{ margin-bottom:.5rem; }
.curso-acc-body strong{ color:var(--curso-amarelo); }
.curso-acc-botoes{ display:grid; grid-template-columns:repeat(2, 1fr); gap:.6rem; margin-top:.75rem; }
.curso-acc-botoes .curso-btn, .curso-acc-botoes .btn-outline-success{ width:100%; }
.curso-acc-botoes a { color: white; }
.curso-btn{ display:inline-flex; align-items:center; align-self:start; justify-content:space-between; height:2.6rem; box-sizing:border-box; gap:.75rem; background:var(--curso-amarelo); color:var(--curso-azul); padding:0 0 0 1rem; font-size:.95rem; font-weight:700; text-transform:uppercase; text-decoration:none; border:none; margin:.35rem .5rem .35rem 0; transition:background-color .25s ease, color .25s ease; }
.curso-ingresso-card-body .curso-btn { color: var(--curso-azul); }
.curso-btn .curso-seta{ display:inline-flex; align-items:center; justify-content:center; width:2.4rem; align-self:stretch; background:var(--curso-azul); color:var(--curso-amarelo); transition:background-color .25s ease, color .25s ease; }
/* Inverte no hover: fundo amarelo vira azul (texto amarelo) e a seta, que
   normalmente é azul, vira amarela. */
.curso-btn:hover{ background:var(--curso-azul); color:var(--curso-amarelo); opacity:1; }
.curso-ingresso-card-body .curso-btn:hover{ color:var(--curso-amarelo); }
.curso-btn:hover .curso-seta{ background:var(--curso-amarelo); color:var(--curso-azul); }
/* Variante pra usar o .curso-btn em cima de fundo azul (--curso-azul) — a seta
   é do mesmo tom do fundo da seção e "some"; aqui ela vira branca pra aparecer. */
.curso-btn-fundo-azul .curso-seta{ background:#fff; color:var(--curso-azul); }
/* Aqui o fundo do botão já é o elemento de contraste com a seção azul — não
   pode escurecer no hover (senão some), então mantém o amarelo e só a seta
   (branca) inverte pra azul/amarelo, igual às outras. */
.curso-btn-fundo-azul:hover{ background:var(--curso-amarelo); color:var(--curso-azul); }
.curso-btn-fundo-azul:hover .curso-seta{ background:var(--curso-azul); color:var(--curso-amarelo); }
.curso-btn-outline{ background:transparent; border:2px solid var(--curso-amarelo); color:#fff; padding:0 0 0 .9rem; }
.curso-btn-outline .curso-seta{ background:var(--curso-amarelo); color:var(--curso-azul); }
/* Variante preenchida em azul-marinho (mais evidência que o outline amarelo
   padrão), com a seta amarela pra continuar se destacando. */
.curso-btn-azul{ background:var(--curso-azul); color:#fff; }
.curso-btn-azul .curso-seta{ background:var(--curso-amarelo); color:var(--curso-azul); }
.curso-btn-azul:hover{ background:var(--curso-azul-claro); color:#fff; opacity:1; }
.curso-btn-azul:hover .curso-seta{ background:var(--curso-azul); color:var(--curso-amarelo); }

/* Botões antigos (.btn-outline-success / .btn-outline-primary) que vêm direto do
   conteúdo wysiwyg dos campos ACF — convertidos pro mesmo padrão com setinha.
   Sem prefixo .curso-page porque essas classes também são usadas fora da
   página de curso (ex: Formas de Ingresso incluída na home). */
/* Prefixado com "a" (a.btn-outline-success em vez de .btn-outline-success)
   de propósito: o plugin bussola-test-plugin carrega seu próprio bootstrap.min.css
   DEPOIS do style.css no <head> (via wp_head), e como ".btn"/".btn-outline-*"
   tem a mesma especificidade, quem carrega por último vencia. Acrescentar o
   seletor de elemento aumenta a especificidade e garante que essas regras
   sempre ganhem, não importa a ordem de carregamento dos CSS. */
a.btn-outline-success,
a.btn-outline-primary{
	display:inline-flex; align-items:center; align-self:start; justify-content:flex-start; gap:.6rem; height:2.6rem; box-sizing:border-box;
	background:transparent; border:2px solid var(--curso-amarelo); color:inherit;
	padding:0 0 0 1rem; font-size:.95rem; font-weight:700; text-transform:uppercase;
	text-decoration:none; border-radius:0; margin:.35rem .5rem .35rem 0;
}
a.btn-outline-success:hover,
a.btn-outline-primary:hover{ color:inherit; opacity:.85; }
.curso-ingresso-card a.btn-outline-success,
.curso-ingresso-card a.btn-outline-primary{ border-color:var(--curso-azul); color:var(--curso-azul); transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
/* Inverte no hover: borda/fundo claro -> preenchido de amarelo (e a setinha,
   que normalmente é amarela, vira azul pra continuar se destacando). */
.curso-ingresso-card a.btn-outline-success:hover,
.curso-ingresso-card a.btn-outline-primary:hover{ background:var(--curso-amarelo); border-color:var(--curso-amarelo); color:var(--curso-azul); opacity:1; }
.curso-ingresso-card a.btn-outline-success:hover::after,
.curso-ingresso-card a.btn-outline-primary:hover::after{ background:var(--curso-azul); color:var(--curso-amarelo); }
a.btn-outline-success::after,
a.btn-outline-primary::after{
	content:'\f061'; font-family:'Font Awesome 5 Free'; font-weight:900;
	display:inline-flex; align-items:center; justify-content:center; width:2.4rem;
	align-self:stretch; margin-left:auto;
	background:var(--curso-amarelo); color:var(--curso-azul);
	transition:background-color .25s ease, color .25s ease;
}
.curso-ingresso-card{ position:relative; min-height:340px; display:flex; align-items:flex-start; background:#fff; color:var(--curso-azul); }
.curso-ingresso-card.animated{ animation-duration:.5s; }
.curso-ingresso-card-body{ position:relative; padding:1.5rem; }
.curso-ingresso-card-body h3{ color:var(--curso-azul); font-weight:800; margin-bottom:1rem; }
.curso-ingresso-card-body p{ color:var(--curso-azul); }
.curso-ingresso-card-body strong{ color:var(--curso-azul-claro); }

/* ---------- Desperte emoções ---------- */
.curso-emocional{ background:var(--curso-azul); color:#fff; }
.curso-emocional h2{ font-size:2rem; color:#fff; margin-bottom:1rem; }
.curso-emocional-video{ position:relative; width:100%; max-width:320px; aspect-ratio:9/16; margin:0 auto; background:#000; overflow:hidden; }
.curso-emocional-video video, .curso-emocional-video iframe{ width:100%; height:100%; object-fit:cover; border:0; }
.curso-emocional-legenda{ text-align:center; margin-top:.75rem; font-weight:700; color:#fff; }

/* ---------- Como a PUC transformará ---------- */
.curso-futuro{
	background-color:var(--curso-azul-claro);
	background-image:url('img/persona-2.png');
	background-repeat:no-repeat;
	background-position:right bottom;
	background-size:contain;
	color:#fff;
}
.curso-futuro h2{ display:flex; align-items:center; justify-content:center; text-align:center; gap:1.25rem; font-size:3.2rem; margin-bottom:2rem; color:#fff; }
.curso-futuro h2 .curso-antihero{ color:var(--curso-amarelo); }
.curso-futuro h2 strong{ font-size:1.3rem; line-height:1.35; text-align:left; }
.curso-futuro-item{ margin-bottom:1.75rem; }
.curso-futuro-titulo{ display:inline-flex; align-items:stretch; margin-bottom:.6rem; }
.curso-futuro-num{ flex:0 0 auto; background:var(--curso-amarelo); color:var(--curso-azul); font-weight:800; display:flex; align-items:center; justify-content:center; padding:.5rem .95rem; }
.curso-futuro-num-texto{ background:var(--curso-azul); color:#fff; font-weight:700; display:flex; align-items:center; padding:.5rem 1.1rem; }
.curso-futuro-item p{ margin:0; color:rgba(255,255,255,.9); }

/* ---------- Por que escolher ---------- */
.curso-porque{ background:#fff; }
.curso-porque h2{ font-size:2.8rem; color:var(--curso-azul); margin-bottom:.25rem; }
.curso-porque-linha1{ display:flex; align-items:center; gap:1.5rem; max-width:66%; }
.curso-porque-gradiente{ flex:1 1 auto; height:6px; background:linear-gradient(90deg, var(--curso-azul), rgba(19,39,100,0)); }
.curso-porque h2 strong{ display:block; color:var(--curso-azul-claro); text-transform:uppercase; font-size:1.9rem; }
.curso-porque-video{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; margin-top:1.5rem; }
.curso-porque-video video, .curso-porque-video iframe{ width:100%; height:100%; object-fit:cover; border:0; }
.curso-prepara{ background:var(--curso-azul); color:#fff; padding:2rem; height:100%; }
.curso-prepara h3{ color:#fff; font-weight:700; margin-bottom:1rem; }
.curso-prepara ul{ margin:0; padding-left:1.25rem; }
.curso-prepara li{ margin-bottom:.5rem; }
.curso-prepara li::marker{ color:var(--curso-amarelo); }

/* ---------- Áreas de atuação ---------- */
.curso-areas{ background:var(--curso-azul); color:#fff; }
.curso-areas h2{ display:flex; align-items:center; gap:1.5rem; font-size:2.3rem; margin-bottom:2rem; }
.curso-areas h2 strong{ color:#fff; text-transform:uppercase; white-space:nowrap; }
.curso-areas h2 .curso-antihero{ color:var(--curso-azul-claro); font-size: 3rem; }
.curso-areas-espaco{ flex:1 1 0; }
.curso-areas-gradiente{ flex:1 1 0; height:6px; background:linear-gradient(90deg, #132764, var(--curso-amarelo)); }
.curso-areas .nav-tabs{ border:0; gap:.6rem; margin-bottom:0.5rem; flex-wrap:wrap; }
.curso-areas .nav-tabs .nav-item{ flex:1 1 0; }
.curso-areas .nav-tabs .nav-link{ width:100%; background:#fff; color:var(--curso-azul); border:0; font-weight:700; padding:0; display:flex; align-items:stretch; justify-content:space-between; border-radius:0; }
.curso-areas .nav-tabs .nav-link > span{ display:flex; align-items:center; padding:.6rem 1rem; }
.curso-areas .nav-tabs .nav-link::after{ content:'+'; flex:0 0 auto; width:2.2rem; margin:.35rem; display:flex; align-items:center; justify-content:center; background:#e4e6ea; color:#555; font-weight:700; }
.curso-areas .nav-tabs .nav-link.active{ background:var(--curso-amarelo); color:var(--curso-azul); }
.curso-areas .nav-tabs .nav-link.active::after{ content:'×'; background:var(--curso-azul); color:#fff; }
.curso-areas .tab-pane{ color:#fff; background:var(--curso-azul-claro); }
.curso-areas-conteudo{ background:var(--curso-azul-claro); padding:1rem 2rem; }
.curso-areas-conteudo h2, .curso-areas-conteudo h3{ color:var(--curso-amarelo); }
.curso-areas-col-foto{ display:flex; justify-content:center; }
.curso-areas-foto{ position:relative; width:100%; max-width:260px; aspect-ratio:3/4; background-size:cover; background-position:center; }
.curso-areas-foto::after{ content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(231,234,33,.25), rgba(19,39,100,.3)); mix-blend-mode:multiply; }

/* ---------- Infra + Metodologia ---------- */
.curso-page section.curso-infra-metodologia{ padding:0; background: #eceef2; }
.curso-infra-metodologia .row{ align-items:stretch; }
div.curso-infra{ background:var(--curso-amarelo); padding:3rem 1.5rem; height:100%; }
.curso-infra h3{ color:var(--curso-azul); font-weight:800; margin-bottom:.4rem; text-transform:uppercase; font-size:1.1rem; }
.curso-infra p{ color:var(--curso-azul); margin-bottom:1.25rem; }
.curso-infra-principal{ width:100%; height:320px; object-fit:cover; margin-bottom:.6rem; }
.curso-infra-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.6rem; }
.curso-infra-grid img{ width:100%; height:85px; object-fit:cover; cursor:pointer; }
.curso-infra-grid img.active{ outline:3px solid var(--curso-azul); outline-offset:-3px; }
div.curso-metodologia{ background:#eceef2; padding:3rem; height:100%; display:flex; flex-direction:column; justify-content:center; }
.curso-metodologia h3{ margin-bottom:1rem; }
.curso-metodologia .curso-antihero{ display:block; color:var(--curso-azul); font-size:3rem; }
.curso-metodologia-sub{ display:flex; align-items:center; gap:.75rem; }
.curso-metodologia-sub-do{ color:var(--curso-azul); font-weight:700; font-size:1.3rem; }
.curso-metodologia-sub-linha{ width:225px; height:7px; background: linear-gradient(270deg, var(--curso-azul), #eceef2); }
.curso-metodologia-sub-curso{ color:var(--curso-azul-claro); font-weight:700; font-size:1.3rem; }
.curso-metodologia-texto{ color:#333; margin-top:1.5rem; }

/* alinha as duas bordas externas (esquerda do .curso-infra, direita do
   .curso-metodologia) com a borda do .container usado no resto da página
   (breakpoints padrão do Bootstrap: 960/1140/1320px) — a borda interna, onde
   as duas colunas se encontram, fica sem padding, encostada. */
@media (min-width: 992px){
	div.curso-infra{ padding-left:calc((100vw - 960px) / 2); padding-right:3rem; }
	div.curso-metodologia{ padding-right:calc((100vw - 960px) / 2); }
}
@media (min-width: 1200px){
	div.curso-infra{ padding-left:calc((100vw - 1140px) / 2); }
	div.curso-metodologia{ padding-right:calc((100vw - 1140px) / 2); }
}
@media (min-width: 1400px){
	div.curso-infra{ padding-left:calc((100vw - 1320px) / 2); }
	div.curso-metodologia{ padding-right:calc((100vw - 1320px) / 2); }
}

@media (max-width: 991.98px){
	.curso-hero-video.vertical{ margin-bottom:1.5rem; }
	.curso-ingresso-card{ margin-top:2rem; }
	.curso-futuro{ background-image:none; }
}
@media (max-width: 575.98px){
	.curso-ingresso h2{ font-size:1.66rem; }
}
@media (max-width: 767.98px){
	.curso-areas h2{ flex-wrap:wrap; gap: 0.5rem; }
	.curso-areas h2 strong{ white-space:normal; }
	.curso-areas-espaco{ display:none; }
	.curso-areas-gradiente{ flex:0 0 100%; order:99; }
	.curso-areas .nav-tabs .nav-item{ flex:1 1 100%; }
}

/* ---------- Página de Resultado (single-resultado.php) e page-2col.php ---------- */
.curso-resultado-split{ min-height:100vh; }
.curso-resultado-foto{ min-height:50vh; background-color:var(--curso-azul); background-size:cover; background-position:center; background-attachment:fixed; }
.curso-resultado-conteudo{ padding:5rem 3rem !important; }
.curso-resultado-conteudo h1{ font-size:2.3rem; font-weight:800; color:var(--curso-azul); margin-bottom:1.5rem; }
.curso-resultado-aviso{ display:flex; align-items:flex-start; gap:.85rem; background:var(--curso-amarelo); color:var(--curso-azul); padding:1.25rem 1.5rem; margin-bottom:2rem; font-weight:700; }
.curso-resultado-aviso > i{ font-size:1.3rem; margin-top:.15rem; }
.curso-resultado-aviso p{ margin:0 0 .25rem; }
.curso-resultado-aviso-btn{ display:inline-flex; align-items:center; gap:.6rem; margin-top:.5rem; padding:.5rem .5rem .5rem 1rem; background:var(--curso-azul); color:var(--curso-amarelo); font-weight:700; text-decoration:none; }
.curso-resultado-aviso-btn:hover{ opacity:.9; color:var(--curso-amarelo); }
.curso-resultado-aviso-btn .curso-seta{ display:inline-flex; align-items:center; justify-content:center; width:1.8rem; height:1.8rem; background:#fff; color:var(--curso-azul); }
.curso-resultado-acesso{ margin-bottom:2rem; }
.curso-resultado-acesso p{ margin-bottom:1rem; }
.curso-resultado-acesso a{ color:var(--curso-azul); font-weight:800; text-decoration:underline; }
.curso-resultado-acesso small{ color:#666; }
.curso-resultado-separador{ border-top:2px dotted var(--curso-azul); margin:2rem 0 1.5rem; }
.curso-resultado-botoes{ display:block; max-width:620px; }
/* Componente próprio (não reaproveita .btn-outline-success/::after) porque o
   texto costuma quebrar em 2 linhas aqui (nomes de documento longos) — a seta
   fica numa div irmã, sem padding no container, então "align-items:stretch"
   estica ela até encostar nas bordas de cima/baixo, do tamanho que o botão
   tiver (1 ou 2 linhas), sem sobrar nem faltar espaço. */
.curso-resultado-doc{ display:flex; align-items:stretch; width:100%; margin-bottom:.6rem; border:2px solid var(--curso-azul); color:var(--curso-azul); text-decoration:none; font-weight:700; text-transform:uppercase; font-size:.95rem; transition:background-color .25s ease, color .25s ease, border-color .25s ease; }
.curso-resultado-doc-label{ flex:1 1 auto; display:flex; align-items:center; padding:.6rem 1rem; }
.curso-resultado-doc-seta{ flex:0 0 2.4rem; display:flex; align-items:center; justify-content:center; background:var(--curso-azul); color:var(--curso-amarelo); transition:background-color .25s ease, color .25s ease; }
.curso-resultado-doc:hover{ background:var(--curso-amarelo); border-color:var(--curso-amarelo); color:var(--curso-azul); }
.curso-resultado-doc:hover .curso-resultado-doc-seta{ background:var(--curso-azul); color:var(--curso-amarelo); }
.curso-resultado-whatsapp{ display:inline-flex; align-items:center; gap:.6rem; margin-top:2rem; padding:.85rem 1.5rem; background:#25D366; color:#fff; font-weight:700; text-decoration:none; }
.curso-resultado-whatsapp:hover{ opacity:.9; color:#fff; }
.curso-resultado-whatsapp i{ font-size:1.3rem; }
.curso-resultado-conteudo-extra{ margin-top:2rem; }
@media (max-width: 991.98px){
	.curso-resultado-foto{ min-height:40vh; background-attachment:scroll; }
	.curso-resultado-conteudo{ padding:2.5rem 1.25rem; }
}


/* ============================================================
   8. HOME.CSS (unificado em 2026-08-12 — era css/home.css)
   ============================================================ */
.home-page{ --curso-azul:#132764; --curso-amarelo:#E7EA21; --curso-azul-claro:#1F88E3; color:#132764; }
.home-page section{ padding:3.5rem 0; overflow:hidden; position:relative; z-index:1; }
.home-page h2{ font-weight:800; }
.uppercase { text-transform: uppercase; }

/* ---------- Hero ---------- */
/* Prefixado com .home-page pra ganhar de ".home-page section" (que tem mais
   especificidade que ".home-hero" sozinho) e o padding-bottom:0 realmente valer. */
.home-page .home-hero{ background:#eef1f6 url('img/bg-fundo.jpg') center center / cover no-repeat; background-attachment:fixed; padding-top:8rem; padding-bottom:0; height:100vh; display:flex; align-items:center; }
.home-hero > .container{ width:100%; height:100%; }
/* O elemento WPBakery ("Hero da Home") vem sempre dentro de vc_row > vc_column,
   e essas divs não têm altura própria (height:auto) — sem isto, a corrente de
   height:100% do .container até o ".row.h-100" do shortcode quebra no meio
   e a foto/coluna volta a não encostar na base do hero. */
.home-hero .vc_row,
.home-hero .wpb_column,
.home-hero .vc_column-inner,
.home-hero .wpb_wrapper{ height:100%; }
.home-hero-foto-wrap{ position:relative; max-width:115%; margin:0 auto; }
.home-hero-foto{ display:block; max-width:100%; margin:0 auto; }
/* Legenda (nome/ocupação) da foto — mesmo padrão do hero do Guia Universitário
   (.aq-hero-credito): colada na foto, na altura do peito, a partir do desktop;
   centralizada embaixo da foto em telas menores. Só aparece se preenchida. */
.home-hero-credito{ color:var(--curso-azul); text-align:center; margin-top:.5rem; }
.home-hero-credito strong{ display:block; font-weight:700; }
.home-hero-credito span{ display:block; font-size:.7rem; }
@media (min-width: 992px){
	/* --credito-x/--credito-y vêm do elemento WPBakery (campos "Ajuste X/Y"),
	   pra corrigir a posição caso a foto trocada não encaixe bem no padrão
	   (left:70%;top:55%) — ficam 0 se os campos não forem preenchidos. */
	.home-hero-credito{ position:absolute; left:70%; top:55%; text-align:left; font-size:.9em; margin-top:0; white-space:nowrap; transform:translate(var(--credito-x, 0), var(--credito-y, 0)); }
}
.home-hero-titulo{ margin-bottom:1.5rem; line-height:1; }
.home-hero-titulo .curso-antihero{ display:block; font-size:5.75rem; color:var(--curso-azul-claro); }
.home-hero-titulo strong{ display:block; font-size:3.4rem; color:var(--curso-azul); text-transform:uppercase; }
.home-hero-vestibular{ display:flex; text-transform: uppercase; flex-wrap:wrap; align-items:center; margin-bottom:2rem; }
.home-hero-vestibular-a{ background:var(--curso-amarelo); color:var(--curso-azul); font-weight:800; font-size:1.6rem; padding:.5rem 1rem; }
.home-hero-vestibular-b{ background:var(--curso-azul-claro); color:#fff; font-weight:800; font-size:1.6rem; padding:.5rem 1rem; }
.home-hero-vestibular-txt{ font-weight:700; font-size:1.1rem; color:var(--curso-azul); line-height:1.3; margin-left:1rem; }

/* Entrada do hero (animate.css, vendor/animate): foto sobe com fade e os textos
   da direita entram em cascata, linha por linha. Delays próprios porque o
   animate.css só tem utilitários de 1 em 1 segundo (rápido demais pra pular,
   devagar demais pra usar puro). */
.home-hero-foto.animated{ animation-duration:1.1s; }
.home-hero-anim-1{ animation-delay:.15s; }
.home-hero-anim-2{ animation-delay:.35s; }
.home-hero-anim-3{ animation-delay:.55s; }
.home-hero-anim-4{ animation-delay:.75s; }

@media (max-width: 767.98px){
	.home-page .home-hero{ padding-top:6rem; background-attachment:scroll; }
	.home-hero-foto-wrap{ max-width:100%; }
	.home-hero-titulo .curso-antihero{ font-size:3.25rem; }
	.home-hero-titulo strong{ font-size:1.9rem; }
}

/* ---------- Vídeo institucional / wrap genérico ---------- */
.home-video{ background:#000; padding:0; }
.home-video-wrap,
.home-video-wrap-secundario{ position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; }
.home-video-wrap video, .home-video-wrap iframe,
.home-video-wrap-secundario video, .home-video-wrap-secundario iframe{ width:100%; height:100%; object-fit:cover; border:0; }
.home-video-play{ position:absolute; inset:0; width:100%; height:100%; background:transparent; border:none; color:#fff; font-size:3rem; display:flex; align-items:center; justify-content:center; }
.home-video-play:hover{ color:var(--curso-amarelo); }

/* ---------- O Começo da sua história ---------- */
.home-comeco{ background:var(--curso-azul); color:#fff; }
.home-comeco h2{ font-size:2.3rem; margin-bottom:2.5rem; }
.home-comeco h2 strong{ color:#fff; text-transform:uppercase; }
.home-comeco-texto{ font-weight:700; font-size:1.15rem; margin-bottom:1rem; }
.home-comeco-linha{ height:6px; max-width:220px; background:linear-gradient(90deg, var(--curso-amarelo), rgba(231,234,33,0)); }
.home-comeco-card{ position:relative; display:block; padding:2.5rem 1.5rem 4rem; min-height:220px; text-decoration:none; }
.home-comeco-card-amarela{ background:var(--curso-amarelo); color:var(--curso-azul); }
.home-comeco-card-branca{ background:#fff; color:var(--curso-azul); }
/* Card desativado (campo "Card Destaques ativo" em Opções da página Home) —
   esmaecido e sem clique, com selo "Em breve". */
.home-comeco-card-inativo{ opacity:.5; pointer-events:none; }
.home-comeco-card-badge{ position:absolute; top:.75rem; right:.75rem; background:var(--curso-amarelo); color:var(--curso-azul); font-size:.7rem; text-transform:uppercase; font-weight:700; padding:.2rem .5rem; }
.home-comeco-card i{ font-size:3.5rem; display:block; margin-bottom:1rem; }
.home-comeco-card-seta i { margin-bottom:0; font-size: 2.5rem; }
.home-comeco-card span:not(.home-comeco-card-seta){ display:block; font-weight:800; font-size:1.25rem; }
.home-comeco-card:hover .home-comeco-card-seta i{ animation: home-comeco-seta-loop .9s ease-in-out infinite; }
@keyframes home-comeco-seta-loop{
	0%   { transform:translateX(0);    opacity:1; }
	45%  { transform:translateX(10px); opacity:0; }
	55%  { transform:translateX(-10px); opacity:0; }
	100% { transform:translateX(0);    opacity:1; }
}
.home-comeco-card-seta{ position:absolute; right:0; bottom:0; width:8.5rem; height:3.5rem; background:var(--curso-azul-claro); color:var(--curso-azul); display:flex; align-items:center; justify-content:center; font-size:1.25rem; border-left: 5px solid var(--curso-azul); border-top: 5px solid var(--curso-azul);}
/* Flip de entrada sem bounce (o flipInY do animate.css tem overshoot no
   final) — gira reto no eixo Y e para, sem quicar. */
@keyframes home-comeco-seta-flip-in{
	from{ transform:rotateY(90deg); opacity:0; }
	to  { transform:rotateY(0deg); opacity:1; }
}
.home-comeco-card-seta.seta-flip-in{ animation:home-comeco-seta-flip-in .5s ease-out forwards; backface-visibility:hidden; }

/* ---------- Nossas Certificações Confirmam (page-pais.php) ---------- */
.home-certificacoes{ background:#fff; text-align:center; }
.home-certificacoes h2{ font-size:2rem; margin-bottom:1rem; }
.home-certificacoes-texto{ max-width:820px; margin:0 auto 2.5rem; color:#333; }
.home-certificacoes-selos img{ max-height:80px; width:auto; max-width:100%; filter:grayscale(100%); opacity:.75; transition:.3s; }
.home-certificacoes-selos img:hover{ filter:grayscale(0); opacity:1; }

/* ---------- CTA "Conheça mais da nossa estrutura" (page-pais.php) ---------- */
/* Div solta (não .home-page section) entre as duas dobras, sem ser cortada
   pelo overflow:hidden das sections vizinhas. height:0 faz ela não ocupar
   nenhum espaço no fluxo (zero de vão, nada de sobra) — o botão em si fica
   position:absolute centralizado dentro dela (left:50% + translate). */
.home-pais-cta{ position:relative; z-index:2; height:0; }
.home-pais-cta .curso-btn{ position:absolute; left:50%; top:0; transform:translate(-50%, -50%); font-size:1.3rem; margin:0; }
/* Mais respiro nas duas dobras vizinhas só nesta página (o padding padrão de
   3.5rem de ".home-page section" é curto demais pro botão não ficar apertado). */
body.page-template-page-pais-php .home-diferenciais{ padding-bottom:6rem; }
body.page-template-page-pais-php .home-faq{ padding-top:6rem; }

/* ---------- Nossos Pilares ---------- */
/* min-height:100vh porque a seção fica "presa" (pin) durante o efeito de
   parallax (js/tema.js) — sem isso ela é mais baixa que a tela e deixa o
   rodapé/próxima dobra aparecendo por baixo enquanto está presa. */
.home-pilares{ background:var(--curso-azul-claro); color:#fff; min-height:100vh; display:flex; align-items:center; }
.home-pilares > .container{ width:100%; }
.home-pilares h2{ margin-bottom:2.5rem; line-height:1; }
.home-pilares h2 .curso-antihero{ display:inline-block; color:var(--curso-azul); font-size:3.4rem; margin-bottom:.25rem; }
.home-pilares h2 strong{ position:relative; display:inline-block; color:#fff; font-size:2.5rem; text-transform:uppercase; padding-bottom:.66rem; transform: translateY(-10px); }
.home-pilares h2 strong::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:6px; background:linear-gradient(270deg, var(--curso-azul-claro), var(--curso-amarelo)); }
.home-pilares-grid{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-template-rows:auto auto;
	gap:.75rem;
	grid-template-areas:
		"a b c d"
		"e e f d";
}
.home-pilar{ display:block; min-height:180px; text-decoration:none; perspective:1200px; }
.home-pilar i{ font-size:3.5rem; margin-bottom:1rem; }
.home-pilar span{ font-weight:800; font-size:1.35rem; line-height:1.25; }

/* Flip 3D no hover: .home-pilar-flip gira no eixo X, revelando a face de trás
   com uma frase sobre o pilar. */
.home-pilar-flip{ position:relative; cursor: help; width:100%; height:100%; transition:transform .6s ease; transform-style:preserve-3d; }
.home-pilar:hover .home-pilar-flip{ transform:rotateX(180deg); }
.home-pilar-face{ position:absolute; inset:0; padding:2rem 1.5rem; display:flex; flex-direction:column; justify-content:flex-end; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.home-pilar-back{ transform:rotateX(180deg); justify-content:center; }
.home-pilar-back p{ margin:0; font-weight:700; font-size:1.2rem; line-height:1.4; }
.home-pilar-azul .home-pilar-face{ background:var(--curso-azul); color:#fff; }
.home-pilar-amarelo .home-pilar-face{ background:var(--curso-amarelo); color:var(--curso-azul); }
.home-pilar-branco .home-pilar-face{ background:#fff; color:var(--curso-azul); }

@media (max-width: 767.98px){
	.home-pilares-grid{
		grid-template-columns:1fr 1fr;
		grid-template-areas:
			"a b"
			"c c"
			"d d"
			"e e"
			"f f";
	}
}

/* ---------- Explore os cursos ---------- */
.home-cursos{ background:#fff; }
.home-cursos h2{ font-size:2rem; margin-bottom:0; }
.home-cursos h2 strong{ color:var(--curso-azul); text-transform:uppercase; }
.home-cursos-busca{ position:relative; }
.home-cursos-busca i{ position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); color:#999; }
.home-cursos-busca input{ width:100%; border:0; background:#f1f2f4; padding:.85rem 2.75rem .85rem 2.5rem; font-size:.95rem; }
.home-cursos-busca-limpar{ position:absolute; right:.6rem; top:50%; transform:translateY(-50%); width:2rem; height:2rem; border:0; background:transparent; color:#999; display:none; align-items:center; justify-content:center; }
.home-cursos-busca-limpar:hover{ color:var(--curso-azul); }
.home-cursos-busca.tem-texto .home-cursos-busca-limpar{ display:flex; }
.home-escolas-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem !important; }
.home-escolas-tabs .nav-item{ flex:1 1 0; }
.home-escolas-tabs .nav-link{ width:100%; min-height: 60px; font-size: 0.8rem !important; background:var(--curso-azul); color:#fff; font-weight:700; padding:.65rem 1.5rem; border:0; border-radius:0; text-align:center; }
.home-escolas-tabs .nav-link.active{ background:var(--curso-amarelo); color:var(--curso-azul); }
.home-escola-titulo{ color:var(--curso-azul); font-weight:800; margin-bottom:.5rem; }
.home-escola-desc{ max-width:900px; margin-bottom:2rem; color:#333; }
.home-cursos-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; }
.home-curso-card{ position:relative; background:var(--curso-azul); color:#fff; padding:1.75rem 1.25rem 3.25rem; text-decoration:none; min-height:170px; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; transition: all .35s ease; }
.home-curso-card:hover{ color:#fff; background-color:var(--curso-azul-claro); }
.home-curso-card:hover i{ transform: scale(1.2); }
.home-curso-card i{ font-size:3rem; display:block; margin-bottom:.75rem; transition: all .45s ease;}
.home-curso-card span{ display:block; line-height: 1.33rem; font-weight:700; color:var(--curso-amarelo); }
.home-curso-selo{ position:absolute; top:.75rem; right:.75rem; background:var(--curso-amarelo); color:var(--curso-azul) !important; font-size:.7rem; text-transform:uppercase; font-weight:700; padding:.2rem .5rem; }
.home-curso-seta{ position:absolute; right:1.1rem; bottom:1rem; transition:transform .3s ease; }
.home-curso-seta .fa-arrow-right{ font-size:2rem !important; transform: scale(1) !important; margin:0; }
.home-curso-card:hover .home-curso-seta{ transform:translateX(10px); }
.home-curso-card.is-hidden{ display:none; }

@media (max-width: 991.98px){
	.home-cursos-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 575.98px){
	.home-cursos-grid{ grid-template-columns:1fr; }
}

/* Registra as 2 cores do gradiente como tipo <color> pra dar pra animar via
   transition (custom property "crua" não interpola, precisa do @property). */
@property --diferenciais-cor-solida{
	syntax: '<color>';
	inherits: true;
	initial-value: #132764;
}
@property --diferenciais-cor-fade{
	syntax: '<color>';
	inherits: true;
	initial-value: rgba(19, 39, 100, 0);
}

/* ---------- Diferenciais da PUC-Campinas ---------- */
.home-diferenciais{ background:#d6d6d6; }
.home-diferenciais h2{ font-size:2rem; margin-bottom:2rem; }
.home-diferenciais h2 strong{ color:var(--curso-azul); text-transform:uppercase; }

@keyframes home-diferenciais-fade{
	from{ opacity:0; transform:translateX(40px); }
	to{ opacity:1; transform:translateX(0); }
}
.home-diferenciais-anim{ animation:home-diferenciais-fade .5s ease; }
.home-diferenciais-foto{
	--diferenciais-cor-solida: #132764; /* trocado via JS por item */
	--diferenciais-cor-fade: rgba(19, 39, 100, 0);
	position:relative;
	width:100%;
	max-height: 450px;
	aspect-ratio:3/2;
	background: #132764;
	background: linear-gradient(0deg, var(--diferenciais-cor-solida) 0%, var(--diferenciais-cor-solida) 85%, var(--diferenciais-cor-fade) 85%, var(--diferenciais-cor-fade) 100%);
	transition: --diferenciais-cor-solida .5s ease, --diferenciais-cor-fade .5s ease;
	overflow:hidden;
}
.home-diferenciais-foto-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
.home-diferenciais-nav{ position:absolute; left:1rem; top:20%; display:flex; gap:.6rem; }
.home-diferenciais-nav button{ width:2.6rem; height:2.6rem; border-radius:50%; border:0; background:#fff; color:var(--curso-azul); display:flex; align-items:center; justify-content:center; }
.home-diferenciais-nav button:hover{ background:var(--curso-amarelo); }
.home-diferenciais-video{ aspect-ratio:9/16 !important; max-width:320px; margin:0 auto; }

/* ---------- Depoimentos ---------- */
.home-depoimentos{ background:var(--curso-azul); color:#fff; }
/* neutraliza o .swiper-slide genérico do style.css (cartão cinza arredondado
   com sombra, pensado pro carrossel antigo) — aqui é 1 depoimento por tela */
.home-depoimentos-swiper.swiper{ padding-bottom:0; }
.home-depoimentos-swiper .swiper-slide{
	display:block; justify-content:normal; align-items:normal;
	border-radius:0; box-shadow:none; background:transparent;
	font-size:inherit; font-weight:inherit; color:inherit;
	width:100%;
}
.home-depoimentos-titulo{ display:inline-flex; flex-wrap:wrap; font-weight:800; font-size:1.75rem; }
.home-dt-a{ background:#fff; color:var(--curso-azul); padding:.5rem 1rem; }
.home-dt-b{ background:var(--curso-amarelo); color:var(--curso-azul); padding:.5rem 1rem; }
.home-depoimentos-nav{ display:flex; gap:.6rem; justify-content:flex-end; }
.home-depoimentos-nav button{ width:2.6rem; height:2.6rem; border-radius:50%; border:0; background:rgba(255,255,255,.15); color:#fff; display:flex; align-items:center; justify-content:center; }
.home-depoimentos-nav button:hover{ background:var(--curso-amarelo); color:var(--curso-azul); }
.home-depoimentos-nav .home-depoimentos-next{ background:#fff; color:var(--curso-azul); }
.home-depoimento-texto{ display:block; max-width:960px; margin:0 0 2.5rem; font-size:1.65rem; font-weight:700; line-height:1.55; color:#fff; text-decoration:none;}
.home-depoimento-rodape{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.home-depoimento-pessoa{ display:flex; align-items:center; gap:1rem; }
.home-depoimento-foto{ width:82px; height:82px; border-radius:3px; object-fit:cover; flex:0 0 auto; }
.home-depoimento-info strong{ display:block; color:var(--curso-amarelo); font-size:1.45rem; }
.home-depoimento-info span{ color:#fff; font-size:1.15rem; }
.home-depoimento-cta{ display:flex; align-items:center; gap:1.5rem; }
.home-depoimento-cta .home-comeco-linha{ flex:0 1 160px; }
.home-depoimento-cta .curso-btn{ flex-shrink:0; white-space:nowrap; height:2.9rem; padding-left:1.25rem; font-size:1rem; }

@media (max-width: 767.98px){
	.home-depoimento-texto{ font-size:1.25rem; }
	.home-depoimento-rodape{ justify-content:flex-start; }
}

/* ---------- FAQ ---------- */
.home-faq{ background:#eef1f6 url('img/bg-fundo.jpg') center center / cover no-repeat; background-attachment:fixed; }
.home-faq h2.curso-antihero{ font-size:5rem; color:var(--curso-azul); display:block; }
.home-faq-subtitulo{ font-size:1.6rem; font-weight:700; color:var(--curso-azul); margin-top:-1rem; }
.home-faq-acc{ background:#fff; }
.home-faq-item{ border-bottom:2px solid #fff; }
.home-faq-btn{ width:100%; text-align:left; background:transparent; border:0; padding:0; font-weight:700; color:var(--curso-azul); display:flex; align-items:stretch; gap:0; }
.home-faq-pergunta{ flex:1 1 auto; display:flex; align-items:center; background:#f1f2f4; padding:1.1rem 1.4rem; font-size: 1.2rem; }
.home-faq-icon{ flex:0 0 auto; width:4.5rem; display:flex; align-items:center; justify-content:center; background:var(--curso-amarelo); color:var(--curso-azul); }
.home-faq-btn[aria-expanded="true"] .home-faq-icon i{ transform:rotate(180deg); }
.home-faq-btn[aria-expanded="true"] .home-faq-pergunta{ background:var(--curso-azul); color:#fff; }
.home-faq-body{ background:var(--curso-azul); color:#fff; padding:1.4rem 1.4rem; }

@media (max-width: 767.98px){
	.home-faq{ background-attachment:scroll; }
	.home-faq h2.curso-antihero{ font-size:3rem; }
	.home-faq-subtitulo{ font-size:1.3rem; }
}