@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --lake:    #7a9b3a;   /* olive green  — logo top */
  --lake-dk: #5a7a2a;
  --sand:    #f5ede0;
  --earth:   #c4572a;   /* terracotta   — logo bottom */
  --earth-dk:#9e3e1e;
  --gold:    #d4a820;   /* golden yellow — logo centre */
  --forest:  #2d1a12;   /* dark brown   — logo text */
  --cream:   #fdf9f4;
  --text:    #2d1a12;
  --muted:   #7a6158;
  --white:   #ffffff;
  --forest-soft: #4a3626;   /* softened warm brown for dark sections */
  /* rich lakeside-dusk gradient for CTA / dark sections */
  --brand-grad:
    radial-gradient(circle at 15% 12%, rgba(122,155,58,.34), transparent 55%),
    radial-gradient(circle at 88% 92%, rgba(212,168,32,.22), transparent 55%),
    linear-gradient(135deg, #1e1409 0%, #2b3a18 48%, #47632b 100%);
  /* softer warm-brown panel with a faint glow, for content sections on dark bg */
  --panel-grad:
    radial-gradient(circle at 18% 0%, rgba(212,168,32,.10), transparent 55%),
    linear-gradient(160deg, #5a422e 0%, #4a3626 55%, #3f2e20 100%);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--cream); overflow-x: hidden; }

/* Red de seguridad responsive: ninguna imagen o incrustado desborda su columna,
   y los anclajes (#seccion) no quedan tapados por la barra fija. */
img, svg, video, iframe { max-width: 100%; }
[id] { scroll-margin-top: 90px; }

/* ── NAV ── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 5%;
  transition: background .4s, backdrop-filter .4s, box-shadow .4s,
              top .4s ease, left .4s ease, right .4s ease,
              border-radius .4s ease, padding .4s ease;
}
/* scrolled → detaches into a floating banner */
#navbar.scrolled {
  top: .7rem; left: 1.1rem; right: 1.1rem;
  border-radius: 1rem;
  padding: .7rem 1.8rem;
  background: rgba(50,34,25,.80);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 12px 34px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.07);
}
/* softened warm brown when solid (top of interior pages) */
#navbar.solid {
  background: rgba(58,40,30,.82) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 16px rgba(0,0,0,.14);
}
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; color: var(--white); text-decoration: none; letter-spacing: .02em;
  display: flex; align-items: center; gap: .7rem;
}
.brand-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff !important;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.brand-text em {
  font-style: italic;
  font-weight: 500;
  color: #fff !important;
  margin-left: .35rem;
  opacity: .95;
}
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links li { display: flex; align-items: center; }
.nav-links a {
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: .875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  transition: color .2s;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* the CTA sits on its own solid button — no scrim needed there */
.nav-links a.nav-cta { text-shadow: none; }
.nav-links a:hover, .nav-links a.active { color: var(--earth); }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--earth); color: var(--white) !important;
  padding: .65rem 1.6rem; border-radius: 2rem;
  box-shadow: 0 6px 16px rgba(196,87,42,.35);
  transition: background .2s !important, transform .2s, box-shadow .2s;
}
.nav-cta:hover { background: var(--earth-dk) !important; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(196,87,42,.45); }
.nav-cta.active { color: var(--white); }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; position: relative; z-index: 1002; padding: 6px; margin: -6px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.nav-hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
/* hamburger → X when the drawer is open */
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── PAGE HERO ── */
.page-hero {
  position: relative; height: 45vh; min-height: 360px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding-top: 80px; /* account for fixed nav */
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.page-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,30,22,.5) 0%, rgba(6,30,22,.7) 100%);
}
.page-hero-content {
  position: relative; text-align: center; color: var(--white); padding: 0 1.5rem;
}
.page-hero-content .breadcrumb {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: .8rem;
}
.page-hero-content .breadcrumb a { color: var(--earth); text-decoration: none; }
.page-hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.1;
}
.page-hero-content p {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
  max-width: 900px;
  margin: 0 auto;
  letter-spacing: -.01em;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.page-hero-content p::before,
.page-hero-content p::after {
  content: '';
  display: block;
  width: 60px; height: 2px;
  background: var(--earth);
  margin: 1.8rem auto;
  opacity: .8;
}

/* ── SECTIONS ── */
.section { padding: 5rem 5%; }
.section-sm { padding: 3.5rem 5%; }
.section-tag {
  display: inline-block; color: var(--earth);
  font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: .8rem;
}
.section-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.15; color: var(--forest);
}
.section-intro {
  color: var(--muted); font-size: 1rem; line-height: 1.75;
  max-width: 560px; margin-top: .8rem;
}
.section-header { max-width: 1200px; margin: 0 auto 3rem; }
.section-header-row {
  max-width: 1200px; margin: 0 auto 3rem;
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}

/* ── BUTTONS ── */
.btn-primary, .btn-ghost, .btn-white, .btn-hero-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; letter-spacing: .02em; line-height: 1.2;
  min-width: 180px; min-height: 3.3rem; padding: .8rem 2.2rem; border-radius: 2.5rem;
  text-decoration: none; font-weight: 600; font-size: .95rem;
}
.btn-primary {
  background: var(--earth); color: var(--white);
  box-shadow: 0 8px 22px rgba(196,87,42,.30);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-primary:hover { background: var(--earth-dk); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(196,87,42,.40); }
.btn-ghost {
  background: transparent; color: var(--earth);
  border: 2px solid var(--earth);
  transition: background .2s, color .2s, transform .2s;
}
.btn-ghost:hover { background: var(--earth); color: #fff; transform: translateY(-2px); }
.btn-sm {
  background: var(--forest); color: #fff;
  padding: .5rem 1.2rem; border-radius: 2rem;
  font-size: .82rem; text-decoration: none; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; transition: background .2s;
}
.btn-sm:hover { background: var(--lake-dk); }
.btn-white {
  background: #fff; color: var(--forest);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-white:hover { background: var(--sand); transform: translateY(-2px); }

/* ── SPLIT GRID (text + image two-column sections) ── */
.split-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  max-width: 1200px; margin: 0 auto;
}

/* ── CARDS GRID ── */
.cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  gap: 1.8rem; max-width: 1200px; margin: 0 auto;
}
.card {
  background: var(--white); border-radius: 1.2rem; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  transition: transform .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.13); }
.card-img { height: 220px; overflow: hidden; position: relative; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-img img { transform: scale(1.05); }
.card-badge {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--earth); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: .3rem .8rem; border-radius: 2rem;
}
.card-body { padding: 1.6rem; }
.card-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; color: var(--forest); margin-bottom: .4rem;
}
.card-body p { font-size: .9rem; color: var(--muted); line-height: 1.65; margin-bottom: 1.1rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.card-tag {
  background: var(--sand); color: var(--text);
  font-size: .75rem; padding: .28rem .7rem; border-radius: 2rem;
}
.card-footer {
  /* sin precio: el boton queda alineado a la derecha */
  display: flex; justify-content: flex-end; align-items: center;
  padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.07);
}
.price { font-size: 1.05rem; font-weight: 700; color: var(--lake-dk); }
.price span { font-size: .78rem; font-weight: 400; color: var(--muted); }

/* ── AMENITY GRID ── */
.amenities-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
  gap: 1.5rem; max-width: 1200px; margin: 0 auto;
}
.amenity-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem; padding: 2rem 1.5rem;
  transition: background .3s, transform .3s;
}
.amenity-card:hover { background: rgba(255,255,255,.12); transform: translateY(-4px); }
.amenity-icon { font-size: 2rem; margin-bottom: 1rem; display: block; }
.amenity-card h4 { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: .4rem; }
.amenity-card p { font-size: .85rem; color: rgba(255,255,255,.55); line-height: 1.6; }

/* ── ACTIVITY LIST ── */
.activity-list { display: flex; flex-direction: column; gap: 1.1rem; }
.activity-item {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.4rem; background: var(--white);
  border-radius: 1rem;
  transition: transform .3s, box-shadow .3s;
}
.activity-item:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0,0,0,.10); }
.activity-icon { font-size: 1.6rem; flex-shrink: 0; }
.activity-item h4 { font-weight: 600; color: var(--forest); margin-bottom: .2rem; }
.activity-item p { font-size: .88rem; color: var(--muted); line-height: 1.55; }

/* ── TRANSPORT CARDS ── */
.transport-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem; max-width: 1300px; margin: 0 auto;
  align-items: stretch;
}
.transport-card {
  background: var(--white); border-radius: 1.2rem; padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  display: flex; flex-direction: column;
}
.transport-card .t-icon { font-size: 2.2rem; margin-bottom: .8rem; display: block; }
.transport-card h4 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--forest); margin-bottom: .6rem; }
.transport-card p { font-size: .88rem; color: var(--muted); line-height: 1.7; flex: 1; margin-bottom: 1.1rem; }
.tip {
  margin-top: auto; padding: .7rem .9rem;
  background: rgba(10,122,150,.07); border-left: 3px solid var(--lake);
  border-radius: 0 .5rem .5rem 0;
  font-size: .82rem; color: var(--lake-dk); font-weight: 500;
}

/* ── GALLERY ── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: 1rem;
  max-width: 1200px; margin: 0 auto;
}
.gallery-item { border-radius: .9rem; overflow: hidden; cursor: pointer; position: relative; }
.gallery-item img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
  transition: transform .4s;
  image-orientation: none;
}
.gallery-item:hover img { transform: scale(1.04); }
.g-overlay {
  position: absolute; inset: 0; background: rgba(6,30,22,0);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.gallery-item:hover .g-overlay { background: rgba(6,30,22,.35); }
.g-overlay span { color: #fff; font-size: 2rem; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s; }
.gallery-item:hover .g-overlay span { opacity: 1; transform: scale(1); }

/* ── LIGHTBOX ── */
#lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.93); align-items: center; justify-content: center; padding: 2rem;
}
#lightbox.open { display: flex; }
#lightbox img { max-width: 90vw; max-height: 88vh; border-radius: .8rem; object-fit: contain; }
#lightbox-close {
  position: absolute; top: 1.2rem; right: 1.5rem;
  color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; opacity: .7; transition: opacity .2s;
}
#lightbox-close:hover { opacity: 1; }
#lightbox-prev, #lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.12); border: none; color: #fff;
  font-size: 1.8rem; width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  transition: background .2s; display: flex; align-items: center; justify-content: center;
}
#lightbox-prev:hover, #lightbox-next:hover { background: rgba(255,255,255,.25); }
#lightbox-prev { left: 1.2rem; }
#lightbox-next { right: 1.2rem; }

/* ── REVIEW CARDS ── */
.reviews-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 1.5rem; max-width: 1200px; margin: 0 auto;
}
.review-card { background: var(--white); border-radius: 1.2rem; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.stars { color: #f5a623; font-size: 1rem; margin-bottom: .8rem; letter-spacing: .1em; }
.review-card blockquote { font-size: .93rem; line-height: 1.7; color: var(--text); font-style: italic; margin-bottom: 1.2rem; }
.reviewer { display: flex; align-items: center; gap: .8rem; }
.reviewer-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--lake);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: .88rem; flex-shrink: 0;
}
.reviewer-info strong { display: block; font-size: .88rem; color: var(--forest); }
.reviewer-info span { font-size: .76rem; color: var(--muted); }

/* ── STATS BAR ── */
.stats-bar {
  background: var(--panel-grad); color: var(--white);
  display: flex; justify-content: center; flex-wrap: wrap;
}
.stat {
  flex: 1; min-width: 140px; text-align: center;
  padding: 1.6rem 1rem; border-right: 1px solid rgba(255,255,255,.08);
}
.stat:last-child { border-right: none; }
.stat-num { font-family: 'Playfair Display', serif; font-size: 1.9rem; color: var(--gold); display: block; }
.stat-label { font-size: .76rem; color: rgba(255,255,255,.5); letter-spacing: .08em; text-transform: uppercase; }

/* ── CONTACT FORM ── */
.contact-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  max-width: 1100px; margin: 0 auto; align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-item { display: flex; align-items: flex-start; gap: 1rem; }
.ci-icon {
  width: 44px; height: 44px; background: rgba(255,255,255,.1); border-radius: .7rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.contact-item h5 { font-size: .76rem; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2rem; }
.contact-item p { font-size: .93rem; color: rgba(255,255,255,.9); }
.contact-socials { display: flex; gap: 1rem; margin-top: .5rem; }
.social-btn {
  width: 44px; height: 44px; background: rgba(255,255,255,.12); border-radius: .7rem;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 1rem; color: #fff; transition: background .2s;
}
.social-btn:hover { background: var(--earth); }
.contact-form {
  background: rgba(8,8,10,.34); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 1.2rem; padding: 2.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: .82rem; color: rgba(255,255,255,.65); margin-bottom: .4rem; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  border-radius: .6rem; padding: .85rem 1rem; color: #fff;
  font-family: 'Inter', sans-serif; font-size: .9rem; outline: none;
  color-scheme: dark;
  transition: border-color .2s, background .2s;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,.35); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: #7fd6e8; background: rgba(255,255,255,.13); }
.form-group select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd6e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px;
  padding-right: 2.6rem; cursor: pointer;
}
.form-group select option { background: var(--forest-soft); color: #fff; }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.btn-submit {
  width: 100%; padding: 1rem; background: var(--earth); border: none;
  border-radius: .7rem; color: #fff; font-family: 'Inter', sans-serif;
  font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .2s; margin-top: .5rem;
}
.btn-submit:hover { background: var(--earth-dk); }

/* ── FOOTER ── */
footer {
  background: #0d1f18; color: rgba(255,255,255,.5);
  text-align: center; padding: 2.5rem 5%; font-size: .82rem;
}
.footer-logo { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: rgba(255,255,255,.85); display: block; margin-bottom: .4rem; }
.footer-logo span { color: var(--earth); }
.footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0; }
.footer-nav a { color: rgba(255,255,255,.45); text-decoration: none; font-size: .82rem; transition: color .2s; }
.footer-nav a:hover { color: var(--earth); }
footer p { color: rgba(255,255,255,.3); font-size: .78rem; margin-top: .5rem; }
footer a { color: rgba(255,255,255,.4); text-decoration: none; }
footer a:hover { color: var(--earth); }

/* ── COOKIE BANNER ── */
#cookie-banner {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 999; width: calc(100% - 3rem); max-width: 860px;
  background: rgba(13,31,24,.96); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 1.2rem;
  padding: 1.6rem 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  box-shadow: 0 16px 48px rgba(0,0,0,.4); animation: slideUp .4s ease;
}
@keyframes slideUp {
  from { opacity:0; transform:translateX(-50%) translateY(20px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
#cookie-banner.hidden { animation: slideDown .3s ease forwards; }
@keyframes slideDown { to { opacity:0; transform:translateX(-50%) translateY(20px); pointer-events:none; } }
.cookie-icon { font-size: 2rem; flex-shrink: 0; }
.cookie-text { flex: 1; min-width: 200px; }
.cookie-text h4 { font-size: .92rem; font-weight: 600; color: #fff; margin-bottom: .25rem; }
.cookie-text p { font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.5; }
.cookie-text a { color: #7fd6e8; text-decoration: none; }
.cookie-actions { display: flex; gap: .75rem; flex-shrink: 0; flex-wrap: wrap; }
.cookie-btn { padding: .55rem 1.3rem; border-radius: 2rem; font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 600; cursor: pointer; border: none; transition: background .2s, transform .15s; }
.cookie-btn:hover { transform: translateY(-1px); }
.cookie-accept { background: var(--earth); color: #fff; }
.cookie-accept:hover { background: var(--earth-dk); }
.cookie-decline { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.15) !important; }
.cookie-decline:hover { background: rgba(255,255,255,.18); }

/* ── REVEAL ANIMATION ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── CITIES GRID ── */
.cities-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1.2rem; max-width: 1200px; margin: 0 auto;
}

/* ── WHATSAPP BUTTON ── */
.whatsapp-float {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
  width: 58px; height: 58px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.5);
  text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.whatsapp-float:hover { transform: scale(1.12); box-shadow: 0 8px 32px rgba(37,211,102,.6); }
.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }
/* on narrow screens the cookie banner sits along the bottom — keep the
   floating WhatsApp button from covering its Accept / Decline buttons */
@media (max-width: 900px) {
  body:has(#cookie-banner) .whatsapp-float { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ── LUCIDE ICONS ── */
.amenity-icon svg { width: 34px; height: 34px; color: var(--gold); stroke-width: 1.6; }
.activity-icon svg { width: 30px; height: 30px; color: var(--earth); stroke-width: 1.7; margin-top: 2px; }
.t-icon svg { width: 34px; height: 34px; color: var(--earth); stroke-width: 1.6; }
.ci-icon svg { width: 20px; height: 20px; color: #fff; stroke-width: 1.8; }
.cookie-icon svg { width: 26px; height: 26px; color: var(--gold); stroke-width: 1.7; }
.social-btn svg { width: 18px; height: 18px; stroke-width: 1.8; }
.tip svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: .35rem; stroke-width: 2; }
.g-overlay span svg { width: 34px; height: 34px; color: #fff; stroke-width: 1.6; }
.isl-ico { width: 40px; height: 40px; color: #7fd6e8; stroke-width: 1.5; }
.city-ico { width: 30px; height: 30px; color: #7fd6e8; stroke-width: 1.6; }
.card-tag svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: .3rem; stroke-width: 2; }
.incl-ico { color: var(--earth); display: inline-flex; flex-shrink: 0; }
.incl-ico svg { width: 26px; height: 26px; stroke-width: 1.7; }

/* ── INCLUDED (single-line) GRID ── */
.included-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1rem; max-width: 1200px; margin: 0 auto;
}
.included-item {
  background: var(--white); border-radius: 1rem; padding: 1.6rem 1.1rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  transition: transform .3s, box-shadow .3s;
}
.included-item:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0,0,0,.10); }
.included-item .incl-ico {
  width: 52px; height: 52px; border-radius: 50%; background: var(--sand);
  display: flex; align-items: center; justify-content: center;
}
.included-item strong { display: block; color: var(--forest); font-size: .92rem; margin-bottom: .2rem; }
.included-item span.incl-desc { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.gps-ico { width: 15px; height: 15px; stroke-width: 2; }
#lightbox-close svg { width: 26px; height: 26px; }
#lightbox-prev svg, #lightbox-next svg { width: 28px; height: 28px; }

/* ── RESPONSIVE ── */
@media (max-width: 1120px) {
  #navbar { padding: 1rem 3%; }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: .76rem; letter-spacing: .03em; }
  .nav-cta { padding: .45rem .9rem; }
  .cards-grid { grid-template-columns: repeat(2,1fr); }
  .transport-grid { grid-template-columns: repeat(3,1fr); }
  .included-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: min(78vw, 300px); background: var(--panel-grad); padding: 5.5rem 1.6rem 2rem; gap: .4rem; box-shadow: -4px 0 30px rgba(0,0,0,.3); z-index: 1000; overflow-y: auto; }
  /* larger, full-width tap targets inside the drawer */
  .nav-links.open li { width: 100%; }
  .nav-links.open a { display: flex; align-items: center; width: 100%; min-height: 44px; padding: .55rem .4rem; }
  .nav-links.open .nav-cta { justify-content: center; margin-top: .6rem; padding: .8rem 1.6rem; }
  .nav-hamburger { display: flex; }
  /* The navbar's backdrop-filter (scrolled / solid states) establishes a
     containing block that would trap the fixed drawer inside the small pill,
     spilling the links down the page. Disable it while the menu is open so the
     drawer anchors to the viewport. transition:none avoids the blur→none tween
     keeping the containing block alive for the transition's duration. */
  body.menu-open #navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
  }
  /* dim backdrop behind the drawer (tap to close, handled in site.js) */
  body.menu-open { overflow: hidden; }
  body.menu-open::before {
    content: ''; position: fixed; inset: 0; z-index: 99;
    background: rgba(6,30,22,.5); backdrop-filter: blur(2px);
  }
  .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .cards-grid { grid-template-columns: repeat(2,1fr); gap: 1.2rem; }
  .transport-grid { grid-template-columns: repeat(2,1fr); }
  .amenities-grid { grid-template-columns: repeat(2,1fr); }
  .cities-grid { grid-template-columns: repeat(2,1fr); }
  .page-hero { height: 38vh; min-height: 260px; }
  .section { padding: 4rem 5%; }
  .split-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .split-grid > div[style*="height"] { height: 320px !important; }
  .included-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .section { padding: 3rem 5%; }
  .form-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .cards-grid { grid-template-columns: 1fr; }
  .transport-grid { grid-template-columns: 1fr; }
  .amenities-grid { grid-template-columns: 1fr; }
  .cities-grid { grid-template-columns: repeat(2,1fr); }
  .page-hero { height: 32vh; min-height: 220px; }
  .page-hero-content p { font-size: 1.1rem; }
  .stats-bar { gap: 1rem; padding: 1.4rem 5%; flex-wrap: wrap; }
  .stat { min-width: 40%; text-align: center; }
  .whatsapp-float { bottom: 1.2rem; right: 1.2rem; width: 50px; height: 50px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
  .brand-text { font-size: 1rem; }
  .brand-text em { display: block; margin-left: 0; font-size: .82rem; }
  .split-grid > div[style*="height"] { height: 240px !important; }
  .hero-actions, .cta-actions { flex-direction: column; align-items: center; }
  .hero-actions a, .cta-actions a { width: min(100%, 300px); }
  .btn-primary, .btn-ghost, .btn-white, .btn-hero-ghost { min-width: 0; }
  #cookie-banner {
    bottom: .5rem; width: calc(100% - 1.2rem);
    padding: .85rem .95rem; border-radius: .9rem; gap: .6rem;
  }
  .cookie-icon svg { width: 18px; height: 18px; }
  .cookie-text h4 { font-size: .82rem; margin-bottom: .12rem; }
  .cookie-text p { font-size: .72rem; line-height: 1.35; }
  .cookie-actions { width: 100%; gap: .5rem; }
  .cookie-btn { flex: 1; padding: .5rem .7rem; font-size: .75rem; }
}