:root {
    --primary-color: #dcae1f; /* Dourado/Amarelo da Erickson */
    --secondary-color: #343a40; /* Cinza escuro para textos */
    --text-dark: #212529; /* Muito escuro para títulos */
    --text-gray: hsl(0, 0%, 30%); /* Cinza mais suave para descrições */
    --white: hsl(0, 0%, 100%); /* Branco */
    --clr-bg-card: #f8f9fa; /* Fundo leve para cards */
    --clr-border-card: rgba(0, 0, 0, 0.125); /* Borda padrão de card */
    --success-color: #28a745; /* Verde para preços */
    --info-color: #17a2b8; /* Azul claro para info/combo */
    --text-on-primary-dark: #000000; /* Preto puro para máximo contraste sobre o amarelo/dourado */
    --text-on-primary-gray: #333333; /* Um cinza muito escuro para descrições no card */
}

/* Geral da Seção School */
.school-section {
    background-color: #e8e8e8; /* Fundo branco */
    padding: 6rem 0;
}

.school-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3rem;
    justify-content: center;
}

.school-text {
    flex: 1 1 55%;
    min-width: 350px;
    max-width: 700px; /* Ajuste conforme o texto se comporta, para não ficar muito largo */
}

    .school-text h3 {
        color: var(--secondary-color);
        font-weight: 700;
        margin-bottom: 0.8rem;
        font-size: 2.2rem;
    }

    .school-text p {
        color: var(--text-dark);
        line-height: 1.8;
        font-size: 1.15rem;
        margin-bottom: 1.5rem;
    }

/* Estilos para o carrossel de imagens */
.school-carousel-container {
    flex: 1 1 35%;
    min-width: 300px;
    max-width: 500px; /* Limita a largura máxima do carrossel */
    margin: 0 auto;
    border-radius: 10px; /* Bordas arredondadas para o carrossel inteiro */
    height: 600px; /* **AJUSTE ESTE VALOR** para a altura que melhor acomoda suas imagens 1536x2048
                       e seja esteticamente agradável. Por exemplo, 600px é um bom começo. */
    position: relative; /* Necessário para posicionamento absoluto dos itens */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Sombra para o contêiner principal do carrossel */
}

.school-carousel-item {
    height: 100%; /* Ocupa a altura total do school-carousel-container */
    width: 100%; /* Ocupa a largura total do school-carousel-container */
    background-color: #ccc; /* Cor de fundo provisória enquanto a imagem/vídeo carrega */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    overflow: hidden; /* Esconde qualquer conteúdo que transborde */
    border-radius: 10px;
}

    .school-carousel-item img {
        width: 100%; /* A imagem preenche 100% da largura do item */
        height: 100%; /* A imagem preenche 100% da altura do item */
        object-fit: cover;
        border-radius: 10px;
    }


/* Estilos da Erickson School (existentes para fade-in) */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    .fade-in.active {
        opacity: 1;
        transform: translateY(0);
    }

/* Estilos para os ícones de informação (WhatsApp) */
.info-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
}

    .info-icons a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin: 0 1rem;
        width: 60px;
        height: 60px;
        border: 2px solid var(--secondary-color);
        border-radius: 50%;
        text-decoration: none;
        color: var(--secondary-color);
        font-size: 2rem;
        transition: all 0.3s ease;
    }

        .info-icons a:hover {
            background-color: var(--secondary-color);
            color: var(--white);
            border-color: var(--secondary-color);
        }

/* Cores padrão para ícones de listas */
.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-dark {
    color: var(--text-dark) !important;
}

.text-gray {
    color: var(--text-gray) !important;
}

/* Media queries para responsividade */

@media (max-width: 991.98px) { /* Tablets e menores */
    .school-content {
        flex-direction: column;
        align-items: center;
    }

    .school-text, .school-carousel-container {
        flex: 1 1 100%;
        max-width: 600px;
    }

    .school-text {
        text-align: center;
        max-width: 100%; /* Remover limite de max-width aqui, se quiser que ocupe mais espaço em tablets */
    }

        .school-text .list-unstyled {
            align-items: center;
            padding-left: 0;
        }

    .school-carousel-container {
        height: 745px; /* Ajustei para tablets, um pouco mais de espaço */
        margin-bottom: 2rem; /* Adicionado margem para empurrar o vídeo se ele ainda estiver separado */
    }
}

@media (max-width: 767.98px) { /* Telemóveis */
    .school-section {
        padding: 4rem 0; /* Padding geral menor para telemóveis */
        padding-bottom: 6rem; /* **ADICIONADO:** Aumenta o padding inferior da seção para empurrar a próxima */
    }

    .school-text h3 {
        font-size: 1.8rem;
    }

    .school-text p {
        font-size: 1rem;
    }

    .school-carousel-container {
        height: 450px; /* **AJUSTADO:** Altura do carrossel para telemóveis, um pouco mais compacta */
    }
}

/* Media query para dispositivos ainda menores (largura máxima de 640px, celulares muito pequenos) */
@media (max-width: 640px) {
    .school-section {
        padding-top: 3rem; /* Menor padding no topo */
        padding-bottom: 5rem; /* Menor padding no final para telas muito pequenas */
    }

    .school-text {
        min-width: unset; /* Permite que o texto encolha ainda mais se necessário */
    }

    .school-carousel-container {
        min-width: unset; /* Permite que o carrossel encolha ainda mais se necessário */
        height: 620px; /* Ajuste para telas muito pequenas */
    }
}

/* Media query para dispositivos ainda menores (largura máxima de 576px, celulares muito pequenos) */
@media (max-width: 576px) {
    .school-section {
        padding-top: 3rem; /* Menor padding no topo */
        padding-bottom: 5rem; /* Menor padding no final para telas muito pequenas */
    }

    .school-text {
        min-width: unset; /* Permite que o texto encolha ainda mais se necessário */
    }

    .school-carousel-container {
        min-width: unset; /* Permite que o carrossel encolha ainda mais se necessário */
        height: 465px; /* Ajuste para telas muito pequenas */
    }
}

/* Media query para dispositivos ainda menores (largura máxima de 480px, celulares muito pequenos) */
@media (max-width: 480px) {
    .school-section {
        padding-top: 2rem; /* Menor padding no topo */
        padding-bottom: 7rem; /* Menor padding no final para telas muito pequenas */
    }

    .school-text {
        min-width: unset; /* Permite que o texto encolha ainda mais se necessário */
    }

    .school-carousel-container {
        min-width: unset; /* Permite que o carrossel encolha ainda mais se necessário */
        height: 550px; /* Ajuste para telas muito pequenas */
    }
}

/* Esta deve ser a última media query para ter prioridade sobre as anteriores em telas muito pequenas */
@media (max-width: 380px) {
    .school-section {
        padding-top: 2rem;
        padding-bottom: 5rem; /* REDUZIDO: Padding menor para evitar espaço em excesso em 360px */
    }

    .school-carousel-container {
        height: 380px; /* Ligeiramente menor para telas muito estreitas */
    }
}