/* =============== Variáveis ================== */
:root{
  --primary-color:#0056b3;
  --secondary-color:#f8f9fa;
  --accent-color:#ffc107;
  --text-color:#343a40;
  --light-text:#6c757d;
}

/* =============== Base ================== */
body{ font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; color:var(--text-color); line-height:1.6; }

/* Cabeçalho/Breadcrumb mais enxuto */
.course-header{ background:var(--secondary-color); padding:.75rem 0; border-bottom:1px solid #dee2e6; }
.breadcrumb{ margin:5px 0 !important; padding:0 !important; }

/* Título do curso */
.course-title{ font-size:2.2rem; font-weight:800; line-height:1.2; margin:6px 0 10px !important; color:var(--primary-color); }

/* Seções */
.section-title{ font-size:1.6rem; font-weight:700; margin:0 0 .75rem; padding:0 0 .5rem; border-bottom:2px solid var(--primary-color); color:var(--primary-color); }
.content-section{ margin-bottom:2rem; }

/* ================== Mídia topo ================== */
/* Use SEMPRE este .video-container (responsivo 16:9) */
.media-hero .video-container{
  position:relative; width:100%;
  aspect-ratio:16/9;                       /* navegadores modernos */
  border-radius:8px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.08);
}
/* Fallback do aspect-ratio para navegadores antigos */
@supports not (aspect-ratio: 16/9){
  .media-hero .video-container{ padding-top:56.25%; }
  .media-hero .video-container iframe{ position:absolute; inset:0; width:100%; height:100%; }
}
.media-hero iframe{ width:100%; height:100%; border:0; }

/* Imagem quando não há vídeo */
.course-image, .media-img-limit{
  display:block; width:100%; height:auto; max-height:420px; object-fit:cover; object-position:center;
  border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.08); margin-bottom:1rem;
}

/* ================== Info box (coluna direita) ================== */
.info-box{ background:#fff; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.1); padding:1.25rem; margin-bottom:1.25rem; }
.info-item{ display:flex; align-items:flex-start; gap:1rem; padding:.75rem 0; border-bottom:1px solid #eee; }
.info-item:last-child{ border-bottom:0; }
.info-icon{ color:var(--primary-color); font-size:1.2rem; width:24px; text-align:center; }
.info-content h4{ font-size:1rem; font-weight:600; margin:0 0 .25rem; }
.info-content p{ margin:0; color:var(--light-text); }

/* Sidebar que não “cai” */
.sticky-col{ position:sticky; top:calc(var(--header-h,64px) + 16px); }

/* ================== Preço (se houver) ================== */
.price-box{ background:var(--primary-color); color:#fff; border-radius:8px; padding:1.25rem; }
.price-option{ margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.2); }
.price-option:last-child{ margin-bottom:0; padding-bottom:0; border:0; }
.price-label{ font-size:.9rem; opacity:.9; margin-bottom:.25rem; }
.price-value{ font-size:1.5rem; font-weight:700; }
.price-installment{ font-size:.92rem; opacity:.9; }
.price-discount{ background:var(--accent-color); color:var(--text-color); font-weight:600; padding:.2rem .45rem; border-radius:4px; font-size:.8rem; margin-left:.4rem; }

/* ================== Bullets ================== */
.list-check{ padding-left:1.2rem; }
.list-check li{ margin-bottom:.35rem; }

/* ================== Depoimentos curso ================== */
.depoimento-card{ background:rgba(255,255,255,.96); }
.depoimento-avatar{ width:60px; height:60px; border-radius:50%; overflow:hidden; background:#e9ecef; }
.depoimento-avatar img{ width:100%; height:100%; object-fit:cover; }
.depoimento-texto{ line-height:1.7; }

#depoimento-slider-curso{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; -webkit-overflow-scrolling:touch;
}
#depoimento-slider-curso::-webkit-scrollbar{ height:8px; }
#depoimento-slider-curso::-webkit-scrollbar-thumb{ background:#ddd; border-radius:4px; }
#depoimento-slider-curso .depoimento-item{ flex:0 0 80%; max-width:80%; scroll-snap-align:start; scroll-snap-stop:always; }
@media (min-width:992px){ #depoimento-slider-curso .depoimento-item{ flex:0 0 48%; max-width:48%; } }

#depoimento-dots-curso{ display:flex; justify-content:center; gap:8px; margin-top:8px; }
#depoimento-dots-curso button{
  appearance:none; width:10px; height:10px; border-radius:50%; border:none; background:#ccc; transition:transform .2s, background .2s;
}
#depoimento-dots-curso button.active{ background:#0d6efd; transform:scale(1.2); }

/* ================== CTA ================== */
.btn-primary{ background:var(--primary-color); border-color:var(--primary-color); padding:.7rem 1.4rem; font-weight:600; border-radius:8px; }
.btn-primary:hover{ background:#004494; border-color:#004494; }

/* Botão flutuante (desktop) no canto inferior direito, compacto */
.cta-float{
  position:fixed; right:24px; bottom:24px; z-index:1050;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.65rem .9rem; border-radius:999px; box-shadow:0 10px 28px rgba(13,110,253,.28);
}
.cta-float i{ font-size:16px; }

/* Barra fixa no mobile */
.cta-mobile-bar{
  position:fixed; left:0; right:0; bottom:0; padding:10px 16px;
  background:#ffffffee; box-shadow:0 -6px 20px rgba(0,0,0,.08); z-index:1050;
}

/* Evita a barra mobile cobrir o conteúdo */
@media (max-width:991.98px){ .curso-page{ padding-bottom:76px; } }

/* =============== Responsivo =============== */
@media (max-width:767.98px){
  .course-title{ font-size:1.8rem; }
  .section-title{ font-size:1.35rem; }
  .course-image, .media-img-limit{ max-height:300px; }
}

/* ---- Carrossel: Outros cursos ---- */
#slider-outros-cursos{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding: 8px 2px 12px;
}
#slider-outros-cursos::-webkit-scrollbar{ height:8px; }
#slider-outros-cursos::-webkit-scrollbar-thumb{ background:#ddd; border-radius:4px; }

#slider-outros-cursos .curso-item{
  flex:0 0 80%;
  max-width:80%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
@media (min-width:768px){
  #slider-outros-cursos .curso-item{ flex:0 0 48%; max-width:48%; }
}
@media (min-width:1200px){
  #slider-outros-cursos .curso-item{ flex:0 0 32%; max-width:32%; }
}

/* imagens consistentes dentro dos cards */
#slider-outros-cursos .card-img-top{
  height:160px;
  object-fit:cover;
}

/* dots */
#dots-outros-cursos{ display:flex; justify-content:center; gap:8px; margin-top:8px; }
#dots-outros-cursos button{
  appearance:none; width:10px; height:10px; border-radius:50%;
  border:none; background:#ccc; transition:transform .2s, background .2s;
}
#dots-outros-cursos button.active{ background:#0d6efd; transform:scale(1.2); }

/* a imagem/vídeo precisa cortar qualquer sobra */
.media-hero, .course-media, .curso-imagem-wrapper { position: relative; overflow: hidden; }

/* ===== Ribbon parametrizável ===== */
.curso-ribbon{
  /* KNOBS (mude via CSS ou inline): */
  --y: 35%;            /* altura em relação à imagem (0% topo, 100% base)           */
  --x: 35%;            /* afastamento da borda direita (aumente p/ ir ao centro)     */
  --maxw: 55%;         /* largura máxima da faixa (use % ou px)                       */
  --thickness: 35px;   /* “espessura” (altura da faixa)                               */
  --rotate: -25deg;    /* ângulo da diagonal                                          */
  --alpha: .95;        /* transparência do fundo (0–1) — texto fica 100% nítido       */

  position: absolute;
  top: var(--y);
  right: var(--x);
  transform: translateY(-50%) rotate(var(--rotate));
  transform-origin: 100% 50%;
  height: var(--thickness);
  max-width: var(--maxw);
  padding: 0 102px;                 /* ajuste horizontal do “respiro” da faixa */
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:12px; letter-spacing:.5px;
  text-transform:uppercase; border-radius:4px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  z-index:20; pointer-events:none;
}

/* fundo com transparência controlada (não afeta o texto) */
.curso-ribbon::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, var(--bg1), var(--bg2)); /* fallback sólido */
  opacity: var(--alpha);
}
.curso-ribbon > span{ position:relative; z-index:1; }

/* brilho opcional */
.curso-ribbon::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-120%); animation:ribbon-shine 4s ease-in-out infinite;
}
@keyframes ribbon-shine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}

/* Paletas */
.ribbon--verde   { --bg1:#628eeb; --bg2:#091e90; }
.ribbon--laranja { --bg1:#ffa94d; --bg2:#fd7e14; }
.ribbon--vermelho{ --bg1:#ff6b6b; --bg2:#e90e0e; }

/* Mobile: menor e um pouco mais “pra dentro” */
@media (max-width:576px){
  .curso-ribbon{
    --y: 35%;
    --x: 35%;
    --maxw: 66%;
    --thickness: 24px;
    --rotate: -25deg;    /* ângulo da diagonal                                          */
    font-size:11px;
    padding: 0 10px;
  }
}

/* Cinto de segurança contra qualquer outra sobra */
html, body { max-width:100%; overflow-x:hidden; }