/* General de la sección */
#valores {
    text-align: center;
    padding: 50px 20px;
    background-color: #f9f9f9; /* Fondo claro para la sección */
}

#valores h2 {
    font-size: 3em;
    color: #051041; /* Color del texto en negro */
    margin-bottom: 15px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    background-color: #FFC107; /* Fondo amarillo */
    padding: 10px; /* Añade espacio alrededor del texto */
    border-radius: 10px; /* Esquinas redondeadas en el fondo */
}

/* Párrafo debajo del título */
#valores p {
    font-size: 1.2em;
    color: #050505;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 40px;
    line-height: 1.8;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Contenedor de la galería */
.valores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajusta el número de columnas automáticamente */
    gap: 20px; /* Espacio entre los cuadros */
    justify-items: center; /* Centra los elementos en cada columna */
}

/* Contenedor de cada cuadro de imagen + texto */
.valores-grid .item {
    background-color: #03052b; /* Fondo gris */
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column; /* Pone la imagen encima del texto */
    align-items: center;
    max-width: 300px; /* Tamaño máximo de cada cuadro */
}

/* Diseño de las imágenes dentro del cuadro */
.valores-grid img {
    width: 150px; /* Tamaño de la imagen */
    height: 150px;
    border-radius: 50%; /* Imagen circular */
    object-fit: cover; /* Ajusta la imagen para que no se deforme */
    margin-bottom: 20px; /* Espacio entre la imagen y el texto */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Diseño del texto dentro del cuadro */
.valores-grid .caption {
    font-size: 1.1em;
    color: #ffffff; /* Texto blanco */
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    line-height: 1.5;
}
@media screen and (max-width: 768px) {
    #valores h2 {
        font-size: 2em; /* Reduce el tamaño del título */
        padding: 8px; /* Ajusta el relleno */
        letter-spacing: 1px; /* Reduce el espacio entre letras */
    }

    #valores p {
        font-size: 1em; /* Reduce el tamaño del párrafo */
        line-height: 1.5; /* Ajusta la altura de línea */
    }

    .valores-grid .caption {
        font-size: 0.9em; /* Reduce el tamaño del texto en los cuadros */
    }

    .valores-grid .item {
        padding: 20px 15px; /* Reduce el espacio interno del cuadro */
        width: 100%; /* Ajusta el ancho máximo de los cuadros */
        aspect-ratio: 1; /* Mantiene proporciones cuadradas */
        display: flex; /* Para alinear contenido correctamente */
        flex-direction: column; /* Ordena imagen y texto en columnas */
        justify-content: center; /* Centra contenido verticalmente */
        align-items: center; /* Centra contenido horizontalmente */
    }

    .valores-grid img {
        width: 80%; /* Ajusta el tamaño de las imágenes al cuadro */
        max-height: 80%; /* Controla la altura máxima para evitar desbordes */
        margin-bottom: 15px; /* Espacio entre imagen y texto */
        object-fit: contain; /* Ajusta la imagen sin deformarla */
    }
}