/* Nebulosa · landing como recorrido de pantallas completas.
   Cada sección es una pantalla independiente (100dvh) que muestra toda su información sin cortarse:
   en computadoras avanza con scroll guiado (snap) y un riel de pasos; en pantallas chicas usa pestañas,
   carruseles y hojas inferiores para que nada se pierda. */
:root { --rail-w: 0px; --screen-pad-top: clamp(78px, 11vh, 104px); }
.landing { --gutter: max(16px, var(--rail-w)); }
.landing .wrap { max-width: none; width: min(1240px, calc(100% - var(--gutter) * 2)); padding-inline: 0; }
html.tour { scroll-behavior: smooth; scroll-padding-top: 0; }
.landing .topbar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: min(1240px, calc(100% - 32px)); margin: 0; }

/* ---------- Pantallas ---------- */
.screen { position: relative; overflow-x: clip; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 5vh, 52px) 0 clamp(16px, 3.2vh, 36px); }
.js .screen > .wrap > *,
.js .screen > .footer { transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease); }
.js .screen:not(.in-view) > .wrap > *,
.js .screen:not(.in-view) > .footer { opacity: 0; transform: translateY(30px); }
.screen.in-view > .wrap > :nth-child(2) { transition-delay: .06s; }
.screen.in-view > .wrap > :nth-child(3) { transition-delay: .12s; }
.screen.in-view > .wrap > :nth-child(4) { transition-delay: .18s; }
.screen.in-view > .footer { transition-delay: .14s; }
.screen-head { max-width: 780px; margin-bottom: clamp(12px, 2.6vh, 28px); }
.screen-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; max-width: none; }
.screen-head h2 { font-size: clamp(26px, min(3.5vw, 5.6vh), 48px); line-height: 1.05; letter-spacing: -.045em; margin-top: 12px; }
.lead { font-size: clamp(14px, 2vh, 17px); line-height: 1.65; color: var(--text); margin-top: 12px; max-width: 700px; }
.lead strong { color: var(--strong); font-weight: 650; }
.screen-head--row .lead { max-width: 440px; margin-top: 0; }
.screen-head--row h2 { font-size: clamp(22px, min(2.9vw, 4.7vh), 40px); }
.tag { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-text); position: relative; }
.mono { font-family: var(--mono); }
.preview { min-width: 0; position: relative; }
.visual-ring { width: min(100%, calc((100dvh - 200px) * 1.77)); margin-inline: auto; }
.preview--compact .iso-plate { padding-top: 46px; padding-bottom: 50px; }
.preview--compact .visual-ring { width: 100%; max-width: none; }
.back-btn { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--hair); color: var(--strong); font-size: 12.5px; font-weight: 650; justify-self: start; transition: all .28s var(--ease); }
.back-btn:hover { border-color: var(--accent); transform: translateX(-2px); }
.view-in { animation: view-in .5s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (min-width: 1180px) and (min-height: 600px) {
  :root { --rail-w: 92px; }
}

/* El encabezado solo vive en la primera pantalla: después se despide y deja el lugar a la historia */
.landing .topbar { transition: transform .5s var(--ease), opacity .4s var(--ease); }
.past-hero .topbar { transform: translate(-50%, -170%); opacity: 0; pointer-events: none; }
.ring-readout { color: var(--strong); }
.detail-head { display: flex; align-items: center; gap: 14px; }
.detail-head h2 { font-size: clamp(24px, min(2.8vw, 4.6vh), 38px); line-height: 1.08; letter-spacing: -.045em; margin-top: 4px; }
.piece-kind { display: inline-block; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kc, var(--accent)); }
.detail-desc { font-size: clamp(13.5px, 1.9vh, 15.5px); line-height: 1.65; color: var(--text); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.footer { padding-top: 14px; padding-bottom: clamp(10px, 2vh, 22px); margin-top: 0; }

/* ---------- Pantallas bajas (computadoras): se aprieta el espacio, nunca la información ---------- */
@media (min-width: 901px) and (max-height: 820px) {
  :root { --screen-pad-top: 84px; }
  .lead { line-height: 1.55; }
  .screen-head { margin-bottom: 10px; }
}
@media (min-width: 901px) and (max-height: 720px) {
  .screen-head h2 { font-size: clamp(22px, 5vh, 34px); }
  .uno-size-text { padding: 6px 10px; }
}
@media (min-width: 901px) and (max-width: 1320px) and (max-height: 900px) {
  .screen-head--row h2 { font-size: clamp(22px, 4.2vh, 32px); }
  .preview--compact .iso-plate { padding-top: 38px; padding-bottom: 40px; }
}

/* ---------- Computadoras: avance guiado por intención (el imán del navegador solo queda como respaldo sin JS) ---------- */
@media (min-width: 901px) {
  html.tour { scroll-snap-type: y mandatory; }
  .landing .screen { scroll-snap-align: start; scroll-snap-stop: always; }
}
html.tour.pager { scroll-snap-type: none; }

/* ---------- Tabletas y celulares: recorrido libre, sin pantallas forzadas ---------- */
@media (max-width: 1179px) {
  .screen { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 900px) {
  html.tour { scroll-snap-type: none; }
  .screen { min-height: auto; justify-content: flex-start; padding-top: clamp(64px, 10vh, 84px); }
  .screen-head--row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .screen-head--row .lead { max-width: 62ch; }
  .screen-head .lead { font-size: 15px; }
  .detail-actions .btn { min-height: 44px; }
}
@media (max-width: 760px) {
  :root { --screen-pad-top: 84px; }
  .screen-head h2 { font-size: clamp(24px, 7.2vw, 32px); }
  .screen-head--row h2 { font-size: clamp(22px, 6.4vw, 28px); }
  .orbit-legend { margin: 6px 0 0; gap: 4px; min-height: 0; }
  .nb-key { padding: 4px 9px; font-size: 11.5px; }
  .ring-readout { font-size: 10px; letter-spacing: .06em; }
  .detail-actions { flex-wrap: wrap; }
  .detail-actions .btn { flex: 1 1 140px; min-width: 0; padding: 0 10px; font-size: 13px; white-space: normal; text-align: center; line-height: 1.2; }
  .uno-size-text { font-size: 13px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .screen:not(.in-view) > .wrap { opacity: 1; transform: none; }
  .view-in { animation: none !important; }
}