/* FUENTE */
body {
  font-family: 'Poppins', sans-serif;
}

/* ============================= */
/* BARRA SUPERIOR */
/* ============================= */
.mini-navbar {
  background: linear-gradient(
    90deg,
    #061821,
    #0b2e3c,
    #0f4c5c,
    #124e3f
  );
  color: #dcefed;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
    width: 100%;
  padding: 4px 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 13px; /* un poco más pequeño en móvil */
}

/* ============================= */
/* NAVBAR PRINCIPAL */
/* ============================= */
.custom-navbar {
  height: 70px;
  display: flex;
  align-items: center;

  background: linear-gradient(
    90deg,
    #04131a,
    #062a35,
    #0b3f4b,
    #0f5a48
  );

  border-bottom: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
}
@media (max-width: 768px) {
  .logo-navbar {
    max-height: 80px; /* se reduce para móviles */
    top: -10px;       /* ajusta si es necesario */
  }
}


/* Links */
.custom-navbar .nav-link {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
}

/* Hover */
.custom-navbar .nav-link:hover {
  color: #d4af37 !important;
}
/* Forzar menú EXACTAMENTE al centro */
.custom-navbar .container {
  position: relative;
}

.custom-navbar .navbar-collapse {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Logo fijo a la izquierda */
.custom-navbar .navbar-brand {
  position: absolute;
  left: 15px;
}


/* Logo */
/* Logo general */
.logo-navbar {
  max-height: 150px;
  width: auto;
  height: auto;
  max-width: 100%; /* importante para que no se salga */
  position: relative;
  top: -15px;
    z-index: 1051; /* más alto que el logo y el navbar */
}

/* Logo en móviles */
@media (max-width: 768px) {
  .logo-navbar {
    max-height: 50px; /* más pequeño */
    top: 0;           /* sin subirlo */
  }
}



/* Centrado del menú */
.custom-navbar .navbar-collapse {
  justify-content: center !important;
}


/* ============================= */
/* CARRUSEL */
/* ============================= */
#heroCarousel {
  height: 70vh;
  overflow: hidden;
}

.hero-slide {
  height: 70vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.15) contrast(1.05);
  position: relative;
}

/* Oscurecer fondo */
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

/* Texto del hero */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #fff;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  #heroCarousel,
  .hero-slide {
    height: 50vh;
  }
}
/* Título principal del carrusel */
.hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;

  /* Efecto dorado elegante */
  background: linear-gradient(45deg, #ffffff, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Sombra fuerte para que destaque */
  text-shadow: 2px 4px 20px rgba(0,0,0,0.8);
}

/* Subtítulo */
.hero-content p {
  font-size: 1.4rem;
  color: #f1f1f1;
  margin-top: 15px;
  margin-bottom: 25px;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

/* Responsive */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.4rem;
    letter-spacing: 2px;
  }
}


/* ============================= */
/* TARJETAS */
/* ============================= */
.card {
  text-align: center;
  border: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border-radius: 15px;
  transition: 0.3s ease;
}

.card i {
  display: block;
  margin-bottom: 12px;
  color: #0f5a48;
}

.card h5 {
  margin: 0;
  font-weight: 600;
}

/* ============================= */
/* FOOTER */
/* ============================= */
.footer {
  background: linear-gradient(
    90deg,
    #04131a,
    #062a35,
    #0b3f4b,
    #0f5a48
  );
}

.footer h5 {
  color: #d4af37;
}

.footer p,
.footer a {
  color: #eaf6f4;
  text-decoration: none;
}

.footer a:hover {
  color: #d4af37;
}

.footer-bottom {
  background: rgba(0,0,0,0.45);
  font-size: 14px;
}
/* ===== MAPA PREMIUM ===== */

.map-section{
  background: linear-gradient(180deg,#0b2e3c,#071f2a);
  padding: 80px 0;
}

.map-title{
  text-align:center;
  color:#e7faff;
  font-size:2.2rem;
  font-weight:700;
  margin-bottom:40px;
  letter-spacing:1px;
}

.map-card{
  max-width:1100px;
  margin:auto;
  border-radius:25px;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.6);
  border:3px solid rgba(255,255,255,.15);
  background:#0f4c5c;
}

.map-card iframe{
  width:100%;
  height:450px;
  border:none;
  filter: saturate(1.1) contrast(1.05);
}

@media(max-width:768px){
  .map-card iframe{
    height:320px;
  }

  .map-title{
    font-size:1.6rem;
  }
}
/* ===== PISCINA ===== */

.pool-section{
  padding:100px 0;
  background: linear-gradient(180deg,#0f4c5c,#0b2e3c);
  color:white;
}

.pool-title{
  font-size:2.8rem;
  font-weight:800;
  margin-bottom:20px;
  background: linear-gradient(90deg,#20c997,#5ce1ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.pool-text{
  font-size:1.1rem;
  line-height:1.7;
  opacity:.9;
}

.pool-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:25px;
}

.pool-features div{
  background:rgba(255,255,255,.08);
  padding:12px 18px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
}

.pool-features i{
  color:#20c997;
  font-size:1.2rem;
}

.pool-image{
  border-radius:25px;
  overflow:hidden;
  box-shadow:0 25px 50px rgba(0,0,0,.5);
}

.pool-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.6s ease;
}

.pool-image:hover img{
  transform:scale(1.08);
}
/* ===== RESTAURANTE ===== */

.restaurant-section{
  padding:100px 0;
  background: linear-gradient(180deg,#2e8b6f,#0f4c5c);
  color:white;
}

.restaurant-title{
  font-size:2.8rem;
  font-weight:800;
  margin-bottom:20px;
  background: linear-gradient(90deg,#ffc107,#ff7b00);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.restaurant-text{
  font-size:1.1rem;
  line-height:1.7;
  opacity:.9;
}

.restaurant-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  margin-top:25px;
}

.restaurant-features div{
  background:rgba(255,255,255,.08);
  padding:12px 18px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
}

.restaurant-features i{
  color:#ffc107;
  font-size:1.2rem;
}

.restaurant-image{
  border-radius:25px;
  overflow:hidden;
  box-shadow:0 25px 50px rgba(0,0,0,.5);
}

.restaurant-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.6s ease;
}

.restaurant-image:hover img{
  transform:scale(1.08);
}
/* ============================= */
/* HAMBURGUESA CENTRADA EN MÓVIL */
/* ============================= */
@media (max-width: 991px) {

  .custom-navbar {
    position: relative;
  }

  .custom-navbar .navbar-toggler {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    margin: 0;
    border: none;
  }

}
/* ============================= */
/* FIX DEFINITIVO COLLAPSE MÓVIL */
/* ============================= */
@media (max-width: 991px) {

  .custom-navbar {
    position: relative;
    z-index: 2000; /* navbar siempre arriba */
  }

  .custom-navbar .navbar-collapse {
    position: absolute !important;
    top: 70px; /* justo debajo del navbar */
    left: 0;
    width: 100%;
    transform: none !important;

    background: linear-gradient(
      180deg,
      #04131a,
      #062a35,
      #0b3f4b,
      #0f5a48
    );

    padding: 20px 0;
    z-index: 1999; /* debajo del navbar, encima del hero */
  }

  .custom-navbar .navbar-nav {
    text-align: center;
  }

  .custom-navbar .nav-item {
    margin: 10px 0;
  }
}
/* BOTÓN FLOTANTE WHATSAPP */
.btn-wsp {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
}

.btn-wsp img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    transition: transform 0.3s ease;
}

.btn-wsp img:hover {
    transform: scale(1.12);
}