/* =========================================================================
   Musubi · Apartamentos turísticos en Granada
   Sistema visual construido sobre la marca real: nudo musubi en teal #499D94
   y logotipo en rojo #EE3237. Tipografía de marca (Airbnb Cereal) para
   titulares y Inter para texto corrido.
   ========================================================================= */

/* ------------------------------------------------------------- Tipografía */

@font-face {
  font-family: "Airbnb Cereal";
  src: url("../fonts/AirbnbCereal_W_Lt.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Airbnb Cereal";
  src: url("../fonts/AirbnbCereal_W_Bk.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Airbnb Cereal";
  src: url("../fonts/AirbnbCereal_W_Md.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Airbnb Cereal";
  src: url("../fonts/AirbnbCereal_W_Bd.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Airbnb Cereal";
  src: url("../fonts/AirbnbCereal_W_XBd.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Airbnb Cereal";
  src: url("../fonts/AirbnbCereal_W_Blk.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Musubi";
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Musubi";
  src: url("../fonts/Inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- Tokens */

.musubi-body {
  /* Marca */
  --mu-red: #ee3237;
  --mu-red-dark: #c9262c;
  --mu-red-tint: #fdeceb;
  --mu-teal: #499d94;
  --mu-teal-dark: #35766f;
  --mu-teal-ink: #143a37;
  --mu-teal-tint: #e7f1ef;

  /* Neutros cálidos */
  --mu-ink: #1d2422;
  --mu-ink-soft: #4c5754;
  --mu-muted: #7d8886;
  --mu-cream: #fbf9f6;
  --mu-stone: #f3efe9;
  --mu-stone-deep: #e8e2d8;
  --mu-line: #e6e0d6;
  --mu-line-soft: #f0ebe3;
  --mu-white: #ffffff;

  /* Medidas */
  --mu-shell: 1280px;
  --mu-gutter: clamp(1.25rem, 4vw, 4rem);
  --mu-section: clamp(4rem, 8vw, 7.5rem);
  --mu-header-h: 88px;

  /* Formas */
  --mu-r-sm: 8px;
  --mu-r: 12px;
  --mu-r-lg: 16px;
  --mu-r-xl: 24px;
  --mu-r-pill: 999px;

  /* Profundidad: sombras ambientales, nunca duras */
  --mu-shadow-xs: 0 1px 2px rgba(20, 58, 55, 0.05);
  --mu-shadow-sm: 0 4px 16px -6px rgba(20, 58, 55, 0.1);
  --mu-shadow-md: 0 18px 40px -18px rgba(20, 58, 55, 0.18);
  --mu-shadow-lg: 0 30px 60px -15px rgba(20, 58, 55, 0.14);

  --mu-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --mu-font-head: "Airbnb Cereal", "Poppins", "Nunito Sans", system-ui, sans-serif;
  --mu-font-body: "Inter Musubi", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  background: var(--mu-cream);
  color: var(--mu-ink);
  font-family: var(--mu-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.musubi-body *,
.musubi-body *::before,
.musubi-body *::after {
  box-sizing: border-box;
}

/* Base sin especificidad: cualquier regla de componente puede sobreescribir
   el alto (logos, mascota, marcas de agua) sin pelear con este selector. */
:where(.musubi-body) :where(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

.musubi-body :focus-visible {
  outline: 2px solid var(--mu-red);
  outline-offset: 3px;
  border-radius: 4px;
}

.musubi-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--mu-teal-ink);
  color: var(--mu-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--mu-r);
  font-size: 0.875rem;
}

.musubi-skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ----------------------------------------------------------------- Layout */

.musubi-shell {
  width: 100%;
  max-width: var(--mu-shell);
  margin-inline: auto;
  padding-inline: var(--mu-gutter);
}

.musubi-main {
  display: block;
  min-height: 40vh;
}

.musubi-section {
  padding-block: var(--mu-section);
  background: var(--mu-cream);
}

.musubi-section--tight {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.musubi-section--stone {
  background: var(--mu-stone);
}

.musubi-section--mint {
  background: var(--mu-teal-tint);
}

.musubi-section--ink {
  background: var(--mu-teal-ink);
  color: rgba(255, 255, 255, 0.76);
}

.musubi-section--ink .musubi-section__title {
  color: var(--mu-white);
}

.musubi-section--ink .musubi-section__lead {
  color: rgba(255, 255, 255, 0.7);
}

.musubi-section__head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.musubi-section__head--row {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.musubi-section__head--row > div {
  max-width: 42rem;
}

.musubi-section__title {
  font-family: var(--mu-font-head);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0.625rem 0 0;
  color: var(--mu-ink);
  text-wrap: balance;
}

.musubi-section__lead {
  margin: 0.875rem 0 0;
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  color: var(--mu-ink-soft);
  max-width: 40rem;
}

.musubi-eyebrow {
  margin: 0;
  font-family: var(--mu-font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mu-teal-dark);
}

.musubi-eyebrow--red {
  color: var(--mu-red);
}

.musubi-eyebrow--light {
  color: rgba(255, 255, 255, 0.82);
}

.musubi-eyebrow--sm {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
}

.musubi-grid {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}

.musubi-grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
}

.musubi-grid--tiles {
  grid-template-columns: repeat(auto-fill, minmax(20rem, 30rem));
  justify-content: start;
}

.musubi-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-xl);
  color: var(--mu-muted);
  background: var(--mu-white);
}

.musubi-empty__mascota {
  width: clamp(5rem, 12vw, 7.5rem);
  height: auto;
  opacity: 0.9;
}

/* ----------------------------------------------------------------- Iconos */

.musubi-icon {
  width: 1.375rem;
  height: 1.375rem;
  flex: 0 0 auto;
  stroke-width: 1.6;
}

.musubi-icon--xs {
  width: 1rem;
  height: 1rem;
}

.musubi-icon--lg {
  width: 1.75rem;
  height: 1.75rem;
}

/* ---------------------------------------------------------------- Botones */

.musubi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.625rem;
  border: 1px solid transparent;
  border-radius: var(--mu-r-lg);
  font-family: var(--mu-font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--mu-ease), color 0.25s var(--mu-ease),
    border-color 0.25s var(--mu-ease), transform 0.25s var(--mu-ease),
    box-shadow 0.25s var(--mu-ease);
}

.musubi-btn:hover {
  transform: translateY(-1px);
}

.musubi-btn--sm {
  min-height: 2.625rem;
  padding: 0 1.125rem;
  font-size: 0.875rem;
}

.musubi-btn--lg {
  min-height: 3.5rem;
  padding: 0 2rem;
  font-size: 1rem;
}

.musubi-btn--block {
  width: 100%;
}

.musubi-btn--primary {
  background: var(--mu-red);
  color: var(--mu-white);
  border-color: var(--mu-red);
  box-shadow: var(--mu-shadow-sm);
}

.musubi-btn--primary:hover {
  background: var(--mu-red-dark);
  border-color: var(--mu-red-dark);
}

.musubi-btn--teal {
  background: var(--mu-teal);
  color: var(--mu-white);
  border-color: var(--mu-teal);
}

.musubi-btn--teal:hover {
  background: var(--mu-teal-dark);
  border-color: var(--mu-teal-dark);
}

.musubi-btn--outline {
  background: var(--mu-white);
  color: var(--mu-ink);
  border-color: var(--mu-line);
}

.musubi-btn--outline:hover {
  border-color: var(--mu-teal);
  color: var(--mu-teal-dark);
}

.musubi-btn--outline-light {
  background: rgba(255, 255, 255, 0.1);
  color: var(--mu-white);
  border-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
}

.musubi-btn--outline-light:hover {
  background: var(--mu-white);
  color: var(--mu-teal-ink);
  border-color: var(--mu-white);
}

.musubi-btn--ghost {
  background: transparent;
  color: var(--mu-teal-dark);
  border-color: transparent;
  padding-inline: 0.25rem;
}

.musubi-btn--ghost:hover {
  color: var(--mu-red);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.musubi-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mu-font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mu-red);
  transition: gap 0.25s var(--mu-ease), color 0.25s var(--mu-ease);
}

.musubi-link-arrow:hover {
  gap: 0.875rem;
  color: var(--mu-red-dark);
}

.musubi-section--ink .musubi-link-arrow {
  color: var(--mu-white);
}

/* ---------------------------------------------------------------- Píldoras */

.musubi-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--mu-r-pill);
  background: var(--mu-teal-tint);
  color: var(--mu-teal-dark);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.musubi-pill--stone {
  background: var(--mu-stone);
  color: var(--mu-ink-soft);
}

.musubi-pill--red {
  background: var(--mu-red-tint);
  color: var(--mu-red-dark);
}

.musubi-pill--glass {
  background: rgba(20, 58, 55, 0.62);
  color: var(--mu-white);
  backdrop-filter: blur(8px);
}

.musubi-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ----------------------------------------------------------------- Header */

/* Sistema de relleno (wipe): la barra arranca transparente sobre el hero y se
   rellena de blanco de abajo arriba conforme el hero sale de pantalla.
   --wipe lo escribe musubi.js en cada scroll. */
.musubi-header {
  --wipe: 0%;
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 900;
  background: transparent;
  transition: box-shadow 0.3s var(--mu-ease);
}

/* Reserva el hueco de la barra fija cuando el hero NO pasa por debajo. */
.musubi-header-spacer {
  height: var(--mu-header-h);
}

.musubi-header.is-stuck {
  box-shadow: 0 30px 60px -15px rgba(20, 58, 55, 0.08);
}

/* El desplazamiento al entrar el footer lo controla el scroll, sin transición,
   para que siga al dedo y no vaya a remolque. */
.musubi-header {
  will-change: transform;
}

.musubi-header.is-hidden {
  pointer-events: none;
}

.musubi-navbar {
  position: relative;
  isolation: isolate;
}

.musubi-navbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mu-line-soft);
  clip-path: inset(calc(100% - var(--wipe)) 0 0 0);
  will-change: clip-path;
  pointer-events: none;
}

.musubi-navbar__inner {
  position: relative;
  z-index: 1;
}

/* Sobre heros oscuros la barra empieza en versión clara y cambia al rellenarse. */
.musubi-header--on-dark:not(.is-filled) .musubi-nav__link {
  color: rgba(255, 255, 255, 0.88);
}

.musubi-header--on-dark:not(.is-filled) .musubi-nav__link:hover,
.musubi-header--on-dark:not(.is-filled) .musubi-nav__link.is-current {
  background: rgba(255, 255, 255, 0.16);
  color: var(--mu-white);
}

.musubi-header--on-dark:not(.is-filled) .musubi-burger {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.42);
}

.musubi-header--on-dark:not(.is-filled) .musubi-burger span {
  background: var(--mu-white);
}

/* Logotipo en dos capas recortadas por el mismo --wipe: la versión blanca
   cede paso a la de color justo cuando la barra termina de rellenarse. */
.musubi-brand--wipe {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.musubi-brand__logo--measure {
  opacity: 0;
}

.musubi-brand__layer {
  position: absolute;
  inset: 0;
  width: auto;
  pointer-events: none;
}

.musubi-brand__layer--light {
  clip-path: inset(0 0 var(--wipe) 0);
  will-change: clip-path;
}

.musubi-brand__layer--color {
  clip-path: inset(calc(100% - var(--wipe)) 0 0 0);
  will-change: clip-path;
}

.musubi-topbar {
  background: var(--mu-teal-ink);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.75rem;
}

.musubi-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.25rem;
}

.musubi-topbar__group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
}

.musubi-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--mu-ease);
}

.musubi-topbar__link:hover {
  color: var(--mu-white);
}

.musubi-topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1rem 0.7rem;
  border-radius: var(--mu-r-pill);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.musubi-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.musubi-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
}

.musubi-brand__logo {
  height: clamp(2rem, 3.4vw, 2.625rem);
  width: auto;
}

.musubi-brand__fallback {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.musubi-brand__name {
  font-family: var(--mu-font-head);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--mu-red);
}

.musubi-nav {
  display: none;
  flex: 1 1 auto;
  justify-content: center;
}

.musubi-nav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.musubi-nav__item {
  position: relative;
}

.musubi-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.875rem;
  border-radius: var(--mu-r-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--mu-ink-soft);
  transition: color 0.2s var(--mu-ease), background 0.2s var(--mu-ease);
}

.musubi-nav__link:hover,
.musubi-nav__link.is-current {
  color: var(--mu-teal-ink);
  background: var(--mu-teal-tint);
}

.musubi-nav__chevron {
  transition: transform 0.25s var(--mu-ease);
}

.musubi-nav__item--has-children:hover .musubi-nav__chevron {
  transform: rotate(180deg);
}

.musubi-nav__submenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 17rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--mu-white);
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-lg);
  box-shadow: var(--mu-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s var(--mu-ease), transform 0.2s var(--mu-ease),
    visibility 0.2s var(--mu-ease);
}

.musubi-nav__item--has-children:hover .musubi-nav__submenu,
.musubi-nav__item--has-children:focus-within .musubi-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.musubi-nav__submenu a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: var(--mu-r);
  font-size: 0.9375rem;
  color: var(--mu-ink-soft);
  text-decoration: none;
  transition: background 0.2s var(--mu-ease), color 0.2s var(--mu-ease);
}

.musubi-nav__submenu a:hover {
  background: var(--mu-stone);
  color: var(--mu-ink);
}

.musubi-navbar__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.musubi-navbar__actions .musubi-btn--primary {
  display: none;
}

/* En el móvil el flotante ya está siempre a la vista: el de la barra sobra y
   deja sitio para el logo y el menu. */
.musubi-wa {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--mu-r-pill);
  background: #25d366;
  color: var(--mu-white);
  transition: transform 0.25s var(--mu-ease), background 0.25s var(--mu-ease);
}

.musubi-wa:hover {
  background: #1da851;
  transform: translateY(-1px);
}

.musubi-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.65rem;
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r);
  cursor: pointer;
}

.musubi-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--mu-teal-ink);
}

/* ----------------------------------------------------------------- Drawer */

.musubi-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}

.musubi-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.musubi-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 58, 55, 0.45);
  opacity: 0;
  transition: opacity 0.3s var(--mu-ease);
}

.musubi-drawer.is-open .musubi-drawer__overlay {
  opacity: 1;
}

.musubi-drawer__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(23rem, 88vw);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem;
  background: var(--mu-cream);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s var(--mu-ease);
}

.musubi-drawer.is-open .musubi-drawer__panel {
  transform: translateX(0);
}

.musubi-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--mu-line);
}

.musubi-drawer__logo {
  height: 2rem;
  width: auto;
}

.musubi-drawer__close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r);
  cursor: pointer;
  color: var(--mu-ink);
}

.musubi-drawer__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Enlace de primer nivel: línea completa con flecha, sin aire de titular. */
.musubi-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 0;
  font-family: var(--mu-font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mu-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--mu-line-soft);
}

.musubi-drawer__link svg {
  color: var(--mu-muted);
  flex: 0 0 auto;
}

.musubi-drawer__link.is-current {
  color: var(--mu-red);
}

/* Los hijos van dentro de una tarjeta clara, para que se lean como submenú
   y no como una segunda lista de primer nivel. */
.musubi-drawer__sub {
  margin: 0.5rem 0 1rem !important;
  padding: 0.25rem !important;
  background: var(--mu-white);
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-lg);
}

.musubi-drawer__sub a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--mu-r);
  font-size: 0.9375rem;
  color: var(--mu-ink-soft);
  text-decoration: none;
}

.musubi-drawer__sub a:hover {
  background: var(--mu-teal-tint);
  color: var(--mu-teal-ink);
}

.musubi-drawer__sub svg {
  color: var(--mu-teal);
  flex: 0 0 auto;
}

.musubi-drawer__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mu-line);
}

.musubi-drawer__contact {
  display: grid;
  gap: 0.625rem;
  font-size: 0.875rem;
}

.musubi-drawer__contact a,
.musubi-drawer__contact span {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--mu-ink-soft);
  text-decoration: none;
}

.musubi-drawer__contact svg {
  color: var(--mu-teal);
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------- WhatsApp */

.musubi-whatsapp {
  position: fixed;
  right: 1.125rem;
  bottom: 1.125rem;
  z-index: 890;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--mu-r-pill);
  background: #25d366;
  color: var(--mu-white);
  box-shadow: var(--mu-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: transform 0.35s var(--mu-ease), background 0.25s var(--mu-ease),
    opacity 0.35s var(--mu-ease), visibility 0.35s var(--mu-ease);
}

/* El icono iba a 1,375rem dentro de un botón de 3,25rem y se veía perdido. */
.musubi-whatsapp .musubi-icon {
  width: 1.875rem;
  height: 1.875rem;
}

.musubi-whatsapp.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.musubi-whatsapp.is-visible:hover {
  transform: translateY(-2px);
  background: #1da851;
}

/* Sin JS el botón debe verse igual. */
.no-js .musubi-whatsapp {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ------------------------------------------------------------------- Hero */

/* El hero ocupa una pantalla completa: con menos altura el titular quedaba
   pegado a la barra de búsqueda que lo solapa por abajo. svh evita el salto
   con la barra de direcciones del móvil. */
.musubi-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
  background: var(--mu-cream);
  overflow: hidden;
}

.musubi-hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
  width: 100%;
}

.musubi-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.musubi-hero__body > * {
  margin: 0;
}

.musubi-hero__title {
  font-family: var(--mu-font-head);
  font-size: clamp(2.25rem, 5.4vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--mu-ink);
  max-width: 16ch;
  text-wrap: balance;
}

.musubi-hero__title em {
  font-style: normal;
  color: var(--mu-red);
}

.musubi-hero__subtitle {
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  color: var(--mu-ink-soft);
  max-width: 42ch;
}

.musubi-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.musubi-hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--mu-r-xl);
  overflow: hidden;
  background: var(--mu-stone-deep);
  box-shadow: var(--mu-shadow-lg);
}

.musubi-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.musubi-hero__knot {
  display: none;
  position: absolute;
  right: -6%;
  top: -14%;
  width: clamp(12rem, 26vw, 22rem);
  opacity: 0.05;
  pointer-events: none;
}

/* Hero a sangre, cuando hay una foto de portada potente */
.musubi-hero--cover {
  padding: 0;
  align-items: stretch;
  background: var(--mu-teal-ink);
}

.musubi-hero--cover .musubi-hero__grid {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  grid-template-columns: 1fr;
  align-content: end;
  align-items: end;
  /* Abajo se reserva sitio para la tarjeta de búsqueda, que sube sobre el hero. */
  padding-block: calc(var(--mu-header-h) + clamp(3rem, 8vh, 6rem)) clamp(5.5rem, 12vh, 8rem);
}

.musubi-hero--cover .musubi-hero__title,
.musubi-hero--cover .musubi-hero__subtitle {
  color: var(--mu-white);
}

.musubi-hero--cover .musubi-hero__subtitle {
  color: rgba(255, 255, 255, 0.82);
}

.musubi-hero__cover {
  position: absolute;
  inset: 0;
}

.musubi-hero__lienzo {
  position: absolute;
  inset: 0;
}

.musubi-hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El vídeo aparece sobre el póster solo cuando ya está reproduciendo, para que
   no se vea un salto en negro mientras carga. */
.musubi-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--mu-ease);
}

.musubi-hero__video.is-playing {
  opacity: 1;
}

.musubi-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      180deg,
      rgba(20, 58, 55, 0.42) 0%,
      rgba(20, 58, 55, 0.12) 40%,
      rgba(20, 58, 55, 0.86) 100%
    );
}

/* En el móvil la tarjeta del buscador va más apretada: cabe entera sin que el
   teléfono tenga que hacer scroll dentro de la primera pantalla. */
@media (max-width: 39.999rem) {
  .musubi-search__card--portada {
    padding: 1.125rem 1.125rem 1.25rem;
    border-radius: var(--mu-r-lg);
  }

  .musubi-search__card--portada .musubi-search__fields {
    gap: 0.875rem;
  }

  .musubi-search__submit {
    width: 100%;
  }
}

/* ------------------------------------------------- Portada minimalista */

/* La home entra enseñando solo el logo, el fondo y el buscador en el centro. Al
   primer scroll eso se retira y aparece el hero de siempre **en la misma
   pantalla**: no son dos secciones una debajo de otra, son dos estados de una.

   Por eso la portada va superpuesta (`absolute`) y no en el flujo: la página
   mide lo mismo que antes y nadie tiene que bajar una pantalla entera para
   llegar al contenido. */
.musubi-hero--portada .musubi-portada,
.musubi-hero--portada .musubi-hero__grid {
  transition: opacity 0.45s var(--mu-ease), visibility 0.45s var(--mu-ease);
}

.musubi-portada {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(6rem, 14vh, 9rem) var(--mu-gutter) clamp(4.5rem, 10vh, 6rem);
  /* Estado por defecto: apagada. Así, sin JavaScript, la home es la de siempre
     en vez de quedarse con el buscador encima del titular. */
  opacity: 0;
  visibility: hidden;
}

.musubi-body.is-portada .musubi-portada {
  opacity: 1;
  visibility: visible;
}

/* Mientras manda la portada, el hero de siempre espera apagado. Y con él la
   barra de búsqueda, que sube sobre el hero y asomaba por el borde de abajo
   rompiendo la pantalla limpia —además de tapar la flecha—. No se pierde nada:
   es el mismo buscador que está en el centro. */
.musubi-body.is-portada .musubi-hero--portada .musubi-hero__grid,
.musubi-body.is-portada .musubi-hero--portada + .musubi-search--overlap {
  opacity: 0;
  visibility: hidden;
}

.musubi-search--overlap {
  transition: opacity 0.45s var(--mu-ease), visibility 0.45s var(--mu-ease);
}

.musubi-portada__marca {
  position: absolute;
  top: clamp(1.25rem, 3.5vh, 2.25rem);
  left: var(--mu-gutter);
  display: inline-flex;
}

.musubi-portada__marca img {
  width: clamp(8.5rem, 16vw, 11.5rem);
  height: auto;
}

/* El buscador, sin título ni nota: en la portada el contexto lo da la propia
   pantalla, y cualquier texto de más rompe la idea. */
.musubi-search__card--portada {
  width: 100%;
  max-width: 68rem;
  margin: 0;
  box-shadow: var(--mu-shadow-lg);
}

.musubi-portada__scroll {
  position: absolute;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--mu-r-pill);
  background: rgba(255, 255, 255, 0.12);
  color: var(--mu-white);
  cursor: pointer;
  backdrop-filter: blur(6px);
  animation: musubi-portada-cue 2.4s var(--mu-ease) infinite;
}

.musubi-portada__scroll:hover {
  background: rgba(255, 255, 255, 0.22);
}

@keyframes musubi-portada-cue {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* Arriba del todo no hay barra: solo el logo de la portada. En cuanto se
   mueve el scroll, la cabecera vuelve. Va con opacidad y no con `transform`
   porque el ocultado del footer ya escribe `transform` en línea sobre el
   header y ganaría a cualquier regla de la hoja. */
.musubi-body.is-portada [data-musubi-header] {
  opacity: 0;
  pointer-events: none;
}

[data-musubi-header] {
  transition: opacity 0.35s var(--mu-ease);
}

@media (prefers-reduced-motion: reduce) {
  .musubi-portada__scroll {
    animation: none;
  }
}

/* ------------------------------------------------- Hero páginas interiores */

/* Una sola altura para todas las páginas interiores. Antes había dos (`--md` y
   `--lg`) y cada plantilla elegía: categorías y fichas salían mucho más altas
   que contacto o legales, y la web parecía de dos sitios distintos. */
.musubi-pagehero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(56vh, 28rem);
  padding-block: calc(var(--mu-header-h) + clamp(2rem, 4vw, 3rem)) clamp(2rem, 4vw, 3rem);
  background: var(--mu-teal-ink);
  color: var(--mu-white);
  overflow: hidden;
}

.musubi-pagehero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.musubi-pagehero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El degradado de marca: verde corporativo a la izquierda, que se abre en
   diagonal para dejar ver la foto por la derecha.

   En móvil la diagonal no vale —no hay ancho para que el texto quede fuera de
   la foto—, así que ahí el verde sube desde abajo y la foto asoma arriba. La
   versión en diagonal entra en el salto de 64rem. */
.musubi-pagehero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* el header va encima y sus enlaces son blancos */
    linear-gradient(180deg, rgba(20, 58, 55, 0.66) 0%, rgba(20, 58, 55, 0) 34%),
    linear-gradient(
      6deg,
      #143a37 0%,
      #1a4c46 30%,
      rgba(35, 100, 94, 0.95) 48%,
      rgba(54, 133, 125, 0.66) 66%,
      rgba(73, 157, 148, 0.24) 82%,
      rgba(73, 157, 148, 0) 96%
    );
}

/* Sin foto no hay nada que dejar ver: el mismo verde, con volumen. */
.musubi-pagehero--plain .musubi-pagehero__veil {
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(73, 157, 148, 0.55) 0%, rgba(73, 157, 148, 0) 60%),
    linear-gradient(100deg, #143a37 0%, #1b4f4a 58%, #2d7972 100%);
}

.musubi-pagehero__inner {
  position: relative;
}

.musubi-pagehero__title {
  margin: 0.5rem 0 0;
  max-width: 22ch;
  font-family: var(--mu-font-head);
  font-size: clamp(1.875rem, 4.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--mu-white);
  text-wrap: balance;
}

.musubi-pagehero__subtitle {
  margin: 0.875rem 0 0;
  max-width: 52ch;
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  color: rgba(255, 255, 255, 0.82);
}

.musubi-pagehero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.musubi-pagehero__meta li {
  padding: 0.35rem 0.85rem;
  border-radius: var(--mu-r-pill);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  font-size: 0.8125rem;
  color: var(--mu-white);
}

.musubi-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.68);
}

.musubi-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.musubi-breadcrumbs a:hover {
  color: var(--mu-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.musubi-breadcrumbs__sep {
  opacity: 0.45;
}

/* ------------------------------------------------------ Barra de búsqueda */

.musubi-search {
  position: relative;
  z-index: 10;
  padding-bottom: clamp(1rem, 3vw, 2rem);
  background: var(--mu-cream);
}

.musubi-search--overlap {
  margin-top: clamp(-4rem, -5vw, -2.5rem);
  background: transparent;
}

.musubi-search__card {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--mu-white);
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-xl);
  box-shadow: var(--mu-shadow-lg);
}

.musubi-search__title {
  margin: 0 0 1.125rem;
  font-family: var(--mu-font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.musubi-search__fields {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.musubi-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--mu-line);
  transition: border-color 0.25s var(--mu-ease);
}

.musubi-field:focus-within {
  border-bottom-color: var(--mu-red);
}

.musubi-field__label {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--mu-font-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mu-muted);
}

.musubi-field__label svg {
  color: var(--mu-teal);
}

.musubi-field input,
.musubi-field select {
  width: 100%;
  min-height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--mu-ink);
  appearance: none;
}

.musubi-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8886' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 1.125rem;
  padding-right: 1.5rem;
}

.musubi-field input:focus,
.musubi-field select:focus {
  outline: none;
}

.musubi-search__submit {
  align-self: end;
  justify-content: center;
  /* El texto del botón no se parte en dos líneas: con dos palabras largas
     rompía la altura de la fila. */
  white-space: nowrap;
}

.musubi-search__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  /* Iba pegada a la fila de campos y parecía parte del último: basta con el
     aire, sin línea de por medio. */
  margin: 2.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mu-muted);
}

.musubi-search__note svg {
  margin-top: 0.15rem;
}

.musubi-search__note svg {
  color: var(--mu-teal);
}

/* ------------------------------------------------- Selector de fechas propio
   El <input type="date"> nativo no se puede maquetar, así que se saca de la
   vista (sigue en el formulario y se envía) y encima va este control. */

.musubi-dates__native {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
}

.musubi-dates {
  position: relative;
  min-width: 0;
}

/* `span 2` obligaba a la rejilla a tener dos columnas incluso en el móvil,
   donde solo hay una: los dos desplegables se montaban uno encima de otro y el
   texto se cortaba. `1 / -1` ocupa la fila entera, haya las columnas que haya. */
.musubi-dates--search {
  grid-column: 1 / -1;
}

.musubi-dates--form {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
}

.musubi-dates__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-pill);
  background: var(--mu-white);
  overflow: hidden;
  transition: box-shadow 0.2s var(--mu-ease), border-color 0.2s var(--mu-ease);
}

.musubi-dates.is-open .musubi-dates__fields {
  border-color: var(--mu-ink);
  box-shadow: 0 0 0 1px var(--mu-ink);
}

.musubi-dates__field {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1.125rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: background 0.2s var(--mu-ease);
}

.musubi-dates__field + .musubi-dates__field {
  border-left: 1px solid var(--mu-line);
}

.musubi-dates__field:hover {
  background: var(--mu-stone);
}

.musubi-dates__field.is-active {
  background: var(--mu-teal-tint);
}

.musubi-dates__label {
  font-family: var(--mu-font-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mu-muted);
}

.musubi-dates__value {
  font-size: 0.9375rem;
  color: var(--mu-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.musubi-dates__field.is-filled .musubi-dates__value {
  color: var(--mu-ink);
  font-weight: 500;
}

.musubi-dates.is-error .musubi-dates__fields {
  border-color: var(--mu-red);
  box-shadow: 0 0 0 3px rgba(238, 50, 55, 0.12);
}

/* ------------------------------------------------------------- Calendario */

.musubi-cal {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.625rem);
  left: 0;
  width: max-content;
  max-width: min(92vw, 44rem);
  padding: 1rem;
  background: var(--mu-white);
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-xl);
  box-shadow: var(--mu-shadow-lg);
}

.musubi-cal[hidden] {
  display: none;
}

/* Sacado del flujo del formulario: lo coloca musubi.js. */
.musubi-cal--floating {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 1200;
  translate: none;
}

.musubi-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.musubi-cal__title {
  margin: 0;
  font-family: var(--mu-font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.musubi-cal__title::first-letter {
  text-transform: uppercase;
}

.musubi-cal__nav {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-pill);
  background: var(--mu-white);
  color: var(--mu-ink);
  cursor: pointer;
  transition: background 0.2s var(--mu-ease), border-color 0.2s var(--mu-ease);
}

.musubi-cal__nav:hover {
  background: var(--mu-stone);
  border-color: var(--mu-ink-soft);
}

.musubi-cal__nav svg {
  width: 1rem;
  height: 1rem;
}

.musubi-cal__months {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.musubi-cal__month-title {
  display: none;
  margin: 0 0 0.5rem;
  text-align: center;
  font-family: var(--mu-font-head);
  font-size: 0.875rem;
  font-weight: 700;
}

.musubi-cal__month-title::first-letter {
  text-transform: uppercase;
}

.musubi-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.musubi-cal__dow {
  display: grid;
  place-items: center;
  height: 1.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mu-muted);
}

.musubi-cal__empty {
  height: 2.375rem;
}

.musubi-cal__day {
  position: relative;
  height: 2.375rem;
  min-width: 2.375rem;
  border: 0;
  border-radius: var(--mu-r-pill);
  background: transparent;
  font-family: var(--mu-font-body);
  font-size: 0.875rem;
  color: var(--mu-ink);
  cursor: pointer;
  transition: background 0.15s var(--mu-ease), color 0.15s var(--mu-ease);
}

.musubi-cal__day:hover:not(:disabled) {
  background: var(--mu-stone);
}

.musubi-cal__day:disabled {
  color: var(--mu-line);
  cursor: default;
  text-decoration: line-through;
}

/* Rango: extremos en oscuro y el tramo intermedio en un tono suave. */
.musubi-cal__day.is-between {
  background: var(--mu-teal-tint);
  border-radius: 0;
}

/* Noches sin ninguna unidad libre: se ven, pero no se pueden elegir. */
.musubi-cal__day.is-ocupado {
  color: var(--mu-muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--mu-red) 55%, transparent);
  opacity: 0.55;
  cursor: not-allowed;
}

/* Previsualización del tramo mientras se arrastra el ratón hacia la salida. */
.musubi-cal__day.is-preview {
  background: var(--mu-teal-tint);
  border-radius: 0;
}

.musubi-cal__day.is-preview-end {
  background: var(--mu-teal);
  color: var(--mu-white);
}

.musubi-cal__day.is-start,
.musubi-cal__day.is-end {
  background: var(--mu-teal-ink);
  color: var(--mu-white);
  font-weight: 600;
}

.musubi-cal__day.is-start:hover,
.musubi-cal__day.is-end:hover {
  background: var(--mu-teal-ink);
}

.musubi-cal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--mu-line-soft);
}

.musubi-cal__clear {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--mu-font-body);
  font-size: 0.8125rem;
  color: var(--mu-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.musubi-cal__clear:hover {
  color: var(--mu-red);
}

.musubi-cal__nights {
  font-size: 0.8125rem;
  color: var(--mu-muted);
}

/* Dentro del panel lateral el calendario no cabe a la derecha. */
.musubi-reserva--aside .musubi-cal:not(.musubi-cal--floating) {
  left: auto;
  right: 0;
}

@media (min-width: 48rem) {
  .musubi-cal__months {
    grid-template-columns: 1fr 1fr;
  }

  /* Con dos meses a la vista cada uno lleva su título y el de cabecera sobra;
     con un solo mes es al contrario. */
  .musubi-cal__title {
    visibility: hidden;
  }

  .musubi-cal__month-title {
    display: block;
  }
}

@media (max-width: 30rem) {
  .musubi-cal:not(.musubi-cal--floating) {
    left: 50%;
    translate: -50% 0;
  }
}

/* ------------------------------------------------------- Tira de confianza */

.musubi-trust {
  background: var(--mu-white);
  border-block: 1px solid var(--mu-line-soft);
}

.musubi-trust__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem clamp(1.25rem, 3vw, 2.75rem);
  margin: 0;
  padding-block: 1.125rem;
  list-style: none;
}

.musubi-trust__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mu-font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mu-ink-soft);
}

.musubi-trust__list svg {
  color: var(--mu-teal);
}

/* -------------------------------------------------- Tarjetas de categoría */

.musubi-categorias__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}

.musubi-catcard {
  display: flex;
  flex-direction: column;
  background: var(--mu-white);
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-xl);
  overflow: hidden;
  transition: box-shadow 0.35s var(--mu-ease), transform 0.35s var(--mu-ease);
}

.musubi-catcard:hover {
  box-shadow: var(--mu-shadow-lg);
  transform: translateY(-4px);
}

.musubi-catcard__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--mu-stone-deep);
}

.musubi-catcard__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--mu-ease);
}

.musubi-catcard:hover .musubi-catcard__image {
  transform: scale(1.04);
}

.musubi-catcard__count {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.musubi-catcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.musubi-catcard__title {
  margin: 0;
  font-family: var(--mu-font-head);
  font-size: clamp(1.375rem, 2.1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.musubi-catcard__title a {
  color: inherit;
  text-decoration: none;
}

.musubi-catcard__title a:hover {
  color: var(--mu-red);
}

.musubi-catcard__text {
  margin: 0;
  color: var(--mu-ink-soft);
  font-size: 0.9375rem;
}

.musubi-catcard__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.musubi-catcard__thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--mu-r);
  overflow: hidden;
  background: var(--mu-stone-deep);
}

.musubi-catcard__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.musubi-catcard__thumb--more {
  display: grid;
  place-items: center;
  background: var(--mu-teal-tint);
  color: var(--mu-teal-dark);
  font-family: var(--mu-font-head);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

/* ---------------------------------------------------------- Specs y chips */

.musubi-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--mu-ink-soft);
}

.musubi-specs li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.musubi-specs li svg {
  color: var(--mu-teal);
}

.musubi-specs--compact {
  font-size: 0.75rem;
}

.musubi-specs--lg {
  gap: 0.625rem;
  font-size: 0.9375rem;
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--mu-line);
}

.musubi-specs--lg li {
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  background: var(--mu-stone);
  border-radius: var(--mu-r-pill);
}

.musubi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.musubi-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.125rem;
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-pill);
  font-size: 0.9375rem;
  color: var(--mu-ink);
  text-decoration: none;
  transition: border-color 0.2s var(--mu-ease), background 0.2s var(--mu-ease),
    color 0.2s var(--mu-ease);
}

.musubi-chip:hover {
  border-color: var(--mu-teal);
  background: var(--mu-teal-tint);
  color: var(--mu-teal-ink);
}

.musubi-chip svg {
  color: var(--mu-teal);
}

.musubi-chip em {
  font-style: normal;
  font-size: 0.6875rem;
  padding: 0.1rem 0.45rem;
  background: var(--mu-stone);
  color: var(--mu-muted);
  border-radius: var(--mu-r-pill);
}

/* -------------------------------------------------- Tarjeta de apartamento */

.musubi-card {
  display: flex;
  flex-direction: column;
  background: var(--mu-white);
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-xl);
  overflow: hidden;
  transition: box-shadow 0.35s var(--mu-ease), transform 0.35s var(--mu-ease);
}

.musubi-card:hover {
  box-shadow: var(--mu-shadow-lg);
  transform: translateY(-4px);
}

.musubi-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--mu-stone-deep);
}

.musubi-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--mu-ease);
}

.musubi-card:hover .musubi-card__image {
  transform: scale(1.05);
}

.musubi-card__badge {
  position: absolute;
  right: 0.875rem;
  bottom: 0.875rem;
}

.musubi-card__flag {
  position: absolute;
  left: 0.875rem;
  top: 0.875rem;
}

.musubi-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.25rem;
  flex: 1 1 auto;
}

.musubi-card__title {
  margin: 0;
  font-family: var(--mu-font-head);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.musubi-card__title a {
  color: inherit;
  text-decoration: none;
}

.musubi-card__title a:hover {
  color: var(--mu-red);
}

.musubi-card__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--mu-muted);
}

.musubi-card__meta svg {
  color: var(--mu-teal);
}

.musubi-card__text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--mu-ink-soft);
}

.musubi-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--mu-line-soft);
}

.musubi-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.musubi-card__price small {
  font-family: var(--mu-font-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mu-muted);
}

.musubi-card__price strong {
  font-family: var(--mu-font-head);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mu-ink);
}

/* ------------------------------------------------------------------ Tiles */

.musubi-tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--mu-r-xl);
  overflow: hidden;
  background: var(--mu-teal-ink);
  text-decoration: none;
}

.musubi-tile__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: transform 0.7s var(--mu-ease), opacity 0.4s var(--mu-ease);
}

.musubi-tile:hover .musubi-tile__image {
  transform: scale(1.05);
  opacity: 1;
}

.musubi-tile__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(20, 58, 55, 0) 0%, rgba(20, 58, 55, 0.88) 100%);
  color: var(--mu-white);
}

.musubi-tile__title {
  font-family: var(--mu-font-head);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.musubi-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mu-font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------------------ Bloque intro */

.musubi-intro__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

.musubi-intro__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--mu-r-xl);
  overflow: hidden;
  background: var(--mu-stone-deep);
  box-shadow: var(--mu-shadow-md);
}

.musubi-intro__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.musubi-intro__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.musubi-intro__body > * {
  margin: 0;
}

.musubi-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1.25rem;
  width: 100%;
  margin: 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--mu-line);
  list-style: none;
}

.musubi-stats li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.musubi-stats__value {
  font-family: var(--mu-font-head);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--mu-red);
  line-height: 1;
}

.musubi-stats__label {
  font-size: 0.8125rem;
  color: var(--mu-muted);
}

/* -------------------------------------------------------------- Servicios */

.musubi-servicios__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.125rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.musubi-servicios__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.25rem, 2.2vw, 1.625rem);
  background: var(--mu-white);
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-xl);
  transition: box-shadow 0.3s var(--mu-ease), transform 0.3s var(--mu-ease);
}

.musubi-servicios__item:hover {
  box-shadow: var(--mu-shadow-md);
  transform: translateY(-2px);
}

.musubi-servicios__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--mu-r-lg);
  background: var(--mu-teal-tint);
  color: var(--mu-teal-dark);
  margin-bottom: 0.375rem;
}

.musubi-servicios__title {
  font-family: var(--mu-font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.musubi-servicios__text {
  font-size: 0.875rem;
  color: var(--mu-ink-soft);
}

.musubi-servicios__link {
  margin-top: 0.5rem;
  align-self: flex-start;
}

.musubi-resenas__widget {
  container-type: inline-size;
}

/* ---------------------------------------------------------------- Galería */

.musubi-gallery {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(8rem, 28vw, 11rem);
}

.musubi-gallery--grid {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.musubi-gallery__item {
  position: relative;
  margin: 0;
  border-radius: var(--mu-r-lg);
  overflow: hidden;
  background: var(--mu-stone-deep);
}

.musubi-gallery__open {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}

.musubi-gallery__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--mu-ease);
}

.musubi-gallery__open:hover .musubi-gallery__image {
  transform: scale(1.05);
}

.musubi-gallery__zoom {
  position: absolute;
  right: 0.625rem;
  top: 0.625rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--mu-r-pill);
  background: rgba(20, 58, 55, 0.66);
  backdrop-filter: blur(8px);
  color: var(--mu-white);
  opacity: 0;
  transition: opacity 0.25s var(--mu-ease);
}

.musubi-gallery__open:hover .musubi-gallery__zoom,
.musubi-gallery__open:focus-visible .musubi-gallery__zoom {
  opacity: 1;
}

.musubi-gallery__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.75rem 0.875rem 0.75rem;
  background: linear-gradient(180deg, rgba(20, 58, 55, 0) 0%, rgba(20, 58, 55, 0.82) 100%);
  color: var(--mu-white);
  font-size: 0.75rem;
  pointer-events: none;
}

.musubi-gallery__caption a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

/* --------------------------------------------------------- Sobre nosotros */

/* Cómo trabajamos: tarjetas con icono, mismo aire que los servicios. */
.musubi-valores__grid {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* auto-fill, no auto-fit: con un solo punto cargado, auto-fit estiraría la
     tarjeta a todo el ancho de la sección. */
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.musubi-valores__item {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.5rem;
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-xl);
  box-shadow: var(--mu-shadow-xs);
}

.musubi-valores__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--mu-teal-tint);
  border-radius: var(--mu-r-lg);
  color: var(--mu-teal-dark);
}

.musubi-valores__title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.25;
}

.musubi-valores__text {
  margin: 0;
  color: var(--mu-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Edificios: fila con chincheta, descripción y recuento. */
.musubi-edificios__grid {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.musubi-edificios__item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.375rem;
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-xl);
  box-shadow: var(--mu-shadow-xs);
}

.musubi-edificios__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--mu-stone);
  border-radius: var(--mu-r-pill);
  color: var(--mu-teal-dark);
}

.musubi-edificios__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.musubi-edificios__title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.25;
}

.musubi-edificios__text {
  margin: 0;
  color: var(--mu-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.musubi-edificios__count {
  margin: 0;
  color: var(--mu-muted);
  font-family: var(--mu-font-head);
  font-size: 0.8125rem;
}

.musubi-edificios__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.musubi-edificios__foot .musubi-aviso {
  flex: 1 1 20rem;
  margin: 0;
}

/* Equipo: retrato cuadrado, nombre y puesto. */
.musubi-equipo__grid {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.musubi-equipo__item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: center;
}

.musubi-equipo__media {
  overflow: hidden;
  margin-bottom: 0.5rem;
  aspect-ratio: 1 / 1;
  background: var(--mu-stone);
  border-radius: var(--mu-r-xl);
}

.musubi-equipo__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.musubi-equipo__name {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.2;
}

.musubi-equipo__role {
  margin: 0;
  color: var(--mu-teal-dark);
  font-family: var(--mu-font-head);
  font-size: 0.875rem;
}

.musubi-equipo__text {
  margin: 0;
  color: var(--mu-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ------------------------------------------------- Resumen de la solicitud */

/* Contenedor más estrecho: el resumen se lee de arriba abajo, en una columna,
   y una línea de texto demasiado larga cansa. */
.musubi-shell--estrecho {
  max-width: 62rem;
}

/* Barra con los datos de la reserva, pegada bajo la cabecera. */
.musubi-solbar {
  position: sticky;
  top: var(--mu-header-h);
  z-index: 20;
  background: var(--mu-white);
  border-bottom: 1px solid var(--mu-line);
  box-shadow: var(--mu-shadow-xs);
}

.musubi-solbar.is-hidden {
  pointer-events: none;
}

.musubi-solbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 0.875rem;
}

.musubi-solbar__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.musubi-solbar__datos li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.musubi-solbar__label {
  color: var(--mu-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.musubi-solbar__datos strong {
  font-family: var(--mu-font-head);
  font-size: 0.9375rem;
  color: var(--mu-ink);
}

.musubi-solbar__acciones {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.musubi-solbar__cambiar {
  color: var(--mu-teal-dark);
  font-size: 0.875rem;
  text-underline-offset: 3px;
}

/* Una ficha por apartamento, a lo ancho. */
.musubi-estancias {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: estancia;
}

.musubi-estancia {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-xl);
  box-shadow: var(--mu-shadow-sm);
}

.musubi-estancia__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.musubi-estancia__orden {
  margin: 0 0 0.25rem;
  color: var(--mu-muted);
  font-family: var(--mu-font-head);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.musubi-estancia__titulo {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.2;
}

.musubi-estancia__edificio {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  color: var(--mu-ink-soft);
  font-size: 0.9375rem;
}

.musubi-estancia__edificio svg {
  color: var(--mu-teal);
}

.musubi-estancia__importe {
  margin: 0;
  font-family: var(--mu-font-head);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--mu-ink);
  white-space: nowrap;
}

.musubi-estancia__specs {
  margin-top: 1rem;
}

.musubi-estancia__servicios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.musubi-estancia__servicios li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: var(--mu-stone);
  border-radius: var(--mu-r-pill);
  color: var(--mu-ink-soft);
  font-size: 0.8125rem;
}

.musubi-estancia__servicios svg {
  color: var(--mu-teal-dark);
}

/* Desglose en tabla: concepto a la izquierda, importe alineado a la derecha. */
.musubi-tabla-precio {
  width: 100%;
  margin-top: 1.25rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.musubi-tabla-precio th,
.musubi-tabla-precio td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mu-line-soft);
  text-align: left;
  font-weight: 400;
  color: var(--mu-ink-soft);
}

.musubi-tabla-precio td {
  width: 8rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.musubi-tabla-precio tr:last-child th,
.musubi-tabla-precio tr:last-child td {
  border-bottom: 0;
}

.musubi-tabla-precio tr.is-descuento th,
.musubi-tabla-precio tr.is-descuento td {
  color: var(--mu-teal-dark);
}

.musubi-total {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--mu-stone);
  border-radius: var(--mu-r-xl);
}

.musubi-tabla-precio--total {
  margin-top: 0;
  font-size: 0.9375rem;
}

.musubi-tabla-precio--total tfoot th,
.musubi-tabla-precio--total tfoot td {
  padding-top: 0.875rem;
  border-top: 1px solid var(--mu-line);
  border-bottom: 0;
  font-family: var(--mu-font-head);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--mu-ink);
}

.musubi-tabla-precio--total tfoot td {
  color: var(--mu-red);
}

.musubi-total__nota {
  margin: 0.875rem 0 0;
  color: var(--mu-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.musubi-solicitud__aviso {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.musubi-solicitud__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Formulario de confirmación: ancho completo, sin la caja de dos columnas. */
.musubi-solform {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-xl);
  box-shadow: var(--mu-shadow-md);
}

.musubi-solform__head {
  margin-bottom: 1.5rem;
}

.musubi-solform__title {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
}

.musubi-solform__subtitle {
  margin: 0;
  max-width: 44rem;
  color: var(--mu-ink-soft);
  line-height: 1.6;
}

.musubi-solform .wpcf7-form p {
  margin: 0 0 1rem;
}

.musubi-solform__fechas,
.musubi-solform__datos {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .musubi-solform__fechas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .musubi-solform__datos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.musubi-solform__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mu-line);
  list-style: none;
}

.musubi-solform__perks li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--mu-ink-soft);
  font-size: 0.875rem;
}

.musubi-solform__perks svg {
  color: var(--mu-teal);
}

.musubi-solform__fallback p {
  margin: 0 0 1rem;
  color: var(--mu-ink-soft);
}

/* La primera foto de cada apartamento lleva su color: es lo que deja ver los
   bloques sin partir la galería en seis galerías distintas. */
.musubi-gallery__item.is-inicio .musubi-gallery__open::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 4px;
  background: var(--musubi-color, var(--mu-teal));
}

.musubi-galeria-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.musubi-galeria-leyenda li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
}

.musubi-galeria-leyenda__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--musubi-color, var(--mu-teal));
  box-shadow: 0 0 0 1px rgba(20, 58, 55, 0.12);
}

.musubi-galeria-leyenda a {
  color: var(--mu-ink);
  text-decoration: none;
}

.musubi-galeria-leyenda a:hover {
  color: var(--mu-teal-dark);
}

.musubi-galeria-leyenda em {
  font-style: normal;
  color: var(--mu-muted);
}

/* --------------------------------------------- Consulta de disponibilidad */

.musubi-consulta {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-xl);
  box-shadow: var(--mu-shadow-md);
}

.musubi-consulta__title {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.15;
}

.musubi-consulta__subtitle {
  margin: 0;
  max-width: 46rem;
  color: var(--mu-ink-soft);
  line-height: 1.6;
}

.musubi-consulta__context {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding: 0.3rem 0.75rem;
  background: var(--mu-teal-tint);
  border-radius: var(--mu-r-pill);
  color: var(--mu-teal-ink);
  font-size: 0.8125rem;
}

.musubi-consulta__form {
  margin-top: 1.5rem;
}

.musubi-consulta__fields {
  display: grid;
  gap: 0.75rem;
  align-items: end;
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .musubi-consulta__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .musubi-consulta__fields {
    grid-template-columns: 1.1fr 1.1fr 0.7fr 0.7fr auto;
  }
}

/* En la columna lateral de la ficha no hay ancho para la fila de campos: las
   medias queries miran el viewport, no el contenedor, así que la variante lo
   dice de forma explicita. */
.musubi-consulta--aside {
  padding: 1.25rem;
}

.musubi-consulta--aside .musubi-consulta__fields {
  grid-template-columns: 1fr;
}

.musubi-consulta--aside .musubi-consulta__perks {
  flex-direction: column;
  gap: 0.5rem;
}

.musubi-consulta__submit {
  justify-content: center;
  white-space: nowrap;
}

/* El aviso de asignación queda debajo de los campos: con aire suficiente basta
   para que no se lea como el pie del último desplegable. */
.musubi-consulta > .musubi-aviso--inline {
  margin-top: 2.25rem;
  line-height: 1.5;
}

.musubi-consulta--aside > .musubi-aviso--inline {
  margin-top: 1.5rem;
}

.musubi-consulta__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.musubi-consulta__perks li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--mu-ink-soft);
  font-size: 0.875rem;
}

.musubi-consulta__perks svg {
  color: var(--mu-teal);
}

.musubi-consulta__pie {
  margin: 1rem 0 0;
  color: var(--mu-muted);
  font-size: 0.875rem;
}

.musubi-consulta__pie a {
  color: var(--mu-teal-dark);
}

/* --------------------------------------------- Bloques de la ficha */

/* Los datos de la ficha en tarjetas de dos columnas: en una sola columna la
   página se hacía larguísima y todo parecía igual de importante. */
.musubi-bloques {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* Una sola columna: en dos, «Cómo se duerme» y «Servicios» quedaban con
   alturas muy distintas y el hueco cantaba. */

.musubi-bloques .musubi-block {
  margin: 0;
  padding: clamp(1.125rem, 2.5vw, 1.625rem);
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-xl);
  box-shadow: var(--mu-shadow-xs);
}

.musubi-bloques .musubi-block__title {
  margin-top: 0;
  font-size: 1.125rem;
}

/* ------------------------------------------------------------- Gracias */

.musubi-gracias__chips {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* Los tres pasos: es la duda de todo el mundo justo después de enviar. */
.musubi-pasos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.musubi-pasos__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.125rem, 2.5vw, 1.5rem);
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-xl);
  box-shadow: var(--mu-shadow-xs);
}

.musubi-pasos__num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  background: var(--mu-teal-tint);
  border-radius: 50%;
  font-family: var(--mu-font-head);
  font-size: 0.875rem;
  color: var(--mu-teal-ink);
}

.musubi-pasos__titulo {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  line-height: 1.25;
}

.musubi-pasos__item p {
  margin: 0;
  color: var(--mu-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.musubi-gracias__contacto {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.125rem, 2.5vw, 1.5rem);
  background: var(--mu-teal-tint);
  border-radius: var(--mu-r-xl);
  text-align: center;
}

.musubi-gracias__nota {
  margin: 0 0 0.75rem;
  color: var(--mu-teal-ink);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------- Galería en mosaico */

.musubi-mosaico {
  position: relative;
}

/* Una foto grande y cuatro alrededor: cabe en pantalla y se entiende de un
   vistazo. Con menos de cinco fotos la rejilla se rellena sola. */
.musubi-mosaico__rejilla {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
  border-radius: var(--mu-r-xl);
  overflow: hidden;
}

.musubi-mosaico__item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--mu-stone);
}

.musubi-mosaico__item:first-child {
  aspect-ratio: 4 / 3;
}

.musubi-mosaico__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--mu-ease), filter 0.3s var(--mu-ease);
}

.musubi-mosaico__item:hover .musubi-mosaico__img {
  filter: brightness(0.94);
  transform: scale(1.02);
}

/* La franja de color marca la primera foto de cada apartamento. */
.musubi-mosaico__item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--musubi-color, transparent);
}

.musubi-mosaico__oculta {
  display: none;
}

.musubi-mosaico__todas {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
  padding: 0.7rem 1.125rem;
  background: var(--mu-white);
  border: 1px solid var(--mu-ink);
  border-radius: var(--mu-r);
  font-family: var(--mu-font-head);
  font-size: 0.875rem;
  color: var(--mu-ink);
  cursor: pointer;
  transition: background 0.2s var(--mu-ease), transform 0.2s var(--mu-ease);
}

.musubi-mosaico__todas:hover {
  background: var(--mu-stone);
  transform: translateY(-1px);
}

@media (min-width: 52rem) {
  .musubi-mosaico__rejilla {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: clamp(20rem, 46vh, 30rem);
  }

  .musubi-mosaico__item,
  .musubi-mosaico__item:first-child {
    aspect-ratio: auto;
    height: 100%;
  }

  .musubi-mosaico__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* El boton flota sobre la esquina, como en los hoteles. */
  .musubi-mosaico__todas {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    margin: 0;
    box-shadow: var(--mu-shadow-md);
  }
}

/* En movil las cinco se pasan de lado con el dedo: el scroll lo hace el
   navegador, sin JS de por medio. */
@media (max-width: 51.99rem) {
  .musubi-mosaico__rejilla {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 0;
  }

  .musubi-mosaico__rejilla::-webkit-scrollbar {
    display: none;
  }

  .musubi-mosaico__item {
    flex: 0 0 86%;
    scroll-snap-align: center;
    border-radius: var(--mu-r-lg);
  }

  .musubi-mosaico__todas {
    width: 100%;
    justify-content: center;
  }
}

/* Visor: el Fancybox del tema padre, con los colores de la casa. */
.fancybox__container {
  --fancybox-bg: rgba(20, 58, 55, 0.96);
  --fancybox-accent-color: var(--mu-teal);
}

.fancybox__caption {
  font-family: var(--mu-font-body);
}

.musubi-galeria-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.musubi-galeria-leyenda li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
}

.musubi-galeria-leyenda__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--musubi-color, var(--mu-teal));
  box-shadow: 0 0 0 1px rgba(20, 58, 55, 0.12);
}

.musubi-galeria-leyenda a {
  color: var(--mu-ink);
  text-decoration: none;
}

.musubi-galeria-leyenda a:hover {
  color: var(--mu-teal-dark);
}

.musubi-galeria-leyenda em {
  font-style: normal;
  color: var(--mu-muted);
}

/* ------------------------------------------------------------------- Blog */

.musubi-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.musubi-chip.is-active {
  border-color: var(--mu-teal);
  background: var(--mu-teal);
  color: var(--mu-white);
}

.musubi-chip.is-active svg,
.musubi-chip.is-active em {
  color: var(--mu-white);
}

.musubi-chip.is-active em {
  background: rgba(255, 255, 255, 0.22);
}

.musubi-chip--sm {
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
}

/* Sección pegada a la siguiente: evita doble aire entre filtros y listado. */
.musubi-section--flush {
  padding-bottom: 0;
}

/* Filtros del listado: categorías a la izquierda, buscador a la derecha. */
.musubi-blog__filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.musubi-blog__buscador {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.musubi-blog__buscador input[type="search"] {
  min-width: min(18rem, 60vw);
  padding: 0.7rem 1.125rem;
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-pill);
  font-family: var(--mu-font-body);
  font-size: 0.9375rem;
  color: var(--mu-ink);
}

.musubi-blog__buscador input[type="search"]:focus-visible {
  outline: 2px solid var(--mu-teal);
  outline-offset: 2px;
}

/* Tarjeta de entrada: misma familia que la de apartamento. */
.musubi-post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-xl);
  box-shadow: var(--mu-shadow-xs);
  transition: transform 0.3s var(--mu-ease), box-shadow 0.3s var(--mu-ease);
}

.musubi-post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mu-shadow-md);
}

.musubi-post-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mu-stone);
}

.musubi-post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--mu-ease);
}

.musubi-post-card:hover .musubi-post-card__image {
  transform: scale(1.04);
}

.musubi-post-card__flag {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
}

.musubi-post-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.25rem 1.375rem 1.5rem;
}

.musubi-post-card__title {
  margin: 0;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.25;
}

.musubi-post-card__title a {
  color: var(--mu-ink);
  text-decoration: none;
}

.musubi-post-card__title a:hover {
  color: var(--mu-teal-dark);
}

.musubi-post-card__text {
  margin: 0;
  color: var(--mu-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.musubi-post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--mu-font-head);
  font-size: 0.875rem;
  color: var(--mu-red);
  text-decoration: none;
}

.musubi-post-card__more svg {
  transition: transform 0.25s var(--mu-ease);
}

.musubi-post-card:hover .musubi-post-card__more svg {
  transform: translateX(3px);
}

.musubi-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--mu-muted);
  font-size: 0.8125rem;
}

.musubi-post-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.musubi-post-meta svg {
  color: var(--mu-teal);
}

/* La primera entrada de la portada ocupa la fila entera. */
@media (min-width: 60rem) {
  .musubi-post-card--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }

  .musubi-post-card--wide .musubi-post-card__media {
    flex: 0 0 55%;
    aspect-ratio: 16 / 10;
  }

  .musubi-post-card--wide .musubi-post-card__body {
    justify-content: center;
    gap: 0.875rem;
    padding: clamp(1.5rem, 3vw, 2.75rem);
  }

  .musubi-post-card--wide .musubi-post-card__title {
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  }

  .musubi-post-card--wide .musubi-post-card__text {
    font-size: 1rem;
  }
}

.musubi-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.musubi-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 2.5rem;
  padding: 0.55rem 0.9rem;
  justify-content: center;
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-pill);
  font-family: var(--mu-font-head);
  font-size: 0.9375rem;
  color: var(--mu-ink);
  text-decoration: none;
  transition: border-color 0.2s var(--mu-ease), background 0.2s var(--mu-ease),
    color 0.2s var(--mu-ease);
}

.musubi-pagination a.page-numbers:hover {
  border-color: var(--mu-teal);
  background: var(--mu-teal-tint);
  color: var(--mu-teal-ink);
}

.musubi-pagination .page-numbers.current {
  border-color: var(--mu-teal);
  background: var(--mu-teal);
  color: var(--mu-white);
}

.musubi-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--mu-muted);
}

.musubi-pagination--inline {
  justify-content: flex-start;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--mu-muted);
}

/* -------------------------------------------------------- Entrada del blog */

.musubi-article {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .musubi-article {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

.musubi-article__body {
  max-width: 46rem;
  color: var(--mu-ink-soft);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.musubi-article__body > * {
  margin-block: 0 1.25rem;
}

.musubi-article__body > *:last-child {
  margin-bottom: 0;
}

.musubi-article__body h2,
.musubi-article__body h3,
.musubi-article__body h4 {
  margin-block: 2.25rem 0.75rem;
  color: var(--mu-ink);
  font-family: var(--mu-font-head);
  line-height: 1.2;
}

.musubi-article__body h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.musubi-article__body h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
}

.musubi-article__body a {
  color: var(--mu-teal-dark);
  text-underline-offset: 3px;
}

/* El reset global quita los marcadores; dentro del artículo sí los queremos. */
.musubi-article__body ul,
.musubi-article__body ol {
  padding-left: 1.35rem;
}

.musubi-article__body ul {
  list-style: disc;
}

.musubi-article__body ol {
  list-style: decimal;
}

.musubi-article__body li::marker {
  color: var(--mu-teal);
}

.musubi-article__body li {
  margin-bottom: 0.5rem;
}

.musubi-article__body img,
.musubi-article__body iframe,
.musubi-article__body video {
  max-width: 100%;
  height: auto;
  border-radius: var(--mu-r-lg);
}

.musubi-article__body figure {
  margin-inline: 0;
}

.musubi-article__body figcaption {
  margin-top: 0.5rem;
  color: var(--mu-muted);
  font-size: 0.875rem;
}

.musubi-article__body blockquote {
  margin-inline: 0;
  padding: 1.125rem 1.5rem;
  border-left: 3px solid var(--mu-teal);
  background: var(--mu-teal-tint);
  border-radius: 0 var(--mu-r) var(--mu-r) 0;
  color: var(--mu-teal-ink);
  font-size: 1.0625rem;
}

.musubi-article__body blockquote p:last-child {
  margin-bottom: 0;
}

.musubi-article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.musubi-article__body th,
.musubi-article__body td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--mu-line);
  text-align: left;
}

.musubi-article__body pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  background: var(--mu-stone);
  border-radius: var(--mu-r);
  font-size: 0.875rem;
}

.musubi-article__aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 62rem) {
  .musubi-article__aside {
    position: sticky;
    top: calc(var(--mu-header-h) + 1.5rem);
  }
}

.musubi-article__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--mu-white);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-xl);
  box-shadow: var(--mu-shadow-sm);
}

.musubi-article__box p {
  margin: 0;
  color: var(--mu-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.musubi-article__box-title {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.2;
}

.musubi-article__tags {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.musubi-article__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mu-font-head);
  font-size: 0.9375rem;
  color: var(--mu-teal-dark);
  text-decoration: none;
}

.musubi-article__back:hover {
  color: var(--mu-red);
}

/* Página 404 */
.musubi-404 {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
}

.musubi-404__mascota {
  display: flex;
  justify-content: center;
}

.musubi-404__mascota img {
  width: min(14rem, 45vw);
  height: auto;
}

.musubi-404__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.musubi-404__body > * {
  margin: 0;
}

.musubi-404__chips {
  margin-top: 0.5rem;
}

.musubi-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

@media (min-width: 48rem) {
  .musubi-404 {
    grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  }
}

/* Resultado del buscador: chips con las fechas elegidas */
.musubi-resultado__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.musubi-resultado__chips .musubi-pill a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.musubi-resultado__nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-size: 0.8125rem;
  color: var(--mu-muted);
}

/* Aviso de asignación por disponibilidad */
.musubi-aviso {
  margin: 0;
}

.musubi-section__notice {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.musubi-block .musubi-aviso--callout,
.musubi-apartamento__main > .musubi-aviso--callout {
  margin-bottom: 1.75rem;
}

.musubi-aviso--callout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.375rem) clamp(1.125rem, 2.2vw, 1.5rem);
  background: var(--mu-teal-tint);
  border-radius: var(--mu-r-xl);
  border: 1px solid color-mix(in srgb, var(--mu-teal) 22%, transparent);
}

.musubi-aviso__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: var(--mu-r);
  background: var(--mu-white);
  color: var(--mu-teal-dark);
}

.musubi-aviso__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.musubi-aviso__title {
  font-family: var(--mu-font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--mu-teal-ink);
}

.musubi-aviso__text {
  font-size: 0.9375rem;
  color: var(--mu-ink-soft);
}

.musubi-aviso--inline {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--mu-muted);
}

.musubi-aviso--inline svg {
  color: var(--mu-teal);
  margin-top: 0.15rem;
}

.musubi-section--ink .musubi-aviso--inline,
.musubi-reserva__head .musubi-aviso--inline {
  color: var(--mu-ink-soft);
}

/* Bloques de galería por apartamento
   Cada bloque hereda el color identificativo del piso en --musubi-color, que
   pinta el punto y el filete lateral. Así las fotos nunca se leen mezcladas. */
.musubi-galblock {
  --musubi-color: var(--mu-teal);
  padding-left: clamp(0.875rem, 2vw, 1.25rem);
  border-left: 3px solid var(--musubi-color);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.musubi-galblock:last-child {
  margin-bottom: 0;
}

.musubi-galblock__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.875rem;
}

.musubi-galblock__id {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.musubi-galblock__dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--mu-r-pill);
  background: var(--musubi-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--musubi-color) 22%, transparent);
  flex: 0 0 auto;
}

.musubi-galblock__name {
  font-family: var(--mu-font-head);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.musubi-galblock__name a {
  color: var(--mu-ink);
  text-decoration: none;
}

.musubi-galblock__name a:hover {
  color: var(--mu-red);
}

.musubi-galblock__color {
  padding: 0.2rem 0.65rem;
  border-radius: var(--mu-r-pill);
  background: color-mix(in srgb, var(--musubi-color) 14%, #fff);
  color: color-mix(in srgb, var(--musubi-color) 72%, #1d2422);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Lightbox */

.musubi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 32, 30, 0.95);
  backdrop-filter: blur(4px);
}

.musubi-lightbox.is-open {
  display: flex;
}

.musubi-lightbox__figure {
  margin: 0;
  max-width: min(92vw, 76rem);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.musubi-lightbox__image {
  max-height: 80vh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--mu-r-lg);
  object-fit: contain;
}

.musubi-lightbox__caption {
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
}

.musubi-lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--mu-r-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--mu-white);
  cursor: pointer;
  transition: background 0.2s var(--mu-ease);
}

.musubi-lightbox__btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.musubi-lightbox__btn--close {
  top: 1rem;
  right: 1rem;
}

.musubi-lightbox__btn--prev {
  left: 1rem;
  top: 50%;
  translate: 0 -50%;
}

.musubi-lightbox__btn--next {
  right: 1rem;
  top: 50%;
  translate: 0 -50%;
}

/* -------------------------------------------------------------- Ubicación */

.musubi-ubicacion__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

.musubi-ubicacion__body {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  align-items: flex-start;
}

.musubi-ubicacion__body > * {
  margin: 0;
}

.musubi-ubicacion__address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--mu-ink-soft);
}

.musubi-ubicacion__address svg {
  color: var(--mu-red);
  margin-top: 0.2rem;
}

.musubi-ubicacion__points {
  display: grid;
  gap: 0.625rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.musubi-ubicacion__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--mu-ink-soft);
}

.musubi-ubicacion__points svg {
  color: var(--mu-teal);
  margin-top: 0.25rem;
}

.musubi-ubicacion__points em {
  font-style: normal;
  color: var(--mu-muted);
  margin-left: 0.375rem;
  font-size: 0.875rem;
}

.musubi-ubicacion__map,
.musubi-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--mu-r-xl);
  overflow: hidden;
  background: var(--mu-stone-deep);
  border: 1px solid var(--mu-line-soft);
}

.musubi-map--wide {
  aspect-ratio: 21 / 9;
}

.musubi-ubicacion__map iframe,
.musubi-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ------------------------------------------------------- Mapa de zona */

/* Enseña el barrio, no el portal: un círculo de radio conocido sobre el mapa,
   igual que Airbnb o Idealista. El encuadre lo calcula PHP para que el círculo
   mida justo un tercio del ancho; por eso el tamaño va fijo y no en px. */
.musubi-mapa-zona {
  display: grid;
  gap: 0.75rem;
}

.musubi-mapa-zona__marco {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-xl);
  background: var(--mu-stone-deep);
}

.musubi-mapa-zona__marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.85);
  /* El círculo va pintado encima y no se mueve con el mapa: si se pudiera
     arrastrar, el encuadre dejaría de coincidir con la zona. */
  pointer-events: none;
}

.musubi-mapa-zona__circulo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 33.333%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(73, 157, 148, 0.75);
  border-radius: 50%;
  background: rgba(73, 157, 148, 0.2);
  pointer-events: none;
}

.musubi-mapa-zona__nota {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mu-muted);
}

.musubi-mapa-zona__nota svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--mu-teal);
}

/* En el móvil la barra de la solicitud se comía media pantalla: se queda
   pegada, que ahí es donde sirve, pero en una sola línea —noches, huespedes y
   el botón—. Las fechas ya están justo debajo, en la propuesta. */
@media (max-width: 47.999rem) {
  .musubi-solbar__inner {
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding-block: 0.5rem;
  }

  .musubi-solbar__datos {
    flex-wrap: nowrap;
    gap: 0 0.875rem;
    min-width: 0;
  }

  .musubi-solbar__datos strong {
    white-space: nowrap;
  }

  .musubi-solbar__datos li:nth-child(-n+2) {
    display: none;
  }

  .musubi-solbar__datos li {
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
  }

  .musubi-solbar__label {
    font-size: 0.625rem;
  }

  .musubi-solbar__datos strong {
    font-size: 0.8125rem;
  }

  .musubi-solbar__cambiar {
    display: none;
  }
}

/* ------------------------------------------------------------- Contacto */

/* Las tres vías de contacto, grandes y pulsables. Antes iban en una lista
   pequeña al lado del formulario, que es justo donde no se miran. */
.musubi-vias {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.musubi-via a {
  display: grid;
  gap: 0.25rem;
  height: 100%;
  padding: 1.5rem 1.5rem 1.375rem;
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-xl);
  background: var(--mu-white);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s var(--mu-ease), box-shadow 0.2s var(--mu-ease), transform 0.2s var(--mu-ease);
}

.musubi-via a:hover {
  border-color: var(--mu-teal);
  box-shadow: var(--mu-shadow-sm);
  transform: translateY(-2px);
}

.musubi-via__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.5rem;
  border-radius: var(--mu-r-pill);
  background: var(--mu-teal-tint);
  color: var(--mu-teal-dark);
}

.musubi-via__label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mu-muted);
}

.musubi-via__valor {
  font-family: var(--mu-font-head);
  /* Un correo largo no cabe a 22px en una tarjeta de 15rem y se parte por la
     mitad de la palabra: mejor un cuerpo algo menor que un tajo en medio. */
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mu-ink);
  overflow-wrap: anywhere;
}

.musubi-via__nota {
  font-size: 0.8125rem;
  color: var(--mu-muted);
}

/* La columna de la izquierda respira: texto, Alhambra, mapa y horario. */
.musubi-contacto__info {
  display: grid;
  gap: 2rem;
  align-content: start;
}

/* La Alhambra es el motivo del viaje de casi todo el que escribe. */
.musubi-alhambra {
  display: flex;
  gap: 1.125rem;
  padding: 1.75rem;
  border-radius: var(--mu-r-xl);
  background: var(--mu-teal-tint);
}

.musubi-alhambra__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--mu-r-pill);
  background: var(--mu-white);
  color: var(--mu-teal-dark);
}

.musubi-alhambra__titulo {
  margin: 0.25rem 0 0.625rem;
  font-family: var(--mu-font-head);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--mu-teal-ink);
}

.musubi-alhambra__texto {
  margin: 0;
  color: var(--mu-ink-soft);
}

.musubi-alhambra__nota {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--mu-teal-dark);
}

.musubi-contacto__subtitulo {
  margin: 0 0 1rem;
  font-family: var(--mu-font-head);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mu-ink);
}

.musubi-contacto__horario {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--mu-ink-soft);
}

.musubi-contacto__horario svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--mu-teal);
}

/* -------------------------------------------------- Preguntas frecuentes */

.musubi-faq__intro {
  margin-bottom: 2.5rem;
}

.musubi-faq__bloque + .musubi-faq__bloque {
  margin-top: 2.75rem;
}

.musubi-faq__tema {
  margin: 0 0 1rem;
  font-family: var(--mu-font-head);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--mu-ink);
}

.musubi-faq__lista {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Etiqueta details y no un acordeón de JavaScript: se abre solo, el navegador
   lo encuentra con Ctrl+F y funciona aunque el script falle. */
.musubi-faq__item {
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-lg);
  background: var(--mu-white);
  transition: border-color 0.2s var(--mu-ease);
}

.musubi-faq__item[open] {
  border-color: var(--mu-teal);
}

.musubi-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  font-family: var(--mu-font-head);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--mu-ink);
  cursor: pointer;
  list-style: none;
}

.musubi-faq__item summary::-webkit-details-marker {
  display: none;
}

.musubi-faq__item summary svg {
  flex: none;
  color: var(--mu-teal);
  transition: transform 0.25s var(--mu-ease);
}

.musubi-faq__item[open] summary svg {
  transform: rotate(180deg);
}

.musubi-faq__respuesta {
  padding: 0 1.375rem 1.375rem;
  color: var(--mu-ink-soft);
}

.musubi-faq__respuesta > :first-child {
  margin-top: 0;
}

.musubi-faq__ayuda {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
  padding: 1.75rem;
  border-radius: var(--mu-r-xl);
  background: var(--mu-stone);
}

.musubi-faq__ayuda-titulo {
  margin: 0.25rem 0 0.5rem;
  font-family: var(--mu-font-head);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--mu-ink);
}

.musubi-faq__ayuda-texto {
  margin: 0;
  color: var(--mu-ink-soft);
}

.musubi-faq__ayuda-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ------------------------------------------------------------ Experiencias */

.musubi-experiencias__intro {
  max-width: 60ch;
  margin-bottom: 2rem;
}

/* Filtro por categoría: enlaces de verdad, con su dirección propia, para que
   cada categoría se pueda compartir y funcione sin JavaScript. */
.musubi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.musubi-chip {
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-pill);
  background: var(--mu-white);
  font-size: 0.875rem;
  color: var(--mu-ink-soft);
  text-decoration: none;
  transition: border-color 0.2s var(--mu-ease), color 0.2s var(--mu-ease), background 0.2s var(--mu-ease);
}

.musubi-chip:hover {
  border-color: var(--mu-teal);
  color: var(--mu-teal-dark);
}

.musubi-chip.is-active {
  border-color: var(--mu-teal-ink);
  background: var(--mu-teal-ink);
  color: var(--mu-white);
}

.musubi-experiencias__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.musubi-exp {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-xl);
  background: var(--mu-white);
  transition: border-color 0.2s var(--mu-ease), box-shadow 0.2s var(--mu-ease), transform 0.2s var(--mu-ease);
}

.musubi-exp:hover {
  border-color: var(--mu-teal);
  box-shadow: var(--mu-shadow-md);
  transform: translateY(-3px);
}

.musubi-exp__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--mu-stone);
}

.musubi-exp__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.musubi-exp__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--mu-stone);
}

.musubi-exp__placeholder img {
  width: 4.5rem;
  height: auto;
  opacity: 0.18;
  object-fit: contain;
}

.musubi-exp__categoria {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--mu-r-pill);
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mu-teal-ink);
  backdrop-filter: blur(6px);
}

.musubi-exp__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.375rem;
}

.musubi-exp__titulo {
  margin: 0;
  font-family: var(--mu-font-head);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mu-ink);
}

.musubi-exp__texto {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--mu-ink-soft);
}

.musubi-exp__cta {
  margin-top: auto;
}

.musubi-experiencias__aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 2.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mu-muted);
}

.musubi-experiencias__aviso svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--mu-teal);
}

/* Las rejillas de estas tres piezas, en su sitio: el salto de 40rem que hay al
   final del archivo va antes que estas reglas y no habría manera de ganarle. */
@media (min-width: 40rem) {
  .musubi-vias {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  .musubi-experiencias__grid {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }

  .musubi-faq__ayuda {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* -------------------------------------------------------- Reserva y CTA */

.musubi-cta {
  position: relative;
  isolation: isolate;
  padding-block: var(--mu-section);
  background: var(--mu-stone);
}

.musubi-cta--media {
  background: var(--mu-teal-ink);
}

.musubi-cta__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.musubi-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}

.musubi-cta__inner {
  position: relative;
}

.musubi-reserva {
  position: relative;
  background: var(--mu-white);
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-xl);
  box-shadow: var(--mu-shadow-lg);
  overflow: hidden;
}

.musubi-reserva--panel {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 64rem;
  margin-inline: auto;
}

.musubi-reserva__head {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--mu-teal-tint);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.musubi-reserva__title {
  margin: 0;
  font-family: var(--mu-font-head);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--mu-teal-ink);
}

.musubi-reserva__subtitle {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--mu-ink-soft);
}

.musubi-reserva__context {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0;
  padding: 0.4rem 0.85rem;
  align-self: flex-start;
  background: var(--mu-white);
  border-radius: var(--mu-r-pill);
  font-size: 0.8125rem;
  color: var(--mu-ink);
}

.musubi-reserva__context svg {
  color: var(--mu-teal);
}

/* La mascota se ancla abajo a la derecha; la cabecera reserva ese hueco
   para que nunca se solape con el texto. */
.musubi-reserva--panel .musubi-reserva__head {
  padding-bottom: clamp(5.5rem, 10vw, 8rem);
}

.musubi-reserva__mascota {
  position: absolute;
  right: 1.25rem;
  bottom: 0.75rem;
  width: clamp(4.25rem, 8vw, 6.25rem);
  height: auto;
  pointer-events: none;
}

.musubi-reserva__body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.musubi-reserva__fallback {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.musubi-reserva__fallback-text {
  margin: 0;
  color: var(--mu-ink-soft);
}

.musubi-reserva__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.musubi-reserva__admin-note {
  margin: 0;
  padding: 0.875rem 1rem;
  background: var(--mu-red-tint);
  border-radius: var(--mu-r);
  font-size: 0.8125rem;
  color: var(--mu-red-dark);
}

.musubi-reserva__perks {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--mu-line-soft);
  list-style: none;
  font-size: 0.8125rem;
  color: var(--mu-muted);
}

.musubi-reserva__perks li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.musubi-reserva__perks svg {
  color: var(--mu-teal);
}

/* Contact Form 7 dentro del panel */

.musubi-reserva__form .wpcf7-form > p {
  margin: 0 0 1rem;
}

.musubi-reserva__form label {
  display: block;
  font-family: var(--mu-font-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mu-muted);
  margin-bottom: 0.375rem;
}

.musubi-reserva__form input[type="text"],
.musubi-reserva__form input[type="email"],
.musubi-reserva__form input[type="tel"],
.musubi-reserva__form input[type="date"],
.musubi-reserva__form input[type="number"],
.musubi-reserva__form select,
.musubi-reserva__form textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  background: var(--mu-cream);
  border: 1px solid var(--mu-line);
  border-radius: var(--mu-r-lg);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--mu-ink);
  transition: border-color 0.2s var(--mu-ease), box-shadow 0.2s var(--mu-ease);
}

.musubi-reserva__form textarea {
  min-height: 7rem;
  resize: vertical;
}

.musubi-reserva__form input:focus,
.musubi-reserva__form select:focus,
.musubi-reserva__form textarea:focus {
  border-color: var(--mu-red);
  background: var(--mu-white);
  box-shadow: 0 0 0 4px rgba(238, 50, 55, 0.1);
  outline: none;
}

.musubi-reserva__form input[type="submit"],
.musubi-reserva__form .wpcf7-submit {
  width: 100%;
  min-height: 3.25rem;
  background: var(--mu-red);
  color: var(--mu-white);
  border: 0;
  border-radius: var(--mu-r-lg);
  font-family: var(--mu-font-head);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s var(--mu-ease);
}

.musubi-reserva__form input[type="submit"]:hover,
.musubi-reserva__form .wpcf7-submit:hover {
  background: var(--mu-red-dark);
}

.musubi-reserva__form .wpcf7-not-valid-tip {
  font-size: 0.75rem;
  color: var(--mu-red-dark);
  text-transform: none;
  letter-spacing: 0;
}

/* CF7 pinta esta caja con su azul corporativo al enviar: se lleva a los
   colores de la marca y se oculta del todo cuando no tiene mensaje. */
.musubi-reserva__form .wpcf7-response-output {
  margin: 1rem 0 0 !important;
  padding: 0.875rem 1rem !important;
  border: 1px solid var(--mu-line) !important;
  border-radius: var(--mu-r) !important;
  background: var(--mu-stone);
  color: var(--mu-ink-soft);
  font-size: 0.875rem;
}

.musubi-reserva__form .wpcf7-response-output:empty {
  display: none !important;
}

.musubi-reserva__form .wpcf7-form.invalid .wpcf7-response-output,
.musubi-reserva__form .wpcf7-form.unaccepted .wpcf7-response-output,
.musubi-reserva__form .wpcf7-form.failed .wpcf7-response-output,
.musubi-reserva__form .wpcf7-form.aborted .wpcf7-response-output {
  border-color: color-mix(in srgb, var(--mu-red) 45%, transparent) !important;
  background: var(--mu-red-tint);
  color: var(--mu-red-dark);
}

.musubi-reserva__form .wpcf7-form.sent .wpcf7-response-output {
  border-color: color-mix(in srgb, var(--mu-teal) 45%, transparent) !important;
  background: var(--mu-teal-tint);
  color: var(--mu-teal-ink);
}

.musubi-reserva__form .wpcf7-acceptance label,
.musubi-reserva__form .wpcf7-acceptance .wpcf7-list-item-label {
  font-family: var(--mu-font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--mu-ink-soft);
}

.musubi-reserva__form .wpcf7-list-item {
  margin: 0;
}

.musubi-reserva--aside .musubi-reserva__title {
  font-size: 1.25rem;
}

/* En el panel lateral no cabe la rejilla de dos columnas: el formulario se
   apila siempre, independientemente del ancho de la ventana. */
.musubi-reserva--aside .musubi-reserva__form .musubi-cf7-row {
  grid-template-columns: 1fr !important;
}

.musubi-reserva--aside .musubi-reserva__form input,
.musubi-reserva--aside .musubi-reserva__form select,
.musubi-reserva--aside .musubi-reserva__form textarea {
  max-width: 100%;
}

/* Filas de dos columnas dentro del formulario de reserva */
.musubi-reserva__form .musubi-cf7-row {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: 1fr;
}

.musubi-reserva__form .musubi-cf7-row > p {
  margin: 0 0 1rem;
}

.musubi-cf7-hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--mu-muted);
}

.musubi-reserva__form .musubi-cf7-accept label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--mu-font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mu-ink-soft);
}

.musubi-reserva__form .musubi-cf7-accept input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin-top: 0.15rem;
  accent-color: var(--mu-red);
}

.musubi-reserva__form .musubi-cf7-accept a {
  color: var(--mu-red);
}

@media (min-width: 30rem) {
  .musubi-reserva__form .musubi-cf7-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Widget de reseñas de Trustindex: se integra en la tipografía del sitio sin
   pelear con su maquetación interna. */
.musubi-resenas__widget .ti-widget {
  font-family: var(--mu-font-body) !important;
}

.musubi-resenas__widget .ti-widget .ti-name,
.musubi-resenas__widget .ti-widget .ti-rating-text strong,
.musubi-resenas__widget .ti-widget .ti-header-title {
  font-family: var(--mu-font-head) !important;
  letter-spacing: -0.02em;
}

.musubi-resenas__widget .ti-widget .ti-review-item {
  border-radius: var(--mu-r-lg) !important;
}

.musubi-resenas__widget .ti-widget a {
  color: var(--mu-teal-dark) !important;
}

/* --------------------------------------------------- Ficha de apartamento */

.musubi-apartamento__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.musubi-block {
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--mu-line);
}

.musubi-block__title {
  margin: 0 0 1.25rem;
  font-family: var(--mu-font-head);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.musubi-block__note {
  margin: -0.75rem 0 1.25rem;
  font-size: 0.8125rem;
  color: var(--mu-muted);
}

/* Ficha técnica del apartamento */
.musubi-datos {
  display: grid;
  margin: 0;
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-lg);
  background: var(--mu-white);
  overflow: hidden;
}

.musubi-datos__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.125rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--mu-line-soft);
}

.musubi-datos__row:last-child {
  border-bottom: 0;
}

.musubi-datos dt {
  font-family: var(--mu-font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mu-muted);
}

.musubi-datos dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--mu-ink);
}

.musubi-datos__color {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.musubi-datos__dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--mu-r-pill);
  background: var(--musubi-color, var(--mu-teal));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--musubi-color, var(--mu-teal)) 22%, transparent);
}

.musubi-datos__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.musubi-datos__tags .musubi-pill {
  text-decoration: none;
}

@media (min-width: 40rem) {
  .musubi-datos__row {
    grid-template-columns: 11rem 1fr;
    gap: 1rem;
    align-items: baseline;
  }
}

.musubi-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.musubi-amenities li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--mu-white);
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-lg);
  font-size: 0.875rem;
}

.musubi-amenities svg {
  color: var(--mu-teal);
}

.musubi-rules {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-lg);
  background: var(--mu-white);
  overflow: hidden;
}

.musubi-rules li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--mu-line-soft);
  font-size: 0.9375rem;
}

.musubi-rules li:last-child {
  border-bottom: 0;
}

.musubi-rules__label {
  color: var(--mu-ink-soft);
}

.musubi-rules__value {
  font-weight: 600;
  color: var(--mu-ink);
}

.musubi-sticky {
  position: static;
}

/* ------------------------------------------------------------------ Prosa */

.musubi-prose {
  color: var(--mu-ink-soft);
}

.musubi-prose > * {
  margin-block: 0 1rem;
}

.musubi-prose > *:last-child {
  margin-bottom: 0;
}

.musubi-prose--lg {
  font-size: 1.0625rem;
}

.musubi-prose--doc {
  max-width: 46rem;
}

.musubi-prose h2,
.musubi-prose h3,
.musubi-prose h4 {
  font-family: var(--mu-font-head);
  font-weight: 700;
  color: var(--mu-ink);
  letter-spacing: -0.03em;
  margin-top: 2rem;
  line-height: 1.2;
}

.musubi-prose h2 {
  font-size: 1.5rem;
}

.musubi-prose h3 {
  font-size: 1.1875rem;
}

.musubi-prose a {
  color: var(--mu-red);
  text-underline-offset: 3px;
}

.musubi-prose ul,
.musubi-prose ol {
  padding-left: 1.25rem;
}

.musubi-prose li {
  margin-bottom: 0.375rem;
}

.musubi-prose blockquote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--mu-teal);
  border-radius: var(--mu-r);
  background: var(--mu-teal-tint);
  font-family: var(--mu-font-head);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--mu-teal-ink);
}

.musubi-prose img {
  margin-block: 1.5rem;
  border-radius: var(--mu-r-lg);
}

/* --------------------------------------------------------------- Contacto */

.musubi-contacto__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.musubi-contacto__list {
  display: grid;
  gap: 0.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.musubi-contacto__list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.125rem;
  background: var(--mu-white);
  border: 1px solid var(--mu-line-soft);
  border-radius: var(--mu-r-lg);
}

.musubi-contacto__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--mu-r);
  background: var(--mu-teal-tint);
  color: var(--mu-teal-dark);
  flex: 0 0 auto;
}

.musubi-contacto__data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.musubi-contacto__data small {
  font-family: var(--mu-font-head);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mu-muted);
}

.musubi-contacto__data a,
.musubi-contacto__data > span {
  color: var(--mu-ink);
  text-decoration: none;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.musubi-contacto__data a:hover {
  color: var(--mu-red);
}

/* ----------------------------------------------------------------- Footer */

/* Footer a pantalla completa con efecto persiana: el contenido entra desplazado
   y una capa oscura se disuelve mientras el bloque sube. Lo anima el runtime
   del tema (theme.js) a través de los data-attributes. */
.musubi-footer-wrap {
  position: relative;
  overflow: hidden;
  background: var(--mu-teal-ink);
}

.musubi-footer {
  display: block;
  background: var(--mu-teal-ink);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9375rem;
}

/* El footer mide exactamente una pantalla: el logotipo es la pieza elástica y
   se encoge para que columnas y línea legal siempre entren sin desbordar. */
.musubi-footer__screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: clamp(1.5rem, 4vh, 3rem) 0;
}

.musubi-footer__mark {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding-block: clamp(1rem, 3vh, 2.5rem);
}

.musubi-footer__mark a {
  display: block;
  height: 100%;
  max-width: min(17rem, 52vw);
}

.musubi-footer__mark img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.musubi-footer__mark-fallback {
  font-family: var(--mu-font-head);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--mu-white);
}

.musubi-footer__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  padding-block: clamp(1.5rem, 3vh, 2.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.musubi-footer__claim {
  margin: 0;
  max-width: 34ch;
  line-height: 1.65;
}

.musubi-footer__socials {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.musubi-footer__socials a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--mu-r-pill);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  transition: border-color 0.2s var(--mu-ease), color 0.2s var(--mu-ease),
    background 0.2s var(--mu-ease);
}

.musubi-footer__socials a:hover {
  border-color: transparent;
  background: var(--mu-teal);
  color: var(--mu-white);
}

.musubi-footer__title {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--mu-font-head);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.musubi-footer__list {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.musubi-footer__list a,
.musubi-footer__list span {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--mu-ease);
}

.musubi-footer__list a:hover {
  color: var(--mu-white);
}

.musubi-footer__list svg {
  color: var(--mu-teal);
  margin-top: 0.25rem;
}

.musubi-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8125rem;
}

.musubi-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.25rem;
}

/* Capa de la persiana: arranca al 80% de opacidad y se disuelve al subir. */
.musubi-footer__dark {
  position: absolute;
  inset: 0;
  background: #0c211f;
  opacity: 0;
  pointer-events: none;
}

/* En pantallas holgadas el footer ocupa exactamente una pantalla, para que la
   persiana revele el bloque completo sin recortes ni desbordes. */
@media (min-width: 64rem) and (min-height: 40rem) {
  .musubi-footer__screen {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }
}

@media (max-height: 44rem) {
  .musubi-footer__screen {
    min-height: 0;
  }

  .musubi-footer__mark {
    padding-block: 1.5rem;
  }
}

/* ------------------------------------------------------------ Responsive */

@media (min-width: 40rem) {
  .musubi-search__fields {
    grid-template-columns: repeat(2, 1fr);
  }

  .musubi-search__submit {
    grid-column: span 2;
  }

  .musubi-gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .musubi-gallery--mosaic .musubi-gallery__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .musubi-reserva--panel {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .musubi-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .musubi-body {
    --mu-header-h: 104px;
  }

  /* Aquí sí cabe la diagonal: el verde ocupa la izquierda, donde va el texto, y
     abre hacia la derecha para que se vea la foto. */
  .musubi-pagehero__veil {
    background:
      linear-gradient(180deg, rgba(20, 58, 55, 0.6) 0%, rgba(20, 58, 55, 0) 32%),
      linear-gradient(
        100deg,
        #143a37 0%,
        #1a4c46 22%,
        rgba(35, 100, 94, 0.95) 42%,
        rgba(54, 133, 125, 0.62) 60%,
        rgba(73, 157, 148, 0.22) 77%,
        rgba(73, 157, 148, 0) 91%
      );
  }

  /* El texto no cruza al lado de la foto. */
  .musubi-pagehero__inner {
    padding-right: 34%;
  }

  .musubi-pagehero__subtitle {
    max-width: 44ch;
  }

  .musubi-nav {
    display: flex;
  }

  .musubi-wa {
    display: grid;
  }

  .musubi-navbar__actions .musubi-btn--primary {
    display: inline-flex;
  }

  .musubi-burger {
    display: none;
  }

  .musubi-hero__knot {
    display: block;
  }

  .musubi-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .musubi-hero--cover .musubi-hero__grid {
    grid-template-columns: minmax(0, 40rem);
  }

  /* Cinco huecos y el botón: fechas, huéspedes, mascotas, categoría y enviar.
     Con `repeat(4, 1fr)` y las fechas ocupando dos columnas ya no cabía todo y
     el botón se caía a una segunda línea. Las proporciones son las del
     contenido: las fechas son dos campos, la categoría lleva texto largo y las
     mascotas un digito. */
  .musubi-search__fields {
    grid-template-columns:
      minmax(0, 1.9fr)
      minmax(0, 0.95fr)
      minmax(0, 0.55fr)
      minmax(0, 1.8fr)
      auto;
    align-items: end;
  }

  /* Aquí las fechas ya tienen su columna ancha: no hace falta que se extiendan. */
  .musubi-dates--search {
    grid-column: auto;
  }

  .musubi-search__submit {
    grid-column: auto;
  }

  .musubi-categorias__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .musubi-intro__grid,
  .musubi-ubicacion__grid {
    grid-template-columns: 1fr 1fr;
  }

  .musubi-apartamento__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(23rem, 1fr);
  }

  /* El grid va con `align-items: start`, asi que la columna lateral medía solo
     lo que su contenido y el sticky no tenía por dónde viajar: el formulario
     se quedaba arriba y debajo quedaba un hueco enorme. Estirandola, el
     formulario acompaña toda la lectura. */
  .musubi-apartamento__aside {
    align-self: stretch;
  }

  .musubi-sticky {
    position: sticky;
    top: calc(var(--mu-header-h) + 1.5rem);
  }

  .musubi-contacto__grid {
    grid-template-columns: 1fr 1fr;
  }

  .musubi-footer__grid {
    grid-template-columns: 1.4fr 1fr 1.1fr 1fr;
  }

  .musubi-gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(9rem, 13vw, 12.5rem);
  }
}

@media (max-width: 47.99rem) {
  .musubi-topbar__link--wide,
  .musubi-topbar__badge {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .musubi-body *,
  .musubi-body *::before,
  .musubi-body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* La cabecera sticky se coloca bajo la barra de administración de WordPress. */
body.admin-bar .musubi-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .musubi-header {
    top: 46px;
  }
}