/* ==========================================================================
   SEÇÃO 2 / SUPER BLOCO 2 - VALORES (CSS SIMPLIFICADO E CORRETO)
   ========================================================================== */

/* --- O Contêiner Principal da Seção --- */
.values-section {
    background-color: #121212; /* Fundo preto fosco */
    color: #fff;
    padding: 120px 5%; /* Espaçamento generoso e seguro */
    box-sizing: border-box;
}

/* --- O Grid que Alinha os Itens --- */
.values-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Cria 3 colunas de tamanho igual */
    gap: 60px; /* Espaço entre as colunas */
    max-width: 1200px; /* Limita a largura para não esticar demais */
    margin: 0 auto; /* Centraliza o grid na página */
}

/* --- Cada Item Individualmente --- */
.value-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha o conteúdo à esquerda */
    text-align: left;
    position: relative; /* Necessário para a linha divisória */
}

/* --- A Linha Divisória Vertical --- */
/* Ela só aparece entre o item 1-2 e 2-3 */
.value-item:not(:first-child)::before {
    content: '';
    position: absolute;
    left: -30px; /* Posiciona a linha exatamente no meio do 'gap' */
    top: 10%;
    height: 80%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.1); /* Linha sutil */
}

/* --- Estilos do Conteúdo Interno (Ícone, Título, Descrição) --- */
.value-icon svg {
    width: 24px;
    height: 24px;
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 1; /* Traço fino e elegante */
    margin-bottom: 30px;
}

.value-title {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.value-description {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.8;
}

/* --- Responsividade (Como se comporta em telas menores) --- */

/* Para Tablets */
@media (max-width: 992px) {
    .values-container {
        grid-template-columns: 1fr; /* Transforma em 1 coluna */
        gap: 80px; /* Aumenta o espaço vertical entre os itens */
    }

    /* Esconde a linha divisória quando está em uma única coluna */
    .value-item:not(:first-child)::before {
        display: none;
    }

    .value-item {
        align-items: center; /* Centraliza o conteúdo em telas menores */
        text-align: center;
    }
}