/* ========================================
   MOBILE LAYOUT FIXES (CRITICAL OVERRIDES)
   v2: Robust Body Padding Strategy
   ======================================== */

@media (max-width: 768px) {
    
    /* 0. GLOBAL TYPOGRAPHY FIXES */
    /* Prevents unprofessional word-breaks and hyphens universally on mobile */
    * {
        -webkit-hyphens: none !important;
        -moz-hyphens: none !important;
        -ms-hyphens: none !important;
        hyphens: none !important;
    }

    body {
        overflow-wrap: break-word; /* Safe word breaking only when absolutely necessary (e.g. long URLs) */
        word-wrap: break-word;
    }

    /* 1. Global Reset for Fixed Header Support */
    body, 
    .contacto-body {
        /* Reserve space for 60px header globally */
        padding-top: 60px !important; 
        padding-bottom: 80px !important; /* Bottom Nav Space */
        overflow-x: hidden !important; /* PREVENT HORIZONTAL OVERFLOW */
        width: 100% !important;
        position: relative;
    }
    
    html {
        overflow-x: hidden !important;
    }

    /* Inner Pages: Flush (Aggressive pull-up) */
    .catalogo-body,
    .contacto-body,
    .nosotros-body,
    .soluciones-body {
        padding-top: 1px !important; 
        padding-bottom: 80px !important;
    }

    /* Homepage: Custom spacing validation */
    .home-body {
        padding-top: 8px !important; 
        padding-bottom: 80px !important;
    }

    /* 2. Compact Header Styling */
    .header-container, 
    .catalogo-header-container,
    .main-header {
        height: 60px !important;
        padding: 0 1rem !important;
        /* Ensure fixed positioning is solid */
        position: fixed !important; 
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Adjust Logo to fit Compact Header */
    .logo-icon, 
    .catalogo-logo-icon {
        width: 42px !important;
        height: 42px !important;
    }

    .logo-text, 
    .catalogo-logo-text {
        font-size: 1.1rem !important;
    }

    /* 3. Banner & Section Positioning Strategy 
       Concept: Body padding handles the header space. 
       Elements just need to start at 0 or have desired gap. */

    /* Homepage Hero: Edge-to-Edge Full Screen for Mobile */
    .hero-section {
        margin: 0 !important; /* Prevent horizontal overflow */
        border-radius: 0 !important; /* Remove oval cuts */
        padding-top: 0px !important; 
        min-height: calc(100vh - 60px - 80px) !important; /* viewport - header - bottom nav */
        height: auto !important;
        padding-bottom: 2rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
    }

    /* HERO CONTENT MOBILE OPTIMIZATION */
    .hero-content-modern {
        max-width: 100% !important; /* Remove desktop 50% constraint */
        width: 100% !important;
        padding: 2rem 1.5rem 3rem 1.5rem !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; /* Pushes text up, buttons down naturally */
        min-height: 60vh !important; /* Ensures enough space to push apart */
        flex: 1 !important;
    }

    /* Badge - Slightly smaller on mobile */
    .hero-badge-modern {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.8rem !important;
        margin-bottom: 1rem !important;
        letter-spacing: 1px !important;
    }

    /* Title - Responsive sizing */
    .hero-title-modern {
        font-size: 2.2rem !important; /* Beautiful readable size */
        line-height: 1.15 !important;
        margin-bottom: 1rem !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        text-transform: none !important; /* Force Title Case on Mobile */
    }

    /* Subtitle - More compact and readable */
    .hero-subtitle-modern {
        font-size: 1rem !important; 
        line-height: 1.5 !important;
        margin-bottom: auto !important; /* Takes up available space to push buttons down */
        max-width: 100% !important;
        opacity: 0.95 !important;
    }

    /* Buttons - Stack vertically for mobile */
    .hero-buttons-modern {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        margin-top: 2rem !important;
    }

    .btn-primary-industrial,
    .btn-ghost-industrial {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.95rem !important;
    }

    /* Inner Pages Banners: Flush (No Gap) */
    /* Reseting any previous margin-top */
    .catalogo-info-banner,
    .catalogo-authority-banner,
    .contacto-authority-banner {
        /* Force a tiny overlap to kill any sub-pixel white line */
        margin-top: -1px !important; 
        
        /* CONTROL DE GROSOR (BANNER MÓVIL) */
        /* Ajusta estos valores (0.5rem) para dar más o menos altura */
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        
        line-height: 1.1 !important; /* Tight text */
        
        display: flex !important;
        align-items: center !important;
        min-height: auto !important; /* Content driven height */
    }
    
    /* FIX: Reset paragraph margins globally so it doesn't expand the banner */
    .catalogo-info-content p,
    .catalogo-info-banner p {
        margin: 0 !important;
        line-height: 1.2 !important; /* Tighten line height for mobile */
    }
    
    .catalogo-authority-banner {
        padding-left: 1rem !important;
    }

    /* Specific Reset for Catalog Body */
    /* .catalogo-body, .contacto-body { Inherits global body padding } - REMOVED EMPTY RULE */

    /* 4. Fix Catalog Product View Scroll Jitter */
    .catalogo-products-header {
        position: static !important;
        top: auto !important;
        transform: none !important;
        z-index: 1 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .catalogo-brand-products-view {
        animation: none !important;
        transform: none !important;
        overflow: visible !important;
        height: auto !important;
    }

    /* 6. Mobile Bottom Nav */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        z-index: 2147483647 !important;
        background: white !important;
        border-radius: 20px 20px 0 0 !important; /* Restored beautiful rounded top corners */
        padding: 0.5rem 1rem !important; /* Optimized padding */
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
        gap: 0 !important; /* Removed rigid gap that caused overflow */
        justify-content: space-between !important; /* Even distribution */
        align-items: center !important;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.06) !important;
        border: none !important;
        border-top: 1px solid rgba(0,0,0,0.03) !important;
    }

    .nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.25rem !important;
        text-decoration: none !important;
        color: var(--slate-400) !important;
        transition: all 0.2s ease !important;
        width: auto !important; /* Natural width */
        min-width: 3.5rem !important; /* Safe tap area */
        flex: 1 !important; /* Equal distribution across screen */
    }

    .nav-item.active {
        color: var(--primary) !important;
    }

    .nav-label {
        font-size: 0.65rem !important; /* Slightly smaller to fit 5 items safely */
        font-weight: 600 !important;
    }

    /* 6. Mobile Bottom Nav - Icon Standardizer */
    .nav-item .nav-icon-img,
    .nav-item .material-symbols-outlined,
    .nav-item .nav-icon-custom {
        display: block !important;
        content: none !important;
        width: 24px !important;
        height: 24px !important;
        background-color: currentColor !important; /* Inherit blue from .active */
        -webkit-mask-size: contain !important;
        mask-size: contain !important;
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        -webkit-mask-position: center !important;
        mask-position: center !important;
        margin-bottom: 2px !important;
        transition: transform 0.2s ease !important;
    }

    /* SPECIFIC MASKS BY HREF */
    .nav-item[href="/"] .material-symbols-outlined,
    .nav-item[href="/"] .nav-icon-img,
    .nav-item[href="/"] .nav-icon-custom {
        -webkit-mask-image: url('/images/icons/icon_home.svg') !important;
        mask-image: url('/images/icons/icon_home.svg') !important;
    }

    .nav-item[href="/soluciones"] .material-symbols-outlined,
    .nav-item[href="/soluciones"] .nav-icon-img,
    .nav-item[href="/soluciones"] .nav-icon-custom {
        -webkit-mask-image: url('/images/icons/iconsoluciones1.svg') !important;
        mask-image: url('/images/icons/iconsoluciones1.svg') !important;
    }

    .nav-item[href="/catalogo"] .material-symbols-outlined,
    .nav-item[href="/catalogo"] .nav-icon-custom {
        -webkit-mask-image: url('/images/icons/icon_grid.svg') !important;
        mask-image: url('/images/icons/icon_grid.svg') !important;
    }

    /* Solución específica para icono blanco de Catálogo */
    .nav-item[href="/catalogo"] .nav-icon-img {
        background-color: transparent !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        filter: brightness(0) invert(49%) sepia(7%) saturate(500%) hue-rotate(182deg) brightness(95%) contrast(90%) !important;
        opacity: 0.4 !important;
    }

    .nav-item.active[href="/catalogo"] .nav-icon-img {
        filter: brightness(0) invert(27%) sepia(98%) saturate(1650%) hue-rotate(210deg) brightness(100%) contrast(98%) !important;
        opacity: 1 !important;
    }

    .nav-item[href="/contacto"] .material-symbols-outlined,
    .nav-item[href="/contacto"] .nav-icon-img,
    .nav-item[href="/contacto"] .nav-icon-custom {
        -webkit-mask-image: url('/images/icons/icon_cotizar.svg') !important;
        mask-image: url('/images/icons/icon_cotizar.svg') !important;
    }

    .nav-item[href="/nosotros"] .material-symbols-outlined,
    .nav-item[href="/nosotros"] .nav-icon-img,
    .nav-item[href="/nosotros"] .nav-icon-custom {
        -webkit-mask-image: url('/images/StashPeopleGroup.svg') !important;
        mask-image: url('/images/StashPeopleGroup.svg') !important;
    }

    .nav-item.nav-item-cta {
        background: transparent !important;
        color: var(--slate-400) !important;
        border-radius: 0 !important;
        width: 3.5rem !important;
        padding: 0 !important;
        margin-top: 0 !important;
        box-shadow: none !important;
        height: auto !important;
        justify-content: center !important;
        transform: none !important;
    }

    .nav-item.nav-item-cta.active,
    .nav-item.nav-item-cta:hover {
        color: var(--primary) !important;
    }

    .nav-item.nav-item-cta .nav-label {
        color: inherit !important;
        font-size: 0.7rem !important;
    }

    /* 7. Center Footer Contact Info on Mobile */
    .footer-contact-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer-contact-item {
        justify-content: center !important;
        width: 100% !important;
    }

    /* 8. Fix for "Nuestra Trayectoria" section overflow on small devices */
    .about-stats-section {
        padding: 3rem 1rem !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .about-stats-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .about-visual {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 auto 2rem auto !important;
        box-shadow: none !important;
    }

    .about-video-iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 9/16 !important;
        border-radius: 1rem !important;
    }
    
    .about-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .about-headline {
        font-size: 1.5rem !important; /* Smaller size for narrow screens */
        max-width: 100% !important;
        width: 100% !important;
        word-break: normal !important; 
        overflow-wrap: break-word !important;
        hyphens: none !important;
    }
    
    .about-tag {
        max-width: 100% !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    
    .about-stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .clean-stat-item {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

}