1887 lines
58 KiB
PHP
1887 lines
58 KiB
PHP
@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 |