#worship{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    background:#030c18;

}

/* Oculta el background global */

#worship + *{

    position:relative;

    z-index:10;

}

.worship-background{

    position:absolute;

    inset:0;

    background-image:url("../../assets/images/backgrounds/worship.webp");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1.08);

    z-index:0;

}

.worship-glow{

    position:absolute;

    left:50%;

    top:50%;

    width:900px;

    height:900px;

    transform:translate(-50%,-45%);

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(108,197,255,.38) 0%,

        rgba(108,197,255,.22) 28%,

        rgba(108,197,255,.08) 55%,

        transparent 78%

    );

    filter:blur(55px);

    pointer-events:none;

    z-index:1;

    animation:glowPulse 7s ease-in-out infinite;

}

@keyframes glowPulse{

    0%{

        transform:translate(-50%,-45%) scale(1);

        opacity:.75;

    }

    50%{

        transform:translate(-50%,-45%) scale(1.08);

        opacity:1;

    }

    100%{

        transform:translate(-50%,-45%) scale(1);

        opacity:.75;

    }

}

.worship-aqua{

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:min(900px,65vw);

    max-height:92vh;

    object-fit:contain;

    pointer-events:none;

    user-select:none;

    z-index:2;

    filter:

        drop-shadow(0 0 25px rgba(108,197,255,.45))

        drop-shadow(0 0 70px rgba(108,197,255,.18));

}

.worship-particles{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}

.worship-particle{

    position:absolute;

    border-radius:50%;

    background:white;

    box-shadow:

        0 0 6px rgba(255,255,255,.8),

        0 0 16px rgba(108,197,255,.55);

    pointer-events:none;

}

.worship-music{

    position:absolute;

    top:max(24px, env(safe-area-inset-top));
    right:max(28px, env(safe-area-inset-right));

    display:flex;

    align-items:center;

    gap:10px;

    padding:9px 12px;

    border:1px solid rgba(139,233,255,.2);

    border-radius:var(--radius-medium);

    background:rgba(3,18,34,.55);

    box-shadow:
        0 12px 36px rgba(0,0,0,.25),
        inset 0 0 18px rgba(75,163,255,.035);

    backdrop-filter:blur(13px);
    -webkit-backdrop-filter:blur(13px);

    z-index:8;

    opacity:.7;

    transition:
        opacity var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);

}

.worship-music:hover,
.worship-music:focus-within{

    opacity:1;

    border-color:rgba(139,233,255,.42);

    box-shadow:
        0 14px 42px rgba(0,0,0,.32),
        0 0 24px rgba(75,163,255,.12);

}

.worship-music-button{

    display:grid;

    width:38px;
    height:38px;

    flex:0 0 38px;

    padding:9px;

    place-items:center;

    border:1px solid rgba(129,197,255,.25);

    border-radius:11px;

    background:linear-gradient(145deg, rgba(16,50,83,.72), rgba(3,18,34,.62));

    color:var(--primary-light);

    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);

    cursor:pointer;

    transition:
        transform var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);

}

.worship-music-button svg{

    width:19px;
    height:19px;

    fill:currentColor;
    stroke:currentColor;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:1.4;

}

.worship-music-button:hover{

    transform:translateY(-1px);

    border-color:rgba(139,233,255,.6);

    background:linear-gradient(145deg, rgba(24,74,119,.88), rgba(7,35,61,.8));

    color:var(--secondary);

    box-shadow:0 0 17px rgba(75,163,255,.18);

}

.worship-music-button:active{

    transform:translateY(1px) scale(.97);

}

.worship-music-button:focus-visible,
.worship-volume input:focus-visible{

    outline:2px solid var(--secondary);
    outline-offset:3px;

}

.worship-volume{

    display:flex;

    align-items:center;

    gap:8px;

    padding-left:2px;

    color:var(--primary-light);

}

.worship-volume-icon{

    width:17px;

    text-align:center;

    font-size:1rem;

    text-shadow:0 0 10px rgba(139,233,255,.45);

}

.worship-volume input{

    --worship-volume:42%;

    width:92px;
    height:18px;

    margin:0;

    appearance:none;
    -webkit-appearance:none;

    background:transparent;

    cursor:pointer;

}

.worship-volume input::-webkit-slider-runnable-track{

    height:4px;

    border-radius:999px;

    background:linear-gradient(
        to right,
        var(--secondary) 0 var(--worship-volume),
        rgba(255,255,255,.16) var(--worship-volume) 100%
    );

    box-shadow:0 0 8px rgba(75,163,255,.2);

}

.worship-volume input::-moz-range-track{

    height:4px;

    border-radius:999px;

    background:linear-gradient(
        to right,
        var(--secondary) 0 var(--worship-volume),
        rgba(255,255,255,.16) var(--worship-volume) 100%
    );

    box-shadow:0 0 8px rgba(75,163,255,.2);

}

.worship-volume input::-webkit-slider-thumb{

    width:15px;
    height:15px;

    margin-top:-5.5px;

    appearance:none;
    -webkit-appearance:none;

    border:2px solid #d9f5ff;

    border-radius:50%;

    background:var(--primary);

    box-shadow:
        0 0 0 3px rgba(75,163,255,.14),
        0 0 12px rgba(139,233,255,.5);

}

.worship-volume input::-moz-range-thumb{

    width:12px;
    height:12px;

    border:2px solid #d9f5ff;

    border-radius:50%;

    background:var(--primary);

    box-shadow:
        0 0 0 3px rgba(75,163,255,.14),
        0 0 12px rgba(139,233,255,.5);

}

.visually-hidden{

    position:absolute !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;

    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;

    white-space:nowrap !important;

}

@keyframes particleFade{

    from{

        opacity:1;
        transform:translate(-50%,-50%) scale(1);

    }

    to{

        opacity:0;
        transform:translate(-50%,-50%) scale(.2);

    }

}

.worship-stats{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    width:min(900px,90vw);

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    z-index:5;

}

.worship-session,
.worship-total{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.worship-session{

    text-align:left;

}

.worship-total{

    text-align:right;

}

.worship-stats span{

    color:var(--text-muted);

    font-size:.9rem;

}

.worship-stats strong{

    font-size:2rem;

}

.worship-stats small{

    color:var(--primary-light);

    font-size:1rem;

}

@media (max-width:899px){

    .worship-music{

        top:calc(92px + env(safe-area-inset-top));
        right:max(14px, env(safe-area-inset-right));

        flex-direction:column;

        gap:9px;

        padding:9px;

        background:rgba(3,18,34,.46);

        opacity:.66;

    }

    .worship-music-button{

        width:44px;
        height:44px;

        flex-basis:44px;

        padding:11px;

    }

    .worship-volume{

        flex-direction:column;

        gap:5px;

        padding:2px 0 1px;

    }

    .worship-volume input{

        width:22px;
        height:88px;

        writing-mode:vertical-lr;
        direction:rtl;

    }

    .worship-volume input::-webkit-slider-runnable-track{

        width:4px;
        height:88px;

        background:linear-gradient(
            to top,
            var(--secondary) 0 var(--worship-volume),
            rgba(255,255,255,.16) var(--worship-volume) 100%
        );

    }

    .worship-volume input::-moz-range-track{

        width:4px;
        height:88px;

        background:linear-gradient(
            to top,
            var(--secondary) 0 var(--worship-volume),
            rgba(255,255,255,.16) var(--worship-volume) 100%
        );

    }

    .worship-volume input::-webkit-slider-thumb{

        margin-top:0;
        margin-left:-5.5px;

    }

}

@media (max-height:560px) and (max-width:899px){

    .worship-music{

        top:76px;

        gap:6px;

        padding:7px;

    }

    .worship-music-button{

        width:40px;
        height:40px;

        flex-basis:40px;

    }

    .worship-volume input,
    .worship-volume input::-webkit-slider-runnable-track,
    .worship-volume input::-moz-range-track{

        height:62px;

    }

}