/* ============================================
   ARREGLO RESPONSIVE GLOBAL (SOBRESCRIBE EL VIEJO)
   ============================================ */

@media(max-width:768px){
    nav{display:none !important}
    header{padding:10px 3% !important}
    .header-wrap{gap:8px !important}
    .logo{font-size:16px !important}
    .logo i{font-size:20px !important}
    .header-right{gap:6px !important}
    .icon-btn{font-size:14px !important;padding:6px !important}
    .balance{display:none !important}
    .login-btn,.register-btn{font-size:11px !important;padding:6px 10px !important}
    .user-avatar{width:32px !important;height:32px !important;font-size:12px !important}
    .cart-count{width:16px !important;height:16px !important;font-size:9px !important;top:-6px !important;right:-6px !important}
    
    .dropdown button[style*="padding:6px 12px"]{
        padding:5px 8px !important;
        font-size:11px !important
    }
    
    .section-header{flex-direction:column !important;align-items:flex-start !important;gap:12px !important}
    .search-box{width:100% !important}
    .search-box input{width:100% !important}
    
    .banner{height:280px !important}
    .banner-placeholder h2{font-size:20px !important}
    
    .features-section{margin:30px auto !important}
    .feature-card{padding:20px 15px !important}
    
    .container{padding:0 3% 40px !important}
    .section-title{font-size:16px !important}
    .section-header{padding-top:30px !important}
    .product-info{padding:15px !important}
    .product-info h3{font-size:14px !important}
    .product-info p{font-size:11px !important;height:30px !important}
    .price{font-size:16px !important}
    
    .whatsapp::before{display:none !important}
    .cart-dropdown{display:none !important}
    
    .features-grid{grid-template-columns:1fr !important}
    .products-grid{grid-template-columns:repeat(2,1fr) !important}
    .footer-grid{grid-template-columns:1fr !important}
}

@media(max-width:480px){
    header{padding:8px 2% !important}
    .logo{font-size:14px !important}
    .logo i{font-size:18px !important}
    .header-right{gap:4px !important}
    .icon-btn{font-size:13px !important;padding:5px !important}
    .login-btn,.register-btn{font-size:10px !important;padding:5px 8px !important}
    .user-avatar{width:28px !important;height:28px !important;font-size:11px !important}
    
    .dropdown button[style*="padding:6px 12px"]{
        padding:4px 6px !important;
        font-size:10px !important;
        gap:3px !important
    }
    
    .banner{height:220px !important;border-radius:12px !important}
    .banner-placeholder h2{font-size:16px !important}
    
    .products-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px !important}
    .product-img{padding:15px !important}
    .product-badge{font-size:8px !important;padding:3px 8px !important;top:8px !important;left:8px !important}
    .product-info{padding:12px !important}
    .product-info h3{font-size:13px !important;margin-bottom:4px !important}
    .product-info p{font-size:10px !important;height:28px !important}
    .price{font-size:14px !important}
    .price span{font-size:9px !important}
    
    .feature-card{padding:15px 12px !important}
    .feature-card h3{font-size:13px !important}
    .feature-card p{font-size:11px !important}
    .feature-icon{width:36px !important;height:36px !important;font-size:16px !important}
    
    .section-title{font-size:15px !important}
    .section-subtitle h3{font-size:11px !important}
    .section-subtitle p{font-size:12px !important}
    
    .footer-brand .logo{font-size:18px !important}
    .footer-bottom{font-size:10px !important}
}