@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Unbounded:wght@300;400;500;600;700&display=swap');

/* ============================================
   NAYRA TRAVEL — DESIGN SYSTEM
   ============================================ */

:root {
  /* Color tokens */
  --bg: oklch(0.97 0.01 80);
  --bg-soft: oklch(0.94 0.012 75);
  --bg-deep: oklch(0.18 0.015 60);
  --ink: oklch(0.2 0.02 60);
  --ink-deep: #17100b;
  --ink-soft: oklch(0.35 0.018 60);
  --ink-mute: oklch(0.55 0.015 60);
  --line: oklch(0.85 0.01 70);
  --line-soft: oklch(0.91 0.01 70);
  --terracotta: oklch(0.58 0.13 35);
  --terracotta-deep: oklch(0.48 0.13 32);
  --moss: oklch(0.45 0.08 150);
  --gold: oklch(0.78 0.09 75);

  /* Type */
  /* Títulos y UI (eyebrows, botones, nav, labels) en Unbounded;
     párrafos y cuerpo en Barlow. */
  --serif: "Unbounded", "Helvetica Neue", Arial, sans-serif;
  --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono: "Unbounded", "Helvetica Neue", Arial, sans-serif;

  /* Sizing */
  --pad: clamp(20px, 4vw, 64px);
  --maxw: 1480px;
  --radius: 2px;
}

/* Modo noche — mismos tokens invertidos; se activa con html.dark
   (persistido en localStorage y aplicado antes del primer paint en index.html) */
html.dark {
  color-scheme: dark;
  --bg: oklch(0.17 0.012 60);
  --bg-soft: oklch(0.21 0.014 60);
  --bg-deep: oklch(0.12 0.012 60);
  --ink: oklch(0.93 0.008 80);
  --ink-deep: #f2ebe3;
  --ink-soft: oklch(0.8 0.01 75);
  --ink-mute: oklch(0.6 0.01 70);
  --line: oklch(0.33 0.01 60);
  --line-soft: oklch(0.27 0.01 60);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

/* View Transitions */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}

::view-transition-old(root) {
  animation-name: vt-fade-out;
}

::view-transition-new(root) {
  animation-name: vt-fade-in;
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
    transform: scale(1.02);
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(24px, 2.5vw, 36px);
}

h4 {
  font-size: clamp(18px, 1.6vw, 22px);
}

p {
  text-wrap: pretty;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0;
}

/* Párrafo secundario / descripción: taglines, citas, subtexto bajo imagen.
   Barlow 15px, peso 300, itálica — diferencia sin perder legibilidad. */
.lead-text,
p.secondary {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  font-style: normal;
  line-height: 1.8;
  color: var(--ink-soft);
}

.italic {
  font-style: normal;
}

/* ============================================
   NAVBAR
   ============================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 18px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease, color 0.4s ease;
  color: var(--bg);
  border-bottom: 1px solid transparent;
}

/* Sin barra: el nav es siempre transparente; al hacer scroll solo cambia el
   color del texto (oscuro sobre contenido claro). */
.nav.scrolled {
  background: transparent;
  color: var(--ink);
  border-bottom-color: transparent;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Over full-bleed dark sections (hero + destinos showcase): keep the nav
   transparent with white text, exactly like the initial hero state. */
.nav.on-dark {
  background: transparent;
  color: var(--bg);
  border-bottom-color: transparent;
}

.nav-brand {
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 12px;
  /* El logo cambia de color a la vez que el fondo, cuando "Paquetes en
     {destino}" llega al centro (mismo disparador y duración que el wash).
     El transform lo desplaza al centro cuando se abre el menú del sitio. */
  transition: color 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Cuando el fondo del apartado principal se aclara (efecto wash de Paquetes),
   el logo "NT Nayra Travel" pasa a negro para mantener el contraste
   (sobreescribe el color blanco de .nav.on-dark). */
.nav.nav-pkgs-ink .nav-brand {
  color: var(--ink);
}

.nav-brand-mark {
  width: 38px;
  height: 38px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0;
}

.nav-cta {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 5px;
  background: rgba(60, 62, 68, 0.35);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
  transition: border-color 0.5s, color 0.4s, background 0.4s;
  animation: nav-cta-ring 5s ease-in-out infinite;
}

/* Vibración tipo "llamada de celular": ráfaga corta y luego pausa hasta completar 5s */
@keyframes nav-cta-ring {
  0% {
    transform: translateX(0) rotate(0);
  }

  1% {
    transform: translateX(-2px) rotate(-3deg);
  }

  2% {
    transform: translateX(2px) rotate(3deg);
  }

  3% {
    transform: translateX(-2px) rotate(-3deg);
  }

  4% {
    transform: translateX(2px) rotate(3deg);
  }

  5% {
    transform: translateX(-2px) rotate(-2deg);
  }

  6% {
    transform: translateX(2px) rotate(2deg);
  }

  7% {
    transform: translateX(-1px) rotate(-1deg);
  }

  8% {
    transform: translateX(0) rotate(0);
  }

  100% {
    transform: translateX(0) rotate(0);
  }
}

/* Pausar la vibración al pasar el cursor para no interferir con el hover */
.nav-cta:hover {
  animation-play-state: paused;
}

/* Respetar la preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .nav-cta {
    animation: none;
  }
}

.nav-cta::before {
  content: '';
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  background: #17100b;
  border-radius: 50%;
  top: 50%;
  left: 0;
  transform: translateX(-100%) translateY(-50%);
  transition: transform 0.7s ease;
}

.nav-cta:hover {
  border-color: #17100b;
  color: #fff;
}

.nav-cta:hover::before {
  transform: translateX(0) translateY(-50%) scale(2);
}

.nav-cta>span {
  position: relative;
  z-index: 1;
}

.nav-cta .arrow-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
  border-radius: 50%;
  transform: rotate(45deg);
  transition: transform 0.3s ease, background 0.3s, border-color 0.3s;
}

.nav-cta:hover .arrow-icon {
  transform: rotate(90deg);
  background: #fff;
  border-color: transparent;
  color: #17100b;
}

.nav-cta .arrow-icon svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.nav-cta:hover .arrow-icon svg {
  fill: #17100b;
}

/* ============================================
   NAV REDUCIDO + MENÚ A PANTALLA COMPLETA (estilo Myrtha)
   Solo se muestran el logo, el botón "Menú" y el CTA.
   ============================================ */
.nav-menu-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px;
  min-height: 60px;
  border-radius: 5px;
  background: rgba(60, 62, 68, 0.35);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  color: #fff;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
  transition: border-color 0.5s, color 0.4s, background 0.4s;
}

/* Mismo efecto de hover que .nav-cta: círculo oscuro que barre y rellena */
.nav-menu-toggle::before {
  content: '';
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  background: #17100b;
  border-radius: 50%;
  top: 50%;
  left: 0;
  transform: translateX(-100%) translateY(-50%);
  transition: transform 0.7s ease;
}

.nav-menu-toggle:hover {
  border-color: #17100b;
  color: #fff;
}

.nav-menu-toggle:hover::before {
  transform: translateX(0) translateY(-50%) scale(2);
}

/* El icono y la etiqueta quedan por encima del círculo */
.nav-menu-toggle .nmt-icon,
.nav-menu-toggle .nmt-label {
  position: relative;
  z-index: 1;
}

.nav-menu-toggle .nmt-icon {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 10px;
}

.nav-menu-toggle .nmt-icon span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1), top 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}

.nav-menu-toggle .nmt-icon span:nth-child(1) {
  top: 1px;
}

.nav-menu-toggle .nmt-icon span:nth-child(2) {
  top: 8px;
}

.nav-menu-toggle.is-active .nmt-icon span:nth-child(1) {
  top: 4px;
  transform: rotate(45deg);
}

.nav-menu-toggle.is-active .nmt-icon span:nth-child(2) {
  top: 4px;
  transform: rotate(-45deg);
}

.nav-menu-toggle .nmt-label {
  min-width: 3.6em;
  text-align: left;
}

/* Mientras el menú está abierto, el nav queda en claro (logo/botones legibles) */
/* Con el menú abierto el nav es transparente (sin barra): la imagen ocupa toda
   la altura por la izquierda y el panel crema por la derecha. El logo se
   desliza a la parte superior de la columna central (en tinta, sobre el panel). */
body.site-menu-open .nav {
  background: transparent !important;
  border-bottom-color: transparent !important;
}

body.site-menu-open .nav-brand {
  color: var(--ink);
  transform: translateX(calc(50vw - var(--pad) - 50%));
}

/* el botón "Menú" es un chip gris translúcido: el texto se mantiene blanco */
body.site-menu-open .nav-menu-toggle {
  color: #fff;
  gap: 0;
}

/* Con el menú abierto desaparecen el CTA y la etiqueta: queda solo la equis */
body.site-menu-open .nav-cta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s, visibility 0s 0.25s;
}

body.site-menu-open .nav-menu-toggle .nmt-label {
  display: none;
}

/* Overlay del menú — entra desde la DERECHA. Dos zonas:
   IZQUIERDA = imagen de vista previa a toda la columna (cortina + zoom al cambiar);
   DERECHA (del centro hacia la derecha) = panel sólido con las secciones y subopciones. */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: transparent;
  color: var(--ink);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s 0.7s;
}

.site-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
}

.sm-grid {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  /* izquierda imagen a sangre · derecha sólida (Navegación + subopciones) */
}

/* Utilidades del menú (idioma + modo noche), encima de "Navegación" */
.sm-utils {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(16px, 2.5vh, 28px);
}

.sm-util {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, color 0.3s, transform 0.15s;
}

.sm-util:active {
  transform: scale(0.95);
}

.sm-lang {
  padding: 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sm-lang:hover {
  border-color: var(--ink);
}

/* Botón de tema: sol (claro) → luna (oscuro), recreación CSS de toggles.dev */
.sm-theme {
  width: 44px;
  padding: 9px;
  background: #fff;
  color: #17100b;
}

html.dark .sm-theme {
  background: #17100b;
  color: #fff;
}

.sm-theme svg {
  width: 100%;
  height: 100%;
}

/* El recorte se desplaza y "muerde" el disco: de sol a luna creciente */
#sm-theme-clip path {
  transition: transform 0.7s ease-in-out;
}

html.dark #sm-theme-clip path {
  transform: translate(-12px, 10px);
}

.sm-theme-core {
  transition: r 0.7s ease-in-out;
}

html.dark .sm-theme-core {
  r: 10;
}

.sm-theme-rays {
  transform-origin: 16px 16px;
  transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
}

html.dark .sm-theme-rays {
  transform: rotate(-100deg) scale(0.5);
  opacity: 0;
}

.sm-eyebrow {
  display: block;
  margin-bottom: clamp(18px, 3vh, 34px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* IZQUIERDA — la imagen ocupa TODA la columna (sin vidrio ni blur). Al
   cambiar, la imagen entrante llega ampliada (zoom de afuera hacia adentro)
   y se asienta en su tamaño mientras la actual sube como cortina. */
.sm-left {
  position: relative;
  overflow: hidden;
  background: #120d09;
  color: #fff;
}

/* DERECHA — panel sólido (crema): Navegación (centro) + subopciones (derecha).
   padding-left moderado para que la columna de Navegación quede un poco más a
   la izquierda (sin invadir el vidrio). */
.sm-main {
  background: var(--bg);
  color: var(--ink);
  padding: clamp(92px, 13vh, 150px) var(--pad) clamp(40px, 6vh, 70px) clamp(30px, 3vw, 52px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.5vw, 64px);
  align-items: stretch;
  overflow-y: auto;
}

.sm-figure {
  position: absolute;
  inset: 0;
}

/* Pila de capas (estilo elementis.co): cada cambio añade una capa ENCIMA que
   entra como cortina de abajo hacia arriba (clip-path) con su imagen ya
   ampliada perdiendo el zoom (GSAP). Las capas tapadas se retiran al llegar
   la cortina arriba; las cortinas en curso nunca se cancelan. */
.sm-fig-stack {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sm-fig-layer {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  will-change: clip-path;
}

.sm-fig-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%);
}

.sm-fig-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

/* Enlace superior: solo el pie (kicker + título) sobre la pila de imágenes */
.sm-feature-card {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 3vw, 46px) clamp(24px, 2.8vw, 44px);
}

.sm-feature-kicker {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.sm-feature-title {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 8px;
  max-width: 420px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.25;
  color: #fff;
}

/* CENTRO — lista de secciones principales (al pasar el cursor, cambia la derecha) */
.sm-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sm-primary {
  display: flex;
  flex-direction: column;
}

.sm-prim {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(8px, 1.4vh, 16px) 0;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line-soft);
  transition: color 0.3s, padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sm-prim:last-child {
  border-bottom: 0;
}

.sm-prim-arrow {
  flex: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
}

.sm-prim.is-active,
.sm-prim:hover {
  color: var(--ink);
  padding-left: 12px;
}

.sm-prim.is-active .sm-prim-arrow,
.sm-prim:hover .sm-prim-arrow {
  opacity: 1;
  transform: none;
  color: var(--terracotta);
}

/* DERECHA (dentro del panel sólido) — subopciones de la sección activa */
.sm-right {
  position: relative;
  display: grid;
  align-items: center;
}

.sm-subgroup {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-area: 1 / 1;
  /* todas en la misma celda: se solapan y hacen crossfade */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.sm-subgroup.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s ease, visibility 0s;
}

.sm-subgroup-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 16px;
}

.sm-subgroup a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  font-size: 16px;
  transition: color 0.2s, padding-left 0.2s;
}

.sm-subgroup a:hover {
  color: var(--terracotta);
  padding-left: 6px;
}

.sm-subgroup a span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* las subopciones entran escalonadas cada vez que se activa una sección */
.sm-subgroup li {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.sm-subgroup.is-active li {
  opacity: 1;
  transform: none;
}

.sm-subgroup.is-active li:nth-child(1) {
  transition-delay: 0.04s;
}

.sm-subgroup.is-active li:nth-child(2) {
  transition-delay: 0.09s;
}

.sm-subgroup.is-active li:nth-child(3) {
  transition-delay: 0.14s;
}

.sm-subgroup.is-active li:nth-child(4) {
  transition-delay: 0.19s;
}

.sm-subgroup.is-active li:nth-child(5) {
  transition-delay: 0.24s;
}

.sm-subgroup.is-active li:nth-child(6) {
  transition-delay: 0.29s;
}

.sm-subgroup.is-active li:nth-child(7) {
  transition-delay: 0.34s;
}

.sm-subgroup.is-active li:nth-child(8) {
  transition-delay: 0.39s;
}

/* Responsive — apilar: panel sólido (Navegación + subopciones) arriba, imagen abajo */
@media (max-width: 900px) {
  .sm-grid {
    grid-template-columns: 1fr;
  }

  .sm-main {
    order: 1;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-left: var(--pad);
  }

  .sm-left {
    order: 2;
    min-height: 48vh;
  }

  .sm-right {
    display: block;
  }

  .sm-subgroup {
    display: none;
  }

  .sm-subgroup.is-active {
    display: flex;
  }

  .sm-prim {
    font-size: clamp(26px, 7vw, 40px);
  }

  .sm-prim-arrow {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 4;
  pointer-events: none;
}

.hero-layer {
  position: absolute;
  will-change: transform;
}

.hero-layer--sky {
  inset: -10% 0 -10% 0;
  z-index: 1;
}

.hero-layer--sky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-layer--machu {
  z-index: 2;
  /* Anchored in vw (not %) so the vertical position scales with the image,
     which is width-based. Matches -30% (−324px) exactly at 1920×1080. */
  bottom: -16.875vw;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.hero-layer--machu img {
  /* max(100%, 90vh): on wide screens fills the width like the copy; on narrow
     screens the vh floor takes over so the image grows (and rises) instead of
     shrinking into a thin strip. Identical to the copy at 1920 (wins 100%). */
  width: max(100%, 90vh);
  max-width: 1800px;
  height: auto;
  display: block;
}

.hero-layer--people {
  z-index: 3;
  /* vw anchor, matches -10% (−108px) exactly at 1920×1080. */
  bottom: -5.625vw;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.hero-layer--people img {
  /* Same idea: grows and rises on narrow screens via a vh floor.
     Identical to the copy at 1920 (wins 100%, capped at 1000px). */
  width: max(100%, 55vh);
  max-width: 1000px;
  height: auto;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 0 var(--pad) 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
}

.hero h1 {
  color: #fff;
  max-width: 14ch;
}

.hero h1 .scribble {
  font-style: normal;
  font-family: var(--serif);
  color: var(--gold);
}

.hero-meta {
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  max-width: 28ch;
}

.hero-meta .big {
  font-family: var(--serif);
  font-size: 18px;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 14px;
  display: block;
  opacity: 1;
}

.hero-search {
  position: absolute;
  bottom: 0;
  left: var(--pad);
  right: var(--pad);
  z-index: 5;
  background: var(--bg);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  align-items: stretch;
  overflow: hidden;
}

.hero-search>* {
  padding: 22px 24px;
  border-right: 1px solid var(--line-soft);
}

.hero-search>*:last-child {
  border-right: none;
}

.hs-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.hs-field:hover {
  background: var(--bg-soft);
}

.hs-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.hs-value {
  font-family: var(--serif);
  font-size: 18px;
  font-style: normal;
  color: var(--ink);
}

.hs-submit {
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 0 40px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: background 0.25s;
}

.hs-submit:hover {
  background: var(--terracotta);
}

.hs-submit svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   SECTIONS
   ============================================ */
section {
  padding: 120px var(--pad);
  position: relative;
}

section.tight {
  padding: 80px var(--pad);
}

section.dark {
  background: var(--bg-deep);
  color: var(--bg);
}

section.dark h2,
section.dark h3,
section.dark h4 {
  color: var(--bg);
}

section.dark p {
  color: oklch(0.78 0.012 70);
}

section.dark .eyebrow {
  color: oklch(0.7 0.012 70);
}

.section-hd {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 64px;
}


.section-hd p {
  max-width: 36ch;
  font-size: 15px;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Reveal — base */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal {
  transform: translateY(50px);
}

.reveal-left {
  transform: translateX(-70px);
}

.reveal-right {
  transform: translateX(70px);
}

.reveal-scale {
  transform: scale(0.9) translateY(30px);
}

.reveal.in,
.reveal-left.in,
.reveal-right.in,
.reveal-scale.in {
  opacity: 1;
  transform: translate(0) scale(1);
}

[data-delay="1"] {
  transition-delay: 0.1s !important;
}

[data-delay="2"] {
  transition-delay: 0.2s !important;
}

[data-delay="3"] {
  transition-delay: 0.3s !important;
}

[data-delay="4"] {
  transition-delay: 0.4s !important;
}

[data-delay="5"] {
  transition-delay: 0.5s !important;
}

.mask-reveal {
  overflow: hidden;
  display: block;
}

.mask-reveal>* {
  display: block;
  transform: translateY(105%);
  transition: transform 1.1s cubic-bezier(0.7, 0, 0.2, 1);
}

.mask-reveal.in>* {
  transform: translateY(0);
}

/* ============================================
   INTRO STRIP
   ============================================ */
.intro {
  padding: 80px var(--pad) 40px;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: start;
}

.intro h2 {
  font-size: clamp(32px, 4vw, 56px);
}

.intro p {
  font-size: 18px;
  max-width: 56ch;
}

.intro-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
}

.stat .n {
  font-family: var(--serif);
  font-size: 48px;
  font-style: normal;
  color: var(--terracotta);
  line-height: 1;
}

.stat .l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 8px;
  display: block;
}

/* ============================================
   DESTINATIONS — horizontal scroll cards
   ============================================ */
.dest-scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 var(--pad) 32px;
  margin: 0 calc(var(--pad) * -1);
}

.dest-scroll::-webkit-scrollbar {
  display: none;
}

.dest-row {
  display: flex;
  gap: 24px;
}

.dest-card {
  flex: 0 0 clamp(280px, 32vw, 460px);
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
}

.dest-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.dest-card:hover img {
  transform: scale(1.06);
}

.dest-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
}

.dest-info {
  position: absolute;
  inset: auto 20px 20px 20px;
  z-index: 2;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.dest-info h3 {
  color: #fff;
  font-style: normal;
  font-size: 28px;
}

.dest-info .meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
  display: block;
  margin-bottom: 4px;
}

.dest-info .arrow {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.25s, transform 0.25s;
}

.dest-card:hover .dest-info .arrow {
  background: var(--terracotta);
  border-color: var(--terracotta);
  transform: rotate(-45deg);
}

.scroll-hint {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.scroll-hint .line {
  flex: 1;
  height: 1px;
  background: var(--line);
  max-width: 200px;
}

/* ============================================
   DESTINATIONS — pinned showcase (darknode-style)
   ============================================ */

/* Scramble / decode text — keep glyph width stable while it resolves */
.scramble {
  font-variant-numeric: tabular-nums;
}

.dgn {
  position: relative;
  height: 500vh;
  /* scroll length: one screen per destino (5) */
  background: #0a0a0c;
  padding: 0;
  /* override the global section padding — full bleed, no side borders */
}

.dgn-stage {
  position: sticky;
  /* sticks while scrolling through the tall section */
  top: 0;
  height: 100vh;
  overflow: hidden;
  color: #fff;
}

/* Crossfading full-bleed backgrounds */
.dgn-bgs {
  position: absolute;
  inset: 0;
}

.dgn-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1s ease, transform 7s ease;
  will-change: opacity, transform;
}

.dgn-bg.is-active {
  opacity: 1;
  transform: scale(1);
}

.dgn-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(8, 8, 11, 0.5) 0%, rgba(8, 8, 11, 0.18) 40%, rgba(8, 8, 11, 0) 66%),
    linear-gradient(0deg, rgba(8, 8, 11, 0.42) 0%, rgba(8, 8, 11, 0) 26%);
}

.dgn-top,
.dgn-deco,
.dgn-items,
.dgn-brand,
.dgn-hint {
  position: absolute;
  z-index: 3;
}

/* Top bar — pushed below the fixed navbar */
.dgn-top {
  top: clamp(78px, 10vh, 104px);
  left: var(--pad);
  right: var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dgn-top .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

.dgn-counter {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
}

.dgn-counter b {
  color: #fff;
  font-weight: 500;
}

.dgn-counter i {
  margin: 0 7px;
  font-style: normal;
  opacity: 0.45;
}

/* Left technical decoration */
.dgn-deco {
  left: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: clamp(120px, 12vw, 164px);
}

.dgn-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dgn-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: none;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.38;
  filter: grayscale(0.5);
  transition: opacity 0.45s, border-color 0.45s, filter 0.45s;
}

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

.dgn-thumb span {
  position: absolute;
  left: 5px;
  bottom: 3px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.dgn-thumb.is-active {
  opacity: 1;
  border-color: var(--terracotta);
  filter: none;
}

.dgn-radar {
  position: relative;
  width: 82px;
  height: 82px;
  color: rgba(255, 255, 255, 0.32);
}

.dgn-radar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dgn-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(217, 119, 87, 0) 0deg, rgba(217, 119, 87, 0.4) 48deg, rgba(217, 119, 87, 0) 60deg);
  animation: dgnSweep 4s linear infinite;
}

@keyframes dgnSweep {
  to {
    transform: rotate(360deg);
  }
}

.dgn-coord {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* Right stacked destinations */
.dgn-items {
  right: var(--pad);
  left: clamp(40%, 46vw, 52%);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}

.dgn-it {
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px 0;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}

.dgn-it:first-child {
  border-top: 0;
}

.dgn-it-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.4s;
}

.dgn-it-name {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 22px;
  line-height: 1.05;
  color: rgba(255, 255, 255, 0.5);
  transition: font-size 0.55s cubic-bezier(0.16, 1, 0.3, 1), color 0.45s;
}

.dgn-it.is-active .dgn-it-num {
  color: var(--terracotta);
}

.dgn-it.is-active .dgn-it-name {
  font-size: clamp(38px, 5.2vw, 74px);
  color: #fff;
}

/* Expanding bordered detail frame */
.dgn-it-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  max-width: 46ch;
  margin-top: 0;
  padding: 0 18px;
  border: 1px solid transparent;
  transition: max-height 0.6s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.5s ease, margin 0.5s, padding 0.5s, border-color 0.5s;
}

.dgn-it.is-active .dgn-it-detail {
  max-height: 320px;
  opacity: 1;
  margin-top: 16px;
  padding: 16px 18px;
  border-color: rgba(255, 255, 255, 0.22);
}

.dgn-it-meta {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 10px;
}

.dgn-it-detail p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}

.dgn-it-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.dgn-it-go svg {
  transition: transform 0.3s;
}

.dgn-it:hover .dgn-it-go svg {
  transform: translateX(4px);
}

/* Pinned brand bottom-left */
.dgn-brand {
  bottom: clamp(20px, 4vh, 42px);
  left: var(--pad);
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 6.4vw, 104px);
  line-height: 0.86;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 4px 34px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.dgn-brand span {
  display: block;
}

.dgn-brand em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.88);
}

/* Scroll hint bottom-right */
.dgn-hint {
  bottom: clamp(20px, 4vh, 42px);
  right: var(--pad);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.dgn-hint-bar {
  position: relative;
  width: 58px;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.dgn-hint-bar i {
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: var(--terracotta);
  animation: dgnHint 2.4s ease-in-out infinite;
}

@keyframes dgnHint {
  to {
    left: 100%;
  }
}

/* Tablet / mobile — keep the pinned showcase, reflow to fit */
@media (max-width: 860px) {
  .dgn-deco {
    display: none;
  }

  .dgn-items {
    left: var(--pad);
    right: var(--pad);
    top: 46%;
  }

  .dgn-it {
    padding: 5px 0;
  }

  .dgn-it.is-active .dgn-it-name {
    font-size: clamp(30px, 9vw, 46px);
  }

  .dgn-it-detail {
    max-width: none;
  }

  .dgn-brand {
    font-size: clamp(28px, 9vw, 52px);
  }

  .dgn-hint {
    display: none;
  }
}

/* ============================================
   ITINERARIO ANIMADO — rueda (3 visibles, activo centrado)
   El activo se centra por JS (translateY del .dgn-wheel).
   ============================================ */
/* viewport de la rueda: a la IZQUIERDA, ocupa todo el alto y recorta */
#itinerario-dgn .dgn-items {
  top: 0;
  bottom: 0;
  right: auto;
  left: var(--pad);
  width: min(46vw, 540px);
  transform: none;
  overflow: hidden;
}

/* Vidrio esmerilado detrás de la columna de texto, para separarla del fondo de
   imágenes. Va en el .dgn-stage (no en la columna, que recorta) para poder
   arrancar desde el borde izquierdo del todo; se desvanece hacia la derecha
   para fundirse con la imagen. Queda por debajo del texto (z-index 1). */
#itinerario-dgn .dgn-stage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--pad) + min(46vw, 540px));
  z-index: 1;
  background: rgba(12, 9, 6, 0.32);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-mask-image: linear-gradient(to right, #000 60%, transparent 100%);
  mask-image: linear-gradient(to right, #000 60%, transparent 100%);
  pointer-events: none;
}

/* El rótulo superior y la marca quedan por encima del vidrio (sin difuminarse) */
#itinerario-dgn .dgn-top,
#itinerario-dgn .dgn-brand {
  z-index: 4;
}

/* miniaturas en 2 columnas (entran los 9 días); índice pasa a la DERECHA */
#itinerario-dgn .dgn-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

#itinerario-dgn .dgn-deco {
  left: auto;
  right: var(--pad);
}

/* marca = día actual, en una sola línea */
#itinerario-dgn .dgn-brand {
  white-space: nowrap;
  font-size: clamp(22px, 3.6vw, 48px);
  line-height: 1;
}

#itinerario-dgn .dgn-brand span {
  display: inline;
}

#itinerario-dgn .dgn-wheel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1);
  will-change: transform;
}

/* cada día: imagen + texto; el detalle aparece abajo cuando está activo */
#itinerario-dgn .dgn-it {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  opacity: 0.18;
  transition: opacity 0.5s ease;
}

#itinerario-dgn .dit-img {
  width: 80px;
  height: 54px;
  object-fit: cover;
  border-radius: 3px;
  filter: grayscale(0.5);
  opacity: 0.9;
  transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1), height 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s;
}

#itinerario-dgn .dit-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#itinerario-dgn .dgn-it-name {
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

/* detalle sin animar la altura: el deslizamiento de la rueda lo disimula */
#itinerario-dgn .dgn-it-detail {
  grid-column: 1 / -1;
  max-height: 0;
  transition: opacity 0.5s ease;
}

#itinerario-dgn .dgn-it.is-active {
  opacity: 1;
}

#itinerario-dgn .dgn-it.is-active .dit-img {
  width: 118px;
  height: 80px;
  filter: none;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
}

#itinerario-dgn .dgn-it.is-active .dgn-it-name {
  font-size: 14px;
  color: var(--gold, #d9a441);
}

#itinerario-dgn .dgn-it.is-active .dgn-it-detail {
  max-height: 240px;
}

/* ocultar la pista de scroll: el progreso lo indica la barra inferior */
#itinerario-dgn .dgn-hint {
  display: none;
}

/* ----- Jerarquía destacada: 1) título "Itinerario"  2) día  3) lugar  4) letras ----- */

/* 1 · Título "Itinerario" — el rótulo de sección, el más destacado arriba */
#itinerario-dgn .dgn-top .eyebrow {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  gap: 0;
}

#itinerario-dgn .dgn-top .eyebrow::before {
  display: none;
}

/* "Día N" — ahora es el texto GRANDE del día (tamaño/diseño del antiguo nombre);
   el nombre del lugar queda como kicker pequeño arriba. */
#itinerario-dgn .dgn-it-num {
  display: block;
  font-size: 21px;
  font-style: normal;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.45s, font-size 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

#itinerario-dgn .dgn-it.is-active .dgn-it-num {
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.02;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* el día dentro de la meta también destacado */
#itinerario-dgn .dgn-it-meta {
  font-size: 11px;
  color: var(--gold, #d9a441);
}

/* 4 · Las letras — la descripción, legible y con buen contraste */
#itinerario-dgn .dgn-it-detail p {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

/* barra de progreso del itinerario */
.dgn-progress {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
}

.dgn-progress-meta {
  position: absolute;
  right: var(--pad);
  bottom: 12px;
  display: flex;
  gap: 18px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.dgn-progress-meta b {
  color: #fff;
  font-weight: 500;
}

.dgn-progress-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.dgn-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--terracotta);
  transition: width 0.12s linear;
}

@media (max-width: 860px) {
  #itinerario-dgn .dgn-items {
    left: var(--pad);
    right: var(--pad);
    width: auto;
  }

  #itinerario-dgn .dgn-it.is-active .dgn-it-num {
    font-size: clamp(24px, 7.5vw, 40px);
  }

  #itinerario-dgn .dit-img {
    width: 62px;
    height: 42px;
  }

  #itinerario-dgn .dgn-it.is-active .dit-img {
    width: 92px;
    height: 62px;
  }

  .dgn-progress-meta {
    left: var(--pad);
    right: auto;
  }
}

/* ============================================
   CURSOR-FOLLOWER "Ver galería" (itinerario animado, estilo sen-knife)
   ============================================ */
.cursor-cta {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  pointer-events: none;
  will-change: transform;
}

.cursor-cta__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: translate(18px, -50%) scale(0.5);
  transform-origin: left center;
  opacity: 0;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--terracotta);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cursor-cta.is-visible .cursor-cta__pill {
  opacity: 1;
  transform: translate(18px, -50%) scale(1);
}

@media (hover: none) {
  .cursor-cta {
    display: none;
  }
}

/* ============================================
   GALERÍA POR DÍA — panel deslizante (transición horizontal)
   El panel ocupa toda la pantalla y entra desde la derecha; el itinerario
   (contenido actual) se desplaza a la izquierda. Dentro va la galería con
   zoom controlado por el scroll propio del panel.
   ============================================ */
.day-gallery {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0a0a0c;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.8s;
}

.day-gallery.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

/* El itinerario se desliza a la izquierda y se oscurece al abrir la galería. */
#itinerario-dgn .dgn-stage {
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), filter 0.8s ease;
}

body.dg-open #itinerario-dgn .dgn-stage {
  transform: translateX(-30%);
  filter: brightness(0.45);
}

/* Scroller interno: aquí vive el zoom (250vh) y manda el scroll del efecto. */
.dg-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* el suavizado de la rueda lo hace el JS (rAF + interpolación) */
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--terracotta) rgba(255, 255, 255, 0.1);
}

/* Barra de scroll a medida (WebKit) — fina, oscura, con pulgar terracota */
.dg-scroll::-webkit-scrollbar {
  width: 10px;
}

.dg-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
}

.dg-scroll::-webkit-scrollbar-thumb {
  background: var(--terracotta);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.dg-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--terracotta);
  border-width: 2px;
}

/* Botón "Volver", fijo arriba-izquierda del panel. */
.dg-close {
  position: absolute;
  top: clamp(16px, 3vh, 28px);
  left: clamp(16px, 3vw, 40px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  background: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, gap 0.3s;
}

.dg-close:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  gap: 13px;
}

/* Pista de scroll; se oculta en cuanto empieza el zoom. */
.dg-scrollhint {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.day-gallery:has(.zoom-parallax.is-locked) .dg-scrollhint {
  opacity: 0;
}

body.dg-lock {
  overflow: hidden;
}

@media (max-width: 860px) {
  body.dg-open #itinerario-dgn .dgn-stage {
    transform: translateX(-18%);
  }
}

/* Nombre de la categoría dentro del overlay del zoom */
.dg-cat-kicker {
  display: block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold, #d9a441);
}

.dg-cat-name {
  margin-top: 10px;
  color: #fff;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 1;
  text-align: center;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.5);
}

/* Detalle de la categoría — debajo de la galería, se revela al terminar el zoom */
.dg-detail {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(60px, 12vh, 140px) var(--pad);
  background: #0d0b09;
  color: #fff;
}

.dg-detail-inner {
  max-width: 760px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.dg-detail.is-revealed .dg-detail-inner {
  opacity: 1;
  transform: none;
}

.dg-detail-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold, #d9a441);
}

.dg-detail-title {
  margin-top: 16px;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
}

.dg-detail-text {
  margin-top: 24px;
  max-width: 56ch;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

.dg-detail-list {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  list-style: none;
  padding: 0;
}

.dg-detail-list li {
  position: relative;
  padding: 16px 0 16px 22px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.dg-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
}

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

/* ============================================
   ZOOM PARALLAX
   ============================================ */
.zoom-parallax {
  position: relative;
  height: 250vh;
}

.zoom-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.zoom-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  /* los wrappers ocupan todo el viewport: dejar pasar el mouse
     para que el hover caiga en la imagen correcta */
  pointer-events: none;
}

.zoom-img {
  position: absolute;
  overflow: hidden;
  border-radius: 3px;
  pointer-events: auto;
  transition: box-shadow 0.35s ease;
}

.zoom-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
}

/* Selección del target del zoom (solo mientras no está bloqueado) */
.zoom-parallax:not(.is-locked) .zoom-img {
  cursor: pointer;
}

.zoom-parallax:not(.is-locked) .zoom-img:hover img {
  filter: brightness(1.12);
}

.zoom-img.is-target {
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 8px rgba(0, 0, 0, 0.12);
}

.zoom-parallax.is-locked .zoom-img.is-target {
  box-shadow: none;
}

/* Cebiche · CENTER focal */
.zoom-item--0 .zoom-img {
  top: 37.5vh;
  left: 37.5vw;
  width: 25vw;
  height: 25vh;
  border-radius: 0;
}

/* img2 · Top-center */
.zoom-item--1 .zoom-img {
  top: 5vh;
  left: 37.5vw;
  width: 35vw;
  height: 30vh;
}

/* img1 · Left */
.zoom-item--2 .zoom-img {
  top: 17.5vh;
  left: 15vw;
  width: 20vw;
  height: 45vh;
}

/* img4 · Right */
.zoom-item--3 .zoom-img {
  top: 37.5vh;
  left: 65vw;
  width: 25vw;
  height: 25vh;
}

/* img3 · Bottom-center */
.zoom-item--4 .zoom-img {
  top: 65vh;
  left: 45vw;
  width: 20vw;
  height: 25vh;
}

/* img6 · Bottom-left */
.zoom-item--5 .zoom-img {
  top: 65vh;
  left: 12.5vw;
  width: 30vw;
  height: 25vh;
}

/* img7 · Bottom-right */
.zoom-item--6 .zoom-img {
  top: 65vh;
  left: 67.5vw;
  width: 15vw;
  height: 15vh;
}

.zoom-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  padding: 0 var(--pad);
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
}

/* Título por imagen — se revela al pasar el mouse, igual que el realce
   dorado del itinerario (solo mientras la galería se puede explorar) */
.zoom-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 36px 16px 14px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.zoom-cap-kicker {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.zoom-cap-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(15px, 1.3vw, 20px);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gold, #d9a441);
}

.zoom-cap-name::before {
  content: "";
  width: 20px;
  height: 1px;
  flex: none;
  background: var(--gold, #d9a441);
}

.zoom-parallax:not(.is-locked) .zoom-img:hover .zoom-cap {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   PARALLAX BLOCKS
   ============================================ */
.parallax-block {
  position: relative;
  height: 80vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.parallax-block .px-bg {
  position: absolute;
  inset: -15% 0 -15% 0;
  will-change: transform;
}

.parallax-block .px-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.parallax-block .px-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.parallax-block .px-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 0 var(--pad);
}

.parallax-block .px-content h2 {
  color: #fff;
  font-style: normal;
  font-size: clamp(40px, 6vw, 88px);
}

.parallax-block .px-content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  max-width: 52ch;
  margin: 24px auto 0;
}

/* ============================================
   FILOSOFÍA — GTA VI-style scroll transition
   ============================================ */
.gta {
  position: relative;
  height: 420vh;
  /* scroll length for the pinned transition */
  background: #0a0a0c;
  padding: 0;
  /* override global section padding (full bleed) */
}

.gta-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  color: #fff;
}

.gta-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* "fixed" anchors the photo to the VIEWPORT (not the section), like the
     maximusmaximise hero: the background is already in its final position as
     the section arrives, and the letters reveal it as windows without it
     sliding in with the scroll. */
  background: url('https://images.unsplash.com/photo-1531065208531-4036c0dba3ca?w=2400&q=80') center / cover no-repeat fixed;
}

/* Dark cover with a transparent icon-shaped window (hole) onto the banner.
   Two mask layers composited with "exclude": a full rectangle MINUS the icon
   leaves the cover opaque everywhere except the icon, which becomes a hole. */
.gta-cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #f9f5ee;
  /* The "window" is now a big uppercase word (FILOSOFÍA), rendered as SVG text.
     Used as a mask, the SVG's alpha channel makes the letters opaque; combined
     with the full-rect gradient via "exclude", the cover is solid everywhere
     except the letters, which become transparent holes onto the fixed photo. */
  --gta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 320'%3E%3Ctext x='550' y='160' text-anchor='middle' dominant-baseline='central' font-family='Arial Black, Arial, sans-serif' font-weight='900' font-size='300' textLength='1045' lengthAdjust='spacingAndGlyphs' fill='%23fff'%3EFILOSOF%C3%8DA%3C/text%3E%3C/svg%3E");
  -webkit-mask-image: var(--gta-icon), linear-gradient(#000, #000);
  mask-image: var(--gta-icon), linear-gradient(#000, #000);
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-size: min(99vw, 1540px), 100% 100%;
  mask-size: min(99vw, 1540px), 100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* The reveal grows the icon hole via mask-size (NOT transform): scaling a
     masked element corrupts the mask raster in Chromium, which broke reverse
     scroll. Only opacity is transformed here. */
  will-change: opacity;
}

/* Second screen: eyebrow + punchline + paragraph, revealed blur → focus */
.gta-final {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 var(--pad);
  will-change: transform, filter, opacity;
}

.gta-eyebrow {
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 24px;
}

.gta-line {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(48px, 8.5vw, 128px);
  line-height: 0.95;
  background: linear-gradient(100deg, var(--gold) 0%, var(--terracotta) 60%, var(--terracotta-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.gta-line em {
  font-style: normal;
}

.gta-para {
  margin: 30px auto 0;
  max-width: 58ch;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}

@media (max-width: 760px) {
  .gta-para {
    font-size: 15px;
  }
}

/* ============================================
   TOURS LIST
   ============================================ */
.tour-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-soft);
}

.tour-row {
  display: grid;
  grid-template-columns: 80px 1.5fr 1fr 1fr 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 32px 8px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: padding 0.3s, background 0.3s;
  position: relative;
}

.tour-row:hover {
  padding-left: 24px;
  background: var(--bg-soft);
}

.tour-row .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
}

.tour-row .name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 32px);
  font-style: normal;
}

.tour-row .meta-l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 6px;
}

.tour-row .meta-v {
  font-size: 15px;
}

.tour-row .preview {
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  width: 200px;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 2;
}

.tour-row:hover .preview {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.tour-row .preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour-row .arrow-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s;
}

.tour-row:hover .arrow-btn {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: rotate(-45deg);
}

/* ============================================
   EXPERIENCES GRID
   ============================================ */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.exp-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
}

.exp-card .img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.exp-card:hover .img {
  transform: scale(1.05);
}

.exp-card-cap {
  position: absolute;
  inset: auto 24px 24px 24px;
  color: #fff;
  z-index: 2;
}

.exp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7));
}

.exp-card-cap h3 {
  color: #fff;
  font-style: normal;
  font-size: 26px;
}

.exp-card-cap .tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 8px;
  display: block;
}

.exp-a {
  grid-column: span 7;
  aspect-ratio: 16/10;
}

.exp-b {
  grid-column: span 5;
  aspect-ratio: 4/5;
}

.exp-c {
  grid-column: span 4;
  aspect-ratio: 4/5;
}

.exp-d {
  grid-column: span 4;
  aspect-ratio: 4/5;
}

.exp-e {
  grid-column: span 4;
  aspect-ratio: 4/5;
}

.exp-f {
  grid-column: span 6;
  aspect-ratio: 16/9;
}

.exp-g {
  grid-column: span 6;
  aspect-ratio: 16/9;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testi {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.testi-media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius);
}

.testi-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testi-quote {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 46px);
  font-style: normal;
  line-height: 1.15;
  color: var(--bg);
  margin-bottom: 32px;
}

.testi-quote::before {
  content: "“";
  font-size: 1.5em;
  color: var(--terracotta);
  margin-right: 4px;
  line-height: 0;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.testi-author .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.testi-author .name {
  font-family: var(--serif);
  font-style: normal;
  font-size: 20px;
}

.testi-author .from {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.7 0.012 70);
  margin-top: 2px;
  display: block;
}

.testi-nav {
  display: flex;
  gap: 8px;
  margin-top: 32px;
}

.testi-dot {
  width: 32px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.testi-dot.active {
  background: var(--terracotta);
}

/* ============================================
   JOURNAL
   ============================================ */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Diario / blog preview cards — bordered card, category badge,
   excerpt and an animated "Leer más" arrow. */
.journal-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.journal-card:hover {
  box-shadow: 0 22px 60px -28px rgba(0, 0, 0, 0.30);
  transform: translateY(-2px);
}

.journal-card .img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.journal-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.journal-card:hover .img-wrap img {
  transform: scale(1.05);
}

.journal-card .cat {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 13px;
}

.journal-card .jc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}

.journal-card h3 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  text-wrap: balance;
  transition: color 0.25s;
}

.journal-card:hover h3 {
  color: var(--terracotta);
}

.journal-card .jc-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 24px;
}

.journal-card .jc-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.journal-card .jc-more {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.jc-arrow {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.journal-card:hover .jc-arrow {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.jc-arrow svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
}

.jc-arrow .a1 {
  transform: translate(-50%, -50%);
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.journal-card:hover .jc-arrow .a1 {
  transform: translate(110%, -50%);
  opacity: 0;
}

.jc-arrow .a2 {
  transform: translate(-170%, -50%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.journal-card:hover .jc-arrow .a2 {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.journal-card .date {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.journal-card .date::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--line);
}

/* "Ver el diario completo" link */
.journal-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: gap 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.journal-all:hover {
  gap: 16px;
  color: var(--terracotta);
  border-color: var(--terracotta);
}

/* ============================================
   CTA
   ============================================ */
.cta-final {
  position: relative;
  padding: 160px var(--pad);
  text-align: center;
  overflow: hidden;
}

.cta-final h2 {
  font-size: clamp(48px, 8vw, 140px);
  font-style: normal;
  letter-spacing: -0.03em;
}

.cta-final h2 .stroke {
  -webkit-text-stroke: 1px var(--ink);
  color: transparent;
  font-style: normal;
}

.cta-final p {
  max-width: 48ch;
  margin: 24px auto 40px;
  font-size: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 36px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: background 0.25s, transform 0.25s, color 0.25s;
}

.btn:hover {
  background: var(--terracotta);
  transform: translateY(-2px);
}

.btn .arrow {
  transition: transform 0.25s;
}

.btn:hover .arrow {
  transform: translateX(4px);
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

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

.btn.light {
  background: var(--bg);
  color: var(--ink);
}

.btn.light:hover {
  background: var(--terracotta);
  color: var(--bg);
}

/* ============================================
   BANNER PRINCIPAL + TREN — una sola sección
   ============================================ */
.train {
  position: relative;
  /* recorrido del scroll para la animación; menor = termina antes */
  height: 300vh;
  /* anula el padding global de section: el tren va a sangre (full screen) */
  padding: 0;
  background: #0f0d0a;
}

/* Banner de texto: aparece al hacer zoom hacia la ventana (a pantalla completa) */
.train-hero {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(40px, 8vh, 90px);
  z-index: 6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.5);
}

.train-hero-eyebrow {
  color: inherit;
  opacity: 0.82;
}

.train-hero .train-hero-name {
  margin: 0;
  color: inherit;
  font-size: clamp(40px, 6.4vw, 104px);
}

.train-hero .train-hero-name em {
  font-style: normal;
  color: #fff;
}

/* Título SEO centrado dentro de la ventana del tren (estado inicial del banner).
   Se desvanece al hacer zoom, igual que el selector y el título del destino. */
.train-window-intro {
  /* left / top / width / height los fija el JS (positionIntro) para que el
     bloque quede dentro del marco de la ventana, como el título del destino. */
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 1.4vw, 24px);
  text-align: left;
  pointer-events: none;
}

.train-window-h1 {
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
  color: #fff;
  font-size: clamp(32px, 5.2vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  /* Sombra suave para separar el texto de la imagen, sin delineado negro. */
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* Párrafo principal bajo el título del banner: Barlow 17px, peso 400,
   line-height 1.85 — en claro sobre la imagen, con sombra para legibilidad. */
.train-window-sub {
  margin: 0;
  max-width: 380px;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}


/* CTA del hero: "Ver paquetes de {destino}" (usa el efecto de .nav-cta, sin vibración) */
.train-hero-cta {
  margin-left: 0;
  pointer-events: auto;
  animation: none;
}

/* Tags apilados en columna, centrados verticalmente en la pantalla (derecha) */
.train-hero-tags {
  position: absolute;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(28px, 4vw, 72px);
  text-align: right;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Solo letras, sin caja ni fondo */
.train-hero-tag {
  font-family: var(--mono);
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.train-hero p {
  margin-top: 20px;
  max-width: 48ch;
  color: inherit;
  opacity: 0.86;
  font-size: clamp(15px, 1.3vw, 19px);
}

/* Lavado de color: la escena de la ventana se vuelve de un tono oscuro */
.train-wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #0f0d0a;
  opacity: 0;
  pointer-events: none;
}

/* Lavado final: el fondo se vuelve del color de la web. Va por DEBAJO de las
   imágenes (z3) para no cubrir la 2ª imagen; solo afecta al fondo. */
.train-wash-2 {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}

/* Tira central de imágenes verticales que suben de abajo hacia arriba.
   Por encima del lavado oscuro (2) pero por debajo del texto, así las
   imágenes no se tiñen del color del fondo. */
.train-pass {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(96vw, 1600px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 25vh;
  pointer-events: none;
  will-change: transform;
}

.train-pass-img {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

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

.train-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
}

/* La escena (destino) vive detrás del vidrio; dos capas para fundido */
.train-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.train-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.train-bg.is-active {
  opacity: 1;
}

/* La cabina (PNG con la ventana transparente) enmarca la escena */
.train-cabin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
}

.train-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(24px, 5vh, 56px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 var(--pad);
  text-align: center;
  color: #fff;
}

.train-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* Título del destino DENTRO de la ventana, esquina inferior izq. (ubicado por JS) */
.train-window-label {
  position: absolute;
  right: 18%;
  bottom: 30%;
  z-index: 5;
  max-width: min(40ch, 42%);
  color: #fff;
  text-align: right;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.twl-kicker {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.train-title {
  color: #fff;
  font-size: clamp(26px, 3.4vw, 52px);
  line-height: 1;
  text-align: right;
}

/* Tira inferior de destinos como miniaturas con imagen, centrada */
.train-dests {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(6px, 0.7vw, 12px);
  margin-top: 6px;
  max-width: 100%;
}

.train-dest {
  position: relative;
  flex: 0 0 auto;
  width: clamp(108px, 11vw, 150px);
  height: clamp(66px, 7vw, 96px);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  /* overflow visible: el nombre (tooltip) debe poder salir por arriba */
  overflow: visible;
}

/* La tarjeta visible: aquí va el recorte, el borde y la magnificación tipo
   dock (--mag lo controla el JS según la cercanía del cursor). */
.train-dest-media {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.3);
  transform-origin: center bottom;
  transform: scale(var(--mag, 1));
  will-change: transform;
  transition: border-color 0.3s, transform 0.18s ease-out, box-shadow 0.3s, filter 0.3s ease;
}

/* Spotlight: al pasar el mouse por la tira, solo la imagen bajo el cursor queda
   iluminada; las demás reciben un filtro oscuro. */
.train-dests:hover .train-dest-media {
  filter: brightness(0.42);
}

.train-dests .train-dest:hover .train-dest-media {
  filter: brightness(1);
}

.train-dest-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transition: opacity 0.4s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.train-dest-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 55%);
}

/* Nombre del destino dentro de la foto (siempre visible) */
.train-dest-name {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 7px;
  z-index: 2;
  text-align: left;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.train-dest:hover .train-dest-media {
  border-color: rgba(255, 255, 255, 0.7);
}

.train-dest:hover .train-dest-img {
  opacity: 0.95;
  transform: scale(1.06);
}

.train-dest.is-active .train-dest-media {
  border-color: var(--terracotta);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.train-dest.is-active .train-dest-img {
  opacity: 1;
}

@media (max-width: 600px) {
  .train-dests {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   PAQUETES TURÍSTICOS — estilo "Latest Campaigns"
   (maximusmaximise.com) · grandes y llamativos
   ============================================ */
.pkgs {
  /* el espacio lateral es exactamente el doble del gap entre tarjetas */
  --pkg-gap: clamp(12px, 1.2vw, 18px);
  /* título pegado al techo de la sección (casi sin aire arriba) */
  padding: clamp(4px, 0.6vw, 10px) calc(var(--pkg-gap) * 2) clamp(72px, 9vw, 150px);
  position: relative;
}

/* Solo en el Home: arranca oscuro (igual que el banner del tren) y vira a
   crema en la transición. En otras páginas (p. ej. "Otros itinerarios")
   conserva el color de la web. */
#pkgs {
  background: #0f0d0a;
}

/* Capa de fondo crema: empieza invisible y entra junto a la transición */
.pkgs-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}

/* dentro de paquetes el contenedor ocupa todo el ancho disponible */
.pkgs .container {
  position: relative;
  z-index: 1;
  max-width: none;
}

.pkgs-hd {
  margin-bottom: clamp(32px, 4vw, 60px);
}

.pkgs-title {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.94;
  font-size: clamp(40px, 7vw, 104px);
  color: var(--ink);
}

.pkgs-title em {
  font-style: normal;
  color: var(--terracotta);
}

/* En el Home: el título de paquetes arranca invisible y aparece en negro
   (color --ink-deep) cuando la 2ª imagen sale por el menú (controlado por JS). */
#pkgs .pkgs-title,
#pkgs .pkgs-title em {
  color: var(--ink-deep);
}

#pkgs .pkgs-title {
  opacity: 0;
}

/* Grid de 3 — imágenes completas (full-bleed) como maximusmaximise */
.pkgs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pkg-gap);
}

.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 7 / 8;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-deep);
  color: #fff;
  isolation: isolate;
}

/* La imagen ocupa toda la tarjeta */
.pkg-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.pkg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Degradado permanente para que el texto blanco se lea encima */
.pkg-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 32%, rgba(0, 0, 0, 0) 62%);
  transition: opacity 0.5s;
}

.pkg:hover .pkg-media img {
  transform: scale(1.06);
}

/* Texto sobre la imagen */
.pkg-info {
  position: relative;
  z-index: 2;
  padding: 0 clamp(16px, 1.4vw, 22px) clamp(12px, 1vw, 16px);
}

.pkg-name {
  font-family: var(--sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.95;
  font-size: clamp(22px, 2vw, 30px);
  color: #fff;
}

.pkg-loc {
  margin-top: 6px;
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: clamp(12px, 0.95vw, 15px);
  line-height: 1.1;
  color: #fff;
}

/* Barra "Ver" a TODO el ancho de la tarjeta; se engrosa en hover */
.pkg-view {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: clamp(11px, 1vw, 15px) clamp(14px, 1.2vw, 20px);
  font-family: var(--sans);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(15px, 1.15vw, 19px);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

/* Subrayado inferior a todo el ancho — mismo efecto que "Ver todos los
   paquetes", solo abajo y el doble de grueso (6px vs 3px) */
.pkg-view::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 12px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.pkg:hover .pkg-view::after {
  transform: scaleX(1);
}

/* Solo las LETRAS de "Ver": el color recorre los glifos de izquierda a
   derecha (efecto de "recorrido"), sin caja ni fondo — recortado al texto */
.pkg-view>span {
  background-image: linear-gradient(to right, var(--terracotta) 50%, #fff 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.pkg:hover .pkg-view>span {
  background-position: 0 0;
}

.pkg-view svg {
  width: 0.72em;
  height: 0.86em;
  fill: var(--terracotta);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pkg:hover .pkg-view svg {
  transform: translateX(5px);
}

/* Botón inferior — "View all Campaigns" */
/* ============================================
   PAQUETES (Home) — título en fila + mosaico de 4
   columnas (bento) con scroll horizontal y cortina
   de 2ª imagen al hover
   ============================================ */

/* Medidas compartidas del mosaico: ancho de unidad de columna, idéntico al
   ancho de tarjeta que tenía la grilla original de 3 full-bleed. */
#pkgs {
  --pkg-bp: clamp(12px, 1.5vw, 24px); /* padding lateral heredado de .bleed */
  --pkg-w: calc((100vw - 2 * var(--pkg-bp) - 2 * var(--pkg-gap)) / 3);
}

/* "Paquetes" en fila, horizontal, pegado al techo de la sección (sin
   margen superior) */
#pkgs .pkgs-title {
  writing-mode: horizontal-tb;
  transform: none;
  font-family: var(--sans);
  font-weight: 800;
  /* 50% más grande que antes (34→51, 4→6vw, 64→96) */
  font-size: clamp(51px, 6vw, 96px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 clamp(20px, 2.5vw, 32px);
}

/* Mosaico bento: 3 tarjetas por fila, una grande + dos pequeñas (alternando
   el lado de la grande). Se usa una rejilla fina de 11 pistas iguales: la
   tarjeta grande abarca 5 pistas y cada pequeña 3 (5 + 3 + 3 = 11). Así la
   grande queda un poco más angosta que 2 pequeñas y estas ganan ancho, sin
   cambiar el hueco entre tarjetas (una sola pista-hueco entre cada par).
   Todo cabe en el ancho de la pantalla (sin scroll ni arrastre). */
#pkgs .pkgs-grid {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: var(--pkg-gap);
  padding-left: var(--pkg-bp);
  padding-right: var(--pkg-bp);
}

/* Todas las tarjetas con la MISMA altura: media pantalla + un cuarto de lo
   que sobra (50vh + 12.5vh). La altura manda, no la proporción 7/8. */
#pkgs .pkg {
  grid-column: span 3; /* tarjetas de 1 campo (las pequeñas) */
  height: 62.5vh;
  aspect-ratio: auto;
  border-radius: 5px;
}

/* Tarjeta grande de cada fila: fila 1 (1ª), fila 2 (última), fila 3 (1ª) */
#pkgs .pkg:nth-child(1),
#pkgs .pkg:nth-child(6),
#pkgs .pkg:nth-child(7) {
  grid-column: span 5;
}

/* Sin zoom de la imagen al pasar el cursor (solo en el Home) */
#pkgs .pkg:hover .pkg-media img {
  transform: none;
}

/* Paquetes del destino (DestinoDetalle §1): tarjetas del MISMO tamaño que las
   del Home (3 por fila, alto 62.5vh, radio 5px), sin el bento grande+pequeña. */
.dst-pkgs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dst-pkgs .pkg {
  height: 62.5vh;
  aspect-ratio: auto;
  border-radius: 5px;
}
.dst-pkgs .pkg:hover .pkg-media img {
  transform: none;
}
@media (max-width: 1000px) {
  .dst-pkgs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .dst-pkgs {
    grid-template-columns: 1fr;
  }
  .dst-pkgs .pkg {
    height: 56vh;
    aspect-ratio: auto;
  }
}

/* Info de la tarjeta (abajo-izquierda): nombre arriba y, debajo, una fila
   con dos celdas — días (nº + "DÍAS") y lugares incluidos separados por comas.
   Ambas celdas llevan borde superior y un borde que las separa (derecho de la
   1ª, izquierdo de la 2ª). */
#pkgs .pkg-meta {
  display: flex;
  align-items: stretch;
  gap: 0; /* los bordes central (derecho del 2º / izquierdo del 3º) se tocan */
  margin-top: clamp(10px, 0.9vw, 14px);
}

#pkgs .pkg-days,
#pkgs .pkg-places {
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  padding-top: clamp(7px, 0.7vw, 10px);
}

#pkgs .pkg-days {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.45);
  padding-right: clamp(12px, 1vw, 18px);
}

#pkgs .pkg-days-n {
  font-family: var(--sans);
  font-weight: 900;
  line-height: 1;
  font-size: clamp(22px, 1.8vw, 30px);
  color: #fff;
}

#pkgs .pkg-days-l {
  margin-top: 3px;
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(10px, 0.75vw, 12px);
  color: #fff;
}

#pkgs .pkg-places {
  border-left: 1px solid rgba(255, 255, 255, 0.45);
  padding-left: clamp(12px, 1vw, 18px);
  display: flex;
  align-items: center;
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.25;
  font-size: clamp(11px, 0.9vw, 14px);
  color: #fff;
}

/* Cortina: la 2ª imagen sube desde abajo al entrar el cursor y baja al salir;
   en ambos sentidos arranca rápido y frena al final (expo-out). */
.pkg-alt {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.pkg:hover .pkg-alt,
.pkg:focus-visible .pkg-alt {
  clip-path: inset(0 0 0 0);
}

.pkg-alt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Velo superior para que las etiquetas se lean sobre la foto */
.pkg-alt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.12) 26%, rgba(0, 0, 0, 0) 48%);
}

/* Etiquetas (lugar, clima, altitud…) arriba de la 2ª imagen */
.pkg-tags {
  position: absolute;
  z-index: 1;
  top: clamp(12px, 1.2vw, 18px);
  left: clamp(12px, 1.2vw, 18px);
  right: clamp(12px, 1.2vw, 18px);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.pkg:hover .pkg-tags,
.pkg:focus-visible .pkg-tags {
  opacity: 1;
  transform: none;
  transition-delay: 0.16s;
}

.pkg-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(20, 16, 12, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* El primer tag es el destino activo: pin + relleno sólido para destacarlo */
.pkg-tag-dest {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
  color: var(--ink-deep);
}

.pkg-tag-dest svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* ============================================
   PAQUETES · variante CARRIL ARRASTRABLE (.pkgs-car)
   Copia fiel del carril del index: título vertical en el hueco
   izquierdo + fila full-bleed que se arrastra + barra de progreso.
   Se usa en "Otros itinerarios" de /tour-detalle sin tocar el #pkgs
   del Home (mismas clases, distinto scope).
   ============================================ */
.pkgs-car {
  /* full-bleed: sin padding lateral para que el cálculo de 100vw cuadre */
  padding: clamp(40px, 6vw, 90px) 0 clamp(64px, 8vw, 130px);
  --pkg-bp: clamp(12px, 1.5vw, 24px);
  --pkg-w: calc((100vw - 2 * var(--pkg-bp) - 2 * var(--pkg-gap)) / 3);
  --pkgs-side-w: calc(100vw - 2.5 * var(--pkg-w) - 2 * var(--pkg-gap));
}
.pkgs-car .pkgs-stage { position: relative; }

/* Rótulo vertical en el hueco izquierdo; se traslada con el scroll vía JS */
.pkgs-car .pkgs-side {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: var(--pkgs-side-w);
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}
.pkgs-car .pkgs-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
  max-height: 100%;
  color: var(--ink);
  opacity: 1;
}

/* Carril arrastrable a todo el ancho */
.pkgs-car .pkgs-grid {
  display: flex;
  grid-template-columns: none;
  gap: var(--pkg-gap);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  z-index: 1;
  padding-left: var(--pkgs-side-w);
}
.pkgs-car .pkgs-grid::-webkit-scrollbar { display: none; }
.pkgs-car .pkgs-grid.is-drag { cursor: grabbing; }
.pkgs-car .pkg {
  flex: none;
  width: var(--pkg-w);
}
.pkgs-car .pkg:hover .pkg-media img { transform: none; }

/* Tarjeta final: enlace a todos los paquetes */
.pkg-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 28px);
  background: var(--bg-deep);
  text-align: center;
  transition: background 0.45s ease;
}
.pkg-cta .pkg-cta-text {
  font-family: var(--sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(20px, 1.9vw, 30px);
  color: #fff;
}
.pkg-cta-circle {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  transition: background 0.35s, border-color 0.35s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pkg-cta-circle svg { width: 20px; height: 20px; }
.pkg-cta:hover { background: var(--terracotta-deep); }
.pkg-cta:hover .pkg-cta-circle {
  background: #fff;
  border-color: #fff;
  color: var(--ink-deep);
  transform: translateX(6px);
}

/* Barra de progreso/controlador bajo las tarjetas */
.pkgs-scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(14px, 1.8vw, 24px);
}
.pkgs-scrollbar {
  position: relative;
  width: calc(var(--pkg-w) / 2);
  height: 22px;
  cursor: pointer;
  touch-action: none;
}
.pkgs-scrollbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--line-soft);
}
.pkgs-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  width: 40%;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--ink);
  cursor: grab;
  transition: height 0.2s, background 0.2s;
}
.pkgs-scrollbar:hover .pkgs-thumb,
.pkgs-thumb.is-drag { height: 8px; background: var(--terracotta); }
.pkgs-thumb.is-drag { cursor: grabbing; }

@media (max-width: 860px) {
  /* En móvil el carril usa media tarjeta más ancha para que se lea */
  .pkgs-car { --pkg-w: 78vw; }
}

@media (max-width: 860px) {
  /* En pantallas estrechas el mosaico se simplifica a 2 columnas iguales
     (sin tarjetas grandes) para que todo siga cabiendo sin scroll. */
  #pkgs .pkgs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #pkgs .pkg,
  #pkgs .pkg:nth-child(1),
  #pkgs .pkg:nth-child(6),
  #pkgs .pkg:nth-child(7) {
    grid-column: auto;
    height: 46vh;
  }
}

@media (max-width: 520px) {
  #pkgs .pkgs-grid {
    grid-template-columns: 1fr;
  }
}

.pkgs-foot {
  margin-top: clamp(40px, 5vw, 80px);
  display: flex;
  justify-content: center;
}

.pkgs-all {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(28px, 4vw, 60px);
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.3s;
}

.pkgs-all svg {
  width: 0.62em;
  height: 0.62em;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pkgs-all:hover {
  color: var(--terracotta);
}

.pkgs-all:hover svg {
  transform: translateX(10px);
}

/* Mismo efecto de pintado que las "Ver" de las tarjetas: el color recorre
   las letras de izquierda a derecha (solo el texto, no la flecha) */
.pkgs-all>span {
  background-image: linear-gradient(to right, var(--terracotta) 50%, var(--ink) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pkgs-all:hover>span {
  background-position: 0 0;
}

/* Botón "Ver más paquetes": mismo efecto de hover que .nav-menu-toggle
   (círculo oscuro que barre desde la izquierda y rellena), pero sin blur —
   solo letra con un borde fino y esquinas de 5px. */
.pkgs-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: 5px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
  cursor: pointer;
  background: none;
  transition: border-color 0.5s, color 0.4s;
}

.pkgs-more::before {
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  background: var(--ink);
  border-radius: 50%;
  top: 50%;
  left: 0;
  transform: translateX(-100%) translateY(-50%);
  transition: transform 0.7s ease;
}

.pkgs-more:hover {
  border-color: var(--ink);
  color: var(--bg);
}

.pkgs-more:hover::before {
  transform: translateX(0) translateY(-50%) scale(2);
}

.pkgs-more>span {
  position: relative;
  z-index: 1;
}

@media (max-width: 1000px) {
  .pkgs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .pkg {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  background: var(--bg-deep);
  color: var(--bg);
  padding: 100px var(--pad) 40px;
}

.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.foot-brand .name {
  font-family: var(--serif);
  font-size: 40px;
  font-style: normal;
  margin-bottom: 16px;
}

.foot-brand p {
  font-size: 14px;
  max-width: 36ch;
  color: oklch(0.78 0.012 70);
  margin-bottom: 24px;
}

.foot-col h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0.7;
  font-weight: 400;
}

.foot-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot-col a {
  font-size: 14px;
  opacity: 0.85;
  transition: opacity 0.25s, color 0.25s;
}

.foot-col a:hover {
  color: var(--terracotta);
  opacity: 1;
}

.foot-bottom {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ============================================
   PAGE HERO (subpages)
   ============================================ */
.page-hero {
  height: 70vh;
  min-height: 540px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: end;
  color: #fff;
  padding: 0 var(--pad) 64px;
}

.page-hero .bg {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
}

.page-hero .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero .bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.page-hero h1 {
  color: #fff;
  font-size: clamp(48px, 7vw, 116px);
  font-style: normal;
}

.page-hero .breadcrumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
}

/* ============================================
   FILTERS / CHIPS
   ============================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 48px;
  align-items: center;
}

.filter-bar .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 16px;
}

.chip {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  color: var(--ink-soft);
}

.chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ============================================
   ITINERARY (tour detail)
   ============================================ */
.tour-detail-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
}

.tour-sidebar {
  position: sticky;
  top: 100px;
  padding: 32px;
  background: var(--bg-soft);
  border-radius: var(--radius);
}

.tour-sidebar .price {
  font-family: var(--serif);
  font-size: 56px;
  font-style: normal;
  color: var(--terracotta);
  line-height: 1;
}

.tour-sidebar .price-l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 8px;
}

.tour-quick {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 14px;
}

.tour-quick li {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  list-style: none;
}

.tour-quick li span:first-child {
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.itinerary {
  display: flex;
  flex-direction: column;
}

/* ============================================
   SISTEMA CINEMÁTICO — lenguaje compartido de
   todas las páginas: heros a pantalla completa,
   bandas full-bleed, reveals por líneas (GSAP),
   cortinas de imagen y marquesinas.
   ============================================ */

/* ---- Hero de página: pantalla completa, imagen protagonista ---- */
.page-hero {
  height: 100svh;
  min-height: 640px;
  padding: 0 var(--pad) clamp(48px, 7vh, 88px);
}

.page-hero .bg {
  inset: 0;
  overflow: hidden;
}

.page-hero .bg img {
  transform-origin: 50% 50%;
  will-change: transform;
}

.page-hero .bg::after {
  background:
    linear-gradient(180deg, rgba(10, 7, 5, 0.42) 0%, rgba(10, 7, 5, 0.08) 34%, rgba(10, 7, 5, 0.14) 60%, rgba(12, 8, 5, 0.66) 100%);
}

.page-hero-content {
  max-width: none;
  width: 100%;
}

.page-hero h1 {
  font-size: clamp(42px, 7.2vw, 128px);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 14ch;
}

.page-hero .hero-sub {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.7;
  max-width: 52ch;
  margin-top: 28px;
}

/* Pie del hero: hint de scroll + índice, estilo mono */
.hero-foot {
  position: absolute;
  z-index: 2;
  right: var(--pad);
  bottom: clamp(48px, 7vh, 88px);
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero-foot .hf-line {
  width: 1px;
  height: 56px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
  position: relative;
}

.hero-foot .hf-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateY(-100%);
  animation: hf-drop 2.2s cubic-bezier(0.7, 0, 0.2, 1) infinite;
}

@keyframes hf-drop {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@media (max-width: 720px) {
  .hero-foot { display: none; }
  .page-hero { min-height: 560px; }
}

/* ---- Reveal por líneas (GSAP SplitText) ----
   El JS separa el texto en líneas enmascaradas y las sube en cascada.
   Oculto hasta que el split está listo para evitar el destello. */
[data-split] {
  opacity: 0;
}

[data-split].split-in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-split] { opacity: 1 !important; }
}

/* ---- Full-bleed: saca un bloque del .container hasta los bordes ---- */
.bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding-left: clamp(12px, 1.5vw, 24px);
  padding-right: clamp(12px, 1.5vw, 24px);
}

.bleed.flush {
  padding-left: 0;
  padding-right: 0;
}

/* ---- Banda de imagen a pantalla completa (parallax-block XL) ---- */
.parallax-block {
  height: 100svh;
  min-height: 640px;
}

.parallax-block .px-content h2 {
  font-size: clamp(36px, 6vw, 96px);
  line-height: 1.02;
}

/* ---- Cortina de imagen: el JS revela con clip-path + zoom ---- */
[data-curtain] {
  overflow: hidden;
  display: block;
}

[data-curtain] img {
  will-change: transform;
}

/* ---- Marquesina: título gigante en movimiento ---- */
.marquee {
  overflow: hidden;
  padding: clamp(40px, 8vh, 96px) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

.marquee.dark-band {
  background: var(--bg-deep);
  border-color: transparent;
}

.marquee-track {
  display: inline-flex;
  align-items: baseline;
  gap: 64px;
  will-change: transform;
}

.marquee-track span {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(56px, 9vw, 150px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.marquee.dark-band .marquee-track span {
  color: var(--bg);
}

.marquee-track span.hollow {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-mute);
}

.marquee.dark-band .marquee-track span.hollow {
  -webkit-text-stroke: 1px oklch(0.6 0.012 70);
}

/* ---- Sección de listas con imagen protagonista (Experiencias / Destino) ---- */
.media-rows {
  display: block;
}

.media-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding: clamp(32px, 5vh, 64px) clamp(12px, 1.5vw, 24px);
  border-bottom: 1px solid var(--line-soft);
}

.media-row:first-child {
  border-top: 1px solid var(--line-soft);
}

.media-row:nth-child(even) {
  grid-template-columns: 0.85fr 1.15fr;
}

.media-row:nth-child(even) .mr-media {
  order: 2;
}

.media-row .mr-media {
  height: min(78vh, 720px);
  overflow: hidden;
  border-radius: var(--radius);
}

.media-row .mr-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.media-row:hover .mr-media img {
  transform: scale(1.04);
}

.media-row .mr-body {
  max-width: 620px;
}

.media-row .mr-body .tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 16px;
  display: block;
}

.media-row .mr-body h3 {
  font-size: clamp(30px, 3.6vw, 56px);
  font-style: normal;
  line-height: 1.05;
  margin-bottom: 20px;
}

.media-row .mr-body > p {
  font-size: 16px;
  max-width: 52ch;
}

.media-row .mr-meta {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

.media-row .mr-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
}

.media-row .mr-meta-row span:first-child {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.media-row .mr-meta-row span:last-child {
  font-family: var(--serif);
  font-style: normal;
  font-size: 16px;
}

@media (max-width: 960px) {
  .media-row,
  .media-row:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .media-row:nth-child(even) .mr-media {
    order: 0;
  }

  .media-row .mr-media {
    height: 60vh;
  }
}

.itin-day {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  padding: 40px 0;
  border-top: 1px solid var(--line-soft);
  position: relative;
}

.itin-day .day-n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  padding-top: 8px;
}

.itin-day h3 {
  font-style: normal;
  margin-bottom: 12px;
}

.itin-day .meta-row {
  display: flex;
  gap: 24px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.itin-day .img {
  margin-top: 20px;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius);
}

.itin-day .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   FORM
   ============================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-row.full {
  grid-column: span 2;
}

.form-row label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.form-row input,
.form-row textarea,
.form-row select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-family: var(--serif);
  font-size: 20px;
  font-style: normal;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  border-color: var(--terracotta);
}

.form-row textarea {
  resize: vertical;
  min-height: 120px;
}

/* ============================================
   UTILITIES
   ============================================ */
.divider {
  height: 1px;
  background: var(--line-soft);
  margin: 80px auto;
  max-width: var(--maxw);
}

.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .hero-search {
    grid-template-columns: 1.4fr 1fr 1fr auto;
  }

  .hero-search>*:nth-child(4) {
    display: none;
  }

  .exp-a {
    grid-column: span 12;
  }

  .exp-b {
    grid-column: span 6;
    aspect-ratio: 4/3;
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 960px) {
  :root {
    --pad: clamp(16px, 5vw, 32px);
  }

  section {
    padding: 80px var(--pad);
  }

  section.tight {
    padding: 56px var(--pad);
  }

  /* Nav reducido en móvil: se oculta el CTA, queda el logo y el botón "Menú" */
  .nav {
    padding: 14px var(--pad);
  }

  .nav-cta {
    display: none;
  }

  /* Hero */
  .hero-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-meta {
    text-align: left;
  }

  .hero-search {
    grid-template-columns: 1fr 1fr;
    transform: translateY(0);
    position: static;
    box-shadow: none;
  }

  .hero-search>* {
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }

  .hero-search>*:nth-child(2n) {
    border-right: none;
  }

  /* Section headers */
  .section-hd {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }

  /* Shared two-column layouts */
  .intro-grid,
  .testi,
  .split-2,
  .tour-detail-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .intro-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .journal-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Experiences mosaic */
  .exp-a,
  .exp-b,
  .exp-c,
  .exp-d,
  .exp-e,
  .exp-f,
  .exp-g {
    grid-column: span 12;
    aspect-ratio: 4/3;
  }

  /* Experiences list page */
  .exp-list-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Tours list */
  .tour-row {
    grid-template-columns: 50px 1fr auto;
    gap: 12px;
  }

  .tour-row .meta-l,
  .tour-row .meta-v {
    display: none;
  }

  .tour-row .preview {
    display: none;
  }

  /* Tour detail */
  .tour-summary {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .gallery .g1,
  .gallery .g2,
  .gallery .g3,
  .gallery .g4,
  .gallery .g5 {
    grid-column: span 12;
    aspect-ratio: 4/3;
  }

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

  .itin-day {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tour-sidebar {
    position: static;
  }

  /* Nosotros */
  .manifest-item {
    grid-column: span 12;
  }

  .team-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .timeline-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .press-row {
    gap: 24px;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-side {
    position: static;
  }

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

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

  .form-row.full {
    grid-column: span 1;
  }

  .map-strip {
    height: 360px;
    min-height: 0;
  }

  /* Destinos page */
  .span4,
  .span6,
  .span8 {
    grid-column: span 12;
    aspect-ratio: 4/3;
  }

  .map-block {
    grid-column: span 12;
  }

  /* Parallax blocks */
  .parallax-block {
    height: 70vh;
    min-height: 480px;
  }

  /* Filter bar → horizontal scroll */
  .filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  .filter-bar .chip,
  .filter-bar .label {
    flex-shrink: 0;
  }

  /* Footer */
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .foot-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* CTA final */
  .cta-final h2 {
    font-size: clamp(36px, 10vw, 80px);
  }

  /* Page hero */
  .page-hero {
    height: auto;
    min-height: 0;
    padding: 140px var(--pad) 56px;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: clamp(40px, 11vw, 64px);
  }

  h2 {
    font-size: clamp(30px, 8vw, 44px);
  }

  .btn {
    padding: 14px 24px;
    font-size: 13px;
  }

  .hero-search {
    grid-template-columns: 1fr;
  }

  .hero-search>* {
    border-right: none;
  }

  .intro-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .stat .n {
    font-size: 36px;
  }

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

  .tour-summary {
    grid-template-columns: 1fr 1fr;
  }

  /* Zoom parallax */
  .zoom-item--0 .zoom-img {
    width: 50vw;
    height: 35vh;
    top: 32.5vh;
    left: 25vw;
  }

  .zoom-item--1 .zoom-img {
    width: 55vw;
    height: 25vh;
    top: 5vh;
    left: 30vw;
  }

  .zoom-item--2 .zoom-img {
    width: 30vw;
    height: 35vh;
    top: 15vh;
    left: 5vw;
  }

  .zoom-item--3 .zoom-img {
    width: 35vw;
    height: 20vh;
    top: 40vh;
    left: 60vw;
  }

  .zoom-item--4 .zoom-img {
    width: 35vw;
    height: 20vh;
    top: 70vh;
    left: 40vw;
  }

  .zoom-item--5 .zoom-img {
    width: 45vw;
    height: 20vh;
    top: 72vh;
    left: 3vw;
  }

  .zoom-item--6 .zoom-img {
    width: 20vw;
    height: 15vh;
    top: 70vh;
    left: 78vw;
  }
}

/* ============================================
   INTRO — Ventana de cabina (estilo jeskojets)
   ============================================ */
.jet {
  position: relative;
  height: 340vh;
  /* scroll length del zoom a través de la ventana */
  background: #0f0d0a;
  padding: 0;
  /* anula el padding global de section (full bleed) */
}

.jet-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  color: #fff;
}

/* Escena tras el vidrio: contiene el hero completo */
.jet-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

/* Cabina con el vidrio recortado (PNG con alpha). El zoom es un
   transform scale con origen en el centro del vidrio (lo fija JS). */
.jet-cabin {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  will-change: transform, opacity;
}

.jet-hint {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.jet-hint::after {
  content: "";
  width: 1px;
  height: 44px;
  background: linear-gradient(rgba(255, 255, 255, 0.7), transparent);
  animation: jet-drop 1.9s ease-in-out infinite;
}

@keyframes jet-drop {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* ============================================
   PAGE TRANSITION
   ============================================ */

/* House of Honey transition via the native cross-document View Transitions API
   (needs an http(s) origin — i.e. served from a local server, not file://).
   The browser snapshots both pages and animates between them in a single
   render — no iframe, no second scrollbar, nothing readjusts:
     · the page we leave stays on screen, zooming back + darkening;
     · the chosen page rises up over it.
   On file:// it simply does an instant navigation (graceful fallback). */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {

  /* Outgoing page: stays put, zooms back into the distance and darkens. */
  ::view-transition-old(root) {
    animation: pt-old .85s cubic-bezier(.76, 0, .24, 1) both;
    transform-origin: 50% 45%;
    z-index: 0;
  }

  /* Incoming page: rises up from the bottom, over the receding backdrop. */
  ::view-transition-new(root) {
    animation: pt-new .85s cubic-bezier(.76, 0, .24, 1) both;
    z-index: 1;
  }
}

@keyframes pt-old {
  from {
    transform: scale(1);
    filter: brightness(1);
  }

  to {
    transform: scale(.9);
    filter: brightness(.5);
  }

  /* recede + darken, never black */
}

@keyframes pt-new {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* `pt-instant` (every load) stops the nav from tweening white→transparent on
   the first painted frame. */
html.pt-instant .nav,
html.pt-instant .nav * {
  transition: none !important;
}