/* ===================================================================
   NALHÁ · Styles (ordenado)
   =================================================================== */

/* ---------- Paleta ---------- */
:root{
  /* === Palette (per spec) === */
  --bg: #fffdf9;        /* Fondo base */
  --bg-2: #faf7f2;      /* Fondo secundario */
  --ink: #1a1f1d;       /* Texto principal */
  --muted: #6c756c;     /* Texto secundario / subtítulos */
  --brand: #295D55;     /* Botones principales / elementos destacados */
  --brand-2: #d2b48c;   /* Tonos arena / detalles */
  --accent: #8ec5ad;    /* Acentos suaves pastel */
  --line: rgba(0,0,0,.08); /* Líneas, bordes y separadores */

  /* === Legacy aliases to keep existing styles working === */
  --sand: var(--bg-2);
  --text: var(--ink);
  --emerald: var(--brand);
  --teal: var(--brand);
  --brand-hover: #204A43;
  --shadow: 0 14px 30px rgba(0,0,0,.08);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; color:var(--text); background:linear-gradient(180deg,#fff,#f8f6f2); }

/* ---------- Tipografía v5 (homologada) ---------- */

/* === Typography per spec === */
html, body{ font-size:16px; background: var(--bg); color: var(--ink); }
body, .nav-link, .btn, .lead, .eyebrow { 
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
  color: var(--ink);
  font-weight: 400;
}
.eyebrow{
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted); font-weight:700; font-size:.8rem; margin:.25rem 0;
}
.display{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight:700;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  line-height:1.1; margin:.25rem 0 1rem; color: var(--ink);
}
.display-hero{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight:800; letter-spacing:.01em;
  font-size: clamp(2rem, 2rem + 3vw, 4rem);
  line-height:1.05; margin:0; color: var(--ink);
}
.lead{ font-size: clamp(1rem, .9rem + .6vw, 1.25rem); color:#4a5a52; }

/* ---------- Navbar ---------- */
.navbar-wrapper{ background:#295D55; transition:background-color .3s ease, box-shadow .3s ease; }
.navbar-wrapper.scrolled{ background:#295D55!important; box-shadow:0 8px 20px rgba(0,0,0,.12) }
.navbar-content{ min-height:74px }
.navbar-wrapper .nav-link{ color:#fff!important; font-weight:700; padding:.8rem 1rem; text-transform:none; letter-spacing:.06em; font-size:.9rem; position:relative;  }
.brand-logo{ width:96px; height:96px; object-fit:cover; background:#fff }
.brand-logo.xs{ width:40px; height:40px }
.brand-center.overlap{ position:absolute; left:50%; transform:translateX(-50%); bottom:-28px; z-index:1030; display:block }
.brand-name{ color:#fff; font-weight:700 }
.btn-icon-circle{ width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid #ffffff66; color:#fff }
.btn-icon-circle:hover{ background:#ffffff1a; color:#fff }
.navbar-wrapper .btn-icon-circle i{ color:#fff }

/* ---------- Social bar ---------- */
.social-bar{ position:fixed; right:14px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.65); backdrop-filter:blur(8px); border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:8px; z-index:1040; box-shadow:0 10px 30px rgba(0,0,0,.08) }
.social-bar a{ color:#2f2f2f; display:block; padding:10px; transition:transform .2s,color .2s }
.social-bar a:hover{ color:var(--emerald); transform:translateX(-2px) }
@media (max-width:767.98px){ .social-bar{ display:none!important } }

/* ---------- Botones ---------- */

/* === Buttons per spec === */
.btn{ border-radius:999px; padding:.7rem 1.15rem; font-weight:700; letter-spacing:.02em; }
.btn-primary{ background:var(--brand); color:#fff; border:1px solid rgba(0,0,0,.04); }
.btn-primary:hover{ filter:brightness(1.06); color:#fff; }
.btn-dark{ background:#232c27; color:#fff; border:1px solid #232c27; }
.btn-dark:hover{ filter:brightness(1.06); color:#fff; }
.btn-outline{ background:transparent; color:#23302a; border:2px solid #23302a22; }
.btn-outline:hover{ background:#23302a0d; color:#23302a; }

/* ---------- Secciones ---------- */
.section-padding{ padding:56px 0 }
.bg-cream{ background:var(--sand) }
.bg-sand{ background:var(--sand) }
.section-dark{ background:var(--ink); color:#e8efe8 }
.section-dark p,.section-dark li,.section-dark .lead{ color:#d8e6df }
.section-dark .display{ color:#fff }
.ratio-21x9{ aspect-ratio:21/9 }

/* ---------- Hero A: círculos ---------- */
.hero{ position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.hero-circles .hero-bg.big{ position:absolute; inset:0; background-size:cover; background-position:center;  z-index:2  z-index:0;}
.hero-copy{ position:relative; z-index:2; background:transparent; backdrop-filter:none; border:0; box-shadow:none; padding:18px 0; }
.hero-circles-stack{
  position:static;
  margin-top:14px;
  display:flex; flex-wrap:wrap; gap:14px;
  justify-content:flex-start; align-items:flex-start;
  max-width: 100%;
  z-index:3;
}
.hero-circles-stack .circle{
  width:86px; height:86px; border-radius:999px; overflow:hidden;
  border:6px solid #fff; box-shadow:0 12px 26px rgba(0,0,0,.16);
  transform:translateZ(0) scale(1);
  transition:transform .45s ease, box-shadow .45s ease;
  cursor:pointer; background:#eaeaea center/cover no-repeat;
}
.hero-circles-stack .circle:hover{ transform:scale(1.07); box-shadow:0 18px 36px rgba(0,0,0,.18) }
.hero-circles-stack .circle.is-active{ transform:scale(1.24) }
@media (max-width:991.98px){
  .hero{ min-height:76vh; overflow:hidden;}
  .hero-circles-stack{
  position:static;
  margin-top:14px;
  display:flex; flex-wrap:wrap; gap:14px;
  justify-content:flex-start; align-items:flex-start;
  max-width: 100%;
  z-index:3;
}
  .hero-copy{ position:relative; z-index:2; background:transparent; backdrop-filter:none; border:0; box-shadow:none; padding:18px 0; }
}

/* ---------- Slider secundario ---------- */
.showcase-swiper{ padding:18px 0 44px }
.showcase-img{ width:100%; height:360px; object-fit:cover; border-radius:20px; box-shadow:0 18px 36px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.06) }
@media (max-width:767.98px){ .showcase-img{ height:240px } }

/* ---------- Heroes alternos ---------- */
.hero-split-panorama{ min-height:70vh; overflow:hidden }
.hero-split-panorama .panorama{ position:absolute; top:0; bottom:0; width:50%; background-size:cover; background-position:center }
.hero-split-panorama .panorama.left{ left:0; animation:panLeft 12s ease-in-out infinite alternate }
.hero-split-panorama .panorama.right{ right:0; animation:panRight 12s ease-in-out infinite alternate }
@keyframes panLeft{ from{transform:scale(1.05) translateX(0)} to{transform:scale(1.1) translateX(12px)} }
@keyframes panRight{ from{transform:scale(1.05) translateX(0)} to{transform:scale(1.1) translateX(-12px)} }
.hero-parallax-cards{ min-height:70vh }
.hero-parallax-cards .cards-layer{ position:absolute; inset:0; display:grid; place-items:center; gap:24px }
.hero-parallax-cards .card-float{ width:min(36vw,340px); border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.18); transform:translate3d(0,0,0) rotate(var(--r, -2deg)); animation:float 8s ease-in-out infinite; object-fit:cover }
.hero-parallax-cards .card-float:nth-child(2){ width:min(28vw,300px); animation-delay:1.2s; --r: 2deg }
.hero-parallax-cards .card-float:nth-child(3){ width:min(22vw,260px); animation-delay:2.1s; --r: -1deg }
@keyframes float{ 0%{transform:translateY(0) rotate(var(--r))} 50%{transform:translateY(-14px) rotate(var(--r))} 100%{transform:translateY(0) rotate(var(--r))} }
.hero-filmstrip{ min-height:60vh; display:flex; align-items:center; justify-content:center; overflow:hidden }
.hero-filmstrip .strip{ position:absolute; left:0; right:0; top:0; bottom:0; display:flex; gap:12px; align-items:center }
.hero-filmstrip .strip .frame{ flex:0 0 34vw; height:56vh; border-radius:16px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.18); background:center/cover no-repeat; animation:zoom 10s ease-in-out infinite }
.hero-filmstrip .strip .frame:nth-child(odd){ animation-delay:1.2s }
@keyframes zoom{ from{transform:scale(1)} to{transform:scale(1.08)} }

/* ---------- Intro + collage + PNG izquierda ---------- */
.section-intro-leaves{ position:relative }
.section-intro-leaves::before{
  content:''; position:absolute; left:-6%; top:10%; width:min(40vw,520px); height:min(40vw,520px);
  background:url('../images/fotointro.png') left top / contain no-repeat; opacity:.7; pointer-events:none; z-index:0;
}
.card-media{ overflow:hidden; border-radius:18px; box-shadow:var(--shadow); border:1px solid var(--line); background:#fff }
.card-media img{ display:block; width:100%; height:auto; transform:scale(1.01); transition: transform .8s ease }
.card-media:hover img{ transform:scale(1.04) }
.list-check{ list-style:none; padding:0; margin:1rem 0 0 }
.list-check li{ margin:.4rem 0; padding-left:1.6rem; position:relative }
.list-check li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--emerald); font-weight:800 }
.intro-collage{ position:relative; height: 420px }
.intro-collage .intro-img{ position:absolute; width:52%; border-radius:18px; box-shadow:0 16px 36px rgba(0,0,0,.25); object-fit:cover }
.intro-collage .intro-a{ top:2%; left:1%; width:52%; }
.intro-collage .intro-b{ top:14%; right:1%; width:50%; }
.intro-collage .intro-c{ bottom:-4%; left:26%; width:46%; }
@media (max-width:991.98px){
  .intro-collage{ height:360px; margin-top:0 }
  .intro-collage .intro-img{ width:66% }
  .intro-collage .intro-b{ top:8%; right:2%; width:66%; }
  .intro-collage .intro-c{ bottom:-12%; left:18%; width:62%; }
}

/* ---------- Rooms ---------- */
.rooms-swiper{ padding:8px 8px 44px }
.room-carousel .carousel-item img{ height:240px; object-fit:cover; background:#e9ecef }
.room-card{ border:0; box-shadow:0 20px 50px rgba(0,0,0,.06); border-radius:20px; overflow:hidden; transition:transform .2s ease,box-shadow .2s ease }
.room-card:hover{ transform:translateY(-4px); box-shadow:0 30px 70px rgba(0,0,0,.09) }
.room-card .card-title{ color:var(--emerald); font-weight:700 }
.rooms-swiper .swiper-button-prev, .rooms-swiper .swiper-button-next{
  color:#0E1E1A; width:42px; height:42px; border-radius:50%; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.06);
}
.rooms-swiper .swiper-button-prev:after, .rooms-swiper .swiper-button-next:after{ font-size:18px }
.rooms-thumbbar{ user-select:none }
.room-pill{ background:#fff; border:1px solid rgba(0,0,0,.08); color:#214c46; font-weight:800; border-radius:999px; padding:.35rem .8rem; box-shadow:0 6px 14px rgba(0,0,0,.06); cursor:pointer }
.room-pill.is-active, .room-pill:hover{ background:var(--brand); color:#fff }

/* ---------- Atracciones ---------- */
.exp-card{ overflow:hidden; border-radius:16px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow) }
.exp-card img{ width:100%; height:220px; object-fit:cover; display:block; transition:transform .8s }
.exp-card:hover img{ transform:scale(1.06) }
.exp-body{ padding:14px 14px 18px }
.exp-body h4{ margin:0 0 6px; color: var(--brand); font-weight:800; }

/* ---------- Footer ---------- */
.footer{ background: var(--ink); color:#e8efe8 }
.footer a{ color:#e8efe8; text-decoration:none }
.footer a:hover{ color:#fff }

/* ---------- Responsive tweaks ---------- */
@media (max-width:991.98px){
  .section-padding{ padding:44px 0 }
  .navbar-wrapper .brand-center.overlap{ display:none }
  .room-carousel .carousel-item img{ height:210px }
}

/* Headings in Georgia */
h1,h2,h3,h4,h5,h6,.section-title,.card-title{
  font-family: Georgia, "Times New Roman", Times, serif;
  color: var(--ink);
}

/* Map legacy CTA to primary */
.btn-ctaPrime{ background: var(--brand); color:#fff; border:1px solid rgba(0,0,0,.04); box-shadow:0 10px 24px rgba(0,0,0,.12) }
.btn-ctaPrime:hover{ background: var(--brand-hover); color:#fff }


/* ===== Base tipográfica y colores pedidos (habitaciones) ===== */
#habitaciones .section-title, #habitaciones .card-title{ color: var(--ink); }
#habitaciones .text-secondary{ color: var(--muted)!important; font-size:1rem; }

/* ===== Swiper (control deslizante de habitaciones) ===== */
.rooms-swiper{ padding: 8px 8px 44px; }
.rooms-swiper .swiper-pagination{ bottom: 12px !important; }
.rooms-swiper .swiper-pagination-bullet{ background: rgba(0,0,0,.25); opacity: 1; }
.rooms-swiper .swiper-pagination-bullet-active{ background: var(--brand); }
.rooms-swiper .swiper-button-prev,
.rooms-swiper .swiper-button-next{
  top: auto !important;
  bottom: 8px !important;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(0,0,0,.35); color: #fff; backdrop-filter: blur(4px);
}
.rooms-swiper .swiper-button-prev::after,
.rooms-swiper .swiper-button-next::after{ font-size: 16px; font-weight: 800; color:#fff; }
@media (min-width: 992px){
  .rooms-swiper .swiper-button-prev{ left: 16px; }
  .rooms-swiper .swiper-button-next{ right: 16px; }
  .rooms-swiper .swiper-button-prev, .rooms-swiper .swiper-button-next{ bottom: 12px !important; }
}

/* ===== Tarjeta de habitación ===== */
.room-card{ border:0; box-shadow:0 20px 50px rgba(0,0,0,.06); border-radius:20px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; background:#fff; }
.room-card:hover{ transform: translateY(-4px); box-shadow: 0 30px 70px rgba(0,0,0,.09); }
/* Carrusel interno (Bootstrap) */
.room-carousel .carousel-item img{ height: 240px; object-fit: cover; background: #e9ecef; }
.room-card .carousel-control-prev, .room-card .carousel-control-next{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
/* Tipografía y color en los títulos de las tarjetas */
.room-card .card-title{ color: var(--brand) !important; font-weight: 700; font-size: 1.125rem; }
/* Botón “Más información” estilo brand */
.btn-mas-info{ background: var(--brand); color: #fff; border: 2px solid var(--brand); border-radius: 12px; padding: .55rem 1rem; font-weight: 700; text-decoration: none; display: inline-block; }
.btn-mas-info:hover{ filter: brightness(1.06); color: #fff; }
/* Espaciados verticales suaves */
#habitaciones{ padding-bottom: 28px; }


/* === Hero top white fade overlay (discreet) === */
.hero-white-fade{
  position:absolute; inset:0 0 auto 0; height:72vh; pointer-events:none; z-index:1;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.92) 24%,
    rgba(255,255,255,0.55) 56%,
    rgba(255,255,255,0.20) 80%,
    rgba(255,255,255,0) 100%
  );
}
@media (max-width: 991.98px){
  .hero-white-fade{ height:64vh; }
}
/* Ensure hero content sits above the fade */
.hero .hero-inner{ position:relative; z-index:2; }

/* navbar text shadow cleanup */
.navbar-wrapper .nav-link,
.navbar-wrapper .brand-name,
.navbar-wrapper .btn-icon-circle i{
  text-shadow:none !important;
}


/* === Left translucent white panel for hero text === */

.hero-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: clamp(320px, 46vw, 720px);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.90) 0%,
    rgba(255,255,255,0.90) 30%,
    rgba(255,255,255,0) 100%
  );
  border-right: 1px solid rgba(0,0,0,.04);
}

@media (max-width: 991.98px){
  
.hero-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: clamp(320px, 46vw, 720px);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.90) 0%,
    rgba(255,255,255,0.90) 30%,
    rgba(255,255,255,0) 100%
  );
  border-right: 1px solid rgba(0,0,0,.04);
}

}
/* Place hero content above the panel */
.hero .hero-inner{ position:relative; z-index:2; }






.hero .container{ position:relative; }

#intro{ position:relative; z-index:2; margin-top:-24px; }


/* Tight white plate behind hero text (fits to content) */

}






#inicio .display-hero{ font-size: clamp(1.4rem, 1.4rem + 2.1vw, 2.8rem); }
#inicio .lead{ font-size: clamp(0.7rem, 0.63rem + 0.42vw, 0.875rem); }
#inicio .eyebrow{ font-size: .56rem; letter-spacing:.12em; }

.hero-copy.on-green, .hero-copy.on-green .display-hero, .hero-copy.on-green .lead, .hero-copy.on-green .eyebrow{ color:#fff !important; }
.hero-copy.on-green .lead{ color:#e8f2ee !important; }
.hero-copy.on-green .btn-ctaPrime{ background: var(--brand); color:#fff; border:1px solid rgba(0,0,0,.04); box-shadow:0 10px 24px rgba(0,0,0,.12) }
.hero-copy.on-green .btn-ctaPrime:hover{ background:#f6f9f8; color:#214c46; }


/* Translucent green rectangle behind hero text */
.hero-copy{ position:relative; }
.hero-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-18px; right:-22px; bottom: -18px; left: -22px;
  background: rgba(41,93,85,0.62);
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(0,0,0,1.2);
}
@media (max-width: 991.98px){
  .hero-copy::before{ top:-14px; right:-14px; bottom:-14px; left: -22px; border-radius:16px; }
}



/* Ken Burns + crossfade for hero background */
.hero-circles .hero-bg.big,
.hero-circles .hero-bg.next{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.hero-circles .hero-bg.next{
  opacity:0; transform:scale(1.02);
  transition: opacity 900ms ease, transform 900ms ease, filter 900ms ease;
  filter: blur(1.5px);
  z-index:1;
}
.hero-circles .hero-bg.next.is-visible{
  opacity:1; transform:scale(1); filter: blur(0);
}
@keyframes kbZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.hero-circles .hero-bg.big.kb,
.hero-circles .hero-bg.next.kb{ animation: kbZoom 6s ease-in-out both; }


/* Navbar reservar button - white outline */
.btn-outline-ink{ background:transparent; color:#fff!important; border:2px solid #fff; border-radius:12px; font-weight:800; }

.btn-outline-ink:hover{ background:rgba(255,255,255,.12); color:#fff!important; }

/* Hero entry effects */
@keyframes fadeUp { from{opacity:0; transform: translateY(12px)} to{opacity:1; transform:none} }
@keyframes panelIn { from{opacity:0; transform: translateY(10px)} to{opacity:1; transform:none} }
.hero-copy{ opacity:0; transform: translateY(12px); }
.hero-copy.play-in{ animation: fadeUp 600ms ease forwards 150ms; }
.hero-copy.play-in::before{ animation: panelIn 700ms ease forwards; }

.section-intro-leaves{ position:relative; }
.section-intro-leaves > .container{ position:relative; z-index:1; }


/* === Hero (cuadro verde) – inversión de botones (override) === */
.hero-copy.on-green .btn-ctaPrime{
  background:#fff;
  color: var(--brand) !important;
  border:2px solid #fff;
}
.hero-copy.on-green .btn-ctaPrime:hover{
  background: var(--brand);
  color:#fff !important;
  border-color: var(--brand);
}

/* Mini-logo decorativo a la izquierda de títulos pequeños */
.eyebrow.with-logo{ position:relative; padding-left:1.6rem; }
.eyebrow.with-logo::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:18px; height:18px; display:inline-block; background:url('../images/logopeque.png') center/contain no-repeat; filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); z-index:2; }
/* Club de playa — fondo de ondas y collage a la izquierda */
#club{ position:relative; overflow:hidden; }
#club::before{ content:''; display:none; }
#club .container{ position:relative; z-index:1; }

.club-collage{ position:relative; height:420px; max-width:92%; }
.club-collage .img{ position:absolute; width:48%; border-radius:18px; box-shadow:0 16px 36px rgba(0,0,0,.22); object-fit:cover; }
.club-collage .img.a{ top:2%; left:2%; width:46%; }
.club-collage .img.b{ top:18%; left:32%; width:50%; }
.club-collage .img.c{ bottom:-4%; left:18%; width:48%; }
@media (max-width:991.98px){ .club-collage{ height:360px; } .club-collage .img{ width:60%; } .club-collage .img.a{ left:4% } .club-collage .img.b{ left:30%; width:58% } .club-collage .img.c{ left:16%; width:58%; bottom:-10% } }
  .club-collage .img.b{ top:18%; left:32%; width:50%; }
  .club-collage .img.c{ bottom:-4%; left:18%; width:48%; }
}

.club-text{ padding-left:18px }

/* Postales Nalhá (coverflow) */
.postales-swiper{ padding:10px 0 40px }
.postales-swiper .swiper-slide{ display:flex; align-items:center; justify-content:center }
.postales-img{ width:100%; height:340px; object-fit:cover; border-radius:18px; box-shadow:0 16px 34px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.06) }
.postales-swiper .swiper-button-prev,
.postales-swiper .swiper-button-next{
  color:#0E1E1A; width:42px; height:42px; border-radius:50%; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.06);
}
.postales-swiper .swiper-button-prev:after, .postales-swiper .swiper-button-next:after{ font-size:18px }
@media (max-width: 767.98px){ .postales-img{ height:220px } }

/* Servicios / Amenities */
.amenity-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  box-shadow:0 14px 30px rgba(0,0,0,.08); padding:18px; height:100%; text-align:center;
}
.amenity-card i{ font-size:28px; color:var(--brand); display:block; margin-bottom:6px }
.amenity-card h4{ margin:.25rem 0 .25rem; font-size:1rem; font-weight:800 }
.amenity-card p{ font-size:.9rem; color:var(--muted); margin:0 }

@media (min-width: 992px){
  #club .col-lg-6.club-text{ padding-left: 34px; }
}

#club{ position:relative; overflow:hidden; }
#club::after{
  content:""; position:absolute; inset:0; 
  background:url('../images/fondoagua.png') center/cover no-repeat;
  opacity:.35; z-index:0; pointer-events:none;
}
#club .container{ position:relative; z-index:2; }

#ubicacion{ background: var(--brand); color:#e8efe8; }
#ubicacion .display, #ubicacion .eyebrow, #ubicacion p{ color:#e8efe8; }
#ubicacion a{ color:#fff; }
.footer{ background: var(--ink); color:#e8efe8 }
.footer a{ color:#fff; }

#postales{ background:#f5f6f4 }

.exp-body h4::after{
  content:''; display:block; width:36px; height:3px; border-radius:3px;
  background: var(--brand); margin-top:6px; opacity:.3;
}


/* === Enhancements (Sept pass) ===================================== */

/* Coin-flip animation for brand logo every 15s (triggered via JS) */
@keyframes coinFlip {
  0%   { transform: rotateY(0deg);    }
  50%  { transform: rotateY(180deg);  }
  100% { transform: rotateY(360deg);  }
}
.brand-logo.coin-flip{ animation: coinFlip 1s ease both; transform-origin:center; }

/* Make the mini decorative logo larger next to eyebrow titles */
.eyebrow.with-logo{ padding-left:2.1rem; }
.eyebrow.with-logo::before{ width:30px; height:30px; }
@media (max-width: 575.98px){
  .eyebrow.with-logo{ padding-left:1.9rem; }
  .eyebrow.with-logo::before{ width:20px; height:20px; }
}

/* Mobile tune-ups for "Bienvenidos" collage spacing */
@media (max-width: 767.98px){
  .section-intro-leaves .intro-collage{ height: 400px; margin-bottom: 26px; }
  .section-intro-leaves .intro-collage .intro-img{ width: 74%; }
  .section-intro-leaves .intro-collage .intro-b{ top: 10%; right: 4%; width: 74%; }
  .section-intro-leaves .intro-collage .intro-c{ bottom: -4%; left: 16%; width: 68%; }
}

/* Club de playa — mobile: put text first and then the collage */
@media (max-width: 991.98px){
  #club .club-text{ order:-1; margin-bottom: 16px; }
  #club .club-collage{ order: 2; }
  #club .club-collage .img{ width:70%; }
  #club .club-collage .img.a{ left:6%; top:4%; }
  #club .club-collage .img.b{ left:34%; top:16%; width:72%; }
  #club .club-collage .img.c{ left:18%; bottom:-8%; width:70%; }
}

/* === Mobile-only micro slider (intro & club) === */
.mobile-slider{ display:none; position:relative; border-radius:20px; overflow:hidden;
  width:100%; height:56vw; max-height:360px; box-shadow:0 16px 36px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.06); margin:8px 0 18px; }
.mobile-slider .ms-slide{ position:absolute; inset:0; background:center/cover no-repeat; opacity:0; transform:scale(1); transition: opacity .6s ease, transform 5s ease; }
.mobile-slider .ms-slide.is-active{ opacity:1; transform:scale(1.06); }
.mobile-slider .ms-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:6px; z-index:3; }
.mobile-slider .ms-dot{ width:6px; height:6px; border-radius:999px; background:#fff; opacity:.55; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.mobile-slider .ms-dot.is-active{ opacity:1; transform:scale(1.2); }

@media (max-width: 767.98px){
  .mobile-slider{ display:block; }
  /* Hide collages on mobile to use slider instead */
  .section-intro-leaves .intro-collage{ display:none !important; }
  #club .club-collage{ display:none !important; }
}

/* Make mini-logo next to eyebrow titles bigger (x2 approx) */
.eyebrow.with-logo{ padding-left:2.4rem; }
.eyebrow.with-logo::before{ width:36px; height:36px; }

@media (max-width: 575.98px){
  .eyebrow.with-logo{ padding-left:2.1rem; }
  .eyebrow.with-logo::before{ width:30px; height:30px; }
}


/* === Hero: black bottom identity plate (per client) === */
.hero-copy::before{ display:none !important; } /* disable previous green panel */
.hero-bottom-plate{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: clamp(10px, 3vh, 36px);
  width: min(80vw, 1100px);
  background:#000; color:#fff;
  border-radius: 14px;
  padding: clamp(12px, 1.2vw + 6px, 22px) clamp(16px, 2vw, 28px);
  text-align:center;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  z-index: 5;
}
.hero-bottom-plate .plate-eyebrow{
  font-style: italic; letter-spacing:.06em; opacity:.9;
  font-size: clamp(13px, .8rem + .2vw, 18px);
}
.hero-bottom-plate .plate-title{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 800;
  font-size: clamp(24px, 1.4rem + 2vw, 44px);
  line-height:1.1; margin:.15em 0;
}
.hero-bottom-plate .plate-sub{
  opacity:.85; font-weight:600;
  font-size: clamp(12px, .9rem + .1vw, 16px);
  letter-spacing:.02em;
}
@media (max-width: 991.98px){
  .hero-bottom-plate{
    width: 90vw;
    border-radius: 16px;
    bottom: clamp(10px, 2vh, 22px);
    padding: 12px 16px;
  }
}


/* === Hero Black Band (overlay) =========================================== */
.hero.hero-circles .hero-copy,
.hero.hero-circles .hero-ctas,
.hero.hero-circles .hero-circles-stack{ display:none !important; }

.hero-black-band{
  width:100%;
  background:#0b0b0b;
  color:#fff;
  position:relative;
  z-index:3;
  height:24vh;              /* altura del panel */
  margin-top:-18vh;         /* ~2/3 de su altura sobre el slider */
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;

}
.hero-black-band::before{
  /* degradado suave sólo en la parte superior del panel */
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:32%;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
}
.hero-black-band .inner{
  width:min(1100px, 92%);
  text-align:center;
  padding: clamp(4px, 1vw, 12px) 8px;
}
.band-eyebrow{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing:.2px;
  color:#cfd8d3;
  opacity:.95;
  font-size:clamp(0.95rem, 0.7rem + .6vw, 1.2rem);
  margin: .12rem 0 .18rem;
}
.band-title{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight:800;
  line-height:1.12;
  letter-spacing:.4px;
  font-size:clamp(1.9rem, 1.3rem + 3vw, 3.3rem);
  margin: .02rem 0 .18rem;
  color:#ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.band-sub{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:600;
  color:#dfe8e3;
  font-size:clamp(.95rem, .8rem + .5vw, 1.15rem);
  opacity:.95;
  margin:0;
}

@media (max-width: 991.98px){
  .hero-black-band{
    height:20vh;
    margin-top:-26vh;   /* más superposición sobre el slider en móvil */
  }
  .band-title{ font-size:clamp(1.8rem, 1.2rem + 5vw, 2.6rem); }
}

/* ======================================================================== */


/* Entrada elegante y destello sutil para la banda negra */
@keyframes bandFadeUp { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.hero-black-band .inner{ opacity:0; transform:translateY(8px); }
.hero-black-band .inner.reveal{ animation: bandFadeUp 650ms ease forwards 200ms; }

@keyframes shineSweep { to{ left:120%; } }
.band-title{ position:relative; overflow:hidden; }
.band-title.shimmer::after{
  content:""; position:absolute; top:-12%; bottom:-12%; left:-22%;
  width:18%; transform:skewX(-18deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 50%, rgba(255,255,255,0) 100%);
  filter:blur(1px); opacity:.9;
  animation: shineSweep 1.4s ease forwards 900ms;
}


/* ===== Habitaciones: miniaturas en thumbbar + filtros ===== */
.rooms-filters{ background:#ffffffcc; backdrop-filter:blur(8px); border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:10px 12px; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.rooms-filters .filter-label{ font-weight:800; font-size:.85rem; color:#30443d; letter-spacing:.02em; }
.filter-select{ min-width:110px; border-radius:12px; border:1px solid rgba(0,0,0,.1); }
.btn-chip{ border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.08); font-weight:700; padding:.35rem .7rem; box-shadow:0 6px 14px rgba(0,0,0,.05); }
.btn-chip:hover{ background:#f4f8f6; }
.btn-chip.active{ background:var(--brand); color:#fff; border-color: var(--brand); }
.btn-chip.clear{ background:#fff0; border-color:rgba(0,0,0,.12); }

.rooms-thumbbar{ gap:10px !important; }
.room-thumb{
  position:relative; width:78px; height:62px; border-radius:12px; overflow:hidden;
  border:1px solid rgba(0,0,0,.08); background:#eaeaea center/cover no-repeat;
  box-shadow:0 8px 20px rgba(0,0,0,.06); cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.room-thumb:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.1); }
.room-thumb.is-active{ outline:3px solid var(--brand); outline-offset:0; }
.room-thumb .cap{
  position:absolute; right:6px; bottom:6px; display:inline-flex; align-items:center; gap:4px;
  padding:.15rem .4rem; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:.7rem; font-weight:800;
}
.room-thumb .cap i{ font-size:.85em; }

/* Hide filtered-out slides elegantly */
.rooms-swiper .swiper-slide.is-hidden{ display:none !important; }


/* ===== Habitaciones: mobile tuning ===== */
@media (max-width: 575.98px){
  .rooms-filters{ padding:8px 10px; border-radius:14px; gap:6px!important; }
  .rooms-filters .filter-label{ font-size:.82rem; }
  .filter-select{ min-width:96px; font-size:.9rem; }
  .btn-chip{ padding:.32rem .6rem; font-size:.9rem; }
  #roomsThumbbar{ gap:8px !important; }
  .room-thumb{ width:76px; height:58px; border-radius:12px; }
  .room-thumb .cap{ font-size:.68rem; padding:.14rem .38rem; }
}


/* === Scoped fixes: navbar button & rooms 'Limpiar' chip ==================== */

/* 1) Navbar 'Reservar' — reducir sutilmente en pantallas muy angostas */
@media (max-width: 400px){
  .navbar-content{ padding-left:12px; padding-right:12px; }
  .btn-outline-ink{ padding:.5rem .9rem; font-size:.95rem; }
}
@media (max-width: 340px){
  .btn-outline-ink{ padding:.46rem .8rem; font-size:.9rem; }
}

/* 2) Filtros de Habitaciones — mantener 'Limpiar' dentro del contenedor */
#roomsFilters{ flex-wrap:wrap; }
#roomsFilters .filter-group{ flex-wrap:wrap; }
#clearRoomFilters{ white-space:nowrap; flex:0 0 auto; }
@media (max-width: 575.98px){
  #roomsFilters{ padding-left:10px; padding-right:10px; }
}
/* ========================================================================== */


/* === Micro-fix navbar overflow & 'Limpiar' chip (scoped) ================== */
@media (max-width: 420px){
  .navbar-wrapper{ overflow:hidden; }
  .navbar-content{ padding-left:10px; padding-right:10px; gap:8px; }
  .navbar-content .btn-outline-ink{ padding:.46rem .78rem; font-size:.92rem; }
  .navbar-content .btn-icon-circle{ width:36px; height:36px; }
  .navbar-toggler{ padding:.25rem .35rem; }
}

/* Habitaciones: asegurar contención y acomodar 'Limpiar' sin desbordar */
#roomsFilters{ max-width:100%; flex-wrap:wrap; }
#roomsFilters .filter-group{ flex-wrap:wrap; }
#clearRoomFilters{ white-space:nowrap; flex:0 0 auto; }
@media (max-width: 575.98px){
  #roomsFilters{ padding-left:10px; padding-right:10px; }
}
/* ======================================================================== */


/* === Navbar micro-fit & language button (scoped) ========================== */
@media (max-width: 420px){
  .navbar-content{ gap:8px; }
  .btn-outline-ink{ padding:.46rem .78rem; font-size:.92rem; }
  .btn-icon-circle{ width:36px; height:36px; }
}
/* Language icon uses existing .btn-icon-circle style; no extra rules needed */


/* === Navbar anti-overflow (very small screens) ========================= */
@media (max-width: 420px){
  .navbar-content{ gap:8px; }
  .navbar-brand .brand-name{ font-size: .95rem; }
  .btn-outline-ink{ padding:.46rem .78rem; font-size:.92rem; }
  .btn-icon-circle{ width:36px; height:36px; }
  .navbar-wrapper{ overflow:hidden; }
}

/* === Footer socials: allow wrap so TikTok never gets cut ================ */
.footer .d-flex.gap-2{ flex-wrap: wrap; }
.footer .d-flex.gap-2 .btn{ flex: 0 0 auto; }