@charset "UTF-8";
/* =========================================================
   RIU RAU — Ficha de casa
   Dirección aprobada por Alex: portada que se funde en el crema y el nombre
   montando sobre ella; de la galería al pie, la página cae en la NOCHE (azul
   que llega hasta el último píxel). Sin iconos, sin chips y sin cajas:
   mandan la tipografía, las líneas finas y el aire.
   Depende de css/style.css (tokens, header, pie).
   ========================================================= */

.page-ficha {
  --hair: rgba(58, 46, 18, 0.13);
  --hair-n: rgba(255, 238, 207, 0.17);
  --crema-txt: rgba(255, 238, 207, 0.78);
}
.page-ficha .bg-canvas { background: var(--crema-soft); }
.page-ficha .bg-aurora {
  opacity: 0.5;
  background:
    radial-gradient(52vw 48vw at 16% 18%, rgba(224, 166, 60, 0.15), transparent 64%),
    radial-gradient(50vw 46vw at 88% 64%, rgba(45, 172, 186, 0.13), transparent 64%);
  animation-duration: 48s;
}

.f-wrap {
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =========================================================
   PORTADA
   ========================================================= */
.fh {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--crema);
}
/* Velo de arriba: para que el logo, el volver y el contador se lean
   también sobre fotos claras (paredes blancas, cielos). */
.fh::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0; right: 0; top: 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(16, 32, 34, 0.42) 0%,
    rgba(16, 32, 34, 0.22) 42%,
    rgba(16, 32, 34, 0) 100%);
}
.fh-media { position: absolute; inset: 0; }
.fh-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transform: scale(1.06);
  animation: fhZoom 9s var(--ease-out) forwards;
}
@keyframes fhZoom { to { transform: scale(1); } }

/* Solo un velo arriba, para que se lean los controles. La parte baja no se
   oscurece: se funde en el crema, que es donde monta el nombre. */
.fh::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 26, 28, 0.3) 0%, transparent 22%);
}
.fh-feather {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg,
    rgba(251, 243, 225, 0) 0%,
    rgba(251, 243, 225, 0.55) 38%,
    rgba(251, 243, 225, 0.95) 70%,
    #FBF3E1 88%);
}

/* Los controles sobre la foto son cristal oscuro, no pastillas de color. */
.fh-back {
  position: absolute; z-index: 3;
  top: calc(var(--header-h-tall) + 10px);
  left: calc(var(--gutter) - 8px);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  background: none;
  color: var(--crema);
  transition: transform .3s var(--ease-out);
}
.fh-back svg { filter: drop-shadow(0 1px 8px rgba(8, 20, 22, .75)); }
.fh-fotos {
  position: absolute; z-index: 3;
  top: calc(var(--header-h-tall) + 20px);
  right: var(--gutter);
  padding: 0; border: 0; background: none;
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 238, 207, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.fh-back:active, .fh-fotos:active { transform: scale(.95); }

/* El nombre monta sobre el difuminado de la foto */
.f-head { position: relative; z-index: 3; margin-top: -96px; }
.f-loc {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--mostaza-soft);
}
.f-ttl {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(2.9rem, 12vw, 3.6rem);
  line-height: .94;
  letter-spacing: -.03em;
  color: var(--mostaza);
}
.f-meta {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: .63rem; letter-spacing: .14em;
  color: var(--tinta-soft);
}

/* =========================================================
   SECCIONES
   ========================================================= */
.fsec { padding-top: clamp(36px, 9vw, 52px); }
.f-kick {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--mostaza-soft);
}
.f-kick--n { color: rgba(255, 238, 207, 0.55); }
.f-lead {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: 1.55rem; line-height: 1.24; letter-spacing: -.014em;
  color: var(--tinta);
}
.f-body {
  margin: 0;
  font-size: .9rem; line-height: 1.8; font-weight: 300;
  color: var(--tinta-soft);
  max-width: 62ch;
}

/* Comodidades: una por línea con hairline, en dos columnas. Sin iconos. */
.f-comod {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px;
  margin: 0; padding: 0; list-style: none;
}
.f-comod li {
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
  font-size: .8rem; font-weight: 300; line-height: 1.4;
  color: var(--tinta);
}
#fComodMas { margin-top: 0; }

.f-mas {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 26px; padding: 0 0 6px;
  border: 0; border-bottom: 1px solid rgba(146, 93, 0, .35);
  background: none;
  font-size: .78rem; font-weight: 400;
  color: var(--mostaza);
}
.f-mas svg { transition: transform .35s var(--ease-out); }
.f-mas.is-open svg { transform: rotate(180deg); }
.f-mas--n {
  color: var(--crema);
  border-bottom-color: rgba(255, 238, 207, .4);
}
.fsec--galcab { padding-bottom: 0; }
.fsec--galcab .f-kick { margin-bottom: 0; }

/* =========================================================
   LA NOCHE — empieza detrás de las fotos y llega al final
   Mismo recorrido de color que la home, pero sin irse a negro:
   el azul se mantiene hasta el último píxel del pie.
   ========================================================= */
.page-ficha .night {
  position: relative;
  margin-top: 20px;
  padding-top: 10px;
  background: linear-gradient(180deg,
    #FBF3E1 0px,
    #E9E9DD 52px,
    #BDD2CE 104px,
    #7FAEB0 150px,
    #35838D 196px,
    #146E78 234px,
    #11626C 24%,
    #0E5560 48%,
    #0C4A55 74%,
    #0B414B 100%);
}
.page-ficha .night .f-body { color: var(--crema-txt); }
.f-nota {
  margin: 16px 0 0;
  font-size: .78rem; line-height: 1.6; font-weight: 300;
  color: rgba(255, 238, 207, 0.58);
  max-width: 44ch;
}

/* Tira de fotos */
.fsec--gal { padding-top: 0; }
.fgal-track {
  display: flex; gap: 10px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fgal-track::-webkit-scrollbar { display: none; }
.fgal-i {
  position: relative;
  flex: 0 0 72%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  scroll-snap-align: center;
  background: rgba(255, 238, 207, .08);
  border: 0; padding: 0; cursor: pointer;
  box-shadow: 0 22px 48px -24px rgba(0, 0, 0, .65);
}
.fgal-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fgal-i--mas { display: flex; align-items: center; justify-content: center; }
.fgal-i--mas img { position: absolute; inset: 0; filter: blur(2px); }
.fgal-i--mas::after { content: ""; position: absolute; inset: 0; background: rgba(9, 24, 26, .55); }
.fgal-i--mas span {
  position: relative; z-index: 2;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.5rem; color: var(--crema);
}

/* Mapa. isolation: Leaflet usa z-index de 400+ en sus capas internas; sin
   aislarlo se pinta por encima del panel de reserva. */
.f-mapa {
  position: relative; z-index: 0; isolation: isolate;
  height: 250px;
  border: 1px solid var(--hair-n);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 238, 207, .06);
}
.f-mapa .leaflet-container { height: 100%; background: #123f45; font-family: var(--font-body); }
.f-mapa .leaflet-control-attribution {
  font-size: 9px;
  background: rgba(11, 45, 50, .72);
  color: rgba(255, 238, 207, .7);
}
.f-mapa .leaflet-control-attribution a { color: rgba(255, 238, 207, .85); }

/* Con detalle */
.f-bloque + .f-bloque { margin-top: 28px; }
.f-bloque h3 {
  margin: 0 0 12px;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 1.15rem; color: var(--crema);
}
.f-bloque ul { margin: 0; padding: 0; list-style: none; }
.f-bloque li {
  position: relative; padding-left: 18px; margin-bottom: 10px;
  font-size: .83rem; line-height: 1.68; font-weight: 300;
  color: var(--crema-txt);
}
.f-bloque li::before {
  content: ""; position: absolute; left: 0; top: .64em;
  width: 7px; height: 1px; background: rgba(255, 238, 207, .45);
}

/* Normas y alrededores: filas con hairline, sin puntos ni chips */
.f-normas { margin: 0; padding: 0; list-style: none; }
.f-normas li {
  padding: 11px 0;
  border-bottom: 1px solid var(--hair-n);
  font-size: .82rem; line-height: 1.55; font-weight: 300;
  color: var(--crema-txt);
}
.f-cerca {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px;
  margin: 0; padding: 0; list-style: none;
}
.f-cerca li {
  padding: 10px 0;
  border-bottom: 1px solid var(--hair-n);
  font-size: .78rem; font-weight: 300; line-height: 1.4;
  color: var(--crema-txt);
}

/* El pie vive dentro de la noche: sin fondo propio */
.page-ficha .site-footer {
  background: none;
  margin-top: clamp(40px, 10vw, 64px);
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* =========================================================
   BARRA FLOTANTE
   Aparece al llegar al mapa y se queda mientras estés por debajo,
   bajando o subiendo. Solo se va al volver a subir por encima.
   ========================================================= */
.fbar {
  position: fixed; z-index: 2000;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 14px var(--gutter) calc(17px + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 40, 44, 0.8);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-top: 1px solid rgba(255, 238, 207, 0.16);
  transform: translateY(115%);
  transition: transform .42s var(--ease-out);
  will-change: transform;
}
.fbar.is-in { transform: none; }
.fbar-k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .5rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 238, 207, 0.56);
}
.fbar-v {
  margin: 4px 0 0;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.08rem; line-height: 1.1;
  color: var(--crema);
}
.fbar-cif { display: none; }

.fbar-btn {
  display: inline-flex; align-items: center; gap: 9px;
  margin-left: auto;
  padding: 11px 20px;
  border: 0; border-radius: 999px;
  background: var(--crema);
  color: #0f5b64;
  font-size: .78rem; font-weight: 600;
  white-space: nowrap;
  transition: transform .3s var(--ease-out);
}
.fbar-btn svg { transition: transform .3s var(--ease-out); }
.fbar-btn:active { transform: scale(.97); }

/* =========================================================
   PANEL DE DISPONIBILIDAD (widget de Lodgify)
   ========================================================= */
.res-scrim {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(6, 18, 20, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.res-scrim.is-open { opacity: 1; }
.res {
  position: fixed; z-index: 3100;
  left: 0; right: 0; bottom: 0;
  padding: 22px var(--gutter) calc(26px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: rgba(14, 72, 80, 0.74);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-top: 1px solid rgba(255, 238, 207, 0.22);
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .5);
  transform: translateY(102%);
  /* curva de cajón: entra rápido y frena largo */
  transition: transform .42s cubic-bezier(.32, .72, 0, 1);
}
.res.is-open { transform: none; }
.res-x {
  position: absolute; top: 16px; right: var(--gutter);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 238, 207, .14);
  color: var(--crema);
}
.res-k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .54rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 238, 207, .6);
}
.res-t {
  margin: 8px 0 18px;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.5rem; color: var(--crema);
}
.res-widget { background: var(--crema-soft); border-radius: 12px; padding: 15px 13px; }
.res-pie {
  margin: 16px 0 0;
  font-size: .74rem; font-weight: 300; line-height: 1.5;
  color: rgba(255, 238, 207, .6);
}
body.res-abierta { overflow: hidden; }

/* Esqueleto: el widget tarda un par de segundos y nada debe aparecer de la nada */
.res-cargando { display: grid; gap: 11px; }
.res-cargando i {
  display: block; height: 44px; border-radius: 8px;
  background: linear-gradient(90deg,
    rgba(146, 93, 0, .07) 0%, rgba(146, 93, 0, .14) 50%, rgba(146, 93, 0, .07) 100%);
  background-size: 200% 100%;
  animation: resBrilla 1.4s linear infinite;
}
.res-cargando i:nth-child(3) { height: 46px; border-radius: 999px; }
@keyframes resBrilla { to { background-position: -200% 0; } }
.res-widget.is-listo .res-cargando { display: none; }

/* --- Tema de Riu Rau para el widget (variables oficiales de Lodgify) --- */
:root {
  --ldg-bnb-background: transparent;
  --ldg-bnb-border-radius: 0px;
  --ldg-bnb-box-shadow: none;
  --ldg-bnb-padding: 0px;
  --ldg-bnb-input-background: #FFFBF0;
  --ldg-bnb-button-border-radius: 999px;
  --ldg-bnb-color-primary: #925D00;
  --ldg-bnb-color-primary-lighter: #b8965a;
  --ldg-bnb-color-primary-darker: #6b4400;
  --ldg-bnb-color-primary-contrast: #FFEECF;
  --ldg-component-calendar-cell-selection-bg-color: #925D00;
  --ldg-component-calendar-cell-selection-color: #FFEECF;
  --ldg-component-calendar-cell-selected-bg-color: #FFEECF;
  --ldg-component-calendar-cell-selected-color: #3a2e12;
  --ldg-bnb-font-family: inherit;
}
#lodgify-book-now-box { width: 100%; }
/* Los grises que Lodgify NO expone como variable. Va por herencia forzada para
   no depender de sus nombres de clase, que son hashes y cambian al actualizar. */
.res-widget #lodgify-book-now-box * { color: var(--tinta-soft) !important; }
.res-widget #lodgify-book-now-box [class*="primary"] { color: var(--crema) !important; }

/* =========================================================
   GALERÍA A PANTALLA COMPLETA
   ========================================================= */
.gal {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(9, 20, 22, 0.96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.gal.is-open { opacity: 1; }
.gal-track {
  position: absolute; inset: 0;
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gal-track::-webkit-scrollbar { display: none; }
.gal-f {
  flex: 0 0 100%; scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  padding: 72px 14px 84px;
}
.gal-f img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; display: block; }
.gal-cerrar {
  position: absolute; z-index: 3;
  top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 238, 207, 0.94);
  color: var(--tinta);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.gal-n {
  position: absolute; z-index: 3;
  top: calc(26px + env(safe-area-inset-top, 0px)); left: 20px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .18em;
  color: rgba(255, 238, 207, 0.86);
}
.gal-nav {
  position: absolute; z-index: 3; top: 50%;
  width: 44px; height: 44px; margin-top: -22px;
  display: none; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 238, 207, .3);
  border-radius: 50%;
  background: rgba(9, 20, 22, .5);
  color: var(--crema);
}
.gal-prev { left: 16px; }
.gal-next { right: 16px; }
.gal-salir {
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  margin: 0; text-align: center;
  font-family: var(--font-mono);
  font-size: .56rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 238, 207, 0.5);
}
body.gal-abierta { overflow: hidden; }

/* =========================================================
   ENTRADAS
   ========================================================= */
.js .fsec[data-anim="reveal"] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js .fsec[data-anim="reveal"].is-in { opacity: 1; transform: none; }

/* =========================================================
   ESCRITORIO (base mínima; el pase de escritorio va aparte)
   ========================================================= */
/* =========================================================
   ESCRITORIO
   No es el móvil ensanchado: el antetítulo se va a una columna
   estrecha a la izquierda (como la nota al margen de una revista) y el
   contenido respira a su derecha con una medida de lectura controlada.
   ========================================================= */
@media (min-width: 900px) {

  /* ---- portada ---- */
  /* OJO con el `width: 100%`: sin él, al tocar techo el `max-height` la
     proporción encoge la ANCHURA para mantenerse, y la portada se quedaba
     cortada por la derecha (1773 px en una pantalla de 1920). */
  .fh { width: 100%; aspect-ratio: 21 / 9; min-height: 560px; max-height: 76vh; }
  .fh-feather { height: 46%; }
  .fh-back { top: calc(var(--header-h-tall) + 16px); }
  .fh-fotos { top: calc(var(--header-h-tall) + 24px); font-size: .62rem; }

  /* cabecera partida: el nombre a la izquierda, los datos a la derecha */
  .f-head {
    margin-top: -150px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0 64px;
    align-items: end;
  }
  .f-head .f-loc { grid-column: 1; }
  .f-ttl {
    grid-column: 1;
    margin-top: 18px;
    font-size: clamp(3.6rem, 5.4vw, 5.6rem);
    letter-spacing: -.035em;
  }
  .f-meta {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin: 0 0 14px;
    font-size: .72rem;
    letter-spacing: .18em;
  }

  /* ---- secciones: el antetítulo encabeza el ancho completo ----
     (D3, elegida por Alex). Nada de columna de margen: la etiqueta va
     arriba sobre una línea fina de lado a lado y el contenido ocupa
     los dos tercios que antes quedaban vacíos. */
  .fsec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 80px;
    padding-top: clamp(64px, 5.4vw, 96px);
  }
  .fsec > .f-kick {
    grid-column: 1 / -1;
    position: static;
    margin: 0 0 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(58, 46, 18, 0.14);
  }
  /* sobre la zona noche la línea tiene que ser clara, no oscura */
  .night .fsec > .f-kick { border-bottom-color: rgba(255, 238, 207, 0.18); }
  .fsec > *:not(.f-kick) { grid-column: 1; }

  /* la entradilla a la izquierda y el cuerpo a su derecha, en la misma banda */
  .fsec > .f-lead {
    grid-column: 1;
    margin: 0;
    font-size: 2.6rem;
    line-height: 1.14;
    max-width: 22ch;
  }
  .fsec > .f-body {
    grid-column: 2;
    margin-top: 0;
    font-size: 1.06rem;
    line-height: 1.85;
    max-width: 60ch;
  }

  .fsec > .f-comod {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 46px;
  }
  .f-comod li { font-size: .88rem; padding: 14px 0; }
  #fComodMas { grid-column: 1 / -1; }
  #fComodMas .f-comod { grid-template-columns: repeat(4, 1fr); gap: 0 46px; }
  .fsec > .f-mas { grid-column: 1 / -1; }
  .f-mas { margin-top: 32px; font-size: .84rem; }

  .fsec--galcab { grid-template-columns: 1fr; padding-bottom: 0; }

  /* ---- galería: a sangre, cuatro fotos a la vista ---- */
  .fsec--gal { display: block; padding-top: 0; }
  .fgal-track { gap: 18px; }
  .fgal-i { flex: 0 0 24%; }
  .fsec--gal .f-mas { margin-left: 0; }

  /* ---- mapa: a todo lo ancho ---- */
  .fsec--mapa > *:not(.f-kick) { grid-column: 1 / -1; }
  .f-mapa { height: 560px; }
  .f-nota { font-size: .86rem; max-width: 52ch; }

  /* ---- con detalle, normas y alrededores: ancho completo ---- */
  #fDetalle {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0 46px;
    align-items: start;
  }
  .f-bloque + .f-bloque { margin-top: 0; }
  .f-bloque h3 { font-size: 1.35rem; }
  .f-bloque li { font-size: .88rem; }

  .fsec > .f-normas { grid-column: 1 / -1; }
  .f-normas { columns: 3; column-gap: 46px; }
  .f-normas li { break-inside: avoid; font-size: .86rem; }
  .fsec > .f-cerca { grid-column: 1 / -1; }
  .f-cerca { grid-template-columns: repeat(4, 1fr); gap: 0 40px; }
  .f-cerca li { font-size: .82rem; }

  /* ---- otras casas: tres a la vista, alineadas con el contenido ---- */
  .fsec--otras { display: block; padding-top: clamp(72px, 7vw, 116px); }
  .fsec--otras .f-kick { position: static; }

  /* ---- barra de reserva: ISLA centrada, no una banda a sangre ----
     El cristal va en una capa con máscara para que los extremos se
     desvanezcan; el contenido va encima, SIN máscara, para que no se
     difumine el texto ni el botón. */
  .fbar {
    left: 50%;
    right: auto;
    bottom: 26px;
    width: min(1080px, calc(100% - var(--gutter) * 2));
    padding: 15px 34px;
    gap: 34px;
    background: none;
    border-top: 0;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    transform: translateX(-50%) translateY(150%);
  }
  .fbar.is-in { transform: translateX(-50%); }
  .fbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 4px;
    background: rgba(11, 34, 38, 0.86);
    border: 1px solid rgba(255, 238, 207, 0.2);
    box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
            backdrop-filter: blur(20px) saturate(170%);
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 96px,
      #000 calc(100% - 96px), transparent 100%);
            mask: linear-gradient(90deg, transparent 0, #000 96px,
      #000 calc(100% - 96px), transparent 100%);
  }
  .fbar-txt,
  .fbar-cif,
  .fbar-btn { position: relative; z-index: 1; }
  .fbar-v { font-size: 1.25rem; }

  /* las cifras, en medio: es lo que hace que el ancho signifique algo */
  .fbar-cif {
    display: flex;
    margin: 0 auto 0 0;
    padding: 0;
    list-style: none;
  }
  .fbar-cif li { padding: 0 26px; }
  .fbar-cif li + li { border-left: 1px solid rgba(255, 238, 207, 0.18); }
  .fbar-cif b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.1;
    color: var(--crema);
  }
  .fbar-cif span {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: .47rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 238, 207, 0.56);
  }
  .fbar-btn { margin-left: 0; padding: 13px 26px; font-size: .84rem; }

  /* el panel se abre centrado sobre la isla */
  .res {
    left: 50%;
    right: auto;
    bottom: 104px;
    width: 430px;
    border-radius: 16px;
    border: 1px solid rgba(255, 238, 207, 0.22);
    transform: translateX(-50%) translateY(14px);
    opacity: 0;
    transition: transform .42s cubic-bezier(.32, .72, 0, 1), opacity .3s var(--ease-out);
  }
  .res.is-open { transform: translateX(-50%); opacity: 1; }

  .gal-nav { display: flex; }
  .gal-f { padding: 84px 90px 90px; }
}

/* En pantallas grandes sube la escala, no el margen */
@media (min-width: 1440px) {
  .f-ttl { font-size: 6rem; }
  .fsec { gap: 0 96px; }
  .f-lead { font-size: 2.9rem; }
  .f-body { font-size: 1.12rem; }
}

@media (hover: hover) and (pointer: fine) {
  .fh-back:hover, .fh-fotos:hover { transform: translateY(-2px); }
  .f-mas:hover svg { transform: translateY(2px); }
  .f-mas--n:hover svg { transform: translateX(3px); }
  .fbar-btn:hover svg { transform: translateX(4px); }
  .gal-nav:hover { background: rgba(255, 238, 207, .16); }
}

@media (prefers-reduced-motion: reduce) {
  .fh-media img { animation: none; transform: none; }
  .page-ficha .bg-aurora { animation: none; }
  .fbar, .res, .gal, .f-mas svg, .fbar-btn svg { transition: none; }
  .fbar { transform: none; }
  .res-cargando i { animation: none; }
  .js .fsec[data-anim="reveal"] { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   OTRAS CASAS — lo último antes del pie
   ========================================================= */
.fsec--otras { padding-top: clamp(44px, 11vw, 70px); }
.f-otras {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.f-otras::-webkit-scrollbar { display: none; }
.f-otra {
  flex: 0 0 66%;
  scroll-snap-align: center;
  color: inherit;
  text-decoration: none;
}
.f-otra img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, .6);
  transition: transform .6s var(--ease-out);
}
.f-otra-txt { padding-top: 13px; }
.f-otra-loc {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .54rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 238, 207, .55);
}
.f-otra-n {
  margin: 6px 0 0;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.25rem; line-height: 1.1;
  color: var(--crema);
}
.f-otra-m {
  margin: 7px 0 0;
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .06em;
  color: rgba(255, 238, 207, .62);
}

@media (min-width: 900px) {
  .f-otras { gap: 20px; }
  .f-otra { flex: 0 0 28%; }
  .f-otra-n { font-size: 1.5rem; }
}
@media (hover: hover) and (pointer: fine) {
  .f-otra:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .f-otra img { transition: none; }
}

/* =========================================================
   Correcciones del pase de escritorio
   ========================================================= */
@media (min-width: 900px) {
  /* El difuminado se comía media foto: la portada es corta y ancha. */
  .fh-feather { height: 34%; }

  /* Los datos: pegados al título, con una línea corta, no una que cruce. */
  .f-meta {
    max-width: 340px;
    margin-bottom: 22px;
    padding-top: 14px;
  }

  /* El mapa ocupa todo el ancho: descolgado en la columna derecha
     quedaba desequilibrado y dejaba un vacío enorme a la izquierda. */
  .fsec--mapa > .f-mapa,
  .fsec--mapa > .f-nota { grid-column: 1 / -1; }
  .fsec--mapa > .f-nota { max-width: 60ch; }
}

/* ==========================================================
   CALENDARIO DE DISPONIBILIDAD (ficha)
   Va sobre la zona noche: crema sobre teal. Los días ocupados
   se tachan; ni cajas de color ni leyendas con cuadraditos.
   ========================================================== */

.fcal-meses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 44px;
}

.fcal-t {
  margin: 0 0 12px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.16rem;
  color: var(--crema, #FFEECF);
}

.fcal-rejilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px 0;
  max-width: 330px;
}

.fcal-dow {
  padding-bottom: 7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .6rem;
  letter-spacing: .1em;
  text-align: center;
  color: rgba(255, 238, 207, .42);
}

.fcal-d {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-size: .86rem;
  font-weight: 300;
  color: var(--crema, #FFEECF);
}

/* Ocupada: tachada y apagada. */
.fcal-d--ocupada {
  color: rgba(255, 238, 207, .3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Ya pasada, o más allá de lo que sabemos: presente pero callada. */
.fcal-d--pasada,
.fcal-d--fuera {
  color: rgba(255, 238, 207, .16);
}

.fcal-d--vacio { visibility: hidden; }

.fcal-nota {
  margin: 26px 0 0;
  max-width: 44ch;
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 238, 207, .58);
}

.fcal-nota s { text-decoration-thickness: 1px; }

.fcal-mas {
  margin-top: 18px;
  padding: 0 0 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 238, 207, .4);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crema, #FFEECF);
  cursor: pointer;
  transition: border-color .3s var(--ease-out, ease);
}

@media (hover: hover) {
  .fcal-mas:hover { border-bottom-color: var(--crema, #FFEECF); }
}

@media (min-width: 640px) {
  .fcal-meses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  /* A todo lo ancho, como el mapa: si no, se queda en media columna. */
  .fsec--cal > #fCal { grid-column: 1 / -1; }
  .fcal-meses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fcal-rejilla { max-width: none; }
}

/* ==========================================================
   EL CALENDARIO DEL WIDGET DE RESERVA
   Lodgify saca su calendario a un portal al final del <body>,
   FUERA de nuestro panel, con z-index 1000. Como nuestro velo
   tiene 3000, quedaba tapado entero y no se podía tocar: era
   el «sale por detrás y no se puede seleccionar».
   Nuestro velo 3000 · nuestro panel 3100 · su calendario 3200.
   ========================================================== */

[data-radix-popper-content-wrapper] {
  z-index: 3200 !important;
}

/* Sus ventanas modales, por el mismo motivo. */
[data-radix-portal],
#lodgify-book-now-box [role="dialog"] {
  z-index: 3200;
}