/* Dentro de static/css/sobre.css - SUBSTITUA TODO O CONTEÚDO */

.sobre-section {
    background-color: var(--cor-branca); /* O fundo no design é branco */
    padding: 100px 0; /* Aumentando o espaçamento vertical */
    overflow: hidden; /* Evita barras de rolagem horizontais inesperadas */
}

.sobre-section .container {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap; /* Garante que vai quebrar em telas menores */
}

/* --- Coluna da Esquerda: Texto (COM CORREÇÕES) --- */
.text-column {
    flex: 1 1 500px; /* Flex-grow, flex-shrink, flex-basis. Permite que cresça mas não encolha abaixo de 500px */
}

.text-column .divider {
    width: 50px;
    height: 4px; /* Um pouco mais espesso como no design */
    background-color: var(--cor-primaria);
    margin-bottom: 25px;
    border-radius: 2px;
}

.text-column h2 {
    font-size: 2.3rem;  /* CORREÇÃO: Aumentando o tamanho da fonte */
    font-weight: 700;
    color: var(--cor-primaria); /* CORREÇÃO: Aplicando a cor azul do título */
    text-align: left;
    margin-bottom: 25px;
    line-height: 1.3;
}

.text-column p {
    font-size: 1.1rem; /* CORREÇÃO: Aumentando um pouco a fonte do parágrafo */
    line-height: 1.8;
    color: #6c757d; /* Um tom de cinza mais próximo ao do design */
}

/* --- Coluna da Direita: Vídeo (COM CORREÇÕES) --- */
.video-column {
    flex: 1 1 500px; /* Mesma base da coluna de texto para equilíbrio */
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 522px; /* Largura do design */
    height: 0;
    padding-top: 79.3%; /* CORREÇÃO: Proporção (414 / 522) para o formato do vídeo no design */
    border-radius: 80px; /* CORREÇÃO: Bordas muito mais arredondadas para o efeito "pílula" */
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* === Responsividade para Celulares (Ajustada) === */
@media (max-width: 992px) {
    .sobre-section .container {
        flex-direction: column;
        gap: 40px;
    }

    .text-column h2 {
        font-size: 2.2rem; /* Ajuste para telas menores */
    }
}


/* === Seção Pilares (Propósito, Missão, Visão) === */

.pilares-section {
    background-color: #f0f2f5; /* Cor cinza claro do fundo */
    padding: 60px 0;
    position: relative;
    z-index: 1;
}

.pilares-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Cria 3 colunas de tamanho igual */
    gap: 40px; /* Espaço entre as colunas */
    text-align: center;
}

.pilar-item h3 {
    color: var(--cor-primaria);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.pilar-item p {
    color: #3b3d3f;
    font-size: 1rem;
    line-height: 1.6;
}

/* Responsividade para a seção de pilares */
@media (max-width: 768px) {
    .pilares-grid {
        grid-template-columns: 1fr; /* Em telas menores, transforma em 1 coluna */
        gap: 50px;
    }
}