/* ═══════════════════════════════════════════════════════════════
   HERO "Galería viva" + tipografía nueva de todo el sitio
   Se carga DESPUÉS de landing.css y pisa sus dos variables de fuente.
     Titulares  Melodrama — display serif de alto contraste, elegida por el cliente
                entre 32 candidatas probadas en el hero real.
     Textos     Poppins
   El hero es una galería: la foto cambia sola cada 6 s y con el raíl
   de miniaturas de la derecha.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --display: "Melodrama", "Poppins", Georgia, serif;
  --body: "Poppins", system-ui, sans-serif;
  --vh-ease: cubic-bezier(.16,1,.3,1);
  /* La tinta se venía escribiendo a mano como #16150f por todo el archivo.
     Ahora tiene nombre. Sin esta línea, cada var(--tinta) se descartaba en
     silencio y el elemento se quedaba con su valor por defecto: así es
     como el enlace de la tira del lugar acababa saliendo en azul. */
  --tinta: #16150f;
}

/* Poppins pesa más que Jost en vertical: se recalibran los titulares
   del resto de la página para que no crezcan de golpe. */
:root {
  --t-hero: clamp(2.9rem, 7vw, 6.2rem);
  --t-h2:   clamp(2.1rem, 4.6vw, 3.9rem);
  --t-h3:   clamp(1.4rem, 2.2vw, 1.8rem);
  --t-lede: clamp(1.1rem, 2vw, 1.55rem);
}
h1, h2, h3, .note__title { letter-spacing: -.015em; }

/* ── El bloque ── */
.vh { position: relative; height: 100svh; min-height: 600px; overflow: hidden;
  isolation: isolate; background: var(--night); color: #fff;
  display: flex; flex-direction: column;
  padding: 0 clamp(20px,4vw,54px) clamp(24px,4vh,44px); }

/* ── Capa de fotos que se cruzan ── */
.vh__stack { position: absolute; inset: 0; z-index: -2; }
.vh__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  filter: saturate(1.12) contrast(1.04) brightness(1.02);
  transition: opacity 1.2s var(--vh-ease), transform 7s linear; }
.vh__img.is-on { opacity: 1; transform: scale(1.14); }

.vh__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,8,6,.6) 0%, rgba(6,8,6,.06) 30%,
                            rgba(6,8,6,.52) 72%, rgba(6,8,6,.88) 100%),
    linear-gradient(90deg, rgba(6,8,6,.5) 0%, transparent 46%); }

/* ── Nav ── */
.vh__nav { position: relative; z-index: 3; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; padding: 26px 0; }
.vh__brand { display: inline-flex; align-items: baseline; gap: 9px;
  font-family: var(--display); font-weight: 500; font-size: 1.06rem;
  letter-spacing: -.02em; color: #fff; text-decoration: none; }
.vh__links { display: flex; gap: 28px; }
.vh__links a { position: relative; font-size: .74rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  text-decoration: none; opacity: .78; transition: opacity .3s; }
.vh__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--vh-ease); }
.vh__links a:hover { opacity: 1; }
.vh__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.vh__navcta { border: 1px solid rgba(255,255,255,.34); border-radius: 999px;
  padding: 11px 22px; font-size: .68rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; text-decoration: none;
  backdrop-filter: blur(8px); transition: background .3s, color .3s, border-color .3s; }
.vh__navcta:hover { background: #fff; color: var(--night); border-color: #fff; }

/* ── Texto ── */
/* en rem, no en ch: el "ch" se calcula sobre Poppins a 16 px y dejaba el
   bloque en 197 px, partiendo el titular en pedazos */
.vh__body { position: relative; z-index: 3; margin-top: auto; max-width: 36rem; }
.vh__kick { font-size: .64rem; font-weight: 400; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(255,255,255,.66); }
/* 5,2vw y no 7,6: Clash Display es más ancha que la anterior y a 7,6vw
   se comía media pantalla. Máximo 4,8rem ≈ 77 px. */
.vh__h { font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem,5.6vw,5.2rem); line-height: 1.04; letter-spacing: -.018em;
  margin: 16px 0 0; text-shadow: 0 4px 50px rgba(0,0,0,.45); }
/* el contorno hueco en una palabra se retiró: partía el titular en dos
   texturas y restaba en vez de sumar. Ahora va macizo y de una pieza. */
.vh__sub { margin-top: 20px; max-width: 34ch; font-size: .95rem; font-weight: 300;
  line-height: 1.65; color: rgba(255,255,255,.8); }

.vh__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.vh__cta { display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--night); border-radius: 999px;
  padding: 15px 30px; font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  transition: transform .3s var(--vh-ease), background .3s; }
.vh__cta:hover { transform: translateY(-2px); background: #ece9e2; }
.vh__alt { font-size: .72rem; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.78); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 3px;
  transition: color .3s, border-color .3s; }
.vh__alt:hover { color: #fff; border-color: #fff; }

/* ── Raíl de miniaturas ── */
.vh__rail { position: absolute; z-index: 3; right: clamp(20px,4vw,54px); top: 50%;
  translate: 0 -50%; display: grid; gap: 12px; }
.vh__t { width: clamp(52px,5vw,74px); aspect-ratio: 3/4; padding: 0;
  border: 0; border-radius: 3px; overflow: hidden; cursor: pointer;
  background: none; opacity: .42; filter: grayscale(1);
  outline-offset: 3px;
  transition: opacity .45s var(--vh-ease), filter .45s var(--vh-ease),
              transform .45s var(--vh-ease); }
.vh__t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vh__t:hover { opacity: .8; filter: grayscale(.3); transform: translateX(-4px); }
.vh__t.is-on { opacity: 1; filter: none; transform: translateX(-8px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.85), 0 16px 34px -18px rgba(0,0,0,.8); }
.vh__t:focus-visible { outline: 2px solid #fff; }

/* ── Pie: título de la foto + contador ── */
.vh__meta { position: relative; z-index: 3; display: flex; align-items: baseline;
  justify-content: space-between; gap: 16px; margin-top: clamp(22px,4vh,40px);
  padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18);
  font-size: .62rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.62); }
.vh__cap { transition: opacity .35s; }
.vh__num b { color: #fff; font-weight: 500; }

/* ── Entrada ── */
@keyframes vhUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
@keyframes vhFade { from { opacity: 0 } to { opacity: 1 } }
.vh__nav  { animation: vhFade 1s .05s both; }
.vh__kick { animation: vhUp .9s .18s both var(--vh-ease); }
.vh__h    { animation: vhUp 1.05s .28s both var(--vh-ease); }
.vh__sub  { animation: vhUp .95s .46s both var(--vh-ease); }
.vh__acts { animation: vhUp .95s .58s both var(--vh-ease); }
.vh__meta { animation: vhUp .9s .7s both var(--vh-ease); }
.vh__rail { animation: vhFade 1.1s .8s both; }

/* ── Móvil: el raíl pasa abajo, en horizontal ── */
@media (max-width: 900px) {
  .vh__links { display: none; }
  .vh__body { max-width: none; }
  .vh__rail { position: static; translate: none; display: flex; gap: 9px;
    margin-top: 22px; }
  .vh__t { width: 54px; transform: none !important; }
  .vh__t.is-on { box-shadow: 0 0 0 1px rgba(255,255,255,.85); }
  .vh__meta { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .vh__img { transition: opacity .01ms; transform: none !important; }
  .vh__nav, .vh__kick, .vh__h, .vh__sub, .vh__acts, .vh__meta, .vh__rail { animation: none; }
  .vh__t, .vh__cta { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LOS DOS ALOJAMIENTOS — bloque nuevo bajo el hero.
   Era el hueco principal de la home: no se distinguían las dos casas.
   ═══════════════════════════════════════════════════════════════ */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  background: var(--night); }
.dos__c { position: relative; display: block; overflow: hidden;
  min-height: clamp(420px, 66vh, 660px); color: #fff; text-decoration: none; }

.dos__ph { position: absolute; inset: 0; display: block; }
.dos__ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
  filter: saturate(.92) brightness(.72);
  transition: transform 1.1s var(--vh-ease), filter .7s var(--vh-ease); }
.dos__veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,10,8,.34) 0%, rgba(8,10,8,.08) 34%,
                                      rgba(8,10,8,.62) 78%, rgba(8,10,8,.9) 100%);
  transition: opacity .6s; }

.dos__in { position: absolute; inset: auto 0 0 0; display: grid; gap: 8px;
  padding: clamp(24px,3.4vw,44px); }
.dos__idx { font-family: var(--display); font-weight: 400; font-size: .82rem;
  letter-spacing: .2em; color: rgba(255,255,255,.66); }
.dos__name { font-family: var(--display); font-weight: 500;
  font-size: clamp(1.8rem,3.1vw,2.8rem); line-height: 1.06; letter-spacing: -.015em; }
.dos__place { font-size: .78rem; font-weight: 300; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.72); }
.dos__specs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin-top: 6px; font-size: .82rem; font-weight: 300; color: rgba(255,255,255,.82); }
.dos__specs b { font-weight: 500; }
.dos__specs i { width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,.4); display: inline-block; }

.dos__go { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px;
  font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.dos__go svg { transition: transform .45s var(--vh-ease); }

/* hover: la foto se acerca y se aclara, la flecha avanza */
.dos__c:hover .dos__ph img { transform: scale(1.09); filter: saturate(1) brightness(.85); }
.dos__c:hover .dos__veil { opacity: .82; }
.dos__c:hover .dos__go svg { transform: translateX(7px); }
.dos__c:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

@media (max-width: 780px) {
  .dos { grid-template-columns: 1fr; }
  .dos__c { min-height: 58vh; }
}
@media (prefers-reduced-motion: reduce) {
  .dos__ph img, .dos__go svg, .dos__veil { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ANULACIÓN DEL REVELADO ANTIGUO
   landing.css hacía `[data-reveal] { opacity: 0 }` y esperaba a que un
   IntersectionObserver añadiera .in. Si ese observador no salta —navegador
   raro, scroll programático, pestaña en segundo plano— el bloque NO SE VE
   NUNCA. Se detectaron 20 bloques invisibles con la página entera recorrida:
   el texto de intro, las cifras, las descripciones de las casas y las tiras
   de fotos. En una web de reservas eso es contenido perdido.
   A partir de aquí el contenido nace VISIBLE y quien anima es anim.js, que
   usa immediateRender:false y nunca puede dejar nada oculto.
   ═══════════════════════════════════════════════════════════════ */
[data-reveal], [data-reveal].in {
  opacity: 1 !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   MARCA — arco con horizonte y sol
   El arco viene de las arcadas de piedra del propio edificio (la foto del
   hero) y a la vez lee como puerta. Dentro, la línea del horizonte y el sol:
   "entre el mar y la montaña", que es el claim que ya usaba la web.
   Geometría simple para que aguante a 22 px en la cabecera.
   ═══════════════════════════════════════════════════════════════ */
.mark { width: 30px; height: 30px; flex: none; stroke-linejoin: round; }
.vh__brand { display: inline-flex; align-items: center; gap: 12px; }
.vh__brandtxt { display: grid; gap: 2px; line-height: 1.15;
  font-family: var(--display); font-weight: 500; font-size: 1rem; letter-spacing: -.02em; }
.vh__brandtxt i { font-family: var(--body); font-style: normal; font-weight: 300;
  font-size: .54rem; letter-spacing: .24em; text-transform: uppercase; opacity: .6; }

/* ═══════════════════════════════════════════════════════════════
   INTRO — el arco se dibuja y el telón sube
   Todo con animation CSS y fill forwards: termina sola pase lo que pase.
   Sin JS de por medio, así que no puede quedarse tapando la web.
   ═══════════════════════════════════════════════════════════════ */
.intro { position: fixed; inset: 0; z-index: 9999; display: grid;
  place-items: center; align-content: center; gap: 22px;
  background: var(--night); color: #fff;
  animation: introSube .9s 1.85s cubic-bezier(.76,0,.24,1) forwards; }
@keyframes introSube {
  to { transform: translateY(-101%); visibility: hidden; }
}
.intro__mark { width: 74px; height: 74px; }
/* pathLength normaliza el trazo a 1: así el dibujado no depende de la longitud real */
.intro__arc, .intro__hz, .intro__sun {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: dibuja .95s cubic-bezier(.5,0,.2,1) forwards; }
.intro__arc { animation-delay: .12s; }
.intro__hz  { animation-delay: .5s; }
.intro__sun { animation-delay: .68s; }
@keyframes dibuja { to { stroke-dashoffset: 0 } }

.intro__w { font-family: var(--display); font-weight: 500; font-size: .82rem;
  letter-spacing: .34em; text-transform: uppercase;
  opacity: 0; animation: introTexto .8s .95s forwards; }
@keyframes introTexto { to { opacity: .82 } }

/* El hero espera a que suba el telón para entrar */
.vh__nav  { animation-delay: 2.25s; }
.vh__kick { animation-delay: 2.38s; }
.vh__h    { animation-delay: 2.48s; }
.vh__sub  { animation-delay: 2.66s; }
.vh__acts { animation-delay: 2.78s; }
.vh__meta { animation-delay: 2.9s; }
.vh__rail { animation-delay: 3s; }

@media (prefers-reduced-motion: reduce) {
  .intro { animation: introSube .01ms forwards; }
  .intro__arc, .intro__hz, .intro__sun, .intro__w { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .vh__nav, .vh__kick, .vh__h, .vh__sub, .vh__acts, .vh__meta, .vh__rail { animation-delay: 0s; }
}

/* ═══════════════════════════════════════════════════════════════
   RED DE SEGURIDAD DE LAS ANIMACIONES DE ENTRADA
   Toda animación con fill "both" empieza con el elemento oculto. Si la
   animación no llega a ejecutarse —pestaña en segundo plano al cargar,
   compositor saturado, navegador que las pausa— el bloque se queda
   invisible para siempre. Comprobado: pasa de verdad.
   hero.js añade .anim-listo a los 4,2 s pase lo que pase, y esto fuerza
   el estado final. Si la animación sí se vio, esto no cambia nada.
   ═══════════════════════════════════════════════════════════════ */
.anim-listo .vh__nav,  .anim-listo .vh__kick, .anim-listo .vh__h,
.anim-listo .vh__sub,  .anim-listo .vh__acts, .anim-listo .vh__meta,
.anim-listo .vh__rail {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO CENTRADO · sin raíl lateral
   ═══════════════════════════════════════════════════════════════ */

/* El contenido pasa de abajo-izquierda a centrado en los dos ejes */
/* width:100% para que la caja ocupe sus 46rem: con solo margin:auto encogía
   al ancho del titular (382 px) y estrangulaba el subtítulo. */
.vh__body { width: 100%; max-width: 46rem; margin-inline: auto;
  margin-block: auto; text-align: center; padding-bottom: 0; }
.vh__sub { margin-inline: auto; max-width: 40ch; }
.vh__acts { justify-content: center; }

/* Con el texto en el centro el velo tiene que oscurecer el CENTRO, no los
   bordes: antes bajaba arriba y abajo y dejaba el titular sobre la parte
   más clara de la foto. Se quita también el degradado lateral izquierdo,
   que solo servía cuando el texto iba pegado a ese lado. */
.vh__veil {
  background:
    radial-gradient(76% 62% at 50% 52%, rgba(6,8,6,.34) 0%, rgba(6,8,6,.14) 58%, transparent 100%),
    linear-gradient(180deg, rgba(6,8,6,.34) 0%, transparent 24%,
                            transparent 62%, rgba(6,8,6,.56) 100%);
}
/* El velo se ha aligerado mucho (la foto se veía apagada). Para no perder
   legibilidad, el contraste se pone AHORA en el texto: una sombra difusa
   oscurece solo lo que hay justo detrás de las letras, no la foto entera. */
.vh__h, .vh__sub, .vh__kick { text-shadow: 0 2px 26px rgba(6,8,6,.6), 0 1px 3px rgba(6,8,6,.34); }
.vh__cap, .vh__num { text-shadow: 0 1px 12px rgba(6,8,6,.7); }

/* Puntos centrados en lugar del raíl de miniaturas.
   Mantienen la clase .vh__t: hero.js no necesita ningún cambio. */
.vh__dots { position: relative; z-index: 3; display: flex; justify-content: center;
  gap: 10px; margin-top: clamp(26px,4vh,44px); }
.vh__dots .vh__t {
  width: 30px; height: 30px; aspect-ratio: auto; padding: 0; border: 0; border-radius: 0;
  background: none; opacity: 1; filter: none; transform: none; cursor: pointer;
  display: grid; place-items: center; box-shadow: none; }
.vh__dots .vh__t::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.42);
  transition: background .4s var(--vh-ease), width .5s var(--vh-ease),
              border-radius .5s var(--vh-ease); }
.vh__dots .vh__t:hover::before { background: rgba(255,255,255,.75); }
/* el activo se estira en barrita: se ve de un vistazo por dónde va */
.vh__dots .vh__t.is-on::before { background: #fff; width: 26px; border-radius: 4px; }
.vh__dots .vh__t:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── El logotipo NO usa la display ──
   Melodrama es de alto contraste: preciosa a 72 px y prácticamente ilegible
   a 16 px, porque los trazos finos desaparecen. Es lo normal en una display.
   El wordmark pasa a Poppins con algo de interletrado; la display se reserva
   para el titular grande y los nombres de las casas. */
.vh__brand, .vh__brandtxt {
  font-family: var(--body); font-weight: 500; letter-spacing: .01em; }
.vh__brandtxt { font-size: .95rem; }

/* El «01» de las tarjetas salía como «Ø1»: Melodrama lleva cero barrado.
   Los números van en Poppins, que además se leen mejor en pequeño. */
.dos__idx { font-family: var(--body); font-weight: 500; }

@media (max-width: 900px) {
  .vh__body { margin-top: auto; margin-bottom: 0; }
  .vh__dots { margin-top: 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   TEXTO CORRIDO FUERA DE LA DISPLAY
   landing.css usaba var(--display) con peso 300 en párrafos y citas. Con
   una serif de alto contraste como Melodrama eso es directamente ilegible:
   los trazos finos desaparecen y el texto "vibra". La display se reserva
   para titulares grandes; todo lo que se lee de corrido va en Poppins.
   ═══════════════════════════════════════════════════════════════ */
.lede,
.voice blockquote {
  font-family: var(--body) !important;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0;
}
.lede { font-size: clamp(1.05rem, 1.7vw, 1.4rem); }
.voice blockquote { font-size: 1.02rem; }

/* Melodrama en 300 es demasiado fina incluso en tamaños grandes: los
   titulares suben a 400, que es el peso con el que se eligió. */
.note__title, .home__name, .close__title, .foot__mark, .why__item h3 {
  font-weight: 400;
}

/* La sección de intro, en blanco */
.band--lede {
  background: #fff;
  padding-block: clamp(56px, 9vh, 110px);
  max-width: none;
}
.band--lede > * { max-width: 1000px; margin-inline: auto; }

/* Logotipo: letras más juntas */
.vh__brand, .vh__brandtxt { letter-spacing: -.035em; }
.vh__brandtxt i { letter-spacing: .2em; }

/* ═══════════════════════════════════════════════════════════════
   HERO · centrado óptico
   Los márgenes automáticos del bloque central repartían 89 px arriba y
   abajo, pero .vh__meta añadía 29 px de margen propio encima, así que
   visualmente sobraba hueco por abajo. El margen pasa a padding: sigue
   separando el pie, pero ya cuenta como parte del elemento y el reparto
   automático queda simétrico.
   ═══════════════════════════════════════════════════════════════ */
.vh__meta { margin-top: 0; padding-top: clamp(14px,2vh,20px); }

/* ═══════════════════════════════════════════════════════════════
   SECCIONES CON MÁS CUERPO
   Estaban planas: mucho vacío muerto entre bloques y las cifras
   flotando sin peso. Se compacta el aire sobrante y se le da presencia
   a los datos, que son el argumento de venta más fuerte que hay.
   ═══════════════════════════════════════════════════════════════ */

/* el hueco entre el párrafo y las cifras era de 96 px + 56 px = demasiado */
.proof {
  margin-top: clamp(34px, 5vh, 56px) !important;
  padding-top: clamp(28px, 4vh, 44px) !important;
  gap: 0 !important;
  border-top: 1px solid rgba(28,25,21,.14) !important;
}
/* cada cifra en su celda, con separadores finos: deja de ser texto suelto */
.proof li {
  flex: 1 1 0; min-width: 150px; padding: 6px clamp(14px,2.4vw,32px);
  align-items: center; text-align: center;
}
.proof li + li { border-left: 1px solid rgba(28,25,21,.14); }
.proof strong { font-size: clamp(2.1rem, 4vw, 3.2rem) !important; }
.proof span { font-size: .68rem !important; letter-spacing: .2em !important;
  color: rgba(28,25,21,.5) !important; }

@media (max-width: 640px) {
  .proof li { flex: 1 1 100%; }
  .proof li + li { border-left: 0; border-top: 1px solid rgba(28,25,21,.12);
    margin-top: 18px; padding-top: 18px; }
}

/* las bandas de texto tenían el mismo aire arriba que abajo aunque el
   contenido pese distinto; se ajusta para que no queden huecos muertos */
.band--lede { padding-block: clamp(52px,8vh,92px) clamp(44px,7vh,80px) !important; }

/* ═══════════════════════════════════════════════════════════════
   REDISEÑO DE LA MITAD INFERIOR
   Antes: foto a sangre + bloque de texto, repetido. Eso encadenaba
   imagen contra imagen (la tira de las dos casas chocaba con la foto
   grande siguiente) y todo quedaba plano, siempre sobre el mismo fondo.
   Ahora foto y contenido son una pieza, y los fondos alternan
   claro / crema / OSCURO / foto / claro / foto, que es lo que da ritmo.
   ═══════════════════════════════════════════════════════════════ */

.eyebrow { font-size: .62rem; font-weight: 500; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(28,25,21,.45); }

/* ── botones ── */
.btn2 { display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  padding: 15px 30px; font-family: var(--body);
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  transition: transform .3s var(--vh-ease), background .3s, color .3s, border-color .3s; }
.btn2:hover { transform: translateY(-2px); }
.btn2--solid { background: #16150f; color: #fff; }
.btn2--solid:hover { background: #2c2a20; }
.btn2--ghost { background: none; color: #16150f; border-color: rgba(22,21,15,.28); }
.btn2--ghost:hover { border-color: #16150f; background: rgba(22,21,15,.05); }
.btn2--light { background: #fff; color: #16150f; }
.btn2--outline { background: none; color: #fff; border-color: rgba(255,255,255,.42); }
.btn2--outline:hover { background: #fff; color: #16150f; border-color: #fff; }

/* ── LAS CASAS ── */
.casa { display: grid; gap: clamp(26px,3.6vw,60px);
  grid-template-columns: 1.05fr .95fr; grid-template-areas: "media body" "strip strip";
  align-items: center; background: #fff;
  padding: clamp(56px,9vh,110px) clamp(20px,4vw,54px);
  max-width: 1360px; margin-inline: auto; }
.casa--alt { background: #faf8f4; grid-template-areas: "body media" "strip strip"; }

.casa__media { grid-area: media; margin: 0; }
.casa__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.casa__media figcaption { margin-top: 12px; font-size: .6rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(28,25,21,.42); }

.casa__body { grid-area: body; }
.casa__idx { font-size: .62rem; font-weight: 500; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(28,25,21,.45); }
.casa__name { font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem,4vw,3.4rem); line-height: 1.04; letter-spacing: -.015em;
  margin: 12px 0 18px; }
.casa__desc { font-size: .95rem; font-weight: 300; line-height: 1.75;
  color: #4a463c; max-width: 46ch; }

.casa__specs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0; margin: 26px 0 22px;
  border-top: 1px solid rgba(28,25,21,.14); border-bottom: 1px solid rgba(28,25,21,.14); }
.casa__specs > div { padding: 14px 10px 14px 0; }
.casa__specs > div + div { padding-left: 14px; border-left: 1px solid rgba(28,25,21,.1); }
.casa__specs dt { font-size: .56rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(28,25,21,.45); }
.casa__specs dd { margin: 5px 0 0; font-family: var(--display); font-weight: 400;
  font-size: 1.35rem; }

.casa__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 26px; padding: 0; }
.casa__tags li { border: 1px solid rgba(28,25,21,.16); border-radius: 999px;
  padding: 7px 14px; font-size: .72rem; font-weight: 300; color: #4a463c; }

.casa__acts { display: flex; flex-wrap: wrap; gap: 11px; }

.casa__strip { grid-area: strip; display: grid; grid-template-columns: repeat(4,1fr);
  gap: clamp(8px,1vw,14px); margin-top: clamp(28px,4vh,48px); }
.casa__strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  cursor: pointer; filter: saturate(.94);
  transition: transform .7s var(--vh-ease), filter .5s; }
.casa__strip img:hover { transform: scale(1.04); filter: saturate(1.06); }

/* ── RESEÑAS · en oscuro, corta el ritmo ── */
.opi { background: var(--night); color: #eae6dc;
  padding: clamp(64px,10vh,124px) clamp(20px,4vw,54px); }
.opi__in { max-width: 1240px; margin-inline: auto; text-align: center; }
.opi .eyebrow { color: rgba(234,230,220,.5); }
.opi__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(14px,2vw,26px); margin-top: clamp(34px,5vh,56px); text-align: left; }
.opi__c { margin: 0; border: 1px solid rgba(234,230,220,.16);
  padding: clamp(22px,2.6vw,34px); display: flex; flex-direction: column; gap: 16px;
  transition: border-color .4s, background .4s; }
.opi__c:hover { border-color: rgba(234,230,220,.4); background: rgba(255,255,255,.03); }
.opi__stars { margin: 0; color: var(--estrella); font-size: .82rem; letter-spacing: .18em; }
.opi__c blockquote { margin: 0; font-size: .95rem; font-weight: 300; line-height: 1.75;
  color: rgba(234,230,220,.86); }
.opi__c figcaption { display: grid; gap: 3px; margin-top: auto;
  padding-top: 14px; border-top: 1px solid rgba(234,230,220,.14); }
.opi__c figcaption b { font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.opi__c figcaption span { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(234,230,220,.45); }
.opi__src { margin-top: clamp(26px,4vh,44px); font-size: .72rem; font-weight: 300;
  color: rgba(234,230,220,.5); }

/* ── EL LUGAR ── */
.lugar { position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: clamp(72px,13vh,150px) clamp(20px,4vw,54px); }
.lugar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; filter: saturate(.9) brightness(.7); }
.lugar__veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,10,8,.62), rgba(8,10,8,.4) 45%, rgba(8,10,8,.78)); }
.lugar__in { max-width: 1240px; margin-inline: auto; }
.lugar .eyebrow { color: rgba(255,255,255,.6); }
.lugar__h { font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem,4.6vw,3.8rem); line-height: 1.06; letter-spacing: -.015em;
  margin: 14px 0 20px; }
.lugar__p { max-width: 52ch; font-size: .95rem; font-weight: 300; line-height: 1.75;
  color: rgba(255,255,255,.82); }
.lugar__list { list-style: none; display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0; margin: clamp(34px,5vh,54px) 0 0; padding: clamp(22px,3vh,30px) 0 0;
  border-top: 1px solid rgba(255,255,255,.24); }
.lugar__list li { padding-right: 16px; }
.lugar__list li + li { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.18); }
.lugar__list b { display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem,2.6vw,2.1rem); }
.lugar__list span { display: block; margin-top: 5px; font-size: .62rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ── POR QUÉ DIRECTO ── */
.pq { background: #fff; padding: clamp(64px,10vh,120px) clamp(20px,4vw,54px); }
.pq__in { max-width: 1240px; margin-inline: auto; }
.pq__h { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem,3.8vw,3.1rem); line-height: 1.08; letter-spacing: -.015em;
  margin: 14px 0 clamp(34px,5vh,54px); }
.pq__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; }
.pq__c { padding: clamp(22px,2.6vw,34px) clamp(20px,2.4vw,32px);
  border-top: 1px solid rgba(28,25,21,.16); }
.pq__c + .pq__c { border-left: 1px solid rgba(28,25,21,.1); }
.pq__n { font-family: var(--display); font-weight: 400; font-size: 1.5rem;
  color: rgba(28,25,21,.3); }
.pq__c h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem;
  margin: 12px 0 10px; letter-spacing: -.01em; }
.pq__c p { font-size: .9rem; font-weight: 300; line-height: 1.75; color: #4a463c; }

/* ── CIERRE ── */
.cierre { position: relative; isolation: isolate; overflow: hidden; color: #fff;
  text-align: center; padding: clamp(74px,13vh,150px) clamp(20px,4vw,54px); }
.cierre__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; filter: saturate(.85) brightness(.55); }
.cierre__veil { position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 60% at 50% 50%, rgba(10,12,10,.5), rgba(10,12,10,.82)); }
.cierre__h { font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem,5vw,4rem); line-height: 1.04; letter-spacing: -.02em; }
.cierre__p { margin-top: 14px; font-size: .95rem; font-weight: 300;
  color: rgba(255,255,255,.8); }
.cierre__acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: clamp(28px,4vh,42px); }

/* ── PIE ── */
.pie2 { background: var(--night); color: rgba(234,230,220,.72);
  padding: clamp(56px,9vh,100px) clamp(20px,4vw,54px) 0; }
.pie2__in { max-width: 1240px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(34px,5vw,80px);
  padding-bottom: clamp(40px,6vh,68px); }
.pie2__marca { display: flex; align-items: flex-start; gap: 13px; color: #fff; }
.pie2__marca .mark { width: 34px; height: 34px; }
.pie2__marca span { display: grid; gap: 3px; font-family: var(--body); font-weight: 500;
  font-size: 1rem; letter-spacing: -.035em; line-height: 1.2; }
.pie2__marca i { font-style: normal; font-weight: 300; font-size: .54rem;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(234,230,220,.5); }

.pie2__cols { display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(20px,3vw,40px); }
.pie2__col { display: grid; gap: 9px; align-content: start; }
.pie2__col h4 { margin: 0 0 4px; font-size: .58rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(234,230,220,.45); }
.pie2__col a, .pie2__col p { font-size: .86rem; font-weight: 300; line-height: 1.65;
  color: rgba(234,230,220,.82); text-decoration: none; margin: 0; }
.pie2__col a { width: fit-content; border-bottom: 1px solid transparent;
  transition: border-color .3s, color .3s; }
.pie2__col a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
.pie2__reg { font-size: .68rem !important; color: rgba(234,230,220,.42) !important;
  margin-top: 4px !important; }

.pie2__legal { max-width: 1240px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 22px 0 28px; border-top: 1px solid rgba(234,230,220,.14);
  font-size: .7rem; font-weight: 300; color: rgba(234,230,220,.5); }
.pie2__legal p { margin: 0; }
.pie2__legal nav { display: flex; flex-wrap: wrap; gap: 22px; }
.pie2__legal a { color: inherit; text-decoration: none; transition: color .3s; }
.pie2__legal a:hover { color: #fff; }

/* ── INTRO más rápida ──
   Antes: 1,85 s parado + 0,9 s de subida = casi 3 s antes de ver la web.
   Ahora el arco se dibuja en la mitad de tiempo y el telón sube a 1,1 s. */
.intro { animation-delay: 1.05s; animation-duration: .75s; }
.intro__arc { animation-duration: .6s; animation-delay: .06s; }
.intro__hz  { animation-duration: .45s; animation-delay: .34s; }
.intro__sun { animation-duration: .45s; animation-delay: .48s; }
.vh__nav  { animation-delay: 1.35s; }
.vh__kick { animation-delay: 1.45s; }
.vh__h    { animation-delay: 1.53s; }
.vh__sub  { animation-delay: 1.68s; }
.vh__acts { animation-delay: 1.78s; }
.vh__meta { animation-delay: 1.88s; }

/* ── MÓVIL ── */
@media (max-width: 900px) {
  .casa, .casa--alt { grid-template-columns: 1fr;
    grid-template-areas: "media" "body" "strip"; }
  .casa__specs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .casa__specs > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .casa__specs > div:nth-child(n+3) { border-top: 1px solid rgba(28,25,21,.1); }
  .opi__grid, .pq__grid { grid-template-columns: 1fr; }
  .pq__c + .pq__c { border-left: 0; }
  .lugar__list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 0; }
  .lugar__list li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pie2__in { grid-template-columns: 1fr; }
  .pie2__cols { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  .casa__strip { grid-template-columns: repeat(2,1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   AJUSTES · menos cargado, más visual
   ═══════════════════════════════════════════════════════════════ */

/* ── Melodrama fuera de los datos pequeños ──
   El código de registro salía como "G-1Ø7329" y los números 01/02/03 se
   veían rotos: es una display de alto contraste, no una fuente de datos.
   Todo lo que sea cifra o código va en Poppins. */
.casa__specs dd, .lugar__list b, .pq__n {
  font-family: var(--body) !important;
  font-weight: 400;
  letter-spacing: -.01em;
}
.casa__specs dd { font-size: 1.55rem; }
.lugar__list b { font-size: clamp(1.5rem,2.6vw,2.05rem); font-weight: 500; }

/* Las tres razones y los títulos de casa: los h3 en Melodrama a 1,5 rem
   quedaban débiles. Van en Poppins, que a ese tamaño se lee firme. */
.pq__c h3, .opi__c figcaption b {
  font-family: var(--body) !important;
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: -.02em;
}

/* ── Servicios: de píldoras a lista con puntos, mucho más ligero ── */
.casa__am { list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 0; margin: 0 0 28px; padding: 0;
  font-size: .82rem; font-weight: 300; color: #5b5648; }
.casa__am li { display: inline-flex; align-items: center; }
.casa__am li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(28,25,21,.28); margin: 0 12px; }

/* con tres datos en vez de cuatro, la barra respira */
.casa__specs { grid-template-columns: repeat(3,minmax(0,1fr)); }

/* ── TRES RAZONES · con icono, y con aire ── */
.pq__grid { gap: clamp(16px,2vw,28px); }
.pq__c { border-top: 0; border: 1px solid rgba(28,25,21,.14);
  padding: clamp(28px,3vw,40px);
  transition: border-color .4s var(--vh-ease), transform .4s var(--vh-ease); }
.pq__c + .pq__c { border-left: 1px solid rgba(28,25,21,.14); }
.pq__c:hover { border-color: rgba(28,25,21,.4); transform: translateY(-4px); }
.pq__ico { width: 34px; height: 34px; color: #16150f; stroke-linejoin: round;
  margin-bottom: 20px; }
.pq__c h3 { margin: 0 0 10px; }

/* ── VALORACIONES · con la nota destacada ── */
.opi__in { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,2.15fr);
  gap: clamp(28px,4vw,68px); text-align: left; align-items: start; }
.opi__nota { position: sticky; top: 40px; }
.opi__num { margin: 14px 0 0; font-family: var(--body); font-weight: 300;
  font-size: clamp(3.4rem,7vw,5.6rem); line-height: 1; letter-spacing: -.04em;
  color: #fff; }
.opi__stars { margin: 10px 0 0; color: var(--estrella); font-size: .95rem; letter-spacing: .22em; }
.opi__meta { margin: 16px 0 0; font-size: .78rem; font-weight: 300; line-height: 1.7;
  color: rgba(234,230,220,.55); }

.opi__grid { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
.opi__c { border: 0; border-top: 1px solid rgba(234,230,220,.16);
  padding: clamp(24px,3vw,34px) 0; gap: 14px; }
.opi__c:first-child { border-top: 0; padding-top: 0; }
.opi__c:hover { background: none; border-color: rgba(234,230,220,.34); }
.opi__c blockquote { font-size: 1rem; line-height: 1.8; }
.opi__c figcaption { display: flex; align-items: baseline; gap: 12px;
  border-top: 0; padding-top: 0; margin-top: 0; }

/* ── CASA · un punto menos de carga visual ── */
.casa__desc { max-width: 42ch; }
.casa__acts { margin-top: 4px; }

@media (max-width: 900px) {
  .opi__in { grid-template-columns: 1fr; }
  .opi__nota { position: static; }
  .pq__c + .pq__c { border-left: 1px solid rgba(28,25,21,.14); }
  .casa__specs { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .casa__specs > div:nth-child(odd) { padding-left: 14px; border-left: 1px solid rgba(28,25,21,.1); }
  .casa__specs > div:first-child { padding-left: 0; border-left: 0; }
  .casa__specs > div:nth-child(n+3) { border-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   TODO BLANCO · fuera los bloques oscuros
   Había cinco tonos de fondo distintos (papel cálido, crema, blanco,
   negro y dos fotos a sangre) y la página parecía un collage. Ahora
   la única imagen a pantalla completa es el hero; todo lo demás es
   blanco y el contraste lo ponen las fotos dentro de su marco.
   ═══════════════════════════════════════════════════════════════ */
html, body { background: #fff; }
.band, .band--lede, .casa, .casa--alt, .pq, .val, .zona, .cierre {
  background: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   EL CONTENIDO SE SUBE ENCIMA DEL HERO
   El hero se queda pegado arriba y la página pasa por encima con la
   esquina redondeada y sombra proyectada hacia arriba: se lee como una
   capa que sube, no como dos bloques pegados.
   El sticky exige que ningún ancestro tenga overflow distinto de visible;
   landing.css ponía overflow-x:clip en html y body, así que se neutraliza.
   ═══════════════════════════════════════════════════════════════ */
/* overflow-x: CLIP, no visible ni hidden. Los tres son distintos:
   · hidden  → crea un contenedor de scroll y ROMPE position:sticky
   · visible → no rompe el sticky, pero deja escapar cualquier desborde
               horizontal y en móvil la página se va de lado
   · clip    → corta el desborde SIN crear contenedor de scroll: el sticky
               sigue funcionando. Es el único que sirve para las dos cosas.
   Se puso 'visible' al montar el hero pegajoso y por eso la web se salía
   en móvil. */
html, body { overflow-x: clip; }
.vh { position: sticky; top: 0; z-index: 0;
  padding-bottom: clamp(52px,7vh,84px); }
main { position: relative; z-index: 2;
  margin-top: clamp(-40px,-4vh,-24px);
  border-radius: clamp(20px,2.4vw,34px) clamp(20px,2.4vw,34px) 0 0;
  background: #fff;
  box-shadow: 0 -22px 54px -22px rgba(8,10,8,.55); }
main > :first-child { border-radius: inherit; }
.pie2 { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .vh { position: relative; } }

/* ═══════════════════════════════════════════════════════════════
   VALORACIONES · nota grande + índice de reseñas, sin bloque negro
   ═══════════════════════════════════════════════════════════════ */
.val { padding: clamp(64px,10vh,120px) clamp(20px,4vw,54px); }
.val__in { max-width: 1240px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,2.2fr);
  gap: clamp(30px,5vw,84px); align-items: start; }
.val__cab { position: sticky; top: 40px; }
.val__num { margin: 12px 0 0; font-family: var(--body); font-weight: 300;
  font-size: clamp(3.2rem,6.4vw,5rem); line-height: 1; letter-spacing: -.045em;
  color: #16150f; display: flex; align-items: baseline; gap: 8px; }
.val__num i { font-style: normal; font-size: .28em; font-weight: 400;
  letter-spacing: 0; color: rgba(28,25,21,.4); }
.val__stars { margin: 10px 0 0; color: var(--estrella); font-size: .92rem; letter-spacing: .22em; }
.val__meta { margin: 16px 0 0; font-size: .78rem; font-weight: 300; line-height: 1.7;
  color: rgba(28,25,21,.5); }

.val__lista { display: grid; }
.val__c { margin: 0; padding: clamp(22px,3vw,32px) 0;
  border-top: 1px solid rgba(28,25,21,.14); }
.val__c:first-child { border-top: 0; padding-top: 0; }
.val__c blockquote { margin: 0; font-size: 1.02rem; font-weight: 300; line-height: 1.8;
  color: #35322a; }
.val__c figcaption { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.val__c figcaption b { font-family: var(--body); font-weight: 500; font-size: 1rem;
  letter-spacing: -.02em; color: #16150f; }
.val__c figcaption span { font-size: .62rem; font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(28,25,21,.42); }

/* ═══════════════════════════════════════════════════════════════
   EL LUGAR · sin foto, con las distancias como índice
   ═══════════════════════════════════════════════════════════════ */
.zona { padding: clamp(64px,10vh,120px) clamp(20px,4vw,54px); }
.zona__in { max-width: 1240px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(30px,5vw,84px); align-items: start; }
.zona__h { font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem,4.4vw,3.6rem); line-height: 1.06; letter-spacing: -.015em;
  margin: 14px 0 20px; }
.zona__p { max-width: 44ch; font-size: .95rem; font-weight: 300; line-height: 1.8;
  color: #4a463c; }

.zona__lista { list-style: none; margin: 0; padding: 0; }
.zona__lista li { display: flex; align-items: baseline; gap: 14px;
  padding: 17px 0; border-bottom: 1px solid rgba(28,25,21,.13); }
.zona__lista li:first-child { border-top: 1px solid rgba(28,25,21,.13); }
.zona__q { font-size: .98rem; font-weight: 300; color: #35322a; white-space: nowrap; }
/* la línea de puntos que une el sitio con su tiempo, como un índice */
.zona__lista i { flex: 1; height: 1px; border-bottom: 1px dotted rgba(28,25,21,.3); }
.zona__lista b { font-family: var(--body); font-weight: 500; font-size: 1.02rem;
  letter-spacing: -.01em; color: #16150f; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   CIERRE · en blanco, centrado
   ═══════════════════════════════════════════════════════════════ */
.cierre { text-align: center; color: #16150f;
  padding: clamp(70px,11vh,130px) clamp(20px,4vw,54px);
  border-top: 1px solid rgba(28,25,21,.12); }
.cierre__h { font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem,5vw,4rem); line-height: 1.04; letter-spacing: -.02em; }
.cierre__p { margin-top: 14px; font-size: .98rem; font-weight: 300;
  color: rgba(28,25,21,.6); }

/* ═══════════════════════════════════════════════════════════════
   PIE · claro, con filete superior
   ═══════════════════════════════════════════════════════════════ */
.pie2 { background: #fafaf8; color: rgba(28,25,21,.7);
  border-top: 1px solid rgba(28,25,21,.12); }
.pie2__marca { color: #16150f; }
.pie2__marca i { color: rgba(28,25,21,.45); }
.pie2__col h4 { color: rgba(28,25,21,.45); }
.pie2__col a, .pie2__col p { color: rgba(28,25,21,.75); }
.pie2__col a:hover { color: #16150f; border-bottom-color: rgba(28,25,21,.4); }
.pie2__reg { color: rgba(28,25,21,.42) !important; }
.pie2__legal { border-top-color: rgba(28,25,21,.12); color: rgba(28,25,21,.5); }
.pie2__legal a:hover { color: #16150f; }

@media (max-width: 900px) {
  .val__in, .zona__in { grid-template-columns: 1fr; }
  .val__cab { position: static; }
}

/* la junta entre las dos tarjetas era negra y dibujaba una raya oscura */
.dos { background: #fff; gap: 2px; }

/* ═══════════════════════════════════════════════════════════════
   VALORACIONES · carrusel
   ═══════════════════════════════════════════════════════════════ */
.val__vp { overflow: hidden; }
.val__pista { display: flex; will-change: transform; }
.val__c { flex: 0 0 100%; margin: 0; padding: 0;
  border: 0; display: grid; gap: 18px; align-content: start; }
.val__s { margin: 0; color: var(--estrella); font-size: .92rem; letter-spacing: .22em; }
.val__c blockquote { margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem,2.4vw,1.85rem); line-height: 1.55; letter-spacing: -.01em;
  color: #1c1a14; }
.val__c figcaption { display: flex; align-items: baseline; gap: 12px; }
.val__c figcaption b { font-family: var(--body); font-weight: 500; font-size: 1rem;
  letter-spacing: -.02em; color: #16150f; }
.val__c figcaption span { font-size: .62rem; font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(28,25,21,.42); }

.val__ctrl { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.val__b { width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(28,25,21,.2); border-radius: 50%; background: none;
  color: #16150f; cursor: pointer;
  transition: background .35s var(--vh-ease), border-color .35s, transform .35s var(--vh-ease); }
.val__b:hover { background: #16150f; color: #fff; border-color: #16150f; transform: scale(1.06); }
.val__b:focus-visible { outline: 2px solid #16150f; outline-offset: 3px; }
.val__pos { margin-left: 8px; font-size: .68rem; font-weight: 400; letter-spacing: .2em;
  color: rgba(28,25,21,.42); }
.val__pos b { color: #16150f; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   EL LUGAR · diagrama de distancias
   ═══════════════════════════════════════════════════════════════ */
.mapa { width: 100%; }
.mapa__svg { width: 100%; height: auto; overflow: visible; }
.mapa__ring { stroke: rgba(28,25,21,.11); fill: none; }
.mapa__l { stroke: rgba(28,25,21,.3); }
.mapa__p circle { fill: #16150f; }
.mapa__p text { font-family: var(--body); font-size: 12.5px; font-weight: 400;
  letter-spacing: .04em; fill: #35322a; }
.mapa__pulso { fill: none; stroke: rgba(28,25,21,.35); stroke-width: 1.2;
  transform-origin: 280px 230px; }
.mapa__casa { stroke: #16150f; fill: none; }
.mapa__yo { font-family: var(--body); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; fill: rgba(28,25,21,.5); }

/* ═══════════════════════════════════════════════════════════════
   CIERRE · dos tarjetas grandes en vez de dos botones sueltos
   ═══════════════════════════════════════════════════════════════ */
.cta { padding: clamp(70px,11vh,130px) clamp(20px,4vw,54px);
  border-top: 1px solid rgba(28,25,21,.12); background: #fff; }
.cta__in { max-width: 1000px; margin-inline: auto; text-align: center; }
.cta__h { font-family: var(--display); font-weight: 400;
  font-size: clamp(2.2rem,5vw,4rem); line-height: 1.04; letter-spacing: -.02em;
  margin: 14px 0 16px; color: #16150f; }
.cta__p { max-width: 46ch; margin-inline: auto; font-size: .98rem; font-weight: 300;
  line-height: 1.75; color: rgba(28,25,21,.6); }

.cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: clamp(34px,5vh,54px); text-align: left; }
.cta__c { position: relative; display: flex; align-items: center; gap: 16px;
  padding: 14px 20px 14px 14px; text-decoration: none; color: #16150f;
  border: 1px solid rgba(28,25,21,.16); border-radius: 3px; overflow: hidden;
  transition: border-color .45s var(--vh-ease), transform .45s var(--vh-ease),
              box-shadow .45s var(--vh-ease); }
.cta__c:hover { border-color: rgba(28,25,21,.5); transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(10,12,10,.5); }
.cta__ph { width: 74px; height: 74px; flex: none; overflow: hidden; border-radius: 2px; }
.cta__ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--vh-ease); }
.cta__c:hover .cta__ph img { transform: scale(1.09); }
.cta__txt { display: grid; gap: 4px; }
.cta__txt b { font-family: var(--display); font-weight: 400; font-size: 1.4rem;
  letter-spacing: -.015em; }
.cta__txt i { font-style: normal; font-size: .7rem; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(28,25,21,.45); }
.cta__go { margin-left: auto; color: rgba(28,25,21,.45);
  transition: transform .45s var(--vh-ease), color .45s; }
.cta__c:hover .cta__go { transform: translateX(6px); color: #16150f; }
.cta__pie { margin-top: 24px; font-size: .8rem; font-weight: 300; color: rgba(28,25,21,.5); }
.cta__pie b { color: #16150f; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   PIE · cuatro columnas, marca con claim
   ═══════════════════════════════════════════════════════════════ */
.pie2 { background: var(--night); color: rgba(234,230,220,.72); border-top: 0;
  padding: clamp(60px,9vh,104px) clamp(20px,4vw,54px) 0; }
.pie2__top { max-width: 1240px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 26px; padding-bottom: clamp(38px,5vh,58px);
  border-bottom: 1px solid rgba(234,230,220,.14); }
.pie2__marca { display: flex; align-items: flex-start; gap: 14px; color: #fff; }
.pie2__marca .mark { width: 36px; height: 36px; }
.pie2__marca span { display: grid; gap: 4px; font-family: var(--body); font-weight: 500;
  font-size: 1.05rem; letter-spacing: -.035em; line-height: 1.2; }
.pie2__marca i { font-style: normal; font-weight: 300; font-size: .54rem;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(234,230,220,.5); }
.pie2__claim { margin: 0; max-width: 34ch; text-align: right;
  font-family: var(--display); font-weight: 400; font-size: clamp(1.05rem,2vw,1.5rem);
  line-height: 1.45; color: rgba(234,230,220,.9); }

.pie2__cols { max-width: 1240px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(20px,3vw,40px); padding: clamp(34px,5vh,54px) 0; }
.pie2__col { display: grid; gap: 10px; align-content: start; }
.pie2__col h4 { margin: 0 0 4px; font-size: .58rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(234,230,220,.42); }
.pie2__col a, .pie2__col p { font-size: .86rem; font-weight: 300; line-height: 1.6;
  color: rgba(234,230,220,.82); text-decoration: none; margin: 0; }
.pie2__col a { width: fit-content; display: grid; gap: 1px;
  border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.pie2__col a em { font-style: normal; font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(234,230,220,.4); }
.pie2__col a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.pie2__reg { font-size: .68rem !important; color: rgba(234,230,220,.4) !important; }

.pie2__legal { max-width: 1240px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 20px 0 28px; border-top: 1px solid rgba(234,230,220,.14);
  font-size: .7rem; font-weight: 300; color: rgba(234,230,220,.45); }
.pie2__legal p { margin: 0; }

@media (max-width: 900px) {
  .cta__grid { grid-template-columns: 1fr; }
  .pie2__cols { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; }
  .pie2__claim { text-align: left; }
}
@media (max-width: 560px) {
  .pie2__cols { grid-template-columns: 1fr; }
}

/* ── EL LUGAR · un diagrama por casa ─────────────────────────────
   Antes había un solo diagrama centrado en "Akiver & Iveka" con un
   desglose de minutos por destino. Era incorrecto por dos motivos:
   los minutos no venían de ninguna fuente, y las dos casas están en
   pueblos distintos (unos 10 km), así que no comparten distancias. */
.mapa2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.4vw,30px); }
.mapa2__c { border: 1px solid rgba(28,25,21,.14); padding: clamp(22px,2.6vw,32px);
  display: grid; justify-items: center; text-align: center;
  transition: border-color .45s var(--vh-ease), transform .45s var(--vh-ease); }
.mapa2__c:hover { border-color: rgba(28,25,21,.4); transform: translateY(-4px); }
.mapa2__svg { width: clamp(130px,14vw,180px); height: auto; overflow: visible; }
.m2__ring { stroke: rgba(28,25,21,.12); fill: none; }
.m2__l { stroke: rgba(28,25,21,.28); }
.m2__d { fill: #16150f; }
.m2__pulso { fill: none; stroke: rgba(28,25,21,.32); stroke-width: 1.2;
  transform-origin: 100px 100px; transform-box: fill-box; }
.m2__casa { stroke: #16150f; fill: none; }

.mapa2__idx { margin-top: 16px; font-size: .6rem; font-weight: 500; letter-spacing: .24em;
  color: rgba(28,25,21,.4); }
.mapa2__n { font-family: var(--display); font-weight: 400; font-size: 1.6rem;
  letter-spacing: -.015em; margin: 8px 0 4px; }
.mapa2__u { font-size: .68rem; font-weight: 400; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(28,25,21,.45); }
.mapa2__l { list-style: none; margin: 20px 0 0; padding: 18px 0 0; width: 100%;
  border-top: 1px solid rgba(28,25,21,.12); display: grid; gap: 12px; }
.mapa2__l li { display: grid; gap: 2px; }
.mapa2__l b { font-family: var(--body); font-weight: 500; font-size: 1.12rem;
  letter-spacing: -.01em; color: #16150f; }
.mapa2__l span { font-size: .8rem; font-weight: 300; color: rgba(28,25,21,.6); }

.zona__pie { grid-column: 1 / -1; margin-top: clamp(24px,3vh,34px);
  font-size: .82rem; font-weight: 300; color: rgba(28,25,21,.5); }

@media (max-width: 720px) { .mapa2 { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   EL LUGAR · rehecho
   Los diagramas abstractos anteriores no comunicaban nada: dos puntos
   sin etiqueta que nadie podía interpretar. Ahora mandan las fotos de
   cada casa y el dato se lee de un vistazo, con una barra que da escala
   relativa entre "1 min" y "10 min".
   ═══════════════════════════════════════════════════════════════ */
.zona { padding: clamp(64px,10vh,124px) clamp(20px,4vw,54px);
  max-width: 1240px; margin-inline: auto; }
.zona__in { display: block; }   /* anula la retícula anterior */

.zona__cab { max-width: 46rem; margin-bottom: clamp(38px,6vh,64px); }
.zona__p { max-width: 52ch; }

.sitios { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.6vw,34px); }

.sitio { display: grid; }
.sitio__ph { position: relative; display: block; overflow: hidden;
  aspect-ratio: 16/10; background: #eee; }
.sitio__ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.95) brightness(.94);
  transition: transform 1.1s var(--vh-ease), filter .6s; }
.sitio__ph::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,10,8,.4) 0%, transparent 42%);
  transition: opacity .5s; }
.sitio:hover .sitio__ph img { transform: scale(1.06); filter: saturate(1.02) brightness(1); }

.sitio__idx { position: absolute; top: 18px; left: 20px; z-index: 2;
  font-family: var(--body); font-weight: 500; font-size: .68rem; letter-spacing: .22em;
  color: rgba(255,255,255,.9); }

.sitio__in { padding: clamp(22px,2.6vw,30px) 0 0; }
.sitio__n { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem,3vw,2.5rem); line-height: 1.04; letter-spacing: -.015em;
  margin: 0; }
.sitio__u { display: inline-flex; align-items: center; gap: 7px; margin: 9px 0 0;
  font-size: .68rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(28,25,21,.45); }

.sitio__d { list-style: none; margin: clamp(20px,2.6vh,28px) 0 0; padding: 0;
  display: grid; gap: 18px; }
.sitio__d li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  align-items: baseline; padding-top: 16px; border-top: 1px solid rgba(28,25,21,.13); }
.sitio__t { font-family: var(--body); font-weight: 500;
  font-size: clamp(1.5rem,2.4vw,2rem); line-height: 1; letter-spacing: -.03em;
  color: #16150f; display: inline-flex; align-items: baseline; gap: 4px; }
.sitio__t i { font-style: normal; font-size: .42em; font-weight: 400; letter-spacing: .06em;
  color: rgba(28,25,21,.45); }
.sitio__t--txt { font-size: clamp(1.15rem,1.9vw,1.5rem); letter-spacing: -.02em; }
.sitio__q { font-size: .88rem; font-weight: 300; line-height: 1.5; color: rgba(28,25,21,.6); }

/* barra de escala: da idea de cerca/lejos sin inventarse un número */
.sitio__bar { grid-column: 1 / -1; height: 2px; margin-top: 10px;
  background: rgba(28,25,21,.1); overflow: hidden; }
.sitio__bar em { display: block; height: 100%; width: var(--w); background: #16150f;
  transform-origin: left; }

.zona__pie { margin-top: clamp(30px,4.5vh,50px); padding-top: 20px;
  border-top: 1px solid rgba(28,25,21,.13);
  font-size: .86rem; font-weight: 300; color: rgba(28,25,21,.55); }

@media (max-width: 780px) {
  .sitios { grid-template-columns: 1fr; gap: 34px; }
}

/* ═══════════════════════════════════════════════════════════════
   MÓVIL · menú, tamaños táctiles y solapes
   En móvil .vh__links se ocultaba y no quedaba NINGUNA forma de llegar
   a las secciones: faltaba el botón de menú. Además varios enlaces
   medían 23 px de alto, muy por debajo del mínimo táctil de 44.
   ═══════════════════════════════════════════════════════════════ */

/* ── Botón hamburguesa: solo en móvil ── */
.ham { display: none; width: 46px; height: 46px; padding: 0; margin: -6px -8px -6px 0;
  border: 0; background: none; cursor: pointer;
  place-items: center; align-content: center; gap: 6px; }
.ham span { display: block; width: 22px; height: 1.5px; background: #fff; border-radius: 2px;
  transition: transform .4s var(--vh-ease), opacity .3s; }
.ham[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.ham[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.ham:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Panel de menú ── */
/* La visibilidad va con visibility+opacity, las dos animables, y NO con
   display ni con el atributo hidden. Motivo: la versión anterior añadía
   la clase dentro de un requestAnimationFrame y si ese fotograma no llega
   —pestaña en segundo plano, compositor ocupado— el panel se quedaba
   presente pero a opacidad 0, tapando la pantalla entera sin verse.
   Así el estado final se aplica siempre, se anime o no. */
.menu { position: fixed; inset: 0; z-index: 60; background: #16150f; color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: 84px clamp(22px,6vw,40px) 34px;
  opacity: 0; visibility: hidden; pointer-events: none; }
/* SIN transición a propósito. Se probó con opacity+visibility animadas y
   las propiedades se quedaban en su valor inicial cuando la transición no
   llegaba a ejecutarse: el panel quedaba clicable pero invisible, tapando
   la pantalla. Un menú que abre al instante es lo normal y no puede fallar.
   El movimiento se lo dan los enlaces al entrar, no el panel. */
.menu.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
/* Tampoco se anima la entrada de los enlaces. Se intentó con
   "animation: ... both" y los enlaces se quedaban a opacidad 0 cuando la
   animación no arrancaba: panel visible y menú vacío. Ninguna animación
   con relleno "both" que parta de opacidad 0 en algo que el usuario
   necesita ver sí o sí. */
.menu__nav { display: grid; }
.menu__nav a { display: grid; gap: 4px; padding: 18px 0; text-decoration: none; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-family: var(--display); font-weight: 400; font-size: 1.9rem; letter-spacing: -.02em; }
.menu__nav a i { font-family: var(--body); font-style: normal; font-weight: 300;
  font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.45); }
.menu__pie { margin-top: auto; padding-top: 30px; display: grid; gap: 10px; }
.menu__cta { display: grid; place-items: center; min-height: 52px; border-radius: 999px;
  background: #fff; color: #16150f; text-decoration: none;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.menu__cta + .menu__cta { background: none; color: #fff; border: 1px solid rgba(255,255,255,.34); }
.menu__tel { margin-top: 8px; text-align: center; min-height: 44px; display: grid;
  place-items: center; color: rgba(255,255,255,.6); text-decoration: none;
  font-size: .82rem; font-weight: 300; }
body.menu-abierto { overflow: hidden; }

@media (max-width: 900px) {
  .ham { display: grid; }
  /* el CTA del menú superior se oculta: su función la cubre el panel,
     y así el logo no compite con dos botones en 375 px */
  .vh__navcta { display: none; }
  .vh__nav { gap: 12px; }
  .vh__brandtxt { font-size: .88rem; }
  .mark { width: 26px; height: 26px; }

  /* ── Tamaños táctiles ── */
  .vh__acts { gap: 10px; }
  .vh__cta { width: 100%; justify-content: center; min-height: 52px; }
  .vh__alt { width: 100%; min-height: 48px; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.34); border-radius: 999px; padding: 0; }
  .btn2 { width: 100%; min-height: 52px; }
  .casa__acts { width: 100%; }
  .val__b { width: 46px; height: 46px; }
  .pie2__col a { min-height: 40px; align-content: center; }
  .pie2__legal { gap: 6px; }

  /* ── Aire entre la foto y su pie, que iban demasiado justos ── */
  .casa__media figcaption { margin-top: 14px; }
  .sitio__in { padding-top: 20px; }
}

@media (min-width: 901px) { .menu { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .menu, .ham span { transition: none; }
}

/* ── El marco recortado de la foto ──
   El overflow:hidden iba antes en <figure>, que contiene imagen Y pie, así
   que la imagen ampliada al 114 % se derramaba encima del texto del pie. */
.casa__frame { display: block; overflow: hidden; }
.casa__frame img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

/* ── Botón de cerrar el menú ──
   Con el panel abierto, la hamburguesa quedaba DEBAJO (z-index 60 del panel
   contra 3 de la cabecera): no había forma visible de cerrar. */
.menu__x { position: absolute; top: 18px; right: clamp(18px,5vw,32px);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.24); border-radius: 50%;
  background: none; color: #fff; cursor: pointer;
  transition: background .3s, border-color .3s; }
.menu__x:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.menu__x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Entrada del menú ──
   Solo TRANSFORM, nunca opacidad: si la animación no llega a ejecutarse el
   contenido se queda 20 px más abajo pero perfectamente visible y usable.
   Es la lección de los tres fallos anteriores. */
.menu.is-on .menu__nav a,
.menu.is-on .menu__pie { animation: menuSube .55s both cubic-bezier(.16,1,.3,1); }
.menu.is-on .menu__nav a:nth-child(2) { animation-delay: .05s; }
.menu.is-on .menu__nav a:nth-child(3) { animation-delay: .1s; }
.menu.is-on .menu__nav a:nth-child(4) { animation-delay: .15s; }
.menu.is-on .menu__pie { animation-delay: .2s; }
@keyframes menuSube { from { transform: translateY(22px) } to { transform: none } }

/* menú más contenido */
.menu__nav a { padding: 15px 0; font-size: 1.55rem; }
.menu__pie { padding-top: 24px; }

/* ── Carrusel: la altura se ajusta a la reseña visible ──
   Sin esto, el contenedor toma la altura de la reseña MÁS LARGA y deja un
   hueco muerto debajo de las cortas. La fija anim.js. */
.val__vp { transition: height .5s cubic-bezier(.16,1,.3,1); }
.val__c { align-self: start; }

/* ── La doble línea del fondo del hero ──
   .vh__meta llevaba un border-top y justo 29 px por debajo empieza el borde
   curvo del panel blanco que se sube encima: se leían como dos rayas
   paralelas. El separador lo hace ya el propio panel, así que el filete
   sobra. Se compensa con algo de espacio arriba para que el pie no se
   pegue a los botones. */
.vh__meta { border-top: 0; padding-top: 0; margin-top: clamp(20px,3vh,32px); }

/* ═══════════════════════════════════════════════════════════════
   MENÚ · sin subtítulos, centrado, X limpia y entrada con más gracia
   ═══════════════════════════════════════════════════════════════ */

/* La X pierde el círculo: a esa escala el borde competía con el propio aspa */
.menu__x { border: 0; border-radius: 0; width: 52px; height: 52px;
  top: 14px; right: clamp(12px,4vw,24px); color: rgba(255,255,255,.6);
  transition: color .3s var(--vh-ease), transform .45s var(--vh-ease); }
.menu__x:hover { background: none; color: #fff; transform: rotate(90deg); }
.menu__x:active { transform: rotate(90deg) scale(.9); }

/* Opciones centradas */
.menu__nav { justify-items: center; text-align: center; }
.menu__nav a { position: relative; display: block; padding: 17px 0;
  border-bottom: 0;                    /* el filete pasa a ::after, para animarlo */
  font-size: 1.65rem; overflow: visible; }

/* filete que crece desde el centro al entrar */
.menu__nav a::before { content: ""; position: absolute; left: 50%; bottom: 0;
  width: 100%; height: 1px; background: rgba(255,255,255,.16);
  transform: translateX(-50%) scaleX(0); transform-origin: center; }
.menu.is-on .menu__nav a::before { animation: filete .85s .1s both cubic-bezier(.22,1,.36,1); }
.menu.is-on .menu__nav a:nth-child(2)::before { animation-delay: .07s; }
.menu.is-on .menu__nav a:nth-child(3)::before { animation-delay: .14s; }
.menu.is-on .menu__nav a:nth-child(4)::before { animation-delay: .21s; }
@keyframes filete {
  from { transform: translateX(-50%) scaleX(0) }
  to   { transform: translateX(-50%) scaleX(1) }
}

/* subrayado de acento que barre al pulsar o pasar por encima */
.menu__nav a::after { content: ""; position: absolute; left: 50%; bottom: 0;
  width: 100%; height: 1px; background: #fff;
  transform: translateX(-50%) scaleX(0); transform-origin: center;
  transition: transform .5s var(--vh-ease); }
.menu__nav a:hover::after, .menu__nav a:active::after,
.menu__nav a:focus-visible::after { transform: translateX(-50%) scaleX(1); }

/* el texto se desplaza un punto al pulsar: respuesta táctil inmediata */
.menu__nav a span { display: inline-block;
  transition: transform .45s var(--vh-ease), letter-spacing .45s var(--vh-ease); }
.menu__nav a:hover span { letter-spacing: .01em; }
.menu__nav a:active span { transform: scale(.96); }

/* ── Entrada del menú ──
   Vuelve la opacidad, que sin ella los enlaces aparecían ya opacos y solo
   se deslizaban: se leía a saltos. El riesgo de que la animación no corra
   y deje el menú invisible se cubre con .anim-ok, que hero.js añade a los
   900 ms pase lo que pase y fuerza el estado final. Mismo patrón que la
   red de seguridad del hero. */
.menu.is-on .menu__nav a,
.menu.is-on .menu__pie {
  animation: menuSube .72s both cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
}
.menu.is-on .menu__nav a:nth-child(2) { animation-delay: .08s; }
.menu.is-on .menu__nav a:nth-child(3) { animation-delay: .16s; }
.menu.is-on .menu__nav a:nth-child(4) { animation-delay: .24s; }
.menu.is-on .menu__pie { animation-delay: .34s; }
@keyframes menuSube {
  from { opacity: 0; transform: translateY(30px) }
  to   { opacity: 1; transform: none }
}
/* GARANTÍA: pasados 900 ms todo visible, se haya animado o no */
.menu.anim-ok .menu__nav a,
.menu.anim-ok .menu__pie,
.menu.anim-ok .menu__nav a::before {
  animation: none !important; opacity: 1 !important; transform: none !important;
  will-change: auto;
}
.menu.anim-ok .menu__nav a::before { transform: translateX(-50%) scaleX(1) !important; }

/* el botón grande también responde al toque */
.menu__cta { transition: transform .3s var(--vh-ease), background .3s; }
.menu__cta:active { transform: scale(.97); }

/* ═══════════════════════════════════════════════════════════════
   ESPACIADO EN MÓVIL
   Medido en 375×667: las secciones tenían 67 px de relleno arriba y abajo,
   o sea 134 px de aire entre una y otra — un 20 % de la altura de pantalla
   en blanco cada vez que cambias de bloque. En escritorio funciona; en
   móvil se lee como que la página está rota. Se baja a ~46, que deja 92 px
   entre secciones: aire suficiente sin huecos muertos.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .band--lede { padding-block: 46px 40px !important; }
  .casa   { padding-block: 46px; }
  .val    { padding-block: 46px; }
  .zona   { padding-block: 46px; }
  .pq     { padding-block: 46px; }
  .cta    { padding-block: 52px; }
  .pie2   { padding-top: 46px; }

  /* dentro de cada bloque también sobraba aire */
  .casa__strip { margin-top: 22px; }
  .pq__h, .zona__h { margin-bottom: 26px; }
  .zona__cab { margin-bottom: 30px; }
  .zona__pie { margin-top: 26px; padding-top: 18px; }
  .cta__grid { margin-top: 26px; }
  .pq__grid { gap: 12px; }
  .sitios { gap: 26px; }
  .val__cab { margin-bottom: 26px; }
  .pie2__cols { padding-block: 30px; }
  .pie2__top { padding-bottom: 28px; }
}

/* ═══════════════════════════════════════════════════════════════
   EL LUGAR · paneles fotográficos
   Las barras de escala se retiran: para Akiver tenían sentido (10 min
   frente a 1 min), pero para Iveka "A orillas" y "Pegada" no son números
   y las proporciones eran inventadas por mí para rellenar. Ahora manda la
   foto y el dato va encima, sin adornos que finjan precisión.
   ═══════════════════════════════════════════════════════════════ */
.sitios { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2vw,24px); }

.sitio { position: relative; display: block; overflow: hidden;
  min-height: clamp(440px,60vh,600px); color: #fff; text-decoration: none;
  transition: transform .55s var(--vh-ease); }
.sitio:hover { transform: translateY(-5px); }

.sitio__ph { position: absolute; inset: 0; display: block; }
.sitio__ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); filter: saturate(.94) brightness(.78);
  transition: transform 1.2s var(--vh-ease), filter .7s var(--vh-ease); }
.sitio:hover .sitio__ph img { transform: scale(1.09); filter: saturate(1) brightness(.86); }

.sitio__veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,10,8,.42) 0%, rgba(8,10,8,.05) 34%,
                                      rgba(8,10,8,.68) 74%, rgba(8,10,8,.92) 100%); }

/* número de agua, grande y muy tenue */
.sitio__num { position: absolute; top: clamp(14px,2vw,26px); right: clamp(16px,2.4vw,30px);
  font-family: var(--display); font-weight: 400; font-size: clamp(3rem,6vw,5.5rem);
  line-height: 1; color: rgba(255,255,255,.16); pointer-events: none; }

.sitio__in { position: absolute; inset: auto 0 0 0; display: grid; gap: 9px;
  padding: clamp(22px,3vw,38px); }
.sitio__n { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem,3.2vw,2.8rem); line-height: 1.04; letter-spacing: -.015em; }
.sitio__u { display: inline-flex; align-items: center; gap: 7px;
  font-size: .66rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.72); }

/* los datos, en línea y separados por un filete fino */
.sitio__d { display: grid; gap: 10px; margin-top: 8px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.24); }
.sitio__d > span { display: flex; align-items: baseline; gap: 10px; }
.sitio__d b { font-family: var(--body); font-weight: 500; font-size: 1.15rem;
  letter-spacing: -.02em; white-space: nowrap; }
.sitio__d i { font-style: normal; font-size: .84rem; font-weight: 300;
  color: rgba(255,255,255,.72); }

.sitio__go { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.sitio__go svg { transition: transform .45s var(--vh-ease); }
.sitio:hover .sitio__go svg { transform: translateX(7px); }
.sitio:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

@media (max-width: 780px) {
  .sitios { grid-template-columns: 1fr; }
  .sitio { min-height: 400px; }
}

/* ═══════════════════════════════════════════════════════════════
   EL LUGAR — tira horizontal
   La sección se clava en pantalla y el contenido se desplaza de lado
   a medida que bajas. La animación va atada a la posición del scroll
   (scrub), no a un temporizador: si el JS no llega a cargar, esto se
   queda como una tira con scroll horizontal normal y se lee igual.
   ═══════════════════════════════════════════════════════════════ */
.tren { background: #fff; padding-block: clamp(40px,6vh,72px) 0; }
.tren__esc { display: flex; align-items: center; overflow: hidden; }
.tren__via { display: flex; align-items: stretch;
  gap: clamp(16px,2vw,34px); padding-inline: clamp(20px,7vw,110px);
  will-change: transform; }

/* texto de entrada */
.tren__intro { flex: none; width: min(400px,74vw); align-self: center;
  padding-right: clamp(10px,2vw,30px); }
.tren__h { font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem,4.4vw,3.5rem); line-height: 1.03; letter-spacing: -.02em;
  margin: 12px 0 16px; }
.tren__p { font-size: .95rem; font-weight: 300; line-height: 1.8; color: #4a463c; }
.tren__pista { display: block; margin-top: 26px; width: 78px; height: 1px;
  background: rgba(28,25,21,.16); overflow: hidden; }
.tren__pista i { display: block; width: 34%; height: 100%; background: var(--tinta);
  animation: trenPista 2.4s infinite cubic-bezier(.6,0,.4,1); }
@keyframes trenPista { 0% { transform: translateX(-110%) } 100% { transform: translateX(320%) } }

/* cada casa */
.tren__casa { position: relative; flex: none; display: block; overflow: hidden;
  width: clamp(280px,42vw,560px); height: clamp(400px,72vh,660px);
  border-radius: 3px; color: #fff; isolation: isolate; }
.tren__ph { position: absolute; inset: 0; display: block; }
.tren__ph img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.3s var(--vh-ease); }
.tren__casa:hover .tren__ph img { transform: scale(1.05); }
.tren__veil { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,11,9,.86) 0%, rgba(10,11,9,.36) 45%, rgba(10,11,9,.1) 100%); }
.tren__num { position: absolute; top: clamp(18px,2vw,26px); left: clamp(18px,2vw,26px);
  font-family: var(--display); font-weight: 300; font-size: 2.4rem; line-height: 1;
  color: rgba(255,255,255,.5); }
.tren__in { position: absolute; left: 0; right: 0; bottom: 0; display: grid;
  gap: 12px; padding: clamp(20px,2.4vw,32px); }
.tren__n { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem,2.6vw,2.2rem); line-height: 1.05; letter-spacing: -.02em; }
.tren__u { font-size: .62rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.62); }
.tren__d { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }
.tren__d b { display: block; font-weight: 500; font-size: .84rem; letter-spacing: -.01em; }
.tren__d i { display: block; margin-top: 2px; font-style: normal; font-size: .68rem;
  font-weight: 300; line-height: 1.45; color: rgba(255,255,255,.62); }
.tren__go { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px;
  font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.tren__go svg { transition: transform .45s var(--vh-ease); }
.tren__casa:hover .tren__go svg { transform: translateX(5px); }

/* cierre de la tira */
.tren__fin { flex: none; width: min(400px,74vw); align-self: center;
  padding-left: clamp(10px,2vw,30px); }
.tren__finh { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem,3.4vw,2.8rem); line-height: 1.05; letter-spacing: -.02em; }
.tren__finp { margin: 16px 0 24px; font-size: .92rem; font-weight: 300;
  line-height: 1.8; color: #4a463c; }

/* Sin JS —o en móvil— la tira es un carrusel con scroll de toda la vida. */
.tren__esc { overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none; }
.tren__esc::-webkit-scrollbar { display: none; }
.tren__casa, .tren__intro, .tren__fin { scroll-snap-align: center; }
/* cuando el JS clava la sección, manda él: se anula el scroll nativo */
.tren.is-pin .tren__esc { overflow: hidden; }

@media (max-width: 720px) {
  .tren { padding-top: 30px; }
  .tren__via { gap: 14px; padding-inline: 20px; }
  .tren__intro, .tren__fin { width: 78vw; }
  .tren__casa { width: 78vw; height: 470px; }
  .tren__d { grid-template-columns: 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .tren__pista i { animation: none; width: 100% } }

/* ═══════════════════════════════════════════════════════════════
   MENÚ MÓVIL — revisión
   Tres cosas: salía pegado arriba, las opciones eran pequeñas y el fondo
   casi negro chocaba con una web que es blanca de arriba abajo.

   Lo de "sale muy arriba" no era el padding: .menu__pie llevaba
   `margin-top: auto`, y ese auto se come todo el hueco sobrante y empuja
   la navegación contra el techo, anulando el justify-content: center del
   contenedor. El auto va ahora en el <nav>, que es lo que hay que centrar.
   ═══════════════════════════════════════════════════════════════ */
.menu { background: #f5f3ee; color: var(--tinta);
  padding: clamp(76px,11vh,104px) clamp(24px,7vw,44px) clamp(28px,5vh,40px); }
.menu__nav { margin-block: auto; }          /* <- el auto que centra de verdad */
.menu__pie { margin-top: 0; padding-top: clamp(26px,5vh,38px); }

.menu__nav a { color: var(--tinta);
  padding: clamp(15px,2.4vh,21px) 0;
  font-size: clamp(1.85rem,8.4vw,2.35rem);
  border-bottom: 1px solid rgba(22,21,15,.13); }
.menu__nav a i { color: rgba(22,21,15,.42); }
.menu__nav a::before { background: rgba(22,21,15,.13); }
.menu__nav a::after { background: var(--tinta); }

.menu__x { border-color: rgba(22,21,15,.2); color: var(--tinta);
  top: clamp(16px,3vh,24px); }
.menu__x:hover { background: rgba(22,21,15,.06); border-color: rgba(22,21,15,.45); }
.menu__x:focus-visible { outline-color: var(--tinta); }

.menu__cta { background: var(--tinta); color: #fff; }
.menu__cta + .menu__cta { background: none; color: var(--tinta);
  border-color: rgba(22,21,15,.28); }
.menu__tel { color: rgba(22,21,15,.55); }

/* ── Hero: un pelín más de aire por abajo ──
   Con la nav ocupando la parte de arriba, un bloque centrado de forma
   geométrica se percibe bajo. Se sube subiendo el colchón inferior. */
@media (max-width: 720px) {
  .vh { padding-bottom: clamp(66px,10vh,100px); }
  /* Estaba quedando a 274 px de la cabecera y a 32 del pie de foto: la
     regla base deja .vh__body con margin-top:auto y solo ese lado en auto
     lo empuja hasta abajo del todo. Con los dos lados en auto se reparte,
     y el margen del pie de foto lo sube un poco más para compensar el
     peso visual de la cabecera. */
  .vh__body { margin-block: auto; }
  .vh__meta { margin-top: clamp(44px,8vh,70px); }
}

/* ═══════════════════════════════════════════════════════════════
   VALORACIONES — revisión
   La reseña iba en Melodrama, que es una display: bonita en dos palabras
   de titular, ilegible en un párrafo de cuatro líneas. Pasa a Poppins.
   Y todo el bloque estaba en grises muy claros sobre blanco; se sube el
   contraste y se apoya la cita en una tarjeta con algo de cuerpo.
   ═══════════════════════════════════════════════════════════════ */
.val { background: #fff; }
.val__c blockquote { font-family: var(--body); font-weight: 300;
  font-size: clamp(1.05rem,1.7vw,1.32rem); line-height: 1.72; letter-spacing: -.005em;
  color: #232019; }
/* la comilla grande da peso visual sin cargar de color */
.val__c blockquote::before { content: "\201C"; display: block;
  font-family: var(--display); font-size: 3.4rem; line-height: .5;
  margin-bottom: 20px; color: rgba(22,21,15,.22); }
.val__s { color: #b5851f; letter-spacing: .26em; }
.val__c figcaption b { font-size: 1.02rem; color: var(--tinta); }
.val__c figcaption span { color: rgba(28,25,21,.6); }
.val__num { color: var(--tinta); }
.val__meta { color: rgba(28,25,21,.62); }
.val__pos { color: rgba(28,25,21,.62); }
.val__cab .eyebrow { color: rgba(28,25,21,.55); }
/* El panel va en CADA FICHA, no en el visor.
   Estaba en .val__vp con 40 px de relleno, pero anim.js fija la altura del
   visor midiendo la ficha (getBoundingClientRect) y con box-sizing:
   border-box ese alto INCLUYE el relleno. Resultado: se recortaban los
   últimos ~80 px de cada reseña, que es justo donde va el nombre del
   huésped. Iván pidió que se vieran los nombres y no se veían por esto.
   Con el relleno en la ficha, la medida ya lo cuenta. */
.val__vp { background: none; padding: 0; }
.val__c { background: #f5f3ee; border-radius: 3px;
  padding: clamp(26px,3.4vw,40px); }

/* ═══════════════════════════════════════════════════════════════
   TIRA DEL LUGAR — revisión
   El enlace de cierre salía en azul de navegador: la clase .b2 se usó en
   el HTML y nunca se llegó a escribir la regla.
   ═══════════════════════════════════════════════════════════════ */
.b2 { display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 15px 32px; border-radius: 999px;
  background: var(--tinta); color: #fff; text-decoration: none;
  font-family: var(--body); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  transition: transform .35s var(--vh-ease), background .3s; }
.b2:hover { background: #2c2a20; transform: translateY(-2px); }

/* Las fichas llevaban dos datos + nombre + pueblo + botón: demasiado para
   una tarjeta que pasa de largo. Se queda el nombre, el pueblo y la
   llamada; el detalle está en la landing de cada casa. */
.tren__d { display: none; }
.tren__in { gap: 9px; }

/* ═══════════════════════════════════════════════════════════════
   LAS CASAS — nueva estructura
   Antes: foto grande a un lado, texto al otro y una tira de 4 miniaturas
   debajo. Confundía —dos sitios distintos donde pinchar para lo mismo— y
   dejaba los servicios sueltos en una fila de puntitos.

   Ahora: primero SOLO contenido (quién es, cuánta gente entra, qué tiene)
   y debajo una única galería deslizable a todo lo ancho.
   ═══════════════════════════════════════════════════════════════ */
.casa, .casa--alt { display: block; background: #fff;
  padding: clamp(52px,8vh,100px) 0; max-width: none; }

.casa__body { max-width: 1240px; margin-inline: auto;
  padding-inline: clamp(20px,4vw,54px);
  display: grid; align-items: start;
  grid-template-columns: minmax(0,1fr) minmax(0,.8fr);
  column-gap: clamp(30px,6vw,100px); }
.casa__idx   { grid-column: 1; }
.casa__name  { grid-column: 1; }
.casa__desc  { grid-column: 1; max-width: 42ch; }
/* los datos se alinean con el titular, no debajo del párrafo */
.casa__specs { grid-column: 2; grid-row: 2 / span 2; margin: 12px 0 0;
  grid-template-columns: repeat(3,minmax(0,1fr)); }
.casa__am    { grid-column: 1 / -1; }
.casa__acts  { grid-column: 1 / -1; }

/* ── Servicios ──
   Iban en una fila con puntitos de separación que se partía por cualquier
   sitio. Ahora es una rejilla: cada servicio en su línea, todos alineados
   por la izquierda y con su guion delante. */
.casa__am { display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 11px clamp(20px,3vw,44px); list-style: none;
  margin: clamp(30px,4vh,44px) 0 clamp(28px,4vh,40px); padding: 0;
  border-top: 1px solid rgba(28,25,21,.13); padding-top: clamp(24px,3vh,34px); }
.casa__am li { display: grid; grid-template-columns: 14px 1fr; align-items: baseline;
  gap: 10px; font-size: .88rem; font-weight: 300; color: #3d3a32; }
.casa__am li::before { content: ""; width: 10px; height: 1px;
  background: rgba(28,25,21,.4); transform: translateY(-4px); }
.casa__am li + li::before { border-radius: 0; margin: 0; }  /* anula los puntitos */

/* ── La galería ──
   Va a sangre: se sale del padding de la sección para que la primera y la
   última foto se corten en el borde y se vea que hay más a los lados. */
.tira { margin-top: clamp(38px,5.5vh,64px); }
.tira__via { display: flex; gap: clamp(6px,.8vw,12px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding-inline: clamp(20px,4vw,54px);
  scroll-padding-inline: clamp(20px,4vw,54px);
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; }
.tira__via::-webkit-scrollbar { display: none; }
.tira__via.is-arrastrando { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.tira__via.is-arrastrando * { pointer-events: none; }

.tira__f { flex: 0 0 clamp(230px,25vw,336px); scroll-snap-align: center;
  position: relative; display: block; overflow: hidden;
  padding: 0; border: 0; background: none; cursor: pointer;
  aspect-ratio: 4/3; border-radius: 2px; }
.tira__f img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--vh-ease), filter .5s; }
.tira__f:hover img { transform: scale(1.06); filter: saturate(1.08); }
.tira__f:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* la última ficha es la puerta al visor completo */
.tira__f--mas { background: #f5f3ee; display: grid; place-items: center; }
.tira__f--mas span { display: grid; gap: 2px; text-align: center;
  font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(28,25,21,.55); }
.tira__f--mas b { font-family: var(--display); font-weight: 400; font-size: 2.4rem;
  letter-spacing: -.02em; color: var(--tinta); line-height: 1; }
.tira__f--mas:hover { background: #efece4; }

@media (max-width: 900px) {
  .casa__body { grid-template-columns: 1fr; }
  .casa__specs { grid-column: 1; grid-row: auto; margin-top: 26px; }
  .casa__am { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .casa__am { grid-template-columns: 1fr; gap: 9px; }
  .tira__f { flex-basis: 76vw; }
}

/* ═══════════════════════════════════════════════════════════════
   RITMO VERTICAL
   Cada sección traía su propio padding (110, 120, 124, 130 px…), así que
   entre dos bloques se acumulaban más de 200 px de blanco: la casa 01 y
   la 02 parecían páginas distintas. Se unifica y se recorta un tercio.
   Una sola escala para todo, en un único sitio.
   ═══════════════════════════════════════════════════════════════ */
.casa, .casa--alt { padding-block: clamp(38px,5.4vh,68px); }
.pq, .val, .cta { padding-block: clamp(46px,6.6vh,84px); }
.band--lede { padding-block: clamp(40px,6vh,70px) clamp(32px,5vh,56px) !important; }
.tren { padding-block: clamp(30px,4.4vh,54px) 0; }
/* entre las dos casas basta una línea fina: marca el corte sin gastar aire */
.casa + .casa { border-top: 1px solid rgba(28,25,21,.1); }

/* ═══════════════════════════════════════════════════════════════
   HERO — legibilidad
   Aclarar la foto se llevó por delante el contraste del titular. En vez de
   volver a oscurecerlo todo (que era el problema de antes), el velo se
   concentra AHORA donde está el texto: una elipse detrás del bloque
   central, y los bordes de la foto se quedan claros y con color.
   ═══════════════════════════════════════════════════════════════ */
.vh__img { filter: saturate(1.14) contrast(1.03) brightness(.96); }
.vh__veil {
  background:
    radial-gradient(56% 44% at 50% 49%, rgba(6,8,6,.68) 0%, rgba(6,8,6,.46) 46%, transparent 76%),
    linear-gradient(180deg, rgba(6,8,6,.42) 0%, transparent 22%,
                            transparent 66%, rgba(6,8,6,.62) 100%);
}
.vh__h, .vh__sub, .vh__kick { text-shadow: 0 2px 30px rgba(6,8,6,.75), 0 1px 3px rgba(6,8,6,.45); }

/* ═══════════════════════════════════════════════════════════════
   MENÚ — cristal
   El panel deja pasar la foto del hero desfocada en vez de taparla con un
   color plano. Si el navegador no soporta backdrop-filter (o lo tiene
   desactivado) cae a hueso opaco: nunca queda texto sobre una foto nítida.
   ═══════════════════════════════════════════════════════════════ */
.menu { background: rgba(248,246,241,.62);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .menu { background: #f5f3ee; }
}
/* sobre cristal el texto necesita algo más de cuerpo que sobre color plano */
.menu__nav a { text-shadow: 0 1px 14px rgba(248,246,241,.9); }
.menu__nav a { border-bottom-color: rgba(22,21,15,.18); }
.menu__x { background: rgba(255,255,255,.35); border-color: rgba(22,21,15,.22); }

/* ═══════════════════════════════════════════════════════════════
   WHATSAPP FLOTANTE
   Nace oculto y solo aparece cuando .wa-visible entra en <body>, que lo
   pone hero.js al pasar la primera pantalla. Si el JS no llegara a
   ejecutarse el botón simplemente no sale: no puede tapar nada ni dejar
   un hueco raro, que es lo que importa en un elemento fijo.
   ═══════════════════════════════════════════════════════════════ */
.wa { position: fixed; z-index: 55; right: clamp(16px,2.6vw,28px);
  bottom: clamp(16px,2.6vw,28px);
  width: 68px; height: 68px; display: none; place-items: center;
  border-radius: 50%; background: #25d366; color: #fff;
  box-shadow: 0 10px 30px -8px rgba(8,10,8,.45);
  transition: transform .35s var(--vh-ease), box-shadow .35s; }
/* El icono se dimensiona aquí y no en el atributo del SVG: así el tamaño
   del botón y el del icono se cambian en el mismo sitio. */
.wa svg { width: 32px; height: 32px; }

/* El anillo que late. Va en un ::after y NO en el botón porque la regla de
   arriba sigue en pie: la opacidad del botón no se anima nunca. Aquí lo que
   parpadea es un adorno; si el reloj de animaciones se congela, lo peor que
   queda es un aro fijo alrededor del botón, que se ve perfectamente.
   pointer-events:none para que el aro no se coma el clic al expandirse. */
.wa::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25d366; pointer-events: none;
  animation: waLatido 2.4s ease-out infinite;
}
@keyframes waLatido {
  0%       { transform: scale(1);    opacity: .75 }
  70%, 100%{ transform: scale(1.55); opacity: 0 }
}
/* Aparece con display + animación SIN relleno: si la animación no llega a
   ejecutarse, el botón se queda en su estado natural, que es visible y en
   su sitio. Se probó con transición desde opacidad 0 y el resultado era un
   botón invisible pero clicable en la esquina. Nunca más. */
body.wa-visible .wa { display: grid; animation: waEntra .45s var(--vh-ease); }
/* El keyframe NO toca la opacidad. Si el reloj de animaciones está parado
   —pasa: pestaña en segundo plano, compositor ocupado— el elemento se
   queda congelado en el fotograma 0 %; con opacidad ahí dentro eso es un
   botón invisible. Moviendo solo la posición, lo peor que puede pasar es
   que aparezca 16 px más abajo. Visible siempre. */
@keyframes waEntra {
  from { transform: translateY(16px) scale(.86) }
  to   { transform: none }
}
.wa:hover { transform: scale(1.06); box-shadow: 0 14px 34px -8px rgba(8,10,8,.55); }
.wa:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* con el menú abierto estorba */
body.menu-abierto .wa { display: none; }
@media (max-width: 720px) { .wa { width: 60px; height: 60px; }
  .wa svg { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) {
  body.wa-visible .wa { animation: none; }
  .wa::after { animation: none; opacity: .55; }
}

/* ═══════════════════════════════════════════════════════════════
   VALORACIONES — separación entre reseñas
   Iban pegadas: al pasar de una a otra parecían un mismo bloque de texto
   partido. Con un hueco real se ve que son piezas distintas, y asoma un
   trozo de la siguiente que invita a seguir. El carrusel se coloca por la
   posición de la ficha, así que el hueco puede ser el que haga falta.
   ═══════════════════════════════════════════════════════════════ */
.val__pista { gap: clamp(18px,2.4vw,34px); }
/* el visor sigue recortando: dejar asomar la siguiente ficha obligaba a
   sacarla fuera del contenedor y eso desborda la página por la derecha */

/* ═══════════════════════════════════════════════════════════════
   HERO — velo parejo
   El velo iba en elipse centrada para apretar solo donde está el texto.
   Sobre fotos claras esa elipse se lee como una mancha negra en medio.
   Se cambia por un velo plano: exactamente el mismo tono en los cuatro
   lados, sin ningún foco. El contraste del titular lo sigue dando su
   propia sombra, que es lo único que no se ve como suciedad en la foto.
   ═══════════════════════════════════════════════════════════════ */
.vh__veil { background: rgba(8,10,8,.46); }
.vh__img { filter: saturate(1.14) contrast(1.03) brightness(.99); }
.vh__h, .vh__sub, .vh__kick { text-shadow: 0 2px 34px rgba(6,8,6,.85), 0 1px 4px rgba(6,8,6,.6); }

/* ═══════════════════════════════════════════════════════════════
   LAS DOS TARJETAS
   La raya blanca era el hueco de la retícula: 2 px de fondo asomando
   entre las dos fotos. Sin hueco no hay raya.
   ═══════════════════════════════════════════════════════════════ */
.dos { gap: 0; }

/* ═══════════════════════════════════════════════════════════════
   DATOS DE CADA CASA
   Huéspedes · Dormitorio · Baño llevaban línea arriba, línea abajo y una
   línea vertical entre cada par: cinco rayas para tres números. Se quedan
   las dos horizontales, y luego se quita también la de abajo porque
   chocaba con la de las características.
   ═══════════════════════════════════════════════════════════════ */
.casa__specs > div + div { border-left: 0; padding-left: 0; }
.casa__specs > div { padding-right: clamp(14px,2vw,26px); }
.casa__specs { border-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   CARACTERÍSTICAS — una sola fila y una sola marca
   Dos fallos juntos: el primer servicio salía con un guion y los demás
   con un punto, porque la regla vieja `.casa__am li + li::before` es más
   específica que `.casa__am li::before` y solo pisaba a los que tienen
   hermano delante. Y entre los datos y los servicios había DOS líneas:
   el borde de abajo de uno y el de arriba del otro.
   Se resuelve quitando marcas y bordes: los servicios pasan a etiquetas
   en fila, que además ocupan la mitad de alto.
   ═══════════════════════════════════════════════════════════════ */
.casa__am { display: flex; flex-wrap: wrap; gap: 8px;
  border-top: 0; padding-top: 0;
  margin: clamp(22px,3vh,30px) 0 clamp(26px,3.6vh,36px); }
.casa__am li { display: inline-flex; align-items: center;
  padding: 8px 15px; border: 1px solid rgba(28,25,21,.16); border-radius: 999px;
  font-size: .78rem; font-weight: 300; color: #3d3a32; }
.casa__am li::before, .casa__am li + li::before { content: none; display: none; }

/* ═══════════════════════════════════════════════════════════════
   MENÚ — sin rayas
   Cada opción llevaba su línea debajo: cuatro rayas apiladas en una
   pantalla que ya tiene poco. El orden lo marca ahora el aire entre
   opciones, y el foco se ve apagando las demás en vez de subrayando.
   ═══════════════════════════════════════════════════════════════ */
.menu__nav { margin-block: auto; width: 100%; counter-reset: opcion; }
.menu__nav a { position: relative; display: flex; align-items: baseline;
  justify-content: center; gap: 0;
  border-bottom: 0; padding: clamp(12px,2.2vh,20px) 0;
  line-height: 1.05; text-shadow: none;
  transition: opacity .4s var(--vh-ease); }
.menu__nav a::before, .menu__nav a::after { display: none; }
.menu__nav:hover a { opacity: .38; }
.menu__nav:hover a:hover, .menu__nav a:active { opacity: 1; }
.menu__pie { padding-top: clamp(22px,4vh,34px); }
.menu__tel { color: rgba(22,21,15,.6); }

/* ═══════════════════════════════════════════════════════════════
   MENÚ — el botón de cerrar
   Era un círculo con borde sobre el cristal: un objeto opaco flotando
   donde no hay ningún otro. Ahora es solo el aspa, sin caja ni fondo.
   ═══════════════════════════════════════════════════════════════ */
.menu__x { border: 0; background: none; width: 52px; height: 52px;
  color: rgba(22,21,15,.45);
  transition: color .3s var(--vh-ease), transform .5s var(--vh-ease); }
.menu__x:hover, .menu__x:focus-visible { background: none; color: var(--tinta);
  transform: rotate(90deg); }
.menu__x:focus-visible { outline: 0; }
.menu__x svg { width: 22px; height: 22px; }

/* ═══════════════════════════════════════════════════════════════
   HERO — móvil
   Los dos botones ocupaban el ancho entero cada uno, uno debajo del otro:
   dos barras enormes que se comían la foto. En dos columnas ocupan la
   mitad y el bloque deja de parecer un formulario.
   Y la foto se desenfoca un punto: en una pantalla pequeña el titular
   compite con todos los detalles de la imagen.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .vh__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .vh__cta, .vh__alt { width: auto; min-height: 50px; padding-inline: 8px;
    display: grid; place-items: center; text-align: center; }
  .vh__img { filter: saturate(1.14) contrast(1.03) brightness(.99) blur(2.5px); }
  .vh__sub { max-width: 30ch; }
}

/* ═══════════════════════════════════════════════════════════════
   MENÚ MÓVIL — se le quita todo lo que no hace falta
   Tenía aspa, cuatro opciones con su número, un botón de píldora y el
   teléfono. En una pantalla de móvil eso es mucho ruido para cuatro
   enlaces. Fuera los números (el orden ya lo da la lista) y fuera la
   píldora: "Ver disponibilidad" es la primera opción de la propia lista.

   El cristal se mantiene pero más opaco: sobre una foto desenfocada al
   62 % el texto bailaba según la foto que tocara.
   ═══════════════════════════════════════════════════════════════ */
.menu { background: rgba(250,249,245,.9);
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  padding: clamp(80px,12vh,110px) clamp(28px,8vw,48px) clamp(30px,5vh,42px); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .menu { background: #faf9f5; }
}
/* sin números: eran otro elemento más compitiendo por la atención */
.menu__nav a > span::before { content: none; }
.menu__nav a { gap: 0; font-size: clamp(2.1rem,10vw,2.9rem);
  padding: clamp(14px,2.6vh,22px) 0; }
.menu__pie { padding-top: clamp(26px,5vh,40px); }
.menu__tel { min-height: 0; font-size: 1rem; font-weight: 400; color: rgba(22,21,15,.72); }

/* ═══════════════════════════════════════════════════════════════
   DÓNDE ESTAMOS — mapa
   La imagen es una composición de teselas de OpenStreetMap descargadas
   una sola vez y servidas desde este dominio. No hay iframe de Google ni
   de nadie: la web sigue sin hacer una sola petición a terceros, y el
   visitante ve el mapa sin que nadie registre que lo ha visto.

   Los pines se colocan en porcentajes calculados desde las coordenadas
   reales (proyección Mercator, la misma de las teselas). Por eso son
   texto de verdad: se leen a cualquier tamaño y se pueden pulsar.
   ═══════════════════════════════════════════════════════════════ */
.mapa { background: #fff; padding-block: clamp(46px,6.6vh,84px);
  padding-inline: clamp(20px,4vw,54px); }
.mapa__cab { max-width: 1240px; margin: 0 auto clamp(28px,4vh,44px); }
.mapa__h { font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem,4.2vw,3.4rem); line-height: 1.03; letter-spacing: -.022em;
  margin: 12px 0 16px; }
.mapa__p { max-width: 60ch; font-size: .95rem; font-weight: 300; line-height: 1.8;
  color: #4a463c; }

/* ── El lienzo ── */
.mapa__lienzo { position: relative; max-width: 1240px; margin: 0 auto;
  border-radius: 4px; overflow: hidden; background: #dfe7e4; }
.mapa__lienzo img { width: 100%; height: auto; display: block; }

.mapa__pin { position: absolute; translate: -50% -50%;
  display: grid; justify-items: center; gap: 5px; z-index: 2;
  pointer-events: none; }
.mapa__punto { width: 13px; height: 13px; border-radius: 50%;
  background: var(--tinta); border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(8,10,8,.35); }
.mapa__nombre { white-space: nowrap; background: rgba(255,255,255,.94);
  border-radius: 999px; padding: 5px 12px;
  font-size: .74rem; font-weight: 500; letter-spacing: .04em;
  color: var(--tinta); box-shadow: 0 1px 5px rgba(8,10,8,.2); }

/* las dos casas pesan más que las referencias */
.mapa__pin--casa { z-index: 3; }
.mapa__pin--casa .mapa__punto { width: 18px; height: 18px; background: #b5851f; }
.mapa__pin--casa .mapa__nombre { font-size: .88rem; font-weight: 600;
  padding: 7px 16px; background: var(--tinta); color: #fff; }
/* halo que late para que se distingan de un vistazo; si la animación no
   corre, el pin se ve igual: el halo es decoración, no el propio pin */
.mapa__pin--casa .mapa__punto::after { content: ""; position: absolute;
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #b5851f;
  animation: mapaLate 2.6s ease-out infinite; }
@keyframes mapaLate { to { transform: scale(3); opacity: 0 } }

.mapa__pin--ref { opacity: .82; }
.mapa__pin--ref .mapa__punto { width: 10px; height: 10px; background: #6b6659; }
.mapa__pin--ref .mapa__nombre { font-size: .72rem; font-weight: 500;
  background: rgba(255,255,255,.92); color: #3f3b32; }

/* ── Escapadas: lo que NO cabe en el mapa ──
   Cabárceno, Santander o Bilbao caen fuera del recuadro de teselas, y
   ensancharlo para meterlos obligaría a alejar el zoom y dejaría las dos
   casas convertidas en dos motas. Así que lo de lejos se cuenta con
   números, no con cartografía: los minutos salen de distancias.json
   —mediciones reales— y el rango va de la casa más cerca a la más lejos. */
.mapa__lejos { max-width: 1240px; margin: clamp(28px,4vh,44px) auto 0;
  padding: 0 clamp(16px,4vw,40px); }
.mapa__lejosT { font-size: .72rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(28,25,21,.45); margin-bottom: 16px; }
.mapa__lejosL { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px; }
.mapa__lejosL li { display: inline-flex; align-items: baseline; gap: 10px;
  border: 1px solid rgba(28,25,21,.14); border-radius: 999px;
  padding: 9px 18px; background: rgba(255,255,255,.7); }
.mapa__lejosL b { font-weight: 600; font-size: .92rem; color: var(--tinta); }
.mapa__lejosL em { font-style: normal; font-size: .8rem; font-variant-numeric: tabular-nums;
  color: rgba(28,25,21,.55); }
/* El destacado va al primero de la lista, que es el que pidió el cliente */
.mapa__lejosL li:first-child { background: var(--tinta); border-color: var(--tinta); }
.mapa__lejosL li:first-child b { color: #fff; }
.mapa__lejosL li:first-child em { color: rgba(255,255,255,.72); }
@media (max-width: 760px) {
  .mapa__lejosL li { padding: 8px 14px; }
  .mapa__lejosL b { font-size: .84rem; }
}

.mapa__cred { position: absolute; right: 0; bottom: 0; z-index: 4;
  background: rgba(255,255,255,.86); padding: 4px 9px;
  border-radius: 3px 0 0 0;
  font-size: .54rem; font-weight: 300; color: rgba(28,25,21,.6); }
.mapa__cred a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── Las dos fichas ── */
.mapa__fichas { max-width: 1240px; margin: clamp(26px,3.6vh,40px) auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.4vw,34px); }
.mapa__casa { border-top: 1px solid rgba(28,25,21,.14); padding-top: clamp(18px,2.4vh,24px); }
.mapa__idx { margin: 0; font-size: .58rem; font-weight: 600; letter-spacing: .24em;
  color: rgba(28,25,21,.4); }
.mapa__n { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem,2.4vw,2rem); letter-spacing: -.02em; margin: 8px 0 4px; }
.mapa__u { font-size: .6rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(28,25,21,.5); }
.mapa__t { list-style: none; margin: clamp(16px,2.2vh,22px) 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.mapa__t li { display: grid; gap: 2px; }
.mapa__t b { font-family: var(--body); font-weight: 500; font-size: 1.02rem;
  letter-spacing: -.02em; }
.mapa__t span { font-size: .72rem; font-weight: 300; color: rgba(28,25,21,.6);
  line-height: 1.4; }
.mapa__acts { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.mapa__ver { display: inline-flex; align-items: center; min-height: 44px;
  padding: 12px 24px; border-radius: 999px; background: var(--tinta); color: #fff;
  font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: background .3s, transform .3s var(--vh-ease); }
.mapa__ver:hover { background: #2c2a20; transform: translateY(-2px); }
.mapa__gm { font-size: .78rem; font-weight: 300; color: rgba(28,25,21,.62);
  border-bottom: 1px solid rgba(28,25,21,.22); padding-bottom: 1px;
  transition: color .3s, border-color .3s; }
.mapa__gm:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.mapa__nota { max-width: 1240px; margin: clamp(22px,3vh,32px) auto 0;
  font-size: .72rem; font-weight: 300; line-height: 1.6; color: rgba(28,25,21,.5); }

@media (max-width: 760px) {
  .mapa__fichas { grid-template-columns: 1fr; gap: 24px; }
  /* en pantalla pequeña las etiquetas de referencia se pisan entre ellas:
     se quedan solo los puntos, y las dos casas mantienen su nombre */
  .mapa__pin--ref .mapa__nombre { display: none; }
  .mapa__pin--casa .mapa__nombre { font-size: .72rem; padding: 5px 12px; }
  .mapa__t { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa__pin--casa .mapa__punto::after { animation: none; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   QUÉ HACER — la zona
   Sección construida a propósito SIN fotografías: no hay ni una sola
   imagen del entorno entre las 41 disponibles, y meter banco de imágenes
   se nota y resta credibilidad a las fotos que sí son reales. El peso
   visual lo llevan las cifras, que son todas verificables.
   Cuando lleguen fotos de verdad entran aquí sin tocar la estructura.
   ═══════════════════════════════════════════════════════════════ */
.zona { background: #fff; padding-block: clamp(46px,6.6vh,84px);
  padding-inline: clamp(20px,4vw,54px); }
.zona__cab, .zona__cifras, .zona__bloque, .zona__cosas, .zona__nota {
  max-width: 1240px; margin-inline: auto; }
.zona__cab { margin-bottom: clamp(30px,4.4vh,48px); }
.zona__h { font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem,4.2vw,3.4rem); line-height: 1.03; letter-spacing: -.022em;
  margin: 12px 0 16px; }
.zona__p { max-width: 58ch; font-size: .95rem; font-weight: 300; line-height: 1.8;
  color: #4a463c; }

/* ── Las cifras ── */
.zona__cifras { list-style: none; padding: 0;
  margin-block: 0 clamp(38px,5.4vh,66px);
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(16px,2.6vw,36px);
  border-top: 1px solid rgba(28,25,21,.14); padding-top: clamp(22px,3vh,32px); }
.zona__cifras li { display: grid; gap: 6px; align-content: start; }
.zona__cifras b { font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem,4vw,3.2rem); line-height: 1; letter-spacing: -.03em;
  color: var(--tinta); }
.zona__cifras span { font-size: .74rem; font-weight: 300; line-height: 1.5;
  color: rgba(28,25,21,.6); }

/* ── Encabezado de bloque, compartido ── */
.zona__bloque { margin-bottom: clamp(38px,5.4vh,66px); }
.zona__t { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 20px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(28,25,21,.14); }
.zona__t h3 { margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem,2.4vw,2rem); letter-spacing: -.02em; }
.zona__leyenda { margin: 0; font-size: .6rem; font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(28,25,21,.45); }
.zona__leyenda b { font-weight: 600; color: rgba(28,25,21,.7); }

/* ── Playas ── */
.zona__playas { list-style: none; margin: 0; padding: 0; }
.zona__playa { display: grid; align-items: start;
  grid-template-columns: minmax(0,.9fr) minmax(0,2fr) auto;
  gap: 10px clamp(20px,3vw,48px);
  padding: clamp(18px,2.6vh,26px) 0; border-bottom: 1px solid rgba(28,25,21,.1); }
.zona__pn b { display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem,2vw,1.6rem); letter-spacing: -.02em; }
.zona__pn i { display: block; margin-top: 3px; font-style: normal;
  font-size: .58rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(28,25,21,.45); }
.zona__px { margin: 0; font-size: .88rem; font-weight: 300; line-height: 1.75; color: #4a463c; }
.zona__pm { margin: 0; white-space: nowrap; text-align: right;
  font-size: .74rem; font-weight: 300; color: rgba(28,25,21,.5); }
.zona__pm b { font-family: var(--body); font-weight: 500; font-size: 1.02rem;
  letter-spacing: -.02em; color: var(--tinta); }

/* ── Las cuatro cosas ── */
.zona__cosas { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(24px,3.4vw,52px); margin-bottom: clamp(38px,5.4vh,66px); }
.zona__c h3 { margin: 0 0 12px; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.2rem,2vw,1.55rem); line-height: 1.2; letter-spacing: -.02em; }
.zona__c p { margin: 0 0 12px; font-size: .88rem; font-weight: 300; line-height: 1.8;
  color: #4a463c; }
.zona__c strong { font-weight: 500; color: var(--tinta); }
/* Los avisos van marcados: mandar a alguien a bajar 763 escalones o a
   contar con un barco que no navega en invierno sin decírselo antes es
   un problema, no una recomendación. */
.zona__aviso { position: relative; padding-left: 16px;
  font-size: .82rem !important; color: rgba(28,25,21,.62) !important; }
.zona__aviso::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: #b5851f; }

/* ── Escapadas ── */
.zona__esc { list-style: none; margin: 0; padding: 0; }
.zona__esc li { display: grid; grid-template-columns: 1fr 72px 72px; align-items: baseline;
  gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(28,25,21,.1); }
.zona__esc span { font-size: .95rem; font-weight: 300; color: #35322a; }
.zona__esc b { text-align: right; font-family: var(--body); font-weight: 500;
  font-size: 1rem; letter-spacing: -.02em; }
.zona__esc b::after { content: " min"; font-size: .62rem; font-weight: 300;
  color: rgba(28,25,21,.45); letter-spacing: 0; }

.zona__nota { font-size: .72rem; font-weight: 300; line-height: 1.6;
  color: rgba(28,25,21,.5); }

@media (max-width: 860px) {
  .zona__cifras { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
  .zona__cosas { grid-template-columns: 1fr; gap: 28px; }
  .zona__playa { grid-template-columns: 1fr auto; }
  .zona__px { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .zona__esc li { grid-template-columns: 1fr 62px 62px; gap: 8px; }
  .zona__esc span { font-size: .88rem; }
}

/* Escapadas: cada cifra lleva ENCIMA de qué casa es. Hubo antes una
   cabecera única arriba de la tabla y no funcionaba —a dos filas de
   distancia vuelven a ser dos números sueltos—, así que la etiqueta se
   repite fila a fila. Es la única forma de que no haya duda ni en móvil
   ni a mitad de la tabla. */
.zona__esc b { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.zona__esc b i { font-family: var(--body); font-style: normal; font-size: .5rem;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(28,25,21,.4); margin-bottom: 3px; }
.zona__esc li { align-items: end; }

/* ═══════════════════════════════════════════════════════════════
   SELECTOR DE IDIOMA
   Vive dentro del panel de menú, que es el único sitio presente en las
   tres páginas y en los tres idiomas. Tres códigos, el activo en tinta
   y los otros dos apagados.
   ═══════════════════════════════════════════════════════════════ */
.idiomas { display: flex; justify-content: center; gap: 4px;
  margin-bottom: clamp(18px,3vh,26px); }
.idiomas a { padding: 8px 14px; border-radius: 999px;
  font-family: var(--body); font-size: .64rem; font-weight: 600;
  letter-spacing: .14em; color: rgba(22,21,15,.45);
  transition: color .3s, background .3s; }
.idiomas a:hover { color: var(--tinta); background: rgba(22,21,15,.06); }
.idiomas a[aria-current="true"] { color: #fff; background: var(--tinta); }

/* ── El nombre del huésped ──
   Es lo que convierte una frase bonita en el testimonio de una persona.
   Iba en gris pequeño al final; ahora tiene peso y una línea que lo separa
   de la cita. */
.val__c figcaption { margin-top: clamp(18px,2.4vh,26px);
  padding-top: clamp(14px,2vh,18px);
  border-top: 1px solid rgba(28,25,21,.14);
  align-items: center; flex-wrap: wrap; }
.val__c figcaption b { font-size: 1.05rem; font-weight: 500; }
.val__c figcaption b::before { content: ""; display: inline-block;
  width: 26px; height: 26px; border-radius: 50%; margin-right: 11px;
  vertical-align: -8px; background: rgba(28,25,21,.1); }
.val__c figcaption span { color: rgba(28,25,21,.55); }

/* ═══════════════════════════════════════════════════════════════
   RESUMEN DE LA ZONA EN LA HOME
   El contenido largo se ha llevado a /la-zona/. Aquí queda un bloque
   corto: cuatro cifras y un enlace. En la portada la gente quiere ver
   las casas y los precios, no leerse las playas.
   ═══════════════════════════════════════════════════════════════ */
.zres { background: #f7f5f0; padding-block: clamp(44px,6.4vh,80px);
  padding-inline: clamp(20px,4vw,54px); }
.zres__in { max-width: 1240px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px,4vw,72px); align-items: center; }
.zres__h { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem,3.8vw,3rem); line-height: 1.04; letter-spacing: -.022em;
  margin: 12px 0 14px; }
.zres__p { font-size: .95rem; font-weight: 300; line-height: 1.8; color: #4a463c;
  max-width: 46ch; margin-bottom: clamp(20px,3vh,28px); }
.zres__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 50px;
  padding: 14px 28px; border-radius: 999px; background: var(--tinta); color: #fff;
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: transform .3s var(--vh-ease), background .3s; }
.zres__cta:hover { transform: translateY(-2px); background: #2c2a20; }
.zres__cta svg { transition: transform .4s var(--vh-ease); }
.zres__cta:hover svg { transform: translateX(4px); }
.zres__cifras { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.6vw,34px); }
.zres__cifras li { display: grid; gap: 5px; align-content: start;
  padding-top: 16px; border-top: 1px solid rgba(28,25,21,.16); }
.zres__cifras b { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem,3.4vw,2.8rem); line-height: 1; letter-spacing: -.03em;
  color: var(--tinta); }
.zres__cifras span { font-size: .74rem; font-weight: 300; line-height: 1.45;
  color: rgba(28,25,21,.6); }
@media (max-width: 820px) { .zres__in { grid-template-columns: 1fr; gap: 28px; } }

/* ═══════════════════════════════════════════════════════════════
   PÁGINA /la-zona/
   Cabecera y pie propios, simples: no hereda el hero ni el footer de la
   home porque no es una portada, es un artículo.
   ═══════════════════════════════════════════════════════════════ */
body.pag { background: #fff; }
.pag__nav { position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(28,25,21,.1);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 13px clamp(20px,4vw,54px); }
.pag__marca { display: inline-flex; align-items: center; gap: 11px; color: var(--tinta);
  font-size: .9rem; font-weight: 500; letter-spacing: -.03em; }
.pag__marca .mark { width: 28px; height: 28px; flex: none; stroke-linejoin: round; }
.pag__links { display: flex; align-items: center; gap: clamp(14px,2.4vw,28px); }
.pag__links a { font-size: .66rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(28,25,21,.6); transition: color .3s; }
.pag__links a:hover { color: var(--tinta); }
.pag__cta { padding: 11px 22px; border-radius: 999px;
  background: var(--tinta); color: #fff !important; }
.pag__cta:hover { background: #2c2a20; }
@media (max-width: 700px) {
  .pag__marca span { display: none; }
  .pag__links a:not(.pag__cta) { display: none; }
}

.zona--pag { padding-top: clamp(38px,6vh,72px); }
.zona--pag .zona__h { font-size: clamp(2.2rem,5vw,4rem); }
.zona--pag .zona__cab { max-width: 34ch; }

.zona__cierre { max-width: 1240px; margin: clamp(44px,6vh,80px) auto 0;
  padding-top: clamp(28px,4vh,44px); border-top: 1px solid rgba(28,25,21,.14); }
.zona__cierre h2 { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem,2.8vw,2.2rem); letter-spacing: -.02em; margin: 10px 0 24px; }
.zona__casas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px,2vw,24px); }
.zona__casas a { display: grid; gap: 5px; padding: clamp(18px,2.4vw,26px);
  background: #f7f5f0; border-radius: 3px; transition: background .3s, transform .3s var(--vh-ease); }
.zona__casas a:hover { background: #efece4; transform: translateY(-2px); }
.zona__casas b { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.2rem,2vw,1.55rem); letter-spacing: -.02em; }
.zona__casas i { font-style: normal; font-size: .6rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(28,25,21,.5); }
@media (max-width: 640px) { .zona__casas { grid-template-columns: 1fr; } }

.pag__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(20px,3vw,40px);
  max-width: 1240px; margin: clamp(40px,6vh,72px) auto 0;
  padding: clamp(20px,3vh,28px) clamp(20px,4vw,54px) clamp(30px,4vh,44px);
  border-top: 1px solid rgba(28,25,21,.14);
  font-size: .72rem; font-weight: 300; color: rgba(28,25,21,.55); }
.pag__pie nav { display: flex; flex-wrap: wrap; gap: 8px clamp(12px,2vw,22px); }
.pag__pie a { color: rgba(28,25,21,.7); }
.pag__pie a:hover { color: var(--tinta); }
.pag__pie p { margin: 0 0 0 auto; }
@media (max-width: 700px) { .pag__pie p { margin-left: 0; flex-basis: 100%; } }

/* ═══════════════════════════════════════════════════════════════
   MAPA — se cuadra
   La imagen es casi cuadrada (1600×1371) y a todo el ancho medía más de
   1.000 px de alto: el titular quedaba arriba del todo, el mapa se comía
   la pantalla y las fichas caían tan abajo que ya no se relacionaban con
   él. Pasa a dos columnas: mapa a la izquierda —más estrecho, por tanto
   la mitad de alto— y las dos casas al lado, que es donde se leen junto
   a sus posiciones.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  .mapa__cuerpo { max-width: 1240px; margin-inline: auto;
    display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
    gap: clamp(26px,3.4vw,52px); align-items: start; }
  .mapa__lienzo { margin: 0; }
  .mapa__fichas { margin: 0; grid-template-columns: 1fr; gap: clamp(20px,2.6vh,32px);
    align-self: center; }
  .mapa__casa:first-child { border-top: 0; padding-top: 0; }
  /* con la columna estrecha, los cuatro tiempos caben mejor en dos filas */
  .mapa__t { grid-template-columns: 1fr 1fr; }
}
/* y el recuadro no crece sin límite en pantallas muy anchas */
.mapa__lienzo { max-height: 78vh; }
.mapa__lienzo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ═══════════════════════════════════════════════════════════════
   PIE DE PÁGINA — v6
   Ya no repite la llamada a reservar: eso está justo encima, en «¿Cuándo
   vienes?», y tenerlo dos veces seguidas hacía que el pie pareciera
   relleno. Un pie es donde se busca algo concreto —el teléfono, el
   registro, la política de cancelación—, así que es eso lo que lleva.
   ═══════════════════════════════════════════════════════════════ */
.pie { position: relative; z-index: 2; overflow: hidden;
  background: #1c3329; color: rgba(233,238,231,.68);
  padding: clamp(46px,7vh,84px) clamp(20px,4vw,54px) clamp(20px,3vh,28px); }
.pie::before { content: ""; position: absolute; inset: auto -12% -46% 46%;
  aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201,154,46,.15), transparent 70%); }

.pie__in { position: relative; max-width: 1240px; margin-inline: auto;
  display: grid; gap: clamp(28px,4vh,44px) clamp(24px,3.4vw,56px);
  grid-template-columns: minmax(0,1.25fr) repeat(3, minmax(0,1fr));
  align-items: start; }

/* ── Bloque de marca ── */
.pie__marca > a { display: inline-flex; align-items: center; gap: 11px; color: #fbfaf6;
  font-size: .92rem; font-weight: 500; letter-spacing: -.03em; }
.pie__marca .mark { width: 30px; height: 30px; flex: none; stroke-linejoin: round; }
.pie__marca p { margin: 16px 0 0; max-width: 34ch;
  font-size: .84rem; font-weight: 300; line-height: 1.75; }
.pie__reg { font-size: .68rem !important; color: rgba(233,238,231,.42) !important;
  margin-top: 12px !important; }

/* ── Columnas ── */
.pie__col { display: grid; gap: 11px; align-content: start; }
.pie__col h3 { margin: 0 0 5px; font-family: var(--body);
  font-size: .56rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(201,154,46,.9); }
.pie__col a { font-size: .86rem; font-weight: 300; color: rgba(233,238,231,.78);
  transition: color .3s; }
.pie__col a:hover { color: #fbfaf6; }

/* las dos casas llevan más peso: son el producto */
.pie__col--casas a { display: grid; gap: 3px; }
.pie__col--casas b { font-family: var(--display); font-weight: 400;
  font-size: 1.12rem; letter-spacing: -.02em; color: #fbfaf6; }
.pie__col--casas i { font-style: normal; font-size: .58rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(233,238,231,.42); }

.pie__tel { font-family: var(--body); font-weight: 400;
  font-size: clamp(1.15rem,1.9vw,1.45rem) !important; letter-spacing: -.02em;
  color: #fbfaf6 !important; }

/* ── Línea final ── */
.pie__base { position: relative; max-width: 1240px;
  margin: clamp(36px,5vh,60px) auto 0; padding-top: clamp(16px,2.4vh,22px);
  border-top: 1px solid rgba(233,238,231,.15);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(20px,3vw,40px);
  font-size: .68rem; font-weight: 300; color: rgba(233,238,231,.45); }
.pie__base p { margin: 0; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 8px clamp(12px,2vw,22px);
  margin-left: auto; }
.pie__nav a { color: rgba(233,238,231,.55); transition: color .3s; }
.pie__nav a:hover { color: #fbfaf6; }

@media (max-width: 1000px) {
  .pie__in { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pie__in { grid-template-columns: 1fr; }
  .pie__nav { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   PIE — v7: sin subrayados y en la tinta de la marca
   Dos correcciones:
   · TODOS los enlaces salían subrayados. Ninguna regla del pie ponía
     text-decoration: none y el navegador aplica el subrayado por
     defecto. Con cuatro columnas de enlaces, eso son veinte rayas.
   · El verde era un color inventado para el pie. Se pasa a #16150f, que
     es la tinta que ya usa toda la web: deja de ser "otro color" y pasa
     a ser el mismo de siempre, en bloque. El acento sigue siendo el
     dorado de las estrellas de las valoraciones.
   ═══════════════════════════════════════════════════════════════ */
.pie { background: var(--night); color: rgba(238,235,226,.66); }
.pie::before { background: radial-gradient(closest-side, rgba(181,133,31,.16), transparent 70%); }
/* nada de subrayados: el pie es una lista de enlaces, no un texto con
   enlaces sueltos dentro */
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: none; }

.pie__marca > a { color: #fbfaf7; }
.pie__marca p { color: rgba(238,235,226,.62); }
.pie__reg { color: rgba(238,235,226,.36) !important; }
.pie__col h3 { color: rgba(201,154,46,.95); }
.pie__col a { color: rgba(238,235,226,.74); }
.pie__col a:hover { color: #fbfaf7; }
.pie__col--casas b { color: #fbfaf7; }
.pie__col--casas i { color: rgba(238,235,226,.38); }
/* el teléfono es lo único con subrayado, y a propósito: es la acción */
.pie__tel { color: #fbfaf7 !important;
  border-bottom: 1px solid rgba(251,250,247,.3); padding-bottom: 3px;
  width: fit-content; transition: border-color .3s; }
.pie__tel:hover { border-bottom-color: #fbfaf7; }

.pie__base { border-top-color: rgba(238,235,226,.13); color: rgba(238,235,226,.4); }
.pie__nav a { color: rgba(238,235,226,.5); }
.pie__nav a:hover { color: #fbfaf7; }
.pie__autor { margin: 0; color: rgba(238,235,226,.34); }
.pie__autor a { color: rgba(238,235,226,.55); border-bottom: 1px solid rgba(238,235,226,.22);
  padding-bottom: 1px; transition: color .3s, border-color .3s; }
.pie__autor a:hover { color: #fbfaf7; border-bottom-color: rgba(251,250,247,.6); }

/* la barra inferior pasa a tres tramos: copyright · legal · autoría */
@media (min-width: 901px) {
  .pie__base { display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 10px clamp(20px,3vw,44px); }
  .pie__nav { margin-left: 0; justify-content: center; }
}

/* La columna derecha del mapa: titular + fichas juntos.
   Antes la cabecera iba suelta arriba a todo lo ancho y dejaba media
   pantalla vacía a su derecha. */
@media (min-width: 1000px) {
  .mapa__lado { display: grid; align-content: center; gap: clamp(24px,3vh,40px);
    height: 100%; }
  .mapa__cab { margin: 0; max-width: none; }
  .mapa__h { font-size: clamp(1.8rem,3vw,2.7rem); }
  .mapa__p { font-size: .9rem; }
}

/* Equilibrio final de las dos columnas del mapa.
   El lado derecho quedaba 245 px más alto que el lienzo. NO se estira la
   imagen con object-fit para igualar: los pines se colocan en porcentajes
   del contenedor y recortar la foto los descuadraría de sus pueblos. Se
   centra el mapa respecto a la columna y se compactan las fichas. */
@media (min-width: 1000px) {
  .mapa__cuerpo { align-items: center; }
  .mapa__lado { height: auto; gap: clamp(20px,2.6vh,30px); }
  .mapa__fichas { gap: clamp(16px,2vh,24px); }
  .mapa__casa { padding-top: clamp(14px,1.8vh,20px); }
  .mapa__n { font-size: clamp(1.25rem,1.9vw,1.6rem); margin: 6px 0 3px; }
  .mapa__t { margin: clamp(12px,1.6vh,16px) 0; gap: 9px 16px; }
  .mapa__t b { font-size: .95rem; }
  .mapa__t span { font-size: .68rem; }
  .mapa__ver { min-height: 40px; padding: 10px 20px; }
}

/* En móvil el orden del marcado deja el mapa ANTES del titular, porque el
   lienzo va primero para poder ponerlo a la izquierda en escritorio. Se
   reordena visualmente: primero se lee de qué va, luego se mira el mapa. */
@media (max-width: 999px) {
  .mapa__cuerpo { display: flex; flex-direction: column; gap: clamp(22px,3.4vh,34px); }
  .mapa__lienzo { order: 2; }
  .mapa__lado { order: 1; display: contents; }
  .mapa__cab { order: 1; }
  .mapa__fichas { order: 3; }
}

/* ═══════════════════════════════════════════════════════════════
   SUBRAYADOS — de una vez
   No había ninguna regla global, así que el navegador subrayaba por
   defecto todo enlace que no lo desactivara a mano. Cada sección que se
   añadía volvía a traerlos: el pie, el mapa, el selector de idioma…
   Se apaga aquí, para toda la web, y el subrayado pasa a ser algo que se
   PIDE explícitamente donde aporta (el teléfono del pie, los enlaces
   dentro de un párrafo de texto corrido).
   ═══════════════════════════════════════════════════════════════ */
a { text-decoration: none; }
/* los enlaces embebidos en texto corrido sí lo llevan: ahí el subrayado
   es lo que los distingue del resto de la frase */
.zona__c p a, .mapa__nota a, .zona__nota a, .ck__p a, .prac__pie a { text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ═══════════════════════════════════════════════════════════════
   LA TIRA CLAVADA — el espacio en blanco
   La sección mide unos 700 px, pero al clavarse ocupa la ventana entera.
   En una pantalla de 1.150 px eso dejaba 450 px de blanco debajo de las
   fotos: el famoso "espacio enorme". Mientras está clavada, la escena
   ocupa el alto de la ventana y el contenido se centra en ella.
   ═══════════════════════════════════════════════════════════════ */
.tren.is-pin { padding-block: 0; }
.tren.is-pin .tren__esc { min-height: 100vh; min-height: 100svh; align-items: center; }

/* ═══════════════════════════════════════════════════════════════
   /la-zona/ — arreglo del descuadre
   Dos herencias de la home rompían la página entera:
   · `main` arrastra margin-top -38px, esquinas redondeadas y una sombra
     pensadas para solaparse al hero. Aquí no hay hero: la página nacía
     metida bajo la cabecera con una sombra flotando de la nada.
   · `.zona--pag .zona__cab { max-width: 34ch }` chocaba con el
     margin-inline:auto general: la cabecera quedaba CENTRADA y de 335 px
     mientras todo lo demás va a 1.132. De ahí el descuadre general.
   ═══════════════════════════════════════════════════════════════ */
main.zona--pag { margin-top: 0; border-radius: 0; box-shadow: none; }
.zona--pag .zona__cab { max-width: 1240px; margin-inline: auto;
  margin-bottom: clamp(34px,5vh,54px); }
.zona--pag .zona__h { max-width: 12ch; }
.zona--pag .zona__p { max-width: 52ch; }

/* ═══════════════════════════════════════════════════════════════
   MAPA — fichas rediseñadas
   Cada casa es un panel: número, nombre y un icono de pin que abre
   Google Maps en la cabecera; los tiempos como chips; el botón debajo a
   todo el ancho. Fuera la rejilla de números flotando y fuera la nota.
   ═══════════════════════════════════════════════════════════════ */
.mapa__casa { background: #f7f5f0; border-radius: 4px;
  border-top: 0 !important; padding: clamp(18px,2.2vw,26px) !important; }
.mapa__cabe { display: flex; align-items: center; gap: 14px; }
.mapa__cabe > div { flex: 1; min-width: 0; }
.mapa__idx { font-family: var(--display); font-weight: 300;
  font-size: 1.5rem; color: rgba(28,25,21,.3); }
.mapa__n { margin: 0 !important; }
.mapa__u { margin-top: 2px; }
.mapa__gm { flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(28,25,21,.18); border-radius: 50%; color: rgba(28,25,21,.55);
  border-bottom-style: solid; padding-bottom: 0 !important;
  transition: color .3s, border-color .3s, transform .3s var(--vh-ease); }
.mapa__gm:hover { color: var(--tinta); border-color: var(--tinta); transform: scale(1.06); }

.mapa__t { display: flex !important; flex-wrap: wrap; gap: 7px !important;
  grid-template-columns: none !important;
  margin: clamp(14px,2vh,20px) 0 !important; padding: 0; list-style: none; }
.mapa__t li { display: inline-flex !important; align-items: baseline; gap: 8px;
  background: #fff; border: 1px solid rgba(28,25,21,.1); border-radius: 999px;
  padding: 8px 14px; }
.mapa__t li span { font-size: .74rem; font-weight: 300; color: #4a463c; }
.mapa__t li b { font-family: var(--body); font-weight: 600; font-size: .78rem;
  letter-spacing: -.01em; color: var(--tinta); }
.mapa__ver { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════
   MAPA — formato en dos filas
   Fila 1: cabecera a la izquierda, mapa a la derecha.
   Fila 2: las dos casas en paralelo, a todo el ancho.
   Motivo del cambio: con las fichas apiladas en una columna, su altura
   y la del mapa nunca coincidían y siempre sobraba blanco en un lado.
   En filas, cada una tiene la altura de lo suyo y no hay que igualar
   nada. Las reglas de la estructura anterior (mapa__cuerpo, mapa__lado)
   quedan muertas: su marcado ya no existe.
   ═══════════════════════════════════════════════════════════════ */
.mapa__fila1 { max-width: 1240px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(26px,3.4vw,56px); align-items: center;
  margin-bottom: clamp(20px,2.6vh,32px); }
.mapa__fila1 .mapa__cab { margin: 0; max-width: none; }
.mapa__fila1 .mapa__h { font-size: clamp(1.9rem,3.4vw,3rem); }

/* el mapa en la fila 1 puede ser más bajo: se recorta el lienzo pero los
   pines se recolocan solos porque van en % del contenedor visible…
   NO: los pines van en % de la IMAGEN. El lienzo mantiene la proporción
   natural de la imagen y se limita por ancho, no por recorte. */
.mapa__fila1 .mapa__lienzo { margin: 0; max-height: none; }
.mapa__fila1 .mapa__lienzo img { height: auto; object-fit: fill; }

.mapa__fichas { max-width: 1240px; margin: 0 auto;
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: clamp(14px,2vw,28px) !important; align-self: auto; }
.mapa__casa:first-child { padding-top: clamp(18px,2.2vw,26px) !important; }

@media (max-width: 900px) {
  .mapa__fila1 { grid-template-columns: 1fr; gap: 22px; }
  .mapa__fichas { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MAPA — orden final pedido por el cliente
   Fila 1: titular a la izquierda, las dos fichas apiladas a la derecha.
   Fila 2: el mapa solo, a todo el ancho del contenedor.
   Estas reglas pisan las de los dos formatos anteriores; el marcado de
   aquellos (mapa__cuerpo, mapa__lado) ya no existe.
   ═══════════════════════════════════════════════════════════════ */
.mapa__fila1 { align-items: start; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  margin-bottom: clamp(24px,3.4vh,40px); }
/* el titular acompaña a las fichas: centrado respecto a su altura */
.mapa__fila1 .mapa__cab { align-self: center; }
/* las fichas vuelven a apilarse: ahora son la columna derecha */
.mapa__fichas { grid-template-columns: 1fr !important; max-width: none; }

/* el mapa, pieza grande de cierre a todo el ancho */
.mapa > .mapa__lienzo { max-width: 1240px; margin-inline: auto; max-height: none; }
.mapa > .mapa__lienzo img { height: auto; }

@media (max-width: 900px) {
  .mapa__fila1 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   MAPA — ajuste: las dos casas en dos columnas
   El titular queda como cabecera y las fichas van en paralelo debajo,
   una al lado de la otra; el mapa cierra a todo el ancho.
   ═══════════════════════════════════════════════════════════════ */
.mapa__fila1 { grid-template-columns: 1fr; gap: clamp(22px,3vh,34px); }
.mapa__fila1 .mapa__cab { align-self: start; }
.mapa__fichas { grid-template-columns: 1fr 1fr !important; }
@media (max-width: 760px) { .mapa__fichas { grid-template-columns: 1fr !important; } }

/* ═══════════════════════════════════════════════════════════════
   DÓNDE ESTAMOS — v final: el mapa como escena
   Misma gramática que el hero: la imagen a sangre, un velo que aprieta
   por la izquierda y el contenido encima. Nada de tarjetas ni chips: las
   dos casas son texto sobre el velo, con sus tiempos en una línea.
   ═══════════════════════════════════════════════════════════════ */
.mapa--osc { position: relative; padding: 0; background: var(--night); overflow: hidden; }
.mapa--osc .mapa__lienzo { margin: 0; max-width: none; max-height: none; border-radius: 0; }
/* Sin filtro. El brightness(.96) apagaba el mapa ENTERO, también la mitad
   derecha, que es la que tiene que verse limpia: es la única imagen de la
   sección y el único color que hay. */
.mapa--osc .mapa__lienzo img { width: 100%; height: auto; display: block; }

/* El velo se corta antes.
   Iba de opaco a transparente estirándose hasta el 70 % del ancho, así que
   el centro del mapa quedaba medio velado: ni fondo sólido donde apoyar el
   texto, ni mapa legible. Esa franja turbia es lo que se veía sucio.
   Ahora aguanta opaco mientras hay texto (hasta el 34 %) y se va rápido:
   a partir del 58 % el mapa se ve tal cual, con su color. */
.mapa__velo { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,13,10,.93) 0%, rgba(12,13,10,.9) 34%,
    rgba(12,13,10,.45) 47%, rgba(12,13,10,0) 58%); }
.mapa__sobre { position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; max-width: min(560px, 40%);
  padding: clamp(22px,3.4vw,60px); color: #f2efe6; }
.mapa--osc .eyebrow { color: rgba(242,239,230,.5); }
.mapa--osc .mapa__h { color: #fff; margin: 12px 0 clamp(18px,3vh,30px);
  font-size: clamp(1.8rem,3.2vw,3rem); }
.mapa__casas { display: grid; gap: 0; }
.mapa--osc .mapa__casa { background: none !important; border-radius: 0;
  border-top: 1px solid rgba(242,239,230,.2) !important;
  padding: clamp(14px,2.2vh,22px) 0 !important; }
.mapa--osc .mapa__idx { font-size: .6rem; font-weight: 600; letter-spacing: .26em;
  color: rgba(201,154,46,.9); font-family: var(--body); margin: 0; }
.mapa--osc .mapa__n { color: #fff; font-size: clamp(1.3rem,2.2vw,1.8rem);
  margin: 6px 0 2px !important; }
.mapa--osc .mapa__u { color: rgba(242,239,230,.5); }
.mapa__linea { margin: 10px 0 12px; font-size: .8rem; font-weight: 300;
  color: rgba(242,239,230,.78); line-height: 1.9; }
.mapa__linea span { white-space: nowrap; }
.mapa__linea span + span::before { content: none; }
.mapa__ir { margin: 0; display: flex; gap: 22px; align-items: baseline; }
.mapa__ir a { font-size: .66rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 3px;
  transition: border-color .3s; }
.mapa__ir a:hover { border-bottom-color: #fff; }
.mapa__ir a + a { color: rgba(242,239,230,.55); border-bottom-color: transparent; }
.mapa__ir a + a:hover { color: #fff; }
.mapa--osc .mapa__cred { position: absolute; right: 0; bottom: 0;
  background: rgba(16,16,9,.7); color: rgba(242,239,230,.5);
  padding: 4px 10px; margin: 0; font-size: .54rem; border-radius: 3px 0 0 0; }
.mapa--osc .mapa__cred a { color: inherit; }
/* los pines, algo más discretos sobre la escena oscura */
.mapa--osc .mapa__pin--ref { opacity: .65; }

@media (max-width: 900px) {
  .mapa--osc { display: flex; flex-direction: column; }
  .mapa__velo { display: none; }
  .mapa__sobre { position: static; max-width: none; background: var(--night);
    padding: clamp(34px,6vh,52px) clamp(20px,5vw,32px); }
  .mapa--osc .mapa__lienzo { order: 2; }
}

/* ── La tira del lugar, ya sin pin ──
   Las reglas .tren.is-pin de más arriba quedan inertes: nadie añade esa
   clase desde que se quitó el pin. Se dejan a propósito, por si alguna
   vez se quiere volver a mirar cómo estaba.

   Ojo con lo de siempre: mientras está .is-arrastrando, nada de dentro
   recibe eventos. Por eso anim.js solo pone esa clase pasados 6 px de
   arrastre real; puesta al pulsar, los enlaces de las fichas dejarían de
   abrirse. */
.tren__esc { cursor: grab; }
.tren__esc.is-arrastrando { cursor: grabbing; scroll-behavior: auto;
  scroll-snap-type: none; }
.tren__esc.is-arrastrando * { pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   MAPA v3 · el texto deja de ir encima
   Las reglas .mapa--osc de más arriba quedan inertes: el generador ya
   no pone esa clase. Se dejan por si hiciera falta mirar cómo estaba.
   ═══════════════════════════════════════════════════════════════ */
.mapa--dos { background: #fff; padding: clamp(52px,7.5vh,96px) 0 0; }
/* Dos columnas con papeles distintos: a la izquierda el relato —titular y
   las dos casas—, a la derecha la referencia —la lista de lugares—. Antes
   el titular vivía solo en su columna y dejaba medio bloque en blanco;
   ese hueco es lo que ahora ocupa la lista. `align-items: start` porque
   las dos columnas tienen alturas muy distintas y alinearlas por abajo
   descolgaba el titular. */
.mapa--dos .mapa__in { max-width: 1240px; margin-inline: auto;
  padding-inline: clamp(20px,4vw,54px);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(28px,4vw,56px) clamp(32px,5vw,72px); align-items: start;
  margin-bottom: clamp(38px,5.5vh,64px); }


.mapa--dos .mapa__h { font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem,4.2vw,3.2rem); line-height: 1.03; letter-spacing: -.022em;
  color: var(--tinta); margin: 12px 0 0; }

/* Las dos casas, una debajo de otra en la columna derecha */
.mapa--dos .mapa__casas { display: grid; gap: 0; }
.mapa--dos .mapa__casa { background: none; border-radius: 0; padding: clamp(14px,2.2vh,20px) 0;
  border-top: 1px solid rgba(28,25,21,.14); }
.mapa--dos .mapa__idx { font-size: .6rem; font-weight: 600; letter-spacing: .26em;
  color: rgba(28,25,21,.4); font-family: var(--body); margin: 0; }
.mapa--dos .mapa__n { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.2rem,2vw,1.6rem); color: var(--tinta); margin: 5px 0 2px; }
.mapa--dos .mapa__u { font-size: .62rem; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(28,25,21,.45); }
.mapa--dos .mapa__linea { margin: 9px 0 10px; font-size: .82rem; font-weight: 300;
  color: #4a463c; line-height: 1.9; }
.mapa--dos .mapa__linea span { white-space: nowrap; }
.mapa--dos .mapa__linea span + span::before { content: none; }
.mapa--dos .mapa__ir { margin: 0; display: flex; gap: 22px; align-items: baseline; }
.mapa--dos .mapa__ir a { font-size: .64rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--tinta); }
.mapa--dos .mapa__ir a:first-child { border-bottom: 1px solid var(--tinta);
  padding-bottom: 3px; }
.mapa--dos .mapa__ir a:last-child { color: rgba(28,25,21,.5); }

/* El mapa, a todo el ancho y sin nada encima */
.mapa--dos .mapa__lienzo { position: relative; margin: 0; max-width: none;
  border-radius: 0; overflow: hidden; }
.mapa--dos .mapa__lienzo img { width: 100%; height: auto; display: block; }
.mapa--dos .mapa__cred { position: absolute; right: 0; bottom: 0; margin: 0;
  padding: 5px 10px; font-size: .6rem;
  background: rgba(255,255,255,.82); color: rgba(28,25,21,.55); }
.mapa--dos { position: relative; }

@media (max-width: 860px) {
  .mapa--dos .mapa__in { grid-template-columns: 1fr; gap: clamp(18px,4vw,28px); }
}

/* El titular arriba, no abajo. Con align-items:end quedaba pegado al pie
   de su columna y dejaba un hueco grande encima, descolgado de las dos
   casas de al lado, que sí empiezan arriba. */
.mapa--dos .mapa__in { align-items: start; }
.mapa--dos .mapa__casas > .mapa__casa:first-child { border-top: 0; padding-top: 0; }

/* ── Coherencia con el resto de la web en /la-zona/ ── */

/* Los nombres de las casas salían MORADOS: los <a> de .zona__casas no
   declaran color y el navegador aplica el suyo de enlace visitado. Es el
   mismo agujero que ya hubo con --tinta: lo que no se declara, lo decide
   el navegador. */
.zona__casas a, .zona__casas a:visited { color: var(--tinta); }

/* El botón de la cabecera iba en negro macizo cuando el de la home y el
   de las landings es de contorno. Misma pieza, mismo traje. */
.pag__cta { background: none; color: var(--tinta) !important;
  border: 1px solid rgba(28,25,21,.28);
  transition: background .3s, color .3s, border-color .3s; }
.pag__cta:hover { background: var(--tinta); color: #fff !important;
  border-color: var(--tinta); }

/* ── Fuera las sombras de texto del hero (home) ──
   Mismo motivo que en las landings: emborronaban el trazo fino de
   Melodrama. El contraste lo asume el velo, que se refuerza en el centro
   —que es donde está el texto en este hero—. */
.vh__h, .vh__sub, .vh__kick, .vh__cap, .vh__num { text-shadow: none; }
.vh__veil {
  background:
    radial-gradient(76% 62% at 50% 52%, rgba(6,8,6,.5) 0%, rgba(6,8,6,.26) 58%, rgba(6,8,6,.08) 100%),
    linear-gradient(180deg, rgba(6,8,6,.38) 0%, transparent 24%,
                            transparent 58%, rgba(6,8,6,.6) 100%);
}

/* ── Menú móvil: opciones más juntas ──
   Cada enlace llevaba 17 px arriba y abajo; con cuatro opciones el bloque
   quedaba desparramado por toda la pantalla. Se aprieta el interlineado y
   el tamaño sube un punto: se lee como una lista, no como cuatro islas.
   El teléfono se retiró del panel; el contacto vive en el pie. */
.menu__nav a { padding: 11px 0; font-size: 1.5rem; }
.menu__pie { padding-top: 18px; }

/* Mismo ajuste en la home: sin el teléfono, el pie del menú ya no se
   empuja al fondo de la pantalla. */
.menu__pie { margin-top: clamp(26px,4vh,40px); }

/* ═══════════════════════════════════════════════════════════════
   MENÚ MÓVIL · rediseño
   Estaba todo centrado y flotando en medio de una pantalla negra, con
   la X sola en una esquina y el botón desterrado abajo. Ahora:

   · Alineado a la IZQUIERDA, que es como se lee. Centrar cuatro
     entradas de distinta longitud crea un borde irregular que es justo
     lo que hacía que se viera desordenado.
   · Cada opción con su índice (01, 02…) en dorado, el mismo recurso que
     el hero, el mapa y "cómo funciona". El menú deja de ser una lista
     suelta y pasa a hablar el idioma del resto de la web.
   · El bloque sube y respira arriba, en vez de quedar clavado al centro.
   ═══════════════════════════════════════════════════════════════ */
.menu { justify-content: flex-start;
  padding: clamp(96px,16vh,150px) clamp(26px,7vw,44px) clamp(28px,5vh,40px); }

.menu__nav { justify-items: stretch; text-align: left;
  counter-reset: op; }
.menu__nav a { display: flex; align-items: baseline; gap: 16px;
  padding: clamp(14px,2.2vh,18px) 0; font-size: clamp(1.7rem,7vw,2.1rem); }
.menu__nav a::before { counter-increment: op; content: "0" counter(op);
  font-family: var(--body); font-size: .58rem; font-weight: 600;
  letter-spacing: .24em; color: rgba(201,154,46,.85); }
/* las líneas iban centradas con transform; alineadas a la izquierda
   sobran los centrados */
.menu__nav a::after { left: 0; transform: scaleX(0); transform-origin: left; }
.menu__nav a:hover::after, .menu__nav a:active::after { transform: scaleX(1); }

.idiomas { justify-content: flex-start; margin: clamp(22px,3.5vh,32px) 0 0;
  padding-left: 0; }
.idiomas a:first-child { margin-left: -14px; }

.menu__pie { margin-top: auto; padding-top: clamp(30px,5vh,44px); }

/* El menú, centrado en móvil.
   Se alineó a la izquierda para evitar el borde irregular de cuatro
   entradas de distinta longitud; centrado se recupera el eje. Los
   índices dorados salen del flujo (position:absolute) para que lo que
   quede centrado sea el TEXTO: si el número entra en la caja, cada
   entrada se descuadra según lo ancho que sea su etiqueta. */
.menu__nav { justify-items: center; text-align: center; }
.menu__nav a { justify-content: center; position: relative; gap: 0; }
.menu__nav a::before { position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); }
.menu__nav a::after { left: 50%; transform: translateX(-50%) scaleX(0);
  transform-origin: center; }
.menu__nav a:hover::after, .menu__nav a:active::after {
  transform: translateX(-50%) scaleX(1); }
.idiomas { justify-content: center; }
.idiomas a:first-child { margin-left: 0; }

/* Sin los índices: centrado, el enlace se encoge al ancho de su texto y
   un número en `left: 0` cae ENCIMA de la primera letra ("01" sobre la
   Á de Ático). Sacarlo fuera con un margen negativo rompería el centrado
   óptico, que es justo lo que se buscaba. Los números eran del diseño
   alineado a la izquierda; aquí sobran. */
.menu__nav a::before { content: none; }

/* ── La galería no debe secuestrar el scroll vertical ──
   En móvil, al deslizar el dedo hacia abajo SOBRE las fotos, la página
   se quedaba quieta: el contenedor con overflow-x se quedaba el gesto.

   Dos causas y dos arreglos:
   · `touch-action: pan-x pan-y` declara explícitamente que el dedo puede
     mover los DOS ejes. Sin declararlo, el navegador decide por su
     cuenta y en cuanto detecta componente horizontal se queda el gesto
     entero hasta que sueltas.
   · `overscroll-behavior-x: contain` pasa a `auto`. "contain" evita que
     el scroll salte al contenedor padre al llegar al final de la tira,
     pero es justamente eso lo que dejaba el dedo atrapado. La tira no
     está dentro de nada que haga scroll horizontal, así que no protege
     de nada. */
.tira__via, .tren__esc { touch-action: pan-x pan-y;
  overscroll-behavior-x: auto; }

/* ── Distintivo de Superanfitrión ──
   Dato real y verificable del perfil de Airbnb de Iván (79 evaluaciones,
   100 % de respuesta). Va pegado a la nota media, que es donde el
   visitante está juzgando la confianza. Discreto a propósito: una
   estrella de contorno y una línea; convertirlo en una insignia grande
   con fondo lo haría parecer un sello de pago. */
.val__super { display: flex; align-items: center; gap: 9px;
  margin: 14px 0 0; font-size: .78rem; font-weight: 300;
  line-height: 1.5; color: rgba(28,25,21,.6); }
.val__super svg { flex: none; color: #b5851f; }
.val__super b { font-weight: 500; color: var(--tinta); }

/* ═══════════════════════════════════════════════════════════════
   FOTOS Y FILAS DE /la-zona/
   Mismo lenguaje que la home: esquinas rectas, filetes finos, serif
   de display. Las fotos llevan relación de aspecto fija (el hueco se
   reserva antes de cargar: sin saltos de texto) y el zoom suave al
   pasar por encima que ya usan las casas de la portada.
   ═══════════════════════════════════════════════════════════════ */
.zona__marco { margin: 0; overflow: hidden; background: rgba(28,25,21,.05); }
.zona__marco img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--vh-ease, cubic-bezier(.22,1,.36,1)); }
.zona__marco:hover img { transform: scale(1.045); }

/* El hero rompe el contenedor a sangre completa: es el único ancho
   fuera de la retícula de 1240 y es a propósito. */
.zona__hero { position: relative; margin: 0 0 clamp(38px,5.4vh,66px);
  margin-inline: calc(50% - 50vw); overflow: hidden; }
.zona__hero img { display: block; width: 100%; height: clamp(340px,58vh,620px);
  object-fit: cover; }
.zona__hero figcaption { position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(46px,7vh,80px) clamp(20px,4vw,54px) clamp(16px,2.4vh,24px);
  background: linear-gradient(to top, rgba(10,11,10,.62), transparent);
  color: rgba(255,255,255,.85); font-size: .78rem; font-weight: 300; letter-spacing: .01em; }
.zona__hero figcaption span { font-weight: 500; color: #fff; }

/* ── Playas: foto a un lado, lista al otro ──
   La foto iba en position:sticky y bajaba acompañando la lista; a Iván
   le pareció que "se movía" y tiene razón: nada más en la web se
   desplaza solo. Quieta. */
.zona__pgrid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(22px,3.4vw,54px); align-items: start; }
.zona__pfoto { aspect-ratio: 4 / 5; }

/* ── Filas editoriales ── */
.zona__filas { max-width: 1240px; margin-inline: auto;
  display: grid; gap: clamp(44px,7vh,96px); margin-bottom: clamp(44px,6vh,80px); }
.zona__fila { display: grid; grid-template-columns: minmax(0,6fr) minmax(0,5fr);
  gap: clamp(24px,4vw,72px); align-items: center; }
.zona__fila .zona__marco { aspect-ratio: 4 / 3; }
.zona__fila--alt .zona__marco { order: 2; }
.zona__fidx { margin: 0 0 10px; font-size: .62rem; font-weight: 500;
  letter-spacing: .22em; color: rgba(28,25,21,.4); }
.zona__fidx::after { content: ""; display: inline-block; width: 44px; height: 1px;
  background: rgba(28,25,21,.25); margin-left: 12px; vertical-align: middle; }
.zona__ftxt h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem,2.6vw,2.2rem); line-height: 1.12; letter-spacing: -.02em; }
.zona__ftxt p { margin: 0 0 12px; font-size: .9rem; font-weight: 300;
  line-height: 1.85; color: #4a463c; max-width: 54ch; }
.zona__ftxt strong { font-weight: 500; color: var(--tinta); }

/* ── Escapadas: tabla + las dos fotos con su pie ── */
.zona__egrid { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  gap: clamp(24px,3.6vw,60px); align-items: start; }
.zona__efotos { display: grid; gap: clamp(14px,2vh,22px); }
.zona__efotos .zona__marco { aspect-ratio: 16 / 10; }
.zona__efotos figcaption { padding-top: 9px; font-size: .62rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(28,25,21,.5); }

/* Créditos de las fotos. Discretos pero VISIBLES: la licencia de
   Wikimedia Commons obliga a citar autor; es lo que permite usarlas
   sin pagar. */
.zona__cred { max-width: 1240px; margin: clamp(44px,6vh,72px) auto 0;
  padding-top: 24px; border-top: 1px solid rgba(28,25,21,.12); }
.zona__cred h2 { font-family: var(--body); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(28,25,21,.45); margin: 0 0 10px; }
.zona__cred p { font-size: .78rem; font-weight: 300; color: rgba(28,25,21,.55);
  line-height: 1.65; margin: 0 0 10px; max-width: 62ch; }
.zona__cred ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.zona__cred li { font-size: .7rem; font-weight: 300; color: rgba(28,25,21,.5); line-height: 1.55; }
.zona__cred a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .zona__pgrid, .zona__fila, .zona__egrid { grid-template-columns: 1fr; }
  .zona__pfoto { position: static; aspect-ratio: 16 / 10; }
  .zona__fila--alt .zona__marco { order: 0; }
  .zona__fila .zona__marco { aspect-ratio: 16 / 10; }
  .zona__hero img { height: clamp(260px,44vh,420px); }
  .zona__efotos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .zona__efotos { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   /la-zona/ — cabecera y pie unificados + cierre con fotos
   · La página pasa a llevar la MISMA cabecera .tope de las landings
     (la pone footer.js). Sus estilos viven en apto.css, que esta página
     no carga, así que se copian aquí. Sin ham: en móvil se esconde la
     nav y queda marca + botón.
   · Los créditos de Wikimedia pasan a un <details> plegado: la
     atribución sigue en la página (la licencia CC la exige) pero ocupa
     una línea, no media pantalla.
   · El cierre "Y para dormir" deja las tarjetas grises y pasa a dos
     fotos reales de las casas con el nombre encima, el mismo lenguaje
     que las tarjetas de la home. Las reglas antiguas de .zona__casas
     quedan pisadas por estas, que van después.
   ═══════════════════════════════════════════════════════════════ */
.tope { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px); border-bottom: 1px solid rgba(28,25,21,.1);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px clamp(20px,4vw,54px); }
.tope__marca { display: inline-flex; align-items: center; gap: 12px; color: var(--tinta); }
.tope .mark { width: 30px; height: 30px; flex: none; stroke-linejoin: round; }
.tope__marca span { display: grid; gap: 2px; line-height: 1.15;
  font-weight: 500; font-size: .95rem; letter-spacing: -.035em; }
.tope__marca i { font-style: normal; font-weight: 300; font-size: .52rem;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(28,25,21,.45); }
.tope__nav { display: flex; gap: 26px; }
.tope__nav a { position: relative; font-size: .66rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(28,25,21,.6);
  transition: color .3s; }
.tope__nav a:hover, .tope__nav a[aria-current="page"] { color: var(--tinta); }
.tope__nav a[aria-current="page"]::after { content: ""; position: absolute;
  left: 0; bottom: -6px; width: 100%; height: 1px; background: currentColor; }
.tope__cta { border: 1px solid rgba(28,25,21,.28); border-radius: 999px;
  padding: 11px 22px; font-size: .64rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta);
  transition: background .3s, color .3s, border-color .3s; }
.tope__cta:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
@media (max-width: 900px) { .tope__nav { display: none; } }
/* En estrecho, marca de texto fuera: logo + botón no caben con ella y
   el header desbordaba EMPUJANDO la página entera a la derecha. Es lo
   mismo que hacía la cabecera anterior de esta página. */
@media (max-width: 700px) { .tope__marca span { display: none; } }

/* ── Créditos plegados ── */
details.zona__cred { padding-top: 18px; }
.zona__cred summary { cursor: pointer; list-style: none; width: fit-content;
  display: inline-flex; align-items: baseline; gap: 9px;
  font-family: var(--body); font-size: .64rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(28,25,21,.4);
  transition: color .3s; }
.zona__cred summary::-webkit-details-marker { display: none; }
.zona__cred summary::after { content: "+"; font-size: .85rem; font-weight: 300; }
.zona__cred[open] summary::after { content: "\2212"; }
.zona__cred summary:hover { color: var(--tinta); }
.zona__cred p { margin-top: 14px; }

/* ── Cierre: las dos casas en foto ── */
.zona__casas { grid-template-columns: 1fr 1fr; gap: clamp(14px,2vw,28px); }
.zona__casas a, .zona__casas a:visited { position: relative; display: block;
  padding: 0; background: none; border-radius: 0; overflow: hidden;
  aspect-ratio: 16 / 9; color: #fff; }
.zona__casas a:hover { background: none; transform: none; }
.zona__casas a img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 1.1s var(--vh-ease, cubic-bezier(.22,1,.36,1)); }
.zona__casas a:hover img { transform: scale(1.045); }
.zona__cvelo { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10,11,10,.74), rgba(10,11,10,.1) 55%, transparent); }
.zona__ctxt { position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(18px,2.6vw,30px); display: grid; gap: 4px; }
.zona__casas .zona__ctxt b { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem,2.6vw,2.2rem); letter-spacing: -.02em; color: #fff; }
.zona__casas .zona__ctxt i { font-style: normal; font-size: .6rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.zona__ctxt em { font-style: normal; margin-top: 10px; width: fit-content;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 3px;
  transition: border-color .3s; }
.zona__casas a:hover .zona__ctxt em { border-bottom-color: #fff; }
@media (max-width: 640px) {
  .zona__casas { grid-template-columns: 1fr; }
  .zona__casas a { aspect-ratio: 16 / 10; }
}

/* ═══════════════════════════════════════════════════════════════
   MAPA VIVO — la capa interactiva sobre el mapa estático

   El .mv se monta ENCIMA de la imagen, no en su lugar. La imagen sigue
   ahí debajo todo el rato: es lo que se ve mientras MapLibre baja, y es
   lo que queda si no baja nunca (sin JS, sin WebGL, con la red caída).
   Por eso .mv parte de opacidad 0 y solo aparece cuando el mapa ha
   pintado de verdad; nunca hay un rectángulo gris.
   ═══════════════════════════════════════════════════════════════ */
/* Dos clases a propósito: maplibre-gl.css se inyecta en el <head> DESPUÉS
   que esta hoja y trae `.maplibregl-map { position: relative }`, que a
   igualdad de especificidad gana por orden. Con `.mv` a secas el
   contenedor se quedaba en position:relative y ALTURA 0: el mapa existía,
   el canvas existía, y no se veía nada. */
.mapa__lienzo .mv { position: absolute; inset: 0; opacity: 0;
  transition: opacity .5s ease; pointer-events: none; }
.mapa--vivo .mapa__lienzo .mv { opacity: 1; pointer-events: auto; }
/* con el mapa vivo delante, los pines pintados a mano y la atribución
   estática sobran: MapLibre pone los suyos */
.mapa--vivo .mapa__pin, .mapa--vivo .mapa__cred { display: none; }
.mv .maplibregl-ctrl-attrib { font-size: .62rem; }

/* ── Los dos pines de las casas ── */
.mv__casa, .mv__ref { background: none; border: 0; padding: 0; cursor: pointer;
  display: grid; justify-items: center; gap: 5px; font: inherit; }
.mv__casa i { width: 18px; height: 18px; border-radius: 50%; background: #b5851f;
  border: 2px solid #fff; box-shadow: 0 2px 7px rgba(8,10,8,.4); display: block; }
.mv__casa span { white-space: nowrap; background: var(--tinta); color: #fff;
  border-radius: 999px; padding: 6px 14px; font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; box-shadow: 0 2px 8px rgba(8,10,8,.25); }

/* ── Los destinos: punto pequeño; el nombre solo al acercar ── */
.mv__ref i { width: 10px; height: 10px; border-radius: 50%; background: #6b6659;
  border: 2px solid #fff; box-shadow: 0 1px 5px rgba(8,10,8,.3); display: block; }
.mv__ref span { white-space: nowrap; background: rgba(255,255,255,.92);
  color: #3f3b32; border-radius: 999px; padding: 4px 10px; font-size: .68rem;
  font-weight: 500; letter-spacing: .04em; box-shadow: 0 1px 5px rgba(8,10,8,.18); }
.mv__ref:hover i, .mv__casa:hover i { transform: scale(1.15); }
.mv__ref i, .mv__casa i { transition: transform .2s ease; }

/* ── Globos: los de MapLibre, vestidos con la tipografía de la casa ── */
.mv .maplibregl-popup-content { border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 14px 40px -12px rgba(8,10,8,.4); font-family: var(--body); }
.mv__pt { font-family: var(--display); font-size: 1.15rem; font-weight: 500;
  letter-spacing: -.02em; color: var(--tinta); margin: 0; }
.mv__pd { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(28,25,21,.5); margin: 4px 0 0; }
.mv__pa { display: inline-block; margin-top: 12px; font-size: .72rem;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta); border-bottom: 2px solid #b5851f; padding-bottom: 2px;
  text-decoration: none; }
.mv__pl { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.mv__pl li { display: flex; justify-content: space-between; gap: 18px;
  font-size: .82rem; }
.mv__pl b { font-weight: 500; color: var(--tinta); }
.mv__pl em { font-style: normal; font-variant-numeric: tabular-nums;
  color: rgba(28,25,21,.55); }

/* ── Con "ahorro de datos" no se carga solo: se pide ── */
.mv__pedir { display: block; margin: 0 auto 14px; cursor: pointer;
  background: var(--tinta); color: #fff; border: 0; border-radius: 999px;
  padding: 12px 26px; font: inherit; font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 760px) {
  /* a este tamaño los nombres de los destinos se pisan: queda el punto,
     que sigue siendo pulsable y abre el globo con los minutos */
  .mv__ref span { display: none; }
  .mv__casa span { font-size: .7rem; padding: 5px 11px; }
}

/* ── Botón de encuadre y densidad de marcadores ── */
.mv .mv__enc { background: none; box-shadow: none; border-radius: 999px; }
.mv .mv__enc button { font: inherit; font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta);
  padding: 10px 18px; width: auto; height: auto; white-space: nowrap;
  background: rgba(255,255,255,.96); border: 0; border-radius: 999px;
  cursor: pointer; box-shadow: 0 2px 10px rgba(8,10,8,.18); }
.mv .mv__enc button:hover { background: #fff; }
/* al alejar, los 22 destinos se pisarían: se queda el punto */
.mv--lejos .mv__ref span { display: none; }

/* ═══════════════════════════════════════════════════════════════
   DÓNDE ESTAMOS — fichas con cuerpo y lista de lugares

   El bloque era una pila de texto plano: titular, dos nombres y cuatro
   tiempos en una línea corrida. Nada pesaba más que nada y la mitad
   izquierda estaba vacía. Ahora la ficha de cada casa tiene un número
   fantasma que la ancla, los minutos van en píldoras —se cuentan de un
   vistazo, no se leen— y el hueco lo ocupa la lista de lugares, que es
   contenido de verdad y además manda sobre el mapa.
   ═══════════════════════════════════════════════════════════════ */
.mapa__casa { position: relative; display: grid;
  grid-template-columns: auto 1fr; gap: 0 20px; align-items: start; }
.mapa__casa + .mapa__casa { margin-top: 34px; padding-top: 34px;
  border-top: 1px solid rgba(28,25,21,.1); }
/* el número deja de ser una etiqueta y pasa a ser un ancla visual */
.mapa__idx { font-family: var(--display); font-size: 2.6rem; line-height: .9;
  font-weight: 300; color: rgba(28,25,21,.16); letter-spacing: -.03em;
  margin: 0; font-variant-numeric: tabular-nums; }
.mapa__n { margin: 0; }
.mapa__linea { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.mapa__linea span { display: inline-flex; align-items: baseline; gap: 5px;
  border: 1px solid rgba(28,25,21,.13); border-radius: 999px;
  padding: 5px 12px; font-size: .74rem; color: rgba(28,25,21,.62); }
.mapa__linea b { font-weight: 600; font-size: .86rem; color: var(--tinta);
  font-variant-numeric: tabular-nums; }
.mapa__ir { display: flex; gap: 22px; margin: 18px 0 0; }
.mapa__ir1 { border-bottom: 2px solid #b5851f; }

/* ── La lista de lugares ──
   Dieciséis sitios, uno por línea, ORDENADOS POR TIEMPO y con un solo
   número. Antes eran veintidós agrupados por categoría y con dos cifras
   cada uno: cuarenta y cuatro números y cuatro cabeceras para una sección
   que solo tiene que demostrar una cosa. Ordenar por minutos hace ese
   trabajo solo —lo primero que se lee es un 5 y un 7— y el tipo de sitio
   lo sigue diciendo el color del punto, con su leyenda al pie. */
.lug { max-width: 1240px; margin: clamp(40px,5vh,64px) auto 0;
  padding: 0 clamp(16px,4vw,40px); }
.lug__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  font-size: .76rem; color: rgba(28,25,21,.5); margin: 0 0 18px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(28,25,21,.1); }
.lug__cab b { font-weight: 600; color: var(--tinta); }
.lug__cab span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(28,25,21,.35); }
.lug__l { list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 40px; }
.lug__l li { break-inside: avoid; }
.lug__b { display: flex; align-items: baseline; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit; text-align: left;
  padding: 7px 8px; margin-left: -8px; border-radius: 8px;
  transition: background .18s ease; }
.lug__b:hover, .lug__b:focus-visible { background: rgba(28,25,21,.05); }
.lug__b.is-activo { background: var(--tinta); }
.lug__b.is-activo .lug__n, .lug__b.is-activo .lug__t { color: #fff; }
.lug__p { flex: none; width: 8px; height: 8px; border-radius: 50%;
  align-self: center; }
.lug__n { flex: 1; min-width: 0; font-size: .88rem; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* el número lleva su "min" en el pseudo: una palabra menos que traducir y
   que repetir dieciséis veces en el marcado */
.lug__t { flex: none; font-size: .88rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--tinta); }
.lug__t::after { content: " min"; font-weight: 400; font-size: .74rem;
  color: rgba(28,25,21,.45); }
.lug__ley { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0;
  padding-top: 14px; border-top: 1px solid rgba(28,25,21,.08); }
.lug__k { display: inline-flex; align-items: center; gap: 7px;
  font-size: .68rem; letter-spacing: .06em; color: rgba(28,25,21,.45); }
.lug__k i { width: 7px; height: 7px; border-radius: 50%; }

@media (max-width: 640px) {
  .lug__l { columns: 1; }
  .mapa__idx { font-size: 2rem; }
  .mapa__casa { gap: 0 14px; }
}

/* ── Marcadores: las casas laten, los destinos van por color ── */
.mv__casa i { position: relative; }
/* halo que late: mismo recurso que ya usaba el mapa estático, para que las
   dos casas se distingan de los veintidós destinos sin leer nada */
.mv__casa i::after { content: ""; position: absolute; inset: -2px;
  border-radius: 50%; border: 2px solid #b5851f;
  animation: mapaLate 2.6s ease-out infinite; }
.mv__ref i { transition: transform .18s ease, box-shadow .18s ease; }
/* resaltado al pasar el ratón por la lista */
.mv__ref.is-señalado i { transform: scale(1.9);
  box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 2px 10px rgba(8,10,8,.35); }
.mv__ref.is-señalado span { background: #fff; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .mv__casa i::after { animation: none; opacity: .5; }
}

/* ── El mapa en móvil ──
   El lienzo heredaba la proporción de la imagen estática (1600×640), así
   que en un móvil de 390 px el mapa quedaba en una tira de 156 px: no se
   puede ni situar uno ni tocar un marcador. En vertical el mapa quiere
   formato vertical, así que se le da proporción propia y la imagen de
   fondo se recorta en vez de deformarse. */
@media (max-width: 760px) {
  .mapa--dos .mapa__lienzo { aspect-ratio: 3 / 4; max-height: 72vh; }
  .mapa--dos .mapa__lienzo img { width: 100%; height: 100%;
    object-fit: cover; object-position: center; }
  /* los botones de zoom sobran donde se pellizca con dos dedos, y quitarlos
     deja sitio al rótulo de encuadre, que sí es útil */
  .mv .maplibregl-ctrl-zoom-in, .mv .maplibregl-ctrl-zoom-out { display: none; }
  .mv .mv__enc button { font-size: .62rem; padding: 9px 14px; }
}
.lug__mas { margin: 16px 0 0; }
.lug__mas a { font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta); text-decoration: none;
  border-bottom: 2px solid #b5851f; padding-bottom: 2px; }
.lug__mas a::after { content: " →"; }

/* ── Cabecera de las páginas interiores, unificada con la de la portada ──
   El problema no era estético: por debajo de 900 px el CSS esconde los
   enlaces y por debajo de 700 el nombre de la marca, y estas cinco
   páginas no tenían menú. Quedaba el logo suelto y CERO navegación.
   Ahora llevan la misma hamburguesa y el mismo panel que las fichas. */
.tope .ham span { background: var(--tinta); }
.tope .ham:focus-visible { outline: 2px solid var(--tinta); }
@media (max-width: 900px) {
  .tope .ham { display: grid; }
  /* el botón se va y con su sitio vuelve el nombre de la marca, que es
     lo que evita que la cabecera parezca un icono perdido. El enlace a
     disponibilidad sigue estando dentro del menú. */
  .tope__cta { display: none; }
}
@media (max-width: 700px) { .tope__marca span { display: grid; } }

/* ═══════════════════════════════════════════════════════════════
   DÓNDE ESTAMOS — tercera versión, y esta cambia la ESTRUCTURA

   Las dos anteriores fallaban por lo mismo y retocarlas no servía: era
   una tabla de datos incrustada en una página que habla con tipografía
   grande y aire. Además el titular vivía en una columna y las casas en
   otra, así que quedaban 250 px de nada bajo el titular, y las píldoras
   de cada ficha repetían literalmente lo que decía la tabla de al lado.

   Ahora: titular a todo el ancho, las dos casas EN PARALELO —son iguales,
   no una subordinada a la otra— y los destinos en una banda de píldoras
   que se lee de corrido. Ese "Colindres 5, Laredo 7, Bárcena 7" seguido
   es el argumento de la sección; en columnas de tabla no se leía.
   ═══════════════════════════════════════════════════════════════ */
.mapa--dos .mapa__in { display: block; }
.mapa--dos .mapa__cab { margin-bottom: clamp(30px,4vh,46px); }
.mapa--dos .mapa__casas { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(26px,4vw,64px); }
/* en paralelo ya no hace falta la línea que las separaba en vertical */
.mapa--dos .mapa__casa + .mapa__casa { margin-top: 0; padding-top: 0; border-top: 0; }
.mapa--dos .mapa__casa { grid-template-columns: auto 1fr; }

/* ── Los destinos, en banda ── */
.lug { max-width: 1240px; margin: clamp(34px,4.5vh,54px) auto 0;
  padding: 0 clamp(20px,4vw,54px); }
.lug__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(28,25,21,.45); margin: 0 0 16px; }
.lug__cab span { font-weight: 400; letter-spacing: .12em; color: rgba(28,25,21,.28); }
.lug__l { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 9px; }
.lug__b { display: inline-flex; align-items: center; gap: 9px;
  background: none; cursor: pointer; font: inherit;
  border: 1px solid rgba(28,25,21,.14); border-radius: 999px; padding: 8px 15px;
  transition: border-color .2s ease, background .2s ease; }
.lug__b:hover, .lug__b:focus-visible { border-color: rgba(28,25,21,.4); background: #fff; }
.lug__b.is-activo { background: var(--tinta); border-color: var(--tinta); }
.lug__b.is-activo span, .lug__b.is-activo b { color: #fff; }
.lug__b i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.lug__b span { font-size: .84rem; color: var(--tinta); }
.lug__b b { font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: rgba(28,25,21,.5); }
.lug__mas { margin: 22px 0 0; }
@media (max-width: 760px) {
  .mapa--dos .mapa__casas { grid-template-columns: 1fr; gap: 30px; }
  .mapa--dos .mapa__casa + .mapa__casa { margin-top: 8px; padding-top: 30px;
    border-top: 1px solid rgba(28,25,21,.1); }
  .lug__b { padding: 7px 13px; }
}

/* ═══════════════════════════════════════════════════════════════
   VALORACIONES — la ficha, rediseñada

   Qué había: un rectángulo gris con esquina redondeada, la cita en la
   tipografía de texto y en gris, una comilla suelta flotando arriba a la
   izquierda que parecía un resto, y un círculo gris vacío a modo de
   avatar delante del nombre. La regla .val__c estaba redefinida CINCO
   veces en esta hoja y la última capa había ido deshaciendo la anterior.

   Qué se hace: fuera la caja —la reseña respira sobre el papel, como el
   resto de la página—, la cita vuelve a la tipografía de titulares, que
   es la voz del sitio, y el autor se ancla con un filete dorado corto en
   vez de con un círculo vacío. Esta capa va la última a propósito: no
   toca las cinco anteriores, las remata.
   ═══════════════════════════════════════════════════════════════ */
/* El fondo se queda: probé a quitarlo y sobre el papel la reseña se
   quedaba flotando sin pertenecer a nada. La ficha crema la separa del
   resto de la página, que es justo lo que tiene que hacer. */
.val__c { background: #f5f3ee; border-radius: 3px;
  padding: clamp(28px,3.6vw,44px); }
.val__c blockquote { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem,2.2vw,1.7rem); line-height: 1.55; letter-spacing: -.015em;
  color: var(--tinta); max-width: 30ch; }
/* la comilla suelta sobraba: no señalaba nada y se leía como una errata */
.val__c blockquote::before { content: none; }
.val__s { color: var(--estrella); letter-spacing: .24em; font-size: 1rem; }
.val__c figcaption { display: flex; align-items: baseline; gap: 14px;
  margin-top: clamp(22px,3vh,34px); padding-top: 20px;
  border-top: 1px solid rgba(28,25,21,.12); }
/* el círculo gris vacío parecía una foto que no había cargado */
.val__c figcaption b::before { content: ""; display: block; width: 26px; height: 2px;
  background: #b5851f; margin-bottom: 10px; border-radius: 2px; }
.val__c figcaption b { font-family: var(--body); font-weight: 500; font-size: 1.02rem;
  color: var(--tinta); }
.val__c figcaption span { font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(28,25,21,.45); }
/* Los nombres largos partían en dos líneas y rompían la altura de la
   banda: "Bárcena de / Cicero", "Marismas de / Santoña". */
.lug__b { white-space: nowrap; }

/* ── "Dónde estamos", cuarta versión: el mapa es la imagen ──
   Las tres anteriores intentaban arreglar el bloque recolocando texto, y
   el problema no era la colocación: es la ÚNICA sección de la página sin
   una foto, entre secciones que se sostienen con fotos a sangre. Encima
   repetía las dos casas, que ya salen tres veces más arriba —hero
   partido, fichas con galería y carrusel—.
   Así que fuera las tarjetas y el mapa a ocupar el sitio: es la imagen
   de esta sección y además es lo único que aquí cuenta algo nuevo. */
.mapa--dos .mapa__cab { max-width: 46ch; }
.mapa__lead { margin: 22px 0 0; max-width: 44ch; font-size: 1.02rem;
  font-weight: 300; line-height: 1.7; color: rgba(28,25,21,.62); }
.mapa--dos .lug { margin-top: clamp(30px,4vh,44px); }
/* el mapa gana altura: ahora es el elemento principal del bloque */
.mapa--dos .mapa__lienzo { min-height: clamp(420px, 62vh, 680px); }
.mapa--dos .mapa__lienzo img { width: 100%; height: 100%;
  object-fit: cover; object-position: center; }
/* enlace secundario del globo, junto a "Ver la casa" */
.mv__pg { display: inline-block; margin: 12px 0 0 16px; font-size: .72rem;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(28,25,21,.5); text-decoration: none;
  border-bottom: 1px solid rgba(28,25,21,.2); padding-bottom: 2px; }

/* ── Los títulos de sección de /la-zona/ ──
   Los siete <h2> de esa página no llevan clase, así que caían en el
   estilo genérico y se pintaban en Poppins NEGRITA a 24 px, mientras el
   nombre de cada playa justo debajo va en Melodrama. Dos tipografías
   distintas pegadas la una a la otra. Los títulos del sitio son de
   Melodrama; estos también. */
.zona__t h2 { font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem,3.4vw,2.9rem); line-height: 1.1;
  letter-spacing: -.03em; color: var(--tinta); margin: 0; }

/* ── Aire entre el bloque de texto y el mapa ──
   Iban pegados: el enlace terminaba y el mapa empezaba en la misma línea,
   sin respiración. Con el mapa a plena altura eso se notaba más. */
.mapa__mas { margin: 26px 0 0; }
.mapa__mas a { font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta); text-decoration: none;
  border-bottom: 2px solid #b5851f; padding-bottom: 2px; }
.mapa__mas a::after { content: " →"; }
.mapa--dos .mapa__in { margin-bottom: clamp(48px,7vh,88px); }

/* ═══════════════════════════════════════════════════════════════
   BUSCADOR DE FECHAS DEL HERO
   Va sobre la foto, así que el panel es translúcido con desenfoque: un
   bloque opaco taparía el hero y uno transparente dejaría el texto
   ilegible sobre según qué foto. Con respaldo sólido para los
   navegadores sin backdrop-filter, donde transparente = ilegible.
   ═══════════════════════════════════════════════════════════════ */
.bf { margin-top: clamp(26px,4vh,38px); max-width: 620px; margin-inline: auto; }
.bf__campos { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px;
  padding: 10px; border-radius: 18px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .bf__campos { background: rgba(10,24,32,.72); }
}
.bf__campo { display: grid; gap: 3px; padding: 9px 14px; border-radius: 11px;
  background: rgba(255,255,255,.92); cursor: pointer; }
.bf__campo span { font-size: .56rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(28,25,21,.45); }
.bf__campo input { border: 0; background: none; padding: 0; width: 100%;
  font: inherit; font-size: .92rem; color: var(--tinta); }
.bf__campo input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }
.bf__btn { border: 0; border-radius: 11px; padding: 0 22px; cursor: pointer;
  background: var(--tinta); color: #fff; font: inherit; font-size: .68rem;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s ease; }
.bf__btn:hover:not(:disabled) { background: #000; }
.bf__btn:disabled { opacity: .6; cursor: default; }

/* ── Resultados ──
   Un solo panel pegado al buscador, no tres tarjetas sueltas. Antes cada
   casa era una barra del mismo peso visual que la caja de búsqueda, con
   un vacío enorme entre el nombre y el precio, y la ocupada quedaba
   translúcida sobre la foto y casi no se leía. Ahora es una fila por
   casa, separadas por un filete, dentro de la misma superficie: se lee
   como el resultado de lo que acabas de preguntar, no como tres bloques
   independientes flotando sobre el hero. */
.bf__res:empty { display: none; }
.bf__res { margin-top: 8px; border-radius: 16px; overflow: hidden;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 44px -16px rgba(8,10,8,.42); }
.bf__msg { display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 15px 20px; font-size: .82rem; color: rgba(28,25,21,.6); }
.bf__msg::before { content: ""; flex: none; width: 7px; height: 7px;
  border-radius: 50%; background: #b5851f; }
.bf__msg--mal::before { background: #a33; }

.bf__c { display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; text-decoration: none; background: none;
  transition: background .18s ease; }
.bf__c + .bf__c { border-top: 1px solid rgba(28,25,21,.09); }
a.bf__c:hover { background: rgba(28,25,21,.04); }

/* Miniatura. Rellena el vacío que dejaban tres bloques repartidos por un
   ancho grande, y de paso identifica la casa sin necesidad de leer. */
.bf__ph { flex: none; width: 52px; height: 52px; border-radius: 10px;
  overflow: hidden; background: rgba(28,25,21,.06); }
.bf__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Nombre y detalle apilados: el "10 noches · total" colgaba del precio y
   dejaba la cifra descolgada del nombre al que se refiere. */
.bf__id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bf__id b { font-family: var(--display); font-weight: 500; font-size: 1.14rem;
  color: var(--tinta); line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf__id i { font-style: normal; font-size: .62rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(28,25,21,.42); }

.bf__p { flex: none; font-weight: 600; font-size: 1.24rem; color: var(--tinta);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bf__go { flex: none; font-size: .62rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: var(--tinta);
  padding: 10px 16px; border-radius: 999px; }

/* La ocupada conserva foto y nombre: se distingue por el detalle en gris
   y por no llevar precio ni botón, no por difuminarse. */
.bf__c--no { opacity: .72; }

@media (max-width: 620px) {
  .bf__campos { grid-template-columns: 1fr 1fr; }
  .bf__btn { grid-column: 1 / -1; padding: 14px; }
  .bf__c { padding: 11px 12px; gap: 11px; }
  .bf__ph { width: 44px; height: 44px; }
  .bf__id b { font-size: 1rem; }
  .bf__p { font-size: 1.08rem; }
  .bf__go { padding: 9px 12px; font-size: .58rem; }
}
/* Las noches, mientras eliges: confirma que el rango es el que querías
   antes de que aparezca ningún precio. */
.bf__n { grid-column: 1 / -1; margin: 0; padding: 0 4px;
  font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.85); text-align: center; }
.bf__n:empty { display: none; }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .bf__n { color: rgba(255,255,255,.9); }
}

/* ── Calendario propio del buscador ──
   SE DESPLIEGA EN LÍNEA, debajo de los campos, y a la vez se retiran el
   volante, el titular y el párrafo del hero. Ese es el truco: el problema
   de los intentos anteriores era siempre el sitio —hacia abajo lo cortaba
   el overflow del hero, hacia arriba se salía por el borde— y aquí el
   sitio se FABRICA apartando lo que ya has leído. Mientras eliges fechas,
   el titular no aporta nada; cuando terminas, vuelve.

   La altura se anima con grid-template-rows de 0fr a 1fr: es lo único que
   da una transición fluida sin saber cuánto mide el contenido. Con un
   max-height inventado, el final da un tirón o corta el mes largo. */
.bf__campos { position: relative; }
.bf__campo { border: 0; text-align: left; font: inherit; }
.bf__campo b { display: block; font-family: var(--body); font-weight: 500;
  font-size: .92rem; color: rgba(28,25,21,.35); }
.bf__campo.is-set b { color: var(--tinta); }

.bf__pop { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .44s var(--vh-ease), opacity .3s ease;
  opacity: 0; }
.is-cal .bf__pop { grid-template-rows: 1fr; opacity: 1; }
.bf__popin { overflow: hidden; min-height: 0; }
.bf__pop .hc { margin-top: 10px; padding: 16px; border-radius: 14px;
  background: #fff; }
/* Relleno parejo (10/09/2026): el calendario plegado es una fila de alto 0,
   pero el gap de la rejilla la separaba igual y abajo quedaban 20 px frente
   a 10 en los otros lados. Sin row-gap; cada fila que aparece trae su margen. */
.bf__campos { row-gap: 0; }
.bf__n { margin-top: 10px; }
@media (max-width: 620px) { .bf__btn { margin-top: 10px; } }

/* ── El hero se aparta mientras eliges ──
   No se ocultan de golpe: se desvanecen y COLAPSAN su alto a la vez, que
   es lo que libera el espacio para el calendario. Sin colapsar el alto
   solo quedaría un hueco en blanco donde estaba el titular. */
.vh__kick, .vh__h, .vh__sub {
  max-height: 42vh; overflow: hidden;
  transition: opacity .3s ease, transform .34s var(--vh-ease),
              max-height .44s var(--vh-ease), margin .44s var(--vh-ease); }
.vh.is-eligiendo .vh__kick,
.vh.is-eligiendo .vh__h,
.vh.is-eligiendo .vh__sub {
  opacity: 0; transform: translateY(-14px);
  max-height: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; }
/* los resultados también estorban mientras se elige: son de la búsqueda
   anterior y van a cambiar en cuanto se suelte la segunda fecha */
.is-cal .bf__res { opacity: 0; transition: opacity .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .bf__pop, .vh__kick, .vh__h, .vh__sub, .bf__res { transition: none; }
}

.hc__cab { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; }
.hc__mes { margin: 0; font-family: var(--display); font-size: 1.1rem;
  font-weight: 500; color: var(--tinta); text-transform: capitalize; }
.hc__nav { width: 32px; height: 32px; border: 1px solid rgba(28,25,21,.16);
  border-radius: 50%; background: none; cursor: pointer; color: var(--tinta);
  font-size: .9rem; line-height: 1; transition: background .2s; }
.hc__nav:hover { background: rgba(28,25,21,.06); }
.hc__dow, .hc__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hc__dow span { text-align: center; font-size: .6rem; font-weight: 600;
  letter-spacing: .1em; color: rgba(28,25,21,.35); padding-bottom: 6px; }
.hc__d { aspect-ratio: 1; display: grid; place-content: center; border: 0;
  background: none; font: inherit; font-size: .84rem; color: var(--tinta);
  border-radius: 8px; cursor: pointer; transition: background .15s; }
.hc__d--vacio { visibility: hidden; }
.hc__d--pasado { color: rgba(28,25,21,.22); cursor: default; }
button.hc__d:hover { background: rgba(28,25,21,.08); }
.hc__d--medio { background: rgba(181,133,31,.16); border-radius: 0; }
.hc__d--ini, .hc__d--fin { background: var(--tinta); color: #fff; }
.hc__d--ini { border-radius: 8px 0 0 8px; }
.hc__d--fin { border-radius: 0 8px 8px 0; }
.hc__d--ini.hc__d--fin { border-radius: 8px; }

/* Las cifras de huéspedes, dormitorios y baños en la tipografía de los
   títulos: son datos que se leen de un vistazo, y en la de texto pasaban
   desapercibidas entre las palabras. */
.dos__specs b, .casa__specs b { font-family: var(--display); font-weight: 500;
  font-size: 1.16em; letter-spacing: -.01em; }

/* Las etiquetas de resultado, más limpias: el aviso de carga y el de
   estancia mínima salían como bloques grises sin jerarquía. */
.bf__msg { display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-radius: 12px; font-size: .8rem; font-weight: 500;
  background: rgba(255,255,255,.94); color: rgba(28,25,21,.62); }
.bf__msg::before { content: ""; flex: none; width: 7px; height: 7px;
  border-radius: 50%; background: #b5851f; }
.bf__msg--mal::before { background: #a33; }
.bf__e { display: inline-flex; align-items: center; gap: 7px;
  font-size: .66rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(28,25,21,.42); }
.bf__e::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(28,25,21,.22); }
/* La firma, anclada al pie de la ficha. El carrusel iguala todas las
   fichas a la altura de la más larga, así que las reseñas cortas dejaban
   un hueco muerto debajo del nombre y el relleno se veía descompensado:
   poco arriba y mucho abajo. Con margin-top:auto la firma baja siempre al
   pie y todas las fichas se leen igual. */
.val__c { display: grid; grid-template-rows: auto auto 1fr auto; }
.val__c figcaption { margin-top: auto; }
/* Rescata el relleno superior de la primera ficha. Una regla antigua
   —.val__c:first-child { padding-top: 0 }— venía de cuando esto era una
   lista vertical con filete entre reseñas: la primera no llevaba borde y
   por eso tampoco relleno. En un carrusel la primera ficha es SIEMPRE la
   :first-child, así que la de arriba se quedaba pegada al borde mientras
   abajo había 44 px. */
.val__pista .val__c:first-child { padding-top: clamp(28px,3.6vw,44px); }
/* El hero centra su contenido y el panel de resultados lo heredaba: el
   nombre y el detalle salían centrados en mitad de la fila, descolgados
   de su miniatura. Aquí mandan la izquierda. */
.bf__res, .bf__id, .bf__msg { text-align: left; }



/* ── Los pies de foto, DEBAJO de la foto ──
   Iban superpuestos sobre la imagen con un degradado oscuro para que se
   leyeran. Eso obliga a ensuciar la foto para poder leer el texto, y aun
   así el contraste depende de qué haya en esa esquina de la imagen.
   Fuera: la foto se ve limpia y el pie se lee siempre. */
.zona__hero { overflow: visible; }
.zona__hero figcaption { position: static; padding: 12px clamp(20px,4vw,54px) 0;
  max-width: 1240px; margin-inline: auto;
  background: none; color: rgba(28,25,21,.55);
  font-size: .78rem; font-weight: 300; }
.zona__hero figcaption span { font-weight: 500; color: var(--tinta); }

/* Las cifras de la portada, en la tipografía de los títulos. Iban en
   Poppins negrita, la de texto, y al lado de un titular en Melodrama se
   leían como de otra web. */
.dos__specs b { font-family: var(--display); font-weight: 500;
  font-size: 1.2em; letter-spacing: -.01em; }
/* Las dos casas del cierre: el texto baja debajo de la foto. Mismo motivo
   que el pie del hero — superponerlo obliga a oscurecer la imagen con un
   velo para poder leerlo, y así la foto se ve como es. */
.zona__casas a, .zona__casas a:visited { aspect-ratio: auto; overflow: visible;
  color: var(--tinta); }
.zona__casas a img { position: static; aspect-ratio: 16 / 9; border-radius: 4px; }
.zona__cvelo { display: none; }
.zona__ctxt { position: static; padding: 14px 2px 0; }
.zona__casas .zona__ctxt b { color: var(--tinta); }
.zona__casas .zona__ctxt i { color: rgba(28,25,21,.45); }
.zona__ctxt em { border-bottom-color: #b5851f; }
.zona__casas a:hover .zona__ctxt em { border-bottom-color: var(--tinta); }


/* ── Despliegue suave de las FAQ ──
   El alto lo anima grid-template-rows de 0fr a 1fr; es lo único que
   transiciona sin saber cuánto mide el contenido. El envoltorio lo crea
   faq.js: si ese script no carga, estas reglas no encuentran nada y el
   <details> abre y cierra como siempre. */
.faq__cuerpo { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.22,1,.36,1), opacity .26s ease;
  opacity: 0; }
details.is-abierto .faq__cuerpo { grid-template-rows: 1fr; opacity: 1; }
.faq__dentro { overflow: hidden; min-height: 0; }
/* el aspa del + gira al abrir, que es la señal de que algo pasó */
.prac__lista summary i { transition: transform .34s cubic-bezier(.22,1,.36,1); }
.prac__lista details[open] summary i { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .faq__cuerpo { transition: none; }
  .prac__lista summary i { transition: none; }
}

/* ── Los tres destacados de valoraciones, en una fila ──
   Iban apilados en una columna estrecha a la izquierda: la nota, la línea
   de "130 reseñas verificadas" y el sello de Superanfitrión, uno debajo
   de otro, y la reseña ocupaba el resto. Son tres pruebas de confianza
   del mismo rango, así que se leen mejor a la par que en escalera. La
   reseña baja a todo lo ancho, que además le viene bien. */
.val__in { grid-template-columns: 1fr; gap: clamp(26px,4vh,44px); }
.val__cab { position: static; display: grid;
  grid-template-columns: auto 1px minmax(0,1fr) 1px minmax(0,1fr) auto;
  align-items: center; gap: clamp(18px,2.6vw,34px);
  padding-bottom: clamp(22px,3vh,32px);
  border-bottom: 1px solid rgba(28,25,21,.1); }
.val__cab .eyebrow { grid-column: 1 / -1; margin-bottom: -6px; }
.val__num { margin: 0; font-size: clamp(2.6rem,4.6vw,3.6rem); }
/* las estrellas se meten bajo la nota, que es de lo que hablan */
.val__stars { grid-column: 1; grid-row: 3; margin: 4px 0 0 !important; }
.val__cab::before, .val__cab::after { content: ""; grid-row: 2 / 4;
  width: 1px; height: 100%; background: rgba(28,25,21,.12); }
.val__meta, .val__super { margin: 0; grid-row: 2 / 4; align-self: center; }
.val__ctrl { margin: 0; grid-row: 2 / 4; }
@media (max-width: 900px) {
  .val__cab { grid-template-columns: 1fr; gap: 14px;
    justify-items: start; }
  .val__cab::before, .val__cab::after { display: none; }
  .val__stars { grid-column: 1; grid-row: auto; }
  .val__meta, .val__super, .val__ctrl { grid-row: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   REMATES PENDIENTES
   Van al final a propósito: son correcciones sobre reglas anteriores y
   aquí ganan sin tener que inventar selectores más específicos.
   ═══════════════════════════════════════════════════════════════ */

/* ── Los destinos del mapa llevan su nombre TAMBIÉN en móvil ──
   Se ocultaban por debajo de 760 px para que no se pisaran entre ellos,
   pero el resultado era un mapa de puntos grises anónimos: sin el nombre
   no se sabe si ese punto es una playa o un pueblo. Se quedan, más
   pequeños que los de las casas, que siguen mandando. */
@media (max-width: 760px) {
  .mv__ref span { display: block; font-size: .58rem; padding: 3px 7px;
    max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
  .mv__ref i { width: 8px; height: 8px; }
  .mv__casa span { font-size: .72rem; padding: 5px 11px; }
}
/* muy lejos siguen ocultándose: a ese zoom se solapan veintidós nombres */
.mv--lejos .mv__ref span { display: none !important; }

/* ── Las cifras, en la tipografía de los títulos ──
   Con el selector del elemento delante para que no haya duda de quién
   gana: hubo dos intentos anteriores que quedaron por debajo de reglas
   más específicas. */
span.dos__specs b, ul.casa__specs b, p.mapa__linea b {
  font-family: var(--display); font-weight: 500;
  font-size: 1.22em; letter-spacing: -.01em; }

/* ══════════════════════════════════════════════════════════════════════
   MENÚ MÓVIL — BLOQUE CANÓNICO
   Este bloque está DUPLICADO palabra por palabra en hero.css y apto.css,
   y es intencionado. El menú lo pinta footer.js igual en las seis
   páginas, pero cada página carga una hoja distinta: la portada hero.css
   y las fichas apto.css. Las dos habían ido divergiendo a base de
   parches —en las fichas los enlaces salían más pequeños, con números
   delante y otra equis— hasta que el mismo menú se veía de dos maneras.
   Al ir al final de las dos hojas, gana en las dos. Si se toca, se toca
   AQUÍ y se copia; si algún día son tres hojas, esto se saca a su
   propio archivo.
   Nada de var(--vh-ease) ni var(--e): la primera solo existe en
   hero.css y la segunda solo en apto.css. Una variable indefinida no
   da error, simplemente anula la propiedad — así se quedó el pie de
   una ficha en transparente. Las curvas van literales.
   ══════════════════════════════════════════════════════════════════ */
.menu {
  background: #fff;
  color: var(--tinta);
  justify-content: flex-start;
  padding: 88px clamp(26px, 7vw, 44px) clamp(24px, 4vh, 34px);
}
.menu__nav {
  display: grid;
  width: 100%;
  margin-block: auto 0;   /* nav + idiomas van juntos; el auto del pie los centra */
  justify-items: center;
  text-align: center;
}
.menu__nav a {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  padding: clamp(7px, 1.2vh, 10px) 0;
  border-bottom: 0;
  text-decoration: none;
  color: var(--tinta);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.65rem, 7.4vw, 2.05rem);
  line-height: 1.1;
  text-shadow: none;
}
/* Sin numeritos delante ni filete debajo: se probaron los dos y el menú
   son cuatro palabras, no una lista que haya que contar. */
.menu__nav a::before,
.menu__nav a::after { content: none; display: none; }
.menu__nav a > span::before { content: none; }
/* Compacto (10/09/2026): las dos casas arriba y, tras un respiro, lo demás.
   Antes cada enlace medía ~80 px y el menú no cabía sin scroll. */
.menu__nav a:nth-child(4) { margin-top: clamp(10px, 2vh, 16px); }

.menu__nav a span {
  display: inline-block;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              letter-spacing .45s cubic-bezier(.22, 1, .36, 1);
}
.menu__nav a:hover span { letter-spacing: .01em; }
.menu__nav a:active span { transform: scale(.96); }
/* Al pasar por encima, el resto se apaga: señala dónde estás sin añadir
   ni un subrayado ni un color más. */
.menu__nav:hover a { opacity: .38; }
.menu__nav:hover a:hover,
.menu__nav a:active { opacity: 1; }

.menu__pie {
  margin-top: auto;
  padding-top: 0;
  display: grid;
  gap: 10px;
}
.menu__tel {
  min-height: 0;
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(22, 21, 15, .72);
}
.menu__x {
  position: absolute;
  top: clamp(16px, 3vh, 24px);
  right: clamp(12px, 4vw, 24px);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(22, 21, 15, .45);
  cursor: pointer;
  transition: color .3s cubic-bezier(.22, 1, .36, 1),
              transform .5s cubic-bezier(.22, 1, .36, 1);
}
.menu__x:hover,
.menu__x:focus-visible { background: none; color: var(--tinta); transform: rotate(90deg); }
.menu__x:focus-visible { outline: 0; }
.menu__x svg { width: 22px; height: 22px; }

.idiomas {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: clamp(22px, 3.5vh, 30px) 0 0;
  padding-left: 0;
}
.idiomas a:first-child { margin-left: 0; }
.idiomas a {
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(22, 21, 15, .5);
}
.idiomas a:hover { color: var(--tinta); background: rgba(22, 21, 15, .06); }
.idiomas a[aria-current="true"] { color: #fff; background: var(--tinta); }

/* El menú no existe en escritorio; esto lo repite por si el bloque se
   copiara a una hoja que no lo oculte. */
@media (min-width: 901px) { .menu { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════
   VALORACIONES · la cabecera va SIEMPRE en una línea
   Estaba en fila en escritorio, pero una @media (max-width:900px) la
   apilaba en móvil, que es donde se estaba mirando. Aquí se coloca por
   áreas para que las tres cifras —nota, reseñas y distintivo— queden
   en la misma línea en cualquier ancho; lo que se encoge es la letra,
   no la estructura. Las estrellas caen bajo la nota, que es de lo que
   hablan, y las flechas se van arriba con el volante.
   ══════════════════════════════════════════════════════════════════ */
.val__cab {
  position: static;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas:
    "vol  vol   vol    ctrl"
    "nota meta  super  ctrl"
    "estr meta  super  ctrl";
  align-items: start;
  column-gap: clamp(14px, 2.2vw, 30px);
  row-gap: 2px;
  padding-bottom: clamp(22px, 3vh, 32px);
  border-bottom: 1px solid rgba(28, 25, 21, .1);
}
.val__cab .eyebrow { grid-area: vol; margin-bottom: 10px; }
.val__num   { grid-area: nota; margin: 0; font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1; }
.val__stars { grid-area: estr; margin: 4px 0 0 !important; align-self: start; }
.val__meta  { grid-area: meta;  }
.val__super { grid-area: super; }
.val__ctrl  { grid-area: ctrl; align-self: center; margin: 0; }
/* El filete separador va como borde de cada columna: los ::before de
   antes se colocaban solos en la retícula y con áreas no tienen sitio. */
.val__meta, .val__super {
  margin: 0;
  align-self: center;
  padding-left: clamp(14px, 2.2vw, 30px);
  border-left: 1px solid rgba(28, 25, 21, .12);
  font-size: clamp(.72rem, 1.5vw, .92rem);
  line-height: 1.4;
}
.val__cab::before, .val__cab::after { display: none; }

@media (max-width: 900px) {
  /* Sigue siendo UNA línea: se aprieta la letra, no se apila. */
  .val__cab {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "vol  vol   ctrl"
      "nota meta  super"
      "estr meta  super";
    column-gap: 11px;
  }
  .val__ctrl { align-self: start; justify-self: end; }
  .val__meta, .val__super { padding-left: 11px; font-size: .66rem; line-height: 1.35; }
  .val__num { font-size: 1.75rem; }
  .val__stars { font-size: .62rem; letter-spacing: .04em; }
  .val__super svg { display: none; }   /* a este tamaño el icono solo estorba */
}

/* ══════════════════════════════════════════════════════════════════════
   HERO · con resultados en pantalla, el titular se aparta
   hero-fechas.js pone .is-buscando en el hero cuando hay resultados,
   pero NO había ni una regla que lo escuchara: la clase entraba y no
   pasaba nada. Se reutiliza el mismo gesto que .is-eligiendo para que
   abrir el calendario y ver los resultados se sientan como un solo
   movimiento y no como dos animaciones distintas.
   ══════════════════════════════════════════════════════════════════ */
.vh.is-buscando .vh__kick,
.vh.is-buscando .vh__h,
.vh.is-buscando .vh__sub {
  opacity: 0; transform: translateY(-14px);
  max-height: 0; margin-top: 0; margin-bottom: 0; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .vh.is-buscando .vh__kick,
  .vh.is-buscando .vh__h,
  .vh.is-buscando .vh__sub { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   LAS CIFRAS DE LAS CASAS, EN LA TIPOGRAFÍA DE LOS TÍTULOS
   Más arriba hay un `.casa__specs dd { font-family: var(--body) !important }`
   con su motivo: Melodrama es una display de alto contraste y destrozaba
   el código de registro (G-1Ø7329) y los ordinales 01/02/03. Pero ese
   motivo NO alcanza a 2 · 1 · 1: un dígito suelto en Melodrama se lee
   perfectamente, y de hecho ya sale así en el hero y en .dos__specs.
   La regla de antes se queda para .lugar__list y .pq__n, que sí son
   códigos. Hace falta !important para ganarle a un !important.
   Los intentos anteriores apuntaban a `.casa__specs b` y a
   `ul.casa__specs b`: aquí el marcado es un <dl> con <dd>, así que no
   coincidían con nada y por eso no cambiaba nunca.
   ══════════════════════════════════════════════════════════════════ */
dl.casa__specs dd {
  font-family: var(--display) !important;
  font-weight: 500;
  letter-spacing: -.02em;
}

/* ══════════════════════════════════════════════════════════════════════
   LAS TRES CIFRAS DE ARRIBA, EN UNA FILA
   `.proof li` llevaba min-width: 150px y una @media (max-width: 640px)
   que las ponía a 100 %: en el móvil las tres se apilaban una debajo de
   otra ocupando pantalla y media. Se quedan en fila a cualquier ancho
   —tres columnas iguales— y lo que se ajusta es el tamaño de la cifra.
   min-width: 0 es imprescindible: sin él, el contenido impone un mínimo
   y el flex vuelve a romper la fila por más que se le diga 1 1 0.
   ══════════════════════════════════════════════════════════════════ */
.proof li {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 6px clamp(8px, 2.4vw, 32px);
}
.proof li + li {
  border-left: 1px solid rgba(28, 25, 21, .14) !important;
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 6px !important;
}
@media (max-width: 640px) {
  .proof strong { font-size: clamp(1.6rem, 7.5vw, 2.4rem) !important; }
  .proof span { font-size: .54rem !important; letter-spacing: .12em !important;
    line-height: 1.3; }
  .proof li { padding-inline: 7px; }
}

/* ══════════════════════════════════════════════════════════════════════
   VALORACIONES · las flechas bajan a su propia línea
   Estaban metidas en la esquina de arriba a la derecha, compartiendo
   fila con el volante y pegándose a la columna del distintivo: el
   contador "04 / 16" partía en dos líneas y todo el encabezado se leía
   apretado. Pasan a una fila propia, a lo ancho y alineadas a la
   derecha, justo encima de la tarjeta de la reseña — que es lo que
   gobiernan. El filete separador se va con ellas: divide las tres
   cifras del carrusel, que es la división real.
   ══════════════════════════════════════════════════════════════════ */
.val__cab {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "vol  vol  vol"
    "nota meta super"
    "estr meta super"
    "ctrl ctrl ctrl";
  border-bottom: 0;
  padding-bottom: 0;
}
.val__ctrl {
  grid-area: ctrl;
  justify-self: stretch;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(10px, 1.6vw, 16px);
  margin: clamp(20px, 3vh, 30px) 0 0;
  padding-top: clamp(16px, 2.4vh, 22px);
  border-top: 1px solid rgba(28, 25, 21, .12);
}
/* el contador deja de partirse en dos líneas */
.val__pos { white-space: nowrap; }

@media (max-width: 900px) {
  .val__cab {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "vol  vol  vol"
      "nota meta super"
      "estr meta super"
      "ctrl ctrl ctrl";
  }
  .val__ctrl { justify-self: stretch; }
}

/* ══════════════════════════════════════════════════════════════════════
   LA CITA DE LA RESEÑA, EN LA TIPOGRAFÍA DE TEXTO
   Iba en Melodrama. Para un titular está bien, pero una reseña son
   cinco o seis líneas seguidas y una display de alto contraste cansa de
   leer a ese tamaño. Se pasa a la de texto, que es lo que aguanta un
   párrafo. El titular de la sección sigue en Melodrama.
   ══════════════════════════════════════════════════════════════════ */
.val__c blockquote {
  font-family: var(--body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   DÓNDE ESTAMOS · la cabecera deja de flotar sola
   El titular y el párrafo ocupaban la mitad izquierda de la banda y la
   derecha quedaba en blanco, con el mapa a todo el ancho muy por debajo:
   los dos bloques se leían como dos secciones distintas que no se
   conocen. Ese hueco pasa a ser la leyenda del mapa.
   No es relleno: los puntos van coloreados por categoría desde hace dos
   versiones y el color no significaba NADA para quien miraba. Ahora la
   banda explica el mapa que tiene debajo, que es lo que la ata a él.
   ══════════════════════════════════════════════════════════════════ */
.mapa__in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  column-gap: clamp(30px, 6vw, 90px);
  row-gap: clamp(26px, 4vh, 40px);
}
.mapa__cab { margin: 0; }
/* el aire hasta el mapa se recorta: son una sola cosa, no dos */
.mapa--dos .mapa__in { padding-bottom: clamp(22px, 3.5vh, 38px); }

.mapa__clave { align-self: end; }
.mapa__clavet {
  margin: 0 0 14px;
  font-family: var(--body);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(28, 25, 21, .45);
}
.mapa__cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px clamp(16px, 2.4vw, 28px);
}
.mapa__cat {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid rgba(28, 25, 21, .13);
  font-size: .84rem;
  color: rgba(28, 25, 21, .72);
}
/* el mismo círculo de color que lleva el punto en el mapa */
.mapa__cat::before {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c);
  transform: translateY(-1px);
}
.mapa__cat b {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.mapa__cat span { line-height: 1.3; }
.mapa__clavep {
  margin: 16px 0 0;
  font-size: .78rem;
  line-height: 1.55;
  color: rgba(28, 25, 21, .5);
}

@media (max-width: 900px) {
  .mapa__in { grid-template-columns: 1fr; align-items: start; }
  .mapa__cats { gap: 9px 18px; }
  .mapa__cat { font-size: .76rem; }
  .mapa__clavep { display: none; }   /* el lead de arriba ya lo dice */
}

/* ── Tabla de los 22 destinos ─────────────────────────────────────────
   Plegada bajo el mapa. Es el dato diferencial del sitio —los minutos
   medidos puerta a puerta— y hasta ahora solo existía dentro del JSON
   del mapa, donde ningún buscador lo veía. Aquí es texto. */
.mapa__tabla {
  max-width: 900px;
  margin: clamp(26px, 4vw, 40px) auto 0;
  padding: 0 clamp(18px, 5vw, 28px);
}
.mapa__tabla > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid rgba(28, 25, 21, .16);
  border-bottom: 1px solid rgba(28, 25, 21, .16);
  font-family: var(--body);
  font-size: .88rem;
  font-weight: 500;
  color: var(--tinta);
}
.mapa__tabla > summary::-webkit-details-marker { display: none; }
.mapa__tabla > summary i {
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 1.5px solid rgba(28, 25, 21, .5);
  border-bottom: 1.5px solid rgba(28, 25, 21, .5);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--vh-ease);
}
.mapa__tabla[open] > summary i { transform: rotate(225deg) translate(-2px, -2px); }
.mapa__tabla > summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

.mapa__tw { overflow-x: auto; }
.mapa__tabla table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-family: var(--body);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
.mapa__tabla thead th {
  text-align: right;
  padding: 16px 10px 10px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(28, 25, 21, .45);
  border-bottom: 1px solid rgba(28, 25, 21, .16);
  white-space: nowrap;
}
.mapa__tabla thead th:first-child { text-align: left; }
.mapa__tabla thead th span {
  display: block;
  margin-top: 3px;
  letter-spacing: .1em;
  font-weight: 400;
  color: rgba(28, 25, 21, .35);
}
.mapa__grupo th {
  text-align: left;
  padding: 18px 10px 7px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(28, 25, 21, .5);
}
/* el mismo círculo de color que el punto en el mapa y la leyenda */
.mapa__grupo th::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--c);
  transform: translateY(-1px);
}
.mapa__tabla tbody th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--tinta);
}
.mapa__tabla tbody th[scope="row"],
.mapa__tabla tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(28, 25, 21, .08);
}
.mapa__tabla tbody td {
  text-align: right;
  color: rgba(28, 25, 21, .72);
  white-space: nowrap;
}
.mapa__metodo {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: .74rem;
  line-height: 1.6;
  color: rgba(28, 25, 21, .5);
}

@media (max-width: 600px) {
  .mapa__tabla table { font-size: .78rem; }
  .mapa__tabla thead th { font-size: .55rem; }
  .mapa__tabla tbody th[scope="row"],
  .mapa__tabla tbody td { padding: 8px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .mapa__tabla > summary i { transition: none; }
}

/* La misma tabla, pero suelta: en /donde-alojarse-en-cantabria/ es la
   pieza central de la página, no una nota al pie del mapa, así que no se
   pliega. Hereda todo el estilo interior de .mapa__tabla. */
.mapa__tabla--abierta { max-width: none; padding: 0; margin-top: 4px; }
.mapa__tabla--abierta table { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════
   HUB · /donde-alojarse-en-cantabria/
   Página de texto largo: una sola columna, medida de lectura corta y
   secciones numeradas. No reutiliza .zona__fila porque aquella es una
   rejilla de foto + texto y aquí no hay fotos que enseñar: lo que se
   enseña son los minutos.
   ═══════════════════════════════════════════════════════════════ */
.hub__cuerpo {
  display: grid;
  gap: clamp(48px, 7vh, 88px);
  padding: clamp(40px, 6vh, 72px) clamp(20px, 5vw, 54px) 0;
  max-width: 1180px;
  margin: 0 auto;
}
.hub__txt { max-width: 62ch; }
.hub__txt h2 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.hub__txt h3 {
  margin: 26px 0 8px;
  font-family: var(--body);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--tinta);
}
.hub__txt p {
  margin: 0 0 14px;
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.85;
  color: #4a463c;
}
.hub__txt strong { font-weight: 500; color: var(--tinta); }
/* :not(.hub__cta): esta regla es más específica que .hub__cta (a con clase vs.
   clase sola) y le ganaba el color pese a ir antes en la hoja. El botón
   quedaba con su texto claro pisado por este var(--tinta): texto casi negro
   sobre fondo casi negro, invisible. */
.hub__txt a:not(.hub__cta) { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(28,25,21,.3); }
.hub__txt a:not(.hub__cta):hover { text-decoration-color: var(--tinta); }

.hub__lista { list-style: none; margin: 4px 0 18px; padding: 0; }
.hub__lista li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(28,25,21,.12);
  font-size: .88rem;
  font-weight: 300;
  line-height: 1.7;
  color: #4a463c;
  font-variant-numeric: tabular-nums;
}
.hub__lista li:first-child { border-top: 1px solid rgba(28,25,21,.12); }
.hub__lista b {
  font-family: var(--body);
  font-weight: 500;
  color: var(--tinta);
  margin-right: 6px;
}

.hub__aviso {
  margin: 18px 0 0;
  padding: 16px 20px;
  border-left: 2px solid rgba(28,25,21,.3);
  background: rgba(28,25,21,.035);
  font-size: .86rem !important;
  line-height: 1.75;
}

.hub__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--tinta);
  color: #f7f5f0;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none !important;
  transition: opacity .2s;
}
.hub__cta:hover { opacity: .85; }
.hub__cta:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

@media (max-width: 700px) {
  .hub__lista li { font-size: .84rem; }
}

/* ── Enlaces editoriales entre páginas ──
   Pequeños a propósito: son enlaces de continuación, no llamadas a la
   acción. Lo que importa de ellos es que están en el CUERPO y no en el
   menú, porque los de plantilla no cuentan como enlace editorial. */
.mapa__mas { margin: 14px 0 0; font-size: .82rem; }
.zona__esmas { margin: 16px 0 0; font-size: .82rem; }
/* .fin__mas vive en apto.css: es la ficha de cada casa (akiver/iveka)
   quien la usa, y esa página no carga este archivo. */
.mapa__mas a, .zona__esmas a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(28,25,21,.32);
  transition: text-decoration-color .2s;
}
.mapa__mas a:hover, .zona__esmas a:hover {
  text-decoration-color: currentColor;
}
.mapa__mas a:focus-visible, .zona__esmas a:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   OPINIONES · /opiniones/
   Las reseñas van como texto visible con su fuente, nunca como
   aggregateRating ni widget incrustado: son de Airbnb, Booking y Google,
   y marcarlas como propias es motivo de acción manual.
   ═══════════════════════════════════════════════════════════════ */
.op__in {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 5vh, 56px) clamp(20px, 5vw, 54px) 0;
  display: grid;
  gap: clamp(44px, 6vh, 78px);
}
.op__tabla { max-width: 720px; }

.op__metodo { max-width: 62ch; }
.op__metodo h2 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.op__metodo p {
  margin: 0 0 14px;
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.85;
  color: #4a463c;
}
.op__metodo strong { font-weight: 500; color: var(--tinta); }
.op__metodo a:not(.hub__cta) {
  color: var(--tinta); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(28,25,21,.3);
}

.op__cab { max-width: 62ch; margin-bottom: 22px; }
.op__cab h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.14;
  letter-spacing: -.02em;
}
.op__meta, .op__ver { margin: 0 0 6px; font-size: .84rem; font-weight: 300; color: #4a463c; }
.op__meta a, .op__ver a {
  color: var(--tinta); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(28,25,21,.3);
}

.op__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.op__c {
  margin: 0;
  padding: 22px 24px;
  border: 1px solid rgba(28,25,21,.14);
  border-radius: 3px;
  background: rgba(255,255,255,.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.op__estrellas { margin: 0; font-size: .8rem; letter-spacing: .12em; color: #b08d3f; }
.op__q { margin: 0; flex: 1; }
.op__q p {
  margin: 0;
  font-size: .89rem;
  font-weight: 300;
  line-height: 1.75;
  color: #35322a;
}
.op__q p::before { content: "\201C"; }
.op__q p::after { content: "\201D"; }
.op__pie {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 12px;
  border-top: 1px solid rgba(28,25,21,.1);
}
.op__pie b { font-family: var(--body); font-weight: 500; font-size: .84rem; color: var(--tinta); }
.op__pie span { font-size: .72rem; color: rgba(28,25,21,.5); letter-spacing: .04em; }

@media (max-width: 600px) {
  .op__grid { grid-template-columns: 1fr; }
}

/* ── /que-hacer-si-llueve.../ ── */
.ll__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.ll__c {
  padding: 22px 24px;
  border: 1px solid rgba(28,25,21,.14);
  border-radius: 3px;
  background: rgba(255,255,255,.5);
}
.ll__c h3 {
  margin: 0 0 8px;
  font-family: var(--body);
  font-weight: 500;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--tinta);
}
.ll__min {
  margin: 0 0 12px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.ll__min span {
  display: block;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(28,25,21,.45);
  margin-top: 3px;
}
.ll__h {
  margin: 0;
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.7;
  color: #4a463c;
}
.ll__h strong { font-weight: 500; color: var(--tinta); }
.ll__f {
  display: block;
  margin-top: 8px;
  font-size: .72rem;
  color: rgba(28,25,21,.5);
}
.ll__h a, .ll__f a {
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(28,25,21,.35);
}
.ll__rev {
  margin-top: 20px !important;
  padding-top: 16px;
  border-top: 1px solid rgba(28,25,21,.13);
  font-size: .78rem !important;
  color: rgba(28,25,21,.55) !important;
}

@media (max-width: 600px) {
  .ll__grid { grid-template-columns: 1fr; }
}






/* fix 2026-09-14: menú móvil centrado y cabecera de /opiniones */
main.op{margin-top:0;border-radius:0;box-shadow:none}
.op>.zona__cab{max-width:1180px;margin:0 auto;padding:clamp(28px,4vh,44px) clamp(20px,5vw,54px) 0;margin-bottom:0}

.menu__nav{margin-block:auto}