/* ===== SEÇÃO VALORES ===== */
/* Seção com fundo escuro exibindo os valores da empresa */
.section-valores {
    background-color: #f7f9fa;  /* Fundo muito escuro (quase preto) */
    padding: 80px 40px;         /* Preenchimento generoso */
}

/* ===== CONTAINER PRINCIPAL ===== */
/* Define largura máxima e centraliza o conteúdo */
.valores-container {
    max-width: 1400px;          /* Largura máxima do container */
    margin: 0 auto;             /* Centraliza horizontalmente */
}

/* ===== CABEÇALHO DA SEÇÃO ===== */
/* Agrupa o título e descrição */
.valores-header {
    text-align: center;         /* Centraliza todo o texto */
    margin-bottom: 60px;        /* Espaço inferior */
}

/* ===== RÓTULO "VALORES" ===== */
/* Texto pequenininho acima do título com linhas laterais */
.valores-label {
    color: #317901;             /* Cor verde */
    font-size: 0.95rem;         /* Fonte pequena */
    font-weight: 600;           /* Negrito */
    letter-spacing: 2px;        /* Espaço aumentado entre letras */
    margin: 0 0 20px 0;         /* Margem inferior */
    position: relative;         /* Posicionamento relativo para pseudo-elementos */
    display: flex;              /* Layout flexível */
    align-items: center;        /* Centraliza verticalmente */
    justify-content: center;    /* Centraliza horizontalmente */
    gap: 15px;                  /* Espaço entre texto e linhas */
}

/* ===== LINHAS LATERAIS DO RÓTULO ===== */
/* Cria linhas antes e depois do texto "VALORES" */
.valores-label::before,
.valores-label::after {
    content: '';                /* Conteúdo vazio (apenas visual) */
    width: 30px;                /* Largura da linha */
    height: 1px;                /* Espessura da linha */
    background-color: #317901;  /* Cor verde */
}

/* ===== TÍTULO PRINCIPAL ===== */
/* Título grande da seção de valores */
.valores-header h2 {
    font-size: 2.8rem;          /* Título bem grande */  
    margin: 0 0 20px 0;         /* Margem inferior */
    line-height: 1.3;           /* Altura de linha */
    font-weight: 700;           /* Negrito forte */
}

/* ===== PALAVRA DESTACADA NO TÍTULO ===== */
/* Uma palavra do título em verde */
.valores-header h2 span {
    color: #317901;             /* Cor verde */
}

/* ===== DESCRIÇÃO DA SEÇÃO ===== */
/* Texto explicativo abaixo do título */
.valores-description {
    color: #999999;             /* Cinza */
    font-size: 1.05rem;         /* Tamanho legível */
    line-height: 1.6;           /* Altura de linha generosa */
    max-width: 600px;           /* Largura máxima para legibilidade */
    margin: 0 auto;             /* Centraliza */
}

/* ===== GRID DOS CARDS DE VALORES ===== */
/* Organiza os cards em 3 colunas */
.valores-grid {
    display: grid;              /* Layout em grid */
    grid-template-columns: repeat(3, 1fr);  /* 3 colunas iguais */
    gap: 30px;                  /* Espaço entre cards */
    width: 100%;                /* Ocupar toda a largura */
}

/* ===== CARD DE VALOR ===== */
/* Card individual com ícone, título e descrição */
.valor-card {
    background-color: white;  /* Fundo cinza-preto */  /* Borda cinza */
    border: 1px solid #9999996b;        /* Borda cinza */
    border-radius: 12px;        /* Cantos arredondados */
    padding: 40px 30px;         /* Preenchimento interno */
    display: flex;              /* Layout flexível */
    flex-direction: column;     /* Conteúdo empilhado */
    gap: 20px;                  /* Espaço entre elementos */
    transition: all 0.3s ease;  /* Transição suave para hover */
    box-shadow: black;
}

/* ===== EFEITO AO PASSAR O MOUSE ===== */
/* Muda visual do card quando o mouse passa */
.valor-card:hover {    /* Borda fica verde */
    background-color: rgb(240, 240, 240);  /* Fundo fica mais claro */
    transform: translateY(-5px); /* Move para cima levemente */
}

/* ===== ÍCONE DO CARD ===== */
/* Container para o ícone/imagem */
.valor-icon {
    display: flex;              /* Layout flexível */
    align-items: center;        /* Alinha verticalmente */
    justify-content: flex-start; /* Alinha à esquerda */
}

/* Imagem dentro do ícone */
.valor-icon img {
    width: 40px;                /* Tamanho da imagem */
    height: 40px;               /* Tamanho quadrado */
    object-fit: contain;        /* Contém a imagem dentro da caixa */
}

/* ===== TÍTULO DO CARD ===== */
/* Título do valor (ex: "Inovação", "Qualidade", etc) */
.valor-card h3 {
    color: black;             /* Texto branco */
    font-size: 1.3rem;          /* Tamanho do título */
    font-weight: 600;           /* Negrito */
    margin: 0;                  /* Sem margem */
    line-height: 1.2;           /* Altura de linha */
}

/* ===== DESCRIÇÃO DO CARD ===== */
/* Texto descritivo do valor */
.valor-card p {
    color: #999999;             /* Cinza */
    font-size: 0.95rem;         /* Tamanho pequeno */
    line-height: 1.6;           /* Altura de linha generosa */
    margin: 0;                  /* Sem margem */
}

/* ===== RESPONSIVIDADE PARA TABLETS ===== */
@media (max-width: 1024px) {
    .section-valores {
        padding: 60px 30px;     /* Preenchimento reduzido */
    }

    /* Grid com 2 colunas em tablets */
    .valores-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 colunas */
        gap: 25px;              /* Espaço reduzido */
    }

    .valores-header h2 {
        font-size: 2.2rem;      /* Título menor */
    }

    .valor-card {
        padding: 35px 25px;     /* Preenchimento reduzido */
    }
}

/* ===== RESPONSIVIDADE PARA CELULARES MÉDIOS ===== */
@media (max-width: 768px) {
    .section-valores {
        padding: 40px 20px;     /* Preenchimento reduzido */
    }

    .valores-header {
        margin-bottom: 40px;    /* Espaço reduzido */
    }

    /* Rótulo ainda menor */
    .valores-label {
        font-size: 0.85rem;     /* Fonte menor */
    }

    /* Linhas laterais mais curtas */
    .valores-label::before,
    .valores-label::after {
        width: 20px;            /* Linhas mais curtas */
    }

    .valores-header h2 {
        font-size: 1.8rem;      /* Título menor */
    }

    .valores-description {
        font-size: 0.95rem;     /* Descrição menor */
    }

    /* Grid com 1 coluna em celulares */
    .valores-grid {
        grid-template-columns: 1fr;  /* 1 coluna apenas */
        gap: 20px;              /* Espaço reduzido */
    }

    .valor-card {
        padding: 25px 20px;     /* Preenchimento reduzido */
    }

    .valor-card h3 {
        font-size: 1.1rem;      /* Título do card menor */
    }

    .valor-card p {
        font-size: 0.9rem;      /* Descrição menor */
    }
}

/* ===== RESPONSIVIDADE PARA CELULARES PEQUENOS ===== */
@media (max-width: 480px) {
    .section-valores {
        padding: 30px 15px;     /* Preenchimento bem reduzido */
    }

    .valores-header {
        margin-bottom: 30px;    /* Espaço reduzido */
    }

    /* Rótulo ainda menor */
    .valores-label {
        font-size: 0.75rem;     /* Fonte bem pequena */
        gap: 10px;              /* Espaço reduzido entre elementos */
    }

    /* Linhas laterais ainda mais curtas */
    .valores-label::before,
    .valores-label::after {
        width: 15px;            /* Linhas muito curtas */
    }

    /* Título bem pequeno */
    .valores-header h2 {
        font-size: 1.5rem;      /* Título bem pequeno */
        margin-bottom: 15px;    /* Espaço reduzido */
    }

    .valores-description {
        font-size: 0.85rem;     /* Descrição bem pequena */
    }

    .valores-grid {
        gap: 15px;              /* Espaço pequeno entre cards */
    }

    .valor-card {
        padding: 20px 15px;     /* Preenchimento bem reduzido */
    }

    /* Ícone ainda menor */
    .valor-icon img {
        width: 35px;            /* Ícone bem pequeno */
        height: 35px;
    }

    .valor-card h3 {
        font-size: 1rem;        /* Título do card bem pequeno */
    }

    .valor-card p {
        font-size: 0.85rem;     /* Descrição bem pequena */
        line-height: 1.5;       /* Altura de linha compacta */
    }
}