/* Footer */
footer {
    background: #9bd9d8;
    padding: 60px 0 30px 0;
    margin: auto;
    overflow: hidden;
}

.contenedor-footer {
    display: flex;
    width: 90%;
    justify-content: space-evenly;
    margin: auto;
    padding-bottom: 50px;
    border-bottom: 1px solid #ccc;
}

/* Alineación y estilo de cada bloque */
.content-foo {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos */
    text-align: center;
    width: 30%; /* Asegura que cada bloque tenga espacio suficiente */
}

/* Alineación de iconos con texto */
.content-foo h4 {
    display: flex;
    align-items: center; /* Alinea verticalmente */
    justify-content: center; /* Centra horizontalmente */
    gap: 10px; /* Espacio entre texto e icono */
    color: #fff;
    font-size: 18px;
    position: relative; /* Para posicionar la línea separadora */
    padding-bottom: 15px; /* Da más espacio para la línea */
    width: 100%; /* Que el h4 ocupe el ancho del bloque */
    text-align: center;
}

/* Línea separadora más larga y centrada */
.content-foo h4::after {
    content: "";
    display: block;
    width: 80%; /* Ajusta el ancho de la línea */
    height: 3px;
    background-color: #ffed00;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Centra la línea */
}

/* Ajuste de tamaño y alineación de los iconos */
.content-foo .icon {
    width: 24px; /* Ajusta el tamaño del icono */
    height: 24px;
    vertical-align: middle;
}

/* Estilos de los párrafos */
.content-foo p,
.content-foo a {
    color: #000;
    font-size: 16px;
    margin-top: 5px;
}

/* Estilos del texto final */
.titulo-final {
    text-align: center;
    font-size: 24px;
    margin: 20px 0 0 0;
    color: #000;
}


/* Media queries para pantallas pequeñas (menos de 768px) */
@media (max-width: 768px) {
    .contenedor-footer {
        flex-direction: column; /* Cambia a una columna en pantallas pequeñas */
        align-items: center; /* Centra los elementos horizontalmente */
    }

    .content-foo {
        width: 100%; /* Ocupa el 100% del ancho en pantallas pequeñas */
        margin-bottom: 30px; /* Aumenta el espacio entre bloques */
    }

    .content-foo h4 {
        font-size: 16px; /* Reduce el tamaño del texto en pantallas pequeñas */
    }

    .content-foo p,
    .content-foo a {
        font-size: 14px; /* Reduce el tamaño del texto en pantallas pequeñas */
    }

    .titulo-final {
        font-size: 20px; /* Reduce el tamaño del texto en pantallas pequeñas */
    }
}