<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title>Hotel Bahía Serena</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>

  <!-- ===== 1. ENCABEZADO ===== -->
  <header class="main-header">
    <div class="container">
      <a href="#inicio" class="logo">Hotel Bahía Serena</a>
      <nav class="nav-links">
        <ul>
          <li><a href="#inicio">Inicio</a></li>
          <li><a href="#habitaciones-hotel">Habitaciones</a></li>
          <li><a href="#gastronomia">Gastronomía</a></li>
          <li><a href="#actividades">Actividades</a></li>
          <li><a href="#destinos">Destinos</a></li>
          <li><a href="reservaciones/index.php">Reservaciones</a></li>
        </ul>
      </nav>
      <a href="login/login.html" class="btn-login">Login Empleados</a>
    </div>
  </header>

  <!-- ===== 2. BANNER PRINCIPAL ===== -->
  <section id="inicio" class="hero">
    <div class="hero-overlay">
      <h1>Bienvenido a Bahía Serena</h1>
      <p>Un paraíso escondido entre la brisa y el Caribe</p>
    </div>
  </section>

  <!-- ===== 3. HABITACIONES ===== -->
  <section id="habitaciones-hotel" class="habitaciones-wrapper">
    <h2>Habitaciones</h2>

    <!-- ========= HABITACIÓN 1 ========= -->
    <div class="habitacion-container">
      <div class="habitacion-carousel">
        <button class="carousel-arrow left" aria-label="Anterior">❮</button>
        <img src="img/superior_cuarto.jpg" class="slide active" alt="Habitación Superior – Vista general">
        <img src="img/superior_baño.jpg" class="slide" alt="Habitación Superior – Baño">
        <img src="img/superior_valcon.jpg" class="slide" alt="Habitación Superior – Balcón">
        <button class="carousel-arrow right" aria-label="Siguiente">❯</button>
      </div>

      <div class="habitacion-info">
        <h3>Habitación Superior</h3>
        <p class="datos-basicos">Área: 33 m<sup>2</sup> | Máx 4 personas</p>
        <ul class="amenidades">
          <li><i class="fa-solid fa-snowflake"></i> A/C</li>
          <li><i class="fa-solid fa-vault"></i> Caja fuerte</li>
          <li><i class="fa-solid fa-martini-glass"></i> Minibar</li>
          <li><i class="fa-solid fa-wifi"></i> Wi‑Fi</li>
          <li><i class="fa-solid fa-bath"></i> Amenities</li>
          <li><i class="fa-solid fa-mug-saucer"></i> Cafetera</li>
          <li><i class="fa-solid fa-temperature-high"></i> Secador</li>
          <li><i class="fa-solid fa-shower"></i> Ducha</li>
          <li><i class="fa-solid fa-radiation"></i> Plancha y mesa</li>
          <li><i class="fa-solid fa-tv"></i> TV</li>
          <li><i class="fa-solid fa-bed"></i> 1 o 2 camas dobles (1.40 × 2 m)</li>
        </ul>
        <a href="reservaciones" class="btn-reservar">Reservar</a>
      </div>
    </div>

    <!-- ========= HABITACIÓN 2 ========= -->
    <div class="habitacion-container">
      <div class="habitacion-carousel">
        <button class="carousel-arrow left" aria-label="Anterior">❮</button>
        <img src="img/deluxe_cuarto.jpg" class="slide active" alt="Habitación Deluxe – Vista general">
        <img src="img/deluxe_baño.jpg" class="slide" alt="Habitación Deluxe – Sala">
        <img src="img/deluxe_balcon.avif" class="slide" alt="Habitación Deluxe – Balcón">
        <button class="carousel-arrow right" aria-label="Siguiente">❯</button>
      </div>

      <div class="habitacion-info">
        <h3>Habitación Deluxe</h3>
        <p class="datos-basicos">Área: 42 m<sup>2</sup> | Máx 3 personas</p>
        <ul class="amenidades">
          <li><i class="fa-solid fa-snowflake"></i> A/C</li>
          <li><i class="fa-solid fa-vault"></i> Caja fuerte</li>
          <li><i class="fa-solid fa-martini-glass"></i> Minibar</li>
          <li><i class="fa-solid fa-wifi"></i> Wi‑Fi</li>
          <li><i class="fa-solid fa-tv"></i> Smart TV</li>
          <li><i class="fa-solid fa-bath"></i> Jacuzzi</li>
          <li><i class="fa-solid fa-bolt"></i> Cargador inalámbrico</li>
        </ul>
        <a href="reservaciones" class="btn-reservar">Reservar</a>
      </div>
    </div>

    <!-- ========= HABITACIÓN 3 ========= -->
    <div class="habitacion-container">
      <div class="habitacion-carousel">
        <button class="carousel-arrow left" aria-label="Anterior">❮</button>
        <img src="img/familiar_cuarto.jpg" class="slide active" alt="Habitación Familiar – General">
        <img src="img/familiar_baño.jpg" class="slide" alt="Habitación Familiar – Camas">
        <img src="img/familiar_balcon.jpeg" class="slide" alt="Habitación Familiar – Balcon">
        <button class="carousel-arrow right" aria-label="Siguiente">❯</button>
      </div>

      <div class="habitacion-info">
        <h3>Habitación Familiar</h3>
        <p class="datos-basicos">Área: 55 m<sup>2</sup> | Máx 5 personas</p>
        <ul class="amenidades">
          <li><i class="fa-solid fa-bed"></i> 2 camas dobles</li>
          <li><i class="fa-solid fa-kitchen-set"></i> Kitchenette</li>
          <li><i class="fa-solid fa-tv"></i> TV</li>
          <li><i class="fa-solid fa-shower"></i> Ducha doble</li>
          <li><i class="fa-solid fa-snowflake"></i> A/C</li>
        </ul>
        <a href="reservaciones" class="btn-reservar">Reservar</a>
      </div>
    </div>

    <!-- ========= HABITACIÓN 4 ========= -->
    <div class="habitacion-container">
      <div class="habitacion-carousel">
        <button class="carousel-arrow left" aria-label="Anterior">❮</button>
        <img src="img/nupcial_cuarto.jpg" class="slide active" alt="Suite Nupcial – Decoración">
        <img src="img/nupcial_baño.jpg" class="slide" alt="Suite Nupcial – Vista mar">
        <img src="img/nupcial_balcon.jpeg" class="slide" alt="Suite Nupcial – Balcon mar">
        <button class="carousel-arrow right" aria-label="Siguiente">❯</button>
      </div>

      <div class="habitacion-info">
        <h3>Suite Nupcial</h3>
        <p class="datos-basicos">Área: 60 m<sup>2</sup> | Máx 2 personas</p>
        <ul class="amenidades">
          <li><i class="fa-solid fa-heart"></i> Decoración romántica</li>
          <li><i class="fa-solid fa-bath"></i> Bañera vista al mar</li>
          <li><i class="fa-solid fa-champagne-glasses"></i> Botella de vino</li>
          <li><i class="fa-solid fa-wifi"></i> Wi‑Fi</li>
          <li><i class="fa-solid fa-bed"></i> Cama king size</li>
        </ul>
        <a href="reservaciones" class="btn-reservar">Reservar</a>
      </div>
    </div>

    <!-- ========= HABITACIÓN 5 ========= -->
    <div class="habitacion-container">
      <div class="habitacion-carousel">
        <button class="carousel-arrow left" aria-label="Anterior">❮</button>
        <img src="img/eco_friendly_cuarto.jpg" class="slide active" alt="Habitación Eco – Verde">
        <img src="img/eco_friendly_baño.jpg" class="slide" alt="Habitación Eco – Bambú">
        <img src="img/eco_friendly_balcon.jpg" class="slide" alt="Habitación Eco – Balcon">
        <button class="carousel-arrow right" aria-label="Siguiente">❯</button>
      </div>

      <div class="habitacion-info">
        <h3>Habitación Eco Friendly</h3>
        <p class="datos-basicos">Área: 28 m<sup>2</sup> | Máx 2 personas</p>
        <ul class="amenidades">
          <li><i class="fa-solid fa-leaf"></i> Materiales sostenibles</li>
          <li><i class="fa-solid fa-solar-panel"></i> Energía solar</li>
          <li><i class="fa-solid fa-recycle"></i> Separación de residuos</li>
          <li><i class="fa-solid fa-wifi"></i> Wi‑Fi</li>
          <li><i class="fa-solid fa-bed"></i> Cama doble</li>
        </ul>
        <a href="reservaciones" class="btn-reservar">Reservar</a>
      </div>
    </div>
  </section>
  </section>

  <!-- ===== 4. EXPERIENCIA GASTRONÓMICA ===== -->
  <section id="gastronomia" class="gastronomia-section">
    <h2>🍴 Experiencia Gastronómica</h2>
    <div class="gastro-experiencia">

      <!-- Restaurante -->
      <div class="gastro-item">
        <div class="gastro-carousel">
          <img src="img/comida_rest.jpg" class="gastro-slide active" alt="Restaurante foto 1">
          <img src="img/libre_rest.jpg" class="gastro-slide" alt="Restaurante foto 2">
          <img src="img/cocina_rest.jpg" class="gastro-slide" alt="Restaurante foto 3">
          <button class="carousel-arrow left">&#10094;</button>
          <button class="carousel-arrow right">&#10095;</button>
        </div>
        <div class="gastro-info">
          <h3>🍽️ Restaurante Gourmet</h3>
          <p>
            Descubre una experiencia culinaria sin igual donde cada plato es una obra de arte. Disfruta de desayunos
            buffet con vista panorámica,
            cenas románticas a la luz de las velas y una carta internacional con ingredientes frescos de temporada.
            Ideal para ocasiones especiales o para saborear lo mejor de la alta cocina con atención impecable.
            <br><br><strong>🕒 Horario:</strong> 6:30 a.m. – 10:30 p.m. <br>
            <strong>📍 Ubicación:</strong> Segundo nivel, vista al jardín principal.
          </p>
        </div>
      </div>

      <!-- Bar -->
      <div class="gastro-item">
        <div class="gastro-carousel">
          <img src="img/bar_bar.jpg" class="gastro-slide active" alt="Bar foto 1">
          <img src="img/vistas_bar.jpg" class="gastro-slide" alt="Bar foto 2">
          <img src="img/bebidas_bar.jpg" class="gastro-slide" alt="Bar foto 3">
          <button class="carousel-arrow left">&#10094;</button>
          <button class="carousel-arrow right">&#10095;</button>
        </div>
        <div class="gastro-info">
          <h3>🍸 Bar Ayana</h3>
          <p>
            Sumérgete en una atmósfera elegante y relajada. Disfruta de cócteles artesanales, música en vivo al
            atardecer y licores premium.
            Perfecto para socializar, compartir un brindis o simplemente relajarte al final del día.
            Un ambiente moderno, acogedor y lleno de estilo.
            <br><br><strong>🕐 Horario:</strong> 4:00 p.m. – 12:00 a.m. <br>
            <strong>📍 Ubicación:</strong> Junto al lobby principal, frente a la terraza.
          </p>
        </div>
      </div>

    </div>
  </section>

  <!-- ===== 5. ACTIVIDADES ===== -->
  <section id="actividades" class="actividades-ayana">
    <h2>Actividades del Hotel</h2>
    <div class="actividad-grid">

      <!-- Actividad 1 -->
      <div class="actividad-box">
        <img src="img/piscina_actividades.jpeg" alt="piscina">
        <h3>piscina</h3>
        <p class="horario">lunes - domingo | 9:00 AM - 9:0 0PM</p>
        <button class="descripcion-btn">Descripción</button>
        <p class="descripcion oculto">
          Sumérgete en nuestra piscina frente al mar: agua climatizada,
          bar sumergido con cocteles y vistas que se funden con el horizonte caribeño
        </p>
      </div>

      <!-- Actividad 2 -->
      <div class="actividad-box">
        <img src="img/tenis_actividades.avif" alt="">
        <h3>tenis</h3>
        <p class="horario">lunes - domingo | 9:00 AM - 9:0 0PM</p>
        <button class="descripcion-btn">Descripción</button>
        <p class="descripcion oculto">
          Juega en canchas de tenis de superficie profesional, rodeadas de palmeras,
          con entrenadores privados y servicio de toallas frías y bebidas energéticas.
        </p>
      </div>

      <!-- Actividad 3 -->
      <div class="actividad-box">
        <img src="img/spa_actividades.avif" alt="Relax & Spa">
        <h3> Spa Frente al mar</h3>
        <p class="horario"> lunes- domigo | 10:00 AM - 5:00 PM</p>
        <button class="descripcion-btn">Descripción</button>
        <p class="descripcion oculto">
          Relájate en cabinas al aire libre con el sonido de las olas;
          disfruta masajes con piedras calientes, rituales de coco y exfoliaciones de sal marina.
        </p>
      </div>

      <!-- Actividad 4 -->
      <div class="actividad-box">
        <img src="img/gym_actividades.avif" alt="gym">
        <h3>gym</h3>
        <p class="horario">lunes - domingo | 5:00 AM - 11:00 PM</p>
        <button class="descripcion-btn">Descripción</button>
        <p class="descripcion oculto">
          Entrena con equipos Technogym ® en un gimnasio acristalado sobre la playa.
          Sesiones personalizadas de fitness, yoga y entrenamiento funcional con vistas al océano.
        </p>
      </div>

      <!-- Actividad 5 -->
      <div class="actividad-box">
        <img src="img/surf_actividades.jpeg" alt="Adventure Tours">
        <h3>surf </h3>
        <p class="horario">Tuesday & Thursday | 09:00 - 17:00</p>
        <button class="descripcion-btn">Descripción</button>
        <p class="descripcion oculto">
          Domina las olas con instructores expertos y tablas de alta gama.
          Incluye video‑coaching y refrescos en la arena para un aprendizaje rápido y divertido.
        </p>
      </div>

      <!-- Actividad 6 -->
      <div class="actividad-box">
        <img src="img/zona_actividades.jpg" alt="Nightlife & Entertainment">
        <h3>zona interactiva</h3>
        <p class="horario">lunes- domigo | 10:00 AM - 10:00 PM</p>
        <button class="descripcion-btn">Descripción</button>
        <p class="descripcion oculto">
          Salón climatizado con VR de última generación, simuladores de carreras,
          billar y arcade retro. Perfecto para divertirse tras un día de sol.
        </p>
      </div>

      <!-- Actividad 7 -->
      <div class="actividad-box">
        <img src="img/yate_actividades.jpg" alt="Art & Culture">
        <h3>paseo en yate</h3>
        <p class="horario">lunes-gomingo | 4:00 PM -12:00 PM</p>
        <button class="descripcion-btn">Descripción</button>
        <p class="descripcion oculto">
          Navega en un yate privado con champaña, aperitivos gourmet y los mejores atardeceres del Caribe.
          Ideal para ocasiones románticas o grupos exclusivos
        </p>
      </div>

      <!-- Actividad 8 -->
      <div class="actividad-box">
        <img src="img/parque-aquatico_actividades.jpg" alt="Pet Friendly Activities">
        <h3>parque aquatico</h3>
        <p class="horario">lunes -domimgo | 10:00 AM - 12:00 PM</p>
        <button class="descripcion-btn">Descripción</button>
        <p class="descripcion oculto">
          Toboganes rápidos, río lento y zona splash para niños,
          todo rodeado de jardinería tropical y servicio de snacks. Diversión asegurada para toda la familia.
        </p>
      </div>

      <!-- Actividad 9 -->
      <div class="actividad-box">
        <img src="img/buceo_actividades.webp" alt="Festivals & Events">
        <h3>buceo</h3>
        <p class="horario">lunes- domigo | 10:00 AM - 5:00 PM</p>
        <button class="descripcion-btn">Descripción</button>
        <p class="descripcion oculto">
          Explora el mar en las profundidades: salidas en lancha, equipo premium y guías
          PADI que te revelarán jardines de coral y peces multicolor.
        </p>
      </div>
    </div>
  </section>

  <!-- ===== 6. DESTINOS ===== -->
  <section id="destinos" class="section destinos-section">
    <h2>Destinos</h2>

    <!-- SANTA MARTA -->
    <div class="destinos-row row-3">
      <div class="destino-card">
        <div class="card-inner">
          <div class="card-front">
            <img src="img/rodadero.jpeg" alt="santa marta">
            <h3>Santa marta</h3>
          </div>
          <div class="card-back">
            <img src="img/rodadero_card.jpg" alt="Santa marta">
            <p>la bella santa marta te espera con playas tranquilas, historia colonial y la majestuosa Sierra Nevada muy
              cerca.
            </p>
          </div>
        </div>
      </div>

      <!-- CARTAGENA -->
      <div class="destino-card">
        <div class="card-inner">
          <div class="card-front">
            <img src="img/cartagena.jpeg" alt="Cartagena">
            <h3>cartagena</h3>
          </div>
          <div class="card-back">
            <img src="img/cartagena_card.webp" alt="Cartagena">
            <p>Ciudad amurallada llena de color, historia y romance frente al Caribe,
              con atardeceres inolvidables y calles llenas de vida.
            </p>
          </div>
        </div>
      </div>

      <!-- SAN ANDRES -->
      <div class="destino-card">
        <div class="card-inner">
          <div class="card-front">
            <img src="img/san andres.PNG" alt="San Andres">
            <h3>San andres</h3>
          </div>
          <div class="card-back">
            <img src="img/san andres_card.jpg" alt="San Andres">
            <p>El mar de los siete colores te da la bienvenida con sus playas cristalinas,
              naturaleza exótica y un ambiente isleño vibrante.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Fila de 2 -->
    <!-- MIAMI -->
    <div class="destinos-row row-2">
      <div class="destino-card">
        <div class="card-inner">
          <div class="card-front">
            <img src="img/miami.PNG" alt="Miami">
            <h3>Miami</h3>
          </div>
          <div class="card-back">
            <img src="img/miami_card.jpg" alt="Miami">
            <p>Destino soñado con playas soleadas, arte urbano,
              vida nocturna intensa y compras de lujo a orillas del Atlántico.
            </p>
          </div>
        </div>
      </div>

      <!-- Cancun  -->
      <div class="destino-card">
        <div class="card-inner">
          <div class="card-front">
            <img src="img/cancun.PNG" alt="Cancún">
            <h3>cancun</h3>
          </div>
          <div class="card-back">
            <img src="img/cancun_card.jpeg" alt="Cancún" class="destino-img">
            <p>Paraíso mexicano de aguas turquesas, ruinas mayas cercanas
              y diversión sin límites entre playas, cenotes y resorts de ensueño.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ===== 7. PIE DE PÁGINA ===== -->
  <!-- ===== . PIE DE PÁGINA ===== -->
  <footer>
    <div class="footer-container">
      <div class="footer-top">
        <div class="footer-sobre-nosotros">
          <img src="imagen_blanco.png" alt="Hotel Bahía Serena Logo" class="footer-logo">
          <div class="footer-sobre-nosotros-texto">
            <h1 class="footer-titulos">Sobre nosotros</h1>
            <p>Cada amanecer frente al mar es una invitación al descanso, la aventura y el lujo natural.</p>
            <p>Combinamos comodidad, servicio cálido y paisajes inolvidables.</p>
          </div>
        </div>

        <div class="footer-contacto">
          <h1 class="footer-titulos">Contáctanos en redes sociales</h1>
          <p>Correo electrónico: bahia.serena@gmail.com</p>
          <p>Instagram: <a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></p>
          <p>Facebook: <a href="https://facebook.com" target="_blank"><i class="fab fa-facebook"></i></a></p>
          <p>TikTok: <a href="https://tiktok.com" target="_blank"><i class="fab fa-tiktok"></i></a></p>
        </div>
      </div>

      <div class="footer-derechos">
        <p>Tratamiento de datos personales | Política de privacidad</p>
        <p>&copy; Hotel Bahía Serena 2025 - Todos los derechos reservados</p>
      </div>
    </div>
  </footer>
  <script src="script.js"></script>
</body>

</html>