/* Samana Gym - Estilos principales */

html { 
    scroll-behavior: smooth; 
    overflow-x: hidden; 
}

/* Loader base styles to avoid unstyled flash before Tailwind loads */
#loader-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

body.loading {
    overflow: hidden;
}

body.loading .main-content {
    opacity: 0;
    visibility: hidden;
    display: none;
}

body.loaded .main-content {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease-in-out 0.5s;
}

*:focus-visible {
    outline: 2px solid #facc15;
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible {
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.35);
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Animación exclusiva para la sección de planes */
#planes .reveal {
    opacity: 0;
    transform: translateX(30px); /* aparece desde la derecha */
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#planes .reveal.active {
    opacity: 1;
    transform: translateX(0);
}

.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Hero contacto: mejor encuadre en mobile */
.hero-media {
    object-position: 80% center;
}

@media (max-width: 767px) {
    .hero-header {
        height: 72vh;
        min-height: 72vh;
    }

    .hero-media--store {
        object-position: 50% 35%;
    }
}

@media (min-width: 768px) {
    .hero-media {
        object-position: center;
    }
}

/* Animación exclusiva para la sección de fotos */
.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide {
    min-width: 100%;
    transition: opacity 0.5s ease;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.carousel-btn.prev {
    left: 10px;
    transform: translateY(-50%);
}

.carousel-btn.next {
    right: 10px;
    transform: translateY(-50%);
}

.reveal-terms {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.9s ease;
}

.reveal-terms.active {
    opacity: 1;
    transform: translateY(0);
}

.social-icon {
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: all .3s ease;
}
.social-icon:hover {
    background: #facc15; /* amarillo */
    color: black;
}


@media (pointer: coarse) {
    .parallax-bg {
        background-attachment: scroll;
    }
}

.page-content { 
    display: none; 
}

.page-content.active { 
    display: block; 
    animation: fadeIn 0.5s ease-in-out; 
}

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

.social-sidebar { 
    mix-blend-mode: difference; 
}

/* Efecto de cristal para el Nav */
.nav-glass {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


/* Inline styles migrated from index.html */

.menu-transition {
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .glow-gold:hover {
            box-shadow: 0 0 15px rgba(238, 191, 94, 0.4);
        }

        /* === LOADER STYLESs === */
        .aura-yellow {
            filter: drop-shadow(0 0 15px rgba(250, 204, 21, 0.6)) drop-shadow(0 0 40px rgba(250, 204, 21, 0.3));
            animation: pulse-aura 2.5s infinite alternate ease-in-out;
        }

        @keyframes pulse-aura {
            0% {
                filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.5)) drop-shadow(0 0 30px rgba(250, 204, 21, 0.2));
                transform: scale(1);
            }

            100% {
                filter: drop-shadow(0 0 25px rgba(250, 204, 21, 0.8)) drop-shadow(0 0 60px rgba(250, 204, 21, 0.5));
                transform: scale(1.03);
            }
        }

        .fade-out {
            opacity: 0;
            transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }

        /* Elite section background */
        .elite-bg {
            background-image: url('assets/images/mancuerna.jpg');
            background-size: cover;
            background-position: center;
        }

        /* === MOBILE NAVBAR STYLES === */
        body {
            -webkit-tap-highlight-color: transparent;
        }

        .nav-glass {
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        /* Animación de entrada para elementos del menú (Stagger Effect) */
        .reveal-item {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .reveal-item.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Ocultar barra de scroll en el slider horizontal */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Texto calado (stroke) */
        .text-stroke {
            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
            color: transparent;
        }

        /* === EFECTOS ÉPICOS === */

        /* Glitch Text Effect */
        .glitch {
            position: relative;
            animation: glitch-skew 1s infinite linear alternate-reverse;
        }

        .glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .glitch::before {
            animation: glitch-effect 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
            color: #00ffff;
            z-index: -1;
        }

        .glitch::after {
            animation: glitch-effect 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
            color: #ff00ff;
            z-index: -2;
        }

        @keyframes glitch-effect {
            0% {
                transform: translate(0);
            }

            20% {
                transform: translate(-3px, 3px);
            }

            40% {
                transform: translate(-3px, -3px);
            }

            60% {
                transform: translate(3px, 3px);
            }

            80% {
                transform: translate(3px, -3px);
            }

            100% {
                transform: translate(0);
            }
        }

        @keyframes glitch-skew {
            0% {
                transform: skew(0deg);
            }

            20% {
                transform: skew(0deg);
            }

            25% {
                transform: skew(1deg);
            }

            30% {
                transform: skew(0deg);
            }

            100% {
                transform: skew(0deg);
            }
        }

        .glitch:hover::before,
        .glitch:hover::after {
            animation-duration: 0.1s;
        }

        /* Contador de stats animado */
        .stat-number {
            display: inline-block;
            font-variant-numeric: tabular-nums;
        }

        /* Imagen con efecto reveal */
        .img-reveal {
            position: relative;
            overflow: hidden;
        }

        .img-reveal::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(45deg, #eebf5e 0%, #000 100%);
            transform: translateX(-101%);
            transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .img-reveal:hover::after {
            transform: translateX(101%);
        }

        /* Parallax suave */
        .parallax-container {
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        /* Marquee infinito */
        .marquee-container {
            overflow: hidden;
            white-space: nowrap;
        }

        .marquee-content {
            display: inline-flex;
            animation: marquee 20s linear infinite;
        }

        .marquee-content:hover {
            animation-play-state: paused;
        }

        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* Galería hover effect */
        .gallery-item {
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .gallery-item img {
            transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s;
        }

        .gallery-item:hover img {
            transform: scale(1.15);
            filter: brightness(0.7);
        }

        .gallery-item .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.9) 100%);
            opacity: 0;
            transition: opacity 0.4s;
        }

        .gallery-item:hover .overlay {
            opacity: 1;
        }

        .gallery-item .overlay-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2rem;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.4s 0.1s;
        }

        .gallery-item:hover .overlay-content {
            transform: translateY(0);
            opacity: 1;
        }

        /* Cursor personalizado */
        .custom-cursor {
            width: 20px;
            height: 20px;
            border: 2px solid #eebf5e;
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            transition: transform 0.15s ease-out, border-color 0.3s;
            mix-blend-mode: difference;
        }

        .custom-cursor.hover {
            transform: scale(2);
            border-color: #fff;
        }

        /* Scroll indicator animado */
        .scroll-indicator {
            animation: bounce 2s infinite;
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-10px);
            }

            60% {
                transform: translateY(-5px);
            }
        }

        /* Text stroke animado */
        .text-stroke-animate {
            -webkit-text-stroke: 2px white;
            color: transparent;
            transition: all 0.5s;
        }

        .text-stroke-animate:hover {
            -webkit-text-stroke: 0px;
            color: #eebf5e;
        }

        /* Card 3D tilt */
        .card-3d {
            transform-style: preserve-3d;
            transition: transform 0.3s;
        }

        .card-3d:hover {
            transform: perspective(1000px) rotateY(5deg) rotateX(5deg);
        }

        /* Neon glow */
        .neon-gold {
            text-shadow: 0 0 10px rgba(238, 191, 94, 0.5),
                0 0 20px rgba(238, 191, 94, 0.3),
                0 0 40px rgba(238, 191, 94, 0.2);
        }

        /* Progress bar animado */
        .progress-bar {
            background: linear-gradient(90deg, #eebf5e 0%, #ffd700 50%, #eebf5e 100%);
            background-size: 200% 100%;
            animation: shimmer 2s linear infinite;
        }

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }

            100% {
                background-position: 200% 0;
            }
        }

        /* Magnetic button */
        .magnetic-btn {
            transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Split text reveal */
        .split-reveal span {
            display: inline-block;
            opacity: 0;
            transform: translateY(100%);
            animation: splitReveal 0.6s forwards;
        }

        @keyframes splitReveal {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Video overlay gradient */
        .video-overlay {
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
        }


/* Animación de entrada sutil para las aletas */
            .social-blade {
                animation: slideInFin 0.8s cubic-bezier(0.23, 1, 0.32, 1) backwards;
            }

            /* Personalización de la barra de desplazamiento para navegadores WebKit */
            ::-webkit-scrollbar {
                width: 10px;
            }

            ::-webkit-scrollbar-track {
                background: #f1f1f1;
            }

            ::-webkit-scrollbar-thumb {
                background: #ff5733;
                border-radius: 5px;
            }

            ::-webkit-scrollbar-thumb:hover {
                background: #c70039;
            }

            @keyframes slideInFin {
                from {
                    transform: translateX(-50px);
                    opacity: 0;
                }

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

            .social-blade:nth-child(1) {
                animation-delay: 0.1s;
            }

            .social-blade:nth-child(2) {
                animation-delay: 0.2s;
            }

            .social-blade:nth-child(3) {
                animation-delay: 0.3s;
            }

            /* Efecto de Flicker al Hover (System Malfunction Style) */
            .group:hover .font-header {
                animation: textFlicker 0.4s linear;
            }

            @keyframes textFlicker {
                0% {
                    opacity: 0;
                }

                20% {
                    opacity: 1;
                }

                40% {
                    opacity: 0.5;
                }

                60% {
                    opacity: 1;
                }

                100% {
                    opacity: 1;
                }
            }


/* Aseguramos la fuente para el diseño Gym */
.font-gym {
    font-family: 'Oswald', sans-serif;
}