:root {
  --ink: #162321;
  --muted: #60706d;
  --paper: #ffffff;
  --line: #dfe7e5;
  --sage: #4f7770;
  --sage-dark: #173f3b;
  --clay: #936b45;
  --gold: #caa35d;
  --cream: #ffffff;
  --soft: #f3f7f6;
  --wine: #7a2d2f;
  --terracotta: #a87350;
  --coffee: #173f3b;
  --trust: #0f766e;
  --trust-dark: #0b4f4a;
  --trust-soft: #e9f5f3;
  --sand: #f7f1e8;
  --shadow: 0 20px 60px rgba(15, 42, 38, 0.12);
  --radius: 8px;
}

/* Modern trust-focused visual system */
body {
  background: #ffffff;
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
}

.site-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(223, 231, 229, 0.95);
  box-shadow: 0 1px 0 rgba(15, 42, 38, 0.03);
}

.site-header.is-compact {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 34px rgba(15, 42, 38, 0.08);
}

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

.brand-script,
.brand-name,
h1,
h2 {
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
}

.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;
  letter-spacing: 0;
}

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

.nav a:hover,
.ghost-button:hover {
  background: var(--trust-soft);
  border-color: rgba(15, 118, 110, 0.22);
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(8, 26, 24, 0.86), rgba(8, 26, 24, 0.54) 46%, rgba(8, 26, 24, 0.16)),
    linear-gradient(0deg, rgba(8, 26, 24, 0.62), transparent 48%);
}

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

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

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

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

.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: #64d6ca;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(100, 214, 202, 0.18);
}

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

.results-trust span {
  color: var(--trust-dark);
  background: var(--trust-soft);
  border-color: rgba(15, 118, 110, 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 rgba(15, 42, 38, 0.1);
}

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

input,
select,
.date-trigger,
.guest-stepper {
  background: #ffffff;
  border-color: #d7e2df;
  border-radius: 10px;
}

.date-trigger:hover,
input:hover,
select:hover {
  background: #fbfdfd;
  border-color: rgba(15, 118, 110, 0.4);
}

input:focus,
select:focus,
textarea:focus,
.date-trigger:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 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 rgba(15, 118, 110, 0.22);
}

.primary-button:hover {
  background: #083f3b;
}

.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);
}

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

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

.guest-stepper button {
  color: var(--trust-dark);
  background: var(--trust-soft);
}

.guest-stepper button:hover,
.calendar-day.is-range {
  background: rgba(15, 118, 110, 0.1);
  border-color: rgba(15, 118, 110, 0.2);
}

.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 {
  background: var(--trust-dark);
  border-color: var(--trust-dark);
}

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

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

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

.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-picker label,
.extras-summary,
.success-note {
  background: var(--trust-soft);
  border-color: rgba(15, 118, 110, 0.16);
}

.showcase-room-card:hover,
.combo-card.is-recommended {
  border-color: rgba(15, 118, 110, 0.34);
  box-shadow: 0 22px 54px rgba(15, 42, 38, 0.14);
}

.recommendation-badge {
  background: var(--trust-dark);
}

.result-rate-row {
  background: #f7faf9;
}

.price-breakdown {
  border-top-color: rgba(15, 118, 110, 0.18);
}

.info-strip {
  background: var(--line);
}

.info-strip div,
.chat header {
  background: linear-gradient(135deg, #0b4f4a, #0f766e);
}

.message {
  background: #f1f6f5;
}

/* Header brand restore */
.brand-title {
  display: block;
  color: var(--ink);
  line-height: 1.05;
  white-space: nowrap;
}

.site-header.is-compact .brand-title {
  display: block;
  line-height: 1.05;
}

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

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

.brand small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: "Monotype Corsiva", "Palatino Linotype", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.05;
  white-space: nowrap;
}

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

.photo-card,
.restaurant-image {
  box-shadow: 0 18px 44px rgba(15, 42, 38, 0.12);
}

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

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

  .brand-script,
  .brand-name {
    font-size: 1.28rem;
  }

  .brand small {
    font-size: 0.82rem;
  }
}

/* Header brand final override */
.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;
}

.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;
}

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

.brand-name {
  display: block;
  font-family: "Arial Narrow", "Bahnschrift Condensed", "Agency FB", Impact, sans-serif;
  font-size: 1.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  line-height: 1.1;
  white-space: nowrap;
}

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

.hero-brand-title {
  display: grid;
  gap: 0;
  max-width: 760px;
  color: #ffffff;
  line-height: 0.82;
  text-transform: none;
}

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

.hero-brand-name {
  display: block;
  font-family: "Arial Narrow", "Bahnschrift Condensed", "Agency FB", Impact, sans-serif;
  font-size: clamp(4.2rem, 11vw, 8.7rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

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

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

  .hero-brand-script {
    font-size: clamp(2rem, 11vw, 3.4rem);
  }

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

/* Facade sign typography */
.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;
}

.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;
}

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

.brand-name {
  display: block;
  font-family: "Arial Narrow", "Bahnschrift Condensed", "Agency FB", Impact, sans-serif;
  font-size: 1.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  line-height: 1.1;
  white-space: nowrap;
}

.hero-brand-title {
  display: grid;
  gap: 0;
  max-width: 760px;
  color: #ffffff;
  line-height: 0.82;
  text-transform: none;
}

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

.hero-brand-name {
  display: block;
  font-family: "Arial Narrow", "Bahnschrift Condensed", "Agency FB", Impact, sans-serif;
  font-size: clamp(4.2rem, 11vw, 8.7rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

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

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

  .hero-brand-script {
    font-size: clamp(2rem, 11vw, 3.4rem);
  }

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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--ink);
  background: #ffffff;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  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.
  */
}

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: 1px;
}

.stay-summary-pill {
  flex: 1;
  max-width: 520px;
  padding: 9px 12px;
  color: var(--sage-dark);
  background: var(--soft);
  border: 1px solid rgba(184, 137, 53, 0.32);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 900;
  text-align: center;
}

.stay-summary-pill[hidden] {
  display: none;
}

.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 rgba(184, 137, 53, 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/hosteria-exterior.png") 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 rgba(23, 33, 31, 0.22);
  transform: translateX(-50%);
  overflow-y: auto;
}

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

.guest-picker {
  position: fixed;
  left: 50%;
  top: clamp(126px, 20vh, 200px);
  z-index: 40;
  display: grid;
  gap: 14px;
  width: min(420px, calc(100vw - 36px));
  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 rgba(23, 33, 31, 0.22);
  transform: translateX(-50%);
}

.guest-picker[hidden] {
  display: none;
}

.guest-picker-heading {
  display: grid;
  gap: 4px;
  text-align: center;
}

.guest-picker-heading span {
  color: var(--trust);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.guest-picker-heading strong {
  font-size: 1.08rem;
}

.guest-picker-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.guest-picker-options button {
  min-height: 48px;
  color: var(--trust-dark);
  background: var(--trust-soft);
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 900;
}

.guest-picker-options button:hover,
.guest-picker-options button.is-selected {
  color: white;
  background: var(--trust-dark);
  border-color: var(--trust-dark);
}

.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: rgba(184, 137, 53, 0.18);
  border-color: rgba(184, 137, 53, 0.34);
}

.calendar-day:disabled {
  color: #b7beba;
  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: rgba(184, 137, 53, 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), #7a5639);
  border: 1px solid var(--coffee);
  box-shadow: 0 10px 22px rgba(79, 54, 37, 0.18);
}

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

.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);
}

.history-section {
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  background:
    linear-gradient(120deg, rgba(233, 245, 243, 0.82), rgba(255, 255, 255, 0.94) 44%),
    #ffffff;
}

.history-copy {
  display: grid;
  gap: 18px;
  max-width: 620px;
}

.history-copy h2 {
  margin: 0;
  max-width: 620px;
  font-size: clamp(2rem, 4.2vw, 3.85rem);
  line-height: 1.02;
}

.history-text {
  display: grid;
  gap: 14px;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.62;
}

.history-text p {
  margin: 0;
}

.history-text strong {
  color: var(--ink);
}

.history-carousel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.history-carousel-frame {
  position: relative;
  min-height: clamp(360px, 46vw, 610px);
  background:
    linear-gradient(135deg, rgba(15, 42, 38, 0.08), rgba(255, 255, 255, 0.92)),
    #f8fbfa;
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(15, 42, 38, 0.16);
  overflow: hidden;
}

.history-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  opacity: 0;
  transform: scale(1.018);
  transition: opacity 620ms ease, transform 900ms ease;
}

.history-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.history-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.history-carousel-controls {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 10px;
}

.history-carousel-controls button {
  display: grid;
  place-items: center;
  min-height: 42px;
  color: var(--trust-dark);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(15, 42, 38, 0.08);
  font-size: 1.35rem;
  font-weight: 900;
}

.history-carousel-controls button:hover {
  color: white;
  background: var(--trust-dark);
  border-color: var(--trust-dark);
}

.history-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.history-carousel-dots button {
  width: 9px;
  min-height: 9px;
  padding: 0;
  background: rgba(15, 118, 110, 0.22);
  border: 0;
  box-shadow: none;
}

.history-carousel-dots button.is-active {
  width: 26px;
  background: var(--trust-dark);
}

.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 rgba(23, 33, 31, 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: rgba(184, 137, 53, 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: rgba(23, 33, 31, 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 rgba(184, 137, 53, 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: rgba(184, 137, 53, 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 rgba(23, 33, 31, 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 rgba(184, 137, 53, 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 rgba(184, 137, 53, 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: #17211f;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(23, 33, 31, 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: #17211f;
  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 rgba(23, 33, 31, 0.06);
  font: inherit;
  text-align: left;
}

.results-summary button {
  cursor: pointer;
}

.results-summary button:hover {
  color: var(--sage-dark);
  border-color: rgba(184, 137, 53, 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 rgba(23, 33, 31, 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: #aeb6b1;
  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,
.reservation-status-card {
  display: grid;
  gap: 16px;
}

.reservation-confirmation-card {
  padding: 20px;
  color: var(--ink);
  background: var(--trust-soft);
  border: 1px solid #cfe4e1;
  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,
.reservation-status-card-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 #cfe4e1;
  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 #cfe4e1;
  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 #cfe4e1;
}

.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;
}

.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: #f5faf8;
}

.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: #f5faf8;
}

.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 #cfe4e1;
  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 rgba(31, 42, 38, 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 #cfe4e1;
  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: #b9d8d3;
  background: linear-gradient(180deg, #ffffff 0%, #eef7f5 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: #f7faf9;
  border: 1px solid rgba(223, 231, 229, 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 rgba(15, 118, 110, 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: #edf6f4;
  border: 1px solid #cfe4e1;
}

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

.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: rgba(19, 28, 25, 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 rgba(223, 231, 229, 0.95);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(15, 42, 38, 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 rgba(15, 118, 110, 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: #0f766e;
  border-color: #0f766e;
}

.danger-button:hover {
  background: #0b4f4a;
  border-color: #0b4f4a;
}

.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;
}

/* Panel de extras ANTES de pedir los datos del huesped -- mismo ritmo
   visual que .reservation-form (grid + 10px), asi el cambio de un panel al
   otro (al apretar "Continuar") no se siente como una pantalla distinta. */
.extras-before {
  display: grid;
  gap: 14px;
}

/* Mismo bug/fix que .reservation-form[hidden] arriba: sin esto, el panel de
   extras nunca desaparecia de verdad al pasar al formulario. */
.extras-before[hidden] {
  display: none;
}

.extras-before-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.extras-picker-empty {
  margin: 0;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 0.92rem;
  background: var(--trust-soft, #f2f9f8);
  border-radius: 8px;
}

.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 rgba(23, 33, 31, 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 rgba(184, 137, 53, 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 rgba(184, 137, 53, 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 rgba(184, 137, 53, 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 rgba(23, 33, 31, 0.08);
}

.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-picker {
  display: grid;
  gap: 8px;
}

.extras-picker label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px;
  color: var(--ink);
  background: #fff6ec;
  border: 1px solid rgba(184, 137, 53, 0.24);
  border-radius: var(--radius);
}

.extras-picker input {
  width: 18px;
  min-height: 18px;
  margin-top: 3px;
  accent-color: var(--coffee);
}

.extras-picker span {
  display: grid;
  gap: 2px;
}

.extras-picker small {
  color: var(--muted);
  font-weight: 600;
  line-height: 1.25;
}

.extras-picker label.is-disabled {
  opacity: 0.55;
  background: #f2f2f2;
  border-color: var(--line);
}

.extras-picker label.is-disabled small {
  color: var(--coffee);
  font-weight: 800;
}

.extras-summary {
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  background: #fff6ec;
  border: 1px solid rgba(184, 137, 53, 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: rgba(184, 137, 53, 0.16);
  border: 1px solid rgba(184, 137, 53, 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%, rgba(233, 245, 243, 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;
}

.site-footer {
  color: rgba(255, 255, 255, 0.8);
  background: #073b37;
}

.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: #b7ded9;
  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: #b7ded9;
  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);
}

.amadeus-live-menu {
  display: grid;
  gap: 28px;
  padding: clamp(54px, 7vw, 96px) clamp(18px, 5vw, 76px);
  background: #fffaf3;
}

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

.amadeus-menu-loading {
  margin: 0;
  color: var(--muted);
}

.amadeus-menu-category {
  display: grid;
  gap: 18px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid rgba(95, 69, 45, 0.18);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(79, 54, 37, 0.08);
}

.amadeus-menu-category header {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(95, 69, 45, 0.14);
}

.amadeus-menu-category h3,
.amadeus-menu-category p {
  margin: 0;
}

.amadeus-menu-category h3 {
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.amadeus-menu-category header > p {
  color: var(--muted);
  line-height: 1.5;
}

.amadeus-menu-items {
  display: grid;
}

.amadeus-menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid rgba(95, 69, 45, 0.12);
}

.amadeus-menu-item:last-child {
  border-bottom: 0;
}

.amadeus-menu-item div {
  display: grid;
  gap: 4px;
}

.amadeus-menu-item strong {
  color: var(--ink);
}

.amadeus-menu-item span {
  color: var(--muted);
  line-height: 1.45;
}

.amadeus-menu-item b {
  color: var(--coffee);
  white-space: nowrap;
}

.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: #b7ded9;
}

.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: #073b37;
  background: #b7ded9;
  border: 1px solid #b7ded9;
  font-weight: 900;
}

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

.newsletter-status {
  min-height: 1.4em;
  margin: 0;
  color: #d8f0ed;
  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;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(190px, 20vw, 300px);
  gap: 12px;
}

.photo-card {
  position: relative;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 16px 46px rgba(23, 33, 31, 0.14);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.photo-card.large {
  grid-column: span 2;
  grid-row: span 2;
}

.photo-card.tall {
  grid-row: span 2;
}

.photo-card picture,
.photo-card img {
  width: 100%;
  height: 100%;
}

.photo-card picture {
  display: block;
}

.photo-card img {
  object-fit: cover;
  display: block;
  transition: transform 420ms ease, filter 320ms ease;
}

.photo-card:hover {
  z-index: 2;
  box-shadow: 0 26px 68px rgba(15, 42, 38, 0.22);
  transform: translateY(-4px);
}

.photo-card:hover img {
  filter: brightness(0.88);
  transform: scale(1.055);
}

.photo-card figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 34px 16px 14px;
  color: white;
  background: linear-gradient(180deg, transparent, rgba(8, 26, 24, 0.82));
  font-weight: 800;
  transform: translateY(4px);
  transition: transform 240ms ease;
}

.photo-card:hover figcaption {
  transform: translateY(0);
}

.restaurant {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(22px, 5vw, 56px);
  align-items: center;
  background: #ffffff;
}

.restaurant-image {
  min-height: 560px;
  background: url("assets/paella-amadeus.jpg") center/cover no-repeat;
  border-radius: var(--radius);
  box-shadow: 0 16px 46px rgba(23, 33, 31, 0.13);
}

.restaurant-content p {
  color: var(--muted);
}

.menu-list,
.full-menu {
  display: grid;
  gap: 10px;
}

.menu-list article,
.full-menu article {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.menu-list span,
.full-menu span {
  color: var(--clay);
  font-weight: 800;
}

.info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding-block: 0;
  background: var(--line);
}

.info-strip div {
  display: grid;
  gap: 5px;
  min-height: 120px;
  padding: 24px;
  background: linear-gradient(135deg, var(--coffee), #7a5639);
  color: white;
}

.info-strip span {
  color: rgba(255, 255, 255, 0.78);
}

.faq details {
  max-width: 900px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 800;
}

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

.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: rgba(184, 137, 53, 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), #7a5639);
}

.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: rgba(23, 33, 31, 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;
}

.reservation-status-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  background: var(--trust-soft);
  border: 1px solid #cfe4e1;
  border-radius: 8px;
}

.reservation-status-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.reservation-status-card > div strong {
  color: var(--trust-dark);
}

.reservation-status-label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reservation-status-card dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.reservation-status-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid #cfe4e1;
}

.reservation-status-card dt {
  color: var(--muted);
}

.reservation-status-card dd {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  text-align: right;
}

.reservation-status-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.reservation-status-card .reservation-detail-list div {
  display: grid;
  grid-template-columns: minmax(110px, 0.55fr) minmax(0, 1fr);
  gap: 12px;
}

.reservation-status-card .reservation-detail-list dd {
  text-align: right;
}

.reservation-lookup-card {
  gap: 16px;
  background: linear-gradient(180deg, #f7fbfa 0%, #eef7f5 100%);
  border-color: #b9d8d3;
}

.reservation-status-card .reservation-lookup-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: white;
  border: 1px solid #d8e9e6;
  border-radius: 8px;
}

.reservation-lookup-hero > div {
  display: grid;
  gap: 4px;
}

.reservation-lookup-hero strong {
  color: var(--trust-dark);
  font-size: 1.1rem;
}

.reservation-lookup-code {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 0 12px;
  color: var(--ink);
  background: #f4efe8;
  border: 1px solid #e3d4c0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 900;
}

.reservation-lookup-message {
  padding: 0 4px;
}

.reservation-status-card .reservation-lookup-next {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: white;
  border: 1px solid #d8e9e6;
  border-radius: 8px;
}

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

.reservation-lookup-next ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.45;
}

.reservation-lookup-actions {
  justify-content: flex-end;
}

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

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

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.admin-view {
  display: grid;
  gap: 16px;
}

.admin-view[hidden] {
  display: none;
}

.admin-login,
.period-form {
  display: grid;
  gap: 14px;
}

.period-form h3 {
  margin: 0;
}

.admin-topline {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

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

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

.period-list {
  display: grid;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding-top: 6px;
}

.period-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.period-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.period-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.period-prices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.period-prices span {
  display: grid;
  gap: 2px;
  padding: 8px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.86rem;
}

.period-prices strong {
  color: var(--ink);
}

.special-day-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.special-day-editor h3 {
  margin: 0 0 4px;
}

.special-day-editor p {
  margin: 0;
}

.special-day-list {
  display: grid;
  gap: 8px;
}

.special-day-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.special-day-card span {
  color: var(--muted);
  font-size: 0.92rem;
}

.form-actions,
.period-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%;
  }

  .gallery-section .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-section .photo-card.large {
    grid-column: span 2;
    grid-row: span 2;
  }

  .gallery-section .photo-card.tall {
    grid-row: span 2;
  }

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

  .booking-card,
  .availability-panel,
  .room-grid,
  .restaurant,
  .info-strip,
  .photo-grid,
  .booking-details,
  .period-prices {
    grid-template-columns: 1fr 1fr;
  }

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

  .photo-card.large,
  .photo-card.tall {
    grid-column: auto;
    grid-row: auto;
  }
}

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

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

  .amadeus-full-menu {
    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;
  }

  .reservation-status-card dl div {
    display: grid;
    gap: 4px;
  }

  .reservation-status-card dd {
    text-align: left;
  }

  .reservation-status-card .reservation-lookup-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .reservation-lookup-code {
    justify-content: center;
    width: 100%;
  }

  .reservation-lookup-actions {
    display: grid;
    justify-content: stretch;
  }

  .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, rgba(18, 28, 25, 0.42), rgba(18, 28, 25, 0.86));
  }

  .booking-card,
  .availability-panel,
  .room-grid,
  .restaurant,
  .info-strip,
  .photo-grid,
  .results-layout,
  .booking-details,
  .summary-includes,
  .admin-grid,
  .period-prices {
    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;
  }

  .stay-summary-pill {
    order: 3;
    width: 100%;
    max-width: none;
    font-size: 0.76rem;
  }

  .photo-grid {
    grid-auto-rows: 300px;
  }

  .admin-topline {
    display: grid;
  }

  .special-day-card {
    display: grid;
  }

  .restaurant-image {
    min-height: 340px;
  }

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

/* Final modern trust overrides */
body {
  background: #ffffff;
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  width: 100%;
  /* overflow-x:hidden sacado de aca tambien -- ver el comentario en el
     body{} de arriba (linea ~597), 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 rgba(223, 231, 229, 0.95);
  box-shadow: 0 1px 0 rgba(15, 42, 38, 0.03);
}

.site-header.is-compact {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 34px rgba(15, 42, 38, 0.08);
}

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

.brand-script,
.brand-name,
h1,
h2 {
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
}

.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: 900;
}

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

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(8, 26, 24, 0.86), rgba(8, 26, 24, 0.54) 46%, rgba(8, 26, 24, 0.16)),
    linear-gradient(0deg, rgba(8, 26, 24, 0.62), transparent 48%);
}

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

.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: #64d6ca;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(100, 214, 202, 0.18);
}

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

.results-trust span {
  color: var(--trust-dark);
  background: var(--trust-soft);
  border-color: rgba(15, 118, 110, 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 rgba(15, 42, 38, 0.1);
}

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

input,
select,
.date-trigger,
.guest-stepper {
  background: #ffffff;
  border-color: #d7e2df;
  border-radius: 10px;
}

.date-trigger:hover,
input:hover,
select:hover {
  background: #fbfdfd;
  border-color: rgba(15, 118, 110, 0.4);
}

input:focus,
select:focus,
textarea:focus,
.date-trigger:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(15, 118, 110, 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 rgba(15, 118, 110, 0.22);
}

.primary-button:hover {
  background: #083f3b;
}

.secondary-button {
  color: var(--trust-dark);
  border-color: #cfdedb;
  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-picker label,
.extras-summary,
.success-note {
  background: var(--trust-soft);
  border-color: rgba(15, 118, 110, 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: rgba(15, 118, 110, 0.1);
  border-color: rgba(15, 118, 110, 0.2);
}

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

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

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

.showcase-room-card:hover,
.combo-card.is-recommended {
  border-color: rgba(15, 118, 110, 0.34);
  box-shadow: 0 22px 54px rgba(15, 42, 38, 0.14);
}

.result-rate-row {
  background: #f7faf9;
}

.price-breakdown {
  border-top-color: rgba(15, 118, 110, 0.18);
}

.info-strip {
  background: var(--line);
}

.info-strip div,
.chat header {
  background: linear-gradient(135deg, #0b4f4a, #0f766e);
}

.message {
  background: #f1f6f5;
}

.photo-card,
.restaurant-image {
  box-shadow: 0 18px 44px rgba(15, 42, 38, 0.12);
}

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

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

/* Header brand final override */
.brand-title {
  display: block;
  color: var(--ink);
  line-height: 1.05;
  white-space: nowrap;
}

.site-header.is-compact .brand-title {
  display: block;
  line-height: 1.05;
}

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

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

.brand small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: "Monotype Corsiva", "Palatino Linotype", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.05;
  white-space: nowrap;
}

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

@media (max-width: 680px) {
  .brand-script,
  .brand-name {
    font-size: 1.28rem;
  }

  .brand small {
    font-size: 0.82rem;
  }
}

/* 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: "Arial Narrow", "Bahnschrift Condensed", "Agency FB", Impact, sans-serif;
  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: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  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: "Arial Narrow", "Bahnschrift Condensed", "Agency FB", Impact, sans-serif;
  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;
  }

  .history-section {
    grid-template-columns: 1fr;
  }

  .history-copy {
    max-width: 760px;
  }

  .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 rgba(23, 33, 31, 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;
  }

  .history-carousel-frame {
    min-height: 360px;
  }

  .photo-grid {
    grid-auto-rows: 220px;
  }

  .gallery-section .photo-card.large,
  .gallery-section .photo-card.tall {
    grid-column: auto;
    grid-row: auto;
  }

  .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;
  }

  .extras-picker label {
    padding: 9px;
  }

  .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;
  }

  .history-section {
    padding-inline: 14px;
  }

  .history-carousel-frame {
    min-height: 300px;
  }

  .history-carousel-controls {
    grid-template-columns: 38px 1fr 38px;
    gap: 8px;
  }

  .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;
  }

  .extras-picker small {
    font-size: 0.82rem;
  }

  .photo-grid {
    grid-auto-rows: 190px;
  }
}

@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;
  }
}

/* Dedicated Restaurante Amadeus page */
.amadeus-page {
  margin: 0;
  color: #261b12;
  background: #fffdf9;
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
}

.amadeus-page a {
  text-decoration: none;
}

.amadeus-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 10px clamp(16px, 4vw, 54px);
  background: rgba(55, 17, 18, 0.94);
  border-bottom: 1px solid rgba(212, 173, 87, 0.32);
  backdrop-filter: blur(14px);
}

.amadeus-header-logo img {
  display: block;
  width: 150px;
  height: 48px;
  object-fit: contain;
}

.amadeus-back,
.amadeus-menu-link {
  color: #fff8e9;
  font-size: 0.88rem;
  font-weight: 800;
}

.amadeus-menu-link {
  justify-self: end;
  padding: 10px 14px;
  color: #371112;
  background: #d4ad57;
  border-radius: 999px;
}

.amadeus-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: end;
  padding: 130px clamp(18px, 6vw, 90px) 80px;
  overflow: hidden;
}

.amadeus-hero-image,
.amadeus-hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.amadeus-hero-image {
  object-fit: cover;
}

.amadeus-hero-overlay {
  background:
    linear-gradient(90deg, rgba(22, 12, 7, 0.88), rgba(22, 12, 7, 0.58) 52%, rgba(22, 12, 7, 0.2)),
    linear-gradient(0deg, rgba(22, 12, 7, 0.72), transparent 55%);
}

.amadeus-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  max-width: 760px;
  color: #fff;
}

.amadeus-hero-logo {
  width: min(340px, 72vw);
  max-height: 150px;
  object-fit: contain;
  object-position: left center;
}

.amadeus-hero-content p,
.amadeus-kicker {
  margin: 0;
  color: #d4ad57;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.amadeus-hero-content h1 {
  margin: 0;
  max-width: 760px;
  color: #fff;
  font-size: clamp(3rem, 7vw, 6.4rem);
  line-height: 0.94;
}

.amadeus-hero-content > span {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.08rem;
  line-height: 1.6;
}

.amadeus-guest-benefit {
  width: fit-content;
  padding: 10px 14px;
  color: #371112;
  background: #d4ad57;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 900;
}

.amadeus-hero-actions,
.amadeus-closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.amadeus-primary,
.amadeus-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 900;
}

.amadeus-primary {
  color: #fff;
  background: #6f1d1b;
  box-shadow: 0 14px 30px rgba(111, 29, 27, 0.28);
}

.amadeus-secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(10px);
}

.amadeus-intro,
.amadeus-feature,
.amadeus-menu-section,
.amadeus-closing {
  padding: clamp(64px, 8vw, 110px) clamp(18px, 6vw, 90px);
}

.amadeus-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(28px, 6vw, 90px);
  align-items: end;
}

.amadeus-intro h2,
.amadeus-feature h2,
.amadeus-section-heading h2,
.amadeus-closing h2 {
  margin: 10px 0 0;
  color: #261b12;
  font-size: clamp(2.1rem, 4.5vw, 4.3rem);
  line-height: 1;
}

.amadeus-intro > p,
.amadeus-feature-copy > p,
.amadeus-section-heading > p {
  margin: 0;
  color: #756655;
  font-size: 1.05rem;
  line-height: 1.75;
}

.amadeus-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
  background: #f7f0e5;
}

.amadeus-feature-image {
  min-height: 520px;
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(54, 35, 20, 0.16);
  overflow: hidden;
}

.amadeus-feature-image img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

.amadeus-feature-copy {
  display: grid;
  gap: 18px;
}

.amadeus-facts {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(111, 29, 27, 0.16);
}

.amadeus-facts span {
  padding: 14px 0;
  color: #594734;
  border-bottom: 1px solid rgba(111, 29, 27, 0.16);
  font-weight: 800;
}

.amadeus-menu-section {
  background: #fffdf9;
}

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

.amadeus-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.amadeus-menu-grid article {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 260px;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(180, 141, 70, 0.22);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(54, 35, 20, 0.08);
}

.amadeus-menu-grid span {
  color: #b48d46;
  font-size: 0.82rem;
  font-weight: 900;
}

.amadeus-menu-grid h3 {
  margin: 0;
  color: #6f1d1b;
  font-size: 1.45rem;
}

.amadeus-menu-grid p {
  margin: 0;
  color: #756655;
  line-height: 1.65;
}

.amadeus-menu-cta {
  width: fit-content;
  margin-top: 28px;
}

.amadeus-closing {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
  background: #261b12;
}

.amadeus-closing h2 {
  color: #fff;
}

.amadeus-closing .amadeus-secondary {
  color: #fff;
}

@media (max-width: 920px) {
  .amadeus-intro,
  .amadeus-feature {
    grid-template-columns: 1fr;
  }

  .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;
  }

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

  .amadeus-closing {
    display: grid;
    align-items: start;
  }
}

@media (max-width: 620px) {
  .amadeus-header {
    grid-template-columns: 1fr auto;
  }

  .amadeus-header-logo {
    display: none;
  }

  .amadeus-hero {
    min-height: 88vh;
    padding-bottom: 48px;
  }

  .amadeus-hero-content h1 {
    font-size: clamp(2.7rem, 15vw, 4.5rem);
  }

  .amadeus-intro,
  .amadeus-feature,
  .amadeus-menu-section,
  .amadeus-closing {
    padding-inline: 16px;
  }

  .amadeus-feature-image,
  .amadeus-feature-image img {
    min-height: 320px;
  }

  .amadeus-menu-grid {
    grid-template-columns: 1fr;
  }

  .amadeus-menu-grid article {
    min-height: auto;
  }
}

.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);
}

.guest-picker-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-grid;
  place-items: center;
  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;
}

.guest-picker-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: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 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%, rgba(15, 118, 110, 0.55), transparent 62%),
    linear-gradient(90deg, var(--trust-dark), #0d5b55);
  /* 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 rgba(202, 163, 93, 0.55);
  border-bottom: 1px solid rgba(202, 163, 93, 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 rgba(202, 163, 93, 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: rgba(202, 163, 93, 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: rgba(15, 118, 110, 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: rgba(15, 118, 110, 0.3);
}

.reservar-campo.is-active {
  border-color: var(--trust);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 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: rgba(202, 163, 93, 0.13);
  border: 1px solid rgba(202, 163, 93, 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 rgba(15, 42, 38, 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: #2f3f3c;
  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); }