/* ===============================
   OVERLAY
================================ */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}
.popup-overlay.closing {
    opacity: 0;
    visibility: hidden;
}

/* ===============================
   BANNER
================================ */
.popup-banner {
    position: relative;
    width: 70%;
    max-width: 900px;
    transform: translateY(30px) scale(0.95);
    opacity: 0;
    animation: popupIn 0.6s ease forwards;
    will-change: transform, opacity, filter;
}

.popup-overlay.closing .popup-banner {
    animation: popupOut 1.25s cubic-bezier(.25,.8,.25,1) forwards;
}

.popup-banner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* ===============================
   BOTÓN CERRAR
================================ */
.popup-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255,255,255,0.8);
    transition: transform 0.3s ease;
}

.popup-close:hover {
    transform: scale(1.15);
}

/* ===============================
   ANIMACIONES POPUP
================================ */
@keyframes popupIn {
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes popupOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }

    50% {
        opacity: 0.7;
        transform: translateY(8px) scale(0.985);
        filter: blur(1px);
    }

    100% {
        opacity: 0;
        transform: translateY(22px) scale(0.97);
        filter: blur(4px);
    }
}

/* ===============================
   EFECTO ZOOM (2s)
================================ */
.zoom-anim {
    animation: zoomPulse 2s ease forwards;
}

@keyframes zoomPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.75); }
    100% { transform: scale(1); }
}

/* ===============================
   BRILLO PROLONGADO (10s)
================================ */
.glow-anim {
    animation: glowHold 10s ease forwards;
}

@keyframes glowHold {
    0% {
        text-shadow: 0 0 0 rgba(255,255,255,0);
        filter: drop-shadow(0 0 0 rgba(255,255,255,0));
    }
    10% {
        text-shadow: 0 0 30px rgba(255,255,255,1);
        filter: drop-shadow(0 0 30px rgba(255,255,255,1));
    }
    90% {
        text-shadow: 0 0 30px rgba(255,255,255,1);
        filter: drop-shadow(0 0 30px rgba(255,255,255,1));
    }
    100% {
        text-shadow: 0 0 0 rgba(255,255,255,0);
        filter: drop-shadow(0 0 0 rgba(255,255,255,0));
    }
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
    .popup-banner {
        width: 90%;
    }
}

/* ===============================
   HIGHLIGHT LINK MENU TIENDA
================================ */
.nav-link.glow-anim {
    display: inline-block;
    position: relative;
    z-index: 10000;
    animation: linkGlow 10s ease forwards;
    will-change: transform, filter;
}

.nav-link.zoom-anim {
    animation: linkZoom 2s ease forwards;
}

@keyframes linkZoom {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

@keyframes linkGlow {
    0%   { filter: drop-shadow(0 0 0 rgba(0,195,255,0)); }
    10%  { filter: drop-shadow(0 0 18px rgba(0,195,255,1)); }
    90%  { filter: drop-shadow(0 0 18px rgba(0,195,255,1)); }
    100% { filter: drop-shadow(0 0 0 rgba(0,195,255,0)); }
}

/* ===============================
   HIGHLIGHT BOTÓN FLOTANTE (PNG)
================================ */
#floating-icon.glow-anim {
    animation: floatingGlow 10s ease forwards;
    will-change: transform, filter;
}

#floating-icon.zoom-anim {
    animation: floatingZoom 2s ease forwards;
}

@keyframes floatingZoom {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.75); }
    100% { transform: scale(1); }
}

@keyframes floatingGlow {
    0%   { filter: drop-shadow(0 0 0 rgba(0,195,255,0)); }
    10%  { filter: drop-shadow(0 0 35px rgba(0,195,255,1)); }
    90%  { filter: drop-shadow(0 0 35px rgba(0,195,255,1)); }
    100% { filter: drop-shadow(0 0 0 rgba(0,195,255,0)); }
}

/* ===============================
   REFLEJO / SHINE INICIAL
================================ */
.shine-anim {
    position: relative;
    overflow: visible;
    animation: shinePulse 0.8s ease-out forwards;
}

/* Para texto (nav-link) */
.nav-link.shine-anim {
    text-shadow:
            0 0 6px rgba(255,255,255,0.9),
            0 0 12px rgba(0,195,255,0.9),
            0 0 22px rgba(0,195,255,0.8);
}

/* Para PNG flotante */
#floating-icon.shine-anim {
    box-shadow:
            0 0 12px rgba(255,255,255,0.9),
            0 0 30px rgba(0,195,255,0.9),
            0 0 55px rgba(0,195,255,0.8);
    border-radius: 50%;
}

/* ===============================
   ANIMACIÓN SHINE
================================ */
@keyframes shinePulse {
    0% {
        opacity: 0;
        filter: brightness(1);
    }
    30% {
        opacity: 1;
        filter: brightness(1.6);
    }
    100% {
        opacity: 1;
        filter: brightness(1);
    }
}

/* ===============================
   FLECHAS INSTRUCTIVAS
================================ */
.guide-arrow {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: opacity 0.6s ease;
}

.guide-arrow.active {
    opacity: 1;
}

/* Texto */
.guide-arrow span {
    color: #fff;
    font-size: 14px;
    background: rgba(0,0,0,0.6);
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

/* Flecha base */
.guide-arrow .arrow {
    width: 22px;
    height: 22px;
    border: 3px solid #00c3ff;
    border-top: none;
    border-right: none;
}

/* Flecha hacia ARRIBA (menú tienda) */
#arrow-menu .arrow {
    transform: rotate(135deg);
    animation: arrowUpFloat 1.5s ease-in-out infinite;
}

@keyframes arrowUpFloat {
    0%   { transform: translateY(0) rotate(135deg); }
    50%  { transform: translateY(-6px) rotate(135deg); }
    100% { transform: translateY(0) rotate(135deg); }
}

/* Flecha hacia la DERECHA (botón flotante) */
#arrow-floating {
    flex-direction: row;
}

#arrow-floating span {
    margin-right: 8px;
}

#arrow-floating .arrow {
    animation: arrowRightFloat 1.5s ease-in-out infinite;
}

@keyframes arrowRightFloat {
    0% {
        transform: translateX(0) rotate(-135deg);
    }
    50% {
        transform: translateX(6px) rotate(-135deg);
    }
    100% {
        transform: translateX(0) rotate(-135deg);
    }
}