/* Popup Promoción - Estilos CSS */
/* Agrega estos estilos en tu archivo CSS principal */

/* Animaciones para el popup móvil */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}

.slide-up {
    animation: slideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-down {
    animation: slideDown 0.3s ease-out;
}

/* Animaciones para desktop */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fadeOutScale {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.95) translateY(-10px); }
}

.fade-in-scale {
    animation: fadeInScale 0.3s ease-out;
}

.fade-out-scale {
    animation: fadeOutScale 0.2s ease-in;
}

/* Efecto de brillo sutil */
@keyframes subtleGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(65, 182, 230, 0.2); }
    50% { box-shadow: 0 0 25px rgba(65, 182, 230, 0.3); }
}

.subtle-glow {
    animation: subtleGlow 3s ease-in-out infinite;
}

/* Animación de fondo */
@keyframes fadeInBackdrop {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOutBackdrop {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade-in-backdrop {
    animation: fadeInBackdrop 0.3s ease-out;
}

.fade-out-backdrop {
    animation: fadeOutBackdrop 0.3s ease-out;
}

/* Prevenir scroll en el body cuando el popup está abierto */
.popup-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Cursor para indicar que es arrastrable */
.mobile-popup-draggable {
    cursor: grab;
    touch-action: none; /* Mejor control táctil */
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.mobile-popup-draggable:active {
    cursor: grabbing;
}

/* Suavizar transiciones */
.smooth-transition {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Estilo para el botón de cerrar */
.close-button {
    z-index: 1000000 !important; /* Asegurar que esté por encima */
    pointer-events: auto !important; /* Asegurar que reciba eventos */
}

/* Asegurar que el popup esté por encima de TODO */
#promoPopup {
    z-index: 9999 !important;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

#mobilePopup, #desktopPopup {
    z-index: 10000 !important;
}

/* Opcional: Reducir visibilidad del WhatsApp bot cuando el popup está abierto */
.popup-open #btn-whatsapp {
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

/* Optimizar para dispositivos táctiles */
@media (max-width: 767px) {
    #mobilePopup * {
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
    }
    
    .mobile-popup-draggable {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
}