/* ───────── Aura Travel · tokens ───────── */
:root {
  --laton: #D9A441;
  --laton-claro: #F3D27C;
  --turquesa: #35C6C0;
  --hueso: #F6EFE3;
  --hueso-suave: rgba(246, 239, 227, 0.74);
  --tinta: #0F2730;
  --tinta-2: #163640;
  --papel: #E8F0ED;
  --papel-linea: #C7D7D2;
  --blanco: #FBFDFC;
  --texto-suave: #4A6169;
  --whatsapp: #25D366;
  --tinta-2: #163640;
  --papel: #E8F0ED;
  --papel-linea: #C7D7D2;
  --blanco: #FBFDFC;
  --texto-suave: #4A6169;
  --whatsapp: #25D366;

  --f-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-texto: 'Familjen Grotesk', system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --barra: 64px;
  --radio-boton: 999px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: #084B66;
  color: var(--hueso);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; }

:focus-visible {
  outline: 2px solid var(--laton-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saltar {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: var(--hueso); color: var(--tinta);
  transform: translateY(-160%);
}
.saltar:focus { transform: none; }

/* ───────── Cabecera ───────── */
.cabecera {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 30;
  pointer-events: none;
}

.cabecera__barra {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--barra);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  pointer-events: auto;
  z-index: 2;
}

/* Velo que aparece cuando ya bajaste del primer cuadro */
.cabecera__barra::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: rgba(15, 39, 48, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0;
  transition: opacity .35s ease;
}
.desplazado .cabecera__barra::before { opacity: 1; }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.marca__emblema { width: 40px; height: 40px; flex: none; }
.marca__nombre {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.marca__nombre span { color: var(--laton-claro); font-weight: 500; }

.menu ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: clamp(16px, 2.2vw, 34px);
}
.menu a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--hueso-suave);
  padding: 8px 0;
  background: linear-gradient(var(--laton), var(--laton)) left 100% / 0 1.5px no-repeat;
  transition: color .2s ease, background-size .3s ease;
}
.menu a:hover { color: var(--hueso); background-size: 100% 1.5px; }

.menu-boton {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid rgba(246, 239, 227, 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--hueso);
  place-items: center;
  cursor: pointer;
}
.menu-boton__icono,
.menu-boton__icono::before {
  display: block;
  width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform .3s ease;
}
.menu-boton__icono { position: relative; transform: translateY(-3px); }
.menu-boton__icono::before { content: ''; position: absolute; top: 6px; }
.menu-abierto .menu-boton__icono { transform: translateY(0) rotate(45deg); }
.menu-abierto .menu-boton__icono::before { transform: translateY(-6px) rotate(-90deg); }

.lema {
  position: absolute;
  top: calc(var(--barra) + 10px);
  left: var(--gutter);
  margin: 0;
  max-width: 30ch;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.15;
  color: var(--hueso);
  text-wrap: balance;
}

@media (max-width: 899px) {
  .menu-boton { display: grid; }
  .menu {
    position: fixed;
    inset: var(--barra) 0 auto 0;
    padding: 8px var(--gutter) 24px;
    background: var(--tinta);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .menu-abierto .menu {
    opacity: 1; transform: none; visibility: visible;
    transition: opacity .25s ease, transform .25s ease;
  }
  .menu ul { flex-direction: column; gap: 0; }
  .menu a {
    display: block;
    padding: 14px 0;
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--hueso);
    border-bottom: 1px solid rgba(246, 239, 227, 0.12);
    background: none;
  }
  .lema { max-width: 24ch; font-size: 1.05rem; top: calc(var(--barra) + 2px); }
}

/* ───────── Botones ───────── */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radio-boton);
  background: var(--laton);
  color: #2A1A05;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: background-color .2s ease;
}
.boton:hover { background: var(--laton-claro); }
.boton svg { width: 18px; height: 18px; flex: none; }

/* ───────── Escena estrella ───────── */
.escena {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}

.escena__fondos,
.escena__fondos > div,
.escena__particulas,
.escena__lienzo { position: absolute; inset: 0; }

.escena__fondos > div { opacity: 0; background: var(--color); }
.escena__fondos > div:first-child { opacity: 1; }
/* Luz de estudio fija detrás de la maleta */
.escena__fondos::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 46% 42% at 50% 52%, rgba(255, 238, 205, 0.16), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(0, 0, 0, 0.35), transparent 60%);
}

.escena__particulas { z-index: 2; pointer-events: none; width: 100%; height: 100%; }
.escena__lienzo { z-index: 3; }

.destino {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.destino.activo { pointer-events: auto; }
.destino { --palabra-y: 40%; }

.destino__palabra {
  position: absolute;
  left: 0; right: 0;
  top: var(--palabra-y, 47%);
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: -0.56em auto 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: min(30vw, 44vh);
  line-height: 0.8;
  letter-spacing: -0.01em;
  color: rgba(255, 246, 228, 0.17);
  white-space: nowrap;
  overflow: hidden;
  padding: 0.18em 0.02em 0.02em;
  user-select: none;
}
.destino__palabra .letra { display: inline-block; will-change: transform; }

.destino__ingredientes {
  --w: min(112vh, 90vw);
  position: absolute;
  left: calc(var(--centro-x, 50%) - var(--w) / 2);
  top: calc(var(--ing-y, 50%) - var(--w) / 2);
  width: var(--w);
  aspect-ratio: 1;
}
.destino__ingredientes img { width: 100%; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.28)); }

.destino__maleta {
  --w: min(74vh, 54vw);
  position: absolute;
  left: calc(var(--centro-x, 50%) - var(--w) / 2);
  top: calc(var(--maleta-y, 52%) - var(--w) / 2);
  width: var(--w);
  aspect-ratio: 1;
}
.destino__maleta img {
  width: 100%;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.42));
}
.destino__sombra {
  position: absolute;
  left: 19%; bottom: 13%;
  width: 62%; height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent);
}

.destino__info {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(28px, 7vh, 64px);
  max-width: 34ch;
}
.destino__nombre {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  line-height: 0.92;
  text-wrap: balance;
}
.destino__region {
  margin: 6px 0 0;
  color: var(--laton-claro);
  font-weight: 500;
}
.destino__texto {
  margin: 10px 0 20px;
  color: var(--hueso-suave);
  max-width: 32ch;
}

/* Estado inicial: solo el primer destino visible (sin depender de JS) */
.movimiento .destino:not(:first-child) .destino__maleta,
.movimiento .destino:not(:first-child) .destino__ingredientes,
.movimiento .destino:not(:first-child) .destino__info { opacity: 0; }
.movimiento .destino:not(:first-child) .letra { opacity: 0; }

.escena__indice {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  top: 50%;
  translate: 0 -50%;
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  text-align: right;
}
.escena__indice button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hueso-suave);
  font: 500 0.92rem/1.2 var(--f-texto);
  cursor: pointer;
  transition: color .3s ease;
}
.escena__indice button::after {
  content: '';
  width: 22px; height: 1.5px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(0.45);
  transition: transform .4s ease;
}
.escena__indice button:hover { color: var(--hueso); }
.escena__indice [aria-current='true'] { color: var(--laton-claro); }
.escena__indice [aria-current='true']::after { transform: scaleX(1.6); }

@media (max-width: 899px) {
  .destino { --palabra-y: 27%; --ing-y: 47%; --maleta-y: 48%; }
  .destino__palabra { font-size: min(30vw, 24vh); }
  .destino__ingredientes { --w: min(128vw, 62vh); }
  .destino__maleta { --w: min(100vw, 50vh); }
  .destino__info {
    left: var(--gutter); right: var(--gutter);
    bottom: calc(24px + env(safe-area-inset-bottom));
    max-width: none;
  }
  .destino__nombre { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .destino__texto { margin: 6px 0 14px; font-size: 0.95rem; }
  .escena__indice {
    right: var(--gutter);
    top: auto;
    bottom: calc(40px + env(safe-area-inset-bottom));
    translate: none;
    grid-auto-flow: column;
    gap: 4px;
  }
  .escena__indice button { font-size: 0; gap: 0; min-width: 30px; min-height: 44px; justify-content: center; }
  .escena__indice button::after { width: 14px; height: 3px; border-radius: 2px; transform-origin: center; }
  .escena__indice [aria-current='true']::after { transform: scaleX(1.6); }
  .destino__info .boton { margin-right: 150px; }
}

@media (max-width: 899px) and (max-height: 700px) {
  .destino__texto { display: none; }
}

/* Anchos intermedios (laptops pequeñas, tablet horizontal): composición a la derecha del texto */
@media (min-width: 900px) and (max-width: 1279px) {
  .destino { --centro-x: 58%; }
  .destino__maleta { --w: min(70vh, 44vw); }
  .destino__ingredientes { --w: min(100vh, 74vw); }
  .destino__info { max-width: 26ch; }
  .destino__texto { max-width: 26ch; }
}

/* Teléfono en horizontal: la escena cabe en la altura real y se acomoda a lo ancho */
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  .escena { min-height: 0; }
  .lema { display: none; }
  .destino { --centro-x: 64%; --palabra-y: 50%; --ing-y: 54%; --maleta-y: 56%; }
  .destino__palabra { font-size: min(22vw, 52vh); }
  .destino__maleta { --w: min(86vh, 44vw); }
  .destino__ingredientes { --w: min(120vh, 62vw); }
  .destino__info { right: auto; max-width: 36%; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .destino__info .boton { margin-right: 0; }
  .destino__nombre { font-size: clamp(1.8rem, 5vw, 2.4rem); }
  .destino__region { margin-top: 2px; }
  .destino__texto { display: none; }
  .escena__indice { bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ───────── Vista estática (prefers-reduced-motion o sin JS de animación) ───────── */
.quieto .escena { height: auto; min-height: 0; overflow: visible; }
.quieto .escena__fondos,
.quieto .escena__particulas,
.quieto .escena__indice { display: none; }
.quieto .escena__lienzo { position: static; }
.quieto .destino {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--barra) + 24px) var(--gutter) 40px;
  display: grid;
  align-content: end;
  background:
    radial-gradient(ellipse 50% 40% at 50% 45%, rgba(255, 238, 205, 0.14), transparent 70%),
    var(--color);
  overflow: hidden;
  pointer-events: auto;
}
.quieto .destino:first-child { padding-top: calc(var(--barra) + 110px); }
.quieto .destino__info { position: relative; left: auto; bottom: auto; right: auto; }
.quieto .destino__info .boton { margin-right: 0; }