/* ============================================================
   DISEÑO ADAPTATIVO / RESPONSIVE PROFESSIONAL SYSTEM
   Dispositivos: 320px, 375px, 390px, 414px, 768px, 820px, 1024px, 1280px, 1440px, 1920px+
   ============================================================ */

/* Prevención global de Scroll Horizontal */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* ------------------------------------------------------------
   1. Monitores Grandes (1920px+)
   ------------------------------------------------------------ */
@media (min-width: 1920px) {
    .container {
        max-width: 1400px;
    }
    
    .hero-slider-container {
        max-height: 650px;
    }
}

/* ------------------------------------------------------------
   2. Laptops Estándar (1200px - 1440px)
   ------------------------------------------------------------ */
@media (max-width: 1366px) {
    .nav-links {
        gap: 12px;
    }
    .nav-links a {
        font-size: 12.5px;
        white-space: nowrap !important;
    }
}

@media (max-width: 1280px) {
    .container {
        max-width: 1140px;
        padding: 0 24px;
    }

    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    
    .product-card {
        padding: 20px 14px 16px;
    }
}

/* ------------------------------------------------------------
   3. Tablets Horizontales / Laptops Pequeñas (992px - 1199px)
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .sector-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .brands-batch {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    /* Navbar Móvil & Menú Desplegable */
    .nav-links {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background: rgba(253, 193, 1, 0.15);
        border: 1.5px solid #FDC101;
        border-radius: 8px;
        color: #FDC101;
        font-size: 22px;
        cursor: pointer;
        transition: var(--transition);
    }

    .mobile-menu-btn:hover {
        background: #FDC101;
        color: #0A2540;
    }

    .nav-actions {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .header-advisor-btn {
        display: inline-flex !important;
        padding: 6px 10px !important;
        font-size: 11.5px !important;
        min-height: 36px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }

    .mobile-menu-btn-item {
        display: block !important;
        width: 100%;
        margin-top: 6px;
    }

    /* Grillas a 1 Columna */
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .about-img-wrapper,
    .about-real-img {
        height: clamp(280px, 50vw, 420px);
    }

    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

/* ------------------------------------------------------------
   4. Tablets Verticales & Pantallas Medianas (768px - 991px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .container {
        padding: 0 18px;
    }

    .google-reviews-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 20px;
    }

    .btn-google-verify {
        width: 100%;
        justify-content: center;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .brands-batch {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .map-container {
        height: 350px;
    }
}

/* ------------------------------------------------------------
   5. Dispositivos Móviles (320px - 650px)
   ------------------------------------------------------------ */
@media (max-width: 650px) {
    .sector-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .section-title h2 {
        font-size: clamp(24px, 6vw, 32px);
    }

    .subtitle {
        font-size: 13px;
        padding: 7px 18px 7px 14px;
    }

    /* Ajuste de Botón Flotante WhatsApp para Celulares */
    .whatsapp-float {
        width: 140px;
        height: 140px;
        bottom: 15px;
        right: 15px;
    }

    /* Ajuste de Engranaje en la foto de Nuestra Historia */
    .experience-badge.gear-badge {
        width: 95px;
        height: 95px;
        bottom: -10px;
        right: 5px;
    }

    .gear-svg-exact {
        width: 95px;
        height: 95px;
    }

    .gear-center-hub {
        width: 65px;
        height: 65px;
    }

    .gear-years {
        font-size: 20px;
    }

    .gear-label {
        font-size: 6.5px;
    }

    .about-location-badge {
        font-size: 10px;
        padding: 6px 12px;
        bottom: 10px;
        left: 10px;
    }

    /* Sedes Cards en Móviles */
    .sede-card-img-wrapper {
        height: 190px;
    }

    .sede-card-content {
        padding: 18px 16px 20px;
    }
}

/* ------------------------------------------------------------
   6. Celulares Muy Pequeños (320px - 390px)
   ------------------------------------------------------------ */
@media (max-width: 390px) {
    .container {
        padding: 0 12px;
    }

    .logo img {
        max-height: 42px;
    }

    .subcat-item {
        padding: 6px 2px 4px;
    }

    .subcat-item span {
        font-size: 8.5px;
    }

    .map-container {
        height: 280px;
    }

    .contact-item {
        gap: 12px;
    }

    .contact-icon {
        width: 40px;
        height: 40px;
    }
}