/* =============== 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 — oculto no mobile */
.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; }
@media (max-width:991.98px){ .cta-float{ display:none !important; } }

/* Barra fixa no mobile (oculta no desktop, onde o aside já tem o CTA) */
.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;
}
@media (min-width:992px){ .cta-mobile-bar{ display:none !important; } }

/* Evita a barra mobile cobrir o conteúdo (3 linhas: texto + pix + parcelas) */
@media (max-width:991.98px){ .curso-page{ padding-bottom:96px; } }

/* =============== 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; }

/* =============== Badges (estrela) =============== */
.curso-badges{position:absolute;top:12px;right:12px;z-index:3;pointer-events:none;}
.badge-estrela{
  --bg:#28a745;--fg:#fff;position:relative;display:inline-flex;align-items:center;
  justify-content:center;width:120px;height:120px;
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background:var(--bg);box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.badge-estrela span{color:var(--fg);font-weight:700;font-size:11px;text-align:center;line-height:1.1;max-width:90px;pointer-events:auto}
.badge-estrela.verde{--bg:#28a745}
.badge-estrela.laranja{--bg:#fd7e14}
.badge-estrela.vermelho{--bg:#dc3545}

/* =============== Mobile - Breadcrumb compacto =============== */
@media (max-width:991.98px){
  .course-header .breadcrumb { display:none; }
  .course-header .breadcrumb-mobile { display:flex !important; align-items:center; gap:.5rem; }
  .btn-back-mobile { display:inline-flex; align-items:center; gap:.35rem; font-size:.9rem; }
}
.breadcrumb-mobile { display:none; }
.btn-back-mobile { display:none; color:var(--primary-color); text-decoration:none; }

/* =============== Mobile - Hero compacto =============== */
@media (max-width:767.98px){
  .course-title{ font-size:1.8rem; }
  .section-title{ font-size:1.35rem; }
  .media-hero { max-height:200px; }
  .media-hero .video-container { max-height:200px; }
  .course-image, .media-img-limit{ max-height:200px; object-fit:cover; }
}

/* =============== Accordion com ícones =============== */
.accordion-button i { flex-shrink:0; }

/* =============== Carrossel: melhorias =============== */
.curso-slider, .depoimento-slider { cursor:grab; user-select:none; }
.curso-slider.is-dragging, .depoimento-slider.is-dragging { cursor:grabbing; scroll-behavior:auto; }

/* Avatar placeholder para depoimentos sem foto */
.avatar-placeholder { width:48px; height:48px; border-radius:50%; background:#e9ecef; display:flex; align-items:center; justify-content:center; color:#6c757d; }

/* =============== Preço destacado mobile sticky =============== */
@media (max-width:991.98px) {
  .card.border-primary { position:sticky; top:10px; z-index:10; box-shadow:0 4px 12px rgba(0,0,0,.15) !important; }
}

/* =============== CTA mobile bar animada =============== */
.cta-mobile-bar { animation:slideUp 0.3s ease-out; }
@keyframes slideUp { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* =============== Modal melhorado =============== */
.modal-content { border-radius:12px; border:none; }
.modal-header { border-bottom:1px solid #e9ecef; background:#f8f9fa; border-radius:12px 12px 0 0; }
.modal-footer { border-top:1px solid #e9ecef; background:#f8f9fa; }

/* =============== Loading spinner =============== */
.spinner-border-sm { width:1rem; height:1rem; border-width:0.15em; }

/* =============== Lazy loading shimmer =============== */
img[loading="lazy"]:not([src*="data:"]) { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* =============== Melhorias de acessibilidade =============== */
.btn:focus, .accordion-button:focus { outline:2px solid var(--primary-color); outline-offset:2px; }

/* =============== Performance: reduce motion =============== */
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } }

/* =============== Mobile-First: Ordem otimizada de conteúdo =============== */
/* Em mobile: mídia primeiro, depois objetivo, destina, info box */
@media (max-width:991.98px) {
  .content-mobile-optimized {
    display: flex;
    flex-direction: column;
  }
  .mobile-order-1 { order: 1; } /* Mídia (imagem/vídeo) */
  .mobile-order-2 { order: 2; } /* Objetivo */
  .mobile-order-3 { order: 3; } /* A quem se destina */
  .mobile-order-4 { order: 4; } /* Info box */
}

/* Desktop: ordem normal */
@media (min-width:992px) {
  .content-mobile-optimized {
    display: block;
  }
}

/* =============== Video placeholder (lazy load) =============== */
.video-placeholder { transition: opacity 0.3s ease; }
.video-placeholder:hover { opacity: 0.95; }

/* =============== Sidebar: bloco de preço =============== */
.sidebar-price-block { text-align:center; }
.sidebar-price-main { font-size:2rem; font-weight:800; color:var(--primary-color); line-height:1.1; }
.sidebar-price-pix { font-size:1.1rem; font-weight:600; color:#198754; margin-top:4px; }
.sidebar-price-pix .price-discount { font-size:.75rem; vertical-align:middle; }

/* =============== Breadcrumb mobile com categoria =============== */
.breadcrumb-mobile { display:none; align-items:center; gap:.35rem; flex-wrap:wrap; }
.breadcrumb-mobile-sep { color:#adb5bd; font-size:.85rem; }
@media (max-width:991.98px){
  .breadcrumb-mobile { display:flex !important; }
  .btn-back-mobile { display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; color:var(--primary-color); text-decoration:none; }
  .btn-back-mobile:hover { text-decoration:underline; }
}

/* ════════════════════════════════════════════════════════════════════
   NAVY DESIGN SYSTEM — overrides para a página de detalhe do curso
   Posicionados no final para vencer as regras anteriores pela cascata.
   ════════════════════════════════════════════════════════════════════ */

/* ── Ribbon de status na página de detalhe — maior, canto sup. dir. ── */
.media-hero .nv-ribbon {
  top: .85rem;
  bottom: auto;
  right: .85rem;
  font-size: .72rem;
  padding: .38rem 1rem;
  letter-spacing: .09em;
  z-index: 2;
}
/* Gradiente no topo da imagem para o pill ficar legível */
.media-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(to bottom, rgba(8,15,30,.55) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: 8px 8px 0 0;
}

/* ── Breadcrumb / header ─────────────────────────────────────────── */
.course-header {
  background: #0e1a2e;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.course-header .breadcrumb-item a,
.btn-back-mobile {
  color: #fb923c !important;
  text-decoration: none;
}
.course-header .breadcrumb-item a:hover,
.btn-back-mobile:hover { color: #f97316 !important; }
.course-header .breadcrumb-item.active { color: rgba(255,255,255,.55); }
.course-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.28); }
.breadcrumb-mobile-sep { color: rgba(255,255,255,.28); }

/* ── Título + corpo ──────────────────────────────────────────────── */
.course-title {
  color: #fff !important;
  font-family: "Fraunces", Georgia, serif;
}
.curso-page .lead { color: rgba(255,255,255,.82); }
.section-title {
  color: #fff !important;
  border-bottom-color: #f97316 !important;
}
.curso-page .list-check { color: rgba(255,255,255,.85); }
.curso-page .content-section p { color: rgba(255,255,255,.82); }

/* ── Info box ────────────────────────────────────────────────────── */
.info-box {
  background: #162236 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #fff !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.4) !important;
}
.info-item { border-bottom-color: rgba(255,255,255,.1) !important; }
.info-box hr { border-color: rgba(255,255,255,.1) !important; opacity: 1; }

/* Bootstrap utilities com !important */
.info-box .text-muted,
.info-box small.text-muted { color: rgba(255,255,255,.5) !important; }
.info-box .text-primary,
.info-box i.text-primary { color: #f97316 !important; }

/* ── Bloco de preço ──────────────────────────────────────────────── */
.sidebar-price-main { color: #fff !important; }
.sidebar-price-pix  { color: #34d399 !important; }
.sidebar-price-pix .price-discount {
  background: rgba(52,211,153,.18);
  color: #34d399 !important;
}
.info-box .badge.rounded-pill { background: rgba(52,211,153,.18) !important; color: #34d399 !important; }
.info-box .badge.bg-secondary { background: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.7) !important; }

/* ── Accordion ──────────────────────────────────────────────────── */
.accordion-item {
  background: #162236 !important;
  border-color: rgba(255,255,255,.1) !important;
}
.accordion-button {
  background: #162236 !important;
  color: #fff !important;
  box-shadow: none;
}
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c%2fsvg%3e") !important;
}
.accordion-button:not(.collapsed) {
  background: #1d2f47 !important;
  color: #f97316 !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f97316'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c%2fsvg%3e") !important;
}
.accordion-button:focus {
  outline: 2px solid #f97316;
  outline-offset: 2px;
  box-shadow: 0 0 0 0.2rem rgba(249,115,22,.2) !important;
}
.accordion-body {
  background: #0e1a2e !important;
  color: rgba(255,255,255,.85) !important;
}
.sobre-curso-content { color: rgba(255,255,255,.85); }
.sobre-curso-content ul, .sobre-curso-content ol { color: rgba(255,255,255,.85); }

/* ── Depoimentos ─────────────────────────────────────────────────── */
.depoimento-card {
  background: #162236 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.depoimento-card .depoimento-texto { color: rgba(255,255,255,.8) !important; }
#depoimento-dots-curso button { background: rgba(255,255,255,.22) !important; }
#depoimento-dots-curso button.active { background: #f97316 !important; }

/* ── Slider "Os alunos também pesquisando" ───────────────────────── */
#slider-outros-cursos a.card {
  background: #162236 !important;
  border-color: rgba(255,255,255,.08) !important;
}
#slider-outros-cursos .card-title { color: #fff !important; }
#dots-outros-cursos button { background: rgba(255,255,255,.22) !important; }
#dots-outros-cursos button.active { background: #f97316 !important; }

/* ── Botões CTA ─────────────────────────────────────────────────── */
.btn-primary {
  background: #f97316 !important;
  border-color: #f97316 !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: #fb923c !important;
  border-color: #fb923c !important;
}
.btn-primary:focus { outline: 2px solid #f97316; outline-offset: 2px; }
.cta-float.btn-primary { box-shadow: 0 10px 28px rgba(249,115,22,.38) !important; }

/* ── CTA mobile bar ─────────────────────────────────────────────── */
.cta-mobile-bar {
  background: rgba(14,26,46,.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -6px 24px rgba(0,0,0,.5) !important;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ── Modal fila de espera ─────────────────────────────────────────── */
#modal-fila-espera .modal-content {
  background: #162236 !important;
  color: #fff !important;
}
#modal-fila-espera h3,
#modal-fila-espera label { color: #fff !important; }
#modal-fila-espera p { color: rgba(255,255,255,.8) !important; }