/* ============================
   VARS E BASE
============================ */
:root{
  /* altura do header fixo (o JS atualiza esse valor) */
  --header-h: 64px;
  --gap: 16px;
  --card-radius: 8px;
  --shadow-sm: 0 2px 5px rgba(0,0,0,.1);
  --shadow-md: 0 5px 15px rgba(0,0,0,.1);
}

/* Quando o header é fixed-top, o conteúdo começa depois dele */
body.has-fixed-header { padding-top: var(--header-h); }

.container { /* só pra consistência entre páginas */ }

.card{
  height:100%;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.card-img-top{
  height:180px;
  object-fit:cover;
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
}
.card-footer{
  background:transparent;
  border-top:none;
  padding-top:0;
}

/* ============================
   BANNER / CARROSSEL PRINCIPAL
============================ */
#bannerCarousel{
  margin-top: 0;            /* quem resolve o deslocamento é o padding do body */
  margin-bottom: 2rem;
}

/* Altura alvo maior no desktop; responsivo nas demais faixas */
#bannerCarousel .carousel-item{
  height: clamp(280px, 40vh, 520px);
}
#bannerCarousel .carousel-item img{
  width:100%; height:100%;
  object-fit: cover;        /* preenche sem distorcer */
  object-position: center;  /* ponto neutro */
  display:block;
}

/* Ajuste fino para telas médias (evita cortar demais as laterais) */
@media (max-width:1249px) and (min-width:992px){
  #bannerCarousel .carousel-item img{ object-position: 55% center; }
}

/* Tablets */
@media (max-width:991.98px){
  #bannerCarousel .carousel-item{ height: clamp(240px, 36vh, 420px); }
  #bannerCarousel .carousel-item img{ object-position:center; }
}

/* Mobile: prioriza não cortar conteúdo importante */
@media (max-width:575.98px){
  #bannerCarousel .carousel-item{
    height: clamp(220px, 45vw, 280px);
    background:#111; /* “letterbox” discreto quando usar contain */
  }
  #bannerCarousel .carousel-item img{
    object-fit: contain;
    object-position: center;
  }
}

/* Some com a tarja de caption */
#bannerCarousel .carousel-caption{ display:none !important; }

/* ============================
   BADGE "TOP" EM CURSOS
============================ */
.curso-top-badge{
  position:absolute;
  top:10px; right:10px;
  background:#ff9800; color:#fff;
  padding:5px 10px; border-radius:3px;
  font-weight:700; z-index:2;
}
.curso-top-badge i{ margin-right:4px; }

/* ============================
   CARROSSEIS (CURSOS / CATEGORIAS / DEPOIMENTOS)
   — padrão estilo “vitrine” tipo Udemy
   — com peek, scroll-snap e arrasto
============================ */

/* WRAPPERS */
.curso-carrossel, .categoria-carrossel, .depoimento-carrossel{
  position:relative;
  overflow:hidden;
  padding-left:12px;      /* cria “peek” do próximo card */
  padding-right:12px;
}

/* PISTAS ROLÁVEIS */
.curso-slider, .categoria-slider, .depoimento-slider{
  display:flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;     /* espaço pro scrollbar em mobile */
  user-select: none;       /* evita seleção de texto durante arrasto */
  cursor: grab;            /* feedback de arrasto no desktop */
}

/* Feedback de arrasto ativo */
.curso-slider.is-dragging,
.categoria-slider.is-dragging,
.depoimento-slider.is-dragging{
  cursor: grabbing;
}

/* Scrollbar — visível em mobile/tablet, oculto no desktop */
.curso-slider::-webkit-scrollbar,
.categoria-slider::-webkit-scrollbar,
.depoimento-slider::-webkit-scrollbar{ height:8px; }
.curso-slider::-webkit-scrollbar-thumb,
.categoria-slider::-webkit-scrollbar-thumb,
.depoimento-slider::-webkit-scrollbar-thumb{ background:#ddd; border-radius:4px; }
@media (min-width:992px){
  .curso-slider::-webkit-scrollbar,
  .categoria-slider::-webkit-scrollbar,
  .depoimento-slider::-webkit-scrollbar{ display:none; }
  .curso-slider, .categoria-slider, .depoimento-slider{ scrollbar-width:none; } /* Firefox */
}

/* ===== Itens – CURSOS */
.curso-item{
  scroll-snap-align: start;
  flex: 0 0 25%;
  max-width:25%;
  min-width:25%;
  padding:0 10px; box-sizing:border-box;
}
/* Tablets: 2 por vez (peek) */
@media (max-width:991.98px){
  .curso-item{ flex-basis:48%; max-width:48%; min-width:48%; }
}
/* Mobile: ~1.2 por vez (peek evidente) */
@media (max-width:575.98px){
  .curso-item{ flex-basis:82%; max-width:82%; min-width:82%; }
}

/* ===== Itens – CATEGORIAS */
.categoria-item{
  scroll-snap-align: start;
  flex: 0 0 22%;
  max-width:22%;
  min-width:22%;
}
.categoria-item .card{
  display:flex; flex-direction:column; height:100%; text-align:center;
}
.categoria-item .card-body{
  display:flex; flex-direction:column; padding:1rem;
}
/* Imagem 4:3 com cover */
.categoria-img-container{
  aspect-ratio: 4/3; overflow:hidden; background:#f8f9fa;
  display:flex; align-items:center; justify-content:center;
}
.categoria-img-container img,
.categoria-img-placeholder{
  width:100%; height:100%; object-fit:cover; display:block;
}
.categoria-img-placeholder{
  background:#f5f5f5; color:#6c757d;
  display:flex; align-items:center; justify-content:center;
}
/* Título com clamp em 2 linhas (alinha os cards) */
.categoria-item .card-title{
  margin:0 0 .5rem; font-weight:600;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  min-height:2.8rem;
}
/* Botão no rodapé do card */
.categoria-item .card .btn{ margin-top:auto; }

/* Breakpoints categorias */
@media (max-width:1199.98px){
  .categoria-item{ flex-basis:28%; max-width:28%; min-width:28%; }
}
@media (max-width:991.98px){
  .categoria-item{ flex-basis:40%; max-width:40%; min-width:40%; }
}
@media (max-width:575.98px){
  .categoria-item{ flex-basis:80%; max-width:80%; min-width:80%; }
}

/* ===== Itens – DEPOIMENTOS */
.depoimento-item{
  scroll-snap-align: start;
  flex: 0 0 48%;
  max-width:48%;
  min-width:48%;
  padding:0 10px; box-sizing:border-box;
}
@media (max-width:991.98px){
  .depoimento-item{ flex-basis:70%; max-width:70%; min-width:70%; }
}
@media (max-width:575.98px){
  .depoimento-item{ flex-basis:88%; max-width:88%; min-width:88%; }
}

/* Botões de navegação por cima (opcional) */
.curso-carrossel .nav-btn,
.categoria-carrossel .nav-btn,
.depoimento-carrossel .nav-btn{
  position:absolute; top:-44px;
}
.curso-carrossel .nav-btn.prev,
.categoria-carrossel .nav-btn.prev,
.depoimento-carrossel .nav-btn.prev{ right:44px; }
.curso-carrossel .nav-btn.next,
.categoria-carrossel .nav-btn.next,
.depoimento-carrossel .nav-btn.next{ right:0; }

@media (max-width:400px){
  .curso-carrossel .nav-btn,
  .categoria-carrossel .nav-btn,
  .depoimento-carrossel .nav-btn{ display:none; }
}

/* ============================
   DEPOIMENTOS – bloco escuro
============================ */
.depoimentos-section{
  background:#343a40; color:#fff;
  padding:30px 0; border-radius:8px;
}
.depoimento-card{
  background: rgba(255,255,255,.1);
  border:none; color:#fff !important;
}
.depoimento-card .card-body,
.depoimento-card .depoimento-texto{ color:#fff !important; }

.depoimento-avatar{
  width:60px; height:60px; border-radius:50%; overflow:hidden;
  background:#495057; display:flex; align-items:center; justify-content:center;
}
.depoimento-avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-placeholder{
  width:60px; height:60px; display:flex; align-items:center; justify-content:center;
  background:#495057; color:#adb5bd;
}
.depoimento-texto{ font-style:italic; margin-top:15px; line-height:1.6; }

/* ============================
   NEWSLETTER / FORM
============================ */
.newsletter .card{ box-shadow: var(--shadow-sm); }
.btn-outline-light:hover{
  background: rgba(255,255,255,.2); color:#fff;
}

/* ============================
   CARTÕES GENÉRICOS
============================ */
.cadastro-section{
  background:#f8f9fa; border-radius:8px; padding:2rem;
}
.cadastro-imagem img{ border-radius:8px; box-shadow: var(--shadow-md); }

/* ============================
   AJUSTES EXTRAS
============================ */
/* Caso seu header NÃO seja fixo, comente a linha do body.has-fixed-header
   ou remova a classe do body. */
/* ============================
   INDICADORES (BOLINHAS)
============================ */
.carousel-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:12px;
}

.carousel-dots button{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width:10px;
  height:10px;
  border-radius:50%;
  border:none;
  padding:0;
  margin:0;

  background:#ccc;
  cursor:pointer;
  transition: background .3s, transform .3s;
}

.carousel-dots button.active{
  background:#007bff;  /* cor da bolinha ativa */
  transform: scale(1.2);
}

.carousel-dots button:focus-visible{
  box-shadow:0 0 0 3px rgba(0,123,255,.35);
  outline:none;
}

/* Para seções escuras (depoimentos) */
.depoimentos-section .carousel-dots button{
  background: rgba(255,255,255,.5);
}
.depoimentos-section .carousel-dots button.active{
  background: #fff;
}

/* Cartão moderno do depoimento */
.depoimento-card{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.2);
  color:#fff !important;
  backdrop-filter: blur(4px);
}
.dep-head h5{ color:#fff; font-weight:700; }
.modern-quote{
  color:#f8f9fa;
  margin: 0;
  line-height: 1.7;
}
.dep-footer{
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.15);
}
.dep-link{
  color:#fff; text-decoration:none;
  display:inline-flex; align-items:center;
  gap:6px; font-weight:600;
}
.dep-link:hover{ text-decoration:underline; }

/* Depoimentos: garante encaixe exato após arrastar */
.depoimento-slider{
  scroll-padding-left: 12px;
  scroll-padding-right: 12px;
  touch-action: pan-y;
}
.depoimento-item{
  scroll-snap-align: start;
  scroll-snap-stop: always; /* evita parar “no meio” do item */
}