/* =========================================
   RESET
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  scroll-behavior:smooth;
}

/* =========================================
   VARIABLES
========================================= */

:root{
  --bg:#050816;
  --card:rgba(16,23,48,.7);
  --primary:#7c4dff;
  --secondary:#00bfff;
  --text:#ffffff;
  --muted:#b8c1ec;
  --border:rgba(255,255,255,.08);
}

/* =========================================
   BODY
========================================= */

body{
  font-family:'Inter', sans-serif;

  background:
  radial-gradient(circle at top,#0d1635 0%,#050816 55%);

  color:var(--text);

  overflow-x:hidden;
}

body::before{
  content:"";

  position:fixed;
  inset:0;

  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

  background-size:40px 40px;

  pointer-events:none;

  z-index:-1;
}

/* =========================================
   CONTAINER
========================================= */

.container{
  width:min(1200px,92%);
  margin:auto;
}

/* =========================================
   NAVBAR
========================================= */

nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);

  width: calc(100% - 32px);
  max-width: 1250px;

  z-index: 1000;

  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(16px);

  border: 1px solid var(--border);
  border-radius: 20px;
}

.nav-content{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:1rem 0;
}

.logo{
  font-family:'Orbitron', sans-serif;

  font-size:1.4rem;

  font-weight:700;

  letter-spacing:2px;

  color:white;
}

.logo span{
  color:var(--secondary);
}

.nav-links{
  display:flex;
  gap:2rem;
}

.nav-links a{
  color:var(--muted);

  text-decoration:none;

  transition:.3s ease;

  font-weight:500;

  position:relative;
}

.nav-links a::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-6px;

  width:0%;
  height:2px;

  background:var(--secondary);

  transition:.3s ease;
}

.nav-links a:hover::after{
  width:100%;
}

.nav-links a:hover{
  color:white;
}

/* =========================================
   BOTONES
========================================= */

.btn{
  background:
  linear-gradient(
    135deg,
    #1f140d,
    #9b8074
  );

  color:rgb(180, 129, 129);

  padding:.9rem 1.6rem;

  border-radius:999px;

  text-decoration:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-weight:600;

  transition:.3s ease;

  box-shadow:
  0 0 25px rgba(104, 78, 31, 0.45 45 45 45 45 45);
}

.btn:hover{
  transform:translateY(-3px);

  box-shadow:
  0 0 35px rgba(0,191,255,.45);
}

.reserve-btn{
  border:none;
  cursor:pointer;
  font-family:inherit;
}

/* =========================
   HERO VIDEO
========================= */

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;

  display: flex;
  align-items: center;
}

/* VIDEO */

.hero-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;
}

.hero-video video {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.05);

  opacity: 0.5;
}

/* OVERLAY */

.hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to right,
      rgba(5,7,13,0.92),
      rgba(5,7,13,0.45)
    );

  z-index: 1;
}

/* CONTENT */

.hero-grid {
  position: relative;
  z-index: 3;
}

/* =========================================
   HERO
========================================= */
.hero-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:4rem;

  align-items:center;
}

.hero h1{
  font-size:clamp(3rem,6vw,6rem);

  line-height:1;

  margin-bottom:1.5rem;

  font-family:'Orbitron', sans-serif;
}

.hero h1 span{
  background:
  linear-gradient(
    135deg,
    var(--secondary),
    var(--primary)
  );

  background-clip:text;
  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;
}

.hero p{
  color:var(--muted);

  font-size:1.1rem;

  line-height:1.8;

  margin-bottom:2rem;

  max-width:600px;
}

.hero-image{
  position:relative;
}

.hero-image img{
  width:100%;

  border-radius:28px;

  border:1px solid var(--border);

  box-shadow:
  0 0 50px rgba(0,191,255,.15);
}

.floating-card{
  position:absolute;

  bottom:-20px;
  left:-20px;

  background:rgba(12,18,38,.92);

  border:1px solid var(--border);

  padding:1rem 1.3rem;

  border-radius:18px;

  backdrop-filter:blur(18px);

  box-shadow:
  0 0 30px rgba(124,77,255,.25);
}

.floating-card h4{
  margin-bottom:.4rem;
}

/* =========================================
   SECTIONS
========================================= */

section{
  padding:7rem 0;
}

.section-title{
  text-align:center;
  margin-bottom:4rem;
}

.section-title h2{
  font-size:clamp(2rem,4vw,3.5rem);

  margin-bottom:1rem;

  font-family:'Orbitron', sans-serif;
}

.section-title p{
  color:var(--muted);

  max-width:700px;

  margin:auto;

  line-height:1.7;
}

/* =========================================
   SERVICES
========================================= */

.services-grid{
  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(260px,1fr));

  gap:2rem;
}

.service-card{
  background:var(--card);

  border:1px solid var(--border);

  border-radius:24px;

  padding:2rem;

  transition:.35s ease;

  backdrop-filter:blur(14px);
}

.service-card:hover{
  transform:translateY(-10px);

  border-color:rgba(0,191,255,.4);

  box-shadow:
  0 0 35px rgba(0,191,255,.15);
}

.service-icon{
  width:70px;
  height:70px;

  border-radius:18px;

  display:grid;
  place-items:center;

  margin-bottom:1.5rem;

  background:
  linear-gradient(
    135deg,
    rgba(124,77,255,.25),
    rgba(0,191,255,.25)
  );

  font-size:2rem;
}

.service-card h3{
  margin-bottom:1rem;
  font-size:1.3rem;
}

.service-card p{
  color:var(--muted);

  line-height:1.7;

  margin-bottom:1.5rem;
}

.price-tag{
  display:inline-block;

  padding:.7rem 1.2rem;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    rgba(124,77,255,.2),
    rgba(0,191,255,.2)
  );

  border:1px solid rgba(255,255,255,.08);

  font-weight:700;

  color:white;

  box-shadow:
  0 0 20px rgba(0,191,255,.12);
}

/* =========================================
   GALLERY
========================================= */

.gallery-grid{
  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));

  gap:2rem;
}

.gallery-card{
  position:relative;

  overflow:hidden;

  border-radius:24px;

  border:1px solid rgba(255,255,255,.08);

  background:rgba(16,23,48,.7);

  backdrop-filter:blur(12px);

  transition:.4s ease;

  cursor:pointer;

  min-height:320px;
}

.gallery-card:hover{
  transform:translateY(-10px);

  border-color:rgba(0,191,255,.45);

  box-shadow:
  0 0 35px rgba(0,191,255,.18);
}

.gallery-card img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:transform .6s ease;
}

.gallery-card:hover img{
  transform:scale(1.08);
}

.gallery-overlay{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(5,8,22,.95),
    rgba(5,8,22,.15)
  );

  display:flex;
  align-items:flex-end;

  padding:2rem;

  opacity:0;

  transition:.4s ease;
}

.gallery-card:hover .gallery-overlay{
  opacity:1;
}

.gallery-overlay h3{
  font-size:1.4rem;

  font-family:'Orbitron', sans-serif;

  color:white;

  transform:translateY(20px);

  transition:.4s ease;
}

.gallery-card:hover .gallery-overlay h3{
  transform:translateY(0);
}

/* =========================================
   TESTIMONIOS
========================================= */

.testimonials-grid{
  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));

  gap:2rem;

  margin-bottom:4rem;
}

.testimonial-card{
  background:var(--card);

  border:1px solid var(--border);

  border-radius:28px;

  padding:2rem;

  backdrop-filter:blur(14px);

  transition:.35s ease;

  position:relative;

  overflow:hidden;
}

.testimonial-card::before{
  content:"";

  position:absolute;

  width:180px;
  height:180px;

  border-radius:50%;

  top:-80px;
  right:-70px;

  background:
  radial-gradient(
    circle,
    rgba(124,77,255,.15),
    transparent 70%
  );

  filter:blur(8px);
}

.testimonial-card:hover{
  transform:translateY(-10px);

  border-color:rgba(0,191,255,.4);

  box-shadow:
  0 0 35px rgba(0,191,255,.15);
}

.testimonial-stars{
  font-size:1.2rem;

  margin-bottom:1rem;

  color:#ffd166;

  letter-spacing:3px;

  position:relative;

  z-index:2;
}

.testimonial-card p{
  color:white;

  line-height:1.6;

  margin-bottom:1.5rem;

  font-size:1rem;

  position:relative;

  z-index:2;
}

.testimonial-user{
  position:relative;
  z-index:2;
}

.testimonial-user h4{
  font-size:1.1rem;

  margin-bottom:.3rem;

  font-family:'Orbitron', sans-serif;
}

.testimonial-user span{
  color:var(--secondary);

  font-size:.92rem;
}

/* =========================================
   ADD TESTIMONIAL
========================================= */

.add-testimonial-box{
  margin-top:4rem;

  padding:2.5rem;

  border-radius:32px;

  position:relative;

  overflow:hidden;

  background:
  linear-gradient(
    145deg,
    rgba(16,23,48,.96),
    rgba(5,8,22,.98)
  );

  border:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(18px);

  box-shadow:
  0 0 45px rgba(0,191,255,.08);
}

/* EFECTOS CIRCULARES */

.add-testimonial-box::before{
  content:"";

  position:absolute;

  width:280px;
  height:280px;

  border-radius:50%;

  top:-120px;
  right:-100px;

  background:
  radial-gradient(
    circle,
    rgba(124,77,255,.24),
    transparent 70%
  );

  filter:blur(10px);
}

.add-testimonial-box::after{
  content:"";

  position:absolute;

  width:240px;
  height:240px;

  border-radius:50%;

  bottom:-120px;
  left:-90px;

  background:
  radial-gradient(
    circle,
    rgba(0,191,255,.18),
    transparent 70%
  );

  filter:blur(10px);
}

.add-testimonial-box h3{
  position:relative;
  z-index:2;

  font-size:2rem;

  margin-bottom:2rem;

  font-family:'Orbitron', sans-serif;
}

/* =========================================
   FORM
========================================= */

.testimonial-form{
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;

  gap:1rem;
}

/* INPUTS */

.testimonial-form input,
.testimonial-form select,
.testimonial-form textarea{
  width:100%;

  padding:1rem 1.2rem;

  border-radius:18px;

  border:1px solid rgba(255,255,255,.08);

  background:
  linear-gradient(
    145deg,
    rgba(9,14,35,.98),
    rgba(15,22,50,.98)
  );

  color:white;

  font-family:inherit;

  font-size:15px;

  transition:.3s ease;
}

/* TEXTAREA */

.testimonial-form textarea{
  resize:none;

  min-height:150px;
}

/* PLACEHOLDERS */

.testimonial-form input::placeholder,
.testimonial-form textarea::placeholder{
  color:rgba(255,255,255,.55);
}

/* FOCUS */

.testimonial-form input:focus,
.testimonial-form select:focus,
.testimonial-form textarea:focus{
  outline:none;

  border-color:var(--secondary);

  box-shadow:
  0 0 25px rgba(0,191,255,.18);
}

/* =========================================
   SELECT
========================================= */

.testimonial-form select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  cursor:pointer;

  color:#e9f7ff;

  background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E");

  background-repeat:no-repeat;

  background-position:right 18px center;

  background-size:18px;
}

.testimonial-form select option{
  background:#0d1635;

  color:white;
}

/* =========================================
   ESTRELLAS INTERACTIVAS
========================================= */

.stars-select{
  display:flex;

  gap:.5rem;

  margin:.4rem 0 1rem;
}

.stars-select span{

  font-size:2rem;

  cursor:pointer;

  color:#555;

  opacity:.5;

  transition:
  transform .25s ease,
  color .25s ease,
  opacity .25s ease,
  text-shadow .25s ease;
}

.stars-select span:hover{
  transform:scale(1.15);
}
/* =========================================
   BOTÓN
========================================= */

.submit-review-btn{
  border:none;

  cursor:pointer;

  margin-top:.5rem;

  font-size:1rem;

  font-weight:700;
}

.submit-review-btn:hover{
  transform:translateY(-4px);

  box-shadow:
  0 0 35px rgba(0,191,255,.35);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:700px){

  .add-testimonial-box{
    padding:2rem 1.4rem;
  }

  .add-testimonial-box h3{
    font-size:1.5rem;
  }

  .testimonial-card{
    padding:1.6rem;
  }

}

/* =========================================
   FOOTER
========================================= */

footer{
  padding:2rem 0;

  border-top:1px solid var(--border);

  text-align:center;

  color:var(--muted);

  background:rgba(5,8,22,.8);
}

/* =========================================
   GLOWS
========================================= */

.glow{
  position:absolute;

  width:500px;
  height:500px;

  background:
  radial-gradient(
    circle,
    rgba(124,77,255,.2),
    transparent 70%
  );

  filter:blur(60px);

  z-index:-1;
}

.glow.one{
  top:-200px;
  left:-150px;
}

.glow.two{
  bottom:-250px;
  right:-150px;

  background:
  radial-gradient(
    circle,
    rgba(0,191,255,.2),
    transparent 70%
  );
}

/* =========================================
   MODAL RESERVAS
========================================= */

.booking-modal{
  position:fixed;
  inset:0;

  background:rgba(5,8,22,.82);

  backdrop-filter:blur(14px);

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;

  transition:.4s ease;

  z-index:99999;
}

.booking-modal.show{
  opacity:1;
  visibility:visible;
}

.booking-box{
  position:relative;

  width:min(560px,92%);

  padding:2.5rem;

  border-radius:32px;

  overflow:hidden;

  background:
  linear-gradient(
    145deg,
    rgba(16,23,48,.96),
    rgba(5,8,22,.98)
  );

  border:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(18px);

  box-shadow:
  0 0 60px rgba(124,77,255,.25),
  0 0 100px rgba(0,191,255,.12);
}

.booking-box::before{
  content:"";

  position:absolute;

  width:280px;
  height:280px;

  border-radius:50%;

  top:-140px;
  right:-120px;

  background:
  radial-gradient(
    circle,
    rgba(124,77,255,.28),
    transparent 70%
  );

  filter:blur(12px);
}

.booking-box::after{
  content:"";

  position:absolute;

  width:240px;
  height:240px;

  border-radius:50%;

  bottom:-130px;
  left:-90px;

  background:
  radial-gradient(
    circle,
    rgba(0,191,255,.22),
    transparent 70%
  );

  filter:blur(12px);
}

.booking-box h2{
  position:relative;
  z-index:2;

  font-size:2rem;

  margin-bottom:1.8rem;

  font-family:'Orbitron', sans-serif;
}

.close-modal{
  position:absolute;

  top:18px;
  right:24px;

  font-size:2rem;

  color:white;

  cursor:pointer;

  z-index:3;

  transition:.3s ease;
}

.close-modal:hover{
  color:var(--secondary);

  transform:rotate(90deg) scale(1.1);
}

/* FORM */

.booking-form{
  position:relative;
  z-index:2;

  display:flex;
  flex-direction:column;

  gap:1rem;
}

/* INPUTS */

.booking-form input{
  width:100%;

  padding:1rem 1.2rem;

  border-radius:18px;

  border:1px solid rgba(255,255,255,.08);

  background:
  linear-gradient(
    145deg,
    rgba(9,14,35,.98),
    rgba(15,22,50,.98)
  );

  color:#ffffff;

  font-family:inherit;

  font-size:15px;

  transition:.3s ease;
}

.booking-form input::placeholder{
  color:rgba(255,255,255,.55);
}

.booking-form input:focus{
  outline:none;

  border-color:var(--secondary);

  box-shadow:
  0 0 25px rgba(0,191,255,.18);
}

/* SELECT */

.booking-form select{
  width:100%;

  padding:1rem 1.2rem;

  border-radius:18px;

  border:1px solid rgba(0,191,255,.22);

  background:
  linear-gradient(
    145deg,
    rgba(9,14,35,.98),
    rgba(15,22,50,.98)
  );

  color:#e9f7ff;

  font-family:inherit;

  font-size:15px;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  cursor:pointer;

  transition:.3s ease;

  background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E");

  background-repeat:no-repeat;

  background-position:right 18px center;

  background-size:18px;
}

.booking-form select option{
  background:#0d1635;
  color:#ffffff;
}

.booking-form select:focus{
  outline:none;

  border-color:var(--secondary);

  box-shadow:
  0 0 25px rgba(0,191,255,.18);
}

/* BOTÓN */

.submit-btn{
  border:none;

  cursor:pointer;

  margin-top:.5rem;

  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  );

  color:white;

  font-weight:700;

  padding:1rem;

  border-radius:999px;

  transition:.35s ease;

  box-shadow:
  0 0 25px rgba(124,77,255,.35);
}

.submit-btn:hover{
  transform:translateY(-4px);

  box-shadow:
  0 0 35px rgba(0,191,255,.35);
}

/* =========================================
   CALENDARIO
========================================= */

.flatpickr-calendar{
  background:#0d1635 !important;

  border:1px solid rgba(255,255,255,.08) !important;

  border-radius:24px !important;

  overflow:hidden;

  box-shadow:
  0 0 35px rgba(0,191,255,.18) !important;
}

.flatpickr-months{
  background:
  linear-gradient(
    135deg,
    rgba(124,77,255,.25),
    rgba(0,191,255,.18)
  );
}

.flatpickr-month{
  color:white !important;
}

.flatpickr-current-month input.cur-year{
  color:white !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg{
  fill:white !important;
}

.flatpickr-weekday{
  color:var(--secondary) !important;
  font-weight:700;
}

.flatpickr-day{
  color:white !important;

  border-radius:12px !important;

  transition:.25s ease;
}

.flatpickr-day:hover{
  background:rgba(0,191,255,.18) !important;
}

.flatpickr-day.today{
  border:1px solid var(--secondary) !important;
}

.flatpickr-day.selected{
  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
  ) !important;

  border:none !important;

  color:white !important;
}

.flatpickr-day.flatpickr-disabled{
  background:rgba(255,0,80,.18) !important;

  color:#ff8ca8 !important;

  text-decoration:line-through;

  cursor:not-allowed !important;
}

/* =========================================
   FECHAS RESERVADAS
========================================= */

.reserved-dates{
  margin-top:2rem;

  padding-top:1.5rem;

  border-top:1px solid rgba(255,255,255,.08);
}

.reserved-dates h3{
  font-size:1rem;

  margin-bottom:1rem;

  color:white;

  font-family:'Orbitron', sans-serif;
}

.reserved-list{
  display:flex;
  flex-wrap:wrap;

  gap:.8rem;
}

.reserved-item{
  padding:.75rem 1rem;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    rgba(255,0,80,.18),
    rgba(124,77,255,.18)
  );

  border:1px solid rgba(255,255,255,.08);

  color:#ff9ab5;

  font-size:.85rem;

  font-weight:600;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:900px){

  .hero-grid,
  .contact-wrapper{
    grid-template-columns:1fr;
  }

  .hero{
    padding-top:8rem;
  }

  .nav-links{
    display:none;
  }

  .hero h1{
    font-size:3.2rem;
  }
}

@media(max-width:700px){

  .booking-box{
    padding:2rem 1.4rem;
  }

  .booking-box h2{
    font-size:1.6rem;
  }
}
/* =========================================
   SERVICE IMAGES
========================================= */

.service-image{
  width:100%;
  height:230px;

  object-fit:cover;

  border-radius:22px 22px 0 0;

  border-bottom:
  1px solid rgba(255,255,255,.08);

  transition:.45s ease;
}

.service-card{
  overflow:hidden;
  padding:0;
}

.service-card:hover .service-image{
  transform:scale(1.05);
}

.service-content{
  padding:2rem;
}