body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            display: flex;
            justify-content: center;
            height: 100dvh;
            background-color: #E6E6E6;
            overflow: hidden;
        }

        #mobile-frame {
            width: 100%;
            max-width: 430px;
            height: 100dvh !important;
            min-height: 100dvh !important;
            background-color: #FFFFFF;
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }


        .hero-img-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: calc(100% - 60px);
            z-index: 0;
        }

        .hero-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
        }

        .hero-gradient {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(48, 104, 89, 0) 0%, rgba(48, 104, 89, 0.5) 40%, rgba(48, 104, 89, 0.9) 100%);
        }

        .scroll-hide::-webkit-scrollbar {
            display: none;
        }

        /* ==========================================================================
   BARRA DE NAVEGACIÓN EN EL HOME (INDEX)
   Nota: El estilo translúcido premium ahora se gestiona de forma centralizada en 
   css/nav.css con la clase '.bottom-nav.theme-home' para evitar código duplicado.
   Si necesitas realizar personalizaciones manuales rápidas exclusivas para el inicio, 
   puedes descomentar y ajustar las variables de aquí abajo:
   ========================================================================== */
        /*
        .bottom-nav.theme-home {
            --nav-bg: rgba(255, 255, 255, 0.07);
            --nav-color-inactive: rgba(255, 255, 255, 0.61);
            --nav-color-active: rgba(255, 255, 255, 0.85);
        }
        */

        /* ==========================================================================
   PERSONALIZACIÓN EXCLUSIVA: REPRODUCTOR DE MÚSICA EN EL HOME (INDEX)
   Ajusta los valores de esta sección para controlar cómo luce el reproductor
   de música únicamente en la pantalla de inicio (index.php).
   ========================================================================== */
        #global-music-player {
            /* --- VARIABLES DE DISEÑO PERSONALIZABLES --- */
            --player-bg: rgba(255, 255, 255, 0.08);
            /* Fondo translúcido premium que flota sobre el póster */

            --player-btn-color: rgba(255, 255, 255, 0.85);
            /* Color del botón de Play/Pause (blanco semitransparente) */

            --player-btn-hover-color: #ffffff;
            /* Color del botón en estado hover/activo */

            --player-text-color: rgba(255, 255, 255, 0.7);
            /* Color del texto del título en movimiento */

            --player-text-size: 8.5px;
            /* Tamaño de la fuente del título */

            --player-text-weight: 500;
            /* Grosor de la fuente del título (peso) */

            --player-height: 25px;
            /* Altura del contenedor del reproductor */

            --player-bottom: 60px;
            /* Posición vertical: alineado justo encima de la barra de navegación inferior (60px) */

            /* --- ESTILOS ADICIONALES DEL CONTENEDOR (Bordes, Sombras, Blur) --- */
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            border-bottom: 1px solid rgba(255, 255, 255, 0.03);

            /* Puedes agregar otros estilos nativos aquí si lo deseas. Ejemplos:
               backdrop-filter: blur(12px);
               border-radius: 0px;
            */
        }

        /* --- ESTILOS PERSONALIZADOS CUANDO LA MÚSICA SE ESTÁ REPRODUCIENDO (.playing) --- */
        #global-music-player.playing {
            /* Puedes cambiar el fondo o agregar efectos cuando la música esté sonando. Ejemplos:
               --player-bg: rgba(255, 255, 255, 0.12);
               box-shadow: 0 -4px 15px rgba(255, 255, 255, 0.05);
            */
        }