/* ==========================================================================
   Posada de los Palacios — estilos
   Fiel al diseño de Figma: Desktop 1440 px · Mobile 390 px
   ========================================================================== */

/* ---------- Tipografías (alojadas en la propia web) ---------- */
@font-face { font-family: "Cormorant Infant"; src: url("../fonts/cormorant-infant-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Infant"; src: url("../fonts/cormorant-infant-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
/* Arimo solo se descarga en equipos sin Helvetica Neue (Windows, Android) */
@font-face { font-family: "Arimo"; src: url("../fonts/arimo-400.woff") format("woff"); font-weight: 300 400; font-style: normal; font-display: swap; size-adjust: 100.7%; }
@font-face { font-family: "Arimo"; src: url("../fonts/arimo-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; size-adjust: 100.7%; }
@font-face { font-family: "Arimo"; src: url("../fonts/arimo-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; size-adjust: 100.7%; }

/* ---------- Variables del diseño ---------- */
:root {
  --crema: #F7F1EA;
  --crema-2: #F0E8D9;
  --acento: #D1BB8C;
  --acento-fuerte: #A8986A;
  --oscuro: #151313;
  --texto: #686868;
  --suave: #ACA09D;
  --blanco: #FFFFFF;
  --cristal: rgba(246, 241, 235, 0.2);
  --velo: rgba(0, 0, 0, 0.6);
  --serif: "Cormorant Infant", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, "Arimo", Arial, sans-serif;
  /* 1 unidad = 1 px en 1440; se reduce proporcionalmente entre 1024 y 1440 (lo ajusta main.js) */
  --u: min(1px, calc(100vw / 1440));
  /* márgenes laterales móviles (respetan la muesca del móvil en horizontal) */
  --gl: max(24px, env(safe-area-inset-left, 0px));
  --gr: max(24px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  :root {
    --gl: max(24px, env(safe-area-inset-left, 0px), calc((100vw - 600px) / 2));
    --gr: max(24px, env(safe-area-inset-right, 0px), calc((100vw - 600px) / 2));
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (min-width: 1024px) { html { scroll-padding-top: 144px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--crema);
  color: var(--oscuro);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
p, h1, h2, h3, dl, dd, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.dark :focus-visible, .menu :focus-visible, .hero :focus-visible, .ftr :focus-visible { outline-color: var(--crema); }

.i12 { width: 12px; height: 12px; flex: none; }
.i22 { width: 22px; height: 22px; flex: none; }
.i24 { width: 24px; height: 24px; flex: none; }
.i32 { width: 32px; height: 32px; flex: none; }

/* ---------- Tipos ---------- */
.h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--oscuro);
}
.eyebrow {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.eyebrow--strong { color: var(--acento-fuerte); }
.eyebrow--soft { color: var(--acento); }
.p { font-size: 16px; line-height: 26px; color: var(--texto); }
.p strong { font-weight: 700; }   /* «mejor precio» en negrita en vez de subrayado, que parecía un enlace (propietario, 09/11/2026) */
.dark { color: var(--crema); }
.dark .h2, .dark .p { color: var(--crema); }
.stack24 { display: flex; flex-direction: column; gap: 24px; }

@media (min-width: 1024px) {
  .h2 { font-size: 48px; line-height: 48px; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 16px 32px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn--line { border-color: var(--oscuro); color: var(--oscuro); }
.btn--line:hover { background: var(--oscuro); color: var(--crema); }
.btn--line-light { border-color: var(--crema); color: var(--crema); }
.btn--line-light:hover { background: var(--crema); color: var(--oscuro); }
.btn--gold { border: 0; background: var(--acento); color: var(--oscuro); }
.btn--gold:hover { background: var(--acento-fuerte); }
.btn--glass {
  border: 0;
  background: var(--cristal);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--crema);
}
.btn--glass:hover { background: rgba(246, 241, 235, 0.32); }

/* ==========================================================================
   CABECERA
   ========================================================================== */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--crema);
  transition: background-color .35s ease, box-shadow .35s ease, color .35s ease;
}
.hdr__in {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--gl);
  padding-right: var(--gr);
}
.hdr__left { display: none; }
.hdr__logo { display: block; flex: none; }
.hdr__logo img { width: 41.58px; height: 44px; }
.hdr__logo .logo-dark { display: none; width: 43.27px; height: 44.73px; }
.hdr__right { display: flex; align-items: center; gap: 16px; }
.hdr__link {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.hdr__sep { width: 1px; height: 24px; background: currentColor; flex: none; }
.hdr__book { display: none; }

.lang { position: relative; }
.lang__btn { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 16px; line-height: 24px; }
.lang__list {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 168px;
  padding: 8px 0;
  background: var(--blanco);
  border: 1px solid var(--crema-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  color: var(--oscuro);
  z-index: 5;
}
.lang__list a { display: block; padding: 8px 16px; font-size: 14px; line-height: 21px; letter-spacing: .05em; text-decoration: none; }
.lang__list a:hover, .lang__list a[aria-current] { background: var(--crema); }

/* cabecera al hacer scroll */
.hdr.is-solid { background: var(--crema); box-shadow: 0 4px 8px rgba(0, 0, 0, .1); color: var(--oscuro); }
.hdr.is-solid .hdr__in { height: 76px; }
.hdr.is-solid .logo-gold { display: none; }
.hdr.is-solid .logo-dark { display: block; }

@media (min-width: 1024px) {
  .hdr__in {
    height: 144px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: 0 calc(64 * var(--u));
  }
  .hdr.is-solid .hdr__in { height: 144px; }
  .hdr__left { display: flex; align-items: center; gap: 24px; }
  .hdr__logo { justify-self: center; }
  .hdr__logo img { width: 75.593px; height: 80px; }
  .hdr__logo .logo-dark { width: 76px; height: 79px; }
  .hdr__right { justify-self: end; gap: 32px; }
  .hdr__sep--m, .hdr__link--m { display: none; }
  .hdr__book { display: inline-flex; }
  .hdr.is-solid .hdr__book {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--oscuro);
    color: var(--oscuro);
    font-size: 18px;
    line-height: 27px;
    padding: 15px 31px;
  }
  .hdr.is-solid .hdr__book:hover { background: var(--oscuro); color: var(--crema); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #3a3129;
  color: var(--crema);
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
picture { display: contents; }  /* <picture> solo cambia la foto según el ancho; no afecta a la maqueta */
picture > source { display: none; }  /* que <source> no cuente como elemento en las filas flexibles */
.hero__shade { position: absolute; inset: 0; background: var(--velo); }
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 4px var(--gr) 0 var(--gl);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__text { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.hero__title {
  margin: 0;
  max-width: 342px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 40px;
  text-transform: uppercase;
}
.hero__sub { font-size: 18px; line-height: 22px; letter-spacing: 0.05em; }
.hero__tag { max-width: 290px; font-weight: 300; font-size: 16px; line-height: 19px; letter-spacing: 0.05em; }
.book, .hero__down { display: none; }

@media (min-width: 1024px) {
  .hero {
    min-height: 690px;
    justify-content: flex-start;
    padding-top: 144px;
    padding-bottom: calc(64 * var(--u));
  }
  .hero__content { margin-block: auto; padding: 0 calc(64 * var(--u)); }
  .hero__title { max-width: 454px; font-size: 64px; line-height: 64px; }
  .hero__sub { font-size: 24px; line-height: 29px; }
  .hero__tag { max-width: 530px; }
  .hero__down {
    display: block;
    position: relative;
    z-index: 2;
    flex: none;
    color: var(--crema-2);
    line-height: 0;
  }
  .hero__down:hover { transform: translateY(3px); }
  .hero__down { transition: transform .25s ease; }
}

/* ---------- Barra de reserva (escritorio) ---------- */
@media (min-width: 1024px) {
  .book {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    width: 974px;
    max-width: 100%;
    margin-top: 80px;
    padding: 24px;
    border-radius: 24px;
    background: var(--cristal);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: var(--crema);
    text-align: left;
  }
}
.book__field { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.book__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 0;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
}
.book__val { overflow: hidden; text-overflow: ellipsis; }
.book__div { flex: none; width: 1px; height: 64px; background: var(--crema); }
.book__field--promo { gap: 12px; padding: 16px 0; cursor: text; }
.book__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--crema);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
}
.book__input::placeholder { color: var(--crema); opacity: 1; }
.book__go { flex: none; }

/* desplegables blancos: calendario e invitados */
.cal, .guests {
  position: absolute;
  z-index: 20;
  top: calc(100% + 36px);
  background: var(--blanco);
  border: 1px solid var(--crema-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  color: var(--oscuro);
}
.cal { left: -75px; width: 384px; padding: 15px; }
.cal__head { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.cal__nav { width: 24px; height: 24px; display: grid; place-items: center; color: var(--oscuro); }
.cal__nav:disabled { opacity: .25; cursor: default; }
.cal__month { font-weight: 500; font-size: 16px; line-height: 24px; text-transform: uppercase; }
.cal__dow { display: grid; grid-template-columns: repeat(7, 48px); column-gap: 2.6667px; height: 48px; }
.cal__dow span { display: grid; place-items: center; font-size: 16px; line-height: 24px; color: var(--suave); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 8px; }
.cal__d { height: 48px; display: grid; place-items: center; font-size: 16px; line-height: 24px; color: var(--oscuro); }
.cal__d:empty { pointer-events: none; }
.cal__d:not(:disabled):hover, .cal__d.is-range { background: var(--crema); }
.cal__d.is-sel, .cal__d.is-sel:hover { background: var(--acento); border-radius: 999px; }
.cal__d:disabled { color: var(--suave); cursor: default; }

.guests { left: -24px; width: 300px; padding: 16px 24px; display: grid; gap: 12px; }
.guests__row { display: flex; align-items: center; justify-content: space-between; font-size: 16px; line-height: 24px; }
.step { display: flex; align-items: center; gap: 12px; }
.step button { width: 32px; height: 32px; border: 1px solid var(--oscuro); border-radius: 50%; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.step button:disabled { opacity: .3; cursor: default; }
.step output { min-width: 16px; text-align: center; }

/* ==========================================================================
   INTRO · Una casa con historia. Un lugar para quedarse.
   ========================================================================== */
.intro__in {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 80px var(--gr) 80px var(--gl);
}
.intro__col { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; }
@media (min-width: 1024px) {
  .intro__in {
    max-width: 1440px;
    margin: 0 auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    padding: calc(160 * var(--u)) calc(174 * var(--u));
  }
  .intro__title { width: calc(532 * var(--u)); }
  .intro__col { width: calc(422 * var(--u)); }
}

/* ---------- Foto ---------- */
.photo img { width: 100%; height: 260px; object-fit: cover; }
.photo--h497 img { height: 497px; }
.photo--h580 img { height: 580px; }
@media (min-width: 1024px) {
  .photo__in { padding: calc(80 * var(--u)) calc(24 * var(--u)) 0; }
  .photo img { height: calc(800 * var(--u)); }
}

/* ---------- Distancias ---------- */
.dist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 64px var(--gr) 64px var(--gl);
  text-align: center;
}
.dist__item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dist__n { font-family: var(--serif); font-weight: 700; font-size: 48px; line-height: 48px; text-transform: uppercase; color: var(--oscuro); }
.dist__l { font-size: 16px; line-height: 22px; color: var(--texto); }
.dist__item--3 .dist__l { max-width: 155px; }
@media (min-width: 1024px) {
  .dist {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: calc(240 * var(--u));
    padding: calc(128 * var(--u)) calc(174 * var(--u));
  }
}

/* ---------- Confort ---------- */
.confort {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 32px var(--gr) 64px var(--gl);
  text-align: center;
}
@media (min-width: 1024px) {
  .confort { padding: calc(128 * var(--u)) calc(174 * var(--u)); }
  .confort__title { width: calc(648 * var(--u)); }
  .confort__p { width: calc(422 * var(--u)); }
}

/* ---------- Galería ---------- */
.gal { padding-bottom: 64px; }
.gal__track {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__item { flex: none; width: 280px; height: 467px; scroll-snap-align: start; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; }
.prog { position: relative; height: 4px; background: rgba(21, 19, 19, .1); overflow: hidden; }
.prog__bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--oscuro); will-change: transform; }
.prog--gal { margin: 28px 17px 0 16px; }
.prog--gal .prog__bar { width: 41.45%; }
@media (min-width: 1024px) {
  .gal { padding-bottom: calc(80 * var(--u)); }
  .gal__track { gap: calc(24 * var(--u)); overflow: visible; scroll-snap-type: none; }
  .gal__item { flex: 1 1 0; width: auto; height: calc(800 * var(--u)); }
  .prog--gal { display: none; }
}

/* ==========================================================================
   HABITACIONES
   ========================================================================== */
.rooms { padding: 64px 0; }
.rooms__head { display: flex; flex-direction: column; gap: 24px; padding: 0 var(--gr) 0 var(--gl); }
.rooms__row { display: flex; flex-direction: column; gap: 64px; margin-top: 64px; }
.rooms__cards {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gl);
  padding: 0 var(--gr) 0 var(--gl);
  scrollbar-width: none;
}
.rooms__cards::-webkit-scrollbar { display: none; }
.rooms__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; padding: 0 var(--gr) 0 var(--gl); }
.rooms__aside .p { max-width: 307px; }
.rooms__aside .btn { max-width: 100%; white-space: normal; text-align: center; }   /* «Toutes les chambres» (10/11/2026) no cabe en una línea entre 1024 y 1279 px: pasa a dos en vez de salirse */

.card { flex: none; display: block; width: 255px; color: var(--oscuro); text-decoration: none; scroll-snap-align: start; }
.card__img { position: relative; height: 399px; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.card:hover .card__img img { transform: scale(1.03); }
.pill {
  position: absolute;
  left: 16px;
  top: 19px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--oscuro);
  color: var(--crema);
  font-size: 13px;
  line-height: 21px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 32px 8px; }  /* Figma 31/10: títulos de una línea centrados con el botón */
.card__title { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 24px; text-transform: uppercase; }
.circle-btn {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid var(--oscuro);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color .25s ease, color .25s ease;
}
.card:hover .circle-btn { background: var(--oscuro); color: var(--crema); }

@media (min-width: 1024px) {
  .rooms { max-width: 1440px; margin: 0 auto; padding: calc(160 * var(--u)) calc(64 * var(--u)); }
  .rooms__head { width: calc(626 * var(--u)); padding: 0; }
  .rooms__row { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 0; margin-top: calc(64 * var(--u)); }
  .rooms__cards {
    width: calc(864 * var(--u));
    justify-content: center;
    gap: calc(24 * var(--u));
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .card { width: calc(415.333 * var(--u)); }
  .card--tall .card__img { height: calc(650 * var(--u)); }
  .card--short .card__img { height: calc(480 * var(--u)); }
  .rooms__aside { width: calc(307 * var(--u)); padding: 0; }
  .rooms__aside .p { max-width: none; }
}

/* ==========================================================================
   UBICACIÓN
   ========================================================================== */
.loc, .walk, .contact { position: relative; overflow: hidden; isolation: isolate; background: #2a221c; }
.loc__bg {
  position: absolute;
  z-index: -2;
  left: -89.03%;
  top: -49.34%;
  width: 189.04%;
  height: 230.18%;
  max-width: none;
  object-fit: fill;
}
.veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--velo);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.loc__in { display: flex; flex-direction: column; align-items: center; gap: 64px; padding: 80px var(--gr) 80px var(--gl); }
.loc__text { display: flex; flex-direction: column; align-items: center; gap: 48px; text-align: center; }
.loc__map { display: block; width: 100%; max-width: 340px; aspect-ratio: 340 / 293; overflow: hidden; }
.loc__map img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .loc { min-height: calc(887 * var(--u)); display: flex; align-items: center; }
  .loc__in {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    flex-direction: row;
    gap: calc(64 * var(--u));
    padding: calc(124 * var(--u)) calc(64 * var(--u));
  }
  .loc__text { flex: 1 1 0; min-width: 0; }
  .loc__title { width: calc(622 * var(--u)); }
  .loc__p { width: calc(462 * var(--u)); }
  .loc__map { flex: none; width: calc(530 * var(--u)); max-width: none; aspect-ratio: 530 / 639; }
}

/* ---------- Mapa de Google que se activa al pulsar (Inicio y Cómo llegar) ---------- */
.gmap { position: relative; display: block; overflow: hidden; background: var(--crema-2); }
.gmap .gmap__img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px); transform: scale(1.06); transition: none; }
.gmap:hover .gmap__img { transform: scale(1.06); }
.gmap__cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: rgba(21, 19, 19, .45);
  text-align: center;
}
.gmap__note { max-width: 280px; font-size: 14px; line-height: 21px; color: var(--crema); }
.gmap__note a { color: var(--crema); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.gmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gmap.is-live .gmap__img, .gmap.is-live .gmap__cover { display: none; }

/* ==========================================================================
   UNA CASA CON HISTORIA (patrimonio)
   ========================================================================== */
.hist { position: relative; overflow: hidden; padding: 80px 0; }
.hist__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 0 var(--gr) 0 var(--gl);
  text-align: center;
}
.hist__head { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hist__photos {
  display: flex;
  gap: 16px;
  margin: 64px var(--gr) 0 var(--gl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.hist__photos::-webkit-scrollbar { display: none; }
.hist__ph { flex: none; width: 100%; scroll-snap-align: start; }
.hist__ph img { display: block; width: 100%; height: 466px; object-fit: cover; }
/* pies de foto: en móvil debajo de cada foto, alineados a la izquierda (el PDF de móvil no los trae; se igualan con escritorio) */
.hist__cap { margin-top: 11px; font-size: 16px; line-height: 16px; color: var(--texto); }
.prog--hist { width: 335px; max-width: calc(100% - 48px); margin: 20px 0 0 var(--gl); }
.prog--hist .prog__bar { width: 44.18%; }

@media (min-width: 1024px) {
  .hist {
    --top: calc(425 * var(--u));
    padding: var(--top) 0 0;
    min-height: max(calc(1620 * var(--u)), calc(1010 * var(--u) + 586px));
  }
  .hist__text { position: relative; z-index: 1; width: 422px; margin: 0 auto; padding: 0; }
  .hist__head { width: 380px; }
  .hist__photos {
    position: absolute;
    inset: 0;
    max-width: 1440px;
    margin: 0 auto;
    display: block;
    overflow: visible;
    pointer-events: none;
  }
  .hist__ph { position: absolute; width: auto; height: auto; }
  .hist__ph img { height: 100%; }
  .hist__ph--1 { left: calc(1066 * var(--u)); top: calc(145 * var(--u)); width: calc(374 * var(--u)); height: calc(509 * var(--u)); }
  /* 1910: marco con el borde derecho en x=365, 565 de alto; la foto (ya sin el borde blanco) llena el marco como en Figma */
  .hist__ph--2 { left: calc(-58.3 * var(--u)); top: calc(626 * var(--u)); width: calc(423 * var(--u)); height: calc(565 * var(--u)); }
  /* 1967: ahora vertical, 375×509; en pantallas más estrechas se aparta para no tapar el botón */
  .hist__ph--3 { left: max(calc(910 * var(--u)), calc(50% + 171px)); top: max(calc(1007 * var(--u)), calc(425 * var(--u) + 556px)); width: calc(375 * var(--u)); height: calc(509 * var(--u)); }
  .hist__cap {
    display: block; position: absolute; top: 100%; left: 0; margin-top: 11px;
    font-size: 16px; line-height: 16px; color: var(--texto); white-space: nowrap;
  }
  .hist__ph--2 .hist__cap { left: auto; right: 0; margin-top: 18px; }
  .hist__ph--3 .hist__cap { left: 3px; margin-top: 12px; }
  .prog--hist { display: none; }
}

/* ==========================================================================
   DÓNDE COMER
   ========================================================================== */
.dine { background: var(--crema-2); }
.dine__in { display: flex; flex-direction: column; gap: 32px; padding: 80px var(--gr) 80px var(--gl); }
.dine__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.dine__text { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; padding: 32px 0; }
@media (min-width: 1024px) {
  .dine__in {
    max-width: 1440px;
    margin: 0 auto;
    flex-direction: row;
    align-items: center;
    gap: calc(138 * var(--u));
    padding: calc(160 * var(--u)) calc(174 * var(--u));
  }
  .dine__img { flex: none; width: calc(530 * var(--u)); }
  .dine__text { width: calc(422 * var(--u)); }
}

/* ==========================================================================
   TOLEDO A PIE
   ========================================================================== */
.walk__bg, .contact__bg { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.walk { min-height: 740px; display: flex; align-items: center; justify-content: center; }
.walk__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  padding: 160px var(--gr) 160px var(--gl);
  text-align: center;
}
.walk .stack24 { align-items: center; }
@media (min-width: 1024px) {
  .walk { min-height: calc(913 * var(--u)); }
  .walk__in { padding: calc(160 * var(--u)) calc(64 * var(--u)); }
  .walk__title { width: calc(622 * var(--u)); }
  .walk__p { width: calc(470 * var(--u)); }
}

/* ==========================================================================
   RESERVA DIRECTA (CTA)
   ========================================================================== */
.cta__in { display: flex; flex-direction: column; gap: 48px; padding: 80px var(--gr) 80px var(--gl); }
.cta__img { width: 100%; aspect-ratio: 342 / 500.094; object-fit: cover; }
.cta__text { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; padding: 32px 0; }
.cta__title { max-width: 287px; }
@media (min-width: 1024px) {
  .cta__in {
    max-width: 1440px;
    margin: 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: calc(138 * var(--u));
    padding: calc(160 * var(--u)) calc(174 * var(--u));
  }
  .cta__img { flex: none; width: calc(530 * var(--u)); aspect-ratio: 530 / 775; }
  .cta__text { width: calc(422 * var(--u)); }
  .cta__title { max-width: none; }
}

/* ---------- Reseñas (07/11/2026, validado por el propietario: solo la nota de Google, también en móvil) ----------
   Normas de Google para citar sus reseñas: la nota «en Google», con fecha y con la G, sin estrellas junto a su nombre.
   La nota, el número de reseñas y la fecha se actualizan a mano en home.html. */
.reviews { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 80px var(--gr) 80px var(--gl); text-align: center; }
.reviews__score { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.reviews__g { width: 24px; height: 24px; margin-bottom: 8px; }
.reviews__line { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 12px; row-gap: 4px; margin: 0; }
.reviews__num { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 40px; color: var(--oscuro); }
.reviews__de { font-size: 24px; }
.reviews__txt { font-size: 16px; line-height: 24px; color: var(--texto); }
.reviews__date, .reviews__note { margin: 0; font-size: 12px; line-height: 18px; color: var(--texto); }
.reviews__note { max-width: 560px; }
@media (min-width: 1024px) {
  .reviews { gap: 32px; padding: calc(160 * var(--u)) calc(174 * var(--u)); }
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact__in { display: flex; flex-direction: column; gap: 48px; padding: 80px var(--gr) 80px var(--gl); }
.contact__info { display: flex; flex-direction: column; gap: 32px; }
.contact__list { display: flex; flex-direction: column; gap: 16px; }
.contact__list div { display: flex; flex-direction: column; gap: 8px; }
.contact__list dt { font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase; }
.contact__list dd { font-size: 16px; line-height: 26px; }
.contact__list a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.cform {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  background: var(--cristal);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.cform__fields { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.cform__row { display: flex; flex-direction: column; gap: 16px; }
.cform__in {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid var(--crema);
  border-radius: 0;
  background: transparent;
  color: var(--crema);
  font: inherit;
  font-size: 14px;
  line-height: 21px;
  -webkit-appearance: none;
  appearance: none;
}
.cform__in::placeholder { color: var(--crema); opacity: 1; }
.cform__in:focus { outline: none; border-color: var(--acento); }
.cform__in.is-error { border-color: #E8A39A; }
.cform__msg { height: 104px; padding: 7px 15px; resize: none; display: block; }
.cform__check { position: relative; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 21px; cursor: pointer; }
.cform__check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.cform__box { flex: none; width: 20px; height: 20px; border: 1.5px solid var(--crema); border-radius: 5px; display: grid; place-items: center; }
.cform__check input:checked + .cform__box { background: var(--crema); }
.cform__check input:checked + .cform__box::after {
  content: "";
  width: 10px; height: 5px;
  border-left: 2px solid var(--oscuro);
  border-bottom: 2px solid var(--oscuro);
  transform: translateY(-1px) rotate(-45deg);
}
.cform__check input:focus-visible + .cform__box { outline: 2px solid var(--crema); outline-offset: 2px; }
.cform__check.is-error .cform__box { border-color: #E8A39A; }
.cform__check a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cform__checks { display: flex; flex-direction: column; gap: 12px; }
.cform__msgok { font-size: 14px; line-height: 21px; color: var(--crema); }

@media (min-width: 1024px) {
  .contact { min-height: calc(789 * var(--u)); display: flex; align-items: center; }
  .contact__in {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding: calc(128 * var(--u)) calc(64 * var(--u)) calc(128 * var(--u)) 0;
  }
  .contact__info { flex: 1 1 0; min-width: 0; padding: 0 calc(64 * var(--u)); }
  .contact__title { width: calc(447 * var(--u)); }
  .cform { flex: none; width: calc(659 * var(--u)); padding: calc(64 * var(--u)); gap: 48px; }
  .cform__row { flex-direction: row; }
  .cform__row > * { flex: 1 1 0; min-width: 0; }
}

/* ---------- Página Contacto: misma sección en versión clara ---------- */
.contact--light { background: var(--crema); color: var(--oscuro); }
.contact--light .contact__info { gap: 24px; }
.contact--light .contact__list { gap: 24px; margin-top: 24px; color: var(--texto); }
.contact--light .cform { gap: 48px; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.contact--light .cform__in { border-color: var(--oscuro); color: var(--oscuro); }
.contact--light .cform__in::placeholder { color: var(--oscuro); }
.contact--light .cform__in:focus { border-color: var(--acento-fuerte); }
.contact--light .cform__in.is-error,
.contact--light .cform__check.is-error .cform__box { border-color: #B3261E; }
.contact--light .cform__box { border-color: var(--oscuro); }
.contact--light .cform__check input:checked + .cform__box { background: var(--oscuro); }
.contact--light .cform__check input:checked + .cform__box::after { border-color: var(--crema); }
.contact--light .cform__check input:focus-visible + .cform__box { outline-color: var(--oscuro); }
.contact--light .cform__send { border: 0; background: var(--oscuro); color: var(--crema); }
.contact--light .cform__send:hover { background: #2E2A28; }
.contact--light .cform__msgok { color: var(--texto); }
@media (min-width: 1024px) {
  .contact--light { min-height: 0; display: block; }
  .contact--light .contact__in {
    justify-content: center;
    align-items: flex-end;
    gap: calc(128 * var(--u));
    padding: calc(160 * var(--u)) 0;
  }
  .contact--light .contact__info { flex: none; width: calc(426 * var(--u)); padding: 0; gap: 32px; }
  .contact--light .contact__list { gap: 16px; margin-top: 0; }
  .contact--light .cform { width: calc(534 * var(--u)); padding: 0; }
}

/* ==========================================================================
   PIE
   ========================================================================== */
.ftr { background: var(--oscuro); color: var(--crema); }
.ftr__in { display: flex; flex-direction: column; gap: 24px; padding: 80px var(--gr) 80px var(--gl); }
.ftr__col { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ftr__brand img { width: 75.593px; height: 80px; }
.ftr__name { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 32px; text-transform: uppercase; }
.ftr__desc { font-size: 14px; line-height: 22px; color: var(--suave); }
.ftr__h { font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--acento); }
.ftr__t { font-size: 16px; line-height: 22px; color: var(--crema); text-decoration: none; }
a.ftr__t:hover { color: var(--acento); }
.ftr__t a { text-decoration: none; }
.ftr__t a:hover { color: var(--acento); }
@media (min-width: 1024px) {
  .ftr__in {
    max-width: 1440px;
    margin: 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: calc(24 * var(--u));
    padding: calc(160 * var(--u)) calc(64 * var(--u));
  }
  .ftr__col { flex: 1 1 0; min-width: 0; }
}

/* ==========================================================================
   PÁGINAS INTERIORES · cabecera de página (640 px)
   ========================================================================== */
.phero {
  position: relative;
  height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #3a3129;
  color: var(--crema);
}
.phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero__bg--bottom { object-position: 50% 100%; }
.phero__shade { position: absolute; inset: 0; background: var(--velo); }
.phero__in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 0 var(--gr) 64px var(--gl);
}
.crumbs { font-size: 14px; line-height: 17px; letter-spacing: 0.03em; text-transform: uppercase; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 2px; }
.phero__title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 40px; text-transform: uppercase; }
.phero__sub { font-size: 16px; line-height: 22px; letter-spacing: 0.03em; }
/* Móvil y tableta: la cabecera no pasa del alto de la pantalla menos la barra de «Reservar», para que la barra
   no tape el título al abrir la página (propietario, 08/11/2026). En móviles grandes sigue midiendo 640 px. */
@media (max-width: 1023.98px) {
  .phero { height: min(640px, calc(100svh - max(38px, calc(env(safe-area-inset-bottom, 0px) + 16px)) - 24px)); }
}
@media (min-width: 1024px) {
  .phero__in { padding: 0 calc(64 * var(--u)) 80px; }
  .phero__title { max-width: 622px; font-size: 64px; line-height: 64px; }
}
.d-only { display: none; }
@media (min-width: 1024px) { .d-only { display: inline; } }

/* ---------- La Posada · La casa ---------- */
.lcasa__in { padding: 80px var(--gr) 80px var(--gl); }
.lcasa__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.lcasa__text .btn { margin-top: 24px; }
.lcasa__p { display: flex; flex-direction: column; gap: 16px; }
.lcasa__img { display: none; }
.photo--m { display: block; }
@media (min-width: 1024px) {
  .lcasa__in {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: calc(138 * var(--u));
    padding: calc(160 * var(--u)) calc(174 * var(--u));
  }
  .lcasa__text { width: calc(422 * var(--u)); padding: 32px 0; gap: 48px; }
  .lcasa__text .btn { margin-top: 0; }
  .lcasa__p { gap: 26px; }
  .lcasa__img { display: block; flex: none; width: calc(530 * var(--u)); height: calc(679 * var(--u)); object-fit: cover; }
  .photo--m { display: none; }
}

/* ---------- La Posada · Las instalaciones ---------- */
.inst { overflow: hidden; padding: 144px 0 112px; text-align: center; }
.inst__title { padding: 0 var(--gr) 0 var(--gl); }
.inst__car { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 48px; }
.inst__stage { display: flex; align-items: center; justify-content: center; gap: 16px; touch-action: pan-y; }
.inst__slot { flex: none; overflow: hidden; }
.inst__slot--side { width: 168px; height: 215px; }
.inst__slot--main { width: 240px; height: 307px; }
.inst__slot img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease; }
.inst__nav { display: none; }
.prog--inst { width: 340px; max-width: calc(100% - 48px); margin: 28px auto 0; }
.prog--inst .prog__bar { width: 41.45%; transition: transform .3s ease; }
@media (min-width: 1024px) {
  .inst { padding: calc(128 * var(--u)) 0 calc(132 * var(--u)); }
  .inst__car { margin-top: calc(128 * var(--u)); gap: calc(24 * var(--u)); }
  .inst__stage { gap: calc(24 * var(--u)); }
  .inst__slot--side { width: calc(305 * var(--u)); height: calc(391 * var(--u)); }
  .inst__slot--main { width: calc(434 * var(--u)); height: calc(557 * var(--u)); }
  .inst__nav {
    display: grid;
    place-items: center;
    flex: none;
    width: 66px;
    height: 64px;
    border: 1px solid var(--oscuro);
    border-radius: 999px;
    color: var(--oscuro);
    transition: background-color .25s ease, color .25s ease;
  }
  .inst__nav:hover { background: var(--oscuro); color: var(--crema); }
  .inst__nav--prev svg { transform: scaleX(-1); }
  .prog--inst { display: none; }
}

/* ---------- La Posada · Servicios y normas ---------- */
.serv { background: var(--crema-2); }
.serv__in { display: flex; flex-direction: column; gap: 80px; padding: 80px var(--gr) 80px var(--gl); }
.serv__col { display: flex; flex-direction: column; gap: 48px; padding: 32px 0; }
.serv__head { display: flex; flex-direction: column; gap: 24px; }
.dlist { display: flex; flex-direction: column; gap: 16px; }
.dlist li { position: relative; padding-left: 22.14px; font-size: 16px; line-height: 26px; color: var(--texto); }
.dlist li::before {
  content: "";
  position: absolute;
  left: 2.07px;
  top: 13px; /* centro de la primera línea (line-height 26px): igual que antes en las de una línea y bien alineado en las que ocupan dos */
  width: 10px;
  height: 10px;
  border: 1px solid var(--acento);
  transform: translateY(-50%) rotate(45deg);
}
@media (min-width: 1024px) {
  .serv__in {
    max-width: 1440px;
    margin: 0 auto;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: calc(138 * var(--u));
    padding: calc(160 * var(--u)) calc(174 * var(--u));
  }
  .serv__col { width: calc(422 * var(--u)); }
  .serv__head { gap: 48px; }
  .serv__title--narrow { max-width: 370px; }
  .dlist li { white-space: nowrap; }
  .dlist li.dlist__wrap { white-space: normal; }
}

/* ---------- Bloque imagen + texto con fondo crema 2 (Nuestra historia) ---------- */
.split { background: var(--crema-2); }
.split__in { display: flex; flex-direction: column; padding: 80px var(--gr) 80px var(--gl); }
.split__img { order: 2; width: 100%; aspect-ratio: 530 / 623; margin-top: 48px; object-fit: cover; }
.split__text { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; }
.split__title { font-size: 40px; line-height: 40px; }
.split__p { display: flex; flex-direction: column; gap: 26px; }
@media (min-width: 1024px) {
  .split__in {
    max-width: 1440px;
    margin: 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: calc(138 * var(--u));
    padding: calc(160 * var(--u)) calc(174 * var(--u));
  }
  .split__img { order: 0; flex: none; width: calc(530 * var(--u)); margin: 0; }
  .split__text { width: calc(422 * var(--u)); padding: 32px 0; }
  .split__title { max-width: 366px; font-size: 48px; line-height: 48px; }
}

/* ==========================================================================
   DESCUBRE TOLEDO
   ========================================================================== */
/* bloque de texto + imagen con la imagen a la izquierda (escritorio) */
@media (min-width: 1024px) {
  .lcasa--rev .lcasa__in { flex-direction: row-reverse; justify-content: flex-end; }
}

/* ---------- Monumentos ordenados por distancia ---------- */
.sights__in { display: flex; flex-direction: column; gap: 48px; padding: 80px var(--gr) 80px var(--gl); }
.sights__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 32px;
  text-transform: uppercase;
  text-align: center;
  color: var(--oscuro);
}
.sights__grid { display: flex; flex-direction: column; margin-top: 64px; }
/* en móvil las fichas van apiladas y comparten la línea de separación */
.sight {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 31px 32px 32px;
  border: 1px solid var(--suave);
  border-bottom-width: 0;
}
.sight:last-child { border-bottom-width: 1px; padding-bottom: 31px; }
.sight__name { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 24px; text-transform: uppercase; color: var(--oscuro); }
.sight__text { font-size: 16px; line-height: 26px; color: var(--texto); }
.sight--img { padding: 0; overflow: hidden; }
.sight--img:last-child { padding: 0; }
.sight--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sight--img1 { height: 203px; }
.sight--wide { height: 200px; }
/* foto vertical (escudo, 06/11): en móvil se ve entera, con su proporción (indicación del propietario); en tableta, centrada y como mucho de 480 px de ancho */
.sight--tall { height: auto; }
.sight--tall img { position: static; display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.sights__note { font-size: 16px; line-height: 26px; color: var(--texto); text-align: center; }
@media (min-width: 1024px) {
  .sights__in {
    max-width: 1440px;
    margin: 0 auto;
    gap: calc(94 * var(--u));
    padding: calc(80 * var(--u)) calc(64 * var(--u)) calc(160 * var(--u));
  }
  .sights__title { font-size: 40px; line-height: 40px; }
  .sights__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(24 * var(--u));
    margin-top: calc(64 * var(--u));
  }
  .sight, .sight:last-child { border-width: 1px; padding: 31px; }
  .sight--img, .sight--img:last-child { padding: 0; }
  .sight--img1 { height: auto; }
  .sight--tall img { position: absolute; max-width: none; height: 100%; margin: 0; }
  .sight--wide { grid-column: span 2; height: auto; min-height: calc(232 * var(--u)); }
  .sights__note { width: 644px; max-width: 100%; margin: 0 auto; }
}

/* ---------- Carrusel de guías ---------- */
.guides { background: var(--crema-2); padding: 80px 0; }
.guides__head { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 0 var(--gr) 0 var(--gl); }
.guides--more .guides__title { font-size: 40px; line-height: 40px; }
.guides__track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 48px;
  padding: 0 var(--gr) 0 var(--gl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gl);
  scrollbar-width: none;
}
.guides__track::-webkit-scrollbar { display: none; }
.gcard { flex: none; display: block; width: 305px; color: var(--oscuro); text-decoration: none; scroll-snap-align: start; }
.gcard__img { height: 400px; overflow: hidden; }
.gcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.gcard:hover .gcard__img img { transform: scale(1.03); }
.gcard__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: start;
  column-gap: 24px;
  row-gap: 16px;
  padding: 32px 8px;
}
.gcard__title { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 24px; text-transform: uppercase; }
.gcard__btn { grid-column: 2; grid-row: 1; }
.gcard__desc { grid-column: 1; grid-row: 2; font-size: 16px; line-height: 22px; color: var(--texto); }
.gcard:hover .circle-btn { background: var(--oscuro); color: var(--crema); }
.prog--guides { margin: 12px var(--gr) 0 var(--gl); }
.prog--guides .prog__bar { width: 43.27%; }
@media (min-width: 1024px) {
  .guides { padding: calc(160 * var(--u)) 0; }
  .guides__head { padding: 0 calc(64 * var(--u)); }
  .guides--more .guides__title { font-size: 48px; line-height: 48px; }
  .guides__track { gap: calc(32 * var(--u)); margin-top: calc(64 * var(--u)); padding: 0 calc(64 * var(--u)); scroll-snap-type: none; cursor: grab; }
  .guides__track.is-dragging { cursor: grabbing; }
  .guides__track.is-dragging a { pointer-events: none; }
  .gcard { width: calc(415.333 * var(--u)); }
  .gcard__img { height: calc(480 * var(--u)); }
  .gcard__foot { column-gap: calc(48 * var(--u)); }
  .gcard__desc { grid-column: 1 / -1; max-width: calc(318 * var(--u)); }
  .prog--guides { margin: calc(60 * var(--u)) calc(64 * var(--u)) 0; }
  .prog--guides .prog__bar { width: 41.45%; }
}

/* ---------- Página de cada guía ---------- */
.phero--guide .phero__title { font-size: 24px; line-height: 24px; }
@media (min-width: 1024px) {
  .phero--guide .phero__title { font-size: 48px; line-height: 48px; }
  .phero--guide .phero__sub { max-width: 532px; }
}
.guide { padding: 80px var(--gr) 80px var(--gl); }
.guide__by { font-size: 14px; line-height: 17px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--texto); }
.guide__date { display: block; }
.guide__body { display: flex; flex-direction: column; gap: 64px; margin-top: 48px; }
.guide__sec { display: flex; flex-direction: column; gap: 32px; }
.guide__credit { margin-top: 64px; font-size: 13px; line-height: 18px; color: var(--suave); }
.guide__credit.is-pending { font-style: italic; color: var(--acento-fuerte); }
.guide__h { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 24px; text-transform: uppercase; color: var(--oscuro); }
@media (min-width: 1024px) {
  .guide { padding: calc(160 * var(--u)) 0; }
  .guide__by { text-align: center; }
  .guide__date { display: inline; }
  .guide__body { width: 644px; max-width: calc(100% - 128px); margin: calc(128 * var(--u)) auto 0; }
  .guide__credit { width: 644px; max-width: calc(100% - 128px); margin: calc(96 * var(--u)) auto 0; }
  .guide__h { font-size: 32px; line-height: 32px; }
}

/* ==========================================================================
   CÓMO LLEGAR
   ========================================================================== */
/* ---------- Dirección + mapa ---------- */
.addr { background: var(--crema); }
.addr__in { display: flex; flex-direction: column; gap: 48px; padding: 80px var(--gr) 80px var(--gl); }
.addr__text { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; }
.addr__head { display: flex; flex-direction: column; gap: 24px; }
.addr__map { display: block; width: 100%; aspect-ratio: 530 / 639; overflow: hidden; }
.addr__map img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.addr__map:hover img { transform: scale(1.02); }
@media (min-width: 1024px) {
  .addr__in {
    max-width: 1440px;
    margin: 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: calc(138 * var(--u));
    padding: calc(160 * var(--u)) calc(174 * var(--u));
  }
  .addr__text { width: calc(422 * var(--u)); padding: 32px 0; }
  .addr__head { gap: 48px; }
  .addr__map { flex: none; width: calc(530 * var(--u)); height: calc(639 * var(--u)); aspect-ratio: auto; }
}

/* ---------- Tren, autobús, coche, a pie ---------- */
.ways__in { display: flex; flex-direction: column; gap: 48px; padding: 80px var(--gr) 80px var(--gl); }
.way {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 31px;
  border: 1px solid var(--suave);
}
.way__kicker { font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); }
.way__title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 32px; text-transform: uppercase; color: var(--oscuro); }
@media (min-width: 1024px) {
  .ways__in {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;   /* los dos cuadros de cada fila, con la misma altura (propietario, 10/11/2026) */
    gap: calc(24 * var(--u));
    padding: 0 calc(24 * var(--u)) calc(160 * var(--u));
  }
  /* en la plantilla, las fichas de la derecha tenían alto fijo y el texto centrado; desde el 10/11/2026 el texto
     empieza arriba en los cuatro cuadros, para que los títulos de cada fila queden a la misma altura */
  .way--h284 { min-height: 284px; }
  .way--h258 { min-height: 258px; }
}

/* ---------- Tu llegada ---------- */
.arrive { background: var(--crema-2); }
.arrive__in { display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 80px var(--gr) 80px var(--gl); text-align: center; }
.arrive__p { display: flex; flex-direction: column; gap: 26px; }
.note {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 31px;
  border: 1px solid var(--suave);
  text-align: left;
}
.note__ic { color: var(--oscuro); }
.note .p { flex: 1 1 auto; min-width: 0; }
.note a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.note a:hover { color: var(--oscuro); }
@media (min-width: 1024px) {
  .arrive__in { padding: calc(160 * var(--u)) 0; }
  .arrive__p { width: 422px; max-width: 100%; }
  .note { width: 535px; max-width: 100%; margin-top: 16px; }
}

/* ==========================================================================
   PÁGINAS LEGALES
   ========================================================================== */
.legal { padding: 80px var(--gr) 80px var(--gl); }
.legal__toc { display: none; }
.legal__body { display: flex; flex-direction: column; gap: 64px; }
.legal__sec { display: flex; flex-direction: column; gap: 32px; scroll-margin-top: 24px; }
.legal__h { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 24px; text-transform: uppercase; color: var(--oscuro); }
.legal__txt { display: flex; flex-direction: column; gap: 16px; }
.legal__txt a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.legal__txt a:hover { color: var(--oscuro); }
/* Preguntas frecuentes (06/11/2026): misma plantilla que los textos legales, con preguntas desplegables */
.faq__list { border-top: 1px solid var(--suave); }
.faq__item { border-bottom: 1px solid var(--suave); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline: 1px solid var(--acento); outline-offset: 4px; }
.faq__q { margin: 0; font-weight: 500; font-size: 16px; line-height: 26px; color: var(--oscuro); }
.faq__ic { flex: none; width: 16px; height: 16px; color: var(--oscuro); transition: transform .25s ease; }
.faq__item[open] .faq__ic { transform: rotate(180deg); }
.faq__a { display: flex; flex-direction: column; gap: 16px; padding: 0 32px 24px 0; }
.faq__a a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.faq__a a:hover { color: var(--oscuro); }
@media (min-width: 1024px) {
  .legal { padding: calc(160 * var(--u)) 0; }
  .legal__in { max-width: 1440px; margin: 0 auto; display: flex; justify-content: center; align-items: flex-start; gap: calc(128 * var(--u)); }
  .legal__toc { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; flex: none; width: calc(316 * var(--u)); }
  .legal__toc ul { display: flex; flex-direction: column; gap: 16px; }
  .legal__toc a { font-size: 16px; line-height: 26px; color: var(--texto); text-decoration: none; }
  .legal__toc a:hover { color: var(--oscuro); text-decoration: underline; text-underline-offset: 2px; }
  .legal__body { flex: none; width: calc(644 * var(--u)); }
  .legal__sec { scroll-margin-top: 32px; }
  .legal__h { font-size: 32px; line-height: 32px; }
}

/* ==========================================================================
   HABITACIONES · listado
   ========================================================================== */
.rlist__intro { display: flex; flex-direction: column; gap: 24px; padding: 80px var(--gr) 80px var(--gl); }
.rgrid { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 80px var(--gr) 80px var(--gl); }
.card--grid { width: 100%; }
.card--tenue { opacity: .35; }  /* Figma 31/10: tarjetas Premium atenuadas en la página Habitaciones */
.card--grid .card__img { height: auto; aspect-ratio: 415.333 / 480; }
@media (min-width: 1024px) {
  .rlist { max-width: 1440px; margin: 0 auto; padding: calc(160 * var(--u)) 0; }
  .rlist__intro { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 0; padding: 0 calc(174 * var(--u)); }
  .rlist__title { width: calc(532 * var(--u)); }
  .rlist__p { width: calc(422 * var(--u)); }
  .rgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    column-gap: calc(32 * var(--u));
    row-gap: calc(32 * var(--u));
    margin-top: calc(128 * var(--u));
    padding: 0 calc(64 * var(--u));
  }
  .card--grid .card__img { height: auto; }
  .rinc { border-top: 1px solid var(--suave); }
  .rinc__title { max-width: 370px; }
}

/* ==========================================================================
   HABITACIONES · ficha
   ========================================================================== */
.pill--static { position: static; align-self: flex-start; display: inline-block; }
.btn--dark { border-color: var(--oscuro); background: var(--oscuro); color: var(--crema); }
.btn--dark:hover { background: #2E2A28; border-color: #2E2A28; }

.room__in { display: flex; flex-direction: column; padding: 80px 0; }
.room__media { margin: 0; }
.room__gal {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gl);
  padding: 0 var(--gr) 0 var(--gl);
  scrollbar-width: none;
}
.room__gal::-webkit-scrollbar { display: none; }
.room__ph { flex: none; width: 280px; height: 467px; scroll-snap-align: start; }
.room__ph img { width: 100%; height: 100%; object-fit: cover; }
.room__prog { margin: 64px 17px 0 16px; }
.room__prog .prog__bar { width: 41.45%; }
.rview { display: none; }
.room__top { display: flex; flex-direction: column; align-items: flex-start; margin-top: 64px; padding: 0 var(--gr) 0 var(--gl); }
.room__top .pill--static { margin-top: 24px; background: #E4D6BB; color: var(--oscuro); }  /* Figma 31/10: dorado al 50 % */
.room__top .p { margin-top: 32px; }
.room__book-m { margin-top: 32px; }

/* datos de la habitación: solo el valor (la etiqueta queda para lectores de pantalla) */
.specs { display: grid; grid-template-columns: 1fr; margin: 144px var(--gr) 0 var(--gl); border-top: 1px solid var(--suave); border-left: 1px solid var(--suave); }
.specs div { display: flex; align-items: center; justify-content: center; height: 88px; padding: 0 24px; border-right: 1px solid var(--suave); border-bottom: 1px solid var(--suave); text-align: center; }
.specs dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.specs dd { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 24px; color: var(--oscuro); }
.specs dd.is-pending { color: var(--acento-fuerte); font-style: italic; }  /* dato que falta (solo mientras se completa) */
.room__inc { margin: 24px var(--gr) 0 var(--gl); padding: 32px 0; }
.room__inc-title { margin: 0 0 48px; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 24px; text-transform: uppercase; color: var(--oscuro); }
.room__book { align-self: flex-start; margin: 24px var(--gr) 0 var(--gl); }

@media (min-width: 1024px) {
  .room__in {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: calc(529 * var(--u)) calc(638 * var(--u));
    justify-content: space-between;
    row-gap: 48px;
    align-items: start;
    padding: calc(160 * var(--u)) calc(64 * var(--u));
  }
  .room__media { grid-column: 2; grid-row: 1 / span 4; }
  .room__gal, .room__prog { display: none; }
  .rview { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
  .rview__main { position: relative; aspect-ratio: 638 / 957; overflow: hidden; background: var(--crema-2); }
  .rview__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
  .rview__img.is-fading { opacity: 0; }
  .rview__navs { position: absolute; right: calc(17 * var(--u)); bottom: calc(21 * var(--u)); display: flex; gap: 8px; }
  .rview__nav {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--oscuro);
    color: var(--crema);
    cursor: pointer;
    transition: background-color .25s ease;
  }
  .rview__nav:hover { background: #2E2A28; }
  .rview__nav:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
  .rview__thumbs { display: flex; gap: calc(16 * var(--u)); }
  .rview__th { flex: 1 1 0; min-width: 0; aspect-ratio: 2 / 3; padding: 0; border: 0; background: var(--crema-2); cursor: pointer; overflow: hidden; opacity: .6; transition: opacity .2s ease; }
  .rview__th:hover, .rview__th.is-active { opacity: 1; }
  .rview__th:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
  .rview__th img { width: 100%; height: 100%; object-fit: cover; }
  .room__top { grid-column: 1; grid-row: 1; margin: 0; padding: 0; }
  .room__top .p { margin-top: 48px; }
  .room__book-m { margin-top: 48px; }
  .specs { grid-column: 1; grid-row: 2; grid-template-columns: 1fr 1fr; margin: 0; }
  .specs div { height: 102px; }
  .room__inc { grid-column: 1; grid-row: 3; margin: 0; padding: 0; }
  .room__book { grid-column: 1; grid-row: 4; justify-self: start; margin: 0; }
}

/* ---------- Otras habitaciones ---------- */
.others { border-top: 1px solid var(--suave); padding: 80px 0; }
.others__head { padding: 0 var(--gr) 0 var(--gl); }
.others__title { max-width: 287px; }
.others__all { display: none; }
.others__track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 48px;
  padding: 0 var(--gr) 0 var(--gl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gl);
  scrollbar-width: none;
}
.others__track::-webkit-scrollbar { display: none; }
.card--other { width: 305px; }
.card--other .card__img { height: 477.33px; }
.card--other:nth-child(even) .card__img { height: 399.08px; }
.prog--others { margin: 12px var(--gr) 0 var(--gl); }
.prog--others .prog__bar { width: 43.27%; }
.others__all-m { margin: 48px var(--gr) 0 var(--gl); max-width: calc(100% - var(--gl) - var(--gr)); white-space: normal; text-align: center; }
@media (max-width: 359.98px) {
  /* «Toutes les chambres» (10/11/2026): en móviles de 320 px, algo menos de margen interior para que quepa en una línea */
  :lang(fr) .rooms__aside .btn, :lang(fr) .others__all-m { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
  .others { padding: calc(160 * var(--u)) 0; }
  .others__head { display: flex; justify-content: space-between; align-items: center; padding: 0 calc(64 * var(--u)); }
  .others__title { max-width: none; }
  .others__all { display: inline-flex; }
  .others__track { gap: calc(32 * var(--u)); margin-top: calc(64 * var(--u)); padding: 0 calc(64 * var(--u)); scroll-snap-type: none; cursor: grab; }
  .others__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .others__track.is-dragging a { pointer-events: none; }
  .card--other { width: calc(415.333 * var(--u)); }
  .card--other .card__img, .card--other:nth-child(even) .card__img { height: calc(480 * var(--u)); }
  .prog--others { margin: calc(60 * var(--u)) calc(64 * var(--u)) 0; }
  .prog--others .prog__bar { width: 41.45%; }
  .others__all-m { display: none; }
}

/* ==========================================================================
   FLOTANTES: WhatsApp (escritorio) y barra inferior (móvil)
   ========================================================================== */
.wa, .mbar__wa {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acento);
  color: var(--oscuro);
  box-shadow: 0 0 8px rgba(0, 0, 0, .25);
  text-decoration: none;
}
.wa { display: none; }
.mbar {
  position: fixed;
  z-index: 40;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(38px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(21, 19, 19, .5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: opacity .3s ease, transform .3s ease;
}
.mbar.is-off { opacity: 0; transform: translateY(16px); pointer-events: none; }
.mbar__wa { flex: none; width: 48px; height: 48px; }
.mbar__book { flex: 1 1 auto; height: 56px; padding: 0 16px; }
@media (min-width: 600px) and (max-width: 1023.98px) {
  .mbar { left: 50%; right: auto; width: 560px; transform: translateX(-50%); }
  .mbar.is-off { transform: translate(-50%, 16px); }
}
@media (min-width: 1024px) {
  .mbar { display: none; }
  .wa {
    display: grid;
    position: fixed;
    z-index: 40;
    right: 56px;
    bottom: 36px;
    width: 64px;
    height: 64px;
    transition: transform .25s ease;
  }
  .wa:hover { transform: scale(1.06); }
}

/* ---------- Aviso de cookies (Google Analytics) ----------
   No está en Figma: aprobado por el propietario el 05/11/2026 («barra sencilla»).
   «Aceptar» y «Rechazar» con el mismo formato y a la misma altura, como pide la AEPD. */
.ck {
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px var(--gr) calc(24px + env(safe-area-inset-bottom, 0px)) var(--gl);
  border-top: 1px solid var(--acento);
  background: var(--crema);
  box-shadow: 0 -8px 32px rgba(21, 19, 19, .12);
}
.ck__in { display: flex; flex-direction: column; gap: 16px; max-width: 1328px; margin: 0 auto; }
.ck__txt { margin: 0; font-size: 14px; line-height: 20px; color: var(--texto); }
.ck__txt a { color: var(--oscuro); }
.ck__btns { display: flex; gap: 12px; }
.ck__btn { flex: 1 1 0; min-width: 0; padding: 12px 16px; }
.ftr__ck { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.ftr__ck:hover { color: var(--acento); }
@media (min-width: 1024px) {
  .ck { padding: 24px 56px; }
  .ck__in { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .ck__txt { max-width: 760px; font-size: 16px; line-height: 24px; }
  .ck__btns { flex: none; gap: 16px; }
  .ck__btn { flex: none; min-width: 168px; padding: 12px 32px; }
}

/* ==========================================================================
   MENÚ
   ========================================================================== */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--oscuro);
  color: var(--crema);
  animation: fadeIn .25s ease;
}
.menu__hdr {
  flex: none;
  height: calc(76px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gr) 0 var(--gl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--suave);
}
.menu__close, .menu__right { display: none; }
.menu__logo img { width: 41.58px; height: 44px; }
.menu__x { width: 42px; height: 42px; border: 1px solid var(--crema); border-radius: 50%; display: grid; place-items: center; }
.menu__nav {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 59.5px var(--gr) 59.5px var(--gl);
}
.menu__nav a {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 24px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--crema);
  transition: color .2s ease;
}
.menu__nav a:hover, .menu__nav a[aria-current] { color: var(--acento); }
.menu__foot { flex: none; padding: 32px var(--gr) calc(32px + env(safe-area-inset-bottom, 0px)) var(--gl); }
.menu__foot .btn { width: 100%; }
@media (min-width: 1024px) {
  .menu__hdr {
    height: calc(145px + env(safe-area-inset-top, 0px));
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: env(safe-area-inset-top, 0px) calc(64 * var(--u)) 0;
  }
  .menu__x { display: none; }
  .menu__close {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .menu__logo img { width: 75.593px; height: 80px; }
  .menu__right { display: flex; align-items: center; gap: 32px; justify-self: end; }
  .menu__lang { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 16px; line-height: 24px; }
  .menu__book { border-color: var(--crema-2); color: var(--crema-2); font-size: 18px; line-height: 27px; }
  .menu__book:hover { background: var(--crema-2); color: var(--oscuro); }
  .menu__nav { padding: 40px 24px; }
  .menu__nav a { font-size: 32px; line-height: 32px; }
  .menu__foot { display: none; }
}

/* ==========================================================================
   POPUP RESERVA DIRECTA
   ========================================================================== */
.pop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18.5px;
  overflow-y: auto;
  background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: fadeIn .35s ease;
}
.pop__card { position: relative; width: min(421px, 100%); padding: 32px 32px 48px; background: var(--crema); color: var(--oscuro); }
.pop__x { display: grid; place-items: center; width: 42px; height: 42px; margin-left: auto; border: 1px solid var(--oscuro); border-radius: 50%; color: var(--oscuro); }
.pop__body { display: flex; flex-direction: column; align-items: flex-start; gap: 48px; margin-top: 48px; }
.pop__eyebrow { color: var(--oscuro); }
.pop__title { max-width: 300px; }  /* opción B del propietario (02/11): mismo peso que los demás títulos */
.pop__offer { display: flex; flex-direction: column; gap: 8px; }
.pop__big { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 24px; text-transform: uppercase; color: var(--oscuro); }  /* opción B (02/11) */
.pop__small { font-size: 16px; line-height: 22px; color: var(--texto); }
.pop__book { font-size: 18px; line-height: 27px; }
@media (min-width: 1024px) { .pop__title { font-size: 32px; line-height: 32px; } }

/* ---------- Aviso breve ---------- */
.toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  background: var(--oscuro);
  color: var(--crema);
  font-size: 14px;
  line-height: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  animation: fadeIn .2s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}