/* --- Estilos para la Sección del Banner Principal (Hero Banner) --- */
.hero-banner {
    width: 100%;
    min-height: 500px; /* Altura mínima para el banner */
    background: url('../img/quienes_somos.webp') no-repeat center center/cover; /* Reemplaza con la ruta de tu imagen */
    position: relative;
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    color: var(--color-blanco); /* Color de texto por defecto para todo el banner */
    overflow: hidden; /* Oculta cualquier desbordamiento de los pseudo-elementos */
}

/* Capa de superposición y efecto diagonal */
/* .hero-banner::before { */
    /* content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; */
    /* background-color: rgba(25, 40, 99, 0.8); Fondo azul oscuro con 80% de opacidad */
    /* z-index: 1; Para que esté sobre la imagen pero debajo del contenido */
    /* Clip-path para el corte diagonal, ajusta los porcentajes según necesites */
    /* Este clip-path crea una forma que corta desde la izquierda inferior hasta la derecha superior */
    /* clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%); Ajustado para el efecto diagonal visible */
/* } */

.hero-content {
    position: relative; /* Asegura que el contenido esté sobre la capa de superposición */
    z-index: 2;
    max-width: 1400px; /* Establece el ancho máximo para el contenedor del contenido */
    margin: 0 auto; /* Centra el contenido */
    width: 100%; /* Asegura que ocupe el 100% del ancho del padre hasta el max-width */
    padding: 20px; /* Añade un padding para que el contenido no toque los bordes */
}

.hero-text {
    max-width: 600px; /* Limita el ancho del texto para mejor lectura */
    padding: 30px;
    /* background-color: rgba(0, 0, 0, 0.2); Fondo semitransparente para el texto */
    border-radius: 8px;
}

.hero-title {
    font-size: 50px; /* Tamaño de fuente para el título principal */
    line-height: 1.3;
    margin-bottom: 20px;
}

.hero-title .text-green {
    font-family: 'Bilmond';
    color: var(--color-verde-principal); /* Color verde para "Orgullosamente Peruanos," */
    font-weight: 700;
    display: block; /* Para asegurar que "Orgullosamente Peruanos," ocupe su propia línea si es muy largo */
}

.hero-title .text-white {
    font-family: 'Bilmond';
    color: var(--color-blanco); /* Color blanco para el resto del texto */
    font-weight: 400; /* Menos énfasis que el título principal */
    font-size: 32px; /* Ligeramente más pequeño que el título principal si lo desea en una sola línea */
    display: block; /* Asegura que el resto del texto vaya en una nueva línea por defecto */
}

/* --- Responsive para el Banner Principal --- */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 2.2em; /* Reducir tamaño de fuente en pantallas medianas */
    }
    .hero-title .text-white {
        font-size: 0.7em;
    }
}

@media (max-width: 992px) { /* Breakpoint para tabletas y laptops pequeñas (ej. 14-15 pulgadas) */
    .hero-banner {
        min-height: 400px; /* Reducir altura mínima */
    }

    .hero-banner::before {
        /* Ajustar el corte diagonal para pantallas más pequeñas, o hacerlo menos pronunciado */
        clip-path: polygon(0 0, 70% 0, 50% 100%, 0% 100%); /* Hacia la izquierda para dar más espacio al texto */
    }

    .hero-content {
        max-width: 100%; /* Ocupa el 100% del ancho en estas pantallas */
        padding: 15px;
    }

    .hero-text {
        max-width: 500px; /* Ajustar el ancho del texto */
        padding: 20px;
    }

    .hero-title {
        font-size: 1.8em;
    }
    .hero-title .text-white {
        font-size: 0.65em;
    }
}

@media (max-width: 768px) { /* Breakpoint para móviles */
    .hero-banner {
        min-height: 260px; /* AJUSTADO: Altura mínima reducida para móvil (antes 280px) */
        background-position: center center; /* En móvil, centrar la imagen para mejor adaptabilidad */
        justify-content: flex-start; /* Alinea el contenido a la IZQUIERDA en móvil */
        align-items: center; /* Centra verticalmente el contenido en móvil. Puedes ajustar a flex-end si el texto va abajo. */
        padding-bottom: 0; /* No es necesario si el contenido está centrado verticalmente */
    }

    /* .hero-banner::before { (COMENTADO)
        clip-path: none; 
        background-color: rgba(25, 40, 99, 0.85);
    } */

    .hero-content {
        max-width: 95%; /* Ajusta el ancho máximo para el contenedor en móvil */
        padding: 0 10px; /* Añade padding horizontal para que el contenido no pegue a los bordes de la pantalla */
        text-align: left; /* Alinea el texto a la IZQUIERDA dentro de hero-content */
    }

    .hero-text {
        max-width: 60%; /* Reduce el ancho del contenedor de texto al 60% del hero-content */
        margin: 0; /* Elimina margin: auto para que no se centre */
        padding: 15px 0; /* Reduce padding para móvil, si quieres padding lateral, hazlo en hero-content */
        text-align: left; /* Asegura que el texto esté alineado a la IZQUIERDA en su caja */
    }

    .hero-title {
        font-size: 7vw; /* Usa 'vw' para un tamaño de fuente responsivo que escala con el viewport */
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .hero-title .text-green {
        display: block; /* Fuerza "Orgullosamente" y "Peruanos" a su propia línea (con <br> en HTML) */
    }

.hero-title .text-white {
        font-size: 4.5vw; /* Ajustar el tamaño del texto blanco */
        display: block; /* Asegura que el texto largo esté en su propia línea */
    }
}

@media (max-width: 480px) {
    .hero-banner {
        min-height: 200px; /* AJUSTADO: Altura mínima aún más reducida para pantallas muy pequeñas (antes 220px) */
        padding-bottom: 0;
    }

    .hero-text {
        max-width: 60%; /* Mantiene el 60% también para pantallas muy pequeñas */
        padding: 10px 0; /* Ajusta padding */
    }

    .hero-title {
        font-size: 6vw;
    }
    .hero-title .text-white {
        font-size: 3.8vw;
    }
}





/* --- Estilos para la Sección de Contenido de Quienes Somos --- */
.seccion-quienes-somos-contenido {
    background-color: var(--color-blanco); /* Fondo blanco */
    padding: 40px 0; /* Espaciado superior e inferior */
    display: flex; /* Para centrar el contenedor principal */
    justify-content: center; /* Centra el contenedor principal */
}

.contenedor-quienes-somos {
    max-width: 1200px;
    display: flex;
    /* Remover flex-wrap: wrap; aquí para que no se apilen en escritorio */
    align-items: center; /* Alinea los ítems verticalmente al centro */
    gap: 80px; /* Espacio entre la imagen y el texto */
    justify-content: center;
    width: 100%; /* Asegura que ocupe todo el ancho disponible hasta el max-width */
    padding: 0 15px; /* Pequeño padding horizontal para que no toque los bordes de la pantalla */
}

.imagen-quienes-somos {
    /* Ajustar flex-basis para una distribución más clara */
    flex-basis: 30%; /* Directamente 30% */
    max-width: 30%; /* Asegura que no exceda el 30% */
    width: 100%; /* Se adapta a su flex-basis */
    overflow: hidden; /* Asegura que el border-radius se aplique a la imagen */
}

.imagen-quienes-somos img {
    margin: 0 auto;
    border-radius: 20px; /* Bordes redondeados */
    display: block;
    width: 100%; /* La imagen ocupa el 100% de su contenedor */
    height: auto; /* Mantiene la proporción */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
}

.texto-quienes-somos {
    /* Ajustar flex-basis para una distribución más clara */
    flex-basis: 70%; /* Directamente 70% */
    max-width: 70%; /* Asegura que no exceda el 70% */
    width: 100%; /* Se adapta a su flex-basis */
    text-align: right; /* Alineación del texto a la derecha */
}

.texto-quienes-somos p {
    font-family: 'Bilmond', sans-serif; /* Fuente Bilmond */
    font-weight: 400; /* Asumiendo Bilmond Regular, ajuste si es diferente */
    font-size: 24px; /* Tamaño de fuente para el párrafo */
    line-height: 1.5;
    color: var(--color-gris-oscuro); /* Color de texto general */
    margin-bottom: 0;
    font-style: italic; /* Texto itálico como en la imagen */
    text-align: center; /* Centrar el texto en escritorio */
}

/* --- Responsive para la Sección de Contenido de Quienes Somos --- */
@media (max-width: 992px) {
    .contenedor-quienes-somos {
        flex-direction: column; /* Apila la imagen y el texto en columnas */
        align-items: center; /* Centra los ítems horizontalmente en el contenedor */
        gap: 30px; /* Ajuste el gap para pantallas más pequeñas */
        flex-wrap: wrap; /* Añadir flex-wrap aquí para que se apile en móviles */
    }

    .imagen-quienes-somos,
    .texto-quienes-somos {
        flex-basis: auto; /* Eliminar flex-basis basado en porcentaje */
        max-width: 90%; /* Limitar el ancho de los elementos a un porcentaje del contenedor padre */
        width: 100%; /* Ocupa el 100% del ancho disponible hasta el max-width */
        margin: 0 auto; /* Centrar los bloques de imagen y texto */
        padding-left: 0; /* Elimina padding lateral */
        padding-right: 0; /* Asegura que no haya padding que impida el centrado */
    }
    
    .imagen-quienes-somos img {
        width: 100%; /* Asegurar que la imagen ocupe el 100% de su contenedor ajustado */
        height: auto; /* Mantiene la proporción */
        max-width: 80%; /* Hacer la imagen un poco más pequeña que 100% de su contenedor */
        margin: 0 auto; /* Centrar la imagen si es más pequeña */
    }

    .texto-quienes-somos p {
        font-size: 24px;
        padding: 0; /* Eliminar padding lateral para que el max-width funcione mejor */
        text-align: center; /* Centrar el párrafo en móviles */
    }
}

@media (max-width: 768px) {
    .seccion-quienes-somos-contenido {
        padding: 50px 0;
    }
    .texto-quienes-somos p {
        font-size: 20px;
    }
    .imagen-quienes-somos {
        max-width: 70%; /* Ajuste para tablets */
    }
}

@media (max-width: 480px) {
    .seccion-quienes-somos-contenido {
        padding: 40px 0;
    }
    .texto-quienes-somos p {
        font-size: 18px;
    }
    .imagen-quienes-somos {
        max-width: 90%; /* Ajuste para que la imagen no se vea muy pequeña en móviles muy pequeños */
    }
}
/* --- Estilos para la Sección Misión --- */
/* --- Estilos para la Sección Misión --- */
.seccion-mision {
    background-color: var(--color-blanco-oscuro); /* O el color de fondo que desee */
    /* padding: 80px 0; Espaciado superior e inferior para escritorio */
    display: flex; /* Para centrar el contenedor principal */
    justify-content: center; /* Centra el contenedor principal */
}

.contenedor-mision {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan */
    align-items: center; /* Alinea los ítems verticalmente */
    gap: 40px; /* Espacio entre el texto y la imagen */
    max-width: 1200px; /* Ancho máximo para el contenedor principal en escritorio */
    width: 100%; /* Asegura que ocupe todo el ancho disponible hasta el max-width */
    padding: 40px 15px 0 15px; /* Pequeño padding horizontal para que no toque los bordes de la pantalla */
}

.texto-mision {
    flex-basis: calc(50% - 20px); /* 50% del ancho del padre, restando la mitad del gap */
    max-width: calc(50% - 20px); /* Asegura que no exceda el 50% */
    width: 100%; /* Se adapta a su flex-basis */
    text-align: left; /* Alineación del texto a la izquierda en escritorio */
}

.texto-mision h3 {
    font-family: 'Bilmond', sans-serif; /* Tipografía Bilmond */
    font-weight: 700; /* Negrita para el título, ajuste el peso si es diferente */
    font-size: 40px; /* Tamaño del título */
    color: var(--color-verde-principal); /* Color del título, ajuste según su paleta */
    margin-bottom: 20px;
}

.texto-mision p {
    font-family: 'Bilmond', sans-serif; /* Tipografía Bilmond */
    font-weight: 400; /* Regular para el párrafo, ajuste el peso si es diferente */
    font-size: 24px; /* Tamaño del párrafo */
    line-height: 1.6;
    color: var(--color-gris-oscuro); /* Color del texto del párrafo */
}

.imagen-mision {
    flex-basis: calc(50% - 20px); /* 50% del ancho del padre, restando la mitad del gap */
    max-width: calc(50% - 20px); /* Asegura que no exceda el 50% */
    width: 100%; /* Se adapta a su flex-basis */
    border-radius: 15px; /* Bordes redondeados para la imagen */
    overflow: hidden; /* Asegura que el border-radius funcione */
    display: flex; /* Para centrar la imagen si es más pequeña que su contenedor */
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
}

.imagen-mision img {
    display: block;
    width: 100%; /* La imagen ocupa el 100% del ancho de su contenedor */
    height: auto; /* Mantiene la proporción */
    max-height: 400px; /* Tamaño determinado para la altura de la imagen, ajuste según necesite */
    object-fit: contain; /* Para que la imagen se vea completa dentro de los límites */
    border-radius: 15px; /* Para que la imagen también tenga los bordes redondeados */
}

/* --- Responsive para la Sección Misión --- */
@media (max-width: 992px) {
    /* .seccion-mision {
        padding: 60px 0; Ajuste de padding para pantallas medianas
    } */
    .contenedor-mision {
        flex-direction: column; /* Apila el texto y la imagen en columnas (texto arriba, imagen abajo) */
        align-items: center; /* Centra horizontalmente los elementos hijos */
        gap: 30px; /* Ajuste el gap para pantallas más pequeñas */
    }

    .texto-mision,
    .imagen-mision {
        flex-basis: auto; /* Eliminar flex-basis basado en porcentaje */
        max-width: 90%; /* Ajustar el ancho máximo para los elementos en móvil */
        width: 100%; /* Asegurar que ocupen el ancho disponible hasta el max-width */
        margin: 0 auto; /* Centrar los bloques de texto y imagen */
    }

    .texto-mision h3 {
        font-size: 34px;
        text-align: center; /* Centrar el título de la misión */
    }

    .texto-mision p {
        font-size: 20px;
        padding: 0; /* Eliminar padding lateral para que el max-width funcione mejor */
        text-align: center; /* Centrar el párrafo de la misión */
    }

    .imagen-mision img {
        width: 100%; /* Asegurar que la imagen ocupe el 100% de su contenedor (que es max-width: 90%) */
        height: auto; /* Mantiene la proporción */
        max-height: none; /* Eliminar la altura máxima para que se ajuste proporcionalmente */
    }
}

@media (max-width: 768px) {
    /* .seccion-mision {
        padding: 60px 0;
    } */
    .texto-mision h3 {
        font-size: 28px;
    }
    .texto-mision p {
        font-size: 18px;
    }
    .imagen-mision {
        max-width: 80%; /* Ajuste de ancho de imagen en tablets */
    }
}

@media (max-width: 480px) {
    /* .seccion-mision {
        padding: 50px 0;
    } */
    .texto-mision h3 {
        font-size: 24px;
    }
    .texto-mision p {
        font-size: 16px;
    }
    .imagen-mision {
        max-width: 90%; /* Ajuste de ancho de imagen en móviles pequeños para que no sea diminuta */
    }
}



/* --- Estilos para la Sección Visión --- */
.seccion-vision {
    background-color: var(--color-blanco); /* Fondo blanco */
    /* padding: 80px 0; Espaciado superior e inferior */
    display: flex; /* Para centrar el contenedor principal */
    justify-content: center; /* Centra el contenedor principal */
}

.contenedor-vision {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan */
    align-items: center; /* Alinea los ítems verticalmente */
    gap: 40px; /* Espacio entre la imagen y el texto */
    max-width: 1200px; /* Ancho máximo para el contenedor principal en escritorio */
    width: 100%; /* Asegura que ocupe todo el ancho disponible hasta el max-width */
    padding: 0 15px; /* Pequeño padding horizontal para que no toque los bordes de la pantalla */
}

.imagen-vision {
    flex-basis: calc(50% - 20px); /* 50% del ancho del padre, restando la mitad del gap */
    max-width: calc(50% - 20px); /* Asegura que no exceda el 50% */
    width: 100%; /* Se adapta a su flex-basis */
    border-radius: 15px; /* Bordes redondeados para la imagen */
    overflow: hidden; /* Asegura que el border-radius funcione */
    display: flex; /* Para centrar la imagen si es más pequeña que su contenedor */
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
}

.imagen-vision img {
    display: block;
    width: 100%; /* La imagen ocupa el 100% del ancho de su contenedor */
    height: auto; /* Mantiene la proporción */
    max-height: 400px; /* Tamaño determinado para la altura de la imagen, ajuste según necesite */
    object-fit: contain; /* Para que la imagen se vea completa dentro de los límites */
    border-radius: 15px; /* Para que la imagen también tenga los bordes redondeados */
}

.texto-vision {
    flex-basis: calc(50% - 20px); /* 50% del ancho del padre, restando la mitad del gap */
    max-width: calc(50% - 20px); /* Asegura que no exceda el 50% */
    width: 100%; /* Se adapta a su flex-basis */
    text-align: right; /* Alineación a la derecha en escritorio */
}

.texto-vision h3 {
    font-family: 'Bilmond', sans-serif; /* Tipografía Bilmond */
    font-weight: 700; /* Negrita para el título, ajuste el peso si es diferente */
    font-size: 40px; /* Tamaño del título */
    color: var(--color-verde-principal); /* Color del título, ajuste según su paleta */
    margin-bottom: 20px;
}

.texto-vision p {
    font-family: 'Bilmond', sans-serif; /* Tipografía Bilmond */
    font-weight: 400; /* Regular para el párrafo, ajuste el peso si es diferente */
    font-size: 24px; /* Tamaño del párrafo */
    line-height: 1.6;
    color: var(--color-gris-oscuro); /* Color del texto del párrafo */
}

/* --- Responsive para la Sección Visión --- */
@media (max-width: 992px) {
    .contenedor-vision {
        flex-direction: column; /* Imagen arriba, texto abajo */
        align-items: center; /* Centrar horizontalmente los elementos */
        text-align: center; /* Centrar el texto */
        gap: 20px; /* Reducir el espacio entre imagen y texto en móvil */
    }

    .imagen-vision {
        flex-basis: auto; /* Ajustar la base al contenido */
        max-width: 60%; /* La imagen ocupa un porcentaje del ancho del contenedor en móvil */
        margin-bottom: 15px; /* Espacio entre la imagen y el texto */
    }

    .imagen-vision img {
        width: 100%; /* La imagen dentro del contenedor ocupa todo el ancho */
        height: auto; /* Mantiene la proporción */
        max-height: none; /* Eliminar la altura máxima para que se ajuste proporcionalmente */
    }

    .texto-vision {
        flex-basis: auto; /* Ajustar la base al contenido */
        max-width: 90%; /* El texto ocupa un porcentaje del ancho del contenedor */
        text-align: center; /* Asegurar que el texto esté centrado */
    }
}

@media (max-width: 768px) {
    .seccion-vision {
        padding: 60px 0;
    }
    .texto-vision h3 {
        font-size: 28px;
    }
    .texto-vision p {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .imagen-vision {
        max-width: 80%; /* Reducir aún más el tamaño de la imagen en móviles pequeños */
    }

    .texto-vision h3 {
        font-size: 24px; /* Reducir el tamaño del título en móviles pequeños */
    }

    .texto-vision p {
        font-size: 16px; /* Reducir el tamaño del párrafo en móviles pequeños */
    }
}

/* --- Estilos para la Sección de Valores --- */
/* --- Estilos para la Sección de Valores --- */
.seccion-valores {
    background-color: var(--color-blanco); /* Fondo blanco */
    padding: 80px 0; /* Espaciado superior e inferior */
    text-align: center; /* Centra el título principal */
}

.contenedor-principal-valores {
    max-width: 1200px; /* Ancho máximo para el contenedor de valores */
    margin: 0 auto; /* Centra el contenedor */
    padding: 0 15px; /* Padding horizontal para pantallas pequeñas */
}

.titulo-seccion-valores {
    font-family: 'Bilmond', sans-serif; /* Tipografía Bilmond */
    font-weight: 700; /* Negrita para el título, ajuste el peso si es diferente */
    font-size: 45px; /* Tamaño del título principal */
    color: var(--color-verde-principal); /* Color del título, ajuste según su paleta */
    margin-bottom: 50px; /* Espacio debajo del título principal */
    line-height: 1.2;
}

.grid-valores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 4 columnas en escritorio, se ajusta a 2 o 1 en móvil */
    column-gap: 0; /* Eliminamos el column-gap aquí para gestionar el espacio con el padding de los items */
    row-gap: 40px; /* Espacio vertical entre los ítems de la cuadrícula */
    justify-items: center; /* Centra los items horizontalmente dentro de sus celdas */
    align-items: stretch; /* CAMBIO CLAVE: Hace que los ítems se estiren a la altura de la fila */
    /* border: solid red 2px; REMOVIDO: Borde de depuración */
}

.item-valor {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido de cada ítem */
    text-align: center;
    padding: 10px; /* Padding interno para separar el contenido del borde */
    /* Línea divisoria vertical: ahora aplicamos a todos y luego removemos selectivamente */
    border-right: 1px solid var(--color-gris-oscuro); /* Su color verde principal, como en la imagen */
    box-sizing: border-box; /* Asegura que padding y borde estén incluidos en el ancho */
    padding-right: 20px; /* Ajuste para separar el texto del borde */
    padding-left: 20px; /* Ajuste para separar el texto del borde */
    /* border: solid blue 2px; REMOVIDO: Borde de depuración */
}

/* Elimina la línea divisoria del último elemento de cada fila para el layout de 4 columnas */
.grid-valores .item-valor:nth-child(4n) {
    border-right: none;
}

.item-valor img {
    width: 80px; /* Tamaño de los iconos, ajuste si es necesario */
    height: 80px;
    object-fit: contain;
    margin-bottom: 20px; /* Espacio debajo del icono */
}

.item-valor h3 {
    font-family: 'Bilmond', sans-serif; /* Tipografía Bilmond */
    font-weight: 600; /* Peso para los títulos de valor */
    font-size: 28px; /* Tamaño del título de cada valor */
    color: var(--color-azul-oscuro); /* Color de los títulos de valor, ajuste */
    margin-bottom: 10px;
    line-height: 1.2;
}

.item-valor p {
    font-family: 'Bilmond', sans-serif; /* Tipografía Bilmond */
    font-weight: 400; /* Regular para el párrafo */
    font-size: 16px; /* Tamaño del párrafo de cada valor */
    line-height: 1.5;
    color: var(--color-gris-oscuro); /* Color del texto del párrafo */
    margin-bottom: 0;
}

/* --- Responsive para la Sección de Valores --- */
@media (max-width: 992px) {
    .titulo-seccion-valores {
        font-size: 38px;
    }
    .grid-valores {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Dos columnas en tablets */
        row-gap: 30px;
    }
    /* Elimina el borde del segundo elemento de cada par (cuando hay 2 columnas) */
    .grid-valores .item-valor {
        border-right: 1px solid var(--color-verde-principal); /* Aplicar a todos de nuevo */
    }
    .grid-valores .item-valor:nth-child(2n) { /* Elimina para el segundo de cada par */
        border-right: none;
    }
    .item-valor h3 {
        font-size: 24px;
    }
    .item-valor p {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .seccion-valores {
        padding: 60px 0;
    }
    .titulo-seccion-valores {
        font-size: 30px;
        margin-bottom: 40px;
    }
    .item-valor img {
        width: 70px;
        height: 70px;
    }
    .item-valor h3 {
        font-size: 22px;
    }
    .item-valor p {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    .seccion-valores {
        padding: 50px 0;
    }
    .titulo-seccion-valores {
        font-size: 26px;
        margin-bottom: 30px;
    }
    .grid-valores {
        grid-template-columns: 1fr; /* Una columna en móviles pequeños */
        row-gap: 25px;
    }
    .item-valor {
        border-right: none !important; /* ¡Importante! Elimina el borde vertical en móviles */
        border-bottom: 1px solid var(--color-verde-principal); /* Línea inferior para separación */
        padding-bottom: 25px; /* Espacio extra para la línea inferior */
        margin-bottom: 0; /* Reiniciar margin-bottom para que row-gap controle el espacio */
    }
    .item-valor:last-child {
        border-bottom: none; /* Elimina la línea inferior del último elemento */
        padding-bottom: 0;
    }
    .item-valor img {
        width: 60px;
        height: 60px;
    }
    .item-valor h3 {
        font-size: 20px;
    }
    .item-valor p {
        font-size: 14px;
    }
}