/* ==========================================================================
   RESPONSIVE DESIGN MASTER FILE (Tedrix)
   Optimizado para Laptops, Tablets y Smartphones
   ========================================================================== */

/* ==========================================================================
   1. LAPTOPS PEQUEÑAS Y TABLETS HORIZONTALES (Max: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /* --- Ajustes Globales --- */
    .section { padding: 60px 5%; }
    .global-background-glow { display: none; }
    .hardware-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    
    /* --- Home: Hero & Secciones --- */
    /* FIX: Agregamos padding lateral (5%) para que nada toque los bordes */
    .hero { min-height: auto; padding: 120px 5% 60px 5%; } 
    .hero-content-wrapper { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .hero-title { font-size: 3.5rem; }
    .hero-description { margin: 0 auto 30px; }
    .hero-buttons { justify-content: center; }
    
    /* FIX: flex-wrap permite que las palabras salten a la siguiente línea */
    .trusted-logos { justify-content: center; flex-wrap: wrap; gap: 15px; } 
    
    .hero-mockup { margin: 0 auto; width: 100%; max-width: 600px; box-sizing: border-box; }
    
    .services-grid, .process-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .custom-content-wrapper { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .custom-text p { margin: 0 auto 30px; }
    .custom-features { flex-direction: column; align-items: center; gap: 20px; }
    .c-feat-item { justify-content: center; text-align: left; max-width: 300px; }

    /* --- Footer --- */
    .footer-top { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .brand-desc { margin: 15px auto; }
    .social-links { justify-content: center; }
    .footer-links-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; text-align: left; }
}

/* ==========================================================================
   2. TABLETS VERTICALES Y CELULARES GRANDES (Max: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* --- Menú de Navegación Móvil --- */
    .nav-left, .nav-right { gap: 15px; }
    .hamburger { display: block; font-size: 1.8rem; }
    .logo { font-size: 1.5rem; }
    .main-logo { height: 40px; }
    .nav-links { 
        position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; 
        background: rgba(11, 14, 20, 0.98); backdrop-filter: blur(20px); 
        flex-direction: column; justify-content: center; align-items: center; gap: 40px; 
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; padding-top: 80px; 
    }
    .nav-links.active { right: 0; }
    .nav-links a { font-size: 1.8rem; font-weight: 600; color: #fff; }
    
    /* --- Ajustes Globales --- */
    .section-header-row { flex-direction: column; align-items: center; text-align: center; gap: 15px; }
    .section-title { font-size: 2rem; }
    .hardware-grid { grid-template-columns: 1fr; }
    
    /* --- Home: Hero & Secciones --- */
    /* FIX: overflow-wrap ayuda a que palabras gigantes se rompan si no caben */
    .hero-title { font-size: 2.2rem; line-height: 1.2; overflow-wrap: break-word; }
    .hero-buttons { flex-direction: column; width: 100%; padding: 0; }
    .hero-buttons .btn { width: 100%; justify-content: center; }
    .server-img { height: 250px; }
    .status-panel { flex-direction: column; gap: 10px; text-align: center; }
    
    .services-grid, .process-grid { grid-template-columns: 1fr; gap: 15px; }
    .service-card { padding: 30px 20px; text-align: center; }
    .card-icon-wrapper { margin: 0 auto 20px; }
    .card-features { align-items: flex-start; text-align: left; display: inline-block; }
    .custom-text h2 { font-size: 2.2rem; }
    
    /* --- Tienda (Shop) --- */
    .store-container { grid-template-columns: 1fr; margin-top: 0; gap: 20px; }
    .store-sidebar { order: 1; padding: 20px; }

    /* --- Footer --- */
    .footer-links-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
}

/* ==========================================================================
   3. SMARTPHONES PEQUEÑOS (Max: 480px)
   ========================================================================== */
@media (max-width: 480px) {
    /* --- Ajustes Finos --- */
    .section { padding: 50px 5%; }
    .hero { padding: 100px 5% 50px 5%; }
    .hero-title { font-size: 1.8rem; }
    .hero-mockup { padding: 15px; }
    
    /* --- Mejoras de UX Móvil --- */
    .cart-panel { max-width: 100%; border-left: none; }
    .cart-panel-header h2 { font-size: 1.3rem; }
    .whatsapp-float { width: 50px; height: 50px; font-size: 25px; bottom: 20px; left: 20px; }
    #toast-container { right: 10px; top: 10px; width: calc(100% - 20px); }
    .toast { font-size: 0.85rem; padding: 12px 15px; }
}