/* ---- styles/site.css ---- */
/* Sistema de diseño: editorial cálido — crema, piedra y tierra; serif con carácter para títulos. */

/* Fraunces (licencia SIL Open Font License), alojada en la propia web para no enviar datos de los
   visitantes a terceros (ver la política de privacidad). Fuente variable, solo caracteres latinos
   (es, ca, en, fr, de): peso 400–600 y tamaño óptico automático, que afina el trazo en los títulos
   grandes y lo refuerza en los pequeños. Se precarga en layout.js; con swap, el texto sale al momento
   en Georgia y cambia en cuanto llega. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cream: #f6efe1;
  --cream-2: #efe3cc;
  --stone: #d3c3a4;
  --ink: #2b2117;
  --muted: #5f5140;
  --dim: #716451; /* el más claro que llega a 4,5:1 sobre --cream-2 (npm run audit) */
  --earth: #7a4a26;
  --accent: #a5401f;
  --accent-dark: #833319;
  --border: #ddccac;
  --bg: var(--cream);
  --fg: var(--ink);

  --font-serif: "Fraunces", Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  /* curva de todas las animaciones: arranca rápido y frena suave */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.55;
  overflow-x: hidden; /* la única que se arrastra en horizontal es .scroll__track */
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
/* mientras llega una foto, su hueco se ve en tono crema (no en blanco), así una conexión lenta no deja
   huecos que "saltan"; en la portada, oscuro, como el resto de la portada */
main img { background-color: var(--cream-2); }
main .gallery__img { background-color: transparent; } /* la portada lleva detrás su miniatura desenfocada (gallery.css) */
ul { margin: 0; padding: 0; list-style: none; }

/* ---- utilidades compartidas por las secciones ------------------------------------------------- */
.wrap { max-width: 74rem; margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.section { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
/* Sin content-visibility a propósito (probado 12-11-2026): en una página de 8 secciones no compensa;
   la primera bajada cambiaba de altura 5 veces y daba tirones al dibujar cada sección. */
main [id] { scroll-margin-top: 4.75rem; } /* el topbar es fixed: sin esto, un enlace #ancla dejaría el título debajo */
/* los enlaces del menú (#historia, #casa…) llevan a su sección con un desplazamiento suave, nativo del
   navegador; con "reducir movimiento", salto directo como siempre */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.section--alt { background: var(--cream-2); }
.eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; font-weight: 700; color: var(--earth); margin-bottom: 0.75rem; }
.section__head { max-width: 42rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section__head h2 { font-size: clamp(1.9rem, 4.2vw, 2.75rem); font-weight: 500; margin-bottom: 1rem; }
.section__head p { color: var(--muted); font-size: 1.05rem; }

.button--outline { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.button--outline:hover { background: var(--ink); color: var(--cream); }

/* revelado suave al hacer scroll; sin JS o con "prefers-reduced-motion" el contenido ya sale visible */
/* JS (site.js) lo dispara un poco ANTES de que el bloque entre en pantalla y, si entran varios a la vez,
   en orden (título, texto, fotos) con un pequeño escalonado (--reveal-delay). */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); transition-delay: var(--reveal-delay, 0s); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

/* ---- cabecera ------------------------------------------------------------------------------------
   Flota transparente sobre la primera foto; en cuanto se pasa de esa pantalla (site.js añade
   .topbar--solid) se vuelve una barra sólida para seguir siendo legible sobre fondos claros. */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 1.3rem clamp(1rem, 4vw, 2.5rem);
  background: linear-gradient(180deg, rgba(12, 9, 6, 0.42) 0%, rgba(12, 9, 6, 0) 100%);
  color: #fdf8ee;
  transition: background 0.25s ease, color 0.25s ease;
}
.topbar--solid {
  background: rgba(246, 239, 225, 0.97); /* sin backdrop-filter: redibujar el desenfoque en cada fotograma de scroll daba tirones */
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.topbar__actions { display: flex; align-items: center; gap: 0.75rem; }

.site-nav { display: flex; align-items: center; gap: 1.85rem; }
.site-nav a {
  position: relative;
  padding-bottom: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  opacity: 0.88;
  transition: opacity 0.15s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transition: right 0.25s ease;
}
.site-nav a:hover, .site-nav a[aria-current] { opacity: 1; }
.site-nav a:hover::after, .site-nav a[aria-current]::after { right: 0; } /* aria-current: sección actual (site.js) */
@media (max-width: 760px) {
  .site-nav { display: none; }
}

.menu { position: relative; display: none; }
@media (max-width: 760px) {
  .menu { display: block; }
}
.menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 4px;
  border: 1px solid rgba(253, 248, 238, 0.55);
}
.topbar--solid .menu summary { border-color: rgba(43, 33, 23, 0.3); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::marker { content: ""; }
.menu__icon { width: 1rem; height: 1rem; }
.menu__panel {
  position: absolute;
  left: 0;
  top: calc(100% + 0.6rem);
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.35rem;
  min-width: 11rem;
  box-shadow: 0 16px 32px rgba(30, 20, 10, 0.2);
}
.menu__panel a {
  padding: 0.55rem 0.7rem;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ink);
}
.menu__panel a:hover { background: var(--cream-2); }
.menu__panel a[aria-current] { font-weight: 700; }

.lang { position: relative; }
.lang summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  border: 1px solid rgba(253, 248, 238, 0.55);
}
.topbar--solid .lang summary { border-color: rgba(43, 33, 23, 0.3); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::marker { content: ""; }
.lang summary:hover { background: rgba(253, 248, 238, 0.14); }
.topbar--solid .lang summary:hover { background: rgba(43, 33, 23, 0.06); }
.lang__chevron { width: 0.6rem; height: 0.6rem; transition: transform 0.15s ease; }
.lang[open] .lang__chevron { transform: rotate(180deg); }
.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.35rem;
  min-width: 9.5rem;
  box-shadow: 0 16px 32px rgba(30, 20, 10, 0.2);
}
.lang__menu a {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--ink);
}
.lang__menu a:hover { background: var(--cream-2); }
.lang__menu a[aria-current="true"] { font-weight: 700; }

.book-link {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid rgba(253, 248, 238, 0.55);
}
.topbar--solid .book-link { border-color: rgba(43, 33, 23, 0.3); }
.book-link:hover { background: rgba(253, 248, 238, 0.14); }
.topbar--solid .book-link:hover { background: rgba(43, 33, 23, 0.06); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.button--cta { background: var(--accent); color: #fff; }
.button--cta:hover { background: var(--accent-dark); }
.button--ghost { background: transparent; border: 1px solid rgba(253, 248, 238, 0.75); color: #fdf8ee; }
.button--ghost:hover { background: rgba(253, 248, 238, 0.14); }

/* ---- pie -----------------------------------------------------------------------------------------
   Fondo oscuro a juego con la banda de Reservas justo encima: cierran la página como un solo bloque.
   A la derecha, los enlaces a Privacidad y Aviso legal. */
.site-footer { background: var(--ink); color: rgba(253, 248, 238, 0.75); }
.site-footer__inner {
  padding-block: clamp(2rem, 5vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  border-top: 1px solid rgba(253, 248, 238, 0.14);
  font-size: 0.82rem;
}
.site-footer__brand { font-family: var(--font-serif); font-size: 0.95rem; color: #fdf8ee; text-decoration: none; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.site-footer__links a { color: inherit; text-decoration: none; }
.site-footer__links a:hover, .site-footer__links a[aria-current] { color: #fdf8ee; text-decoration: underline; text-underline-offset: 0.2em; }

/* ---- visor de fotos (lightbox) --------------------------------------------------------------------
   Compartido por toda la página; lo abren los botones .lightbox-trigger (ver casa.js y site.js). */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 11, 7, 0.94);
  padding: clamp(1rem, 5vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; }

/* ---- foto a sangre, de lado a lado (Grupos y Entorno) ------------------------------------------------
   Al entrar en pantalla se abre como un telón: empieza recortada en un marco algo más pequeño y se
   expande hasta los bordes. Mientras pasa, la foto se mueve un poco más lenta que la página (parallax):
   es algo más alta que su marco y se desplaza dentro. Todo va ligado al scroll con CSS (animation-
   timeline: view()), sin JavaScript. Sin soporte o con "reducir movimiento", queda el revelado normal
   de [data-reveal]. */
.bleed { width: 100%; height: clamp(18rem, 42vw, 32rem); margin-top: clamp(2.5rem, 6vw, 3.5rem); overflow: hidden; }
.bleed img { width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .bleed[data-reveal] { opacity: 1; transform: none; transition: none; }
    .bleed { animation: bleed-open linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .bleed img {
      height: calc(100% + 5rem);
      margin-top: -2.5rem;
      animation: bleed-parallax linear both;
      animation-timeline: view();
    }
    @keyframes bleed-open { from { clip-path: inset(9% 7% round 6px); } to { clip-path: inset(0 round 0); } }
    @keyframes bleed-parallax { from { transform: translateY(-2.5rem); } to { transform: translateY(2.5rem); } }
  }
}

/* ---- transiciones de vista (View Transitions) ------------------------------------------------------
   Entre páginas del sitio (cambio de idioma, privacidad, aviso legal), un fundido en vez de un salto
   en blanco. Dentro de la página, la miniatura que crece hasta el visor (lb-photo, ver site.js): la
   miniatura y la foto grande no tienen el mismo formato, así que ambas llenan el marco mientras crece
   (object-fit: cover) y al acabar la grande queda entera. Navegadores sin soporte: como siempre. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }
::view-transition-group(lb-photo) { animation-duration: 0.42s; animation-timing-function: var(--ease); }
::view-transition-old(lb-photo), ::view-transition-new(lb-photo) { height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 4px;
  border: 1px solid rgba(253, 248, 238, 0.35);
  background: rgba(253, 248, 238, 0.08);
  color: #fdf8ee;
  cursor: pointer;
}
.lightbox__close svg, .lightbox__prev svg, .lightbox__next svg { width: 1.15rem; height: 1.15rem; }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(253, 248, 238, 0.18); }
.lightbox__close { top: clamp(1rem, 4vw, 1.75rem); right: clamp(1rem, 4vw, 1.75rem); }
.lightbox__prev { left: clamp(0.75rem, 3vw, 1.75rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(0.75rem, 3vw, 1.75rem); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox__prev, .lightbox__next { width: 2.3rem; height: 2.3rem; }
}

/* ---- 404 ------------------------------------------------------------------------------------------ */
.notfound { padding: clamp(2rem, 8vw, 6rem) clamp(1rem, 4vw, 2.5rem); text-align: center; }
.notfound h1 { font-size: clamp(3rem, 10vw, 6rem); margin-bottom: 1.5rem; }
.notfound section { margin-bottom: 1.25rem; }
.notfound h2 { font-size: 1.1rem; margin-bottom: 0.3rem; }

/* ---- styles/sections/casa.css ---- */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.75rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--border);
}
.stat { display: flex; flex-direction: column; }
.stat__value { font-family: var(--font-serif); font-size: 2.1rem; font-weight: 500; color: var(--ink); }
.stat__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 0.25rem; }

/* 10 fotos, 4 columnas: tres filas (4+4+2), y las dos últimas se ensanchan a doble columna para que
   la fila final quede completa, no coja. 2 columnas en móvil (5 filas). Cada foto es un botón que abre
   el visor (ver casa.js). */
.casa__photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.casa__photo:nth-last-child(-n + 2) { grid-column: span 2; }
.casa__photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
.casa__photo .lightbox-trigger {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.casa__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.casa__photo .lightbox-trigger:hover img { transform: scale(1.06); }
.casa__photo .lightbox-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 700px) { /* mismo corte que MOBILE en site.js */
  .casa__photos { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .casa__photo:nth-last-child(-n + 2) { grid-column: span 1; } /* 10/2 ya da filas exactas: no hace falta ensanchar */
}

/* ---- styles/sections/contacto.css ---- */
.contacto { background: var(--ink); color: var(--cream); text-align: center; }
.contacto .eyebrow { color: var(--stone); }
.contacto__inner { max-width: 34rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.contacto h2 { color: #fdf8ee; margin-bottom: 1rem; }
.contacto__inner > p { color: rgba(253, 248, 238, 0.78); margin-bottom: 1.75rem; }

.contacto__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 2.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(253, 248, 238, 0.16);
  width: 100%;
}
.contacto__list li { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.contacto__label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(253, 248, 238, 0.55); }
.contacto__list a {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  text-decoration: none;
  color: #fdf8ee;
  border-bottom: 1px solid rgba(253, 248, 238, 0.35);
  padding-bottom: 0.15rem;
}
.contacto__list a:hover { border-color: var(--accent); }

/* ---- styles/sections/doc.css ---- */
/* ---- páginas de texto: privacidad y aviso legal ---------------------------------------------------
   Una columna estrecha y legible, sin fotos. El topbar llega ya sólido (layout.js), así que el
   artículo deja hueco arriba para no quedar debajo. */
.doc {
  max-width: 44rem;
  padding-block: clamp(6.5rem, 14vw, 8.5rem) clamp(3.5rem, 8vw, 5.5rem);
}
.doc h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 0.6rem; }
.doc__meta { margin: 0 0 1.75rem; font-size: 0.85rem; color: var(--dim); }
.doc__intro { font-size: 1.08rem; color: var(--muted); margin: 0 0 1rem; }
.doc section { margin-top: 2.25rem; }
.doc h2 { font-size: 1.3rem; margin-bottom: 0.7rem; }
.doc p { margin: 0 0 0.85rem; }
.doc ul { margin: 0 0 0.85rem; padding: 0; list-style: none; }
.doc li { margin-bottom: 0.45rem; }
.doc a { color: var(--accent); text-underline-offset: 0.15em; overflow-wrap: anywhere; }
.doc a:hover { color: var(--accent-dark); }

/* ---- styles/sections/entorno.css ---- */
.entorno { padding-bottom: 0; } /* la foto llega a sangre hasta el borde inferior de la sección */
/* la foto a sangre de debajo es .bleed (site.css) */
.entorno__text { max-width: 38rem; }
.entorno__text h2 { margin-bottom: 1rem; }
.entorno__text p { color: var(--muted); }

/* ---- styles/sections/facilidades.css ---- */
.facilidades__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); }
@media (max-width: 760px) {
  .facilidades__cols { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* La foto, entera en su proporción 3:2 (la aérea es 4:3 y pierde solo una franja arriba y abajo). */
.facilidades__ph { overflow: hidden; aspect-ratio: 3 / 2; border-radius: 6px; background: var(--stone); margin-bottom: 1.1rem; }
.facilidades__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.facilidades__ph:hover img { transform: scale(1.04); }

.facilidades__col h3 {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.55rem;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
}

/* Los elementos seguidos, separados por un punto medio: poco alto y fácil de leer. */
.facilidades__col ul { display: flex; flex-wrap: wrap; color: var(--muted); font-size: 0.93rem; line-height: 1.6; }
.facilidades__col li:not(:last-child)::after { content: "·"; margin: 0 0.5rem; color: var(--accent); font-weight: 700; }

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

/* ---- styles/sections/gallery.css ---- */
.gallery { position: relative; height: 100dvh; overflow: hidden; }
.gallery__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* "mandatory": con el dedo o el trackpad siempre acaba encajada en una foto, nunca a medias. Sin
     scroll-behavior:smooth: las animaciones las hace site.js y el smooth del CSS las entorpecía. */
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* mientras se arrastra con el ratón o site.js anima hasta una foto, el snap se apaga para no pelear */
.gallery__track.is-free { scroll-snap-type: none; }
.gallery__track.is-dragging { cursor: grabbing; user-select: none; }

.gallery__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden; /* el zoom lento de la foto (abajo) no se sale a la de al lado */
}
.gallery__slide picture { position: absolute; inset: 0; }
/* mientras llega la foto nítida, detrás se ve su miniatura (scripts/lqip.js, ~32 px) estirada y muy
   desenfocada: parece la misma foto enfocando, nunca un hueco negro. Se sale un poco por los bordes
   para que el desenfoque no deje un marco claro (el slide tiene overflow: hidden). */
.gallery__slide { background: var(--ink); }
.gallery__slide::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: var(--lqip) center / cover no-repeat;
  filter: blur(24px);
}
/* fotos 2–6: aparecen con un fundido cuando ya están cargadas y decodificadas (site.js, .is-loaded) */
.js .gallery__slide:not(:first-child) .gallery__img { opacity: 0; transition: opacity 0.6s var(--ease); }
.js .gallery__slide:not(:first-child) .gallery__img.is-loaded { opacity: 1; }
.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

/* El texto y los botones están FIJOS sobre la galería (no dentro de .gallery__track, que es lo único
   que se arrastra): por eso scrim y caption llevan pointer-events:none, y solo los botones lo
   recuperan, para no tapar el arrastre de las fotos que hay debajo. */
.gallery__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 5, 0.14) 0%, rgba(10, 8, 5, 0.06) 32%, rgba(10, 8, 5, 0.68) 100%);
}
.gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  padding: clamp(2rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4.5rem) clamp(3.25rem, 9vw, 5.5rem);
  max-width: 46rem;
  color: #fdf8ee;
}
.gallery__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.gallery__actions a { pointer-events: auto; }
.gallery__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  opacity: 0.9;
  margin-bottom: 1rem;
}
.gallery__title {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.gallery__tagline {
  font-size: clamp(1rem, 2.1vw, 1.3rem);
  max-width: 32rem;
  margin-bottom: 1.9rem;
  opacity: 0.96;
}

.gallery__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 4vw, 1.75rem);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: rgba(10, 8, 5, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.dot { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: rgba(253, 248, 238, 0.5); transition: width 0.2s ease, background 0.2s ease; }
.dot.is-active { width: 1.3rem; background: #fdf8ee; }

/* ---- movimiento de la portada -----------------------------------------------------------------------
   Zoom muy lento sobre cada foto ("Ken Burns": crece un 5 % en 10 s y vuelve), desfasado entre fotos
   para que no respiren todas a la vez; y, al cargar, el texto entra subiendo, una línea tras otra.
   Solo transform/opacity (no cuesta repintar). Con "reducir movimiento", todo quieto. */
@media (prefers-reduced-motion: no-preference) {
  .gallery__img { animation: gallery-zoom 10s ease-in-out infinite alternate; }
  .gallery__slide:nth-child(even) .gallery__img { animation-delay: -5s; }
  .gallery.is-paused .gallery__img { animation-play-state: paused; } /* fuera de pantalla (site.js) */
  @keyframes gallery-zoom { from { transform: scale(1); } to { transform: scale(1.05); } }

  .gallery__caption > * { animation: gallery-rise 0.9s var(--ease) both; }
  .gallery__caption > :nth-child(1) { animation-delay: 0.15s; }
  .gallery__caption > :nth-child(2) { animation-delay: 0.3s; }
  .gallery__caption > :nth-child(3) { animation-delay: 0.45s; }
  .gallery__caption > :nth-child(4) { animation-delay: 0.6s; }
  @keyframes gallery-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* ---- styles/sections/grupos.css ---- */
.grupos { padding-bottom: 0; } /* la foto llega a sangre hasta el borde inferior de la sección */
.grupos__text { max-width: 42rem; }
.grupos__text h2 { margin-bottom: 1rem; }
.grupos__text p { color: var(--muted); margin-bottom: 1.75rem; }
/* la foto a sangre de debajo es .bleed (site.css) */

/* ---- styles/sections/historia.css ---- */
.historia__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) {
  .historia__grid { grid-template-columns: 1fr; }
}

.historia__tower { color: var(--muted); max-width: 34rem; margin-top: 1.5rem; }

.timeline { margin-top: clamp(2rem, 5vw, 2.75rem); border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 1.5rem; }
.timeline__item { position: relative; padding-left: 1.5rem; }
/* punto granate sobre la línea, a la altura de cada fecha; el aro del color de fondo hace que la línea
   parezca pasar por detrás */
.timeline__item::before {
  content: "";
  position: absolute;
  left: -6.5px;   /* centrado sobre la línea de 2 px del borde de .timeline */
  top: 0.22rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.timeline__year { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--earth); margin-bottom: 0.3rem; }
.timeline__title { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.35rem; }
.timeline__text { color: var(--muted); font-size: 0.92rem; max-width: 30rem; }

/* 3 fotos: la primera (vertical, el detalle de la torre) ocupa toda la columna izquierda; las otras
   dos (horizontales) se apilan a la derecha. Cada una lleva el aspect-ratio de su propio encuadre, así
   que el recorte de object-fit:cover es mínimo en vez de forzado. */
/* En escritorio la columna de fotos es la ancha y se queda fija mientras se lee el texto, que es más largo. */
.historia__photos { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(0.75rem, 1.2vw, 1rem); }
@media (min-width: 861px) {
  .historia__photos { position: sticky; top: 6rem; }
}
.historia__photos li { overflow: hidden; border-radius: 6px; }
.historia__photos li:first-child { grid-row: span 2; }
.historia__photos li:first-child img { aspect-ratio: 3 / 4; }
.historia__photos li:not(:first-child) img { aspect-ratio: 4 / 3; }
.historia__photos img { width: 100%; height: 100%; object-fit: cover; }

/* ---- styles/sections/photos.css ---- */
/* ---- "Ver todas las fotos" (casa.js + site.js) -----------------------------------------------------
   Botón bajo la cuadrícula de La casa y ventana a pantalla completa que sube desde abajo: fondo crema,
   barra fija arriba y una pestaña por grupo. site.js reparte las fotos de cada pestaña en filas
   (.photos__row); en una fila, cada foto crece en proporción a su formato (flex-grow = ancho/alto,
   puesto en el HTML), así todas tienen la misma altura y salen enteras, sin recortes.
   La ventana solo se abre con JavaScript, así que sin él el botón no se muestra.
   Por encima de todo queda el visor (.lightbox, z-index 200, en site.css). */
.casa__more { display: flex; justify-content: center; margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.no-js .casa__more { display: none; }

/* ---- ventana ---- */
.photos {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  transform: translateY(100%);
  transition: transform 0.45s var(--ease);
}
.photos[hidden] { display: none; }
.photos.is-open { transform: none; }
html.photos-open { overflow: hidden; }

/* ---- cabecera: título, ✕ y pestañas, alineados con la columna de fotos (64rem centrada) ---- */
.photos__head { flex: none; background: var(--cream); box-shadow: 0 1px 0 rgba(43, 33, 23, 0.08); }
.photos__bar {
  box-sizing: content-box;
  max-width: 64rem;
  height: 4rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.photos__title { margin: 0; font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); }
.photos__title span { color: var(--dim); }
.photos__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(43, 33, 23, 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.photos__close svg { width: 1rem; height: 1rem; }
.photos__close:hover { background: rgba(43, 33, 23, 0.06); }
.photos__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* pestañas: en móvil se deslizan en horizontal. scroll-padding y el ::after dejan margen a la derecha
   (el padding final de un contenedor flex con scroll se pierde). */
.photos__tabs {
  position: relative;
  box-sizing: content-box;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  scroll-padding-inline: clamp(1.25rem, 5vw, 3rem);
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.photos__tabs::-webkit-scrollbar { display: none; }
.photos__tabs::after { content: ""; flex: none; width: 1px; }
.photos__tab {
  flex: none;
  padding: 0.35rem 0 0.85rem;
  border: 0;
  background: none;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--dim);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}
.photos__tab:hover, .photos__tab[aria-selected="true"] { color: var(--ink); }
.photos__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* subrayado granate que se desliza hasta la pestaña activa (posición y ancho: site.js) */
.photos__indicator {
  position: absolute;
  left: 0;
  bottom: 0.55rem;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transition: transform 0.35s var(--ease), width 0.35s var(--ease);
}

/* ---- fotos ---- */
.photos__body {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 8vw, 5rem);
}
/* cambio de pestaña: la anterior sale con un fundido rápido (.is-leaving) y las fotos de la nueva
   entran en cascada (.is-entering; --i = posición, puesta por site.js) */
.photos__panel { max-width: 64rem; margin-inline: auto; transition: opacity 0.15s ease; }
.photos__panel[hidden] { display: none; }
.photos__panel.is-leaving { opacity: 0; }
.photos__panel.is-entering .photos__item {
  animation: photo-in 0.4s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes photo-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.photos__row { display: flex; gap: 0.6rem; }
.photos__row + .photos__row { margin-top: 0.6rem; }
.photos__item {
  flex-basis: 0;
  min-width: 0;
  display: block;
  padding: 0;
  border: 0;
  background: var(--cream-2);
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
}
.photos__item img { display: block; width: 100%; height: auto; transition: transform 0.4s ease; }
.photos__item:hover img { transform: scale(1.025); }
.photos__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 700px) { /* mismo corte que MOBILE en site.js */
  .photos__bar { height: 3.5rem; }
  .photos__tabs { gap: 1.4rem; }
  .photos__tab { font-size: 1rem; }
  .photos__row { gap: 0.45rem; }
  .photos__row + .photos__row { margin-top: 0.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .photos, .photos__indicator, .photos__panel { transition: none; }
  .photos__panel.is-entering .photos__item { animation: none; }
  .photos__item img { transition: none; }
  .photos__item:hover img { transform: none; }
}

/* ---- styles/sections/ubicacion.css ---- */
/* Cabecera: el texto a un lado y el botón de Google Maps al otro, alineado con la base del texto. */
.ubicacion__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.ubicacion__head .section__head { margin-bottom: 0; }

.ubicacion__gmaps {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem 0.5rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(43, 33, 23, 0.06), 0 4px 14px rgba(43, 33, 23, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.ubicacion__gmaps:hover { transform: translateY(-1px); border-color: var(--stone); box-shadow: 0 2px 4px rgba(43, 33, 23, 0.08), 0 10px 24px rgba(43, 33, 23, 0.12); }
.ubicacion__gmaps:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ubicacion__gmapsIcon { width: auto; height: 1.1rem; flex: none; }
.ubicacion__gmapsArrow { color: var(--dim); font-weight: 400; }

/* Destinos: una foto por sitio, con el tiempo en coche en una pastilla arriba y el nombre abajo, sobre
   un degradado que asegura el contraste sea cual sea la foto. */
.dests { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 2vw, 1.4rem); }
@media (max-width: 960px) { .dests { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dests { grid-template-columns: 1fr; } }

.dest {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--stone);
  color: #fff;
  isolation: isolate;
}
.dest picture { position: absolute; inset: 0; z-index: -2; }
.dest__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.dest:hover .dest__img { transform: scale(1.05); }
.dest::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 14, 8, 0.78) 0%, rgba(20, 14, 8, 0.28) 42%, rgba(20, 14, 8, 0) 62%),
              linear-gradient(to bottom, rgba(20, 14, 8, 0.25) 0%, rgba(20, 14, 8, 0) 30%);
}

.dest__time {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.75rem 0.38rem 0.6rem;
  border-radius: 999px;
  background: rgba(246, 239, 225, 0.96); /* sin backdrop-filter: el desenfoque daba tirones al hacer scroll */
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(20, 14, 8, 0.18);
}
.dest__time svg { width: 1.05rem; height: 1.05rem; color: var(--accent); }

.dest__body { position: absolute; left: 1.15rem; right: 1.15rem; bottom: 1.1rem; }
.dest__place { font-size: clamp(1.3rem, 2.2vw, 1.55rem); font-weight: 500; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); }
.dest__detail { margin-top: 0.25rem; font-size: 0.86rem; opacity: 0.88; }

.ubicacion__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.ubicacion__note { color: var(--muted); font-size: 0.9rem; }
.ubicacion__hutt { font-size: 0.78rem; color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .dest__img, .ubicacion__gmaps { transition: none; }
  .dest:hover .dest__img { transform: none; }
}