* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box !important; 
}

/* ================= VARIABLES ================= */
:root {
    --bg-dark: #050505;
    --neon-green: #39ff14;
    --neon-purple: #8a2be2;
    --text-light: #f4f4f4;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(57, 255, 20, 0.2);
    --neon-purple: #9d00ff;
}

html { scroll-behavior: smooth; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-light);
    overflow-x: hidden;
    
    /* Fondo principal: Espacio Profundo (Unsplash) con overlay oscuro */
    background-image: linear-gradient(rgba(5, 5, 5, 0.7), rgba(5, 5, 5, 0.7)), url('https://images.unsplash.com/photo-1506318137071-a8e063b4bec0?q=80&w=1920&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
}

/* ================= UTILITIES & GLASSMORPHISM ================= */
.hidden { display: none !important; }

a { text-decoration: none; color: var(--text-light); transition: color 0.3s ease; }
a:hover { color: var(--neon-green); }
ul { list-style: none; }

.nav-links { display: flex; gap: 30px; align-items: center; }
.music-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: white; transition: transform 0.2s; }
.music-btn:hover { transform: scale(1.1); }

#hero { 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    padding: 140px 20px 40px; 
}

.hero-content { 
    max-width: 900px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    align-items: center;
    text-align: center; 
}

.trust-badge { 
    display: inline-block; 
    padding: 8px 20px; 
    border: 1px solid var(--neon-green); 
    border-radius: 30px; 
    color: var(--neon-green); 
    font-size: 0.9rem; 
    letter-spacing: 2px; 
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.2) inset;
}

.glitch-text { 
    font-size: clamp(3rem, 7vw, 6rem); 
    font-weight: 800; 
    line-height: 1.1; 
    text-shadow: 0 0 20px rgba(57, 255, 20, 0.4); 
    letter-spacing: -2px;
}

#hero h2 { 
    font-size: clamp(1.8rem, 4vw, 3rem); 
    color: var(--neon-purple); 
    text-shadow: 0 0 15px var(--neon-purple); 
    margin-bottom: 10px;
}

#hero p { 
    font-size: clamp(1rem, 2vw, 1.3rem); 
    color: #ddd; 
    max-width: 600px;
    line-height: 1.6;
}

.glass-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 9999;
}

.glass-nav {
    position: fixed; width: 100%; top: 0;
    padding: 20px 50px;
    background: rgba(5, 5, 5, 0.5);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    display: flex; justify-content: space-between; align-items: center;
    z-index: 1000;
}

/* ================= ANIMACIONES & ASSETS FLOTANTES ================= */
.floating-alien {
    max-width: 300px; 
    max-height: 40vh; 
    object-fit: contain;
    filter: drop-shadow(0 0 25px rgba(57, 255, 20, 0.4)); 
    animation: levitate 4s ease-in-out infinite; 
    margin-bottom: 10px;
}

@keyframes levitate {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* ================= TYPOGRAPHY & NEON ================= */
.neon-title {
    font-size: clamp(2.5rem, 5vw, 4rem); 
    font-weight: 800;
    text-shadow: 0 0 10px var(--neon-green), 0 0 40px var(--neon-green);
    margin-bottom: 10px; 
    text-align: center;
}

.neon-text { color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green); }

.neon-btn {
    margin-top: 30px; padding: 15px 40px;
    background: transparent;
    color: var(--neon-green);
    border: 2px solid var(--neon-green);
    font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: bold;
    cursor: pointer; letter-spacing: 2px;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.3) inset, 0 0 20px rgba(57, 255, 20, 0.3);
    transition: all 0.3s ease;
}

.neon-btn:hover {
    background: var(--neon-green); color: var(--bg-dark);
    box-shadow: 0 0 30px var(--neon-green);
}

/* ================= BENTO GRID & CARDS ================= */
.container { padding: 100px 5vw; max-width: 1400px; margin: auto; }

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Fuerza 4 columnas */
    gap: 20px; margin-top: 50px;
}

.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: transform 0.1s ease, box-shadow 0.3s ease;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}

.glass-card:hover { border-color: var(--neon-green); }

.faction-img {
    width: 250px; height: auto;
    filter: drop-shadow(0 0 20px rgba(57, 255, 20, 0.4));
    transition: transform 0.5s ease;
}

.glass-card:hover .faction-img { transform: scale(1.1) translateY(-10px); }

.card-content h4 { font-size: 1.8rem; margin: 20px 0 10px; color: var(--neon-green); }
.neon-link { color: #fff; text-decoration: none; margin-top: 15px; display: inline-block; border-bottom: 1px solid var(--neon-green); padding-bottom: 5px; }

/* 4. Optimización Táctil: Desactiva el Tilt 3D si el dispositivo no tiene mouse */
@media (hover: none) {
    .tilt-effect { transform: none !important; transition: none !important; }
    .glass-card:hover .faction-img { transform: none !important; }
}

/* ================= SECCIÓN TESTIMONIOS (Dossiers) ================= */
#testimonials {
    background: rgba(10, 0, 20, 0.4); 
    border-top: 1px solid rgba(157, 0, 255, 0.2);
    border-bottom: 1px solid rgba(157, 0, 255, 0.2);
    margin-top: 80px;
    padding: 100px 5vw;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 50px;
}

/* Tarjeta Dossier (Evidencia) */
.glass-dossier {
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid rgba(157, 0, 255, 0.2); 
    border-radius: 15px;
    padding: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Efecto hover Dossier */
.glass-dossier:hover {
    border-color: var(--neon-purple);
    box-shadow: 0 0 30px rgba(157, 0, 255, 0.4); 
}

/* Imagen del Cliente/Producto */
.dossier-img-container {
    width: 100%;
    height: 320px; 
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid rgba(157, 0, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.3); 
    display: flex; 
    justify-content: center;
    align-items: center;
}

.dossier-img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    filter: saturate(0.8); 
    transition: filter 0.3s ease;
}

.glass-dossier:hover .dossier-img {
    filter: saturate(1); 
}

/* Títulos y textos del Dossier */
.glass-dossier h5 {
    font-size: 1.4rem;
    color: var(--neon-purple);
    text-shadow: 0 0 10px var(--neon-purple);
    margin-bottom: 5px;
}

.glass-dossier span {
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.glass-dossier p {
    font-size: 0.95rem;
    color: #ddd;
    line-height: 1.5;
    font-weight: 300;
}

/* Menú Hamburguesa (Desktop oculto) */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 1001; 
}
.hamburger span {
    width: 35px; height: 3px;
    background: var(--neon-green);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.back-btn {
    position: fixed !important; 
    top: 85px !important; 
    left: 5vw !important; /* Margen dinámico para que no desborde en móviles */
    background: rgba(5, 5, 5, 0.8);
    padding: 8px 16px !important; 
    border-radius: 30px;
    border: 1px solid var(--neon-purple);
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem !important; 
    font-weight: bold;
    z-index: 9999; 
    backdrop-filter: blur(10px);
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.3);
    
    /* Alineación perfecta entre flecha y texto */
    display: flex !important;
    align-items: center;
    gap: 10px; 
    width: fit-content; /* Se ajusta al contenido exacto */
    transition: all 0.3s ease;
    }

    /* Animación suave al pasar el mouse */
    .back-btn:hover {
        transform: translateX(-4px); 
        box-shadow: 0 0 25px var(--neon-purple);
        color: var(--neon-green);
        border-color: var(--neon-green);
    }

/* 1. POLVO ESTELAR Y MOVIMIENTO DE NAVE */
#stardust-container {
    position: fixed; 
    top: -10vh; left: -10vw; 
    width: 120vw; height: 120vh;
    pointer-events: none; z-index: -2; 
    transition: transform 0.3s ease-out; 
    animation: shipBanking 25s infinite ease-in-out;
}

@keyframes shipBanking {
    0%, 100% { transform: rotateZ(0deg) scale(1); }
    25% { transform: rotateZ(3deg) scale(1.02); } 
    75% { transform: rotateZ(-3deg) scale(1.02); }
}

/* Modificar partículas para que fluyan constantemente (como si avanzáramos) */
.star-particle {
    position: absolute; background: #fff; border-radius: 50%;
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.4); 
    animation: starStream linear infinite; 
}

@keyframes starStream {
    0% { transform: translate3d(0, 0, 0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate3d(-300px, 100vh, 100px); opacity: 0; } 
}

/* 2. RAYO TRACTOR EN TARJETAS */
.glass-card::before {
    content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(57, 255, 20, 0.2), transparent);
    transition: top 0.5s ease; z-index: 0; pointer-events: none;
}
.glass-card:hover::before { top: 0; }
.glass-card .faction-img { position: relative; z-index: 1; transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.glass-card:hover .faction-img { transform: scale(1.1) translateY(-20px); filter: drop-shadow(0 20px 15px rgba(57, 255, 20, 0.6)); }

/* 3. ESCÁNER HOLOGRÁFICO EN DOSSIERS */
.dossier-img-container { position: relative; }
.dossier-img { 
    filter: sepia(1) hue-rotate(130deg) saturate(1.5) brightness(0.7); 
    transition: filter 0.8s ease; 
}
.glass-dossier:hover .dossier-img { filter: sepia(0) hue-rotate(0deg) saturate(1) brightness(1); } 
.dossier-img-container::after {
    content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 3px;
    background: var(--neon-green); box-shadow: 0 0 15px var(--neon-green), 0 0 30px var(--neon-green);
    opacity: 0; transition: opacity 0.3s;
}
.glass-dossier:hover .dossier-img-container::after {
    opacity: 1; animation: laserScan 1.2s ease-in-out forwards;
}
@keyframes laserScan { 0% { top: -10%; } 100% { top: 110%; opacity: 0; } }

/* EASTER EGG: OVNI CON AGUJERO NEGRO */
#ufo {
    position: fixed; top: 15%; right: -100px; font-size: 2.5rem; z-index: 0; pointer-events: none;
    filter: drop-shadow(0 0 20px var(--neon-purple)); opacity: 0;
    display: flex; align-items: center; justify-content: center;
}

#ufo::after {
    content: '';
    position: absolute;
    width: 70px; height: 70px;
    background: radial-gradient(circle, #050505 10%, rgba(138, 43, 226, 0.8) 70%, transparent 100%);
    border-radius: 50%;
    z-index: -1;
    box-shadow: 0 0 30px var(--neon-purple), inset 0 0 20px #000;
    animation: spinBlackHole 1.5s linear infinite;
    transform-origin: center;
}

@keyframes spinBlackHole {
    0% { transform: scale(0.8) rotate(0deg); opacity: 0.8; }
    50% { transform: scale(1.1) rotate(180deg); opacity: 1; }
    100% { transform: scale(0.8) rotate(360deg); opacity: 0.8; }
}

.ufo-fly { animation: flyAcross 3s linear forwards; }

@keyframes flyAcross {
    0% { right: -100px; transform: translateY(0) rotate(-15deg) scale(0.5); opacity: 1; }
    50% { transform: translateY(-30px) rotate(0deg) scale(1); }
    100% { right: 110vw; transform: translateY(20px) rotate(15deg) scale(0.5); opacity: 1; }
}

/* 5. WARP SPEED TRANSITION */
.warp-active { animation: warpDrive 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; pointer-events: none; }
@keyframes warpDrive {
    0% { filter: contrast(1) blur(0px); transform: scale(1) translateZ(0); opacity: 1; }
    100% { filter: contrast(2) blur(10px); transform: scale(3) translateZ(100px); opacity: 0; }
}

/* ================= PREMIUM IDEAS V2 ================= */

/* 2. ASTEROIDES ESTILO "HAZ DE LUZ" */
.asteroid {
    position: fixed; 
    width: 2px; height: 2px; 
    background: #fff;
    box-shadow: 0 0 15px 4px #fff, 0 0 30px 6px var(--neon-purple);
    border-radius: 50%; 
    z-index: -1; 
    pointer-events: none;
    opacity: 0;
    animation: asteroidHazFall linear forwards;
}

.asteroid::after {
    content: ''; position: absolute; 
    top: 50%; right: -5px; 
    transform: translateY(-50%) rotate(0deg); 
    width: 150px; height: 2px; 
    
    /* Gradiente: Punta fuerte (púrpura), estela tenue (transparente) */
    background: linear-gradient(-90deg, transparent, rgba(188, 19, 254, 0.7) 30%, var(--neon-purple));
    box-shadow: 0 0 10px rgba(188, 19, 254, 0.5); 
    
    border-radius: 2px;
}

@keyframes asteroidHazFall {
    0% { transform: translate(0, 0) rotate(-45deg); opacity: 0; }
    5% { opacity: 1; } 
    95% { opacity: 1; }
    100% { transform: translate(-150vw, 150vh) rotate(-45deg); opacity: 0; } 
}

@keyframes asteroidFall {
    0% { transform: translate(0, 0) rotate(-45deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(-120vw, 120vh) rotate(-45deg); opacity: 0; }
}

/* 2. ALIENS INFILTRADOS (VIGÍAS) */
#alien-peeker {
    position: fixed; bottom: -180px; 
    width: 150px; height: 150px;
    background-size: contain; background-repeat: no-repeat; background-position: center bottom;
    z-index: 100; pointer-events: none; opacity: 0;
    filter: drop-shadow(0 0 15px var(--neon-green)) hue-rotate(0deg);
    transition: bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
}
.peek-active {
    bottom: -10px !important; opacity: 0.85 !important;
    animation: hologramFlicker 3s infinite;
}
@keyframes hologramFlicker {
    0%, 100% { filter: drop-shadow(0 0 15px var(--neon-green)) brightness(1); opacity: 0.85; }
    10% { filter: drop-shadow(0 0 5px var(--neon-green)) brightness(2); opacity: 0.5; }
    20% { opacity: 0.9; }
    22% { opacity: 0.3; }
    25% { opacity: 0.85; }
}

/* 3. ONDA DE GRAVEDAD (CLICK RIPPLE) */
.gravity-ripple {
    position: fixed; 
    border: 2px solid var(--neon-green);
    border-radius: 50%; pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%) scale(0); opacity: 1;
    animation: rippleExpand 0.6s ease-out forwards;
}
@keyframes rippleExpand {
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; box-shadow: 0 0 20px var(--neon-green); }
}

/* ================= GRAVITY GLITCH ================= */

/* Overlay sutil que avisa del glitch (parpadeo rojo) */
#gravity-glitch-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(255, 0, 0, 0.05);
    z-index: 9998; pointer-events: none;
    opacity: 0;
}

/* Clases que aplica el JS a los elementos */
.glitch-warning-active #gravity-glitch-overlay {
    animation: glitchWarning 0.5s 2; 
}

/* Efecto de Flotar en 3D y Rotar (se aplica a las cards, h1, h3) */
.gravity-fail {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative; 
}

.gravity-active {
    pointer-events: none; 
}

/* Keyframes para el parpadeo de advertencia */
@keyframes glitchWarning {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; background: rgba(255, 0, 0, 0.1); }
}

/* ================= F.A.Q ACORDEÓN ================= */
.faq-category {
    color: var(--neon-purple);
    font-size: 1.5rem;
    margin: 40px 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(157, 0, 255, 0.3);
    text-shadow: 0 0 10px rgba(157, 0, 255, 0.5);
}

.faq-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
    border-color: rgba(57, 255, 20, 0.5);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.1);
}

.faq-question {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--text-light);
    transition: color 0.3s, background 0.3s;
}

.faq-question:hover {
    color: var(--neon-green);
    background: rgba(57, 255, 20, 0.05);
}

.faq-icon {
    font-size: 1.5rem;
    color: var(--neon-green);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.faq-answer {
    max-height: 0;
    padding: 0 20px;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.faq-answer p {
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Clases activas inyectadas por JS */
.faq-item.active {
    border-color: var(--neon-green);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.15);
}

.faq-item.active .faq-question {
    color: var(--neon-green);
    background: rgba(57, 255, 20, 0.08);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
    color: #ff0055; 
}

.faq-item.active .faq-answer {
    max-height: 500px; 
    padding: 0 20px 20px 20px;
}

/* FOOTER HORIZONTAL */
.footer-horizontal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    padding: 40px 20px;
    background: rgba(5,5,5,0.9);
    border-top: 1px solid var(--glass-border);
    margin-top: 50px;
}

.footer-col { text-align: center; color: #ddd; }
.footer-col h4 { color: var(--neon-green); margin-bottom: 10px; font-size: 1.2rem; letter-spacing: 2px; }
.footer-col p { line-height: 1.6; }
.small-text { font-size: 0.85rem; color: #aaa; margin-top: 10px; }
.mini-btn { padding: 8px 15px; font-size: 0.85rem; display: inline-block; margin-top: 15px; }

.socials { display: flex; gap: 20px; font-size: 2rem; }
.socials a:hover { transform: scale(1.1); filter: drop-shadow(0 0 10px var(--neon-green)); }

.legal-btn { background: none; border: none; color: var(--neon-purple); cursor: pointer; text-decoration: underline; font-family: 'Outfit'; font-size: 0.95rem; margin-bottom: 15px; }
.credits { font-size: 0.85rem; color: #666; }
.credits a { color: var(--neon-purple); border-bottom: 1px solid var(--neon-purple); font-weight: bold; }

/* ==========================================
   ANIMACIÓN MODAL ARCHIVOS CLASIFICADOS
   ========================================== */
#modal-legales:not(.hidden) .modal-content {
    animation: decryptTerminal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes decryptTerminal {
    0% { transform: scale(0.9) translateY(20px); opacity: 0; filter: blur(5px); }
    50% { filter: contrast(150%) blur(2px) drop-shadow(0 0 10px var(--neon-purple)); }
    100% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
}

#close-legales:hover {
    color: var(--neon-purple);
    transform: scale(1.1);
}

/* ==========================================
   FASE DE MEJORA: HUD, TOGGLE & DASHBOARD
   ========================================== */

/* 1. Bloque HUD de Especificaciones (producto.html) */
.hud-specs {
    margin-top: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--glass-border);
    position: relative;
    font-family: 'Montserrat', monospace; /* Fuente más técnica */
    font-size: 0.9rem;
    color: #fff;
    overflow: hidden;
}

.hud-specs::before { /* Línea de escaneo HUD */
    content: '';
    position: absolute; height: 2px; width: 100%;
    background: rgba(138, 43, 226, 0.5);
    top: -2px; left: 0;
    animation: hudScan 2s linear infinite;
}

.hud-specs h5 {
    color: var(--neon-purple);
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.hud-item {
    display: flex; justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.hud-item .label { color: #aaa; }
.hud-item .value { color: var(--neon-green); font-weight: bold; }

@keyframes hudScan {
    0% { top: -2px; }
    100% { top: 100%; }
}

/* 2. Neon Toggle Switch (Primario/Secundario en producto.html) */
.toggle-wrapper {
    display: flex; align-items: center; gap: 15px;
    margin-bottom: 20px;
    justify-content: center;
}

.toggle-label {
    color: var(--text-light); font-weight: bold; font-size: 1.1rem;
    transition: all 0.3s;
}

.toggle-label.active { text-shadow: 0 0 10px #fff; color: #fff; }

.switch {
    position: relative; display: inline-block;
    width: 60px; height: 34px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute; cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(5,5,5,0.9);
    border: 1px solid var(--neon-purple);
    transition: .4s;
    border-radius: 34px;
    box-shadow: inset 0 0 10px rgba(138, 43, 226, 0.3);
}

.slider:before {
    position: absolute; content: "";
    height: 26px; width: 26px;
    left: 4px; bottom: 3px;
    background-color: #fff;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}

input:checked + .slider {
    background-color: rgba(0,255,157,0.1);
    border-color: var(--neon-green);
    box-shadow: inset 0 0 10px rgba(0, 255, 157, 0.3);
}

input:checked + .slider:before {
    transform: translateX(26px);
    background-color: var(--neon-green);
    box-shadow: 0 0 15px var(--neon-green);
}

/* Animación de Conteo de Precio (Estilo Terminal) */
@keyframes countingPrice {
    0% { opacity: 0.7; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

.price-updating { animation: countingPrice 0.1s ease-in-out; }

/* 3. Dashboard de Clientes - Mi Búnker (mi-bunker.html) */
.bunker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px; margin-top: 50px;
}

.safe-card { 
    border-color: #555; 
    padding: 30px; position: relative;
    transition: all 0.4s;
    transform-style: preserve-3d;
}

.safe-card:hover {
    border-color: var(--neon-green);
    box-shadow: 0 0 25px rgba(0, 255, 157, 0.2);
    transform: translateY(-5px);
}

.safe-card h4 {
    font-size: 1.5rem; color: #fff;
    margin-bottom: 5px;
}

.safe-card .type-badge {
    display: inline-block; padding: 3px 8px;
    font-size: 0.75rem; font-weight: bold; border-radius: 4px;
    background: rgba(138, 43, 226, 0.2);
    color: var(--neon-purple); border: 1px solid var(--neon-purple);
    margin-bottom: 20px;
}

.safe-card .credentials {
    background: rgba(0,0,0,0.8);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 15px; border-radius: 8px;
    position: relative;
    font-family: monospace;
}

.cred-blur { 
    filter: blur(5px);
    user-select: none;
    transition: filter 0.5s ease;
}

.safe-card:hover .cred-blur { filter: blur(0px); user-select: text; }

.decrypt-btn { /* Botón de revelado */
    width: 100%; margin-top: 20px;
    padding: 12px; font-size: 0.9rem;
    position: relative; overflow: hidden;
}

.decrypt-btn::after { /* Efecto glitch al hover */
    content: 'DESCIFRANDO...'; position: absolute; top:0; left:0; width:100%; height:100%;
    background: var(--neon-green); color: #000;
    display: flex; align-items: center; justify-content: center;
    transform: translateY(100%); transition: transform 0.3s;
}

.safe-card:hover .decrypt-btn::after { transform: translateY(0); }

/* ==========================================
   ANIMACIONES TERMINAL DESCLASIFICADA
   ========================================== */

/* Efecto de escritura tipo consola */
.typing-effect {
    color: var(--neon-green); 
    text-align: left; 
    font-weight: bold; 
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid var(--neon-green);
    width: 0;
    /* La animación se dispara al abrir el modal (quitar clase hidden) */
    animation: typing 1s steps(30, end) forwards, blink-caret .75s step-end infinite;
}

/* Efecto de aparición en cascada para los botones */
.decrypt-link {
    opacity: 0;
    transform: translateX(-30px);
}

/* Usamos un selector complejo para que las animaciones se reinicien cada vez que el modal se abre */
#modal-legales:not(.hidden) .decrypt-link {
    animation: slideDecrypt 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--neon-green); }
}

@keyframes slideDecrypt {
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

   /* ==========================================
   👽 UPDATE: INMERSIÓN ÁREA 51 
   ========================================== */
body {
    cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="%233dff3d" stroke-width="2"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="%233dff3d" stroke-width="2"/></svg>') 12 12, auto;
}
a, button, .bento-card, .btn-whatsapp, input {
    cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="4" fill="%233dff3d"/><circle cx="12" cy="12" r="10" stroke="%233dff3d" stroke-width="2" stroke-dasharray="4 4"/></svg>') 12 12, pointer !important;
}

.glass-card {
    position: relative;
    overflow: hidden; 
}
.glass-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 15%;
    background: linear-gradient(to bottom, transparent, rgba(61, 255, 61, 0.3), transparent);
    animation: scanline 3s linear infinite;
    pointer-events: none; 
    z-index: 2;
}

@keyframes scanline {
    0% { top: -30%; }
    100% { top: 120%; }
}

#radio-interceptor {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid var(--p-0-color-text-main);
    padding: 15px;
    width: 280px;
    border-radius: 5px;
    z-index: 9999;
    box-shadow: 0 0 15px rgba(61, 255, 61, 0.2);
    transform: translateY(150%);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(5px);
}
#radio-interceptor.active { transform: translateY(0); }
.radio-header { color: var(--p-0-color-text-main); font-size: 0.7rem; margin-bottom: 5px; font-weight: bold; }
.radio-text { color: #fff; font-size: 0.85rem; font-family: monospace; }
.typing-proof { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--p-0-color-text-main); animation: typingProof 2s steps(40, end), blink-caret .75s step-end infinite; }
@keyframes typingProof { from { width: 0 } to { width: 100% } }

.btn-abducting {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    pointer-events: none;
}
.btn-abducting::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid rgba(61, 255, 61, 0.8);
    animation: abductBeam 0.8s forwards;
    z-index: 2;
}
@keyframes abductBeam {
    0% { opacity: 0; border-bottom-width: 0; }
    50% { opacity: 1; border-bottom-width: 150px; }
    100% { opacity: 0; border-bottom-width: 250px; }
}

.secret-modal-content { border: 2px solid #FF007F !important; box-shadow: 0 0 30px rgba(255, 0, 127, 0.5); }

/* ==========================================
   👽 INMERSIÓN ÁREA 51: EFECTOS VISUALES
   ========================================== */
.glass-card {
    position: relative;
    overflow: hidden; 
}
.glass-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 15%;
    background: linear-gradient(to bottom, transparent, rgba(61, 255, 61, 0.3), transparent);
    animation: scanline 3s linear infinite;
    pointer-events: none; 
    z-index: 2;
}

@keyframes scanline {
    0% { top: -20%; }
    100% { top: 120%; }
}

.btn-abducting {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    pointer-events: none;
    box-shadow: 0 0 30px #3dff3d !important;
}
.btn-abducting::after {
    content: '🛸 ABDUCIENDO...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-weight: bold;
    z-index: 3;
}
.btn-abducting::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(61, 255, 61, 0.9);
    animation: abductBeam 0.8s forwards;
    z-index: 2;
}
@keyframes abductBeam {
    0% { transform: translateY(-100%); opacity: 0; }
    50% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(0); opacity: 0; }
}

#radio-interceptor {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--p-0-color-text-main);
    padding: 15px;
    width: 280px;
    border-radius: 5px;
    z-index: 9999;
    box-shadow: 0 0 15px rgba(61, 255, 61, 0.2);
    transform: translateY(150%);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(5px);
}
#radio-interceptor.active { transform: translateY(0); }
.radio-header { color: var(--p-0-color-text-main); font-size: 0.7rem; margin-bottom: 5px; font-weight: bold; }
.radio-text { color: #fff; font-size: 0.85rem; font-family: monospace; }
.typing-proof { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--p-0-color-text-main); animation: typingProof 2s steps(40, end), blink-caret .75s step-end infinite; display: inline-block;}
@keyframes typingProof { from { width: 0 } to { width: 100% } }

/* ==========================================
   👽 EASTER EGG: MODO DIOS & LLUVIA MATRIX
   ========================================== */
.konami-hint {
    text-align: center;
    color: #111; 
    font-family: monospace;
    font-size: 0.9rem;
    margin: 40px 0 20px 0;
    transition: color 0.5s ease, text-shadow 0.5s ease;
    cursor: crosshair;
    letter-spacing: 2px;
}
.konami-hint:hover {
    color: var(--neon-green);
    text-shadow: 0 0 10px var(--neon-green);
}

body.konami-madness {
    animation: hueRave 2s linear infinite, shakeScreen 0.15s infinite;
}

@keyframes hueRave {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes shakeScreen {
    0% { transform: translate(2px, 2px) rotate(0deg); }
    25% { transform: translate(-2px, -2px) rotate(-1deg); }
    50% { transform: translate(-2px, 2px) rotate(1deg); }
    75% { transform: translate(2px, -2px) rotate(0deg); }
    100% { transform: translate(2px, 2px) rotate(0deg); }
}

#konami-epic-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    text-align: center;
    pointer-events: none;
    background: rgba(0,0,0,0.8);
    padding: 40px;
    border: 2px solid var(--neon-purple);
    border-radius: 20px;
    box-shadow: 0 0 50px var(--neon-purple);
    animation: scaleUpEpic 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes scaleUpEpic {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

#matrix-canvas.fade-out {
    opacity: 0;
    transition: opacity 2s ease-out; 
}

   /* ==========================================
   👽 MODAL TÉRMINOS Y CONDICIONES (PROTOCOLOS)
   ========================================== */

#close-tyc:hover { color: var(--neon-green) !important; transform: scale(1.1); }

.tyc-typing-header {
    color: var(--neon-green); 
    font-family: monospace; 
    font-size: 0.9rem; 
    text-align: center;
    border-right: 2px solid var(--neon-green); 
    white-space: nowrap; 
    overflow: hidden;
    margin: 0 auto 20px; 
    width: 0;
}
#modal-tyc:not(.hidden) .tyc-typing-header {
    animation: typingTyc 1.5s steps(40, end) forwards, blink-caret .75s step-end infinite;
}
@keyframes typingTyc { from { width: 0; } to { width: 100%; } }

.tyc-seals {
    display: flex; 
    justify-content: center; 
    gap: 30px; 
    margin-bottom: 25px;
    opacity: 0; 
    transform: translateY(-10px);
}
#modal-tyc:not(.hidden) .tyc-seals {
    animation: fadeInSeals 0.5s ease forwards; 
    animation-delay: 1.6s;
}
@keyframes fadeInSeals { to { opacity: 1; transform: translateY(0); } }

.tyc-seals .seal {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 8px;
    color: var(--neon-purple); 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    font-weight: bold;
}
.tyc-seals .seal i {
    font-size: 2.5rem; 
    color: var(--neon-green); 
    filter: drop-shadow(0 0 10px rgba(57, 255, 20, 0.6));
    animation: spinPulseSeal 6s infinite linear;
}
@keyframes spinPulseSeal {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(180deg); filter: drop-shadow(0 0 25px var(--neon-green)); }
    100% { transform: scale(1) rotate(360deg); }
}

.tyc-content {
    overflow-y: auto; 
    padding-right: 20px; 
    text-align: left; 
    color: #ccc;
    font-size: 0.95rem; 
    line-height: 1.6;
    opacity: 0; 
    transition: opacity 1s ease;
}
.tyc-content.revealed { opacity: 1; }

.tyc-content h5 { 
    color: var(--neon-purple); 
    margin: 25px 0 10px; 
    font-size: 1.1rem; 
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.3);
    padding-bottom: 5px;
}
.tyc-content p { margin-bottom: 12px; }

.tyc-content::-webkit-scrollbar { width: 6px; }

.tyc-content::-webkit-scrollbar-thumb { 
    background: var(--neon-green); 
    border-radius: 10px; 
}
.tyc-content::-webkit-scrollbar-track { 
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 10px;
}

/* ==========================================
FLECHA ESTÉTICA PARA EL BOTÓN 'VOLVER'
========================================== */
.back-link i {
    margin-right: 12px; 
    transition: transform 0.3s ease; 
}

/* Efecto opcional: La flecha se mueve un poco a la izquierda al pasar el mouse */
.back-link:hover i {
    transform: translateX(-5px);
}

/* ================= ALERTAS TOAST CYBERPUNK ================= */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cyber-toast {
    background: rgba(10, 10, 10, 0.95);
    border-left: 4px solid var(--neon-green);
    color: #fff;
    padding: 15px 20px;
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(120%);
    animation: slideInToast 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.cyber-toast.error { border-color: #ff3366; box-shadow: 0 0 15px rgba(255, 51, 102, 0.2); }
.cyber-toast.warning { border-color: #ffcc00; box-shadow: 0 0 15px rgba(255, 204, 0, 0.2); }

.cyber-toast.fade-out { animation: fadeOutToast 0.4s ease forwards; }

@keyframes slideInToast { to { transform: translateX(0); } }
@keyframes fadeOutToast { to { opacity: 0; transform: translateX(50px); } }

/* ================= CARRITO LATERAL MEJORADO ================= */
#cart-sidebar {
    transition: opacity 0.3s ease;
}

#cart-sidebar .glass-card {
    position: fixed;
    right: -450px; /* Escondido a la derecha */
    top: 0;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    border-radius: 0;
    border-left: 2px solid var(--neon-green);
    transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    padding: 25px;
    z-index: 10003;
}

/* Cuando el carrito NO está oculto */
#cart-sidebar:not(.hidden) .glass-card {
    right: 0;
}

/* Scrollbar personalizada para el arsenal */
#cart-items-container::-webkit-scrollbar { width: 5px; }
#cart-items-container::-webkit-scrollbar-thumb { background: var(--neon-green); border-radius: 10px; }

/* Control de visibilidad del indicativo de scroll */
.scroll-hint {
    display: none; /* Oculto en PC */
    text-align: center;
    color: var(--neon-purple);
    font-size: 0.85rem;
    margin-top: 15px;
    animation: pulseNeon 1.5s infinite;
}

@keyframes pulseNeon {
    0% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(5px); }
    100% { opacity: 0.5; transform: translateX(0); }
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    body {
        background-image: none !important;
        background-color: var(--bg-dark);
        overflow-x: hidden;
    }

    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: linear-gradient(rgba(5, 5, 5, 0.7), rgba(5, 5, 5, 0.7)), url('https://images.unsplash.com/photo-1506318137071-a8e063b4bec0?q=80&w=1080&auto=format&fit=crop');
        background-size: cover;
        background-position: center;
        z-index: -5; 
        pointer-events: none; 
    }

    .neon-title { font-size: 2.2rem; }
    .glass-nav { padding: 15px 20px; flex-direction: column; gap: 10px; }
    
    #grid-productos.bento-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
        margin-top: 30px;
    }

    #factions .bento-grid {
        grid-template-columns: 1fr !important;
    }

    .glass-card { padding: 15px; }
    .glass-card img { width: 60px !important; margin-bottom: 10px !important; }
    .glass-card h5 { font-size: 0.95rem !important; }
    .glass-card p { font-size: 1.1rem !important; }
    .glass-card .neon-btn { padding: 8px !important; font-size: 0.75rem !important; }

    .testimonial-grid {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 15px;
            padding-bottom: 15px;
            padding-left: 5vw; 
            padding-right: 5vw; 
        }
    
    .testimonial-grid::-webkit-scrollbar { height: 6px; }
    .testimonial-grid::-webkit-scrollbar-thumb { background: var(--neon-purple); border-radius: 10px; }
    .testimonial-grid::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); }

    .glass-dossier {
        min-width: 85vw; 
        scroll-snap-align: center; 
        padding: 20px 15px; 
    }

    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 10px;
        scroll-snap-type: x mandatory;
    }
    .filter-bar::-webkit-scrollbar { display: none; } 
    .filter-btn { white-space: nowrap; font-size: 0.75rem !important; padding: 10px 15px !important; scroll-snap-align: start; }
    .sort-select { font-size: 0.8rem; }

    .hamburger { display: flex; }
    .nav-links {
        position: fixed;
        top: 0; right: -100%; 
        width: 70vw; height: 100vh;
        background: rgba(5, 5, 5, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left: 1px solid var(--neon-green);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.4s ease-in-out;
        z-index: 1000;
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    }
    .nav-links.active { right: 0; } 
    .nav-links li a { font-size: 1.5rem; margin-bottom: 20px; display: block; }
    
    .hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); background: #fff; }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background: #fff; }

    .glass-overlay {
        padding: 0 20px;
    }

    .floating-alien {
        max-width: 250px; 
        max-height: 35vh;
    }

    #hero .glitch-text {
        font-size: clamp(2rem, 8vw, 3rem) !important; 
        letter-spacing: normal !important; 
        line-height: 1.1;
    }

    #hero {
        align-items: center; 
    }

    .glass-nav {
        padding: 15px 20px;
        flex-direction: row;
        justify-content: space-between; 
        width: 100%; 
    }

    .back-btn {
        position: fixed !important; 
        top: 85px !important; 
        left: 20px !important;
        background: rgba(5, 5, 5, 0.8);
        padding: 8px 15px !important; 
        border-radius: 30px;
        border: 1px solid var(--neon-purple);
        color: #fff;
        text-decoration: none;
        font-size: 0.9rem !important; 
        font-weight: bold;
        z-index: 9999; 
        backdrop-filter: blur(10px);
        box-shadow: 0 0 15px rgba(138, 43, 226, 0.3);
        transition: all 0.3s ease;
    }

    #landing-page {
        background-attachment: scroll;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }

    #app-content {
        opacity: 0;
        transition: opacity 1s ease; 
    }

    #app-content.content-visible {
        opacity: 1;
    }

    .product-container {
        align-items: flex-start !important; 
        padding-top: 180px !important; 
        padding-bottom: 50px;
    }
    
    .product-glass {
        padding: 30px 20px !important; 
        margin-top: 10px;
    }

    .footer-horizontal { flex-direction: column; text-align: center; }

    .admin-container {
        padding: 10px;
        width: 100%;
        overflow-x: hidden; /* Evita el scroll lateral del body */
    }

    .admin-card {
        width: 98% !important;
        margin: 0 auto;
        padding: 15px !important;
        box-sizing: border-box;
    }

    /* Forzamos a que todos los inputs respeten el ancho del padre */
    .admin-card input, 
    .admin-card select, 
    .admin-card textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important; /* El padding no suma ancho */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ajuste de botones para que no se amontonen */
    .admin-card .neon-btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .bunker-grid-mobile {
        display: flex !important;
        flex-wrap: nowrap !important; /* CRÍTICO: Evita que se pongan uno debajo del otro */
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding: 20px 10px; /* Un poco más de aire */
        scrollbar-width: none;
        width: 100%; /* Asegura que no se pase del ancho del celular */
        box-sizing: border-box;
    }

    .bunker-grid-mobile::-webkit-scrollbar {
        display: none;
    }

    .safe-card {
        flex: 0 0 85vw; /* Esto obliga a la tarjeta a ocupar el 85% del ancho y permite el scroll */
        scroll-snap-align: center;
        margin-bottom: 0 !important;
    }

    .scroll-hint {
        display: block !important; /* Solo visible en móvil */
        text-align: center;
        color: var(--neon-purple);
        font-size: 0.85rem;
        margin-top: 15px;
        animation: pulseNeon 1.5s infinite;
    }

    .mobile-only {
        display: block;
        border-top: 1px solid rgba(255, 51, 102, 0.3);
        margin-top: 10px;
        padding-top: 10px;
    }
    
    /* Ocultamos el botón original que está fuera del menú en móvil para no duplicar */
    .bunker-header #btn-logout {
        display: none;
    }
}

@media (max-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
        .back-btn {
            top: 75px !important;
            padding: 6px 12px !important;
            font-size: 0.8rem !important;
        }
}