:root {
  --green: #0D2B1F;
  --green-deep: #081c14;
  --gold: #C9A86A;
  --gold-bright: #D4AF37;
  --cream: #FAF7F0;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }
html.is-loading { overflow: hidden; scroll-snap-type: none; }
body { margin: 0; background: var(--cream); color: #1a1a1a; font-family: Inter, system-ui, sans-serif; }

/* ---------- Intro (pantalla de carga) ----------
   Es la primera sección de la página: tras cargar se queda arriba
   y se puede bajar al contenido y volver a subir. */
.loader {
  --p: 0;                       /* progreso 0..1, lo actualiza loader.js */
  --s: 0;                       /* scroll sobre la intro 0..1, lo actualiza loader.js */
  position: relative;
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 40%, var(--green) 0%, var(--green-deep) 100%);
  color: var(--gold);
  overflow: hidden;
  scroll-snap-align: start;
}
/* leve parallax al bajar: el logo se eleva y se desvanece */
.loader__center { opacity: calc(1 - var(--s) * 1.1); }
.loader__center { translate: 0 calc(var(--s) * -60px); }

/* al terminar la conexión España → Latinoamérica aparece el indicador de scroll */
.loader__cue {
  position: absolute; left: 50%; bottom: clamp(24px, 5vh, 48px); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--gold); text-decoration: none;
  font: 400 10.5px/1 Inter, sans-serif; letter-spacing: .32em; text-transform: uppercase; margin-right: -.32em;
  opacity: 0; pointer-events: none; transition: opacity .8s ease .5s;
}
.loader.is-done .loader__cue { opacity: calc(.9 - var(--s) * 2); pointer-events: auto; }
.loader__cue svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: bob 2s ease-in-out infinite; }
.loader__cue:hover svg { stroke: #F6D96B; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* sol que asciende hasta el cenit a medida que avanza la carga */
.loader__sun {
  position: absolute; left: 50%; width: min(90vw, 760px); aspect-ratio: 1;
  bottom: calc(-35% + var(--p) * 75%);
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(212,175,55,.26) 0%, rgba(212,175,55,.09) 38%, transparent 68%);
  filter: blur(6px);
  pointer-events: none;
}

.loader__center {
  position: relative; display: flex; flex-direction: column; align-items: center;
  margin-top: -3vh;
}

/* ---------- Logo: las torres ascienden ---------- */
.loader__mark { height: clamp(130px, 25vh, 230px); width: auto; overflow: visible; }
.piece {
  transform-box: fill-box; transform-origin: 50% 100%;
  opacity: 0; transform: translateY(70px) scaleY(.7); will-change: transform, opacity;
  animation: rise 1.1s var(--ease-out) forwards;
}
.p1 { animation-delay: .15s; }
.p2 { animation-delay: .3s; }
.p3 { animation-delay: .55s; }
.p4 { animation-delay: .75s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Wordmark ---------- */
.loader__word {
  margin-top: clamp(18px, 3.5vh, 30px);
  display: flex; gap: .06em;
  font: 400 clamp(34px, 6.2vh, 56px)/1 Montserrat, Inter, sans-serif;
  letter-spacing: .12em; color: #F6D96B;
}
.loader__word span {
  opacity: 0; transform: translateY(14px); filter: blur(4px);
  animation: letter .9s var(--ease-out) forwards;
  animation-delay: calc(1.05s + var(--i) * .08s);
}
@keyframes letter { to { opacity: 1; transform: none; filter: none; } }

.loader__sub {
  margin-top: .9em;
  font: 300 clamp(10px, 1.5vh, 13px)/1 Montserrat, Inter, sans-serif;
  letter-spacing: .85em; margin-right: -.85em; text-transform: uppercase; color: #F2D56E;
  opacity: 0; animation: fade 1s ease 1.6s forwards;
}
.loader__tag {
  margin: clamp(26px, 5vh, 44px) 0 0;
  font: italic 400 clamp(14px, 2vh, 18px)/1.4 "Playfair Display", serif;
  color: var(--gold); letter-spacing: .02em; text-align: center; padding: 0 24px;
  opacity: 0; animation: fade 1.2s ease 2s forwards;
}
@keyframes fade { to { opacity: .85; } }

/* ---------- Ruta España → Latinoamérica (conexión / barra de progreso) ----------
   Componente compartido: se usa en la intro (sobre verde) y en la sección de abajo (sobre crema). */
.route {
  /* --p (progreso 0..1) lo hereda de .loader (JS) o se fija en .page__route */
  --r-main: #F6D96B;                        /* color activo */
  --r-soft: var(--gold);                    /* color de texto secundario */
  --r-track: rgba(201,168,106,.25);
  --r-bg: var(--green);
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; row-gap: 14px;
  width: min(560px, calc(100% - 48px));
  font: 400 10.5px/1 Inter, sans-serif; letter-spacing: .28em; text-transform: uppercase;
  color: var(--r-soft);
}
.route__city { justify-self: start; opacity: .4; white-space: nowrap; transition: opacity .6s ease, color .6s ease; }
.route__city.is-on { opacity: 1; color: var(--r-main); }
.route__city--end { justify-self: end; margin-right: -.28em; }
.route__track { grid-column: 1 / -1; position: relative; height: 1px; background: var(--r-track); container-type: inline-size; }
.route__tick { position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--r-bg); border: 1px solid var(--r-soft); transform: translate(-50%, -50%); }
.route__tick { transition: background .5s ease, border-color .5s ease, box-shadow .5s ease; }
.route__tick.is-on { background: var(--r-main); border-color: var(--r-main); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--r-main) 50%, transparent); }
/* relleno y punto se mueven solo con transform/translate (GPU, sin recalcular layout) */
.route__fill { position: absolute; inset: 0; background: var(--r-main); transform-origin: 0 50%; transform: scaleX(var(--p)); will-change: transform; }
.route__dot {
  position: absolute; top: 50%; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--r-main); transform: translate(-50%, -50%); will-change: translate;
  translate: calc(100cqw * var(--p)) 0;
  box-shadow: 0 0 14px 3px color-mix(in srgb, var(--r-main) 55%, transparent);
}
.route__pct {
  grid-column: 1 / -1; justify-self: center; margin-top: 6px;
  font: 400 clamp(22px, 3.4vh, 30px)/1 "Playfair Display", serif; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--r-soft);
}
.route__pct span { display: inline-block; min-width: 2ch; text-align: right; }
.route__note {
  grid-column: 1 / -1; justify-self: center;
  font: italic 400 clamp(13px, 1.9vh, 16px)/1 "Playfair Display", serif; letter-spacing: .04em; text-transform: none;
  color: var(--r-soft); opacity: .85;
}

/* en la intro, anclada abajo; aparece con un fundido */
.loader__route {
  position: absolute; left: 50%; bottom: clamp(84px, 13vh, 124px); transform: translateX(-50%);
  opacity: 0; animation: fade .8s ease .6s forwards;
}

/* en la sección de abajo: versión sobre fondo crema, la barra se llena al entrar */
.page__route {
  --p: 0;
  --r-main: #B8902F; --r-soft: #9a7b3c; --r-track: rgba(154,123,60,.28); --r-bg: var(--cream);
  margin-top: clamp(32px, 6vh, 56px);
}
.page__route .route__fill { transition: transform 1.8s var(--ease-out) .5s; }
.page__route .route__dot { transition: translate 1.8s var(--ease-out) .5s; }
.page.is-visible .page__route { --p: .77; }

/* ---------- Contenido provisional ---------- */
.page {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; place-content: center; justify-items: center; text-align: center; padding: 24px;
  scroll-snap-align: start;
}
.page > :not(.page__top) { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.page.is-visible > :not(.page__top) { opacity: 1; transform: none; }
.page.is-visible > :nth-child(2) { transition-delay: .12s; }
.page.is-visible > :nth-child(3) { transition-delay: .24s; }
.page__title { max-width: 21em; }
.page__top {
  position: absolute; left: 50%; bottom: clamp(24px, 5vh, 48px); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #9a7b3c; text-decoration: none;
  font: 400 10.5px/1 Inter, sans-serif; letter-spacing: .28em; text-transform: uppercase;
}
.page__top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.page__top:hover { color: var(--green); }
.page__eyebrow { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #9a7b3c; margin: 0 0 18px; }
.page__title { font: 500 clamp(26px, 4.4vw, 48px)/1.2 "Playfair Display", serif; color: var(--green); margin: 0; text-wrap: balance; }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .piece, .loader__word span, .loader__sub, .loader__tag, .loader__route { animation-duration: .01s; animation-delay: 0s; }
  html { scroll-behavior: auto; }
  .loader__cue svg { animation: none; }
  .loader__center { translate: none; }
}