/* ============================================================
   GALERÍA PAGE — MIRADAS
   Apertura editorial, fotográfica y silenciosa.
   Marca: negro profundo, marfil, dorado tenue.
   Cormorant Garamond + Inter. Mucho espacio negativo.
   Regla: un solo gesto gráfico (la línea dorada de encuadre).

   Composición: HERO en dos ejes editoriales.
   1) IZQUIERDA — identificación editorial (MIRADAS / 01 · GALERÍA),
      declaración principal (titular reducido) y manifiesto corto.
   2) DERECHA — fotografía protagonista + categoría + CTA de entrada.
   La tipografía y el encuadre se encuentran: la última línea
   del titular cruza ligeramente el borde izquierdo del marco,
   sin que el texto viva por completo sobre la imagen.

   Seguridad horizontal:
   - Nunca width:100vw en internos.
   - Elementos absolutos contenidos por paddings.
   - overflow-x:clip como protección adicional.
   ============================================================ */

.gal-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  background-color: var(--color-black-absolute);
  overflow: hidden;
  overflow-x: clip;
}

/* --- Fondo: base negra + textura papel + grano --- */

.gal-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-black-absolute);
  opacity: 0;
  transition: opacity 2.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.gal-hero.is-loaded .gal-hero__bg {
  opacity: 1;
}

/* Textura papel — casi imperceptible */
.gal-hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(
      rgba(255, 255, 255, 0.003) 0% 25%,
      transparent 0% 50%
    ) 0 0 / 4px 4px;
  pointer-events: none;
}

/* Grano fino — cinematográfico */
.gal-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- Presencia cálida — casi imperceptible, zona inferior izquierda --- */
/* Solo profundidad. Nunca marrón. Sigue leyéndose negro. */

.gal-hero__glow {
  position: absolute;
  bottom: -8%;
  left: -10%;
  width: min(64vw, 720px);
  height: 60vh;
  z-index: 0;
  background: radial-gradient(
    ellipse 55% 42% at 30% 62%,
    rgba(196, 168, 110, 0.04) 0%,
    rgba(196, 168, 110, 0.015) 42%,
    transparent 72%
  );
  filter: blur(80px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 3.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-hero.is-loaded .gal-hero__glow {
  opacity: 1;
}

/* ===========================
   CONTENIDO — flujo editorial
   =========================== */

.gal-hero__visual {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--grid-container);
  min-height: 100svh;
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(var(--navbar-height) + 44px) var(--grid-page-margin) clamp(136px, 15vh, 152px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* --- Identificador editorial: MIRADAS (superior izquierda) --- */

.gal-hero__overline {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: clamp(32px, 4vh, 44px);
}

/* --- Numeración de publicación editorial (superior derecha) --- */

.gal-hero__index {
  position: absolute;
  top: calc(var(--navbar-height) + 44px);
  right: var(--grid-page-margin);
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.35;
}

/* ===========================
   TITULAR — ruptura de eje, composición de fotolibro
   =========================== */

.gal-hero__title {
  position: relative;
  z-index: 2;
  width: 60%;
  font-family: var(--font-heading);
  font-size: clamp(2.35rem, 5.5vw, 4.6rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.gal-hero__line {
  display: block;
}

/* Ruptura de eje — las dos últimas líneas se desplazan al gotno */
.gal-hero__line--indent {
  margin-left: clamp(4rem, 10vw, 14rem);
  margin-top: 0.12em;
}

/* Golpe emocional — "las mira." */
.gal-hero__line--emotive {
  margin-left: clamp(4rem, 10vw, 14rem);
  margin-top: 0.1em;
  font-style: italic;
  font-weight: var(--weight-heading-light);
  color: var(--color-gold);
}

/* ===========================
   MARCO FOTOGRÁFICO — 4:5, derecha
   El protagonista visual del hero. Vive en absoluto para garantizar
   el encuentro controlado entre tipografía y encuadre.
   =========================== */

.gal-hero__frame {
  position: absolute;
  right: clamp(96px, 13vw, 190px);
  top: calc(var(--navbar-height) + clamp(56px, 8vh, 84px));
  z-index: 1;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-hero__frame.is-visible {
  clip-path: inset(0 0 0 0);
}

/* Envoltorio clicable — toda la superficie invita a entrar */
.gal-hero__image-link {
  display: block;
  position: relative;
  text-decoration: none;
}

/* Superficie fotográfica — lista para aceptar imagen sin reconstruir.
   @FOTO: para poner la fotografía real, sustituye las capas de gradiente
   de background-image por url('../img/galeria-hero.jpg'); conserva el
   grano (::after) y la línea vertical (::before) si quieres atmósfera.
   Ajusta el tono con el filter. */
.gal-hero__image {
  position: relative;
  width: clamp(320px, 33vw, 500px);
  aspect-ratio: 4 / 5;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #0D0D0D;
  background-image:
    radial-gradient(130% 90% at 75% 15%, rgba(196, 168, 110, 0.11) 0%, rgba(196, 168, 110, 0.03) 42%, transparent 64%),
    radial-gradient(150% 120% at 12% 100%, rgba(196, 168, 110, 0.05) 0%, transparent 55%),
    radial-gradient(130% 130% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(165deg, #171310 0%, #0E0D0C 48%, #0A0A0A 100%);
  background-size: cover;
  background-position: center;
  filter: saturate(0.8) contrast(1.08);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Línea vertical dorada extremadamente tenue — solo textura, no imagen */
.gal-hero__image::before {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(196, 168, 110, 0.07) 50%, transparent);
  pointer-events: none;
}

/* Grano cinematográfico sutil sobre la superficie */
.gal-hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Microinteracción — zoom sutil 1.03 al pasar el cursor */
.gal-hero__image-link:hover .gal-hero__image,
.gal-hero__image-link:focus-visible .gal-hero__image {
  transform: scale(1.03);
}

.gal-hero__image-link:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* Un solo gesto gráfico: la línea dorada de encuadre.
   Nace del borde izquierdo del marco y se extiende hacia el negro. */
.gal-hero__encuadre {
  position: absolute;
  left: 0;
  top: 18%;
  width: clamp(48px, 6vw, 80px);
  height: 1px;
  background: var(--color-gold);
  opacity: 0.14;
  transform: translateX(-100%);
  pointer-events: none;
}

/* --- Caption / categoría --- */

.gal-hero__caption {
  margin-top: var(--space-24);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gray-warm);
  opacity: 0.85;
}

/* --- CTA — Entrar en la galería --- */

.gal-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  margin-top: var(--space-16);
  padding-bottom: 6px;
  position: relative;
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ivory);
  text-decoration: none;
  transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              gap 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Línea fina que se dibuja debajo al pasar el cursor */
.gal-hero__cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.6;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-hero__cta-arrow {
  color: var(--color-gold);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Microinteracción — el texto se desplaza unos píxeles */
.gal-hero__cta:hover,
.gal-hero__cta:focus-visible {
  color: var(--color-gold);
}

.gal-hero__cta:hover::after,
.gal-hero__cta:focus-visible::after {
  transform: scaleX(1);
}

.gal-hero__cta:hover .gal-hero__cta-arrow,
.gal-hero__cta:focus-visible .gal-hero__cta-arrow {
  transform: translateX(4px);
}

/* ===========================
   MICROCOPY — inferior izquierda, descubierto después
   =========================== */

.gal-hero__copy {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 2;
  letter-spacing: 0.015em;
  color: #CAC5BD;
  max-width: 320px;
  text-align: left;
  padding-bottom: clamp(16px, 3vh, 20px);
}

.gal-hero__copy-break {
  display: block;
  height: var(--space-32);
}

/* ===========================
   INDICADOR DE SCROLL — MIRAR
   =========================== */

.gal-hero__scroll {
  position: absolute;
  bottom: clamp(24px, 4vh, 36px);
  right: var(--grid-page-margin);
  display: flex;
  align-items: center;
  z-index: 2;
}

.gal-hero__scroll-line {
  position: relative;
  width: 1px;
  height: 34px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(196, 168, 110, 0.28) 50%,
    transparent 100%
  );
  overflow: hidden;
}

.gal-hero__scroll-pulse {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(196, 168, 110, 0.85));
  animation: galPulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes galPulse {
  0%   { top: -100%; }
  55%  { top: 100%; }
  100% { top: 100%; }
}

/* ===========================
   ENTRADA CINEMATOGRÁFICA — lenta, escalonada
   =========================== */

.gal-hero [data-ch] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.gal-hero [data-ch].is-visible {
  opacity: 1;
  transform: none;
}

/* El marco usa clip-path reveal; sin translate en él */
.gal-hero__frame[data-ch] {
  transform: none;
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-hero__frame.is-visible {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* ===========================
   TABLET — 768–1024px
   =========================== */

@media (max-width: 1024px) {
  .gal-hero__visual {
    padding-top: calc(var(--navbar-height) + 32px);
  }

  .gal-hero__index {
    top: calc(var(--navbar-height) + 32px);
  }

  .gal-hero__title {
    width: 66%;
    font-size: clamp(2rem, 5.7vw, 3.7rem);
  }

  .gal-hero__line--indent,
  .gal-hero__line--emotive {
    margin-left: clamp(2.5rem, 8vw, 9rem);
  }

  .gal-hero__frame {
    right: clamp(48px, 8vw, 110px);
    top: calc(var(--navbar-height) + clamp(80px, 12vh, 108px));
  }

  .gal-hero__image {
    width: clamp(260px, 38vw, 360px);
  }
}

/* ===========================
   MOBILE — ≤768px
   Composición propia, sin superposición agresiva.
   =========================== */

@media (max-width: 768px) {
  .gal-hero {
    min-height: 100svh;
    overflow-x: clip;
  }

  .gal-hero__visual {
    min-height: 100svh;
    padding: calc(var(--navbar-height) + 20px) clamp(20px, 6vw, 24px) 48px;
  }

  .gal-hero__index {
    position: absolute;
    top: calc(var(--navbar-height) + 20px);
    right: clamp(20px, 6vw, 24px);
  }

  .gal-hero__overline {
    margin-bottom: clamp(24px, 4vh, 32px);
  }

  .gal-hero__title {
    width: 100%;
    font-size: clamp(1.8rem, 8.8vw, 2.7rem);
    line-height: 1.08;
  }

  .gal-hero__line--indent,
  .gal-hero__line--emotive {
    margin-left: clamp(1.6rem, 9vw, 3.4rem);
    margin-top: 0.12em;
  }

  .gal-hero__frame {
    position: static;
    width: 100%;
    margin-top: clamp(48px, 8vh, 64px);
    clip-path: inset(100% 0 0 0);
  }

  .gal-hero__image {
    width: 100%;
    aspect-ratio: 4 / 5;
  }

  .gal-hero__encuadre {
    left: 0;
    top: 18%;
  }

  .gal-hero__copy {
    margin-top: clamp(48px, 8vh, 64px);
    max-width: 100%;
    padding-bottom: 0;
  }

  .gal-hero__scroll {
    position: static;
    margin-top: clamp(48px, 8vh, 64px);
    align-self: center;
  }
}

/* ===========================
   SMALL MOBILE — ≤480px
   =========================== */

@media (max-width: 480px) {
  .gal-hero__visual {
    padding-left: clamp(20px, 6.25vw, 24px);
    padding-right: clamp(20px, 6.25vw, 24px);
  }

  .gal-hero__title {
    font-size: clamp(1.75rem, 10vw, 2.5rem);
  }

  .gal-hero__index {
    font-size: 0.4375rem;
  }
}

/* ===========================
   REDUCED MOTION
   =========================== */

@media (prefers-reduced-motion: reduce) {
  .gal-hero [data-ch],
  .gal-hero__frame {
    opacity: 1 !important;
    transform: none !important;
    clip-path: inset(0 0 0 0) !important;
    transition: none !important;
  }

  .gal-hero__image,
  .gal-hero__cta,
  .gal-hero__cta::after,
  .gal-hero__cta-arrow {
    transform: none !important;
    transition: none !important;
  }

  .gal-hero__scroll-pulse {
    animation: none;
  }
}

/* ============================================================
   GALERÍA PAGE — SECCIÓN 2 · LO QUE SE VE. LO QUE SE SIENTE.
   "Diseñado para quedarse en la memoria."
   Composición editorial asimétrica: encabezado a la izquierda,
   fotografía protagonista a la derecha (ligeramente descendida) y
   un detalle superpuesto en su esquina inferior izquierda.
   Continúa el negro profundo, marfil y dorado del Hero sin
   ningún divisor visual.
   ============================================================ */

.gal-essence {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  background-color: var(--color-black-absolute);
  overflow: hidden;
  overflow-x: clip;
}

/* --- Fondo: mismo negro + textura papel + grano del Hero --- */

.gal-essence__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-black-absolute);
  pointer-events: none;
}

/* Textura papel — casi imperceptible */
.gal-essence__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(
      rgba(255, 255, 255, 0.003) 0% 25%,
      transparent 0% 50%
    ) 0 0 / 4px 4px;
  pointer-events: none;
}

/* Grano fino — cinematográfico */
.gal-essence__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- Contenido --- */

.gal-essence__visual {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--grid-container);
  min-height: 100svh;
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(var(--navbar-height) + 56px) var(--grid-page-margin) clamp(64px, 8vh, 88px);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(40px, 6vw, 104px);
}

/* Numeración de sección — continuidad visual con el "01 / Galería" del Hero */
.gal-essence__index {
  position: absolute;
  top: calc(var(--navbar-height) + 44px);
  right: var(--grid-page-margin);
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.35;
}

/* --- Encabezado — columna izquierda --- */

.gal-essence__heading {
  flex: 0 0 auto;
  width: min(44%, 520px);
  padding-top: clamp(40px, 5vh, 64px);
}

.gal-essence__overline {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.gal-essence__title {
  margin-top: var(--space-24);
  margin-bottom: var(--space-32);
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.gal-essence__title-line {
  display: block;
}

/* "en la memoria." — dorado muy sutil */
.gal-essence__title-line--em {
  font-style: italic;
  color: var(--color-gold);
  opacity: 0.8;
}

.gal-essence__lede {
  max-width: 38ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--color-gray-warm);
}

/* --- Composición fotográfica — derecha, ligeramente descendida --- */

.gal-essence__composition {
  position: relative;
  width: clamp(320px, 38vw, 480px);
  margin-left: auto;
  margin-top: clamp(28px, 4vh, 48px);
}

/* Fotografía protagonista */
.gal-essence__main {
  position: relative;
  margin: 0;
}

.gal-essence__main-link {
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  cursor: zoom-in;
}

/* Superficie fotográfica — placeholder con presencia cálida.
   No es negro plano: sugiere luz de tarde entrando por un hueco
   arquitectónico y un medio tono cálido donde vivirá la foto real.
   @FOTO: para poner la fotografía real, sustituye las capas de gradiente
   de background-image por url('../img/galeria-espacios.jpg'); conserva el
   grano (::after) y la línea vertical (::before) si quieres atmósfera. */
.gal-essence__main-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #17130F;
  background-image:
    radial-gradient(95% 65% at 62% 26%, rgba(203, 172, 110, 0.24) 0%, rgba(196, 168, 110, 0.09) 44%, transparent 72%),
    linear-gradient(112deg, rgba(196, 168, 110, 0.10) 0%, transparent 38%),
    linear-gradient(155deg, transparent 55%, rgba(196, 168, 110, 0.05) 74%, transparent 86%),
    radial-gradient(120% 100% at 50% 112%, rgba(0, 0, 0, 0.62) 0%, transparent 62%),
    linear-gradient(180deg, #2E2821 0%, #1D1A16 52%, #121110 100%);
  background-size: cover;
  background-position: center;
  filter: saturate(0.72) contrast(1.05) brightness(1.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Línea vertical dorada tenue — textura, no imagen */
.gal-essence__main-photo::before {
  content: '';
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 30%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(196, 168, 110, 0.06) 50%, transparent);
  pointer-events: none;
}

/* Grano cinematográfico sutil */
.gal-essence__main-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Microinteracción — zoom sutil 1.03 */
.gal-essence__main-link:hover .gal-essence__main-photo,
.gal-essence__main-link:focus-visible .gal-essence__main-photo {
  transform: scale(1.03);
}

.gal-essence__main-link:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* Indicador "Ver" — aparece al hover, muy discreto */
.gal-essence__view {
  position: absolute;
  right: var(--space-16);
  bottom: var(--space-16);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.gal-essence__main-link:hover .gal-essence__view,
.gal-essence__main-link:focus-visible .gal-essence__view {
  opacity: 1;
  transform: none;
}

.gal-essence__view-icon {
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(196, 168, 110, 0.45);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.gal-essence__view-icon::before,
.gal-essence__view-icon::after {
  content: '';
  position: absolute;
  background: var(--color-gold);
}

.gal-essence__view-icon::before {
  top: 50%;
  left: 6px;
  right: 6px;
  height: 1px;
  transform: translateY(-50%);
}

.gal-essence__view-icon::after {
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 1px;
  transform: translateX(-50%);
}

/* --- Meta / pie de la fotografía --- */

.gal-essence__meta {
  margin-top: var(--space-32);
  margin-left: 20%;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.gal-essence__meta-place {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gray-warm);
  opacity: 0.85;
}

/* Línea discreta — muy tenue, sin protagonismo */
.gal-essence__meta-tags {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-light);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gray-warm);
  opacity: 0.55;
}

/* --- Firma editorial — columna izquierda --- */

.gal-essence__signature {
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: var(--space-24);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 220px;
}

/* Línea corta y sutil — 60–70% del ancho del bloque, dorada tenue */
.gal-essence__signature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: min(64%, 140px);
  height: 1px;
  background: var(--color-gold);
  opacity: 0.12;
}

.gal-essence__signature-place {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray-warm);
  opacity: 0.85;
}

.gal-essence__signature-brand {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--color-ivory);
  opacity: 0.6;
}

/* Conexión editorial mínima bajo la firma — sin convertirse en texto */
.gal-essence__signature-note {
  margin-top: var(--space-12);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-size: 0.4375rem;
  font-weight: var(--weight-body-light);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray-warm);
  opacity: 0.5;
}

.gal-essence__signature-note-mark {
  color: var(--color-gold);
  opacity: 0.7;
}

/* --- Detalle superpuesto — esquina inferior izquierda de la principal --- */
/* Fotografía editorial físicamente superpuesta: sobresale hacia la
   izquierda y hacia abajo, sin parecer una tarjeta. Asimetría intencional. */

.gal-essence__detail {
  position: absolute;
  left: -16%;
  bottom: 5%;
  width: 34%;
  margin: 0;
  z-index: 2;
}

/* @FOTO: reemplazar las capas de gradiente por
   url('../img/galeria-detalle.jpg') para la fotografía real. */
.gal-essence__detail-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #1A1612;
  background-image:
    radial-gradient(110% 90% at 58% 30%, rgba(196, 168, 110, 0.12) 0%, rgba(196, 168, 110, 0.04) 50%, transparent 72%),
    radial-gradient(120% 120% at 50% 115%, rgba(0, 0, 0, 0.55) 0%, transparent 65%),
    linear-gradient(160deg, #262019 0%, #191512 55%, #100F0D 100%);
  background-size: cover;
  background-position: center;
  filter: saturate(0.75) contrast(1.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===========================
   ENTRADA EN SCROLL — movimiento suave
   =========================== */

.gal-essence [data-es] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.gal-essence.is-visible [data-es] {
  opacity: 1;
  transform: none;
}

.gal-essence.is-visible [data-es="0"] { transition-delay: 0ms; }
.gal-essence.is-visible [data-es="1"] { transition-delay: 120ms; }
.gal-essence.is-visible [data-es="2"] { transition-delay: 240ms; }
.gal-essence.is-visible [data-es="3"] { transition-delay: 360ms; }
.gal-essence.is-visible [data-es="4"] { transition-delay: 480ms; }
.gal-essence.is-visible [data-es="5"] { transition-delay: 520ms; }

/* La composición usa clip-path reveal; el recorte se amplía en horizontal
   para no cortar la fotografía superpuesta que sobresale a la izquierda. */
.gal-essence__composition[data-es] {
  transform: none;
  clip-path: inset(0 -25% 100% -25%);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-essence.is-visible .gal-essence__composition {
  clip-path: inset(0 -25% 0 -25%);
}

/* ===========================
   TABLET — 768–1024px
   =========================== */

@media (max-width: 1024px) {
  .gal-essence__visual {
    padding-top: calc(var(--navbar-height) + 32px);
  }

  .gal-essence__index {
    top: calc(var(--navbar-height) + 32px);
  }

  .gal-essence__heading {
    width: 44%;
    padding-top: clamp(28px, 4vh, 44px);
  }

  .gal-essence__title {
    font-size: clamp(1.9rem, 4.6vw, 3rem);
  }

  .gal-essence__composition {
    width: clamp(300px, 45vw, 460px);
    margin-top: clamp(20px, 3vh, 36px);
  }
}

/* ===========================
   MOBILE — ≤768px
   Composición vertical: título, fotografía principal, detalle.
   =========================== */

@media (max-width: 768px) {
  .gal-essence {
    min-height: 100svh;
    overflow-x: clip;
  }

  .gal-essence__visual {
    min-height: 100svh;
    padding: calc(var(--navbar-height) + 20px) clamp(20px, 6vw, 24px) 64px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
  }

  .gal-essence__index {
    top: calc(var(--navbar-height) + 20px);
    right: clamp(20px, 6vw, 24px);
  }

  .gal-essence__heading {
    width: 100%;
    padding-top: clamp(24px, 5vh, 40px);
  }

  .gal-essence__title {
    font-size: clamp(1.8rem, 8.5vw, 2.6rem);
  }

  .gal-essence__composition {
    width: 100%;
    margin-top: clamp(44px, 8vh, 64px);
  }

  .gal-essence__detail {
    position: relative;
    left: auto;
    bottom: auto;
    width: 46%;
    margin-top: -11%;
    margin-left: 10%;
  }

  .gal-essence__meta {
    margin-left: 0;
  }
}

/* ===========================
   SMALL MOBILE — ≤480px
   =========================== */

@media (max-width: 480px) {
  .gal-essence__visual {
    padding-left: clamp(20px, 6.25vw, 24px);
    padding-right: clamp(20px, 6.25vw, 24px);
  }

  .gal-essence__title {
    font-size: clamp(1.7rem, 9vw, 2.3rem);
  }
}

/* ===========================
   REDUCED MOTION — sección 2
   =========================== */

@media (prefers-reduced-motion: reduce) {
  .gal-essence [data-es],
  .gal-essence__composition {
    opacity: 1 !important;
    transform: none !important;
    clip-path: inset(0 0 0 0) !important;
    transition: none !important;
  }

  .gal-essence__main-photo {
    transform: none !important;
    transition: none !important;
  }

  .gal-essence__view {
    opacity: 0 !important;
  }
}

/* ============================================================
   GALERÍA PAGE — SECCIÓN 3 · EXPERIENCIAS
   "No vienes solo a quedarte. Vienes a sentirte bien."
   Filosofía de la estancia: lujo discreto, privacidad y descanso.
   Grid editorial asimétrico: texto e indicadores a la izquierda,
   fotografía de experiencia a la derecha con detalle superpuesto.
   Continúa el negro profundo, marfil y dorado de la pieza completa.
   ============================================================ */

.gal-experience {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  background-color: var(--color-black-absolute);
  overflow: hidden;
  overflow-x: clip;
}

/* --- Fondo: mismo negro + textura papel + grano --- */

.gal-experience__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-black-absolute);
  pointer-events: none;
}

.gal-experience__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(
      rgba(255, 255, 255, 0.003) 0% 25%,
      transparent 0% 50%
    ) 0 0 / 4px 4px;
  pointer-events: none;
}

.gal-experience__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- Contenido: grid editorial --- */

.gal-experience__visual {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--grid-container);
  min-height: 100svh;
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(var(--navbar-height) + 56px) var(--grid-page-margin) clamp(64px, 8vh, 88px);
}

/* Numeración de sección — dorado muy sutil, alineada con 01 y 02 */
.gal-experience__index {
  position: absolute;
  top: calc(var(--navbar-height) + 44px);
  right: var(--grid-page-margin);
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.5;
}

/* --- Texto principal — izquierda --- */

.gal-experience__left {
  width: min(48%, 620px);
  padding-top: clamp(24px, 3vh, 40px);
}

/* Eyebrow — continuidad con ESPACIOS de la sección anterior */
.gal-experience__overline {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.9;
}

.gal-experience__title {
  margin-top: clamp(24px, 3vh, 36px);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.gal-experience__title-line {
  display: block;
}

/* "Vienes a sentirte bien." — serif itálica dorada sutil */
.gal-experience__title-line--em {
  font-style: italic;
  color: var(--color-gold);
  opacity: 0.85;
}

.gal-experience__lede {
  margin-top: var(--space-32);
  max-width: 38ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--color-gray-warm);
}

/* --- Composición fotográfica — derecha --- */

.gal-experience__composition {
  position: absolute;
  top: calc(var(--navbar-height) + 56px + clamp(24px, 3vh, 40px));
  right: var(--grid-page-margin);
  z-index: 1;
  width: clamp(300px, 38vw, 480px);
  max-width: 100%;
}

/* Fotografía protagonista: la experiencia, no la arquitectura */
.gal-experience__main {
  position: relative;
  margin: 0;
}

.gal-experience__main-link {
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  cursor: zoom-in;
}

/* @FOTO: sustituir las capas de gradiente por
   url('../img/galeria-experiencias.jpg') para la fotografía real.
   Idealmente una persona: trabajando, descansando, junto a la ventana
   o tomando café. Conserva el grano (::after) y la línea vertical (::before). */
.gal-experience__main-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - 280px);
  box-sizing: border-box;
  overflow: hidden;
  background-color: #211C16;
  background-image:
    radial-gradient(100% 62% at 58% 28%, rgba(216, 184, 118, 0.30) 0%, rgba(196, 168, 110, 0.11) 46%, transparent 72%),
    linear-gradient(115deg, rgba(196, 168, 110, 0.10) 0%, transparent 44%),
    radial-gradient(125% 115% at 50% 118%, rgba(0, 0, 0, 0.48) 0%, transparent 62%),
    linear-gradient(180deg, #3C332A 0%, #262019 52%, #181512 100%);
  background-size: cover;
  background-position: center;
  filter: saturate(0.7) contrast(1.04) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.gal-experience__main-photo::before {
  content: '';
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 30%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(196, 168, 110, 0.06) 50%, transparent);
  pointer-events: none;
}

.gal-experience__main-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.55;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.gal-experience__main-link:hover .gal-experience__main-photo,
.gal-experience__main-link:focus-visible .gal-experience__main-photo {
  transform: scale(1.03);
}

.gal-experience__main-link:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* --- Detalle superpuesto — esquina inferior izquierda --- */

.gal-experience__detail {
  position: absolute;
  left: -18%;
  bottom: -6%;
  width: 38%;
  margin: 0;
  z-index: 2;
}

/* @FOTO: reemplazar las capas de gradiente por
   url('../img/galeria-experiencias-detalle.jpg') para la fotografía real.
   Puede ser: cama, madera, iluminación, café, ventana o textura. */
.gal-experience__detail-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #1D1813;
  background-image:
    radial-gradient(110% 85% at 60% 26%, rgba(216, 184, 118, 0.20) 0%, rgba(196, 168, 110, 0.07) 50%, transparent 74%),
    radial-gradient(120% 120% at 50% 115%, rgba(0, 0, 0, 0.45) 0%, transparent 64%),
    linear-gradient(150deg, #2E271F 0%, #1D1813 55%, #141210 100%);
  background-size: cover;
  background-position: center;
  filter: saturate(0.85) contrast(1.12) brightness(1.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-experience__detail:hover .gal-experience__detail-photo {
  transform: scale(1.02);
}

/* --- Indicadores editoriales — notas de revista --- */

.gal-experience__indicators {
  margin-top: clamp(24px, 3vh, 36px);
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 28px);
}

.gal-experience__indicator {
  display: flex;
  gap: var(--space-24);
  align-items: baseline;
}

.gal-experience__indicator-num {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.75;
  min-width: 2ch;
}

.gal-experience__indicator-title {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.9;
  margin: 0 0 var(--space-4);
}

.gal-experience__indicator-desc {
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-weight: var(--weight-body-light);
  line-height: 1.7;
  color: var(--color-gray-warm);
  opacity: 0.8;
  margin: 0;
}

/* ===========================
   ENTRADA EN SCROLL — movimiento suave
   =========================== */

.gal-experience [data-xp] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.gal-experience.is-visible [data-xp] {
  opacity: 1;
  transform: none;
}

.gal-experience.is-visible [data-xp="0"] { transition-delay: 0ms; }
.gal-experience.is-visible [data-xp="1"] { transition-delay: 120ms; }
.gal-experience.is-visible [data-xp="2"] { transition-delay: 240ms; }
.gal-experience.is-visible [data-xp="3"] { transition-delay: 360ms; }
.gal-experience.is-visible [data-xp="4"] { transition-delay: 480ms; }

/* La composición usa clip-path reveal; sin translate en ella */
.gal-experience__composition[data-xp] {
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-experience.is-visible .gal-experience__composition {
  clip-path: inset(0 0 0 0);
}

/* ===========================
   TABLET — 768–1024px
   =========================== */

@media (max-width: 1024px) {
  .gal-experience__visual {
    padding-top: calc(var(--navbar-height) + 32px);
  }

  .gal-experience__index {
    top: calc(var(--navbar-height) + 32px);
  }

  .gal-experience__title {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
  }

  .gal-experience__left {
    width: min(44%, 460px);
  }

  .gal-experience__composition {
    top: calc(var(--navbar-height) + 32px + clamp(24px, 3vh, 40px));
    width: clamp(280px, 44vw, 420px);
    max-width: 100%;
  }
}

/* ===========================
   MOBILE — ≤768px
   Orden: título → párrafo → fotografía principal → detalle →
   indicadores. Sin grid rígido.
   =========================== */

@media (max-width: 768px) {
  .gal-experience {
    min-height: 100svh;
    overflow-x: clip;
  }

  .gal-experience__visual {
    min-height: 100svh;
    padding: calc(var(--navbar-height) + 20px) clamp(20px, 6vw, 24px) 64px;
  }

  .gal-experience__index {
    top: calc(var(--navbar-height) + 20px);
    right: clamp(20px, 6vw, 24px);
  }

  .gal-experience__left {
    width: auto;
    max-width: 100%;
    padding-top: clamp(20px, 4vh, 32px);
  }

  .gal-experience__title {
    font-size: clamp(1.7rem, 8vw, 2.4rem);
  }

  .gal-experience__composition {
    position: static;
    width: 100%;
    margin-top: clamp(44px, 7vh, 60px);
  }

  .gal-experience__detail {
    position: relative;
    left: auto;
    bottom: auto;
    width: 46%;
    margin-top: -11%;
    margin-left: 10%;
  }

  .gal-experience__indicators {
    margin-top: clamp(48px, 8vh, 64px);
    max-width: 100%;
  }
}

/* ===========================
   SMALL MOBILE — ≤480px
   =========================== */

@media (max-width: 480px) {
  .gal-experience__visual {
    padding-left: clamp(20px, 6.25vw, 24px);
    padding-right: clamp(20px, 6.25vw, 24px);
  }

  .gal-experience__title {
    font-size: clamp(1.6rem, 8.5vw, 2.1rem);
  }
}

/* ===========================
   REDUCED MOTION — sección 3
   =========================== */

@media (prefers-reduced-motion: reduce) {
  .gal-experience [data-xp],
  .gal-experience__composition {
    opacity: 1 !important;
    transform: none !important;
    clip-path: inset(0 0 0 0) !important;
    transition: none !important;
  }

  .gal-experience__main-photo,
  .gal-experience__detail-photo {
    transform: none !important;
    transition: none !important;
  }
}

/* ================================================================
   SECCIÓN 4 — SERVICIOS
   "Todo lo que necesitas. Nada que sobre."
   Demostración de calidad, no un listado comercial. Los diferenciales
   se presentan como una zona vertical editorial junto a la fotografía,
   con el dato técnico "200 Mbps" como elemento memorable.
   @FOTO: reemplazar el placeholder (.gal-servicios__main-photo) por
   url('../img/galeria-servicios.jpg') para la fotografía real.
   ================================================================ */

.gal-servicios {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-color: var(--color-black-absolute);
  overflow: hidden;
  overflow-x: clip;
}

/* --- Fondo: mismo negro + textura papel + grano --- */

.gal-servicios__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-black-absolute);
  pointer-events: none;
}

.gal-servicios__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(
      rgba(255, 255, 255, 0.003) 0% 25%,
      transparent 0% 50%
    ) 0 0 / 4px 4px;
  pointer-events: none;
}

.gal-servicios__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- Contenido: dos columnas editoriales de igual altura --- */

.gal-servicios__visual {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--grid-container);
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(var(--navbar-height) + 56px) var(--grid-page-margin) clamp(64px, 8vh, 88px);
  display: flex;
  align-items: stretch;
  gap: clamp(40px, 5vw, 88px);
}

/* Numeración de sección — dorado muy sutil, alineada con 01, 02 y 03 */
.gal-servicios__index {
  position: absolute;
  top: calc(var(--navbar-height) + 44px);
  right: var(--grid-page-margin);
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.5;
}

/* --- Encabezado — columna izquierda --- */

.gal-servicios__left {
  flex: 0 1 44%;
  min-width: 320px;
}

.gal-servicios__overline {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.9;
}

.gal-servicios__title {
  margin-top: clamp(24px, 3vh, 36px);
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.8vw, 3.3rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.gal-servicios__title-line {
  display: block;
}

/* "Nada que sobre." — serif itálica dorada sutil */
.gal-servicios__title-line--em {
  font-style: italic;
  color: var(--color-gold);
  opacity: 0.85;
}

.gal-servicios__lede {
  margin-top: var(--space-32);
  max-width: 38ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--color-gray-warm);
}

/* Cierre editorial de la columna — dorado muy sutil */
.gal-servicios__editorial {
  margin-top: clamp(24px, 4vh, 40px);
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.55;
}

.gal-servicios__editorial::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.35;
  flex-shrink: 0;
}

/* --- Composición — columna derecha --- */

.gal-servicios__side {
  flex: 1 1 56%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 1.05fr);
  grid-template-areas:
    "list main";
  column-gap: clamp(24px, 3vw, 48px);
}

/* Fotografía protagonista — un servicio, una experiencia */
.gal-servicios__main {
  grid-area: main;
  position: relative;
  width: 100%;
  margin: 0;
  justify-self: end;
  align-self: start;
}

.gal-servicios__main-link {
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  cursor: zoom-in;
}

/* @FOTO: sustituir las capas de gradiente por
   url('../img/galeria-servicios.jpg') para la fotografía real.
   Idealmente: persona trabajando con portátil, llegada al alojamiento
   o detalle de recepción. Conserva el grano (::after) y la línea (::before). */
.gal-servicios__main-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #221C15;
  background-image:
    radial-gradient(100% 58% at 52% 30%, rgba(216, 184, 118, 0.24) 0%, rgba(196, 168, 110, 0.08) 48%, transparent 74%),
    linear-gradient(115deg, rgba(196, 168, 110, 0.08) 0%, transparent 46%),
    radial-gradient(120% 112% at 50% 118%, rgba(0, 0, 0, 0.5) 0%, transparent 62%),
    linear-gradient(150deg, #3A3128 0%, #262019 55%, #161310 100%);
  background-size: cover;
  background-position: center;
  filter: saturate(0.72) contrast(1.1) brightness(1.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.gal-servicios__main-photo::before {
  content: '';
  position: absolute;
  top: 16%;
  bottom: 16%;
  left: 28%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(196, 168, 110, 0.06) 50%, transparent);
  pointer-events: none;
}

.gal-servicios__main-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.gal-servicios__main-link:hover .gal-servicios__main-photo,
.gal-servicios__main-link:focus-visible .gal-servicios__main-photo {
  transform: scale(1.02);
}

.gal-servicios__main-link:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* --- Dato técnico premium — 200 Mbps --- */

.gal-servicios__stat {
  margin-top: clamp(20px, 3vh, 28px);
}

/* Filete corto — 52% de la columna, termina antes del borde */
.gal-servicios__stat::before {
  content: '';
  display: block;
  width: 52%;
  height: 1px;
  background: rgba(196, 168, 110, 0.16);
  margin-bottom: clamp(20px, 3vh, 26px);
}

.gal-servicios__stat-value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: var(--weight-heading-light);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-gold);
}

.gal-servicios__stat-label {
  display: block;
  margin-top: var(--space-16);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.6;
}

/* --- Servicios — zona vertical editorial --- */

.gal-servicios__list {
  grid-area: list;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gal-servicios__item {
  display: grid;
  grid-template-columns: clamp(2.25rem, 2.6vw, 3rem) minmax(0, 1fr);
  column-gap: clamp(14px, 1.8vw, 24px);
  padding: clamp(16px, 2.2vh, 22px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gal-servicios__item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gal-servicios__item-num {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.7;
}

.gal-servicios__item-title {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.9;
}

.gal-servicios__item-desc {
  margin: var(--space-8) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-weight: var(--weight-body-light);
  line-height: 1.7;
  color: var(--color-gray-warm);
  opacity: 0.8;
}

/* Mención discreta — ajustable cuando se confirme la operación */
.gal-servicios__item-note {
  display: block;
  margin-top: var(--space-8);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-body-small);
  color: var(--color-gold);
  opacity: 0.6;
}

/* --- Cierre editorial --- */

.gal-servicios__closing {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: clamp(16px, 2.5vh, 24px);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--color-gray-warm);
  opacity: 0.75;
}

.gal-servicios__closing-mark {
  width: 36px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.35;
}

/* ===========================
   ENTRADA EN SCROLL — movimiento suave
   =========================== */

.gal-servicios [data-sv] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.gal-servicios.is-visible [data-sv] {
  opacity: 1;
  transform: none;
}

.gal-servicios.is-visible [data-sv="0"] { transition-delay: 40ms; }
.gal-servicios.is-visible [data-sv="1"] { transition-delay: 140ms; }
.gal-servicios.is-visible [data-sv="2"] { transition-delay: 240ms; }
.gal-servicios.is-visible [data-sv="3"] { transition-delay: 340ms; }
.gal-servicios.is-visible [data-sv="4"] { transition-delay: 440ms; }
.gal-servicios.is-visible [data-sv="5"] { transition-delay: 320ms; }
.gal-servicios.is-visible [data-sv="6"] { transition-delay: 520ms; }
.gal-servicios.is-visible [data-sv="7"] { transition-delay: 480ms; }
.gal-servicios.is-visible [data-sv="8"] { transition-delay: 560ms; }
.gal-servicios.is-visible [data-sv="9"] { transition-delay: 640ms; }
  .gal-servicios.is-visible [data-sv="10"] { transition-delay: 720ms; }
  .gal-servicios.is-visible [data-sv="11"] { transition-delay: 760ms; }
  .gal-servicios.is-visible [data-sv="12"] { transition-delay: 800ms; }
  .gal-servicios.is-visible [data-sv="13"] { transition-delay: 860ms; }

/* La fotografía usa clip-path reveal; sin translate en ella */
.gal-servicios__main[data-sv] {
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-servicios.is-visible .gal-servicios__main {
  clip-path: inset(0 0 0 0);
}

/* ===========================
   TABLET — 768–1024px
   =========================== */

@media (max-width: 1024px) {
  .gal-servicios__visual {
    padding-top: calc(var(--navbar-height) + 32px);
    gap: clamp(28px, 4vw, 56px);
  }

  .gal-servicios__index {
    top: calc(var(--navbar-height) + 32px);
  }

  .gal-servicios__title {
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  }

  .gal-servicios__side {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 1.05fr);
    column-gap: clamp(20px, 3vw, 32px);
  }
}

/* ===========================
   MOBILE — ≤768px
   Orden: eyebrow → título → párrafo → fotografía → dato 200 Mbps →
   servicios 01–04 → frase final. Sin cards horizontales.
   =========================== */

@media (max-width: 768px) {
  .gal-servicios {
    overflow-x: clip;
  }

  .gal-servicios__visual {
    padding: calc(var(--navbar-height) + 20px) clamp(20px, 6vw, 24px) 64px;
    display: flex;
    flex-direction: column;
  }

  .gal-servicios__left,
  .gal-servicios__side {
    display: contents;
  }

  .gal-servicios__overline {
    order: 1;
  }

  .gal-servicios__title {
    order: 2;
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .gal-servicios__lede {
    order: 3;
    max-width: 100%;
  }

  .gal-servicios__editorial {
    order: 4;
    margin-top: clamp(24px, 4vh, 32px);
  }

  .gal-servicios__main {
    order: 5;
    width: 100%;
    margin-top: clamp(36px, 6vh, 48px);
  }

  .gal-servicios__stat {
    order: 6;
    margin-top: clamp(24px, 4vh, 32px);
  }

  .gal-servicios__stat-value {
    font-size: clamp(1.7rem, 9vw, 2.2rem);
  }

  .gal-servicios__list {
    order: 7;
    margin-top: clamp(20px, 3vh, 28px);
  }

  .gal-servicios__closing {
    order: 8;
    margin-top: clamp(24px, 4vh, 32px);
  }

  .gal-servicios__index {
    top: calc(var(--navbar-height) + 20px);
    right: clamp(20px, 6vw, 24px);
  }
}

/* ===========================
   SMALL MOBILE — ≤480px
   =========================== */

@media (max-width: 480px) {
  .gal-servicios__visual {
    padding-left: clamp(20px, 6.25vw, 24px);
    padding-right: clamp(20px, 6.25vw, 24px);
  }

  .gal-servicios__title {
    font-size: clamp(1.65rem, 8.5vw, 2.1rem);
  }

  .gal-servicios__item {
    grid-template-columns: 2rem minmax(0, 1fr);
  }
}

/* ===========================
   REDUCED MOTION — sección 4
   =========================== */

@media (prefers-reduced-motion: reduce) {
  .gal-servicios [data-sv],
  .gal-servicios__main {
    opacity: 1 !important;
    transform: none !important;
    clip-path: inset(0 0 0 0) !important;
    transition: none !important;
  }

  .gal-servicios__main-photo {
    transform: none !important;
    transition: none !important;
  }
}

/* ===========================
   SECCIÓN 5 — RESERVA
   "No tienes que imaginarlo. Solo tienes que venir."
   Cierre de la narrativa. Dos columnas editoriales:
   la izquierda recoge la promesa, la derecha invita a reservar.
   =========================== */

.gal-reserva {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  background-color: var(--color-black-absolute);
  overflow: hidden;
  overflow-x: clip;
  color-scheme: dark;
}

/* --- Fondo: mismo negro + textura papel + grano --- */

.gal-reserva__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-black-absolute);
  pointer-events: none;
}

.gal-reserva__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(
      rgba(255, 255, 255, 0.003) 0% 25%,
      transparent 0% 50%
    ) 0 0 / 4px 4px;
  pointer-events: none;
}

.gal-reserva__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- Contenido: dos columnas editoriales --- */

.gal-reserva__visual {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--grid-container);
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(var(--navbar-height) + 56px) var(--grid-page-margin) clamp(64px, 8vh, 88px);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(40px, 5vw, 88px);
}

/* Numeración de sección — continuidad con 01–04 */
.gal-reserva__index {
  position: absolute;
  top: calc(var(--navbar-height) + 44px);
  right: var(--grid-page-margin);
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.5;
}

/* --- Columna izquierda — el cierre narrativo --- */

.gal-reserva__left {
  flex: 0 1 44%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
}

.gal-reserva__overline {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.9;
}

.gal-reserva__title {
  margin-top: clamp(24px, 3vh, 36px);
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 4.6vw, 3.2rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.gal-reserva__title-line {
  display: block;
}

/* "Solo tienes que venir." — serif itálica dorada sutil.
   Se mantiene en el tamaño original: es el golpe emocional. */
.gal-reserva__title-line--em {
  font-size: clamp(2.2rem, 4.9vw, 3.4rem);
  font-style: italic;
  color: var(--color-gold);
  opacity: 0.85;
}

.gal-reserva__lede {
  margin-top: var(--space-32);
  max-width: 38ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--color-gray-warm);
}

/* Firma editorial — anclada al fondo de la columna */
.gal-reserva__signature {
  margin-top: auto;
  margin-bottom: clamp(16px, 2.5vh, 28px);
  padding-top: clamp(24px, 3.5vh, 40px);
}

.gal-reserva__signature::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.35;
  margin-bottom: var(--space-16);
}

.gal-reserva__signature-place {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gray-warm);
  opacity: 0.8;
}

.gal-reserva__signature-brand {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--color-gold);
  opacity: 0.85;
}

/* --- Columna derecha — invitación a reservar --- */

.gal-reserva__panel {
  flex: 1 1 48%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(28px, 3.5vh, 40px) clamp(24px, 2.5vw, 36px) clamp(28px, 4vh, 48px);
}

.gal-reserva__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 2.5vw, 32px);
  row-gap: clamp(26px, 3.5vh, 36px);
}

.gal-reserva__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Huéspedes y CTA ocupan todo el ancho del panel */
.gal-reserva__field:nth-of-type(3),
.gal-reserva__cta,
.gal-reserva__status,
.gal-reserva__form noscript {
  grid-column: 1 / -1;
}

.gal-reserva__label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.6;
}

.gal-reserva__input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  padding: clamp(8px, 1.2vh, 10px) 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--weight-body-light);
  letter-spacing: 0.01em;
  color: var(--color-ivory);
  transition: border-color 0.4s ease, color 0.4s ease;
}

.gal-reserva__input::placeholder {
  color: var(--color-gray-warm);
  opacity: 0.35;
}

/* Fechas: el valor vacío (dd/mm/aaaa) se ve más tenue que el texto real.
   Al elegir una fecha, el texto pasa a marfil con plena opacidad. */
.gal-reserva__input--date::-webkit-datetime-edit {
  color: var(--color-ivory);
}

.gal-reserva__input--date::-webkit-datetime-edit-fields-wrapper {
  color: rgba(166, 162, 155, 0.4);
}

.gal-reserva__input--date:not([value=""])::-webkit-datetime-edit-fields-wrapper {
  color: var(--color-ivory);
}

.gal-reserva__input:focus,
.gal-reserva__input:focus-visible {
  outline: none;
  border-bottom-color: rgba(196, 168, 110, 0.6);
}

.gal-reserva__input[aria-invalid="true"] {
  border-bottom-color: #E07A5C;
}

.gal-reserva__error {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: #E07A5C;
}

.gal-reserva__error:empty {
  display: none;
}

.gal-reserva__status {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  line-height: 1.7;
  color: rgba(246, 242, 235, 0.72);
}

.gal-reserva__status:empty {
  display: none;
}

/* Selector sin caja — misma línea sutil, con flecha dorada discreta */
.gal-reserva__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C4A86E' stroke-opacity='0.6' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 24px;
}

.gal-reserva__select option {
  color: var(--color-ivory);
  background-color: #141414;
}

/* CTA rectangular de borde fino */
.gal-reserva__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: clamp(6px, 1vh, 12px);
  padding: clamp(14px, 2vh, 18px) clamp(24px, 2.6vw, 32px);
  border: 1px solid rgba(196, 168, 110, 0.4);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-align: left;
  color: var(--color-gold);
  cursor: pointer;
  transition: border-color 0.35s ease, background-color 0.35s ease,
              color 0.35s ease;
}

.gal-reserva__cta-arrow {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-reserva__cta:hover,
.gal-reserva__cta:focus-visible {
  background-color: rgba(196, 168, 110, 0.85);
  border-color: rgba(196, 168, 110, 0.85);
  color: var(--color-black-absolute);
}

.gal-reserva__cta:hover .gal-reserva__cta-arrow,
.gal-reserva__cta:focus-visible .gal-reserva__cta-arrow {
  transform: translateX(5px);
}

.gal-reserva__cta:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* --- Cierre editorial — fila completa, alineado a la derecha --- */

.gal-reserva__closing {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-16);
  padding-right: clamp(80px, 7vw, 100px);
  margin-top: clamp(-8px, -1vh, 0px);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  color: var(--color-gold);
  opacity: 0.85;
}

.gal-reserva__closing::before {
  content: '';
  width: clamp(56px, 5vw, 72px);
  height: 1px;
  background: var(--color-gold);
  opacity: 0.35;
  flex-shrink: 0;
}

/* ===========================
   ENTRADA EN SCROLL — movimiento suave
   =========================== */

.gal-reserva [data-rz] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.gal-reserva.is-visible [data-rz] {
  opacity: 1;
  transform: none;
}

.gal-reserva.is-visible [data-rz="0"] { transition-delay: 40ms; }
.gal-reserva.is-visible [data-rz="1"] { transition-delay: 140ms; }
.gal-reserva.is-visible [data-rz="2"] { transition-delay: 240ms; }
.gal-reserva.is-visible [data-rz="3"] { transition-delay: 340ms; }
.gal-reserva.is-visible [data-rz="4"] { transition-delay: 440ms; }
.gal-reserva.is-visible [data-rz="5"] { transition-delay: 320ms; }
.gal-reserva.is-visible [data-rz="6"] { transition-delay: 480ms; }
.gal-reserva.is-visible [data-rz="7"] { transition-delay: 560ms; }
.gal-reserva.is-visible [data-rz="8"] { transition-delay: 640ms; }
.gal-reserva.is-visible [data-rz="9"] { transition-delay: 720ms; }

/* ===========================
   TABLET — 768–1024px
   =========================== */

@media (max-width: 1024px) {
  .gal-reserva__visual {
    padding-top: calc(var(--navbar-height) + 32px);
    gap: clamp(28px, 4vw, 56px);
  }

  .gal-reserva__index {
    top: calc(var(--navbar-height) + 32px);
  }

  .gal-reserva__title {
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  }

  .gal-reserva__panel {
    padding: clamp(24px, 3vh, 32px) clamp(20px, 2.5vw, 28px) clamp(24px, 3vh, 40px);
  }
}

/* ===========================
   MOBILE — ≤768px
   Orden: etiqueta → titular → párrafo → fechas → huéspedes → CTA →
   firma → frase final.
   =========================== */

@media (max-width: 768px) {
  .gal-reserva {
    overflow-x: clip;
  }

  .gal-reserva__visual {
    padding: calc(var(--navbar-height) + 20px) clamp(20px, 6vw, 24px) 64px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .gal-reserva__left,
  .gal-reserva__panel {
    display: contents;
  }

  .gal-reserva__overline {
    order: 1;
  }

  .gal-reserva__title {
    order: 2;
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .gal-reserva__lede {
    order: 3;
    max-width: 100%;
  }

  .gal-reserva__panel {
    min-width: 0;
  }

  .gal-reserva__form {
    order: 4;
    grid-template-columns: minmax(0, 1fr);
    margin-top: clamp(36px, 6vh, 48px);
  }

  .gal-reserva__field:nth-of-type(3),
  .gal-reserva__cta,
  .gal-reserva__status,
  .gal-reserva__form noscript {
    grid-column: auto;
  }

  .gal-reserva__signature {
    order: 5;
    margin-top: clamp(36px, 6vh, 48px);
  }

  .gal-reserva__closing {
    order: 6;
    justify-content: flex-start;
    padding-right: 0;
    margin-top: clamp(40px, 7vh, 56px);
  }

  .gal-reserva__index {
    top: calc(var(--navbar-height) + 20px);
    right: clamp(20px, 6vw, 24px);
  }
}

/* ===========================
   SMALL MOBILE — ≤480px
   =========================== */

@media (max-width: 480px) {
  .gal-reserva__visual {
    padding-left: clamp(20px, 6.25vw, 24px);
    padding-right: clamp(20px, 6.25vw, 24px);
  }

  .gal-reserva__title {
    font-size: clamp(1.65rem, 8.5vw, 2.1rem);
  }

  .gal-reserva__closing {
    font-size: clamp(1.15rem, 5.5vw, 1.5rem);
  }
}

/* ===========================
   REDUCED MOTION — sección 5
   =========================== */

@media (prefers-reduced-motion: reduce) {
  .gal-reserva [data-rz] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gal-reserva__cta {
    transition: none !important;
  }

  .gal-reserva__cta-arrow {
    transform: none !important;
    transition: none !important;
  }
}

/* ===========================
   SECCIÓN 6 — CONTACTO / UBICACIÓN
   "Cartago está más cerca de lo que imaginas."
   Última sección antes del footer: cercanía, confianza, tranquilidad.
   =========================== */

.gal-contacto {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  background-color: var(--color-black-absolute);
  overflow: hidden;
  overflow-x: clip;
}

/* --- Fondo: mismo negro + textura papel + grano --- */

.gal-contacto__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-black-absolute);
  pointer-events: none;
}

.gal-contacto__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(
      rgba(255, 255, 255, 0.003) 0% 25%,
      transparent 0% 50%
    ) 0 0 / 4px 4px;
  pointer-events: none;
}

.gal-contacto__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- Contenido: dos columnas editoriales --- */

.gal-contacto__visual {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--grid-container);
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(var(--navbar-height) + 56px) var(--grid-page-margin) clamp(56px, 7vh, 80px);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(40px, 5vw, 88px);
}

/* Numeración de sección — continuidad con 01–05 */
.gal-contacto__index {
  position: absolute;
  top: calc(var(--navbar-height) + 44px);
  right: var(--grid-page-margin);
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.5;
}

/* --- Columna izquierda — el cierre narrativo --- */

.gal-contacto__left {
  flex: 0 1 44%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.gal-contacto__overline {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.9;
}

.gal-contacto__title {
  margin-top: clamp(24px, 3vh, 36px);
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.8vw, 3.3rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.gal-contacto__title-line {
  display: block;
}

/* "Y aquí empieza la experiencia." — serif itálica dorada sutil */
.gal-contacto__title-line--em {
  margin-top: clamp(14px, 2vh, 22px);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-style: italic;
  color: var(--color-gold);
  opacity: 0.85;
}

.gal-contacto__lede {
  margin-top: var(--space-32);
  max-width: 36ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--color-gray-warm);
}

/* Frase editorial — anclada al fondo de la columna izquierda */
.gal-contacto__tagline {
  margin-top: auto;
  padding-top: clamp(32px, 5vh, 48px);
}

.gal-contacto__tagline::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.35;
  margin-bottom: var(--space-16);
}

.gal-contacto__tagline-place {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gray-warm);
  opacity: 0.8;
}

.gal-contacto__tagline-text {
  display: block;
  margin-top: var(--space-8);
  max-width: 34ch;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.4;
  color: var(--color-ivory);
  opacity: 0.7;
}

/* --- Columna derecha — información práctica, limpia --- */

.gal-contacto__side {
  flex: 1 1 49%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(24px, 3vh, 36px);
}

.gal-contacto__block {
  padding-top: clamp(20px, 2.5vh, 28px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gal-contacto__block-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.75;
}

.gal-contacto__block-location {
  margin-top: var(--space-16);
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-ivory);
}

.gal-contacto__block-rows {
  margin-top: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.gal-contacto__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.gal-contacto__row-label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray-warm);
  opacity: 0.6;
}

.gal-contacto__row-value {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-8);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-weight: var(--weight-body-light);
  letter-spacing: 0.01em;
  color: var(--color-ivory);
  opacity: 0.8;
  transition: color 0.35s ease, border-color 0.35s ease, opacity 0.35s ease;
}

.gal-contacto__row-value:hover,
.gal-contacto__row-value:focus-visible {
  color: var(--color-gold);
  border-bottom-color: rgba(196, 168, 110, 0.5);
  opacity: 1;
}

.gal-contacto__row-value:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* --- Acciones: ESCRÍBENOS / VER UBICACIÓN --- */

.gal-contacto__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 3vw, 40px);
  padding-top: clamp(20px, 2.5vh, 28px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gal-contacto__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  padding: clamp(13px, 1.8vh, 16px) clamp(20px, 2.2vw, 28px);
  border: 1px solid rgba(196, 168, 110, 0.4);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  cursor: pointer;
  transition: border-color 0.35s ease, background-color 0.35s ease,
              color 0.35s ease;
}

.gal-contacto__cta-arrow {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-contacto__cta:hover,
.gal-contacto__cta:focus-visible {
  background-color: rgba(196, 168, 110, 0.85);
  border-color: rgba(196, 168, 110, 0.85);
  color: var(--color-black-absolute);
}

.gal-contacto__cta:hover .gal-contacto__cta-arrow,
.gal-contacto__cta:focus-visible .gal-contacto__cta-arrow {
  transform: translateX(5px);
}

.gal-contacto__cta:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* VER UBICACIÓN — CTA secundario, sin caja */
.gal-contacto__cta--quiet {
  border: 0;
  padding: 0 0 3px;
  border-bottom: 1px solid rgba(196, 168, 110, 0.35);
  opacity: 0.85;
}

.gal-contacto__cta--quiet:hover,
.gal-contacto__cta--quiet:focus-visible {
  background: transparent;
  border-bottom-color: rgba(196, 168, 110, 0.9);
  color: var(--color-gold);
  opacity: 1;
}

.gal-contacto__cta[aria-disabled="true"],
.gal-footer__contact[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

.gal-contacto__cta[aria-disabled="true"]:hover {
  background: transparent;
  border-color: rgba(196, 168, 110, 0.4);
  color: var(--color-gold);
}

.gal-contacto__cta[aria-disabled="true"]:hover .gal-contacto__cta-arrow {
  transform: none;
}

/* --- Despedida editorial --- */

.gal-contacto__closing {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: clamp(40px, 6vh, 64px);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  color: var(--color-gold);
  opacity: 0.85;
}

.gal-contacto__closing::before {
  content: '';
  width: clamp(56px, 5vw, 72px);
  height: 1px;
  background: var(--color-gold);
  opacity: 0.35;
  flex-shrink: 0;
}

/* ===========================
   ENTRADA EN SCROLL — movimiento suave
   =========================== */

.gal-contacto [data-ct] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.gal-contacto.is-visible [data-ct] {
  opacity: 1;
  transform: none;
}

.gal-contacto.is-visible [data-ct="0"] { transition-delay: 40ms; }
.gal-contacto.is-visible [data-ct="1"] { transition-delay: 140ms; }
.gal-contacto.is-visible [data-ct="2"] { transition-delay: 240ms; }
.gal-contacto.is-visible [data-ct="3"] { transition-delay: 340ms; }
.gal-contacto.is-visible [data-ct="4"] { transition-delay: 440ms; }
.gal-contacto.is-visible [data-ct="5"] { transition-delay: 320ms; }
.gal-contacto.is-visible [data-ct="6"] { transition-delay: 420ms; }
.gal-contacto.is-visible [data-ct="7"] { transition-delay: 520ms; }
.gal-contacto.is-visible [data-ct="8"] { transition-delay: 600ms; }
.gal-contacto.is-visible [data-ct="9"] { transition-delay: 680ms; }

/* ===========================
   TABLET — 768–1024px
   =========================== */

@media (max-width: 1024px) {
  .gal-contacto__visual {
    padding-top: calc(var(--navbar-height) + 32px);
    gap: clamp(28px, 4vw, 56px);
  }

  .gal-contacto__index {
    top: calc(var(--navbar-height) + 32px);
  }

  .gal-contacto__title {
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  }
}

/* ===========================
   MOBILE — ≤768px
   Orden: etiqueta → titular → texto → ubicación → llegar → contacto →
   acciones → despedida.
   =========================== */

@media (max-width: 768px) {
  .gal-contacto {
    overflow-x: clip;
  }

  .gal-contacto__visual {
    padding: calc(var(--navbar-height) + 20px) clamp(20px, 6vw, 24px) 64px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .gal-contacto__left,
  .gal-contacto__side {
    display: contents;
  }

  .gal-contacto__overline {
    order: 1;
  }

  .gal-contacto__title {
    order: 2;
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .gal-contacto__lede {
    order: 3;
    max-width: 100%;
  }

  .gal-contacto__side {
    min-width: 0;
  }

  .gal-contacto__tagline {
    order: 4;
    margin-top: clamp(32px, 5vh, 40px);
  }

  .gal-contacto__block:nth-child(1) {
    order: 5;
    margin-top: clamp(36px, 6vh, 48px);
  }

  .gal-contacto__block:nth-child(2) {
    order: 6;
  }

  .gal-contacto__block:nth-child(3) {
    order: 7;
  }

  .gal-contacto__actions {
    order: 8;
  }

  .gal-contacto__closing {
    order: 9;
    margin-top: clamp(48px, 8vh, 64px);
  }

  .gal-contacto__index {
    top: calc(var(--navbar-height) + 20px);
    right: clamp(20px, 6vw, 24px);
  }
}

/* ===========================
   SMALL MOBILE — ≤480px
   =========================== */

@media (max-width: 480px) {
  .gal-contacto__visual {
    padding-left: clamp(20px, 6.25vw, 24px);
    padding-right: clamp(20px, 6.25vw, 24px);
  }

  .gal-contacto__title {
    font-size: clamp(1.65rem, 8.5vw, 2.1rem);
  }

  .gal-contacto__closing {
    font-size: clamp(1.15rem, 5.5vw, 1.5rem);
  }
}

/* ===========================
   REDUCED MOTION — sección 6 y footer
   =========================== */

@media (prefers-reduced-motion: reduce) {
  .gal-contacto [data-ct],
  .gal-footer [data-fr] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gal-contacto__cta,
  .gal-contacto__cta-arrow,
  .gal-contacto__row-value,
  .gal-footer__cta,
  .gal-footer__cta-arrow,
  .gal-footer__navlink,
  .gal-footer__navlink-arrow,
  .gal-footer__contact {
    transition: none !important;
  }

  .gal-contacto__cta-arrow,
  .gal-footer__cta-arrow,
  .gal-footer__navlink-arrow {
    transform: none !important;
  }
}

/* ===========================
   FOOTER — el cierre de la experiencia
   Mismo lenguaje editorial de las secciones: negro profundo, marfil,
   dorado apagado, líneas sutiles y mucho espacio negativo.
   =========================== */

.gal-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  background-color: var(--color-black-absolute);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.gal-footer__inner {
  max-width: var(--grid-container);
  margin: 0 auto;
  box-sizing: border-box;
  padding: clamp(96px, 14vh, 140px) var(--grid-page-margin) clamp(40px, 5vh, 56px);
}

/* --- 1. Cierre editorial principal --- */

.gal-footer__closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gal-footer__closing-mark {
  width: clamp(48px, 4vw, 64px);
  height: 1px;
  background: var(--color-gold);
  opacity: 0.35;
  margin-bottom: clamp(24px, 3.5vh, 36px);
}

.gal-footer__closing-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.gal-footer__closing-tagline {
  margin-top: var(--space-16);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--color-gold);
  opacity: 0.85;
}

/* --- 2. Marca --- */

.gal-footer__brand {
  margin-top: clamp(48px, 7vh, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.gal-footer__logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--weight-heading-light);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ivory);
  transition: color 0.35s ease;
}

.gal-footer__logo span {
  color: var(--color-gold);
}

.gal-footer__logo:hover,
.gal-footer__logo:focus-visible {
  color: var(--color-gold);
}

.gal-footer__logo:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

.gal-footer__location {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gray-warm);
  opacity: 0.8;
}

/* --- 3 · 4 · 5. Navegación, contacto y CTA --- */

.gal-footer__columns {
  margin-top: clamp(56px, 8vh, 84px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: clamp(40px, 5vw, 96px);
}

.gal-footer__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-14);
}

.gal-footer__group-title {
  display: block;
  margin-bottom: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.75;
}

/* Navegación — flecha que aparece y se desplaza en hover */
.gal-footer__navlink {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-weight: var(--weight-body-light);
  letter-spacing: 0.02em;
  color: var(--color-gray-warm);
  opacity: 1;
  transition: color 0.35s ease, opacity 0.35s ease;
}

.gal-footer__navlink-arrow {
  font-size: 0.875rem;
  color: var(--color-gold);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.gal-footer__navlink:hover,
.gal-footer__navlink:focus-visible {
  color: var(--color-gold);
  opacity: 1;
}

.gal-footer__navlink:hover .gal-footer__navlink-arrow,
.gal-footer__navlink:focus-visible .gal-footer__navlink-arrow {
  opacity: 0.8;
  transform: translateX(0);
}

.gal-footer__navlink:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* Contacto — placeholders hasta confirmar los datos reales */
.gal-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: flex-start;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.35s ease;
}

.gal-footer__contact-label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray-warm);
  opacity: 0.7;
  transition: color 0.35s ease, opacity 0.35s ease;
}

.gal-footer__contact-value {
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-weight: var(--weight-body-light);
  letter-spacing: 0.01em;
  color: var(--color-ivory);
  opacity: 0.9;
  transition: color 0.35s ease, opacity 0.35s ease;
}

.gal-footer__contact-value::after {
  content: '→';
  margin-left: var(--space-8);
  color: var(--color-gold);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.gal-footer__contact:hover {
  border-bottom-color: rgba(196, 168, 110, 0.5);
}

.gal-footer__contact:hover .gal-footer__contact-label,
.gal-footer__contact:focus-visible .gal-footer__contact-label {
  color: var(--color-gold);
  opacity: 1;
}

.gal-footer__contact:hover .gal-footer__contact-value,
.gal-footer__contact:focus-visible .gal-footer__contact-value {
  color: var(--color-gold);
  opacity: 1;
}

.gal-footer__contact:hover .gal-footer__contact-value::after,
.gal-footer__contact:focus-visible .gal-footer__contact-value::after {
  opacity: 0.8;
  transform: translateX(0);
}

.gal-footer__contact:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

.gal-footer__contact[aria-disabled="true"]:hover {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.gal-footer__contact[aria-disabled="true"]:hover .gal-footer__contact-label {
  color: var(--color-gray-warm);
  opacity: 0.7;
}

.gal-footer__contact[aria-disabled="true"]:hover .gal-footer__contact-value {
  color: var(--color-ivory);
  opacity: 0.9;
}

.gal-footer__contact[aria-disabled="true"] .gal-footer__contact-value::after {
  display: none;
}

/* CTA final — reservar ahora */
.gal-footer__cta-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.gal-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: clamp(14px, 2vh, 18px) clamp(24px, 2.6vw, 34px);
  border: 1px solid rgba(196, 168, 110, 0.5);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  transition: border-color 0.35s ease, background-color 0.35s ease,
              color 0.35s ease;
}

.gal-footer__cta-arrow {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-footer__cta:hover,
.gal-footer__cta:focus-visible {
  background-color: rgba(196, 168, 110, 0.12);
  border-color: rgba(196, 168, 110, 0.9);
  color: var(--color-ivory);
}

.gal-footer__cta:hover .gal-footer__cta-arrow,
.gal-footer__cta:focus-visible .gal-footer__cta-arrow {
  transform: translateX(5px);
}

.gal-footer__cta:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* --- 6. Línea final --- */

.gal-footer__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin-top: clamp(56px, 8vh, 84px);
}

.gal-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-16);
  padding-top: clamp(24px, 3.5vh, 36px);
}

.gal-footer__copyright,
.gal-footer__center {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray-warm);
  opacity: 0.6;
}

.gal-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray-warm);
  opacity: 0.6;
}

.gal-footer__legallink {
  color: var(--color-gray-warm);
  opacity: 0.7;
  transition: color 0.35s ease, opacity 0.35s ease;
}

.gal-footer__legallink:hover,
.gal-footer__legallink:focus-visible {
  color: var(--color-gold);
  opacity: 1;
}

.gal-footer__legallink:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

.gal-footer__legallink[aria-disabled="true"] {
  cursor: default;
}

.gal-footer__legallink[aria-disabled="true"]:hover {
  color: var(--color-gray-warm);
  opacity: 0.7;
}

/* --- 7. Detalle editorial final --- */

.gal-footer__farewell {
  margin-top: clamp(40px, 6vh, 56px);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.9375rem;
  text-align: center;
  color: var(--color-gold);
  opacity: 0.75;
}

/* ===========================
   ENTRADA EN SCROLL — movimiento suave
   =========================== */

.gal-footer [data-fr] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.gal-footer.is-visible [data-fr] {
  opacity: 1;
  transform: none;
}

.gal-footer.is-visible [data-fr="0"] { transition-delay: 80ms; }
.gal-footer.is-visible [data-fr="1"] { transition-delay: 160ms; }
.gal-footer.is-visible [data-fr="2"] { transition-delay: 240ms; }
.gal-footer.is-visible [data-fr="3"] { transition-delay: 320ms; }
.gal-footer.is-visible [data-fr="4"] { transition-delay: 400ms; }

/* ===========================
   TABLET — 768–1024px
   =========================== */

@media (max-width: 1024px) {
  .gal-footer__columns {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 64px);
  }

  .gal-footer__cta-wrap {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: clamp(8px, 1.5vh, 16px);
  }
}

/* ===========================
   MOBILE — ≤768px
   Navegación, contacto y CTA apilados; el mensaje principal sigue
   siendo protagonista.
   =========================== */

@media (max-width: 768px) {
  .gal-footer__inner {
    padding: clamp(72px, 12vh, 96px) clamp(20px, 6vw, 24px) clamp(40px, 6vh, 56px);
  }

  .gal-footer__closing-title {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }

  .gal-footer__columns {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vh, 56px);
    margin-top: clamp(48px, 7vh, 64px);
  }

  .gal-footer__cta-wrap {
    grid-column: auto;
    justify-content: stretch;
    margin-top: 0;
  }

  .gal-footer__cta {
    width: 100%;
  }

  .gal-footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-16);
  }

  .gal-footer__farewell {
    text-align: center;
    margin-top: clamp(40px, 6vh, 56px);
  }
}