/* base.css já cobre :root, .nav, .btn, .section, .reveal e .footer.
   Aqui só o que é específico das páginas de curso: page-hero, breadcrumb
   (ausentes no base.css, que só define .hero da home) e o layout de detalhe. */

/* PAGE HERO */
.page-hero{position:relative;padding-top:clamp(8rem,18vh,12rem);padding-bottom:clamp(4rem,8vh,6rem);overflow:hidden;background:var(--color-bg)}
.page-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:3;background:linear-gradient(90deg,transparent 0%,var(--color-accent) 30%,var(--color-secondary) 70%,transparent 100%)}
.page-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;z-index:3;background:linear-gradient(90deg,transparent,rgba(198,193,155,0.18),transparent)}
.page-hero-bg{position:absolute;inset:0;z-index:0;background:url("https://images.unsplash.com/photo-1524178232363-1fb2b075b655?auto=format&fit=crop&q=80&w=1920&q=75") center/cover no-repeat;transform:scale(1.04);animation:heroZoom 18s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.07)}to{transform:scale(1)}}
.page-hero-overlay{position:absolute;inset:0;z-index:1;background:rgba(14,18,24,0.92)}
.page-hero-inner{position:relative;z-index:2}
.page-hero-tag{display:inline-flex;align-items:center;gap:0.5rem;padding:0.4rem 1rem;border-radius:100px;border:1px solid rgba(198,193,155,0.25);font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--color-accent-light);margin-bottom:1.5rem;background:rgba(198,193,155,0.08);opacity:0;animation:fadeUp 1s .3s var(--ease-out-expo) forwards}
.page-hero-title{font-family:var(--font-display);font-size:clamp(2.6rem,6vw,4.6rem);font-weight:400;line-height:1.06;letter-spacing:-0.02em;color:var(--color-cream);opacity:0;animation:fadeUp 1s .5s var(--ease-out-expo) forwards;max-width:1024px}
.page-hero-title em{font-style:italic;color:var(--color-accent-light)}
.page-hero-desc{margin-top:1.5rem;font-size:clamp(0.9rem,1.1vw,1.05rem);line-height:1.7;color:var(--color-text-muted);max-width:780px;opacity:0;animation:fadeUp 1s .7s var(--ease-out-expo) forwards}
.breadcrumb{display:flex;align-items:center;gap:0.5rem;margin-bottom:2.5rem;opacity:0;animation:fadeUp 1s .15s var(--ease-out-expo) forwards}
.breadcrumb a{font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-muted);transition:color .3s}
.breadcrumb a:hover{color:var(--color-cream)}
.breadcrumb-sep{color:rgba(212,208,177,0.35);font-size:0.75rem;line-height:1;font-family:var(--font-display)}
.breadcrumb-current{font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent-light)}

/* CURSO — DETAIL */
.curso-detail{background:var(--color-bg);transition:background-color .4s}
.curso-detail-grid{display:grid;grid-template-columns:7fr 4fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.curso-detail-content{font-size:0.95rem;line-height:1.85;color:var(--color-text-muted)}
.curso-detail-content p{margin-bottom:1.25rem}
.curso-detail-content p:last-child{margin-bottom:0}
.curso-detail-content h2,.curso-detail-content h3{font-family:var(--font-display);font-weight:500;color:var(--color-cream);margin:2rem 0 1rem;line-height:1.3}
.curso-detail-content h2{font-size:1.6rem}
.curso-detail-content h3{font-size:1.25rem}
.curso-detail-content ul,.curso-detail-content ol{margin:0 0 1.25rem;padding-left:1.4rem;display:flex;flex-direction:column;gap:0.5rem}
.curso-detail-content li{font-size:0.92rem;line-height:1.7}
.curso-detail-content strong{color:var(--color-cream);font-weight:600}
.curso-detail-content img{border-radius:16px;margin:1.5rem 0}
img.curso-detail-image{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin:0 0 2rem}
.curso-detail-sidebar{position:sticky;top:8rem;padding:clamp(1.75rem,3vw,2.25rem);border-radius:18px;background:var(--color-bg-elevated);border:1px solid rgba(198,193,155,0.15);display:flex;flex-direction:column;gap:1.5rem;transition:background-color .4s}
.curso-price{font-family:var(--font-display);font-size:clamp(1.6rem,2.5vw,2.1rem);font-weight:500;color:var(--color-cream)}
.curso-price small{display:block;font-family:var(--font-body);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-accent-light);font-weight:500;margin-bottom:0.4rem}
.curso-signup-btn{width:100%;justify-content:center}

/* RESPONSIVE */
@media(max-width:1024px){
  .curso-detail-grid{grid-template-columns:1fr}
  .curso-detail-sidebar{position:static}
}
@media(max-width:768px){
  .page-hero-title{font-size:clamp(2.2rem,9vw,3.4rem)}
}
@media(max-width:480px){.page-hero-title{font-size:clamp(1.9rem,8vw,2.6rem)}}