/* 📱 Teléfonos (ej. iPhone 6, 7, 8) */
@media (max-width: 480px) and (min-width: 320px) {
    .tobtn a{
        margin-top: 0px !important;
        margin-left: 0px !important;
        margin-bottom: 20px !important;
    }
        body .videohero video{
            width: 190%;
        }
        body .videohero {
                height: 100%;
        }
        .leftPapper {
            position: absolute;
            left: 0;
            z-index: 9;
            width: 120px;
        }
        .fixed-top{z-index: 99999999;}
        /* Botón hamburguesa personalizado */
        .mobile-menu-btn {
            background: none;
            border: none;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 25px;
            cursor: pointer;
            padding: 0;
            transition: all 0.3s ease;
        }
        body .floatingIcon {
            position: absolute;
            right: -33px;
            bottom: -49px;
            width: 70px;
        }
        body .mtx-center {
            margin-top: 14vh;
        }
                body .masking { 
                    /* position: absolute;
                    left: 50%;
                    top: 57%;
                    transform: translate(-50%, -50%);
                    height: 130%;
                    width: 221%;
                    max-width: 5000%; */
                    display: none;
                }
        .hamburger-line {
            width: 100%;
            height: 3px;
            background-color: #000;
            transition: all 0.3s ease;
            border-radius: 2px;
        }

        .mobile-menu-btn:hover .hamburger-line {
            background-color: #f72837;
        }

        /* Animación del botón cuando está activo */
        .mobile-menu-btn.active .hamburger-line:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }

        .mobile-menu-btn.active .hamburger-line:nth-child(2) {
            opacity: 0;
        }

        .mobile-menu-btn.active .hamburger-line:nth-child(3) {
            transform: rotate(-45deg) translate(8px, -8px);
        }

        /* Menú móvil de pantalla completa */
        .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateY(-100%);
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .mobile-menu.active {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
        }

        /* Botón cerrar */
        .mobile-menu-close {
            position: absolute;
            top: 30px;
            right: 30px;
            background: none;
            border: none;
            color: white;
            font-size: 3rem;
            cursor: pointer;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            border-radius: 50%;
        }

        .mobile-menu-close:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(90deg);
        }

        /* Contenido del menú móvil */
        .mobile-menu-content {
            text-align: center;
            width: 100%;
            padding: 0 30px;
        }

        .mobile-nav-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .mobile-nav-item {
            margin-bottom: 0px;
            opacity: 0;
            transition: all 0.6s ease;
        }

        .mobile-menu.active .mobile-nav-item {
            opacity: 1;
            transform: translateY(0);
        }

        /* Animación escalonada de los elementos */
        .mobile-menu.active .mobile-nav-item:nth-child(1) { transition-delay: 0.1s; }
        .mobile-menu.active .mobile-nav-item:nth-child(2) { transition-delay: 0.2s; }
        .mobile-menu.active .mobile-nav-item:nth-child(3) { transition-delay: 0.3s; }
        .mobile-menu.active .mobile-nav-item:nth-child(4) { transition-delay: 0.4s; }
        .mobile-menu.active .mobile-nav-item:nth-child(5) { transition-delay: 0.5s; }
        .mobile-menu.active .mobile-nav-item:nth-child(6) { transition-delay: 0.6s; }
        .mobile-menu.active .mobile-nav-item:nth-child(7) { transition-delay: 0.7s; }

        .mobile-nav-link {
            color: white !important;
            font-size: 18px;
            font-weight: 700;
            text-decoration: none;
            text-transform: uppercase;
            transition: all 0.3s ease;
            display: block;
            padding: 5px 0;
            position: relative;
        }

        .mobile-nav-link:hover {
            color: #f72837 !important;
            transform: scale(1.1);
        }

         

        /* Redes sociales en móvil */
        .mobile-social {
            margin-top: 50px;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease 0.8s;
        }
        .text-end {
            text-align: right !important;
            display: flex;
            justify-content: end;
        }
        .mobile-menu.active .mobile-social {
            opacity: 1;
            transform: translateY(0);
        }

        .mobile-social-link {
            color: rgba(255, 255, 255, 0.7) !important;
            font-size: 1.2rem;
            font-weight: 500;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }
                body .floatingSticker3 {
                    position: absolute;
                        width: 81px;
                        right: 0px;
                        bottom: -67px;
                    animation: scaleUpDown 2s ease-in-out infinite;
                }
                body .pb-320 {
                    padding-bottom: 190px !important;
                }
                #memories{
                    background-size: cover;
                        background-attachment: fixed;
                }
                body .pt-420 {
                    padding-top: 120px;
                }
                @keyframes scaleUpDown {
        
                    0%,
                    100% {
                        transform: scale(1);
                    }
        
                    50% {
                        transform: scale(1.2);
                    }
                }
                .overflow-xs-hidden{overflow: hidden !important;}
                .row.mb-190 {
                    margin-bottom: 90px !important;
                }
                .pt-xs-0{padding-top: 0px !important;}
                .faceIcon {
                    width: 100px;
                    top: -50px;
                    display: none;
                }
                .mobile-off{display: none !important;}
                .faceIcon2 {
                    width: 109px;
                    display: block !important;
                    position: absolute;
                    top: 12%;
                    right: 29px;
                    transform: rotate(27deg);
                    z-index: -1;
                }
                html body .lead {
                    font-size: 1rem;
                    font-weight: 500;
                    margin-top: 30px;
                }
                body .megabuttom{
                    font-size: 16px;
                }
                                .floatingSticker2 {
                                    animation: rotateBackForth 3s ease-in-out infinite;
                                }
                
                                @keyframes rotateBackForth {
                
                                    0%,
                                    100% {
                                        transform: rotate(-15deg);
                                    }
                
                                    50% {
                                        transform: rotate(15deg);
                                    }
                                }
                                .floatingSticker1 {
                                    animation: rotateInfinite 30s linear infinite;
                                }
                
                                @keyframes rotateInfinite {
                                    from {
                                        transform: rotate(0deg);
                                    }
                
                                    to {
                                        transform: rotate(360deg);
                                    }
                                }
        .rightPapper {
            position: absolute;
            right: 0px;
            z-index: 1;
            width: 100px;
            top: auto;
            bottom: 0;
        }
        body .thunderIcon {
            position: absolute;
            width: 113px;
            right: 0vw;
            top: -82px;
        }
        body .rightPapper_bottom {
            position: absolute;
            right: 0px;
            z-index: 1;
            width: 100px;
            top: -2px;
        }
        #firstSection{
            height: 400px;
        }
        .y-bars:after,
        .y-bars:before {
            content: "";
            width: 60px;
        }
        .x-bars:before {
            content: "";
            height: 98px;
        }
        .x-bars:after {
            content: "";
            height: 48px;
        }
        .mobile-social-link:hover {
            color: white !important;
        }

        /* Efecto de blur en el fondo cuando se abre el menú */
        body.mobile-menu-open {
            overflow: hidden;
        }

        body.mobile-menu-open::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backdrop-filter: blur(10px);
            z-index: 9998;
        }

        .col-xs-1 {
            flex: 0 0 auto;
            width: 8.33333333%;
        }

        .col-xs-2 {
            flex: 0 0 auto;
            width: 16.66666667%;
        }

        .col-xs-3 {
            flex: 0 0 auto;
            width: 25%;
        }

        .col-xs-4 {
            flex: 0 0 auto;
            width: 33.33333333%;
        }

        .col-xs-5 {
            flex: 0 0 auto;
            width: 41.66666667%;
        }

        .col-xs-6 {
            flex: 0 0 auto;
            width: 50%;
        }

        .col-xs-7 {
            flex: 0 0 auto;
            width: 58.33333333%;
        }

        .col-xs-8 {
            flex: 0 0 auto;
            width: 66.66666667%;
        }

        .col-xs-9 {
            flex: 0 0 auto;
            width: 75%;
        }

        .col-xs-10 {
            flex: 0 0 auto;
            width: 83.33333333%;
        }

        .col-xs-11 {
            flex: 0 0 auto;
            width: 91.66666667%;
        }

        .col-xs-12 {
            flex: 0 0 auto;
            width: 100%;
        }
        /* Margin Top XS */
        .mt-xs-0 {
            margin-top: 0px;
        }

        .mt-xs-10 {
            margin-top: 10px;
        }

        .mt-xs-20 {
            margin-top: 20px;
        }

        .mt-xs-30 {
            margin-top: 30px;
        }

        .mt-xs-40 {
            margin-top: 40px;
        }

        .mt-xs-50 {
            margin-top: 50px;
        }

        .mt-xs-60 {
            margin-top: 60px;
        }

        .mt-xs-70 {
            margin-top: 70px;
        }

        .mt-xs-80 {
            margin-top: 80px;
        }

        .mt-xs-90 {
            margin-top: 90px;
        }

        .mt-xs-100 {
            margin-top: 100px;
        }

        .mt-xs-110 {
            margin-top: 110px;
        }

        .mt-xs-120 {
            margin-top: 120px;
        }

        /* Margin Bottom XS */
        .mb-xs-0 {
            margin-bottom: 0px;
        }

        .mb-xs-10 {
            margin-bottom: 10px;
        }

        .mb-xs-20 {
            margin-bottom: 20px;
        }

        .mb-xs-30 {
            margin-bottom: 30px;
        }

        .mb-xs-40 {
            margin-bottom: 40px;
        }

        .mb-xs-50 {
            margin-bottom: 50px;
        }

        .mb-xs-60 {
            margin-bottom: 60px;
        }

        .mb-xs-70 {
            margin-bottom: 70px;
        }

        .mb-xs-80 {
            margin-bottom: 80px;
        }

        .mb-xs-90 {
            margin-bottom: 90px;
        }

        .mb-xs-100 {
            margin-bottom: 100px;
        }

        .mb-xs-110 {
            margin-bottom: 110px;
        }

        .mb-xs-120 {
            margin-bottom: 120px;
        }
        body h2 {
            line-height: 1.3;
            font-size: 1.4em;
        }
        body .logoPHX{min-width: 100% !important;}
        body .details{
            flex-direction: column;
            flex-wrap: wrap;
            width: 100%;
        }
        body .details>li img:not(.logophy) {
            height: 300px; 
        }
        .details>li{
            width: 100%;
        }
        .d-xs-wrap>div{width: 100%;}
        .d-xs-wrap{
            flex-wrap: wrap !important;
        }
        body h3 {
            font-weight: bolder;
            font-size: 1.7rem;
            line-height: 1.1;
            margin-bottom: 20px;
        }
        body .details>li:not(:nth-child(1)) {
            padding: 30px;
        }
        .details>li:nth-child(2){
            height: auto !important;
        }
        .price-value{text-align: right;}
        body .included-list {
            padding-left: 15px;
        }
        body .details>li:nth-child(4){
            margin-top: 0px !important;
        }
        body .schedule { 
            padding: 30px; 
        }
        body .LeftSticker1 {
            position: absolute;
            left: 10px;
            bottom: -51px;
            width: 78px;
            z-index: 99;
        }
        body .Rightsticker {
            position: absolute;
            right: 0;
            bottom: -90px;
            z-index: 98;
            width: 85px;
        }
        body .LeftSticker2 {
            position: absolute;
            left: 92px;
            bottom: -64px;
            z-index: 98;
            width: 59px;
        }
        body .pt-320 {
            padding-top: 120px !important;
        }

        body .experience-boxes-x3 li{
            width: 100% !important;
        }
        .experience-boxes-x3 {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            gap: 15px;
        }
        body .StickersLeft {
            position: absolute;
            left: 0;
            top: -97px;
            bottom: auto;
            margin: auto;
            z-index: 9;
            width: 75px;
        }
        .sw{width: 140px;}
        body .StickersRight {
            position: absolute;
            right: 0;
            top: 0;
            bottom: -200px;
            margin: auto;
            z-index: 9;
            width: 50px;
        }
        img.subtitle{position: inherit !important;top: 40px !important;}
        footer {font-size: 10px !important;}
                .sub-footer{
                    flex-direction: column;
                }
                .sub-footer li{
                    width: 100%;
                }
    }