/* ==========================================================================
   Vitrine Pública (resetada)
   Usa variáveis do tema vindas do EJS:
   --cor-navbar, --cor-navbar-texto, --cor-bg, --cor-texto, --cor-botao
   Opcional: --fonte-base (ex.: "Inter", system-ui)
   ========================================================================== */
.vitrine {
  overflow-x: hidden;
}

:root {
  --cor-navbar: #0f172a;
  --cor-navbar-texto: #ffffff;
  --cor-bg: #ffffff;
  --cor-texto: #0f172a;
  --cor-botao: #0ea5e9;
  --cor-navbar-botao-texto: #ffffff;
  --fonte-base: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --dep-gap: 1rem;
  /* espaço entre cards */
  --dep-gutter: clamp(1rem, 3vw, 2rem);
  /* respiro nas laterais */
  --dep-card-radius: .75rem;
  --dep-card-pad: 1rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--fonte-base);
  color: var(--cor-texto);
  background: var(--cor-bg);
}

/* NAVBAR */
.vt-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cor-navbar);
  color: var(--cor-navbar-texto);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* gradiente agora NÃO usa a cor do botão; é um overlay suave */
.vt-nav[data-style="gradient"] {
  background-color: var(--cor-navbar);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.12));
}

.vt-nav .wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 5px 16px;
  /* antes: display:flex; align-items:center; gap:16px; */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

.vt-nav .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.vt-nav .brand img {
  height: 40px;
  width: auto;
  display: block;
}

.vt-nav .brand .name {
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* MENU DESKTOP */
.vt-nav .menu {
  /* antes tinha margin-left/right:auto; */
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 16px;
  justify-self: center;
  /* fica realmente no centro da coluna do meio */
}

.vt-nav .menu a {
  text-decoration: none;
  color: var(--cor-navbar-texto);
  opacity: .9;
  font-weight: 500;
}

.vt-nav .menu a:hover {
  opacity: 1;
  text-decoration: none;
}

/* sem sublinhado */

/* CTA à direita */
.vt-nav .cta {
  justify-self: end;
}

/* em vez de margin-left:auto */

/* botão da navbar: maior especificidade para não ser sobrescrito por .vt-btn */
.vt-nav .vt-btn-navbar {
  padding: 10px 14px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  background: var(--cor-navbar-botao);
  /* já existia */
  color: var(--cor-navbar-botao-texto);
  /* <— era #fff, agora usa o var */
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  border-radius: 30px;
}

.vt-nav .vt-btn-navbar[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* HAMBURGUER (somente mobile) */
.vt-burger {
  display: none;
  justify-self: end;
  /* garante alinhamento à direita na grid */
  margin-left: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
}

.vt-burger .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cor-navbar-texto);
  margin: 5px 0;
  transition: transform .2s ease;
}

/* PAINEL MOBILE */
.vt-mobile-panel {
  display: none;
  overflow: hidden;
  background: var(--cor-navbar);
  transition: max-height .25s ease;
  max-height: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.vt-nav[data-style="gradient"] .vt-mobile-panel {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.12));
}

.vt-mobile-panel[data-open="1"] {
  max-height: 400px;
}

.vt-mobile-panel .m-links {
  list-style: none;
  margin: 0;
  padding: 8px 16px;
  display: grid;
  gap: 8px;
}

.vt-mobile-panel .m-links a {
  text-decoration: none;
  color: var(--cor-navbar-texto);
  font-weight: 500;
  padding: 8px 0;
  display: block;
}

.vt-mobile-panel .m-cta {
  padding: 8px 16px 16px 16px;
}

/* Travar scroll quando menu aberto (opcional) */
.vt-no-scroll {
  overflow: hidden;
}

/* RESPONSIVO */
@media (max-width: 900px) {

  .vt-nav .menu,
  .vt-nav .cta {
    display: none;
  }

  .vt-burger {
    display: inline-block;
  }

  .vt-mobile-panel {
    display: block;
  }
}

@media (max-width: 360px) {
  .vt-nav .brand .name {
    display: none;
  }
}



/* HERO (Carrossel) */
.vt-hero {
  /* antes era apenas position:relative; */
  position: relative;
  width: 100vw;
  /* ocupa toda a viewport */
  left: 50%;
  right: 50%;
  /* “estoura” para fora de qualquer container */
  margin-left: -50vw;
  /* centraliza full-bleed */
  margin-right: -50vw;
  background: #000;
  /* fundo sólido para não “vazar” cinza nas bordas */
}

.vt-hero .vt-hero-carousel {
  position: relative;
  overflow: hidden;
  height: clamp(220px, 40vw, 560px);
}

.vt-hero .vt-hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .5s ease;
}

.vt-hero .vt-hero-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.vt-hero .vt-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* overlay central */
.vt-hero .vt-hero-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, .36) 0%, rgba(0, 0, 0, .18) 40%, rgba(0, 0, 0, .10) 100%);
}

.vt-hero .vt-hero-overlay-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.vt-hero .vt-hero-title {
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: clamp(28px, 6vw, 64px);
  line-height: 1.06;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.vt-hero .vt-hero-subtitle {
  margin: 14px auto 0;
  color: #e5e7eb;
  font-size: clamp(14px, 2.2vw, 20px);
  max-width: 900px;
  line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

/* setas e pontinhos */
.vt-hero .vt-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 22px;
  line-height: 42px;
  display: none;
  /* escondidas no mobile */
}

.vt-hero .vt-hero-prev {
  left: 12px;
}

.vt-hero .vt-hero-next {
  right: 12px;
}

.vt-hero .vt-hero-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  display: flex;
  gap: 8px;
}

.vt-hero .vt-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, .6);
}

.vt-hero .vt-hero-dot.is-active {
  background: #fff;
}

/* fallback sem imagem */
.vt-hero .vt-hero-fallback {
  position: relative;
  height: clamp(220px, 40vw, 560px);
  background: var(--cor-navbar);
}

/* em telas maiores mostramos setas */
@media (min-width: 901px) {
  .vt-hero .vt-hero-arrow {
    display: inline-block;
  }
}

/* 1440px+: sobe um pouco o teto */
@media (min-width: 1440px) {
  .vt-hero .vt-hero-carousel {
    height: clamp(260px, 40vw, 680px);
  }

  .vt-hero .vt-hero-fallback {
    height: clamp(260px, 40vw, 680px);
  }
}

/* 1920px+: usa o 768px que você viu funcionar bem */
@media (min-width: 1920px) {
  .vt-hero .vt-hero-carousel {
    height: clamp(320px, 40vw, 768px);
  }

  .vt-hero .vt-hero-fallback {
    height: clamp(320px, 40vw, 768px);
  }
}

/* ===================== DESTAQUES (cards/carrossel) ===================== */
.vt-highlight-head {
  text-align: Left;
  margin: 40px auto 18px auto;
  margin-left: 65px;
}

.vt-highlight-title {
  margin: 0;
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 48px;
}

.vt-highlight-underline {
  text-align: left;
  width: 72px;
  height: 4px;
  border-radius: 4px;
  background: var(--cor-botao);
  box-shadow: 0 0 12px rgba(0, 0, 0, .25);
}

.vt-deck-wrap {
  position: relative;
  padding: 0 64px;
  /* <<< cria área para as setas ficarem fora dos cards */
}

.vt-deck {
  display: grid;
  grid-auto-flow: column;
  gap: 22px;
  grid-auto-columns: calc((100% - 66px) / 4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 1px;
  padding: 6px 2px 10px;
  -ms-overflow-style: none;
  scrollbar-width: none;

  align-items: stretch;
  /* <<< garante altura uniforme dos itens */
}

.vt-deck::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1200px) {
  .vt-deck {
    grid-auto-columns: calc((100% - 44px) / 3);
  }

  /* 3 cards */
}

@media (max-width: 900px) {
  .vt-deck {
    grid-auto-columns: calc((100% - 22px) / 2);
  }

  /* 2 cards */
  .vt-deck-wrap {
    padding: 0;
  }
}

@media (max-width: 620px) {
  .vt-deck {
    grid-auto-columns: 88%;
  }

  /* 1 quase cheio */
}

/* setas laterais */
.vt-deck-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid var(--cor-botao);
  background: transparent;
  color: var(--cor-botao);
  font-size: 28px;
  line-height: 42px;
  cursor: pointer;
  display: none;
  /* escondidas em mobile/touch (o deck rola com swipe) */
}

.vt-deck-prev {
  left: 16px;
}

/* <<< agora ficam no “gutter” do wrapper */
.vt-deck-next {
  right: 16px;
}

@media (min-width: 901px) {
  .vt-deck-arrow {
    display: inline-block;
  }
}

/* CARD */
.vt-cardX {
  scroll-snap-align: start;
  display: flex;
  /* <<< vira um contêiner flex vertical */
  flex-direction: column;
  height: 100%;
  /* <<< ocupa toda a altura do grid track */
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.vt-cardX-cover {
  position: relative;
  aspect-ratio: 16/10;
  background: #111;
  overflow: hidden;
}

.vt-cardX-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vt-cardX-cover-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, .85) 100%);
}

.vt-cardX-badges {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vt-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  background: rgba(15, 23, 42, .65);
  border: 1px solid rgba(226, 232, 240, .18);
}

.vt-chip-new {
  background: #0b1225;
  border-color: rgba(226, 232, 240, .14);
  color: #f8fafc;
}

.vt-chip-trend {
  background: #1e293b;
  color: #fff;
}

.vt-chip-emph {
  background: #f97316;
  color: #fff;
}

.vt-cardX-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vt-cardX-title {
  margin: 0;
  color: #fff;
  font-weight: 800;
  line-height: 1.25;
  font-size: 20px;
}

.vt-cardX-title a {
  color: black;
  text-decoration: none;
}

.vt-cardX-title a:hover {
  opacity: .9;
}

.vt-cardX-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  background: #0b1225;
  color: #cbd5e1;
  border: 1px solid rgba(226, 232, 240, .08);
}

/* CTA do card */
.vt-cardX-cta {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  border: 2px solid #f97316;
  color: #f97316;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}

.vt-cardX-cta:hover {
  background: rgba(249, 115, 22, .08);
}

/* Categoria posicionada acima do botão */
.vt-cardX-category {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  background: #0b1225;
  color: #cbd5e1;
  border: 1px solid rgba(226, 232, 240, .08);
}


/* Garante o botão no rodapé do card */
.vt-cardX-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  /* <<< ocupa o espaço livre no card */
}

.vt-cardX-cta {
  margin-top: auto;
  /* <<< gruda no rodapé do card */
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  border: 2px solid #f97316;
  color: #f97316;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}

/* ===== THEME: Destaques (usa vars injetadas pelo EJS) ===== */


/* Título e sublinhado */
.vt-highlight-title {
  color: var(--hl-title);
}

.vt-highlight-underline {
  background: var(--hl-underline);
}

/* Card */
#destaques .vt-cardX {
  background: var(--hl-card-bg);
}

#destaques .vt-cardX-body {
  color: var(--hl-card-text);
}

#destaques .vt-cardX-title {
  color: var(--hl-card-text);
}

#destaques .vt-cardX-title a {
  color: var(--hl-card-text);
}

/* Botão do card */
#destaques .vt-cardX-cta {
  border-color: var(--hl-btn-bg);
  background: var(--hl-btn-bg);
  color: var(--hl-btn-text);
}

#destaques .vt-cardX-cta:hover {
  filter: brightness(1.06);
  background: var(--hl-btn-bg);
  color: var(--hl-btn-text);
}

.vt-cardX-topbadges {
  position: absolute;
  top: 10px;
  left: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
  /* acima da imagem e abaixo de qualquer overlay futuro */
}

/* Chips/tags */
#destaques .vt-chip {
  background: var(--hl-tag-bg);
  color: var(--hl-tag-text);
  border-color: color-mix(in srgb, var(--hl-tag-bg) 80%, #000000);
}

#destaques .vt-chip-new,
#destaques .vt-chip-trend,
#destaques .vt-chip-emph {
  background: var(--hl-tag-bg);
  color: var(--hl-tag-text);
  border-color: color-mix(in srgb, var(--hl-tag-bg) 80%, #000000);
}

/* ===================== CURSOS (filtro + grid) ===================== */
.vt-cursos-head {
  max-width: 940px;
  margin: 40px auto 18px auto;
  text-align: center;
}

.vt-cursos-title {
  margin: 0 0 14px 0;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(22px, 3.4vw, 48px);
}

/* Pílulas */
.vt-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 2px auto 12px auto;
}

.vt-cat {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, .35);
  background: transparent;
  color: inherit;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}

.vt-cat.is-active {
  background: var(--cor-botao);
  border-color: var(--cor-botao);
  color: #fff;
}

/* Busca */
.vt-cursos-filtro {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.vt-q {
  width: min(680px, 90%);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .35);
  color: inherit;
  outline: none;
}

.vt-q::placeholder {
  color: #94a3b8;
}

.vt-q-btn {
  padding: 10px 14px;
  border-radius: 12px;
  border: 0;
  cursor: default;
  background: var(--cor-botao);
  color: #fff;
  font-weight: 700;
  opacity: .85;
}

/* ---------- GRID: cards menores, lado a lado ---------- */
/* Forçamos o grid aqui para não herdar nada dos Destaques */
.vt-cursos-section .vt-cursos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 50px;
}

@media (max-width: 1200px) {
  .vt-cursos-section .vt-cursos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .vt-cursos-section .vt-cursos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .vt-cursos-section .vt-cursos-grid {
    grid-template-columns: 1fr;
  }
}


/* ---------- Card compacto da seção Cursos (isolado) ---------- */
.vt-cursos-section .vt-course {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
  min-height: 260px;
  /* altura confortável sem “esticar” */
}

/* capa mais baixa */
.vt-cursos-section .vt-course-cover {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  height: clamp(110px, 18vw, 160px);
}

.vt-cursos-section .vt-course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vt-cursos-section .vt-course-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, .88) 100%);
}

.vt-cursos-section .vt-course-cat {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .78rem;
  background: var(--cor-botao);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* corpo enxuto */
.vt-cursos-section .vt-course-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vt-cursos-section .vt-course-title {
  margin: 0;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  font-size: clamp(16px, 1.5vw, 19px);
}

.vt-cursos-section .vt-course-title a {
  color: black;
  text-decoration: none;
}

.vt-cursos-section .vt-course-title a:hover {
  opacity: .9;
}

/* CTA compacto */
.vt-cursos-section .vt-course-cta {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  border: 2px solid var(--cor-botao);
  color: var(--cor-botao);
  font-weight: 700;
  font-size: .95rem;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}

.vt-cursos-section .vt-course-cta:hover {
  background: color-mix(in srgb, var(--cor-botao) 12%, transparent);
}

/* Em telas bem pequenas, reduz ainda mais a capa */
@media (max-width: 640px) {
  .vt-cursos-section .vt-course-cover {
    height: 140px;
  }
}

/* ==== Fix: CTA colado no rodapé dos cards da seção CURSOS ==== */
.vt-cursos-section .vt-cursos-grid {
  align-items: stretch;
  /* todas as colunas com mesma altura */
}

.vt-cursos-section .vt-course {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* ocupa toda a altura da célula do grid */
  min-height: 260px;
  /* (ajuste se quiser menor/maior) */
}

.vt-cursos-section .vt-course-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  /* <<< cresce para ocupar o espaço livre */
}

.vt-cursos-section .vt-course-cta {
  margin-top: auto;
  /* <<< empurra o botão para o fundo */
  display: block;
}

/* ===== THEME: Cursos (usa vars injetadas pelo EJS) ===== */

/* Título */
.vt-cursos-title {
  color: var(--crs-title);
}

/* Pílulas de filtro */
.vt-cat {
  background: var(--crs-filter-bg);
  color: var(--crs-filter-text);
  border-color: var(--crs-filter-bg);
}

.vt-cat.is-active {
  background: var(--crs-filter-bg);
  color: var(--crs-filter-text);
  border-color: var(--crs-filter-bg);
}

/* Busca */
.vt-cursos-filtro .vt-q {
  background: var(--crs-input-bg);
  color: var(--crs-input-text);
  border: 1px solid color-mix(in srgb, var(--crs-input_bg, var(--crs-input-bg)) 40%, #00000022);
}

.vt-cursos-filtro .vt-q::placeholder {
  color: color-mix(in srgb, var(--crs-input-text) 40%, #999);
}

.vt-cursos-filtro .vt-q-btn {
  background: var(--crs-search-bg);
  color: var(--crs-search-text);
  opacity: 1;
  /* remove a opacidade antiga */
}

/* Cards de curso */
.vt-cursos-section .vt-course {
  background: var(--crs-card-bg);
  border: 1px solid color-mix(in srgb, var(--crs-card-bg) 70%, #00000020);
}

.vt-cursos-section .vt-course-body {
  color: var(--crs-card-text);
}

.vt-cursos-section .vt-course-title {
  color: var(--crs-card-text);
}

.vt-cursos-section .vt-course-title a {
  color: var(--crs-card-text);
}

/* CTA do card */
.vt-cursos-section .vt-course-cta {
  border-color: var(--crs-btn-bg);
  background: var(--crs-btn-bg);
  color: var(--crs-btn-text);
}

.vt-cursos-section .vt-course-cta:hover {
  filter: brightness(1.06);
  background: var(--crs-btn-bg);
  color: var(--crs-btn-text);
}

/* Tag de categoria no card */
.vt-cursos-section .vt-course-cat {
  background: var(--crs-tag-bg);
  color: var(--crs-tag-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* Tags no topo da imagem (Cursos) */
.vt-cursos-section .vt-course-topbadges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
}

/* Força as cores dos chips na seção Cursos a usarem as variáveis da seção */
.vt-cursos-section .vt-course-topbadges .vt-chip,
.vt-cursos-section .vt-course-cat {
  background: var(--crs-tag-bg);
  color: var(--crs-tag-text);
  border: 1px solid color-mix(in srgb, var(--crs-tag-bg) 80%, #000);
}


/* ===================== DIFERENCIAIS (estilo do mock, fundo branco) ===================== */
.vt-diffs {
  color: var(--cor-texto);
  padding: 48px 0;
}

.vt-diffs .vt-section-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

.vt-diffs-title {
  margin: 0 0 24px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(24px, 3.6vw, 48px);
}

.vt-diffs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .vt-diffs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .vt-diffs-grid {
    grid-template-columns: 1fr;
  }
}

.vt-diff {
  text-align: center;
  background: #fff;
  /* card branco sobre fundo branco */
  border: 1px solid rgba(2, 6, 23, .08);
  border-radius: 16px;
  padding: 28px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  /* leve relevo como no exemplo */
}

.vt-diff-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--cor-botao);
}

.vt-diff-icon img {
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
  display: block;
}

.vt-diff-title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 20px;
}

.vt-diff-desc {
  margin: 0;
  color: #475569;
  line-height: 1.6;
}

.vt-diff-icon i {
  font-size: 38px;
  line-height: 1;
  color: inherit;
  display: inline-block;
}

/* ===== THEME: Diferenciais ===== */
.vt-diffs-title {
  color: var(--diffs-title);
}

.vt-diff {
  background: var(--diffs-card-bg);
  /* borda suave em função do fundo escolhido */
  border: 1px solid color-mix(in srgb, var(--diffs-card_bg, var(--diffs-card-bg)) 10%, #00000020);
}

.vt-diff-title {
  color: var(--diffs-card-title);
}

.vt-diff-desc {
  color: var(--diffs-card-text);
}

.vt-diff-icon {
  color: var(--diffs-icon);
}

/* garante o tamanho/cor herdados do container */
.vt-diff-icon i {
  font-size: 38px;
  line-height: 1;
  color: inherit;
  display: inline-block;
}


/* ===================== CERTIFICADO / MEC ===================== */
.vt-cert {
  padding: 48px 0 56px;
  color: #fff;
  /* textos brancos sobre fundo escuro atual */
}

.vt-cert .vt-section-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

.vt-cert-title {
  margin: 0 0 26px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(24px, 3.6vw, 44px);
}

.vt-cert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}

@media (max-width: 900px) {
  .vt-cert-grid {
    grid-template-columns: 1fr;
  }
}

/* Lista de bullets */
.vt-cert-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: grid;
  gap: 14px;
}

.vt-cert-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(238, 67, 0, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
}

.vt-cert-ico {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--cor-botao);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.vt-cert-text {
  font-weight: 700;
  letter-spacing: .2px;
  color: black;
}

/* CTA */
.vt-cert-cta-wrap {
  margin-top: 14px;
}

.vt-cert-cta {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--cor-botao);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.vt-cert-cta:hover {
  filter: brightness(1.06);
}

.vt-cert-cta.is-disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Visual do certificado — layout igual ao mock */
.vt-cert-visual {
  position: relative;
  height: clamp(240px, 42vw, 460px);
  isolation: isolate;

  /* controles de posição — pode ajustar se quiser milimetrar */
  --cert-x: 40%;
  /* posição horizontal do certificado (0% esquerda — 50% centro) */
  --bg-x: 62%;
  /* posição do blur de fundo */
  --bg-y: 58%;
}

.vt-cert-bg {
  position: absolute;
  z-index: 1;
  width: 62%;
  max-width: 740px;
  left: var(--bg-x);
  top: var(--bg-y);
  transform: translate(-50%, -50%) scale(1.02);
}

.vt-cert-img {
  position: absolute;
  z-index: 2;
  max-width: 720px;
  left: var(--cert-x);
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 6px;
}

.vt-cert-selo {
  position: absolute;
  z-index: 3;
  width: min(180px, 20%);
  left: var(--cert-x);
  bottom: 10%;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35));
}

/* Mobile: centraliza tudo e amplia certificado */
@media (max-width: 900px) {
  .vt-cert-visual {
    --cert-x: 50%;
    --bg-x: 50%;
    --bg-y: 60%;
  }

  .vt-cert-img {
    width: 86%;
  }

  .vt-cert-bg {
    width: 90%;
  }

  .vt-cert-selo {
    bottom: 8%;
  }
}

/* ===== THEME: Certificado / MEC ===== */

/* Título da seção */
.vt-cert-title {
  color: var(--cert-title);
}

/* Texto do bullet (span.vt-cert-text) */
.vt-cert-text {
  color: var(--cert-text);
}

/* Caixa do ícone à esquerda do bullet */
.vt-cert-ico {
  background: var(--cert-ico-bg);
  color: var(--cert-svg);
  /* o SVG usa fill="currentColor", então herda daqui */
}

/* Borda dos itens da lista */
.vt-cert-list li {
  border-color: var(--cert-item-border);
}

/* Botão CTA */
.vt-cert-cta {
  background: var(--cert-btn-bg);
  color: var(--cert-btn-text);
}

/* (opcional) foco/hover sem mudar cor definida */
.vt-cert-cta:hover {
  filter: brightness(1.04);
}


/* ===================== LEAD / CONTATO ===================== */
.vt-lead {
  padding: 48px 0 56px;
  color: #fff;
}

.vt-lead .vt-section-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

.vt-lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}

@media (max-width: 900px) {
  .vt-lead-grid {
    grid-template-columns: 1fr;
  }
}

.vt-lead-title {
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(26px, 4.4vw, 48px);
}

.vt-lead-desc {
  margin: 0;
  color: #464e57;
  line-height: 1.8;
}

.vt-lead-right {
  width: 100%;
}

.vt-lead-panel {
  border: 2px solid rgb(255 104 0 / 28%);
  border-radius: 16px;
  padding: 24px;
}

.vt-lead-form-title {
  margin: 0 0 16px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(18px, 2.6vw, 24px);
}

/* inputs */
.vt-inp {
  width: 100%;
  display: block;
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 12px;
  outline: none;
  border: 1px solid rgba(148, 163, 184, .35);
  color: #000000;
}

.vt-inp::placeholder {
  color: #94a3b8;
}

/* botão */
.vt-lead-btn {
  width: 100%;
  margin-top: 10px;
  padding: 14px 18px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--cor-botao);
  color: #fff;
  font-weight: 800;
}

.vt-lead-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}

/* alerts (flash) */
.vt-alert {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
}

.vt-ok {
  background: rgba(34, 197, 94, .15);
  border: 1px solid rgba(34, 197, 94, .35);
  color: #000000;
}

.vt-err {
  background: rgba(239, 68, 68, .15);
  border: 1px solid rgba(239, 68, 68, .35);
  color: #fecaca;
}

/* utilidade para labels escondidos */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== THEME: Lead / Contato ===== */

/* Títulos e textos */
.vt-lead-title {
  color: var(--lead-title);
}

.vt-lead-desc {
  color: var(--lead-desc);
}

.vt-lead-form-title {
  color: var(--lead-form-title);
}

/* Card (painel) */
.vt-lead-panel {
  background: var(--lead-panel-bg);
  border-color: var(--lead-panel-border);
}

/* Inputs */
.vt-inp {
  background: var(--lead-inp-bg);
  color: var(--lead-inp-text);
}

/* (opcional) deixa o placeholder um pouco mais claro relativo ao texto */
.vt-inp::placeholder {
  color: color-mix(in srgb, var(--lead-inp-text) 40%, #ffffff);
}

/* Botão */
.vt-lead-btn {
  background: var(--lead-btn-bg);
  color: var(--lead-btn-text);
}

.vt-lead-btn:hover {
  filter: brightness(1.04);
}


/* ===================== SOBRE + GARANTIAS ===================== */
.vt-about {
  padding: 56px 0 68px;
  color: #fff;
}

.vt-about .vt-section-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

.vt-about-title {
  margin: 0 0 12px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(26px, 4vw, 48px);
}

.vt-about-lead {
  margin: 0 auto 28px;
  text-align: center;
  line-height: 1.8;
  max-width: 980px;
  color: #3b3737;
}

/* === Garantias: alinhamento absoluto dos selos === */

/* grid responsivo dos cards (mantém o que você já tinha) */
.vt-garantias {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 1024px) { .vt-garantias { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .vt-garantias { grid-template-columns: 1fr; } }

/* cada card vira um grid com linhas "fixas": [ícone] [título] [desc] [flex]  */
.vt-garantia {
  display: grid;
  grid-template-rows: 128px auto auto 1fr; /* <- 1ª linha fixa para o ícone */
  justify-items: center;
  align-items: start;
  text-align: center;

  /* mantém seu visual */
  border: 1px solid rgba(247,119,0,.5);
  border-radius: 16px;
  padding: 36px 28px;
  min-height: 280px;

  /* cores do tema (com fallback) */
  background: var(--about-card-bg, #fff);
  border-color: var(--about-card-border, rgba(29,78,216,.35));
}

/* faixa do ícone: sempre mesma área em todos os cards */
.vt-garantia-ico {
  width: 120px;
  height: 120px;            /* <= bate com a 1ª linha do grid (128px com folga do margin) */
  margin: 0 0 8px 0;        /* controla a distância do título */
  display: flex;
  align-items: center;
  justify-content: center;

  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* imagem ocupa a caixa sem distorcer e SEM “pular” */
.vt-garantia-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* títulos e descrição com alturas mínimas previsíveis */
.vt-garantia-titulo {
  margin: 10px 0 12px;
  font-weight: 800;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.25;
  min-height: 2.6em;                 /* ~2 linhas de reserva para alinhar entre cards */
  color: var(--about-card-title, #0f172a);
}
.vt-garantia-desc {
  margin: 0;
  color: var(--about-card-text, #374151);
  line-height: 1.7;
  max-width: 46ch;
}

/* mobile: mantém proporções */
@media (max-width: 640px) {
  .vt-garantia { min-height: 260px; padding: 28px 22px; grid-template-rows: 112px auto auto 1fr; }
  .vt-garantia-ico { width: 100px; height: 100px; }
}

/* ===== THEME: Sobre + Garantias ===== */

/* Título da seção */
.vt-about-title {
  color: var(--about-title);
}

/* Card de garantia */
.vt-garantia {
  background: var(--about-card-bg);
  border-color: var(--about-card-border);
}

/* Tipografia interna do card */
.vt-garantia-titulo {
  color: var(--about-card-title);
}

.vt-garantia-desc {
  color: var(--about-card-text);
}


/* ===================== PRONTO PARA COMEÇAR? (lead2) ===================== */
/* ===================== PRONTO PARA COMEÇAR? (lead2) ===================== */
.vt-lead2 {
  padding: 56px 0;
}

.vt-lead2 .vt-section-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

.vt-lead2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}

@media (max-width: 900px) {
  .vt-lead2-grid {
    grid-template-columns: 1fr;
  }
}

/* Título + descrição (coluna direita) */
.vt-lead2-title {
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(26px, 4.4vw, 48px);
  color: var(--lead2-title, #0f172a);
}

.vt-lead2-desc {
  margin: 0;
  line-height: 1.8;
  max-width: 60ch;
  color: var(--lead2-desc, #32363a);
}

/* Card (coluna esquerda) */
.vt-lead2-panel {
  background: var(--lead2-card-bg, #ffffff);
  border: 1px solid var(--lead2-card-border, #e5e7eb);
  border-radius: 16px;
  padding: 24px;
}

/* Título do card */
.vt-lead2-form-title {
  margin: 0 0 16px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(18px, 2.6vw, 24px);
  color: var(--lead2-card-title, #0f172a);
}

/* Inputs (escopo apenas do lead2) */
.vt-lead2 .vt-inp {
  width: 100%;
  display: block;
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 12px;
  outline: none;
  background: var(--lead2-input-bg, #ffffff);
  color: var(--lead2-input-text, #0f172a);
  border: 1px solid var(--lead2-input-border, #94a3b8);
}

.vt-lead2 .vt-inp::placeholder {
  /* tom do placeholder derivado do texto do input (sem usar opacidade global) */
  color: color-mix(in srgb, var(--lead2-input-text, #0f172a) 60%, white);
}

.vt-lead2 .vt-inp:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lead2-input-border, #94a3b8) 30%, transparent);
}

/* Botão (escopo apenas do lead2) */
.vt-lead2 .vt-lead-btn {
  width: 100%;
  margin-top: 10px;
  padding: 14px 18px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--lead2-btn-bg, var(--cor-botao, #0ea5e9));
  color: var(--lead2-btn-text, #ffffff);
  font-weight: 800;
}

.vt-lead2 .vt-lead-btn:hover {
  filter: brightness(1.05);
}

.vt-lead2 .vt-lead-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}

/* Alerts (mantidos) */
.vt-alert {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
}

.vt-ok {
  background: #ecfdf5;
  border: 1px solid #86efac;
  color: #065f46;
}

.vt-err {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #7f1d1d;
}


/* ===================== FAQ (fundo branco, texto preto, borda orangered) ===================== */
/* ===================== FAQ ===================== */
.vt-faqs {
  padding: 48px 0 56px;
  /* cor geral da seção (fallback) */
  color: #0f172a;
}

.vt-faqs .vt-section-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

.vt-faqs-title {
  margin: 0 0 18px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(22px, 3.6vw, 48px);
  color: var(--faq-title, #0f172a);
}

.vt-faq-list {
  display: grid;
  gap: 14px;
}

/* Cabeçalho da pergunta */
.vt-faq-q {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;

  background: var(--faq-q-bg, #ffffff);
  color: var(--faq-q-text, #0f172a);
  border: 1px solid var(--faq-q-border, orangered);
}

.vt-faq-q .vt-faq-qtext {
  color: var(--faq-q-text, #0f172a);
}

.vt-faq-ico {
  transition: transform .2s ease;
}

.vt-faq[data-open="1"] .vt-faq-ico {
  transform: rotate(180deg);
}

/* Conteúdo da resposta (opcionalmente herdando as cores para ficar coerente) */
.vt-faq-a {
  border: 1px solid var(--faq-q-border, orangered);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 0 18px;

  background: var(--faq-q-bg, #ffffff);
  color: var(--faq-q-text, #0f172a);
}

.vt-faq-a p {
  margin: 12px 0 16px;
  line-height: 1.7;
}


/* ===================== FOOTER ===================== */
.vt-footerX {
  background: var(--cor-navbar);
  color: var(--cor-navbar-texto);
}

.vt-footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 28px 16px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 28px;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .vt-footer-inner {
    grid-template-columns: 1fr;
  }
}

.vt-foot-col {
  min-width: 0;
}

.vt-foot-title {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 18px;
}

.vt-foot-text {
  margin: 6px 0 12px;
  opacity: .9;
}

.vt-foot-brandlink {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 800;
  font-size: 20px;
}

.vt-foot-brandlink img {
  height: 34px;
  width: auto;
  display: block;
}

.vt-foot-links {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 6px;
}

.vt-foot-links a {
  text-decoration: none;
  color: inherit;
  opacity: .9;
}

.vt-foot-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.vt-foot-emec {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vt-foot-qr {
  width: 250px;
  height: auto;
  display: block;
}

.vt-foot-qr--mobile {
  display: none;
}

/* escondido no desktop */
@media (max-width:640px) {
  .vt-foot-emec {
    flex-direction: column;
    text-align: center;
  }

  .vt-foot-qr--desktop {
    display: none;
  }

  /* some no mobile */
  .vt-foot-qr--mobile {
    display: block;
  }

  /* vira o link clicável */
}

.vt-foot-link {
  color: var(--botao);
  text-decoration: underline;
  font-weight: 600;
}


.vt-foot-social {
  display: flex;
  gap: 10px;
}

.vt-foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: var(--cor-navbar-texto);
  text-decoration: none;
  font-weight: 800;
}

.vt-foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 12px 16px;
  text-align: center;
  color: rgba(255, 255, 255, .9);
}

/* Botão flutuante do WhatsApp */
.vt-whfab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;               /* verde WhatsApp */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 1000;
  box-shadow:
    0 10px 24px rgba(37, 211, 102, .35),
    0 2px 6px rgba(0, 0, 0, .18);
  transition: transform .15s ease, box-shadow .2s ease, opacity .15s ease;
}
.vt-whfab:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px rgba(37, 211, 102, .42),
    0 3px 8px rgba(0, 0, 0, .2);
  opacity: .98;
}
.vt-whfab:active{ transform: translateY(0); }
.vt-whfab .fa-whatsapp{
  font-size: 24px;
  line-height: 1;
}

@media (max-width: 640px){
  .vt-whfab{ right: 12px; bottom: 12px; width: 52px; height: 52px; }
}


/* ===== COOPERAÇÃO TÉCNICO-CIENTÍFICA (FINAL) ===== */
.coop { padding: 48px 0; }

.coop__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.coop__title {
  margin: 0 0 18px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(22px, 3.6vw, 48px);
  color: var(--coop-title);
}

.coop__card {
  background: var(--coop-card-bg);
  border: 1px solid var(--coop-card-border);
  color: var(--coop-text);
  border-radius: 10px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}

/* LOGOS */
.coop__logos{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;          /* vertical / horizontal */
  flex-wrap: wrap;         /* <<< permite quebrar no mobile */
  min-height: 96px;
}

.coop__logo{
  max-width: min(200px, 42vw);
  max-height: 64px;
  height: auto;
  object-fit: contain;
  display: block;
}

.coop__logo--text{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;     /* quebra só no mobile (abaixo) */
  color: var(--coop-text);
}

/* divisor entre as logos (vertical por padrão) */
.coop__divider{
  height: 56px;
  background: color-mix(in srgb, var(--coop-text) 60%, transparent);
  display: inline-block;
}

.coop__text{
  font-size: 15px;
  line-height: 1.6;
  color: var(--coop-text);
}
.coop__text p + p { margin-top: 10px; }

/* ===== Responsivo ===== */
@media (max-width: 900px){
  .coop__card{ grid-template-columns: 1fr; }
  .coop__logos{ justify-content: center; }
  .coop__text{ text-align: left; }
}

/* telas pequenas: evitar corte */
@media (max-width: 560px){
  .coop__card{
    gap: 16px;
    padding: 16px;
  }
  .coop__logos{
    min-height: unset;          /* não força altura fixa */
  }
  .coop__logo{
    max-height: 48px;
    max-width: 70vw;
  }
  .coop__logo--text{
    white-space: normal;        /* pode quebrar o nome do parceiro */
    text-align: center;
  }
  /* divisor vira linha horizontal e força quebra entre as logos */
  .coop__divider{
    width: 100%;
    height: 1px;
    flex: 0 0 100%;
  }
}
/* alternativa */
@media (max-width:560px){ .coop__divider{ display:none; } }


/* ===== /COOP ===== */





/* seção + container com gutter */
.vt-dep{
  padding: clamp(2rem, 4vw, 3rem) 0;
}
.vt-dep .vt-container{
  padding-inline: var(--dep-gutter);
}

/* título */
.vt-dep-title{
  color: var(--dep-title);
    margin: 0 0 18px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: clamp(22px, 3.6vw, 48px);
}

/* carrossel */
.dep-carousel{ position: relative; }

/* trilho com snap e gutter nas laterais */
.dep-track{
  display: flex;
  gap: var(--dep-gap);
  overflow-x: auto;
  padding: .5rem var(--dep-gutter);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--dep-gutter);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.dep-track::-webkit-scrollbar{ display: none; }

/* CARD base (cores vindas do theme via CSS vars) */
.dep-card{
  flex: 0 0 100%;                             /* mobile: 1 card por vez */
  background: var(--dep-card-bg);
  color: var(--dep-card-text);
  border: 1px solid var(--dep-card-border);
  border-radius: var(--dep-card-radius);
  padding: var(--dep-card-pad);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* tablet: 2 cards por página */
@media (min-width: 640px){
  .dep-card{
    flex-basis: calc((100% - var(--dep-gap)) / 2);
  }
}

/* desktop: 3 cards por página */
@media (min-width: 1024px){
  .dep-card{
    flex-basis: calc((100% - (var(--dep-gap) * 2)) / 3);
  }
}

/* tipografia interna (opcional) */
.dep-card .dep-text{ line-height: 1.5; }
.dep-card .dep-author{ font-size: .9rem; opacity: .85; }

/* botões de navegação posicionados dentro do gutter */
.dep-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--dep-card-border);
  background: var(--dep-card-bg);
  color: var(--dep-card-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.dep-prev{ left: calc(var(--dep-gutter) - 1.25rem); }
.dep-next{ right: calc(var(--dep-gutter) - 1.25rem); }

.dep-nav:focus-visible{
  outline: 2px solid var(--dep-card-border);
  outline-offset: 2px;
}


/* ===== e-MEC: QR no desktop, link no mobile ===== */
.vt-foot-qr--desktop { display: none; }
.vt-foot-link--mobile { display: inline-flex; align-items: center; gap: .5rem; }

.vt-foot-link,
.vt-foot-link--mobile {
  text-decoration: underline;
}

.vt-foot-link--mobile.is-disabled {
  opacity: .6;
  pointer-events: none;
  text-decoration: none;
}

@media (min-width: 768px) {
  .vt-foot-qr--desktop { display: block; }
  .vt-foot-link--mobile { display: none; }
}

/* ====== COURSE PAGE ====== */
.vt-course-hero{ padding: clamp(2rem, 4vw, 3rem) 0; }
.vt-course-hero-grid{
  display:grid; gap:1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px){
  .vt-course-hero-grid{ grid-template-columns: 1.2fr 1fr; align-items: center; }
}
.vt-course-hero-cover img{
  width: 100%; height: 320px; object-fit: cover; border-radius: .75rem;
  display:block;
}
@media (min-width:1024px){ .vt-course-hero-cover img{ height: 420px; } }
.vt-course-title{ font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: 0 0 .5rem 0; }
.vt-course-meta{ margin: .5rem 0 1rem 0; display:flex; flex-wrap: wrap; gap:.75rem 1rem; color: #334155; }
.vt-course-meta li{ list-style: none; }
.vt-course-cta-row .vt-btn{ display:inline-flex; align-items:center; justify-content:center; padding:.65rem 1rem; }

/* Grade */
.vt-grade{ padding: clamp(2rem, 4vw, 3rem) 0; }
.vt-grade-title{ font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; margin-bottom: .75rem; }
.vt-grade-list{
  display:grid; gap:.5rem;
}
@media (min-width:768px){
  .vt-grade-list{ grid-template-columns: 1fr 1fr; }
}
@media (min-width:1200px){
  .vt-grade-list{ grid-template-columns: 1fr 1fr 1fr; }
}
.vt-grade-item{
  background: var(--crs-card-bg);
  color: var(--crs-card-text);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .5rem;
  padding: .75rem .9rem;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.vt-grade-name{ font-weight: 600; }
.vt-grade-hours{ opacity:.8; }

/* Enroll (form + preço) */
.vt-enroll{ padding: clamp(2rem, 4vw, 3rem) 0; }
.vt-enroll-grid{
  display:grid; gap:1rem; grid-template-columns: 1fr;
}
@media (min-width:1024px){
  .vt-enroll-grid{ grid-template-columns: 1.1fr .9fr; align-items: start; }
}
.vt-enroll-left .vt-lead-panel{
  background: var(--lead2-card-bg);
  border: 1px solid var(--lead2-card-border);
  border-radius: .75rem; padding: 1rem;
  position: sticky; top: 1rem;
}
.vt-lead-btn{
  background: var(--lead2-btn-bg); color: var(--lead2-btn-text);
}
.vt-price-box{
  background: var(--lead2-card-bg);
  border: 1px solid var(--lead2-card-border);
  border-radius: .75rem; padding: 1rem;
  display:flex; flex-direction:column; gap:.75rem;
}
.vt-price-title{ font-weight: 700; margin: 0 0 .25rem 0; }
.vt-price-row{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.vt-price-range strong{ white-space: nowrap; }
.vt-price-info strong{ opacity:.9; }

/* (As seções de Depoimentos, Certificado e Coop já têm CSS prontos) */

/* =================== COURSE INFO HERO =================== */
.vt-course-info {
  position: relative;
  color: #fff;
  padding: clamp(2rem, 4vw, 3rem) 0;
  overflow: hidden;
}
.vt-course-info::before{
  content:"";
  position:absolute; inset:0;
  background: center/cover no-repeat var(--info-bg);
  filter: brightness(.35);
}
.vt-course-info::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.25) 100%);
}
.vt-course-info-inner{
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* breadcrumb */
.vt-bc{ color: rgba(255,255,255,.8); margin-bottom: .75rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.vt-bc a{ color: rgba(255,255,255,.85); text-decoration: none; }
.vt-bc a:hover{ text-decoration: underline; }
.vt-bc span{ opacity:.8; }

/* grid */
.vt-course-info-grid{
  display:grid; gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 1024px){
  .vt-course-info-grid{ grid-template-columns: 1.6fr 1fr; }
}

/* título */
.vt-ci-title{
  font-size: clamp(1.75rem, 4.2vw, 3rem);
  font-weight: 800; line-height: 1.15; margin: .25rem 0 .75rem 0;
}

/* chips */
.vt-ci-pills{ display:flex; gap:.5rem .75rem; flex-wrap: wrap; margin: 0 0 1rem 0; padding:0; }
.vt-ci-pills .vt-pill{
  list-style:none; text-transform: uppercase; font-weight: 700;
  font-size: .8rem; letter-spacing:.3px;
  padding: .45rem .7rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06); color: #fff;
  backdrop-filter: blur(2px);
}

/* subtítulo e “quick diffs” */
.vt-ci-sub{ margin: 1rem 0 .5rem; font-size: .95rem; letter-spacing:.4px; opacity:.9; }
.vt-qdiff-grid{ display:grid; gap:.75rem; grid-template-columns: 1fr; }
@media (min-width: 768px){ .vt-qdiff-grid{ grid-template-columns: repeat(3, 1fr); } }
.vt-qdiff{
  display:flex; align-items:center; gap:.6rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .75rem; padding: .9rem 1rem;
}
.vt-qdiff-ico{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px;
  background: var(--cor-botao); color:#fff; font-size: 16px;
}
.vt-qdiff-txt{ font-weight:600; }

/* painel CTA à direita */
.vt-cta-panel{
  background: rgba(11,18,37,.92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  padding: clamp(1rem, 3vw, 1.25rem);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.vt-cta-title{
  margin: 0 0 .5rem 0; text-align:center; line-height:1.25;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800;
}
.vt-cta-accent{ color: var(--cor-botao); display:inline-block; margin-top:.15rem; }
.vt-cta-desc{ text-align:center; opacity:.9; margin: 0 0 1rem 0; }
.vt-cta-actions{ display:grid; gap:.6rem; }
.vt-cta-btn{
  display:flex; align-items:center; justify-content:center;
  border-radius: 999px; padding: .75rem 1rem; font-weight: 700; text-decoration:none;
}
.vt-cta-btn.is-outline{
  border:2px solid var(--cor-botao); color: #fff; background: transparent;
}
.vt-cta-btn.is-solid{
  background: var(--cor-botao); color: #fff; border:2px solid var(--cor-botao);
}
.vt-cta-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* ===== Overrides colorizáveis do Hero do Curso ===== */
.vt-bc, .vt-bc a { color: var(--ci-bc); }
.vt-ci-title { color: var(--ci-title); }

.vt-ci-pills .vt-pill{
  background: var(--ci-tag-bg);
  color: var(--ci-tag-text);
  border-color: var(--ci-tag-text);
}

.vt-ci-sub { color: var(--ci-subtitle); }

.vt-qdiff{
  background: var(--ci-qdiff-bg);
  border-color: var(--ci-qdiff-border);
}
.vt-qdiff-txt{ color: var(--ci-qdiff-text); }
.vt-qdiff-ico{ background: var(--ci-qdiff-ico-bg); color: #fff; }

.vt-cta-panel{
  background: var(--ci-cta-bg);
  border-color: var(--ci-cta-border);
}
.vt-cta-accent{ color: var(--ci-cta-accent); }
.vt-cta-desc{ color: var(--ci-cta-desc); }

.vt-cta-btn.is-solid{
  background: var(--ci-cta-btn-bg);
  border-color: var(--ci-cta-btn-border);
  color: var(--ci-cta-btn-text);
}
.vt-cta-btn.is-outline{
  background: transparent;
  border-color: var(--ci-cta-btn-border);
  color: var(--ci-cta-btn-text);
}

/* ===== Grade do Curso (accordion) ===== */
.vt-grade { padding: clamp(2rem, 4vw, 3rem) 0; }
.vt-grade-title {
  text-align:center; font-weight: 800;
  color:#fff; /* ajuste livre; depois ligamos às cores do parceiro */
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  margin: 0 0 1rem 0;
}

.vt-acc { max-width: 1100px; margin: 0 auto; display:grid; gap: .75rem; }
.vt-acc-item { border-radius: .75rem; }

.vt-acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: 1rem 1.25rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color:#e5e7eb; border-radius: .75rem;
  transition: background .2s ease, border-color .2s ease;
}
.vt-acc-left{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.vt-slot{
  font-size:.75rem; font-weight:700; letter-spacing:.3px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#e5e7eb; border-radius:.5rem; padding:.45rem .6rem;
}
.vt-acc-title{
  font-weight:700; color:#000000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vt-acc-right{ display:flex; align-items:center; gap:.6rem; }
.vt-acc-hours{ color:#cbd5e1; font-weight:600; }
.vt-acc-caret{ transition: transform .2s ease; display:inline-block; }

.vt-acc-body{
  margin-top:.5rem; padding: .75rem 1.25rem 1rem 1.25rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color:#e5e7eb; border-radius: .6rem;
}
.vt-acc-desc{ margin:0 0 .5rem 0; line-height:1.55; }
.vt-acc-meta{ margin:0; padding:0; display:flex; gap:1rem; flex-wrap:wrap; }
.vt-acc-meta li{ list-style:none; opacity:.9; }

.vt-acc-item.is-open .vt-acc-caret{ transform: rotate(-180deg); }

/* ===== Overrides colorizáveis — Grade do Curso ===== */
.vt-grade-title { color: var(--gr-title); }

.vt-acc-head{
  background: var(--gr-head-bg);
  border-color: var(--gr-head-border);
}

.vt-slot{
  background: var(--gr-slot-bg);
  border-color: var(--gr-head-border); /* pode trocar por outra var se desejar */
  color: #e5e7eb; /* mantém legível; se quiser expor esta cor depois, criamos gr_slot_text */
}

.vt-acc-title{ color: var(--gr-item-title); }
.vt-acc-hours{ color: var(--gr-hours); }

.vt-preco-bloco{ margin-top:16px; padding:12px; border:1px dashed #cbd5e1; border-radius:10px; }
.vt-preco-valor{ font-size:1.3rem; font-weight:700; color:#0f172a; }
.vt-preco-parc{ font-size:.95rem; color:#334155; margin-top:4px; }
/* Camadas e clique no modal */
.vt-modal{ pointer-events:none; }              /* raiz não recebe clique */
.vt-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter:saturate(120%) blur(2px);
  z-index:1;
  pointer-events:auto;                         /* pode clicar p/ fechar */
}
.vt-modal__dialog{
  position:relative;
  z-index:2;                                   /* acima do backdrop */
  pointer-events:auto;                         /* permite clicar dentro */
}

.vt-preco-de {
  font-size: 0.9rem;
  color: #6b7280; /* cinza */
  margin-bottom: 0.15rem;
}

.vt-preco-de-valor {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #575656; /* vermelhinho, se quiser */
}

.vt-preco-tag {
  font-size: 0.8rem;
  color: #4b5563;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-bottom: 0.35rem;
  display: inline-block;
}

.vt-preco-valor {
  font-size: 1.2rem;
  font-weight: 700;
}

.vt-preco-valor-num {
  margin-left: 0.25rem;
}