/* --------------- Pie de página --------------------------------*/

#piedepagina {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    background-color: navy;
    margin: 10px auto;
    border-radius: 250px;
    padding: 2%;
}

.logos-container {
    display: flex;
    justify-content: center; /* Centrar los logos como un grupo */
    align-items: center;
    flex-wrap: nowrap; /* Mantener en una línea en escritorio */
    gap: 2%; /* Espacio entre logos */
    padding: 0 2%; /* Un poco de espacio en los bordes */
    margin-bottom: 20px;
}

.logosExternos {
    /* Cada logo ocupa una porción del espacio */
    width: 100%;
}

.logosExternos img {
    /* La imagen ocupa el 100% de su contenedor 'a' */
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.abajo {
    width: 100%;
    color: white;
}


/* --------------- Diseño adaptable --------------------------*/
@media screen and (max-width: 1024px) {
    .logos-container {
        flex-wrap: wrap; /* Permitir que los logos se envuelvan en tablets */
        justify-content: center;
    }

    .logosExternos {
        width: auto;
        max-width: 90px;
    }
}

@media screen and (max-width: 768px) {
    #piedepagina {
        padding: 15px;
        border-radius: 20px;
    }

    .logosExternos {
        max-width: 80px;
    }
}

/* Para modo celular */
@media screen and (max-width: 600px) {
    .logos-container {
        justify-content: center; /* Centrar los pares de logos */
        gap: 20px; /* Espacio entre logos */
    }

    .logosExternos {
        /* Cada logo ocupa casi la mitad del ancho para que quepan dos por fila */
        width: calc(50% - 10px); /* 50% menos la mitad del gap para cada lado */
        max-width: 120px; /* Un tamaño máximo para los logos */
    }
}

@media screen and (max-width: 480px) {
    #piedepagina {
        padding: 10px;
        border-radius: 15px;
    }
}