{"id":1125,"date":"2026-02-24T19:51:12","date_gmt":"2026-02-24T18:51:12","guid":{"rendered":"https:\/\/therebelflame.com\/?page_id=1125"},"modified":"2026-03-05T20:34:57","modified_gmt":"2026-03-05T19:34:57","slug":"home","status":"publish","type":"page","link":"https:\/\/therebelflame.com\/?page_id=1125","title":{"rendered":"Home"},"content":{"rendered":"    <div class=\"alignfull wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-1'>\r\n    <!DOCTYPE html>\n<html lang=\"es\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <title>The Rebel Flame<\/title>\n\n    <!-- ESTEEE EVITA EL ZOOM EN M\u00d3VIL -->\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\n\n    <!-- Bootstrap -->\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <!-- Google Fonts -->\n    <link\n        href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;600&#038;family=Inter:wght@300;400;500&#038;display=swap\"\n        rel=\"stylesheet\">\n    <link\n        href=\"https:\/\/fonts.googleapis.com\/css2?family=Dancing+Script&#038;family=Great+Vibes&#038;family=Montserrat:wght@300;400;600&#038;display=swap\"\n        rel=\"stylesheet\">\n    <link\n        href=\"https:\/\/fonts.googleapis.com\/css2?family=Dancing+Script&#038;family=Great+Vibes&#038;family=Montserrat:wght@300;400;600&#038;display=swap\"\n        rel=\"stylesheet\">\n\n\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?\nfamily=Great+Vibes&#038;\nfamily=Allura&#038;\nfamily=Alex+Brush&#038;\nfamily=Italianno&#038;\nfamily=Parisienne&#038;\nfamily=Sacramento&#038;\ndisplay=swap\" rel=\"stylesheet\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Birds+of+Paradise&#038;display=swap\" rel=\"stylesheet\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@300&#038;display=swap\" rel=\"stylesheet\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400&#038;display=swap\" rel=\"stylesheet\">\n\n    <!-- Font Awesome ICONOS -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\n    <style>\n        \/* ================================\n                    BODY\n        ================================ *\/\n        \/* Texto general *\/\n        body {\n\n            \/* font-family: 'Great Vibes', cursive; *\/\n            \/* font-family: 'Allura', cursive;  *\/\n            \/* font-family: 'Birds of Paradise', cursive; *\/\n            \/* font-family: 'Vintage Machine',  sans-serif; *\/\n            \/* font-family: 'Cormorant Garamond', serif; *\/\n\n            \/* font-weight: 300; *\/\n            font-size: 1.2rem;\n            user-select: none;\n            -webkit-user-select: none;\n            -ms-user-select: none;\n            \/* font-family: 'VintageMachine'; *\/\n            -webkit-font-smoothing: antialiased;\n            text-shadow: 0 0 0.1px rgba(0, 0, 0, 0.4);\n        }\n        .section-title,\n.about h2,\n.schedule-title,\n#contact-map h2 {\n    font-weight: 400 !important;\n}\nh1, h2 {\n    font-weight: 400 !important;\n    -webkit-font-smoothing: antialiased;\n    text-rendering: optimizeLegibility;\n}\n\n        h1,\n        h2 {\n            letter-spacing: 2px;\n        }\n\n        \/* Hero principal *\/\n        .hero h1 {\n            \/* font-family: 'Playfair Display', serif; *\/\n            font-weight: 400;\n            \/* M\u00c1S FINO *\/\n            letter-spacing: 1px;\n        }\n\n        \/* Subt\u00edtulo hero *\/\n        .hero p {\n            \/* font-family: 'Inter', sans-serif; *\/\n            font-weight: 300;\n            letter-spacing: 1px;\n            opacity: 0.85;\n            color: white;\n        }\n\n        \/* ================================\n                    HERO\n        ================================ *\/\n        .hero {\n            position: relative;\n            height: 100vh;\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            color: #ffffff83;\n\n            z-index: 0;\n        }\n\n        .hero-video {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transform: translate(-50%, -50%);\n            z-index: 0;\n        }\n\n        \/* OSCURECER VIDEO *\/\n        .hero::after {\n            content: \"\";\n            position: absolute;\n            inset: 0;\n            background: rgba(0, 0, 0, 0.45);\n            z-index: 1;\n        }\n\n\n        .hero h1 {\n            \/* font-family: 'Segoe UI', sans-serif; *\/\n            font-size: 4rem;\n            color: #ffffff !important;\n        }\n\n        .hero p {\n            font-size: 1.1rem;\n            opacity: .9;\n        }\n\n        \/* ================================\n                     TITULOS\n        ================================ *\/\n        .section-title {\n            \/* font-family: 'Playfair Display', serif; *\/\n            font-size: 2.4rem;\n            margin-bottom: 1rem;\n        }\n\n        \/* ================================\n                SOBRE NOSOTROS\n        ================================ *\/\n        \/* CONTENEDOR *\/\n        .about {\n            position: relative;\n            background: #ffffff;\n            z-index: 2;\n\n            margin-top: 120px;\n            padding: 160px 1rem 160px;\n            border-top-left-radius: 50px;\n            border-top-right-radius: 50px;\n        }\n\n        .about .section-title {\n            color: #1f1f1f;\n        }\n\n        .about .section-text {\n            color: #2c2c2c;\n        }\n\n\n        .section-text {\n            max-width: 620px;\n            margin: 60px auto;\n            \/* M\u00c1S aire arriba y abajo del texto *\/\n            line-height: 2;\n            font-size: 1rem;\n        }\n\n        \/*                 Bot\u00f3n C\u00f3mo llegar           *\/\n        .info-btn {\n            padding: 14px 40px;\n            border-radius: 40px;\n            border: none;\n            background: #ffb700;\n            color: #000;\n            font-size: 1rem;\n            font-weight: 500;\n            cursor: pointer;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n            transition:\n                background 0.3s ease,\n                color 0.3s ease,\n                transform 0.3s ease,\n                box-shadow 0.3s ease;\n        }\n\n        .info-btn:hover {\n            background: #ffffff5a;\n            transform: translateY(-6px);\n            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);\n        }\n\n\n\n        \/* ================================\n                    FOOTER\n        ================================ *\/\n        footer {\n            color: #ccc;\n            text-align: center;\n            padding: 2rem;\n        }\n\n        \/* ================================\n                BOT\u00d3N HERO\n        ================================ *\/\n        \/*          Bot\u00f3n Ver carta           *\/\n        .btn-menu {\n            padding: 14px 40px;\n            border-radius: 40px;\n            border: none;\n            background: #ffb700;\n            color: #000;\n            font-size: 1rem;\n            font-weight: 500;\n            cursor: pointer;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n            text-decoration: none;\n            transition: all 0.3s ease;\n        }\n\n        .btn-menu:hover {\n            background: #ffffff5a;\n            transform: translateY(-6px);\n            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);\n        }\n\n        .btn-centerVer {\n            display: block;\n            margin: 40px auto 0 auto;\n        }\n\n        \/* Otro main *\/\n        .btn-main {\n            padding: 10px 20px;\n            \/* \ud83d\udc48 m\u00e1s compacto *\/\n            border-radius: 28px;\n            border: none;\n            background: #ffb700;\n            color: #000;\n            font-size: 0.95rem;\n            \/* font-weight: 500; *\/\n            cursor: pointer;\n            display: inline-block;\n            width: auto;\n            max-width: max-content;\n            text-decoration: none;\n            transition: all 0.3s ease;\n\n        }\n\n        .btn-main,\n        .btn-mainVer,\n        .btn-menu,\n        .btn-menuCali,\n        .map-btn {\n            text-decoration: none !important;\n        }\n\n        .btn-menuCali:active,\n        .btn-menuCali:focus {\n            background: transparent !important;\n            color: #ffffff !important;\n            outline: none;\n            box-shadow: none;\n        }\n\n        .card .btn-main {\n            display: inline-block !important;\n            width: auto !important;\n        }\n\n        .btn-main:hover {\n            background:\n                \/* #ffffff5a *\/\n                #5a0c02;\n            color: #ffffff;\n            transform: translateY(-6px);\n            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);\n        }\n\n        \/* Boton VER *\/\n        \/* Otro main *\/\n        .btn-mainVer {\n            padding: 10px 20px;\n            border-radius: 28px;\n            border: none;\n            background: #ffb700;\n            color: #000;\n            font-size: 0.95rem;\n            font-weight: 500;\n            cursor: pointer;\n            display: inline-block;\n            width: auto;\n            max-width: max-content;\n            text-decoration: none;\n            transition: all 0.3s ease;\n            margin-top: 30px;\n        }\n\n        .card .btn-mainVer {\n            display: inline-block !important;\n            width: auto !important;\n        }\n\n        .btn-mainVer:hover {\n            background: #ffffff;\n            color: #000000;\n            transform: translateY(-6px);\n            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);\n        }\n\n\n        .btn-menuCali {\n            padding: 14px 40px;\n            border-radius: 40px;\n            border: none;\n            background: #ffb70000;\n            color: #ffb700;\n            font-size: 1rem;\n            font-weight: 500;\n            cursor: pointer;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n            transition:\n                \/* background 0.3s ease, *\/\n                color 0.3s ease,\n                transform 0.3s ease,\n                box-shadow 0.3s ease;\n            -webkit-tap-highlight-color: transparent;\n        }\n\n        .card .btn-mainCali {\n            display: inline-block !important;\n            width: auto !important;\n        }\n\n\n        .btn-menuCali:hover {\n            background: transparent !important;\n            color: #ffffff !important;\n        }\n\n\n\n        \/* Otro main *\/\n        .btbtn-main:hover {\n            padding: 10px 20px;\n            border-radius: 28px;\n            border: none;\n            background: #ffb700;\n            color: #000;\n            font-size: 0.95rem;\n            font-weight: 500;\n            cursor: pointer;\n            display: inline-block;\n            width: auto;\n            max-width: max-content;\n            text-decoration: none;\n            transition: all 0.3s ease;\n            justify-content: unset;\n\n        }\n\n        .card .btn-main {\n            display: inline-block !important;\n            width: auto !important;\n        }\n\n        .btn-main:hover {\n            background:\n                \/* #ffffff5a *\/\n                #5a0c02;\n            color: #ffffff;\n            transform: translateY(-6px);\n            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);\n        }\n\n\n\n\n        \/* TARJETAS (INFO SECTION) *\/\n        .info-section {\n            text-align: center;\n        }\n\n        .info-row,\n        .info-row.reverse {\n            grid-template-columns: 1fr;\n            gap: 30px;\n            justify-items: center;\n            text-align: center;\n        }\n\n        .info-text p {\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        .info-row {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .info-text {\n            text-align: center;\n        }\n\n        .info-text p {\n            margin: 0 auto;\n        }\n\n        .info-image {\n            width: 100%;\n            max-width: 320px;\n            height: 200px;\n            margin: 0 auto;\n        }\n\n        .info-btn {\n            margin: 0 auto;\n            display: block;\n        }\n\n        .info-row {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .info-image {\n            order: 3;\n        }\n\n        .info-text {\n            text-align: center;\n        }\n\n        \/* ================================\n                RESPONSIVE M\u00d3VIL\n        ================================ *\/\n\n        @media (max-width: 768px) {\n\n            \/* HERO *\/\n            .hero-logo {\n                width: 110px;\n                opacity: 0.8;\n            }\n\n            .hero {\n                padding: 0 1rem;\n            }\n\n            .hero h1 {\n                font-size: 2.2rem;\n                text-align: center;\n            }\n\n            \/* SOBRE NOSOTROS *\/\n            .about {\n                padding-left: 2rem;\n                padding-right: 2rem;\n                padding-bottom: 70px;\n            }\n\n            .features {\n                transform: translateY(320px);\n                \/* empieza m\u00e1s abajo *\/\n                transition: transform 1.2s ease;\n            }\n\n            \/* SECCI\u00d3N \u00daNICOS *\/\n            .features-title {\n                font-size: 2.8rem;\n                margin-top: 4rem;\n                margin-bottom: 4rem;\n                text-align: center;\n                line-height: 1.2;\n            }\n\n            .features-title span {\n                display: block;\n            }\n\n            .features-title::after {\n                content: \"\";\n                display: block;\n            }\n\n            .features-grid {\n                grid-template-columns: repeat(2, 1fr);\n                gap: 2.2rem 1.8rem;\n                margin: 0 auto 6rem;\n                max-width: 320px;\n            }\n\n            .features.visible {\n                transform: translateY(0);\n            }\n\n            .feature-item {\n                width: 90px;\n                height: 90px;\n                border-radius: 50%;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                margin-bottom: 18px;\n                transform: translateY(40px);\n                transition: all 0.6s ease;\n            }\n\n            .showcase-grid {\n                grid-template-columns: 1fr;\n                gap: 30px;\n                padding: 0 20px;\n            }\n\n            .showcase-item img {\n                height: 400px;\n            }\n\n            .slide-content {\n                left: 25px;\n                \/* m\u00e1s pegado a la izquierda *\/\n                right: 25px;\n                \/* evita que se salga *\/\n                bottom: 60px;\n                max-width: 90%;\n                text-align: left;\n            }\n\n            .slide-content h2 {\n                font-size: 2.2rem;\n                \/* un poco m\u00e1s compacto *\/\n            }\n\n            .slide-content p {\n                font-size: 1rem;\n            }\n\n        }\n\n        @media (min-width: 769px) {\n            .features {\n                transform: translateY(520px);\n            }\n\n            .features.visible {\n                transform: translateY(0);\n            }\n        }\n\n\n        \/* ================================\n                 LOADER TRANSICI\u00d3N\n        ================================ *\/\n\n        #page-loader {\n            position: fixed;\n            inset: 0;\n            background: #000000;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            z-index: 1000000;\n\n            opacity: 1;\n            transition: opacity 0.6s ease;\n        }\n\n        \/* Clase para desaparecer *\/\n        #page-loader.fade-out {\n            opacity: 0;\n            pointer-events: none;\n        }\n\n        .loader-content {\n            text-align: center;\n        }\n\n\n        .loader-logo {\n            width: 120px;\n            filter: brightness(0) invert(1);\n            animation: spinY 2s linear infinite, float 3s ease-in-out infinite;\n        }\n\n        #page-loader.active {\n            opacity: 1;\n            pointer-events: all;\n        }\n\n        \/* LOGO CARGAR P\u00c1GINA *\/\n        .loader-circle {\n            width: 160px;\n            height: 160px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            perspective: 1000px;\n            \/* NECESARIO para 3D *\/\n            background: transparent;\n        }\n\n        .loader-circle img {\n            width: 160px;\n            filter: brightness(0) invert(1);\n            animation: logoRotate3D 4s ease-in-out infinite;\n        }\n\n        \/* Giro derecha \u2192 izquierda *\/\n        @keyframes spinY {\n            from {\n                transform: rotateY(0deg);\n            }\n\n            to {\n                transform: rotateY(-360deg);\n            }\n        }\n\n        \/* Flotaci\u00f3n *\/\n        @keyframes float {\n\n            0%,\n            100% {\n                transform: translateY(0);\n            }\n\n            50% {\n                transform: translateY(-12px);\n            }\n        }\n\n        .loader-text {\n            margin-top: 20px;\n            font-size: 1.1rem;\n            color: #ffffff;\n            letter-spacing: 2px;\n        }\n\n        \/* Animaci\u00f3n puntos *\/\n        .dots::after {\n            content: \"\";\n            animation: dots 1.5s infinite steps(3);\n        }\n\n        @keyframes dots {\n            0% {\n                content: \"\";\n            }\n\n            33% {\n                content: \".\";\n            }\n\n            66% {\n                content: \"..\";\n            }\n\n            100% {\n                content: \"...\";\n            }\n        }\n\n        @keyframes logoRotate3D {\n            \/*    0% { transform: rotateY(0deg); }\n    50% { transform: rotateY(-180deg); }\n    100% { transform: rotateY(0deg); }\n} *\/\n\n            0% {\n                transform: rotateY(0deg);\n            }\n\n            25% {\n                transform: rotateY(40deg);\n            }\n\n            50% {\n                transform: rotateY(0deg);\n            }\n\n            75% {\n                transform: rotateY(-40deg);\n            }\n\n            100% {\n                transform: rotateY(0deg);\n            }\n        }\n\n        \/* BARRA CONTENEDOR *\/\n        .mobile-bar {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 130px;\n            background: #00000091;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 0 60px;\n            z-index: 1000;\n            transform: translateY(-100%);\n            transition: transform 0.4s ease;\n        }\n\n        \/* Cuando aparece *\/\n        .mobile-bar.visible {\n            transform: translateY(0);\n        }\n\n        \/* IZQUIERDA *\/\n        .bar-left {\n            display: flex;\n            align-items: center;\n            border: #ffb700;\n        }\n\n        \/* CENTRO *\/\n        .bar-center {\n            position: absolute;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n\n        \/* COLOR DE EL LOGO BARRA *\/\n        .bar-center img {\n            height: 105px;\n            filter: brightness(0) invert(1);\n        }\n\n        \/* DERECHA *\/\n        .bar-right {\n            display: flex;\n            align-items: center;\n            gap: 25px;\n            font-size: 1.5rem;\n        }\n\n        .bar-right a {\n            color: white;\n            transition: 0.3s ease;\n        }\n\n        .bar-right a:hover {\n            color: #ffb700;\n            \/* MOSTAZA *\/\n            transform: scale(1.1);\n        }\n\n        \/* Bot\u00f3n llamar *\/\n        .call-btn {\n            background: transparent;\n            color: white;\n            border: 1.2px solid white;\n            border-radius: 30px;\n            padding: 10px 22px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: 0.3s ease;\n            -webkit-tap-highlight-color: transparent;\n        }\n\n        .call-btn:hover {\n            background: #ffffff;\n            color: #000000;\n            border-color: #ffffff;\n\n        }\n\n        \/* QUITAR fondo azul al hacer click (m\u00f3vil + desktop) *\/\n        .call-btn:active,\n        .call-btn:focus {\n            background: transparent !important;\n            outline: none;\n            box-shadow: none;\n        }\n\n        .btn-main:active,\n        .btn-mainVer:active {\n            background: #ffffff !important;\n            color: #ffb700 !important;\n        }\n\n        \/* Bot\u00f3n de ubicaci\u00f3n antes de pasar el mouse*\/\n\n        .location-btn {\n            background: transparent;\n            border: 1px solid #ffffff;\n            color: #ffffff;\n            text-decoration: none;\n        }\n\n        \/* RESPONSIVE *\/\n        @media (max-width: 992px) {\n            .contact-container {\n                flex-direction: column;\n                text-align: center;\n            }\n\n            .contact-right {\n                margin-top: 60px;\n            }\n        }\n\n        \/* M\u00d3VIL Y TABLET *\/\n        @media (max-width: 1023px) {\n            .mobile-menu-btn {\n                display: flex !important;\n                display: none;\n\n\n            }\n\n            .mobile-bar {\n                display: none !important;\n            }\n        }\n\n\n        \/* ESCRITORIO *\/\n        @media (min-width: 1024px) {\n            .mobile-menu-btn {\n                display: none;\n            }\n\n            .mobile-bar {\n                display: flex;\n            }\n        }\n\n        \/* ================================\n   CONTACT MAP PRO REAL\n================================ *\/\n\n        #contact-map {\n            min-height: 100vh;\n            background: url('https:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=Calle+Embajadores+64+Madrid&zoom=15&size=1600x900&maptype=roadmap') center\/cover no-repeat;\n            position: relative;\n            display: flex;\n            align-items: center;\n        }\n\n        \/* Overlay blanco elegante *\/\n        #contact-map::before {\n            content: \"\";\n            position: absolute;\n            inset: 0;\n            background: rgba(0, 0, 0, 0.88);\n            backdrop-filter: blur(2px);\n        }\n\n        .contact-container {\n            position: relative;\n            z-index: 2;\n            width: 100%;\n            max-width: 1200px;\n            margin: auto;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 80px 40px;\n        }\n\n        \/* CONTACTANOS CUADRITO *\/\n\n        .contact-left {\n            background: rgba(0, 0, 0, 0.161);\n            backdrop-filter: blur(8px);\n            padding: 40px;\n            border-radius: 20px;\n            border: 1px solid rgba(0, 0, 0, 0.1);\n            box-shadow: 0 15px 40px rgb(0, 0, 0);\n        }\n\n        .contact-left h2 {\n            font-size: 3.2rem;\n            margin-bottom: 20px;\n            color: #111 !important;\n        }\n\n        .subtitle {\n            color: #000000;\n            margin-bottom: 40px;\n            font-weight: 500;\n        }\n\n        .info-block {\n            margin-bottom: 25px;\n        }\n\n        .info-block span {\n            font-size: 0.8rem;\n            font-weight: 600;\n            color: #000000;\n            letter-spacing: 1px;\n        }\n\n        .info-block p {\n            margin-top: 6px;\n            color: #333;\n        }\n\n        \/* BOT\u00d3N *\/\n        .map-btn {\n            display: inline-block;\n            margin-top: 35px;\n            padding: 15px 38px;\n            border-radius: 40px;\n            background: #ffb700;\n            color: rgb(0, 0, 0);\n            text-decoration: none;\n            font-weight: 500;\n            transition: 0.3s ease;\n        }\n\n        .map-btn:hover {\n            background: #5a0c02;\n            color: #ffffff;\n        }\n\n        \/* RADAR *\/\n        .contact-right {\n            position: relative;\n            width: 450px;\n            height: 450px;\n        }\n\n\n        \/* CIRCULO MAPA *\/\n        .radar {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 18px;\n            height: 18px;\n            background: #ffb70083;\n            border-radius: 50%;\n            transform: translate(-50%, -50%);\n        }\n\n        .radar::before,\n        .radar::after {\n            content: \"\";\n            position: absolute;\n            inset: -15px;\n            border: 2px solid #ffb700b3;\n            border-radius: 50%;\n            animation: pulse 2.5s infinite;\n        }\n\n        .radar::after {\n            animation-delay: 1.2s;\n        }\n\n        @keyframes pulse {\n            0% {\n                transform: scale(0.8);\n                opacity: 1;\n            }\n\n            100% {\n                transform: scale(3);\n                opacity: 0;\n            }\n        }\n\n\n\n\n        \/* DISE\u00d1O REDES SOCIALES BARRA *\/\n\n        \/*         .bar-socials {\n            display: flex;\n            gap: 20px;\n            font-size: 1.4rem;\n        }\n\n        .bar-socials a {\n            color: white;\n            transition: 0.3s ease;\n        }\n\n        .bar-socials a:hover {\n            opacity: 0.6;\n            transform: scale(1.1);\n        } *\/\n\n\n\n        .left-bar {\n            display: flex;\n            align-items: center;\n            gap: 30px;\n        }\n\n        .bar-socials {\n            display: flex;\n            gap: 20px;\n            font-size: 1.4rem;\n        }\n\n        .bar-socials a {\n            color: white;\n            transition: 0.3s ease;\n        }\n\n        .bar-socials a:hover {\n            color: #ffb700;\n            \/* MOSTAZA *\/\n            transform: scale(1.1);\n        }\n\n\n\n        \/* CUADRO GLASS LLAMADA *\/\n\n        .call-glass {\n            position: fixed;\n            inset: 0;\n            display: none;\n            align-items: center;\n            justify-content: center;\n            z-index: 1000;\n            background: rgba(0, 0, 0, 0.513);\n        }\n\n        .glass-content {\n            \/* cuadro de \"llamar ahora\"  despues de darle al boton fondo *\/\n            background: rgba(0, 0, 0, 0.481);\n            backdrop-filter: blur(18px);\n            border-radius: 24px;\n            padding: 30px;\n            width: 85%;\n            max-width: 320px;\n            text-align: center;\n            \/* Sombra *\/\n            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.63);\n            color: #ffffff;\n        }\n\n        \/* T\u00cdTULO MODAL LLAMADA EN BLANCO *\/\n        .glass-content h4 {\n            color: #ffffff !important;\n        }\n\n\n\n        \/*    Bot\u00f3n Llamar ahora (glass)     *\/\n        .glass-call {\n            padding: 14px 40px;\n            border-radius: 40px;\n            border: none;\n            background: #ffb700;\n            color: #000;\n            font-size: 1rem;\n            font-weight: 500;\n            cursor: pointer;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n            text-decoration: none;\n            transition:\n                background 0.3s ease,\n                transform 0.3s ease,\n                box-shadow 0.3s ease;\n        }\n\n        .glass-call:hover {\n            background: #ffffff5a;\n            transform: translateY(-6px);\n            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);\n        }\n\n        \/*                 Bot\u00f3n Cerrar           *\/\n        .glass-close {\n            padding: 14px 40px;\n            border-radius: 40px;\n            border: none;\n            background: #ffb700;\n            color: #000;\n            font-size: 1rem;\n            font-weight: 500;\n            cursor: pointer;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n            transition:\n                background 0.3s ease,\n                transform 0.3s ease,\n                box-shadow 0.3s ease;\n            margin-top: 10px;\n        }\n\n        .glass-close:hover {\n            background: #ffffff5a;\n            transform: translateY(-6px);\n            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.35);\n        }\n\n\n        \/* ================================\n        EVENTOS PRO VERSION\n================================ *\/\n        #aquarim-events {\n            padding: 120px 0;\n            text-align: center;\n            background: #ffffff;\n            padding: 120px 0;\n\n            \/* min-height: 100vh;\n            \/* altura total pantalla *\/\n            display: flex;\n            align-items: center;\n            \/* centro vertical *\/\n            justify-content: center;\n            \/* centro horizontal *\/\n            background: #ffffff;\n\n\n        }\n\n\n\n        #aquarim-events .wrap {\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 20px;\n        }\n\n        #aquarim-events .hero-row {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 80vh;\n            text-align: center;\n\n        }\n\n        \/* VIDEO OVALADO *\/\n        #aquarim-events .arch.center {\n            width: 100%;\n            max-width: 600px;\n            height: 750px;\n            border-radius: 100vmax;\n            overflow: hidden;\n        }\n\n        #aquarim-events .arch.center video {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        \/* PANEL DERECHO *\/\n\n        #aquarim-events .right-pane {\n            max-width: 650px;\n            margin: 0 auto;\n        }\n\n        #aquarim-events .title {\n            \/* font-family: 'Playfair Display', serif; *\/\n            font-size: 3rem;\n            margin-bottom: 20px;\n        }\n\n        #aquarim-events .lead {\n            opacity: 0.6;\n            margin-bottom: 40px;\n            line-height: 1.6;\n        }\n\n        \/* TARJETA ROJA *\/\n        #aquarim-events .card {\n            background: #f5f5f5;\n            border-radius: 20px;\n            padding: 50px;\n            margin-top: 40px;\n            text-align: center;\n\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        #aquarim-events .card .btn-main {\n            width: auto;\n            align-self: center;\n            display: inline-block;\n            margin: 25px auto 0 auto;\n        }\n\n        #aquarim-events .card h3 {\n            \/* font-family: 'Playfair Display', serif; *\/\n            margin-bottom: 25px;\n        }\n\n        #aquarim-events .card p {\n            opacity: 0.85;\n            line-height: 1.6;\n        }\n\n        \/* BOTONES *\/\n        #aquarim-events .btn {\n            display: inline-block;\n            margin-top: 25px;\n            padding: 12px 28px;\n            border-radius: 40px;\n            border: 1px solid #fff;\n            background: #ffb700;\n            color: #ffffff;\n            text-decoration: none;\n            transition: 0.3s;\n            font-size: 0.95rem;\n            width: 40%;\n            margin: 20px auto;\n        }\n\n        #aquarim-events .btn:hover {\n            background: #fff;\n            color: #000;\n        }\n\n        \/* RESPONSIVE *\/\n        @media(max-width: 992px) {\n            #aquarim-events .hero-row {\n                grid-template-columns: 1fr;\n                text-align: center;\n            }\n\n            #aquarim-events .arch.center {\n                margin: 0 auto 40px;\n                height: 550px;\n            }\n        }\n\n        \/* UBICACI\u00d3N *\/\n\n        #ubicacion {\n            width: 100%;\n            background: #ffffff;\n            padding: 80px 0;\n            text-align: center;\n        }\n\n        .ubicacion-title {\n            \/* font-family: 'Playfair Display', serif; *\/\n            font-size: 2.2rem;\n            margin-bottom: 30px;\n        }\n\n        \/* CONTACTO *\/\n        #contacto {\n            background: #ffffff;\n            color: rgb(0, 0, 0);\n            padding: 100px 20px;\n            text-align: center;\n        }\n\n        #contacto .contacto-title {\n            \/* font-family: 'Playfair Display', serif; *\/\n            font-size: 2.4rem;\n            margin-bottom: 40px;\n        }\n\n        #contacto .btn {\n            border-radius: 40px;\n            padding: 12px 30px;\n            background-color: #ffb700;\n        }\n\n\n        \/* Ubicanos \/\/\/\/\/ *\/\n        #contact-map {\n            position: relative;\n            height: 100vh;\n            overflow: hidden;\n        }\n\n        \/* MAPA REAL *\/\n        #contact-map iframe {\n            position: absolute;\n            inset: 0;\n            width: 100%;\n            height: 100%;\n            border: 0;\n            filter: grayscale(100%) contrast(90%);\n            pointer-events: none;\n        }\n\n        \/* OVERLAY BLANCO *\/\n        .contact-overlay {\n            position: absolute;\n            inset: 0;\n            background: rgba(0, 0, 0, 0.055);\n            display: flex;\n            align-items: center;\n        }\n\n        \/* CONTENIDO *\/\n        .contact-container {\n            width: 100%;\n            max-width: 1200px;\n            margin: auto;\n            display: flex;\n            justify-content: space-between;\n            padding: 60px 40px;\n            position: relative;\n            z-index: 2;\n        }\n\n        \/* LOGO entrada *\/\n\n        \/* CONTENIDO ENCIMA *\/\n        .hero-content {\n            position: relative;\n            z-index: 2;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 18px;\n        }\n\n        .hero-logo {\n            width: 80px;\n            \/* tama\u00f1o desktop *\/\n            max-width: 60%;\n            height: auto;\n            opacity: 0.85;\n            \/* TRANSPARENCIA *\/\n            filter: brightness(1) invert(1);\n        }\n\n\n        \/*  SLIDER RESTAURANTE CUADRO  *\/\n\n        .restaurant-slider {\n            position: relative;\n            height: 85vh;\n\n            width: 90%;\n            max-width: 1400px;\n            margin: 80px auto;\n\n            border-radius: 40px;\n            overflow: hidden;\n\n            box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);\n        }\n\n        .slider-container {\n            position: relative;\n            width: 100%;\n            height: 100%;\n        }\n\n        .slide {\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            opacity: 0;\n            transition: opacity 2.5s ease-in-out;\n            \/* M\u00c1S LENTO *\/\n        }\n\n        .slide.active {\n            opacity: 1;\n            z-index: 2;\n        }\n\n        .slide img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        .slide::after {\n            content: \"\";\n            position: absolute;\n            inset: 0;\n            background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));\n        }\n\n        .slide-content {\n            position: absolute;\n            bottom: 80px;\n            left: 80px;\n            color: #fff;\n            max-width: 500px;\n            z-index: 3;\n        }\n\n        .slide-content span {\n            font-size: 2rem;\n            \/* font-family: 'Playfair Display', serif; *\/\n            opacity: 0.8;\n            color: #ffffff;\n        }\n\n        .slide-content h2 {\n            font-size: 2.8rem;\n            margin: 15px 0;\n            color: #ffffff;\n        }\n\n        \/* FLECHAS  *\/\n        .slider-btn {\n            position: absolute;\n            top: 50%;\n            background: transparent;\n            \/* SIN FONDO *\/\n            border: none;\n            color: #ffffff;\n            \/* Flecha blanca *\/\n            font-size: 3rem;\n            \/* M\u00e1s elegante *\/\n            cursor: pointer;\n            padding: 0;\n            \/* Sin espacio circular *\/\n            transition: opacity 0.3s ease;\n            z-index: 5;\n        }\n\n        .slider-btn:hover {\n            opacity: 0.6;\n            \/* Efecto sutil *\/\n        }\n\n        .prev {\n            left: 40px;\n        }\n\n        .next {\n            right: 40px;\n        }\n\n\n        \/*    DOTS *\/\n\n\n        .slider-dots {\n            position: absolute;\n            bottom: 30px;\n            width: 100%;\n            text-align: center;\n            z-index: 5;\n        }\n\n        .dot {\n            display: inline-block;\n            width: 10px;\n            height: 10px;\n            margin: 0 6px;\n            background: rgba(255, 255, 255, 0.5);\n            border-radius: 50%;\n            cursor: pointer;\n            transition: 0.3s;\n        }\n\n        .dot.active {\n            background: #ffffff;\n            transform: scale(1.3);\n        }\n\n\n        \/* HORARIO *\/\n\n        .schedule-section {\n            padding: 120px 20px;\n            background: #ffffff;\n            text-align: center;\n        }\n\n        .schedule-title {\n            \/* font-family: 'Playfair Display', serif; *\/\n            font-size: 3rem;\n            margin-bottom: 80px;\n            color: #111;\n        }\n\n        .schedule-grid {\n            display: flex;\n            justify-content: center;\n            gap: 120px;\n            flex-wrap: wrap;\n        }\n\n        .schedule-item {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n            font-size: 1rem;\n            color: #444;\n        }\n\n        .schedule-item span {\n            font-weight: 500;\n            letter-spacing: 1px;\n        }\n\n        .schedule-item strong {\n            font-size: 1.1rem;\n            font-weight: 600;\n            color: #000;\n        }\n\n        \/*  PUNT\u00daANOS *\/\n\n        .hero-social {\n            margin-top: 9px;\n            display: flex;\n            gap: 18px;\n            font-size: 1rem;\n        }\n\n        .hero-social a {\n            color: #ffffff;\n            transition: transform 0.3s ease, opacity 0.3s ease;\n        }\n\n        .hero-social a:hover {\n            transform: scale(1.2);\n            opacity: 0.7;\n        }\n\n        .review-section {\n            min-height: 100vh;\n            \/* ocupa toda la pantalla *\/\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            \/* centro vertical *\/\n            align-items: center;\n            \/* centro horizontal *\/\n            background: #000000;\n            \/* fondo negro *\/\n            text-align: center;\n            padding: 40px 20px;\n\n            min-height: 70vh;\n            \/* m\u00e1s compacto *\/\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            background: #000000;\n            text-align: center;\n            padding: 60px 20px;\n        }\n\n        .review-section .btn-menuCali {\n            margin-top: 10px;\n        }\n\n        .review-section h2 {\n\n            font-size: 2.5rem;\n            margin-bottom: 20px;\n            color: #fff;\n        }\n\n        \/* EMOJIS *\/\n        .review-faces {\n            display: flex;\n            justify-content: center;\n            gap: 40px;\n            font-size: 1.8rem;\n            margin-bottom: 20px;\n        }\n\n        .face {\n            cursor: pointer;\n            color: #ffffff;\n            transition: transform 0.3s ease, color 0.3s ease;\n        }\n\n        \/* TEXTO DEBAJO EMOJIS *\/\n        .review-text {\n            margin-top: 10px;\n            margin-bottom: 20px;\n            color: #ffffffae;\n        }\n\n        .face:hover {\n            transform: scale(1.2);\n            color: #ffb700;\n        }\n\n        .review-btn {\n            padding: 14px 40px;\n        }\n\n        \/* TRANSICI\u00d3N CIRCULAR DE ENTRADA *\/\n\n        #circle-transition {\n            position: fixed;\n            inset: 0;\n            background: #000;\n            z-index: 999999;\n            clip-path: circle(0% at 50% 50%);\n            transition: clip-path 1s cubic-bezier(.77, 0, .18, 1);\n        }\n\n        \/* cuando aparece (absorbe) *\/\n        #circle-transition.expand {\n            clip-path: circle(150% at 50% 50%);\n        }\n\n        \/* cuando desaparece *\/\n        #circle-transition.shrink {\n            clip-path: circle(0% at 50% 50%);\n        }\n\n\n        #circle-transition.open {\n            clip-path: circle(150% at 50% 50%);\n        }\n\n\n        #circle-transition.fade-out {\n            opacity: 0;\n        }\n\n        \/* ================================\n        NOSOTROS PRO\n================================ *\/\n\n        #nosotros-pro {\n            background: #000;\n        }\n\n        .nosotros-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            min-height: 1000px;\n        }\n\n        .nosotros-img {\n            background-image: url('https:\/\/therebelflame.com\/wp-content\/uploads\/2025\/08\/emma-funk-Aa0noZHIeXg-unsplash-scaled.jpg');\n            background-size: cover;\n            background-position: center;\n        }\n\n        \/* Nosotros nacimos... *\/\n\n        .nosotros-content {\n            background: #5a0c02;\n            color: #fff;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            padding: 120px 80px;\n            line-height: 1.9;\n            text-align: center;\n        }\n\n        .nosotros-content p {\n            max-width: 650px;\n            margin-bottom: 40px;\n            \/* controla separaci\u00f3n *\/\n        }\n\n        \/* BOTON VER MENU SEGUNDO *\/\n\n        .btn-nosotros {\n            margin-top: 40px;\n            width: 220px;\n            text-align: center;\n            padding: 18px 58px;\n            border: 2px solid #ffffffc2;\n            color: #fff;\n            text-decoration: none;\n            letter-spacing: 2px;\n            transition: .3s;\n        }\n\n        .btn-nosotros:hover {\n            background: #fff;\n            color: #000;\n        }\n\n        @media(max-width:992px) {\n            .nosotros-img {\n                grid-template-columns: 1fr;\n                min-height: 550px;\n                \/* \ud83d\udc48 m\u00e1s alta *\/\n                background-size: cover;\n                background-position: center;\n                height: 80vh;\n            }\n\n            .nosotros-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n\n\n\n        .mobile-menu-btn:hover {\n            transform: scale(1.1);\n        }\n\n\n\n\n        \/* ================================\n        FRANJA NEGRA\n================================ *\/\n\n        .franja-texto {\n            background: #ffffff;\n            color: #000000;\n            text-align: center;\n            padding: 140px 20px;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .franja-texto h2 {\n            \/* font-family: \"Courier New\", monospace; *\/\n            font-weight: 300;\n            font-size: 2rem;\n            letter-spacing: 2px;\n        }\n\n        .marquee-top,\n        .marquee-bottom {\n            position: absolute;\n            width: max-content;\n            white-space: nowrap;\n            animation: scrollText 90s linear infinite;\n            \/* font-family: 'Inter', sans-serif; *\/\n            \/* letter-spacing: 5px;  *\/\n            word-spacing: 15px;\n            margin-right: 60px;\n            color: #00000096;\n        }\n\n        .marquee-top {\n            top: 30px;\n        }\n\n        .marquee-bottom {\n            bottom: 30px;\n        }\n\n\n        @keyframes scrollText {\n            from {\n                transform: translateX(0);\n            }\n\n            to {\n                transform: translateX(-50%);\n            }\n        }\n\n        \/* Ver galer\u00eda *\/\n        .gallery-center {\n            padding: 20px 0;\n            \/* controla el espacio *\/\n            display: flex;\n            justify-content: center;\n        }\n\n        \/* =====  BOT\u00d3N OPCIONES ===== *\/\n        section.review-section {\n            min-height: auto !important;\n            padding: 100px 20px 80px 20px !important;\n        }\n\n        section.review-section .review-text {\n            margin-top: 15px !important;\n            margin-bottom: 15px !important;\n            color: #ffffffae;\n        }\n\n        section.review-section .btn-menuCali {\n            margin-top: 10px !important;\n            display: inline-flex;\n        }\n\n        .mobile-menu {\n            position: fixed;\n            top: 0;\n            right: 0;\n            width: 100%;\n            height: 100vh;\n            background: #ffffff81;\n            transform: translateX(100%);\n            transition: transform 0.5s cubic-bezier(.77, 0, .18, 1);\n            z-index: 9999998;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n        }\n\n        .mobile-menu.active {\n            transform: translate3d(0, 0, 0);\n        }\n\n\n        .mobile-overlay {\n            position: fixed;\n            inset: 0;\n            background: rgba(0, 0, 0, 0.4);\n            backdrop-filter: blur(4px);\n            opacity: 0;\n            pointer-events: none;\n            transition: 0.4s ease;\n            z-index: 9999997;\n        }\n\n        .mobile-overlay.active {\n            opacity: 1;\n            pointer-events: all;\n        }\n\n        .mobile-menu-content {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 35px;\n            text-align: center;\n        }\n\n        .mobile-link {\n            font-size: 1.3rem;\n            letter-spacing: 3px;\n            font-weight: 500;\n            color: #111;\n            text-decoration: none;\n            transition: 0.3s ease;\n        }\n\n        .mobile-link:hover {\n            color: #ffb700;\n            transform: translateY(-4px);\n        }\n\n        .mobile-social {\n            margin-top: 40px;\n            display: flex;\n            gap: 25px;\n            font-size: 1.3rem;\n        }\n\n        .mobile-social a {\n            color: #000000;\n            transition: 0.3s ease;\n        }\n\n        .mobile-social a:hover {\n            color: #ffb700;\n        }\n\n        \/* LINEA *\/\n\n        .mobile-menu::before {\n            content: \"\";\n            position: absolute;\n            top: 40px;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 80px;\n            height: 3px;\n            background: #000000;\n            border-radius: 3px;\n        }\n\n        .close-menu {\n            position: absolute;\n            top: 25px;\n            right: 25px;\n            background: none;\n            border: none;\n            color: #ffb700;\n            font-size: 1.8rem;\n            cursor: pointer;\n        }\n\n        \/* ===== BOTON OPCIONES ===== *\/\n\n        a {\n            -webkit-tap-highlight-color: black;\n        }\n\n        .mobile-menu-btn {\n            position: fixed;\n            top: 25px;\n            right: 25px;\n            width: 45px;\n            height: 50px;\n            background: #000000;\n            border-radius: 18px;\n            display: none;\n            align-items: center;\n            justify-content: center;\n            flex-direction: column;\n            gap: 3px;\n            cursor: pointer;\n            z-index: 2147483647;\n            \/* EDIT *\/\n            opacity: 0;\n            pointer-events: none;\n            transition: opacity 0.4s ease;\n\n        }\n\n        .mobile-menu-btn.show {\n            opacity: 1;\n            pointer-events: auto;\n\n        }\n\n        .mobile-menu-btn span {\n            width: 24px;\n            height: 2px;\n            background: #ffb700;\n            border-radius: 2px;\n            display: block;\n        }\n\n        body.menu-open {\n            overflow: hidden;\n        }\n\n        #scrollTopBtn {\n            display: none !important;\n        }\n\n\n        \/* CALIF\u00cdCANOS *\/\n\n        \/* OCULTAR RADIO REAL *\/\n        .review-options input[type=\"radio\"] {\n            display: none;\n        }\n\n        \/* CONTENEDOR *\/\n        .review-options {\n            display: flex;\n            justify-content: center;\n            gap: 40px;\n            margin: 25px 0;\n        }\n\n        \/* CARITAS *\/\n        .review-face {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            cursor: pointer;\n            color: #ffffff;\n            font-size: 2rem;\n            transition: 0.3s ease;\n        }\n\n        \/* TEXTO DEBAJO *\/\n        .review-face span {\n            margin-top: 8px;\n            font-size: 0.8rem;\n            letter-spacing: 1px;\n        }\n\n        \/* HOVER *\/\n        .review-face:hover {\n            transform: scale(1.2);\n            color: #ffb700;\n        }\n\n        \/* SELECCIONADO *\/\n        .review-options input[type=\"radio\"]:checked+.review-face {\n            color: #ffb700;\n            transform: scale(1.2);\n        }\n\n        \/* TEXTAREA *\/\n        .review-textarea {\n            width: 100%;\n            padding: 12px;\n            border-radius: 12px;\n            border: none;\n            margin: 20px 0;\n            resize: none;\n        }\n\n        \/* Chrome, Edge, Safari *\/\n        ::-webkit-scrollbar {\n            width: 0px;\n            background: transparent;\n        }\n\n        .success-title {\n            margin-bottom: 30px;\n            color: #000000;\n        }\n\n        .success-box {\n            background: rgba(255, 255, 255, 0.85);\n            \/* blanco transparente *\/\n            backdrop-filter: blur(18px);\n            border-radius: 24px;\n            padding: 40px;\n            width: 85%;\n            max-width: 320px;\n            text-align: center;\n            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);\n            color: #000000;\n        }\n\n        .success-box h3 {\n            color: #000000 !important;\n        }\n        button {\n    -webkit-tap-highlight-color: transparent;\n}\n.slider-btn:hover {\n    opacity: 0.6;\n    transform: scale(1.1);\n}\n\n.slider-btn {\n    background: transparent !important;\n    outline: none !important;\n    box-shadow: none !important;\n}\n\n.slider-btn:focus,\n.slider-btn:active {\n    outline: none !important;\n    box-shadow: none !important;\n    background: transparent !important;\n}\n\n.slider-btn::-moz-focus-inner {\n    border: 0;\n}\n.slide-title{\n    font-family:'Great Vibes', cursive;\n    font-size: 60px;\n    line-height: 1.1;\n    margin: 15px 0;\n}\n\/* ================================\n   BOT\u00d3N IDIOMA\n================================ *\/\n\n.lang-switcher {\n    position: absolute;\n    top: 30px;\n    right: 40px;\n    display: flex;\n    gap: 10px;\n    z-index: 10;\n}\n\n.lang-btn {\n    background: #ffffff;\n    border: none;\n    border-radius: 30px;\n    padding: 8px 12px;\n    cursor: pointer;\n    transition: 0.3s ease;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.lang-btn img {\n    width: 22px;\n    height: auto;\n    border-radius: 3px;\n}\n\n\/* Hover beige *\/\n.lang-btn:hover {\n    background: #ffb700;\n    transform: translateY(-3px);\n}\n\n\/* Activo (cuando est\u00e1 seleccionado) *\/\n.lang-btn.active {\n    background: #ffb700;\n}\n    <\/style>\n<\/head>\n\n<body>\n    <div id=\"circle-transition\"><\/div>\n\n    <section class=\"hero\">\n\n        <video class=\"hero-video\" autoplay muted loop playsinline>\n            <source src=\"https:\/\/therebelflame.com\/wp-content\/uploads\/2026\/02\/fuego.mp4\" type=\"video\/mp4\">\n        <\/video>\n\n        <div class=\"hero-content\">\n            <img decoding=\"async\" src=\"https:\/\/therebelflame.com\/wp-content\/uploads\/2026\/02\/LOGOGO-scaled.png\" alt=\"The Rebel Flame\"\n                class=\"hero-logo\">\n            <h1 style=\"font-family:'Great Vibes', cursive !important;\n            -webkit-font-smoothing: antialiased;            \n            text-shadow: 0 0 1px rgba(0,0,0,0.4);\n            font-size: 60px;\">The Rebel Flame<\/h1>\n            <p>Fire &#038; Flavor<\/p>\n\n            <a href=\"https:\/\/therebelflame.com\/?page_id=161\" class=\"btn-main\">\n                View Menu\n            <\/a>\n\n            <!-- REDES SOCIALES AQU\u00cd -->\n            <div class=\"hero-social\">\n                <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n                <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n                <a href=\"#\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\n            <\/div>\n\n        <\/div>\n    <\/section>\n\n    <!-- LOADER TRANSICI\u00d3N -->\n    <div id=\"page-loader\">\n        <div class=\"loader-content\">\n            <img decoding=\"async\" src=\"https:\/\/therebelflame.com\/wp-content\/uploads\/2026\/02\/LOGOWEB-2-scaled.png\" alt=\"The Rebel Flame\"\n                class=\"loader-logo\">\n            <p class=\"loader-text\">Loading<span class=\"dots\"><\/span><\/p>\n        <\/div>\n    <\/div>\n\n\n    <!-- BOT\u00d3N IDIOMA -->\n<div class=\"lang-switcher\">\n\n    <!-- Espa\u00f1ol (p\u00e1gina actual) -->\n    <a href=\"https:\/\/therebelflame.com\/\" class=\"lang-btn active\">\n        <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/es.png\" alt=\"Espa\u00f1ol\">\n    <\/a>\n\n    <!-- Ingl\u00e9s -->\n    <a href=\"https:\/\/therebelflame.com\/?page_id=1125\" class=\"lang-btn\">\n        <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/gb.png\" alt=\"English\">\n    <\/a>\n\n<\/div>\n\n\n    <!-- SOBRE NOSOTROS -->\n    <section class=\"about container text-center\">\n        <h2 class=\"section-title\" style=\"font-family:'Great Vibes', cursive !important;\n            -webkit-font-smoothing: antialiased;            \n            text-shadow: 0 0 1px rgba(0,0,0,0.4);\n            font-size: 60px;\">\n            About Us<\/h2>\n        <p class=\"section-text\" style=\"font-family: 'Inter', sans-serif\">\n            At The Rebel Flame, everything revolves around enjoyment.\nA space designed to feel comfortable, where flavor, atmosphere, and small details come together to create special moments. Each dish is prepared with care, respect for the product, and the intention that every visit feels warm, authentic, and memorable. Here, great food goes hand in hand with sharing, relaxing, and letting yourself go.\n        <\/p>\n    <\/section>\n    <!-- Otro div -->\n    <section class=\"franja-texto\">\n\n        <div class=\"marquee-top\"> Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736<\/div>\n\n        <h2 style=\"font-family:'Great Vibes', cursive !important;\n            -webkit-font-smoothing: antialiased;            \n            text-shadow: 0 0 1px rgba(0,0,0,0.4);\n            font-size: 60px;line-height: 1.2;\">\n            We turn ideas into memorable experiences<\/h2>\n\n        <div class=\"marquee-bottom\"> Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736 Experiencia \u2736 Sabor \u2736 Madrid \u2736 Fuego \u2736 C\u00f3cteles \u2736\n            Experiencia \u2736 Sabor \u2736<\/div>\n\n    <\/section>\n    <!-- EXPERIENCIA RESTAURANTE -->\n    <section class=\"restaurant-slider\">\n\n        <div class=\"slider-container\">\n\n            <div class=\"slide active\">\n                <img decoding=\"async\" src=\"https:\/\/therebelflame.com\/wp-content\/uploads\/2026\/02\/cocina3-scaled.jpg\" alt=\"Cocina\">\n                <div class=\"slide-content\">\n                    <span>01<\/span>\n                    <h2 class=\"slide-title\">Slow Fire Cooking<\/h2>\n                    <p style=\"font-family: 'Inter', sans-serif\">Bold flavors and fresh ingredients.\n                    <\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"slide\">\n                <img decoding=\"async\" src=\"https:\/\/therebelflame.com\/wp-content\/uploads\/2026\/02\/cocina2-scaled.jpg\" alt=\"Experiencia\">\n                <div class=\"slide-content\">\n                    <span>02<\/span>\n                    <h2 class=\"slide-title\">Sensory Experience<\/h2>\n                    <p style=\"font-family: 'Inter', sans-serif\">Warm lighting and an atmosphere that invites you to stay.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"slide\">\n                <img decoding=\"async\" src=\"https:\/\/therebelflame.com\/wp-content\/uploads\/2026\/02\/cocina3-scaled.jpg\" alt=\"Ambiente\">\n                <div class=\"slide-content\">\n                    <span>03<\/span>\n                    <h2 class=\"slide-title\">Refined Ambience<\/h2>\n                    <p style=\"font-family: 'Inter', sans-serif\">Attentive service in an elegant and exclusive space.<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Flechas -->\n            <!-- <button class=\"slider-btn prev\" style=\"color: #ffffff39;\">&#8249;<\/button>\n            <button class=\"slider-btn next\" style=\"color: #ffffff39;\">&#8250;<\/button> -->\n            <button class=\"slider-btn prev\">&#8249;<\/button>\n<button class=\"slider-btn next\">&#8250;<\/button>\n\n            <!-- Indicadores -->\n            <div class=\"slider-dots\">\n                <span class=\"dot active\"><\/span>\n                <span class=\"dot\"><\/span>\n                <span class=\"dot\"><\/span>\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n    <section class=\"gallery-center\">\n        <a class=\"btn-main\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">View Gallery<\/a>\n    <\/section>\n\n    <!-- HORARIO -->\n    <section class=\"schedule-section\">\n        <div class=\"schedule-container\">\n\n            <h2 class=\"schedule-title\" style=\"font-family:'Great Vibes', cursive !important;\n            -webkit-font-smoothing: antialiased;            \n            text-shadow: 1.1px;\n            font-size: 60px;\">Hours<\/h2>\n\n            <div class=\"schedule-grid\">\n                <div class=\"schedule-item\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\">\n                    <span>Monday \u2013 Friday<\/span>\n        <strong>18:00 \u2013 00:00<\/strong>\n                <\/div>\n\n                <div class=\"schedule-item\">\n                    <span>Saturday<\/span>\n        <strong>13:00 \u2013 01:00<\/strong>\n                <\/div>\n\n                <div class=\"schedule-item\">\n                     <span>Sunday<\/span>\n        <strong>12:00 \u2013 23:00<\/strong>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/section>\n    <!-- Otro div -->\n    <section class=\"franja-texto\">\n\n        <div class=\"marquee-top\"> Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736<\/div>\n\n        <h2 style=\"font-family:'Great Vibes', cursive !important;\n            -webkit-font-smoothing: antialiased;            \n            text-shadow: 0 0 1px rgba(0,0,0,0.4);\n            font-size: 60px;line-height: 1.2;\">We turn every dish into a unique moment<\/h2>\n\n        <div class=\"marquee-bottom\"> Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736 Come Now! \u2736<\/div>\n\n    <\/section>\n\n    <!-- Otro div -->\n\n    <button id=\"scrollTopBtn\"><\/button>\n\n    <!-- BOT\u00d3N 3 LINEAS -->\n    <div class=\"mobile-menu-btn\" id=\"menuToggle\">\n        <span><\/span>\n        <span><\/span>\n        <span><\/span>\n    <\/div>\n    <div class=\"mobile-overlay\" id=\"mobileOverlay\"><\/div>\n\n    <!-- Otro div-->\n    <section id=\"nosotros-pro\">\n\n        <div class=\"nosotros-grid\">\n\n            <!-- IMAGEN IZQUIERDA (usa la tuya actual) -->\n            <div class=\"nosotros-img\"><\/div>\n\n            <!-- PANEL ROJO DERECHO -->\n            <div class=\"nosotros-content\">\n                <p>\n                    <span style=\"font-family:'Great Vibes', cursive !important;\n            -webkit-font-smoothing: antialiased;            \n            text-shadow: 0 0 1px rgba(0,0,0,0.4);\n            font-size: 60px;line-height: 1.2;\">\n                        Every dish is born from fire and finished with detail.\n                    <\/span><br><br>\n                    <span style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n                        Precise techniques, selected ingredients, and a concept meant to be enjoyed without rush.\n                    <\/span>\n                <\/p>\n\n                <p style=\"font-family: 'Inter', sans-serif;\n            font-weight: 700;\n            letter-spacing: 1px;\"><strong>Discover what we have prepared for you!<\/strong><\/p>\n\n                <a href=\"https:\/\/therebelflame.com\/?page_id=161\" class=\"btn-mainVer btn-centerVer\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n                    VIEW MENU\n                <\/a>\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n    <section id=\"aquarim-events\">\n        <div class=\"wrap\">\n            <div class=\"hero-row\">\n                <div class=\"right-pane\">\n                    <h2 class=\"title\" style=\"font-family:'Great Vibes', cursive !important;\n            -webkit-font-smoothing: antialiased;            \n            text-shadow: 0 0 1px rgba(0,0,0,0.4);\n            font-size: 60px;line-height: 1.2;\">Reserve Now!<\/h2>\n                    <p class=\"lead\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n                        We create the best events. We design tailor-made experiences with high-end gastronomy.\n                    <\/p>\n\n                    <div class=\"card\">\n                        <h3 style=\"font-family: 'Inter', sans-serif;\n            font-weight: 300;\n            letter-spacing: 1px;\">What do we offer?<\/h3>\n                        <p style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n                            Flavors that surprise and an atmosphere made to linger.\n                        <\/p>\n\n                        <br>\n                        <!--  <a href=\"#contacto\" class=\"btn-main\">Reserva tu mesa<\/a> -->\n                        <button class=\"btn-main\" onclick=\"openCallBox()\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n                            Reserve your table\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section id=\"contact-map\">\n\n        <!-- MAPA REAL -->\n        <iframe\n            src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3038.654421!2d-3.701622!3d40.406517!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42262b0f1d3a99%3A0x4e7f6e9b6a9a6e0!2sCalle%20Embajadores%2064%2C%2028012%20Madrid!5e0!3m2!1ses!2ses!4v1700000000000\"\n            loading=\"lazy\" style=\"border:0;\" allowfullscreen=\"\">\n        <\/iframe>\n\n        <div class=\"contact-overlay\">\n            <div class=\"contact-container\">\n\n                <div class=\"contact-left\">\n                    <h2 style=\"font-family:'Great Vibes', cursive !important;\n            -webkit-font-smoothing: antialiased;            \n            text-shadow: 0 0 1px rgba(0,0,0,0.4);\n            font-size: 60px;line-height: 1.2;\">Visit Us<\/h2>\n                    <p class=\"subtitle\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n                        Come enjoy fire &#038; flavor in the heart of Madrid.\n                    <\/p>\n\n                    <div class=\"info-block\">\n                        <span style=\"font-family: 'Inter', sans-serif;\n            font-weight: 700;\n            letter-spacing: 1px;\">ADDRESS<\/span>\n                        <p style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">Calle Embajadores, 64<br>Madrid, Espa\u00f1a<\/p>\n                    <\/div>\n\n                    <div class=\"info-block\">\n                        <span style=\"font-family: 'Inter', sans-serif;\n            font-weight: 700;\n            letter-spacing: 1px;\">PHONE<\/span>\n                        <p style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">+34 910 825 021<\/p>\n                    <\/div>\n\n                    <a href=\"https:\/\/www.google.com\/maps?q=Calle+Embajadores+64+Madrid\" target=\"_blank\" class=\"map-btn\" style=\"font-family: &#039;Inter&#039;, sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\" rel=\"noopener\">\n                        Open in Google Maps\n                    <\/a>\n                <\/div>\n\n                <div class=\"contact-right\">\n                    <div class=\"radar\"><\/div>\n                <\/div>\n\n            <\/div>\n        <\/div>\n\n    <\/section>\n\n    <!-- BARRA FIJA M\u00d3VIL -->\n    <div class=\"mobile-bar\" id=\"mobileBar\">\n\n        <!-- IZQUIERDA -->\n        <div class=\"bar-left\">\n            <button class=\"call-btn\" onclick=\"openCallBox()\" style=\"font-family: 'Inter', sans-serif;\n            font-weight: 300;\n            letter-spacing: 1px; font-weight: 100;\">\n                <i class=\"fa-solid fa-phone\"><\/i>\n                Call Now\n            <\/button>\n        <\/div>\n\n\n        <!-- CENTRO -->\n        <div class=\"bar-center\">\n            <img decoding=\"async\" src=\"https:\/\/therebelflame.com\/wp-content\/uploads\/2026\/02\/LOGOWEB-2-scaled.png\" alt=\"The Rebel Flame\">\n        <\/div>\n\n        <!-- DERECHA -->\n        <div class=\"bar-right\">\n            <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n            <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n            <a href=\"#\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\n\n            <!-- <a href=\"https:\/\/maps.google.com\" target=\"_blank\" class=\"location-link\" rel=\"noopener\">\n                <i class=\"fa-solid fa-location-dot\"><\/i>\n            <\/a> -->\n        <\/div>\n\n    <\/div>\n\n    <!-- CUADRO LLAMADA (GLASS) -->\n    <div class=\"call-glass\" id=\"callGlass\">\n        <div class=\"glass-content\">\n            <h4 style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">Call The Rebel Flame<\/h4>\n            <p style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\"> +34 910 825 021<\/p>\n\n            <a href=\"tel:+34600123456\" class=\"btn-main\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">Call Now<\/a>\n\n            <button class=\"btn-main\" onclick=\"closeCallBox()\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300 !important;\n    letter-spacing: 1px;\n\">Close<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- CUADRO RESE\u00d1A -->\n    <div class=\"call-glass\" id=\"reviewGlass\">\n        <div class=\"glass-content\">\n\n            <form id=\"reviewForm\" action=\"https:\/\/formsubmit.co\/therebelflame2025@gmail.com\" method=\"POST\">\n                <input type=\"hidden\" name=\"_subject\" value=\"Nueva rese\u00f1a - The Rebel Flame\">\n                <input type=\"hidden\" name=\"_captcha\" value=\"false\">\n                <input type=\"hidden\" name=\"_template\" value=\"table\">\n\n                <div class=\"review-options\">\n\n                    <input type=\"radio\" id=\"bad\" name=\"Valoraci\u00f3n\" value=\"P\u00e9simo\" required>\n                    <label for=\"bad\" class=\"review-face\">\n                        <i class=\"fa-regular fa-face-frown\"><\/i>\n                        <span style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">Terrible<\/span>\n                    <\/label>\n\n                    <input type=\"radio\" id=\"normal\" name=\"Valoraci\u00f3n\" value=\"Normal\">\n                    <label for=\"normal\" class=\"review-face\">\n                        <i class=\"fa-regular fa-face-meh\"><\/i>\n                        <span style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">Okay<\/span>\n                    <\/label>\n\n                    <input type=\"radio\" id=\"good\" name=\"Valoraci\u00f3n\" value=\"Excelente\">\n                    <label for=\"good\" class=\"review-face\">\n                        <i class=\"fa-regular fa-face-smile\"><\/i>\n                        <span style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">Excellent<\/span>\n                    <\/label>\n\n                <\/div>\n\n                <textarea name=\"Comentario\" placeholder=\"Tell us more...\" class=\"review-textarea\"><\/textarea>\n\n                <button type=\"submit\" class=\"btn-main\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">Send Review<\/button>\n\n            <\/form>\n\n            <button class=\"btn-main\" onclick=\"closeReviewBox()\" style=\"margin-top:10px; font-family: 'Inter', sans-serif;\n            font-weight: 300;\n            letter-spacing: 1px; font-weight: 700;\">\n                Close\n            <\/button>\n        <\/div>\n    <\/div>\n    <!-- CUADRO RESE\u00d1A ENVIADA -->\n    <div class=\"call-glass\" id=\"successGlass\">\n        <div class=\"success-box\">\n            <h3 class=\"success-title\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\"> Review Sent<\/h3>\n\n            <button class=\"btn-main\" onclick=\"closeSuccessBox()\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n                Back\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <!-- PUNT\u00daANOS -->\n    <section class=\"review-section\">\n        <h2 style=\"font-family:'Great Vibes', cursive !important;\n            -webkit-font-smoothing: antialiased;            \n            text-shadow: 0 0 1px rgba(0,0,0,0.4);\n            font-size: 60px;line-height: 1.2;\">How was your experience?<\/h2>\n\n        <div class=\"review-faces\">\n            <div class=\"face\"><i class=\"fa-regular fa-face-frown\"><\/i><\/div>\n            <div class=\"face\"><i class=\"fa-regular fa-face-meh\"><\/i><\/div>\n            <div class=\"face\"><i class=\"fa-regular fa-face-smile\"><\/i><\/div>\n        <\/div>\n\n        <p class=\"review-text\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n            Your opinion helps us improve every day.\n        <\/p>\n\n        <button class=\"btn-menuCali\" onclick=\"openReviewBox()\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n            Rate Us\n        <\/button>\n    <\/section>\n\n    <!-- MEN\u00da M\u00d3VIL -->\n    <div class=\"mobile-menu\" id=\"mobileMenu\">\n        <div class=\"mobile-menu-content\">\n\n            <a href=\"tel:+34600123456\" class=\"mobile-link\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n                <i class=\"fa-solid fa-phone\"><\/i> Call Now\n            <\/a>\n\n            <a href=\"https:\/\/therebelflame.com\/?page_id=161\" class=\"mobile-link\" style=\"font-family: &#039;Inter&#039;, sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n                <i class=\"fa-solid fa-book-open\"><\/i> View Menu\n            <\/a>\n\n            <a href=\"#contacto\" class=\"mobile-link\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n                <i class=\"fa-solid fa-calendar\"><\/i> Reserve\n            <\/a>\n\n            <div class=\"mobile-social\">\n                <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n                <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n                <a href=\"#\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n    <!-- <div id=\"finalMessage\" style=\"display:none; text-align:center;\">\n        <h3 style=\"margin-bottom:30px;\">\u2714 Rese\u00f1a enviada<\/h3>\n        <button class=\"btn-main\" onclick=\"closeReviewBox()\">Volver<\/button>\n    <\/div> -->\n    <div id=\"finalMessage\" style=\"display:none; text-align:center; margin-top:20px;\">\n        <h4>\u2714 Review Sent<\/h4>\n        <button class=\"btn-main\" onclick=\"closeReviewBox()\" style=\"margin-top:20px;\" style=\"font-family: 'Inter', sans-serif;\n    font-weight: 300;\n    letter-spacing: 1px;\n\">\n            Back\n        <\/button>\n    <\/div>\n\n    <script>\n\n\n        \/* Entrada  *\/\n        window.addEventListener(\"load\", () => {\n\n            const circle = document.getElementById(\"circle-transition\");\n            const pageLoader = document.getElementById(\"page-loader\");\n\n            setTimeout(() => {\n\n                \/\/ c\u00edrculo empieza a crecer\n                circle.classList.add(\"expand\");\n\n                setTimeout(() => {\n\n                    \/\/ \ud83d\udd25 DESVANECER loader\n                    pageLoader.classList.add(\"fade-out\");\n\n                    setTimeout(() => {\n                        pageLoader.style.display = \"none\";\n\n                        document.getElementById(\"menuToggle\").classList.add(\"show\");\n\n                        circle.classList.remove(\"expand\");\n                        circle.classList.add(\"shrink\");\n\n                        setTimeout(() => {\n                            circle.style.display = \"none\";\n                        }, 1000);\n\n                    }, 100);\n\n                }, 500);\n\n            }, 800);\n\n        });\n\n        \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n        document.addEventListener(\"DOMContentLoaded\", () => {\n\n            const features = document.querySelector(\".features\");\n            const trigger = document.querySelector(\".section-text\");\n\n            const observer = new IntersectionObserver(\n                ([entry]) => {\n                    if (entry.isIntersecting) {\n                        features.classList.add(\"visible\");\n                        observer.disconnect();\n                    }\n                },\n                {\n                    threshold: 0.1\n                }\n            );\n\n            observer.observe(trigger);\n        });\n\n        \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n        \/* let lastScroll = 0; *\/\n        window.addEventListener(\"scroll\", () => {\n\n            if (window.innerWidth >= 1024) {\n\n                if (window.scrollY > 150) {\n                    mobileBar.classList.add(\"visible\");\n                } else {\n                    mobileBar.classList.remove(\"visible\");\n                }\n\n            }\n\n        });\n\n\n        function openCallBox() {\n            callGlass.style.display = \"flex\";\n        }\n\n        function closeCallBox() {\n            callGlass.style.display = \"none\";\n        }\n\n        function openReviewBox() {\n            document.getElementById(\"reviewGlass\").style.display = \"flex\";\n        }\n\n        function closeReviewBox() {\n            document.getElementById(\"reviewGlass\").style.display = \"none\";\n        }\n\n        \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n\n        const slides = document.querySelectorAll(\".slide\");\n        const dots = document.querySelectorAll(\".dot\");\n        const prevBtn = document.querySelector(\".prev\");\n        const nextBtn = document.querySelector(\".next\");\n\n        let currentSlide = 0;\n        let slideInterval = setInterval(nextSlide, 6000); \/\/ M\u00c1S LENTO (6s)\n\n        function showSlide(index) {\n            slides.forEach(slide => slide.classList.remove(\"active\"));\n            dots.forEach(dot => dot.classList.remove(\"active\"));\n\n            slides[index].classList.add(\"active\");\n            dots[index].classList.add(\"active\");\n        }\n\n        function nextSlide() {\n            currentSlide++;\n            if (currentSlide >= slides.length) {\n                currentSlide = 0;\n            }\n            showSlide(currentSlide);\n        }\n\n        function prevSlide() {\n            currentSlide--;\n            if (currentSlide < 0) {\n                currentSlide = slides.length - 1;\n            }\n            showSlide(currentSlide);\n        }\n\n        nextBtn.addEventListener(\"click\", () => {\n            nextSlide();\n            resetInterval();\n        });\n\n        prevBtn.addEventListener(\"click\", () => {\n            prevSlide();\n            resetInterval();\n        });\n\n        dots.forEach((dot, index) => {\n            dot.addEventListener(\"click\", () => {\n                currentSlide = index;\n                showSlide(currentSlide);\n                resetInterval();\n            });\n        });\n\n        function resetInterval() {\n            clearInterval(slideInterval);\n            slideInterval = setInterval(nextSlide, 6000);\n        }\n\n        \/* OTRO JS *\/\n\n        \/\/ Scroll suave\n        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n            anchor.addEventListener(\"click\", function (e) {\n                e.preventDefault();\n                const target = document.querySelector(this.getAttribute(\"href\"));\n                if (target) {\n                    target.scrollIntoView({ behavior: \"smooth\" });\n                }\n            });\n        });\n\n        \/* OTRO JS *\/\n\n        const scrollBtn = document.getElementById(\"scrollTopBtn\");\n\n        window.addEventListener(\"scroll\", () => {\n            if (window.scrollY > 600) {\n                scrollBtn.style.display = \"block\";\n            } else {\n                scrollBtn.style.display = \"none\";\n            }\n        });\n\n        scrollBtn.addEventListener(\"click\", () => {\n            window.scrollTo({\n                top: 0,\n                behavior: \"smooth\"\n            });\n        });\n\n        \/* BOTON MOVIL *\/\n        function openMobileMenu() {\n            document.getElementById(\"mobileMenu\").classList.add(\"active\");\n        }\n\n        document.addEventListener(\"DOMContentLoaded\", function () {\n\n            const menuToggle = document.getElementById(\"menuToggle\");\n            const mobileMenu = document.getElementById(\"mobileMenu\");\n            const mobileOverlay = document.getElementById(\"mobileOverlay\");\n\n            if (menuToggle) {\n                menuToggle.addEventListener(\"click\", function () {\n                    mobileMenu.classList.toggle(\"active\");\n                    mobileOverlay.classList.toggle(\"active\");\n                    document.body.classList.toggle(\"menu-open\");\n                });\n            }\n\n        });\n\n\n        document.getElementById(\"reviewForm\").addEventListener(\"submit\", function (e) {\n\n            e.preventDefault();\n\n            const form = this;\n\n            fetch(form.action, {\n                method: \"POST\",\n                body: new FormData(form),\n                headers: {\n                    'Accept': 'application\/json'\n                }\n            })\n                .then(response => {\n\n                    document.getElementById(\"reviewGlass\").style.display = \"none\";\n                    document.getElementById(\"successGlass\").style.display = \"flex\";\n                    form.reset();\n\n                })\n                .catch(error => {\n                    alert(\"Error al enviar la rese\u00f1a\");\n                });\n\n        });\n\n\n        function closeSuccessBox() {\n            document.getElementById(\"successGlass\").style.display = \"none\";\n        }\n\n        \/* nuevo *\/\n\n        document.addEventListener(\"contextmenu\", function (e) {\n            e.preventDefault();\n        });\n\n        document.addEventListener(\"contextmenu\", function (e) {\n            e.preventDefault();\n        });\n\n\n\n    <\/script>\n\n\n\n<\/body>\n\n<\/html>    <\/div>\r\n    ","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1125","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/therebelflame.com\/index.php?rest_route=\/wp\/v2\/pages\/1125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/therebelflame.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/therebelflame.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/therebelflame.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/therebelflame.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1125"}],"version-history":[{"count":11,"href":"https:\/\/therebelflame.com\/index.php?rest_route=\/wp\/v2\/pages\/1125\/revisions"}],"predecessor-version":[{"id":1180,"href":"https:\/\/therebelflame.com\/index.php?rest_route=\/wp\/v2\/pages\/1125\/revisions\/1180"}],"wp:attachment":[{"href":"https:\/\/therebelflame.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}