/* Nativa Mountain Suites — site styles */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Fixed nav is ~78px tall. scroll-padding-top offsets every anchor jump
     (native or scrollIntoView) so the target lands flush below the nav. */
  scroll-padding-top: 90px;
}
body { margin: 0; overflow-x: hidden; }
* { box-sizing: border-box; }

/* Sections all carry ~140px of internal top padding for visual breathing.
   That padding is great when scrolling naturally through the page, but when
   the user clicks a nav anchor it parks the section's *box* below the nav —
   leaving the kicker/headline 140px further down (≈ 230px from the top of
   the viewport). That feels wrong: the user expects to land on the content,
   not on empty padding.
   Solution: negative scroll-margin-top pushes the anchor scroll position
   *deeper* into each section by ~110px, so the kicker lands ~50px below
   the nav while the section's natural padding stays intact for normal
   scrolling. #top (the hero) is excluded — it already fills the viewport. */
section[id]:not(#top) {
  scroll-margin-top: -110px;
}

/* ===========================================================================
   Instalaciones — Sustain pillars + Facilities cards
   ---------------------------------------------------------------------------
   Cards always carry a baseline padding + right border. Per-column rules
   below remove the right border on the last-of-row and zero out the left
   padding on the first-of-row, so the strip aligns flush to its grid edge.
   Two layouts: 4-col (≥769px) and 2-col (≤768px).
   =========================================================================== */
.inst-card { /* baseline carries: padding 32 (or 28) + border-right 1px */ }

/* Desktop 4-col: row of 4. Item 1 flush left, item 4 no right border. */
@media (min-width: 769px) {
  .inst-sustain-grid > .inst-card:nth-child(4n+1) { padding-left: 0 !important; }
  .inst-sustain-grid > .inst-card:nth-child(4n)   { border-right: 0 !important; }
  .inst-facilities-grid > .inst-card:nth-child(4n+1) { padding-left: 0 !important; }
  .inst-facilities-grid > .inst-card:nth-child(4n)   { border-right: 0 !important; }
}

/* Mobile 2-col: row of 2. Odd children flush left, even children no right border. */
@media (max-width: 768px) {
  .inst-sustain-grid > .inst-card:nth-child(2n+1) { padding-left: 0 !important; }
  .inst-sustain-grid > .inst-card:nth-child(2n)   { border-right: 0 !important; }
  .inst-facilities-grid > .inst-card:nth-child(2n+1) { padding-left: 0 !important; }
  .inst-facilities-grid > .inst-card:nth-child(2n)   { border-right: 0 !important; }
}

img, video { max-width: 100%; display: block; }

/* Placeholder photography — warm gradients standing in for real imagery */
.ph {
  position: relative;
  overflow: hidden;
  background: #2a1f15;
}
.ph::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08), transparent 50%);
  pointer-events: none;
}
.grain::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.35; mix-blend-mode: overlay;
}

/* Photo placeholders — each evokes a mood */
.ph-volcano {
  background:
    linear-gradient(160deg, #5b3722 0%, #3a2416 40%, #1a0f08 100%),
    radial-gradient(circle at 70% 30%, rgba(184,136,90,0.35), transparent 50%);
}
.ph-volcano::after {
  background:
    linear-gradient(180deg, rgba(220,190,150,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 80%, rgba(250,230,200,0.12), transparent 55%);
}
.ph-araucaria {
  background: linear-gradient(170deg, #253321 0%, #1a2418 45%, #0e1710 100%);
}
.ph-araucaria::after {
  background: radial-gradient(ellipse at 75% 20%, rgba(220,200,160,0.22), transparent 55%);
}
.ph-interior {
  background: linear-gradient(175deg, #8b6a4a 0%, #5a3f28 60%, #2a1b10 100%);
}
.ph-interior::after {
  background: radial-gradient(ellipse at 30% 40%, rgba(255,230,190,0.28), transparent 45%);
}
.ph-rauli { background: linear-gradient(165deg, #4a3a28 0%, #2b2014 50%, #140c06 100%); }
.ph-rauli::after  { background: radial-gradient(ellipse at 80% 30%, rgba(255,210,160,0.2), transparent 55%); }
.ph-nirre { background: linear-gradient(175deg, #564434 0%, #332419 60%, #120a05 100%); }
.ph-nirre::after  { background: radial-gradient(ellipse at 25% 25%, rgba(255,220,180,0.18), transparent 55%); }
.ph-coigue { background: linear-gradient(170deg, #2d3826 0%, #1a2217 50%, #090e07 100%); }
.ph-coigue::after { background: radial-gradient(ellipse at 70% 35%, rgba(210,195,155,0.22), transparent 55%); }
.ph-lenga { background: linear-gradient(170deg, #6a4a30 0%, #3c2716 55%, #1a0e06 100%); }
.ph-lenga::after  { background: radial-gradient(ellipse at 30% 70%, rgba(255,225,175,0.2), transparent 55%); }

/* Reveal — sections fade up as they enter the viewport. Longer duration
   and a more pronounced lift give a more luxurious, editorial feel. The
   ease curve is custom (close to cubic-bezier(0.16, 1, 0.3, 1) — a soft
   spring-out) for the "settle into place" quality of high-end sites. */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity   1100ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
/* Respect users with reduced-motion preference (system accessibility setting).
   For them: no lift, no scroll-smooth, sections appear immediately. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; transform: none; opacity: 1; }
}

/* Links */
.linkish { position: relative; text-decoration: none; }
.linkish::after {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 1px; background: var(--accent);
  transition: right 400ms var(--ease);
}
.linkish:hover::after { right: 0; }

/* Suite cards */
.suite-card .suite-photo {
  transition: transform 700ms var(--ease);
}
.suite-card:hover .suite-photo {
  transform: scale(1.02);
}
.suite-card:hover .suite-card-cta {
  color: var(--accent) !important;
}

/* Buttons */
.btn-ghost:hover { background: rgba(250,250,246,0.08) !important; }
.btn-dark:hover { background: var(--accent) !important; color: #FAFAF6 !important; }

/* Inputs */
input:focus, select:focus { border-color: var(--accent) !important; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Pulse animation for the anchor pin on the MapaZona component */
@keyframes mapaPulse {
  0%   { transform: scale(0.8); opacity: 0.5; }
  70%  { transform: scale(1.9); opacity: 0;   }
  100% { transform: scale(1.9); opacity: 0;   }
}

/* Leaflet tooltip (Nativa map) — editorial card with image
   Important overrides: Leaflet's default padding/background show as a gap
   above the image otherwise. */
.nativa-tooltip.leaflet-tooltip,
.leaflet-tooltip.nativa-tooltip {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: normal !important;
}
.nativa-tooltip.leaflet-tooltip::before,
.nativa-tooltip.leaflet-tooltip::after { display: none !important; }
.poi-card {
  width: 280px;
  background: #FAFAF6;
  border: 1px solid rgba(28,26,23,0.1);
  border-radius: 2px;
  box-shadow: 0 12px 32px rgba(28,26,23,0.25);
  overflow: hidden;
  /* Fade in smoothly on hover */
  animation: poiIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center top;
  will-change: opacity, transform;
}
.nativa-tooltip.poi-leaving .poi-card {
  animation: poiOut 220ms ease both;
}
@keyframes poiIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes poiOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-3px) scale(0.985); }
}
.poi-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #1a1309;
  overflow: hidden;
}
.poi-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.poi-card-body {
  padding: 14px 16px 16px;
}
.poi-card-tag {
  font-size: 9px;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: #B8885A;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.poi-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
  color: #1C1A17;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.poi-card-desc {
  font-size: 13px;
  color: #7A7468;
  line-height: 1.45;
}
.leaflet-container {
  font-family: 'Inter', sans-serif;
}
.leaflet-control-attribution {
  background: rgba(250,250,246,0.85) !important;
  font-size: 10px !important;
  color: #7A7468 !important;
}
.leaflet-control-zoom a {
  background: #FAFAF6 !important;
  color: #1C1A17 !important;
  border-color: rgba(28,26,23,0.12) !important;
}
.leaflet-control-zoom a:hover {
  background: #F0EDE6 !important;
}

/* Gallery lightbox — full-bleed editorial */
.gallery-lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: #0a0604;
  display: block;
  cursor: pointer; /* click outside img/header to close */
  animation: galBackdropIn 320ms ease both;
}
.gallery-lightbox.closing { animation: galBackdropOut 280ms ease both; }

.gallery-lightbox-img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: contain;
  cursor: default;
  animation: galImgIn 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Ambient blurred background — extends image colors to fill side bars */
.gallery-lightbox-bg {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover;
  background-position: center;
  filter: blur(50px) saturate(1.2) brightness(0.55);
  transform: scale(1.15); /* avoid hard blur edges */
  animation: galFadeIn 480ms ease both;
}

/* Top header overlay with gradient */
.gallery-lightbox-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  padding: 28px 40px 80px;
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  pointer-events: none; /* clicks pass through except on children */
  animation: galFadeIn 480ms ease both;
}
.gallery-lightbox-header {
  pointer-events: auto;
  max-width: 720px;
}
.gallery-lightbox-close {
  pointer-events: auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(28,26,23,0.6); border: 1px solid rgba(250,250,246,0.25);
  color: #FAFAF6; cursor: pointer; font-size: 22px; line-height: 1;
  font-family: inherit; backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
  transition: background 200ms ease, transform 200ms ease;
}
.gallery-lightbox-close:hover {
  background: rgba(28,26,23,0.9);
  transform: scale(1.05);
}

/* Side arrows */
.gallery-lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(28,26,23,0.55); border: 1px solid rgba(250,250,246,0.2);
  color: #FAFAF6; cursor: pointer; font-size: 22px; line-height: 1;
  font-family: inherit; backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 200ms ease, transform 200ms ease;
}
.gallery-lightbox-arrow:hover {
  background: rgba(184,136,90,0.85);
  transform: translateY(-50%) scale(1.05);
}
.gallery-lightbox-arrow-left  { left: 24px; }
.gallery-lightbox-arrow-right { right: 24px; }

/* Bottom overlay with caption + thumbnails */
.gallery-lightbox-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 80px 40px 24px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  animation: galFadeIn 480ms ease both;
}
.gallery-lightbox-meta,
.gallery-lightbox-thumbs,
.gallery-lightbox-hints { pointer-events: auto; }

.gallery-lightbox-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; margin-bottom: 18px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.gallery-lightbox-thumbs {
  display: flex; gap: 6px; overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(250,250,246,0.3) transparent;
}
.gallery-lightbox-thumbs::-webkit-scrollbar { height: 4px; }
.gallery-lightbox-thumbs::-webkit-scrollbar-thumb {
  background: rgba(250,250,246,0.3); border-radius: 2px;
}
.gallery-lightbox-thumb {
  flex-shrink: 0; width: 78px; height: 52px;
  border: 2px solid transparent;
  opacity: 0.5;
  cursor: pointer; padding: 0;
  transition: opacity 200ms ease, border-color 200ms ease;
}
.gallery-lightbox-thumb:hover { opacity: 0.85; }
.gallery-lightbox-thumb.active {
  opacity: 1;
  border-color: var(--accent);
}

.gallery-lightbox-hints {
  display: flex; gap: 18px; margin-top: 12px;
  font-size: 9px; color: rgba(250,250,246,0.5);
}

@keyframes galBackdropIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes galBackdropOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes galImgIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes galFadeIn { from { opacity: 0 } to { opacity: 1 } }

/* ===========================================================================
   NAV — mobile drawer (always present in DOM, shown only on mobile)
   =========================================================================== */
.nav-drawer {
  position: fixed; top: 78px; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid rgba(28,26,23,0.08);
  box-shadow: 0 16px 32px rgba(28,26,23,0.10);
  max-height: calc(100vh - 78px);
  overflow-y: auto;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease), transform 320ms var(--ease);
  display: none; /* hidden on desktop */
}
.nav-drawer.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===========================================================================
   RESPONSIVE — Tablet (≤960px)
   =========================================================================== */
@media (max-width: 960px) {
  /* Reduce horizontal padding on sections that have inline horizontal padding.
     We target sections that have `48px` in their inline style (the editorial
     section gutter) — the Hero, which has no horizontal padding, is unaffected. */
  section[style*="48px"] { padding-left: 28px !important; padding-right: 28px !important; }

  /* Stack 3+ column grids to 2 columns on tablet */
  div[style*="repeat(3,"],
  div[style*="repeat(4,"],
  div[style*="repeat(5,"],
  div[style*="repeat(8,"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }
}

/* ===========================================================================
   RESPONSIVE — Mobile (≤768px) — comprehensive layout collapse
   =========================================================================== */
@media (max-width: 768px) {
  /* --- Reduce horizontal padding on sections with inline gutters (Hero
         has no horizontal padding so it stays full-bleed) --- */
  section[style*="48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 64px !important;
    padding-bottom: 56px !important;
  }

  /* --- Hero — the inner container has its own 48px gutter that bypasses
         the section[style] selector above, so collapse it explicitly so
         the kicker "RESERVA DE LA BIÓSFERA · ARAUCANÍA · GEOPARQUE…" can
         wrap inside the viewport instead of overflowing. --- */
  .hero-inner { padding-left: 20px !important; padding-right: 20px !important; }
  .hero-rail  { left: 20px !important; right: 20px !important; }
  .hero-sidelabel { display: none !important; }

  /* --- Hero viewport sizing on mobile ---
         Desktop sets `height: 100vh; min-height: 720px;` which causes two
         problems on phones:
         1. `100vh` includes the browser URL bar — the hero ends up ~80–100px
            taller than the visible screen and the bottom rail / CTA fall
            below the fold on first paint.
         2. `min-height: 720` forces hero to be ≥720px regardless of viewport,
            overflowing iPhone SE / older Androids (~667px tall).
         Fix: use `100svh` (small viewport height — the visible area without
         the URL bar) with `100vh` as fallback for old browsers, and drop the
         min-height. Then pull the inner padding-bottom down a bit so the
         content + bottom rail fit comfortably on short phones. */
  section#top {
    height: 100vh !important;        /* fallback */
    height: 100svh !important;       /* modern: viewport without URL bar */
    min-height: 0 !important;
  }
  .hero-inner { padding-bottom: 88px !important; }
  .hero-rail  { bottom: 24px !important; }
  /* Title: clamp(64px, 9vw, 128px) yields exactly 64px on a 390px screen.
     Two lines of 64px * 0.96 line-height ≈ 123px — combined with kicker,
     description and CTA that's tight on short phones. Drop the floor a
     touch so the whole hero fits even on iPhone SE. */
  section#top h1 { font-size: clamp(52px, 13vw, 64px) !important; }
  .hero-kicker { gap: 10px !important; }
  /* Allow the text span (a flex item) to shrink and wrap.
     Without min-width:0 it stays at its intrinsic content width and
     overflows the section, getting clipped by overflow:hidden. */
  .hero-kicker > span:last-child {
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  footer { padding-left: 20px !important; padding-right: 20px !important; padding-top: 64px !important; }
  footer > div > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-bottom: 40px !important;
  }
  /* Footer contact grid: stack all 4 sections vertically on mobile —
     a 2-col layout makes the columns too narrow for the address text and
     creates an awkward staircase of mismatched heights. */
  footer > div > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 40px !important; padding-bottom: 32px !important;
  }
  /* Tighten the brand block: smaller logo, narrower paragraph */
  footer > div > div:nth-child(2) > div:first-child img { width: 88px !important; }
  footer > div > div:nth-child(2) > div:first-child p { max-width: 100% !important; margin-top: 16px !important; }
  footer h2 { font-size: 44px !important; line-height: 1 !important; }

  /* --- Editorial 2-col image+text pairs → stack vertically (collapse gap) --- */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.2fr"],
  div[style*="grid-template-columns: 1.2fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.4fr"],
  div[style*="grid-template-columns: 1.4fr 1fr"],
  div[style*="grid-template-columns: 1.1fr 1fr"],
  div[style*="grid-template-columns: 1.5fr 1fr"],
  div[style*="grid-template-columns: 1.2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
  }

  /* --- 3-col card grids (CirculoNativa, Suites trailing, Restaurant scale,
         Tours includes, Lugar trip modes) → stack (content-heavy cards) --- */
  div[style*="grid-template-columns: repeat(3,"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* --- 4-col strips (Lugar credentials, Sustentabilidad, Restaurant salones,
         Instalaciones grid) → 2-col --- */
  div[style*="grid-template-columns: repeat(4,"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  /* Sustentabilidad cards: smaller title + tighter spacing on mobile */
  section#sustentabilidad div[style*="grid-template-columns: repeat(4,"] > div > div[style*="font-family"][style*="Cormorant"][style*="font-size: 24"] {
    font-size: 19px !important;
  }
  section#sustentabilidad div[style*="grid-template-columns: repeat(4,"] {
    gap: 24px 16px !important;
  }
  /* Fix inline border-right computed for desktop 4-col layout:
     in mobile 2-col, only LEFT-column items (odd-index) keep their right border;
     RIGHT-column items (even-index) sit at grid edge → kill border-right */
  div[style*="grid-template-columns: repeat(4,"] > div:nth-child(2n) {
    border-right: 0 !important;
  }
  /* Fix inline padding-left computed for desktop col index.
     Pattern: items whose JSX uses `paddingLeft: col===0 ? 0 : N` (Instalaciones)
     leave explicit `padding-left: Npx` in the style attribute. Match ANY item
     that has the `padding-left` longhand inline (excludes items using only
     the `padding` shorthand like Lugar Credentials) and rewrite per-column. */
  div[style*="grid-template-columns: repeat(4,"] > div[style*="padding-left"]:nth-child(2n+1) {
    padding-left: 0 !important;
  }
  div[style*="grid-template-columns: repeat(4,"] > div[style*="padding-left"]:nth-child(2n) {
    padding-left: 20px !important;
  }

  /* --- 5-col features (SpaPreview) → 2 cols --- */
  div[style*="grid-template-columns: repeat(5,"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* --- 8-col map legend → 4 cols horizontal grid (compact, 2 rows) --- */
  div[style*="grid-template-columns: repeat(8,"] {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px 8px !important;
    margin-top: 18px !important;
    padding-top: 16px !important;
  }

  /* --- 9-col awards timeline (Quote) → 3 cols (3×3 grid) --- */
  div[style*="grid-template-columns: repeat(9,"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px 16px !important;
  }
  /* Hide the horizontal connector line in the awards timeline on mobile —
     a 3×3 grid no longer reads as a single timeline */
  div[style*="repeat(9,"] + div, /* sibling fallback won't match — line is above */
  div[style*="paddingTop: 28"] > div[aria-hidden][style*="top: 36"],
  div[aria-hidden][style*="top: 36"][style*="height: 1"] {
    display: none !important;
  }

  /* --- 2-col grids (Politicas FAQ, Tours seasonal) → stack --- */
  div[style*="grid-template-columns: repeat(2,"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* --- 12-col Gallery bento → 2-col uniform tiles --- */
  .gallery-bento {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 150px !important;
    gap: 8px !important;
  }
  /* Force all bento tiles back to span 1×1 — overrides their inline spans */
  .gallery-bento > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .gallery-bento > * img {
    height: 100% !important;
  }
  /* Also catch any other 12-col grids via attribute selector as a fallback */
  div[style*="grid-template-columns: repeat(12,"] {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 150px !important;
    gap: 8px !important;
  }
  div[style*="grid-template-columns: repeat(12,"] > [style*="grid-column"],
  div[style*="grid-template-columns: repeat(12,"] > [style*="span"] {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* --- Preserve `1fr auto` patterns (FAQ rows, etc.) --- */
  div[style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
  }
  /* Booking summary inside drawer stays 2-col compact */
  div[style*="grid-template-columns: 1fr 1fr"][style*="background: var(--bg-card)"],
  div[style*="grid-template-columns: 1fr 1fr"][style*="padding: 20px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 16px !important;
    margin-bottom: 0 !important;
  }

  /* --- Nav: hamburger mode --- */
  .nav-inner { padding: 12px 20px !important; align-items: center !important; }
  .nav-items { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-tagline { display: none !important; }
  .nav-logo > div:first-child { width: 96px !important; height: 40px !important; }
  .nav-burger {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 8px !important;
  }
  .nav-drawer { display: block; top: 64px; max-height: calc(100vh - 64px); }

  /* --- Hero --- */
  section#top { min-height: 600px !important; height: 100svh !important; }
  section#top h1 { font-size: clamp(48px, 12vw, 76px) !important; }
  section#top p { font-size: 16px !important; }
  section#top > div:last-child { padding: 0 20px !important; padding-bottom: 88px !important; }
  section#top > div:last-child > div:last-child { left: 20px !important; right: 20px !important; bottom: 20px !important; font-size: 9px !important; gap: 12px !important; }
  section#top > div[aria-hidden][style*="rotate"] { display: none !important; }
  /* Hero video/poster focal point on mobile — anchored so the hotel building
     (with the dramatic icicles) sits centered in the visible portrait crop,
     with foreground snow ending up under the text overlay and the mountain
     peeking on the right edge. See CAMBIOS_EJECUTADOS.md for rationale. */
  section#top > video,
  section#top > img { object-position: 30% center !important; }

  /* --- Section titles (h2 generic shrink) --- */
  section h2 {
    font-size: clamp(36px, 8.5vw, 52px) !important;
    line-height: 1.04 !important;
    margin-bottom: 0 !important;
  }
  section h3 { font-size: clamp(26px, 6vw, 34px) !important; }

  /* --- Reduce big inline margin-bottoms on hero headers inside sections --- */
  div[style*="margin-bottom: 96px"],
  div[style*="marginBottom: 96"],
  div[style*="margin-bottom: 88px"],
  div[style*="margin-bottom: 80px"],
  div[style*="margin-bottom: 72px"] {
    margin-bottom: 36px !important;
  }

  /* --- Gallery footer "Ver galería completa" should wrap on narrow --- */
  section#galeria > div > div:last-child,
  section#galeria div[style*="border-top: 1px solid var(--line-strong)"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* --- Tighten flex containers used for section dividers / footnotes --- */
  div[style*="justify-content: space-between"][style*="border-top"] {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* --- Map: less extreme aspect ratio on mobile --- */
  .leaflet-container, [class*="leaflet"][style*="aspect-ratio"] {
    aspect-ratio: 4 / 5 !important;
  }
  div[style*="aspect-ratio: 21 / 9"] { aspect-ratio: 4 / 5 !important; }

  /* --- POI tooltip: smaller on mobile --- */
  .poi-card { width: 240px !important; }

  /* --- BookingDrawer / SuiteDrawer: full width on mobile --- */
  aside[style*="min(560px, 100vw)"],
  aside[style*="min(540px, 100vw)"],
  aside[style*="width: min"] {
    width: 100vw !important;
  }
  aside > div[style*="padding: 40px 48px"] {
    padding: 28px 22px 64px !important;
  }
  aside h3 { font-size: 36px !important; }

  /* --- Gallery lightbox tweaks --- */
  .gallery-lightbox-top { padding: 18px 18px 60px !important; }
  .gallery-lightbox-bottom { padding: 60px 18px 18px !important; }
  .gallery-lightbox-arrow { width: 44px !important; height: 44px !important; }
  .gallery-lightbox-arrow-left { left: 10px !important; }
  .gallery-lightbox-arrow-right { right: 10px !important; }
  .gallery-lightbox-thumb { width: 56px !important; height: 38px !important; }
  .gallery-lightbox-header h2,
  .gallery-lightbox-header h3 { font-size: 22px !important; }

  /* --- Footer bottom strip stack --- */
  footer > div > div:last-child {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* --- Final CTA + section paddings reduction --- */
  footer h2 ~ div { align-items: flex-start !important; }

  /* --- Generic horizontal padding on inline-styled containers --- */
  div[style*="padding: 140px 48px"],
  div[style*="padding: 120px 48px"],
  div[style*="padding: 100px 48px"],
  div[style*="padding: 80px 48px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- Avoid huge inline font sizes blowing out viewport --- */
  [style*="font-size: 96px"],
  [style*="font-size: 88px"],
  [style*="font-size: 80px"],
  [style*="font-size: 72px"] {
    font-size: 44px !important;
  }
  [style*="font-size: 64px"],
  [style*="font-size: 56px"],
  [style*="font-size: 52px"] {
    font-size: 36px !important;
  }
  [style*="font-size: 48px"],
  [style*="font-size: 44px"] {
    font-size: 32px !important;
  }

  /* --- Galería page header --- */
  .gallery-lightbox-meta { flex-direction: column !important; gap: 6px !important; align-items: flex-start !important; }

  /* --- Quote / Awards row: stack stat rows --- */
  div[style*="grid-template-columns: 1.2fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* --- Quote (Reconocimientos): compact the giant 4.95 rating and unbork
     the right-side ranking card after the grid stacks --- */
  section#reconocimientos div[style*="font-size: clamp(80px, 10vw, 144px)"] {
    font-size: 64px !important;
    line-height: 0.95 !important;
  }
  section#reconocimientos div[style*="font-size: clamp(28px, 3vw, 44px)"] {
    font-size: 26px !important;
  }
  section#reconocimientos div[style*="font-size: clamp(34px, 3.6vw, 52px)"] {
    font-size: 30px !important;
    line-height: 1.05 !important;
  }
  /* The ranking card was a right-column sibling with left border + paddingLeft —
     after stacking, switch the border to top and kill the indent. */
  section#reconocimientos div[style*="padding-left: 56px"][style*="border-left"] {
    padding-left: 0 !important;
    padding-top: 36px !important;
    border-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    margin-top: 16px !important;
  }
  /* Section kicker margin reduction */
  section#reconocimientos > div > div:first-child[style*="margin-bottom: 80"] {
    margin-bottom: 32px !important;
  }
  /* Quote blockquote — bring down the gigantic display size */
  section#reconocimientos blockquote {
    font-size: 26px !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
  }
  section#reconocimientos blockquote span[style*="font-size: 1.4em"] {
    font-size: 1.8em !important;
  }
  /* Quote inner padding 56px → 32px on mobile */
  section#reconocimientos div[style*="padding: 56px 0"] {
    padding: 32px 0 !important;
    margin-bottom: 40px !important;
  }
}

/* ===========================================================================
   RESPONSIVE — Small phones (≤420px)
   =========================================================================== */
@media (max-width: 420px) {
  section { padding-left: 16px !important; padding-right: 16px !important; }
  footer { padding-left: 16px !important; padding-right: 16px !important; }
  section#top h1 { font-size: 44px !important; }
  section h2 { font-size: 36px !important; }
  section h3 { font-size: 26px !important; }
  .poi-card { width: 220px !important; }
  .gallery-lightbox-top { padding: 14px 14px 50px !important; }
  .gallery-lightbox-bottom { padding: 50px 14px 14px !important; }
  .gallery-lightbox-thumbs { gap: 4px !important; }
}