/* ========= RESET ========= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #030303; color: #e8d4a8; font-family: 'Cormorant Garamond', serif; overflow-x: hidden; position: relative; letter-spacing: .02em; }

/* ========= ATMÓSFERA DE FONDO ========= */
body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(122,59,255,.10), transparent 35%), radial-gradient(circle at 80% 70%, rgba(255,180,80,.06), transparent 30%), radial-gradient(circle at center, rgba(80,0,120,.10), transparent 60%); pointer-events: none; z-index: 0; animation: bgMove 18s ease-in-out infinite alternate; }

/* ========= POLVO CSS (capa de fondo sutil) ========= */
.cosmic-dust-ambient { position: fixed; inset: 0; pointer-events: none; z-index: 15; overflow: hidden; }
.cosmic-dust-ambient::before { content: ''; position: absolute; inset: -50%; background: radial-gradient(circle, rgba(200, 169, 107, 0.12) 0%, transparent 8px), radial-gradient(circle, rgba(176, 117, 230, 0.08) 0%, transparent 10px), radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 5px); background-size: 140px 180px, 220px 150px, 120px 140px; filter: blur(3px); animation: dustFloat 35s linear infinite; }
.cosmic-dust-ambient::after { content: ''; position: absolute; inset: -50%; background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 6px), radial-gradient(circle, rgba(255, 214, 120, 0.08) 0%, transparent 8px); background-size: 170px 200px, 250px 190px; filter: blur(2px); animation: dustFloatReverse 45s linear infinite; mix-blend-mode: screen; }

/* Capa extra fina */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 16; overflow: hidden; }
.particles::before { content: ''; position: absolute; inset: -50%; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 10px), radial-gradient(circle, rgba(200, 169, 107, 0.05) 0%, transparent 8px); background-size: 210px 240px, 160px 180px; filter: blur(2px); animation: particlePulse 8s ease-in-out infinite alternate; }

/* ========= HUMO (imágenes PNG originales mejoradas) ========= */
.mist-img { position: fixed; width: 90vw; max-width: 1000px; pointer-events: none; mix-blend-mode: screen; z-index: 14; filter: blur(15px); }
.mist-left-gold { left: -20%; bottom: -15%; animation: smokeDispersion 20s ease-in-out infinite; }
.mist-right-purple { right: -20%; top: -10%; animation: smokeDispersion 26s ease-in-out infinite; }

/* Textura de pergamino sutil */
.scroll-texture { background-image: radial-gradient(rgba(200,169,107,.08) 1px, transparent 1px); background-size: 28px 28px; }

/* ========= NAVBAR Y BOTONES ========= */
.navbar-mystic { background: transparent; border: none; box-shadow: none; transition: .4s; }
.logo-sello{ object-fit:contain; filter: drop-shadow(0 0 15px rgba(200,169,107,.35)) drop-shadow(0 0 35px rgba(109,40,217,.25)); }
.logo-sigilo{ font-family:'Cinzel', serif; letter-spacing:.4em; color:#f5e6c8; font-size:0.9rem; }
.logo-subsigilo{ font-family:'Cinzel', serif; color:#c8a96b; }
.nav-sendero{ position:relative; padding:8px 0; cursor:pointer; transition:.3s; font-family:'Cinzel', serif; font-size:0.65rem; letter-spacing:0.15em; }
.nav-sendero:hover{ color:#fff; }
.nav-sendero::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #c8a96b, transparent); transform: scaleX(0); transition: transform 0.3s ease; }
.nav-sendero:hover::after, .active-sendero::after { transform: scaleX(1); }
.active-sendero { color: #fff; }

/* ── Botón Login navbar (imagen 1 estilo: oscuro con borde dorado sutil) ── */
.btn-portal-login {
    position: relative;
    height: 36px;
    padding: 0 16px;
    border-radius: 9px;
    border: 1px solid rgba(200,169,107,0.35);
    background: linear-gradient(160deg, rgba(20,10,40,0.85) 0%, rgba(8,5,20,0.92) 100%);
    color: #f5e6c8;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.35s ease;
    box-shadow: 0 0 12px rgba(200,169,107,0.08), inset 0 0 8px rgba(0,0,0,0.4);
    white-space: nowrap;
}
.btn-portal-login::before {
    content: '✦';
    font-size: 0.55rem;
    color: #c8a96b;
    opacity: 0.85;
}
.btn-portal-login:hover {
    border-color: rgba(200,169,107,0.7);
    background: linear-gradient(160deg, rgba(30,14,60,0.95) 0%, rgba(12,6,28,0.98) 100%);
    color: #fff;
    box-shadow: 0 0 18px rgba(200,169,107,0.2), inset 0 0 12px rgba(109,40,217,0.1);
    transform: translateY(-1px);
}

/* ── Botón Registrarse navbar (imagen 1 estilo: fondo imagen dorado) ── */
.btn-portal-register {
    position: relative;
    width: 130px;
    height: 36px;
    background-image: url('../images/boton-fondo.jpg');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
    transition: all 0.4s ease;
    mix-blend-mode: screen;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    color: #f5e6c8;
    text-transform: uppercase;
    gap: 5px;
}
.btn-portal-register::before {
    content: '◈';
    font-size: 0.7rem;
    color: #f5e6c8;
}
.btn-portal-register:hover { transform: translateY(-2px); filter: contrast(1.35) brightness(1.3); }

/* ── Botones del VELO (tamaño completo, estilo imagen 1) ── */
.btn-velo-login {
    position: relative;
    width: 100%;
    max-width: 220px;
    height: 50px;
    background: url('../images/boton-fondo.jpg') center/100% 100% no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: #f5e6c8;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    filter: brightness(0.82) saturate(0.65);
    transition: all 0.4s ease;
}
.btn-velo-login:hover {
    transform: translateY(-2px);
    filter: brightness(1.05) saturate(0.85);
}
.btn-velo-register {
    position: relative;
    width: 100%;
    max-width: 220px;
    height: 50px;
    background: url('../images/boton-fondo.jpg') center/100% 100% no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: #f5e6c8;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    transition: all 0.4s ease;
}
.btn-velo-register:hover {
    transform: translateY(-2px);
    filter: contrast(1.35) brightness(1.3);
}

/* ── Link "Volver al inicio" del velo ── */
.volver-inicio-link {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}
.volver-inicio-img {
    height: 44px;
    width: auto;
    mix-blend-mode: screen;
    display: block;
    transition: filter 0.35s ease;
    filter: brightness(0.9);
}
.volver-inicio-link:hover { transform: translateY(-5px) scale(1.05); }
.volver-inicio-link:hover .volver-inicio-img {
    filter: brightness(1.4) drop-shadow(0 0 14px rgba(200,169,107,0.85)) drop-shadow(0 0 28px rgba(176,117,230,0.4));
}
.volver-inicio-link:active { transform: translateY(-2px) scale(1.02); }

/* ── Estructura interna del velo (reutilizable) ── */
.velo-card {
    background: linear-gradient(160deg, #0d0620 0%, #1a0535 55%, #080212 100%);
    border: 1px solid rgba(200,169,107,0.3);
    border-radius: 24px;
    box-shadow: 0 0 80px rgba(109,40,217,0.3), inset 0 0 60px rgba(0,0,0,0.6);
    padding: clamp(28px,5vw,56px) clamp(18px,4vw,44px) clamp(24px,4vw,48px);
    position: relative;
    width: 100%;
    max-width: 480px;
    text-align: center;
}
.velo-corner { position:absolute; width:28px; height:28px; }
.velo-corner-tl { top:14px; left:14px; border-top:1px solid rgba(200,169,107,0.7); border-left:1px solid rgba(200,169,107,0.7); border-radius:4px 0 0 0; }
.velo-corner-tr { top:14px; right:14px; border-top:1px solid rgba(200,169,107,0.7); border-right:1px solid rgba(200,169,107,0.7); border-radius:0 4px 0 0; }
.velo-corner-bl { bottom:14px; left:14px; border-bottom:1px solid rgba(200,169,107,0.7); border-left:1px solid rgba(200,169,107,0.7); border-radius:0 0 0 4px; }
.velo-corner-br { bottom:14px; right:14px; border-bottom:1px solid rgba(200,169,107,0.7); border-right:1px solid rgba(200,169,107,0.7); border-radius:0 0 4px 0; }
.velo-acciones { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:260px; margin:0 auto; }

/* ── Velo responsive móvil ── */
@media (max-width: 480px) {
    .velo-card { margin: 0 12px; }
    .velo-logo { width:64px !important; height:64px !important; }
    .velo-titulo { font-size:1rem !important; letter-spacing:0.16em !important; }
    .velo-subtitulo { font-size:0.95rem !important; }
    .velo-acciones { flex-direction:column !important; align-items:center !important; gap:12px !important; width:100% !important; max-width:240px !important; }
    .btn-velo-login, .btn-velo-register { width:100% !important; max-width:220px !important; }
}

/* ── Navbar botones móvil (en menú desplegable) ── */
@media (max-width: 1023px) {
    .btn-portal-login { height: 42px; width: 200px; font-size: 0.65rem; }
    .btn-portal-register { height: 42px; width: 200px; font-size: 0.65rem; }
}

/* ========= HERO Y ANIMACIÓN MÁGICA ========= */
#hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(109,40,217,.12), transparent 50%); z-index: 1; pointer-events: none; }
.container-spy-image{ mix-blend-mode:screen; animation:heroBreath 8s ease-in-out infinite; }
.mask-circular-glow{ mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 30%, transparent 75%); }
.btn-imagen-oraculo { position: relative; height: 75px; background-image: url('../images/boton-fondo.jpg'); background-position: center; background-repeat: no-repeat; border: none; background-color: transparent; transition: all 0.4s ease; mix-blend-mode: screen; border-radius: 16px; -webkit-mask-image: radial-gradient(ellipse at center, black 85%, transparent 100%); mask-image: radial-gradient(ellipse at center, black 85%, transparent 100%); }
.btn-imagen-oraculo:hover { transform: translateY(-3px); filter: contrast(1.35) brightness(1.3); box-shadow: 0 10px 25px rgba(140, 75, 210, 0.4); }

/* ========= ANIMACIÓN INTEGRADA: SIGILO Y LIBRO ========= */
.contenedor-magico { animation: brilloSincronizado 8s ease-in-out infinite; }
.sigilo-flotante { position: absolute; bottom: 240px; left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; animation: aparecerDesaparecer 8s ease-in-out infinite; mix-blend-mode: screen; width: 405px !important; height: auto !important; }

@keyframes brilloSincronizado {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0px rgba(200,169,107,0)); }
    40%, 60% { filter: brightness(1.8) drop-shadow(0 0 50px rgba(255, 215, 0, 0.7)); }
}

@keyframes aparecerDesaparecer {
    0%, 100% { opacity: 0; transform: translateX(-50%) scale(0.9); }
    40%, 60% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* ========= TEXTOS Y CHAT ========= */
.text-shine-gold { background: linear-gradient(110deg, #c8a96b 20%, #f5e6c8 40%, #ffffff 50%, #f5e6c8 60%, #c8a96b 80%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; animation: textShine 3s linear infinite; display: inline-block; background-size: 200% auto !important; }
.text-shine-purple { background: linear-gradient(110deg, #794db5 20%, #a678eb 40%, #e2caff 50%, #a678eb 60%, #794db5 80%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; animation: textShine 3s linear infinite; display: inline-block; background-size: 200% auto !important; }
.text-shine-silver { background: linear-gradient(110deg, #8e96a0 20%, #d4d9de 40%, #ffffff 50%, #d4d9de 60%, #8e96a0 80%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; animation: textShine 3s linear infinite; display: inline-block; background-size: 200% auto !important; }
.chat-esoterico-container { max-height: 450px; overflow-y: auto; padding-right: 15px; }
.chat-esoterico-container::-webkit-scrollbar { width: 6px; }
.chat-esoterico-container::-webkit-scrollbar-track { background: rgba(10, 10, 10, 0.5); border-radius: 10px; }
.chat-esoterico-container::-webkit-scrollbar-thumb { background: rgba(140, 75, 210, 0.4); border-radius: 10px; }

/* ========= BIBLIOTECA, PLANES Y RESPONSIVE ========= */
.titulo-arcano{ font-family:'Cinzel Decorative', serif; letter-spacing:.12em; color:#d7b271; }
.grimoire-talisman{ background: linear-gradient(180deg, rgba(10,10,10,.7), rgba(0,0,0,.95)); border:1px solid rgba(200,169,107,.08); transition:.45s; }
.grimoire-talisman:hover{ transform:translateY(-10px); border-color:rgba(168,85,247,.4); }
@media(max-width:1024px){ .price-arcane{ font-size:3rem; } }
@media(max-width:768px){ .voto-talisman{ padding:38px 28px; } .mist-img{ width:350px; } }

/* ========= KEYFRAMES ========= */
@keyframes dustFloat { from { transform: translateY(0) translateX(0); } to { transform: translateY(-300px) translateX(150px); } }
@keyframes dustFloatReverse { from { transform: translateY(0) translateX(0); } to { transform: translateY(250px) translateX(-150px); } }
@keyframes smokeDispersion { 0% { opacity: 0; transform: scale(0.8) translateY(40px); } 25% { opacity: 0.5; transform: scale(1) translateY(0); } 60% { opacity: 0.5; transform: scale(1.3) translateY(-30px); } 90% { opacity: 0; transform: scale(1.6) translateY(-70px); } 100% { opacity: 0; transform: scale(0.8) translateY(40px); } }
@keyframes particlePulse { 0%,100% { opacity:.15; } 50% { opacity:.4; } }
@keyframes heroBreath { 0% { transform: translate(-50%,-50%) scale(.96); } 50% { transform: translate(-50%,-50%) scale(1.03); } 100% { transform: translate(-50%,-50%) scale(.96); } }
@keyframes bgMove { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes textShine { to { background-position: -200% center; } }

/* ========= CHAT ESTILIZADO ========= */
.oracle-response {
    background-color: #050505 !important;
    border: 1px solid rgba(200, 169, 107, 0.3);
    color: #f5e6c8 !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
}

.typing-indicator { display: flex; gap: 4px; padding: 10px; margin-left: 10px; }
.dot { width: 8px; height: 8px; background: #c8a96b; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.animate-fadeIn { animation: fadeIn 0.3s ease-out forwards; }

/* ========= PLANES Y PRECIOS ========= */
.voto-talisman {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.85) 0%, rgba(3, 3, 3, 0.98) 100%);
    border: 1px solid rgba(200, 169, 107, 0.15);
    border-radius: 2rem;
    padding: 45px 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.voto-talisman:hover { transform: translateY(-10px); border-color: rgba(200, 169, 107, 0.6); box-shadow: 0 0 30px rgba(200, 169, 107, 0.25), inset 0 0 20px rgba(109, 40, 217, 0.2); }
.featured-voto { border-color: rgba(200, 169, 107, 0.4); box-shadow: 0 0 25px rgba(200, 169, 107, 0.15); }
.featured-voto:hover { border-color: rgba(200, 169, 107, 0.9); box-shadow: 0 0 40px rgba(200, 169, 107, 0.4), inset 0 0 25px rgba(109, 40, 217, 0.35); }
.voto-talisman h3 { font-family: 'Cinzel', serif; font-size: 1.4rem; letter-spacing: 0.15em; color: #f5e6c8; margin-bottom: 1.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.price-arcane { font-family: 'Cinzel', serif; font-size: 3.5rem; font-weight: 600; color: #c8a96b; margin-bottom: 2rem; display: flex; align-items: baseline; gap: 4px; text-shadow: 0 2px 10px rgba(200, 169, 107, 0.2); }
.price-arcane span { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: #9ca3af; font-style: italic; letter-spacing: normal; }
.lista-misterios { list-style: none; width: 100%; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 0.8rem; }
.lista-misterios li { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: #e8d4a8; opacity: 0.85; position: relative; padding-left: 1.5rem; }
.lista-misterios li::before { content: '✦'; position: absolute; left: 0; color: #c8a96b; font-size: 0.8rem; top: 1px; }
.Featured-Badge { position: absolute; top: 20px; right: 20px; background: linear-gradient(135deg, #8b7d4f, #c8a96b); color: #030303; font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; padding: 4px 10px; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.4); }

.btn-purpura-mystic { padding: 12px 24px; border-radius: 12px; border: 1px solid rgba(109, 40, 217, 0.4); background: rgba(36, 0, 70, 0.3); color: #e8d4a8; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.2em; transition: all 0.3s ease; cursor: pointer; }
.btn-purpura-mystic:hover { background: #6d28d9; color: #fff; box-shadow: 0 0 15px rgba(109, 40, 217, 0.5); transform: translateY(-2px); }
.btn-conjuracion-send-gold { width: 100%; padding: 12px 24px; border-radius: 12px; border: 1px solid #c8a96b; background: linear-gradient(135deg, #c8a96b 0%, #8b7d4f 100%); color: #030303; font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; transition: all 0.3s ease; cursor: pointer; box-shadow: 0 4px 15px rgba(200, 169, 107, 0.2); }
.btn-conjuracion-send-gold:hover { transform: translateY(-2px); filter: brightness(1.2); box-shadow: 0 6px 20px rgba(200, 169, 107, 0.4); }

@keyframes pulse-slow { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.02); filter: brightness(1.15); } }
.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }

#chat-messages::-webkit-scrollbar { width: 4px; }
#chat-messages::-webkit-scrollbar-thumb { background: #c8a96b; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #4c1d95; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(10, 10, 10, 0.5); }

/* ========= CANVAS (generados por misticismo.js) ========= */
#mystic-particles-canvas {
    position: fixed;
    inset: 0;
    z-index: 17;
    pointer-events: none;
}
#mystic-smoke-canvas {
    position: fixed;
    inset: 0;
    z-index: 13;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Ajuste general para que imágenes decorativas no generen scroll horizontal accidental */
img[role="presentation"],
.mist-img,
.container-spy-image,
.sigilo-flotante,
.vela-container {
    max-inline-size: none;
}

/* =========================================================
   FIX FINAL DE POSICIÓN VISUAL - OCULTISMO
   Objetivo: conservar el diseño original en pantallas grandes
   sin mover las imágenes decorativas fuera de su composición.
   ========================================================= */

:root {
    --site-max-width: 1500px;
}

/* Fondo de humo: decorativo, no empuja contenido */
.mist-img {
    pointer-events: none;
    max-width: none;
}

@media (min-width: 1400px) {
    .mist-img {
        width: 90vw !important;
        max-width: 1000px !important;
    }

    .mist-left-gold {
        left: -20% !important;
        bottom: -15% !important;
    }

    .mist-right-purple {
        right: -20% !important;
        top: -10% !important;
    }
}

/* INDEX - libro y símbolo como en el diseño original */
@media (min-width: 1280px) {
    .contenedor-magico {
        width: 520px !important;
        height: 600px !important;
        transform: translateX(2.5rem) !important;
    }

    .contenedor-magico > img[alt="Grimorio Abierto"] {
        width: 520px !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .sigilo-flotante {
        width: 405px !important;
        bottom: 240px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

@media (min-width: 1800px) {
    .contenedor-magico {
        transform: translateX(2.5rem) !important;
    }

    .contenedor-magico > img[alt="Grimorio Abierto"] {
        width: 520px !important;
    }

    .sigilo-flotante {
        width: 405px !important;
        bottom: 240px !important;
    }
}

/* CALENDARIO - círculos zodiacales de fondo lateral */
@media (min-width: 1280px) {
    img[src$="astro.png"].absolute,
    .decor-astro-left {
        left: -120px !important;
        top: 4rem !important;
        width: 450px !important;
        height: 450px !important;
        opacity: 0.35 !important;
    }

    img[src$="calendariomistico.png"].absolute,
    .decor-astro-right {
        right: -120px !important;
        top: 4rem !important;
        width: 450px !important;
        height: 450px !important;
        opacity: 0.35 !important;
    }
}

@media (min-width: 1800px) {
    img[src$="astro.png"].absolute,
    .decor-astro-left {
        left: -80px !important;
    }

    img[src$="calendariomistico.png"].absolute,
    .decor-astro-right {
        right: -80px !important;
    }
}

/* VISTA FLIPBOOK - velas como diseño original */
@media (min-width: 1201px) {
    .vela-left {
        left: 40px !important;
    }

    .vela-right {
        right: 40px !important;
    }

    .vela-img {
        height: 75vh !important;
        max-height: 550px !important;
        width: auto !important;
    }

    #viewport {
        padding-left: 140px !important;
        padding-right: 140px !important;
    }
}

@media (min-width: 1800px) {
    .vela-left {
        left: 70px !important;
    }

    .vela-right {
        right: 70px !important;
    }

    .vela-img {
        max-height: 560px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   IMAGEN "EL SAGRARIO PROHIBIDO" CON BRILLO INTERMITENTE
   ═══════════════════════════════════════════════════════════ */
.sagrario-img {
    height: 14px;
    width: auto;
    display: block;
    margin-top: 3px;
    mix-blend-mode: screen;
    filter: brightness(0.95) drop-shadow(0 0 2px rgba(200,169,107,0.3));
    animation: sagrarioBrillo 15s ease-in-out infinite;
}
@media (min-width: 1024px) {
    .sagrario-img { height: 35px; }
}
@keyframes sagrarioBrillo {
    0%, 100%   { filter: brightness(0.9) drop-shadow(0 0 2px rgba(200,169,107,0.25)); }
    8%         { filter: brightness(1.55) drop-shadow(0 0 10px rgba(245,230,200,0.9)) drop-shadow(0 0 18px rgba(200,169,107,0.55)); }
    16%        { filter: brightness(0.95) drop-shadow(0 0 3px rgba(200,169,107,0.3)); }
    40%        { filter: brightness(1.05) drop-shadow(0 0 4px rgba(200,169,107,0.4)); }
}

/* Bloque de sesión (email + cerrar sesión) más compacto y separado del menú */
#auth-container-pc { margin-left: 1.5rem; }
.auth-email-mini {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 0.12em;
    color: #c8a96b;
    opacity: 0.75;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn-cerrar-mini {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #f5e6c8;
    padding: 7px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(109,40,217,0.3), rgba(76,29,149,0.25));
    border: 1px solid rgba(176,117,230,0.4);
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}
.btn-cerrar-mini:hover {
    box-shadow: 0 0 16px rgba(109,40,217,0.5);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   MEJORAS VISUALES — paquete vistosidad
   ═══════════════════════════════════════════════════════════ */

/* 1) ANIMACIÓN DE APARICIÓN AL HACER SCROLL */
.reveal-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Retardo escalonado para grupos (tarjetas) */
.reveal-scroll.delay-1 { transition-delay: 0.10s; }
.reveal-scroll.delay-2 { transition-delay: 0.20s; }
.reveal-scroll.delay-3 { transition-delay: 0.30s; }
.reveal-scroll.delay-4 { transition-delay: 0.40s; }
.reveal-scroll.delay-5 { transition-delay: 0.50s; }
@media (prefers-reduced-motion: reduce) {
    .reveal-scroll { opacity: 1; transform: none; transition: none; }
}

/* 2 + 3) TARJETAS DE LIBROS: contraste + hover rico con halo dorado */
.grimoire-talisman {
    position: relative;
    border: 1px solid rgba(200,169,107,0.22) !important;
    background: linear-gradient(160deg, rgba(18,10,34,0.9), rgba(10,10,12,0.95)) !important;
    transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.45s ease,
                border-color 0.45s ease !important;
}
.grimoire-talisman::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 35%, rgba(200,169,107,0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 1;
}
.grimoire-talisman:hover {
    transform: translateY(-10px) !important;
    border-color: rgba(200,169,107,0.55) !important;
    box-shadow: 0 18px 50px rgba(109,40,217,0.32),
                0 0 34px rgba(200,169,107,0.28) !important;
}
.grimoire-talisman:hover::after { opacity: 1; }
.grimoire-talisman:hover h3 {
    text-shadow: 0 0 14px rgba(200,169,107,0.5);
    transition: text-shadow 0.4s ease;
}
.grimoire-talisman img { transition: transform 0.7s cubic-bezier(0.22,1,0.36,1) !important; }

/* (La respiración del hero usa heroBreath original en .container-spy-image) */

/* 5) SEPARADORES ORNAMENTALES entre secciones */
.separador-mistico {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    pointer-events: none;
}
.separador-mistico img {
    height: 46px;
    width: auto;
    opacity: 0.7;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 8px rgba(200,169,107,0.35));
}

/* 6) PLAN DESTACADO (Oro) con etiqueta "Más popular" */
.plan-destacado {
    position: relative;
    border: 1.5px solid rgba(200,169,107,0.6) !important;
    box-shadow: 0 0 40px rgba(200,169,107,0.2), inset 0 0 30px rgba(109,40,217,0.1) !important;
}
.plan-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #c8a96b, #8b7d4f);
    color: #0a0a0c;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(200,169,107,0.4);
    z-index: 5;
}

/* 7) MICROINTERACCIÓN: barrido de luz en botones */
.btn-barrido {
    position: relative;
    overflow: hidden;
}
.btn-barrido::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(245,230,200,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.btn-barrido:hover::before { left: 130%; }

/* 8) CURSOR TEMÁTICO en zonas clave */
.cursor-mistico {
    cursor: url('../images/sfavorito.png') 12 12, auto;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE PANTALLAS GRANDES Y TV (24" a 40"+)
   Cubre: 1366x768 (HD), 1920x1080 (Full HD) y 4K
   ═══════════════════════════════════════════════════════════ */

/* --- NAVBAR: rango donde el menú aprieta (TV HD ~1280-1500px) --- */
@media (min-width: 1024px) and (max-width: 1500px) {
    /* El contenedor del nav puede usar todo el ancho disponible en este rango,
       no quedarse limitado a 1500px que es lo que provoca el desborde. */
    nav > div { max-width: 100% !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

    #nav-links-container { gap: 0.85rem !important; margin-left: 1rem !important; }
    #nav-links-container .nav-sendero { font-size: 0.62rem !important; letter-spacing: 0.08em !important; white-space: nowrap; }

    /* Bloque de autenticación: nunca se encoge y nunca empuja el menú fuera de pantalla */
    #auth-container-pc { gap: 0.5rem !important; flex-shrink: 0 !important; }

    /* Botones de login/registro (estado SIN sesión) */
    .btn-portal-login { padding: 0 10px !important; font-size: 0.68rem !important; height: 40px !important; }
    .btn-portal-register { width: 120px !important; height: 40px !important; }
    .btn-portal-register span { font-size: 0.68rem !important; margin-left: 0 !important; }

    /* Estado CON sesión: el nombre de usuario + plan se trunca si es muy largo,
       en vez de empujar todo el navbar fuera del borde (causa del bug al iniciar sesión). */
    #auth-container-pc > span {
        max-width: 150px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.6rem !important;
    }

    .logo-sello { width: 46px !important; height: 46px !important; }
    .sagrario-img { height: 18px !important; }
}

/* --- NAVBAR en pantallas grandes (>1500px, ej. monitores 24"+): dar más ancho
   para que los 9 enlaces + el bloque de sesión respiren y no se peguen al borde. --- */
@media (min-width: 1501px) {
    nav > div { max-width: 1760px !important; }
    #auth-container-pc { flex-shrink: 0 !important; }
    #auth-container-pc > span {
        max-width: 220px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* --- HERO en pantallas de POCA ALTURA (1366x768 típico TV 32" HD) --- */
@media (min-width: 1024px) and (max-height: 800px) {
    #hero { min-height: auto !important; padding-top: 100px !important; padding-bottom: 40px !important; }
    #hero .container-spy-image { width: 480px !important; height: 480px !important; }
    #hero h1 { font-size: 2.2rem !important; line-height: 1.25 !important; }
}

/* --- PANTALLAS MUY GRANDES Y 4K: ampliar el contenedor central --- */
@media (min-width: 1800px) {
    nav > div { max-width: 1700px !important; }
    #hero > div, #library .max-w-6xl, #plans .max-w-6xl, footer .max-w-7xl { max-width: 1500px !important; }
}
@media (min-width: 2400px) {
    /* En 4K, evitar que todo quede en una franja diminuta al centro */
    nav > div { max-width: 2000px !important; }
    #hero > div { max-width: 1800px !important; }
    body { font-size: 1.15rem; }
}

/* ═══════════════════════════════════════════════════════════
   CORRECCIONES MÓVIL COMPLETAS — RESPONSIVE FIX
   Cubre: navbar, hamburguesa, menú móvil, imágenes, hero,
   tarjetas, secciones — todos los breakpoints < 1024px
   ═══════════════════════════════════════════════════════════ */

/* ── NAVBAR MÓVIL ──────────────────────────────────────── */
@media (max-width: 1023px) {
  nav .flex.items-center.justify-between {
    position: relative;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  /* Logo: nunca se solapa */
  nav .logo-sello {
    width: 44px !important;
    height: 44px !important;
  }
  nav .logo-sigilo {
    font-size: 1.1rem !important;
    letter-spacing: 0.22em !important;
  }
  nav .sagrario-img {
    height: 12px !important;
  }

  /* Botón hamburguesa: siempre visible y a la derecha */
  #menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.6rem !important;
    padding: 0 !important;
    line-height: 1;
    z-index: 51;
    flex-shrink: 0;
  }

  /* Links de escritorio: ocultos en móvil sin excepción */
  #nav-links-container {
    display: none !important;
  }
  #auth-container-pc {
    display: none !important;
  }
}

/* ── MENÚ MÓVIL (overlay) ──────────────────────────────── */
#mobile-menu {
  /* Garantiza flex-col aunque Tailwind diga hidden/flex */
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  /* "safe center": centra si cabe, pero si desborda arranca desde el inicio
     en vez de recortar contenido por ambos lados sin forma de alcanzarlo */
  justify-content: safe center !important;
  gap: 0 !important;          /* controlado con space-y-8 de Tailwind */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: 100dvh;
  padding: 72px 0 32px !important; /* espacio para no pegar al botón ✕ ni al borde inferior */
  box-sizing: border-box;
}
#mobile-menu.visible,
#mobile-menu:not(.hidden) {
  display: flex !important;
}

/* Links del menú: uno debajo del otro, centrados */
#mobile-menu a,
#mobile-menu span.mobile-link,
#mobile-menu span[data-scroll] {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0.55rem 1.5rem !important;
  font-size: 1rem !important;
  letter-spacing: 0.22em !important;
  color: #c8a96b;
  cursor: pointer;
  transition: color 0.25s;
  text-decoration: none;
}
#mobile-menu a:hover,
#mobile-menu span.mobile-link:hover,
#mobile-menu span[data-scroll]:hover {
  color: #ffffff;
}

@media (max-width: 480px) {
  #mobile-menu.space-y-8 > * + * {
    margin-top: 1.1rem !important; /* en vez de 2rem (space-y-8) */
  }
  #mobile-menu a,
  #mobile-menu span.mobile-link,
  #mobile-menu span[data-scroll] {
    font-size: 0.95rem !important;
    padding: 0.4rem 1.5rem !important;
  }
}

/* Botones auth dentro del menú */
#mobile-menu #auth-container-mobile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-top: 1.5rem !important;
  width: 100%;
}
#mobile-menu #auth-container-mobile .btn-portal-login,
#mobile-menu #auth-container-mobile .btn-portal-register {
  width: 200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── HERO (index) ──────────────────────────────────────── */
@media (max-width: 767px) {
  /* Imagen central circular: no sobresale del contenedor */
  .container-spy-image {
    width: 280px !important;
    height: 280px !important;
    opacity: 0.25 !important;
  }

  /* Blur decorativo */
  .absolute.rounded-full.blur-\[70px\] {
    width: 260px !important;
    height: 260px !important;
  }

  /* Grimorio (libro) en el hero */
  .contenedor-magico {
    width: 240px !important;
    height: 220px !important;
    transform: none !important;
  }
  .contenedor-magico > img[alt="Grimorio Abierto"] {
    width: 240px !important;
  }
  .sigilo-flotante {
    width: 160px !important;
    bottom: 140px !important;
  }

  /* Sección hero: no desborda horizontalmente */
  #hero {
    padding-top: 100px !important;
    padding-bottom: 2rem !important;
    overflow-x: hidden !important;
  }
  #hero > .max-w-7xl {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Columna derecha del hero (grimorio): menos altura */
  #hero .relative.w-full.lg\:w-1\/2.h-\[300px\] {
    height: 220px !important;
  }
}

/* ── IMÁGENES DECORATIVAS: NO SOBRESALEN ──────────────── */
@media (max-width: 1023px) {
  /* Niebla/humo: fuera de pantalla suavemente */
  .mist-img {
    width: 200px !important;
    filter: blur(20px) !important;
    opacity: 0.3 !important;
  }
  .mist-left-gold {
    left: -80px !important;
    bottom: -30px !important;
  }
  .mist-right-purple {
    right: -80px !important;
    top: -30px !important;
  }

  /* Imágenes absolutas de calendario (astro / calendariomistico) */
  img[src$="astro.png"].absolute,
  img[src$="calendariomistico.png"].absolute {
    display: none !important;
  }

  /* Velas del flipbook */
  .vela-left,
  .vela-right {
    display: none !important;
  }
  #viewport {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ── TARJETAS DE LIBROS ───────────────────────────────── */
@media (max-width: 639px) {
  .grimoire-talisman {
    border-radius: 1rem !important;
  }
  .grimoire-talisman .overflow-hidden {
    height: 240px !important;
  }
}

/* ── PLANES / PRICING ─────────────────────────────────── */
@media (max-width: 767px) {
  .voto-talisman {
    padding: 28px 20px !important;
    text-align: center !important;
  }
  .price-arcane {
    font-size: 2.5rem !important;
    justify-content: center !important;
  }
  .lista-misterios {
    align-items: center !important;
  }
  #plans .grid {
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── CALENDARIO LUNAR ─────────────────────────────────── */
@media (max-width: 767px) {
  /* Header de mes / navegación */
  #month-display {
    font-size: 1rem !important;
    min-width: 130px !important;
    letter-spacing: 0.1em !important;
  }

  /* Grid del calendario: 7 columnas compactas */
  #calendar-grid {
    gap: 2px !important;
  }
  #calendar-grid > div {
    min-height: 52px !important;
    padding: 4px !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
  }

  /* Leyendas de fases lunares */
  .flex.flex-wrap.justify-center.gap-6 {
    gap: 0.5rem !important;
  }
}

/* ── CHAT / ORÁCULO ───────────────────────────────────── */
@media (max-width: 767px) {
  .chat-esoterico-container {
    max-height: 320px !important;
    padding-right: 6px !important;
  }
  /* Input de texto del chat */
  #user-input,
  textarea#user-input {
    font-size: 1rem !important;
  }
}

/* ── FOOTER ───────────────────────────────────────────── */
@media (max-width: 767px) {
  footer .grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  footer .flex.flex-col.space-y-4 {
    align-items: center !important;
  }
  footer ul {
    align-items: center !important;
  }
  footer input[type="email"] {
    max-width: 100% !important;
  }
}

/* ── TÍTULOS / TIPOGRAFÍA GLOBAL ──────────────────────── */
@media (max-width: 480px) {
  .titulo-arcano {
    font-size: 1.6rem !important;
    letter-spacing: 0.06em !important;
  }
  h1.font-cinzel {
    font-size: 1.7rem !important;
    line-height: 1.3 !important;
  }
  /* Texto brillante del hero */
  .text-shine-gold,
  .text-shine-purple {
    font-size: inherit !important;
  }
}

/* ── OVERFLOW GENERAL ─────────────────────────────────── */
@media (max-width: 1023px) {
  body {
    overflow-x: hidden !important;
  }
  /* Cualquier elemento absoluto que pueda romper el ancho */
  .absolute {
    max-width: 100vw;
  }
}

/* ═══════════════════════════════════════════════════════════
   INDEX HERO — FIX ESPECÍFICO (imagen no se monta sobre texto)
   ═══════════════════════════════════════════════════════════ */

/* Sigilo flotante en móvil: más pequeño y no sale de su contenedor */
@media (max-width: 767px) {
  .sigilo-flotante {
    width: 130px !important;
    bottom: 110px !important;
  }
  .contenedor-magico {
    width: 200px !important;
    height: 185px !important;
    transform: none !important;
  }
  .contenedor-magico > img[alt="Grimorio Abierto"] {
    width: 200px !important;
  }
}

/* En sm (≥ 640px) pero aún no lg: tamaño medio */
@media (min-width: 640px) and (max-width: 1023px) {
  .sigilo-flotante {
    width: 200px !important;
    bottom: 190px !important;
  }
  .contenedor-magico {
    width: 300px !important;
    height: 280px !important;
    transform: none !important;
  }
  .contenedor-magico > img[alt="Grimorio Abierto"] {
    width: 300px !important;
  }
}

/* container-spy-image (imagen circular) NUNCA visible en < 1024px */
@media (max-width: 1023px) {
  .container-spy-image {
    display: none !important;
  }
}