/* ============================================================
   sabica.css — Hoja única del tema Sabica Nevada
   Paleta alpina · Mobile-first · Sin framework · Sin preprocesador
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --sn-snow: #ffffff;
  --sn-snow-soft: #f8f9fa;
  --sn-slate: #1e293b;
  --sn-slate-soft: #334155;
  --sn-ink: #0f172a;
  --sn-muted: #64748b;
  --sn-line: #e8eaed;
  --sn-wood: #d4a373;
  --sn-wood-deep: #b08968;
  --sn-wood-ink: #3f2e22;
  --sn-success: #1b4332;
  --sn-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  --sn-shadow-soft: 0 8px 30px rgba(15, 23, 42, 0.06);
  --sn-radius: 18px;
  --sn-radius-sm: 12px;
  --sn-max: 1180px;

  /* Tipografía. Estaban repetidas literalmente en una docena de reglas; aquí
     se nombran una vez. Los nombres siguen a NUEVOTHEME/assets/css/main.css,
     que es la referencia de diseño. */
  --sn-font: 'Inter', system-ui, sans-serif;
  --sn-display: 'Cormorant Garamond', 'Times New Roman', serif;

  /* Altura de la cabecera fija. La usan `scroll-margin-top` y el panel
     pegajoso de la ficha: sin ella la cabecera tapa aquello a lo que se
     ancla. */
  --sn-header-h: 84px;

  /* Negro puro, NO --sn-ink (#0f172a, azulado). El logotipo es un PNG con
     fondo negro opaco (muestreado: rgba(0,0,0,1) en las cuatro esquinas), asi
     que cualquier otro tono deja un recuadro visible alrededor. Este token
     existe para que la cabecera funda con el logo. */
  --sn-cabecera-bg: #000000;
}

/* ── Reset mínimo ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

body {
  font-family: var(--sn-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sn-slate);
  background-color: var(--sn-snow);
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--sn-wood);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Accesibilidad: saltar al contenido ────────────────────── */
.saltar-al-contenido {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--sn-ink);
  color: var(--sn-snow);
  font-family: var(--sn-font);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--sn-radius-sm);
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s ease;
}

.saltar-al-contenido:focus {
  top: 1rem;
}

/* ── Contenedor ────────────────────────────────────────────── */
.contenedor {
  width: 100%;
  max-width: var(--sn-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 768px) {
  .contenedor {
    padding-inline: 2rem;
  }
}

@media (min-width: 1200px) {
  .contenedor {
    padding-inline: 2.5rem;
  }
}

/* ── Cabecera ──────────────────────────────────────────────── */
/* Fondo negro OPACO, no translucido. Antes era blanco con desenfoque, pero el
   logotipo lleva su propio fondo negro opaco y quedaba como una pegatina
   recortada sobre el claro. Con la cabecera en el mismo negro, el logo funde
   y desaparece el recuadro.
   El desenfoque se retira a proposito: sobre un fondo opaco no aporta nada y
   solo cuesta composicion. `.is-scrolled` ya no cambia el color, solo separa
   la cabecera del contenido con una sombra. */
.sitio-cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--sn-cabecera-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.sitio-cabecera.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}

.sitio-cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--sn-header-h);
}

.sitio-cabecera__marca {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--sn-display);
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 600;
  color: var(--sn-snow);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Logotipo. El fichero es 175x197 (VERTICAL: mas alto que ancho), asi que el
   ancho manda y el alto sale solo.
   El ancho es 62px y no 95px porque a 95px el logo mide 107px de alto y la
   cabecera se iba a ~131px, muy por encima de los 84px del diseno de
   referencia. A 62px el logo mide 70px y la cabecera cumple --sn-header-h,
   que es lo que asume el `top` del panel pegajoso de la ficha. */
.sitio-cabecera__marca img,
.sitio-cabecera__marca .custom-logo {
  width: 54px;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .sitio-cabecera__marca img,
  .sitio-cabecera__marca .custom-logo {
    width: 62px;
  }
}

/* El enlace que envuelve al logo no debe heredar el subrayado de los enlaces. */
.sitio-cabecera__marca .custom-logo-link {
  display: inline-flex;
  text-decoration: none;
}

/* Reserva: si algun dia se quita el logotipo de Ajustes, la cabecera imprime
   el nombre del sitio como texto. La clase se emitia desde el principio pero
   no tenia regla, asi que ese caso salia sin control tipografico. */
.sitio-cabecera__nombre {
  font-family: var(--sn-display);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--sn-snow);
  text-decoration: none;
  white-space: nowrap;
}

/* Maqueta de la cabecera. En movil: marca a la izquierda, hamburguesa a la
   derecha. En escritorio pasa a rejilla auto|1fr|auto, que es la del diseno
   original (.header-inner de NUEVOTHEME), con el menu centrado. */
.sitio-cabecera__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0;
  position: relative;
}

/* La lista que emite wp_nav_menu(). Sin esto salen vinetas y sangria. */
.sitio-cabecera__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sitio-cabecera__menu li {
  margin: 0;
}

/* Nav: móvil (desplegable) */
/* El desplegable hereda el negro de la cabecera. Antes era blanco: con la
   cabecera en negro habria sido un salto de contraste brusco justo debajo. */
.sitio-cabecera__nav {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--sn-cabecera-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 1rem 1.25rem;
  gap: 0;
}

.sitio-cabecera__nav.abierto {
  display: flex;
}

.sitio-cabecera__nav a {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sn-snow);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: color 0.2s ease;
  min-height: 44px;
}

.sitio-cabecera__nav a:last-child {
  border-bottom: none;
}

.sitio-cabecera__nav a:hover {
  color: var(--sn-wood);
}

/* ── Acciones de la cabecera ───────────────────────────────── */
/* Tercera columna de la rejilla. Existia en el CSS (`auto 1fr auto`) pero no
   habia marcado que la ocupara, asi que el menu quedaba descolocado. */
.sitio-cabecera__acciones {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* El telefono se oculta en movil por espacio, no por importancia: el pie lo
   repite y el boton de reserva se queda. */
.sitio-cabecera__tel {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.sitio-cabecera__tel:hover {
  color: var(--sn-wood);
}

.sitio-cabecera__tel svg {
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .sitio-cabecera__tel {
    display: inline-flex;
  }
}

/* Iconos de carrito y cuenta. 44x44 para cumplir el area tactil minima
   aunque el trazo dibujado sea de 22px. */
.sitio-cabecera__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--sn-snow);
  background: none;
  border-radius: 100px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sitio-cabecera__icono:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--sn-wood);
}

.sitio-cabecera__icono svg {
  pointer-events: none;
}

/* CTA compacto: en la cabecera no puede tener la altura de un boton de
   pagina o desequilibra los 84px. */
.sitio-cabecera__cta {
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
  min-height: 40px;
}

/* ── Botón hamburguesa ─────────────────────────────────────── */
.sitio-cabecera__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--sn-snow);
  border-radius: var(--sn-radius-sm);
  transition: background-color 0.2s ease;
}

.sitio-cabecera__toggle:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Las tres barras. El boton emitia un <span> vacio y no habia NI UNA regla
   para el: era un 44x44 invisible. El CSS anterior estilizaba
   `.sitio-cabecera__toggle svg`, que ninguna plantilla llegaba a emitir.
   Patron de NUEVOTHEME: la barra del medio es el propio span, las otras dos
   son sus pseudoelementos. */
.sitio-cabecera__toggle-icon,
.sitio-cabecera__toggle-icon::before,
.sitio-cabecera__toggle-icon::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background-color: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.sitio-cabecera__toggle-icon {
  position: relative;
}

.sitio-cabecera__toggle-icon::before,
.sitio-cabecera__toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.sitio-cabecera__toggle-icon::before {
  top: -6px;
}

.sitio-cabecera__toggle-icon::after {
  top: 6px;
}

/* Abierto: la barra del medio desaparece y las otras dos cruzan. El estado
   se lee del propio aria-expanded, asi no hay una clase que pueda quedar
   desincronizada con lo que anuncia el boton. */
.sitio-cabecera__toggle[aria-expanded='true'] .sitio-cabecera__toggle-icon {
  background-color: transparent;
}

.sitio-cabecera__toggle[aria-expanded='true'] .sitio-cabecera__toggle-icon::before {
  transform: translateY(6px) rotate(45deg);
}

.sitio-cabecera__toggle[aria-expanded='true'] .sitio-cabecera__toggle-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .sitio-cabecera__toggle-icon,
  .sitio-cabecera__toggle-icon::before,
  .sitio-cabecera__toggle-icon::after {
    transition: none;
  }
}

/* Nav: escritorio (horizontal) */
@media (min-width: 768px) {
  .sitio-cabecera__toggle {
    display: none;
  }

  .sitio-cabecera__nav {
    display: flex;
    flex-direction: row;
    position: static;
    background: none;
    border: none;
    padding: 0;
    gap: 0.25rem;
    align-items: center;
  }

  /* Rejilla del diseno original: marca | menu centrado | acciones.
     Sin padding vertical: la altura la fija `min-height: var(--sn-header-h)`
     en .contenedor y el logo (70px) se centra dentro de los 84px. Con
     padding la cabecera se pasaba de los 84px que asume el panel pegajoso
     de la ficha. */
  .sitio-cabecera__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    padding-block: 0;
  }

  /* Menu en fila y centrado, con la separacion del diseno (1.75rem) */
  .sitio-cabecera__menu {
    flex-direction: row;
    justify-content: center;
    gap: 1.75rem;
    width: auto;
  }

  .sitio-cabecera__nav a {
    padding: 0.5rem 0;
    font-size: 0.92rem;
    font-weight: 500;
    /* 0.82 y no blanco pleno: el enlace activo y el hover pasan a blanco
       total, y esa diferencia es la que marca el estado. Con todo en #fff no
       habria a donde subir. */
    color: rgba(255, 255, 255, 0.82);
    border-bottom: none;
    border-radius: 0;
    min-height: 0;
    white-space: nowrap;
    position: relative;
  }

  /* Subrayado que crece desde el centro, en madera. Solo decorativo. */
  .sitio-cabecera__nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0.15rem;
    height: 1.5px;
    background-color: var(--sn-wood);
    transition: left 0.22s ease, right 0.22s ease;
  }

  .sitio-cabecera__nav a:hover,
  .sitio-cabecera__nav a:focus-visible {
    color: var(--sn-snow);
  }

  .sitio-cabecera__nav a:hover::after,
  .sitio-cabecera__nav a:focus-visible::after,
  .sitio-cabecera__menu .current-menu-item > a::after {
    left: 0;
    right: 0;
  }

  /* Pagina actual: mas peso y color pleno */
  .sitio-cabecera__menu .current-menu-item > a,
  .sitio-cabecera__menu .current_page_item > a {
    color: var(--sn-snow);
    font-weight: 600;
  }
}

/* ── Hero / Portada ────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 70vh;
  padding-block: clamp(3rem, 10vw, 6rem);
  background-color: var(--sn-ink);
  color: var(--sn-snow);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.45) 0%,
    rgba(15, 23, 42, 0.65) 100%
  );
  z-index: 1;
}

.hero > * {
  position: relative;
  z-index: 2;
}

/* Video de fondo. El z-index 0 tiene que ir DESPUES de `.hero > *`, que pone
   z-index 2 a todos los hijos directos: el video es uno de ellos y sin esto
   se colocaria por encima del velo y del texto. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Movil: nada de video. Son 18 MB y la mayoria del encuadre se pierde al
   recortar a vertical. `display:none` basta porque el <video> lleva
   preload="none": el navegador no descarga el fichero. Es lo mismo que hace
   produccion con `elementor-hidden-mobile`. */
@media (max-width: 767px) {
  .hero__video {
    display: none;
  }
}

/* Un video en bucle que arranca solo es justo lo que esta preferencia pide
   evitar. Se retira y queda el fondo solido con el velo. */
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

/* Con video, el velo sube un punto: sobre imagen en movimiento el texto
   necesita mas base para no perder legibilidad segun pasan los fotogramas. */
.hero--con-video::before {
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.55) 0%,
    rgba(15, 23, 42, 0.72) 100%
  );
}

.hero__titulo {
  font-family: var(--sn-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sn-snow);
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: 1rem;
}

.hero__subtitulo {
  font-family: var(--sn-font);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

/* Boton bajo el subtitulo. El margen inferior deja hueco a la tarjeta de
   reservas, que sube y pisa el borde inferior del hero.
   Triple de grande que un .boton normal (0.9375rem, 0.75/1.625rem, 44px).
   En movil se encoge con clamp para no desbordar los 360px de ancho. */
.hero__boton {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  font-size: clamp(1.75rem, 7vw, 2.8125rem);
  padding: clamp(1.25rem, 4vw, 2.25rem) clamp(2.5rem, 9vw, 4.875rem);
  min-height: clamp(88px, 20vw, 132px);
  border-radius: calc(var(--sn-radius-sm) * 2);
}

/* ── Widget de reservas (WuBook) ───────────────────────────── */
/* Tarjeta blanca flotante que monta sobre el hero, como en NUEVOTHEME.
   IMPORTANTE: aqui solo se estiliza el ENVOLTORIO. El interior lo pinta el
   script de WuBook y se configura por sus `wbparams` en
   template-parts/booking-wubook.php, NO con CSS: apuntar a su marcado
   generado se rompe en silencio en cuanto ellos lo cambien. */
.reservas {
  position: relative;
  z-index: 3;
  width: calc(100% - 2.5rem);
  max-width: var(--sn-max);
  margin-inline: auto;
  /* Negativo: la tarjeta sube y pisa el hero, que es lo que le da el efecto
     de flotar en vez de quedar apilada debajo. */
  margin-top: clamp(-3.5rem, -5vw, -2rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background-color: var(--sn-snow);
  border-radius: var(--sn-radius);
  box-shadow: var(--sn-shadow);
  overflow: hidden;
}

@media (min-width: 768px) {
  .reservas {
    width: calc(100% - 4rem);
  }
}

/* El enlace obligatorio de WuBook («Reservations system by Wubook»). No se
   puede quitar —forma parte de sus condiciones— pero si atenuar para que no
   compita con el formulario. Recupera opacidad al pasar por encima. */
.reservas #_baror_ > a[href*='wubook.net'] {
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.reservas #_baror_ > a[href*='wubook.net']:hover,
.reservas #_baror_ > a[href*='wubook.net']:focus-visible {
  opacity: 1;
}

/* ── Banda superior de pagina interior ─────────────────────── */
/* No es el hero de la portada: es mas baja y sobria. Existe para que las
   interiores no arranquen a pelo justo debajo de la cabecera. */
/* Sin imagen la franja se ajusta a su contenido: reservar 200-300px de alto
   para un titulo y dos lineas dejaba un hueco muerto enorme. Con imagen si
   compensa dar altura, porque la foto es parte del mensaje. */
.banda {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  background-color: var(--sn-snow-soft);
  overflow: hidden;
}

.banda--con-imagen {
  min-height: clamp(220px, 28vw, 340px);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

/* Sin imagen: un degradado tenue en lugar de un plano liso, para que la
   franja tenga algo de profundidad sin necesidad de una foto que aqui no
   siempre existe. */
.banda::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(
    160deg,
    var(--sn-snow-soft) 0%,
    #eef1f4 55%,
    var(--sn-snow) 100%
  );
}

.banda__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo. Con imagen de fondo el texto oscuro no se lee sobre cualquier foto;
   este degradado garantiza contraste sin apagar del todo la imagen. */
.banda--con-imagen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.78) 0%,
    rgba(15, 23, 42, 0.45) 55%,
    rgba(15, 23, 42, 0.2) 100%
  );
}

.banda__contenido {
  position: relative;
}

.banda__antetitulo {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sn-wood-deep);
  margin-bottom: 0.75rem;
}

.banda__titulo {
  font-family: var(--sn-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sn-ink);
  margin-bottom: 0.75rem;
}

.banda__intro {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.65;
  color: var(--sn-muted);
  max-width: 58ch;
}

/* Sobre imagen todo el bloque va en claro. */
.banda--con-imagen .banda__antetitulo {
  color: var(--sn-wood);
}

.banda--con-imagen .banda__titulo {
  color: var(--sn-snow);
}

.banda--con-imagen .banda__intro {
  color: rgba(255, 255, 255, 0.85);
}

/* ── Secciones ─────────────────────────────────────────────── */
.seccion {
  padding-block: clamp(3rem, 8vw, 5rem);
}

/* Tras la banda o tras las migas el aire de arriba ya lo pone el bloque
   anterior; repetirlo dejaba un hueco muerto de casi 10rem. */
.seccion--tras-banda {
  padding-top: clamp(2rem, 5vw, 3rem);
}


/* Encabezado de pagina interior. Repite el patron de NUEVOTHEME: antetitulo
   en versalitas, titulo en la display y entradilla corta. El margen inferior
   vive aqui y no en el titulo para que el bloque se comporte como una unidad. */
.seccion__encabezado {
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.seccion__antetitulo {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sn-wood-deep);
  margin-bottom: 0.75rem;
}

.seccion__titulo {
  font-family: var(--sn-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--sn-ink);
  margin-bottom: 0.75rem;
}



/* ── Filtro por edificio ───────────────────────────────────── */
.filtro-edificios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: clamp(2rem, 4vw, 2.5rem);
}

/* Pildoras. Deliberadamente NO usan .boton: necesitan menos altura y menos
   peso visual que una llamada a la accion, y competirian con ella. */
.filtro-edificios a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sn-slate-soft);
  background-color: var(--sn-snow);
  border: 1px solid var(--sn-line);
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease,
    background-color 0.2s ease;
}

.filtro-edificios a:hover {
  border-color: var(--sn-wood);
  color: var(--sn-wood-ink);
}

.filtro-edificios a.is-active {
  background-color: var(--sn-ink);
  border-color: var(--sn-ink);
  color: var(--sn-snow);
}

/* ── Rejillas ──────────────────────────────────────────────── */
.rejilla {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .rejilla {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rejilla--3 {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .rejilla--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .rejilla--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

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

/* ── Tarjetas ──────────────────────────────────────────────── */
/* `position:relative` es lo que ancla .tarjeta__etiqueta. Antes el único
   ancestro posicionado era .tarjeta__media, pero la etiqueta no puede ir ahí
   dentro: ese enlace es aria-hidden y el tipo de alojamiento es información,
   no decoración. Anclándola a .tarjeta queda encima de la imagen y sigue
   siendo legible para un lector de pantalla. */
.tarjeta {
  position: relative;
  background-color: var(--sn-snow);
  border-radius: var(--sn-radius);
  overflow: hidden;
  box-shadow: var(--sn-shadow-soft);
  border: 1px solid var(--sn-line);
  transition: box-shadow 0.25s ease, transform 0.25s ease,
    border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}

/* Hover: la tarjeta sube, gana sombra y el borde pasa a madera. El cambio de
   borde es lo que la separa de una tarjeta generica con sombra; ata el estado
   a la paleta en lugar de solo mover el elemento.
   `:focus-within` incluido: navegando con teclado el foco entra en el enlace
   del titulo y la tarjeta debe reaccionar igual que con el raton. */
.tarjeta:hover,
.tarjeta:focus-within {
  box-shadow: var(--sn-shadow);
  border-color: var(--sn-wood);
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta:hover,
  .tarjeta:focus-within {
    transform: none;
  }
}

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

/* 3/2 y no 16/10: es la proporcion real del recorte `sabica-card` (720x480,
   inc/setup.php). Con 16/10 el navegador volvia a recortar una imagen ya
   recortada y se comian unos pixeles por arriba y por abajo. */
.tarjeta__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  display: block;
}

.tarjeta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tarjeta:hover .tarjeta__media img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta:hover .tarjeta__media img {
    transform: none;
  }
}

.tarjeta__etiqueta {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  z-index: 1;
  padding: 0.3125rem 0.8125rem;
  background-color: var(--sn-wood);
  color: var(--sn-wood-ink);
  font-family: var(--sn-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.tarjeta__cuerpo {
  padding: 1.375rem 1.375rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.tarjeta__titulo {
  font-family: var(--sn-display);
  font-size: clamp(1.1875rem, 2vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sn-ink);
  transition: color 0.2s ease;
}

.tarjeta:hover .tarjeta__titulo a,
.tarjeta:focus-within .tarjeta__titulo a {
  color: var(--sn-wood-ink);
}

/* Flex con separador generado: antes los datos se concatenaban sin nada en
   medio y salia «8 personas Apartamentos Sabica». El punto medio va en un
   ::before del segundo hijo en adelante, asi no sobra al final ni hace falta
   que la plantilla sepa cuantos datos hay. */
.tarjeta__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--sn-muted);
  padding-top: 0.5rem;
}

/* --sn-muted y no --sn-line: #e8eaed sobre blanco no se veía y los datos
   seguían pareciendo concatenados. */
.tarjeta__meta > * + *::before {
  content: '·';
  margin-right: 0.5rem;
  color: var(--sn-muted);
}

.tarjeta__meta a {
  text-decoration: none;
  color: var(--sn-slate-soft);
}

.tarjeta__meta a:hover {
  color: var(--sn-wood-deep);
}

/* `margin-top:auto` aqui y no en .tarjeta__meta. Estaba en la meta, pero hay
   tarjetas sin ella (los forfaits sin extracto): en esas, el boton subia y las
   llamadas a la accion de una misma fila no quedaban alineadas. En el ultimo
   elemento siempre funciona. */
.tarjeta__acciones {
  margin-top: auto;
  padding-top: 1rem;
}

.tarjeta__acciones .boton {
  width: 100%;
}

/* ── Ficha de alojamiento ──────────────────────────────────── */
/* La retícula va al revés que antes. Hasta ahora la galería se llevaba la
   columna ancha y TODA la prosa quedaba encerrada en 340px, lo que dejaba
   unos 25 caracteres por línea. Ahora la columna ancha lleva galería y texto,
   y la estrecha es un panel de datos y reserva. */
.ficha {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding-bottom: clamp(3rem, 6vw, 4rem);
}

@media (min-width: 900px) {
  .ficha {
    /* minmax(0,1fr) y no 1fr: sin el mínimo en 0 una imagen ancha dentro de
       la rejilla puede desbordar la columna en lugar de encogerse. */
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 3rem;
    align-items: start;
  }
}

.ficha__principal {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 2.75rem);
  min-width: 0;
}

/* ── Galería en mosaico ───────────────────────────────────── */
/* Una imagen grande y una rejilla 2x2 de miniaturas. El JS que las conecta
   (assets/js/sabica.js) es agnóstico a la maqueta: solo lee
   [data-galeria-principal] img y los img de [data-galeria-thumbs], intercambia
   el src y alterna .activo. Por eso este mosaico funciona sin tocar el JS. */
/* Sin overflow ni radio en el contenedor: cada celda lleva el suyo. Recortar
   aqui ademas de en las celdas daba esquinas mezcladas, unas redondeadas por
   el contenedor y otras por la propia celda. */
.ficha__galeria {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .ficha__galeria {
    grid-template-columns: 1.6fr 1fr;
  }
}

/* Una sola imagen: sin mosaico al lado, ocupa todo el ancho. */
.ficha__galeria--unica {
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .ficha__galeria--unica {
    grid-template-columns: 1fr;
  }
}

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

.ficha__galeria [data-galeria-principal] {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
  border-radius: var(--sn-radius);
}

.ficha__galeria--unica [data-galeria-principal] {
  aspect-ratio: 16 / 9;
}

.ficha__galeria [data-galeria-principal] img {
  transition: transform 0.4s ease;
}

/* Rejilla 2x2 de miniaturas. La rejilla vive en .ficha__galeria-lateral y no
   en [data-galeria-thumbs] porque el botón «+N fotos» tiene que ser una celda
   más SIN estar dentro de ese contenedor: el JS convierte en control cada
   <img> que encuentra ahí dentro, y el botón acabaría haciendo dos cosas a la
   vez. `display:contents` deja que las miniaturas participen en esta rejilla
   aunque su padre siga existiendo para el JS. */
.ficha__galeria-lateral {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  align-content: start;
}

/* Con dos columnas, las cuatro celdas reparten la altura de la imagen
   principal en dos filas iguales. Asi el mosaico es un rectangulo limpio;
   dejando que mandara el aspect-ratio de cada celda, el lateral quedaba mas
   corto que la imagen grande y sobraba un hueco debajo. */
@media (min-width: 700px) {
  .ficha__galeria-lateral {
    grid-template-rows: repeat(2, 1fr);
    align-content: stretch;
  }

  .ficha__galeria-lateral .ficha__miniatura {
    aspect-ratio: auto;
    height: 100%;
  }
}

.ficha__galeria [data-galeria-thumbs] {
  display: contents;
}

/* Celda. Es un <span> en las miniaturas y un <button> en el «+N fotos»: el
   elemento interactivo de una miniatura es su propio <img>, al que el JS
   añade role="button" y tabindex. Envolverlo en un <button> anidaría dos
   controles. */
.ficha__miniatura {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--sn-radius-sm);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  display: block;
  width: 100%;
}

.ficha__galeria [data-galeria-thumbs] img {
  opacity: 0.85;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.4s ease;
}

.ficha__galeria [data-galeria-thumbs] img.activo,
.ficha__miniatura:hover img {
  opacity: 1;
}

.ficha__miniatura:hover img {
  transform: scale(1.05);
}

/* Marca de la miniatura activa: ::after sobre la celda, no un borde en la
   imagen, para no descuadrar el aspect-ratio. */
.ficha__miniatura::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-radius: var(--sn-radius-sm);
  transition: border-color 0.2s ease;
  pointer-events: none;
}

.ficha__miniatura:has(img.activo)::after {
  border-color: var(--sn-wood);
}

.ficha__miniatura--mas {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .ficha__miniatura:hover img,
  .ficha__galeria [data-galeria-principal] img {
    transform: none;
  }
}

/* «+N fotos» sobre la última miniatura visible. */
.ficha__mas-fotos {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(15, 23, 42, 0.55);
  color: var(--sn-snow);
  font-family: var(--sn-font);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  padding: 0.5rem;
  transition: background-color 0.2s ease;
}

.ficha__miniatura:hover .ficha__mas-fotos {
  background-color: rgba(15, 23, 42, 0.68);
}

/* ── Diálogo con la galería completa ──────────────────────── */
/* `margin:auto` es obligatorio aquí. El navegador centra un <dialog> modal
   con ese margen, pero el reset del tema (`* { margin: 0 }`) lo anula y el
   diálogo se pegaba a la esquina superior izquierda. */
.ficha__dialogo {
  width: min(1100px, 92vw);
  max-width: min(1100px, 92vw);
  max-height: 90vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--sn-radius);
  background-color: var(--sn-snow);
  overflow: hidden;
}

.ficha__dialogo::backdrop {
  background-color: rgba(15, 23, 42, 0.75);
}

.ficha__dialogo-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--sn-line);
}

.ficha__dialogo-titulo {
  font-family: var(--sn-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sn-ink);
}

.ficha__dialogo-cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--sn-slate-soft);
  background: none;
  border: 1px solid var(--sn-line);
  border-radius: 100px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ficha__dialogo-cerrar:hover {
  border-color: var(--sn-wood);
  color: var(--sn-wood-ink);
}

.ficha__dialogo-cuerpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 1.25rem;
  overflow-y: auto;
  max-height: calc(90vh - 5rem);
}

@media (min-width: 700px) {
  .ficha__dialogo-cuerpo {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ficha__dialogo-cuerpo figure {
  margin: 0;
  border-radius: var(--sn-radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.ficha__dialogo-cuerpo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Panel lateral de la ficha ────────────────────────────── */
.ficha__panel {
  background-color: var(--sn-snow-soft);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Acompaña al scroll solo cuando hay dos columnas. En móvil el panel va
   apilado y un sticky ahí solo taparía contenido. */
@media (min-width: 900px) {
  .ficha__panel {
    position: sticky;
    top: calc(var(--sn-header-h) + 1.5rem);
  }
}

.ficha__panel .tarjeta__etiqueta {
  position: static;
  align-self: flex-start;
}

.ficha__titulo {
  font-family: var(--sn-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sn-ink);
}

.ficha__datos-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ficha__dato {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--sn-line);
  font-size: 0.9375rem;
}

.ficha__dato:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ficha__dato strong {
  font-weight: 600;
  color: var(--sn-ink);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ficha__dato span,
.ficha__dato a {
  color: var(--sn-slate-soft);
}

.ficha__dato a:hover {
  color: var(--sn-wood-deep);
}

.ficha__acciones {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 0.25rem;
}

.ficha__acciones .boton {
  width: 100%;
}

/* ── Prosa ─────────────────────────────────────────────────── */
.prosa {
  max-width: 72ch;
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.7;
  color: var(--sn-slate);
}

.prosa h1,
.prosa h2,
.prosa h3,
.prosa h4,
.prosa h5,
.prosa h6 {
  font-family: var(--sn-display);
  font-weight: 600;
  line-height: 1.25;
  color: var(--sn-ink);
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.prosa h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.prosa h2 { font-size: clamp(1.4rem, 3vw, 1.875rem); }
.prosa h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }

.prosa p {
  margin-bottom: 1.25em;
}

.prosa a {
  color: var(--sn-wood-deep);
  text-underline-offset: 0.25em;
}

.prosa a:hover {
  color: var(--sn-wood-ink);
}

.prosa ul,
.prosa ol {
  margin-bottom: 1.25em;
  padding-left: 1.5em;
}

.prosa li {
  margin-bottom: 0.4em;
}

.prosa table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
  font-size: 0.9375rem;
  overflow-x: auto;
  display: block;
}

.prosa th,
.prosa td {
  padding: 0.625rem 0.875rem;
  text-align: left;
  border: 1px solid var(--sn-line);
}

.prosa th {
  background-color: var(--sn-snow-soft);
  font-weight: 600;
  color: var(--sn-ink);
}

.prosa tr:nth-child(even) td {
  background-color: var(--sn-snow-soft);
}

.prosa blockquote {
  border-left: 3px solid var(--sn-wood);
  padding-left: 1.25em;
  margin-left: 0;
  margin-bottom: 1.25em;
  color: var(--sn-muted);
  font-style: italic;
}

.prosa hr {
  border: none;
  border-top: 1px solid var(--sn-line);
  margin-block: 2em;
}

/* Contenido incrustado. El contenido real de los alojamientos trae un mapa de
   Google en un <iframe> con width/height fijos en el atributo, que se salía
   del contenedor. `width:100%` gana al atributo por ser CSS, y el
   aspect-ratio sustituye a la altura fija. */
.prosa iframe,
.prosa embed,
.prosa object,
.prosa video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--sn-radius-sm);
  margin-block: 1.5em;
}

/* Las incrustaciones de WordPress ya traen su propio contenedor con ratio;
   ahí el aspect-ratio de arriba sobra y descuadraría el vídeo. */
.prosa .wp-block-embed__wrapper iframe {
  aspect-ratio: auto;
  margin-block: 0;
}

.prosa img {
  border-radius: var(--sn-radius-sm);
}

/* ── Botones ───────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.625rem;
  font-family: var(--sn-font);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--sn-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, box-shadow 0.2s ease;
  min-height: 44px;
  white-space: nowrap;
}

.boton--primario {
  background-color: var(--sn-wood);
  color: var(--sn-wood-ink);
  border-color: var(--sn-wood);
}

.boton--primario:hover {
  background-color: var(--sn-wood-deep);
  border-color: var(--sn-wood-deep);
  box-shadow: 0 4px 12px rgba(176, 137, 104, 0.35);
}

/* --fantasma es texto blanco sobre borde blanco: SOLO sirve sobre fondo
   oscuro. Sobre fondo claro es invisible, que es justo lo que pasaba en el
   archivo de alojamientos y en los «volver» de las fichas.
   Hoy ninguna plantilla lo usa (todo paso a --contorno). Se conserva a
   proposito: es la unica variante valida sobre imagen o sobre el slate, y la
   banda con imagen o un futuro hero la necesitarian. */
.boton--fantasma {
  background-color: transparent;
  color: var(--sn-snow);
  border-color: rgba(255, 255, 255, 0.7);
}

.boton--fantasma:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--sn-snow);
}

.boton--contorno {
  background-color: transparent;
  color: var(--sn-slate);
  border-color: var(--sn-line);
}

.boton--contorno:hover {
  background-color: var(--sn-snow-soft);
  border-color: var(--sn-wood);
  color: var(--sn-wood-ink);
}

/* ── Paginación ────────────────────────────────────────────── */
/* `the_posts_pagination()` emite un <h2 class="screen-reader-text"> que sin
   esta regla se veía como un titular «Paginación de entradas» en medio de la
   página. La clase es de WordPress, no del tema: hay que darle el patrón
   estándar de ocultación accesible. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pagination {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--sn-slate-soft);
  background-color: var(--sn-snow);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-sm);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease,
    background-color 0.2s ease;
}

.pagination a.page-numbers:hover {
  border-color: var(--sn-wood);
  color: var(--sn-wood-ink);
}

.pagination .page-numbers.current {
  background-color: var(--sn-ink);
  border-color: var(--sn-ink);
  color: var(--sn-snow);
}

.pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* Salida al final del listado de edificios. */
.alojamientos-pag__salida {
  margin-top: clamp(2rem, 5vw, 3rem);
  text-align: center;
}

/* ── Página de contacto ────────────────────────────────────── */
.contacto {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: start;
}

@media (min-width: 900px) {
  .contacto {
    /* minmax(0,...) para que el iframe del mapa no desborde su columna. */
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.contacto__titulo {
  font-family: var(--sn-display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sn-ink);
  margin-bottom: 1.75rem;
}

.contacto__grupo + .contacto__grupo {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--sn-line);
}

.contacto__grupo-titulo {
  font-family: var(--sn-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sn-wood-deep);
  margin-bottom: 0.875rem;
}

.contacto__lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contacto__lista a,
.contacto__direccion {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  font-size: 1.0625rem;
  color: var(--sn-slate);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contacto__lista a:hover {
  color: var(--sn-wood-deep);
}

/* `flex-shrink:0` porque si no, con un texto largo al lado el icono se
   aplasta a un ovalo en vez de encogerse el texto. */
.contacto .icono {
  flex-shrink: 0;
  color: var(--sn-wood-deep);
}

.contacto__direccion {
  color: var(--sn-slate-soft);
  align-items: flex-start;
}

.contacto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.contacto__mapa {
  border-radius: var(--sn-radius);
  overflow: hidden;
  border: 1px solid var(--sn-line);
  box-shadow: var(--sn-shadow-soft);
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
  .contacto__mapa {
    aspect-ratio: 1 / 1;
    position: sticky;
    top: calc(var(--sn-header-h) + 1.5rem);
  }
}

.contacto__mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Relacionados ──────────────────────────────────────────── */
/* Cierra la ficha. Va separado por una linea para que se lea como un bloque
   de apoyo y no como mas contenido del alojamiento. */
.relacionados {
  border-top: 1px solid var(--sn-line);
  padding-top: clamp(2.5rem, 6vw, 3.5rem);
}

/* ── Estados vacios ────────────────────────────────────────── */
.estado-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: clamp(2.5rem, 7vw, 4rem) 1.5rem;
  background-color: var(--sn-snow-soft);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius);
}

.estado-vacio__marca {
  width: 56px;
  height: 56px;
  color: var(--sn-wood-deep);
  margin-bottom: 0.25rem;
}

.estado-vacio__titulo {
  font-family: var(--sn-display);
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--sn-ink);
}

.estado-vacio__texto {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--sn-muted);
  max-width: 46ch;
}

.estado-vacio__accion {
  margin-top: 0.5rem;
}

/* ── Buscador ──────────────────────────────────────────────── */
.formulario-busqueda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
  margin-block: 1.5rem;
}

/* La etiqueta se oculta a la vista pero sigue existiendo para el lector de
   pantalla: el placeholder no es una etiqueta. */
.formulario-busqueda label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.formulario-busqueda__campo {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.625rem 1rem;
  font-family: var(--sn-font);
  font-size: 1rem;
  color: var(--sn-slate);
  background-color: var(--sn-snow);
  border: 1px solid var(--sn-line);
  border-radius: var(--sn-radius-sm);
  transition: border-color 0.2s ease;
}

.formulario-busqueda__campo::placeholder {
  color: var(--sn-muted);
}

.formulario-busqueda__campo:focus {
  border-color: var(--sn-wood);
  outline: none;
}

.formulario-busqueda__campo:focus-visible {
  outline: 3px solid var(--sn-wood);
  outline-offset: 2px;
}

/* ── Pagina 404 ────────────────────────────────────────────── */
.error-404 {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 9vw, 6rem);
  text-align: center;
}

.error-404 .formulario-busqueda {
  justify-content: center;
}

/* ── Cabecera de entrada / pagina ──────────────────────────── */
.entrada__cabecera {
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.entrada__titulo {
  font-family: var(--sn-display);
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sn-ink);
}

/* ── Migas de pan ──────────────────────────────────────────── */
.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--sn-muted);
  padding-block: 1rem;
}

/* Variante para cuando las migas van justo encima de la banda: la ruta se lee
   antes que el titulo, que es el orden natural. Sin el padding inferior, para
   que no separe la ruta de la franja a la que pertenece. */
.migas--sobre-banda {
  padding-bottom: 0.25rem;
}

.migas a {
  color: var(--sn-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.migas a:hover {
  color: var(--sn-wood-deep);
}

.migas .separador {
  color: var(--sn-line);
  user-select: none;
}

.migas .actual {
  color: var(--sn-slate);
  font-weight: 600;
}

/* ── Pie de página ─────────────────────────────────────────── */
.sitio-pie {
  background-color: var(--sn-slate);
  color: rgba(255, 255, 255, 0.85);
  padding-block: clamp(3rem, 6vw, 4rem);
}

.sitio-pie__cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .sitio-pie__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .sitio-pie__cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sitio-pie__cols h3,
.sitio-pie__cols h4 {
  font-family: var(--sn-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sn-snow);
  margin-bottom: 0.875rem;
}

.sitio-pie__cols a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s ease;
  display: block;
  margin-bottom: 0.5rem;
  min-height: 28px;
}

.sitio-pie__cols a:hover {
  color: var(--sn-wood);
}

.sitio-pie__cols p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.sitio-pie__marca {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Sin esto el nombre del sitio salia como texto suelto al tamano del cuerpo:
   la clase existia en footer.php desde el principio pero no tenia regla. */
.sitio-pie__nombre {
  font-family: var(--sn-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sn-snow);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sitio-pie__nombre:hover {
  color: var(--sn-wood);
}

/* Barra legal a ancho completo. Estaba escrita como barra (border-top de lado
   a lado, space-between) pero el marcado la metía DENTRO de .sitio-pie__cols,
   que es una rejilla de tres columnas: la línea solo cruzaba un tercio y la
   tercera columna quedaba vacía. Ahora footer.php la saca fuera de la rejilla. */
.sitio-pie__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

.sitio-pie__menu-legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0;
  padding: 0;
}

/* 0.72 y no 0.5: al 50 % sobre el slate del pie el contraste se quedaba por
   debajo de 4.5:1 y los tres enlaces legales apenas se leían. */
.sitio-pie__legal a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s ease;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.sitio-pie__legal a:hover {
  color: var(--sn-wood);
}

.sitio-pie__creditos {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Piezas de hj93 y Elementor dentro del tema ─────────────
   Las apps de hj93 (carrito, pago, cuenta, factura, compra de forfait y
   reserva de alojamiento) traen su propio CSS; aquí solo se les da el ancho
   completo de la columna. Lo mismo para el contenido maquetado con Elementor
   (landings, pestañas de los forfaits, formulario de contacto). */
.entrada__contenido--app,
.entrada__contenido--ancho,
.ficha__contenido-elementor {
  max-width: none;
  width: 100%;
}

.ficha__compra {
  margin-block: 2rem;
  scroll-margin-top: 6rem;
}

.ficha__extracto {
  color: var(--sn-ink);
  opacity: 0.8;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.ficha__ubicacion {
  margin-block: 2rem;
}

.ficha__subtitulo {
  font-family: var(--sn-display);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.contacto__formulario {
  max-width: 46rem;
}

.sitio-pie__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sitio-pie__creditos a {
  color: inherit;
}

.sitio-pie__creditos a:hover {
  color: var(--sn-wood);
}

/* ── Estilos de impresión (páginas legales) ────────────────── */
@media print {
  .sitio-cabecera,
  .sitio-pie,
  .reservas,
  .migas,
  .saltar-al-contenido {
    display: none;
  }

  body {
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }

  .prosa {
    max-width: 100%;
    font-size: 10pt;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  .tarjeta {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* Botón flotante de WhatsApp (footer.php). Número: Personalizador, sabica_whatsapp.
   z-index 900: encima de la cabecera pegajosa (100), debajo del overlay de carga de hj93 y del «saltar al contenido» (9999). */
.whatsapp-flotante {
  position: fixed;
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: var(--sn-shadow-soft), 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-flotante .icono {
  width: 30px;
  height: 30px;
}

.whatsapp-flotante:hover {
  transform: scale(1.07);
  color: #fff;
}

.whatsapp-flotante:focus-visible {
  outline: 3px solid var(--sn-slate);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .whatsapp-flotante {
    width: 52px;
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-flotante {
    transition: none;
  }
}

@media print {
  .whatsapp-flotante {
    display: none;
  }
}