/* Cada pantalla ocupa EXACTAMENTE la pantalla visible (height:100dvh, no min)
   y tiene su propio scroll interno si lo necesita. Esto garantiza que NUNCA
   aparezca una franja azul por debajo, en ninguna pantalla, presente o futura. */
.screen{
  height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch; /* scroll suave en iOS si algún día se usa */
}

/* ================= BIENVENIDA ================= */
.screen--welcome{
  position:relative; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:0;
  overflow:hidden;                   /* la bienvenida NO scrollea nunca */
  padding:calc(var(--safe-t)) 24px calc(var(--safe-b));
  background:var(--sunset-grad);
  --bg-pos: left center;
}
.welcome__bg{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  object-fit:cover; object-position:var(--bg-pos);
  pointer-events:none;
}
.welcome__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,17,42,.50) 0%, rgba(7,17,42,.10) 30%, transparent 46%),
    linear-gradient(0deg,  rgba(7,17,42,.38) 0%, transparent 26%),
    linear-gradient(180deg, rgba(10,23,48,.16), rgba(10,23,48,.08));
}

/* BLOQUE DE CONTENIDO anclado arriba, en el cielo. Ritmos en dvh para que
   escale igual en cualquier móvil sin que el poema pise el ala. */
.welcome__inner{
  position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; width:100%; max-width:360px;
  justify-content:flex-start;
  padding-top:calc(var(--safe-t) + 5dvh);
}

.welcome__heart{width:32px; height:32px; color:var(--peach-100); opacity:.95; margin-bottom:10px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.welcome__heart svg{width:100%; height:100%}
.welcome__title{font-size:clamp(38px,11.5vw,54px); line-height:1; margin:0 0 6px; color:var(--peach-100); text-shadow:0 2px 18px rgba(0,0,0,.55)}
.welcome__tagline{margin:0 0 9dvh; font-size:13px; color:var(--text); opacity:.9; letter-spacing:.4px; text-shadow:0 1px 6px rgba(0,0,0,.5)}

.welcome__diagram{width:100%; height:auto; margin:0 0 4dvh; color:var(--peach-100); filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.welcome__diagram .mono{color:var(--peach-100)}
.welcome__diagram .plane{color:var(--peach-100)}
.welcome__diagram .lbl{fill:var(--peach-100); font-family:var(--font-ui); font-size:9px; font-weight:600; letter-spacing:.3px}

.welcome__poem{margin:0 0 6dvh; font-size:19px; line-height:1.35; color:var(--peach-100); opacity:.96; max-width:84%; text-shadow:0 1px 8px rgba(0,0,0,.55)}
.welcome__cta{margin-top:0; box-shadow:var(--glow-peach), 0 8px 26px rgba(0,0,0,.4)}

@media (prefers-reduced-motion: reduce){ .welcome__diagram .plane animateTransform{} }

/* ================= PLACEHOLDER (y futuras pantallas con contenido) ================= */
.screen--placeholder{
  background:linear-gradient(180deg,var(--night-700),var(--night-800));
  padding-bottom:calc(var(--nav-h) + var(--safe-b) + 16px);
  /* overflow-y:auto heredado de .screen: si hay mucho contenido, scrollea
     dentro de esta pantalla, sin mover la barra de 5 ni el body global. */
}
.placeholder{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:60dvh; color:var(--text-dim)}
.placeholder__heart{width:30px; height:30px; color:var(--gold); opacity:.8}
.placeholder__heart svg{width:100%; height:100%}
.placeholder__title{font-size:30px; color:var(--peach-100)}
.placeholder__sub{font-size:12px; letter-spacing:.3px}