/* INTEQ - CSS Móvil Simple y Efectivo */

@media (max-width: 768px) {
    /* Navegación */
    nav { 
        padding: 0.5rem 1rem !important; 
        height: 50px !important; 
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        z-index: 10000 !important;
    }
    
    .menu-toggle { 
        display: block !important; 
        z-index: 10001 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255,255,255,0.3) !important;
    }
    
    .nav-links { 
        position: fixed !important; 
        top: 50px !important; 
        left: -100% !important; 
        width: 100% !important; 
        height: calc(100vh - 50px) !important;
        background: rgba(15, 23, 42, 0.98) !important;
        transition: left 0.3s ease !important;
        z-index: 9999 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 2rem 1rem !important;
    }
    
    .nav-links.active { 
        left: 0 !important; 
    }
    
    /* Hero */
    .hero-section { min-height: 70vh !important; padding: 60px 1rem 40px !important; }
    .hero-content h1 { font-size: 1.4rem !important; }
    .hero-content p { font-size: 0.8rem !important; }
    
    /* Botones slider */
    .slider-button, .prev-slide, .next-slide { 
        width: 21px !important; 
        height: 21px !important; 
        font-size: 0.65rem !important;
        bottom: 5px !important; 
    }
    
    /* CRÍTICO: Sección Quiénes Somos en móvil */
    .quienes-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    .quienes-text {
        width: 100% !important;
        order: 1 !important;
    }
    
    .quienes-stats {
        width: 100% !important;
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .stat-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 1.5rem !important;
    }
    
    /* Cards siempre verticales */
    .cards-grid, .stats-grid, .solutions-grid, .services-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .card, .stat-card, .mision-card {
        width: 100% !important;
        margin: 0 0 1rem 0 !important;
    }
    
    /* Footer */
    .footer-logo img { height: 50px !important; }
    
    /* Chatbot */
    .chatbot-button { bottom: 20px !important; right: 20px !important; z-index: 9997 !important; }
    .chatbot-window { z-index: 10000 !important; width: calc(100vw - 20px) !important; }
}

/* Mejorar botones de filtro en móvil */
@media (max-width: 768px) {
    .filter-btn {
        padding: 0.8rem 1.2rem !important;
        font-size: 0.85rem !important;
        min-height: 44px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(61, 213, 152, 0.3) !important;
        touch-action: manipulation !important;
    }
    
    .filter-btn:active {
        transform: scale(0.95) !important;
    }
}

/* Logo hero más pequeño en móvil */
@media (max-width: 768px) {
    .hero-logo,
    .hero-section .hero-logo,
    .hero-content .hero-logo {
        width: 75px !important;
        max-width: 75px !important;
        height: auto !important;
    }
}

/* Asegurar que botones filtro sean clickeables en móvil */
@media (max-width: 768px) {
    .filter-btn {
        padding: 0.9rem 1.3rem !important;
        font-size: 0.85rem !important;
        min-height: 48px !important;
        min-width: 80px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(61, 213, 152, 0.5) !important;
        touch-action: manipulation !important;
        pointer-events: auto !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    
    .filter-btn:active {
        transform: scale(0.95) !important;
        background: #3dd598 !important;
    }
    
    .casos-filters,
    .filter-buttons {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
}


/* ===============================
   FIX AUTOMATIZACIÓN - SOLO MÓVIL
   =============================== */
@media (max-width: 768px) {
  body.page-automatizacion .section-header h2 {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    padding: 0 10px !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: center !important;
  }
}


/* ===============================
   FIX NAVBAR / TOGGLE - SOLO MÓVIL
   =============================== */
@media (max-width: 768px) {
  .navbar,
  header,
  .top-bar {
    min-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
  }

  .navbar img,
  .logo img {
    max-height: 48px;
    height: auto;
  }
}