/* ══════════════════════════════════════════════════════
    RESPONSIVE OPTIMIZADO PARA SEARZ ONLINE
══════════════════════════════════════════════════════ */

/* Pantallas Medianas (Laptops) */
@media (max-width: 1300px) {
    .main { 
        max-width: 1100px; 
        padding: 0 10px 2rem; 
    }
    .banner { 
        height: 190px; /* Ajuste proporcional */
    }
}

/* Pantallas Pequeñas / Tablets Grandes */
@media (max-width: 1100px) {
    .main { 
        max-width: 960px; 
    }
    .banner { 
        height: 165px; 
    }
    .leftPane { width: 180px; }
    .rightPane { width: 210px; }
}

/* Tablets y Celulares (Cambio a Layout Vertical) */
@media (max-width: 960px) {
    .threeColLayout { 
        flex-direction: column; 
        gap: 20px;
    }
    
    .leftPane, .centerPane, .rightPane { 
        width: 100%; 
        max-width: 100%;
        flex: none;
    }

    /* Reordenamos para que el contenido principal salga primero en móvil */
    .centerPane { order: 1; }
    .leftPane   { order: 2; }
    .rightPane  { order: 3; }

    .banner { 
        height: 140px; 
    }

    .infoBar { 
        flex-direction: column; 
        height: auto; 
        padding: 10px; 
        gap: 10px; 
    }
    
    .infoBar-left, .infoBar-right { 
        justify-content: center; 
        width: 100%;
    }

    .infoBar-block { 
        border: none !important; 
        height: auto; 
    }
}

/* Celulares (Smartphones) */
@media (max-width: 480px) {
    .banner { 
        height: 90px; /* Evita que el banner ocupe toda la pantalla del cel */
    }
    
    .infoBar-socials a span {
        display: none; /* Esconde el texto de redes sociales, deja solo el icono */
    }
    
    .sideNav > ul > li > a {
        padding: 15px; /* Botones más grandes para dedos */
    }

    .boosted-item {
        flex-direction: column;
        text-align: center;
    }
}