/* Tipografias de la marca, alojadas en la propia web (assets/fuentes): DM Sans
   para los textos y Oswald (condensada, como el "Demper" del logo) para los
   titulos. Solo el subconjunto latino, que cubre el castellano. Licencia SIL
   Open Font License 1.1 (ver assets/fuentes/LEEME.txt). */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fuentes/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fuentes/dm-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fuentes/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marca Hotel Demper (logo): magenta y grafito. */
  --magenta: #c8287f;
  --magenta-hover: #b0216f;
  --berry: #8e1d5c;
  --magenta-suave: #fbeff5;
  --magenta-borde: #efc8dc;
  --grafito: #646464;
  /* Neutros calidos del frente (revoque, piedra) y el carbon del toldo. */
  --tinta: #221f26;
  --gris: #69646e;
  --linea: #e7dfd6;
  --linea-fuerte: #d6cabd;
  --arena: #f5eee5;
  --arena-clara: #faf6f2;
  --piedra: #b49a82;
  --carbon: #1d1b20;
  --carbon-2: #2a2730;
  /* Canales RGB para usar con alfa: rgb(var(--rgb-acento) / 0.2) */
  --rgb-acento: 200 40 127;
  --rgb-sombra: 29 24 32;
  --rgb-velo: 20 18 23;
  --rgb-linea: 231 223 214;
  --rgb-acento-suave: 251 239 245;
  --rgb-piedra: 180 154 130;
  /* Tipografias (assets/fuentes, @font-face arriba de todo). */
  --fuente-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-titulos: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;

  /* Nombres heredados de la hosteria (el resto de la hoja los usa). */
  --ink: var(--tinta);
  --muted: var(--gris);
  --paper: #ffffff;
  --line: var(--linea);
  --sage-dark: var(--tinta);
  --clay: #8a7663;
  --gold: var(--piedra);
  --cream: #ffffff;
  --soft: var(--arena-clara);
  --wine: #9b1c2e;
  --coffee: var(--carbon);
  --trust: var(--magenta);
  --trust-dark: var(--berry);
  --trust-soft: var(--magenta-suave);
  --sand: var(--arena);
  --shadow: 0 20px 60px rgb(var(--rgb-sombra) / 0.12);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Red de seguridad contra el scroll horizontal (ver "Sin scroll horizontal
     en celular" en el CLAUDE.md). `hidden` queda de respaldo para los
     navegadores sin `clip` (Safari < 16). */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background: #ffffff;
  font-family: var(--fuente-texto);
  font-size: 18px;
  line-height: 1.45;
  width: 100%;
  /* NO overflow-x:hidden aca -- html (arriba) ya lo tiene y es el elemento
     que realmente scrollea (document.scrollingElement). Declararlo tambien
     en body fuerza (por spec) overflow-y:auto en los DOS, y body pasa a
     contar como "contenedor de scroll" aunque nunca sea el que de verdad
     mueve el contenido -- eso rompe position:sticky en cualquier
     descendiente (bug real: el resumen de pago.html no se quedaba pegado al
     hacer scroll). Sacando la redundancia de aca el clip horizontal sigue
     funcionando igual (lo sigue haciendo html) y sticky vuelve a andar.
  */
}

/* `clip` SI va en body, y solo `clip`: recorta lo que se pase de costado
   pero NO convierte a body en contenedor de scroll, asi que sticky sigue
   andando (es justo la diferencia con `hidden`, ver el comentario de arriba).
   Sin soporte de `clip` no se pone nada: un `hidden` de respaldo aca volveria
   a romper el resumen pegado de pago.html. Es la segunda red: el desborde se
   corrige en su origen (seccion "Sin scroll horizontal en celular", al final
   de este archivo). */
@supports (overflow-x: clip) {
  body {
    overflow-x: clip;
  }
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(18px, 4vw, 52px);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(229, 211, 191, 0.9);
  backdrop-filter: blur(14px);
  transition: padding 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.site-header.is-compact {
  padding-block: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 30px rgba(61, 42, 28, 0.08);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 260px;
  color: var(--ink);
  text-decoration: none;
}

.brand-copy,
.brand small {
  display: block;
}

.brand-title {
  display: grid;
  gap: 0;
  color: var(--coffee);
  line-height: 0.95;
}

.site-header.is-compact .brand-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
}

.brand-script {
  font-family: "Palatino Linotype", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: none;
}

.brand-name {
  font-family: "Monotype Corsiva", "Palatino Linotype", Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.brand small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 0.76rem;
  line-height: 1.1;
}

.site-header.is-compact .brand small {
  margin-top: 0;
}

.results-header {
  align-items: center;
}

.results-reservation-lookup {
  flex: 0 0 auto;
  white-space: nowrap;
}

.header-search {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
  gap: 8px;
  width: min(760px, 100%);
  padding: 8px;
  background: var(--soft);
  border: 1px solid rgb(var(--rgb-piedra) / 0.3);
  border-radius: var(--radius);
}

.header-search label {
  gap: 3px;
  font-size: 0.72rem;
}

.header-search .guest-field {
  min-width: 198px;
}

.header-search input,
.header-search select,
.header-search .date-trigger {
  min-height: 42px;
  padding-inline: 10px;
}

.header-search .date-trigger {
  border-radius: 8px;
  font-size: 0.92rem;
}

.header-search .guest-stepper {
  grid-template-columns: 42px minmax(104px, 1fr) 42px;
  min-height: 42px;
  border-radius: 8px;
}

.header-search .guest-stepper button {
  min-height: 42px;
  font-size: 1.08rem;
}

.header-search .guest-stepper strong {
  min-width: 104px;
  padding-inline: 8px;
  font-size: 0.9rem;
  line-height: 1;
  white-space: nowrap;
}

.header-search .primary-button {
  min-height: 42px;
  align-self: end;
}

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav a,
.ghost-button {
  min-height: 44px;
  padding: 10px 14px;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
}

.nav a:hover,
.ghost-button:hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.menu-button {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}

.hero {
  position: relative;
  min-height: 94vh;
  display: grid;
  align-items: end;
  padding: 110px clamp(18px, 4vw, 56px) 86px;
  overflow: visible;
}

.hero-bg,
.hero-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-bg {
  background: url("assets/frente.jpg") center/cover no-repeat;
  transform: scale(1.02);
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(45, 33, 25, 0.78), rgba(87, 61, 42, 0.46) 46%, rgba(87, 61, 42, 0.08)),
    linear-gradient(0deg, rgba(45, 33, 25, 0.55), transparent 45%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  color: white;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--clay);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: #efd1a2;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(3rem, 8vw, 5.9rem);
  line-height: 0.95;
  letter-spacing: 0;
  font-family: "Palatino Linotype", Georgia, serif;
}

h2 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--coffee);
  font-family: "Palatino Linotype", Georgia, serif;
}

.hero-copy {
  max-width: 680px;
  margin: 18px 0 26px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.hero-copy span {
  display: block;
  margin-top: 4px;
  color: #efd1a2;
  font-weight: 700;
}

.booking-card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  width: min(1060px, 100%);
  padding: 16px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(232, 222, 210, 0.92);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

input,
select {
  min-height: 54px;
  width: 100%;
  padding: 0 14px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  width: 100%;
  padding: 0 14px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 800;
  text-align: left;
}

.date-trigger:hover {
  border-color: rgba(181, 76, 47, 0.55);
  background: #fff3e7;
}

.date-picker {
  position: fixed;
  left: 50%;
  top: clamp(112px, 17vh, 180px);
  z-index: 40;
  width: min(780px, calc(100vw - 36px));
  max-height: calc(100vh - 142px);
  padding: 18px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.99);
  border: 1px solid rgba(232, 222, 210, 0.95);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgb(var(--rgb-sombra) / 0.22);
  transform: translateX(-50%);
  overflow-y: auto;
}

.date-picker[data-align="checkout"] {
  left: 50%;
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.calendar-toolbar span {
  flex: 1;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
}

.calendar-months {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.calendar-month {
  min-width: 0;
  padding: 0;
}

/* "noviembre de 2026" -> "Noviembre de 2026". Con text-transform:capitalize
   quedaba "Noviembre De 2026", porque capitaliza TODAS las palabras. */
.calendar-head strong {
  font-size: 1.08rem;
  text-transform: none;
}

.calendar-head strong::first-letter {
  text-transform: uppercase;
}

.calendar-nav {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 900;
}

.calendar-nav:hover {
  color: white;
  background: var(--coffee);
  border-color: var(--coffee);
}

.calendar-nav-text {
  white-space: nowrap;
  font-size: 0.88rem;
}

.calendar-week,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-week span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

.calendar-day {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 3px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-weight: 800;
}

.whatsapp-link,
.whatsapp-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.whatsapp-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.01 3.2c-7.05 0-12.78 5.73-12.78 12.78 0 2.25.59 4.45 1.72 6.39L3.12 29l6.82-1.79a12.7 12.7 0 0 0 6.07 1.55c7.05 0 12.78-5.73 12.78-12.78S23.06 3.2 16.01 3.2Zm0 23.4c-1.94 0-3.84-.53-5.5-1.52l-.39-.23-4.04 1.06 1.08-3.94-.25-.4a10.58 10.58 0 0 1-1.62-5.59c0-5.88 4.79-10.67 10.72-10.67 5.88 0 10.67 4.79 10.67 10.67S21.89 26.6 16.01 26.6Zm5.86-7.97c-.32-.16-1.9-.94-2.19-1.04-.29-.11-.5-.16-.72.16-.21.32-.83 1.04-1.02 1.26-.19.21-.37.24-.69.08-.32-.16-1.36-.5-2.59-1.59-.96-.85-1.61-1.91-1.8-2.23-.19-.32-.02-.5.14-.66.14-.14.32-.37.48-.56.16-.19.21-.32.32-.53.11-.21.05-.4-.03-.56-.08-.16-.72-1.73-.99-2.37-.26-.62-.52-.53-.72-.54h-.61c-.21 0-.56.08-.85.4-.29.32-1.12 1.1-1.12 2.67s1.15 3.09 1.31 3.3c.16.21 2.27 3.46 5.49 4.86.77.33 1.37.53 1.84.68.77.24 1.47.21 2.02.13.62-.09 1.9-.78 2.17-1.53.27-.75.27-1.39.19-1.53-.08-.13-.29-.21-.61-.37Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.01 3.2c-7.05 0-12.78 5.73-12.78 12.78 0 2.25.59 4.45 1.72 6.39L3.12 29l6.82-1.79a12.7 12.7 0 0 0 6.07 1.55c7.05 0 12.78-5.73 12.78-12.78S23.06 3.2 16.01 3.2Zm0 23.4c-1.94 0-3.84-.53-5.5-1.52l-.39-.23-4.04 1.06 1.08-3.94-.25-.4a10.58 10.58 0 0 1-1.62-5.59c0-5.88 4.79-10.67 10.72-10.67 5.88 0 10.67 4.79 10.67 10.67S21.89 26.6 16.01 26.6Zm5.86-7.97c-.32-.16-1.9-.94-2.19-1.04-.29-.11-.5-.16-.72.16-.21.32-.83 1.04-1.02 1.26-.19.21-.37.24-.69.08-.32-.16-1.36-.5-2.59-1.59-.96-.85-1.61-1.91-1.8-2.23-.19-.32-.02-.5.14-.66.14-.14.32-.37.48-.56.16-.19.21-.32.32-.53.11-.21.05-.4-.03-.56-.08-.16-.72-1.73-.99-2.37-.26-.62-.52-.53-.72-.54h-.61c-.21 0-.56.08-.85.4-.29.32-1.12 1.1-1.12 2.67s1.15 3.09 1.31 3.3c.16.21 2.27 3.46 5.49 4.86.77.33 1.37.53 1.84.68.77.24 1.47.21 2.02.13.62-.09 1.9-.78 2.17-1.53.27-.75.27-1.39.19-1.53-.08-.13-.29-.21-.61-.37Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav .whatsapp-link,
.results-whatsapp-link {
  color: #0b5f45;
  border-color: rgba(22, 163, 74, 0.22);
  background: rgba(220, 252, 231, 0.62);
}

.calendar-day small {
  color: var(--sage-dark);
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
}

.calendar-day span {
  line-height: 1;
}

.calendar-day.has-nights {
  gap: 2px;
}

.calendar-day:hover:not(:disabled),
.calendar-day.is-selected {
  color: white;
  background: var(--coffee);
  border-color: var(--coffee);
}

.calendar-day:hover:not(:disabled) small {
  opacity: 1;
  color: white;
}

.calendar-day.has-nights.is-selected small {
  opacity: 1;
  color: white;
}

.calendar-day.has-nights.is-range small {
  opacity: 0;
}

.calendar-day.is-range {
  background: rgb(var(--rgb-piedra) / 0.18);
  border-color: rgb(var(--rgb-piedra) / 0.34);
}

.calendar-day:disabled {
  color: #bdb5ad;
  background: #f3f1ec;
  cursor: not-allowed;
}

.guest-native {
  display: none;
}

.guest-stepper {
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  min-height: 54px;
  overflow: hidden;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.guest-stepper button {
  min-height: 54px;
  color: var(--sage-dark);
  background: #fff3e7;
  border: 0;
  font-size: 1.35rem;
  font-weight: 900;
}

.guest-stepper button:hover {
  background: rgb(var(--rgb-piedra) / 0.18);
}

.guest-stepper strong {
  display: grid;
  place-items: center;
  border-inline: 1px solid var(--line);
  font-size: 1rem;
  text-align: center;
  white-space: nowrap;
}

input:focus,
select:focus,
textarea:focus,
.date-trigger:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(181, 76, 47, 0.38);
  outline-offset: 3px;
}

.primary-button,
.secondary-button {
  min-height: 54px;
  padding: 0 18px;
  border-radius: var(--radius);
  font-weight: 800;
}

.primary-button {
  color: white;
  background: linear-gradient(135deg, var(--coffee), #6b5a4c);
  border: 1px solid var(--coffee);
  box-shadow: 0 10px 22px rgba(79, 54, 37, 0.18);
}

.primary-button:hover {
  background: #3a2f28;
}

.secondary-button {
  color: var(--sage-dark);
  background: white;
  border: 1px solid var(--line);
}

.secondary-button:hover {
  color: white;
  background: var(--coffee);
  border-color: var(--coffee);
}

section {
  padding: 74px clamp(18px, 4vw, 56px);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 28px;
}

.section-heading p {
  color: var(--muted);
}

.availability-panel,
.room-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.room-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 38px rgb(var(--rgb-sombra) / 0.08);
  overflow: visible;
}

.room-card:has(.service-tags span:hover),
.room-card:has(.service-tags span:focus-visible),
.result-card:has(.service-tags span:hover),
.result-card:has(.service-tags span:focus-visible) {
  z-index: 8;
}

.room-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.showcase-room-card {
  gap: 0;
  padding: 0;
  background: white;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.showcase-room-card:hover {
  border-color: rgb(var(--rgb-piedra) / 0.38);
  box-shadow: 0 22px 54px rgba(55, 23, 16, 0.13);
  transform: translateY(-3px);
}

.showcase-room-card .room-photo {
  aspect-ratio: 4 / 3.15;
  border-radius: var(--radius) var(--radius) 0 0;
}

.room-media {
  position: relative;
}

.room-media span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 10px;
  color: white;
  background: rgb(var(--rgb-sombra) / 0.78);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.room-card-body {
  display: grid;
  gap: 10px;
  padding: 16px 16px 12px;
}

.room-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.room-feature-grid span {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 5px 6px;
  color: var(--sage-dark);
  background: var(--soft);
  border: 1px solid rgb(var(--rgb-piedra) / 0.26);
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  word-break: break-word;
}

.room-card-footer {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
  margin-top: auto;
}

.room-card > :not(.room-photo) {
  margin-inline: 6px;
}

.showcase-room-card > :not(.room-photo) {
  margin-inline: 0;
}

.room-card h3 {
  margin: 0;
  font-size: 1.45rem;
}

.room-card p {
  margin: 0;
  color: var(--muted);
}

.room-card .price {
  color: var(--sage-dark);
  font-size: 1.5rem;
  font-weight: 800;
}

.combo-card.is-recommended {
  border-color: rgb(var(--rgb-piedra) / 0.62);
  box-shadow: 0 18px 46px rgba(79, 54, 37, 0.14);
}

.result-card {
  display: grid;
  grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: visible;
  background: white;
  width: 100%;
}

.combo-media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-radius: var(--radius) 0 0 var(--radius);
}

.combo-media > img {
  width: 100%;
  height: 100%;
  min-height: 286px;
  object-fit: cover;
  border-radius: var(--radius) 0 0 var(--radius);
  display: block;
}

.combo-thumbs {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
}

.combo-thumbs img {
  width: 58px;
  height: 44px;
  object-fit: cover;
  border: 2px solid white;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgb(var(--rgb-sombra) / 0.28);
}

.result-card-body {
  display: grid;
  gap: 12px;
  padding: 20px;
  min-width: 0;
}

.result-rate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  margin: 8px -20px -20px;
  padding: 16px 20px;
  background: var(--soft);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) 0;
}

.result-rate-row strong {
  display: block;
  color: var(--ink);
  text-decoration: underline;
}

.result-rate-row span,
.result-price small {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
}

.result-price {
  display: grid;
  text-align: right;
}

.result-price b {
  color: var(--ink);
  font-size: 1.25rem;
}

.recommendation-badge {
  width: fit-content;
  padding: 6px 10px;
  color: white;
  background: var(--coffee);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
}

.service-bundle {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--soft);
  border: 1px solid rgb(var(--rgb-piedra) / 0.24);
  border-radius: var(--radius);
}

.service-bundle strong {
  display: block;
  color: var(--ink);
  font-size: 0.82rem;
}

.service-collapsible {
  padding-bottom: 8px;
}

.service-collapsible > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;
}

.service-collapsible > summary strong {
  display: inline;
  margin: 0;
}

.service-collapsible > summary::-webkit-details-marker {
  display: none;
}

.service-collapsible-caret {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: white;
  background: var(--coffee);
  border-radius: 50%;
  font-size: 0;
  transition: transform 160ms ease;
}

.service-collapsible-caret::before {
  content: "v";
  font-size: 0.85rem;
}

.service-collapsible[open] .service-collapsible-caret {
  transform: rotate(180deg);
}

.service-tags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 6px;
}

.service-collapsible .service-tags {
  margin-top: 2px;
}

.service-tags span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 4px 6px;
  color: var(--sage-dark);
  background: white;
  border: 1px solid rgb(var(--rgb-piedra) / 0.26);
  border-radius: 6px;
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1.15;
  cursor: help;
  text-align: center;
  word-break: break-word;
}

.service-tags span:hover,
.service-tags span:focus-visible {
  z-index: 20;
}

.service-tags span::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 60;
  width: min(280px, 78vw);
  padding: 10px 12px;
  color: white;
  background: var(--tinta);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgb(var(--rgb-sombra) / 0.25);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.service-tags span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  z-index: 61;
  border: 6px solid transparent;
  border-top-color: var(--tinta);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 160ms ease;
}

.service-tags span:hover::after,
.service-tags span:focus-visible::after,
.service-tags span:hover::before,
.service-tags span:focus-visible::before {
  opacity: 1;
}

.service-tags span:hover::after,
.service-tags span:focus-visible::after {
  transform: translate(-50%, 0);
}

.room-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.reservation-flow {
  min-height: 100vh;
  padding-top: 112px;
  background: #ffffff;
}

.results-page-flow {
  padding: 132px clamp(18px, 3.6vw, 70px) 64px;
}

.reservation-flow[hidden] {
  display: none;
}

.results-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.results-heading > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: none;
  min-width: 0;
  width: 100%;
}

.results-heading h1,
.results-heading h2 {
  margin: 0;
  font-size: clamp(1.28rem, 1.7vw, 1.65rem);
  line-height: 1.15;
  white-space: nowrap;
  max-width: none;
}

.results-heading p {
  color: var(--muted);
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.25;
  white-space: normal;
}

.results-heading .eyebrow {
  flex: 0 0 auto;
  font-size: 0.68rem;
  line-height: 1;
}

.results-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.results-summary span,
.results-summary button {
  padding: 10px 12px;
  color: var(--muted);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(var(--rgb-sombra) / 0.06);
  font: inherit;
  text-align: left;
}

.results-summary button {
  cursor: pointer;
}

.results-summary button:hover {
  color: var(--sage-dark);
  border-color: rgb(var(--rgb-piedra) / 0.38);
  background: var(--soft);
}

.results-summary strong {
  color: var(--ink);
}

.results-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  transition: grid-template-columns 220ms ease;
}

.results-layout.has-selection {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
}

.results-list {
  display: grid;
  gap: 18px;
  min-width: 0;
  overflow: visible;
}

.results-list > .availability-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.results-sidebar {
  --results-sidebar-header-clearance: 112px;
  position: fixed;
  top: calc(var(--results-sidebar-header-clearance) + ((100vh - var(--results-sidebar-header-clearance)) / 2));
  right: clamp(18px, 3.6vw, 56px);
  transform: translateY(-50%);
  align-self: start;
  width: min(370px, calc(100vw - 36px));
  max-width: 370px;
  max-height: calc(100vh - var(--results-sidebar-header-clearance) - 32px);
  overflow: visible;
  z-index: 15;
  opacity: 1;
}

.results-sidebar[hidden] {
  display: none;
}

.results-sidebar.is-entering {
  animation: sidebarEnter 220ms ease both;
}

.results-sidebar.is-leaving {
  animation: sidebarLeave 180ms ease both;
  pointer-events: none;
}

@keyframes sidebarEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes sidebarLeave {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.results-sidebar.is-stopped {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  transform: none;
}

.sidebar-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 18px;
  max-height: inherit;
  overflow: hidden;
  padding: 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgb(var(--rgb-sombra) / 0.13);
}

.sidebar-card h2 {
  margin: 0;
  font-size: 1.35rem;
  text-align: center;
}

.sidebar-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink);
}

.sidebar-dates strong {
  width: fit-content;
  padding: 6px 10px;
  background: var(--soft);
  border-radius: 999px;
}

.sidebar-empty {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 190px;
  padding: 20px;
  color: var(--muted);
  background: var(--soft);
  border-radius: var(--radius);
  text-align: center;
}

.sidebar-empty span {
  color: #b9b1aa;
  font-size: 3rem;
}

.sidebar-selected {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding-block: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: auto;
}

.sidebar-selected span {
  color: var(--muted);
}

.selected-room-list {
  display: grid;
  gap: 8px;
}

.selected-room-list > b {
  color: var(--ink);
  font-size: 0.92rem;
}

.selected-room-list ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.selected-room-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.selected-room-list li div {
  display: grid;
  gap: 2px;
}

.selected-room-list li strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.selected-room-list li span {
  color: var(--muted);
  font-size: 0.84rem;
}

.selected-room-list button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #8a1f2d;
  background: #fff5f6;
  border: 1px solid #f0c8ce;
  border-radius: 999px;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
}

.selected-room-list button:hover {
  color: white;
  background: #8a1f2d;
  border-color: #8a1f2d;
}

.booking-details {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 18px;
  padding-top: 44px;
  padding-bottom: 44px;
  background: #ffffff;
  scroll-margin-top: 128px;
}

.booking-details[hidden] {
  display: none;
}

.reservation-success {
  margin-top: 2px;
}

.reservation-success[hidden] {
  display: none;
}

.reservation-confirmation-card {
  display: grid;
  gap: 16px;
}

.reservation-confirmation-card {
  padding: 20px;
  color: var(--ink);
  background: var(--trust-soft);
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
}

.reservation-confirmation-card h3 {
  margin: 0;
  font-size: 1.55rem;
}

.reservation-confirmation-card p,
.reservation-next-steps ol {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.reservation-confirmation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reservation-confirmation-head strong {
  color: var(--trust-dark);
  font-size: 1.15rem;
}

.reservation-status-pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 10px;
  color: var(--trust-dark);
  background: #ffffff;
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  font-weight: 900;
}

.reservation-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  overflow: hidden;
}

.reservation-detail-list div {
  display: grid;
  grid-template-columns: minmax(110px, 0.55fr) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linea-fuerte);
}

.reservation-detail-list div:last-child {
  border-bottom: 0;
}

.reservation-detail-list dt {
  color: var(--muted);
  font-weight: 800;
}

.reservation-detail-list dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-weight: 850;
  text-align: right;
  overflow-wrap: anywhere;
}

/* La cuenta de cada renglon del detalle ("4 personas x 5 noches"), en chico
   debajo del nombre: es lo que permite seguir el total. */
.reservation-detail-list dt .detail-cuenta {
  display: block;
  margin-top: 2px;
  font-size: 0.82em;
  font-weight: 600;
}

.reservation-detail-list code {
  font: inherit;
  color: var(--trust-dark);
}

.reservation-next-steps {
  display: grid;
  gap: 8px;
}

.reservation-next-steps b {
  color: var(--ink);
}

.reservation-next-steps ol {
  padding-left: 20px;
}

.reservation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.reservation-actions .primary-button,
.reservation-actions .secondary-button {
  min-height: 46px;
  justify-content: center;
  text-decoration: none;
}

.reservation-copy-feedback {
  margin: 0;
  color: var(--trust-dark);
  font-weight: 900;
}

.reservation-copy-feedback[hidden] {
  display: none;
}

.confirmation-page {
  min-height: 100vh;
  background: var(--arena-clara);
}

.confirmation-header {
  position: sticky;
}

.confirmation-main {
  padding: 128px 18px 56px;
}

.confirmation-shell {
  display: grid;
  gap: 22px;
  width: min(980px, 100%);
  margin: 0 auto;
}

.confirmation-title {
  display: grid;
  gap: 8px;
}

.confirmation-title h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 0.95;
}

.confirmation-title p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.confirmation-content {
  display: grid;
}

.confirmation-detail-card {
  gap: 22px;
  padding: clamp(18px, 4vw, 34px);
}

.confirmation-highlight {
  display: grid;
  gap: 8px;
}

.confirmation-highlight h2,
.confirmation-block h3 {
  margin: 0;
  color: var(--ink);
}

.confirmation-highlight h2 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.payment-page {
  min-height: 100vh;
  background: var(--arena-clara);
}

.payment-main {
  padding: 40px 18px 56px;
}

.payment-shell {
  display: grid;
  gap: 22px;
  width: min(1120px, 100%);
  margin: 0 auto;
  /* Pisa el padding generico de "section" (74px, pensado para las secciones
     de la portada) -- .payment-main ya da el aire de arriba/costados que
     hace falta ac. Sin esto se sumaban los dos y quedaba un hueco enorme
     (128px + 74px = 202px) entre el header y el titulo. */
  padding: 0;
}

.payment-title {
  display: grid;
  gap: 8px;
}

.payment-title h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.1;
}

.payment-title p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.payment-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  /* SIN align-items:start aca -- stretch (el default) es lo que necesita el
     sticky de abajo: la columna del resumen tiene que ser tan alta como la
     de metodos de pago para que el sticky tenga recorrido mientras se
     scrollea. El alineado "arriba" del resumen se hace en .payment-summary
     (el grid de adentro), no en este. */
}

.payment-summary {
  display: grid;
  /* Este si va con start: el CONTENEDOR queda alto (stretch del grid de
     arriba), pero la TARJETA adentro se ubica arriba y sticky la mantiene
     ahi mientras haya alto de sobra para recorrer -- si el align-items:start
     se pone en .payment-layout en vez de aca, el contenedor se achica al
     alto del contenido y el sticky no tiene donde moverse. */
  align-items: start;
}

.payment-summary-card {
  display: grid;
  gap: 16px;
  /* 87px es la altura real del header sticky de esta pagina + un respiro. */
  position: sticky;
  top: 104px;
  /* NO max-height/overflow-y aca -- pedido explicito: el resumen no tiene
     que generar un scroll propio adentro de la tarjeta, tiene que crecer
     normal y ser la pagina la que scrollea (el resumen suele ser mas alto
     que las 3 tarjetas de metodo de pago, asi que es el que le da "recorrido"
     al sticky de .payment-methods -- ver el comentario ahi abajo). Si el
     resumen fuera alguna vez el elemento MAS CORTO de los dos, sticky lo
     mantiene arriba igual, sin necesitar tope de alto. */
}

/* Sin esto, "Resumen de reserva" hereda el h2 generico de portada (pensado
   para titulos de seccion enormes) y renderiza a mas de 50px, partiendose en
   dos lineas dentro de la tarjeta - se ve roto y ademas infla la altura de la
   columna sin necesidad. */
.payment-summary-card h2 {
  margin: 0;
  font-size: 1.3rem;
}

.payment-deposit-banner {
  padding: 14px 16px;
  background: #fff3e7;
  border: 1px solid #e3d4c0;
  border-radius: 8px;
  color: #6f1d1b;
}

.payment-deposit-banner strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.02rem;
}

.payment-deposit-banner p {
  margin: 0;
  color: inherit;
  line-height: 1.5;
}

.payment-email-note {
  margin: 0;
  padding: 10px 12px;
  background: var(--trust-soft);
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

.payment-methods {
  display: grid;
  gap: 10px;
  /* Sticky a la misma altura que .payment-summary-card, para que las 3
     tarjetas de metodo de pago se queden a la vista mientras se scrollea el
     resumen (que en la practica suele ser mas alto que estas 3 tarjetas --
     ver .payment-method-card mas abajo, achicado para que entren juntas en
     una pantalla tipica). El resumen (sin max-height, ver arriba) es el que
     le da "recorrido" al sticky de aca: crece mas alla de la pantalla y
     mientras se lo scrollea, esta columna se mantiene fija. */
  position: sticky;
  top: 104px;
  /* .payment-methods es un <section>: sin esto hereda el padding generico de
     "section" (74px, pensado para las secciones de la portada) y su primera
     tarjeta queda mas abajo que el resumen en vez de alinearse con el. */
  padding: 0;
  /* .payment-layout (el grid de las 2 columnas) estira esta columna para que
     sea tan alta como el resumen -- sin esto, cada tarjeta se estiraba
     dentro de su propia fila y ademas el espacio de sobra se repartia ENTRE
     las 3 tarjetas en vez de juntarse al final. Mismo motivo que en
     .payment-method-card, un nivel mas arriba. */
  align-items: start;
  align-content: start;
  /* Red de seguridad, no el mecanismo principal: en el uso normal el resumen
     es mas alto que estas 3 tarjetas, asi que esto nunca llega a activarse
     (sticky ya las mantiene fijas y visibles enteras). Si alguna vez esta
     columna terminara siendo la mas alta de las dos (ventana muy baja, o
     "Ver datos de transferencia" desplegado empuja mucho), esto evita que
     sticky se suelte antes de tiempo -- a diferencia del resumen, un scroll
     chico ADENTRO de esta columna puntual es aceptable, nunca desaparece. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.payment-method-card {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgb(var(--rgb-sombra) / 0.06);
  /* Los dos hacen falta, resuelven cosas distintas: align-items evita que
     CADA hijo se estire dentro de su propia fila (el boton llegaba a 72px
     en vez de 42). align-content evita que el conjunto de filas se separe
     entre si cuando esta tarjeta queda mas alta de lo que necesita su
     contenido (por el stretch de .payment-methods, mas abajo) -- sin esto
     el espacio de sobra se repartia ENTRE cabecera/toggle/boton (huecos de
     40-50px en vez de los 10px de gap declarados), no se juntaba al final. */
  align-items: start;
  align-content: start;
}

/* Botones un poco mas bajos que el default del sitio (54px) para que las 3
   tarjetas achicadas entren juntas en una pantalla comun sin scroll propio. */
.payment-method-card .primary-button,
.payment-method-card .secondary-button {
  min-height: 42px;
  padding: 0 16px;
  font-size: 0.92rem;
}

/* Icono al lado del titulo (no arriba) para que las 3 tarjetas queden mas
   compactas y el total del bloque de metodos de pago se acerque al alto del
   resumen de la izquierda - antes cada tarjeta gastaba una fila entera solo
   para el icono. */
.payment-method-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.payment-method-head > div {
  display: grid;
  gap: 2px;
}

.payment-method-card h2 {
  margin: 0;
  font-size: 0.98rem;
  color: var(--ink);
}

.payment-method-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.payment-method-icon {
  display: inline-grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--trust-dark);
  background: var(--trust-soft);
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
}

/* Icono real por metodo (antes decia "TC"/"TR"/"WA" en texto). Mismo truco
   que .whatsapp-icon: un SVG en mascara sobre currentColor, asi el color
   sale solo del contenedor y no hay que duplicar la imagen por tema. */
.payment-method-icon-glyph {
  display: inline-block;
  width: 17px;
  height: 17px;
  background: currentColor;
}

.icon-card {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3Cline x1='6' y1='15' x2='10' y2='15'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3Cline x1='6' y1='15' x2='10' y2='15'/%3E%3C/svg%3E") center / contain no-repeat;
}

.icon-bank {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10l9-6 9 6'/%3E%3Cline x1='4' y1='10' x2='20' y2='10'/%3E%3Cline x1='5' y1='10' x2='5' y2='19'/%3E%3Cline x1='9' y1='10' x2='9' y2='19'/%3E%3Cline x1='15' y1='10' x2='15' y2='19'/%3E%3Cline x1='19' y1='10' x2='19' y2='19'/%3E%3Cline x1='3' y1='19' x2='21' y2='19'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10l9-6 9 6'/%3E%3Cline x1='4' y1='10' x2='20' y2='10'/%3E%3Cline x1='5' y1='10' x2='5' y2='19'/%3E%3Cline x1='9' y1='10' x2='9' y2='19'/%3E%3Cline x1='15' y1='10' x2='15' y2='19'/%3E%3Cline x1='19' y1='10' x2='19' y2='19'/%3E%3Cline x1='3' y1='19' x2='21' y2='19'/%3E%3C/svg%3E") center / contain no-repeat;
}

.payment-method-card.is-reception {
  border-color: var(--linea-fuerte);
  background: linear-gradient(180deg, #ffffff 0%, var(--magenta-suave) 100%);
}

/* Mismo verde que ya usa WhatsApp en el resto del sitio (.nav .whatsapp-link),
   para que el icono se reconozca de un vistazo como WhatsApp y no como un
   tercer icono teal identico a los otros dos. */
.payment-method-card.is-reception .payment-method-icon {
  color: #0b5f45;
  background: #dcfce7;
  border-color: rgba(22, 163, 74, 0.22);
}

.payment-method-note {
  font-weight: 800;
}

/* Eleccion de cuanto pagar (seña o estadia completa): toggle de 2 segmentos,
   no una lista de radios. El <input type=radio> real sigue ahi (accesible,
   navegable por teclado) pero oculto -- "input, select { width:100%;
   min-height:54px }" (pensado para los campos de texto del formulario) lo
   estiraba a 234x54px sin querer, un circulo gigante y deforme. */
.payment-amount-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.payment-amount-choice legend {
  grid-column: 1 / -1;
  padding: 0;
  margin-bottom: 2px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted);
}

.payment-amount-choice label {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 7px 6px;
  text-align: center;
  background: var(--arena-clara);
  border: 1px solid rgb(var(--rgb-linea) / 0.95);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.payment-amount-choice label:has(input:checked) {
  border-color: var(--trust);
  background: var(--trust-soft);
}

.payment-amount-choice label:has(input:focus-visible) {
  outline: 3px solid rgb(var(--rgb-acento) / 0.22);
  outline-offset: 2px;
}

.payment-amount-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  /* min-height:54px de la regla generica de "input" actua como piso y ganaba
     aunque height ya estuviera en 1px -- min-height siempre le gana a
     height, sin importar especificidad. Hay que resetear los dos. */
  min-width: 1px;
  min-height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.payment-amount-choice label span {
  font-weight: 800;
  font-size: 0.94rem;
  color: var(--ink);
}

.payment-amount-choice label:has(input:checked) span {
  color: var(--trust-dark);
}

.payment-amount-choice small {
  display: block;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.74rem;
}

.transfer-details {
  display: grid;
  gap: 12px;
}

.transfer-details[hidden] {
  display: none;
}

.payment-status {
  padding: 14px 16px;
  border-radius: 8px;
  font-weight: 800;
  line-height: 1.45;
}

.payment-status a {
  color: inherit;
  text-decoration: underline;
}

.payment-status.is-info {
  color: var(--ink);
  background: var(--magenta-suave);
  border: 1px solid var(--linea-fuerte);
}

.payment-status.is-success {
  color: var(--trust-dark);
  background: var(--trust-soft);
  border: 1px solid var(--linea-fuerte);
}

.payment-status.is-warning {
  color: #6f1d1b;
  background: #fff3e7;
  border: 1px solid #e3d4c0;
}

.confirmation-block {
  display: grid;
  gap: 12px;
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(var(--rgb-sombra) / 0.58);
  backdrop-filter: blur(3px);
}

body.modal-open {
  overflow: hidden;
}

.confirm-overlay[hidden] {
  display: none;
}

.confirm-modal {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 16px;
  width: min(560px, 100%);
  padding: 28px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid rgb(var(--rgb-linea) / 0.95);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgb(var(--rgb-sombra) / 0.24);
}

.confirm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 800;
}

.confirm-close:hover {
  color: var(--ink);
  background: var(--soft);
  border-color: var(--line);
}

.confirm-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--trust-dark);
  background: var(--trust-soft);
  border: 1px solid rgb(var(--rgb-acento) / 0.16);
  border-radius: 50%;
  font-weight: 900;
}

.confirm-copy {
  display: grid;
  gap: 8px;
  padding-right: 26px;
}

.confirm-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  line-height: 1.1;
}

.confirm-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
}

.danger-button {
  background: var(--magenta);
  border-color: var(--magenta);
}

.danger-button:hover {
  background: var(--berry);
  border-color: var(--berry);
}

.booking-summary,
.reservation-form {
  display: grid;
  gap: 10px;
}

/* Sin esto, [hidden] no alcanza a ocultar el form: la especificidad de
   .reservation-form{display:grid} empata con la regla [hidden] del navegador
   y gana por venir despues en el CSS -- quedaba visible aunque hidden=true,
   apilado debajo de .extras-before en vez de reemplazarlo (bug real
   reportado). Mismo patron ya usado en .booking-details[hidden] y compania,
   mas abajo en este archivo -- solo faltaba en este selector nuevo. */
.reservation-form[hidden] {
  display: none;
}

.reservation-form-heading {
  display: grid;
  gap: 2px;
}

.reservation-form-heading h2 {
  margin-bottom: 2px;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
}

.reservation-form-heading .eyebrow,
.booking-summary .eyebrow {
  margin-bottom: 0;
}

.selected-stay article {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgb(var(--rgb-sombra) / 0.08);
}

.selected-stay strong {
  font-size: 1.2rem;
}

.selected-stay span,
.selected-stay small {
  color: var(--muted);
}

.stay-meta {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  background: #fff6ec;
  border: 1px solid rgb(var(--rgb-piedra) / 0.24);
  border-radius: 8px;
}

.stay-meta span {
  line-height: 1.25;
}

.stay-meta b {
  color: var(--ink);
  font-size: 0.98rem;
}

.price-breakdown {
  display: grid;
  gap: 3px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgb(var(--rgb-piedra) / 0.24);
}

.price-breakdown span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.price-breakdown em {
  font-style: normal;
}

.price-breakdown strong {
  font-size: 0.94rem;
  color: var(--ink);
}

.price-breakdown span:last-child {
  color: var(--ink);
  font-weight: 900;
}

.summary-block {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.summary-block b {
  color: var(--ink);
  font-size: 0.92rem;
}

.summary-block ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.summary-collapsible,
.booking-summary .service-collapsible {
  padding-bottom: 0;
}

.summary-collapsible > summary,
.booking-summary .service-collapsible > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;
}

.summary-collapsible > summary::-webkit-details-marker,
.booking-summary .service-collapsible > summary::-webkit-details-marker {
  display: none;
}

.summary-collapsible[open] .service-collapsible-caret,
.booking-summary .service-collapsible[open] .service-collapsible-caret {
  transform: rotate(180deg);
}

.summary-collapsible .summary-includes,
.booking-summary .service-collapsible .service-tags {
  margin-top: 8px;
}

.summary-includes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.summary-includes li {
  position: relative;
  min-height: 42px;
  padding: 7px 9px 7px 32px;
  color: var(--ink);
  background: #fff6ec;
  border: 1px solid rgb(var(--rgb-piedra) / 0.24);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
}

.summary-includes li::before {
  content: "✓";
  position: absolute;
  left: 10px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: white;
  background: var(--coffee);
  border-radius: 50%;
  font-size: 0.68rem;
  transform: translateY(-50%);
}

.reservation-form {
  padding: 16px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgb(var(--rgb-sombra) / 0.08);
}

/* "Completa tus datos" queda a la vista mientras se baja por el resumen de
   la izquierda (pedido de Juan, 07/10): con "Incluye" abierto el resumen es
   mas alto que el formulario, y al bajar a leerlo el titulo y los pasos se
   iban por arriba. Solo con las dos columnas (arriba de 920px; debajo
   .booking-details se apila y el formulario va despues del resumen). El
   tope es el alto REAL de la cabecera fija, que lo mide medirCabecera() en
   resultados.js. Si el formulario no entra en la pantalla scrollea adentro:
   pegado y mas alto que la ventana, "Enviar solicitud" quedaria fuera de
   alcance hasta llegar al final del resumen. */
@media (min-width: 921px) {
  .booking-details .reservation-form {
    position: sticky;
    top: calc(var(--alto-cabecera, 96px) + 16px);
    max-height: calc(100vh - var(--alto-cabecera, 96px) - 32px);
    overflow-y: auto;
  }
}

.reservation-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.reservation-progress span {
  display: grid;
  place-items: center;
  min-height: 34px;
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
}

.reservation-progress span.is-active,
.reservation-progress span.is-complete {
  color: white;
  background: var(--coffee);
  border-color: var(--coffee);
}

.reservation-step {
  display: grid;
  gap: 14px;
  min-height: 214px;
  margin: 0;
  padding: 0;
  border: 0;
}

.reservation-step[hidden] {
  display: none;
}

.reservation-step legend {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 900;
}

.extras-summary {
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  background: #fff6ec;
  border: 1px solid rgb(var(--rgb-piedra) / 0.24);
  border-radius: 8px;
}

.extras-summary b {
  font-size: 0.9rem;
}

.extras-summary ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.extras-summary li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

.extras-summary strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.reservation-actions {
  justify-content: space-between;
}

.reservation-actions .primary-button,
.reservation-actions .secondary-button {
  min-width: 150px;
}

textarea {
  width: 100%;
  padding: 10px 14px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
}

.success-note {
  margin: 8px 0 0;
  padding: 10px 12px;
  color: var(--sage-dark);
  background: rgb(var(--rgb-piedra) / 0.16);
  border: 1px solid rgb(var(--rgb-piedra) / 0.3);
  border-radius: var(--radius);
  font-weight: 800;
}

.full-band {
  background: #ffffff;
}

.room-showcase-heading {
  max-width: 880px;
  margin-top: -24px;
  margin-bottom: 22px;
}

.room-showcase-heading h2 {
  margin-bottom: 12px;
}

.room-showcase-heading p {
  max-width: 720px;
  font-size: 1.04rem;
}

.gallery-section {
  background:
    linear-gradient(180deg, #ffffff 0%, rgb(var(--rgb-acento-suave) / 0.56) 100%);
}

.gallery-section .section-heading {
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: 36px;
  text-align: center;
}

.gallery-section .section-heading h2 {
  margin: 0 0 12px;
  font-size: clamp(2.1rem, 4vw, 3.8rem);
  line-height: 1.02;
}

.gallery-section .section-heading p:last-child {
  max-width: 720px;
  margin-inline: auto;
  font-size: 1.06rem;
  line-height: 1.6;
}

.gallery-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: clamp(48px, 6vw, 78px);
  color: #fff;
  background: linear-gradient(135deg, var(--trust-dark), var(--trust));
}

.gallery-cta > div {
  max-width: 720px;
}

.gallery-cta h2 {
  margin: 8px 0 12px;
  color: #fff;
  font-size: clamp(1.65rem, 3.2vw, 3.15rem);
  line-height: 1.05;
}

.gallery-cta-title-line {
  display: block;
  white-space: nowrap;
}

.gallery-cta p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.65;
}

.gallery-cta .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.gallery-cta-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--trust-dark);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.gallery-cta-button:hover {
  color: #fff;
  background: transparent;
}

/* Mas especifico que .primary-button (que viene despues y lo pisaria):
   el boton del cierre va blanco sobre la franja de color. */
.gallery-cta .gallery-cta-button {
  color: var(--trust-dark);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.gallery-cta .gallery-cta-button:hover {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.8);
}

.site-footer {
  color: rgba(255, 255, 255, 0.8);
  background: var(--carbon);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.1fr 0.65fr 0.9fr 1.35fr;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(54px, 7vw, 92px) clamp(18px, 4vw, 56px);
}

.footer-main h2,
.footer-main p {
  margin-top: 0;
}

.footer-main h2 {
  margin-bottom: 18px;
  color: #fff;
  font-size: 1.05rem;
}

.footer-main p {
  line-height: 1.65;
}

.footer-brand-title {
  display: grid;
  width: fit-content;
  margin-bottom: 18px;
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  text-transform: uppercase;
}

.footer-brand-title span {
  color: #cfc8d3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 500;
  text-transform: none;
}

.footer-brand p {
  max-width: 310px;
}

.footer-socials,
.footer-links,
.footer-contact {
  display: grid;
  align-content: start;
  gap: 11px;
}

.site-footer a {
  width: fit-content;
  color: #cfc8d3;
  font-weight: 700;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer .footer-whatsapp {
  min-height: 38px;
  align-items: center;
  padding: 0 12px;
  color: #dcfce7;
  background: rgba(22, 163, 74, 0.18);
  border: 1px solid rgba(187, 247, 208, 0.28);
  border-radius: 8px;
}

.site-footer .footer-whatsapp:hover {
  color: #ffffff;
  background: rgba(22, 163, 74, 0.28);
}

.footer-newsletter {
  padding: 24px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.footer-newsletter .eyebrow {
  margin-bottom: 8px;
  color: #cfc8d3;
}

.footer-newsletter h2 {
  margin-bottom: 10px;
  font-size: 1.55rem;
}

.newsletter-form {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.newsletter-form label {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}

.newsletter-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.newsletter-form input,
.newsletter-form button {
  min-height: 48px;
  border-radius: 6px;
}

.newsletter-form input {
  min-width: 0;
  padding: 0 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #fff;
}

.newsletter-form button {
  padding: 0 16px;
  color: var(--carbon);
  background: #cfc8d3;
  border: 1px solid #cfc8d3;
  font-weight: 900;
}

.newsletter-form button:hover {
  color: #fff;
  background: transparent;
}

.newsletter-status {
  min-height: 1.4em;
  margin: 0;
  color: #ece6ee;
  font-size: 0.88rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px clamp(18px, 4vw, 56px);
  color: rgba(255, 255, 255, 0.58);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.84rem;
}

.chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 18px 0 14px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-weight: 800;
}

.chat-launcher:hover {
  border-color: rgb(var(--rgb-piedra) / 0.46);
  transform: translateY(-1px);
}

.chat-launcher-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--coffee);
}

.chat-launcher-icon::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  width: 16px;
  height: 11px;
  border: 2px solid white;
  border-radius: 8px;
}

.chat-launcher-icon::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 20px;
  width: 7px;
  height: 7px;
  background: white;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.chat-launcher-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #9b2f20;
  box-shadow: 0 0 0 2px var(--cream);
  animation: chatLauncherPulse 1.6s ease-in-out infinite;
}

.chat-launcher-badge[hidden] {
  display: none;
}

@keyframes chatLauncherPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(155, 47, 32, 0.55), 0 0 0 2px var(--cream);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(155, 47, 32, 0), 0 0 0 2px var(--cream);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(155, 47, 32, 0), 0 0 0 2px var(--cream);
  }
}

.chat {
  position: fixed;
  right: 24px;
  bottom: 100px;
  z-index: 31;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(410px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 132px));
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

@media (min-width: 921px) {
  .results-page .chat-launcher {
    right: auto;
    left: 24px;
  }

  .results-page .chat {
    right: auto;
    left: 24px;
  }

  .results-page.reservation-form-open .chat-launcher {
    right: 24px;
    left: auto;
  }

  .results-page.reservation-form-open .chat {
    right: 24px;
    left: auto;
  }
}

.chat[hidden] {
  display: none;
}

.chat header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  color: white;
  background: linear-gradient(135deg, var(--coffee), #6b5a4c);
}

.chat header span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
}

.chat header button,
.modal-close {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
}

.message {
  max-width: 88%;
  padding: 12px;
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--soft);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.message.user {
  align-self: flex-end;
  color: white;
  background: var(--coffee);
}

.message.waiting {
  font-style: italic;
  opacity: 0.85;
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.chat-form button {
  padding: 0 14px;
  color: white;
  background: var(--coffee);
  border: 0;
  border-radius: var(--radius);
  font-weight: 800;
}

.modal {
  width: min(720px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.modal::backdrop {
  background: rgb(var(--rgb-sombra) / 0.5);
}

.modal-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 26px;
  background: white;
}

.modal-card.wide {
  width: min(850px, calc(100vw - 28px));
}

.reservation-lookup-modal {
  width: min(620px, calc(100vw - 28px));
}

.reservation-lookup-modal h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.reservation-lookup-form {
  display: grid;
  gap: 8px;
}

.reservation-lookup-form label {
  color: var(--ink);
  font-weight: 800;
}

.reservation-lookup-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.reservation-lookup-form input {
  min-width: 0;
  min-height: 54px;
  padding: 0 14px;
  text-transform: uppercase;
}

.reservation-lookup-result:empty {
  display: none;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--ink);
  border-color: var(--line);
}

.muted {
  color: var(--muted);
}

.compact {
  min-height: 44px;
  white-space: nowrap;
}

.form-error {
  min-height: 22px;
  margin: 0;
  color: #9b2f20;
  font-weight: 800;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 980px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav {
    position: absolute;
    top: 96px;
    right: 18px;
    left: 18px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .nav.is-open {
    display: flex;
  }

  .menu-button {
    display: block;
  }

  .results-header {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .results-reservation-lookup {
    grid-column: 2;
    grid-row: 1;
  }

  .header-search {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .header-search .primary-button {
    grid-column: 1 / -1;
  }

  .booking-card,
  .availability-panel,
  .room-grid,
  .booking-details {
    grid-template-columns: 1fr 1fr;
  }

  .calendar-months {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
body {
    font-size: 17px;
  }

  .footer-main {
    grid-template-columns: 1fr;
  }

  .footer-newsletter {
    padding: 20px;
  }

  .newsletter-form > div {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    display: grid;
  }

  .reservation-lookup-form > div {
    grid-template-columns: 1fr;
  }

  .gallery-cta {
    display: grid;
    gap: 24px;
  }

  .gallery-cta-button {
    width: 100%;
  }

  .site-header {
    padding-inline: 12px;
  }

  .brand {
    min-width: 0;
  }

  .brand small {
    display: block;
    font-size: 0.68rem;
  }

  .brand-script {
    font-size: 1.08rem;
  }

  .brand-name {
    font-size: 1.22rem;
  }

  .date-picker {
    top: 96px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 116px);
  }

  .calendar-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .calendar-toolbar span {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .hero {
    min-height: 96vh;
    padding-top: 96px;
    padding-bottom: 64px;
  }

  .hero-overlay {
    background: linear-gradient(180deg, rgb(var(--rgb-sombra) / 0.42), rgb(var(--rgb-sombra) / 0.86));
  }

  .booking-card,
  .availability-panel,
  .room-grid,
  .results-layout,
  .booking-details,
  .summary-includes {
    grid-template-columns: 1fr;
  }

  .results-sidebar,
  .results-sidebar.is-stopped {
    position: static;
    margin-top: 0;
    right: auto;
    bottom: auto;
    transform: none;
  }

  .confirm-modal {
    grid-template-columns: 1fr;
    padding: 24px 18px 18px;
  }

  .confirm-copy {
    padding-right: 28px;
  }

  .confirm-icon {
    width: 36px;
    height: 36px;
  }

  .confirm-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .result-card {
    grid-template-columns: 1fr;
  }

  .combo-media > img {
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .result-rate-row {
    grid-template-columns: 1fr;
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .result-price {
    text-align: left;
  }

  .results-heading {
    align-items: start;
    display: grid;
  }

  .chat,
  .chat-launcher {
    right: 16px;
  }
}

/* Final modern trust overrides */
body {
  background: #ffffff;
  color: var(--ink);
  font-family: var(--fuente-texto);
  width: 100%;
  /* overflow-x:hidden sacado de aca tambien -- ver el comentario en el
     body{} de arriba (al principio del archivo), misma razon: html ya lo hace y esta
     redundancia en body rompia position:sticky en toda la pagina. */
}

.site-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgb(var(--rgb-linea) / 0.95);
  box-shadow: 0 1px 0 rgb(var(--rgb-sombra) / 0.03);
}

.site-header.is-compact {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 34px rgb(var(--rgb-sombra) / 0.08);
}

.brand-title {
  color: var(--ink);
}

h1,
h2 {
  font-family: var(--fuente-titulos);
}

.brand-script {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-name {
  font-size: 1.42rem;
  font-weight: 900;
}

h1 {
  max-width: 860px;
  font-size: clamp(3rem, 7vw, 5.4rem);
  line-height: 0.98;
  font-weight: 600;
}

h2 {
  color: var(--ink);
  font-weight: 600;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgb(var(--rgb-velo) / 0.86), rgb(var(--rgb-velo) / 0.54) 46%, rgb(var(--rgb-velo) / 0.16)),
    linear-gradient(0deg, rgb(var(--rgb-velo) / 0.62), transparent 48%);
}

.hero .eyebrow,
.hero-copy span {
  color: #f6b9da;
}

.eyebrow {
  color: var(--trust);
  letter-spacing: 0.11em;
}

.hero-copy {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.9);
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -10px 0 18px;
}

.trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.trust-strip span::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #f08cc3;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgb(240 140 195 / 0.18);
}

.results-trust {
  margin: 8px 0 0;
}

.results-trust span {
  color: var(--trust-dark);
  background: var(--trust-soft);
  border-color: rgb(var(--rgb-acento) / 0.18);
  backdrop-filter: none;
}

.booking-card,
.header-search,
.date-picker,
.room-card,
.sidebar-card,
.selected-stay article,
.reservation-form,
.chat,
.modal-content {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgb(var(--rgb-sombra) / 0.1);
}

.booking-card {
  padding: 12px;
  border-radius: 14px;
}

input,
select,
.date-trigger,
.guest-stepper {
  background: #ffffff;
  border-color: var(--linea-fuerte);
  border-radius: 10px;
}

.date-trigger:hover,
input:hover,
select:hover {
  background: var(--arena-clara);
  border-color: rgb(var(--rgb-acento) / 0.4);
}

input:focus,
select:focus,
textarea:focus,
.date-trigger:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgb(var(--rgb-acento) / 0.22);
}

.primary-button {
  background: linear-gradient(135deg, var(--trust-dark), var(--trust));
  border-color: var(--trust-dark);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgb(var(--rgb-acento) / 0.22);
}

.primary-button:hover {
  background: var(--berry);
}

.secondary-button {
  color: var(--trust-dark);
  border-color: var(--linea-fuerte);
  border-radius: 10px;
}

.secondary-button:hover {
  background: var(--trust-dark);
  border-color: var(--trust-dark);
}

.nav a:hover,
.ghost-button:hover,
.guest-stepper button,
.room-feature-grid span,
.service-bundle,
.service-tags span,
.results-summary button:hover,
.sidebar-dates strong,
.sidebar-empty,
.stay-meta,
.summary-includes li,
.reservation-progress span,
.extras-summary,
.success-note {
  background: var(--trust-soft);
  border-color: rgb(var(--rgb-acento) / 0.16);
}

.calendar-nav:hover,
.calendar-day:hover:not(:disabled),
.calendar-day.is-selected,
.reservation-progress span.is-active,
.reservation-progress span.is-complete,
.summary-includes li::before,
.chat-launcher-icon,
.message.user,
.chat-form button,
.recommendation-badge {
  background: var(--trust-dark);
  border-color: var(--trust-dark);
}

.calendar-day.is-range,
.guest-stepper button:hover {
  background: rgb(var(--rgb-acento) / 0.1);
  border-color: rgb(var(--rgb-acento) / 0.2);
}

.calendar-day small,
.room-card .price,
.room-feature-grid span,
.service-tags span,
.success-note {
  color: var(--trust-dark);
}

section,
.reservation-flow,
.booking-details,
.gallery-section {
  background: #ffffff;
}

.full-band,
.results-page-flow {
  background:
    linear-gradient(180deg, var(--arena-clara) 0%, #ffffff 28%),
    #ffffff;
}

.showcase-room-card:hover,
.combo-card.is-recommended {
  border-color: rgb(var(--rgb-acento) / 0.34);
  box-shadow: 0 22px 54px rgb(var(--rgb-sombra) / 0.14);
}

.result-rate-row {
  background: var(--arena-clara);
}

.price-breakdown,
.pago-opciones {
  border-top-color: rgb(var(--rgb-acento) / 0.18);
}

.chat header {
  background: linear-gradient(135deg, var(--berry), var(--magenta));
}

.message {
  background: var(--arena-clara);
}

@media (max-width: 680px) {
  .trust-strip {
    margin-top: -4px;
  }

  .trust-strip span {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Facade typography enforced */
.site-header .brand-title {
  display: grid;
  gap: 0;
  color: var(--ink);
  line-height: 0.9;
  white-space: nowrap;
}

.site-header.is-compact .brand-title {
  display: grid;
  gap: 0;
  line-height: 0.9;
}

.site-header .brand-script {
  display: block;
  font-family: "Segoe Script", "Brush Script MT", "Monotype Corsiva", cursive;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.site-header .brand-script::after {
  content: "";
}

.site-header .brand-name {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 1.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-header .brand small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: var(--fuente-texto);
  font-size: 0.72rem;
  line-height: 1.1;
  white-space: nowrap;
}

.hero .hero-brand-title {
  display: grid;
  gap: 2px;
  max-width: 100%;
  color: #ffffff;
  line-height: 1;
  text-transform: none;
}

.hero .hero-brand-script {
  display: block;
  font-family: "Segoe Script", "Brush Script MT", "Monotype Corsiva", cursive;
  font-size: clamp(1.75rem, 3.8vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.hero .hero-brand-name {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: clamp(2.5rem, 5.8vw, 4.4rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  .site-header .brand-script {
    font-size: 0.96rem;
  }

  .site-header .brand-name {
    font-size: 1.22rem;
  }

  .site-header .brand small {
    font-size: 0.68rem;
  }

  .hero .hero-brand-script {
    font-size: clamp(1.55rem, 7vw, 2.2rem);
  }

  .hero .hero-brand-name {
    font-size: clamp(2.1rem, 10vw, 3.2rem);
  }
}

/* Mobile responsive hardening */
button,
a,
summary,
.date-trigger,
.guest-stepper button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (max-width: 920px) {
  .booking-card,
  .header-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .results-layout,
  .booking-details {
    grid-template-columns: 1fr;
  }

  .results-sidebar,
  .results-sidebar.is-stopped {
    position: static;
    margin-top: 0;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    right: auto;
    bottom: auto;
    transform: none;
  }

  .results-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .results-heading h1,
  .results-heading h2 {
    white-space: normal;
  }

  .result-card {
    grid-template-columns: 1fr;
  }

  .combo-media > img {
    min-height: 240px;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .result-rate-row {
    grid-template-columns: 1fr;
    align-items: start;
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .result-price {
    text-align: left;
  }

  .results-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .results-page .chat-launcher,
  .results-page .chat {
    display: none !important;
  }

  .results-layout,
  .results-layout.has-selection {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .results-sidebar,
  .results-sidebar.is-entering,
  .results-sidebar.is-leaving,
  .results-sidebar.is-stopped {
    position: static;
    display: block;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    overflow: visible;
    opacity: 1;
    transform: none;
    animation: none;
    pointer-events: auto;
    z-index: auto;
  }

  .results-sidebar[hidden] {
    display: none;
  }

  .results-sidebar .sidebar-card {
    display: grid;
    grid-template-rows: none;
    max-height: none;
    overflow: visible;
    padding: 14px;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgb(var(--rgb-sombra) / 0.1);
  }

  .results-sidebar .sidebar-card h2 {
    font-size: 1.05rem;
    text-align: left;
  }

  .results-header {
    align-items: start;
    gap: 6px;
    padding: 8px 10px;
  }

  .results-header .brand {
    min-width: 0;
  }

  .results-header .brand small,
  .results-whatsapp-link {
    display: none;
  }

  .results-reservation-lookup {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 0.78rem;
  }

  .results-header .header-search {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(88px, 0.8fr) 42px;
    gap: 5px;
    padding: 5px;
    border-radius: 10px;
  }

  .results-header .header-search label {
    gap: 2px;
    min-width: 0;
    font-size: 0.58rem;
    line-height: 1;
  }

  .results-header .header-search .guest-field {
    min-width: 0;
  }

  .results-header .header-search .date-trigger,
  .results-header .header-search .guest-stepper,
  .results-header .header-search .guest-stepper button,
  .results-header .header-search .primary-button {
    min-height: 34px;
  }

  .results-header .header-search .date-trigger {
    padding-inline: 7px;
    font-size: 0.78rem;
  }

  .results-header .header-search .date-trigger span:last-child {
    display: none;
  }

  .results-header .header-search .guest-stepper {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
  }

  .results-header .header-search .guest-stepper strong {
    min-width: 0;
    padding-inline: 3px;
    font-size: 0.72rem;
    color: transparent;
    position: relative;
  }

  .results-header .header-search .guest-stepper strong::before {
    content: attr(data-guests);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ink);
  }

  .results-header .header-search .guest-stepper button {
    font-size: 0.95rem;
  }

  .results-header .header-search .primary-button {
    grid-column: auto;
    align-self: end;
    width: 42px;
    min-width: 42px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    position: relative;
  }

  .results-header .header-search .primary-button::before {
    content: "↻";
    color: #fff;
    font-size: 1rem;
    line-height: 1;
  }

  .results-page-flow {
    padding-top: 138px;
  }

  .results-heading {
    margin-bottom: 10px;
  }

  .results-heading p,
  .results-trust {
    display: none;
  }

  .results-heading h1,
  .results-heading h2 {
    font-size: 1.28rem;
  }

  .results-summary {
    display: none;
  }

  .date-picker {
    width: calc(100vw - 16px);
    top: 104px;
    max-height: calc(100vh - 116px);
    padding: 12px;
  }

  .calendar-months {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .calendar-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .calendar-toolbar span {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .calendar-week,
  .calendar-grid {
    gap: 4px;
  }

  .calendar-day {
    min-height: 38px;
    padding: 2px;
    font-size: 0.9rem;
  }

  .booking-card,
  .header-search {
    grid-template-columns: 1fr;
  }

  .guest-stepper,
  .date-trigger,
  input,
  select {
    min-height: 50px;
  }

  .hero {
    min-height: auto;
    padding-top: 96px;
    padding-bottom: 40px;
  }

  .hero-content {
    width: 100%;
  }

  .hero-copy {
    max-width: 100%;
    font-size: 1rem;
  }

  .results-summary {
    grid-template-columns: 1fr;
  }

  .booking-details {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .reservation-form {
    padding: 14px;
  }

  .reservation-form-heading h2 {
    font-size: clamp(1.45rem, 5.2vw, 2rem);
  }

  .selected-stay strong {
    font-size: 1.05rem;
  }

  .summary-includes {
    grid-template-columns: 1fr;
  }

  .selected-room-list li {
    grid-template-columns: 1fr;
  }

  .selected-room-list button {
    justify-self: end;
  }

  .reservation-progress {
    gap: 6px;
  }

  .reservation-progress span {
    min-height: 30px;
    font-size: 0.72rem;
  }

  .confirm-modal {
    padding: 22px 18px 18px;
  }

  .confirm-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .chat,
  .chat-launcher {
    right: 12px;
  }
}

@media (max-width: 520px) {
  section {
    padding-inline: 14px;
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .site-header {
    padding-inline: 10px;
  }

  .site-header .brand-script {
    font-size: 0.86rem;
  }

  .site-header .brand-name {
    font-size: 1rem;
  }

  .site-header .brand small {
    font-size: 0.62rem;
  }

  .hero .hero-brand-script {
    font-size: clamp(1.2rem, 7vw, 1.65rem);
  }

  .hero .hero-brand-name {
    font-size: clamp(1.75rem, 11vw, 2.6rem);
  }

  .hero-copy {
    margin-bottom: 20px;
    font-size: 0.95rem;
  }

  .booking-card {
    padding: 12px;
    gap: 10px;
  }

  .results-page-flow {
    padding-inline: 14px;
    padding-top: 132px;
  }

  .results-heading h1,
  .results-heading h2 {
    font-size: 1.2rem;
  }

  .results-heading p {
    font-size: 0.85rem;
  }

  .results-summary span,
  .results-summary button {
    padding: 9px 10px;
    font-size: 0.84rem;
  }

  .room-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-tags span {
    min-height: 30px;
    font-size: 0.62rem;
  }

  .room-card-body,
  .result-card-body {
    padding: 14px;
  }

  .result-rate-row {
    margin-inline: -14px;
    margin-bottom: -14px;
    padding: 14px;
  }

  .reservation-form {
    padding: 12px;
  }

  .reservation-step {
    gap: 12px;
  }

  .reservation-step legend {
    font-size: 1.05rem;
  }
}

@media (max-width: 420px) {
  .hero {
    padding-top: 88px;
    padding-bottom: 32px;
  }

  .hero .hero-brand-name {
    font-size: clamp(1.6rem, 12vw, 2.2rem);
  }

  .booking-card,
  .header-search {
    gap: 8px;
  }

  .booking-details,
  .results-layout {
    gap: 14px;
  }

  .summary-includes li {
    min-height: 38px;
    padding-left: 30px;
    font-size: 0.74rem;
  }

  .summary-includes li::before {
    left: 9px;
  }

  .selected-room-list li {
    padding: 9px;
  }

  .confirm-modal {
    width: min(100%, 520px);
  }

  .chat,
  .chat-launcher {
    right: 8px;
  }

  .chat-launcher {
    transform: scale(0.88);
    transform-origin: bottom right;
  }
}

@media (max-width: 760px) {
  .results-header .header-search {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(82px, 0.75fr) 40px;
    gap: 5px;
  }

  .results-header .header-search .primary-button {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  .results-header .header-search {
    gap: 4px;
    padding: 4px;
  }

  .results-header .header-search label {
    font-size: 0.54rem;
  }

  .results-header .header-search .date-trigger {
    padding-inline: 5px;
    font-size: 0.72rem;
  }

  .results-header .header-search .guest-stepper strong {
    font-size: 0.66rem;
  }

  .results-page-flow {
    padding-top: 128px;
  }
}

@media (max-width: 920px) {
.payment-layout {
    grid-template-columns: 1fr;
  }

  .payment-summary-card,
  .payment-methods {
    position: static;
    /* Sin esto, el max-height+overflow-y:auto pensado para desktop (panel
       sticky con scroll propio) deja a esta columna con un scroll interno
       de mas en mobile, donde ya no es sticky y el scroll normal de la
       pagina alcanza y sobra. */
    max-height: none;
    overflow-y: visible;
  }
}

.calendar-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.calendar-close:hover {
  color: white;
  background: var(--coffee);
  border-color: var(--coffee);
}

@media (max-width: 680px) {
  .calendar-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 42px;
    height: 42px;
  }

  .calendar-toolbar {
    padding-right: 48px;
  }
}

/* El ahorro por pagar el 100% de la estadia, debajo de las dos opciones de
   pago. Solo aparece si el hotel tiene la promo prendida y esta reserva
   califica (ver renderPromoPagoTotal en pago.js).

   Ocupa las dos columnas del grid de opciones: es una frase sobre una de las
   dos, no una tercera opcion -- agregar un tercer casillero obligaria a
   explicar la diferencia entre dos formas de pagar todo. */
.payment-promo-hint {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgb(var(--rgb-acento) / 0.08);
  border: 1px solid rgb(var(--rgb-acento) / 0.22);
  color: var(--trust);
  font-size: 0.82rem;
  line-height: 1.35;
}

.payment-promo-hint strong {
  font-weight: 800;
}

/* El precio de lista tachado al lado del promocional, adentro de la opcion. */
.payment-amount-choice s {
  color: var(--muted);
  font-weight: 500;
  text-decoration-thickness: 1px;
}

/* ===========================================================================
   TIRA DE PREVENTA
   ===========================================================================
   Una banda baja entre el buscador y la historia. La regla que la define es
   que NO compita con el hero: una sola linea de alto en escritorio, un color
   plano de la paleta y un solo boton. Todo lo que en el arte de referencia
   ocupaba media pantalla (el sello del descuento, la foto de la playa, los
   cuatro iconos de servicios) se resume en una frase, porque a esta altura de
   la pagina el huesped ya vio el hero y lo unico que falta es el empujon.

   Es un <aside> y no un <section> a proposito: la regla generica
   "section { padding: 74px }" la convertiria en otra seccion mas.
   =========================================================================== */
.preventa {
  position: relative;
  padding: 0 clamp(18px, 4vw, 56px);
  background:
    radial-gradient(120% 180% at 88% 50%, rgb(var(--rgb-acento) / 0.55), transparent 62%),
    linear-gradient(90deg, var(--trust-dark), var(--carbon));
  /* El hilo dorado de arriba es lo unico que queda del marco del arte
     original: separa la tira del hero sin agregarle alto. */
  border-top: 1px solid rgb(var(--rgb-piedra) / 0.55);
  border-bottom: 1px solid rgb(var(--rgb-piedra) / 0.28);
  color: #ffffff;
}

.preventa-inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 15px 0;
}

/* El rotulo, en dorado y con el mismo tratamiento que los "eyebrow" del resto
   del sitio: mayusculas, chico y con tracking. */
.preventa-tag {
  flex-shrink: 0;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid rgb(var(--rgb-piedra) / 0.75);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Rotulo, titulo y bajada en la misma linea en escritorio, con un filete
   dorado entre los dos ultimos. Es lo que mantiene la tira en una sola fila. */
.preventa-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-width: 0;
  flex: 1;
}

.preventa-titulo {
  font-size: clamp(0.98rem, 1.5vw, 1.12rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.preventa-bajada {
  position: relative;
  padding-left: 15px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  line-height: 1.35;
}

.preventa-bajada::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 1px;
  background: rgb(var(--rgb-piedra) / 0.55);
}

/* Claro sobre el verde: es el unico elemento que tiene que saltar, y asi
   repite el boton blanco del arte de referencia. */
.preventa-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--sand);
  border-radius: 999px;
  background: var(--sand);
  color: var(--trust-dark);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.preventa-cta:hover {
  background: transparent;
  color: var(--sand);
}

.preventa-cta:active {
  transform: scale(0.97);
}

.preventa-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.preventa-flecha {
  transition: transform 160ms ease;
}

.preventa-cta:hover .preventa-flecha {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .preventa-cta,
  .preventa-flecha {
    transition: none;
  }

  .preventa-cta:active {
    transform: none;
  }
}

/* En telefono la fila no entra: el texto pasa a dos renglones propios y el
   boton se va abajo, ancho completo, que es donde el pulgar lo encuentra. */
/* En telefono la fila no entra. El rotulo y el titulo se quedan juntos en el
   primer renglon (son cortos y juntos dicen todo), la bajada baja a un renglon
   propio y el boton se va abajo, ancho completo, que es donde el pulgar lo
   encuentra. */
@media (max-width: 860px) {
  .preventa-inner {
    flex-wrap: wrap;
    padding: 12px 0 13px;
    gap: 9px 14px;
  }

  .preventa-copy {
    flex: 1 1 100%;
    align-items: baseline;
    gap: 3px 10px;
  }

  /* El rotulo se achica un punto: en un telefono compite con el titulo por el
     mismo renglon y lo que tiene que ganar es el titulo. */
  .preventa-tag {
    padding: 4px 10px;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
  }

  .preventa-titulo {
    white-space: normal;
  }

  .preventa-bajada {
    flex: 1 1 100%;
    padding-left: 0;
  }

  .preventa-bajada::before {
    display: none;
  }

  .preventa-cta {
    flex: 1 1 100%;
    justify-content: center;
  }
}


/* ===========================================================================
   ELEGIR FECHAS (reservar.html)
   ===========================================================================
   Una pantalla con un solo trabajo, y una regla que manda sobre todo lo demas:
   tiene que entrar entera en un visor de escritorio, sin scroll. Todo lo que
   sigue esta apretado a proposito -- titulo en una fila con el "volver", sin
   bajada (la barra del calendario ya dice que hacer), calendario con celdas
   mas chicas que las del resto del sitio.

   Reusa el calendario y el selector de huespedes que ya existian (.calendar-*,
   .guest-stepper); lo que se define aca es el envase y los ajustes de tamaño
   propios de esta pantalla.
   =========================================================================== */
.reservar-page {
  background: linear-gradient(180deg, var(--trust-soft), #ffffff 280px), #ffffff;
}

.reservar-main {
  padding: 26px clamp(14px, 3vw, 40px) 28px;
}

.reservar-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
}

/* El panel de fechas manda; el contexto acompaña. stretch y no start: si el
   costado queda mas corto que el panel, la columna derecha se llena en vez de
   dejar un hueco blanco de varios cientos de pixeles. */
.reservar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(272px, 0.78fr);
  gap: clamp(14px, 1.8vw, 22px);
  align-items: stretch;
}

.reservar-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(16px, 2vw, 24px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Rotulo y titulo a la izquierda, volver a la derecha: tres renglones sueltos
   costaban 100px de alto que la pantalla no tiene. */
.reservar-encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.reservar-encabezado .eyebrow {
  margin: 0 0 2px;
}

.reservar-panel h1 {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.06;
}

.reservar-volver {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  /* 44px: el minimo para tocar comodo con el pulgar. */
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--trust-dark);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}

.reservar-volver:hover {
  background: var(--trust-soft);
  border-color: rgb(var(--rgb-acento) / 0.24);
}

/* Los dos campos de fecha son botones: el que esta activo es el que se va a
   completar al tocar un dia. */
.reservar-campos {
  display: grid;
  /* La columna de huespedes lleva un minimo real. El selector es una grilla de
     54px + etiqueta + 54px con overflow:hidden: si la columna queda corta, el
     boton "+" no se encoge, se CORTA -- y desaparece de la pantalla. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(206px, 0.86fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.reservar-campo {
  display: grid;
  gap: 1px;
  min-height: 50px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.reservar-campo:hover {
  border-color: rgb(var(--rgb-acento) / 0.3);
}

.reservar-campo.is-active {
  border-color: var(--trust);
  box-shadow: 0 0 0 3px rgb(var(--rgb-acento) / 0.14);
}

.reservar-campo:focus-visible {
  outline: 2px solid var(--trust);
  outline-offset: 2px;
}

.reservar-campo-rotulo {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reservar-campo strong {
  font-size: 0.98rem;
  font-weight: 700;
  text-transform: capitalize;
}

.reservar-campo-flecha {
  color: var(--muted);
  font-size: 0.95rem;
}

.reservar-huespedes {
  display: grid;
  gap: 2px;
  padding: 0 2px 0 12px;
  border-left: 1px solid var(--line);
}

/* Mismo alto que los campos de fecha, para que la fila quede pareja. */
.reservar-huespedes .guest-stepper {
  min-height: 50px;
  border-radius: 9px;
}

.reservar-huespedes .guest-stepper button {
  min-height: 50px;
  font-size: 1.2rem;
}

.reservar-huespedes .guest-stepper strong {
  font-size: 0.88rem;
}

.reservar-calendario {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.reservar-calendario-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reservar-calendario-barra .calendar-nav {
  min-height: 44px;
}

.reservar-calendario-barra span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

/* El calendario aca esta siempre a la vista: no hereda el fondo flotante ni la
   sombra del popover de la portada. */
.reservar-calendario .calendar-months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: clamp(12px, 2vw, 24px);
}

/* Celdas mas bajas que en el resto del sitio: seis semanas a 38px se comen
   casi 100px mas de alto, que es la diferencia entre entrar y no entrar. */
.reservar-calendario .calendar-head {
  margin-bottom: 6px;
}

.reservar-calendario .calendar-day {
  min-height: 33px;
}

.reservar-aviso {
  margin: 0;
  padding: 8px 12px;
  background: rgb(var(--rgb-piedra) / 0.13);
  border: 1px solid rgb(var(--rgb-piedra) / 0.4);
  border-radius: 10px;
  color: #6d4f1d;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Pegado abajo. En un visor donde todo entra no se nota; en uno mas bajo (o en
   telefono) el boton queda siempre a la vista mientras se navega el
   calendario, que es la unica forma de que "ver disponibilidad" no haya que
   ir a buscarlo. */
.reservar-acciones {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: -4px calc(clamp(16px, 2vw, 24px) * -1) calc(clamp(16px, 2vw, 24px) * -1);
  padding: 12px clamp(16px, 2vw, 24px);
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-radius: 0 0 16px 16px;
  /* Cuando queda pegada abajo, el contenido pasa por debajo. La sombra hacia
     arriba es lo que hace que se lea como una capa que flota y no como un
     recorte raro del texto. */
  box-shadow: 0 -10px 22px rgb(var(--rgb-sombra) / 0.07);
}

.reservar-resumen {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.reservar-resumen strong {
  color: var(--ink);
}

.reservar-acciones .primary-button {
  min-height: 46px;
  padding: 0 24px;
}

.reservar-acciones .primary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* --- El costado ---------------------------------------------------------- */

.reservar-contexto-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: clamp(16px, 2vw, 22px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.reservar-contexto-card h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.15;
}

/* La foto absorbe el alto que sobra: es lo que evita el hueco blanco cuando el
   panel de la izquierda es mas alto que esta tarjeta. */
.reservar-contexto-foto {
  /* basis 0 y no auto: asi la foto se queda con el alto que SOBRA en la
     columna, en vez de imponer el suyo natural y estirar la tarjeta (y con
     ella la pantalla entera) mas alla del panel de la izquierda. */
  flex: 1 1 0;
  min-height: 140px;
  margin: 0;
  overflow: hidden;
  border-radius: 11px;
}

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

.reservar-contexto-texto {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.reservar-contexto-pax {
  margin: 0;
  color: var(--trust-dark);
  font-size: 0.84rem;
  font-weight: 800;
}

/* Sin foto (cuando no se llego desde una habitacion) el bloque de servicios se
   va al fondo, asi la tarjeta llena la columna igual. */
.reservar-incluye {
  display: grid;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.reservar-incluye-titulo {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reservar-incluye ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 5px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reservar-incluye li {
  position: relative;
  padding-left: 15px;
  color: var(--ink);
  font-size: 0.84rem;
}

.reservar-incluye li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--trust);
}

/* Visores bajos (una notebook de 1366x768, o una ventana no maximizada). El
   ajuste va por ALTO y no por ancho: a 1080 la pantalla entra holgada y no
   tiene por que verse apretada, pero a 720 cada pixel cuenta y es preferible
   ceder aire antes que obligar a scrollear para llegar al boton. */
@media (min-width: 981px) and (max-height: 830px) {
  .reservar-main {
    padding-top: 16px;
    padding-bottom: 18px;
  }

  .reservar-panel {
    gap: 10px;
    padding: 14px 16px;
  }

  .reservar-panel h1 {
    font-size: 1.35rem;
  }

  .reservar-campo,
  .reservar-huespedes .guest-stepper,
  .reservar-huespedes .guest-stepper button {
    min-height: 46px;
  }

  .reservar-calendario .calendar-day {
    min-height: 30px;
  }

  .reservar-acciones {
    margin: -2px -16px -14px;
    padding: 10px 16px;
  }
}

/* --- Pantallas angostas -------------------------------------------------- */

@media (max-width: 980px) {
  .reservar-grid {
    grid-template-columns: 1fr;
  }

  /* El contexto pasa abajo: primero se elige, despues se mira la foto. */
  .reservar-contexto {
    order: 2;
  }

  .reservar-contexto-foto {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .reservar-main {
    padding: 18px 12px 24px;
  }

  /* Entrada y salida quedan lado a lado (es un rango, se leen juntas) y los
     huespedes bajan a un renglon propio con todo el ancho. */
  .reservar-campos {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .reservar-campo-flecha {
    display: none;
  }

  .reservar-huespedes {
    grid-column: 1 / -1;
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .reservar-calendario-barra {
    flex-wrap: wrap;
  }

  .reservar-calendario-barra span {
    order: -1;
    flex: 1 1 100%;
  }

  .reservar-acciones {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .reservar-acciones .primary-button {
    width: 100%;
  }

  .reservar-resumen {
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   Paginas legales: terminos, privacidad y arrepentimiento (20/09/2026)
   Existen por obligacion legal, pero son parte del sitio y tienen que leerse
   como tal -- no un bloque de texto pegado de otro lado. Reusan los tokens de
   arriba; lo unico propio es el ancho de lectura.
--------------------------------------------------------------------------- */
.legal-page {
  background: var(--soft);
}

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px clamp(18px, 5vw, 56px);
  background: var(--sage-dark);
  color: #fff;
}

.legal-header a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.92rem;
}

.legal-header a:hover { color: #fff; }

.legal-header strong {
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

.legal-main {
  /* 68ch: el ancho donde un parrafo largo se sigue leyendo sin perder el
     renglon. Un texto legal a todo el ancho de la pantalla no lo lee nadie. */
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 68px) clamp(18px, 5vw, 32px) 80px;
}

.legal-main h1 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  color: var(--ink);
  margin: 0 0 8px;
  text-wrap: balance;
}

.legal-updated {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 36px;
}

.legal-main h2 {
  font-size: 1.14rem;
  color: var(--sage-dark);
  margin: 38px 0 12px;
}

.legal-main p,
.legal-main li {
  color: #3b3640;
  line-height: 1.72;
  font-size: 0.985rem;
}

.legal-main ul { padding-left: 20px; margin: 12px 0; }
.legal-main li { margin-bottom: 8px; }
.legal-main a { color: var(--trust); }

/* El dato que mas se busca en esta pagina: que pasa si no puedo ir. Se
   destaca a proposito para que no haya que leer los 12 puntos para encontrarlo,
   y para que nadie pueda decir despues que no estaba claro. */
.legal-destacado {
  background: var(--trust-soft);
  border-left: 3px solid var(--trust);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 26px 0;
}

.legal-destacado p:last-child { margin-bottom: 0; }

.legal-nota {
  color: var(--muted);
  font-size: 0.88rem;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 34px;
}

.legal-datos {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 24px 0;
}

.legal-datos p { margin: 4px 0; font-size: 0.93rem; }

/* --- Formulario del boton de arrepentimiento --- */
.legal-form { margin-top: 26px; }

.legal-form label {
  display: block;
  font-size: 0.88rem;
  color: var(--sage-dark);
  font-weight: 600;
  margin: 16px 0 6px;
}

.legal-form input,
.legal-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--paper);
}

.legal-form input:focus,
.legal-form textarea:focus {
  outline: 2px solid var(--trust);
  outline-offset: 1px;
  border-color: var(--trust);
}

.legal-form textarea { min-height: 96px; resize: vertical; }

.legal-form button {
  margin-top: 22px;
  padding: 13px 26px;
  border: 0;
  border-radius: var(--radius);
  background: var(--trust);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
}

.legal-form button:hover { background: var(--trust-dark); }
.legal-form button:disabled { opacity: 0.55; cursor: default; }

.legal-form-status {
  margin-top: 16px;
  font-size: 0.93rem;
  min-height: 1.2em;
}

.legal-form-status.ok { color: var(--trust-dark); font-weight: 600; }
.legal-form-status.error { color: var(--wine); }

/* Links legales en el pie de la home. Deliberadamente discretos: tienen que
   estar y ser encontrables, no competir con el resto del pie. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 0 clamp(18px, 4vw, 56px) 18px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  font-size: 0.82rem;
}

.footer-legal a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Linea de aceptacion en el paso de confirmar la reserva. Es lo que de verdad
   protege al hotel (un cartel al entrar al sitio no alcanza), asi que tiene
   que estar pegada al boton de confirmar y ser legible -- no letra chica. */
.acepta-terminos {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 14px 0 0;
}

.acepta-terminos a { color: var(--trust); }

/* Aclaracion de precio final bajo el desglose (21/09). Reemplaza al renglon
   "Impuestos $ 0", que sugeria que el precio no los incluia. */
.price-final-note {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Las dos formas de pagar, en el resumen de la reserva (09/10). Va pegado al
   desglose -- misma linea divisoria que `.price-breakdown` -- porque es la
   continuacion de la cuenta: primero de que se compone el total, despues que
   se paga ahora segun como se elija pagar. */
.pago-opciones {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgb(var(--rgb-piedra) / 0.24);
}

.pago-opciones > b {
  color: var(--ink);
  font-size: 0.86rem;
}

.pago-opciones ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pago-opciones li {
  display: grid;
  gap: 1px;
}

/* Titulo e importe en el mismo renglon, el importe contra el margen derecho:
   los dos numeros quedan uno debajo del otro y se comparan de un vistazo. */
.pago-opciones li > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pago-opciones em {
  font-style: normal;
  color: var(--muted);
}

.pago-opciones strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* La mejor tarifa se lee primero. */
.pago-opciones li.es-mejor em { color: var(--ink); font-weight: 700; }
.pago-opciones li.es-mejor strong { color: var(--trust-dark); }

.pago-opciones li small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.pago-opciones-nota {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

/* ---------------------------------------------------------------------------
   GALERIA DE FOTOS (22/09)
   Reemplaza a la grilla vieja de 5 fotos fijas sin ampliar. El caso de uso:
   un cliente pide fotos y se le manda el link de la pagina, asi que tiene que
   poder recorrerlas como en el celular.
--------------------------------------------------------------------------- */
.galeria-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}

.galeria-filtro {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.galeria-filtro:hover { border-color: var(--trust); color: var(--trust-dark); }

.galeria-filtro.is-activo {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  color: #fff;
}

/* Recuadros IGUALES, no columnas tipo masonry (22/09). Con masonry las
   columnas terminan a distinta altura y abajo queda un blanco grande, y
   mientras una foto todavia carga su hueco reservado se ve como un recuadro
   gris flotando en el medio de la nada. Con recuadros iguales no hay huecos,
   cargue cuando cargue cada foto.
   Cuadrados porque hay verticales y apaisadas mezcladas: a las dos les recorta
   lo mismo (un cuarto), y la foto entera igual se ve al tocarla. */
.galeria-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.galeria-item {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  /* Gris claro debajo: es lo que se ve el instante que la foto tarda, en vez
     del icono de imagen rota. */
  background: var(--soft);
  cursor: zoom-in;
  position: relative;
  line-height: 0;
}

/* El item es display:block, asi que el [hidden] del filtro necesita ganarle. */
.galeria-item[hidden] { display: none; }

.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.galeria-item:hover img { transform: scale(1.04); }

.galeria-item:focus-visible {
  outline: 3px solid var(--trust);
  outline-offset: 3px;
}

/* --- Visor a pantalla completa ------------------------------------------- */
.visor-abierto,
.visor-abierto body { overflow: hidden; }

.visor {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: rgb(var(--rgb-sombra) / 0.95);
}

.visor[hidden] { display: none; }

.visor-marco {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.visor-marco img {
  max-width: 100%;
  /* 100dvh y no vh: en el telefono la barra del navegador se mueve y con vh la
     foto queda cortada abajo. */
  max-height: calc(100dvh - 130px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

.visor-marco figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 12px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.92rem;
  text-align: center;
}

.visor-contador {
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}

.visor-nav,
.visor-cerrar {
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  display: grid;
  place-items: center;
  transition: background 0.16s ease;
  flex: none;
}

.visor-nav:hover,
.visor-cerrar:hover { background: rgba(255, 255, 255, 0.24); }

.visor-nav {
  /* 48px: el minimo para tocarlo con el dedo sin errarle. */
  width: 48px;
  height: 48px;
  font-size: 2rem;
  line-height: 1;
  padding-bottom: 4px;
}

.visor-cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  font-size: 1.7rem;
  line-height: 1;
  z-index: 1;
}

@media (max-width: 640px) {
  /* En el telefono se pasa de foto deslizando, asi que las flechas se corren a
     abajo en vez de comerle ancho a la foto. */
  .visor { flex-wrap: wrap; align-content: center; }
  .visor-marco { order: -1; width: 100%; }
  .visor-marco img { max-height: calc(100dvh - 190px); }
  .visor-nav { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .galeria-item img,
  .galeria-filtro,
  .visor-nav,
  .visor-cerrar { transition: none; }
  .galeria-item:hover img { transform: none; }
}

/* --- Resumida en el telefono (03/10) --------------------------------------
   Pedido del dueño: en el telefono la grilla es de una columna y las veinte
   fotos eran ~7.000px de scroll antes de llegar a lo que sigue. galeria.js
   marca las que sobran (.is-de-mas) y si esta resumida (.is-resumida); lo que
   se oculta se decide ACA y solo a 760px o menos. En escritorio la marca esta
   pero no la usa ninguna regla, y el boton no se dibuja: queda como siempre.
   display:none y no opacity/visibility: asi no ocupan lugar y, como las fotos
   son loading="lazy", las ocultas no se bajan hasta que se despliegan. */
.galeria-mas { display: none; }

@media (max-width: 760px) {
  .galeria-grilla.is-resumida .galeria-item.is-de-mas { display: none; }

  .galeria-mas {
    display: flex;
    justify-content: center;
    margin-top: 18px;
  }

  /* El display:flex de arriba le gana al [hidden] del navegador. */
  .galeria-mas[hidden] { display: none; }

  .galeria-ver-mas {
    min-width: min(100%, 240px);
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Los extras, adentro de cada tarjeta de habitacion (30/09)

   Antes se elegian en un paso aparte, DESPUES de aceptar un precio. Ahora se
   eligen aca y el total de la tarjeta se actualiza al instante: el numero que
   se acepta es el que se va a pagar.

   Cada extra es un boton entero (no un checkbox con su etiqueta al lado): en
   telefono el area de toque es toda la fila, que es lo que se busca con el
   pulgar, y el estado se lee del color del borde y del tilde sin tener que
   apuntarle a un cuadradito de 16px.
   --------------------------------------------------------------------------- */

.card-extras {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.card-extras-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px;
}

.card-extras-title {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}

.card-extras-count {
  margin-left: auto;
  padding: 2px 9px; border-radius: 999px;
  background: var(--trust-soft); color: var(--trust-dark);
  font-size: 0.74rem; font-weight: 700;
}

/* Los tres extras van UNO AL LADO DEL OTRO, no apilados: apilados se comian
   tres filas de la tarjeta de habitacion y empujaban el precio fuera de
   pantalla. `auto-fit` los pasa a una sola columna cuando no entran, que es
   lo que hace el telefono. */
.card-extras-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
  align-items: stretch;
}

/* La tarjeta de un extra. Es un CONTENEDOR, no un boton: adentro van la fila
   de agregar (.card-extra-main) y, si el hotel cargo el detalle, el boton que
   lo abre. Un <button> dentro de otro no es HTML valido, y ademas leer que
   incluye no puede ser lo mismo que agregarlo. */
.card-extra {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.card-extra:not(.is-off):hover { border-color: var(--trust); background: var(--trust-soft); }

.card-extra.is-on {
  border-color: var(--trust);
  background: var(--trust-soft);
  box-shadow: inset 0 0 0 1px var(--trust);
}

.card-extra.is-off { opacity: 0.55; }

/* Agregar o sacar. En columna: nombre arriba, el resumen debajo y el precio
   al pie, contra la base de la tarjeta -- asi los tres precios quedan
   alineados entre si aunque un resumen ocupe una linea mas que otro. */
.card-extra-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
  width: 100%;
  /* Alto minimo de toque: esta tarjeta se aprieta con el pulgar. */
  min-height: 52px;
  padding: 10px 12px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.card-extra-main:active:not(:disabled) { transform: translateY(1px); }
.card-extra-main:focus-visible { outline: 2px solid var(--trust); outline-offset: -2px; }
.card-extra-main:disabled { cursor: not-allowed; }

.card-extra-titulo {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-width: 0;
}
.card-extra-titulo b {
  color: var(--ink); font-size: 0.92rem; font-weight: 700; line-height: 1.25;
  min-width: 0;
  /* "Estacionamiento" es una sola palabra y no entra en una columna de
     telefono: sin esto desborda la tarjeta en vez de partirse. */
  overflow-wrap: anywhere;
}

/* El tilde: cuadrado vacio cuando no esta elegido, lleno cuando si. Es lo
   que dice "esto se puede marcar" antes de tocarlo. */
.card-extra-check {
  display: grid; place-items: center;
  width: 20px; height: 20px; flex: 0 0 auto;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: transparent;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.card-extra-check svg { width: 12px; height: 12px; }
.card-extra.is-on .card-extra-check {
  background: var(--trust); border-color: var(--trust); color: #fff;
}

.card-extra-resumen {
  color: var(--muted); font-size: 0.78rem; line-height: 1.35;
  /* Alineado con el nombre, no con el tilde. */
  padding-left: 28px;
}
.card-extra-nota { color: var(--wine) !important; font-size: 0.78rem; padding-left: 28px; }

/* Pegado abajo: `margin-top:auto` es lo que alinea los tres precios entre si
   cuando los resumenes miden distinto. */
.card-extra-precio {
  margin-top: auto;
  padding-top: 4px; padding-left: 28px;
  color: var(--ink); font-weight: 700; font-size: 0.95rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.card-extra.is-on .card-extra-precio { color: var(--trust-dark); }

/* La unidad con la que el hotel cobra ese extra ("por persona, por noche").
   Va DEBAJO del numero y no al lado: en una columna de telefono de ~95px no
   entra en el mismo renglon, y el numero sin unidad es justo el problema que
   esto vino a resolver (el chip decia "$ 372.000" debajo de "por persona y
   por día"). Queda en gris y mas chico que el precio -- es la etiqueta del
   numero, no un segundo numero. */
.card-extra-precio small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  /* El precio lleva nowrap para que no se parta el importe; la unidad SI se
     tiene que poder partir en dos renglones. */
  white-space: normal;
}
.card-extra.is-on .card-extra-precio small { color: var(--muted); }

/* "Ver que incluye": discreto a proposito. Es una salida para el que tiene la
   duda, no algo que compita con el nombre y el precio, que es lo que la
   mayoria mira. */
.card-extra-vermas {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%;
  padding: 7px 8px;
  border: 0; border-top: 1px solid var(--line);
  background: none;
  color: var(--trust-dark);
  font: inherit; font-size: 0.76rem; font-weight: 600;
  cursor: pointer;
}
.card-extra-vermas:hover { background: var(--trust-soft); }
.card-extra-vermas:focus-visible { outline: 2px solid var(--trust); outline-offset: -2px; }
.card-extra-vermas svg { width: 12px; height: 12px; transition: transform 0.18s ease; }
.card-extra-vermas[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Los detalles abiertos van DEBAJO de las tres, a ancho completo, y no dentro
   de su columna: adentro crecerian solo ellos y dejarian las tres tarjetas de
   distinto alto, y ademas el texto quedaria en una columna angosta. Aca se
   lee de corrido y las tarjetas de arriba no se mueven. */
.card-extras-detalles {
  display: grid; gap: 8px;
  margin-top: 8px;
}
.card-extra-detalle {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.85rem; line-height: 1.5;
}
.card-extra-detalle > b {
  display: block;
  margin-bottom: 4px;
  font-size: 0.82rem; color: var(--trust-dark);
}
.card-extra-detalle p { margin: 0; }
.card-extra-detalle ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
.card-extra-detalle li { margin: 0; }

/* El desglose del precio: aparece solo cuando hay extras elegidos, para que
   se vea de donde sale el total que se va a aceptar. */
.result-price-desglose {
  display: grid; gap: 1px;
  margin: 2px 0 3px;
  font-size: 0.8rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.result-price-total {
  color: var(--ink) !important;
  font-size: 0.92rem !important;
  white-space: nowrap;
  margin-top: 2px;
}
.result-price-total strong { color: var(--trust-dark); font-weight: 800; font-size: 1.05rem; }

/* De que depende el precio de arriba. Aparece solo cuando la tarjeta esta
   mostrando la mejor tarifa (la de abonar el 100% de la estadia): sin esta
   linea, el total no coincidiria con el que ve despues quien prefiere señar.
   Pisa el gris de `.result-price small` a proposito -- no es letra chica
   decorativa, es la condicion del precio. */
.result-price-promo {
  color: var(--trust-dark) !important;
  font-size: 0.78rem !important;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  margin-top: 2px;
}

@media (max-width: 620px) {
  /* De a dos en telefono: tres columnas de ~95px no dejan lugar ni para
     el nombre. Una sola por fila devolveria la pila que se vino a sacar. */
  .card-extras-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .card-extra-main { padding: 9px 10px; }
  .card-extra-titulo { gap: 6px; }
  .card-extra-titulo b { font-size: 0.8rem; }
  .card-extra-resumen, .card-extra-nota, .card-extra-precio { padding-left: 0; }
  .card-extra-precio { font-size: 0.9rem; }
}

/* ---------------------------------------------------------------------------
   "Ver mi reserva": el bloque de lo que falta pagar

   Es lo unico que el huesped tiene que HACER en esa pagina, asi que es lo
   unico con fondo de color y va arriba de los datos.

   El amarillo de .is-review es el MISMO criterio que usa el PMS para un pago
   en revision (el bloque del planning, el chip de la lista de pagos y el aviso
   del resumen): amarillo y no rojo porque el huesped ya pago, lo que falta es
   que el hotel mire el banco.
--------------------------------------------------------------------------- */
.confirmation-payment {
  margin: 0 0 18px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid;
}

.confirmation-payment h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.confirmation-payment p {
  margin: 0;
  font-size: 0.95rem;
}

.confirmation-payment.is-due {
  background: var(--sand);
  border-color: #e0c89a;
  color: #5c4420;
}

.confirmation-payment.is-review {
  background: #fff8e1;
  border-color: #f0d98a;
  color: #5e4b12;
}

.confirmation-payment.is-ok {
  background: var(--trust-soft);
  border-color: var(--linea-fuerte);
  color: var(--trust-dark);
}

/* El selector lleva al padre a proposito: `.confirmation-payment p` tiene
   mas especificidad que una clase sola y se comia el tamaño del importe, que
   es el numero mas importante de la pagina. */
.confirmation-payment p.confirmation-amount {
  margin: 4px 0 10px;
  font-size: 2rem;
  font-weight: 850;
  line-height: 1.1;
}

.confirmation-bank {
  margin-top: 16px;
}

.confirmation-bank h4 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

/* Un CBU se transcribe mal desde un telefono: es un boton, no texto suelto. */
.confirmation-copy {
  font: inherit;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--linea-fuerte);
  border-radius: 6px;
  padding: 2px 8px;
  color: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.confirmation-copy:hover {
  background: #fff;
}

/* En el bloque bancario la fila se apila: a dos columnas, en un telefono el
   CBU queda con ~150px y se parte en cuatro lineas, que es justo el dato que
   el huesped tiene que poder leer y comparar de un vistazo. */
.confirmation-bank .reservation-detail-list div {
  grid-template-columns: 1fr;
  gap: 2px;
}

.confirmation-bank .reservation-detail-list dd {
  text-align: left;
}

/* Monoespaciada y no la tipografia de la web: un CBU son 22 digitos que se
   comparan de a uno contra el homebanking, y la fuente del sitio (weight 850)
   es tan ancha que lo partia dejando dos digitos sueltos en la segunda linea. */
.confirmation-bank .confirmation-copy {
  display: inline-block;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 700;
}

/* "Ya transferí": el comprobante que sube el propio huesped.
   min-width:0 en los hijos del grid porque un item arranca con min-width:auto
   (su ancho intrinseco) y box-sizing no lo corrige: el input de archivo mide
   lo que ocupa "Ningun archivo seleccionado" y se desborda en un telefono. */
.confirmation-upload {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(92, 68, 32, 0.18);
}

.confirmation-upload-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.confirmation-upload-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 850;
}

.confirmation-upload-form input,
.confirmation-upload-form button {
  min-width: 0;
  max-width: 100%;
}

.confirmation-upload-form input {
  font: inherit;
  width: 100%;
  padding: 11px;
  border-radius: var(--radius);
  border: 1px solid var(--linea-fuerte);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
}

.confirmation-upload-form input[type="file"] {
  font-size: 0.85rem;
  padding: 9px;
}

.confirmation-upload-status {
  margin: 0;
  font-size: 0.9rem;
  min-height: 1px;
}

.confirmation-upload-status.is-error {
  color: var(--wine);
  font-weight: 850;
}


/* ===========================================================================
   Asistente de la web, version 2 (asistente-chat.js).

   Todo cuelga de .chat.awv2 o de clases awv2-*, que solo existen con la llave
   prendida: con la llave apagada el chat viejo se ve exactamente igual.
   Mismos colores que el resto del chat (verde de confianza). Tiene que entrar
   en un telefono de 360px sin scroll horizontal: nada de anchos fijos, los
   botones y los precios bajan de linea antes que salirse.
   =========================================================================== */

/* El panel es una grilla de tres filas (cabecera, mensajes, campo). Sin
   min-height: 0 la del medio crece con una cotizacion larga y empuja el campo
   de escribir fuera del panel en vez de scrollear. */
.chat.awv2 .chat-messages {
  min-height: 0;
  overscroll-behavior: contain;
}

.awv2-tarjeta,
.awv2-form {
  align-self: stretch;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  background: #ffffff;
  border: 1px solid rgb(var(--rgb-acento) / 0.2);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgb(var(--rgb-sombra) / 0.06);
}

.awv2-tarjeta-titulo {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

.awv2-opciones {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.awv2-opcion {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  background: var(--trust-soft);
  border-radius: 10px;
}

.awv2-opcion-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.awv2-opcion-nombre {
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.awv2-opcion-total {
  color: var(--trust-dark);
  font-size: 1.18rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.awv2-opcion-rotulo {
  color: var(--muted);
  font-size: 0.8rem;
}

.awv2-opcion-pago-total,
.awv2-opcion-detalle,
.awv2-opcion-donde {
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.awv2-opcion-pago-total strong {
  color: var(--trust-dark);
  white-space: nowrap;
}

.awv2-opcion-donde {
  color: var(--muted);
  font-size: 0.8rem;
}

.awv2-notas {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 16px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Botones: la principal ocupa toda la fila y las secundarias se reparten la
   de abajo. Son <a> o <button> segun lleven a otra pagina o hagan algo aca,
   y se tienen que ver iguales. */
.awv2-acciones {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.awv2-boton {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 44px;
  padding: 9px 14px;
  color: var(--trust-dark);
  background: #ffffff;
  border: 1px solid rgb(var(--rgb-acento) / 0.35);
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.awv2-boton:hover {
  background: var(--trust-soft);
}

.awv2-boton.is-principal {
  flex-basis: 100%;
  color: #ffffff;
  background: linear-gradient(135deg, var(--trust-dark), var(--trust));
  border-color: var(--trust-dark);
}

.awv2-boton.is-principal:hover {
  filter: brightness(1.07);
}

.awv2-boton:disabled {
  cursor: default;
  filter: none;
  opacity: 0.6;
}

/* Chips: respuestas de un toque ("2 personas", "Reintentar"). Redondos y de
   letra mas chica que los botones (contestan, no llevan a ningun lado), pero
   con el mismo alto tocable de 44px: con seis chips en dos filas, a 38px y
   6px de aire se tocaba el de al lado. */
.awv2-chips {
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.awv2-chip {
  min-height: 44px;
  max-width: 100%;
  padding: 7px 13px;
  color: var(--trust-dark);
  background: #ffffff;
  border: 1px solid rgb(var(--rgb-acento) / 0.35);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.awv2-chip:hover:not(:disabled) {
  background: var(--trust-soft);
}

.awv2-chip:disabled {
  cursor: default;
  opacity: 0.55;
}

/* Formulario de contacto, dentro del chat. Los inputs del sitio miden 54px y
   ocupan el 100%: aca se achican, y el checkbox se saca de esa regla (si no,
   sale un checkbox de 54px de alto a todo el ancho). 16px de letra para que
   el telefono no haga zoom al tocar el campo. */
.awv2-form {
  border-color: var(--line);
}

.awv2-form-titulo {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
}

.awv2-campo {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.awv2-campo label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.chat.awv2 .awv2-campo input,
.chat.awv2 .awv2-campo select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px;
  font-size: 16px;
}

.awv2-form-ayuda {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.awv2-acepto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 0.84rem;
  line-height: 1.4;
}

.chat.awv2 .awv2-acepto input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--trust);
}

.awv2-acepto a {
  color: var(--trust-dark);
  font-weight: 700;
}

.awv2-form-error {
  margin: 0;
  color: var(--wine);
  font-size: 0.84rem;
  font-weight: 700;
}

.awv2-form-error:empty {
  display: none;
}

.awv2-form .awv2-boton {
  width: 100%;
}

.awv2-form.is-enviado {
  opacity: 0.7;
}

/* Campo trampa: fuera de la vista y del tabulador, pero NO display:none
   (algunos robots se saltean lo oculto asi). */
.awv2-trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La caja de mensajes recibe el foco (tabindex -1) cuando un chip tocado
   desaparece en el telefono: es un foco de servicio, no hace falta marcarlo. */
.chat.awv2 .chat-messages:focus {
  outline: none;
}

/* El asistente en resultados, en el telefono. El chat viejo esta oculto ahi
   (la regla de max-width 760px de mas arriba, con !important), y con el nuevo
   eso cortaba el camino principal: "Ver opciones y reservar" lleva desde la
   portada a una pagina sin asistente. Con la llave prendida (body.awv2-activo,
   lo pone asistente-chat.js) se vuelve a mostrar. Con la llave apagada no
   cambia nada.
   - :not([hidden]) porque esta regla gana a `.chat[hidden]`, y si no el panel
     no se cerraria nunca.
   - En esa pagina no hay ninguna barra fija abajo; el aire al pie es para que
     el boton flotante no tape lo ultimo de la pagina (el "Confirmar" del
     formulario de reserva). */
@media (max-width: 760px) {
  .results-page.awv2-activo .chat-launcher {
    display: inline-flex !important;
  }

  .results-page.awv2-activo .chat:not([hidden]) {
    display: grid !important;
  }

  .results-page.awv2-activo {
    padding-bottom: 84px;
  }
}

/* ===========================================================================
   Sin scroll horizontal en celular (03/10)

   Pedido del dueño: la web tiene que quedar fija, sin poder correrse de
   costado y sin quedar ampliada. Ver la seccion del mismo nombre en el
   CLAUDE.md: ahi estan las causas medidas y las reglas.

   Lo de aca corrige cada desborde EN SU ORIGEN. La red de seguridad
   (`overflow-x: clip` en html y body) esta arriba, junto a esas reglas, y no
   reemplaza a esto: con un desborde vivo, iOS igual agranda la pagina antes
   de recortarla.
   =========================================================================== */

/* 1. Portada: la foto del hero esta ampliada al 102% (`scale(1.02)`) y el hero
      deja ver lo que se sale (`overflow: visible`, por el calendario que
      cuelga hacia abajo en escritorio). Ese 1% de cada lado ensanchaba TODA
      la pagina (4px en un telefono, 13 en escritorio). Se recorta solo de
      costado: para abajo sigue pudiendo colgar el calendario. */
.hero {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  .hero-bg {
    transform: none;
  }
}

/* 2. Las ayudas de "Incluido en tu estadía" (resultados). El globo existe
      siempre, invisible (`opacity: 0`), con 280px de ancho y centrado sobre
      su chip: el de la columna derecha se salia 28 a 41px de la pantalla en
      cualquier telefono, y hasta 12px en escritorio. Ahora el globo solo
      existe mientras se muestra. El fundido de entrada se conserva con
      @starting-style; el de salida, con transition-behavior. Un navegador
      viejo lo muestra sin fundido, que es la unica diferencia. */
.service-tags span::after,
.service-tags span::before {
  display: none;
}

.service-tags span::after {
  transition: opacity 160ms ease, transform 160ms ease, display 160ms allow-discrete;
}

.service-tags span::before {
  transition: opacity 160ms ease, display 160ms allow-discrete;
}

.service-tags span:hover::after,
.service-tags span:focus-visible::after,
.service-tags span:hover::before,
.service-tags span:focus-visible::before {
  display: block;
}

@starting-style {
  .service-tags span:hover::after,
  .service-tags span:focus-visible::after {
    opacity: 0;
    transform: translate(-50%, 6px);
  }

  .service-tags span:hover::before,
  .service-tags span:focus-visible::before {
    opacity: 0;
  }
}

/*    En el telefono, ademas, el globo centrado sobre un chip de la derecha se
      cortaba contra el borde mientras se mostraba. Ahi va arriba de la
      grilla entera y con su ancho: nunca es mas ancho que la tarjeta. La
      flechita se saca porque ya no apuntaria a su chip. */
@media (max-width: 760px) {
  .service-tags {
    position: relative;
  }

  .service-tags span {
    position: static;
  }

  .service-tags span::after {
    left: 0;
    right: 0;
    width: auto;
    transform: translateY(6px);
  }

  .service-tags span:hover::after,
  .service-tags span:focus-visible::after {
    transform: none;
  }

  .service-tags span:hover::before,
  .service-tags span:focus-visible::before {
    display: none;
  }

  @starting-style {
    .service-tags span:hover::after,
    .service-tags span:focus-visible::after {
      opacity: 0;
      transform: translateY(6px);
    }
  }
}

/* 3. Portada, la franja verde de abajo ("¿Listo para tus vacaciones...?").
      Cada renglon del titulo va con `white-space: nowrap` y el bloque es un
      item de grilla, que por defecto no se achica por debajo de su
      contenido: el primer renglon (348px) estiraba la columna, y el boton
      "Consultar disponibilidad" con ella. 42px de mas en 320. La letra se
      ajusta un poco al ancho (en 375 es la misma) y, si igual no entra, el
      renglon baja. */
@media (max-width: 680px) {
  .gallery-cta > div {
    min-width: 0;
  }

  .gallery-cta h2 {
    font-size: min(1.65rem, 7vw);
  }

  .gallery-cta-title-line {
    white-space: normal;
    text-wrap: balance;
  }
}

/* 4. Campos de texto: con letra de menos de 16px, iOS amplia la pagina al
      tocarlos y la deja ampliada y corrida. Los del formulario de reserva
      (14,4px: heredan del label), la nota (13,3px: el textarea no heredaba
      la letra), el monto del comprobante y los del boton de arrepentimiento
      estaban por debajo. Con `max(16px, 1em)` (1em = la letra del texto que
      rodea al campo) nunca baja de 16 y el que ya heredaba 17px del texto se
      queda en 17; los de arrepentimiento, que estaban achicados a 15,5, pasan
      a 17 como el resto. Los del asistente tienen 16px con una regla mas
      especifica, y la conservan. Medido: en escritorio no cambia nada. */
@media (max-width: 760px) {
  :is(input, select, textarea):not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]) {
    font-size: 16px;
    font-size: max(16px, 1em);
  }
}

/* 5. `viewport-fit=cover` (meta viewport): en un iPhone apaisado la pagina
      llega hasta debajo de la muesca. Esto devuelve el contenido a la zona
      segura, que es como se veia antes. En vertical y en escritorio env() da
      0 y no cambia nada. El encabezado fijo usa un borde transparente y no
      padding: su padding cambia en cada ancho, y el borde suma sin pisarlo
      (el fondo del encabezado igual se pinta debajo). El de reservar, pago
      y confirmacion es sticky, no fijo: ya lo corre el padding de body. */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.site-header:not(.confirmation-header) {
  border-left: env(safe-area-inset-left, 0px) solid transparent;
  border-right: env(safe-area-inset-right, 0px) solid transparent;
}

.chat-launcher {
  margin-right: env(safe-area-inset-right, 0px);
  margin-bottom: env(safe-area-inset-bottom, 0px);
}

.chat {
  margin-right: env(safe-area-inset-right, 0px);
}

/* ===========================================================================
   Portada: entrada animada (07/10)

   Copia la entrada de hospedahoy.com, a pedido. Allá es un slider (Revolution
   Slider); acá es una sola foto con un formulario adentro, así que se tomó la
   entrada y no el resto:

   - La foto aparece con un fundido sobre el color oscuro del hero.
   - Después bajan 50px desde arriba mientras aparecen, de a uno y cada
     0,35 s: la etiqueta, el título, el texto y el buscador. Cada uno tarda
     1,1 s, con aceleración y frenado al final. Son las curvas del original
     (power4.inOut en la etiqueta, power3.inOut en el resto); los tiempos,
     un 30% más cortos a pedido de Juan (allá: cada 0,5 s y 1,5 s cada uno,
     el buscador terminaba a los 3,5 s; acá a los 2,5 s).
   - Los textos de hospedahoy se van y entra otra foto a los 9 s. Acá no:
     el buscador no puede desaparecer mientras alguien elige una fecha.

   Tres cuidados:

   1. **`backwards`, no `both`**: la animación solo pinta el estado de
      arranque durante la espera, y al terminar no deja nada puesto. Un
      `transform` que quedara en el buscador (aunque fuera translateY(0))
      convertiría a la tarjeta en la referencia del calendario, que es
      `position: fixed`, y lo correría de lugar.
   2. **Tocar algo del hero la termina de golpe** (`terminarEntradaDeLaPortada`
      en app.js): el buscador no espera a que termine la animación, y un
      calendario abierto en medio de la bajada saldría corrido por lo mismo.
   3. **Con "reducir movimiento" no hay animación**: todo está desde el
      principio.

   El contenido va centrado, como en el original. Las tres pastillas de
   confianza pasaron debajo del buscador: arriba competían con el título, y
   pegadas al botón de buscar dicen lo que el huésped quiere saber justo antes
   de tocarlo.
   =========================================================================== */
.hero {
  --hero-caida: -50px;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  justify-items: center;
  padding: 118px clamp(18px, 4vw, 56px) 64px;
  /* Lo que se ve antes de que llegue la foto: el mismo verde casi negro de
     la capa de encima, así la foto aparece desde oscuro y no desde blanco. */
  background: var(--carbon);
  text-align: center;
}

.hero-bg {
  background-image: url("assets/frente.jpg");
}

/* Pareja en toda la foto, como el velo del 40% del original: con el texto
   centrado, el oscurecido de izquierda a derecha de antes dejaba el final del
   título sobre la parte más clara. El centro va un poco más oscuro, que es
   donde está la letra. */
.hero-overlay {
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgb(var(--rgb-velo) / 0.38), transparent 72%),
    linear-gradient(180deg, rgb(var(--rgb-velo) / 0.58), rgb(var(--rgb-velo) / 0.46) 42%, rgb(var(--rgb-velo) / 0.74));
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1000px, 100%);
}

/* La etiqueta en su recuadro, como la primera línea del original. */
.hero .eyebrow {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 8px 16px;
  color: #ffffff;
  background: rgb(var(--rgb-acento) / 0.82);
  border-radius: 6px;
  line-height: 1.45;
  text-wrap: balance;
}

/* En el teléfono la etiqueta va en dos renglones: se corta entre una frase y
   la otra, nunca adentro ("Atención / directa"). */
.hero .eyebrow span {
  white-space: nowrap;
}

.hero .hero-brand-title {
  justify-items: center;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
}

.hero-copy {
  max-width: 700px;
  margin: 18px auto 30px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

.hero .booking-card {
  width: min(980px, 100%);
  /* El centrado del hero no entra al formulario ni al calendario. */
  text-align: left;
}

.hero .trust-strip {
  justify-content: center;
  margin: 18px 0 0;
}

@keyframes hero-foto {
  from {
    opacity: 0;
  }
}

@keyframes hero-baja {
  from {
    opacity: 0;
    transform: translateY(var(--hero-caida));
  }
}

.hero-bg {
  animation: hero-foto 0.9s ease-out backwards;
}

.hero .eyebrow,
.hero .hero-brand-title,
.hero-copy,
.hero .booking-card,
.hero .trust-strip {
  animation: hero-baja 1.1s cubic-bezier(0.645, 0.045, 0.355, 1) backwards;
}

.hero .eyebrow {
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  animation-delay: 0.35s;
}

.hero .hero-brand-title {
  animation-delay: 0.7s;
}

.hero-copy {
  animation-delay: 1.05s;
}

.hero .booking-card {
  animation-delay: 1.4s;
}

.hero .trust-strip {
  animation-delay: 1.55s;
}

@media (max-width: 760px) {
  .hero {
    /* El original también achica la caída en el teléfono. */
    --hero-caida: -30px;
    padding-top: 100px;
    padding-bottom: 44px;
  }

  .hero .eyebrow {
    margin-bottom: 14px;
    padding: 7px 12px;
    font-size: 0.74rem;
  }

  .hero-copy {
    margin: 14px auto 22px;
  }

  /* En el teléfono las tres van como texto con su viñeta, sin pastilla: una
     pastilla por renglón a todo el ancho ocupaba tres renglones debajo del
     buscador, y la última quedaba debajo del botón del asistente. */
  .hero .trust-strip {
    gap: 4px 14px;
    margin-top: 14px;
  }

  .hero .trust-strip span {
    width: auto;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: 0.74rem;
    backdrop-filter: none;
  }

  .hero .trust-strip span::before {
    box-shadow: none;
  }
}

@media (max-width: 420px) {
  .hero {
    padding-top: 92px;
    padding-bottom: 36px;
  }

  .hero .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.07em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hero .eyebrow,
  .hero .hero-brand-title,
  .hero-copy,
  .hero .booking-card,
  .hero .trust-strip {
    animation: none;
  }
}

/* ===========================================================================
   Apartados de la portada: la misma entrada que el hero, al bajar (07/10)

   Pedido de Juan después de ver la portada publicada: "animaciones similares
   para todos los otros apartados". Cada bloque (la tira de preventa, la
   historia, las habitaciones, la galería, el cierre y el pie) baja y aparece
   como los del hero cuando entra en pantalla, una sola vez. Lo maneja
   `revelarAlBajar()` en app.js con dos atributos:

   - `data-revelar`: esperando, invisible. Lo pone el JS, así que sin JS (o
     sin IntersectionObserver) no se esconde nada.
   - `data-revelado`: ya entró en pantalla y corre la animación. Al terminar
     se borran los dos. Si no, mostrar y ocultar algo después (los filtros de
     la galería usan `hidden`) la repetiría.

   Lo que entra junto baja en cascada: 0,12 s entre uno y otro, en el orden
   en que se lee. Si entran muchos juntos (las fotos de la galería), el paso
   se achica para que la cascada entera no pase de 0,72 s. La caída es más corta y la animación más rápida que en el
   hero (0,9 s), porque acá el huésped va bajando por la página y no puede
   quedarse esperando a cada fila. La curva es la misma.
   =========================================================================== */
:root {
  --caida-al-revelar: -40px;
}

@keyframes revelar {
  from {
    opacity: 0;
    transform: translateY(var(--caida-al-revelar));
  }
}

@keyframes revelar-sin-moverse {
  from {
    opacity: 0;
  }
}

[data-revelar]:not([data-revelado]) {
  opacity: 0;
}

[data-revelado] {
  animation: revelar 0.9s cubic-bezier(0.645, 0.045, 0.355, 1) backwards;
}

@media (max-width: 760px) {
  :root {
    --caida-al-revelar: -24px;
  }
}

/* Con "reducir movimiento" solo el fundido, sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  [data-revelado] {
    animation: revelar-sin-moverse 0.4s ease-out backwards;
  }
}

/* Lo que todavía no entró en pantalla no puede faltar en el papel. */
@media print {
  [data-revelar] {
    opacity: 1 !important;
    animation: none !important;
  }
}