/* Landings de perfil · Freedom [The Twin Factory] · v017
   Continuación de la portada: la escena (ciudad sobre nubes, cielo luminoso) ocupa la pantalla.
   Encima solo hay rótulos de escena en vidrio suave, un progreso discreto, la marca y la pestaña
   verde de reserva a la derecha. Fraunces para impacto, Instrument Serif para la línea editorial,
   Inter para el trabajo. Corrección de Lucas del 9-nov: sustituye la composición v016 (pestañas,
   listas y tarjetas sobre gris), no el brandbook global. */

@font-face { font-family: "Fraunces"; src: url("../../reunion/assets/fonts/Fraunces-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../../reunion/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../../reunion/assets/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --freedom-green: #52E2AC;
  --deep-freedom: #1E6B55;
  --deep-freedom-hover: #185A47;
  --mint-glow: #8CF0CB;
  --celeste: #7EC8E3;
  --graphite: #2B2D2F;
  --texto: #2B2D2F;
  --texto-cuerpo: #3B4044;
  --texto-suave: #5B6166;
  --borde: rgba(43, 45, 47, .1);
  --borde-fuerte: rgba(43, 45, 47, .18);
  --fondo: #F7F8F9;
  --superficie: #FFFFFF;
  --vidrio: rgba(255, 255, 255, .86);
  --sombra: 0 10px 34px rgba(29, 58, 50, .08), 0 1px 2px rgba(29, 58, 50, .06);
  --acento: #1E6B55;
  --margen: clamp(14px, 3.4vw, 56px);
  --rail: 0px; /* v021 r2/v022: la reserva ya no es una banda lateral (botón abajo a la derecha) */
  --foco: 0 0 0 3px #fff, 0 0 0 5px var(--deep-freedom);
  --f-identidad: "Fraunces", Georgia, serif;
  --f-editorial: "Instrument Serif", Georgia, serif;
  --f-interfaz: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* variables usadas por el juego (mismos nombres que v016) */
  --borde-2: var(--borde-fuerte); --superficie-2: var(--fondo); --profundo: var(--deep-freedom);
  --texto-2: var(--texto-suave); --grafito: var(--graphite); --verde: var(--freedom-green);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--texto); background: #C2E0EB;
  font-family: var(--f-interfaz); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
button, input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
a { color: var(--deep-freedom); }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 8px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: fixed; left: 12px; top: -60px; z-index: 60; background: var(--graphite); color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; }
.saltar:focus { top: 10px; }

/* ── Escena fija ──────────────────────────────────────────────────── */
.escena { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.escena-fondo {
  position: absolute; inset: 0;
  /* Cielo de la portada y banco de nubes: visible mientras carga o sin WebGL */
  background:
    radial-gradient(60% 18% at 22% 86%, #fff 0 55%, transparent 56%),
    radial-gradient(48% 16% at 64% 90%, #fff 0 55%, transparent 56%),
    radial-gradient(40% 14% at 92% 84%, #fff 0 55%, transparent 56%),
    radial-gradient(30% 10% at 8% 80%, #ffffffd9 0 55%, transparent 56%),
    radial-gradient(14% 4% at 30% 22%, #ffffffcc 0 60%, transparent 62%),
    radial-gradient(10% 3% at 72% 16%, #ffffffb3 0 60%, transparent 62%),
    linear-gradient(180deg, #78B5D4 0%, #A9D2E4 30%, #C2E0EB 52%, #E3EDEE 72%, #ECF3F1 100%);
}
.escena-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease; }
.con-escena .escena-lienzo { opacity: 1; }
.carga {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra);
  font-size: .75rem; color: var(--texto-suave);
}
.carga-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--freedom-green); box-shadow: 0 0 0 3px rgba(82,226,172,.25); }

/* ── Marca y sector ───────────────────────────────────────────────── */
.cab { position: fixed; top: 12px; left: 12px; z-index: 30; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: calc(100% - 24px - var(--rail)); }
.marca {
  display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--graphite);
  background: rgba(255,255,255,.86); border: 1px solid var(--borde); border-radius: 10px; padding: 7px 12px 8px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.marca-f { font: 900 22px/1 var(--f-identidad); letter-spacing: -.4px; font-variation-settings: 'opsz' 72; }
.marca-tf { font: 500 10.5px/1 var(--f-interfaz); letter-spacing: .09em; text-transform: uppercase; color: var(--deep-freedom); }
.sector {
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.78); border: 1px solid var(--borde);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 11px/1.3 var(--f-interfaz); letter-spacing: .09em; text-transform: uppercase; color: var(--texto-suave);
}

/* ── Progreso discreto ────────────────────────────────────────────── */
.progreso {
  position: fixed; z-index: 15; left: 14px; top: 50%; transform: translateY(-50%);
  list-style: none; margin: 0; padding: 8px 6px; display: flex; flex-direction: column; gap: 6px;
  border-radius: 999px; background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s;
}
body[data-estado="0"] .progreso, body[data-estado="1"] .progreso, body[data-estado="2"] .progreso,
body[data-estado="3"] .progreso, body[data-estado="4"] .progreso, body[data-estado="5"] .progreso { opacity: 1; }
.progreso li { position: relative; display: flex; align-items: center; }
.progreso-n {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 600 11px/1 var(--f-interfaz); color: var(--texto-suave); background: rgba(255,255,255,.9); border: 1px solid var(--borde);
  transition: background .25s, color .25s;
}
.progreso li.activo .progreso-n { background: var(--deep-freedom); color: #fff; border-color: var(--deep-freedom); }
.progreso-t { display: none; }
.modo-vuelo .progreso { display: none; }

/* ── Relato: secciones que el visitante recorre ───────────────────── */
.relato { position: relative; z-index: 10; outline: none; }
.modo-vuelo .relato { display: none; }
.portal, .paso, .cierre { position: relative; display: flex; flex-direction: column; padding: 0 var(--margen); }
.portal { min-height: 100svh; justify-content: center; padding-top: 72px; padding-bottom: 40px; }
.paso { min-height: 150svh; }
.cierre { min-height: 100svh; justify-content: center; padding-bottom: 40px; }
.rotulo {
  position: relative; width: min(390px, 31vw); padding: 16px 18px 18px; /* v003: ~un tercio, la escena manda */
  background: var(--vidrio); border: 1px solid rgba(255,255,255,.7); border-radius: 16px;
  box-shadow: 0 18px 50px -24px rgba(29,58,50,.45), 0 1px 2px rgba(29,58,50,.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
}
.paso .rotulo { position: sticky; top: max(84px, calc(50svh - 150px)); margin-top: 26svh; }
.rotulo--portal { width: min(470px, 34vw); padding: 20px 22px 18px; }
.rotulo--cierre { width: min(420px, 32vw); }
.rotulo-etq { display: flex; align-items: center; gap: 10px; font: 600 11.5px/1.3 var(--f-interfaz); letter-spacing: .09em; text-transform: uppercase; color: var(--deep-freedom); }
.rotulo-etq--sector { color: var(--texto-suave); }
.rotulo-n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--deep-freedom); color: #fff; font-size: 12px; letter-spacing: 0;
}
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--acento); flex: none; }
.rotulo-paso { margin-top: 8px; font: italic 400 1rem/1.3 var(--f-editorial); color: var(--texto-suave); }
.rotulo h1 { margin-top: 10px; font: 900 clamp(1.6rem, 2.7vw, 2.4rem)/1.08 var(--f-identidad); letter-spacing: -.01em; outline: none; }
.rotulo h2 { margin-top: 6px; font: 900 clamp(1.3rem, 2.05vw, 1.8rem)/1.12 var(--f-identidad); letter-spacing: -.005em; outline: none; }
.editorial { margin-top: 8px; font: italic 400 clamp(1.0625rem, 1.6vw, 1.3rem)/1.3 var(--f-editorial); color: var(--deep-freedom); }
.rotulo-texto { margin-top: 8px; font-size: .9375rem; line-height: 1.5; color: var(--texto-cuerpo); }
.rotulo-ctx { margin-top: 12px; display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(30,107,85,.08); font-size: .8125rem; color: var(--deep-freedom); }
.rotulo-nota { margin-top: 12px; font-size: .78rem; line-height: 1.45; color: var(--texto-suave); }
.rotulo-vuelo { margin-top: 10px; }
.desliza { margin-top: 18px; display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--f-interfaz); letter-spacing: .09em; text-transform: uppercase; color: var(--texto-suave); }
.desliza span { width: 18px; height: 28px; border-radius: 10px; border: 1.5px solid var(--texto-suave); position: relative; }
.desliza span::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--deep-freedom); animation: desliza 1.8s ease-in-out infinite; }
@keyframes desliza { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(8px); opacity: .2; } }
.cta {
  margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px;
  border-radius: 12px; border: 0; background: var(--deep-freedom); color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(30,107,85,.6);
}
.cta:hover { background: var(--deep-freedom-hover); }
.enlace { padding: 0; border: 0; background: none; color: var(--deep-freedom); text-decoration: underline; text-underline-offset: 3px; font-size: .875rem; cursor: pointer; }

/* ── v022 · Botón de reserva compartido ───────────────────────────────
   «Reservar una demo» tal cual: un enlace real con aspecto de botón (sin nube, logotipo, icono ni punto),
   rectangular, verde Freedom profundo con texto blanco horizontal. Llama la atención por tamaño,
   contraste y espacio propio, sin destellos ni seguir al ratón. Escritorio: fijo abajo a la derecha, junto a
   la franja de actividad y fuera de la ciudad; móvil: franja inferior segura. Las variables --cta-*
   reservan su sitio a quien lo necesite (actividad, sala, juego). Destino: ../reunion/, misma pestaña. */
:root { --cta-ancho: 228px; --cta-alto: 54px; --cta-margen: 18px; }
.rail {
  position: fixed; z-index: 40; right: 22px; bottom: calc(var(--cta-margen) + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 196px; min-height: var(--cta-alto); padding: 0 28px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--deep-freedom); color: #fff; text-decoration: none; white-space: nowrap;
  font: 700 1.0625rem/1.1 var(--f-interfaz); letter-spacing: .005em;
  box-shadow: 0 16px 34px -14px rgba(16,58,46,.7), inset 0 0 0 1px rgba(255,255,255,.14);
  transition: background .2s, box-shadow .2s;
}
.rail:hover { background: var(--deep-freedom-hover); }
.rail:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px var(--deep-freedom), 0 16px 34px -14px rgba(16,58,46,.7); border-radius: 12px; }
.rail-t { font: inherit; }
/* Al conseguir el objetivo del juego, el botón se destaca un momento (no navega). */
.rail.destacada { animation: destacar 1s ease-in-out 3; }
@keyframes destacar { 50% { box-shadow: 0 0 0 6px rgba(82,226,172,.55), 0 16px 34px -14px rgba(16,58,46,.7); } }

/* ── Juego opcional a pantalla completa (vista=vuelo) ─────────────── */
.vuelo-pantalla {
  position: relative; z-index: 10; height: 100svh; min-height: 480px;
  display: flex; flex-direction: column; gap: 8px; padding: 88px calc(var(--rail) + 16px) calc(var(--cta-alto) + var(--cta-margen) + 14px) 16px;
}
.vuelo-cab { position: absolute; top: 14px; right: calc(var(--rail) + 16px); display: flex; align-items: center; gap: 10px; }
.vuelo-titulo { font: 800 1rem/1.2 var(--f-identidad); padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.8); outline: none; }
.vuelo-pantalla [data-juego-zona] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vuelo-pantalla .vuelo-escenario { flex: 1; aspect-ratio: auto; height: auto; max-height: none; min-height: 320px; }

/* Estilos del juego (v016, sin cambios de comportamiento) */
.vuelo-escenario {
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 300px; max-height: min(72vh, 600px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 16px; overflow: hidden; outline: none;
  background: linear-gradient(180deg,#bedce7 0%,#d9e9ed 65%,#f4faf7 100%);
}
.vuelo-escenario:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--freedom-green); }
.vuelo-escenario.con-escena { background: #E3EDEE; }
.vuelo-lienzo { position: absolute; inset: 0; }
.vuelo-lienzo canvas { display: block; width: 100%; height: 100%; }
.vuelo-escenario[data-estado="jugando"] .vuelo-lienzo { touch-action: none; cursor: grab; }
.vuelo-escenario.arrastrando .vuelo-lienzo { cursor: grabbing; }
.vuelo-capa { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: flex-start; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.vuelo-pausa, .vuelo-resultado { align-items: flex-start; background: rgba(247, 248, 249, .42); }
.vuelo-pausa .vuelo-panel, .vuelo-resultado .vuelo-panel { margin: auto; }
.vuelo-panel {
  width: 100%; max-width: 470px; padding: 16px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 12px 32px -18px rgba(28,62,54,.4);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.vuelo-panel--centro { text-align: center; max-width: 440px; }
.vuelo-etiqueta { font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.vuelo-etiqueta--qa { display: inline-block; margin-bottom: 8px; padding: 4px 8px; border-radius: 6px; color: #fff; background: var(--graphite); }
.vuelo-panel__titulo { margin-top: 4px; font-family: var(--f-identidad); font-weight: 700; font-size: 1.1875rem; line-height: 1.2; outline: none; }
.vuelo-panel__texto { margin-top: 6px; font-size: 0.875rem; line-height: 1.5; color: var(--texto-cuerpo); }
.vuelo-panel__nota { margin-top: 8px; font-size: 0.75rem; line-height: 1.45; color: var(--texto-suave); }
.vuelo-panel__nota:empty { display: none; }
.vuelo-panel__fila { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vuelo-panel__fila--centro { justify-content: center; }
.vuelo-objetivo { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--texto-cuerpo); }
.vuelo-objetivo input { width: 4.2em; min-height: 40px; padding: 4px 6px; text-align: center; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: #fff; font-variant-numeric: tabular-nums; }
.vuelo-objetivo input:focus-visible { border-color: var(--deep-freedom); box-shadow: 0 0 0 3px rgba(30,107,85,.18); }
.vuelo-objetivo--peq { margin-top: 12px; justify-content: center; }
.vb {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 8px;
  border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--graphite);
  font-weight: 600; font-size: 0.875rem; cursor: pointer; white-space: nowrap;
}
.vb:hover { border-color: var(--deep-freedom); }
.vb:disabled { opacity: .55; cursor: default; }
.vb--primario { background: var(--deep-freedom); border-color: var(--deep-freedom); color: #fff; }
.vb--primario:hover { background: var(--deep-freedom-hover); }
.vb--verde { background: var(--freedom-green); border-color: var(--freedom-green); color: var(--graphite); }
.vb--verde:hover { background: var(--mint-glow); border-color: var(--mint-glow); }
.vb--cristal { min-height: 36px; padding: 0 12px; font-size: 0.8125rem; background: rgba(255,255,255,.9); border-color: rgba(203,209,212,.9); }
.vb--texto { border-color: transparent; background: transparent; color: var(--texto-suave); }
.vuelo-hud {
  position: absolute; inset: 10px 10px auto; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; pointer-events: none;
}
.vuelo-marcador {
  grid-area: 1 / 2; display: flex; align-items: center; gap: 10px; min-height: 38px;
  padding: 6px 12px; border: 1px solid rgba(140,240,203,.35); border-radius: 999px;
  background: rgba(18,45,36,.94); color: #fff; box-shadow: 0 4px 16px rgba(18,45,36,.25);
}
.vuelo-estrellas { display: flex; align-items: center; gap: 3px; }
.vuelo-estrella { display: block; width: clamp(11px, 2.8vw, 16px); aspect-ratio: 1; color: #a9c4ba; }
.vuelo-estrella svg { display: block; width: 100%; height: 100%; }
.vuelo-estrella path { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linejoin: round; }
.vuelo-estrella.recogida { color: #ffd36a; animation: estrella-recogida 360ms ease-out; }
.vuelo-estrella.recogida path { fill: currentColor; }
.vuelo-cuenta { white-space: nowrap; font-size: .75rem; font-variant-numeric: tabular-nums; }
.vuelo-cuenta b { font-size: .95rem; }
@keyframes estrella-recogida {
  35% { transform: scale(1.45); filter: drop-shadow(0 0 5px #ffd36a); }
}
@media (prefers-reduced-motion: reduce) {
  .vuelo-estrella.recogida { animation: none; }
}
.vuelo-tramo {
  grid-area: 1 / 1; justify-self: start;
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(203,209,212,.8); font-size: 0.8125rem; color: var(--texto-cuerpo); font-variant-numeric: tabular-nums;
}
.vuelo-botones { grid-area: 1 / 3; justify-self: end; display: flex; gap: 6px; pointer-events: auto; }
.vuelo-escenario[data-estado="llegada"] .vuelo-hud > :not(.vuelo-marcador) { display: none; }
@media (max-width: 700px) {
  .vuelo-hud { grid-template-columns: minmax(0, 1fr); }
  .vuelo-marcador { grid-area: 1 / 1; justify-self: center; gap: 7px; padding-inline: 9px; }
  .vuelo-estrellas { gap: 2px; }
  .vuelo-tramo { display: none; }
  .vuelo-botones { grid-area: 2 / 1; }
  .vuelo-escenario[data-estado="llegada"] .vuelo-hud { top: 58px; }
}
.vuelo-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.55); pointer-events: none; }
.vuelo-escenario:not([data-estado="jugando"]):not([data-estado="pausa"]) .vuelo-barra { display: none; }
.vuelo-barra i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--deep-freedom); }
.vuelo-aviso {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: calc(100% - 32px);
  padding: 8px 16px; border-radius: 999px; background: rgba(43,45,47,.92); color: #fff; font-size: 0.875rem; font-weight: 500; text-align: center;
  pointer-events: none;
}
.vuelo-ayuda {
  align-self: center; max-width: 100%; margin-top: 8px; padding: 5px 12px;
  border: 1px solid rgba(30,107,85,.16); border-radius: 12px;
  background: rgba(255,255,255,.9); color: var(--graphite); font-size: .8125rem; line-height: 1.25;
}
.vuelo-ayuda__ordenador, .vuelo-ayuda__tactil { display: flex; align-items: center; gap: 10px; }
.vuelo-ayuda__teclas {
  display: grid; grid-template-columns: repeat(3, 18px); grid-template-rows: repeat(2, 17px);
  gap: 2px; flex: none;
}
.vuelo-ayuda__teclas kbd {
  display: grid; place-items: center; border: 1px solid #a0bcb1; border-radius: 4px;
  background: #e9f5ef; color: var(--deep-freedom); font: 700 .78rem/1 var(--f-interfaz);
}
.vuelo-ayuda__teclas kbd:first-child { grid-column: 2; }
.vuelo-ayuda__teclas kbd:nth-child(2) { grid-column: 1; }
.vuelo-ayuda strong, .vuelo-ayuda small { display: block; }
.vuelo-ayuda small { margin-top: 2px; color: var(--texto-suave); font-size: .72rem; }
.vuelo-ayuda__gesto { width: 42px; height: 35px; flex: none; color: var(--deep-freedom); }
.vuelo-ayuda__tactil { display: none; }
@media (max-width: 640px), (pointer: coarse) {
  .vuelo-ayuda__ordenador { display: none; }
  .vuelo-ayuda__tactil { display: flex; }
}
.vuelo-qa { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--graphite); border-radius: 10px; background: var(--superficie); }
.vuelo-qa__titulo { font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.vuelo-qa__botones { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.vuelo-qa__botones button { min-height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--graphite); background: #fff; font-size: 0.8125rem; cursor: pointer; }
.vuelo-qa__salida { display: block; margin-top: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 0.75rem; color: var(--texto-suave); overflow-wrap: anywhere; }

/* ── Vertical o estrecho: rótulo abajo, escena arriba (875×984, tabletas, móviles) ── */
@media (max-aspect-ratio: 21/20), (max-width: 759px) {
  .portal { justify-content: flex-end; padding-top: 0; padding-bottom: 28px; }
  .paso { justify-content: flex-end; }
  .paso .rotulo { position: sticky; top: auto; bottom: 22px; margin-top: 0; margin-bottom: 22px; }
  .cierre { justify-content: flex-end; padding-bottom: 28px; }
  .rotulo, .rotulo--portal, .rotulo--cierre { width: min(580px, calc(100vw - 2 * var(--margen) - var(--rail))); }
  .progreso { left: 50%; top: 66px; transform: translateX(-50%); flex-direction: row; padding: 5px 8px; }
  .progreso-n { width: 20px; height: 20px; font-size: 10.5px; }
}

/* ── Móvil: nube de reserva fija abajo a la derecha ── */
@media (max-width: 720px) {
  :root { --rail: 0px; --margen: 12px; }
  .cab { top: 10px; left: 10px; max-width: calc(100% - 20px); }
  .marca { padding: 6px 10px 7px; gap: 6px; }
  .marca-f { font-size: 19px; }
  .marca-tf { font-size: 8.5px; letter-spacing: .06em; }
  .sector { font-size: 10px; padding: 5px 10px; }
  .progreso { top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); left: 12px; transform: none; }
  .rotulo, .rotulo--portal, .rotulo--cierre { width: 100%; padding: 16px 16px 18px; border-radius: 14px; }
  .paso .rotulo { bottom: calc(118px + env(safe-area-inset-bottom)); margin-bottom: calc(118px + env(safe-area-inset-bottom)); }
  .portal, .cierre { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
  .rotulo h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .rotulo h2 { font-size: clamp(1.3rem, 6vw, 1.6rem); }
  .rotulo-texto { font-size: .9375rem; }
  .rotulo-paso { font-size: 1rem; }
  .desliza { margin-top: 12px; }
  /* Botón en la franja inferior segura: 48 px desde 14 px (≈ 62 px), dentro de los 84 px que respetan la
     ciudad, la sala y el visor ampliado. */
  :root { --cta-alto: 48px; --cta-margen: 14px; --cta-ancho: 0px; }
  .rail { right: 12px; left: auto; min-width: 0; padding: 0 22px; font-size: 1rem; border-radius: 11px; }
  .vuelo-pantalla { padding: 60px 10px calc(80px + env(safe-area-inset-bottom)); }
  .vuelo-cab { top: 52px; right: 10px; left: 10px; justify-content: flex-end; }
  .vuelo-titulo { display: none; }
  .vuelo-pantalla { padding-top: 96px; }
  .vuelo-capa { padding: 10px; }
  .vuelo-panel { padding: 14px; }
}
@media (max-width: 380px) {
  .marca-tf { display: none; }
  .rotulo-texto { font-size: .875rem; }
}
/* Escritorio bajo (1280×720, 1024×768): rótulos más compactos */
@media (min-aspect-ratio: 21/20) and (min-width: 760px) and (max-height: 800px) {
  .rotulo { padding: 16px 18px 18px; }
  .rotulo h1 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
  .rotulo-texto { font-size: .9375rem; }
}

/* ── v004 · Un solo rótulo activo, fijo a la pantalla ───────────────────────────
   Con JS, las secciones solo dan longitud al desplazamiento nativo (mismas alturas que antes) y
   todos los rótulos ocupan el mismo sitio: a la izquierda en horizontal, abajo en vertical/móvil.
   landing.js marca .activa la sección más cercana a la posición del relato; el resto queda
   transparente, sin eventos y con sus botones fuera de la tabulación. Sin JS, el flujo normal. */
.js .relato .rotulo {
  position: fixed; z-index: 12; margin: 0;
  left: max(64px, calc(var(--margen) + 22px)); top: 50%; bottom: auto;
  width: min(390px, 31vw); max-height: calc(100svh - 140px); overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-50%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.js .relato .rotulo--portal { width: min(470px, 34vw); }
.js .relato .rotulo--cierre { width: min(420px, 32vw); }
.js .relato .activa > .rotulo { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .28s ease, visibility 0s; }

@media (max-aspect-ratio: 21/20), (max-width: 759px) {
  .js .relato .rotulo, .js .relato .rotulo--portal, .js .relato .rotulo--cierre {
    top: auto; transform: none; left: var(--margen);
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: min(580px, calc(100vw - 2 * var(--margen) - var(--rail)));
    max-height: 44svh;
  }
}
@media (max-width: 720px) {
  /* Zona superior para la sala; abajo rótulo y, debajo, la pestaña verde (52 px + 14 px). */
  .js .relato .rotulo, .js .relato .rotulo--portal, .js .relato .rotulo--cierre {
    left: 10px; right: 10px; width: auto;
    bottom: calc(76px + env(safe-area-inset-bottom)); max-height: calc(46svh - 40px);
    padding: 14px 14px 15px;
  }
  /* Progreso en puntos, abajo a la izquierda junto a la pestaña verde (cabe con ella en 320 px). */
  .progreso { top: auto; bottom: calc(30px + env(safe-area-inset-bottom)); left: 12px; transform: none; flex-direction: row; align-items: center; padding: 6px 8px; gap: 6px; }
  .progreso-n { width: 9px; height: 9px; font-size: 0; border-width: 1.5px; }
  .js .rotulo h1 { font-size: clamp(1.3rem, 6.2vw, 1.75rem); }
  .js .rotulo h2 { font-size: clamp(1.2rem, 5.6vw, 1.5rem); }
  .js .rotulo-texto { font-size: .875rem; line-height: 1.45; }
  .js .rotulo-paso { font-size: .9375rem; }
  .js .rotulo--portal .desliza { display: none; }
}
/* Pantallas bajas y estrechas (320×640): solo lo esencial; el paso y la entradilla del portal se
   omiten visualmente (siguen en el documento para lectores). */
@media (max-width: 400px) and (max-height: 700px) {
  .js .relato .rotulo-paso, .js .rotulo--portal .rotulo-texto, .js .rotulo--cierre .rotulo-nota {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .js .rotulo-etq { font-size: 10.5px; }
  .js .rotulo-n { width: 22px; height: 22px; font-size: 11px; }
  .js .cta { min-height: 44px; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* v022r2 · Un inicio, un objetivo y una llegada espacial. */
.vuelo-portada {align-items:flex-end;justify-content:center;flex-wrap:wrap;align-content:flex-end;gap:10px;padding-bottom:32px;}
.vuelo-inicio-nota {flex-basis:100%;text-align:center;font-size:.8rem;color:var(--deep-freedom);background:rgba(255,255,255,.85);border-radius:8px;padding:6px;max-width:460px;}
.vuelo-inicio-nota:empty {display:none;}
.vuelo-rotulo {position:absolute;z-index:3;top:62px;left:50%;display:flex;align-items:center;gap:10px;transform:translate(-50%,0);padding:12px 22px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 6px 26px rgba(22,64,47,.12);font:800 1.2rem/1 var(--f-identidad);color:var(--deep-freedom);pointer-events:none;opacity:0;white-space:nowrap;}
.vuelo-rotulo span {display:block;width:25px;height:25px;color:#e0a11b;}
.vuelo-rotulo svg {width:100%;height:100%;}
.vuelo-rotulo[data-fase="entra"] {animation:objetivo-entra .45s both;}
.vuelo-rotulo[data-fase="visible"] {opacity:1;}
.vuelo-rotulo[data-fase="sale"] {animation:objetivo-sale .55s both;}
@keyframes objetivo-entra {from{opacity:0;transform:translate(-50%,-12px) scale(.96);}to{opacity:1;transform:translate(-50%,0) scale(1);}}
@keyframes objetivo-sale {from{opacity:1;transform:translate(-50%,0);}to{opacity:0;transform:translate(-50%,-8px);}}
.vuelo-velo,.vuelo-portal-velo {position:absolute;inset:0;z-index:5;background:#eef0ee;opacity:0;pointer-events:none;}
.vuelo-portal-velo {background:#10251d;z-index:4;}
.vuelo-acceso {position:absolute;left:50%;top:22%;z-index:6;transform:translateX(-50%);background:var(--freedom-green);color:#123b2e;border-radius:18px;padding:18px 26px;text-align:center;max-width:calc(100% - 32px);width:max-content;font:800 clamp(1rem,2vw,1.5rem)/1.25 var(--f-identidad);box-shadow:0 12px 36px rgba(17,72,52,.18);pointer-events:none;}
.vuelo-cine-controles {position:absolute;top:18px;right:18px;z-index:7;display:flex;gap:6px;}
.vuelo-cine-qa {position:absolute;bottom:16px;left:16px;z-index:7;background:#25282a;color:white;padding:6px 10px;border-radius:7px;font-size:.7rem;}
.juego-llegada {overflow:hidden;}
.juego-llegada .vuelo-escenario {position:fixed;inset:0;z-index:60;width:100%;height:100svh;max-height:none;min-height:0;border:0;border-radius:0;}
.juego-llegada .vuelo-cab,.juego-llegada .vuelo-ayuda,.juego-llegada .vuelo-qa {visibility:hidden;}
.juego-llegada .rail {z-index:75;}
@media(prefers-reduced-motion:reduce){.vuelo-rotulo[data-fase="entra"],.vuelo-rotulo[data-fase="sale"]{animation:none;}.vuelo-rotulo[data-fase="sale"]{opacity:0;}}
@media(max-width:700px){.vuelo-rotulo{top:104px;font-size:1.05rem;padding:10px 18px;}.vuelo-acceso{top:max(115px,24%);padding:16px 20px;}.vuelo-cine-controles{top:12px;right:12px;}}

.juego-llegada .cab {visibility:hidden;}

/* v023 · Preparación del vuelo: piloto3D real y progreso, sin lámina de estrellas. */
.vuelo-escenario[data-estado="cargando"] .vuelo-portada {gap:8px;padding-bottom:30px;}
.vuelo-escenario[data-estado="cargando"] .vuelo-inicio-nota {flex-basis:100%;max-width:none;background:none;color:#1E6B55;font-weight:600;font-size:.9rem;}
.vuelo-carga-barra {display:none;flex-basis:100%;max-width:180px;height:3px;background:rgba(30,107,85,.15);border-radius:8px;overflow:hidden;}
.vuelo-escenario[data-estado="cargando"] .vuelo-carga-barra {display:block;}
.vuelo-carga-barra i {display:block;height:100%;width:0;background:#1E6B55;border-radius:8px;transition:width .25s ease;}