/* site.css */
/* ead/assets/css/site.css */
/* Estilos das páginas públicas (institucionais/vendas), separado do style.css usado na área logada. */

body.site-body {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-navbar {
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.site-navbar .nav-link.active {
    color: var(--cor-primaria);
    font-weight: 600;
}

/* ---- Hero ---- */
.hero-section {
    background: linear-gradient(135deg, var(--cor-primaria) 0%, #1e3a8a 100%);
    color: #fff;
    padding: 90px 0 100px;
}
.hero-section h1 { font-size: 2.6rem; font-weight: 800; line-height: 1.15; }
.hero-section p.lead { font-size: 1.15rem; opacity: .92; }
.hero-badges .badge { font-size: .8rem; padding: .5em .9em; }

/* ---- Seções genéricas ---- */
.section-one-col { padding: 70px 0; }
.section-two-col { padding: 70px 0; }
.section-two-col img, .section-two-col .img-placeholder {
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.img-placeholder {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    display: flex; align-items: center; justify-content: center;
    color: var(--cor-primaria); font-size: 3rem; min-height: 320px;
}
.bg-primary-soft { background: #eff4ff; }
.bg-light-alt { background: #f8fafc; }

.feature-icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--cor-primaria); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}

/* ---- Cards de curso (vitrine) ---- */
.course-card { transition: transform .15s, box-shadow .15s; border-radius: 16px; overflow: hidden; }
.course-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.1); }
.course-card img { height: 170px; object-fit: cover; }

/* ---- CTA em destaque ---- */
.cta-banner {
    background: var(--cor-primaria);
    color: #fff;
    border-radius: 20px;
    padding: 50px 30px;
}

/* ---- Sidebar do catálogo ---- */
.catalog-sidebar { position: sticky; top: 90px; }
.catalog-sidebar .card { border-radius: 14px; }

/* ---- Página de curso (vendas) ---- */
.curriculum-item { border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 8px; }
.sticky-buy-box { position: sticky; top: 90px; }

/* ---- Barra utilitária superior ---- */
.top-utility-bar {
    background: #0f172a;
    color: #cbd5e1;
    font-size: .78rem;
    padding: 8px 0;
}
.top-utility-bar a { color: #cbd5e1; text-decoration: none; }
.top-utility-bar a:hover { color: #fff; }

/* ---- Pills de categoria ---- */
.category-pills { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.category-pill {
    flex: 0 0 auto; padding: 9px 18px; border-radius: 999px; border: 1px solid #e2e8f0;
    background: #fff; color: #334155; font-size: .85rem; font-weight: 600; text-decoration: none;
    display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: all .15s;
}
.category-pill:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.category-pill.active { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }

/* ---- Card de curso (estilo vitrine) ---- */
.course-card .instructor-row { display: flex; align-items: center; gap: 8px; }
.instructor-avatar {
    width: 26px; height: 26px; border-radius: 50%; background: var(--cor-primaria);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; flex-shrink: 0;
}
.category-tag {
    font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    background: #eff4ff; color: var(--cor-primaria);
}
.price-old { text-decoration: line-through; color: #94a3b8; font-size: .85rem; margin-right: 6px; }
.price-new { color: var(--cor-primaria); font-weight: 800; font-size: 1.1rem; }

/* ---- Hero com decoração e badges flutuantes ---- */
.hero-decor-dots {
    position: absolute; width: 90px; height: 60px;
    background-image: radial-gradient(circle, rgba(255,255,255,.5) 2px, transparent 2px);
    background-size: 12px 12px; opacity: .6;
}
.hero-stat-badge {
    position: absolute; background: #fff; color: var(--cor-primaria);
    border-radius: 50%; width: 110px; height: 110px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 10px 30px rgba(0,0,0,.15);
    text-align: center; font-size: .75rem; line-height: 1.1;
}
.hero-stat-badge .num { font-size: 1.4rem; }
.hero-rating-badge {
    position: absolute; background: #fff; border-radius: 999px; padding: 8px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15); font-weight: 700; font-size: .85rem; color: #334155;
}

@media (max-width: 991px) {
    .hero-section { padding: 60px 0 70px; text-align: center; }
    .hero-section h1 { font-size: 2rem; }
    .hero-stat-badge, .hero-rating-badge { display: none; }
}