/* ==========================================================================
   A Leira — Hoja de estilos
   ========================================================================== */


:root {
  --color-bg: #f3ece1;
  /* Crema, no blanco: la tarjeta de reserva y sus desplegables tienen que
     poder levantarse sobre el fondo de pagina sin salirse de la gama. */
  --color-surface: #faf6ec;
  --color-dark: #2b2318;
  --color-text: #382e22;
  --color-text-muted: #9c9182;
  --color-text-soft: #665c4d;
  --color-accent: #236b25;
  --color-border: #62533b;
  --color-tag-bg: #e9e0d0;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Filo de papel de la pastilla del menu: el canto de la hoja por dentro,
     arriba, y la sombra corta que proyecta. A tamano de panel no funciona:
     ahi basta con una sombra detras. */
  --filo-papel:
    inset 0 2px 2px -1px rgba(43, 35, 24, 0.2),
    0 1px 2px rgba(43, 35, 24, 0.07);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Acelera al salir y frena al llegar: la entrada y la salida del CTA del
     header se notan igual de suaves en los dos sentidos. */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --container-width: 1440px;
  --header-height: 84px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  transition: opacity 0.2s var(--ease);
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-body);
  color: var(--color-dark);
  line-height: 1.15;
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 40px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  transition: box-shadow 0.25s var(--ease);
  /* El CTA, mientras esta oculto, se aparta mas alla del borde derecho y
     sin esto ensanchaba la pagina (aparecia scroll horizontal hasta que el
     boton entraba). Solo en horizontal: con overflow:hidden se cortaria
     tambien cualquier desplegable que baje del header. */
  overflow-x: clip;
}

/* Arriba del todo no se separa del contenido; en cuanto hay scroll una
   sombra ligera lo despega. La clase la pone el script. */
.site-header.scrolled {
  box-shadow: 0 2px 16px rgba(43, 35, 24, 0.13);
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: var(--header-height);
}

.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  /* Hueco suficiente para que las pastillas no se toquen entre sí: pegadas,
     la del hover y la de la sección activa se leían como una sola. */
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Una sola pastilla que se desliza hasta la sección activa, en vez de un
   fondo que se enciende y se apaga en cada enlace: así el cambio se lee
   como un recorrido de una sección a la siguiente. La coloca main.js, que
   es quien sabe dónde está cada enlace. */
.nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-tag-bg);
  /* Un filo mas oscuro arriba por dentro y un soplo de sombra por fuera
     abajo: la pastilla deja de ser una mancha de color y se lee como una
     hoja apoyada sobre la pagina. */
  box-shadow: var(--filo-papel);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.42s var(--ease-in-out),
    width 0.42s var(--ease-in-out),
    opacity 0.2s var(--ease);
}

.nav-pill.visible {
  opacity: 1;
}

.nav-links a {
  position: relative;
  z-index: 1; /* por encima de la pastilla */
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-text);
  transition: color 0.2s var(--ease);
}

/* El hover se dibuja con un contorno fino y no con relleno: relleno es lo
   que hace la pastilla de la sección activa, y con los dos rellenos costaba
   distinguir en cuál estás de en cuál vas a entrar. */
.nav-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(43, 35, 24, 0.25);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.nav-links a:hover::before {
  opacity: 1;
}

/* Sin cambiar el grosor: en negrita el enlace mide otra cosa, la fila
   entera se recolocaría al cambiar de sección y la pastilla acabaría
   persiguiendo un objetivo en movimiento. */
.nav-links a.active {
  color: var(--color-dark);
}

/* Sobre la pastilla el relleno sobra: ya está marcado. */
.nav-links a.active::before {
  opacity: 0;
}

.logo img {
  height: 29px;
  width: auto;
}

.nav-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* El hueco se ensancha para que el idioma se aparte, pero el botón ya no se
   revela por recorte: va colocado en absoluto contra el borde derecho, así
   que no se mueve ni lo corta nada, solo aparece. El margen negativo anula
   el gap mientras está cerrado. */
.header-cta-slot {
  position: relative;
  flex-shrink: 0;
  width: 0;
  margin-left: -12px;
  /* Al cerrarse espera a que el botón se haya desvanecido: si no, el hueco
     encogería con el botón todavía encima del idioma. */
  transition:
    width 0.5s var(--ease-in-out) 0.3s,
    margin-left 0.5s var(--ease-in-out) 0.3s;
}

.nav-cta.with-cta .header-cta-slot {
  width: var(--cta-width, 210px);
  margin-left: 0;
  /* Al abrirse va primero, sin esperar a nadie. */
  transition:
    width 0.5s var(--ease-in-out) 0s,
    margin-left 0.5s var(--ease-in-out) 0s;
}

/* El desplegable sale hacia la izquierda en absoluto: asi no empuja al
   resto del header al abrirse. */
.lang {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.lang-options {
  position: absolute;
  right: 100%;
  margin-right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  /* Misma altura que el boton que lo abre, para que formen una pieza. */
  height: 38px;
  padding: 4px;
  border-radius: 999px;
  background: var(--color-tag-bg);
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  transition:
    opacity 0.3s var(--ease-in-out),
    transform 0.3s var(--ease-in-out);
}

.lang.open .lang-options {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.lang-option {
  display: inline-flex;
  align-items: center;
  height: 100%;
  border: none;
  border-radius: 999px;
  padding: 0 13px;
  background: none;
  color: var(--color-text-soft);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}

.lang-option:hover {
  color: var(--color-dark);
}

/* El elegido queda marcado; el otro se ve al lado para poder cambiar. */
.lang-option[aria-pressed="true"] {
  background: var(--color-dark);
  color: #fff;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: var(--color-tag-bg);
  color: var(--color-text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.lang-icono {
  width: 1.15em;
  height: 1.15em;
}

/* Abierto el desplegable, el boton se marca igual que la pastilla del menu
   o el icono de la carpeta activa: es la misma idea de "esto es lo que esta
   pasando ahora". */
.lang.open .lang-toggle {
  box-shadow: var(--filo-papel);
}

.lang-toggle:hover {
  background: #ded2bf;
}

.lang-toggle:active {
  transform: scale(0.94);
}

.nav-mobile-cta {
  display: none;
}

.btn-reserve {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-dark);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 6px 20px;
  border: 2px solid var(--color-bg);
  border-radius: 999px;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.btn-reserve:hover {
  background: #000;
  transform: translateY(-1px);
}

.btn-reserve i {
  font-size: 1rem;
}

/* Está oculto mientras se ve el hero (que ya lleva su propio botón) y
   aparece al dejarlo atrás. En absoluto sobre el borde derecho del hueco:
   así ocupa siempre el mismo sitio y la única animación es la opacidad.
   La clase la pone el script con un IntersectionObserver sobre el hero. */
#headerCta {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  /* Se va el primero al ocultarse. */
  transition: opacity 0.3s var(--ease-in-out) 0s;
}

#headerCta.visible {
  opacity: 1;
  pointer-events: auto;
  /* Y entra el último: el retardo es lo que tarda el idioma en apartarse. */
  transition: opacity 0.35s var(--ease-in-out) 0.5s;
}

/* El hover de .btn-reserve sube el botón un píxel, y aquí eso sustituiría
   al centrado. Se suman los dos. */
#headerCta:hover {
  transform: translateY(calc(-50% - 1px));
}

/* Quien prefiere menos movimiento lo ve aparecer sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  #headerCta,
  #headerCta.visible,
  .header-cta-slot,
  .nav-cta.with-cta .header-cta-slot {
    transition-delay: 0s;
  }

  .nav-cta {
    transition: none;
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  font-size: 1.5rem;
  color: var(--color-dark);
}

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

/* A ancho completo (el contenedor va por dentro) para que las fotos
   laterales se recorten en el borde de la pantalla y no antes.
   Se recorta aquí y no en el body: overflow en el body lo convierte en
   bloque contenedor de los position:fixed y el menú a pantalla completa
   se dimensionaría contra el ancho desbordado. */
.hero-section {
  padding-top: 10px;
  overflow: hidden;
}

/* Donde se soporte, solo se recorta en horizontal: así las tarjetas
   giradas del carrusel pueden asomar por arriba y por abajo. */
@supports (overflow: clip) {
  .hero-section {
    overflow-x: clip;
    overflow-y: visible;
  }
}

/* Texto a la izquierda y baraja de fotos a la derecha. El texto ya no va
   encima de la foto, así que aquí no hay velo ni nada superpuesto. */
.hero {
  display: grid;
  grid-template-columns: 1fr minmax(380px, 46%);
  align-items: center;
  gap: 48px;
  min-height: 560px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.hero-content h1 {
  margin: 0;
  color: var(--color-dark);
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hero-subtitle {
  margin: -8px 0 0;
  color: var(--color-dark);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 600;
}

/* Entradilla: da contexto antes de los datos sueltos y evita que la
   columna quede en cuatro lineas cortas con mucho aire alrededor. */
.hero-lead {
  margin: -4px 0 0;
  max-width: 46ch;
  color: var(--color-text-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ---- Insignias de nota (Booking / Airbnb) ---- */

.hero-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 8px;
  border-radius: var(--radius-md);
  /* Sin borde: un fondo un punto mas oscuro que el de la pagina basta para
     separarlas. Los SVG de marca ya traen su propio recuadro redondeado. */
  background: var(--color-tag-bg);
}

.rating-badge img {
  width: 27px;
  height: 27px;
  flex-shrink: 0;
}

.rating-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-dark);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.rating-score i {
  font-size: 0.95em;
}

/* ---- KPIs: ahora son solo datos, no pastillas pulsables ---- */

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 6px;
  margin: 6px 0 0;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 500;
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* El punto separador se dibuja aquí y no en el HTML para que no se
   seleccione al copiar el texto ni lo lea un lector de pantalla. */
.hero-meta span + span::before {
  content: "·";
  margin-right: 12px;
  color: var(--color-text-muted);
}

.hero-meta i {
  font-size: 1.15rem;
  color: var(--color-dark);
}

/* ---- Botones del hero ---- */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1.5px solid var(--color-dark);
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    transform 0.15s var(--ease);
}

.btn-hero:active {
  transform: scale(0.98);
}

.btn-hero i {
  font-size: 1.15rem;
}

.btn-hero-ghost {
  background: transparent;
  color: var(--color-dark);
}

.btn-hero-ghost:hover {
  background: var(--color-tag-bg);
}

.btn-hero-solid {
  background: var(--color-dark);
  color: #fff;
}

.btn-hero-solid:hover {
  background: #000;
  border-color: #000;
}

/* ---- Baraja de fotos ---- */

.hero-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
}

/* Sin JS se queda una sola foto, sin baraja ni flechas. */
.hero-media > img {
  width: min(340px, 78%);
  aspect-ratio: 7 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.hero-carousel {
  position: relative;
  width: min(340px, 78%);
  aspect-ratio: 7 / 10;
  touch-action: pan-y;
  /* Profundidad real: las tarjetas se ordenan por su posicion en Z, no por
     z-index. z-index no se puede animar y saltaba de golpe (se veia el
     cambio de capas en un fotograma); asi el adelantamiento es continuo. */
  perspective: 1200px;
  transform-style: preserve-3d;
}


/* Cada tarjeta se coloca por su distancia a la activa: la del centro
   recta y por delante, y las de los lados giradas y escaladas hacia
   atrás, como una baraja abierta. El transform lo pone el script. */
.hero-slide {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Constante: antes se apagaba al pasar al fondo del mazo y el cambio
     pegaba un salto. Ademas animar box-shadow es caro (repinta cada
     fotograma). Con esta medida no asoma por detras de la central. */
  box-shadow: 0 12px 28px rgba(43, 35, 24, 0.2);
  /* Suave tambien al arrancar, no solo al frenar. */
  transition:
    transform 0.7s var(--ease-in-out),
    opacity 0.7s var(--ease-in-out),
    box-shadow 0.7s var(--ease-in-out);
  backface-visibility: hidden;
}

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

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  /* Sobre fondo crema y encima de las fotos: necesita cuerpo propio o
     desaparece. Opaca y con sombra suave para despegarla de la baraja. */
  background: #ded2bf;
  color: var(--color-dark);
  font-size: 1.1rem;
  box-shadow: 0 2px 10px rgba(43, 35, 24, 0.18);
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.hero-nav:hover {
  background: var(--color-dark);
  color: #fff;
}

.hero-nav:active {
  transform: translateY(-50%) scale(0.94);
}

/* Pegadas al borde de la columna, fuera de la baraja: antes caian encima
   de las tarjetas giradas. */
.hero-nav-prev {
  left: -6px;
}

.hero-nav-next {
  right: -6px;
}

/* ---------- Descubre la casa ---------- */

.discover {
  padding-top: 96px;
  padding-bottom: 60px;
  scroll-margin-top: var(--header-height);
}

.section-title {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 24px;
}

.discover-intro,
.section-intro {
  max-width: 68ch;
  margin: 0 0 56px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text);
}

.discover-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}

.discover-nav {
  position: sticky;
  top: calc(var(--header-height) + 32px);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.discover-nav a {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.discover-nav a:hover {
  color: var(--color-text);
}

.discover-nav a .arrow {
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.discover-nav a.active {
  color: var(--color-accent);
  font-weight: 600;
}

.discover-nav a.active .arrow {
  opacity: 1;
  transform: translateX(0);
}

.discover-content {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.room {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.room-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--color-dark);
  margin-bottom: 24px;
}

.room-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.room-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.room-tags span {
  background: var(--color-tag-bg);
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.room-grid img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
  cursor: zoom-in;
  transition: opacity 0.15s ease;
}

.room-grid img:hover {
  opacity: 0.9;
}

/* ---------- Temporada de la piscina ---------- */

/* No es un detalle más entre las etiquetas: quien mira fechas en abril tiene
   que enterarse antes de reservar, no al llegar. Va en verde de acento para
   que salte por encima del resto, que son todas del mismo gris arena. */
.tag-temporada {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.tag-temporada i {
  font-size: 1rem;
}

/* Las dos reglas de abajo existen porque tanto .room-tags span como
   .service-group li span ya pintan estos huecos, y ganan por especificidad. */
.room-tags .tag-temporada {
  background: rgba(35, 107, 37, 0.12);
  color: var(--color-accent);
}

.service-group li .tag-temporada {
  /* En línea con el nombre del servicio, no debajo como los subtítulos. */
  display: inline-flex;
  margin: 0 0 0 8px;
  vertical-align: middle;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: rgba(35, 107, 37, 0.12);
  color: var(--color-accent);
  font-size: 0.78rem;
}

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

.services {
  padding-top: 36px;
  padding-bottom: 96px;
  scroll-margin-top: var(--header-height);
}

.services-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.services-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service-group {
  border: 1px solid var(--color-border);
  border-radius: 0px;
}

/* --- Opiniones --------------------------------------------------------- */

/* Subseccion de La casa: la separacion de arriba la pone ella, y abajo
   cierra el padding de .discover. */
.opiniones {
  margin-top: 64px;
  scroll-margin-top: var(--header-height);
}

/* Un escalon por debajo de .section-title: no tiene entrada en el menu, asi
   que no puede pesar lo mismo que La casa o Servicios. Va al nivel de los
   nombres de las estancias. */
.opiniones-titulo {
  margin: 0 0 20px;
  font-size: 1.35rem;
  font-weight: 700;
}

.opiniones-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Apiladas y no en tres columnas: la columna de contenido son 723px, y a
   tres quedaban tarjetas de 230px con la cita partida en seis lineas. A lo
   ancho cada cita entra en dos o tres. */
.opinion {
  margin: 0;
  padding: 20px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.opinion-texto {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
}

/* Las comillas van en ::before y ::after y no dentro del texto: asi no las
   lee dos veces el lector de pantalla ni entran en el diccionario, que
   indexa por la cita en si. Se usan las inglesas y no las latinas porque la
   misma cita se pinta tambien en ingles. */
.opinion-texto::before {
  content: "“";
}

.opinion-texto::after {
  content: "”";
}

/* Los datos del huesped van en pastilla, como las del resto de la web.
   inline-flex para que se ajuste al contenido: en bloque ocuparia todo el
   ancho de la tarjeta y dejaria una franja vacia a la derecha. */
.opinion-pie {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--color-tag-bg);
  font-size: 0.86rem;
  color: var(--color-text-soft);
}

.opinion-autor {
  font-weight: 600;
  color: var(--color-text);
}

.opinion-fuente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.opinion-fuente img {
  display: block;
}

/* La nota de Booking con su pastilla azul y el pico abajo a la izquierda,
   que es como la pintan ellos. */
.opinion-nota-booking {
  padding: 3px 7px;
  border-radius: 6px 6px 6px 0;
  background: #003b95;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
}

.opinion-estrellas {
  display: inline-flex;
  gap: 1px;
  color: var(--color-text);
  font-size: 0.9rem;
}

/* El punto separa la fecha del resto del pie, igual que en los datos de la
   portada. Va en ::before para no meter un nodo de texto suelto que luego
   habria que saltarse al traducir. */
.opinion-fecha::before {
  content: "·";
  margin-right: 12px;
  color: var(--color-text-muted);
}

/* En la pastilla de la resena el mes va entero, salvo cuando no cabe. */
.fecha-corta {
  display: none;
}

.opiniones-aviso {
  margin: 16px 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* ---------- Reservas (calendario propio, datos reales de Lodgify) ---------- */

/* El panel enmarca el bloque entero (título, entradilla y campos) en el arena
   de las etiquetas, y los campos quedan un punto más claros que el fondo de
   página: tres tonos de la misma gama, del más oscuro al más claro según se
   va hacia dentro. */
.booking-panel {
  background: var(--color-tag-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 18px rgba(43, 35, 24, 0.09);
  padding: 20px;
}

.reservas {
  position: relative;
  z-index: 2;
  padding-top: 36px;
  padding-bottom: 96px;
  /* El mismo hueco que guarda la columna pegajosa mientras lees "La casa" y
     "Servicios" (top: header + 24). Con solo la altura del header, al venir
     del boton del header el panel aterrizaba pegado y daba un respingo
     respecto a donde habia estado todo el rato. */
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* Quedo una sola columna cuando se quito la foto de la piscina, que no
   contaba nada que no contaran ya las galerias de arriba. */
.reservas-layout {
  display: grid;
  gap: 48px;
  align-items: stretch;
}

/* Ya no es una caja dentro de otra: solo apila los campos, que van a ancho
   completo del panel. Cada campo pone su propio fondo. */
.booking-card {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.booking-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cada campo es su propia caja crema a ancho completo. La de las fechas
   guarda el calendario dentro y crece al abrirlo. */
.booking-field-block {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}

.booking-field-block.is-open {
  border-color: var(--color-dark);
}

/* Rejilla en vez de columna: el rotulo y el valor se apilan a la izquierda
   y el chevron ocupa las dos filas a la derecha. */
.booking-field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.booking-field:hover {
  background: rgba(43, 35, 24, 0.04);
}

.booking-field-label {
  grid-column: 1;
  font-size: 0.78rem;
  color: var(--color-text-soft);
}

.booking-field-value {
  grid-column: 1;
  font-size: 0.98rem;
}

.booking-field-caret {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.1rem;
  color: var(--color-text-soft);
  transition: transform 0.25s var(--ease);
}

.booking-field-block.is-open .booking-field-caret {
  transform: rotate(180deg);
}

/* Verde de acento cuando ya se puede reservar: es la única acción de la
   página que termina en un pago, y así se distingue del resto de botones
   oscuros. Apagado mientras faltan fechas. */
.booking-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 13px 20px;
  border-radius: 999px;
  transition:
    background 0.15s ease,
    opacity 0.15s ease;
}

.booking-submit:hover {
  background: #1b5520;
}

.booking-submit[aria-disabled="true"] {
  background: var(--color-dark);
  opacity: 0.45;
  pointer-events: none;
}

.booking-hint {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

/* Mientras no hay nada que avisar no queda texto dentro, y como la columna
   apila con hueco, ese parrafo vacio dejaba un salto bajo el boton. */
.booking-hint:empty {
  display: none;
}

/* Sale del campo y se pone por encima de lo que tenga debajo: la columna de
   reserva se queda corta y nunca necesita scroll propio. */
.booking-popup {
  position: absolute;
  /* Se monta sobre el campo y sale por los lados mas que su radio de
     esquina (14 > 12): asi sus curvas de arriba caen ya fuera del campo y
     no dejan ver nada por el hueco que deja el redondeo. */
  top: calc(100% - 8px);
  left: -14px;
  right: -14px;
  z-index: 40;
  /* Solo entra en juego cuando ni arriba ni abajo hay hueco suficiente
     (ver placePopup en booking.js); mientras quepa no se ve nada. */
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  /* Algo mas de sombra que antes: es lo que dice que esta por encima del
     campo y no encajado con el. */
  box-shadow: 0 16px 40px rgba(43, 35, 24, 0.26);
  padding: 16px;
}

/* Y el campo deja de redondear por abajo mientras esta abierto: su curva
   arranca 12px antes del borde, o sea por encima de donde empieza el
   desplegable, y asomaba por detras. Recto, los lados bajan y desaparecen
   debajo. */
.booking-field-block.is-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.booking-field-block.is-open:has(.opens-up) {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Si por debajo del campo no cabe pero por encima sí, se abre hacia arriba,
   montandose igual sobre el borde de arriba. */
.booking-popup.opens-up {
  top: auto;
  bottom: calc(100% - 8px);
}

/* Pie comun de los dos: la accion secundaria como texto a la izquierda y
   "Aplicar" en pildora a la derecha. */
.booking-popup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.booking-popup-foot > :only-child {
  margin-left: auto;
}

.booking-popup-clear {
  padding: 8px 0;
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.booking-popup-clear:hover {
  color: var(--color-dark);
}

.booking-popup-clear[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: none;
}

.booking-popup-apply {
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: var(--color-dark);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.booking-popup-apply:hover {
  background: #000;
}

/* --- Calendario --- */

.booking-calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.booking-calendar-labels {
  display: grid;
  grid-template-columns: 1fr;
  flex: 1;
  gap: 24px;
  text-align: center;
  font-weight: 600;
}

.booking-calendar-months {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Fuera de la columna sticky (movil y tablet) no hay sitio para el segundo
   mes: se navega mes a mes con las flechas, como antes. */
#calMonth2,
#calMonthLabel2 {
  display: none;
}

.booking-cal-nav {
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.1rem;
  padding: 4px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.booking-cal-nav:hover {
  color: var(--color-dark);
}

.booking-calendar-weekdays,
.booking-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.booking-calendar-weekdays {
  margin-bottom: 4px;
  font-size: 0.72rem;
  text-align: center;
  color: var(--color-text-muted);
}

.booking-calendar-grid {
  gap: 2px;
  min-height: 190px;
}

.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  aspect-ratio: 1;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s ease;
}

.calendar-day .price {
  font-size: 0.6rem;
  color: var(--color-text-muted);
}

.calendar-day:hover:not(:disabled) {
  background: var(--color-tag-bg);
}

.calendar-day:disabled {
  color: var(--color-text-muted);
  text-decoration: line-through;
  opacity: 0.5;
  cursor: not-allowed;
}

/* El :hover de arriba tiene la misma especificidad, así que el día elegido
   repite el selector con :hover para no perder el fondo oscuro al pasar
   el ratón por encima (quedaba texto blanco sobre crema). */
.calendar-day.is-edge,
.calendar-day.is-edge:hover {
  background: var(--color-dark);
  color: #fff;
}

.calendar-day.is-edge .price {
  color: rgba(255, 255, 255, 0.75);
}

.calendar-day.is-in-range {
  background: var(--color-tag-bg);
  border-radius: 0;
}

.calendar-day-empty {
  visibility: hidden;
}

.calendar-message {
  grid-column: 1 / -1;
  align-self: center;
  text-align: center;
  padding: 24px 0;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

.booking-guest-note {
  margin: 14px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-soft);
}

.booking-guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-tag-bg);
}

.booking-guest-row:last-of-type {
  border-bottom: none;
  padding-bottom: 4px;
}

.booking-guest-copy strong {
  display: block;
  font-size: 0.92rem;
}

.booking-guest-copy span {
  font-size: 0.78rem;
  color: var(--color-text-soft);
}

.booking-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Los numeros no bailan al pasar de 9 a 10. */
.booking-stepper > span {
  min-width: 1.5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.booking-stepper button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.booking-stepper button:hover:not(:disabled) {
  background: var(--color-dark);
  color: #fff;
  border-color: var(--color-dark);
}

/* Estando siempre a la vista, el tope se cuenta apagando el boton. */
.booking-stepper button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* La última caja de cada columna absorbe el sobrante para que
   todos los bordes inferiores cierren a la misma altura. */
.services-column .service-group:last-child {
  flex: 1;
}

.service-group h3 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border);
}

.service-group h3 i {
  font-size: 1.2rem;
  color: inherit;
}

.service-group ul {
  list-style: none;
  margin: 0;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.service-group li {
  position: relative;
  padding-left: 15px;
  font-size: 0.95rem;
  line-height: 1.45;
}

.service-group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}

.service-group li span {
  display: block;
  margin-top: 3px;
  font-size: 0.83rem;
  color: var(--color-text-muted);
}

/* --- "Ver más" de cada caja --- */

/* Todo va colgado de .service-group: los estilos de .service-group li (punto,
   sangría, tamaño) tienen más peso que una clase suelta y ganarían. */
.service-group:not([data-more-open]) li.is-extra {
  display: none;
}

/* Es el último elemento de la lista (ver main.js), pero no es un servicio:
   ni punto ni sangría. */
.service-group .service-more-item {
  padding-left: 0;
}

.service-group .service-more-item::before {
  content: none;
}

.service-group .service-more {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.15s ease;
}

.service-group .service-more:hover {
  color: var(--color-dark);
}

/* Las dos etiquetas viven en el DOM y se turnan: así el cambio de idioma las
   traduce a las dos de una vez, sin que el JS tenga que saber el idioma. */
.service-group .service-more-show,
.service-group .service-more-hide {
  display: inline;
  margin: 0;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-group .service-more-hide,
.service-group .service-more[aria-expanded="true"] .service-more-show {
  display: none;
}

.service-group .service-more[aria-expanded="true"] .service-more-hide {
  display: inline;
}

.service-group .service-more-icon {
  font-size: 1rem;
  transition: transform 0.2s var(--ease);
}

.service-group .service-more[aria-expanded="true"] .service-more-icon {
  transform: rotate(180deg);
}

.service-group-excluded {
  background: var(--color-tag-bg);
}

.service-group-excluded li {
  color: var(--color-text-soft);
}

/* ---------- Estancia: contenido + reserva sticky ---------- */

/* El padding vertical sigue siendo de las secciones de dentro; del
   envoltorio solo interesa el ancho maximo y el margen lateral. */
.stay.container {
  padding-top: 0;
  padding-bottom: 0;
}

/* De "La casa" en adelante el contenido se queda en dos tercios y el tercio
   derecho lo guarda el calendario, que acompana al scroll: se pueden mirar
   fotos y servicios sin perder de vista las fechas.
   Por debajo de 1200px no hay ancho para las tres columnas (la lista de
   espacios ya ocupa una), asi que todo vuelve a apilarse y la reserva es la
   ultima seccion, como antes. */
@media (min-width: 1200px) {
  .stay {
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(320px, 1fr);
    gap: 100px;
    align-items: start;
  }

  .stay-aside {
    position: sticky;
    /* position: sticky crea contexto de apilado siempre, con z-index auto o
       sin el. Eso encierra aqui dentro el z-index del calendario, que sale
       del panel hacia abajo: por muy alto que lo pongamos, la columna
       entera pinta como una capa a la altura de sus hermanos, y "La zona"
       va despues en el HTML, asi que el mapa le ganaria. Con z-index la
       columna sube por encima y sus desplegables van con ella. */
    z-index: 1;
    top: calc(var(--header-height) + 24px);
    /* El padding-top de .discover (96px) menos el del panel, para que
       "Reserva tu estancia" y "La casa" arranquen a la misma altura. El
       padding propio lo pierde: desplazaria la columna por debajo del
       borde pegajoso en vez de separarla de el. */
    margin-top: 72px;
    padding: 0;
  }

  .booking-panel {
    padding: 24px;
  }

  /* Anclado al borde derecho y desbordando hacia la izquierda por encima
     del contenido: no depende ya del ancho de la columna. */
  /* Anclado al borde derecho y desbordando hacia la izquierda. El -5px de
     la derecha lo hereda del caso general y es el que tapa esa esquina. */
  .booking-popup-calendar {
    left: auto;
    width: 660px;
    padding: 20px;
  }

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

  #calMonth2,
  #calMonthLabel2 {
    display: block;
  }

  /* En la columna estrecha compite con el titulo de la seccion principal:
     se queda un escalon por debajo. */
  .stay-aside .section-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .stay-aside .section-intro {
    margin-bottom: 18px;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .stay-aside .reservas-layout {
    display: block;
  }

  .stay-main .discover-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 40px;
  }

  /* A dos tercios, tres fotos por fila quedaban en miniaturas: caben las que
     entren a partir de 220px, dos en pantallas normales y tres en monitores
     anchos. */
  .stay-main .room-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  /* Mismo recurso que en movil: las tres columnas se disuelven y los bloques
     fluyen en dos columnas de texto. */
  .stay-main .services-columns {
    display: block;
    columns: 2;
    column-gap: 40px;
  }

  .stay-main .services-column {
    display: contents;
  }

  .stay-main .service-group {
    break-inside: avoid;
    margin-bottom: 24px;
  }

  .stay-main .services-column .service-group:last-child {
    flex: 0 1 auto;
  }
}

/* En portatiles de poca altura los desplegables no caben enteros por debajo
   de su campo: la entradilla de la columna es lo primero que sobra, y el de
   huespedes (que cuelga mas abajo) aprieta un poco sus filas. */
@media (min-width: 1200px) and (max-height: 800px) {
  .stay-aside .section-title {
    font-size: 1.25rem;
    margin-bottom: 8px;
  }

  .stay-aside .section-intro {
    display: none;
  }

  .booking-popup-guests .booking-guest-row {
    padding: 9px 0;
  }

  .booking-popup-guests .booking-guest-note,
  .booking-popup-guests .booking-popup-foot {
    margin-top: 10px;
  }
}

/* ---------- La zona (mapa y recomendaciones) ---------- */

.zona {
  padding-top: 36px;
  padding-bottom: 96px;
  scroll-margin-top: var(--header-height);
}

.zona-mapa {
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-tag-bg);
  /* Leaflet pinta sus controles con z-index altos; este contexto propio
     evita que se cuelen por encima del header o de la barra de reserva. */
  isolation: isolate;
  z-index: 0;
}

/* Las teselas de OpenStreetMap vienen en azules y verdes saturados que
   chocan con el beige de la página. Se corrigen con un filtro sobre la capa
   de teselas: cuesta nada y no obliga a cambiar de proveedor ni a pagar uno
   con estilo propio. El círculo va en otra capa, así que conserva su verde. */
.zona-mapa .leaflet-tile-pane {
  filter: sepia(0.45) saturate(0.75) hue-rotate(-12deg) brightness(1.04) contrast(0.92);
}

.zona-nota {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* --- Recomendaciones --- */

/* Filtro por tipo de sitio. No busca nada: solo enseña uno de los grupos que
   ya están escritos en el HTML, para que la sección quepa de un vistazo en
   vez de pedir scroll. Sin JS no hace falta (se ven todos los grupos), así
   que solo aparece cuando lo hay. */
.zona-chips {
  display: none;
  align-items: flex-end;
  /* Casi pegadas: el bisel ya las separa visualmente, y con hueco se veria
     el fondo colandose entre carpeta y carpeta. */
  gap: 2px;
  margin-top: 36px;
  /* Si no caben se arrastra la fila: partirlas en dos alturas rompe la idea
     de carpetas alineadas sobre una misma hoja. */
  overflow-x: auto;
  scrollbar-width: none;
  /* overflow-x recorta tambien por abajo, y ahi es justo donde la pestana
     abierta sangra 2px para fundirse con la hoja. El relleno le hace sitio
     dentro y el margen negativo devuelve la fila a su altura, asi que el
     sangrado sobrevive al recorte. */
  padding-bottom: 2px;
  margin-bottom: -2px;
  /* Arrastrando, la fila paraba a mitad de una etiqueta. */
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}

.zona-chip {
  scroll-snap-align: start;
}

.zona-chips::-webkit-scrollbar {
  display: none;
}

.js .zona-chips {
  display: flex;
}

/* La pestana de una carpeta: redondeada arriba, recta abajo y metida 1px
   dentro de la hoja, para que el borde de esta no la corte. */
.zona-chip {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -2px;
  /* El relleno lateral cuenta con la inclinacion: unos 12 de chaflan mas
     aire suficiente para que el texto no se acerque al filo. */
  padding: 10px 26px 12px;
  border: none;
  /* El fondo lo dibujan las dos piezas de abajo, no el boton. */
  background: none;
  color: var(--color-text-soft);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}

/* Las dos mitades del trapecio. Cada una se inclina desde su base, asi que
   el borde de abajo se queda donde esta y es el de arriba el que se mete
   hacia dentro; la esquina superior lleva radio, que es lo que clip-path no
   podia hacer. */
.zona-chip::before,
.zona-chip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--color-surface);
  transform-origin: bottom;
  transition: background 0.2s var(--ease);
}

.zona-chip::before {
  left: 0;
  /* Se pasa 1px de la mitad: si las dos acaban justo en el 50% se cuela una
     linea de fondo por la junta al redondear el navegador. */
  right: calc(50% - 1px);
  border-top-left-radius: 10px;
  transform: skewX(-13deg);
}

.zona-chip::after {
  left: 50%;
  right: 0;
  border-top-right-radius: 10px;
  transform: skewX(13deg);
}

/* El contenido, por encima de las dos piezas. */
.zona-chip > * {
  position: relative;
  z-index: 1;
}

/* El icono en su circulo. El fondo es un velo oscuro y no un color fijo,
   porque detras hay dos tonos distintos (la pestana abierta y las otras) y
   asi se oscurece lo mismo sobre cualquiera de los dos. */
.zona-chip i {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: rgba(43, 35, 24, 0.08);
  font-size: 1rem;
  transition:
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.zona-chip:hover {
  color: var(--color-dark);
}

/* La de delante: mismo tono que la hoja y por encima de ella. Sin bordes
   de por medio, la pestana y su contenido son una sola mancha continua. */
.zona-chip[aria-pressed="true"] {
  z-index: 2;
  color: var(--color-dark);
  font-weight: 600;
}

.zona-chip[aria-pressed="true"]::before,
.zona-chip[aria-pressed="true"]::after {
  background: var(--color-tag-bg);
}

/* Abierta, el circulo se marca como la pastilla del menu: el mismo filo de
   papel, para que las dos cosas que dicen "estas aqui" hablen igual. */
.zona-chip[aria-pressed="true"] i {
  background: rgba(43, 35, 24, 0.11);
  box-shadow: var(--filo-papel);
  color: var(--color-accent);
}

/* Con los chips puestos, el título del grupo repetiría la etiqueta del chip
   que acabas de pulsar. Se queda solo para quien navegue sin JS. */
.js .zona-grupo-titulo {
  display: none;
}

/* La hoja de la carpeta. Sin borde: es el tono el que la separa de la
   pagina, igual que en las pestanas, y asi no hay ninguna linea que cruce
   por debajo de la que esta abierta. Va por encima de las que no tocan,
   para que queden detras. */
.js .zona-recos {
  position: relative;
  z-index: 1;
  background: var(--color-tag-bg);
  /* Arriba recta y redondeada abajo, que es como es una carpeta de verdad:
     el canto superior es donde se apoyan las pestanas. Con la esquina de
     arriba a la derecha redondeada, cualquier pestana que acabe dentro de
     esos 18px de curva se queda en el aire y deja un escalon. Y donde acaba
     depende de lo que mida la etiqueta y del idioma, asi que no hay forma
     de garantizar que caiga fuera. */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 22px;
}

/* Escritas a mano en el HTML: son las que la casa manda por mensaje a los
   huéspedes, así que se editan ahí sin tocar código. */
.zona-recos {
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin-top: 48px;
}

/* Con filtro solo se ve un grupo, y el hueco lo abre ya la fila de chips. */
/* Pegada a las pestanas: cualquier hueco aqui rompe la carpeta. */
.js .zona-recos {
  margin-top: 0;
}

.zona-grupo-titulo {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Dentro de la carpeta la lista arranca pegada: el hueco lo pone el
   relleno de la hoja. */
.js .zona-fichas {
  margin-top: 0;
}

/* Cambiar de pestana es quitar y poner display:none, que no se puede
   transicionar. Lo que si arranca solo al dejar de estar oculto es una
   animacion, y con eso basta para que el grupo nuevo entre en vez de
   aparecer de golpe. */
@keyframes carpeta-entra {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

.js .zona-grupo:not([hidden]) {
  animation: carpeta-entra 0.3s var(--ease);
}

.zona-grupo-nota {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: var(--color-text-soft);
}

.zona-fichas {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  /* Tres y no las que quepan: con cinco sitios por grupo, 3+2 reparte mejor
     que 4+1, que deja una tarjeta suelta al final de la fila. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* La tarjeta entera es el enlace, no solo el nombre. */
/* Rejilla de tres columnas: icono, texto y flecha, en vez de apilarlo todo.
   El icono ocupaba una fila entera para el solo y la ficha se estiraba sin
   necesidad; a su lado, la tarjeta pierde 50px de alto y las cinco caben de
   un vistazo. */
.zona-reco {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  /* Las fichas se estiran para igualarse con su fila. Sin esto, el alto de
     mas se reparte entre las lineas y la que no tiene descripcion deja un
     boquete entre el nombre y el sitio. */
  align-content: start;
  column-gap: 12px;
  height: 100%;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.zona-reco:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(43, 35, 24, 0.1);
}

/* El envoltorio del icono y la flecha se disuelve: los dos tienen que ser
   celdas de la rejilla de la ficha, y juntos en una fila propia es justo lo
   que la hacia alta. */
.zona-reco-cabecera {
  display: contents;
}

.zona-reco-icono {
  /* Solo las dos primeras filas (nombre y pueblo) y centrado con ellas.
     Abarcando toda la ficha, en las que llevan descripcion el icono se iba
     a media altura y no se leia con el nombre. */
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-tag-bg);
  color: var(--color-accent);
  font-size: 1.1rem;
}

.zona-reco-flecha {
  grid-column: 3;
  grid-row: 1;
  margin-top: 2px;
  font-size: 1rem;
  color: var(--color-text-muted);
  transition: color 0.2s var(--ease);
}

.zona-reco:hover .zona-reco-flecha {
  color: var(--color-dark);
}

.zona-reco-nombre,
.zona-reco-sitio,
.zona-reco-texto {
  grid-column: 2;
}

.zona-reco-nombre {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.25;
}

.zona-reco-sitio {
  margin-top: 0;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--color-text-muted);
}

.zona-reco-texto {
  margin-top: 7px;
  font-size: 0.87rem;
  line-height: 1.42;
  color: var(--color-text-soft);
}

/* ---------- Páginas legales ---------- */

/* Cabecera reducida: aquí no hay secciones que recorrer, solo volver. */
.legal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* En las paginas legales la cabecera solo lleva el logo, la vuelta y el
   idioma: los dos ultimos van juntos al otro extremo. */
.legal-nav-fin {
  display: flex;
  align-items: center;
  gap: 18px;
}

.legal-volver {
  font-size: 0.92rem;
  color: var(--color-text-soft);
  transition: color 0.15s ease;
}

.legal-volver:hover {
  color: var(--color-dark);
}

.legal {
  display: block;
  max-width: 760px; /* una medida de lectura, no todo el ancho */
  padding-top: 56px;
  padding-bottom: 80px;
}

.legal h1 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 28px;
}

.legal h2 {
  margin: 40px 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.legal p,
.legal li {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--color-text);
}

.legal p {
  margin: 0 0 14px;
}

.legal ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.legal li {
  margin-bottom: 8px;
}

.legal-intro {
  font-size: 1.05rem;
  color: var(--color-text-soft);
}

.legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ficha de datos: etiqueta a la izquierda y valor a la derecha. */
.legal-datos {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 8px 20px;
  margin: 0 0 14px;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.legal-datos dt {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.legal-datos dd {
  margin: 0;
  font-size: 0.95rem;
  word-break: break-word;
}


@media (max-width: 720px) {
  .legal-datos {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .legal-datos dd {
    margin-bottom: 10px;
  }
}

/* ---------- Pie de página ---------- */

/* De lado a lado y un punto más oscuro que la página: con eso basta para que
   se lea como un cierre, sin necesidad de una línea que lo separe. */
.site-footer {
  position: relative;
  margin-top: 40px;
  background: var(--color-tag-bg);
  overflow: hidden;
}

.footer-contenido {
  position: relative; /* por encima de la marca de agua */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-top: 56px;
  padding-bottom: 36px;
}

.footer-copy {
  margin: 0 0 10px;
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
}

.footer-email {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: opacity 0.15s var(--ease);
}

.footer-email:hover {
  opacity: 0.7;
}

.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}

.footer-legal a {
  font-size: 0.92rem;
  color: var(--color-text-soft);
  transition: color 0.15s ease;
}

.footer-legal a:hover {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-pie {
  position: relative;
  padding-top: 18px;
  padding-bottom: 28px;
  border-top: 1px solid rgba(98, 83, 59, 0.2);
}

.footer-pie p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* ---------- Animación ---------- */

/* El cambio de idioma reescribe el texto en sitio: sin un fundido de por
   medio el salto pasa desapercibido. */
body.lang-switching {
  opacity: 0.25;
}

/* La clase js la pone un script en el <head>: sin JS nada se oculta. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* La entrada va en el contenedor, no en el carrusel. Con fill:both la
   animacion se queda aplicada para siempre, y eso promociona al carrusel a
   capa compositada, que aplana el contexto 3D de las tarjetas: dejaban de
   ordenarse por profundidad y se pintaban en orden del DOM. */
.js .hero-media {
  animation: hero-in 1.1s var(--ease) both;
}

.js .hero-content > * {
  animation: rise-in 0.7s var(--ease) both;
  animation-delay: 0.15s;
}

.js .hero-content > *:nth-child(2) {
  animation-delay: 0.28s;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.nav-links a,
.discover-nav a,
.room-tags span,
.service-group li {
  transition:
    color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.room-grid img {
  transition:
    opacity 0.25s var(--ease),
    transform 0.35s var(--ease);
}

.room-grid img:active {
  transform: scale(0.99);
}

/* Quien pida menos movimiento no recibe ninguno. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Acordeón (solo móvil) ---------- */

.room-toggle,
.service-toggle-icon {
  display: none;
}

.service-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  /* los botones no heredan estas dos, y `font` no las cubre */
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: default;
}

/* ---------- Barra de reserva (solo móvil) ---------- */

/* A ancho completo y pegada abajo en vez de pastilla flotante: es la única
   llamada a la acción del móvil, así que se lee como tal y no como un añadido
   que tapa una esquina. Se esconde sola al llegar a la sección de reserva. */
.booking-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  /* El inset de abajo es por la barra del navegador en iOS. */
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(243, 236, 225, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(98, 83, 59, 0.18);
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.booking-bar.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.booking-bar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--color-dark);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s var(--ease);
}

.booking-bar-cta:active {
  transform: scale(0.98);
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 16, 12, 0.94);
  padding: 56px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.28s var(--ease),
    visibility 0s 0.28s;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.28s var(--ease),
    visibility 0s;
}

.lightbox-figure {
  transform: scale(0.98);
  transition: transform 0.28s var(--ease);
}

.lightbox.open .lightbox-figure {
  transform: none;
}

.lightbox-figure {
  margin: 0;
  width: fit-content;
  max-width: 100%;
}

.lightbox-caption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

.lightbox-count {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.lightbox img {
  max-width: 100%;
  max-height: calc(88vh - 34px);
  width: auto;
  border-radius: var(--radius-md);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox-prev {
  left: 28px;
}

.lightbox-next {
  right: 28px;
}

/* ---------- Responsive ---------- */

/* La cabecera horizontal necesita 986px para no partir los enlaces en dos
   líneas (son 354px a cada lado de un logo centrado de 198). Por debajo, y
   hasta el móvil, se usa la misma hamburguesa: es el mismo problema. */
@media (max-width: 1199px) {
  .nav {
    grid-template-columns: 1fr auto 1fr;
  }

  /* Al disolverse .nav-cta, el hueco reservado para el CTA del header se
     convertía en una celda más del nav y empujaba el idioma hacia el logo.
     Aquí ese botón no existe: la llamada a la acción está en la portada y,
     en móvil, en la barra de abajo. */
  .header-cta-slot {
    display: none;
  }

  /* Y sin ese botón deslizándose, el recorte que lo tapaba tampoco hace
     falta: quitarlo es lo que garantiza que el desplegable de idioma pueda
     salirse del header sin que nadie lo corte por abajo. */
  .site-header {
    overflow: visible;
  }

  .nav-cta {
    display: contents;
  }

  /* La fila explícita es necesaria: la colocación automática va en orden
     del DOM y el logo (columna 2) va antes que la hamburguesa (columna 1),
     que si no se iría a una segunda fila. */
  .nav-toggle {
    grid-area: 1 / 1;
    justify-self: start;
  }

  .logo {
    grid-area: 1 / 2;
  }

  /* La celda es .lang (el envoltorio), no el botón: colocando el botón no
     pasaba nada y se quedaba al principio de una columna 1fr, o sea a media
     distancia entre el logo y el borde. */
  .lang {
    grid-area: 1 / 3;
    justify-self: end;
  }

  /* El menú desplegado es hermano de estos dentro del header, así que hay
     que levantarlos por encima de su z-index para que no los tape. Se
     levanta .lang entero y no solo su botón: el desplegable de idioma cuelga
     de él, y sin z-index propio se quedaba por debajo del menú (que es
     z-index 90) y por debajo de las fotos de la portada, que al ir con
     transformación 3D se pintan en su propia capa. */
  .nav-toggle,
  .lang,
  .logo {
    position: relative;
    z-index: 101;
  }

  .lang-toggle {
    width: 36px;
    height: 36px;
  }

  /* La pastilla que se desliza no tiene sentido en una columna a pantalla
     completa, pero el marcador sí es el mismo: el activo lleva su pastilla,
     con el mismo filo que en escritorio. */
  .nav-pill {
    display: none;
  }

  .nav-links a.active {
    background: var(--color-tag-bg);
    box-shadow: var(--filo-papel);
  }

  /* Menú a pantalla completa. Queda por debajo del header (z-index 100)
     para que el logo y la X sigan accesibles encima. */
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--color-bg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* El menu cubre la pantalla entera, pero los 84px de arriba los tapa el
       header (logo y aspa, que van por encima). Centrando contra todo el
       alto, el unico hueco de verdad vacio quedaba abajo y el menu se leia
       alto: el relleno superior lo centra en el espacio que se ve libre. */
    padding: var(--header-height) 20px 20px;
    gap: 18px;
    transform: translateY(-100%);
    transition: transform 0.42s var(--ease);
  }

  .nav-links.open {
    transform: none;
  }

  .nav-links a {
    padding: 9px 20px;
    font-size: 1.15rem;
    font-weight: 600;
  }

  .nav-links li {
    opacity: 0;
    transform: translateY(-10px);
    transition:
      opacity 0.3s var(--ease),
      transform 0.3s var(--ease);
  }

  .nav-links.open li {
    opacity: 1;
    transform: none;
  }

  .nav-mobile-cta {
    margin-top: 10px;
  }

  .nav-links.open li:nth-child(1) {
    transition-delay: 0.14s;
  }
  .nav-links.open li:nth-child(2) {
    transition-delay: 0.19s;
  }
  .nav-links.open li:nth-child(3) {
    transition-delay: 0.24s;
  }
  .nav-links.open li:nth-child(4) {
    transition-delay: 0.29s;
  }
  .nav-links.open li:nth-child(5) {
    transition-delay: 0.36s;
  }

  /* En móvil el contenedor de acciones solo lleva idioma y hamburguesa:
     reservar vive en el botón flotante. */
  .nav-cta .btn-reserve,
  .header-cta-slot {
    display: none;
  }

  .nav-mobile-cta {
    display: block;
    margin-top: 10px;
  }

  /* .nav-links a le ganaba en especificidad y pintaba el texto en marrón
     oscuro sobre fondo casi negro. */
  .nav-links a.btn-reserve {
    color: #fff;
    font-size: 0.95rem;
    padding: 12px 24px;
  }

  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 101;
  }

  .logo img {
    height: 22px;
  }
}

@media (max-width: 1199px) {
  .discover-layout {
    grid-template-columns: 1fr;
  }

  .discover-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
  }

  /* Misma portada que en móvil: manda la foto y los datos van detrás. La
     baraja es hermana de .hero-content, así que este se disuelve para poder
     ordenarlos a todos en una sola columna. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-height: 0;
    padding-top: 16px;
    text-align: center;
  }

  .hero-content {
    display: contents;
  }

  .hero-media {
    order: 1;
    min-height: 0;
    width: 100%;
    margin-bottom: 4px;
  }

  .hero-carousel,
  .hero-media > img {
    width: min(360px, 56%);
    aspect-ratio: 1;
  }

  .hero h1 {
    order: 2;
    margin-top: 10px;
  }

  .hero-subtitle {
    order: 3;
    margin-top: -2px;
  }

  .hero-ratings {
    order: 4;
    margin-top: 10px;
    justify-content: center;
  }

  /* En una sola fila de cuatro, que aquí sí caben, separadas por una línea
     fina y enmarcadas como en móvil. */
  .hero-meta {
    order: 5;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: min(640px, 82%);
    margin: 6px 0 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: 0.88rem;
  }

  .hero-meta span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 6px;
    white-space: nowrap;
  }

  .hero-meta span:not(:last-child) {
    border-right: 1px solid var(--color-tag-bg);
  }

  .hero-meta i {
    font-size: 1rem;
  }

  /* El punto separador sobraba en cuanto cada dato tiene su casilla. */
  .hero-meta span + span::before {
    content: none;
  }

  .hero-lead {
    order: 6;
    max-width: 54ch;
  }

  .hero-actions {
    order: 7;
    width: min(560px, 100%);
  }

  .hero-actions .btn-hero {
    flex: 1;
  }

  /* El panel se disuelve para que el título quede al nivel de "La casa" y
     "Servicios", y el marco pasa a los campos. Sin la foto, además, se le
     pone una medida cómoda en vez de estirarlos de lado a lado. */
  .booking-panel {
    display: contents;
  }

  .reservas-layout {
    display: block;
    max-width: 560px;
    background: var(--color-tag-bg);
    border-radius: var(--radius-lg);
    padding: 20px;
  }

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

  /* Con 3 contenedores de columna, un grid de 2 dejaría medio ancho vacío:
     se disuelven con display:contents y los bloques vuelven a fluir. */
  .services-columns {
    display: block;
    columns: 2;
    column-gap: 40px;
  }

  .services-column {
    display: contents;
  }

  .service-group {
    break-inside: avoid;
    margin-bottom: 24px;
  }

  .services-column .service-group:last-child {
    flex: 0 1 auto;
  }
}

@media (max-width: 720px) {
  .container {
    padding: 20px;
  }

  /* --- Portada --- */

  /* En móvil manda la foto: entra la primera y pegada al header, que ya
     tiene su propio aire. .hero-content se disuelve para poder ordenar a sus
     hijos y a la baraja (que es hermana suya, no hija) en una columna. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Poco hueco de base y aire extra solo donde cambia el bloque (ver los
       márgenes de abajo): así el título y su subtítulo se leen como una
       pieza, y los datos como otra. */
    gap: 8px;
    padding-top: 0;
  }

  /* Los tres paddings que separaban la baraja del header: el de la sección,
     el del contenedor y el del propio hero. */
  .hero-section,
  .hero-section > .container {
    padding-top: 0;
  }

  .hero-content {
    display: contents;
  }

  .hero-media {
    order: 1;
    width: 100%;
    margin: 0 0 2px;
  }

  .hero h1 {
    order: 2;
    margin-top: 14px;
    font-size: 1.55rem;
  }

  .hero-subtitle {
    order: 3;
    margin-top: -2px;
    font-size: 0.95rem;
  }

  .hero-ratings {
    order: 4;
    margin-top: 14px;
    gap: 10px;
  }

  /* Sueltos en dos filas de anchos distintos quedaban descolocados: caja
     propia, dos columnas iguales alineadas con la foto y una línea fina
     entre celdas. */
  .hero-meta {
    order: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: min(320px, 84%);
    margin: 14px 0 0;
    font-size: 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .hero-meta span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 6px;
  }

  .hero-meta i {
    font-size: 1rem;
  }

  .hero-meta span {
    border-right: none;
  }

  .hero-meta span:nth-child(-n + 2) {
    border-bottom: 1px solid var(--color-tag-bg);
  }

  .hero-meta span:nth-child(odd) {
    border-right: 1px solid var(--color-tag-bg);
  }

  /* La entradilla repite lo que cuenta "La casa" justo debajo. */
  .hero-lead {
    display: none;
  }

  /* Cuadrada y sin flechas: se pasa con el dedo. El ancho sale de conservar
     el alto que tenía apaisada (84% / 1,25 = 67%, y 320 / 1,25 = 256), así
     que vuelve al formato cuadrado sin comerse ni un píxel más de pantalla. */
  .hero-carousel,
  .hero-media > img {
    width: min(256px, 67%);
    aspect-ratio: 1;
  }

  .hero-nav {
    display: none;
  }

  /* La barra fija de abajo ya es la llamada a la acción: estos dos botones
     eran el mismo destino repetido. */
  .hero-actions {
    display: none;
  }

  /* display:contents disuelve .nav-cta para poder repartir hamburguesa,
     logo e idioma en tres columnas del propio nav. */
  .lightbox {
    padding: 20px;
  }

  .lightbox-prev {
    left: 12px;
  }

  .lightbox-next {
    right: 12px;
  }

  .discover {
    padding-top: 56px;
    padding-bottom: 40px;
  }

  /* Mismo hueco que deja "La casa": así los tres saltos de sección miden
     igual (40 de abajo + 36 del siguiente). */
  .services {
    padding-bottom: 40px;
  }

  .reservas {
    padding-bottom: 48px;
  }

  .services-columns {
    columns: 1;
  }

  .room-grid {
    grid-template-columns: 1fr;
  }

  /* --- Acordeón de espacios --- */

  .discover-nav {
    display: none;
  }

  .discover-content {
    gap: 0;
  }

  /* 0fr -> 1fr permite transicionar una altura automática, cosa que
     display:none o height:auto no admiten. Especificidad .js .room para
     ganar a .js .reveal, que si no pisaría este transition. */
  /* La altura cambia de golpe a propósito: animarla mientras se corrige
     el scroll producía tirones. El contenido entra con un fundido. */
  .js .room {
    display: grid;
    grid-template-rows: auto 0fr;
    transition:
      opacity 0.5s var(--ease),
      transform 0.5s var(--ease);
  }

  .js .room[data-open] {
    grid-template-rows: auto 1fr;
  }

  .room {
    border-bottom: 1px solid var(--color-border);
  }

  .room:first-child {
    border-top: 1px solid var(--color-border);
  }

  .room-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px 0;
    background: none;
    border: none;
    font: inherit;
    color: var(--color-dark);
    text-align: left;
    cursor: pointer;
  }

  .room-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
  }

  .room-toggle-name {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .room-toggle-icon {
    font-size: 1.25rem;
    color: var(--color-text-soft);
    transition: transform 0.2s ease;
  }

  .room-toggle[aria-expanded="true"] .room-toggle-icon {
    transform: rotate(45deg);
  }

  .room-panel {
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition:
      visibility 0s 0.2s,
      opacity 0.2s var(--ease);
  }

  .room[data-open] .room-panel {
    visibility: visible;
    opacity: 1;
    transition:
      visibility 0s,
      opacity 0.3s var(--ease) 0.05s;
  }

  /* El padding va dentro: en la fila a 0fr no debe ocupar alto. */
  .room-grid {
    padding-bottom: 20px;
  }

  /* El nombre ya está en el botón: en el panel solo quedan los tags. */
  .room-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 14px;
  }

  .room-header h3 {
    display: none;
  }

  /* --- Acordeón de servicios --- */

  .service-group {
    margin-bottom: 12px;
  }

  .service-toggle {
    cursor: pointer;
  }

  .service-toggle span {
    flex: 1;
  }

  .service-toggle-icon {
    display: block;
    font-size: 1.15rem;
    color: var(--color-text-soft);
    transition: transform 0.2s ease;
  }

  .service-toggle[aria-expanded="true"] .service-toggle-icon {
    transform: rotate(45deg);
  }

  .js .service-group {
    display: grid;
    grid-template-rows: auto 0fr;
    transition:
      opacity 0.5s var(--ease),
      transform 0.5s var(--ease);
  }

  .js .service-group[data-open] {
    grid-template-rows: auto 1fr;
  }

  .service-group h3 {
    border-bottom: none;
  }

  .service-group[data-open] h3 {
    border-bottom: 1px solid var(--color-border);
  }

  .service-group ul {
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition:
      visibility 0s 0.2s,
      opacity 0.2s var(--ease);
  }

  .service-group[data-open] ul {
    visibility: visible;
    opacity: 1;
    transition:
      visibility 0s,
      opacity 0.3s var(--ease) 0.05s;
  }

  /* Aqui el grupo ya es un acordeon: desplegarlo y encontrarte dentro con
     otro "ver mas" son dos pulsaciones para la misma cosa. Con la primera
     sale la lista entera. Se repite el selector que las esconde en vez de
     escribir uno mas corto, que perderia por especificidad. */
  .service-group:not([data-more-open]) li.is-extra {
    display: block;
  }

  .service-group .service-more-item {
    display: none;
  }

  /* --- Idioma --- */

  /* Hacia abajo y pegado al borde: saliendo hacia la izquierda se cruzaba
     con el logo cada vez que se abría. */
  /* Colgando del boton, pero con cuerpo propio: a la anchura justa del
     boton (36px) y con las opciones a 28, el desplegable salia tan
     estrecho que no se leia como un menu. */
  .lang-options {
    top: calc(100% + 8px);
    right: 0;
    margin-right: 0;
    flex-direction: column;
    gap: 3px;
    width: 54px;
    height: auto;
    padding: 5px;
    /* Es tag-bg sobre bg: dos tonos muy proximos, y abierto sobre la propia
       cabecera se perdia. El borde es lo que lo recorta de verdad; la
       sombra sola no llegaba. */
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(43, 35, 24, 0.22);
    transform: translateY(-8px);
  }

  .lang-option {
    justify-content: center;
    width: 100%;
    height: 36px;
    padding: 0;
    border-radius: 15px;
    font-size: 0.82rem;
  }

  .lang.open .lang-options {
    transform: translateY(0);
  }

  /* --- Reserva --- */

  .reservas-layout {
    padding: 16px;
  }

  /* --- Tamaños --- */

  /* Un punto más pequeño todo y más aire entre bloques: en una pantalla
     estrecha el tamaño no da jerarquía, la da el espacio. */
  .section-title {
    font-size: 1.5rem;
    margin-bottom: 14px;
  }

  .discover-intro,
  .section-intro {
    margin-bottom: 32px;
    font-size: 0.98rem;
    line-height: 1.7;
  }

  .rating-badge {
    gap: 8px;
    padding: 5px 14px 5px 6px;
  }

  .rating-badge img {
    width: 22px;
    height: 22px;
  }

  .rating-score {
    font-size: 0.92rem;
  }

  /* --- La zona --- */

  .zona-mapa {
    height: 300px;
  }

  .zona-fichas {
    grid-template-columns: 1fr;
  }

  .opinion {
    padding: 16px 18px;
  }

  .opinion-texto {
    font-size: 0.98rem;
  }

  .opinion-pie {
    gap: 9px;
    padding: 5px 11px;
    font-size: 0.84rem;
  }

  /* A 390px, "septiembre de 2026" desbordaba la pastilla. */
  .fecha-larga {
    display: none;
  }

  .fecha-corta {
    display: inline;
  }


  .zona-chip {
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  .zona-recos {
    gap: 36px;
    margin-top: 36px;
  }

  /* --- Pie de página --- */

  .footer-contenido {
    flex-direction: column;
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 28px;
  }

  .footer-legal {
    align-items: flex-start;
    text-align: left;
  }

  /* --- Barra de reserva --- */

  .booking-bar {
    display: block;
    padding: 8px 20px max(8px, env(safe-area-inset-bottom, 0px));
  }

  .booking-bar-cta {
    padding: 12px 20px;
    font-size: 0.9rem;
  }

  body {
    padding-bottom: 78px;
  }
}

/* ==========================================================================
   Aviso de cookies
   ========================================================================== */

/* Una tarjeta en la esquina, no una cortina: la web se puede seguir mirando
   sin contestar. Por encima de la barra de reserva del movil (110) y por
   debajo del lightbox (200). */
.cookies {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 150;
  width: min(400px, calc(100vw - 48px));
  padding: 20px 22px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid rgba(98, 83, 59, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(43, 35, 24, 0.18);
  animation: cookies-entra 0.3s var(--ease);
}

@keyframes cookies-entra {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.cookies-titulo {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--color-dark);
}

.cookies-texto {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-soft);
}

.cookies-texto a {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Los dos botones iguales: rechazar no puede costar mas que aceptar. */
.cookies-botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cookies-boton,
.legal-boton {
  padding: 10px 18px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-dark);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cookies-boton:hover,
.legal-boton:hover {
  background: #000;
}

.cookies-boton:focus-visible,
.legal-boton:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .cookies {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    width: auto;
    padding: 18px;
  }
}

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