/* ---------------------------------------------------------
   PLATAFORMA · "la realidad se convierte en datos"
   Escena fija de 5 tiempos: un objeto físico hecho de partículas
   (WebGL, platform.js) fluye hacia la app web y móvil.
   --------------------------------------------------------- */
.pf {
  position: relative; color: #fff;
  background:
    linear-gradient(rgba(120, 170, 230, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(120, 170, 230, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(80% 70% at 68% 52%, #0a2d58 0, #051f3e 48%, var(--night) 100%);
  border-top: 1px solid rgba(120, 170, 230, .16);
}
.pf-scroller { position: relative; height: calc(100vh + 6 * 90vh); }
.pf-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.pf-gl { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.pf-ui {
  position: relative; z-index: 2; height: 100%; max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(300px, 27rem) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 72px);
  padding: calc(var(--header-h) + clamp(20px, 4.5vh, 48px)) var(--gutter) clamp(26px, 5.5vh, 56px);
}

/* ---------- Columna de texto ---------- */
.pf-copy { grid-column: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 0; }
.pf-head .sec-title { margin-bottom: .45em; font-size: clamp(1.8rem, 1.05rem + 1.65vw, 2.7rem); }
.pf-head .sec-lead { max-width: 40ch; font-size: .98rem; color: var(--zinc-300); }

/* Regla de 5 tramos: cada paso es un tramo medido; el relleno sigue el scroll */
.pf-rail { position: relative; margin-bottom: clamp(18px, 3.4vh, 32px); }
.pf-rail::after { content: ""; position: absolute; right: 0; bottom: 0; width: 1px; height: 14px; background: rgba(241, 244, 246, .45); }
.pf-rail-list {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  border-bottom: 1px solid rgba(241, 244, 246, .2);
  background: linear-gradient(90deg, rgba(241, 244, 246, .26) 1px, transparent 1px) 0 100% / calc(100% / 24) 6px repeat-x;
}
.pf-rb {
  position: relative; display: flex; align-items: flex-start; width: 100%; height: 44px; padding: 4px 0 0 9px;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--zinc-400);
  font-family: var(--font-display); font-stretch: 88%; font-weight: 560; font-size: .98rem; font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}
.pf-rb::before { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 14px; background: rgba(241, 244, 246, .45); transition: background-color .2s ease; }
.pf-rb.is-past { color: var(--zinc-200); }
.pf-rb.is-on { color: #fff; }
.pf-rb.is-on::before { width: 2px; height: 20px; background: var(--hivis); }
.pf-rb:focus-visible { outline: 2px solid var(--hivis); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .pf-rb:hover { color: #fff; } }
.pf-rail-fill {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--hivis);
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* Paso activo: el nombre se estira como acero bajo carga (eje wdth de Archivo) */
.pf-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.pf-step { grid-area: 1 / 1; pointer-events: none; }
.pf-step.is-on { pointer-events: auto; }
.pf-st {
  margin: 0 0 .34em; max-width: 11.5ch; color: #fff;
  font-family: var(--font-display); font-weight: 640; font-size: clamp(2rem, 1.1rem + 2.15vw, 3.3rem); line-height: .98; letter-spacing: -.018em;
  font-stretch: 62%; opacity: 0;
  transition: font-stretch .45s var(--ease-out), opacity .2s ease;
}
.pf-step.is-on .pf-st { font-stretch: 105%; opacity: 1; transition: font-stretch 1s var(--ease-out) .05s, opacity .3s ease .05s; }
.pf-step p {
  margin: 0; max-width: 40ch; font-size: .98rem; line-height: 1.55; color: var(--zinc-200);
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .3s var(--ease-out);
}
.pf-step.is-on p { opacity: 1; transform: none; transition: opacity .4s ease .16s, transform .6s var(--ease-out) .16s; }

/* ---------- Región del objeto ---------- */
.pf-obj { grid-column: 2; position: relative; min-width: 0; min-height: 0; }
.pf-photo { position: absolute; left: 50%; top: 50%; width: var(--pf-photo-w, 90%); margin: 0; aspect-ratio: 1800 / 1012; transform: translate(-50%, -50%); display: none; }
.pf-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pf-scan {
  position: absolute; top: -4%; bottom: -4%; left: 0; width: 2px; margin-left: -1px; background: #ffb36b;
  box-shadow: 0 0 10px 1px rgba(255, 125, 0, .9), 0 0 34px 6px rgba(255, 125, 0, .35); opacity: 0; will-change: transform;
}
.pf-dev { position: absolute; left: 50%; top: 50%; width: var(--pf-dev-w, 92%); transform: translate(-50%, -50%); pointer-events: none; }
.pf-laptop { position: relative; width: 86%; }
.pf-lid { padding: var(--pf-bz, 9px); border-radius: 14px; background: #08121f; box-shadow: 0 0 0 1px rgba(160, 196, 238, .26), 0 44px 80px -36px rgba(0, 6, 20, .95); }
.pf-lid .pw { border-radius: 5px; }
.pf-deck { position: relative; display: block; height: var(--pf-deck, 12px); margin: 0 -6.5%; border-radius: 2px 2px 14px 14px; background: linear-gradient(#c3cfdb, #7b8da2 55%, #3d4b5d); }
.pf-deck::before { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 38%; border-radius: 0 0 6px 6px; background: #4a596c; }

/* ---------- Pantallas de la app (sin cambios de diseño) ---------- */
/* la ventana se diseña a 700 px y platform.js la escala con zoom */
.pw { width: 700px; border-radius: 12px; overflow: hidden; background: var(--ui-bg); color: var(--ui-text); font-family: var(--font-text); }
.pw-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #e8eef5; border-bottom: 1px solid var(--ui-line); }
.pw-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #c8d3df; }
.pw-url { margin-left: 14px; padding: 3px 12px; border-radius: 6px; background: #fff; font-size: 11px; color: var(--ui-mute); }
.pw-body { display: grid; grid-template-columns: 46px 1fr; aspect-ratio: 16 / 9.6; }
.pw-side { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 0; background: #fff; border-right: 1px solid var(--ui-line); }
.pw-logo { width: 22px; height: 24px; border-radius: 4px 4px 10px 10px; background: linear-gradient(160deg, var(--ui-blue), #0b3c78); }
.pw-side i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #a9b7c7; }
.pw-side i.on { border-color: var(--ui-blue); background: rgba(29, 111, 209, .14); }
.pw-main { display: grid; grid-template-rows: 38px 1fr; min-width: 0; }
.pw-top { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--ui-line); font-size: 12px; }
.pw-crumb { color: var(--ui-mute); }
.pw-user { display: flex; align-items: center; gap: 10px; }
.pw-user b { font-weight: 600; }
.pw-bell { position: relative; width: 12px; height: 12px; border-radius: 6px 6px 2px 2px; border: 1.5px solid #6b7a8c; }
.pw-bell::after { content: ""; position: absolute; right: -4px; top: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-red); }
.pw-screens { position: relative; overflow: hidden; }
.scr { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s ease, transform .5s var(--ease-out), visibility 0s .5s; }
.scr.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .05s, transform .6s var(--ease-out) .05s, visibility 0s; }
.pw-screens .scr { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.pw-h { display: flex; align-items: center; gap: 10px; }
.pw-h b { font-size: 14px; font-weight: 650; letter-spacing: -.005em; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; color: var(--ui-mute); background: #e7edf4; }
.chip-blue { color: var(--ui-blue); background: rgba(29, 111, 209, .12); }
.chip-ok { color: var(--ui-ok); background: rgba(31, 157, 102, .14); }
.pw-card { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.pw-ct { margin: 0 0 8px; font-size: 11.5px; font-weight: 650; color: var(--ui-text); display: flex; align-items: center; gap: 8px; }
.pw-btn { display: block; margin-top: auto; padding: 7px 0; border-radius: 6px; text-align: center; font-size: 11px; font-weight: 650; color: #fff; background: var(--ui-blue); }

/* d0 · revisión */
.d0-grid { flex: 1; display: grid; grid-template-columns: 1fr 1.55fr .85fr; gap: 10px; min-height: 0; }
.d0-sum { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; font-size: 10.5px; color: var(--ui-mute); }
.d0-sum b { color: var(--ui-text); font-variant-numeric: tabular-nums; }
.d0-list ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.d0-list li { position: relative; padding: 7px 8px; border: 1px solid var(--ui-line); border-radius: 6px; font-size: 10.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.d0-list li b { white-space: nowrap; }
.d0-list li small { order: 2; flex-basis: 100%; }
.d0-list li.is-cur { border-color: var(--ui-blue); box-shadow: 0 0 0 2px rgba(29, 111, 209, .14); }
.d0-list small { color: var(--ui-mute); font-size: 10px; }
.ok-badge { order: 1; margin-left: auto; padding: 1px 6px; border-radius: 8px; font-size: 9px; font-weight: 700; color: var(--ui-ok); background: rgba(31, 157, 102, .14); }
.ok-badge.late { opacity: 0; transform: scale(.8); transition: opacity .2s ease, transform .2s var(--ease-out); }
.scr-d0.is-active .ok-badge.late { opacity: 1; transform: none; transition: opacity .3s ease 2.1s, transform .5s var(--ease-out) 2.1s; }
.d0-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.d0-photos figure { position: relative; margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 3 / 4; background: #dfe7f0; }
.d0-photos img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .2s ease, transform .3s var(--ease-out); }
.d0-photos figcaption { position: absolute; left: 5px; top: 5px; padding: 0 5px; border-radius: 6px; font-size: 9px; font-weight: 700; color: #fff; background: rgba(10, 22, 38, .7); }
.scr-d0.is-active .d0-photos img { opacity: 1; transform: none; transition: opacity .4s ease, transform .7s var(--ease-out); }
.scr-d0.is-active .d0-photos figure:nth-child(1) img { transition-delay: .2s; }
.scr-d0.is-active .d0-photos figure:nth-child(2) img { transition-delay: .45s; }
.scr-d0.is-active .d0-photos figure:nth-child(3) img { transition-delay: .7s; }
.scr-d0.is-active .d0-photos figure:nth-child(4) img { transition-delay: .95s; }
.d0-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.d0-fields span { padding: 5px 8px; border: 1px solid var(--ui-line); border-radius: 6px; font-size: 10.5px; display: grid; }
.d0-fields small { font-size: 9px; color: var(--ui-mute); }
.d0-fields .wide { grid-column: 1 / -1; }
.d0-status { display: flex; flex-direction: column; }
.d0-opts { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 10.5px; color: var(--ui-mute); }
.d0-opts li { padding: 4px 8px; border-radius: 5px; border: 1px solid transparent; }
.d0-opts .pick { transition: color .3s ease, border-color .3s ease, background-color .3s ease; }
.scr-d0.is-active .d0-opts .pick { color: var(--ui-ok); font-weight: 700; border-color: var(--ui-ok); background: rgba(31, 157, 102, .1); transition-delay: 1.5s; }
.scr-d0.is-active .pw-btn { animation: press .5s var(--ease-out) 1.8s both; }
@keyframes press { 0% { transform: none; } 40% { transform: scale(.96); background: #1559a8; } 100% { transform: none; } }

/* df · avance de fabricación */
.df-grid { flex: 1; display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; min-height: 0; }
.df-prog { display: flex; flex-direction: column; }
.df-head, .df-row { display: grid; grid-template-columns: 46px repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; }
.df-head { padding-bottom: 5px; }
.df-head small { font-size: 9.5px; line-height: 1.2; color: var(--ui-mute); }
.df-row { padding: 13px 0; border-top: 1px solid var(--ui-line); font-size: 10.5px; }
.df-row b { font-weight: 650; }
.df-bar { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 5px; align-items: center; }
.df-bar i { position: relative; height: 7px; border-radius: 4px; background: #edf1f6; overflow: hidden; }
.df-bar i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 1%); border-radius: 4px; background: var(--ui-blue); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s ease; }
.df-bar.ok i::before { background: var(--ui-ok); }
.df-bar em { white-space: nowrap; font-style: normal; font-size: 9.5px; font-weight: 650; text-align: right; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.scr-df.is-active .df-bar i::before { transform: none; transition: transform 1s var(--ease-out) .2s; }
.scr-df.is-active .df-bar:nth-of-type(2) i::before { transition-delay: .45s; }
.scr-df.is-active .df-bar:nth-of-type(3) i::before { transition-delay: .7s; }
.df-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 8px; }
.df-kpis .kpi b { font-size: 14px; }
.df-s { display: flex; flex-direction: column; }
.df-chart { display: block; width: 100%; height: auto; aspect-ratio: 200 / 120; margin-bottom: 8px; }
.df-chart .ln { vector-effect: none; stroke-width: 1.6; }
.df-s .df-kpis { grid-template-columns: 1fr 1fr; }
.df-gl { fill: none; stroke: #e7edf4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.df-plan { stroke: #a8b8ca; }
.df-chart .df-real { stroke: var(--ui-blue); stroke-width: 2.2; }
.scr-df.is-active .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-out) .2s; }
.scr-df.is-active .df-real { transition-delay: .55s; }
.dlg .df-lp { background: #a8b8ca; } .dlg .df-lr { background: var(--ui-blue); }

/* d1 · documentación */
.d1-search { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; font-size: 11px; color: var(--ui-mute); }
.d1-search i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ui-mute); }
.d1-folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fld { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; }
.fld i { grid-row: 1 / span 2; width: 28px; height: 22px; border-radius: 3px 5px 5px 5px; background: linear-gradient(#5aa7ee, var(--ui-blue)); position: relative; }
.fld i::before { content: ""; position: absolute; left: 0; top: -4px; width: 12px; height: 5px; border-radius: 3px 3px 0 0; background: #5aa7ee; }
.fld b { font-size: 11px; font-weight: 650; }
.fld small { font-size: 10px; color: var(--ui-mute); font-variant-numeric: tabular-nums; }
.d1-row { display: flex; align-items: center; gap: 12px; font-size: 11px; }
.d1-row > span:nth-child(2) { display: grid; }
.d1-row small { color: var(--ui-mute); font-size: 10px; }
.qr {
  flex: none; width: 34px; height: 34px; border-radius: 3px;
  background:
    linear-gradient(90deg, var(--ui-text) 30%, transparent 30% 40%, var(--ui-text) 40% 50%, transparent 50% 70%, var(--ui-text) 70%) 0 0 / 100% 20%,
    linear-gradient(var(--ui-text), var(--ui-text)) 0 0 / 34% 34% no-repeat,
    linear-gradient(var(--ui-text), var(--ui-text)) 100% 0 / 34% 34% no-repeat,
    linear-gradient(var(--ui-text), var(--ui-text)) 0 100% / 34% 34% no-repeat;
  outline: 3px solid #fff; outline-offset: -3px;
}
.d1-chain { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.d1-chain i {
  font-style: normal; padding: 3px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; color: var(--ui-blue); background: rgba(29, 111, 209, .1);
  opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .3s var(--ease-out);
}
.scr-d1.is-active .d1-chain i { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s var(--ease-out); }
.scr-d1.is-active .d1-chain i:nth-child(2) { transition-delay: .5s; }
.scr-d1.is-active .d1-chain i:nth-child(3) { transition-delay: .9s; }
.scr-d1.is-active .d1-chain i:nth-child(4) { transition-delay: 1.3s; }
.scr-d1.is-active .d1-chain i:nth-child(1) { transition-delay: .1s; }

/* d2 · carga */
.d2-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpi { padding: 9px 10px; border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; display: grid; gap: 2px; }
.kpi small { font-size: 10px; color: var(--ui-mute); }
.kpi b { font-family: var(--font-display); font-stretch: 100%; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.d2-gal { flex: 1; }
.d2-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.d2-photos figure { margin: 0; }
.d2-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .3s var(--ease-out); }
.d2-photos figcaption { margin-top: 4px; font-size: 10px; font-weight: 600; text-align: center; }
.scr-d2.is-active .d2-photos img { opacity: 1; transform: none; transition: opacity .4s ease, transform .6s var(--ease-out); }
.scr-d2.is-active .d2-photos figure:nth-child(2) img { transition-delay: .3s; }
.scr-d2.is-active .d2-photos figure:nth-child(3) img { transition-delay: .6s; }
.scr-d2.is-active .d2-photos figure:nth-child(4) img { transition-delay: .9s; }

/* d3 · embarques */
.d3-grid { flex: 1; display: grid; grid-template-columns: .62fr 1.38fr; gap: 10px; min-height: 0; }
.d3-bl { margin: 0; padding: 6px; list-style: none; display: grid; align-content: start; gap: 4px; }
.d3-bl li { display: flex; align-items: center; gap: 7px; padding: 6px; border-left: 3px solid var(--c, #ccc); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.d3-bl li i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.d3-bl li { border-left-color: var(--c); }
.st { margin-left: auto; padding: 1px 6px; border-radius: 8px; font-size: 9px; font-weight: 700; color: #fff; }
.st-ok { background: var(--ui-ok); }
.st-tr { background: var(--ui-blue); }
.st-pl { background: #8a99ab; }
.scr-d3.is-active .flip { animation: flipok .01s linear 2.6s forwards; }
@keyframes flipok { to { background: var(--ui-ok); } }
.d3-map { position: relative; padding: 0; overflow: hidden; background: #e9f0f7; }
.d3-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.d3-eta { position: absolute; right: 10px; bottom: 10px; width: 46%; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 16px -8px rgba(10, 30, 60, .4); display: grid; gap: 3px; }
.d3-eta small { font-size: 9.5px; color: var(--ui-mute); }
.d3-eta b { font-size: 12px; }
.d3-prog, .ph-prog { position: relative; height: 6px; border-radius: 3px; background: #dfe6ee; overflow: hidden; }
.d3-prog i, .ph-prog i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(.4); background: repeating-linear-gradient(-45deg, var(--cyan) 0 6px, #46c6e8 6px 12px); transition: transform .3s ease; }
.scr-d3.is-active .d3-prog i, .scr-m3.is-active .ph-prog i { transform: scaleX(.82); transition: transform 2.2s var(--ease-out) .3s; }

/* d4 · tablero */
.d4-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; gap: 10px; min-height: 0; }
.donut { display: block; width: 50%; margin: 0 auto 6px; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 6; }
.d-bg { stroke: #e7edf4; }
.d-a, .d-b { stroke-dasharray: 0 100; transition: stroke-dasharray .3s ease; }
.d-a { stroke: var(--ui-ok); }
.d-b { stroke: var(--ui-or); stroke-dashoffset: calc(var(--o) * -1); }
.scr-d4.is-active .d-a { stroke-dasharray: var(--v) 100; transition: stroke-dasharray 1.4s var(--ease-out) .2s; }
.scr-d4.is-active .d-b { stroke-dasharray: var(--v) 100; transition: stroke-dasharray 1s var(--ease-out) 1.2s; }
.dlg { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 10px; color: var(--ui-mute); }
.dlg i { width: 7px; height: 7px; border-radius: 50%; }
.dlg .g { background: var(--ui-ok); }
.dlg .o { background: var(--ui-or); }
.dlg b { color: var(--ui-text); font-variant-numeric: tabular-nums; }
.bars { display: grid; gap: 7px; }
.bars span { position: relative; display: block; padding-bottom: 10px; }
.bars span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 3px; background: #edf1f6; }
.bars span::before { content: ""; position: absolute; z-index: 1; left: 0; bottom: 0; height: 6px; width: calc(var(--w) * 1%); border-radius: 3px; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s ease; }
.bars em { display: block; font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--ui-text); line-height: 1.35; }
.b-ok { color: var(--ui-ok); } .b-blue { color: var(--ui-blue); } .b-or { color: var(--ui-or); } .b-red { color: var(--ui-red); }
.scr-d4.is-active .bars span::before { transform: none; transition: transform 1.1s var(--ease-out) .3s; }
.scr-d4.is-active .bars span:nth-child(2)::before { transition-delay: .45s; }
.scr-d4.is-active .bars span:nth-child(3)::before { transition-delay: .6s; }
.scr-d4.is-active .bars span:nth-child(4)::before { transition-delay: .75s; }
.d4-gantt { grid-column: 1 / -1; position: relative; }
.gantt { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.gantt li { position: relative; display: grid; grid-template-columns: 30% 1fr; align-items: center; font-size: 10px; }
.gantt em { font-style: normal; color: var(--ui-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt span { position: relative; display: block; height: 12px; margin-left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); border-radius: 3px; transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s ease; }
.g-blue { background: var(--cyan); } .g-ok { background: var(--ui-ok); } .g-or { background: var(--ui-or); }
.scr-d4.is-active .gantt span { transform: none; transition: transform .9s var(--ease-out); }
.scr-d4.is-active .gantt li:nth-child(1) span { transition-delay: .4s; }
.scr-d4.is-active .gantt li:nth-child(2) span { transition-delay: .55s; }
.scr-d4.is-active .gantt li:nth-child(3) span { transition-delay: .7s; }
.scr-d4.is-active .gantt li:nth-child(4) span { transition-delay: .85s; }
.scr-d4.is-active .gantt li:nth-child(5) span { transition-delay: 1s; }
.scr-d4.is-active .gantt li:nth-child(6) span { transition-delay: 1.15s; }
.g-today { position: absolute; top: 28px; bottom: 10px; left: calc(30% + 12px + (100% - 30% - 24px) * .44); width: 2px; background: var(--ui-red); }


/* Teléfono (214 px de diseño; platform.js lo escala con zoom) */
.pf-phone {
  position: absolute; z-index: 2; right: 0; bottom: -7%; width: 214px; aspect-ratio: 9 / 19;
  padding: 8px; border-radius: 34px; background: #0b1420;
  box-shadow: 0 30px 60px -20px rgba(0, 8, 24, .85), 0 0 0 1px rgba(160, 196, 238, .3), inset 0 0 0 2px #1d2a3a;
}

.ph-notch { position: absolute; z-index: 3; left: 50%; top: 14px; width: 30%; height: 16px; margin-left: -15%; border-radius: 10px; background: #0b1420; }
.ph-screens { position: relative; width: 100%; height: 100%; border-radius: 27px; overflow: hidden; background: var(--ui-bg); color: var(--ui-text); font-family: var(--font-text); }
.ph-screens .scr { transform: translateX(14%); }
.ph-screens .scr.is-active { transform: none; }
.ph-h { display: flex; align-items: center; gap: 8px; height: 62px; padding: 26px 12px 0; background: var(--ui-head); color: #fff; font-size: 11.5px; transition: background-color .4s ease; }
.ph-h span { font-size: 18px; line-height: 1; opacity: .8; }
.ph-h b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-m0.is-active .ph-h { background: var(--ui-ok); transition: background-color .5s ease 2.2s; }
.ph-body { padding: 10px; display: grid; gap: 8px; }
.ph-sec { margin: 2px 0 0; font-size: 10px; font-weight: 700; color: var(--ui-mute); display: flex; justify-content: space-between; }
.ph-cnt { color: var(--ui-blue); font-variant-numeric: tabular-nums; }
.ph-field { padding: 6px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--ui-line); display: grid; }
.ph-field small { font-size: 8.5px; color: var(--ui-mute); }
.ph-field b { font-size: 10.5px; font-weight: 650; }
.ph-field .tr { color: var(--ui-blue); }
.ph-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ph-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; opacity: 0; transform: scale(.92); transition: opacity .2s ease, transform .3s var(--ease-out); }
.scr-m0.is-active .ph-photos img { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s var(--ease-out); }
.scr-m0.is-active .ph-photos img:nth-child(1) { transition-delay: .25s; }
.scr-m0.is-active .ph-photos img:nth-child(2) { transition-delay: .5s; }
.scr-m0.is-active .ph-photos img:nth-child(3) { transition-delay: .75s; }
.scr-m0.is-active .ph-photos img:nth-child(4) { transition-delay: 1s; }
.ph-btn { padding: 7px 0; border-radius: 6px; text-align: center; font-size: 10px; font-weight: 700; color: #fff; background: var(--ui-blue); }
.scr-m0.is-active .ph-btn { animation: press .5s var(--ease-out) 1.6s both; }
.mf-ring { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--ui-line); }
.mf-ring svg { flex: none; width: 52px; height: 52px; transform: rotate(-90deg); }
.mf-ring circle { fill: none; stroke-width: 5; }
.mf-a { stroke: var(--ui-ok); stroke-dasharray: 0 100; transition: stroke-dasharray .3s ease; }
.scr-mf.is-active .mf-a { stroke-dasharray: var(--v) 100; transition: stroke-dasharray 1.4s var(--ease-out) .2s; }
.mf-ring > span { display: grid; }
.mf-ring b { font-family: var(--font-display); font-size: 19px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mf-ring small { font-size: 8.5px; color: var(--ui-mute); }
.mf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.mf-list li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; padding: 6px 8px 6px 24px; border-radius: 6px; background: #fff; border: 1px solid var(--ui-line); }
.mf-list li::before { content: ""; position: absolute; left: 8px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 1.5px solid #b5c2d1; transition: background-color .2s ease, border-color .2s ease; }
.mf-list b { font-size: 9.5px; line-height: 1.25; }
.mf-list small { grid-column: 1; font-size: 8px; color: var(--ui-mute); }
.mf-list .st { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; opacity: 0; transition: opacity .2s ease; }
.scr-mf.is-active .mf-list li::before { background: var(--ui-ok); border-color: var(--ui-ok); transition: background-color .25s ease, border-color .25s ease; }
.scr-mf.is-active .mf-list li.is-run::before { background: var(--ui-blue); border-color: var(--ui-blue); }
.scr-mf.is-active .mf-list .st { opacity: 1; transition: opacity .3s ease; }
.scr-mf.is-active .mf-list li:nth-child(1)::before, .scr-mf.is-active .mf-list li:nth-child(1) .st { transition-delay: .4s; }
.scr-mf.is-active .mf-list li:nth-child(2)::before, .scr-mf.is-active .mf-list li:nth-child(2) .st { transition-delay: .8s; }
.scr-mf.is-active .mf-list li:nth-child(3)::before, .scr-mf.is-active .mf-list li:nth-child(3) .st { transition-delay: 1.2s; }
.scr-mf.is-active .mf-list li:nth-child(4)::before, .scr-mf.is-active .mf-list li:nth-child(4) .st { transition-delay: 1.6s; }
.ph-scan { position: relative; display: grid; place-items: center; height: 34%; background: #0d2440; overflow: hidden; }
.qr-lg { width: 72px; height: 72px; outline-width: 5px; outline-offset: -5px; background-color: #fff; }
.ph-beam { position: absolute; left: 18%; right: 18%; height: 2px; top: 20%; background: var(--hivis); box-shadow: 0 0 12px 2px rgba(255, 125, 0, .6); }
.scr-m1.is-active .ph-beam { animation: beam 1.4s ease-in-out infinite alternate; }
@keyframes beam { to { top: 78%; } }
.ph-items { margin: 0; padding: 8px 10px; list-style: none; display: grid; gap: 5px; }
.ph-items li { position: relative; padding: 5px 8px 5px 26px; border-radius: 6px; background: #fff; border: 1px solid var(--ui-line); display: grid; }
.ph-items li::before { content: ""; position: absolute; left: 8px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 1.5px solid #b5c2d1; transition: background-color .2s ease, border-color .2s ease; }
.ph-items b { font-size: 10px; } .ph-items small { font-size: 8.5px; color: var(--ui-mute); }
.scr-m1.is-active .ph-items li::before { background: var(--ui-ok); border-color: var(--ui-ok); transition: background-color .25s ease, border-color .25s ease; }
.scr-m1.is-active .ph-items li:nth-child(1)::before { transition-delay: .4s; }
.scr-m1.is-active .ph-items li:nth-child(2)::before { transition-delay: .8s; }
.scr-m1.is-active .ph-items li:nth-child(3)::before { transition-delay: 1.2s; }
.scr-m1.is-active .ph-items li:nth-child(4)::before { transition-delay: 1.6s; }
.scr-m1.is-active .ph-items li:nth-child(5)::before { transition-delay: 2s; }
.ph-cont { margin: 0; position: relative; }
.ph-cont img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.ph-cont figcaption { position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 6px; font-size: 8.5px; font-weight: 700; color: var(--ui-text); background: rgba(255, 255, 255, .92); }
.ph-okcard { padding: 7px 8px; border-radius: 6px; background: rgba(31, 157, 102, .1); border: 1px solid rgba(31, 157, 102, .4); display: grid; gap: 1px; text-align: center; }
.ph-okcard b { font-size: 9.5px; color: var(--ui-ok); }
.ph-okcard small { font-size: 9px; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.ph-route { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px; border-radius: 6px; background: #fff; border: 1px solid var(--ui-line); }
.ph-route span { display: grid; font-size: 10px; } .ph-route small { font-size: 8.5px; color: var(--ui-mute); }
.ph-ship { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--ui-blue) 0 4px, transparent 4px 7px); position: relative; }
.ph-ship::after { content: ""; position: absolute; left: 10%; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--ui-blue); box-shadow: 0 0 0 3px rgba(29, 111, 209, .2); transition: left .3s ease; }
.scr-m3.is-active .ph-ship::after { left: 78%; transition: left 2.2s var(--ease-out) .3s; }
.ph-chart { width: 100%; height: 130px; border-radius: 6px; background: #fff; border: 1px solid var(--ui-line); }
.ln { fill: none; stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.ln-a { stroke: #22b8a8; } .ln-b { stroke: var(--ui-head); }
.scr-m4.is-active .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-out) .2s; }
.scr-m4.is-active .ln-b { transition-delay: .6s; }
.ph-leg { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 9.5px; color: var(--ui-mute); }
.ph-leg span, .dlg span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ph-leg i { width: 8px; height: 8px; border-radius: 50%; } .ph-leg .a { background: #22b8a8; } .ph-leg .b { background: var(--ui-head); }
.ph-leg b { color: var(--ui-text); font-variant-numeric: tabular-nums; }
/* ---------- Cotas (callouts) y líneas ---------- */
.pf-fx { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.pf-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pf-lines path { fill: none; stroke: rgba(241, 244, 246, .82); stroke-width: 1; }
.pf-lines .ln-or { stroke: var(--hivis); stroke-width: 2; }
.pf-lines .ln-glow { stroke: rgba(255, 125, 0, .28); stroke-width: 8; stroke-linecap: round; }
.pf-lines circle { fill: var(--night); stroke: #fff; stroke-width: 1.5; }
.pf-co {
  position: absolute; left: 0; top: 0; display: grid; gap: 1px; padding: 4px 7px 5px; border-radius: 2px; opacity: 0; white-space: nowrap;
  background: rgba(4, 20, 39, .74); will-change: transform, opacity;
}
.pf-co.is-w { text-align: right; }
.pf-co small { font-size: .76rem; line-height: 1.2; color: var(--zinc-300); }
.pf-co b { font-family: var(--font-display); font-stretch: 92%; font-weight: 620; font-size: 1.08rem; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; }

/* ---------- Modos ---------- */
/* Con WebGL: foto y dispositivos los gobierna platform.js por opacidad */
.pf.is-gl .pf-photo { display: block; }
.pf.is-gl .pf-dev { opacity: 0; }
/* Movimiento reducido: foto fija y luego los dispositivos, con fundidos simples */
.pf.is-rm .pf-photo { display: block; transition: opacity .4s ease; }
.pf.is-rm .pf-dev { transition: opacity .4s ease; }
.pf.is-rm:not(.show-photo) .pf-photo, .pf.is-rm.show-photo .pf-dev { opacity: 0; }
.pf:not(.is-gl) .pf-fx { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .pf-ui { grid-template-columns: minmax(270px, 21rem) minmax(0, 1fr); column-gap: 28px; }
  .pf-head .sec-title { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.2rem); }
}
@media (max-height: 820px) and (min-width: 901px) {
  .pf-head .sec-lead { font-size: .92rem; line-height: 1.5; }
  .pf-st { font-size: clamp(1.8rem, 1rem + 1.9vw, 2.7rem); }
}
@media (max-width: 900px) {
  .pf-scroller { height: calc(100vh + 6 * 83.333vh); height: calc(100svh + 6 * 83.333svh); }
  .pf-ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 8px; padding: calc(var(--header-h) + 8px) var(--gutter) 16px; }
  .pf-copy { justify-content: flex-start; gap: 6px; }
  .pf-head .sec-title { margin: 0; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.7rem); }
  .pf-head .sec-lead { display: none; }
  .pf-rail { margin-bottom: 10px; }
  .pf-rb { height: 34px; padding-top: 6px; font-size: .9rem; }
  .pf-rb::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }   /* área táctil de 44 px */
  .pf-st { max-width: 15ch; margin-bottom: .22em; font-size: clamp(1.5rem, 1.1rem + 2vw, 1.9rem); line-height: 1; }
  .pf-step p { font-size: .88rem; line-height: 1.45; }
  .pf-obj { grid-column: 1; grid-row: 2; }
  .pf-laptop { display: none; }
  .pf-dev { width: auto; }
  .pf-phone { position: relative; right: auto; bottom: auto; }
  .pf-co small { font-size: .7rem; }
  .pf-co b { font-size: .95rem; }
}
/* Teléfono horizontal: texto a la izquierda y dispositivo a la derecha, para que el teléfono no quede diminuto */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .pf-ui { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); grid-template-rows: minmax(0, 1fr); column-gap: 24px; padding-bottom: 12px; }
  .pf-obj { grid-column: 2; grid-row: 1; }
  .pf-st { max-width: 18ch; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-st, .pf-step.is-on .pf-st { font-stretch: 100%; transition: opacity .2s ease; }
  .pf-step p, .pf-step.is-on p { transform: none; transition: opacity .2s ease; }
  .scr, .scr.is-active, .ph-screens .scr { transform: none !important; transition-duration: .2s !important; transition-delay: 0s !important; }
  .scr *, .scr *::before, .scr *::after { transition-delay: 0s !important; transition-duration: .2s !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}