/* Hide content until ritual ends, then animate entrance — un poco más lento y aparición suave */
.site-content {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
    transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
                transform 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
                filter 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

html:not(.styles-loaded) .site-content {
    opacity: 0;
    transform: translateY(4px) scale(0.999);
    filter: brightness(0.96);
}

/* AL PRINCIPIO: fondo negro, sin overflow-y: visible (rompe iOS Safari) */
html {
    background: #000 !important;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Sin efecto "rueda de selección" tipo iPhone: no destacar texto seleccionado para evitar subida de vista */
::selection {
    background: transparent;
    color: inherit;
}

body {
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    width: 100%;
    touch-action: auto !important;
    color: #e9e6e3;
    /* overflow lo fija el bloque CRITICAL al final del archivo */
}

/* Botón PWA "App" — compacto, integrado en la barra */
.pwa-install-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.pwa-install-btn:hover {
    color: rgba(255, 255, 255, 0.95);
}
.pwa-install-btn-icon {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.8;
}
.pwa-install-btn--desktop {
    padding: 0.35rem 0.5rem;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
}
.pwa-install-btn--desktop .pwa-install-btn-icon {
    width: 0.75rem;
    height: 0.75rem;
}
.pwa-install-btn--mobile {
    padding: 0.4rem 0.5rem;
    font-size: 0.625rem;
}
.pwa-install-btn--mobile .pwa-install-btn-icon {
    width: 0.75rem;
    height: 0.75rem;
}
/* En el footer: solo móvil, estilo editorial premium */
.pwa-install-zone {
    margin: 0;
    padding: 0;
}
@media (min-width: 768px) {
    .pwa-install-zone { display: none !important; }
}
/* Botón como texto sutil — misma familia que "Barcelona · escucha consciente" */
.pwa-install-btn--below-fold {
    font-family: inherit;
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    background: none;
    border: none;
    padding: 0.4rem 0.5rem;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.3s ease, opacity 0.3s ease;
    display: inline-block;
}
.pwa-install-btn--below-fold:hover {
    color: rgba(255, 255, 255, 0.6);
}
.pwa-install-btn--below-fold:active {
    opacity: 0.9;
}
.pwa-install-btn-label {
    position: relative;
}
.pwa-install-btn-label::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.pwa-install-btn--below-fold:hover .pwa-install-btn-label::after {
    opacity: 0.4;
}
/* Hint como footnote editorial — muy discreto */
.pwa-install-hint {
    margin: 0.6rem auto 0;
    padding: 0 1rem;
    font-size: 0.5625rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.28);
    max-width: 260px;
}
.pwa-install-hint[hidden] {
    display: none !important;
    margin: 0;
    padding: 0;
}
@media (display-mode: standalone) {
    .pwa-install-btn { display: none !important; }
    .pwa-install-zone { display: none !important; }
}

/* EN STYLES.CSS */

#warm-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    /* Calidez en toda la web: sutil de arriba a abajo */
    background:
        radial-gradient(circle at 30% 20%,
            rgba(255, 160, 80, 0.06),
            transparent 55%),
        radial-gradient(circle at 70% 80%,
            rgba(220, 150, 70, 0.04),
            transparent 50%),
        linear-gradient(to bottom,
            rgba(255, 200, 120, 0.03) 0%,
            rgba(255, 180, 100, 0.035) 50%,
            rgba(220, 160, 80, 0.04) 100%);

    mix-blend-mode: screen;

    opacity: 0.22;

    /* Opcional: Si tienes animación, descoméntala */
    /* animation: warm-breath 18s ease-in-out infinite; */
}


/* EN STYLES.CSS */

#home {
    min-height: 550px;
    min-height: 100dvh;
    height: auto;
    position: relative;
    z-index: 10;
    overflow: clip;
    isolation: isolate;
    width: 100%;
    margin: 0;
    border-radius: 0 0 30px 30px;
    transform-origin: center center;

    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-radius 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                margin 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hero: párrafo largo — opacidad 88% para leer sin esfuerzo consciente */
.hero-intro-text {
    color: rgba(233, 230, 227, 0.88);
}

/* Hero: sombra sutil al texto para mejor legibilidad sobre el fondo */
.hero-text-shadow p,
.hero-text-shadow h2,
.hero-text-shadow span {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 0, 0, 0.25);
}
.hero-text-shadow h2 {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 32px rgba(0, 0, 0, 0.2);
}

/* Hero: flecha scroll en móvil — opacidad forzada para que se vea (Tailwind puede no aplicar en build) */
@media (max-width: 767px) {
    .hero-scroll-hint {
        opacity: 0.22 !important;
    }
    .hero-scroll-hint:hover,
    .hero-scroll-hint:focus {
        opacity: 0.5 !important;
    }
}

/* Hero: en móvil, más espacio arriba del botón auriculares para bajarlo */
@media (max-width: 767px) {
    .hero-listener-spacer {
        margin-top: 4rem !important;
    }
}
@media (min-width: 768px) {
    .hero-listener-spacer {
        margin-top: 3rem;
    }
}

/* Wrapper del header: al hacer scroll, padding lateral para que el header se vea como tarjeta */
.home-header-wrapper {
    padding-left: 0;
    padding-right: 0;
    transition: padding-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                padding-right 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.home-header-wrapper.header-scrolled {
    padding-left: 4px !important;
    padding-right: 4px !important;
}
@media (min-width: 768px) {
    .home-header-wrapper.header-scrolled {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Tarjeta: márgenes y ancho directamente en el header por si el wrapper no aplica */
#home.header-shrink {
    transform: scale(0.955);
    border-radius: 25px;
    margin-left: 4px !important;
    margin-right: 4px !important;
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #home { border-radius: 0 0 60px 60px; }
    #home.header-shrink {
        transform: scale(0.96);
        border-radius: 60px;
        margin-left: 10px !important;
        margin-right: 10px !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
    }
}

/* Home/Hero: blur degradado en la mitad superior con backdrop-filter (funciona en móvil y desktop) */
.hero-bg-blur-top {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    mask-image: linear-gradient(to bottom, black 0%, black 38%, transparent 74%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 38%, transparent 74%);
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}
/* Safari/iOS: asegurar que el blur se aplique (transform crea contexto de apilamiento) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .hero-bg-blur-top {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
}

/* Home/Hero: capa sutil de contraste sobre la imagen para que el texto blanco se lea bien */
.header-hero-glass {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transform: translateZ(0);
    backface-visibility: hidden;
    /* Degradado suave que oscurece un poco la imagen y mejora el contraste del texto blanco */
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.38) 45%,
        rgba(0, 0, 0, 0.42) 100%);
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.1),
        inset 0 0 80px rgba(255, 250, 242, 0.05);
}
.header-hero-glass::before,
.header-hero-glass::after {
    display: none;
}

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 0 !important;
    opacity: 1;
    transform: translateY(0) translateZ(0);
    filter: brightness(1);
    transition: opacity 3s cubic-bezier(0.16, 1, 0.38, 1) 0.6s,
                transform 3.2s cubic-bezier(0.16, 1, 0.38, 1) 0.6s,
                filter 3.2s cubic-bezier(0.16, 1, 0.38, 1) 0.6s,
                background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Arriba a tope: sin fondo (desaparece) */
    background: transparent;
}



/* Marco sutil para el bloque logo + idiomas (estilo cristal cálido) */
.navbar-shell {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 30px;
    border: 1px solid transparent;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    transform: none;
    padding: 10px 14px;
    transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, backdrop-filter 0.45s ease;
}

#navbar.nav-scrolled .navbar-shell {
    border: 0.5px solid rgba(255, 240, 220, 0.09);
    background: rgba(20, 16, 12, 0.56);
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    box-shadow:
        inset 0 0 0 0.5px rgba(255, 248, 238, 0.02),
        0 10px 28px rgba(0, 0, 0, 0.26);
}



@media (max-width: 767px) {
    .navbar-shell {
        border-radius: 20px;
        padding: 6px 12px;
    }
}

/* iPhone Safari: blur robusto en el contenedor principal (evita fallos de capas anidadas) */
@supports (-webkit-touch-callout: none) {
    #navbar {
        /* Safari puede perder backdrop-filter si el padre tiene filter/transform */
        filter: none !important;
        transform: translateY(0) !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #navbar.nav-scrolled {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #navbar.nav-scrolled .navbar-shell {
        background: rgba(20, 16, 12, 0.52) !important;
        -webkit-backdrop-filter: blur(16px) saturate(138%) !important;
        backdrop-filter: blur(16px) saturate(138%) !important;
        border: 0.5px solid rgba(255, 240, 220, 0.1) !important;
    }
}

/* Contenedor de los enlaces (Visión, Sesiones, etc.): fondo con esquinas redondeadas abajo cuando hay scroll */
.navbar-links-bg {
    transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}


html:not(.styles-loaded) #navbar {
    opacity: 0;
    transform: translateY(-4px);
    filter: brightness(0.97);
}

/* Entrance glow — warm light when main web appears */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: radial-gradient(
        ellipse 90% 80% at 50% 40%,
        rgba(220, 180, 120, 0.06) 0%,
        rgba(204, 160, 90, 0.025) 45%,
        transparent 70%
    );
    opacity: 0;
}

@keyframes entrance-glow {
    0%   { opacity: 0; }
    40%  { opacity: 0.6; }
    65%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0.4; }
}

html.styles-loaded body::before {
    animation: entrance-glow 6s cubic-bezier(0.16, 1, 0.38, 1) 0.25s forwards;
}

/* 2. EL CONTENEDOR HACE EL TRABAJO SUCIO */
/* Cortamos el margen blanco AQUÍ, sin afectar al scroll de la ventana */
.site-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    display: block;
    padding-top: 0;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
}

body {
    background: linear-gradient(180deg, 
        #1a1510 0%, 
        #1f1a14 25%, 
        #1d1812 50%, 
        #1a1510 75%, 
        #15120e 100%);
    color: #e9e6e3;
    margin: 0;
    padding: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    min-height: 100vh;
}

/* Prevent flash of unstyled text */
/* html:not(.styles-loaded) * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
} */

/* Loading screen */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0a0806 0%, #000000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease-in-out;
}

html.styles-loaded #loading-screen {
    opacity: 0;
    pointer-events: none;
}

/* 1. KEYFRAMES 3D (La clave para el móvil) */
/* Usamos rotate3d en lugar de rotate normal. Esto activa el 'Turbo' del móvil */
@keyframes spin {
    0% {
        transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

/* 2. LA CLASE DEL GIRO */
.spin-vinyl {
    /* Velocidad lineal para que no acelere ni frene */
    animation: spin 6s linear infinite !important;

    /* OPTIMIZACIONES DE RENDIMIENTO MÓVIL */

    /* Aísla el elemento: le dice al navegador "lo que pasa aquí dentro no afecta al resto de la web" */
    contain: layout paint;

    /* Prepara al navegador para el cambio */
    will-change: transform;

    /* Fuerza la aceleración de hardware (GPU) */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;

    /* IMPORTANTE: Desactiva transiciones heredadas que causan el conflicto */
    transition: none !important;
}

/* Estado pausado */
.spin-paused {
    animation-play-state: paused !important;
}

/* Animación para el mini visualizador */
@keyframes musicBar {

    0%,
    100% {
        height: 20%;
    }

    50% {
        height: 100%;
    }
}

.animate-music-bar {
    animation: musicBar ease-in-out infinite;
    animation-play-state: paused;
    /* Por defecto pausado */
}

.playing .animate-music-bar {
    animation-play-state: running;
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-fast {
    transform: translateY(16px);
    transition-duration: 0.45s;
}

.warm-gradient {
    background: linear-gradient(135deg, rgba(204, 136, 0, 0.1) 0%, rgba(204, 136, 0, 0.05) 50%, transparent 100%);
}

.warm-glow {
    box-shadow: 0 0 40px rgba(204, 136, 0, 0.2), 0 0 80px rgba(204, 136, 0, 0.1);
}

.warm-glow-hover:hover {
    box-shadow: 0 0 60px rgba(204, 136, 0, 0.3), 0 0 120px rgba(204, 136, 0, 0.15);
    transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-glow {
    text-shadow: 0 0 20px rgba(204, 136, 0, 0.3);
}

.text-glow-hover:hover {
    text-shadow: 0 0 30px rgba(204, 136, 0, 0.5);
    transition: text-shadow 0.3s ease;
}

.vinyl-spin {
    animation: spin 6s linear infinite;
}

.paused-spin {
    animation-play-state: paused;
}

/* Nav al hacer scroll: cristal cálido (sin línea que destaque) */
.nav-scrolled {
    background: rgba(22, 18, 14, 0.72);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Navbar principal: sin blur/fondo rectangular; el efecto vive en .navbar-shell */
#navbar.nav-scrolled {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* =========================================
   MODO LIGERO (solo escritorio / PC)
   ========================================= */
@media (min-width: 1024px) {
    html.lite-mode * {
        /* Cortamos animaciones y transiciones decorativas en escritorio */
        animation: none !important;
        transition: none !important;
    }

    html.lite-mode #entry-ritual {
        display: none !important;
    }

    html.lite-mode body::before {
        /* Sin glow de entrada: desactivado para reducir repintados */
        animation: none !important;
        opacity: 0;
        display: none !important;
    }

    html.lite-mode .hero-bg-blur-top,
    html.lite-mode .header-hero-glass,
    html.lite-mode .nav-scrolled,
    html.lite-mode #warm-overlay {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* Fondo ambiental global en modo ligero:
       mantenemos un fondo bonito pero muy ligero para la GPU */
    html.lite-mode #ambient-bg {
        display: block !important;
        opacity: 1 !important;
    }

    html.lite-mode #ambient-bg img {
        /* Imagen más suave y estática */
        opacity: 0.35 !important;
        transform: none !important;
        transition: none !important;
        filter: blur(1px) brightness(0.9) contrast(1.05);
    }

    html.lite-mode #ambient-bg .bg-contrast-warm {
        /* Degradado cálido, suave, sin animaciones */
        background:
            radial-gradient(circle at 30% 20%,
                rgba(255, 190, 120, 0.06),
                transparent 55%),
            radial-gradient(circle at 70% 80%,
                rgba(210, 150, 90, 0.05),
                transparent 50%),
            linear-gradient(to bottom,
                rgba(10, 7, 4, 0.98) 0%,
                rgba(12, 8, 5, 0.98) 50%,
                rgba(8, 5, 3, 0.98) 100%);
    }

    /* Efectos del ritual (velos, partículas, ruido) desactivados */
    html.lite-mode .ritual-veil,
    html.lite-mode .ritual-veil-pulse,
    html.lite-mode .ritual-noise,
    html.lite-mode .ritual-particles,
    html.lite-mode .ritual-particle {
        animation: none !important;
        opacity: 0;
        display: none !important;
    }

    /* Reducir sombras y brillos pesados en textos y tarjetas */
    html.lite-mode .warm-glow,
    html.lite-mode .warm-glow-hover,
    html.lite-mode .card-hover,
    html.lite-mode .player-enhanced,
    html.lite-mode .player-with-expand {
        box-shadow: none !important;
    }

    html.lite-mode .text-glow,
    html.lite-mode .text-glow-hover,
    html.lite-mode .hero-text-shadow h2,
    html.lite-mode .hero-text-shadow p,
    html.lite-mode .hero-text-shadow span {
        text-shadow: none !important;
    }

    /* Player inferior: sin pulso ni animación visual extra */
    html.lite-mode #player-border-pulse,
    html.lite-mode .animate-music-bar {
        animation: none !important;
        opacity: 0.6;
    }

    /* Hero: imagen más simple, sin zoom ni transiciones para escritorio */
    html.lite-mode #home picture img {
        transform: none !important;
        opacity: 0.65 !important;
        transition: none !important;
        filter: brightness(0.95) contrast(1.05) !important;
    }

    /* HOME: en PC no convertir en tarjeta con márgenes al hacer scroll */
    html.lite-mode .home-header-wrapper.header-scrolled {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html.lite-mode #home.header-shrink {
        transform: none !important;
        border-radius: 0 0 60px 60px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
    }

    /* SESIONES: mantener textura cosmic también en lite-mode, pero ligera */
    html.lite-mode .sessions-plaque .sessions-plaque-bg {
        background:
            linear-gradient(180deg, rgba(10, 7, 5, 0.56) 0%, rgba(8, 5, 4, 0.64) 100%),
            url('../img/cosmic_background.webp') center center / cover no-repeat !important;
        background-blend-mode: normal !important;
        -webkit-filter: brightness(1.08) contrast(1.06) !important;
        filter: brightness(1.08) contrast(1.06) !important;
        transform: none !important;
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55) !important;
    }

}

/* ========== RENDIMIENTO ESCRITORIO: menos animaciones en ritual ========== */
@media (min-width: 1024px) {
    .ritual-veil,
    .ritual-veil-pulse,
    .ritual-noise,
    .ritual-particles,
    .ritual-particle {
        animation: none !important;
        opacity: 0 !important;
        display: none !important;
    }
    .ritual-bg-img {
        animation: none !important;
    }
    .ritual-logo-glow,
    .ritual-logo,
    .ritual-word {
        animation-duration: 8s !important;
    }
    /* Menos trabajo de composición en secciones fuera de vista */
    section[id]:not(#home) {
        content-visibility: auto;
        contain-intrinsic-size: auto 400px;
    }

    /* Sin animaciones de aparición en PC: todo visible de entrada */
    .reveal,
    .reveal.active,
    .reveal-fast,
    .reveal-fast.active {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
    .reveal-left,
    .reveal-right,
    .reveal-left.active,
    .reveal-right.active {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        will-change: auto !important;
    }
    .context-item,
    .context-item.revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* ========== OPTIMIZACIONES DE RENDIMIENTO PC ========== */
    
    /* Reducir will-change: solo cuando realmente se anima (hover activo) */
    .session-card {
        will-change: auto;
    }
    .session-card:hover,
    .session-card.active {
        will-change: transform, opacity;
    }
    .card-vinyl-container {
        will-change: auto;
    }
    .card-vinyl-container:hover,
    .session-card.active .card-vinyl-container {
        will-change: transform;
    }

    /* Optimizar backdrop-filter: reducir blur en elementos estáticos */
    .nav-scrolled {
        backdrop-filter: blur(8px) saturate(110%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
    }
    .subscribe-glass-card,
    .record-shelf-card,
    .sessions-plaque-bg {
        backdrop-filter: blur(12px) saturate(130%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
    }

    /* Hover más ligero: menos transformaciones pesadas */
    .session-card:not(.active):hover {
        transform: scale(0.97) translateZ(0) !important;
        filter: brightness(1.08) saturate(1.01) !important;
        transition-duration: 0.3s !important;
    }

    /* Focus states mejorados para navegación por teclado */
    .session-card:focus-visible,
    a:focus-visible,
    button:focus-visible {
        outline: 2px solid rgba(204, 136, 0, 0.6) !important;
        outline-offset: 3px !important;
        border-radius: 4px !important;
    }

    /* Scroll snapping suave entre secciones principales */
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 100px;
    }

    /* Mejorar espaciados en pantallas grandes */
    .max-w-4xl,
    .max-w-6xl {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Lazy loading mejorado: imágenes fuera de viewport */
    img[loading="lazy"] {
        content-visibility: auto;
    }

    /* Reducir repaints: contenedores con muchos hijos */
    #playlist-container,
    #sessions-list {
        contain: layout style paint;
    }
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1510;
}

/* Minimalista y discreto */
::-webkit-scrollbar-thumb {
    background: #33333376;
    /* Gris oscuro neutro */
    border-radius: 4px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #4d4d4d;
    /* Gris medio al tocar */
    box-shadow: none;
    /* Sin brillos, puramente funcional */
}

/* =========================================
   OPTIMIZACIÓN PARA SAFARI (Lista de Sesiones)
   ========================================= */

.card-hover {
    /* 1. NO usar 'all'. Especificar propiedades ahorra recursos en Safari */
    transition-property: transform, background-color, border-color, box-shadow;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

    /* 2. Trucos para forzar aceleración de Hardware (GPU) en Safari/iOS */
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* 3. Avisar al navegador que esto se va a mover */
    will-change: transform;
}

.card-hover:hover {
    /* Mantenemos tu efecto, pero ahora será fluido */
    transform: translateY(-4px) scale(1.01);
    /* Agregué un scale muy sutil para el efecto "engrasamiento" */
    border-color: rgba(204, 136, 0, 0.6);
    background-color: rgba(255, 255, 255, 0.08);
    /* Brillo sutil al fondo */
}

/* =========================================
   ANIMACIÓN SUAVE PARA PLAYLIST (Listas)
   ========================================= */

.playlist-item-hover {
    /* 1. Preparamos el elemento para GPU (evita repintado en Safari) */
    transform: translateZ(0);
    backface-visibility: hidden;

    /* 2. Transición estándar y relajada (ease-out es más natural que linear) */
    /* 0.3s es el punto dulce: menos es muy rápido, más se siente lento */
    transition: transform 0.3s ease-out, background-color 0.3s ease, border-color 0.3s ease;
}

/* Hover solo con cursor real; en táctil evita hovers falsos al hacer scroll en la lista */
@media (hover: hover) {
    .playlist-item-hover:hover {
        /* 3. EN LUGAR DE MOVERLO, LO ESCALAMOS MUY POCO */
        transform: scale(1.02) translateZ(0);
        background-color: rgba(255, 255, 255, 0.08);
        border-color: rgba(204, 136, 0, 0.4);
    }
}

/* Estado activo (canción sonando) para que no 'salte' si pasas el mouse */
.playlist-item-hover.active {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #cc8800;
}

.gradient-text {
    background: linear-gradient(135deg, #e9e6e3 0%, #cc8800 50%, #e9e6e3 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Logo name sizing: slightly smaller on very small screens to avoid wrapping */
nav#navbar a .text-glow-hover {
    font-size: 12px;
}


/* Make the small logo label compact on very small screens so it sits next to the mini player */
@media (max-width: 420px) {

    nav#navbar a .text-glow-hover {
            font-size: 11px;
            letter-spacing: 0.35em;
        }

    nav#navbar a .text-glow-hover {
        /* Show full name: slightly tighter tracking and more room */
        font-size: 10px !important;
        letter-spacing: 0.12em !important;
        display: inline-block;
        max-width: 100px; /* wider so full name fits */
        white-space: nowrap;
        overflow: visible; /* don't clip with ellipsis */
        text-overflow: clip;
        vertical-align: middle;
    }

    /* Slightly reduce logo image height to free up space */
    nav#navbar a img {
        width: 28px !important;
        height: 28px !important;
        margin-right: 5px !important;
    }

    /* ensure a tiny extra space between logo and mini player so they don't touch */
    nav#navbar .flex.items-center > .flex.items-center {
        gap: 6px !important;
    }
}

.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.loading-audio {
    opacity: 0.6;
    pointer-events: none;
}

.loading-audio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 2px solid rgba(204, 136, 0, 0.3);
    border-top-color: #cc8800;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@media (max-width: 768px) {
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }

    .mobile-text {
        line-height: 1.5;
    }

    .mobile-progress {
        min-height: 8px;
    }

    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}

/* MÓVIL EN HORIZONTAL: tratar como mobile, no como desktop */
@media (max-height: 500px) and (orientation: landscape) {
    #home {
        height: auto;
        min-height: 100vh;
    }

    #home section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    #home h3.font-serif {
        font-size: 2.4rem;
    }

    #home p {
        font-size: 0.8rem;
    }

    #home .animate-float {
        display: none;
    }

    #floating-whatsapp {
        display: flex !important;
    }
}

/* Botón flotante WhatsApp visible en todas las pantallas */

/* AJUSTE DE ALTURA SECCIÓN SESIONES */
/* ===== DESKTOP ===== */
#music {
    scroll-margin-top: -190px !important;
    /* ⬆ sube en PC */
    padding-top: -190px !important;
}

/* ===== MÓVIL: sección más baja (clases .music-section, .music-header, .music-links en HTML) ===== */
@media (max-width: 768px) {
    .music-section,
    section#music {
        padding-top: 0.5rem !important;
        padding-bottom: 0.75rem !important;
    }
    .music-header {
        margin-bottom: 1rem !important;
    }
    .music-header p {
        margin-top: 0.75rem !important;
        margin-bottom: 0 !important;
    }
    .music-header p:first-of-type {
        margin-top: 1rem !important;
    }
    .music-header p:last-of-type {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    .music-links {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
        opacity: 0.6;
    }
    #playlist-container {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}


#records {
    scroll-margin-top: 15px;
}

/* Título "Selección de vinilos": +5–8% presencia — micro sombra y un toque de luz */
#records .records-section-title {
    color: rgba(255, 255, 255, 0.97);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),
                 0 0 28px rgba(255, 248, 238, 0.08);
}

/* ============================
   FABs: WhatsApp + Subir
   Sistema sin saltos
============================ */

/* WhatsApp: abajo de la página por defecto; sube solo cuando el reproductor está visible y no estamos en el footer */
#floating-whatsapp {
    display: flex !important;
    visibility: visible !important;
    z-index: 100 !important;
    bottom: 0.5rem !important;
    transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sube por encima del reproductor solo cuando hay player y no estamos en header ni en footer (así en header y footer WhatsApp se queda abajo) */
body.has-player:not(.has-footer-visible):not(.has-hero-visible) #floating-whatsapp {
    bottom: calc(5.5rem + 25px) !important;
}

/* Base común: transición suave también en bottom para que no bajen brusco en el footer */
#floating-whatsapp,
#btnSubir {
    --lift: 0px;
    /* elevación por hover */
    --enter-offset: 0px;
    /* offset de entrada (solo Subir) */

    transform: translateZ(0) translateY(calc(var(--enter-offset) + var(--lift)));
    will-change: transform, opacity, box-shadow;

    transition:
        transform 0.22s cubic-bezier(.2, .9, .2, 1),
        box-shadow 0.22s ease-out,
        opacity 0.22s ease-out,
        bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estado base del botón Subir (oculto y abajo) */
#btnSubir {
    --enter-offset: 12px;
    opacity: 0;
    visibility: hidden;
}

/* Estado visible del botón Subir */
#btnSubir.show {
    --enter-offset: 0px;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover suave (solo modifica la elevación) */
#floating-whatsapp:hover,
#btnSubir:hover {
    --lift: -4px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}


/* --- ESTILOS PLAYER INFERIOR MEJORADOS --- */

/* Cuando el reproductor está activo, damos espacio al final de la web */
body.has-player {
    padding-bottom: 0 !important;
    /* Altura del reproductor + espacio */
}

/* Cuando sale el reproductor: flecha sube suavemente por encima (WhatsApp va con el player) */
body.has-player #btnSubir {
    bottom: 10rem !important; /* flecha por encima del WhatsApp (~160px) */
}

/* Animación de rotación suave para la imagen pequeña del player */
.animate-spin-slow {
    animation: spin 10s linear infinite;
}

/* Ajuste específico para que la barra de progreso sea fácil de clickar en móvil */
#progress-container {
    touch-action: none;
    /* Mejora la respuesta táctil al arrastrar */
}

/* Capa de borde: resplandor sutil hacia dentro (pulsa con la música, pintado desde JS) */
.player-border-pulse {
    position: absolute;
    inset: 0;
    border-radius: 25px;
    pointer-events: none;
    z-index: 25;
    opacity: 0;
    border: none;
    box-shadow: none;
    transition: opacity 0.2s ease-out;
}

/* Player se atenúa cuando el footer es visible */
/* 1. ESTADO BASE: Siempre preparado para 3D para evitar saltos */
#bottom-player {
    /* 1. POSICIONAMIENTO (La clave para centrar) */
    position: fixed;
    left: 10px !important;
    /* Separación izquierda */
    right: 10px !important;
    /* Separación derecha */
    width: auto !important;
    /* IMPORTANTE: Anula el w-full para que respete los lados */
    margin: 0 !important;
    /* Ya no usamos margin, usamos left/right */
    bottom: 0 !important;
    /* Pegado al borde inferior */

    /* 2. ESTÉTICA MEJORADA (Cápsula con gradiente sutil) */
    background: linear-gradient(135deg, 
        rgba(5, 5, 5, 0.85) 0%,
        rgba(10, 8, 6, 0.9) 50%,
        rgba(5, 5, 5, 0.85) 100%) !important;
    border: 1px solid var(--player-border-color, rgba(255, 255, 255, 0.15));
    border-radius: 25px !important;
    /* Bordes muy redondos */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 0 2px rgba(204, 136, 0, var(--player-glow-alpha, 0.08)),
        0 0 60px rgba(204, 136, 0, var(--player-glow-alpha, 0.05));

    /* 3. COMPORTAMIENTO */
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    pointer-events: auto;
    z-index: 101;
    /* Por encima del botón flotante WhatsApp (z-index: 100) para que no tape el player */
    transition: all 0.5s ease-out, border-color 0.12s ease-out, box-shadow 0.12s ease-out;
}

/* Efecto hover mejorado para el reproductor completo */
.player-enhanced:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 1),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 80px rgba(204, 136, 0, 0.1) !important;
}

/* Barra de progreso mejorada - track más visible para que resalte el progreso */
.barra-enhanced {
    height: 8px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.barra-enhanced:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

/* Barra de progreso: luz luminosa más opaca (densa) - más visible */
.progress-bar-glow {
    box-shadow: 
        0 0 14px rgba(204, 136, 0, 1),
        0 0 28px rgba(204, 136, 0, 0.95),
        0 0 42px rgba(255, 180, 80, 0.85),
        inset 0 0 14px rgba(255, 220, 140, 0.6),
        0 0 0 1px rgba(255, 200, 100, 0.45);
    border-radius: 50px;
}

/* Imagen del player mejorada */
.player-image-container {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.player-image-shadow {
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(204, 136, 0, 0.1);
}

/* Botón de play mejorado */
.play-btn-enhanced {
    position: relative;
    overflow: hidden;
}

.play-btn-enhanced::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(204, 136, 0, 0.2), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.play-btn-enhanced:hover::before {
    opacity: 1;
}

/* Botones de control mejorados */
.control-btn {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.control-btn:active {
    transform: scale(0.9);
}

/* Botón de sesiones mejorado */
.sessions-btn {
    position: relative;
    overflow: hidden;
}

.sessions-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(204, 136, 0, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sessions-btn:hover::before {
    opacity: 1;
}

/* Display de tiempo mejorado */
.time-display {
    transition: all 0.3s ease;
}

.time-display:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

#progress-bar {
    /* Color sólido y visible - anula el gradiente translúcido de Tailwind */
    background: linear-gradient(90deg, #996600 0%, #cc8800 50%, #ffb84d 100%) !important;
    box-shadow: 
        0 0 12px rgba(204, 136, 0, 1),
        0 0 24px rgba(204, 136, 0, 0.9),
        inset 0 0 8px rgba(255, 220, 140, 0.4),
        0 0 0 1px rgba(255, 200, 100, 0.6);
    border-radius: 50px;
    transition: width 0.1s linear;
    min-width: 6px !important;
}

/* Contenedor interior del reproductor (solo para posición relativa) */
.player-inner-glow {
    position: relative;
}



/* 2. ESTADO DORMIDO (Footer/Contacto visible) — casi invisible */
body.has-footer-visible #bottom-player {
    transform: translate3d(0, 22%, 0) !important;
    opacity: 0.2 !important;
    filter: blur(2.5px);
    pointer-events: none; /* permite hover/clic en botones Hablemos y Correo */
}

/* Despierto al hover o touch en footer */
body.has-footer-visible #bottom-player.player-awake {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    filter: blur(0);
}

/* Contacto: sin scale en hover para evitar salto automático del scroll al final de página */
#contact {
    overflow-anchor: none;
}
#contact .contact-cta-btn {
    transform: none; /* evita cualquier scale que pueda provocar reflow/scroll */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

/* Botón principal "Hablemos": un poco más de luz que Correo + glow suave sutil */
#contact .contact-cta-btn-primary {
    background-color: rgba(255, 255, 255, 0.17) !important;
    box-shadow: 0 0 24px rgba(230, 160, 32, 0.12);
}


/* --- LOADING SCREEN STYLES --- */

/* Evita scroll mientras carga */
body.loading {
    overflow: hidden;
}

/* Animación de pulso lento para el texto */
@keyframes pulseSlow {

    0%,
    100% {
        opacity: 0.8;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
        text-shadow: 0 0 25px rgba(204, 136, 0, 0.6);
    }
}

.animate-pulse-slow {
    animation: pulseSlow 3s ease-in-out infinite;
}

/* Animación de pulso suave para el anillo de la imagen del player */
@keyframes ringPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Animación de brillo para la barra de progreso */
@keyframes progressShimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Efectos cuando está reproduciendo */
body:has(#bottom-player #play-btn svg polygon[points="6 4 14 4 14 16 6 16"]) #bottom-player {
    border-color: rgba(204, 136, 0, 0.3) !important;
}

body:has(#bottom-player #play-btn svg polygon[points="6 4 14 4 14 16 6 16"]) #bottom-player .player-image-container::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid rgba(204, 136, 0, 0.4);
    animation: ringPulse 2s ease-in-out infinite;
    pointer-events: none;
}

/* Mejora visual para el anillo pulsante */
.player-image-container {
    position: relative;
}

/* Ajuste para móvil - reducir efectos pesados */
@media (max-width: 640px) {
    #bottom-player {
        backdrop-filter: blur(15px) saturate(150%) !important;
        -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
    }
    
    .play-btn-enhanced {
        box-shadow: 0 0 15px rgba(204, 136, 0, 0.2);
    }
    
    .barra-enhanced {
        height: 5px !important;
    }
}

/* Estado final: Oculto */
#loading-screen.loaded {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
}

/* Opcional: Si quieres que el texto suba un poco al desaparecer */
#loading-screen.loaded h1 {
    transform: translateY(-20px);
    transition: transform 0.8s ease-in-out;
}


@keyframes warm-breath {

    0%,
    100% {
        opacity: 0.75;
    }

    50% {
        opacity: 1;
    }
}


@keyframes subtle-breath {

    0%,
    100% {
        opacity: 0.85
    }

    50% {
        opacity: 1
    }
}

.menu-item {
    transition: transform .4s ease, opacity .4s ease;
}

.menu-item.is-active {
    opacity: 1;
    transform: translateY(-1px);
}

.menu-item:not(.is-active) {
    opacity: .75;
}



/* Player completamente oculto (estado hero) */
body.has-player-hidden #bottom-player {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
}

/* Zona media (ni hero ni contacto): player siempre visible */
body:not(.has-hero-visible):not(.has-footer-visible) #bottom-player {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    filter: blur(0);
}

/* Player un poco visible en HERO (header), igual que en footer — latente */
body.has-hero-visible #bottom-player {
    transform: translate3d(0, 22%, 0) !important;
    opacity: 0.2 !important;
    filter: blur(2.5px);
}

/* Despierto al hover o touch en header */
body.has-hero-visible #bottom-player.player-awake {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    filter: blur(0);
}

/* Si el usuario pulsó "Escuchar" o está reproduciendo, player visible en header */
body.player-revealed-by-listen.has-hero-visible #bottom-player,
body:has(#bottom-player #play-btn svg polygon[points="6 4 14 4 14 16 6 16"]).has-hero-visible #bottom-player {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    filter: blur(0);
}

/* Panel de sesiones desplegado: player visible aunque esté en home */
body.player-expanded-open.has-hero-visible #bottom-player {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    filter: blur(0);
}

/* Panel de sesiones abierto en footer: reproductor y panel visibles y nítidos (igual que en hero) */
body.player-expanded-open.has-footer-visible #bottom-player {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    filter: blur(0);
    pointer-events: auto;
}

/* Reproduciendo en contacto: player visible */
body:has(#bottom-player #play-btn svg polygon[points="6 4 14 4 14 16 6 16"]).has-footer-visible #bottom-player {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    filter: blur(0);
}


@keyframes logoBreath {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.9;
    }

    100% {
        transform: scale(1);
        opacity: 0.75;
    }
}


/* ===============================
   Equalizer (playlist active)
   =============================== */

.equalizer {
    display: flex;
    gap: 2px;
    height: 14px;
    align-items: flex-end;
}

.equalizer span {
    width: 2px;
    height: 100%;
    background: rgba(204, 136, 0, 0.9);
    border-radius: 2px;
    transform-origin: bottom;
    animation: eq-breath 1.4s ease-in-out infinite;
    animation-play-state: paused;
}

.equalizer.playing span {
    animation-play-state: running;
}

.equalizer span:nth-child(1) {
    animation-delay: 0s;
}

.equalizer span:nth-child(2) {
    animation-delay: .15s;
}

.equalizer span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes eq-breath {
    0% {
        transform: scaleY(0.3);
        opacity: .6;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }

    100% {
        transform: scaleY(0.4);
        opacity: .7;
    }
}


.bg-contrast-dark {
    background: linear-gradient(to bottom,
            rgba(10, 10, 10, 0.683),
            rgba(10, 10, 10, 0.759));
}

.bg-contrast-warm {
    background: linear-gradient(to bottom,
            rgba(26, 21, 16, 0.75),
            rgba(31, 26, 20, 0.85),
            rgba(29, 24, 18, 0.80),
            rgba(26, 21, 16, 0.75),
            rgba(21, 18, 14, 0.90));
}

/* Fondo ambiental: más luminoso */
#ambient-bg img {
    filter: brightness(0.95) saturate(1.1) !important;
    opacity: 0.65 !important;
    filter: blur(4px) !important;
    -webkit-filter: blur(4px) !important;
    -moz-filter: blur(4px) !important;
    -ms-filter: blur(4px) !important;
    -o-filter: blur(4px) !important;
    filter: blur(4px) !important;
    filter: blur(4px) !important;
}
#ambient-bg .bg-contrast-warm {
    background: linear-gradient(to bottom,
            rgba(20, 17, 14, 0.55),
            rgba(24, 20, 16, 0.65),
            rgba(22, 18, 14, 0.60),
            rgba(20, 17, 14, 0.55),
            rgba(18, 15, 12, 0.70)) !important;
}

.contrast-final {
    position: absolute;
    inset: 0;
    z-index: 15;

    /* negro profundo real */
    background: rgba(0, 0, 0, 0.268);

    pointer-events: none;
}


/* --- FIX PARA DISCOS EN PC (grid legacy; ya no usado en records) --- */
@media (min-width: 768px) {

    .discos-grid-pc {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 2rem !important;
    }

    .disco-item-pc {
        max-width: 180px !important;
    }
}

/* --- CARRUSEL DE DISCOS (records) — 70% de la placa, es + en --- */
/* Placa: min-height 450px (móvil), 520px (md+). 70% = 315px / 364px */
.records-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.5rem;
    align-items: flex-start;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

.records-carousel::-webkit-scrollbar {
    display: none;
}

.records-carousel__item {
    flex-shrink: 0;
    width: 315px; /* 70% de 450px placa móvil */
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.records-disc-caption {
    text-align: center;
    /* En móvil: un poco más de aire entre disco y texto */
    margin-top: 1.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.records-disc-caption p:first-child {
    color: rgba(255, 232, 198, 0.86);
    text-shadow: 0 1px 10px rgba(204, 136, 0, 0.2);
}

.records-disc-caption p:last-child {
    color: rgba(255, 247, 235, 0.9);
}

@media (min-width: 768px) {
    .records-carousel {
        gap: 2rem;
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }
    .records-carousel__item {
        width: 310px; /* un poco más compacta en escritorio */
    }

    /* En escritorio, espacio entre disco y nombre/artista */
    .records-disc-caption {
        margin-top: 0.85rem;
    }
}

/* Cuadrado 1:1 con padding-top (no depende de aspect-ratio) */
.records-disco-inner {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

/* Los discos en carrusel ocupan todo el ancho del ítem (sin max-width) */
.records-carousel .disco-item-pc {
    max-width: none !important;
}

/* Portadas con colores vivos, sin capas que quiten color */
.records-carousel .disco-item-pc img {
    filter: none;
    opacity: 1;
}

/* Contenedor disco: borde muy sutil, sombra suave */
.records-carousel .disco-item-pc > div {
    border-radius: 30px !important;
    border-color: rgba(255, 230, 188, 0.22) !important;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(204, 136, 0, 0.12);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Hover sutil: ligero scale, anillo discreto */
.records-carousel .disco-item-pc:has(.record-overlay):hover > div {
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.34),
        0 0 26px rgba(204, 136, 0, 0.22),
        0 0 0 1px rgba(255, 226, 178, 0.42);
    border-color: rgba(255, 226, 178, 0.42) !important;
}

/* "Gira" / "Spin" — más pequeño y etéreo, casi ritual, tono vinilo */
.records-placa-hint {
    text-align: center;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(232, 198, 142, 0.74);
    margin: 0 0 0.5rem 0;
    padding: 0;
}

.records-placa-hint-en { display: none; }
.records-placa-hint-es { display: block; }

html[lang="en"] .records-placa-hint-en { display: block; }
html[lang="en"] .records-placa-hint-es { display: none; }


/* --- FIX VINILOS (Fondo de texto y botones) --- */

/* 1. Fondo negro sólido que se desvanece hacia arriba */
.vinyl-gradient-bg {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 1) 0%,
            /* Negro puro abajo */
            rgba(0, 0, 0, 0.9) 30%,
            /* Casi negro un poco más arriba */
            transparent 100%
            /* Transparente arriba del todo */
        ) !important;
}

/* 2. Contenedor de botones con margen de seguridad */
.vinyl-buttons-wrapper {
    width: 100%;
    padding-left: 20px;
    /* Margen izquierdo */
    padding-right: 20px;
    /* Margen derecho */
    display: flex;
    flex-direction: column;
    /* Botones verticales */
    gap: 10px;
    /* Espacio entre botones */
}



/* --- Overlay al tocar el disco (#records): diseño glass cálido --- */
.disco-item-pc .record-overlay {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.96);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Fondo glass cálido (sustituye el inline negro frío) */
    background: linear-gradient(165deg,
        rgba(28, 22, 18, 0.92) 0%,
        rgba(20, 16, 12, 0.95) 50%,
        rgba(24, 19, 15, 0.93) 100%) !important;
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border-radius: 30px;
    border: 1px solid rgba(255, 220, 180, 0.08);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 235, 210, 0.06),
        0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Estado activo: overlay visible con ligera animación */
.disco-item-pc.active .record-overlay {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* Contenedor de botones Juno/Discogs dentro del overlay */
.record-overlay__actions {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    gap: 0.75rem;
}

/* Botones Juno/Discogs: claros y gruesos (no oscuros ni finos) */
.record-overlay a[href*="juno"],
.record-overlay a[href*="discogs"],
.record-overlay a[href*="es.juno"] {
    padding: 0.85rem 1.25rem;
    font-size: 12px;
    letter-spacing: 0.18em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    border-radius: 14px;
    display: block;
    width: 100%;
    /* Fondo claro cálido, borde visible */
    background: rgba(255, 245, 230, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 235, 210, 0.18) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 1px 0 0 rgba(255, 240, 220, 0.15) inset;
    color: rgba(255, 250, 240, 0.98);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.record-overlay a[href*="juno"]:hover,
.record-overlay a[href*="discogs"]:hover,
.record-overlay a[href*="es.juno"]:hover {
    background: rgba(255, 235, 210, 0.35);
    border-color: rgba(255, 235, 210, 0.28) !important;
    box-shadow: 0 4px 20px rgba(204, 136, 0, 0.25), 0 1px 0 0 rgba(255, 245, 230, 0.2) inset;
    color: #fff;
    transform: scale(1.02);
}

.record-overlay a[href*="juno"]:active,
.record-overlay a[href*="discogs"]:active,
.record-overlay a[href*="es.juno"]:active {
    transform: scale(0.98);
}

/* Cursor de mano para indicar que se puede tocar */
.disco-item-pc {
    cursor: pointer;
}

.barra {
    height: 6px !important;
}





/* --- ANIMACIONES DE ENTRADA LATERAL --- */

/* Base para animaciones laterales */
.reveal-left,
.reveal-right {
    opacity: 0;
    filter: blur(5px);
    /* Efecto cinemático */
    transition:
        opacity 1s ease-out,
        transform 1s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 1s ease-out;
    will-change: transform, opacity, filter;
}

/* Estado inicial: Izquierda */
.reveal-left {
    transform: translateX(-100px);
    /* Viene desde la izquierda */
}

/* Estado inicial: Derecha */
.reveal-right {
    transform: translateX(100px);
    /* Viene desde la derecha */
}

/* ESTADO ACTIVO (Cuando el scroll llega) */
.reveal-left.active,
.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

/* Móvil: Reducimos la distancia para que no maree en pantallas pequeñas */
@media (max-width: 768px) {
    .reveal-left {
        transform: translateX(-40px);
    }

    .reveal-right {
        transform: translateX(40px);
    }
}










/* --- NUEVO DISEÑO SESIONES (CARRUSEL) --- */

/* Ocultar barra de scroll pero permitir funcionalidad */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- CONTENEDOR PRINCIPAL --- */
/* --- CONTENEDOR PRINCIPAL (CORREGIDO PARA EVITAR CORTES) --- */
#playlist-container {
    display: flex !important;
    min-height: 0 !important;
    /* Altura según tarjetas; reserva mínima evita colapso antes de cargar */
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 20px;

    /* Scroll horizontal - Liquid Motion управляет через JavaScript */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* Mantenemos hidden Y, pero damos espacio con padding */

    /* Smooth Snap Scroll - управляется через JavaScript LiquidCarousel */
    scroll-snap-type: none; /* Отключено, управляется через JS */
    scroll-behavior: auto; /* Управляется через JavaScript для spring эффекта */
    -webkit-overflow-scrolling: touch;

    width: 100%;
    position: relative;
    
    /* Liquid Motion - оптимизация для 3D трансформаций */
    perspective: 1200px; /* Увеличена перспектива для более глубокого эффекта */
    transform-style: preserve-3d;
    cursor: grab;
    
    /* Оптимизация производительности */
    contain: layout style paint;
    isolation: isolate;

    /* Poco espacio arriba/abajo para que no quede hueco dentro de la placa */
    padding-top: 16px !important;
    padding-bottom: 16px !important;

    /* Primera tarjeta centrada: padding lateral = (ancho visible - ancho tarjeta) / 2 */
    padding-left: max(24px, calc((100% - 280px) / 2));
    padding-right: 50%;

    /* Aseguramos que las tarjetas estén centradas verticalmente en ese espacio */
    align-items: center !important;
}

/* Ocultar barra de scroll visualmente */
#playlist-container::-webkit-scrollbar {
    display: none;
}

#playlist-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- TARJETAS DE SESIÓN (efecto cristal como placas) --- */
.session-card {
    flex: 0 0 auto !important;
    width: 300px;
    height: 460px;
    scroll-snap-align: none; /* Управляется через JS */
    padding: 30px;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;

    border-radius: 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 252, 248, 0.03);
    
    /* Liquid Motion - 3D transforms */
    transform-style: preserve-3d;
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform, opacity;
    
    /* Премиальные transitions для максимальной плавности */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.5s ease,
                box-shadow 0.5s ease,
                background 0.5s ease;

    /* Placa cristal luminosa (base); degradado que aclara abajo */
    background: linear-gradient(180deg,
        rgba(48, 44, 40, 0.45) 0%,
        rgba(52, 48, 44, 0.38) 50%,
        rgba(65, 60, 55, 0.28) 75%,
        rgba(80, 72, 65, 0.22) 100%);

    -webkit-backdrop-filter: blur(14px) saturate(110%);
    backdrop-filter: blur(14px) saturate(110%);

    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.18),
        inset 0 0 35px rgba(255, 250, 242, 0.06);

    opacity: 1 !important;
    filter: brightness(1.36) saturate(1.02);
    /* Initial transform will be set by LiquidCarousel */
    transform: perspective(1000px) rotateY(0deg) scale(0.9) translateZ(0);

    cursor: pointer;
    z-index: 1;
    touch-action: pan-x pan-y !important;
    
    /* CSS variables for stretch effect */
    --stretch-x: 1;
    --stretch-y: 1;
}

/* Capa de fondo (imagen de sesión) queda detrás para verse a través del cristal */
.session-card > *:first-child {
    position: absolute;
    z-index: 0;
}

/* Sin brillo superior en tarjetas de sesión */
.session-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    pointer-events: none;
    z-index: 1;
    background: transparent;
    transition: background 0.5s ease;
}

/* Borde sutil: luz suave arriba, degradado cálido que define el cristal */
.session-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(165deg,
        rgba(255, 252, 248, 0.12) 0%,
        rgba(255, 250, 242, 0.06) 35%,
        rgba(255, 248, 240, 0.04) 70%,
        rgba(255, 248, 242, 0.02) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    transition: background 0.5s ease;
}

/* Móvil: borde sutil igual que desktop; sombras propias */
@media (max-width: 767px) {
    .session-card::after {
        display: none !important;
    }
    .session-card {
        /* Mobile perf: lighter glass + fewer expensive transitions */
        -webkit-backdrop-filter: blur(9px) saturate(106%) !important;
        backdrop-filter: blur(9px) saturate(106%) !important;
        filter: brightness(1.2) saturate(1) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
        clip-path: inset(0 round 30px);
        border: 1px solid rgba(255, 252, 248, 0.03);
        transition: transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
                    opacity 0.38s cubic-bezier(0.23, 1, 0.32, 1) !important;
    }
    .session-card.active {
        -webkit-backdrop-filter: blur(11px) saturate(112%) !important;
        backdrop-filter: blur(11px) saturate(112%) !important;
        filter: brightness(1.24) saturate(1.02) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
    }
    .session-card.centered:not(.active) {
        filter: brightness(1.3) saturate(1) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
    }
    .session-card.active .session-card-bg {
        /* Avoid continuous repaint from breathing animation on mobile */
        animation: none !important;
    }
    .session-card > *:first-child {
        border-radius: 30px;
        overflow: hidden;
    }
    .session-card > *:first-child img {
        border-radius: 30px;
    }
}

/* iOS Safari turbo profile: prioritize scroll smoothness over heavy glass effects */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        .session-card {
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
            background: linear-gradient(180deg,
                rgba(40, 36, 33, 0.72) 0%,
                rgba(46, 41, 37, 0.66) 55%,
                rgba(55, 49, 43, 0.6) 100%) !important;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important;
            clip-path: none !important;
            transition: transform 0.32s cubic-bezier(0.23, 1, 0.32, 1),
                        opacity 0.32s cubic-bezier(0.23, 1, 0.32, 1) !important;
        }

        .session-card.active,
        .session-card.centered:not(.active) {
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24) !important;
        }

        .session-card::before,
        .session-card::after {
            display: none !important;
        }

        .session-card .card-vinyl-container::after {
            filter: none !important;
            opacity: 0.2 !important;
        }

        .session-card.active .session-card-bg,
        .session-card.active.playing .session-card-bg {
            animation: none !important;
            filter: brightness(0.68) saturate(0.9) !important;
        }
    }
}

/* Contenido (vinilo, título, etc.) por encima del cristal */
.session-card > *:not(:first-child) {
    position: relative;
    z-index: 2;
}

.session-card:focus-visible {
    outline: none;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .session-card,
    .card-vinyl-container,
    .session-card .spin-vinyl {
        transition-duration: 0.08s !important;
    }
    .session-card .spin-vinyl {
        animation-duration: 20s;
    }
}

/* --- VINILO --- */
.card-vinyl-container {
    width: 190px;
    height: 190px;
    aspect-ratio: 1;
    margin-top: 12px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.46);
    flex-shrink: 0;
    transition: transform 0.5s ease, box-shadow 0.4s ease;
}

.card-vinyl-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-radial-gradient(#111 0, #111 2px, #1a1a1a 3px, #1a1a1a 4px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

.card-vinyl-container::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -10px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0) 72%);
    filter: blur(6px);
    opacity: 0.28;
    pointer-events: none;
    z-index: -1;
    transform: translateY(2px) scale(0.98);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Ocultar solo los elementos visuales específicos hasta que la imagen cargue */
.card-vinyl-container:not(.image-loaded) .vinyl-grooves,
.card-vinyl-container:not(.image-loaded) .vinyl-image,
.card-vinyl-container:not(.image-loaded)::before {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* Mostrar los elementos visuales cuando la imagen esté cargada */
.card-vinyl-container.image-loaded .vinyl-grooves,
.card-vinyl-container.image-loaded .vinyl-image,
.card-vinyl-container.image-loaded::before {
    opacity: 1;
}

/* Portada del vinilo: círculo perfecto, imagen recortada para ocultar borde suave/fondo de la imagen */
.vinyl-label-wrap {
    aspect-ratio: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    /* Borde interior sutil para definir el borde del disco y tapar cualquier halo residual */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.card-vinyl-container .vinyl-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    /* Escala ligeramente mayor para que el borde suave/fondo de la imagen quede fuera del círculo y se recorte */
    transform: scale(1);
}

/* Estado activo (clicada): máxima luminosidad + degradado aclara abajo */
.session-card.active {
    opacity: 1 !important;
    filter: brightness(1.38) saturate(1.03);
    /* Transform управляется LiquidCarousel, но можем добавить базовый */
    z-index: 10;
    background: linear-gradient(180deg,
            rgba(52, 48, 44, 0.4) 0%,
            rgba(48, 44, 40, 0.35) 40%,
            rgba(60, 55, 50, 0.25) 70%,
            rgba(75, 68, 60, 0.18) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(122%);
    backdrop-filter: blur(18px) saturate(122%);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.18),
        0 1px 0 0 rgba(255, 250, 242, 0.22) inset,
        inset 0 0 40px rgba(255, 250, 242, 0.04);
}

/* Estado reproduciendo: luminosidad un poco más baja en la tarjeta activa */
.session-card.active.playing {
    filter: brightness(1.32) saturate(1.03);
    background: linear-gradient(180deg,
            rgba(46, 42, 38, 0.36) 0%,
            rgba(44, 40, 36, 0.32) 40%,
            rgba(54, 50, 46, 0.24) 70%,
            rgba(68, 62, 56, 0.18) 100%);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.18),
        0 1px 0 0 rgba(255, 250, 242, 0.22) inset,
        inset 0 0 42px rgba(255, 250, 242, 0.06);
}
.session-card.active.playing .session-card-bg {
    filter: brightness(0.6) saturate(0.88) !important;
}


/* Tarjeta centrada por scroll (todavía no clicada): degradado aclara abajo */
.session-card.centered:not(.active) {
    opacity: 1 !important;
    filter: brightness(2) saturate(1);
    /* Transform управляется LiquidCarousel для плавного эффекта */
    background: linear-gradient(180deg,
            rgba(48, 44, 40, 0.4) 0%,
            rgba(50, 46, 42, 0.35) 40%,
            rgba(62, 56, 50, 0.25) 70%,
            rgba(78, 70, 62, 0.18) 100%);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.14),
        inset 0 0 20px rgba(0, 0, 0, 0.04);
}

.session-card.centered:not(.active)::before {
    background: transparent;
}

.session-card.centered:not(.active)::after {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 252, 248, 0.02) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .session-card.active.playing {
        animation: none;
    }
    .session-card.active.playing .session-card-bg {
        animation: none;
    }
}

.session-card.active .session-card-bg {
    filter: brightness(0.46) saturate(0.8) !important;
    animation: session-card-bg-breath 6s ease-in-out infinite;
}

@keyframes session-card-bg-breath {
    0%, 100% { transform: scale(1); opacity: 0.98; }
    50%     { transform: scale(1.05); opacity: 1; }
}

.session-card.active {
    height: 478px; /* +18px para que el disco activo no se recorte arriba/abajo */
}
.session-card.active .card-vinyl-container {
    width: 182px;
    height: 182px;
    box-shadow: 0 0 18px rgba(204, 136, 0, 0.1);
}

.session-card.active .card-vinyl-container::after {
    opacity: 0.36;
    transform: translateY(3px) scale(1.02);
}

@media (max-width: 380px) {
    .session-card { width: 75vw; height: 400px; }
    .session-card.active { height: 416px; }
    .card-vinyl-container { width: 210px; height: 210px; }
    .session-card.active .card-vinyl-container { width: 228px; height: 228px; }
}
@media (max-width: 767px) and (min-width: 381px) {
    .session-card .card-vinyl-container { width: 218px; height: 218px; }
    .session-card.active .card-vinyl-container { width: 234px; height: 234px; }
}

@media (min-width: 768px) {
    .session-card { width: 348px; height: 530px; }
    .session-card.active { height: 542px; }
    .card-vinyl-container { width: 186px; height: 186px; }
    .session-card.active .card-vinyl-container { width: 198px; height: 198px; }
}

/* Animación de giro */
.spin-vinyl {
    animation: spin 8s linear infinite;
}

.spin-paused {
    animation-play-state: paused;
}

/* Etiquetas (mood: spiritual, soulful, etc.) — puede ocupar dos líneas si hace falta */
.tag-pill {
    font-size: 6px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 4px 8px;
    margin-top: 15px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.72);
    max-width: 100%;
    text-align: center;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
}

.session-card.active .tag-pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.82);
}

/* Energy en tarjetas: texto + redonditas (●○○○○) */
.energy-dots {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.energy-dots-label {
    margin-right: 2px;
}
.energy-dots-circles {
    letter-spacing: 0.15em;
    font-size: 1.1em;
    line-height: 1;
    opacity: 0.85;
}

/* Botón Escuchar/Pausar en tarjetas de sesión: sutil en todos los breakpoints */
.session-card .session-card-listen-btn {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease !important;
}
.session-card .session-card-listen-btn-icon {
    opacity: 0.9;
}
.session-card .session-card-listen-btn-text {
    opacity: 0.92;
}
@media (hover: hover) {
    .session-card .session-card-listen-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22) !important;
        transform: translateY(-1px) !important;
    }
}
.session-card .session-card-listen-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
}

/* En PC, "Energy"/"Energía" más pequeño en tarjetas de sesiones */
@media (min-width: 768px) {
    .energy-dots {
        font-size: 8px;
    }
    .energy-dots-circles {
        font-size: 1em;
    }
}

/* Botón de like (esquina superior derecha de la tarjeta de sesiones) */
.session-card .like-btn {
    position: absolute !important;
    top: 32px !important;
    right: 32px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 30;
}
/* Espacio entre el botón like y el nombre de la sesión */
.session-card > div.relative.z-10 {
    padding-top: 16px;
}
.like-btn {
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 2px 6px;
    background: rgba(8, 8, 8, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    opacity: 0.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

/* Solo en dispositivos con hover (desktop); en móvil se mantiene la opacidad reducida */
@media (hover: hover) {
    .like-btn:hover {
        opacity: 1;
        transform: translateY(-0.5px);
        border-color: rgba(255, 255, 255, 0.24);
        background: rgba(8, 8, 8, 0.24);
    }
}

.like-btn:active {
    transform: scale(0.96);
}

.like-btn:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.like-icon {
    transition: transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.like-animated .like-icon {
    animation: likePulse 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.like-animated .like-count {
    animation: countBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.like-btn--locked .like-icon {
    fill: currentColor;
    color: rgba(255, 255, 255, 0.82);
}

/* Móvil: botón de likes con menos opacidad desde el primer pintado */
@media (max-width: 768px) {
    .session-card .like-btn {
        opacity: 0.5;
    }
    #playlist-container .like-btn .like-icon,
    #playlist-container .like-btn .like-count,
    .session-card .like-btn .like-icon,
    .session-card .like-btn .like-count {
        opacity: 0.5;
    }
    #playlist-container .like-btn--locked .like-icon,
    .session-card .like-btn--locked .like-icon {
        color: rgba(255, 255, 255, 0.7);
    }
}

/* Selector de idioma estilo like (pill buttons) — sutil, discreto */
.lang-switch {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 3px 8px;
    min-width: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.26);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.lang-separator {
    margin: 0 4px;
    color: rgba(255, 255, 255, 0.34);
    font-weight: 400;
}

/* Separador ES / EN (solo между двумя языками, не перед VU-кнопкой) */
.lang-switch .lang-btn + .lang-btn::before {
    content: "/";
    margin-right: 4px;
    color: rgba(255, 255, 255, 0.34);
    font-weight: 400;
}

.lang-btn--active {
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
    border-color: transparent;
    cursor: default;
}

@media (hover: hover) {
    a.lang-btn:hover {
        color: rgba(255, 255, 255, 0.4);
        border-color: transparent;
        background: transparent;
    }
}

a.lang-btn:active {
    background: transparent;
}

@keyframes likePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3) rotate(10deg);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes countBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* "Nuevo" en tarjetas de sesiones — esquina superior izquierda, borde amarillo */
.session-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(204, 136, 0, 0.28);
    color: rgba(255, 255, 255, 0.62);
    font-size: 6px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 10px;
}

.session-new-badge-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 6px;
    padding-right: 6px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(204, 136, 0, 0.28);
    color: rgba(255, 255, 255, 0.62);
    font-size: 6px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 10px;
    margin-left: 6px;
}

.session-new-badge-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 6px;
    padding-right: 6px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(204, 136, 0, 0.28);
    color: rgba(255, 255, 255, 0.62);
    font-size: 6px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 10px;
    margin-bottom: 4px;
}

.sets-image-bg {
    /* Placa cristal cálida — unificado con tarjetas de sesión y record-shelf */
    position: relative;
    background-image: linear-gradient(180deg,
        rgba(32, 26, 20, 0.52) 0%,
        rgba(24, 19, 15, 0.62) 50%,
        rgba(26, 21, 17, 0.56) 100%);
    background-size: 100% 100%;
    background-position: 0 0;

    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);

    border-radius: 30px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 1px 0 0 rgba(255, 220, 190, 0.06) inset,
        inset 0 0 100px rgba(0, 0, 0, 0.3);
    will-change: transform;
    min-height: 520px !important; /* otras placas (records, about) mantienen altura */
    scroll-margin-top: 90px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

/* Placa de sesiones: efecto cristal con fondo más rico (eco cálido del panel superior) */
.sessions-plaque .sessions-plaque-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    /* Capas de color: profundidad + halo cálido */
    background:
        radial-gradient(140% 120% at 50% -10%, rgba(220, 160, 90, 0.16) 0%, rgba(220, 160, 90, 0) 55%),
        radial-gradient(120% 160% at 8% 110%, rgba(220, 140, 80, 0.22) 0%, rgba(220, 140, 80, 0) 60%),
        radial-gradient(120% 160% at 92% 110%, rgba(255, 210, 150, 0.14) 0%, rgba(255, 210, 150, 0) 60%),
        linear-gradient(180deg,
            rgba(18, 13, 9, 0.9) 0%,
            rgba(10, 7, 5, 0.92) 40%,
            rgba(6, 4, 3, 0.94) 100%),
        url('../img/cosmic_background.webp') center center / cover no-repeat;
    background-blend-mode: normal, normal, normal, normal, overlay;
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.65),
        0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
        inset 0 0 80px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.4s ease, backdrop-filter 0.4s ease, background 0.4s ease;
}
.sessions-plaque-bg::before,
.sessions-plaque-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.sessions-plaque-bg::before {
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(180deg,
        rgba(255, 242, 228, 0.05) 0%,
        transparent 22%,
        transparent 100%);
}
.sessions-plaque-bg::after {
    z-index: 2;
    border-radius: inherit;
    background: radial-gradient(120% 85% at 50% 0%, rgba(204, 136, 0, 0.09) 0%, rgba(204, 136, 0, 0) 72%);
}

/* Placa de sesiones: fondo transparente — la capa .sessions-plaque-bg dibuja la placa con su propia opacidad */
.sessions-plaque.sets-image-bg {
    background: transparent;
    min-height: 0 !important; /* altura según contenido, sin hueco vacío */
    border-radius: 30px;
    overflow: hidden;
    isolation: isolate;
    /* Fallback fino para que no se pierda la esquina inferior derecha */
    box-shadow: inset 0 0 0 1px rgba(255, 235, 215, 0.08);
}

/* Contenedor interior: sin padding abajo para que la lista llegue al borde del padre */
.sessions-plaque-inner {
    padding-bottom: 0 !important;
}

/* Título "Antología sonora" / "Sonic Anthology" más blanco */
.sessions-plaque-inner > h4 {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Brillo superior: oculto en sesiones (el bg está en .sessions-plaque-bg) */
.sessions-plaque.sets-image-bg::before {
    display: none;
}
/* Borde igual que shorts en placa de sesiones (#music) */
.sessions-plaque.sets-image-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 248, 238, 0.1) 0%,
        rgba(255, 235, 215, 0.06) 40%,
        rgba(204, 136, 0, 0.14) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 10;
}

/* Brillo superior: muy sutil y cálido (no blanco) — Antología sonora */
.sets-image-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg,
        rgba(255, 235, 210, 0.04) 0%,
        rgba(255, 225, 200, 0.03) 20%,
        transparent 45%,
        transparent 100%);
}

/* Borde: luz cálida suave arriba, ámbar abajo (sin blanco) */
.sets-image-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 238, 215, 0.08) 0%,
        rgba(255, 225, 195, 0.06) 30%,
        rgba(204, 136, 0, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 0;
}

/* Contenido por encima de los efectos de cristal */
.sets-image-bg > * {
    position: relative;
    z-index: 1;
}

/* ========== Lista de sesiones (sección #music) ========== */
.sessions-list-wrap {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 30px 30px;
}

@media (min-width: 768px) {
    .sessions-list-wrap {
        border-radius: 0 0 30px 30px;
    }
}

/* Desvanecido en bordes de la lista */
.sessions-list-wrap::before,
.sessions-list-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 32px;
    z-index: 2;
    pointer-events: none;
}
.sessions-list-wrap::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(28, 22, 18, 0.55) 0%, transparent 100%);
}
.sessions-list-wrap::after {
    bottom: 0;
    height: 52px;
    border-radius: 0 0 30px 30px;
    background: linear-gradient(to top, rgba(28, 22, 18, 0.82) 0%, rgba(28, 22, 18, 0.35) 50%, transparent 100%);
}

@media (min-width: 768px) {
    .sessions-list-wrap::after {
        border-radius: 0 0 30px 30px;
        height: 60px;
    }
}

.sessions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 320px;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 25px;
    margin: 0 -2px 0 0;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
    .sessions-list {
        min-height: 380px;
        max-height: 460px;
        gap: 8px;
        padding: 8px 14px 10px 10px;
    }
}

.sessions-list-item {
    flex-shrink: 0;
    min-height: 58px;
}

/* Scrollbar lista: visible y coherente con el tema */
.sessions-list::-webkit-scrollbar {
    width: 6px;
}

.sessions-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    margin: 10px 0;
}

.sessions-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(204, 136, 0, 0.45) 0%, rgba(204, 136, 0, 0.28) 100%);
    border-radius: 6px;
    min-height: 56px;
    transition: background 0.2s ease;
}

.sessions-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(204, 136, 0, 0.6) 0%, rgba(204, 136, 0, 0.45) 100%);
}

.sessions-list::-webkit-scrollbar-thumb:active {
    background: rgba(204, 136, 0, 0.55);
}

.sessions-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(204, 136, 0, 0.45) rgba(255, 255, 255, 0.06);
}

/* Bloque "Para ti": aparece tras dar like a alguna sesión */
.para-ti-wrap {
    margin: 7px 20px 1.25rem;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
@media (min-width: 768px) {
    .para-ti-wrap {
        margin-left: 14px;
        margin-right: 14px;
    }
}
.para-ti-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 0.875rem 0;
    padding: 0 4px;
    font-weight: 500;
    line-height: 1.4;
}
.para-ti-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 768px) {
    .para-ti-list {
        gap: 8px;
    }
}
/* Ítems recomendados: aspecto premium con borde dorado, placas visibles */
.para-ti-wrap .sessions-list-item {
    margin: 0;
   border: 1px solid rgba(212, 155, 60, 0.35);

background: linear-gradient(135deg,
    rgba(255, 250, 240, 0.18) 0%,
    rgba(255, 240, 215, 0.12) 35%,
    rgba(212, 155, 60, 0.08) 70%,
    rgba(120, 80, 20, 0.05) 100%);

box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.25),              /* profundidad real */
    0 0 0 1px rgba(255, 200, 120, 0.12),         /* halo dorado */
    0 0 40px rgba(212, 155, 60, 0.12),           /* glow ambiental */
    inset 0 1px 0 rgba(255, 240, 210, 0.25),     /* luz superior */
    inset 0 -1px 0 rgba(120, 80, 20, 0.15);      /* sombra interior sutil */
}
@media (hover: hover) {
    .para-ti-wrap .sessions-list-item:hover {
        border-color: rgba(204, 136, 0, 0.45);
        background: linear-gradient(135deg,
            rgba(255, 252, 248, 0.18) 0%,
            rgba(255, 248, 238, 0.13) 40%,
            rgba(204, 160, 80, 0.08) 100%);
        box-shadow: 0 4px 20px rgba(204, 136, 0, 0.14),
                    inset 0 1px 0 0 rgba(255, 235, 200, 0.12);
    }
}

.sessions-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.28s ease, box-shadow 0.28s ease, border-color 0.22s ease;
    background: linear-gradient(135deg,
        rgba(255, 244, 224, 0.18) 0%,
        rgba(255, 220, 170, 0.11) 48%,
        rgba(204, 136, 0, 0.09) 100%);
    border: 1px solid rgba(255, 226, 178, 0.24);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(204, 136, 0, 0.08),
                inset 0 1px 0 0 rgba(255, 242, 214, 0.14);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .sessions-list-item {
        padding: 16px 16px;
        gap: 14px;
        border-radius: 18px;
    }
}

/* Miniatura de portada en la lista de sesiones */
.sessions-list-item-thumb {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.sessions-list-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 768px) {
    .sessions-list-item-thumb {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        border-radius: 12px;
    }
}

/* Duración en la lista de sesiones — información secundaria consciente, no compite con el título */
.sessions-list-item-duration {
    flex-shrink: 0;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.32);
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}
.sessions-list-item.active .sessions-list-item-duration {
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.05);
}

/* Enlace externo (Bandcamp, SoundCloud, etc.) en la lista de sesiones */
.sessions-list-item-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
    .sessions-list-item-link:hover {
        color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.15);
    }
}
.sessions-list-item-link-svg {
    width: 14px;
    height: 14px;
}

.sessions-list-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 235, 200, 0.03) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s ease;
}

@media (hover: hover) {
    .sessions-list-item:hover {
        background: linear-gradient(135deg,
            rgba(255, 246, 228, 0.22) 0%,
            rgba(255, 225, 180, 0.15) 50%,
            rgba(204, 136, 0, 0.12) 100%);
        border-color: rgba(255, 226, 178, 0.34);
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24),
                    0 0 18px rgba(204, 136, 0, 0.16),
                    inset 0 1px 0 0 rgba(255, 244, 222, 0.2);
    }
    .sessions-list-item:hover::before {
        opacity: 1;
    }
}

.sessions-list-item.active {
    background: linear-gradient(135deg,
        rgba(255, 190, 95, 0.24) 0%,
        rgba(204, 136, 0, 0.15) 100%);
    border-color: rgba(255, 208, 142, 0.45);
    box-shadow: 0 8px 30px rgba(204, 136, 0, 0.26),
                0 0 24px rgba(204, 136, 0, 0.2),
                inset 0 1px 0 0 rgba(255, 246, 227, 0.2);
}

.sessions-list-item.active::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(255, 235, 200, 0.08) 0%, transparent 50%);
}

.sessions-list-item.playing {
    border-color: rgba(204, 136, 0, 0.35);
    box-shadow: 0 6px 32px rgba(204, 136, 0, 0.22),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.sessions-list-item-text {
    flex: 1;
    min-width: 0;
}

.sessions-list-item-title {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 248, 234, 0.98);
    line-height: 1.35;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}

.sessions-list-item-artist {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(244, 221, 190, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sessions-list-item-mood {
    flex-shrink: 0;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.48);
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-width: 92px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.sessions-list-item.active .sessions-list-item-mood {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

@media (min-width: 768px) {
    .sessions-list-item-mood {
        max-width: 124px;
        padding: 6px 12px;
    }
}

.sessions-list-item-play {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease;
    box-shadow: 0 0 0 0 rgba(204, 136, 0, 0);
}

@media (min-width: 768px) {
    .sessions-list-item-play {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
}

@media (hover: hover) {
    .sessions-list-item:hover .sessions-list-item-play {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 221, 168, 0.46);
        color: #fff;
        transform: translateY(-1px) scale(1.08);
        box-shadow:
            0 0 0 1px rgba(255, 220, 150, 0.16),
            0 0 16px rgba(204, 136, 0, 0.28),
            0 6px 16px rgba(0, 0, 0, 0.26);
    }
}

.sessions-list-item.active .sessions-list-item-play {
    background: rgba(204, 136, 0, 0.28);
    border-color: rgba(204, 136, 0, 0.32);
    color: rgba(255, 255, 255, 0.98);
}

.sessions-list-item.playing .sessions-list-item-play {
    background: rgba(204, 136, 0, 0.38);
    border-color: rgba(204, 136, 0, 0.38);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(204, 136, 0, 0.25);
    animation: sessions-play-pulse 2s ease-in-out infinite;
}

@keyframes sessions-play-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(204, 136, 0, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(204, 136, 0, 0); }
}

.sessions-list-item-play svg {
    width: 16px;
    height: 16px;
}

.sessions-list-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(204, 136, 0, 0.55);
    border-radius: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .sessions-list-item,
    .sessions-list-item::before,
    .sessions-list-item-play {
        transition-duration: 0.08s;
    }
    .sessions-list-item.playing .sessions-list-item-play {
        animation: none;
    }
}

/* Pequeño respiro entre lista y “Links externos” (por si el contenedor padre no da margen) */

/* #records: placa con el mismo estilo cristal que suscripción (sin imagen de fondo) */
#records .records-plaque-bg {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(34, 26, 18, 0.55) 0%,
        rgba(24, 18, 12, 0.7) 52%,
        rgba(26, 20, 14, 0.62) 100%);
    -webkit-filter: none;
    filter: none;
    transform: none;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 225, 180, 0.08) inset;
}
#records .records-plaque-bg::before,
#records .records-plaque-bg::after {
    display: none;
}

/* #records placa: fondo transparente — la capa .records-plaque-bg dibuja la placa */
#records .sets-image-bg {
    background: transparent;
}
#records .sets-image-bg::before {
    display: none;
}
/* Borde igual que shorts en panel de vinilos (#records) — rounded-3xl = 24px */
#records .sets-image-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 246, 232, 0.16) 0%,
        rgba(255, 230, 195, 0.12) 42%,
        rgba(204, 136, 0, 0.24) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 10;
}

/* About / Manifiesto: placa elegante con efecto cristal cálido */
#about {
    margin-top: 50px;
}
#about .sets-image-bg {
    background: transparent !important;
}

/* Placa About: mismo estilo cristal que suscripción (sin imagen de fondo) */
#about .about-plaque.subscribe-glass-card {
    max-width: none;
    margin: 0 !important;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
#about .about-plaque.subscribe-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    z-index: 0;
    pointer-events: none;
    /* Fondo cristal cálido similar a .subscribe-glass-card, sin foto */
    background: linear-gradient(180deg,
        rgba(28, 22, 16, 0.42) 0%,
        rgba(20, 16, 12, 0.58) 50%,
        rgba(22, 18, 14, 0.5) 100%);
    -webkit-filter: none;
    filter: none;
    transform: none;
}
/* About: borde igual que shorts (hereda .subscribe-glass-card::after) — no ocultar */

/* Móvil: placa about en página (no panel) — efecto cristal blur */
@media (max-width: 768px) {
    #about .about-plaque.subscribe-glass-card {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        isolation: isolate;
        background: linear-gradient(180deg,
            rgba(28, 22, 16, 0.32) 0%,
            rgba(20, 16, 12, 0.48) 50%,
            rgba(22, 18, 14, 0.4) 100%);
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.35),
            0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
            inset 0 0 80px rgba(0, 0, 0, 0.2);
    }
    #about .about-plaque.subscribe-glass-card::before {
        background: linear-gradient(180deg,
            rgba(24, 23, 23, 0.133) 0%,
            transparent 25%,
            transparent 100%);
    }
}

/* Safari iPhone: recorte de esquinas (bordes tipo shorts se mantienen visibles) */
@supports (-webkit-touch-callout: none) {
    /* Mantener visible el degradado de placas para legibilidad del texto */
    .sessions-plaque-bg::after,
    #records .records-plaque-bg::after,
    #about .about-plaque.subscribe-glass-card::after,
    .player-expanded-overlay .sessions-plaque-expanded .sessions-plaque-bg::after {
        opacity: 1 !important;
    }
    /* Recorta esquinas: Safari no siempre recorta backdrop-filter al border-radius */
    #about .about-plaque.subscribe-glass-card,
    .subscribe-glass-card {
        overflow: hidden !important;
        -webkit-clip-path: inset(0 round 30px) !important;
        clip-path: inset(0 round 30px) !important;
        border-radius: 30px !important;
    }
    #records .records-plaque-bg,
    .records-expanded-overlay .records-plaque-bg,
    .sessions-plaque-bg {
        overflow: hidden !important;
        -webkit-clip-path: inset(0 round 24px) !important;
        clip-path: inset(0 round 24px) !important;
        border-radius: 24px !important;
    }
    #records .sets-image-bg,
    .records-expanded-overlay .sets-image-bg {
        overflow: hidden !important;
        -webkit-clip-path: inset(0 round 24px) !important;
        clip-path: inset(0 round 24px) !important;
        border-radius: 24px !important;
    }
    #contact .record-shelf-card {
        overflow: hidden !important;
        -webkit-clip-path: inset(0 round 24px) !important;
        clip-path: inset(0 round 24px) !important;
        border-radius: 24px !important;
    }
}

/* Contacto: placa cristal clara, muy similar a suscripción */
#contact .record-shelf-card {
    position: relative;
    overflow: hidden;

    /* Fondo base más claro (como .subscribe-glass-card) */
    background: linear-gradient(180deg,
        rgba(28, 22, 16, 0.36) 0%,
        rgba(20, 16, 12, 0.5) 50%,
        rgba(22, 18, 14, 0.44) 100%);

    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);

    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
        inset 0 0 80px rgba(0, 0, 0, 0.2);
}
#contact .record-shelf-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    /* Brillo superior suave como en .subscribe-glass-card */
    background: linear-gradient(180deg,
        rgba(255, 242, 228, 0.05) 0%,
        transparent 22%,
        transparent 100%);
}
/* Contacto: borde igual que suscripción */
#contact .record-shelf-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 248, 238, 0.1) 0%,
        rgba(255, 235, 215, 0.06) 40%,
        rgba(204, 136, 0, 0.14) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 10;
}

@media (max-width: 768px) {
    .sets-image-bg {
    min-height: 450px !important;
    /* Altura de la tarjeta en móvil */
    scroll-margin-top: 80px !important;
    /* Freno un poco más arriba en móvil */
    }
    .sessions-plaque.sets-image-bg {
        min-height: 0 !important; /* placa de sesiones: altura según contenido */
    }
}

/* EN STYLES.CSS */
/* Reemplaza el bloque existente de @media (min-width: 1024px) por este: */

@media (min-width: 1024px) {

    /* 1. CONTENEDOR: altura ajustada al contenido, sin espacio vacío */
    #playlist-container {
        /* Centrado horizontal (Ajustado al nuevo ancho de tarjeta) */
        padding-left: calc(50% - 182px) !important;
        padding-right: calc(50% - 182px) !important;

        padding-top: 16px !important;
        padding-bottom: 16px !important;

        min-height: auto !important;

        gap: 40px !important;

        /* Asegurar que se puede hacer scroll */
        overflow-x: auto !important;
        
        /* Smooth Snap Scroll - управляется через JavaScript LiquidCarousel */
        scroll-snap-type: none !important;
        scroll-behavior: auto !important;
    }

    /* 2. TARJETAS: compactas, cristal — transición suave al clicar */
    .session-card {
        width: 364px !important;
        height: 550px !important;
        border-radius: 35px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        
        /* Smooth Snap Scroll - управляется через JS */
        scroll-snap-align: none !important;

        transform: scale(0.96) translateZ(0);
        opacity: 1;
        will-change: transform, opacity;
        transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1),
            opacity 0.5s ease,
            filter 0.5s ease,
            box-shadow 0.5s ease,
            background 0.5s ease;
    }

    /* 3. VINILO: Tamaño visible, sin reducir con scale */
    .card-vinyl-container {
        width: 228px !important;
        height: 228px !important;
        margin-top: 16px !important;

        opacity: 1 !important;
        transform: scale(1);
        will-change: transform, opacity;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* 4. TÍTULOS: Ajustamos el tamaño de fuente para equilibrar */
    .session-card h3 {
        font-size: 1.7rem !important;
        /* Antes 2rem */
    }

    /* Botón Escuchar en tarjetas de sesión: más compacto en PC */
    .session-card .session-card-listen-btn {
        padding: 5px 12px !important;
        gap: 5px !important;
        margin-top: 2px !important;
        background: rgba(255, 255, 255, 0.07) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
        transition: background-color 0.25s ease,
                    border-color 0.25s ease,
                    box-shadow 0.25s ease,
                    transform 0.25s ease !important;
    }
    .session-card .session-card-listen-btn-icon {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
        opacity: 0.9;
    }
    .session-card .session-card-listen-btn-text {
        font-size: 9px !important;
        letter-spacing: 0.15em !important;
        opacity: 0.92;
    }
    @media (hover: hover) {
        .session-card .session-card-listen-btn:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
            box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22) !important;
            transform: translateY(-1px) !important;
        }
    }
    .session-card .session-card-listen-btn:active {
        transform: translateY(0) !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    }

    /* 5. ESTADO ACTIVO */
    .session-card.active {
        opacity: 1 !important;
        transform: scale(1) translateZ(0) !important;
        z-index: 20;
        cursor: pointer;
    }

    .session-card.active .card-vinyl-container {
        width: 236px !important;
        height: 236px !important;
        opacity: 1;
        transform: scale(1);
        transition-delay: 0.05s;
    }

    /* 6. HOVER: solo con cursor real; en táctil no aplicar para evitar sticky hover al hacer scroll */
    @media (hover: hover) {
        .session-card:not(.active):hover {
            opacity: 1;
        }
    }
}

/* Hover al pasar el ratón por tarjetas (solo dispositivos con cursor) */
@media (hover: hover) {
    .session-card:not(.active):hover {
        opacity: 1;
        transform: scale(0.94);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25),
                    inset 0 0 40px rgba(255, 250, 242, 0.08);
        filter: brightness(1.15) saturate(1.02);
    }
    .session-card:not(.active):hover::after {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 252, 248, 0.05) 100%);
    }
}




/* =========================================
   FIX DEFINITIVO: TARJETA DE DISCOS (UNIFICADO)
   Mismo estilo placa cristal que .sets-image-bg
   ========================================= */

/* 1. ESTILO BASE — Placa cristal cálida (About/Manifiesto, unificado con .sets-image-bg) */
.record-shelf-card {
    position: relative;
    width: 100%;

    background-image: linear-gradient(180deg,
        rgba(32, 26, 20, 0.52) 0%,
        rgba(24, 19, 15, 0.62) 50%,
        rgba(26, 21, 17, 0.56) 100%);
    background-size: 100% 100%;
    background-position: 0 0;

    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);

    border-radius: 24px;
    padding: 24px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 1px 0 0 rgba(255, 220, 190, 0.06) inset,
        inset 0 0 100px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

/* Brillo superior: muy sutil y cálido (no blanco) */
.record-shelf-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(255, 235, 210, 0.04) 0%,
        rgba(255, 225, 200, 0.03) 20%,
        transparent 45%,
        transparent 100%);
}

/* Borde: luz cálida suave arriba, ámbar abajo (sin blanco) */
.record-shelf-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 238, 215, 0.08) 0%,
        rgba(255, 225, 195, 0.06) 30%,
        rgba(204, 136, 0, 0.2) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
}

/* Overlay tipo warm-gradient detrás del cristal para que se vea el efecto (Manifiesto) */
.record-shelf-card .about-card-overlay {
    z-index: 0;
}

/* Sección About: overlay desactivado (sin capa blanca) */
#about .about-card-overlay {
    opacity: 0 !important;
}

/* Manifiesto en móvil: más aire entre párrafos, ritmo de “caminar” */
@media (max-width: 767px) {
    .about-manifiesto p + p {
        margin-top: 1.5rem;
    }
}

.record-shelf-card > * {
    position: relative;
    z-index: 2;
}

/* 2. AJUSTES PARA PC (Escritorio) */
@media (min-width: 768px) {
    .record-shelf-card {
        padding: 40px;
        border-radius: 40px;
        box-shadow:
            0 10px 40px rgba(0, 0, 0, 0.4),
            0 1px 0 0 rgba(255, 220, 190, 0.06) inset,
            inset 0 0 100px rgba(0, 0, 0, 0.3);
    }
}

/* =========================================
   SUSCRIPCIÓN — Placa cristal (mismo estilo)
   ========================================= */
.subscribe-glass-card {
    position: relative;
    background: linear-gradient(180deg,
        rgba(28, 22, 16, 0.36) 0%,
        rgba(20, 16, 12, 0.5) 50%,
        rgba(22, 18, 14, 0.44) 100%);

    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);

    border-radius: 30px;
    padding: 40px 20px;
    max-width: 600px;
    margin: 60px auto;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
        inset 0 0 80px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

.subscribe-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg,
        rgba(255, 242, 228, 0.05) 0%,
        transparent 22%,
        transparent 100%);
}

.subscribe-glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 248, 238, 0.1) 0%,
        rgba(255, 235, 215, 0.06) 40%,
        rgba(204, 136, 0, 0.14) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 0;
}

.subscribe-glass-card {
    margin-left: auto !important;
    margin-right: auto !important;
}

.subscribe-glass-card > * {
    position: relative;
    z-index: 1;
}

.subscribe-glass-card:hover {
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(204, 136, 0, 0.08),
        0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
        inset 0 0 80px rgba(0, 0, 0, 0.2);
}

.glass-input {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border-radius: 50px !important;
}

.glass-input:focus {
    border-color: rgba(204, 136, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    outline: none;
}

@media (min-width: 768px) {
    .subscribe-glass-card {
        padding: 60px;
    }
    .about-expanded-overlay .subscribe-glass-card.about-plaque {
        padding: 1.25rem 1.5rem 1rem !important;
    }
}

/* --- PANEL EXPANDIDO DENTRO DEL REPRODUCTOR (tarjetas forman parte del player) --- */
/* Liquid glass: curva tipo spring (ligero rebote) para abrir/cerrar más fluido y animado */
:root {
    --player-expand-ease: cubic-bezier(0.34, 1.2, 0.64, 1);
    --player-expand-duration: 0.9s;
}
/* Placa más alta: menos margen arriba/abajo para que quepan las tarjetas */
.player-expanded-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    width: 100%;
    --player-expand-top-safe: calc(var(--navbar-height, 72px) + 52px);
    height: calc(100vh - var(--player-expand-top-safe) - 20px);
    max-height: calc(100vh - 65px);
    z-index: 1;
}
/* Móvil: panel de sesiones solo hasta la barrita de links (section-index); no invadir logo/idiomas */
@media (max-width: 767px) {
    .player-expanded-overlay {
        /* Margen superior fijo (navbar + section-index + reproductor). El panel no debe subir al logo/selector. */
        --panel-top-mobile: 240px;
        height: calc(100vh - var(--panel-top-mobile) + 30px);
        max-height: calc(100vh - var(--panel-top-mobile) + 30px);
        --player-expand-top-safe: var(--panel-top-mobile);
    }
}
.player-expanded-overlay {
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.95s;
}
.player-expanded-overlay.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}
/* Durante arrastre: overlay visible, contenido sin transición para seguir el dedo */
.player-expanded-overlay.is-dragging {
    pointer-events: auto;
    visibility: visible;
    transition: none;
}
.player-expanded-overlay.is-dragging .player-expanded-content {
    transition: none;
}
.player-expanded-overlay.is-dragging .player-expanded-backdrop {
    transition: none;
}
.player-expanded-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.85s var(--player-expand-ease);
    pointer-events: none;
}
.player-expanded-overlay.is-open .player-expanded-backdrop {
    opacity: 1;
    transition: opacity 0.75s var(--player-expand-ease);
    pointer-events: auto;
}
/* Panel: fondo opaco para que al abrir desde navbar (scroll abajo, reproductor escondido) se vea nítido, no semitransparente ni borroso */
.player-expanded-overlay .player-expanded-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 8px;
    padding-top: 0;
    background: linear-gradient(135deg,
        rgba(18, 14, 10, 0.98) 0%,
        rgba(22, 18, 14, 0.98) 50%,
        rgba(18, 14, 10, 0.98) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-bottom: none;
    border-radius: 25px;
    clip-path: inset(0 round 25px);
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.4);
    transform: translateY(100%) scale(0.97);
    opacity: 0;
    transition: transform var(--player-expand-duration) var(--player-expand-ease),
                opacity 0.75s var(--player-expand-ease),
                box-shadow 0.6s var(--player-expand-ease);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    touch-action: pan-x;
}
/* Borde tipo shorts: no en content (queda en la placa para que coincida) */
.player-expanded-overlay .player-expanded-content::after {
    display: none;
}
.player-expanded-overlay.is-open .player-expanded-content {
    transform: translateY(0) scale(1);
    opacity: 1;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}
/* Barra del reproductor (controles + progreso) por encima de la placa expandida y de la barrita */
#bottom-player > div.max-w-7xl {
    position: relative;
    z-index: 40;
}
/* PC: dejar espacio a la izquierda para la barrita de desplegar sesiones */
@media (min-width: 768px) {
    #bottom-player > div.max-w-7xl {
        margin-left: 72px;
    }
}
.player-expanded-handle {
    flex-shrink: 0;
    padding: 14px 0 20px;
    cursor: grab;
    touch-action: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
}
.player-expanded-handle:active {
    cursor: grabbing;
}
.player-expanded-handle-bar {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    display: block;
}
/* Etiqueta "Cerrar sesiones" en el handle del panel abierto */
.player-expanded-handle-label {
    display: none;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
    transition: color 0.2s ease;
}
.player-expanded-handle:hover .player-expanded-handle-label {
    color: rgba(255, 255, 255, 0.85);
}
.player-expanded-handle {
    flex-direction: column;
    gap: 0;
}
/* Barrita en la barra del reproductor (cerrado): desliza o clic para abrir */
.player-collapsed-handle-label {
    display: none;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
    transition: color 0.2s ease;
}
.player-collapsed-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 0 48px; /* Zona inferior invisible más grande para abrir con swipe arriba */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    touch-action: none;
    z-index: 30;
    transition: opacity 0.3s ease, background 0.25s ease, color 0.2s ease;
}
/* En móvil no queremos que al tocar/deslizar aparezca una franja blanca: anulamos el hover por defecto.
   El hover visible solo se aplica en desktop dentro del @media (min-width: 768px). */
@media (max-width: 767px) {
    .player-collapsed-handle:hover {
        background: transparent;
    }
}
/* Solo en dispositivos con cursor: evita hover "pegado" al pasar el dedo al hacer scroll en móvil */
@media (hover: hover) {
    .player-collapsed-handle:hover .player-expanded-handle-bar {
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 14px rgba(204, 136, 0, 0.35);
    }
}
.player-collapsed-handle:active {
    cursor: grabbing;
}
body.player-expanded-open .player-collapsed-handle {
    opacity: 0;
    pointer-events: none;
}

/* Pulso sutil en la barrita cuando el reproductor está cerrado (llama la atención) */
body:not(.player-expanded-open) .player-collapsed-handle .player-expanded-handle-bar {
    animation: player-handle-pulse 2.8s ease-in-out infinite;
}
/* Misma animación de pulso en la barrita de cerrar el panel (Antología sonora) */
.player-expanded-overlay.is-open .player-expanded-handle .player-expanded-handle-bar {
    animation: player-handle-pulse 2.8s ease-in-out infinite;
}
@keyframes player-handle-pulse {
    0%, 100% {
        transform: scaleX(1);
        background: rgba(255, 255, 255, 0.32);
        box-shadow: none;
    }
    50% {
        transform: scaleX(1.06);
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 8px rgba(204, 136, 0, 0.32);
    }
}

/* PC: barrita a la izquierda; texto "Sesiones" + hover muy visible = clic para abrir */
@media (min-width: 768px) {
    /* En desktop sí queremos hover visible en toda la barrita */
    .player-collapsed-handle {
        right: auto;
        width: 72px;
        bottom: 0;
        top: 0;
        padding: 12px 0 24px; /* Zona inferior invisible para swipe arriba (desktop ya tiene altura completa) */
        cursor: pointer;
        border-radius: 25px 0 0 25px;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        background: transparent;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }
    .player-collapsed-handle:hover {
        background: rgba(255, 255, 255, 0.12);
    }
    .player-collapsed-handle .player-expanded-handle-bar {
        width: 4px;
        height: 24px;
        border-radius: 2px;
    }
    .player-collapsed-handle-label {
        display: block;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(-180deg);
        margin: 0;
        font-size: 9px;
        letter-spacing: 0.25em;
    }
    .player-collapsed-handle:hover {
        background: rgba(255, 255, 255, 0.12);
        border-right-color: rgba(204, 136, 0, 0.2);
    }
    .player-collapsed-handle:hover .player-expanded-handle-bar {
        background: rgba(204, 136, 0, 0.65);
        box-shadow: 0 0 16px rgba(204, 136, 0, 0.4);
    }
    .player-collapsed-handle:hover .player-collapsed-handle-label {
        color: rgba(255, 255, 255, 0.9);
    }
    .player-expanded-handle-label {
        display: block;
    }
    .player-expanded-handle {
        padding: 12px 0 16px;
        cursor: pointer;
    }
    .player-expanded-handle:hover {
        background: rgba(255, 255, 255, 0.06);
    }
    .player-expanded-handle:hover .player-expanded-handle-bar {
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0 0 12px rgba(204, 136, 0, 0.3);
    }
}
.player-expanded-cards-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.player-expanded-overlay .sessions-plaque-expanded {
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    margin: 0;
    padding-top: 40px;
    overflow: hidden;
    clip-path: inherit;
    position: relative;
}
/* Borde tipo shorts sobre la placa (mismo tamaño que la placa, no sobresale) */
.player-expanded-overlay .sessions-plaque-expanded::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 248, 238, 0.1) 0%,
        rgba(255, 235, 215, 0.06) 40%,
        rgba(204, 136, 0, 0.14) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 10;
}
.player-expanded-overlay .sessions-plaque-expanded .sessions-plaque-inner {
    padding-top: 0.25rem !important;
    padding-bottom: 0.5rem !important;
}
.player-expanded-overlay .sessions-plaque-expanded h4 {
    font-size: 9px !important;
    letter-spacing: 0.25em !important;
    margin-bottom: 0.5rem !important;
}
/* Placa expandida: efecto cristal + textura cósmica muy sutil */
.player-expanded-overlay .sessions-plaque-expanded .sessions-plaque-bg {
    border-radius: inherit;
    top: 0;
    opacity: 1;
    background:
        linear-gradient(180deg,
            rgba(24, 18, 14, 0.72) 0%,
            rgba(16, 12, 10, 0.82) 50%,
            rgba(13, 10, 8, 0.78) 100%),
        url('../img/cosmic_background.webp') center center / cover no-repeat;
    background-blend-mode: normal, soft-light;
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
        inset 0 0 80px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
.player-expanded-overlay .sessions-plaque-expanded .sessions-plaque-bg::before {
    display: block;
    background: linear-gradient(180deg,
        rgba(255, 242, 228, 0.05) 0%,
        transparent 22%,
        transparent 100%);
}
.player-expanded-overlay .sessions-plaque-expanded .sessions-plaque-bg::after {
    display: block;
    background: radial-gradient(120% 85% at 50% 0%, rgba(204, 136, 0, 0.09) 0%, rgba(204, 136, 0, 0) 72%);
}
.player-expanded-overlay .player-expanded-cards-wrap {
    border-radius: inherit;
    overflow: hidden;
    clip-path: inherit;
}
.player-expanded-overlay .sessions-plaque-expanded .sessions-plaque-inner {
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.player-expanded-overlay .sessions-plaque-expanded #playlist-container {
    flex: 1;
    min-height: 0;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}
/* Panel de sesiones: primera tarjeta centrada (móvil: tarjeta 280px) */
.player-expanded-overlay #playlist-container {
    padding-left: max(24px, calc((100% - 240px) / 2));
}

/* Tarjetas de sesiones en overlay: versión estable y consistente */
.player-expanded-overlay .session-card {
    overflow: hidden;
    isolation: isolate;
    border: .5px solid rgba(255, 252, 248, 0.03);
    container-type: inline-size;
    container-name: session-card;
    padding: clamp(8px, 4.5cqw, 16px) !important;
}
.player-expanded-overlay .session-card::before,
.player-expanded-overlay .session-card::after {
    border-radius: inherit;
}
.player-expanded-overlay .session-card > *:first-child,
.player-expanded-overlay .session-card > *:first-child img {
    border-radius: inherit;
}

/* Tipografía y espaciados coherentes (sin saltos bruscos) */
.player-expanded-overlay .session-card h3 {
    font-size: clamp(0.72rem, 9cqw, 1.08rem) !important;
    line-height: 1.2 !important;
}
.player-expanded-overlay .session-card p {
    font-size: clamp(0.45rem, 4.1cqw, 0.62rem) !important;
    letter-spacing: 0.1em !important;
}
.player-expanded-overlay .session-card .tag-pill {
    font-size: clamp(0.38rem, 3.4cqw, 0.52rem) !important;
    padding: 0.18em 0.5em !important;
    letter-spacing: 0.08em !important;
}
.player-expanded-overlay .session-card .text-white\/60,
.player-expanded-overlay .session-card .energy-dots {
    font-size: clamp(0.42rem, 3.8cqw, 0.56rem) !important;
}
.player-expanded-overlay .session-card .session-card-footer {
    gap: clamp(2px, 1.8cqw, 8px) !important;
    padding-bottom: clamp(4px, 2.5cqw, 10px) !important;
}
.player-expanded-overlay .session-card .session-card-footer > div:first-child {
    gap: 2px !important;
}
.player-expanded-overlay .session-card .session-card-duration {
    margin-top: -1px !important;
    margin-bottom: -1px !important;
    line-height: 1.2 !important;
}
.player-expanded-overlay .session-card .energy-dots {
    margin-bottom: 8px !important;
}
.player-expanded-overlay .session-card .session-card-listen-btn,
.player-expanded-overlay .session-card .group {
    padding: clamp(2px, 2.1cqw, 8px) clamp(4px, 3.2cqw, 10px) !important;
    gap: clamp(2px, 1.4cqw, 5px) !important;
    font-size: clamp(0.42rem, 3.8cqw, 0.56rem) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
.player-expanded-overlay .session-card .session-card-listen-btn-icon,
.player-expanded-overlay .session-card .group i {
    width: clamp(8px, 5.6cqw, 13px) !important;
    height: clamp(8px, 5.6cqw, 13px) !important;
    min-width: clamp(8px, 5.6cqw, 13px) !important;
    min-height: clamp(8px, 5.6cqw, 13px) !important;
    opacity: 0.88;
}
.player-expanded-overlay .session-card .session-card-listen-btn-text {
    font-size: clamp(0.42rem, 3.8cqw, 0.56rem) !important;
    letter-spacing: 0.03em !important;
}
@media (hover: hover) {
    .player-expanded-overlay .session-card .session-card-listen-btn:hover {
        background: rgba(255, 255, 255, 0.09) !important;
        border-color: rgba(255, 255, 255, 0.16) !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
    }
}
.player-expanded-overlay .session-card-footer .h-\[50px\] {
    height: clamp(18px, 10cqw, 32px) !important;
    min-height: clamp(18px, 10cqw, 32px) !important;
}
.player-expanded-overlay .session-card .text-white\/40 {
    font-size: clamp(0.42rem, 3.6cqw, 0.54rem) !important;
}
/* Badge "Nuevo" en overlay: misma placa que shorts, escalada con el contenedor */
.player-expanded-overlay .session-card .session-new-badge {
    font-size: clamp(0.4rem, 3.2cqw, 0.5rem) !important;
    padding-top: clamp(3px, 1cqw, 5px) !important;
    padding-bottom: clamp(3px, 1cqw, 5px) !important;
    padding-left: clamp(4px, 2cqw, 8px) !important;
    padding-right: clamp(4px, 2cqw, 8px) !important;
    border-radius: 6px;
    margin-top: 3px !important;
}

/* Like: separado del borde y proporcional */
.player-expanded-overlay .session-card .like-btn {
    top: clamp(10px, 6.5cqw, 28px) !important;
    right: clamp(16px, 6.5cqw, 28px) !important;
    padding: clamp(2px, 1.3cqw, 5px) clamp(4px, 2.2cqw, 8px) !important;
}
.player-expanded-overlay .session-card .like-btn .like-icon {
    width: clamp(7px, 4.8cqw, 12px) !important;
    height: clamp(7px, 4.8cqw, 12px) !important;
}
.player-expanded-overlay .session-card .like-btn .like-count {
    font-size: clamp(0.42rem, 3.7cqw, 0.56rem) !important;
}

/* Disco responsive: más estable, sin hacerse microscópico */
.player-expanded-overlay .session-card .card-vinyl-container {
    width: 50% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    min-width: 72px !important;
    min-height: 72px !important;
    max-width: 160px !important;
    max-height: 160px !important;
    flex-shrink: 1 !important;
}
.player-expanded-overlay .session-card.active .card-vinyl-container {
    width: 58% !important;
    max-width: 188px !important;
    max-height: 188px !important;
}

/* Mobile */
@media (max-width: 767px) {
    .player-expanded-overlay .sessions-plaque-expanded {
        container-type: size;
        container-name: playlist-panel-mobile;
    }
    .player-expanded-overlay .session-card {
        width: min(240px, 86vw) !important;
        height: min(430px, 100%) !important;
        max-height: 100% !important;
    }
    .player-expanded-overlay .session-card.active {
        height: min(430px, 100%) !important;
        max-height: 100% !important;
    }
    /* Discos más grandes en móvil dentro del panel */
    .player-expanded-overlay .session-card .card-vinyl-container {
        min-width: 120px !important;
        min-height: 120px !important;
        max-width: 230px !important;
        max-height: 230px !important;
        width: 62% !important;
    }
    .player-expanded-overlay .session-card.active .card-vinyl-container {
        max-width: 248px !important;
        max-height: 248px !important;
        width: 70% !important;
    }
    @container playlist-panel-mobile (max-height: 420px) {
        .player-expanded-overlay .session-card {
            width: min(220px, 82vw) !important;
            height: min(370px, 100%) !important;
        }
    }
    @container playlist-panel-mobile (max-height: 360px) {
        .player-expanded-overlay .session-card {
            width: min(195px, 78vw) !important;
            height: min(320px, 100%) !important;
        }
        .player-expanded-overlay .session-card .session-card-listen-btn-text {
            display: none !important;
        }
        .player-expanded-overlay .session-card .session-card-listen-btn {
            padding: 4px !important;
        }
    }
}

/* Desktop */
@media (min-width: 768px) {
    .player-expanded-overlay .sessions-plaque-expanded {
        container-type: size;
        container-name: playlist-panel;
    }
    .player-expanded-overlay .session-card {
        width: 185px !important;
        height: min(300px, 100%) !important;
        max-height: 100% !important;
        transform: scale(0.92);
        border-radius: 18px !important;
        clip-path: inset(0 round 18px);
        flex-shrink: 0 !important;
    }
    .player-expanded-overlay .session-card.active {
        transform: scale(1) !important;
        width: 205px !important;
        height: min(325px, 100%) !important;
        max-height: 100% !important;
        clip-path: inset(0 round 18px);
    }
    @container playlist-panel (max-height: 320px) {
        .player-expanded-overlay .session-card {
            height: min(280px, 100%) !important;
        }
        .player-expanded-overlay .session-card.active {
            height: min(300px, 100%) !important;
        }
    }
    @container playlist-panel (max-height: 260px) {
        .player-expanded-overlay .session-card {
            width: 160px !important;
            height: min(235px, 100%) !important;
        }
        .player-expanded-overlay .session-card.active {
            width: 178px !important;
            height: min(255px, 100%) !important;
        }
        .player-expanded-overlay .session-card .session-card-listen-btn-text {
            display: none !important;
        }
        .player-expanded-overlay .session-card .session-card-listen-btn {
            padding: 4px !important;
        }
    }
    .player-expanded-overlay .session-card::before,
    .player-expanded-overlay .session-card::after {
        border-radius: 18px;
    }
    .player-expanded-overlay .session-card > *:first-child,
    .player-expanded-overlay .session-card > *:first-child img {
        border-radius: 18px !important;
    }
    .player-expanded-overlay #playlist-container {
        gap: 14px !important;
        padding-left: max(20px, calc((100% - 205px) / 2)) !important;
        padding-right: max(20px, calc((100% - 205px) / 2)) !important;
        align-items: center !important;
    }
}

body.player-expanded-open {
    overflow: hidden;
    /* Evitar arrastre/rebote de la página en iOS al hacer swipe en el panel */
    overscroll-behavior: none;
}
/* Panel abierto: blur en TODOS los elementos hijos del body excepto navbar, section-index, reproductor y panel */
body.player-expanded-open > *:not(#navbar):not(#section-index):not(#bottom-player):not(#player-expanded-overlay):not(#floating-whatsapp):not(#btnSubir):not(#cookie-banner):not(#privacy-modal):not(#entry-ritual) {
    -webkit-filter: brightness(1) blur(10px);
    filter: brightness(1) blur(10px);
    transition: -webkit-filter 0.7s var(--player-expand-ease), filter 0.7s var(--player-expand-ease);
}
/* Panel abierto: navbar sin blur (logo y enlaces visibles) */
body.player-expanded-open #navbar {
    z-index: 110;
    -webkit-filter: none !important;
    filter: none !important;
}
/* Panel abierto: section-index sin blur */
body.player-expanded-open #section-index {
    -webkit-filter: none !important;
    filter: none !important;
}
/* Panel abierto: reproductor sin blur (nítido) */
body.player-expanded-open #bottom-player {
    z-index: 105;
    -webkit-filter: none !important;
    filter: none !important;
}
/* Panel abierto: el panel de sesiones sin blur */
body.player-expanded-open #player-expanded-overlay {
    -webkit-filter: none !important;
    filter: none !important;
}

/* ========================================== */
/* PANEL DE VISIÓN (ABOUT) — igual que contact/records */
/* ========================================== */
.about-expanded-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.95s;
}
.about-expanded-overlay.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}
.about-expanded-overlay.is-dragging {
    pointer-events: auto;
    visibility: visible;
    transition: none;
}
.about-expanded-overlay.is-dragging .about-expanded-content {
    transition: none;
}
.about-expanded-overlay.is-dragging .about-expanded-backdrop {
    transition: none;
}
.about-expanded-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.85s var(--player-expand-ease);
    pointer-events: none;
}
.about-expanded-overlay.is-open .about-expanded-backdrop {
    opacity: 1;
    transition: opacity 0.75s var(--player-expand-ease);
    pointer-events: auto;
}
/* Panel único: mismo diseño para Visión, Contacto, Selección (cristal + blur) */
.about-expanded-overlay .about-expanded-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(85vh, 680px);
    max-height: calc(100vh - 80px);
    padding-top: 0;
    filter: none;
    background: linear-gradient(160deg,
        rgba(32, 24, 18, 0.55) 0%,
        rgba(38, 28, 20, 0.6) 45%,
        rgba(30, 22, 16, 0.58) 100%);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-radius: 25px 25px 0 0;
    clip-path: inset(0 round 25px 25px 0 0);
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.35), inset 0 0 120px rgba(204, 136, 0, 0.04);
    transform: translateY(100%) scale(0.97);
    opacity: 0;
    transition: transform var(--player-expand-duration) var(--player-expand-ease),
                opacity 0.75s var(--player-expand-ease);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    touch-action: pan-x;
}
.about-expanded-overlay.is-open .about-expanded-content {
    transform: translateY(0) scale(1);
    opacity: 1;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}
.about-expanded-handle {
    flex-shrink: 0;
    padding: 14px 0 20px;
    cursor: grab;
    touch-action: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.about-expanded-handle-bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 235, 220, 0.4);
}
.about-expanded-handle:hover .about-expanded-handle-bar {
    background: rgba(255, 245, 230, 0.55);
}
.about-expanded-handle-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 235, 220, 0.65);
}
.about-expanded-handle:hover .about-expanded-handle-label {
    color: rgba(255, 248, 238, 0.85);
}
.about-panel-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.5rem;
    line-height: 1.2;
    color: rgba(255, 250, 242, 0.98);
    text-align: center;
    margin: 0 0 1rem 0;
    padding: 0;
    letter-spacing: -0.02em;
}
.about-expanded-inner {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 1.5rem 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
}
.about-expanded-overlay .about-expanded-inner > * {
    width: 100%;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-60px) !important;
}
.about-expanded-overlay .reveal-right,
.about-expanded-overlay .reveal-left {
    transform: none;
    opacity: 1;
    filter: none;
    transition: none;
}
body.about-panel-open {
    overflow: hidden;
    overscroll-behavior: none;
}
body.about-panel-open .site-content {
    filter: brightness(1) blur(10px);
    transition: filter 0.7s var(--player-expand-ease);
}
body.about-panel-open #navbar {
    z-index: 210;
}
/* Panel about: placa cristal luminosa y cálida (sin imagen de fondo) */
.about-expanded-overlay .about-plaque {
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 0 40px rgba(255, 250, 242, 0.05);
    border-radius: 25px;
    width: 100%;
    min-height: 500px;
}
.about-expanded-overlay .about-plaque::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(28, 22, 16, 0.72) 0%,
        rgba(24, 18, 14, 0.68) 35%,
        rgba(22, 17, 12, 0.65) 60%,
        rgba(20, 16, 12, 0.6) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-filter: none;
    filter: none;
    transform: none;
}
.about-expanded-overlay .about-plaque::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(120% 85% at 50% 0%, rgba(204, 136, 0, 0.08) 0%, rgba(204, 136, 0, 0) 65%);
}
.about-expanded-overlay .about-plaque .max-w-6xl.grid {
    display: block;
}
.about-expanded-overlay .about-plaque [class*="col-span-7"] {
    max-width: 100%;
    padding-left: 0;
    margin: 0 !important;
}
.about-expanded-overlay .about-plaque > * {
    position: relative;
    z-index: 1;
}
/* Misma altura que records y contact */
.about-expanded-overlay .about-expanded-content {
    height: min(85vh, 680px);
    max-height: calc(100vh - 80px);
}
.about-expanded-overlay .about-manifiesto {
    margin-bottom: 0;
}
.about-expanded-overlay .about-plaque .space-y-6 {
    gap: 0.5rem;
}
.about-expanded-overlay .about-plaque .space-y-8 {
    gap: 0.75rem;
}
.about-expanded-overlay .about-plaque .grid.grid-cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0;
    padding-top: 0.25rem;
    padding-bottom: 3.5rem !important;
}
.about-expanded-overlay .about-plaque .grid.grid-cols-2 .font-serif {
    font-size: 1.25rem;
}
/* Placa con más espacio abajo, se estira para llenar el panel */
.about-expanded-overlay .subscribe-glass-card.about-plaque {
    padding: 1.25rem 1.5rem 1.5rem !important;
}
.about-expanded-overlay .about-plaque h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 0;
}
.about-expanded-overlay .about-plaque [class*="col-span-7"] > div:first-child {
    margin-bottom: 0.5rem;
}
.about-expanded-overlay .about-plaque [class*="col-span-7"] > div:first-child span {
    margin-bottom: 0.25rem;
}
.about-expanded-overlay .about-plaque .about-manifiesto {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 246, 236, 0.82);
}
.about-expanded-overlay .about-plaque .about-manifiesto p {
    margin-bottom: 0.5rem;
}
.about-expanded-overlay .about-plaque [class*="col-span-7"] > div:first-child span {
    color: rgba(255, 242, 226, 0.78) !important;
}
.about-expanded-overlay .about-plaque h2 {
    color: rgba(255, 252, 246, 0.96);
}
.about-expanded-overlay .about-plaque h2 span {
    color: rgba(255, 244, 232, 0.76) !important;
}
.about-expanded-overlay .about-plaque .grid.grid-cols-2 .font-serif {
    line-height: 1.15;
    color: rgba(255, 252, 246, 0.96);
}

/* ========================================== */
/* PANEL DE CONTACTO — igual que records/sesiones */
/* ========================================== */
.contact-expanded-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.95s;
}
.contact-expanded-overlay.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}
.contact-expanded-overlay.is-dragging {
    pointer-events: auto;
    visibility: visible;
    transition: none;
}
.contact-expanded-overlay.is-dragging .contact-expanded-content {
    transition: none;
}
.contact-expanded-overlay.is-dragging .contact-expanded-backdrop {
    transition: none;
}
.contact-expanded-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.85s var(--player-expand-ease);
    pointer-events: none;
}
.contact-expanded-overlay.is-open .contact-expanded-backdrop {
    opacity: 1;
    transition: opacity 0.75s var(--player-expand-ease);
    pointer-events: auto;
}
.contact-expanded-overlay {
    filter: none;
}
/* Mismo diseño que about/records (panel único) */
.contact-expanded-overlay .contact-expanded-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(85vh, 680px);
    max-height: calc(100vh - 80px);
    padding-top: 0;
    filter: none;
    background: linear-gradient(165deg,
        rgba(22, 16, 12, 0.88) 0%,
        rgba(26, 20, 14, 0.86) 40%,
        rgba(24, 18, 12, 0.84) 70%,
        rgba(20, 15, 10, 0.82) 100%);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-radius: 25px 25px 0 0;
    clip-path: inset(0 round 25px 25px 0 0);
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.35), inset 0 0 120px rgba(204, 136, 0, 0.06), inset 0 -80px 80px -40px rgba(204, 140, 40, 0.04);
    transform: translateY(100%) scale(0.97);
    opacity: 0;
    transition: transform var(--player-expand-duration) var(--player-expand-ease),
                opacity 0.75s var(--player-expand-ease);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    touch-action: pan-x;
}
.contact-expanded-overlay.is-open .contact-expanded-content {
    transform: translateY(0) scale(1);
    opacity: 1;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}
.contact-expanded-handle {
    flex-shrink: 0;
    padding: 14px 0 20px;
    cursor: grab;
    touch-action: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.contact-expanded-handle-bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 235, 220, 0.4);
}
.contact-expanded-handle:hover .contact-expanded-handle-bar {
    background: rgba(255, 245, 230, 0.55);
}
.contact-expanded-handle-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 235, 220, 0.65);
}
.contact-expanded-handle:hover .contact-expanded-handle-label {
    color: rgba(255, 248, 238, 0.85);
}
.contact-panel-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.5rem;
    line-height: 1.2;
    color: rgba(255, 250, 242, 0.98);
    text-align: center;
    margin: 0 0 1rem 0;
    padding: 0;
    letter-spacing: -0.02em;
}
.contact-expanded-inner {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.5rem 2rem 1.5rem;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: none !important;
}
.contact-expanded-inner * {
    filter: none !important;
}
/* Contenedor clonado desde #contact: centrado horizontal y ancho limitado */
.contact-expanded-overlay .contact-expanded-inner > * {
    width: 100%;
    max-width: 56rem;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}
body.contact-panel-open {
    overflow: hidden;
    overscroll-behavior: none;
}
body.contact-panel-open .site-content {
    filter: brightness(1) blur(10px);
    transition: filter 0.7s var(--player-expand-ease);
}
body.contact-panel-open #navbar {
    z-index: 210;
}

/* Panel contacto: placa cristal luminosa y cálida */
.contact-expanded-overlay .record-shelf-card {
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 0 40px rgba(255, 250, 242, 0.05),
        0 0 40px rgba(204, 136, 0, 0.08);
    margin-bottom: 30px;
    padding: 24px;
    min-height: 200px;
}
.contact-expanded-overlay .record-shelf-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(48, 44, 40, 0.48) 0%,
        rgba(52, 48, 44, 0.42) 50%,
        rgba(65, 60, 55, 0.35) 75%,
        rgba(80, 72, 65, 0.28) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-filter: none;
    filter: none;
    transform: none;
}
.contact-expanded-overlay .record-shelf-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 248, 238, 0.12) 0%,
        rgba(255, 235, 215, 0.08) 40%,
        rgba(204, 136, 0, 0.18) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 10;
}
/* Texto legible en la placa del panel de contacto */
.contact-expanded-overlay .record-shelf-card h3,
.contact-expanded-overlay .record-shelf-card .font-serif {
    color: rgba(255, 250, 242, 0.98) !important;
    text-shadow: 0 0 24px rgba(204, 136, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.contact-expanded-overlay .record-shelf-card p,
.contact-expanded-overlay .record-shelf-card .contact-intro-subtitle {
    color: rgba(255, 242, 228, 0.92) !important;
}
.contact-expanded-overlay .contact-expanded-inner {
    color: rgba(255, 245, 232, 0.95);
}
.contact-expanded-overlay .contact-expanded-inner a:not(.contact-cta-btn) {
    color: rgba(255, 235, 215, 0.9);
}
.contact-expanded-overlay .contact-expanded-inner a:not(.contact-cta-btn):hover {
    color: rgba(255, 250, 242, 1);
}
.contact-expanded-overlay .contact-expanded-inner .text-brand-text\/40,
.contact-expanded-overlay .contact-expanded-inner [class*="text-brand-text"] {
    color: rgba(255, 235, 215, 0.75) !important;
}
.contact-expanded-overlay .contact-cta-btn,
.contact-expanded-overlay .contact-cta-btn span {
    color: rgba(255, 250, 242, 0.98) !important;
}
.contact-expanded-overlay .record-shelf-card.reveal-right {
    transform: none;
    opacity: 1;
}
.contact-expanded-overlay .contact-cta-btn {
    transform: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}
.contact-expanded-overlay .contact-cta-btn-primary {
    background-color: rgba(255, 255, 255, 0.17) !important;
    box-shadow: 0 0 24px rgba(230, 160, 32, 0.12);
}


/* ========================================== */
/* PANEL DE SELECCIÓN (RECORDS) — igual que sesiones */
/* ========================================== */
.records-expanded-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 0.95s;
}
.records-expanded-overlay.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
}
.records-expanded-overlay.is-dragging {
    pointer-events: auto;
    visibility: visible;
    transition: none;
}
.records-expanded-overlay.is-dragging .records-expanded-content {
    transition: none;
}
.records-expanded-overlay.is-dragging .records-expanded-backdrop {
    transition: none;
}
.records-expanded-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.85s var(--player-expand-ease);
    pointer-events: none;
}
.records-expanded-overlay.is-open .records-expanded-backdrop {
    opacity: 1;
    transition: opacity 0.75s var(--player-expand-ease);
    pointer-events: auto;
}
/* Mismo diseño que about/contact (panel único) */
.records-expanded-overlay .records-expanded-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(85vh, 680px);
    max-height: calc(100vh - 80px);
    padding-top: 0;
    filter: none;
    background: linear-gradient(165deg,
        rgba(22, 16, 12, 0.88) 0%,
        rgba(26, 20, 14, 0.86) 40%,
        rgba(24, 18, 12, 0.84) 70%,
        rgba(20, 15, 10, 0.82) 100%);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-radius: 25px 25px 0 0;
    clip-path: inset(0 round 25px 25px 0 0);
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.35), inset 0 0 120px rgba(204, 136, 0, 0.06), inset 0 -80px 80px -40px rgba(204, 140, 40, 0.04);
    transform: translateY(100%) scale(0.97);
    opacity: 0;
    transition: transform var(--player-expand-duration) var(--player-expand-ease),
                opacity 0.75s var(--player-expand-ease);
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    touch-action: pan-x;
}
.records-expanded-overlay.is-open .records-expanded-content {
    transform: translateY(0) scale(1);
    opacity: 1;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}

/* Paneles navbar: textura cálida + gradiente ámbar sutil (estilo web) */
.about-expanded-overlay .about-expanded-content::before,
.contact-expanded-overlay .contact-expanded-content::before,
.records-expanded-overlay .records-expanded-content::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    opacity: 0.28;
    background:
        linear-gradient(180deg, rgba(18, 12, 8, 0.25) 0%, rgba(14, 10, 6, 0.4) 50%, rgba(12, 8, 5, 0.35) 100%),
        url('../img/section-plate-warm.png') center / cover no-repeat;
    -webkit-filter: blur(4px) saturate(120%);
    filter: blur(4px) saturate(120%);
    transform: scale(1.05);
}
.about-expanded-overlay .about-expanded-content::after,
.contact-expanded-overlay .contact-expanded-content::after,
.records-expanded-overlay .records-expanded-content::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(120% 90% at 50% 0%, rgba(204, 136, 0, 0.07) 0%, transparent 55%);
}

.about-expanded-overlay .about-expanded-content > *,
.contact-expanded-overlay .contact-expanded-content > *,
.records-expanded-overlay .records-expanded-content > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .about-expanded-overlay .about-expanded-content::before,
    .contact-expanded-overlay .contact-expanded-content::before,
    .records-expanded-overlay .records-expanded-content::before {
        opacity: 0.24;
        -webkit-filter: blur(4px) saturate(118%);
        filter: blur(4px) saturate(118%);
    }
}

.records-expanded-handle {
    flex-shrink: 0;
    padding: 14px 0 20px;
    cursor: grab;
    touch-action: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 10;
}
.records-expanded-handle:active {
    cursor: grabbing;
}
.records-expanded-handle-bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 235, 220, 0.4);
}
.records-expanded-handle:hover .records-expanded-handle-bar {
    background: rgba(255, 245, 230, 0.55);
}
.records-expanded-handle-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 235, 220, 0.65);
}
.records-expanded-handle:hover .records-expanded-handle-label {
    color: rgba(255, 248, 238, 0.85);
}
.records-panel-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.5rem;
    line-height: 1.2;
    color: rgba(255, 250, 242, 0.98);
    text-align: center;
    margin: 0 0 1rem 0;
    padding: 0;
    letter-spacing: -0.02em;
}
.records-expanded-inner {
    flex: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 0 1.5rem 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 0;
}
.records-expanded-overlay .records-expanded-inner > * {
    width: 100%;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}
.records-expanded-overlay .records-expanded-inner > *:first-child {
    flex-shrink: 1;
    min-height: 0;
}
/* En el panel: ancho del ítem menor para que se vea un asomo del siguiente disco */
.records-expanded-overlay .records-expanded-inner .records-carousel__item {
    width: min(260px, 72vw);
}
.records-expanded-overlay .records-expanded-inner .records-carousel {
    padding-left: 1rem;
    padding-right: 1rem;
    /* Peek: que el primer disco no ocupe todo para insinuar que hay más */
    scroll-padding-inline: 1rem;
}
.records-expanded-overlay .records-expanded-inner .records-disc-caption {
    margin-top: 0 !important;
}
/* Hint en el panel: "Desliza para ver más" */
.records-panel-swipe-hint {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 235, 220, 0.5);
    text-align: center;
    margin: -0.5rem 0 0.75rem 0;
    padding: 0;
}
.records-panel-swipe-hint .records-panel-swipe-hint-en { display: none; }
.records-panel-swipe-hint .records-panel-swipe-hint-es { display: inline; }
html[lang="en"] .records-panel-swipe-hint .records-panel-swipe-hint-en { display: inline; }
html[lang="en"] .records-panel-swipe-hint .records-panel-swipe-hint-es { display: none; }
/* Placa de records en panel: más compacta para que quepa */
.records-expanded-overlay .records-expanded-inner .w-full.relative.group {
    transform: scale(0.9);
    transform-origin: center top;
}
.records-expanded-overlay .records-expanded-inner > *:last-child {
    margin-top: 5px;
    margin-bottom: 1rem;
}

/* Ajustes responsive de paneles abiertos desde navbar (móvil) */
@media (max-width: 767px) {
    .about-expanded-overlay .about-expanded-content,
    .contact-expanded-overlay .contact-expanded-content,
    .records-expanded-overlay .records-expanded-content {
        height: min(88dvh, calc(100dvh - 64px));
        max-height: calc(100dvh - 64px);
        border-radius: 22px 22px 0 0;
        clip-path: inset(0 round 22px 22px 0 0);
        box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.35);
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    /* Panel Visión: más alto en móvil para que quepa el manifiesto y se pueda hacer scroll */
    .about-expanded-overlay .about-expanded-content {
        height: min(94dvh, calc(100dvh - 48px));
        max-height: calc(100dvh - 48px);
    }

    .about-expanded-overlay .about-expanded-inner,
    .contact-expanded-overlay .contact-expanded-inner,
    .records-expanded-overlay .records-expanded-inner {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }

    /* Evita que el clon de Visión quede "subido" y se salga del panel */
    .about-expanded-overlay .about-expanded-inner > * {
        transform: none !important;
        max-width: 100%;
        flex-shrink: 0; /* que la placa no se comprima y el texto quepa; el scroll va en .about-expanded-inner */
    }

    .about-expanded-overlay .about-plaque {
        min-height: auto;
        border-radius: 22px;
    }
    /* Visión móvil: повышаем контраст, убираем эффект "текст за дымкой" */
    .about-expanded-overlay .about-plaque::before {
        background: linear-gradient(180deg,
            rgba(22, 16, 12, 0.94) 0%,
            rgba(18, 13, 10, 0.92) 45%,
            rgba(14, 10, 8, 0.9) 100%);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .about-expanded-overlay .about-plaque::after {
        opacity: 0.5;
    }
    .about-expanded-overlay .about-plaque [class*="col-span-7"],
    .about-expanded-overlay .about-plaque .grid.grid-cols-2 {
        position: relative;
        z-index: 2;
    }

    /* Manifiesto en panel Visión (móvil): texto más compacto para que quepa y se lea bien al hacer scroll */
    .about-expanded-overlay .about-plaque .about-manifiesto {
        font-size: 0.8125rem;
        line-height: 1.55;
        color: rgba(255, 248, 238, 0.9) !important;
    }
    .about-expanded-overlay .about-plaque .about-manifiesto p {
        margin-bottom: 0.4rem;
        opacity: 1 !important;
    }
    .about-expanded-overlay .about-plaque h2 {
        color: rgba(255, 252, 246, 0.98) !important;
    }
    .about-expanded-overlay .about-plaque h2 span {
        color: rgba(255, 245, 234, 0.84) !important;
    }
    .about-expanded-overlay .about-plaque [class*="col-span-7"] > div:first-child > span {
        color: rgba(255, 242, 226, 0.86) !important;
    }

    .about-expanded-overlay .subscribe-glass-card.about-plaque {
        padding: 1rem 1rem 1.25rem !important;
    }

    .about-expanded-overlay .about-plaque h2 {
        font-size: 1.3rem;
    }

    .about-expanded-overlay .about-plaque .grid.grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding-bottom: 1.5rem !important;
    }
    .about-expanded-overlay .about-plaque .grid.grid-cols-2 .font-serif {
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .contact-expanded-overlay .record-shelf-card {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 20px;
    }

    .contact-expanded-overlay .contact-expanded-inner .mb-8.md\:mb-12.grid {
        gap: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .contact-expanded-overlay .contact-cta-btn {
        width: 100%;
        min-height: 70px;
        border-radius: 20px;
        padding: 0.9rem 1rem !important;
    }

    .records-expanded-overlay .records-expanded-content {
        overflow-y: auto;
    }

    .records-expanded-overlay .records-expanded-inner {
        overflow-y: auto;
    }

    .records-expanded-overlay .records-expanded-inner .records-carousel {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
        gap: 0.8rem;
        scroll-padding-inline: 0.35rem;
    }

    .records-expanded-overlay .records-expanded-inner .records-carousel__item {
        width: clamp(190px, 72vw, 250px);
    }

    .records-expanded-overlay .records-expanded-inner .records-disc-caption p {
        overflow-wrap: anywhere;
    }
}

/* Visión en móvil/tablet: estabilizar layout del contenido clonado */
@media (max-width: 1023px) {
    .about-expanded-overlay .about-plaque {
        display: block !important;
    }

    .about-expanded-overlay .about-plaque [class*="col-span-7"] {
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        padding-left: 0 !important;
    }

    .about-expanded-overlay .about-expanded-inner > * {
        transform: none !important;
    }

    .about-expanded-overlay .about-expanded-inner {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }
}

/* Paneles sin scroll interno (Contact y Records; Visión tiene scroll en móvil) */
.contact-expanded-overlay .contact-expanded-content,
.records-expanded-overlay .records-expanded-content,
.contact-expanded-overlay .contact-expanded-inner,
.records-expanded-overlay .records-expanded-inner {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto;
}
.about-expanded-overlay .about-expanded-content,
.about-expanded-overlay .about-expanded-inner {
    overflow-x: hidden !important;
}

/* Móvil: panel Visión con scroll para que quepa todo el texto */
@media (max-width: 767px) {
    .about-expanded-overlay .about-expanded-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .about-expanded-overlay .about-expanded-inner {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
    }
}

/* Ajuste extra para escritorio: placa más compacta y menos alta */
@media (min-width: 1024px) {
    .records-expanded-overlay .records-expanded-content {
        /* Panel un poco más alto y separado del borde inferior */
        bottom: 24px;
        height: min(80vh, 640px);
    }

    .records-expanded-overlay .records-expanded-inner {
        padding-bottom: 1.5rem;
        /* En escritorio permitimos scroll interno para que texto nunca quede cortado */
        overflow-y: auto;
    }

    .records-expanded-overlay .records-expanded-inner .w-full.relative.group {
        transform: scale(0.82);
    }
}
body.records-panel-open {
    overflow: hidden;
    overscroll-behavior: none;
}
body.records-panel-open .site-content {
    filter: brightness(1) blur(10px);
    transition: filter 0.7s var(--player-expand-ease);
}
body.records-panel-open #navbar {
    z-index: 210;
}

/* Panel records: placa cristal cálida (gradiente estilo web + toque ámbar) */
.records-expanded-overlay .records-plaque-bg {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(28, 22, 16, 0.7) 0%,
        rgba(24, 18, 14, 0.66) 40%,
        rgba(22, 17, 12, 0.62) 75%,
        rgba(20, 16, 12, 0.58) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-filter: none;
    filter: none;
    transform: none;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.25),
        inset 0 0 40px rgba(255, 250, 242, 0.05),
        inset 0 -60px 60px -30px rgba(204, 136, 0, 0.04);
}
.records-expanded-overlay .records-plaque-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(110% 80% at 50% 0%, rgba(204, 136, 0, 0.06) 0%, transparent 60%);
    pointer-events: none;
}
.records-expanded-overlay .records-plaque-bg::after {
    display: none;
}
.records-expanded-overlay .sets-image-bg {
    background: transparent;
    /* En el panel expandido, la placa no necesita min-height fija
       y reducimos padding vertical para que no sobrepase el texto */
    min-height: auto !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
.records-expanded-overlay .sets-image-bg::before {
    display: none;
}
.records-expanded-overlay .sets-image-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 248, 238, 0.1) 0%,
        rgba(255, 235, 215, 0.06) 40%,
        rgba(204, 136, 0, 0.14) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 10;
}

/* --- FONDO IMAGEN EN PLAYER (FOOTER) - MEJORADO --- */
#bottom-player {
    /* 1. Gradiente mejorado con más profundidad */
    background: linear-gradient(135deg, 
        rgba(5, 5, 5, 0.85) 0%,
        rgba(10, 8, 6, 0.9) 50%,
        rgba(5, 5, 5, 0.85) 100%) !important;

    /* 2. EL FIX PARA SAFARI:
       Safari necesita '-webkit-backdrop-filter'.
       Además, añadimos 'saturate(180%)' para darle ese toque "cristal premium" de iOS */
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;

    /* 3. Bordes y Sombras (usan variables para pulso al ritmo de la música) */
    border: 1px solid var(--player-border-color, rgba(255, 255, 255, 0.15));
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 0 2px rgba(204, 136, 0, var(--player-glow-alpha, 0.08)),
        0 0 60px rgba(204, 136, 0, var(--player-glow-alpha, 0.05));

    /* 4. Estabilidad en Safari:
       Esto fuerza a Safari a tratar este elemento como una capa compuesta aparte */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}






/* --- EFECTO RETRATO AETHER (alineado con placas cristal) --- */

.aether-portrait-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    margin-top: 0 !important;

    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.5s ease;
}

/* Borde igual que shorts (gal-3 / retrato Aether) */
.aether-portrait-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(180deg,
        rgba(255, 248, 238, 0.1) 0%,
        rgba(255, 235, 215, 0.06) 40%,
        rgba(204, 136, 0, 0.14) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* LA IMAGEN: encuadre centrado y filtro integrado con la paleta (tono cálido) */
.aether-portrait-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Centrado un poco más arriba (~5px) dentro del marco */
    border-radius: inherit;
    clip-path: inset(0 round 20px);
    /* Recorte estricto al marco redondeado; evita que se salga arriba */

    filter: sepia(0.12) contrast(1.02) brightness(1.06) saturate(1.05);
    transition: transform 0.7s ease, filter 0.7s ease;
}

/* Desenfoque suave abajo-izquierda hacia el centro (gal-3) */
.aether-portrait-blur {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to top right, black 0%, black 28%, transparent 58%);
    mask-image: linear-gradient(to top right, black 0%, black 28%, transparent 58%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}

/* CAPA DE ATMÓSFERA (overlay suave + tono cálido) */
.aether-portrait-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: 20px;

    background:
        linear-gradient(135deg, rgba(220, 150, 70, 0.06) 0%, transparent 40%, rgba(204, 136, 0, 0.04) 100%),
        linear-gradient(to bottom,
            rgba(8, 6, 5, 0.35) 0%,
            rgba(8, 6, 5, 0.12) 30%,
            transparent 50%,
            rgba(8, 6, 5, 0.4) 85%,
            rgba(5, 4, 3, 0.7) 100%);
}

/* EFECTO HOVER */
.aether-portrait-container:hover {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(204, 136, 0, 0.08);
}

.aether-portrait-container:hover img {
    transform: scale(1.015);
    filter: sepia(0.1) contrast(1.04) brightness(1.02) saturate(1.08);
}







/* --- MARCO ATMOSFÉRICO AETHER (Global Border) --- */
/* --- MARCO ATMOSFÉRICO (SOLO LATERALES) --- */

#global-frame {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;

    /* CAMBIO 1: Eliminamos bordes arriba y abajo */
    border-top: none;
    border-bottom: none;

    /* CAMBIO 2: Mantenemos solo los lados para encuadrar */
    border-left: 1px solid rgba(255, 200, 120, 0.15);
    border-right: 1px solid rgba(255, 200, 120, 0.15);

    /* CAMBIO 3: Sombra ajustada para que no oscurezca el menú ni el footer */
    /* inset X Y Blur Color -> Ponemos 0 en Y para que no manche arriba/abajo */
    box-shadow: inset 15px 0 40px rgba(204, 136, 0, 0.1);
}

/* AJUSTE PARA MÓVIL (Más sutil aún) */
@media (max-width: 768px) {
    #global-frame {
        /* En móvil, los bordes laterales muy finos */
        border-left: 1px solid rgba(255, 200, 120, 0.08);
        border-right: 1px solid rgba(255, 200, 120, 0.08);

        /* Menos sombra para no comer espacio de lectura */
        box-shadow: inset 10px 0 20px rgba(204, 136, 0, 0.05);
    }
}


/* =========================================
   SECTION INDEX — Barra horizontal pegada al navbar (selector de idiomas)
   Solo móvil/tablet; oculto en PC
   ========================================= */

.section-index {
    display: none; /* por defecto; se muestra en lg:hidden breakpoint */
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--navbar-height, 56px) - 14px);
    z-index: 55;
    /* Permitir clic desde el primer tap también en móvil */
    pointer-events: auto;
    padding-top: 6px;
    padding-bottom: 4px;
    background: transparent;
    transition: background 0.5s ease, backdrop-filter 0.5s ease, border-radius 0.5s ease, padding 0.5s ease;
    /* En táctil: priorizar scroll vertical para no activar hovers al deslizar */
    touch-action: pan-y;
}

#loading-screen ~ .section-index,
#entry-ritual ~ .section-index {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ===============================
   Entry ritual — liminal transition
   =============================== */

#entry-ritual {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    pointer-events: auto;
    transition: opacity 2.4s cubic-bezier(0.16, 1, 0.38, 1);
    overflow: hidden;
}

#entry-ritual.ritual-exit {
    opacity: 0;
    pointer-events: none;
}

/* Warm flash on exit — very subtle */
.ritual-exit-flash {
    position: absolute;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(204, 160, 80, 0.06), transparent 65%);
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

#entry-ritual.ritual-exit .ritual-exit-flash {
    opacity: 1;
    transition: opacity 0.7s ease-out;
}

/* Aperture: soft circle — gradient to opacity (no hard edge) */
@property --aperture-r {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%;
}

.ritual-aperture {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    --aperture-r: 0%;
    -webkit-mask-image: radial-gradient(
        circle at 50% 50%,
        black 0%,
        black calc(var(--aperture-r) * 0.78),
        transparent var(--aperture-r)
    );
    mask-image: radial-gradient(
        circle at 50% 50%,
        black 0%,
        black calc(var(--aperture-r) * 0.78),
        transparent var(--aperture-r)
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: --aperture-r 2.8s cubic-bezier(0.18, 0.98, 0.35, 1);
}

#entry-ritual.ritual-phase-reveal .ritual-aperture {
    --aperture-r: 130%;
}

/* Inner scene (cosmic + logo) */
.ritual-scene {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #030302 0%, #080605 35%, #0a0806 60%, #060504 100%);
}

.ritual-scene img.ritual-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.42;
    filter: brightness(0.6) saturate(1.15);
    animation: ritual-bg-drift 18s ease-in-out infinite;
}

@keyframes ritual-bg-drift {
    0%, 100% { transform: scale(1.02) translate(0, 0); }
    33%     { transform: scale(1.04) translate(0.6%, -0.3%); }
    66%     { transform: scale(1.03) translate(-0.4%, 0.5%); }
}

.ritual-scene .ritual-veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(204, 150, 70, 0.12), transparent 45%);
    opacity: 0;
    transition: opacity 2.2s ease-out;
}

#entry-ritual.ritual-phase-reveal .ritual-scene .ritual-veil {
    opacity: 1;
}

.ritual-scene .ritual-veil-pulse {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 48%, rgba(220, 180, 100, 0.08), transparent 50%);
    opacity: 0;
    animation: ritual-veil-pulse 6s ease-in-out infinite;
    animation-play-state: paused;
}

#entry-ritual.ritual-phase-reveal .ritual-scene .ritual-veil-pulse {
    opacity: 1;
    animation-play-state: running;
    animation-delay: 1s;
}

@keyframes ritual-veil-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%     { opacity: 1; transform: scale(1.06); }
}

.ritual-scene .ritual-noise {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.35 0 0 0 0 0 0.28 0 0 0 0 0 0.22 0 0 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ritual-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.ritual-particle {
    position: absolute;
    width: 1.5px;
    height: 1.5px;
    border-radius: 50%;
    background: rgba(255, 235, 210, 0.28);
    box-shadow: 0 0 4px rgba(204, 160, 80, 0.15);
    opacity: 0;
    animation: ritual-particle-float 12s ease-in-out infinite;
}

#entry-ritual.ritual-phase-reveal .ritual-particle { opacity: 0.28; }

.ritual-particle--1 { left: 12%; top: 22%; animation-delay: 0s; animation-duration: 14s; }
.ritual-particle--2 { left: 78%; top: 18%; animation-delay: -2s; animation-duration: 11s; }
.ritual-particle--3 { left: 25%; top: 70%; animation-delay: -4s; animation-duration: 13s; }
.ritual-particle--4 { left: 82%; top: 65%; animation-delay: -1s; animation-duration: 12s; }
.ritual-particle--5 { left: 50%; top: 35%; animation-delay: -3s; animation-duration: 10s; width: 1px; height: 1px; }
.ritual-particle--6 { left: 8%; top: 55%; animation-delay: -5s; animation-duration: 15s; }
.ritual-particle--7 { left: 90%; top: 42%; animation-delay: -2.5s; animation-duration: 12s; }
.ritual-particle--8 { left: 45%; top: 85%; animation-delay: -6s; animation-duration: 13s; }

@keyframes ritual-particle-float {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    25%     { transform: translate(6px, -10px) scale(1.08); opacity: 0.38; }
    50%     { transform: translate(-4px, -6px) scale(0.96); opacity: 0.28; }
    75%     { transform: translate(-8px, 6px) scale(1.05); opacity: 0.35; }
}

/* Center content: logo + word */
.ritual-center {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 2s ease-out 0.6s, transform 2s cubic-bezier(0.2, 0.98, 0.4, 1) 0.6s;
}

#entry-ritual.ritual-phase-reveal .ritual-center {
    opacity: 1;
    transform: scale(1);
}

.ritual-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.ritual-logo-glow {
    position: absolute;
    width: 142px;
    height: 142px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(204, 160, 90, 0.14) 0%, rgba(204, 140, 70, 0.05) 40%, transparent 60%);
    opacity: 0;
    animation: ritual-glow-breath 5.5s ease-in-out infinite;
    animation-delay: 1s;
}

#entry-ritual.ritual-phase-reveal .ritual-logo-glow {
    opacity: 1;
}

@keyframes ritual-glow-breath {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%     { opacity: 0.9; transform: scale(1.06); }
}

.ritual-logo {
    position: relative;
    z-index: 1;
    width: 80px;
    height: auto;
    opacity: 0.95;
    filter: drop-shadow(0 0 24px rgba(204, 150, 70, 0.28)) drop-shadow(0 0 8px rgba(255, 235, 210, 0.15));
    animation: ritual-logo-breath 5s ease-in-out infinite;
}

@keyframes ritual-logo-breath {
    0%, 100% { opacity: 0.92; transform: scale(1); }
    50%     { opacity: 1; transform: scale(1.03); }
}

.ritual-word {
    margin-top: 1.4rem;
    display: inline-block;
    align-self: center;
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.78rem, 3vw, 0.96rem);
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    line-height: 1.1;
    padding-left: 0.42em;
    margin-right: -0.42em;
    color: rgba(255, 252, 248, 0.58);
    text-shadow: 0 0 12px rgba(204, 160, 80, 0.2),
                 0 0 5px rgba(255, 235, 210, 0.12),
                 0 1px 2px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity 1.6s ease-out 1.1s;
    animation: ritual-word-pulse 8s ease-in-out infinite;
    animation-delay: 2s;
}

#entry-ritual.ritual-phase-reveal .ritual-word {
    opacity: 1;
}

@keyframes ritual-word-pulse {
    0%, 100% { opacity: 0.9; text-shadow: 0 0 12px rgba(204, 160, 80, 0.2), 0 0 5px rgba(255, 235, 210, 0.12), 0 1px 2px rgba(0, 0, 0, 0.28); }
    50%     { opacity: 0.95; text-shadow: 0 0 16px rgba(204, 170, 90, 0.26), 0 0 7px rgba(255, 240, 220, 0.15), 0 1px 2px rgba(0, 0, 0, 0.28); }
}


.section-index__track {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    pointer-events: auto;
}

.section-index__item {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}

.section-index__name {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.18);
    white-space: nowrap;
    transition: color 0.3s ease, opacity 0.3s ease;
}

/* Hover solo en dispositivos con cursor real; en táctil evita que el scroll active hovers falsos */
.section-index__item:focus-visible .section-index__name {
    color: rgba(255, 255, 255, 0.35);
}
@media (hover: hover) {
    .section-index__item:hover .section-index__name {
        color: rgba(255, 255, 255, 0.35);
    }
}

.section-index__item:has(.section-index__dot.is-active) .section-index__name {
    color: rgba(255, 255, 255, 0.4);
}

.section-index__dot {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
    flex-shrink: 0;
}

.section-index__item:focus-visible .section-index__dot:not(.is-active) {
    background: rgba(255, 255, 255, 0.25);
}
@media (hover: hover) {
    .section-index__item:hover .section-index__dot:not(.is-active) {
        background: rgba(255, 255, 255, 0.25);
    }
}

.section-index__item:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.section-index__dot.is-active {
    width: 5px;
    height: 5px;
    background: #cc8800;
    opacity: 0.85;
    box-shadow: 0 0 12px rgba(204, 136, 0, 0.35);
}

.section-index__item:focus-visible .section-index__dot.is-active {
    opacity: 1;
    box-shadow: 0 0 16px rgba(204, 136, 0, 0.45);
}
@media (hover: hover) {
    .section-index__item:hover .section-index__dot.is-active {
        opacity: 1;
        box-shadow: 0 0 16px rgba(204, 136, 0, 0.45);
    }
}

@media (max-width: 768px) {
    .section-index__track {
        gap: 4px 10px;
    }

    .section-index__name {
        font-size: 7px;
        letter-spacing: 0.16em;
        color: rgba(255, 255, 255, 0.26);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
    }

    .section-index__item:focus-visible .section-index__name {
        color: rgba(255, 255, 255, 0.4);
    }
    @media (hover: hover) {
        .section-index__item:hover .section-index__name {
            color: rgba(255, 255, 255, 0.4);
        }
    }

    .section-index__item:has(.section-index__dot.is-active) .section-index__name {
        color: rgba(255, 255, 255, 0.46);
    }

    .section-index__item {
        gap: 4px;
    }

    .section-index__dot {
        width: 2px;
        height: 2px;
    }

    .section-index__dot.is-active {
        width: 4px;
        height: 4px;
    }
}

/* Mostrar solo en móvil/tablet; ocultar en PC */
@media (max-width: 1023px) {
    .section-index {
        display: block;
    }
}

@media (min-width: 1024px) {
    .section-index {
        display: none !important;
    }
}


/* En styles.css */
section {
    content-visibility: auto;
    /* Mejora enorme en el renderizado inicial */
    contain-intrinsic-size: 1000px;
    /* Evita saltos en la barra de scroll */
}



/* EN STYLES.CSS - Reemplaza lo que tengas en #home .absolute... */

#home .absolute.inset-0.bg-gradient-to-b {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.25) 100%) !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

#home img {
    filter: brightness(1.15) contrast(1.08) !important;
    opacity: 1 !important;
}

/* Contrast-final en home: más luminoso (menos oscuro) */
#home .contrast-final {
    background: rgba(0, 0, 0, 0.08) !important;
}



#home {
    /* 1. MÓVIL: Curva moderada */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

    /* 2. IMPORTANTE: Esto recorta la imagen cuadrada para que siga la curva */
    overflow: hidden;

    /* 3. DETALLE: Un borde sutil abajo para resaltar la forma en el fondo oscuro */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    /* Aseguramos que se posicione correctamente */
    position: relative;
    z-index: 10;
}

/* 4. PC / TABLET: Curva más grande y elegante */
@media (min-width: 768px) {
    #home {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
}


.icon-x {
    width: 20px;
    height: 20px;
}



/* ==========================================
   FIX BANNER COOKIES (MÓVIL & PC)
   ========================================== */
/* No mostrar durante el ritual: solo visible cuando la página principal está activa */
html:not(.styles-loaded) #cookie-banner {
    visibility: hidden !important;
    pointer-events: none !important;
}

#cookie-banner {
    /* 1. POSICIÓN FIJA AL FONDO — discreto, no roba protagonismo */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9998 !important;

    /* 2. MUY DISCRETO: cristal muy suave para no competir con la web */
    background: linear-gradient(
        180deg,
        rgba(10, 9, 8, 0.72) 0%,
        rgba(8, 7, 6, 0.78) 100%
    ) !important;
    -webkit-backdrop-filter: blur(20px) saturate(110%);
    backdrop-filter: blur(20px) saturate(110%);

    /* 3. BORDE Y SOMBRA MUY SUAVES */
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);

    /* 4. ESPACIADO SEGURO (iOS Home Bar) */
    padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
    padding-top: 25px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;

    /* 5. FLEXBOX */
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;

    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#cookie-banner #legal-banner-title {
    color: rgba(204, 150, 80, 0.7);
}

#cookie-banner p {
    color: rgba(233, 230, 227, 0.5);
}

/* Botón del banner: siempre visible y clicable */
#cookie-banner button {
    pointer-events: auto;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

#cookie-banner-ok {
    padding: 12px 32px;
    border-radius: 9999px;
    border: 1px solid rgba(204, 136, 0, 0.45);
    background: rgba(204, 136, 0, 0.12);
    color: #cc8800;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    box-shadow: 0 0 20px rgba(204, 136, 0, 0.12);
}

#cookie-banner-ok:hover {
    background: #cc8800;
    color: #000;
    border-color: #cc8800;
}

@media (min-width: 768px) {
    #cookie-banner {
        flex-direction: row;
        padding-bottom: 25px !important;
        gap: 40px;
    }
}



/* Scrollbar personalizado para el modal */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}



/* ==========================================
   FIX DEFINITIVO: MODAL PRIVACIDAD (SIN BLOQUEOS)
   ========================================== */

/* 1. EL CONTENEDOR (Oculto por defecto) */
#privacy-modal {
    position: fixed;
    inset: 0;
    z-index: 10000 !important;

    /* CAMBIO CLAVE: Oculto por defecto para no bloquear clics */
    display: none;

    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 2. ESTADO VISIBLE (Activado por JS) */
/* Cuando el JS añade la clase 'flex', forzamos que se vea */
#privacy-modal.flex {
    display: flex !important;
    opacity: 1;
    /* Aseguramos opacidad 1 al abrir */
}

/* 3. LA TARJETA DE CONTENIDO */
#privacy-content-box {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;

    background-color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 1);

    padding: 30px;
    color: #e9e6e3;

    /* Animación de escala */
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

/* Cuando se abre, crece */
#privacy-modal.flex #privacy-content-box {
    transform: scale(1);
}

/* ... Estilos de texto y botón cerrar iguales que antes ... */
#privacy-content-box h2 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 20px;
    font-family: serif;
}

#privacy-content-box p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.8);
}

#close-privacy-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    color: white;
    border: none;
    z-index: 20;
}

/* Espaciado equilibrado arriba y abajo para la sección Shorts (index + index_en) */
#shorts-teaser {
    padding-top: 3rem;      /* evita colapso del espacio superior */
    padding-bottom: 3rem;   /* igual espacio inferior */
}
@media (min-width: 768px) {
    #shorts-teaser {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

 .shorts-card-container {
     max-width: 900px;
     margin: 0 auto;
     padding: 0 15px;
 }

 .shorts-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
     position: relative;
     overflow: hidden;

     /* Placa cristal cálido (unificado con hero/gal-3) */
     background: linear-gradient(180deg,
         rgba(28, 22, 16, 0.36) 0%,
         rgba(20, 16, 12, 0.5) 50%,
         rgba(22, 18, 14, 0.44) 100%);

     -webkit-backdrop-filter: blur(16px) saturate(135%);
     backdrop-filter: blur(16px) saturate(135%);

     border-radius: 30px;
     padding: 25px 30px;
     text-decoration: none;
     box-shadow:
         0 8px 32px rgba(0, 0, 0, 0.3),
         0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
         inset 0 0 80px rgba(0, 0, 0, 0.2);
     transition: all 0.5s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
 }

 /* Mini-preview visual: frame borroso detrás */
 .shorts-preview-bg {
     position: absolute;
     inset: 0;
     border-radius: 30px;
     overflow: hidden;
     z-index: 0;
     pointer-events: none;
     opacity: 0.15;
     transition: opacity 0.5s ease;
 }

 .shorts-card:hover .shorts-preview-bg {
     opacity: 0.25;
 }

 .shorts-preview-blur {
     position: absolute;
     top: 50%;
     right: 15%;
     transform: translateY(-50%);
     width: 120px;
     height: 180px;
     background: linear-gradient(135deg, 
         rgba(204, 136, 0, 0.2) 0%,
         rgba(255, 200, 120, 0.15) 50%,
         rgba(220, 160, 80, 0.2) 100%);
     border-radius: 12px;
     filter: blur(20px);
     animation: shorts-preview-pulse 4s ease-in-out infinite;
     box-shadow: 0 0 40px rgba(204, 136, 0, 0.3);
 }

 @keyframes shorts-preview-pulse {
     0%, 100% {
         transform: translateY(-50%) scale(1);
         opacity: 0.15;
     }
     50% {
         transform: translateY(-50%) scale(1.05);
         opacity: 0.25;
     }
 }

 .shorts-preview-gradient {
     position: absolute;
     inset: 0;
     background: radial-gradient(
         circle at 75% 50%,
         rgba(204, 136, 0, 0.08) 0%,
         transparent 60%
     );
     animation: shorts-gradient-shift 6s ease-in-out infinite;
 }

 @keyframes shorts-gradient-shift {
     0%, 100% {
         background: radial-gradient(
             circle at 75% 50%,
             rgba(204, 136, 0, 0.08) 0%,
             transparent 60%
         );
     }
     50% {
         background: radial-gradient(
             circle at 80% 45%,
             rgba(255, 200, 120, 0.12) 0%,
             transparent 60%
         );
     }
 }

 /* Thumbnail pequeño flotante */
 .shorts-thumbnail {
     position: absolute;
    top: 14px;
    right: 20px;
    width: 62px;
    height: 96px;
     z-index: 2;
     pointer-events: none;
    opacity: 0.92;
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.45s ease,
                opacity 0.35s ease;
    animation: shorts-thumbnail-float 4s ease-in-out infinite;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.28))
            drop-shadow(0 0 14px rgba(204, 136, 0, 0.24));
    will-change: transform, filter;
 }

 @keyframes shorts-thumbnail-float {
     0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-1.8deg);
     }
     50% {
        transform: translate3d(0, -6px, 0) rotate(1.6deg);
     }
 }

 .shorts-card:hover .shorts-thumbnail {
     opacity: 1;
    transform: translate3d(0, -7px, 0) scale(1.06) rotate(0.8deg);
     animation: none;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35))
            drop-shadow(0 0 20px rgba(204, 136, 0, 0.38));
 }

 .shorts-thumbnail-inner {
     width: 100%;
     height: 100%;
     border-radius: 10px;
     background: linear-gradient(135deg,
         rgba(204, 136, 0, 0.45) 0%,
         rgba(255, 200, 120, 0.35) 50%,
         rgba(220, 160, 80, 0.4) 100%);
     border: 1.5px solid rgba(255, 255, 255, 0.25);
     box-shadow: 
         0 6px 24px rgba(0, 0, 0, 0.5),
         0 0 0 1px rgba(204, 136, 0, 0.25) inset,
         0 0 30px rgba(204, 136, 0, 0.3),
         inset 0 1px 0 rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(10px);
 }

 .shorts-thumbnail-inner::before {
     content: '';
     position: absolute;
     inset: 0;
     background: 
         repeating-linear-gradient(
             45deg,
             transparent,
             transparent 8px,
             rgba(255, 255, 255, 0.04) 8px,
             rgba(255, 255, 255, 0.04) 16px
         );
     opacity: 0.4;
     border-radius: 10px;
 }

 /* Simular notch superior del teléfono */
 .shorts-thumbnail-inner::after {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 20px;
     height: 3px;
     background: rgba(0, 0, 0, 0.3);
     border-radius: 0 0 4px 4px;
     z-index: 2;
 }

 .shorts-thumbnail-play-icon {
     position: absolute;
    inset: 0;
    margin: auto;
    transform: scale(1);
     width: 26px;
     height: 26px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.28);
     border-radius: 50%;
     backdrop-filter: blur(6px);
     color: rgba(255, 255, 255, 0.98);
     z-index: 3;
     transition: all 0.3s ease;
     animation: shorts-play-pulse 2.5s ease-in-out infinite;
     box-shadow: 
         0 0 14px rgba(204, 136, 0, 0.45),
         0 2px 8px rgba(0, 0, 0, 0.3),
         inset 0 1px 0 rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.15);
 }

.shorts-thumbnail-play-icon svg {
    display: block;
    width: 13px;
    height: 13px;
    transform: translateX(1px);
    transform-origin: center;
}

 @keyframes shorts-play-pulse {
     0%, 100% {
        transform: scale(1);
         box-shadow: 
             0 0 14px rgba(204, 136, 0, 0.45),
             0 2px 8px rgba(0, 0, 0, 0.3),
             inset 0 1px 0 rgba(255, 255, 255, 0.2);
     }
     50% {
        transform: scale(1.1);
         box-shadow: 
             0 0 20px rgba(204, 136, 0, 0.65),
             0 3px 12px rgba(0, 0, 0, 0.4),
             inset 0 1px 0 rgba(255, 255, 255, 0.25);
     }
 }

 .shorts-card:hover .shorts-thumbnail-play-icon {
     background: rgba(255, 255, 255, 0.4);
    transform: scale(1.18);
     animation: none;
     box-shadow: 
         0 0 24px rgba(204, 136, 0, 0.7),
         0 4px 16px rgba(0, 0, 0, 0.4),
         inset 0 1px 0 rgba(255, 255, 255, 0.3);
 }

 .shorts-card::before {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: 30px;
     pointer-events: none;
     z-index: 0;
     background: linear-gradient(180deg,
         rgba(255, 242, 228, 0.05) 0%,
         transparent 22%,
         transparent 100%);
 }

 .shorts-card::after {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: 30px;
     padding: 1px;
     pointer-events: none;
     background: linear-gradient(180deg,
         rgba(255, 248, 238, 0.1) 0%,
         rgba(255, 235, 215, 0.06) 40%,
         rgba(204, 136, 0, 0.14) 100%);
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     z-index: 0;
 }

 .shorts-card > * {
     position: relative;
     z-index: 2;
 }

 /* Asegurar que el contenido esté por encima del preview */
 .shorts-info,
 .shorts-btn-minimal {
     position: relative;
     z-index: 3;
 }

 /* Hover: sutil resplandor dorado */
 .shorts-card:hover {
     box-shadow:
         0 10px 40px rgba(0, 0, 0, 0.35),
         0 0 30px rgba(204, 136, 0, 0.12),
         0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
         inset 0 0 80px rgba(0, 0, 0, 0.2);
     transform: scale(1.01);
 }

 .shorts-info {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 15px;
 }

 .shorts-title-wrapper {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
 }

 .shorts-title {
     font-family: 'Playfair Display', serif;
     font-size: 22px;
     /* Un poco más fino */
     color: #eb9900e7;
     margin: 0;
     letter-spacing: 2px;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     /* Sombra al texto para que se lea bien */
 }

 /* Badge "Nuevo" - naranja cálido alineado con identidad */
 .shorts-badge-new {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 4px 6px;
     line-height: 1;
     background: rgba(220, 140, 60, 0.85);
     color: #fff;
     font-size: 7px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     border-radius: 8px;
     box-shadow: 0 1px 6px rgba(220, 140, 60, 0.35);
     animation: shorts-badge-pulse 2s ease-in-out infinite;
     position: relative;
 }

 .shorts-badge-new::before {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: 8px;
     background: rgba(220, 140, 60, 1);
     opacity: 0;
     animation: shorts-badge-glow 2s ease-in-out infinite;
 }

 @keyframes shorts-badge-pulse {
     0%, 100% {
         transform: scale(1);
         box-shadow: 0 1px 6px rgba(220, 140, 60, 0.35);
     }
     50% {
         transform: scale(1.03);
         box-shadow: 0 1px 10px rgba(220, 140, 60, 0.5);
     }
 }

 @keyframes shorts-badge-glow {
     0%, 100% {
         opacity: 0;
     }
     50% {
         opacity: 0.25;
     }
 }

 .shorts-subtitle {
     font-family: 'Inter', sans-serif;
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.82);
     margin: 6px 0 0 0;
 }

 /* Contador de videos */
 .shorts-count {
     font-family: 'Inter', sans-serif;
     font-size: 9px;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.6);
     margin: 8px 0 0 0;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .shorts-count::before {
     content: '';
     width: 4px;
     height: 4px;
     border-radius: 50%;
     background: rgba(204, 136, 0, 0.6);
     display: inline-block;
     animation: shorts-dot-pulse 1.5s ease-in-out infinite;
 }

 @keyframes shorts-dot-pulse {
     0%, 100% {
         opacity: 0.6;
         transform: scale(1);
     }
     50% {
         opacity: 1;
         transform: scale(1.2);
     }
 }

 /* Botón más minimalista + micro-animación flecha y gradiente en hover */
 .shorts-btn-minimal {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: 10px;
     padding: 0.7rem 1.25rem;
     border-radius: 50px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     background: transparent;
     color: rgba(255, 255, 255, 0.7);
     font-size: 9px;
     text-transform: uppercase;
     letter-spacing: 2px;
     transition: all 0.3s ease;
 }

 .shorts-btn-minimal svg {
     transition: transform 0.3s ease;
 }

 .shorts-card:hover .shorts-btn-minimal {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
     color: #fff;
     border-color: rgba(255, 255, 255, 0.35);
 }

 /* Desktop: micro-animación de la flecha al hover */
 @media (hover: hover) {
     .shorts-card:hover .shorts-btn-minimal svg {
         transform: translateX(4px);
     }
 }

 /* Móvil: flecha en loop para invitar al tap */
 @keyframes shorts-arrow-loop {
     0%, 100% { transform: translateX(0); }
     50% { transform: translateX(4px); }
 }
 @media (hover: none) {
     .shorts-btn-minimal svg {
         animation: shorts-arrow-loop 1.5s ease-in-out infinite;
     }
     .shorts-card:hover .shorts-btn-minimal svg {
         animation: none;
         transform: translateX(4px);
     }
 }

 /* Responsive: ajustar preview y thumbnail en móvil */
 @media (max-width: 767px) {
     .shorts-preview-blur {
         width: 80px;
         height: 120px;
         right: 10%;
     }

     .shorts-thumbnail {
         width: 45px;
         height: 68px;
         top: 10px;
         right: 12px;
     }

     .shorts-thumbnail-play-icon {
         width: 20px;
         height: 20px;
     }

     .shorts-thumbnail-inner::after {
         width: 16px;
         height: 2.5px;
     }
 }

 @media (min-width: 768px) {
     .shorts-card {
         flex-direction: row;
         text-align: left;
         padding: 35px 50px;
     }

     .shorts-info {
         flex-direction: row;
         text-align: left;
         gap: 25px;
     }

     .shorts-preview-blur {
         width: 140px;
         height: 210px;
     }

     .shorts-thumbnail {
         width: 70px;
         height: 105px;
         top: 18px;
         right: 22px;
     }

     .shorts-thumbnail-play-icon {
         width: 28px;
         height: 28px;
     }

     .shorts-thumbnail-inner::after {
         width: 24px;
         height: 3.5px;
     }
 }

/* =========================================
   SECCIÓN CALENDARIO / PRÓXIMOS GIGS
   ========================================= */

.gigs-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gig-card {
    position: relative;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem 1.75rem;
    
    /* Placa cristal cálido (unificado con otras secciones) */
    background: linear-gradient(180deg,
        rgba(28, 22, 16, 0.36) 0%,
        rgba(20, 16, 12, 0.5) 50%,
        rgba(22, 18, 14, 0.44) 100%);
    
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
    
    border-radius: 24px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
        inset 0 0 80px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

.gig-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg,
        rgba(255, 242, 228, 0.05) 0%,
        transparent 22%,
        transparent 100%);
}

.gig-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 248, 238, 0.1) 0%,
        rgba(255, 235, 215, 0.06) 40%,
        rgba(204, 136, 0, 0.14) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 0;
}

.gig-card > * {
    position: relative;
    z-index: 1;
}

/* Hover эффект */
@media (hover: hover) {
    .gig-card:hover {
        box-shadow:
            0 10px 40px rgba(0, 0, 0, 0.35),
            0 0 30px rgba(204, 136, 0, 0.12),
            0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
            inset 0 0 80px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
    }
}

/* Блок даты */
.gig-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.gig-day {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.25rem;
}

.gig-num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    margin-bottom: 0.125rem;
}

.gig-month {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(204, 136, 0, 0.8);
}

/* Информация о событии */
.gig-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gig-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}

.gig-meta {
    font-size: 0.875rem;
    color: rgba(233, 230, 227, 0.7);
    margin: 0;
    font-weight: 300;
}

.gig-style {
    font-size: 0.75rem;
    color: rgba(233, 230, 227, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    font-weight: 400;
}

/* Кнопка */
.gig-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.25rem;
    margin-top: 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(204, 136, 0, 0.9);
    background: rgba(204, 136, 0, 0.08);
    border: 1px solid rgba(204, 136, 0, 0.3);
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.gig-btn:hover {
    background: rgba(204, 136, 0, 0.15);
    border-color: rgba(204, 136, 0, 0.6);
    color: rgba(204, 136, 0, 1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(204, 136, 0, 0.2);
}

/* Estado vacío: sin fechas aún */
.gigs-empty {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.gig-card--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    min-height: 200px;
}
.gig-card--empty .gig-empty-title {
    margin: 0;
}
.gig-card--empty .gig-empty-text {
    margin: 0 auto;
}

/* Адаптивность */
@media (max-width: 767px) {
    .gig-card {
        flex-direction: column;
        gap: 1.25rem;
        padding: 1.25rem 1.5rem;
    }
    
    .gig-date {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        min-width: auto;
        padding: 0.75rem 1rem;
    }
    
    .gig-day,
    .gig-month {
        margin-bottom: 0;
    }
    
    .gig-num {
        font-size: 1.75rem;
    }
    
    .gig-title {
        font-size: 1.125rem;
    }
}

@media (min-width: 768px) {
    .gigs-list {
        gap: 1.75rem;
    }
    
    .gig-card {
        padding: 2rem 2.25rem;
    }
    
    .gig-date {
        min-width: 100px;
        padding: 1.25rem;
    }
    
    .gig-num {
        font-size: 2.25rem;
    }
}

/* =========================================
   MEJORAS VISUALES SECCIÓN CONTEXTS
   ========================================= */

/* Анимация появления элементов при скролле */
.context-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.context-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Задержка для каждого элемента */
.context-item:nth-child(1) { transition-delay: 0.1s; }
.context-item:nth-child(2) { transition-delay: 0.2s; }
.context-item:nth-child(3) { transition-delay: 0.3s; }
.context-item:nth-child(4) { transition-delay: 0.4s; }

.context-item.revealed:nth-child(1) { transition-delay: 0.1s; }
.context-item.revealed:nth-child(2) { transition-delay: 0.2s; }
.context-item.revealed:nth-child(3) { transition-delay: 0.3s; }
.context-item.revealed:nth-child(4) { transition-delay: 0.4s; }

/* Hover эффект для всей группы */
.context-item:hover {
    transform: translateX(4px);
}

/* Улучшенная читаемость на мобильных */
@media (max-width: 768px) {
    .context-item {
        text-align: center;
    }
    
    .context-item .pl-0 {
        padding-left: 0;
    }
}

/* Títulos de contexto: +5% presencia — un poco más de luz y tracking */
.context-item-title {
    letter-spacing: 0.04em;
}
@media (min-width: 768px) {
    .context-item-title {
        letter-spacing: 0.05em;
    }
}

/* Ritmo vertical: larga → corta → larga entre bloques */
.context-blocks-rhythm .context-item:nth-child(2) { margin-top: 2rem; }
.context-blocks-rhythm .context-item:nth-child(3) { margin-top: 1.35rem; }
.context-blocks-rhythm .context-item:nth-child(4) { margin-top: 2rem; }
@media (min-width: 768px) {
    .context-blocks-rhythm .context-item:nth-child(2) { margin-top: 2.5rem; }
    .context-blocks-rhythm .context-item:nth-child(3) { margin-top: 1.5rem; }
    .context-blocks-rhythm .context-item:nth-child(4) { margin-top: 2.5rem; }
}

/* Адаптация для темной темы - улучшенный контраст */
.context-item span:first-child {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* === iOS SAFARI SCROLL FIX (CRITICAL) === */
/* Evita margen derecho al hacer scroll: reserva hueco de la barra desde el inicio */
html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable; /* reserva espacio barra → no salta el contenido al bajar */
    background: #000 !important;
}

/* Ajuste final: botón Escuchar/Pausar más sutil (override global) */
.session-card.active .session-card-listen-btn,
.session-card .session-card-listen-btn {
    margin-top: 0 !important;
    transform: translateY(-10px) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
@media (hover: hover) {
    .session-card.active .session-card-listen-btn:hover,
    .session-card .session-card-listen-btn:hover {
        background-color: rgba(255, 255, 255, 0.06) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        transform: translateY(-10px) !important;
    }
}
.session-card .session-card-listen-btn-icon,
.session-card .session-card-listen-btn-text {
    color: rgba(255, 255, 255, 0.78) !important;
    opacity: 1 !important;
}
.session-card .session-card-listen-btn-text {
    font-size: 8px !important;
    letter-spacing: 0.13em !important;
    font-weight: 500 !important;
}

/* ==========================================
   RITUAL VU (immersive microphone mode)
   ========================================== */
.ritual-vu-nav-btn {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.04), rgba(12, 10, 8, 0.35) 72%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 8px rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.48);
    opacity: 0.62;
    transition: transform 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.ritual-vu-nav-btn svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    stroke-width: 1.35;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ritual-vu-nav-btn:hover,
.ritual-vu-nav-btn:focus-visible {
    opacity: 0.86;
    color: rgba(255, 255, 255, 0.72);
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.36);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 10px rgba(255, 255, 255, 0.08);
    outline: none;
}
.ritual-vu-nav-btn--mobile {
    width: 26px;
    height: 26px;
}
#ritual-vu-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 50% 15%, rgba(255, 190, 100, 0.1), transparent 50%),
        radial-gradient(circle at 50% 5%, rgba(255, 215, 150, 0.07), transparent 40%),
        linear-gradient(180deg, rgba(10, 10, 16, 0.9), rgba(4, 5, 10, 0.96) 55%, rgba(3, 3, 6, 0.98));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 900ms cubic-bezier(0.2, 0.75, 0.2, 1);
}
#ritual-vu-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
        repeating-radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px);
    opacity: 0.18;
    pointer-events: none;
}
#ritual-vu-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}
body.ritual-vu-open {
    overflow: hidden !important;
}
#ritual-vu-close {
    position: absolute;
    top: 20px;
    right: 18px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 214, 132, 0.32);
    background: rgba(10, 8, 6, 0.45);
    opacity: 0.65;
    transition: opacity 0.3s ease, border-color 0.35s ease;
}
#ritual-vu-close::before,
#ritual-vu-close::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 1px;
    background: rgba(255, 228, 178, 0.8);
    left: 50%;
    top: 50%;
}
#ritual-vu-close::before { transform: translate(-50%, -50%) rotate(45deg); }
#ritual-vu-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
#ritual-vu-close:hover,
#ritual-vu-close:focus-visible {
    opacity: 1;
    border-color: rgba(255, 214, 132, 0.55);
    outline: none;
}
.ritual-vu-stage {
    width: min(100vw, 980px);
    padding: 44px 22px 22px;
    position: relative;
    display: grid;
    place-items: center;
}
.ritual-vu-mount {
    position: absolute;
    width: min(87vw, 820px);
    height: min(62vw, 480px);
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255, 235, 195, 0.04), rgba(255, 200, 120, 0.02) 24%, rgba(18, 12, 6, 0.45)),
        radial-gradient(ellipse 90% 50% at 50% 10%, rgba(255, 210, 140, 0.12), transparent 52%);
    border: 1px solid rgba(200, 160, 90, 0.18);
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.5), 0 28px 100px rgba(0, 0, 0, 0.62);
}
.ritual-vu-mount::before {
    content: "";
    position: absolute;
    inset: 16px;
    border-radius: 24px;
    border: 1px solid rgba(255, 214, 140, 0.08);
    pointer-events: none;
}
.ritual-vu-mic-glow {
    position: absolute;
    width: min(65vw, 600px);
    height: min(20vw, 180px);
    top: 10%;
    border-radius: 999px;
    background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255, 180, 90, 0.38), rgba(255, 160, 70, 0.1) 50%, transparent 72%);
    filter: blur(22px);
    opacity: 0.62;
    transition: opacity 180ms linear, transform 180ms linear;
}
.ritual-vu-meter {
    width: min(84vw, 760px);
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 4px solid rgba(20, 16, 12, 0.95);
    background:
        radial-gradient(ellipse 100% 80% at 50% 40%, rgba(255, 220, 160, 0.55), rgba(255, 190, 110, 0.4) 40%, rgba(220, 155, 80, 0.5) 70%, rgba(190, 130, 60, 0.6) 100%);
    box-shadow:
        inset 0 -30px 46px rgba(58, 32, 10, 0.22),
        inset 0 14px 22px rgba(255, 240, 200, 0.22),
        inset 0 0 0 1px rgba(255, 235, 200, 0.16),
        inset 0 2px 0 rgba(255, 247, 225, 0.2),
        0 1px 0 rgba(255, 230, 190, 0.08),
        0 4px 0 rgba(12, 10, 8, 0.9),
        0 28px 90px rgba(0, 0, 0, 0.54);
}
.ritual-vu-meter::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(60, 35, 12, 0.08) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(0deg, transparent 0 12px, rgba(60, 35, 12, 0.04) 12px 13px);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.ritual-vu-meter::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 40% at 50% 35%, rgba(255, 235, 200, 0.2), transparent 60%);
    pointer-events: none;
}
.ritual-vu-scale {
    position: absolute;
    left: 10%;
    right: 10%;
    z-index: 7;
    display: flex;
    justify-content: space-between;
    font-family: "Inter", sans-serif;
    font-size: clamp(0.45rem, 1.12vw, 0.72rem);
    font-weight: 450;
    letter-spacing: 0.06em;
    color: rgba(45, 30, 15, 0.92);
    opacity: 0.78;
    text-shadow: 0 1px 0 rgba(255, 230, 190, 0.22), 0 -1px 0 rgba(62, 30, 8, 0.14);
}
.ritual-vu-scale-db { top: 14%; }
.ritual-vu-scale-db .scale-red {
    color: #7a0f16;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 208, 198, 0.18), 0 -1px 0 rgba(60, 8, 8, 0.32);
}
.ritual-vu-rays {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 14%;
    bottom: 14%;
    z-index: 6;
    pointer-events: none;
}
.ritual-vu-rays span {
    position: absolute;
    left: 50%;
    bottom: 9px;
    width: 1px;
    height: 86%;
    transform-origin: 50% 100%;
    transform: translateX(-50%) rotate(var(--ray-angle));
    background: linear-gradient(
        to top,
        rgba(88, 55, 22, 0.34) 0%,
        rgba(88, 55, 22, 0.2) 58%,
        rgba(88, 55, 22, 0.11) 100%
    );
    opacity: 0.66;
    filter: blur(0.12px);
}
.ritual-vu-scale-pct { bottom: 24%; }
.ritual-vu-scale-pct span { color: rgba(45, 30, 15, 0.9); }
.ritual-vu-window {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 13%;
    height: 38%;
    z-index: 8;
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 120% 85% at 50% 12%, rgba(252, 238, 214, 0.22), rgba(241, 218, 178, 0.11) 46%, rgba(197, 148, 86, 0.08) 100%),
        repeating-linear-gradient(92deg, rgba(95, 62, 28, 0.035) 0 1px, transparent 1px 8px),
        linear-gradient(180deg, rgba(243, 220, 182, 0.14), rgba(198, 149, 88, 0.07) 100%);
    border: 1px solid rgba(120, 75, 35, 0.2);
    box-shadow:
        inset 0 1px 2px rgba(255, 246, 225, 0.34),
        inset 0 -12px 18px rgba(96, 58, 24, 0.16),
        0 6px 10px rgba(0, 0, 0, 0.12);
}
.ritual-vu-window::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(132deg, rgba(255, 248, 232, 0.22) 4%, rgba(255, 255, 255, 0.04) 26%, transparent 48%);
    pointer-events: none;
}
.ritual-vu-window::after {
    content: "";
    position: absolute;
    top: 10%;
    left: 8%;
    width: 22%;
    height: 18%;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(255, 251, 240, 0.14), rgba(255, 251, 240, 0));
    filter: blur(1.6px);
    transform: skewX(-7deg) scaleX(1.08);
    pointer-events: none;
}
.ritual-vu-needle-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 18%;
    bottom: 16%;
    z-index: 5;
    --needle-rotation: -52deg;
}
.ritual-vu-needle {
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: min(0.34vw, 2px);
    height: 72%;
    border-radius: 1px;
    background: #6b1a1a;
    box-shadow:
        0 0 1px rgba(90, 12, 12, 0.95),
        0 0 4px rgba(185, 36, 36, 0.42),
        0 0 7px rgba(185, 36, 36, 0.2);
    filter: blur(0.12px) drop-shadow(0 0 1.4px rgba(170, 28, 28, 0.34));
    transform-origin: 50% calc(100% - 2px);
    transform: translateX(-50%) rotate(var(--needle-rotation));
    transition: transform 70ms linear;
}
.ritual-vu-needle::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    width: 5px;
    height: 16px;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, rgba(120, 20, 20, 0.96), rgba(72, 10, 10, 0.98));
    box-shadow: 0 0 2px rgba(35, 6, 6, 0.5);
}
.ritual-vu-pivot {
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 245, 220, 0.8) 0%, rgba(190, 155, 98, 0.92) 42%, rgba(92, 66, 26, 0.96) 100%),
        repeating-linear-gradient(25deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(70, 45, 18, 0.08) 1px 2px);
    border: 1px solid rgba(78, 50, 18, 0.62);
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.32),
        inset 0 -1px 1px rgba(54, 32, 12, 0.46);
}
.ritual-vu-brand {
    position: absolute;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
    font-family: "Inter", sans-serif;
    font-size: clamp(0.9rem, 2.2vw, 1.4rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(35, 25, 15, 0.92);
}
.ritual-vu-status {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255, 228, 180, 0.5);
    white-space: nowrap;
    pointer-events: none;
}

@media (max-width: 767px) {
    /* Subir panel superior en móvil (logo + idioma + VU) */
    #navbar {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    /* NAV móvil: controles cómodos para dedo (tap target ~40-44px) */
    .lang-switch {
        font-size: 11px;
        gap: 0 !important;
    }
    .lang-switch .lang-btn {
        min-height: 40px;
        min-width: 26px;
        padding: 8px 2px;
        background: transparent;
        border-color: transparent;
        color: rgba(255, 255, 255, 0.2);
    }
    /* Mantener distancia cómoda solo con el VU */
    .lang-switch .ritual-vu-nav-btn--mobile {
        margin-left: 7px;
    }
    .lang-switch .lang-btn--active {
        background: transparent;
        border-color: transparent;
        color: rgba(255, 255, 255, 0.32);
    }

    /* NAV móvil: botón VU-metro con área de toque amplia */
    .ritual-vu-nav-btn--mobile {
        width: 30px;
        height: 30px;
        opacity: 0.4;
        color: rgba(255, 255, 255, 0.33);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015), 0 0 4px rgba(255, 255, 255, 0.012);
        background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.012), rgba(12, 10, 8, 0.18) 72%);
    }
    .ritual-vu-nav-btn--mobile svg {
        width: 16px;
        height: 16px;
    }

    /* FABs móvil: tamaño cómodo para dedo (como controles de idioma) */
    #floating-whatsapp,
    #btnSubir {
        width: 44px;
        height: 44px;
        right: 16px;
    }
    #floating-whatsapp i,
    #btnSubir svg {
        width: 18px;
        height: 18px;
    }

    /* Subir también la fila de links pequeños (section-index) */
    .section-index {
        top: calc(var(--navbar-height, 56px) - 8px);
        padding-top: 6px;
    }

    .ritual-vu-stage {
        width: 100vw;
        padding: 58px 12px 16px;
    }
    .ritual-vu-meter {
        width: 94vw;
        border-radius: 18px;
    }
    .ritual-vu-status {
        font-size: 9px;
        letter-spacing: 0.18em;
    }
}