/* presentation.css — Gymathius Digital, presentación comercial fullscreen. */

/* ---------- Tokens ---------- */
:root {
  --bg: #0B0D0F;
  --surface-2: #151A1D;
  --surface-3: #1B2024;
  --primary: #65CDB6;
  --primary-bright: #58E0C2;
  --white: #F5F6F6;
  --gray: #AEB4B8;
  --red: #EF3C3C;
  --amber: #F5A623;
  --border: rgba(245, 246, 246, 0.10);
  --border-strong: rgba(245, 246, 246, 0.18);

  --ff-display: 'Archivo Black', 'Archivo', sans-serif;
  --ff-heading: 'Archivo', sans-serif;
  --ff-body: 'Inter', sans-serif;

  --fs-eyebrow: clamp(12px, 0.9vw, 18px);
  --fs-title: clamp(30px, 3.6vw, 72px);
  --fs-title-lg: clamp(38px, 4.6vw, 92px);
  --fs-subtitle: clamp(16px, 1.4vw, 28px);
  --fs-card: clamp(14px, 1.05vw, 20px);
  --fs-micro: clamp(11px, 0.75vw, 14px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 400ms;
  --t-med: 560ms;
  --t-slow: 700ms;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--bg); }
body { font-family: var(--ff-body); color: var(--white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

.app { position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); }

/* ---------- Escenas ---------- */
.scene-root { position: absolute; inset: 0; width: 100vw; height: 100vh; height: 100dvh; }

.scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(18px, 3.4vh, 80px) clamp(32px, 5.5vw, 110px);
  opacity: 0; transform: translateX(24px) scale(0.99);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  pointer-events: none;
  overflow: hidden;
}
.scene.is-active { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; z-index: 2; }
.scene.is-leaving-back { transform: translateX(-24px) scale(0.99); }

.scene__bg-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.scene__overlay { position: absolute; inset: 0; background: var(--bg); z-index: 1; }
.scene__content { position: relative; z-index: 2; width: 100%; }

.eyebrow {
  font-family: var(--ff-heading); font-weight: 700; font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary);
  margin: 0 0 clamp(6px, 1.4vh, 20px);
}
.scene__title {
  font-family: var(--ff-display); font-weight: 400; font-size: var(--fs-title);
  line-height: 1.05; letter-spacing: -0.01em; margin: 0; text-transform: uppercase;
  max-width: 22ch; white-space: pre-line;
}
.scene__title--lg { font-size: var(--fs-title-lg); }
.scene__title .accent, .accent-text { color: var(--primary); }
.scene__accent-line {
  font-family: var(--ff-display); font-weight: 400; font-size: var(--fs-title);
  color: var(--primary); line-height: 1.05; text-transform: uppercase; max-width: 26ch;
  margin: clamp(4px, 1vh, 14px) 0 0;
}
.scene__subtitle {
  font-family: var(--ff-body); font-weight: 500; font-size: var(--fs-subtitle);
  color: var(--gray); max-width: 46ch; margin: clamp(6px, 1.6vh, 22px) 0 0; line-height: 1.4;
}
.scene__closing {
  font-family: var(--ff-display); font-weight: 400; font-size: clamp(22px, 2.2vw, 40px);
  line-height: 1.15; text-transform: uppercase; margin: clamp(8px, 1.8vh, 48px) 0 0;
  max-width: 40ch;
}
.scene__closing span { display: block; }

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--scale { transform: scale(0.98); }
.reveal--scale.is-visible { transform: scale(1); }
.reveal--x { transform: translateX(-16px); }
.reveal--x.is-visible { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .scene, .reveal, .reveal--scale, .reveal--x, .mockup-float, .connector-line {
    transition-duration: 200ms !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ---------- Cards genéricas ---------- */
.card-row { display: flex; gap: clamp(12px, 1.4vw, 24px); flex-wrap: wrap; margin-top: clamp(14px, 2.6vh, 48px); }
.tile {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  padding: clamp(12px, 1.8vh, 28px); flex: 1 1 200px;
}
.tile__label {
  font-family: var(--ff-heading); font-weight: 800; font-size: clamp(16px, 1.3vw, 24px);
  letter-spacing: 0.03em;
}
.tile__meta { font-size: var(--fs-card); color: var(--gray); margin-top: 6px; }

.item-list { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 24px); margin-top: clamp(10px, 2.4vh, 40px); }
.item-list__row { display: flex; align-items: baseline; gap: clamp(10px, 1vw, 16px); }
.item-list__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; }
.item-list__title { font-family: var(--ff-heading); font-weight: 800; font-size: clamp(16px, 1.25vw, 22px); }
.item-list__meta { font-size: var(--fs-card); color: var(--gray); }

/* ---------- Flow chain ---------- */
.flow-chain { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(8px, 1vw, 16px); margin-top: clamp(14px, 3.4vh, 60px); }
.flow-step {
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: clamp(12px, 1.2vw, 22px) clamp(14px, 1.4vw, 26px); text-align: left; min-width: 120px;
}
.flow-step.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset, 0 0 24px rgba(101,205,182,0.14); }
.flow-step__label { font-family: var(--ff-heading); font-weight: 800; font-size: clamp(14px, 1.1vw, 19px); letter-spacing: 0.02em; }
.flow-step__meta { font-size: var(--fs-micro); color: var(--gray); margin-top: 3px; }
.flow-arrow { color: var(--primary); font-size: clamp(16px, 1.4vw, 24px); opacity: 0.5; flex: none; }
.flow-arrow.is-visible { opacity: 1; }
.flow-branches { display: flex; gap: clamp(10px, 1.2vw, 20px); margin-top: clamp(10px, 2vh, 34px); flex-wrap: wrap; }
.flow-branch { background: var(--surface-3); border: 1px solid var(--primary); color: var(--primary);
  border-radius: 999px; padding: 8px 18px; font-family: var(--ff-heading); font-weight: 700; font-size: var(--fs-card); }
.result-branch { display: flex; gap: clamp(12px, 1.4vw, 24px); margin-top: clamp(10px, 1.8vh, 30px); flex-wrap: wrap; }
.result-tag { border-radius: 12px; padding: 12px 22px; font-family: var(--ff-heading); font-weight: 800; font-size: clamp(15px, 1.15vw, 20px); }
.result-tag--primary { background: rgba(101,205,182,0.12); color: var(--primary); border: 1px solid var(--primary); }
.result-tag--red { background: rgba(239,60,60,0.10); color: var(--red); border: 1px solid var(--red); }
.registered-row { display: flex; gap: clamp(10px, 1vw, 18px); margin-top: clamp(10px, 1.8vh, 30px); flex-wrap: wrap; }
.registered-chip {
  display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 16px; font-size: var(--fs-micro); color: var(--gray);
}
.registered-chip__icon { width: 6px; height: 6px; border-radius: 50%; background: var(--gray); }

/* ---------- Hub map ---------- */
.hub-map { position: relative; margin-top: clamp(10px, 2.6vh, 50px); height: clamp(220px, 46vh, 480px); }
.hub-map__center {
  /* top/left/transform se fijan en línea desde JS (sceneTemplates.js), no acá:
     este elemento también lleva la clase .reveal, y .reveal.is-visible es un
     selector de dos clases — le gana en especificidad a un solo ".hub-map__center"
     y el transform:translateY(0) de la animación pisaba por completo el
     translate(-50%,-50%) que centra la caja. Un transform inline sí gana
     siempre, sin importar la especificidad de la clase. */
  position: absolute;
  background: var(--surface-2); border: 1.5px solid var(--primary); border-radius: 16px;
  padding: clamp(14px, 1.4vw, 26px) clamp(20px, 2vw, 34px); text-align: center;
  font-family: var(--ff-heading); font-weight: 800; font-size: clamp(15px, 1.2vw, 22px);
  box-shadow: 0 0 40px rgba(101,205,182,0.16); z-index: 3;
}
.hub-map__node {
  position: absolute; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 12px;
  padding: 10px 18px; font-family: var(--ff-heading); font-weight: 700; font-size: var(--fs-card); z-index: 2;
}
.hub-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.connector-line { stroke: var(--primary); stroke-width: 1.5; fill: none; opacity: 0.45; stroke-dasharray: 4 500; transition: stroke-dashoffset var(--t-slow) var(--ease); }
.connector-line.is-visible { stroke-dashoffset: 0; stroke-dasharray: none; }
.hub-map__domains { display: flex; flex-wrap: wrap; gap: clamp(8px, 0.9vw, 14px); margin-top: clamp(8px, 1.6vh, 26px); justify-content: center; }
.domain-chip { background: var(--surface-2); border: 1px solid var(--border); color: var(--gray);
  border-radius: 999px; padding: 6px 16px; font-size: var(--fs-micro); font-family: var(--ff-heading); font-weight: 700; letter-spacing: 0.03em; }

/* ---------- Device mockups ---------- */
.showcase { display: flex; align-items: center; gap: clamp(30px, 5vw, 90px); margin-top: clamp(10px, 2.2vh, 44px); flex: 1; min-height: 0; }
.showcase__device { flex: none; display: flex; align-items: center; justify-content: center; }
/* El ancho real del mockup lo decide el wrapper (ver renderModuleShowcase en
   sceneTemplates.js) — el frame solo llena ese 100%, nunca fija su propio %. */
.showcase__device .device-frame { width: 100%; }
.showcase__callouts { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 26px); }
.showcase__callouts--ring { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 1.4vh, 20px); max-width: 480px; }

.device-frame { position: relative; filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5)); animation: mockup-float 6s ease-in-out infinite; }
@keyframes mockup-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* min() con tope por vh en los 3 mockups: cada uno fija su alto vía
   aspect-ratio a partir del ancho — sin un tope por altura, una ventana
   ancha-pero-baja los agranda por vw sin límite real de alto disponible. */
.device-laptop { width: clamp(220px, min(32vw, 46vh), 620px); }
.device-laptop__screen {
  background: #000; border-radius: 10px 10px 0 0; border: 6px solid #14181A; border-bottom: none;
  aspect-ratio: 16/10; overflow: hidden; box-shadow: 0 0 0 1px rgba(101,205,182,0.15);
}
.device-laptop__base { height: 12px; background: linear-gradient(#22282B, #14181A); border-radius: 0 0 8px 8px; position: relative; }
.device-laptop__base::after { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 14%; height: 100%; background: #0B0D0F; border-radius: 0 0 4px 4px; }

.device-tablet { width: clamp(200px, min(26vw, 40vh), 460px); }
.device-tablet__screen {
  background: #000; border-radius: 16px; border: 8px solid #14181A; aspect-ratio: 4/3; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(101,205,182,0.15);
}

.device-phone { width: clamp(120px, min(13vw, 20vh), 230px); }
.device-phone__screen {
  background: #000; border-radius: 34px; border: 8px solid #14181A; aspect-ratio: 9/19.5; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(101,205,182,0.15); position: relative;
}
.device-phone__notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 34%; height: 16px; background: #14181A; border-radius: 10px; z-index: 2; }

.device-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Asset wrapper (tamaño real SIEMPRE por CSS, nunca inline —
   ver comentario en ImageAsset.js) ---------- */
.asset-wrap { display: block; width: 100%; height: 100%; overflow: hidden; }
.asset-wrap__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Placeholders ---------- */
.asset-placeholder {
  width: 100%; height: 100%; min-height: 80px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, var(--surface-3), var(--surface-3) 10px, var(--surface-2) 10px, var(--surface-2) 20px);
  border: 1px dashed var(--border-strong); color: var(--gray); font-family: var(--ff-heading); font-weight: 700;
  font-size: clamp(11px, 0.85vw, 15px); letter-spacing: 0.05em; text-align: center; padding: 10px;
}

/* ---------- Cover / Closing ---------- */
.scene--cover, .scene--closing { padding: 0; justify-content: flex-start; }
.scene--cover .scene__content, .scene--closing .scene__content { padding: clamp(28px, 4vw, 80px) clamp(32px, 5.5vw, 110px); width: 100%; height: 100%; display: flex; flex-direction: column; }

.cover__brandrow { display: flex; align-items: center; gap: 14px; }
.cover__logo-wrap { width: auto; height: clamp(30px, 3vw, 48px); flex: none; }
.cover__logo-wrap .asset-wrap__img { width: auto; height: 100%; object-fit: contain; }
.cover__eyebrow { font-family: var(--ff-heading); font-weight: 700; letter-spacing: 0.14em; font-size: var(--fs-eyebrow); color: var(--gray); text-transform: uppercase; margin-top: 6px; }

.cover__body { display: flex; align-items: center; flex: 1; gap: clamp(20px, 4vw, 60px); }
.cover__left { flex: 1 1 46%; min-width: 280px; }
.cover__title { font-family: var(--ff-display); font-size: clamp(48px, 6.4vw, 128px); line-height: 0.96; text-transform: uppercase; margin: clamp(14px, 2vw, 28px) 0 0; }
.cover__title .line--accent { color: var(--primary); }
.cover__subtitle { font-size: var(--fs-subtitle); color: var(--gray); max-width: 40ch; margin-top: clamp(8px, 1.8vh, 26px); line-height: 1.45; }
.cover__stack { font-family: var(--ff-heading); font-weight: 700; letter-spacing: 0.08em; color: var(--white); font-size: var(--fs-micro); margin-top: clamp(10px, 2vh, 30px); text-transform: uppercase; }

.cover__right { flex: 1 1 44%; position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.cover__footer { font-family: var(--ff-heading); font-weight: 700; letter-spacing: 0.1em; color: var(--gray); font-size: var(--fs-micro); margin-top: auto; padding-top: 20px; }

.closing__center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(10px, 2.4vh, 30px); min-height: 0; }
.closing__line { font-family: var(--ff-display); font-size: clamp(22px, 3.2vw, 56px); line-height: 1.18; text-transform: uppercase; }
.closing__line--accent { color: var(--primary); }
.closing__funnel { display: flex; gap: clamp(8px, 1vw, 16px); align-items: center; flex-wrap: wrap; justify-content: center; font-family: var(--ff-heading); font-weight: 700; font-size: var(--fs-card); color: var(--gray); }
.closing__funnel span.arrow { color: var(--primary); }
.closing__brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.closing__brand-logo { width: auto; height: clamp(40px, 4vw, 64px); }
.closing__brand-logo .asset-wrap__img { width: auto; height: 100%; object-fit: contain; }
.closing__brand-name { font-family: var(--ff-heading); font-weight: 800; letter-spacing: 0.06em; font-size: clamp(18px, 1.6vw, 28px); }
.closing__tagline { color: var(--gray); font-size: var(--fs-card); }

/* ---------- KPI grid ---------- */
.kpi-grid { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 20px); margin-top: clamp(12px, 2.6vh, 46px); }
.kpi-group { display: flex; gap: clamp(10px, 1.2vw, 18px); flex-wrap: wrap; }
.kpi-tile { flex: 1 1 160px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: clamp(14px, 1.4vw, 24px); }
.kpi-tile__label { font-family: var(--ff-heading); font-weight: 800; font-size: clamp(15px, 1.1vw, 20px); }
.kpi-tile__tag { display: inline-block; margin-top: 8px; font-size: var(--fs-micro); color: var(--primary); border: 1px solid var(--primary); border-radius: 999px; padding: 2px 10px; }

/* ---------- Pipeline ---------- */
.pipeline { display: flex; align-items: center; gap: clamp(6px, 0.8vw, 12px); margin-top: clamp(12px, 2.8vh, 46px); flex-wrap: wrap; }
.pipeline-step { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 10px 20px; font-family: var(--ff-heading); font-weight: 700; font-size: var(--fs-card); color: var(--gray); }
.pipeline-step.is-active { background: rgba(101,205,182,0.12); border-color: var(--primary); color: var(--primary); }
.alert-row { display: flex; gap: clamp(10px, 1.2vw, 18px); margin-top: clamp(10px, 2.4vh, 40px); flex-wrap: wrap; }
.alert-chip { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 10px 18px; font-family: var(--ff-heading); font-weight: 700; font-size: var(--fs-card); }
.alert-chip--amber { background: rgba(245,166,35,0.10); border: 1px solid var(--amber); color: var(--amber); }
.alert-chip--red { background: rgba(239,60,60,0.10); border: 1px solid var(--red); color: var(--red); }

/* ---------- Finance split ---------- */
.finance-split { display: flex; gap: clamp(16px, 2vw, 32px); margin-top: clamp(12px, 2.6vh, 44px); flex-wrap: wrap; }
.finance-col { flex: 1 1 220px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: clamp(16px, 1.6vw, 26px); }
.finance-col--result { text-align: center; display: flex; flex-direction: column; justify-content: center; border-color: var(--primary); }
.finance-col__title { font-family: var(--ff-heading); font-weight: 800; letter-spacing: 0.06em; font-size: var(--fs-card); color: var(--primary); margin-bottom: 12px; }
.finance-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.finance-col li { font-size: var(--fs-card); color: var(--white); }
.finance-formula { font-family: var(--ff-heading); font-weight: 800; font-size: clamp(16px, 1.3vw, 22px); }
.finance-filters { display: flex; gap: clamp(8px, 1vw, 14px); margin-top: clamp(10px, 1.8vh, 26px); }
.finance-filter { border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 16px; font-size: var(--fs-micro); color: var(--gray); font-family: var(--ff-heading); font-weight: 700; }
.scene__note { font-size: var(--fs-micro); color: var(--gray); margin-top: clamp(8px, 1.6vh, 24px); }

/* ---------- Two column ---------- */
.two-column { display: flex; gap: clamp(20px, 3vw, 50px); margin-top: clamp(12px, 2.6vh, 44px); flex-wrap: wrap; flex: 1; min-height: 0; }
.column-card { flex: 1 1 300px; background: var(--surface-2); border-radius: 16px; padding: clamp(18px, 1.8vw, 30px); border: 1px solid var(--border); }
.column-card--primary { border-color: var(--primary); }
.column-card__label { font-family: var(--ff-heading); font-weight: 800; letter-spacing: 0.08em; font-size: var(--fs-card); margin-bottom: 14px; }
.column-card--primary .column-card__label { color: var(--primary); }
.column-card--muted .column-card__label { color: var(--gray); }
.column-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.column-card li { font-size: var(--fs-card); }
.column-card--muted li { color: var(--gray); }

/* ---------- Pillars ---------- */
.pillars { display: flex; gap: clamp(10px, 1.4vw, 22px); margin-top: clamp(14px, 3vh, 48px); flex-wrap: wrap; }
.pillar { flex: 1 1 140px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: clamp(16px, 1.6vw, 26px); text-align: center; }
.pillar__title { font-family: var(--ff-heading); font-weight: 800; font-size: clamp(15px, 1.15vw, 20px); color: var(--primary); }
.pillar__meta { font-size: var(--fs-card); color: var(--gray); margin-top: 8px; }
.funnel-row { display: flex; gap: clamp(6px, 0.8vw, 14px); align-items: center; justify-content: center; margin-top: clamp(14px, 2.8vh, 44px); flex-wrap: wrap; font-family: var(--ff-heading); font-weight: 700; font-size: var(--fs-card); color: var(--white); }
.funnel-row .arrow { color: var(--primary); }

/* ---------- Formula chain ---------- */
.formula-chain { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(4px, 1vh, 10px); margin-top: clamp(12px, 2.8vh, 46px); }
.formula-factor { font-family: var(--ff-heading); font-weight: 700; font-size: clamp(15px, 1.3vw, 24px); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: clamp(8px, 1.4vh, 12px) 20px; }
.formula-op { color: var(--primary); font-size: clamp(16px, 1.5vw, 26px); font-family: var(--ff-heading); line-height: 1; }
.formula-result { margin-top: clamp(4px, 1vh, 12px); background: rgba(101,205,182,0.12); border: 1.5px solid var(--primary); color: var(--primary);
  border-radius: 12px; padding: clamp(14px, 1.4vw, 22px) clamp(20px, 2vw, 30px); font-family: var(--ff-display); font-size: clamp(20px, 1.8vw, 32px); text-transform: uppercase; }

/* ---------- Numbered timeline ---------- */
.numbered-timeline { display: flex; gap: clamp(12px, 1.6vw, 26px); margin-top: clamp(12px, 2.8vh, 46px); flex-wrap: wrap; }
.timeline-step { flex: 1 1 200px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: clamp(16px, 1.6vw, 26px); position: relative; }
.timeline-step__n { font-family: var(--ff-display); font-size: clamp(22px, 1.8vw, 32px); color: var(--primary); }
.timeline-step__title { font-family: var(--ff-heading); font-weight: 800; font-size: clamp(15px, 1.15vw, 20px); margin-top: 4px; letter-spacing: 0.03em; }
.timeline-step ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.timeline-step li { font-size: var(--fs-micro); color: var(--gray); }

/* ---------- Pricing cards ---------- */
.pricing-cards { display: flex; gap: clamp(14px, 1.8vw, 28px); margin-top: clamp(10px, 2.2vh, 40px); flex-wrap: wrap; flex: 1; min-height: 0; align-items: stretch; max-width: 92%; }
.price-card { flex: 1 1 260px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 18px; padding: clamp(18px, 1.8vw, 30px); display: flex; flex-direction: column; }
/* El scale(1.02) se fija en línea desde JS, no acá — mismo motivo que .hub-map__center: esta tarjeta también lleva .reveal, y .reveal.is-visible le gana en especificidad a una sola clase. */
.price-card--recommended { border-color: var(--primary); background: linear-gradient(180deg, rgba(101,205,182,0.08), var(--surface-2) 40%); position: relative; }
.price-card__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--bg); font-family: var(--ff-heading); font-weight: 800; font-size: var(--fs-micro); letter-spacing: 0.06em; padding: 5px 14px; border-radius: 999px; }
.price-card__name { font-family: var(--ff-heading); font-weight: 800; font-size: clamp(15px, 1.15vw, 20px); letter-spacing: 0.03em; }
.price-card__tagline { color: var(--gray); font-size: var(--fs-micro); margin-top: 8px; white-space: pre-line; min-height: 2.6em; }
.price-card__rows { margin-top: clamp(8px, 1.6vh, 24px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.price-card__row { display: flex; justify-content: space-between; font-size: var(--fs-card); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.price-card__row-label { color: var(--gray); }
.price-card__row-value { font-family: var(--ff-heading); font-weight: 700; }
.price-card__total { margin-top: 14px; font-family: var(--ff-heading); font-weight: 800; font-size: clamp(17px, 1.35vw, 24px); }
.price-card--recommended .price-card__total { color: var(--primary); }
.pricing-footer { margin-top: clamp(8px, 1.6vh, 24px); font-size: var(--fs-micro); color: var(--gray); }

/* ---------- QA stepper ----------
 * Solo una pregunta visible a la vez: se apilan con position:absolute
 * dentro de .qa-wrap para que las que están en opacity:0 no sigan
 * ocupando alto en el flujo del documento (si no, la escena se ve
 * "más alta" de lo que realmente muestra y puede desbordar 100vh). */
/* display:flex es necesario acá: esta clase se aplica tanto al <section
   class="scene"> exterior (que YA es flex por la regla base .scene, así
   que ahí esto no cambiaba nada) como al <div class="scene__content"> de
   adentro (un bloque normal, sin flex) — sin display:flex acá,
   justify-content/align-items quedaban inertes en el contenido interno, y
   el eyebrow/título/pregunta terminaban cada uno centrado contra un ancho
   distinto (el bug reportado: "no se ve bien estructurada"). */
.scene--qa { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.qa-wrap { position: relative; width: min(100%, 30ch); min-height: clamp(110px, 22vh, 240px); margin-top: clamp(10px, 2.2vh, 36px); display: flex; align-items: center; justify-content: center; }
.qa-question {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-size: clamp(22px, 2.6vw, 44px); line-height: 1.2; text-transform: none;
}
.qa-progress { margin-top: clamp(10px, 1.8vh, 28px); font-family: var(--ff-heading); font-weight: 700; letter-spacing: 0.08em; color: var(--gray); font-size: var(--fs-micro); }

/* ---------- Access terminal / hardware demo ---------- */
.access-layout { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 70px); margin-top: clamp(8px, 1.8vh, 30px); flex-wrap: wrap; flex: 1; min-height: 0; }
.access-layout + .flow-chain { margin-top: clamp(8px, 1.4vh, 24px); }
.terminal-mock {
  /* min() con un tope por vh: el aspect-ratio fijo (1/2.2) hace que el alto
     dependa por completo del ancho — sin el tope por vh, en una ventana
     ancha-pero-baja el ancho vía vw se va arriba y el alto resultante
     (ancho×2.2) se desborda aunque el alto real disponible sea chico. */
  width: clamp(120px, min(14vw, 17vh), 220px); aspect-ratio: 1/2.2; background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px;
  box-shadow: 0 0 40px rgba(101,205,182,0.10);
}
.terminal-mock__screen { width: 70%; aspect-ratio: 1; background: var(--surface-3); border-radius: 10px; border: 1px solid var(--primary); display: flex; align-items: center; justify-content: center; }
.terminal-mock__icon { width: 60%; height: 60%; color: var(--primary); }
/* max-width acá evita que .access-layout se envuelva a una segunda fila en
   anchos medios (1366px): sin tope, el texto de las opciones puede pedir
   más ancho del que queda junto al terminal, el flex-wrap las apila abajo
   y la escena se vuelve casi el doble de alta. */
.access-options { display: flex; flex-direction: column; gap: 14px; max-width: 320px; }
/* .tile trae flex:1 1 200px pensado para filas horizontales (.card-row):
   ahí 200px es un ANCHO mínimo razonable. Acá .access-options es una
   columna, así que ese mismo flex-basis se aplica al ALTO y cada tile
   quedaba forzado a 200px de alto sin importar su contenido real. */
.access-options .tile { flex: none; }
.notification-card {
  background: var(--surface-2); border: 1px solid var(--primary); border-radius: 14px; padding: clamp(14px, 1.5vw, 24px);
  min-width: 220px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.notification-card__status { font-family: var(--ff-heading); font-weight: 800; color: var(--primary); font-size: var(--fs-card); }
.notification-card__row { font-size: var(--fs-micro); color: var(--gray); margin-top: 6px; }
.notification-card__name { font-weight: 700; color: var(--white); }
.notification-card__tag { display: inline-block; margin-top: 10px; font-size: 10px; letter-spacing: 0.06em; color: var(--gray); border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 10px; }

/* ---------- Journey timeline ---------- */
.journey { display: flex; gap: clamp(8px, 1vw, 16px); margin-top: clamp(12px, 2.6vh, 46px); flex-wrap: wrap; align-items: center; }
.journey-hop { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 8px 18px; font-size: var(--fs-card); color: var(--gray); }
.journey-hop.is-visible { border-color: var(--primary); color: var(--white); }

/* ---------- Demo button ---------- */
.demo-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(6px, 1.4vh, 38px);
  background: var(--primary); color: var(--bg); border: none; border-radius: 10px;
  padding: clamp(10px, 1.8vh, 14px) 26px; font-family: var(--ff-heading); font-weight: 800; font-size: clamp(13px, 1vw, 17px);
  letter-spacing: 0.04em; text-decoration: none; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.demo-btn:hover { background: var(--primary-bright); transform: translateY(-2px); }
.demo-btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.demo-btn__arrow { transition: transform var(--t-fast) var(--ease); }
.demo-btn:hover .demo-btn__arrow { transform: translateX(4px); }

/* ---------- Chrome (nav inferior) ---------- */
.chrome {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; gap: clamp(14px, 2vw, 32px);
  padding: 14px clamp(20px, 3vw, 48px); background: linear-gradient(0deg, rgba(11,13,15,0.9), rgba(11,13,15,0));
  transition: opacity var(--t-med) var(--ease);
}
.chrome.is-dimmed { opacity: 0.28; }
.chrome__nav { display: flex; align-items: center; gap: 8px; flex: none; }
.chrome__nav-btn {
  width: 28px; height: 28px; border-radius: 50%; background: transparent; border: 1px solid var(--border-strong);
  color: var(--gray); display: flex; align-items: center; justify-content: center; font-size: 14px;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.chrome__nav-btn:hover { border-color: var(--primary); color: var(--primary); }
.chrome__nav-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.chrome__nav-label { font-family: var(--ff-heading); font-weight: 700; font-size: var(--fs-micro); color: var(--gray); letter-spacing: 0.06em; }

.chrome__progress { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.chrome__progress-track { flex: 1; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.chrome__progress-fill { height: 100%; background: var(--primary); width: 0%; transition: width var(--t-med) var(--ease); }
.chrome__progress-count { font-family: var(--ff-heading); font-weight: 700; font-size: var(--fs-micro); color: var(--gray); flex: none; letter-spacing: 0.04em; }

.chrome__chapters { display: flex; gap: clamp(10px, 1.4vw, 20px); flex: none; }
.chrome__chapter {
  background: none; border: none; color: var(--gray); font-family: var(--ff-heading); font-weight: 700;
  font-size: var(--fs-micro); letter-spacing: 0.06em; padding: 4px 2px; border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.chrome__chapter:hover { color: var(--white); }
.chrome__chapter.is-active { color: var(--primary); border-color: var(--primary); }
.chrome__chapter:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.chrome__fullscreen {
  flex: none; width: 30px; height: 30px; border-radius: 6px; background: transparent; border: 1px solid var(--border-strong);
  color: var(--gray); display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.chrome__fullscreen:hover { border-color: var(--primary); color: var(--primary); }
.chrome__fullscreen:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Edge zones ---------- */
.edge-zone { position: absolute; top: 0; bottom: 0; width: 7%; background: transparent; border: none; z-index: 5; }
.edge-zone--left { left: 0; cursor: w-resize; }
.edge-zone--right { right: 0; cursor: e-resize; }

/* ---------- Nav hint ---------- */
.nav-hint {
  position: absolute; bottom: clamp(70px, 8vh, 90px); left: 50%; transform: translateX(-50%);
  font-family: var(--ff-heading); font-weight: 700; letter-spacing: 0.06em; font-size: var(--fs-micro);
  color: var(--gray); background: rgba(21,26,29,0.85); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 8px 18px; z-index: 9; opacity: 0; transition: opacity var(--t-slow) var(--ease);
}
.nav-hint.is-visible { opacity: 1; }

/* ---------- Focus general ---------- */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 1600px) {
  .showcase { gap: clamp(20px, 3.5vw, 50px); }
}

@media (max-width: 1180px) {
  .scene { padding: 22px 28px; }
  .showcase { flex-direction: column; align-items: flex-start; gap: 18px; }
  .showcase__callouts--ring { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  .cover__body { flex-direction: column; text-align: left; }
  .cover__right { min-height: 220px; }
  .two-column { flex-direction: column; }
  .access-layout { flex-direction: column; }
}

@media (max-width: 820px) {
  .chrome { flex-wrap: wrap; }
  .chrome__chapters { order: 3; width: 100%; justify-content: space-between; overflow-x: auto; }
  .scene__title, .scene__accent-line { max-width: 100%; }
  .kpi-group { flex-direction: column; }
  .finance-split { flex-direction: column; }
  .pricing-cards { flex-direction: column; }
  /* !important necesario: el scale(1.02) de esta tarjeta se fija inline desde JS
     (ver comentario más arriba), y un estilo inline le gana a cualquier regla de
     media query normal — solo !important lo revierte en pantallas angostas. */
  .price-card--recommended { transform: none !important; order: -1; }
}

@media (max-height: 620px) {
  .scene__subtitle, .scene__closing { display: none; }
}