footer {
    margin: 100px 0 0 0;
    padding: 60px 20px; 
    border-top: solid 1px #333333;
    background: #000;
    color: #e0e0e0;
}

#footer-flex {
    display: flex;
    flex-wrap: wrap; /* Clave para el responsive */
    justify-content: center;
    max-width: 1400px; /* Evita que se estire demasiado en 2K+ */
    margin: 0 auto;
    gap: 80px;
}

/* FOOTER SUPERCORES */
#footer-supercores {
    flex: 1 1 350px; /* Crece y encoge, base de 350px */
    max-width: 450px;
}

#footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

#footer-logo img {
    width: 64px;
    height: auto;
}

#footer-logo span {
    font-size: 1.4rem;
    font-weight: bold;
    font-family: Poppins "sans-serif";
    text-transform: none;
}

#footer-supercores p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #B1B2B6;
}

#footer-redes {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

#footer-redes svg {
    font-size: 24px;
    color: #e0e0e0;
    transition: 0.3s;
    stroke-width: 2;
}

#footer-redes a:hover i, #footer-redes a:hover svg {
    transform: translateY(-5px);
    color: #ffffff;
}

/* LEGAL Y PAGOS */
#footer-legal {
    margin-bottom: 25px;
}

#footer-legal p {
    max-width: 400px;
}

#footer-pagos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#footer-pagos div {
    width: 40px;
    height: 30px;
    background: #0F0F0F;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#footer-pagos img {
    width: 25px;
    filter: invert(1);
    opacity: 0.7;
}

/* FOOTER CATEGORÍAS (Lado derecho) */
#footer-categorias {
    flex: 1 1 600px; /* Ocupa más espacio que el logo */
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

#footer-categorias > div {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

#footer-categorias h5 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
}

#footer-categorias ul {
    list-style: none;
    padding: 0;
}

#footer-categorias li {
    margin-bottom: 8px;
}

#footer-categorias a {
    color: #B1B2B6;
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
}

#footer-categorias a svg {
    color: var(--destacado-azul);
}

#footer-categorias a:hover {
    color: #fff;
    padding-left: 5px;
}


/* MEDIA QUERIES REESCRITOS */

/* Pantallas medianas (Tablets/Laptops pequeñas) */
@media screen and (max-width: 1100px) {
    #footer-flex {
        justify-content: center;
        text-align: left;
    }
    
    #footer-supercores {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #footer-categorias {
        justify-content: center;
    }
    
    #footer-logo {
        justify-content: center;
    }

    #footer-legal {
        text-align: left;
        padding-left: 20px;
    }

    #footer-pagos {
        justify-content: center;
    }
}

@media screen and (max-width: 1070px)
{
    #footer-legal {
        width: 50%
    }

    #footer-categorias {
        border-top: solid 1px var(--borde-cristal);
    }
}

/* Pantallas móviles */
@media screen and (max-width: 600px) {
    #footer-legal {
        max-width: 420px;
        min-width: 300px;
    }

    #footer-categorias {
        flex-direction: column;
        align-items: center;
    }
    
    #footer-categorias > div {
        flex-direction: column;
        gap: 20px;
    }

    footer {
        padding: 40px 10px;
    }
}

/* Ajuste para 2K+ */
@media screen and (min-width: 2200px) {
    #footer-flex {
        max-width: 1800px;
    }
}