/* Extracted Mobile Styles from layout.css */
        @media(max-width: 900px) {
            
            /* Responsive Canvas (Movido aquí para cubrir tablets y teléfonos grandes) */
            .canvas-grid { display: block !important; padding: 10px; }
            .cb-problem, .cb-solution, .cb-metrics, .cb-value, .cb-advantage, .cb-channels, .cb-segments, .cb-costs, .cb-revenue {
                display: block !important;
                width: auto !important;
                margin-bottom: 15px;
            }
        }

@media(max-width: 600px) {
            .nav-bar {
                padding: 0.5rem 0.5rem;
                background: rgba(20, 20, 20, 0.95);
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                border-bottom: none;
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
                height: auto;
                position: fixed;
                bottom: 0;
                top: auto;
                width: 100%;
                z-index: 999;
                padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
            }
            .modulo-content h1, .modulo-content h2 {
                font-size: 2rem !important; /* Más pequeño en celular pero sigue impactante */
                line-height: 1.15;
                margin-bottom: 1.5rem;
                border-bottom-width: 2px;
            }
            .modulo-content h1::after, .modulo-content h2::after {
                height: 2px;
                width: 40px;
            }
            
            .nav-bar a.back-link {
                display: none; /* ocultamos el Volver de la barra inferior en móvil */
            }
            /* Botón Volver flotante: esquina superior izquierda */
            .back-link-mobile {
                display: flex;
                align-items: center;
                justify-content: center;
                position: fixed;
                top: 12px;
                left: 12px;
                width: 42px;
                height: 42px;
                background: rgba(20, 20, 20, 0.85);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border: 1px solid rgba(255,255,255,0.15);
                border-radius: 50%;
                color: #fff;
                text-decoration: none;
                z-index: 1200;
                box-shadow: 0 4px 16px rgba(0,0,0,0.4);
                transition: background 0.2s, transform 0.2s;
            }
            .back-link-mobile:active { transform: scale(0.9); background: rgba(50,50,50,0.95); }
            .nav-actions {
                display: flex;
                width: 100%;
                justify-content: flex-start;
                align-items: center;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                gap: 0.6rem;
                padding-bottom: 8px;
                padding-top: 4px;
                position: static;
                background: transparent;
                border: none;
                box-shadow: none;
                scrollbar-width: none; /* Firefox */
            }
            .nav-actions::-webkit-scrollbar { display: none; /* Chrome/Safari */ }
            .nav-actions button, .nav-actions .menu-toggle {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0.4rem 0.8rem !important;
                /* Sin override de borde: respeta el color individual de cada botón */
                border-width: 1.5px !important;
                border-style: solid !important;
                border-radius: 20px !important;
                gap: 0.4rem !important;
                box-shadow: none !important;
                min-width: max-content;
                flex-shrink: 0;
                /* Fondo oscuro semi-transparente: realza los colores de borde/texto */
                background: rgba(10, 10, 10, 0.6) !important;
                /* Texto más brillante por defecto en fondo oscuro */
                color: #e8e8e8 !important;
                font-weight: 500 !important;
                text-shadow: 0 0 8px rgba(255,255,255,0.15);
            }
            /* Botones con color propio: respetar su color y hacer el borde más visible */
            .nav-actions button[style*="color"] {
                filter: brightness(1.15) saturate(1.3);
            }
            .nav-actions button i, .nav-actions .menu-toggle i {
                width: 16px !important;
                height: 16px !important;
            }
            .hide-mobile {
                display: inline !important;
                font-size: 11px !important;
                line-height: 1;
                font-family: var(--mono);
                text-transform: capitalize;
                white-space: nowrap;
            }
            #mezclador-audio {
                width: 90% !important;
                padding: 1.5rem !important;
            }
            .mezclador-controles { display: none !important; }
            .mezclador-mobile-msg { display: block !important; }
            body { font-size: 18px; }
            
            .pdf-iframe { display: none !important; }
            .pdf-mobile-fallback { display: block !important; }

            /* Modal Apariencia: pantalla completa en m\u00f3vil para que la X siempre sea visible */
            #menu-lectura {
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                transform: none !important;
                width: 100% !important;
                max-width: 100% !important;
                height: 100% !important;
                max-height: 100% !important;
                border-radius: 0 !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                padding: 1.2rem 1rem !important;
                padding-bottom: max(5rem, env(safe-area-inset-bottom)) !important;
                box-sizing: border-box !important;
            }
            /* Header del modal: sticky en la parte superior */
            #menu-lectura > div:first-child {
                position: sticky;
                top: -1.2rem;
                background: #0c0b0a;
                margin: -1.2rem -1rem 1rem -1rem;
                padding: 1rem 1rem 0.8rem;
                z-index: 10;
                border-bottom: 1px solid rgba(184, 151, 90, 0.3);
            }
        }

@media (max-width: 600px) {
    div[style*="background: #061118"] {
        gap: 0.3rem !important;
        padding: 0.8rem 0.5rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    div[style*="background: #061118"] > button[style*="width: 50px"] {
        width: 35px !important;
        height: 35px !important;
    }
    div[style*="background: #061118"] > button svg {
        width: 16px !important;
        height: 16px !important;
    }
    div[style*="background: #061118"] > div[style*="min-width: 40px"] {
        min-width: auto !important;
        font-size: 0.75rem !important;
    }
    h2 { font-size: 1.5rem; margin-top: 2rem; }
    
    .btn-reel, .pdf-mobile-fallback a {
        width: 100% !important;
        justify-content: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Extracted Mobile Styles from biblioteca.css */


    
    .icon-btn, .btn-open-pdf, #btn-notas-comunidad {
        flex-direction: column;
        gap: 0.3rem;
        font-size: 0.7rem;
        background: transparent !important;
        border: none !important;
        padding: 0;
        color: var(--muted);
    }
    
    .icon-btn i, .btn-open-pdf i, #btn-notas-comunidad i {
        width: 20px;
        height: 20px;
        margin: 0;
    }
    
    .hide-mobile {
        display: block !important;
    }

    .lector-pdf-frame-wrapper {
        height: 75vh;
        border-radius: 8px;
        margin-bottom: 5rem; /* space for bottom bar */
    }
}



@media (max-width: 768px) {
    .hero-slider { height: 360px; }
    .hero-slide { padding: 2rem 1.5rem; }
    .hero-content h2 { font-size: 2.2rem; }
    .hero-slider-dots { left: 1.5rem; }
}

@media (max-width: 768px) {
    .categories-carousel-wrapper {
        top: 62px;
        padding: 0.7rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .hero-slider { height: 340px; margin-bottom: 1rem; }
    .hero-slide { padding: 1.5rem; align-items: center; justify-content: center; text-align: center; }
    .slide-theme-gold { background-position: 75% center !important; }
    .hero-content h2 { font-size: 1.5rem; margin-top: 0; }
    .hero-content p { font-size: 0.9rem; margin-bottom: 1rem; }
    .hero-btn { width: 100%; font-size: 0.9rem; padding: 0.6rem; }
    .catalogo-header-title { font-size: 1.4rem; }
    .catalogo-header-count { font-size: 0.75rem; }
}

@media (max-width: 900px) {
    .curso-multimedia-layout {
        flex-direction: column-reverse !important;
    }
    .curso-playlist-container {
        width: 100% !important;
        max-width: none !important;
    }
    .curso-visor-container {
        width: 100% !important;
        min-height: 75vh !important;
    }
    #vista-curso-multimedia {
        padding: 1rem 0.5rem !important;
    }
}