:root {
            --bs-primary: #1677f2;
            --bs-primary-rgb: 22, 119, 242;
            --font-display: 'Inter', sans-serif;
            /* Estilo "glass" (mismo del panel): superficies translúcidas sobre un degradado pastel */
            --vidrio: rgba(255, 255, 255, .62);
            --vidrio-borde: rgba(255, 255, 255, .8);
            --vidrio-btn: rgba(255, 255, 255, .45);
            --vidrio-btn-hover: rgba(255, 255, 255, .85);
            --sombra: 0 8px 30px rgba(84, 92, 140, .14);
            --fondo-base: #eef1fb;
            --fondo-1: #fbd3de;
            --fondo-2: #cfe1ff;
            --fondo-3: #e4dcff;
        }
        [data-bs-theme="dark"] {
            --vidrio: rgba(34, 40, 66, .6);
            --vidrio-borde: rgba(255, 255, 255, .1);
            --vidrio-btn: rgba(255, 255, 255, .08);
            --vidrio-btn-hover: rgba(255, 255, 255, .18);
            --sombra: 0 8px 30px rgba(0, 0, 0, .35);
            --fondo-base: #0f1220;
            --fondo-1: #3a2140;
            --fondo-2: #14294d;
            --fondo-3: #2a2352;
        }

        body {
            font-family: var(--font-display);
            scroll-behavior: smooth;
        }
        /* Degradado fijo en una capa aparte (background-attachment: fixed falla en iOS) */
        body::before {
            content: ""; position: fixed; inset: 0; z-index: -1;
            background:
                radial-gradient(at 0% 0%, var(--fondo-1) 0, transparent 50%),
                radial-gradient(at 100% 0%, var(--fondo-2) 0, transparent 55%),
                radial-gradient(at 50% 100%, var(--fondo-3) 0, transparent 60%),
                var(--fondo-base);
        }

        /* Portada: Biblia 3D (controllers/ControllerBiblia.js).
           La sección es alta y su contenido "sticky": el scroll dentro de ella abre la Biblia. */
        .biblia { position: relative; height: 320vh; background: #07090f; }
        .biblia-sticky {
            position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
            background:
                radial-gradient(ellipse at 50% 62%, rgba(212, 175, 55, .16), transparent 60%),
                url("../resources/fondo.jpg") center/cover no-repeat,
                #07090f;
        }
        .biblia-logo { width: min(340px, 65vw); height: auto; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, .6)); }
        #biblia-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
        .biblia-overlay { position: absolute; inset: 0 0 auto; z-index: 2; padding-top: 4vh; }
        .biblia-overlay h1, .biblia-overlay h3 { letter-spacing: 2px; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
        .biblia-hint {
            position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2;
            display: flex; flex-direction: column; align-items: center; color: rgba(255, 255, 255, .75);
            font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; pointer-events: none;
        }
        .biblia-hint i { animation: biblia-rebote 1.6s ease-in-out infinite; }
        @keyframes biblia-rebote { 50% { transform: translateY(6px); } }
        @media (prefers-reduced-motion: reduce) { .biblia-hint i { animation: none; } }

        /* Versículo en texto: solo para lectores de pantalla, o visible si no hay WebGL */
        .biblia-fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
        .biblia.sin-webgl { height: auto; }
        .biblia.sin-webgl .biblia-sticky { position: relative; height: auto; min-height: 100vh; padding-bottom: 4rem; }
        .biblia.sin-webgl .biblia-overlay { position: relative; }
        .biblia.sin-webgl .biblia-hint, .biblia.sin-webgl #biblia-canvas { display: none; }
        .biblia.sin-webgl .biblia-fallback {
            position: relative; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
            max-width: 640px; margin: 3rem auto 0; padding: 2rem; border: 1px solid #b8892b; border-radius: 1rem;
            color: #f4ead3; font-family: Georgia, serif; font-size: 1.35rem; text-align: center; background: rgba(0, 0, 0, .35);
        }
        .biblia.sin-webgl .biblia-fallback cite { display: block; margin-top: 1rem; color: #e9c469; font-size: 1rem; }

        /* Navbar Blur */
        .navbar {
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            background-color: var(--vidrio);
            border-color: var(--vidrio-borde) !important;
            box-shadow: var(--sombra);
            transition: all 0.3s ease;
        }
        /* Portada: el navbar (fixed-top) empieza escondido y aparece al llegar a "Nuestras Sedes" (ControllerInicio.mostrarNavbar) */
        .navbar-inicio { transform: translateY(-100%); visibility: hidden; transition: transform .35s ease, visibility 0s linear .35s; }
        .navbar-inicio.visible { transform: none; visibility: visible; transition: transform .35s ease; }
        @media (prefers-reduced-motion: reduce) { .navbar-inicio, .navbar-inicio.visible { transition: none; } }
        /* Las secciones a las que llevan los enlaces del menú no quedan tapadas por el navbar */
        section[id] { scroll-margin-top: 80px; }

        /* WhatsApp Button */
        .btn-whatsapp {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #25d366;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            transition: transform 0.3s;
        }
        .btn-whatsapp:hover { transform: scale(1.1); color: white; }

        /* Borde de vidrio con sombra interior: las tarjetas de eventos usan .border-bottom.border-4, que engrosaría un borde real */
        .card {
            border: none; border-radius: 24px; overflow: hidden; transition: transform 0.3s;
            background: var(--vidrio); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            box-shadow: var(--sombra), inset 0 0 0 1px var(--vidrio-borde) !important;
        }
        .badge { --bs-badge-border-radius: 999px; }
        .card:hover { transform: translateY(-5px); }
        
        .video-container { border-radius: 2rem; overflow: hidden; position: relative; }
        .ultima-reunion-img { aspect-ratio: 16 / 9; display: block; transition: transform .5s; }

        .hover-link:hover span {
            transform: translateX(5px);
            transition: transform 0.3s ease;
        }

        .cursor-pointer { cursor: pointer; }
        .hover-scale:hover { transform: scale(1.1); transition: 0.3s; }
        .video-thumb-card:hover img { opacity: 1 !important; transition: 0.3s; }
        .object-fit-cover { object-fit: cover; }

        /* Estilo Polimorfismo iOS */
/* Glassmorphism: fondo translúcido con brillo diagonal, desenfoque del fondo, borde claro y reflejo interior arriba */
.btn-ios-glass, .btn-ios-primary {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn-ios-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}
.btn-ios-glass:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.16));
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 40px 0 rgba(0, 0, 0, 0.3);
    color: white;
}

/* Variante con tinte del color primario */
.btn-ios-primary {
    background: linear-gradient(135deg, rgba(22, 119, 242, 0.75), rgba(22, 119, 242, 0.4));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 32px 0 rgba(22, 119, 242, 0.35);
}
.btn-ios-primary:hover {
    background: linear-gradient(135deg, rgba(22, 119, 242, 0.9), rgba(22, 119, 242, 0.6));
    transform: translateY(-3px);
    color: white;
}

/* Enlaces del navbar como píldoras de vidrio */
.navbar .navbar-nav { gap: .5rem; }
.navbar .navbar-nav .nav-link {
    padding: .4rem 1.1rem; border-radius: 999px; font-weight: 600;
    background: var(--vidrio-btn); border: 1px solid var(--vidrio-borde);
    box-shadow: inset 0 1px 0 var(--vidrio-borde), 0 4px 14px rgba(84, 92, 140, .12);
    backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
    transition: background-color .25s, transform .25s;
}
.navbar .navbar-nav .nav-link:hover { background: var(--vidrio-btn-hover); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .btn-ios-glass, .btn-ios-primary, .navbar .navbar-nav .nav-link { transition: none; } }

.hover-zoom:hover {
            transform: scale(1.05);
        }
        .transition-all {
            transition: all 0.3s ease;
        }


        .parallax-service {
            position: relative;
            overflow: hidden; /* Corta el exceso de la imagen de fondo */
            min-height: 600px;
            display: flex;
            align-items: center;
        }

        .parallax-bg-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 130%; /* Más alto que el contenedor para permitir el movimiento */
            z-index: -1;
            /* --fondo: imagen de la serie de la última reunión (se pasa desde index.php) */
            background-image: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), var(--fondo, url('../resources/main-banner.jpg'));
            background-size: cover;
            background-position: center;
            will-change: transform;
        }

        /* Estilo para que el contenido resalte sobre el fondo */
        .video-card-glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 2rem;
        }