/* ===== ESTILOS GERAIS E FONTES ===== */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* slate-100 */
}

/* ===== ESTILOS DO HEADER E NAVEGAÇÃO ===== */
.header-scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
}

/* Gradiente do botão principal */
.btn-primary-gradient {
    background: linear-gradient(90deg, #1e40af, #3b82f6);
}

/* ===== ESTILOS DA PÁGINA PRINCIPAL (INDEX.HTML) ===== */
.hero-bg, .hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../imagens/banner1.jpg');
    background-size: cover;
    background-position: center;
}

.cta-bg {
    background-image: linear-gradient(rgba(29, 78, 216, 0.8), rgba(29, 78, 216, 0.8)), url('../imagens/banner1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* ===== ESTILOS DE CARDS (PÁGINA DE CURSOS) ===== */
.course-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ===== FUNCIONALIDADES DAS PÁGINAS DE CURSO (EX: informatica-basica.html) ===== */

/* Estilos para o Acordeão */
.accordion-header .lucide-chevron-down {
    transition: transform 0.3s ease-out;
}
.accordion-header.active .lucide-chevron-down {
    transform: rotate(180deg);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Estilos para as Miniaturas de Vídeo */
.video-thumb-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 para o vídeo */
    height: 0;
    overflow: hidden;
}
.video-thumb-container > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-thumb-container img {
    object-fit: cover;
}