:root{
  --bg: #f7f7f7;
  --surface: #ffffff;
  --ink: #222222;
  --muted: rgba(34,34,34,.65);
  --line: rgba(34,34,34,.12);

  --teal: #0fb7a6;
  --ocean: #2f7de8;
  --coral: #ff6b6b;
  --sand: #f1c27b;

  --shadow: 0 18px 46px rgba(0,0,0,.10);
  --shadow-soft: 0 10px 26px rgba(0,0,0,.08);
  --shadow-hero: 0 12px 18px rgba(0,0,0,.10); /* 12 + 18 = ~30px de “alcance” */

  --radius: 18px;
  --container: 1120px;

  --gutter: 28px;

  /* Topbar height (JS refines this at runtime) */
  --topbar-h: 64px;

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;

}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
  letter-spacing: 0;

  background:
    radial-gradient(900px 520px at 12% -10%, rgba(15,183,166,.14), transparent 55%),
    radial-gradient(820px 520px at 92% 10%, rgba(47,125,232,.12), transparent 55%),
    radial-gradient(780px 520px at 40% 120%, rgba(241,194,123,.22), transparent 55%),
    linear-gradient(180deg, #fbf7f1 0%, #ffffff 35%, #fbf7f1 100%);

  padding-bottom: 88px;
}

a{ color: inherit; text-decoration: none; }
.muted{ color: var(--muted); }
.small{ font-size: .92rem; }

.link{
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(47,125,232,.95);
}
.link:hover{ opacity: .9; }

.link-underline{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.link-underline:hover,
.link-underline:focus-visible{
  text-decoration-thickness: 2px;
}

#experience .muted a{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
#experience .muted a:hover,
#experience .muted a:focus-visible{
  text-decoration-thickness: 2px;
}

.container{
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}


/* Focus accesible */
:focus-visible{
  outline: 3px solid rgba(15,183,166,.38);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Botones */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); opacity: .96; }

.btn--primary{
  color: #062420;
  background: linear-gradient(135deg, var(--teal), var(--ocean));
  box-shadow: 0 14px 34px rgba(47,125,232,.18);
}
.btn--secondary{
  background: rgba(31,58,51,.06);
  border-color: rgba(31,58,51,.14);
  color: var(--ink);
  border: 1px solid rgba(31,58,51,.14);
}
.btn--ghost{
  background: rgba(255,255,255,.72);
  border-color: rgba(31,58,51,.14);
  color: var(--ink);
  border: 1px solid rgba(31,58,51,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.btn--tiny{
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: .95rem;
}

/* Topbar */
.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;

  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);

  transform: translateY(0);
  will-change: transform;
  transition: transform .22s ease, opacity .22s ease;
}

/* Auto-hide (scroll down) */
.topbar.is-hidden{
  transform: translateY(calc(-1 * (var(--topbar-h) + 10px)));
  opacity: 0;
  pointer-events: none;
}


/* Keep topbar visible during programmatic in-page navigation (e.g., menu inteligente jumps)
   Prevents “arrive to section with hidden topbar” vibes. */
body.cm-topbar-lock .topbar{
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Anchor jumps should not land under the fixed topbar */
section[id]{
  scroll-margin-top: calc(var(--topbar-h) + 12px);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .topbar{ transition: none; }
  .hero__slider{ scroll-behavior: auto; }
}
.topbar__inner{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

/* Brand (logo + 2-line text) */
.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto; /* allows text truncation on small screens */
}
.brand__logo{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: block;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.6);
}
.brand__text{
  display: grid;
  line-height: 1.1;
  min-width: 0;
}
.brand__name{
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.06rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__tag{
  margin-top: 2px;
  font-size: .88rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desktop nav stays, mobile uses the icon button */
.nav{ display: none; margin-left: auto; gap: 12px; align-items: center; }
.nav a{
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(31,58,51,.76);
  font-weight: 700;
}
.nav a:hover{ background: rgba(31,58,51,.06); color: var(--ink); }

.topbar__cta{ display: none; }

/* Topbar right button (dev refresh / future menu) */
.topbar__menu{
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: auto;              /* en móvil lo empuja a la derecha */
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, background .18s ease, opacity .18s ease, border-color .18s ease;
}

.topbar__menu:hover{
  background: rgba(31,58,51,.06);
  border-color: rgba(31,58,51,.10);
}

.topbar__menu:active{
  transform: scale(.96);
  opacity: .92;
}

.topbar__menu:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,183,166,.22);
}

.topbar__menu-icon{
  width: 22px;
  height: auto;
  display: block;
}

/* Hero */
.hero{
  position: relative;
  padding: 0 0 30px; /* ⬅️ quita el gap topbar → hero */
  background: #eaeee6; /* rellena los “huequitos” que se ven en las esquinas */
}

.hero__media{
  position: relative;
  overflow: hidden; /* ⬅️ necesario para el slider */
  border-bottom: 1px solid var(--line);

  /* Redondeo inferior como el efecto que ya percibes arriba */
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;

  /* Por si el contenido deja algún pixel raro, que sea del color correcto */
  background: #eaeee6;
}

/* Slider (Hero) — single source of truth */
.hero__slider{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge legacy */
}
.hero__slider::-webkit-scrollbar{ display: none; }

.hero__slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
}
.hero__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ✅ Mobile: square hero (1:1) */
@media (max-width: 860px){
  .hero__slide{
    aspect-ratio: 1 / 1;           /* cuadrado */
    height: min(100vw, 70vh);      /* cuadrado en portrait; evita “hero gigante” en landscape */
  }
}

/* Desktop/tablet: vuelve a 16:9 (estable y “landing vibe”) */
@media (min-width: 861px){
  .hero__slide{
    aspect-ratio: 16 / 9;          /* evita saltos (CLS) */
    min-height: 300px;
    max-height: 70vh;
  }
}

/* Flechas */
.hero__nav{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.hero__arrow{
  pointer-events: auto;
  width: 38px;
  height: 38px;
  margin: 0 10px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(31,58,51,.16);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
  opacity: .78;
}
.hero__arrow:hover{
  background: rgba(255,255,255,.88);
  opacity: .95;
}
.hero__arrow:active{ transform: scale(.96); }
.hero__arrow:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(31,58,51,.22);
}
.hero__arrow svg{
  width: 18px;
  height: 18px;
  stroke: rgba(31,58,51,.92);
  stroke-width: 2.2;
  fill: none;
}

@media (min-width: 880px){
  .hero__arrow{ width: 42px; height: 42px; margin: 0 14px; }
}

/* Overlay */
.hero__shade{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(251,247,241,0) 40%, rgba(251,247,241,.92) 92%);
  pointer-events: none;
}

@media (min-width: 880px){
  .hero__arrow{ width: 42px; height: 42px; margin: 0 14px; }
}

.hero__content{ margin-top: -28px; }
.hero__card{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(31,58,51,.14);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow-hero);
  padding: 18px;
  backdrop-filter: blur(8px);
  text-align: center;
}

/* Centrar elementos internos del hero card */
.hero__card .chips{
  justify-content: center;
}

.hero__card .hero__trust{
  justify-content: center;
}

.hero__card .hero__actions{
  justify-items: center;  /* centra los botones dentro del grid */
}

.hero__card .hero__actions .btn{
  width: 100%;
  max-width: 360px;       /* opcional: evita botones gigantes en desktop */
}

.hero__card .hero__mini{
  justify-items: center;
}

.hero__card .mini{
  width: 100%;
  max-width: 360px;       /* opcional: alinea con los botones */
}

.hero__card .sticky__pill{
  text-align: center;     /* por si alguna vez lo reusas dentro */
}

.kicker{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(31,58,51,.06);
  border: 1px solid rgba(31,58,51,.12);
  color: rgb(15, 47, 2);
  font-weight: 700;
  font-size: .92rem;
  margin: 0 0 12px;
}

.hero h1{
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
  font-size: clamp(2.1rem, 7.2vw, 3.1rem);
  margin: 10px 0 22px; /* ← ajusta aquí: top y bottom */
}


.lead{
  margin: 0 0 14px;
  color: rgba(31,58,51,.82);
  font-size: 1.02rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.lead strong{
  font-weight: 700;
  color: rgba(31,58,51,.92);
}

/* (opcional pero muy “premium” en el hero centrado) */
.hero__card .lead{
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px; /* 14px + 6px extra debajo del lead */
}


/* Hero bullets (clean “why here” line without clutter) */
.hero__bullets{
  list-style: none;
  padding: 0;
  margin: 10px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
  color: rgba(31,58,51,.82);
  font-weight: 750;
}
.hero__bullets li{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.hero__bullets li::before{
  content: "•";
  opacity: .75;
}


.hero__actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}
.hero__trust{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: rgba(31,58,51,.78);
  font-weight: 650;
  margin-top: 12px;
}
.stars{ color: #f0b347; letter-spacing: 1px; }
.dot{ opacity: .55; }

.hero__mini{ margin-top: 14px; display: grid; gap: 10px; }
.mini{
  border-radius: 16px;
  padding: 12px;
  background: rgba(31,58,51,.04);
  border: 1px solid rgba(31,58,51,.10);
}
.mini__k{ font-size: .84rem; color: var(--muted); font-weight: 800; }
.mini__v{ margin-top: 6px; font-weight: 900; color: var(--ink); }

/* Proteger imágenes con botón derecho desactivado */
img{
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* ojo: si hay imágenes con enlaces, esto rompe clicks */
}


/* Placeholders imágenes */
.img{ width: 100%; }
.ph{
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(15,183,166,.16), rgba(47,125,232,.10)),
    radial-gradient(360px 260px at 25% 20%, rgba(241,194,123,.26), transparent 62%),
    radial-gradient(360px 260px at 80% 40%, rgba(255,107,107,.14), transparent 65%);
  border: 1px dashed rgba(31,58,51,.22);
  color: rgba(31,58,51,.78);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
}
.ph p{ margin: 0; font-weight: 700; }
.ph--hero{ border-radius: 0; min-height: 320px; border-left: none; border-right: none; }
.ph--room{ aspect-ratio: 4 / 3; }
.ph--map{ aspect-ratio: 16 / 9; }
.ph--tall{ aspect-ratio: 3 / 4; }

/* Secciones */
.section-head{ margin: 26px 0 14px; }
.section-head h2{
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* H2 titles: single-line fit (JS sets data-h2fit="1" and adjusts font-size only when needed) */
h2[data-h2fit="1"]{
  white-space: nowrap;
}

.section-head p{ margin: 0; }
.section-head--row{ display: grid; gap: 14px; align-items: start; }


/* Left-aligned section with the same readable text width as the HERO */
.value--heroAlign .section-head{
  display: grid;
  gap: 8px; /* antes 10px: reduce espacio entre H2 y el párrafo */
  text-align: left;

  max-width: 52ch;      /* mismo ancho de lectura que el hero */
  margin-left: 0;       /* pegado al borde izquierdo del container */
  margin-right: 0;
}

.value--heroAlign .section-head h2{
  margin: 0 0 4px; /* reduce el margen del H2 */
  /* text-wrap: balance;    bonito para títulos */
}

/* =========================
   Accommodation (premium card)
   Only affects #accommodation
   ========================= */

   /* Bring the accommodation block closer to the hero */
/* Accommodation: sube 20px, pero sin que el verde se vea debajo del bloque superior */
#accommodation{
  position: relative;
  margin-top: 0px;     /* ✅ sube el bloque 28px */
  padding-top: 0px;
  padding-bottom: 10px;
  background: #eaeee6; /* sólido, sin degradado */
  --muted: #111713c1; /* <- cambia este color a tu gusto */

  /* ✅ los primeros 20px son TRANSPARENTES para que NO se vea el color bajo el hero
  background: linear-gradient(
    180deg,
    transparent 0,
    transparent 20px,
    rgba(0, 153, 51, 0.07) 20px,
    rgba(0, 153, 51, 0.02) 100%
  ); */
}

/* ✅ IMPORTANTE: elimina cualquier glow que se “suba” por detrás del hero */
#accommodation::before{ display: none !important; }


#accommodation .container{
  padding-top: 10px; /* un mini respiro interno */
}

#accommodation .section-head{
  max-width: 62ch; /* un pelín más “luxury” que 52ch */
  margin: 13px 0 14px; /* antes heredaba 26px arriba (de .section-head) */
}

#accommodation .accom-card{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(31,58,51,.14);
  border-radius: calc(var(--radius) + 10px);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  position: relative;
}

/* Línea/acento sutil a la izquierda (premium sin gritar) */
#accommodation .accom-card::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(15,183,166,.65), rgba(47,125,232,.45));
  opacity: .45;
}

#accommodation .accom-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(31,58,51,.05);
  border: 1px solid rgba(31,58,51,.10);
  color: rgba(31,58,51,.80);
  font-weight: 800;
  font-size: .92rem;
}

/* Título más “hero-like” pero sin tocar otros h2 */
#accommodation h2{
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

#accommodation .accom-lead{
  margin: 0 0 12px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(31,58,51,.78);
}

/* Chips escaneables */
#accommodation .accom-chips{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

#accommodation .accom-chips li{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(31,58,51,.04);
  border: 1px solid rgba(31,58,51,.10);
  color: rgba(31,58,51,.82);
  font-weight: 800;
  font-size: .92rem;
  white-space: nowrap;
}

/* Mobile: que se sienta “edge-to-edge” como sus cards principales */
@media (max-width: 860px){
  #accommodation .accom-card{
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    border-radius: 22px;
  }
  #accommodation .accom-card::before{ left: 10px; }
}

/* Shared: expandable lists (Accommodation + Services)
   Keep these grouped so future tweaks apply to both sections at once */
#accommodation .accom-list,
#services .accom-list{
  list-style: none;           /* no bullets */
  padding-left: 22px;         /* left inset */
  margin: 10px 0 6px;  /* ⬅️ +6px de espacio inferior */
  color: var(--muted);

  display: grid;
  grid-template-columns: 1fr; /* 1 item per line */
  gap: 6px;
}

#accommodation .accom-list li,
#services .accom-list li{
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Show only first 5 items until expanded */
#accommodation .accom-list:not(.is-expanded) > li:not(.accom-toggle):nth-child(n+6),
#services .accom-list:not(.is-expanded) > li:not(.accom-toggle):nth-child(n+6){
  display: none;
}

/* Inline "➕ Show all" row (replaces the old button) */
#accommodation .accom-list > li.accom-toggle,
#services .accom-list > li.accom-toggle{
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0; /* ahora sí: alinea "Show all" como el texto normal */
}


#accommodation .accom-toggle__emoji,
#services .accom-toggle__emoji{
  opacity: .85;
}

#accommodation .accom-toggle__btn,
#services .accom-toggle__btn{

  padding-left: 0;  /* opcional: lo deja más “pegado” como el resto */
  text-align: left;

  background: transparent;
  border: 0;
  padding: 0;          /* sin padding que desalineé */
  margin: 0 0 0 4px;   /* simula el espacio normal tras el emoji */

  color: var(--muted);
  font: inherit;
  font-weight: inherit;

  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;

  cursor: pointer;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;

  transition: background .18s ease, opacity .18s ease, transform .18s ease;
}

#accommodation .accom-toggle__btn:hover,
#services .accom-toggle__btn:hover{
  background: rgba(34,34,34,.05);
}

#accommodation .accom-toggle__btn:active,
#services .accom-toggle__btn:active{
  transform: scale(.98);
  opacity: .9;
}

#accommodation .accom-toggle__btn:focus-visible,
#services .accom-toggle__btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,183,166,.22);
}


/* Chips */
.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.chip{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(31,58,51,.05);
  border: 1px solid rgba(31,58,51,.12);
  color: rgba(31,58,51,.76);
  font-weight: 800;
  font-size: .92rem;
}

/* Cards de valor */
.value{ padding: 10px 0 8px; }
.value__grid{ display: grid; gap: 12px; margin-top: 12px; }
.vcard{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(31,58,51,.14);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
.vcard__icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(31,58,51,.06);
  border: 1px solid rgba(31,58,51,.10);
  margin-bottom: 10px;
}
.vcard h3{
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.vcard p{ margin: 0; }

/* EXPERIENCE: image tiles 590×295 (2:1) */
#experience .vcard__icon{
  width: 100%;
  height: auto;             /* mata el height:44px del icono emoji */
  aspect-ratio: 2 / 1;      /* ✅ 590×295 = 2:1 */
  border-radius: 18px;
  overflow: hidden;
  display: block;

  background: rgba(31,58,51,.06);
  border: 1px solid rgba(31,58,51,.14);
  margin: 10px 0 12px;      /* ajusta separación alrededor de la imagen */
}

/* Hace que el link ocupe TODO el tile */
#experience .vcard__icon--link{
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer;
}

/* Mantén el focus visible sobre el tile */
#experience .vcard__icon--link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


/* EXPERIENCE: spacing del título sobre la imagen */
#experience .vcard > h3{
  margin-top: 4px;        /* espacio arriba del h3 */
  margin-bottom: 16px;  /* espacio entre h3 y la foto */
  line-height: 1;    /* opcional: más compacto y premium */
}

@supports not (aspect-ratio: 1 / 1){
  #experience .vcard__icon{
    position: relative;
    margin: 0 0 12px;   /* antes: 10px 0 12px */
    margin-top: 0;
  }

  #experience .vcard__icon::before{
    content:"";
    display:block;
    padding-top:100%;
  }
  #experience .vcard__icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;        /* llena el recuadro sin deformar */
    display: block;
  }
}

#experience .vcard__icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vcard__icon--link{
  display: block;
  border-radius: inherit; /* si tu .vcard__icon ya tiene radius */
  text-decoration: none;
  cursor: pointer;
}

.vcard__icon--link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (hover:hover){
  .vcard__icon--link:hover img{
    transform: scale(1.01);
  }
  .vcard__icon--link img{
    transition: transform 180ms ease;
  }
}

@media (prefers-reduced-motion: reduce){
  .vcard__icon--link img{ transition: none; }
}



.gallery{ margin-top: 14px; display: grid; gap: 12px; }

/* Real-photo gallery (replaces placeholders for a more premium “wow”) */
.gallery--photo{
  grid-template-columns: repeat(2, 1fr);
}
.gallery__item{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(31,58,51,.12);
  background: rgba(255,255,255,.72);
  aspect-ratio: 1 / 1;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.gallery__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* “Direct booking” callout */
.value__cta{
  margin-top: 14px;
  display: grid;
  gap: 12px;
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(31,58,51,.14);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.value__cta h3{
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.value__cta p{ margin: 0 0 10px; }
.value__bullets{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  color: rgba(31,58,51,.80);
  font-weight: 700;
}
.value__bullets li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.value__bullets li::before{
  content: "•";
  opacity: .8;
  line-height: 1.2;
}
.value__actions{
  display: grid;
  gap: 10px;
}
.value__actions .btn{ width: 100%; }

/* Segmented */
.segmented{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(31,58,51,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.segmented--tight{ max-width: 520px; width: 100%; }
.segmented__btn{
  border: 1px solid transparent;
  background: transparent;
  padding: 12px 10px;
  border-radius: 12px;
  font-weight: 900;
  color: rgba(31,58,51,.70);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.segmented__btn:hover{ transform: translateY(-1px); }
.segmented__btn.is-active{
  background: rgba(31,58,51,.06);
  border-color: rgba(31,58,51,.14);
  color: var(--ink);
}

/* Rooms */
.rooms{ padding: 12px 0 10px; }
.rooms__grid{ display: grid; gap: 14px; margin-top: 12px; }
.room{
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(31,58,51,.14);
  box-shadow: var(--shadow-soft);
}
.room__body{ padding: 14px 14px 16px; }

.badges{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.badge{
  font-size: .82rem;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,58,51,.14);
  background: rgba(31,58,51,.05);
}
.badge--ocean{ border-color: rgba(47,125,232,.28); background: rgba(47,125,232,.08); }
.badge--garden{ border-color: rgba(15,183,166,.28); background: rgba(15,183,166,.08); }
.badge--hot{ border-color: rgba(255,107,107,.32); background: rgba(255,107,107,.10); }
.badge--value{ border-color: rgba(241,194,123,.40); background: rgba(241,194,123,.18); }

.room h3{ margin: 0 0 6px; font-size: 1.18rem; font-weight: 900; }
.meta{ margin: 0 0 10px; color: var(--muted); font-weight: 650; }

.amen{
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(31,58,51,.78);
  font-weight: 800;
}

.room__foot{ display: grid; gap: 10px; }
.price{ margin: 0; display: flex; align-items: baseline; gap: 8px; }
.room__actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.note{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(31,58,51,.04);
  border: 1px solid rgba(31,58,51,.10);
  color: rgba(31,58,51,.82);
}

/* Rates */
.rates{ padding: 14px 0 10px; }
.rates__panel{
  border-radius: var(--radius);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(31,58,51,.14);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.rates__top{ display: grid; gap: 12px; }
.rates__meta{ display: grid; grid-template-columns: 1fr; gap: 10px; }

.meta-card{
  border-radius: 16px;
  padding: 12px;
  background: rgba(31,58,51,.04);
  border: 1px solid rgba(31,58,51,.10);
}
.meta-card__k{ color: var(--muted); font-weight: 900; font-size: .86rem; }
.meta-card__v{ margin-top: 6px; font-weight: 900; }

.rates__grid{ margin-top: 14px; display: grid; gap: 12px; }
.rate-card{
  border-radius: var(--radius);
  padding: 14px;
  background: rgba(31,58,51,.04);
  border: 1px solid rgba(31,58,51,.10);
}
.rate-card h3{ margin: 0 0 6px; font-weight: 900; }
.rate-card p{ margin: 0; }
.rate{ margin-top: 10px; font-size: 1.05rem; }
.rate-bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(31,58,51,.78);
  font-weight: 650;
}
.rates__fine{ margin: 12px 0 0; }

/* Zone */
.zone{ padding: 14px 0 10px; }

/* Solid backgrounds + tighten top spacing (Host + Location & Directions) */
#area.zone{
  background: #f5f8ef; /* sólido, sin gradientes */
  padding-top: 7px;    /* antes 14px en .zone */
}
/* Match Location & Directions background */
#experience.value{
  background: #f5f8ef;
}
/*
#host.zone{
  background: #f5f5e2;  sólido, sin gradientes 
  padding-top: 7px;     antes 14px en .zone 
}
*/

/* Reduce a la mitad el “aire” antes del H2 (solo en Area + Host) */
#area .section-head,
#host .section-head{
  margin: 13px 0 14px; /* antes 26px 0 14px en .section-head */
}

/* Evita colapso de margen superior del h2 */
#area .section-head h2,
#host .section-head h2{
  margin-top: 0;
}

.zone__grid{ display: grid; gap: 12px; margin-top: 12px; }
.zcard{
  border-radius: var(--radius);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(31,58,51,.14);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.zcard h3{ margin: 0 0 6px; font-weight: 900; }
.zcard p{ margin: 0; }
.map{ margin-top: 14px; }

/* Host (photo) */
.host{ margin-top: 14px; }
.host__caption{
  text-align: center;
  margin: 8px 0 0; /* closer to the photo */
}


.map__media,
.host__media{
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(31,58,51,.12);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.map__media img,
.host__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hostSection h2{ margin: 0 0 0.25rem; }
.hostSection p.muted{ margin: 0; }

/* Más aire entre el texto del host y la foto (solo en la sección host) */
.hostSection .section-head p.muted{
  margin-bottom: 4px;
}

.hostSection p.host__caption{
  margin-top: 6px;
  margin-bottom: 2px;
}


/* Reviews */
.reviews{ padding: 14px 0 10px; }
.reviews__grid{ display: grid; gap: 12px; margin-top: 12px; }
.review{
  border-radius: var(--radius);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(31,58,51,.14);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.review__stars{ color: #f0b347; letter-spacing: 1px; font-weight: 900; }
.review__text{ margin: 10px 0; font-weight: 750; color: rgba(31,58,51,.92); }

/* FAQ */
/* FAQ: hide native summary marker (arrow) */
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::marker{ content: ""; }
.faq summary{
  display: flex;
  align-items: center;
  gap: 10px; /* espacio entre emoji y texto */
}


.faq{ padding: 0; }  /* elimina TODO el espacio arriba y abajo */
.faq__grid{ display: grid; gap: 10px; margin-top: 0px; }
details{
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(31,58,51,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
  padding: 12px;
}

/* FAQ: reduce a la mitad el espacio entre H2 y el párrafo muted */
.faq .section-head h2{
  margin: 0 0 6px; /* antes: margen default (más grande). Ajusta 6px si lo quieres aún más tight */
}


/* FAQ: que el H2 tenga la misma separación superior que CONTACT */
.faq__panel .section-head{
  margin: 12px 0 12px; /* elimina el 26px top de .section-head */
}

.faq__panel .section-head h2{
  margin-top: 0; /* evita que el margen default del h2 “sume” arriba */
}

summary{ cursor: pointer; font-weight: 400; color: #000; }
details p{ margin: 10px 0 0; color: var(--muted); }

/* Contact: más aire entre el texto y los botones */
.contact__main p.muted + .contact__grid--buttons{
  margin-top: 24px; /* prueba 16px si lo quieres más sutil */
}

/* Contact */
.contact{ padding: 0 0 22px; }  /* quita TODO el espacio superior */

/* Quita el gap entre Contact y el footerToggleWrap */
#contact{ padding-bottom: 0; }

/* ==========================================================
   Footer collapsed strip (moved from index.html)
   - Keeps the full footer hidden by default; reveals on demand
   ========================================================== */

.footerToggleWrap{
  border-top: 1px solid var(--line);
  background: rgba(88, 119, 186, 0.035); /* sutil, tipo “off-white” */
  padding: 8px 0 9px; /* mitad del alto */
  text-align: center;

  /* Fallback: si algún móvil ultra estrecho no cabe, que no rompa layout */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Por si acaso: que el strip del toggle no tenga margen arriba */
#footerToggleWrap{ margin-top: -2px; }

.footerToggleRow{
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;              /* menos aire entre piezas */
  flex-wrap: nowrap;     /* clave */
  white-space: nowrap;   /* clave */

  font-size: clamp(12px, 3.1vw, 14px); /* encaja en móvil sin perder estética */
}

/* Footer collapsed row: menos padding lateral que el .container global */
.footerToggleWrap .container.footerToggleRow{
  padding-left: 6px;
  padding-right: 6px;
  max-width: 100%;
}

/* Evitar saltos dentro de cada parte */
.footerCreditGroup,
.footerCreditLabel,
.footerCreditName,
.footerToggle{
  white-space: nowrap;
}

.footerCreditGroup{
  display: inline-flex;
  align-items: center;
  gap: 0; /* evita el “hueco” del flex gap */
  color: var(--muted);
}

.footerCreditLabel{
  font: inherit;
  color: var(--muted);
}

.footerCreditName{
  font: inherit;
  color: var(--muted);
  font-weight: 500;

  /* Subrayado SIEMPRE (también en móvil) */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.8px;

  padding: 4px 6px; /* apretado para que quepa en una sola línea */
  border-radius: 12px;

  transition: background .18s ease, opacity .18s ease, transform .18s ease;
}

.footerCreditName:hover{
  background: rgba(34,34,34,.05);
  opacity: .95;
}

.footerCreditName:active{ transform: scale(.98); opacity: .88; }

.footerCreditName:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,183,166,.22);
}

/* Punto / separador */
.footerDot{
  color: var(--muted);
  opacity: .7;
  margin: 0 -2px; /* reduce espacio a ambos lados */
}

.footerToggle{
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;

  /* Igual que <p class="muted"> */
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);

  cursor: pointer;
  padding: 4px 8px; /* apretado para que quepa en una sola línea */
  border-radius: 12px;

  /* Siempre subrayado */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.8px;

  transition: background .18s ease, opacity .18s ease, transform .18s ease, text-decoration-color .18s ease;
}

.footerToggle:hover{
  background: rgba(34,34,34,.05);
  opacity: .95;
  text-decoration-thickness: 1px;
}

.footerToggle:active{ transform: scale(.98); opacity: .88; }

.footerToggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,183,166,.22);
}

/* FAQ panel (igual que Contact) */
.faq__panel{
  display: grid;
  gap: 14px;
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(31,58,51,.14);
  box-shadow: var(--shadow);
  padding: 24px;
}

/* CONTACT — más padding lateral dentro del panel */
.contact__panel{
  display: grid;
  gap: 14px;
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(31,58,51,.14);
  box-shadow: var(--shadow);
  padding: 14px;
  padding-bottom: 2px; /* pruebe 8–12px */
}
/* CONTACT — solo título + subtítulo con más aire lateral */
.contact__main{
  padding-left: 10px;
  padding-right: 10px;
}

.contact__main h2{
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0px; /* reduce a la mitad el espacio encima del <p class="muted"> */
}
.contact__main p{ margin: 0 0 10px; }
.contact__main p.muted{
  margin-bottom: 0px;
}

.contact__grid{ display: grid; gap: 10px; margin: 12px 0; }

.citem{
  border-radius: 16px;
  background: rgba(31,58,51,.04);
  border: 1px solid rgba(31,58,51,.10);
  padding: 12px;
}
.citem__k{ color: var(--muted); font-weight: 900; font-size: .86rem; }
.citem__v{ margin-top: 6px; font-weight: 900; }

/* Contact buttons (premium, full-tap targets) */
.contact__grid.contact__grid--buttons{
  grid-template-columns: 1fr;
  justify-items: center;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* CONTACT buttons: slightly tighter (sin matar la usabilidad) */
.contactBtn{
  width: 100%;
  text-decoration: none;
  color: inherit;

  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(31,58,51,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding: 12px 14px;

  display: grid;
  gap: 4px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

.contactBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
}

.contactBtn:active{
  transform: translateY(0);
  opacity: .96;
}

.contactBtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,183,166,.22), 0 14px 28px rgba(0,0,0,.08);
}

.contactBtn__top{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.contactBtn__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  opacity: .85;
}

.contactBtn__title{
  font-weight: 900;
  letter-spacing: -0.01em;
}

.contactBtn__desc{
  color: var(--muted);
  font-size: .92rem;
  font-weight: 650;
}

.contactBadge{
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid rgba(34,34,34,.14);
  background: rgba(34,34,34,.04);
}

.contactBadge--recommended{
  border-color: rgba(15,183,166,.22);
  background: rgba(15,183,166,.08);
}

/* WhatsApp: verde suave, premium */
.contactBtn--wa{
  border-color: rgba(37, 211, 102, .28);  /* #25D366 */
  background: rgba(37, 211, 102, .10);
}

.contactBtn--wa:hover{
  background: rgba(37, 211, 102, .14);
  border-color: rgba(37, 211, 102, .34);
}

/* Icono en verde, texto normal (no verde) */
.contactBtn--wa .contactBtn__icon{
  color: rgba(37, 211, 102, .95);
  opacity: .95;
}

/* Focus ring en verde WhatsApp (solo WA) */
.contactBtn--wa:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .22), 0 14px 28px rgba(0,0,0,.08);
}


@media (min-width: 861px){
  .contact__grid.contact__grid--buttons{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contactBtn{
    padding: 16px 16px;
  }
}


/* Footer */
.footer{
  border-top: 0; /* ✅ adiós línea superior */
  background: rgb(255, 255, 255);
  padding: 18px 0 28px;
}

.footer__inner{
  display: grid;
  gap: 12px;
  align-items: center;
}

/* Desktop: marca a la izquierda, links centrados */
@media (min-width: 861px){
  .footer__inner{
    grid-template-columns: 1fr auto 1fr;
  }
  .footer__brand{ justify-self: start; }
  .footer__links{ justify-self: center; }
}

.footer__brand{
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.footer__links{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;  /* centra los links dentro del contenedor */
}

.footer__links a{
  color: rgba(31,58,51,.72);
  font-weight: 800;
}

.footer__links a:hover{ color: var(--ink); }

.FooterCopyright{
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
  font-family: inherit;
  font-weight: inherit;

  margin: 0;      /* ✅ sin espacio arriba del CTA */
  padding: 0;     /* ✅ sin espacio interno arriba */
  border-top: 0;  /* ✅ adiós línea justo encima del texto */
}


/* Link discreto, estilo “muted small” */
.FooterCopyright__link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  opacity: .9;
  transition: opacity .18s ease;
}
.FooterCopyright__link:hover{ opacity: 1; }
.FooterCopyright__link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,183,166,.22);
  border-radius: 8px;
}

/* Si algún día le pones enlace a tu portfolio */
.FooterCopyright a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.FooterCopyright a:hover{ opacity: .9; }

.FooterCopyright__whatsapp:hover{
  opacity: .95;
  text-decoration-color: rgba(18,140,126,.55);
}

/* CTA WhatsApp estilo botón */
.FooterCopyright__whatsapp{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 10px 12px;              /* espacio interno (arriba/abajo) */
  margin: 8px 0;                   /* espacio externo arriba/abajo */
  border-radius: 999px;

  border: 1px solid rgba(18,140,126,.25);
  background: rgba(18,140,126,.10);
  color: #128C7E;
  font-weight: 700;

  text-decoration: none;           /* ✅ elimina subrayado en todo (emoji incluido) */
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}

.FooterCopyright__whatsapp:hover{
  background: rgba(18,140,126,.14);
}

.FooterCopyright__whatsapp:active{
  transform: scale(.98);
  opacity: .96;
}

/* Emoji */
.FooterCopyright__whatsapp::before{
  content: "💬";
  text-decoration: none;           /* extra seguro */
}

/* Sticky bar */
.sticky{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: rgba(255,255,255,.86);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
  padding: 10px 0;
}
.sticky__inner{
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 10px;
  align-items: center;
}
.sticky__pill{
  width: 100%;
  text-align: left;
  border-radius: 16px;
  background: rgba(31,58,51,.04);
  border: 1px solid rgba(31,58,51,.10);
  padding: 10px 12px;
  display: grid;
  gap: 2px;
  cursor: pointer;
}
.sticky__k{ color: var(--muted); font-weight: 900; font-size: .80rem; }
.sticky__v{ font-weight: 900; }
.sticky__cta{ width: 100%; padding: 12px 12px; border-radius: 16px; }

/* Desktop */
@media (min-width: 861px){
  body{ padding-bottom: 0; }
  .nav{ display: flex; }
  .topbar__cta{ display: inline-flex; margin-left: 6px; }
  .topbar__menu{ display: none; }
  .hero__content{ margin-top: -56px; }
  .hero__actions{ grid-template-columns: 1fr 1fr; }
  .hero__mini{ grid-template-columns: repeat(3, 1fr); }


  /* Hero + Why-here refinements (desktop) */
  .gallery--photo{ grid-template-columns: repeat(4, 1fr); }
  .gallery__item{ aspect-ratio: 4 / 3; }

  .value__cta{
    grid-template-columns: 1.4fr .6fr;
    align-items: center;
  }

  .section-head--row{ grid-template-columns: 1.2fr .8fr; align-items: center; }
  .value__grid{ grid-template-columns: repeat(4, 1fr); }
  .gallery{ grid-template-columns: repeat(4, 1fr); }
  .rooms__grid{ grid-template-columns: repeat(2, 1fr); }
  .rates__meta{ grid-template-columns: repeat(3, 1fr); }
  .rates__grid{ grid-template-columns: repeat(2, 1fr); }
  .zone__grid{ grid-template-columns: repeat(3, 1fr); }
  .reviews__grid{ grid-template-columns: repeat(3, 1fr); }
  .faq__grid{ grid-template-columns: repeat(2, 1fr); }
  .contact__panel{ grid-template-columns: 1.2fr .8fr; padding: 18px; }
  .contact__grid{ grid-template-columns: repeat(3, 1fr); }
  .contact__actions{ grid-template-columns: 1fr 1fr 1fr; }
  .footer__inner{ grid-template-columns: 1fr auto 1fr; }
  .sticky{ display: none; }
}

@media (max-width: 860px){
  .hero__card,
  .room,
  .rates__panel,
  .zcard,
  .review,
  details,
  .contact__panel,
  .faq__panel,
  .note{
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    border-radius: 22px;
  }

  /* Map: full-bleed pero con 12px de margen lateral */
  .map__media{
    margin-left: calc(12px - var(--gutter));
    margin-right: calc(12px - var(--gutter));
    width: calc((100% + (var(--gutter) * 2)) - 24px);
    /* opcional: si quieres que también sea 22px en móvil */
    border-radius: 22px;
  }

  .faq details{
    margin-left: 0;
    margin-right: 0;
  }
}


.license-contact{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.license-contact:hover{ opacity: .9; }

.FooterCopyright__cta{
  font-weight: 800;
}

/* Contact side media: square + clickable */
.contact__media{
  display:block;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(31,58,51,.10);
  background: rgba(31,58,51,.04);
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}

.contact__media--square{
  aspect-ratio: 1 / 1;
}

.contact__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.contact__media:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  border-color: rgba(31,58,51,.16);
}

.contact__media:active{
  transform: translateY(0);
  opacity: .96;
}

.contact__media:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(15,183,166,.18), 0 14px 28px rgba(0,0,0,.08);
}