@extends('template.layout')

@section('title', __('extras.restaurante.title') . ' | ' . __('welcome'))

@section('content')
<div class="restaurante-container">
    <!-- Hero con imagen panorámica -->
    <div class="restaurante-hero">
        <img src="{{ asset('assets/img/restaurante-el-cielo/restaurante-el-cielo.webp') }}" alt="{{ __('extras.restaurante.title') }}" class="hero-bg">
        <div class="hero-overlay"></div>
        <div>
            <span class="restaurante-badge">{{ __('extras.restaurante.badge') }}</span>
            <h1 class="restaurante-nombre">{{ __('extras.restaurante.title') }}</h1>
            <p class="restaurante-descripcion">
                {{ __('extras.restaurante.hero_description') }}
            </p>
        </div>
    </div>

    <!-- Características principales Restaurante -->
    <div class="caracteristicas-grid">
        <div class="caracteristica-card">
            <div class="caracteristica-icono"><i class="fas fa-map-pin"></i></div>
            <h3>{{ __('extras.restaurante.location_title') }}</h3>
            <p>{{ __('extras.restaurante.location_text') }}</p>
        </div>
        <div class="caracteristica-card">
            <div class="caracteristica-icono"><i class="fas fa-mountain"></i></div>
            <h3>{{ __('extras.restaurante.view_title') }}</h3>
            <p>{{ __('extras.restaurante.view_text') }}</p>
        </div>
        <div class="caracteristica-card">
            <div class="caracteristica-icono"><i class="fas fa-balloon"></i></div>
            <h3>{{ __('extras.restaurante.balloons_title') }}</h3>
            <p>{{ __('extras.restaurante.balloons_text') }}</p>
        </div>
        <div class="caracteristica-card">
            <div class="caracteristica-icono"><i class="fas fa-utensils"></i></div>
            <h3>{{ __('extras.restaurante.food_title') }}</h3>
            <p>{{ __('extras.restaurante.food_text') }}</p>
        </div>
        <div class="caracteristica-card">
            <div class="caracteristica-icono"><i class="fas fa-calendar-check"></i></div>
            <h3>{{ __('extras.restaurante.reservations_title') }}</h3>
            <p>{{ __('extras.restaurante.reservations_text') }}</p>
        </div>
    </div>

    <!-- Ver más Restaurante -->
    <div style="text-align: center; margin-bottom: 3rem;">
        <a href="{{ route('vuelos.en.globo') }}" class="btn-ver-mas" id="btnVerMasRestaurante">
            {{ __('extras.see_more') }} <i class="fas fa-arrow-right"></i>
        </a>
    </div>

    <!-- Promociones -->
    <div class="promo-section">
        <h3 class="promo-titulo">{{ __('extras.promotions_title') }}</h3>
        <div class="promo-form">
            <input type="text" class="promo-input" id="contactoInput" placeholder="{{ __('extras.placeholder_contact') }}">
            <button class="promo-btn" id="btnSuscribir">{{ __('extras.subscribe_btn') }}</button>
        </div>
        <div id="mensajePromo" style="margin-top: 1rem; font-size: 0.85rem;"></div>
    </div>

    <!-- Instalaciones únicas Restaurante -->
    <h2 style="font-size: 1.8rem; text-align: center; margin-bottom: 1.5rem;">{{ __('extras.unique_facilities_title') }}</h2>
    <div class="instalaciones-grid">
        <div class="instalacion-card">
            <div class="instalacion-imagen">
                <img src="{{ asset('assets/img/restaurante-el-cielo/restaurante-el-cielo.webp') }}" alt="{{ __('extras.panoramic_view') }}">
            </div>
            <h3>{{ __('extras.panoramic_view') }}</h3>
            <p>{{ __('extras.panoramic_view_desc') }}</p>
        </div>
        <div class="instalacion-card">
            <div class="instalacion-imagen">
                <img src="{{ asset('assets/img/restaurante-el-cielo/vista-panoramica.png') }}" alt="{{ __('extras.balloons_view') }}">
            </div>
            <h3>{{ __('extras.new_perspective') }}</h3>
            <p>{{ __('extras.pyramids_view') }}</p>
        </div>
        <div class="instalacion-card">
            <div class="instalacion-imagen">
                <img src="{{ asset('assets/img/restaurante-el-cielo/nueva-perspectiva.webp') }}" alt="{{ __('extras.pyramids_view') }}">
            </div>
            <h3>{{ __('extras.spectacular_view') }}</h3>
            <p>{{ __('extras.balloons_view_desc') }}</p>
        </div>
    </div>

    <!-- Platillos únicos -->
    <div class="platillos-section">
        <h2 style="font-size: 1.5rem; margin-bottom: 0.5rem;">{{ __('extras.unique_dishes_title') }}</h2>
        <p style="color: var(--text-secondary);">{{ __('extras.special_menu') }}</p>
        <div class="platillos-grid">
            <div class="platillo-item">
                <div class="platillo-icono"><i class="fas fa-egg"></i></div>
                <h4>{{ __('extras.american_breakfast') }}</h4>
            </div>
            <div class="platillo-item">
                <div class="platillo-icono"><i class="fas fa-utensil-spoon"></i></div>
                <h4>{{ __('extras.buffet_breakfast') }}</h4>
            </div>
            <div class="platillo-item">
                <div class="platillo-icono"><i class="fas fa-mug-hot"></i></div>
                <h4>{{ __('extras.special_drinks') }}</h4>
            </div>
        </div>
    </div>

    <!-- ==================== -->
    <!-- SECCIÓN HOSPEDAJE -->
    <!-- ==================== -->
    <div class="hospedaje-section">
        <div class="hospedaje-header">
            <p class="hospedaje-subtitulo">{{ __('extras.lodging_subtitle') }}</p>
            <h2 class="hospedaje-titulo">{{ __('extras.lodging_title') }}</h2>
            <p class="hospedaje-descripcion">
                {{ __('extras.lodging_description') }}
            </p>
            <div class="hospedaje-aviso">
                <i class="fas fa-clock"></i> {{ __('extras.lodging_notice') }}
            </div>
        </div>

        <!-- Grid de opciones de hospedaje -->
        <div class="hospedajes-grid">
            <div class="hospedaje-card">
                <div class="hospedaje-imagen">
                    <img src="{{ asset('assets/img/hoteles/Posada-Jatzriri-Globopuerto.jpg') }}" alt="Posada Jatziri">
                    <span class="hospedaje-badge incluido">{{ __('extras.included') }}</span>
                </div>
                <div class="hospedaje-contenido">
                    <h3>{{ __('extras.posada_jatziri') }}</h3>
                    <p class="hospedaje-desc">{{ __('extras.posada_jatziri_desc') }}</p>
                    <div class="hospedaje-caracteristicas">
                        <span><i class="fas fa-wifi"></i> {{ __('extras.wifi') }}</span>
                        <span><i class="fas fa-parking"></i> {{ __('extras.parking') }}</span>
                        <span><i class="fas fa-clock"></i> {{ __('extras.checkin_24h') }}</span>
                    </div>
                </div>
            </div>

            <div class="hospedaje-card">
                <div class="hospedaje-imagen">
                    <img src="{{ asset('assets/img/hoteles/Hospedaje-Villa-las-Campanas.jpg') }}" alt="Villa las Campanas">
                    <span class="hospedaje-badge incluido">{{ __('extras.included') }}</span>
                </div>
                <div class="hospedaje-contenido">
                    <h3>{{ __('extras.villa_campanas') }}</h3>
                    <p class="hospedaje-desc">{{ __('extras.villa_campanas_desc') }}</p>
                    <div class="hospedaje-caracteristicas">
                        <span><i class="fas fa-swimming-pool"></i> {{ __('extras.pool') }}</span>
                        <span><i class="fas fa-coffee"></i> {{ __('extras.breakfast') }}</span>
                        <span><i class="fas fa-tree"></i> {{ __('extras.garden') }}</span>
                    </div>
                </div>
            </div>

            <div class="hospedaje-card">
                <div class="hospedaje-imagen">
                    <img src="{{ asset('assets/img/hoteles/Hotel-Villas-Teotihuacan.jpg') }}" alt="Hotel Villas Arqueológicas">
                    <span class="hospedaje-badge desde">{{ __('extras.from') }} $1,500 {{ __('extras.extra_per_couple') }}</span>
                </div>
                <div class="hospedaje-contenido">
                    <h3>{{ __('extras.hotel_villas') }}</h3>
                    <p class="hospedaje-desc">{{ __('extras.hotel_villas_desc') }}</p>
                    <div class="hospedaje-caracteristicas">
                        <span><i class="fas fa-utensils"></i> {{ __('extras.restaurant') }}</span>
                        <span><i class="fas fa-swimming-pool"></i> {{ __('extras.pool') }}</span>
                        <span><i class="fas fa-spa"></i> {{ __('extras.spa') }}</span>
                    </div>
                </div>
            </div>

            <div class="hospedaje-card">
                <div class="hospedaje-imagen">
                    <img src="{{ asset('assets/img/hoteles/Hotel-Quinto-Sol.jpg') }}" alt="Hotel Quinto Sol">
                    <span class="hospedaje-badge desde">{{ __('extras.from') }} $1,900 {{ __('extras.extra_per_couple') }}</span>
                </div>
                <div class="hospedaje-contenido">
                    <h3>{{ __('extras.hotel_quinto_sol') }}</h3>
                    <p class="hospedaje-desc">{{ __('extras.hotel_quinto_sol_desc') }}</p>
                    <div class="hospedaje-caracteristicas">
                        <span><i class="fas fa-mountain"></i> {{ __('extras.pyramid_view') }}</span>
                        <span><i class="fas fa-wine-glass-alt"></i> {{ __('extras.bar') }}</span>
                        <span><i class="fas fa-concierge-bell"></i> {{ __('extras.service_24h') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Características del hospedaje -->
        <div class="hospedaje-features">
            <div class="hospedaje-feature">
                <div class="hospedaje-feature-icon"><i class="fas fa-map-marker-alt"></i></div>
                <h4>{{ __('extras.privileged_location') }}</h4>
                <p>{{ __('extras.privileged_location_desc') }}</p>
            </div>
            <div class="hospedaje-feature">
                <div class="hospedaje-feature-icon"><i class="fas fa-calendar-week"></i></div>
                <h4>{{ __('extras.plan_arrival') }}</h4>
                <p>{{ __('extras.plan_arrival_desc') }}</p>
            </div>
            <div class="hospedaje-feature">
                <div class="hospedaje-feature-icon"><i class="fas fa-suitcase"></i></div>
                <h4>{{ __('extras.ideal_accommodations') }}</h4>
                <p>{{ __('extras.ideal_accommodations_desc') }}</p>
            </div>
            <div class="hospedaje-feature">
                <div class="hospedaje-feature-icon"><i class="fas fa-shield-alt"></i></div>
                <h4>{{ __('extras.arrive_safe') }}</h4>
                <p>{{ __('extras.arrive_safe_desc') }}</p>
            </div>
        </div>

        <!-- Ver más Hospedaje -->
        <div style="text-align: center; margin-bottom: 3rem;">
            <a href="{{ route('vuelos.en.globo') }}" class="btn-ver-mas" id="btnVerMasHospedaje">
                {{ __('extras.see_more_lodging') }} <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>

    <!-- ==================== -->
    <!-- SECCIÓN CICLISMO -->
    <!-- ==================== -->
    <div class="ciclismo-section">
        <div class="ciclismo-header">
            <p class="ciclismo-subtitulo">{{ __('extras.cycling_subtitle') }}</p>
            <h2 class="ciclismo-titulo">{{ __('extras.bike_tour_title') }}</h2>
            <p class="ciclismo-descripcion">
                {{ __('extras.bike_tour_description') }}
            </p>
            <div class="ciclismo-duracion">
                <i class="fas fa-clock"></i> {{ __('extras.bike_tour_duration') }}
            </div>
        </div>

        <!-- Grid de tours -->
        <div class="tours-grid">
            <div class="tour-card">
                <div class="tour-imagen">
                    <img src="{{ asset('assets/img/tour-bici/tour-bici.png') }}" alt="{{ __('extras.artisan_route') }}">
                </div>
                <div class="tour-contenido">
                    <h3>{{ __('extras.artisan_route') }}</h3>
                    <div class="tour-horario"><i class="far fa-calendar-alt"></i> {{ __('extras.monday_sunday_9am') }}</div>
                    <p class="tour-desc">{{ __('extras.artisan_route_desc') }}</p>
                    <div class="tour-caracteristicas">
                        <span><i class="fas fa-palette"></i> {{ __('extras.clay_workshop') }}</span>
                        <span><i class="fas fa-store"></i> {{ __('extras.local_products') }}</span>
                        <span><i class="fas fa-chalkboard-user"></i> {{ __('extras.guide_included') }}</span>
                    </div>
                </div>
            </div>

            <div class="tour-card">
                <div class="tour-imagen">
                    <img src="{{ asset('assets/img/ciclismo/ciclismo.png') }}" alt="{{ __('extras.bike_cave') }}">
                </div>
                <div class="tour-contenido">
                    <h3>{{ __('extras.bike_cave') }}</h3>
                    <div class="tour-horario"><i class="far fa-calendar-alt"></i> {{ __('extras.monday_sunday_9am') }}</div>
                    <p class="tour-desc">{{ __('extras.bike_cave_desc') }}</p>
                    <div class="tour-caracteristicas">
                        <span><i class="fas fa-mountain"></i> {{ __('extras.cave_visit') }}</span>
                        <span><i class="fas fa-tree"></i> {{ __('extras.nature') }}</span>
                        <span><i class="fas fa-chalkboard-user"></i> {{ __('extras.guide_included') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Beneficios del tour -->
        <div class="ciclismo-beneficios">
            <div class="beneficio-card">
                <div class="beneficio-icono"><i class="fas fa-leaf"></i></div>
                <h4>{{ __('extras.enjoy_nature') }}</h4>
                <p>{{ __('extras.enjoy_nature_desc') }}</p>
            </div>
            <div class="beneficio-card">
                <div class="beneficio-icono"><i class="fas fa-bicycle"></i></div>
                <h4>{{ __('extras.max_adventure') }}</h4>
                <p>{{ __('extras.max_adventure_desc') }}</p>
            </div>
            <div class="beneficio-card">
                <div class="beneficio-icono"><i class="fas fa-wine-bottle"></i></div>
                <h4>{{ __('extras.pulque_tasting') }}</h4>
                <p>{{ __('extras.pulque_tasting_desc') }}</p>
            </div>
        </div>

        <!-- Características del tour -->
        <div class="tour-features">
            <div class="tour-feature">
                <div class="tour-feature-icon"><i class="fas fa-clock"></i></div>
                <h4>{{ __('extras.tour_duration') }}</h4>
                <p>{{ __('extras.tour_duration_desc') }}</p>
            </div>
            <div class="tour-feature">
                <div class="tour-feature-icon"><i class="fas fa-chalkboard-user"></i></div>
                <h4>{{ __('extras.specialized_guide') }}</h4>
                <p>{{ __('extras.specialized_guide_desc') }}</p>
            </div>
            <div class="tour-feature">
                <div class="tour-feature-icon"><i class="fas fa-bicycle"></i></div>
                <h4>{{ __('extras.equipment_included') }}</h4>
                <p>{{ __('extras.equipment_included_desc') }}</p>
            </div>
            <div class="tour-feature">
                <div class="tour-feature-icon"><i class="fas fa-clock"></i></div>
                <h4>{{ __('extras.fixed_schedule') }}</h4>
                <p>{{ __('extras.fixed_schedule_desc') }}</p>
            </div>
        </div>

        <!-- Ver más Ciclismo -->
        <div style="text-align: center; margin-bottom: 3rem;">
            <a href="{{ route('vuelos.en.globo') }}" class="btn-ver-mas" id="btnVerMasCiclismo">
                {{ __('extras.see_more_tours') }} <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>

    <!-- ==================== -->
    <!-- SECCIÓN TRANSPORTE CDMX -->
    <!-- ==================== -->
    <div class="transporte-section">
        <div class="transporte-header">
            <p class="transporte-subtitulo">{{ __('extras.transport_subtitle') }}</p>
            <h2 class="transporte-titulo">{{ __('extras.transport_title') }}</h2>
            <p class="transporte-descripcion">
                {{ __('extras.transport_description') }}
            </p>
            <div class="transporte-badge">
                <i class="fas fa-bus"></i> {{ __('extras.daily_departures') }}
            </div>
        </div>

        <!-- Unidades de transporte -->
        <h3 style="font-size: 1.3rem; text-align: center; margin-bottom: 1.5rem;">{{ __('extras.choose_your_vehicle') }}</h3>
        <div class="unidades-grid">
            <div class="unidad-card">
                <div class="unidad-imagen">
                    <img src="{{ asset('assets/img/transporte/Toyota.png') }}" alt="Toyota Hiace">
                </div>
                <div class="unidad-contenido">
                    <h3>{{ __('extras.toyota_hiace') }}</h3>
                    <div class="unidad-capacidad"><i class="fas fa-users"></i> {{ __('extras.max_comfort_11') }}</div>
                    <p class="unidad-desc">{{ __('extras.toyota_hiace_desc') }}</p>
                </div>
            </div>

            <div class="unidad-card">
                <div class="unidad-imagen">
                    <img src="{{ asset('assets/img/transporte/Chevrolet.png') }}" alt="Chevrolet Express">
                </div>
                <div class="unidad-contenido">
                    <h3>{{ __('extras.chevrolet_express') }}</h3>
                    <div class="unidad-capacidad"><i class="fas fa-users"></i> {{ __('extras.spacious_14') }}</div>
                    <p class="unidad-desc">{{ __('extras.chevrolet_express_desc') }}</p>
                </div>
            </div>
        </div>

        <!-- Precios transporte -->
        <div class="precios-transporte">
            <div class="precio-card">
                <div class="precio-titulo">{{ __('extras.transport_globopuerto') }}</div>
                <div class="precio-valor">$360 <span>{{ __('extras.per_person') }}</span></div>
                <p class="precio-desc">{{ __('extras.transport_globopuerto_desc') }}</p>
            </div>
            <div class="precio-card">
                <div class="precio-titulo">{{ __('extras.transport_teotihuacan') }}</div>
                <div class="precio-valor">$490 <span>{{ __('extras.per_person') }}</span></div>
                <p class="precio-desc">{{ __('extras.transport_teotihuacan_desc') }}</p>
            </div>
        </div>

        <!-- Características del transporte -->
        <div class="transporte-features">
            <div class="transporte-feature">
                <div class="transporte-feature-icon"><i class="fas fa-shield-alt"></i></div>
                <h4>{{ __('extras.safe_travel') }}</h4>
                <p>{{ __('extras.safe_travel_desc') }}</p>
            </div>
            <div class="transporte-feature">
                <div class="transporte-feature-icon"><i class="fas fa-map-marker-alt"></i></div>
                <h4>{{ __('extras.departures_cdmx') }}</h4>
                <p>{{ __('extras.departures_cdmx_desc') }}</p>
            </div>
            <div class="transporte-feature">
                <div class="transporte-feature-icon"><i class="fas fa-language"></i></div>
                <h4>{{ __('extras.bilingual_drivers') }}</h4>
                <p>{{ __('extras.bilingual_drivers_desc') }}</p>
            </div>
            <div class="transporte-feature">
                <div class="transporte-feature-icon"><i class="fas fa-calendar-day"></i></div>
                <h4>{{ __('extras.daily_service') }}</h4>
                <p>{{ __('extras.daily_service_desc') }}</p>
            </div>
        </div>

        <!-- Ver más Transporte -->
        <div style="text-align: center; margin-bottom: 3rem;">
            <a href="{{ route('vuelos.en.globo') }}" class="btn-ver-mas" id="btnVerMasTransporte">
                {{ __('extras.see_more_options') }} <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>

    <!-- ==================== -->
    <!-- SECCIÓN CUATRIMOTO -->
    <!-- ==================== -->
    <div class="cuatrimoto-section">
        <div class="cuatrimoto-header">
            <p class="cuatrimoto-subtitulo">{{ __('extras.atv_subtitle') }}</p>
            <h2 class="cuatrimoto-titulo">{{ __('extras.atv_title') }}</h2>
            <p class="cuatrimoto-descripcion">
                {{ __('extras.atv_description') }}
            </p>
            <div class="cuatrimoto-duracion">
                <i class="fas fa-clock"></i> {{ __('extras.atv_duration') }}
            </div>
        </div>

        <!-- Grid de tours en cuatrimoto -->
        <div class="cuatrimotos-grid">
            <div class="cuatrimoto-card">
                <div class="cuatrimoto-imagen">
                    <img src="{{ asset('assets/img/cuatrimoto/1778268306.png') }}" alt="Cuatrimoto Teotihuacán">
                </div>
                <div class="cuatrimoto-contenido">
                    <h3>{{ __('extras.atv_teotihuacan') }}</h3>
                    <div class="cuatrimoto-precio"><i class="fas fa-tag"></i> {{ __('extras.atv_price') }}</div>
                    <p class="cuatrimoto-desc">{{ __('extras.atv_teotihuacan_desc') }}</p>
                    <div class="cuatrimoto-caracteristicas">
                        <span><i class="fas fa-helmet-safety"></i> {{ __('extras.safety_gear') }}</span>
                        <span><i class="fas fa-chalkboard-user"></i> {{ __('extras.guided_tour') }}</span>
                        <span><i class="fas fa-clock"></i> {{ __('extras.three_hours') }}</span>
                    </div>
                </div>
            </div>

            <div class="cuatrimoto-card">
                <div class="cuatrimoto-imagen">
                    <img src="{{ asset('assets/img/cuatrimoto/cuatri-piramide.png') }}" alt="Cueva Teotihuacán">
                </div>
                <div class="cuatrimoto-contenido">
                    <h3>{{ __('extras.cave_teotihuacan') }}</h3>
                    <div class="cuatrimoto-precio"><i class="fas fa-tag"></i> {{ __('extras.included_in_tour') }}</div>
                    <p class="cuatrimoto-desc">{{ __('extras.cave_teotihuacan_desc') }}</p>
                    <div class="cuatrimoto-caracteristicas">
                        <span><i class="fas fa-mountain"></i> {{ __('extras.cave_visit') }}</span>
                        <span><i class="fas fa-eye"></i> {{ __('extras.cave_viewpoint') }}</span>
                        <span><i class="fas fa-tree"></i> {{ __('extras.nature') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Beneficios del tour en cuatrimoto -->
        <div class="cuatrimoto-beneficios">
            <div class="cuatrimoto-beneficio">
                <div class="cuatrimoto-beneficio-icono"><i class="fas fa-palette"></i></div>
                <h4>{{ __('extras.clay_cacao_workshop') }}</h4>
                <p>{{ __('extras.clay_cacao_workshop_desc') }}</p>
            </div>
            <div class="cuatrimoto-beneficio">
                <div class="cuatrimoto-beneficio-icono"><i class="fas fa-mountain"></i></div>
                <h4>{{ __('extras.cave_viewpoint') }}</h4>
                <p>{{ __('extras.cave_viewpoint_desc') }}</p>
            </div>
            <div class="cuatrimoto-beneficio">
                <div class="cuatrimoto-beneficio-icono"><i class="fas fa-landmark"></i></div>
                <h4>{{ __('extras.pyramids_circuit') }}</h4>
                <p>{{ __('extras.pyramids_circuit_desc') }}</p>
            </div>
        </div>

        <!-- Características del tour en cuatrimoto -->
        <div class="cuatrimoto-features">
            <div class="cuatrimoto-feature">
                <div class="cuatrimoto-feature-icon"><i class="fas fa-clock"></i></div>
                <h4>{{ __('extras.atv_duration_hours') }}</h4>
                <p>{{ __('extras.atv_duration_desc') }}</p>
            </div>
            <div class="cuatrimoto-feature">
                <div class="cuatrimoto-feature-icon"><i class="fas fa-chalkboard-user"></i></div>
                <h4>{{ __('extras.guided_tour') }}</h4>
                <p>{{ __('extras.guided_tour_desc') }}</p>
            </div>
            <div class="cuatrimoto-feature">
                <div class="cuatrimoto-feature-icon"><i class="fas fa-helmet-safety"></i></div>
                <h4>{{ __('extras.safety_gear') }}</h4>
                <p>{{ __('extras.safety_gear_desc') }}</p>
            </div>
            <div class="cuatrimoto-feature">
                <div class="cuatrimoto-feature-icon"><i class="fas fa-chocolate-bar"></i></div>
                <h4>{{ __('extras.tasting_included') }}</h4>
                <p>{{ __('extras.tasting_included_desc') }}</p>
            </div>
        </div>

        <!-- Ver más Cuatrimoto -->
        <div style="text-align: center; margin-bottom: 3rem;">
            <a href="{{ route('vuelos.en.globo') }}" class="btn-ver-mas" id="btnVerMasCuatrimoto">
                {{ __('extras.see_more_atv') }} <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>

    <!-- Ubicación excepcional con mapa integrado -->
    <div class="ubicacion-card">
        <div class="ubicacion-imagen">
            <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d254.7514894396784!2d-98.82352625199658!3d19.69541965112744!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1ff20861a9245%3A0xeeb027c5f98abed7!2sSky%20Balloons%20M%C3%A9xico%20%7C%20Vuelos%20en%20Globo%20Teotihuac%C3%A1n!5e0!3m2!1ses-419!2smx!4v1779477895374!5m2!1ses-419!2smx" 
                style="border:0; width:100%; height:100%;" 
                allowfullscreen="" 
                loading="lazy" 
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>
        <div class="ubicacion-info">
            <h3>{{ __('extras.exceptional_location') }}</h3>
            <div class="ubicacion-direccion">
                <i class="fas fa-location-dot"></i>
                <span>{{ __('extras.takeoff_zone_address') }}</span>
            </div>
            <a href="https://maps.google.com/?q=Globopuerto+Teotihuacán" target="_blank" class="ubicacion-btn">
                <i class="fas fa-directions"></i> {{ __('extras.how_to_get_there') }}
            </a>
        </div>
    </div>

    <!-- Reservaciones -->
    <div class="reservaciones-section">
        <h3>{{ __('extras.ready_for_experience') }}</h3>
        <p>{{ __('extras.all_inclusive_packages') }}</p>
        <a href="{{ route('vuelos.en.globo') }}" class="btn-reservar" id="btnReservar">
            {{ __('extras.book_now') }} <i class="fas fa-calendar-check"></i>
        </a>
    </div>
</div>

<!-- Modal (se mantiene por si se usa en otros contextos) -->
<div id="modal" class="modal-confirmacion">
    <div class="modal-content">
        <i class="fas fa-check-circle"></i>
        <h3 id="modalTitulo">{{ __('extras.thank_you') }}</h3>
        <p id="modalMensaje" style="color: var(--text-secondary);"></p>
        <button class="modal-btn" onclick="cerrarModal()">{{ __('extras.close') }}</button>
    </div>
</div>
@endsection

@push('css')
<style>
    /* Estilos específicos para el componente completo */
    /* Estos estilos se basan en las variables globales de tu tema */

    .restaurante-container {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 2rem clamp(1rem, 3vw, 2rem);
    }

    /* Hero con imagen de fondo */
    .restaurante-hero {
        position: relative;
        text-align: center;
        padding: 5rem 2rem;
        border-radius: 32px;
        margin-bottom: 3rem;
        overflow: hidden;
        min-height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.5));
        z-index: 1;
    }

    .restaurante-hero > *:not(.hero-bg):not(.hero-overlay) {
        position: relative;
        z-index: 2;
    }

    .restaurante-badge {
        display: inline-block;
        background: rgba(255,255,255,0.15);
        backdrop-filter: blur(10px);
        padding: 0.5rem 1.5rem;
        border-radius: 50px;
        color: var(--accent);
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .restaurante-nombre {
        font-family: 'Space Grotesk', sans-serif;
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 800;
        color: white;
        margin-bottom: 1rem;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    .restaurante-descripcion {
        font-size: 1.1rem;
        color: rgba(255,255,255,0.9);
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
    }

    /* Grid de características */
    .caracteristicas-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .caracteristica-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 1.5rem;
        transition: all var(--transition-fast);
    }

    .caracteristica-card:hover {
        transform: translateY(-5px);
        border-color: var(--accent);
    }

    .caracteristica-icono {
        width: 50px;
        height: 50px;
        background: var(--accent-gradient);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        font-size: 1.3rem;
        color: white;
    }

    .caracteristica-card h3 {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .caracteristica-card p {
        color: var(--text-secondary);
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Sección de promociones */
    .promo-section {
        background: var(--secondary);
        border-radius: 24px;
        padding: 2rem;
        text-align: center;
        margin-bottom: 3rem;
        border: 1px solid var(--border);
    }

    .promo-titulo {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .promo-form {
        display: flex;
        gap: 1rem;
        max-width: 500px;
        margin: 1.5rem auto 0;
        flex-wrap: wrap;
        justify-content: center;
    }

    .promo-input {
        flex: 1;
        min-width: 250px;
        padding: 0.9rem 1.2rem;
        background: var(--surface-light);
        border: 1px solid var(--border);
        border-radius: 50px;
        color: var(--text-primary);
        outline: none;
    }

    .promo-input:focus {
        border-color: var(--accent);
    }

    .promo-btn {
        padding: 0.9rem 1.8rem;
        background: var(--accent-gradient);
        border: none;
        border-radius: 50px;
        color: white;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .promo-btn:hover {
        transform: translateY(-2px);
    }

    /* Grid de instalaciones (restaurante) */
    .instalaciones-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .instalacion-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        overflow: hidden;
        text-align: center;
        transition: all var(--transition-fast);
    }

    .instalacion-card:hover {
        transform: translateY(-5px);
        border-color: var(--accent);
    }

    .instalacion-imagen {
        height: 200px;
        overflow: hidden;
    }

    .instalacion-imagen img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .instalacion-card:hover .instalacion-imagen img {
        transform: scale(1.05);
    }

    .instalacion-card h3 {
        padding: 1rem 1rem 0.5rem;
        font-size: 1.2rem;
        font-weight: 700;
    }

    .instalacion-card p {
        padding: 0 1rem 1.5rem;
        color: var(--text-secondary);
        font-size: 0.9rem;
    }

    /* Sección de platillos */
    .platillos-section {
        background: var(--secondary);
        border-radius: 24px;
        padding: 2rem;
        text-align: center;
        margin-bottom: 3rem;
        border: 1px solid var(--border);
    }

    .platillos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-top: 1.5rem;
    }

    .platillo-item {
        padding: 1rem;
        background: var(--surface-light);
        border-radius: 16px;
        transition: all var(--transition-fast);
    }

    .platillo-item:hover {
        transform: translateY(-3px);
        background: var(--surface);
    }

    .platillo-icono {
        font-size: 2.5rem;
        color: var(--accent);
        margin-bottom: 0.5rem;
    }

    .platillo-item h4 {
        font-size: 1rem;
        font-weight: 600;
    }

    /* ==================== */
    /* HOSPEDAJE SECTION */
    /* ==================== */
    .hospedaje-section {
        margin-bottom: 3rem;
    }

    .hospedaje-header {
        text-align: center;
        margin-bottom: 2rem;
        padding: 2rem;
        background: linear-gradient(135deg, var(--secondary), var(--primary));
        border-radius: 32px;
        border: 1px solid var(--border);
    }

    .hospedaje-subtitulo {
        color: var(--accent);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 0.5rem;
    }

    .hospedaje-titulo {
        font-family: 'Space Grotesk', sans-serif;
        font-size: clamp(1.8rem, 4vw, 2.5rem);
        font-weight: 700;
        background: linear-gradient(135deg, var(--text-primary), var(--accent));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin-bottom: 1rem;
    }

    .hospedaje-descripcion {
        color: var(--text-secondary);
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
    }

    .hospedaje-aviso {
        background: var(--surface-light);
        border-radius: 50px;
        padding: 0.75rem 1.5rem;
        display: inline-block;
        margin-top: 1rem;
        font-size: 0.9rem;
        color: var(--gold);
    }

    .hospedaje-aviso i {
        margin-right: 0.5rem;
    }

    /* Grid de hospedajes */
    .hospedajes-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .hospedaje-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 24px;
        overflow: hidden;
        transition: all var(--transition-base);
        position: relative;
    }

    .hospedaje-card:hover {
        transform: translateY(-8px);
        border-color: var(--accent);
        box-shadow: var(--shadow-lg);
    }

    .hospedaje-imagen {
        height: 220px;
        overflow: hidden;
        position: relative;
    }

    .hospedaje-imagen img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .hospedaje-card:hover .hospedaje-imagen img {
        transform: scale(1.05);
    }

    .hospedaje-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background: var(--accent);
        color: white;
        padding: 0.4rem 1rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
        z-index: 2;
    }

    .hospedaje-badge.incluido {
        background: linear-gradient(135deg, #00c853, #00e676);
    }

    .hospedaje-badge.desde {
        background: linear-gradient(135deg, #ff6d00, #ffab40);
    }

    .hospedaje-contenido {
        padding: 1.5rem;
    }

    .hospedaje-contenido h3 {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .hospedaje-desc {
        color: var(--text-secondary);
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .hospedaje-caracteristicas {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }

    .hospedaje-caracteristicas span {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.75rem;
        color: var(--text-tertiary);
    }

    .hospedaje-caracteristicas i {
        color: var(--accent);
        font-size: 0.7rem;
    }

    /* Características hospedaje */
    .hospedaje-features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .hospedaje-feature {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 1.5rem;
        text-align: center;
        transition: all var(--transition-fast);
    }

    .hospedaje-feature:hover {
        transform: translateY(-5px);
        border-color: var(--accent);
    }

    .hospedaje-feature-icon {
        width: 60px;
        height: 60px;
        background: var(--accent-gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 1.5rem;
        color: white;
    }

    .hospedaje-feature h4 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .hospedaje-feature p {
        color: var(--text-secondary);
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* ==================== */
    /* CICLISMO SECTION */
    /* ==================== */
    .ciclismo-section {
        margin-bottom: 3rem;
    }

    .ciclismo-header {
        text-align: center;
        margin-bottom: 2rem;
        padding: 2rem;
        background: linear-gradient(135deg, var(--secondary), var(--primary));
        border-radius: 32px;
        border: 1px solid var(--border);
    }

    .ciclismo-subtitulo {
        color: var(--accent);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 0.5rem;
    }

    .ciclismo-titulo {
        font-family: 'Space Grotesk', sans-serif;
        font-size: clamp(1.8rem, 4vw, 2.5rem);
        font-weight: 700;
        background: linear-gradient(135deg, var(--text-primary), var(--accent));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin-bottom: 1rem;
    }

    .ciclismo-descripcion {
        color: var(--text-secondary);
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
    }

    .ciclismo-duracion {
        background: var(--surface-light);
        border-radius: 50px;
        padding: 0.75rem 1.5rem;
        display: inline-block;
        margin-top: 1rem;
        font-size: 0.9rem;
        color: var(--gold);
    }

    /* Grid de tours en bici */
    .tours-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .tour-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 24px;
        overflow: hidden;
        transition: all var(--transition-base);
    }

    .tour-card:hover {
        transform: translateY(-8px);
        border-color: var(--accent);
        box-shadow: var(--shadow-lg);
    }

    .tour-imagen {
        height: 590px;
        overflow: hidden;
    }

    .tour-imagen img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .tour-card:hover .tour-imagen img {
        transform: scale(1.05);
    }

    .tour-contenido {
        padding: 1.5rem;
    }

    .tour-contenido h3 {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .tour-horario {
        color: var(--accent);
        font-size: 0.85rem;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .tour-desc {
        color: var(--text-secondary);
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .tour-caracteristicas {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }

    .tour-caracteristicas span {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.75rem;
        color: var(--text-tertiary);
    }

    .tour-caracteristicas i {
        color: var(--accent);
        font-size: 0.7rem;
    }

    /* Características del tour */
    .tour-features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .tour-feature {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 1.5rem;
        text-align: center;
        transition: all var(--transition-fast);
    }

    .tour-feature:hover {
        transform: translateY(-5px);
        border-color: var(--accent);
    }

    .tour-feature-icon {
        width: 60px;
        height: 60px;
        background: var(--accent-gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 1.5rem;
        color: white;
    }

    .tour-feature h4 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .tour-feature p {
        color: var(--text-secondary);
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* Beneficios ciclismo */
    .ciclismo-beneficios {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .beneficio-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 1.5rem;
        text-align: center;
        transition: all var(--transition-fast);
    }

    .beneficio-card:hover {
        transform: translateY(-5px);
        border-color: var(--accent);
    }

    .beneficio-icono {
        font-size: 2.5rem;
        color: var(--accent);
        margin-bottom: 1rem;
    }

    .beneficio-card h4 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .beneficio-card p {
        color: var(--text-secondary);
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* ==================== */
    /* TRANSPORTE SECTION */
    /* ==================== */
    .transporte-section {
        margin-bottom: 3rem;
    }

    .transporte-header {
        text-align: center;
        margin-bottom: 2rem;
        padding: 2rem;
        background: linear-gradient(135deg, var(--secondary), var(--primary));
        border-radius: 32px;
        border: 1px solid var(--border);
    }

    .transporte-subtitulo {
        color: var(--accent);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 0.5rem;
    }

    .transporte-titulo {
        font-family: 'Space Grotesk', sans-serif;
        font-size: clamp(1.8rem, 4vw, 2.5rem);
        font-weight: 700;
        background: linear-gradient(135deg, var(--text-primary), var(--accent));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin-bottom: 1rem;
    }

    .transporte-descripcion {
        color: var(--text-secondary);
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
    }

    .transporte-badge {
        background: var(--surface-light);
        border-radius: 50px;
        padding: 0.75rem 1.5rem;
        display: inline-block;
        margin-top: 1rem;
        font-size: 0.9rem;
        color: var(--gold);
    }

    /* Grid de unidades */
    .unidades-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .unidad-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 24px;
        overflow: hidden;
        transition: all var(--transition-base);
    }

    .unidad-card:hover {
        transform: translateY(-8px);
        border-color: var(--accent);
        box-shadow: var(--shadow-lg);
    }

    .unidad-imagen {
        height: 580px;
        overflow: hidden;
    }

    .unidad-imagen img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .unidad-card:hover .unidad-imagen img {
        transform: scale(1.05);
    }

    .unidad-contenido {
        padding: 1.5rem;
        text-align: center;
    }

    .unidad-contenido h3 {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .unidad-capacidad {
        color: var(--accent);
        font-size: 0.85rem;
        margin-bottom: 0.75rem;
    }

    .unidad-desc {
        color: var(--text-secondary);
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Grid de precios transporte */
    .precios-transporte {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .precio-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 24px;
        padding: 2rem;
        text-align: center;
        transition: all var(--transition-base);
    }

    .precio-card:hover {
        transform: translateY(-5px);
        border-color: var(--accent);
        box-shadow: var(--shadow-lg);
    }

    .precio-titulo {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .precio-valor {
        font-size: 2rem;
        font-weight: 800;
        background: var(--accent-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin: 1rem 0;
    }

    .precio-valor span {
        font-size: 1rem;
        font-weight: normal;
        color: var(--text-tertiary);
    }

    .precio-desc {
        color: var(--text-secondary);
        font-size: 0.9rem;
    }

    /* Características transporte */
    .transporte-features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .transporte-feature {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 1.5rem;
        text-align: center;
        transition: all var(--transition-fast);
    }

    .transporte-feature:hover {
        transform: translateY(-5px);
        border-color: var(--accent);
    }

    .transporte-feature-icon {
        width: 60px;
        height: 60px;
        background: var(--accent-gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 1.5rem;
        color: white;
    }

    .transporte-feature h4 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .transporte-feature p {
        color: var(--text-secondary);
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* ==================== */
    /* CUATRIMOTO SECTION */
    /* ==================== */
    .cuatrimoto-section {
        margin-bottom: 3rem;
    }

    .cuatrimoto-header {
        text-align: center;
        margin-bottom: 2rem;
        padding: 2rem;
        background: linear-gradient(135deg, var(--secondary), var(--primary));
        border-radius: 32px;
        border: 1px solid var(--border);
    }

    .cuatrimoto-subtitulo {
        color: var(--accent);
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 0.5rem;
    }

    .cuatrimoto-titulo {
        font-family: 'Space Grotesk', sans-serif;
        font-size: clamp(1.8rem, 4vw, 2.5rem);
        font-weight: 700;
        background: linear-gradient(135deg, var(--text-primary), var(--accent));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin-bottom: 1rem;
    }

    .cuatrimoto-descripcion {
        color: var(--text-secondary);
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
    }

    .cuatrimoto-duracion {
        background: var(--surface-light);
        border-radius: 50px;
        padding: 0.75rem 1.5rem;
        display: inline-block;
        margin-top: 1rem;
        font-size: 0.9rem;
        color: var(--gold);
    }

    /* Grid de tours en cuatrimoto */
    .cuatrimotos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .cuatrimoto-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 24px;
        overflow: hidden;
        transition: all var(--transition-base);
    }

    .cuatrimoto-card:hover {
        transform: translateY(-8px);
        border-color: var(--accent);
        box-shadow: var(--shadow-lg);
    }

    .cuatrimoto-imagen {
        height: 330px;
        overflow: hidden;
    }

    .cuatrimoto-imagen img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .cuatrimoto-card:hover .cuatrimoto-imagen img {
        transform: scale(1.05);
    }

    .cuatrimoto-contenido {
        padding: 1.5rem;
    }

    .cuatrimoto-contenido h3 {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .cuatrimoto-precio {
        color: var(--accent);
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
    }

    .cuatrimoto-desc {
        color: var(--text-secondary);
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .cuatrimoto-caracteristicas {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }

    .cuatrimoto-caracteristicas span {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.75rem;
        color: var(--text-tertiary);
    }

    .cuatrimoto-caracteristicas i {
        color: var(--accent);
        font-size: 0.7rem;
    }

    /* Beneficios cuatrimoto */
    .cuatrimoto-beneficios {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .cuatrimoto-beneficio {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 1.5rem;
        text-align: center;
        transition: all var(--transition-fast);
    }

    .cuatrimoto-beneficio:hover {
        transform: translateY(-5px);
        border-color: var(--accent);
    }

    .cuatrimoto-beneficio-icono {
        font-size: 2.5rem;
        color: var(--accent);
        margin-bottom: 1rem;
    }

    .cuatrimoto-beneficio h4 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .cuatrimoto-beneficio p {
        color: var(--text-secondary);
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* Características cuatrimoto */
    .cuatrimoto-features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .cuatrimoto-feature {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 1.5rem;
        text-align: center;
        transition: all var(--transition-fast);
    }

    .cuatrimoto-feature:hover {
        transform: translateY(-5px);
        border-color: var(--accent);
    }

    .cuatrimoto-feature-icon {
        width: 60px;
        height: 60px;
        background: var(--accent-gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 1.5rem;
        color: white;
    }

    .cuatrimoto-feature h4 {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .cuatrimoto-feature p {
        color: var(--text-secondary);
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* Ubicación */
    .ubicacion-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 24px;
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .ubicacion-imagen {
        height: 300px;
        overflow: hidden;
    }

    .ubicacion-imagen iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

    .ubicacion-info {
        padding: 2rem;
        text-align: center;
    }

    .ubicacion-info h3 {
        font-size: 1.4rem;
        margin-bottom: 0.5rem;
    }

    .ubicacion-direccion {
        color: var(--text-secondary);
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .ubicacion-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0.8rem 1.5rem;
        background: var(--surface-light);
        border: 1px solid var(--border);
        border-radius: 50px;
        color: var(--text-primary);
        text-decoration: none;
        transition: all var(--transition-fast);
    }

    .ubicacion-btn:hover {
        background: var(--accent);
        color: white;
    }

    /* Reservaciones y botones */
    .reservaciones-section {
        text-align: center;
        padding: 2rem;
        background: var(--accent-gradient);
        border-radius: 24px;
        color: white;
        margin-bottom: 2rem;
    }

    .reservaciones-section h3 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .btn-reservar {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0.8rem 2rem;
        background: white;
        color: var(--accent);
        text-decoration: none;
        border-radius: 50px;
        font-weight: 600;
        margin-top: 1rem;
        transition: all var(--transition-fast);
    }

    .btn-reservar:hover {
        transform: translateY(-2px);
        gap: 15px;
    }

    .btn-ver-mas {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0.7rem 1.5rem;
        background: transparent;
        border: 2px solid var(--accent);
        border-radius: 50px;
        color: var(--accent);
        font-weight: 600;
        text-decoration: none;
        margin-top: 1rem;
        transition: all var(--transition-fast);
    }

    .btn-ver-mas:hover {
        background: var(--accent);
        color: white;
        gap: 12px;
    }

    /* Modal */
    .modal-confirmacion {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        z-index: 3000;
        align-items: center;
        justify-content: center;
    }

    .modal-content {
        background: var(--secondary);
        border-radius: 24px;
        padding: 2rem;
        max-width: 400px;
        text-align: center;
        border: 1px solid var(--border);
    }

    .modal-content i {
        font-size: 3rem;
        color: var(--accent);
        margin-bottom: 1rem;
    }

    .modal-btn {
        margin-top: 1.5rem;
        padding: 0.8rem 2rem;
        background: var(--accent);
        border: none;
        border-radius: 50px;
        color: white;
        cursor: pointer;
    }
</style>
@endpush

@push('js')
<script>
    // Funciones del modal (se mantienen aunque los botones ya no las usen)
    const modal = document.getElementById('modal');
    const modalMensaje = document.getElementById('modalMensaje');
    const modalTitulo = document.getElementById('modalTitulo');

    function mostrarModal(titulo, mensaje) {
        modalTitulo.textContent = titulo;
        modalMensaje.textContent = mensaje;
        modal.style.display = 'flex';
    }

    function cerrarModal() {
        modal.style.display = 'none';
    }

    modal.addEventListener('click', function(e) {
        if (e.target === modal) cerrarModal();
    });

    // Suscripción (sin cambios)
    document.getElementById('btnSuscribir').addEventListener('click', function() {
        const contacto = document.getElementById('contactoInput').value.trim();
        const mensajeDiv = document.getElementById('mensajePromo');
        
        if (!contacto) {
            mensajeDiv.innerHTML = '<span style="color: #ff4444;">Por favor ingresa tu WhatsApp o correo electrónico</span>';
            return;
        }
        
        const esEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contacto);
        const esTelefono = /^[0-9+\-\s()]{8,}$/.test(contacto);
        
        if (!esEmail && !esTelefono) {
            mensajeDiv.innerHTML = '<span style="color: #ff4444;">Ingresa un correo o número de teléfono válido</span>';
            return;
        }
        
        mensajeDiv.innerHTML = '<span style="color: #00ff88;">✅ ¡Suscripción exitosa! Recibirás promociones de vuelo + hospedaje + tours + transporte + cuatrimoto.</span>';
        document.getElementById('contactoInput').value = '';
        setTimeout(() => mensajeDiv.innerHTML = '', 3000);
    });
</script>
@endpush