:root{
  --ink:#1b1c1c;
  --text:#414140;
  --accent:#dcd6c8;
  --surface:#ebebe1;
  --white:#ffffff;
  --muted:#91998e;
}

body{
  font-family:"Google Sans Flex",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--white);
  scroll-behavior:smooth;
}

h1,h2,h3,h4{
  font-family:"Google Sans Flex",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.04em;
}

a{ text-decoration:none; }

/* TOP BAR */
#topBar{
  background:var(--ink);
  color:rgba(255,255,255,.78);
  font-size:.8rem;
  padding:.35rem 0;
}
#topBar i{ color:var(--accent); margin-right:.35rem; }
#topBar a{ color:rgba(255,255,255,.78); }
#topBar a:hover{ color:#fff; }

/* Language toggle */
.lang-toggle{
  display:flex;
  gap:.35rem;
  align-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:.2rem .3rem;
  background:rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
}
.lang-toggle a{
  color:#fff;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.25rem .6rem;
  border-radius:999px;
  opacity:.75;
}
.lang-toggle a.active{
  background:var(--accent);
  color:var(--ink);
  opacity:1;
}

/* NAVBAR */
.navbar{
  transition:background-color .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:.7rem 0;
}
.navbar.bg-transparent{
  background:linear-gradient(to bottom, rgba(0,0,0,.78), transparent);
}
.navbar.scrolled{
  background-color:rgba(0,0,0,.95)!important;
  box-shadow:0 4px 15px rgba(0,0,0,.45);
  padding:.45rem 0;
}
.navbar-dark .navbar-nav .nav-link{
    font-size: .88rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    padding: 0 .9rem;
    margin-top: 5px;
    text-align: center;
}
.btn-book-top{
  border-width:2px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  padding:.45rem 1.4rem;
}

/* HERO / SLIDER (única implementación) */
#hero{ position:relative; background:var(--ink); }

.hero-carousel,
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item{
  height:calc(100vh - 40px);
  min-height:640px;
}

/* Para crossfade real: slides superpuestos */
.hero-carousel .carousel-inner{
  position:relative;
  background:var(--ink);
}

/* Todos los items absolutamente posicionados */
.hero-carousel.carousel-fade .carousel-item{
  position:absolute;
  inset:0;
  display:block;
  opacity:0;
  transition:opacity .9s ease-in-out;
  z-index:0;
  overflow:hidden;
}

/* Activo visible */
.hero-carousel.carousel-fade .carousel-item.active{
  opacity:1;
  z-index:2;
}

/* Mantener visible el que entra y el que sale durante el cambio (sin destello) */
.hero-carousel.carousel-fade .carousel-item-next.carousel-item-start,
.hero-carousel.carousel-fade .carousel-item-prev.carousel-item-end{
  opacity:1;
  z-index:3;
}
.hero-carousel.carousel-fade .carousel-item.active.carousel-item-start,
.hero-carousel.carousel-fade .carousel-item.active.carousel-item-end{
  opacity:1;
  z-index:2;
}

/* Capa imagen */
.hero-carousel .slide-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;

  backface-visibility:hidden;
  will-change:transform,opacity;
  transform:translateZ(0) scale(1.08);
  transition:transform 6s ease;
}

/* Overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.45));
}

/* Caption */
.hero-caption{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
  padding:0 1rem;

  /* no bloquear clicks del carousel */
  pointer-events:none;

  /* animación del texto */
  opacity:0;
  transform:translateY(10px);
  transition:opacity .9s ease, transform .9s ease;
}
.hero-caption a,
.hero-caption button{ pointer-events:auto; }

.hero-carousel .carousel-item.active .hero-caption{
  opacity:1;
  transform:translateY(0);
}
.hero-carousel .hero-caption h1{ transition-delay:.10s; }
.hero-carousel .hero-caption .btn{ transition-delay:.25s; }

.hero-caption h1{
  font-size:clamp(2.2rem, 4.1vw, 3.3rem);
  text-transform:uppercase;
  letter-spacing:.22em;
  margin:0 0 .9rem;
  max-width:1100px;
}

.btn-hero{
  background-color:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.8rem;
  padding:.85rem 1.9rem;
}
.btn-hero:hover{ filter:brightness(1.06); }

/* Indicadores + flechas */
.hero-carousel .carousel-indicators{
  bottom:82px;
  z-index:6;
}
.hero-carousel .carousel-indicators [data-bs-target]{
  width:8px; height:8px;
  border-radius:50%;
  background-color:rgba(255,255,255,.5);
  margin:0 4px;
}
.hero-carousel .carousel-indicators .active{ background-color:var(--accent); }

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{ z-index:6; }
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon{
  filter:drop-shadow(0 0 3px rgba(0,0,0,1));
}

/* Scroll down */
.hero-scroll-down{
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#fff;
  opacity:.7;
  cursor:pointer;
}
.hero-scroll-down i{
  display:block;
  margin-top:.35rem;
  font-size:1.2rem;
}

/* Zoom: activo normalmente va a 1.0 */
.hero-carousel .carousel-item.active .slide-bg{
  transform:translateZ(0) scale(1.0);
}

/* Zoom inicial al cargar (primera vez): requiere #heroCarousel.is-loaded desde JS */
#heroCarousel .carousel-item.active .slide-bg{
  transform:translateZ(0) scale(1.12);
}
#heroCarousel.is-loaded .carousel-item.active .slide-bg{
  transform:translateZ(0) scale(1.0);
}

/* HERO BOOKING BOX */
.hero-booking-wrapper{
  position:absolute;
  left:50%;
  bottom:-62px;
  transform:translateX(-50%);
  z-index:7;
  width:min(100%, 1100px);
  padding:0 1rem;
}
.hero-booking-box{
  background:var(--ink);
  color:#fff;
  border-radius:.9rem;
  padding:1.5rem 1.4rem;
  box-shadow:0 20px 40px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.06);
}
.hero-booking-box .form-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(255,255,255,.65);
  margin-bottom:.2rem;
}
.hero-booking-box .form-control,
.hero-booking-box .form-select{
  border-radius:.25rem;
  border:1px solid rgba(255,255,255,.16);
  padding:.35rem .55rem;
  background:rgba(255,255,255,.02);
  color:#fff;
  font-size:.86rem;
}
.hero-booking-box .btn-search{
  margin-top:1.4rem;
  width:100%;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.8rem;
  padding:.78rem;
  background-color:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}

main{ margin-top:62px; }
section{ padding:84px 0; }

.section-title{ text-align:center; margin-bottom:2.7rem; }
.section-title span.sub{
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.75rem;
  color:#999;
  display:block;
  margin-bottom:.4rem;
}
.section-title h2{ font-size:2rem; margin-bottom:.4rem; }
.section-title .divider{
  width:60px;
  height:2px;
  background:var(--accent);
  margin:.9rem auto 0;
}

#about, #concept, #locations, #experience, #whyus{ background:#fff; }
#apartments, #gallery, #booking, #contact{ background:var(--surface); }

#about img{
  border-radius:.9rem;
  box-shadow:0 20px 40px rgba(0,0,0,.18);
}
.about-pill{
  color:var(--accent);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.8rem;
  margin-bottom:.9rem;
}

/* Concept */
.facility{ text-align:center; padding:1.7rem 1rem; }
.facility i{ font-size:2.1rem; margin-bottom:.7rem; color:var(--accent); }
.facility h5{
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  margin-bottom:.45rem;
}
.facility p{ font-size:.9rem; color:#777; }

/* Apartment cards */
.room-card{
  border:none;
  border-radius:.9rem;
  overflow:hidden;
  background:#fff;
  box-shadow:0 14px 32px rgba(0,0,0,.08);
}
.room-card img{
  height:220px;
  width:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.room-card:hover img{ transform:scale(1.05); }
.room-card .badge-price{
  position:absolute;
  top:12px; left:12px;
  background-color:rgba(0,0,0,.75);
  color:#fff;
  font-size:.75rem;
  padding:.25rem .7rem;
  border-radius:20px;
}
.room-card .card-body{ padding:1.35rem 1.4rem 1.45rem; }
.room-card .card-body h3{ font-size:1.2rem; margin-bottom:.35rem; }
.room-card .tags span{
  font-size:.78rem;
  text-transform:uppercase;
  color:#999;
  margin-right:12px;
}
.room-card .btn{
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:.16em;
}

/* Gallery */
.gallery-item{ position:relative; overflow:hidden; border-radius:.7rem; }
.gallery-item img{
  width:100%;
  height:230px;
  object-fit:cover;
  transition:transform .4s ease;
}
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent);
  opacity:0;
  transition:opacity .35s ease;
}
.gallery-item:hover::after{ opacity:1; }

/* Why us cards */
.review{
  text-align:left;
  padding:1.9rem 1.6rem;
  background:#fff;
  border-radius:.9rem;
  box-shadow:0 12px 32px rgba(0,0,0,.06);
  font-size:.95rem;
  position:relative;
  height:100%;
}
.review::before{
  content:"“";
  position:absolute;
  font-size:3.6rem;
  color:rgba(0,0,0,.07);
  top:-10px;
  left:16px;
  font-family:"Google Sans Flex",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.review h6{ margin-top:1.1rem; margin-bottom:.1rem; font-weight:600; }
.review small{ color:#aaa; text-transform:uppercase; letter-spacing:.15em; font-size:.7rem; }

/* Booking (parallax) */
#booking{
  background:url('../img/slider/6.jpg') center/cover fixed no-repeat;
  position:relative;
  color:#fff;
}
#booking::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
}
#booking .container{ position:relative; z-index:2; }

/* Map */
.map-wrapper iframe{
  width:100%;
  min-height:280px;
  border:0;
  border-radius:.8rem;
  box-shadow:0 15px 35px rgba(0,0,0,.12);
}

/* Footer */
footer{
  background:var(--ink);
  color:#adb5bd;
  padding:30px 0 22px;
  font-size:.85rem;
}
footer a{ color:#adb5bd; }
footer a:hover{ color:#fff; }

@media (max-width: 991.98px){
  .hero-booking-wrapper{ bottom:-82px; }
  .hero-booking-box{ padding:1.2rem 1.1rem; }

  #btn_reservar_mb { display: none !important; }
}

@media (max-width: 767.98px){
  .hero-carousel,.hero-carousel .carousel-inner,.hero-carousel .carousel-item{ min-height:560px; }
  .hero-caption h1{ letter-spacing:.14em; }
  .hero-carousel .carousel-indicators{ bottom:64px; }
  main{ margin-top:92px; }
}

/* ===== FIX SELECT HUÉSPEDES (texto visible al desplegar) ===== */

/* Select cerrado (no tocamos mucho lo que ya tenés) */
.hero-booking-box .form-select{
  color:#fff;
  background-color:rgba(255,255,255,.02);
}

/* Opciones del dropdown */
.hero-booking-box .form-select option{
  color:#1b1c1c;          /* texto oscuro */
  background-color:#fff; /* fondo blanco */
}

/* Cuando está seleccionado */
.hero-booking-box .form-select option:checked{
  background-color:#ebebe1;
  color:#1b1c1c;
}

/* Fix hover botones hero: que NO se vuelva transparente */
.btn-hero{
  color: var(--ink) !important;

  /* Bootstrap btn variables */
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);

  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);

  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);

  --bs-btn-focus-shadow-rgb: 220, 214, 200; /* opcional */
}

.btn-hero:hover{
  filter: brightness(1.06);
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.hero-booking-box .btn-search:hover{
  filter: brightness(1.06);
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ===== CONTACT ===== */
#contact .contact-card{
}
#contact .contact-kicker{
  letter-spacing:.18em;
  font-size:.95rem;
  margin-bottom:1rem;
  color:var(--ink);
}
#contact .contact-item{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding:.75rem 0;

}
#contact .contact-item:last-child{ border-bottom:0; }
#contact .contact-icon{
  width:38px;
  height:38px;
  border-radius:999px;
  background:var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  flex:0 0 auto;
}
#contact .contact-label{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  color:#777;
  margin-bottom:.15rem;
}
#contact .contact-link{
  color:var(--ink);
}
#contact .contact-link:hover{
  color:var(--ink);
  text-decoration:underline;
}
#contact .contact-text{ color:var(--text); }

#contact .form-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#777;
  margin-bottom:.25rem;
}
#contact .form-control{
  border-radius:.45rem;
  border:1px solid rgba(0,0,0,.12);
  padding:.65rem .75rem;
}
.btn-contact{
  background-color:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.8rem;
  padding:.85rem 1.6rem;
}
.btn-contact:hover{
  filter:brightness(1.06);
  background-color:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}

input[type="date"] {
  cursor: pointer;
}

.room-card .btn
{
  background: #212529;
  color: #ffffff;
}
.room-card .btn:hover
{
  background: #ffffff;
  color: #212529;
}

.room-card_revert .btn
{
  background: #ffffff !important;
  color: #212529 !important;
}
.room-card_revert .btn:hover
{
  background: #212529;
  color: #ffffff;
}