/* Talk&Fly v4 «Flight deck»: estructura y efectos de la landing 1; paleta y tipografía de la landing 3
   (Inter + IBM Plex Mono, noche azul acero, oro de amanecer, plata de fuselaje).
   Tokens, base y capas fijas (cabecera, HUD, preloader, cursor, botones, odómetros). Las secciones viven en sections.css. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* color (landing 3): tinta nocturna, plata, bruma, acero y el oro del amanecer */
  --ink: #04070f;
  --ink-2: #070c1a;
  --ink-3: #0b1430;
  --steel-700: #26355c;
  --steel-500: #5b6b8c;          /* solo líneas y adornos: no se usa para texto */
  --steel: #8da0c0;
  --mist: #b9c6de;
  --silver: #eef3fb;
  --steel-300: var(--steel);     /* alias: texto secundario */
  --steel-100: var(--mist);      /* alias: texto de cuerpo */
  --ice: var(--silver);
  --amber: #ffb04a;
  --gold: #ffe3b0;
  --ember: #ff7a3d;
  --amber-hot: var(--gold);
  --amber-deep: #b8730a;
  --alert: #ff6a5a;
  --on-amber: #1c1000;
  --grad-dawn: linear-gradient(100deg, #ffe9c4 0%, #ffb04a 52%, #ff8140 100%);
  --line: rgb(190 210 245 / 0.16);
  --line-strong: rgb(190 210 245 / 0.34);
  --veil: rgb(4 7 15 / 0.72);

  /* tipografía (landing 3) */
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* medidas */
  --pad: clamp(20px, 6.4vw, 120px);
  --header-h: 72px;
  --tap-min: 44px;
  --fs-h2: clamp(2.5rem, 6.4vw, 6.75rem);
  --fs-lead: clamp(1.0625rem, 1.3vw, 1.3125rem);
  --mono-size: 0.75rem;

  /* movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 500ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; scrollbar-color: var(--steel-700) var(--ink); scrollbar-width: thin; scroll-padding-top: var(--header-h); }
body {
  margin: 0; background: var(--ink); color: var(--silver);
  font-family: var(--font-text); font-size: 16px; font-weight: 400; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; caret-color: var(--amber);
}
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--amber); color: var(--on-amber); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--steel-700); }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: var(--mono-size); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.2; }
/* etiqueta de sección (landing 3): número en ámbar, filete y nombre en bruma */
.eyebrow { display: inline-flex; align-items: center; gap: 14px; margin: 0; max-width: none !important; font-family: var(--font-mono); font-size: var(--mono-size) !important; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist) !important; line-height: 1.2; }
.eyebrow__num { display: inline-flex; align-items: center; color: var(--amber); }
.eyebrow__num::after { content: ""; display: inline-block; width: 40px; height: 1px; margin-left: 14px; background: currentColor; opacity: 0.7; }
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200; padding: 12px 18px; min-height: var(--tap-min);
  background: var(--amber); color: var(--on-amber); font-weight: 600; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* pre-paint: lo que va a entrar espera invisible solo mientras el arranque está pendiente */
html[data-motion-boot="pending"] [data-intro] { visibility: hidden; }

/* ---------- escena: foto en monocromo con un único punto de calor ---------- */
.scene { position: absolute; inset: 0; overflow: hidden; background: var(--ink); --gx: 50%; --gy: 60%; --gw: 38%; --gh: 24%; --bg-pos: center; }
.scene__img, .scene__tint, .scene__glow, .scene__shade { position: absolute; inset: 0; display: block; }
.scene__img {
  inset: -5% 0; background-size: cover; background-position: var(--bg-pos); will-change: transform;
  filter: grayscale(1) contrast(1.2) brightness(0.8);
}
.scene__tint { background: #35567f; mix-blend-mode: color; opacity: 0.55; }
.scene__glow {
  mix-blend-mode: screen;
  background: radial-gradient(ellipse var(--gw) var(--gh) at var(--gx) var(--gy), rgb(255 168 44 / 0.95) 0%, rgb(255 132 24 / 0.32) 42%, transparent 72%);
}
.scene__shade { background: linear-gradient(180deg, rgb(4 7 15 / 0.72) 0%, rgb(4 7 15 / 0.08) 38%, rgb(4 7 15 / 0.86) 100%); }
.scene--sky .scene__img { background-image: url("img/arte-sky-cruise.webp"); --bg-pos: 72% center; }
.scene--sky { --gx: 90%; --gy: 49%; --gw: 34%; --gh: 22%; }
.scene--contrails .scene__img { background-image: url("img/arte-contrails-sea-dawn.webp"); }
.scene--contrails { --gx: 50%; --gy: 77%; --gw: 44%; --gh: 22%; }
.scene--cockpit .scene__img { background-image: url("img/arte-cockpit-approach.webp"); }
.scene--cockpit { --gx: 50%; --gy: 40%; --gw: 24%; --gh: 14%; }
.scene--tower .scene__img { background-image: url("img/arte-tower-night.webp"); }
.scene--tower { --gx: 26%; --gy: 47%; --gw: 36%; --gh: 14%; }
.scene--runway .scene__img { background-image: url("img/arte-runway-wet-touchdown.webp"); }
.scene--runway { --gx: 75%; --gy: 57%; --gw: 40%; --gh: 16%; }

/* ---------- cielo de partículas fijo ---------- */
.fx { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
#smooth-wrapper { position: relative; z-index: 1; }

/* ---------- preloader: revisión previa al vuelo ---------- */
.preloader { position: fixed; inset: 0; z-index: 120; display: none; color: var(--ice); }
html[data-motion-boot="pending"] .preloader, html[data-motion-boot="running"] .preloader { display: block; }
.preloader__panel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--ink); }
.preloader__panel--top { top: 0; border-bottom: 1px solid var(--line); }
.preloader__panel--bottom { bottom: 0; border-top: 1px solid var(--line); }
.preloader__core { position: absolute; inset: 0; display: grid; place-content: center; justify-items: start; gap: 14px; padding: var(--pad); }
.preloader__eyebrow { font-family: var(--font-mono); font-size: var(--mono-size); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mist); }
.preloader__count { display: flex; align-items: baseline; font-family: var(--font-display); font-weight: 500; font-size: clamp(5rem, 17vw, 14rem); line-height: 0.9; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.preloader__count small { font-size: 0.28em; letter-spacing: 0; color: var(--amber); margin-left: 0.15em; }
.preloader__state { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); min-height: 1.4em; }
.preloader__lines { width: min(360px, 70vw); height: 28px; margin-top: 8px; }
.preloader__lines path { fill: none; stroke: var(--amber); stroke-width: 3; vector-effect: non-scaling-stroke; }

/* ---------- cabecera ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  height: var(--header-h); padding: 0 var(--pad);
  background: linear-gradient(180deg, rgb(4 7 15 / 0.9) 0%, rgb(4 7 15 / 0.82) 62%, rgb(4 7 15 / 0));
}
.site-header::before { content: ''; position: absolute; inset: 0 0 -14px; z-index: -1; pointer-events: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.brand { display: inline-flex; align-items: center; min-height: var(--tap-min); justify-self: start; }
.brand img { height: 36px; width: auto; }
.readout { justify-self: center; display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: var(--mono-size); letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); white-space: nowrap; }
.readout__idx { color: var(--amber); }
.readout__name { display: inline-block; min-width: 10ch; color: var(--silver); }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); justify-self: end; }
.nav__link { position: relative; display: inline-flex; align-items: center; min-height: var(--tap-min); text-decoration: none; font-family: var(--font-mono); font-size: var(--mono-size); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); transition: color var(--dur-fast); }
.nav__link:hover { color: var(--silver); }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out); }
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 22px;
  border: 1px solid rgb(255 176 74 / 0.7); color: var(--gold); text-decoration: none; font-family: var(--font-mono); font-size: var(--mono-size); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-base);
}
.nav-cta:hover { background: var(--amber); color: var(--on-amber); box-shadow: 0 0 36px rgb(255 176 74 / 0.45); }
.menu-toggle { display: none; justify-self: end; width: var(--tap-min); height: var(--tap-min); padding: 0; border: 0; background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.menu-toggle__bar { display: block; width: 26px; height: 2px; background: var(--silver); transition: transform 0.35s var(--ease-out); }
.site-header.is-open .menu-toggle__bar:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.site-header.is-open .menu-toggle__bar:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
.site-header__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: left; }

/* ---------- HUD ---------- */
.hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; font-family: var(--font-mono); }
.hud__label { font-size: 0.625rem; letter-spacing: 0.22em; color: var(--steel); text-transform: uppercase; white-space: nowrap; }
.hud__alt { position: absolute; left: clamp(10px, 1.5vw, 26px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: min(52vh, 440px); }
.hud__tape { position: relative; flex: 1; width: 28px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.hud__tape::after { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 1px; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.hud__tape::before { content: ""; position: absolute; left: 30px; top: calc(50% - 4px); border: 4px solid transparent; border-left-color: var(--amber); border-right: 0; opacity: 0; }
.hud__ticks {
  position: absolute; left: 0; top: 0; width: 100%; height: 1200px;
  background:
    repeating-linear-gradient(180deg, var(--steel-300) 0 1px, transparent 1px 100px) left top / 22px 100px no-repeat,
    repeating-linear-gradient(180deg, var(--steel-500) 0 1px, transparent 1px 20px) left top / 12px 20px;
  background-repeat: repeat-y, repeat-y;
}
.hud__odo { font-size: 1.15rem; font-weight: 500; color: var(--amber); letter-spacing: 0.04em; }
.hud__profile { position: absolute; right: clamp(10px, 1.5vw, 26px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.hud__profile svg { width: 52px; height: min(46vh, 380px); overflow: visible; }
.hud__ghost { fill: none; stroke: var(--steel-500); stroke-width: 1; stroke-dasharray: 2 5; }
.hud__flown { fill: none; stroke: var(--amber); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgb(255 176 74 / 0.7)); }
.hud__mark { fill: var(--ice); }

/* ---------- cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: none; }
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="reduced"]) .cursor { display: block; }
}
.cursor__ring, .cursor__dot, .cursor__label { position: absolute; left: 0; top: 0; translate: -50% -50%; border-radius: 50%; }
.cursor__ring { width: 34px; height: 34px; border: 1px solid rgb(238 243 251 / 0.7); transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), background-color 0.3s, border-color 0.3s; }
.cursor__dot { width: 5px; height: 5px; background: var(--amber); }
.cursor__label { display: grid; place-items: center; width: 84px; height: 84px; background: var(--amber); color: var(--on-amber); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; scale: 0; opacity: 0; transition: scale 0.4s var(--ease-out), opacity 0.2s; }
.cursor[data-cursor-state="label"] .cursor__label { scale: 1; opacity: 1; }
.cursor[data-cursor-state="label"] .cursor__ring, .cursor[data-cursor-state="label"] .cursor__dot { opacity: 0; }
.cursor[data-cursor-state="grow"] .cursor__ring { width: 64px; height: 64px; background: rgb(255 176 74 / 0.12); border-color: var(--amber); }

/* ---------- botones ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 16px; overflow: hidden; isolation: isolate;
  min-height: 60px; padding: 0 30px 0 34px; background: var(--amber); color: var(--on-amber);
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none;
  box-shadow: 0 0 0 1px var(--amber), 0 18px 60px -18px rgb(255 150 50 / 0.6);
  transition: box-shadow 0.4s var(--ease-out);
}
.btn__fill { position: absolute; inset: 0; z-index: -1; background: var(--silver); transform: translateY(101%); transition: transform 0.5s var(--ease-out); }
.btn:hover .btn__fill, .btn:focus-visible .btn__fill { transform: none; }
.btn:hover { box-shadow: 0 0 0 1px var(--silver), 0 22px 70px -14px rgb(255 150 50 / 0.75); }
.btn--ghost { background: rgb(4 7 15 / 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--gold); box-shadow: inset 0 0 0 1px rgb(255 176 74 / 0.7); }
.btn--ghost .btn__fill { background: var(--amber); }
.btn--ghost:hover { color: var(--on-amber); box-shadow: inset 0 0 0 1px var(--amber), 0 22px 70px -14px rgb(255 150 50 / 0.5); }
.btn__arrow { width: 22px; height: 22px; transition: transform 0.4s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(6px); }

/* ---------- odómetro (columnas de dígitos) ---------- */
.odo { display: inline-flex; font-variant-numeric: tabular-nums; line-height: 1; }
.odo__col { position: relative; display: inline-block; height: 1em; overflow: hidden; }
.odo__col > i { display: block; font-style: normal; visibility: hidden; }
.odo__strip { position: absolute; left: 0; top: 0; width: 100%; text-align: center; will-change: transform; }
.odo__strip > i { display: block; height: 1em; font-style: normal; }
.odo__lit { color: var(--amber); }

/* ---------- marquesina ---------- */
.marquee { overflow: hidden; }
.marquee-inner { display: flex; width: max-content; will-change: transform; }
.marquee-row { display: flex; width: max-content; flex: none; }

/* ---------- mini-reproductor ---------- */
.docked {
  position: fixed; z-index: 60; right: var(--pad); bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 16px; padding: 8px 28px 8px 8px;
  background: var(--ink-2); border: 1px solid var(--line-strong);
  box-shadow: 0 0 40px -10px rgb(255 176 74 / 0.35);
}
.docked__toggle { position: relative; width: var(--tap-min); height: var(--tap-min); border: 0; background: var(--amber); color: var(--on-amber); }
.docked__toggle::before, .docked__toggle::after { content: ""; position: absolute; top: 14px; width: 4px; height: 16px; background: currentColor; }
.docked__toggle::before { left: 15px; }
.docked__toggle::after { right: 15px; }
.docked__label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.docked__progress { position: relative; width: 72px; height: 2px; background: var(--steel-700); overflow: hidden; }
.docked__bar { position: absolute; inset: 0; background: var(--amber); transform: scaleX(0); transform-origin: left; }

/* ---------- ancho medio y móvil ---------- */
@media (max-width: 1180px) {
  .readout { display: none; }
}
@media (max-width: 1000px) {
  .hud { display: none; }
}
@media (max-width: 820px) {
  :root { --header-h: 64px; --pad: 20px; }
  .site-header { grid-template-columns: 1fr auto; background: linear-gradient(180deg, rgb(4 7 15 / 0.94), rgb(4 7 15 / 0)); }
  .menu-toggle { display: flex; }
  .nav {
    position: fixed; inset: 0 0 auto 0; top: 0; z-index: -1; justify-self: stretch; width: 100%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
    min-height: 100svh; padding: calc(var(--header-h) + 24px) var(--pad) 40px; background: var(--ink);
    clip-path: inset(0 0 100% 0); visibility: hidden;
  }
  .site-header.is-open .nav { clip-path: inset(0); visibility: visible; transition: clip-path 0.6s var(--ease-in-out); }
  .nav__link { font-family: var(--font-display); font-size: 2.1rem; font-weight: 500; letter-spacing: -0.04em; text-transform: none; min-height: 64px; color: var(--silver); }
  .nav-cta { margin-top: 20px; }
  .docked { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .docked__progress { flex: 1; width: auto; }
  .docked__label { overflow: hidden; text-overflow: ellipsis; }
}

html[data-motion="reduced"] .hud, html[data-motion-boot="recovered"] .hud, html:not(.js) .hud { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav__link::after, .btn__fill, .btn__arrow, .cursor__ring { transition: none; }
}