/* Estilo del contenedor principal de los beneficios */
.beneficios-container {
    margin: 20px; /* Añade un margen de 20px alrededor del contenedor */
    padding: 20px; /* Añade un espacio interno de 20px dentro del contenedor */
}

/* Estilo de cada beneficio individual */
.beneficio {
    margin: 20px 0; /* Separación vertical entre cada beneficio */
    padding: 10px; /* Espacio interno dentro de cada beneficio */
    border: 1px solid #ddd; /* Borde gris claro */
    border-radius: 8px; /* Redondea las esquinas */
    text-align: center; /* Centra el texto */
}

/* Estilo para las imágenes dentro de los beneficios */
.beneficio-img {
    max-width: 100%; /* La imagen ocupa el ancho máximo disponible */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 8px; /* Redondea las esquinas de la imagen */
}

/* Contenedor de la barra de progreso */
.progress-container {
    margin-top: 10px; /* Separación entre la barra de progreso y el contenido superior */
}

/* Estilo para la barra de progreso */
.progress-custom {
    height: 20px; /* Altura de la barra de progreso */
    background-color: #f3f3f3; /* Fondo gris claro */
    border-radius: 5px; /* Redondea las esquinas de la barra */
    overflow: hidden; /* Oculta cualquier contenido que sobresalga */
    margin-bottom: 10px; /* Separación inferior */
}

/* Estilo para la parte activa de la barra de progreso */
.progress-bar {
    height: 100%; /* La barra activa ocupa todo el alto del contenedor */
    background-color: #349B7D; /* Fondo verde para el progreso */
    text-align: center; /* Centra el texto dentro de la barra */
    color: white; /* Color blanco para el texto */
    line-height: 20px; /* Alineación vertical del texto */
    font-size: 12px; /* Tamaño de la fuente dentro de la barra */
}

/* RESPONSIVE DESIGN */

/* Para pantallas de hasta 1024px */
@media (max-width: 1024px) {
    .beneficios-container {
        margin: 15px; /* Reducir márgenes para pantallas medianas */
        padding: 15px; /* Reducir padding */
    }

    .beneficio {
        margin: 15px 0; /* Reducir el margen entre beneficios */
        padding: 8px; /* Reducir padding dentro de cada beneficio */
    }

    .beneficio-img {
        max-width: 90%; /* Limitar el ancho de las imágenes */
    }

    .progress-custom {
        height: 18px; /* Reducir la altura de la barra de progreso */
    }

    .progress-bar {
        font-size: 10px; /* Reducir el tamaño de la fuente dentro de la barra de progreso */
    }
}

/* Para pantallas de hasta 768px */
@media (max-width: 768px) {
    .beneficios-container {
        margin: 10px; /* Reducir márgenes en pantallas pequeñas */
        padding: 10px; /* Reducir padding */
    }

    .beneficio {
        margin: 10px 0; /* Reducir el margen entre beneficios */
        padding: 5px; /* Reducir padding dentro de cada beneficio */
    }

    .beneficio-img {
        max-width: 80%; /* Limitar el ancho de las imágenes aún más */
    }

    .progress-custom {
        height: 16px; /* Reducir la altura de la barra de progreso */
    }

    .progress-bar {
        font-size: 8px; /* Reducir el tamaño de la fuente dentro de la barra de progreso */
    }
}