/* Landing comercial con el lenguaje visual de PymeStore: secciones oscuras y claras alternadas,
   producto en web + celular, dibujos planos que explican cada paso y movimiento que se puede pausar.
   Se carga solo en index.html, después de site.css; la guía de la ley no lo usa. */

body.site {
  --f-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bg: #f6f7f2;
  --paper: #ffffff;
  --tint: #e4efeb;
  --dark: #0e1b2e;
  --dark-2: #16283f;
  --dark-line: #263a56;
  --mint: #8ce9cf;
  --mint-2: #c7f3e6;
  --amber-soft: #fde9b8;
  background: var(--bg);
}
body.site h1,
body.site h2,
body.site h3 {
  letter-spacing: -0.02em;
}
body.site h2 {
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 800;
  line-height: 1.08;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Dibujos: un mismo trazo para toda la página */
.i-bg {
  fill: var(--tint);
}
.i-s {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i-w {
  fill: #fff;
}
.i-t {
  fill: var(--mint-2);
}
.i-a {
  fill: var(--amber-soft);
}

/* Botones y rótulos */
.btn-mint {
  --b: var(--mint);
  --c: var(--dark);
  --bd: var(--mint);
  font-weight: 700;
}
.btn-mint:hover {
  --b: #a9f0dc;
  border-color: #a9f0dc;
}
.btn-line {
  --b: transparent;
  --c: #fff;
  --bd: rgba(255, 255, 255, 0.4);
}
.btn-line:hover {
  border-color: #fff;
}
.btn-line-dark {
  --b: transparent;
  --c: var(--ink);
  --bd: var(--ink);
}
body.site .btn {
  border-radius: 999px;
}
.kicker {
  font: 700 12.5px/1.4 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: 12px;
}
.kicker.mint {
  color: var(--mint);
}
.hl {
  color: var(--mint);
}
.split-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 24px 56px;
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.split-aside {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}
.section-dark .split-aside {
  color: #b8c6d8;
}
.sub-h {
  font-size: clamp(22px, 2.6vw, 28px);
  margin: clamp(40px, 5vw, 64px) 0 18px;
}
body.site .section-dark {
  background: var(--dark);
}
body.site .section-tint {
  background: var(--tint);
}
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--soft);
  flex: none;
}
.dot.ok {
  background: #19b38d;
}
.dot.warn {
  background: #e3a21a;
}
.ok-t {
  fill: var(--teal-600);
  color: var(--teal-600);
}
.warn-t {
  fill: #8a5a07;
  color: #8a5a07;
}

/* Navegación oscura */
body.site .nav {
  background: rgba(14, 27, 46, 0.94);
  border-bottom: 1px solid var(--dark-line);
}
body.site .logo.light {
  color: #fff;
}
body.site .nav-links a {
  color: #c9d5e4;
}
body.site .nav-links a:hover,
body.site .nav-links a[aria-current],
body.site .mobile-nav a[aria-current] {
  color: var(--mint);
}
body.site .mobile-nav {
  background: var(--dark);
  border-top-color: var(--dark-line);
}
body.site .mobile-nav a {
  color: #e6edf6;
  border-bottom-color: var(--dark-line);
}

/* ── Hero: web + celular ─────────────────────────────────────────────────── */
body.site .hero {
  background:
    radial-gradient(900px 520px at 80% 10%, rgba(140, 233, 207, 0.16), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(44, 90, 160, 0.25), transparent 60%),
    var(--dark);
  color: #d9e1ec;
  padding: clamp(40px, 6vw, 80px) 0 28px;
  overflow: hidden;
}
body.site .hero h1 {
  color: #fff;
  font-size: clamp(38px, 5.6vw, 66px);
  line-height: 1.04;
  margin: 0 0 20px;
}
body.site .hero .lead {
  color: #c4d0df;
}
.hero-in {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}
.pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pills li {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--dark-line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13.5px;
  color: #c9d5e4;
}
.hero-stage {
  position: relative;
  min-height: 470px;
  padding: 28px 0 40px;
}
.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.vi-tag.light {
  color: #8fa3bd;
}
.pause-motion {
  min-height: 40px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--dark-line);
  background: rgba(255, 255, 255, 0.05);
  color: #e6edf6;
  font: 600 14px var(--f-body);
  cursor: pointer;
}
.pause-motion:hover {
  border-color: var(--mint);
}

/* Navegador */
.browser {
  position: relative;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(3, 10, 22, 0.45), 0 2px 6px rgba(3, 10, 22, 0.2);
  overflow: hidden;
  color: var(--text);
  max-width: 560px;
}
.browser.tilt {
  margin-right: 90px;
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
  transform-origin: left center;
}
.browser.wide {
  max-width: none;
}
.b-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #eef2f6;
  border-bottom: 1px solid var(--line);
}
.b-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cdd5df;
}
.b-bar p {
  margin-left: 10px;
  font: 600 12px var(--f-body);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b-body {
  display: grid;
  gap: 12px;
  padding: 18px;
}
.b-k {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.b-h {
  font: 800 20px/1.2 var(--f-display);
  color: var(--ink);
  margin-top: -6px;
}
.b-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.b-kpis > div {
  padding: 10px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  min-width: 0;
}
.b-kpis p {
  font-size: 11.5px;
  color: var(--muted);
}
.b-kpis b {
  display: block;
  font: 800 clamp(13px, 1.3vw, 16px)/1.25 var(--f-display);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease;
}
.b-kpis .hold {
  background: #fff7e6;
  border-color: #f0d9a6;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}
.b-kpis .hold b {
  color: #8a5a07;
}
.b-kpis .hold.done {
  background: var(--teal-50);
  border-color: var(--teal-100);
}
.b-kpis .hold.done b {
  color: var(--teal-600);
}
.b-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.b-rows li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 13.5px;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}
.b-rows .ico {
  width: 34px;
  height: 23px;
}
.b-rows b {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.b-rows em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff4dc;
  color: #8a5a07;
  white-space: nowrap;
}
.b-rows em.ok {
  background: var(--teal-50);
  color: var(--teal-600);
}
.b-rows li.diff {
  background: #fffaf0;
  border-color: #f0d9a6;
}
.b-btn {
  justify-self: start;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.b-versions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 13.5px;
}
.b-versions li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.b-versions li.now {
  border-color: var(--teal-100);
  background: var(--teal-50);
  color: var(--ink);
  font-weight: 600;
}
.b-versions .v {
  font: 700 12px var(--f-mono);
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
}
.b-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.b-compare > div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.b-compare > div.now {
  border-color: var(--teal);
  background: var(--teal-50);
}
.b-compare svg {
  width: 72px;
  height: 48px;
}
.b-diff {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #8a5a07;
}
.b-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.b-actions span {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 13px;
  font-weight: 600;
}
.b-actions .pri {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Celular */
.phone {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 236px;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 30px 14px 18px;
  border-radius: 36px;
  background: #fff;
  border: 8px solid #0a1424;
  box-shadow: 0 30px 60px rgba(3, 10, 22, 0.5);
  color: var(--text);
}
.p-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 70px;
  height: 16px;
  margin-left: -35px;
  border-radius: 999px;
  background: #0a1424;
}
.p-time {
  position: absolute;
  top: 8px;
  left: 18px;
  font: 700 11px var(--f-body);
  color: var(--ink);
}
.p-k {
  font: 700 11px/1.3 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-600);
}
.p-h {
  font: 800 16px/1.25 var(--f-display);
  color: var(--ink);
}
.p-task {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff7e6;
  border: 1px solid #f0d9a6;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}
.p-task.done {
  background: var(--teal-50);
  border-color: var(--teal-100);
}
.p-tk {
  font-size: 11px;
  color: var(--muted);
}
.p-tt {
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
}
.p-ts {
  font-size: 12.5px;
  color: var(--ink-2);
}
.p-btn {
  margin-top: 4px;
  justify-self: start;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.p-task.done .p-btn {
  background: var(--teal);
}
.p-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  padding: 6px 2px;
  border-top: 1px solid var(--line);
}
.p-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.p-grid p {
  display: grid;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.p-grid p.warn {
  background: #fff7e6;
  border-color: #f0d9a6;
}
.p-grid span {
  font-size: 11px;
  color: var(--muted);
}
.p-grid b {
  font: 800 14px var(--f-display);
  color: var(--ink);
}

/* Etiquetas flotantes */
.float-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 700 13px var(--f-body);
  box-shadow: 0 14px 30px rgba(3, 10, 22, 0.3);
  animation: chip-float 5s ease-in-out infinite;
  white-space: nowrap;
  transition: background-color 0.5s ease;
}
.float-chip.c1 {
  top: 0;
  left: 24px;
}
.float-chip.c2 {
  bottom: 78px;
  left: -8px;
  animation-delay: -2.5s;
}
.float-chip.c3 {
  top: 24px;
  left: 0;
}
.float-chip.amber-chip {
  background: #fff4dc;
}
.float-chip.amber-chip.done {
  background: var(--mint-2);
}
.float-chip.amber-chip.done .dot {
  background: #19b38d;
}
@keyframes chip-float {
  50% {
    transform: translateY(-8px);
  }
}
.is-paused .float-chip,
.is-paused .mg-art svg.play * {
  animation-play-state: paused !important;
}

/* Antecedentes que ordena */
.docs-band {
  background: var(--dark-2);
  color: #c9d5e4;
  padding: 26px 0;
}
.docs-in {
  display: grid;
  gap: 4px;
}
.docs-band .kicker {
  color: #8fa3bd;
  margin-bottom: 10px;
}
.doc-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.doc-chips li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--dark-line);
  font-weight: 600;
  font-size: 14.5px;
  color: #fff;
}
.doc-chips svg {
  width: 48px;
  height: 32px;
}

/* ── Caso ────────────────────────────────────────────────────────────────── */
body.site .case-label {
  background: #fff;
  border-color: var(--line);
}
body.site .case-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.case-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 22px;
  border-radius: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(14, 27, 46, 0.04);
  min-width: 0;
}
.cc-k {
  font: 700 12.5px var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
body.site .chain li {
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-left: 0;
  margin-left: 0;
  padding: 8px 0;
}
body.site .chain li::before {
  display: none;
}
body.site .chain li + li {
  border-top: 1px dashed var(--line-2);
}
body.site .chain svg {
  width: 54px;
  height: 36px;
}
body.site .chain li div {
  display: grid;
  min-width: 0;
}
body.site .src3 > div {
  display: grid;
  justify-items: start;
  gap: 2px;
}
body.site .src3 svg {
  width: 48px;
  height: 32px;
  margin-bottom: 4px;
}
.money {
  display: grid;
  gap: 10px;
}
.money > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.money .big {
  font-family: var(--f-display);
  font-weight: 800;
}

body.site .journey {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  counter-reset: none;
}
body.site .journey li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: start;
  padding: 14px;
  border-radius: 20px;
  background: var(--paper);
  position: relative;
}
body.site .journey li svg {
  width: 100%;
  height: auto;
  aspect-ratio: 96 / 64;
}
body.site .journey li > b {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font: 700 12px var(--f-mono);
}
body.site .journey li p {
  display: grid;
  gap: 2px;
  font-size: 14.5px;
  line-height: 1.35;
}
body.site .journey li p strong {
  color: var(--ink);
}
body.site .journey li p span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal-600);
}

body.site .seg {
  border-radius: 999px;
  padding: 5px;
}
body.site .seg button {
  border-radius: 999px;
  padding: 8px 18px;
}
body.site .ending {
  border-radius: 24px;
  padding: 22px;
}
body.site .ending-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
body.site #fin-b .ending-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.site .ending-steps li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 14.5px;
  position: relative;
}
body.site .ending-steps li svg {
  width: 100%;
  height: auto;
  aspect-ratio: 96 / 64;
}
body.site .ending-result {
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 600;
}
body.site table.dates {
  border-radius: 18px;
}

/* ── Recorrido animado ───────────────────────────────────────────────────── */
body.site .mg {
  border: 0;
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(3, 10, 22, 0.4);
}
body.site .mg-stages button {
  border-radius: 999px;
}
body.site .mg-stages button.is-done {
  background: var(--mint-2);
  border-color: var(--mint-2);
}
body.site .mg-scene {
  background: #f3f6f4;
}
body.site .mg-st::before {
  display: none;
}
.st-art {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 87px;
  height: 58px;
  margin-left: -43px;
}
.mg-explain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
body.site .mg-caption {
  border-top: 0;
  align-content: center;
  padding: 24px 26px;
}
.mg-art {
  padding: 18px;
  display: grid;
  place-items: center;
  background: var(--tint);
}
.mg-art svg {
  width: 100%;
  max-width: 420px;
  height: auto;
}
.a-bg {
  fill: #fff;
}
.a-t {
  font: 600 11px var(--f-body);
  text-anchor: middle;
  fill: var(--ink);
}
.a-t.big {
  font: 800 14px var(--f-display);
}
.a-amber {
  fill: #fff4dc;
}
.a-miss {
  fill: #fde9b8;
  stroke: #e3a21a;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.a-scan {
  fill: rgba(25, 179, 141, 0.18);
}
/* Cada escena se arma al entrar en su etapa. Las animaciones solo tienen punto de partida: sin
   movimiento (o con movimiento reducido) el dibujo queda en su estado final. */
.mg-art svg g,
.mg-art svg path {
  transform-box: fill-box;
  transform-origin: center;
}
.mg-art svg.play .a-drop {
  animation: a-drop 0.7s cubic-bezier(0.22, 0.7, 0.25, 1) both;
}
.mg-art svg.play .d2 {
  animation-delay: 0.35s;
}
.mg-art svg.play .d3 {
  animation-delay: 0.7s;
}
.mg-art svg.play .a-slide {
  animation: a-slide 0.8s ease both;
}
.mg-art svg.play .a-tags {
  animation: a-fade 0.6s ease 0.7s both;
}
.mg-art svg.play .a-col {
  animation: a-rise 0.6s ease both;
}
.mg-art svg.play .a-col.c2 {
  animation-delay: 0.25s;
}
.mg-art svg.play .a-col.c3 {
  animation-delay: 0.5s;
}
.mg-art svg.play .a-scan {
  animation: a-scan 1.6s ease 0.8s both;
}
.mg-art svg.play .a-miss {
  animation: a-blink 1s ease 2.2s 2 both;
}
.mg-art svg.play .a-task {
  animation: a-slide 0.7s ease both;
}
.mg-art svg.play .a-arrow {
  animation: a-fade 0.4s ease 0.7s both;
}
.mg-art svg.play .a-back {
  animation: a-back 0.8s ease 1.3s both;
}
.mg-art svg.play .a-glass {
  animation: a-glass 1.6s ease both;
}
.mg-art svg.play .a-scale {
  animation: a-tilt 1.4s ease 1s both;
}
.mg-art svg.play .a-card {
  animation: a-card 1.1s cubic-bezier(0.22, 0.7, 0.25, 1) 0.3s both;
}
@keyframes a-drop {
  from {
    opacity: 0;
    transform: translateY(-36px);
  }
}
@keyframes a-slide {
  from {
    opacity: 0;
    transform: translateX(-34px);
  }
}
@keyframes a-back {
  from {
    opacity: 0;
    transform: translate(-150px, -20px);
  }
}
@keyframes a-fade {
  from {
    opacity: 0;
  }
}
@keyframes a-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@keyframes a-scan {
  from {
    transform: translateY(-46px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
}
@keyframes a-blink {
  50% {
    opacity: 0.35;
  }
}
@keyframes a-glass {
  from {
    transform: translate(-70px, -36px);
  }
}
@keyframes a-tilt {
  from {
    transform: rotate(-8deg);
  }
  60% {
    transform: rotate(3deg);
  }
}
@keyframes a-card {
  from {
    opacity: 0;
    transform: translateX(-110px);
  }
}
body.site .mg-text {
  background: var(--dark-2);
  border-color: var(--dark-line);
  color: #c9d5e4;
}
body.site .mg-text summary {
  color: #fff;
}
body.site .mg-text ol {
  color: #c9d5e4;
}

/* ── Producto ────────────────────────────────────────────────────────────── */
.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.features li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.features li:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(14, 27, 46, 0.08);
}
.features svg {
  width: 100%;
  height: auto;
  aspect-ratio: 96 / 64;
  order: 1;
}
.f-n {
  order: 2;
  font: 700 12px var(--f-mono);
  color: var(--teal-600);
}
.features h3 {
  order: 3;
  font-size: 17px;
}
.features p {
  order: 4;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ── Ley ─────────────────────────────────────────────────────────────────── */
body.site .law {
  border: 0;
  border-radius: 28px;
  padding: clamp(14px, 2vw, 24px);
}
body.site .law-tabs button {
  border-radius: 16px;
}
body.site .ls li {
  border-radius: 18px;
  background: var(--paper);
}
body.site .ls li svg {
  width: 72px;
  height: 48px;
  margin-bottom: 6px;
}
body.site .ls li.ls-amber {
  background: #fff7e6;
}

/* ── Roles ───────────────────────────────────────────────────────────────── */
.role-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.role-in h2 {
  margin-bottom: 16px;
}
.role-in .lead {
  margin-bottom: 8px;
}
.role-art {
  position: relative;
  min-width: 0;
}
.steps-n {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.steps-n li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.steps-n b {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mint-2);
  color: var(--ink);
  font: 700 13px var(--f-mono);
}
.steps-n div {
  display: grid;
  gap: 2px;
}
.steps-n strong {
  color: var(--ink);
  font-size: 17px;
}
.steps-n span {
  color: var(--ink-2);
}
.steps-n.light b {
  background: var(--mint);
}
.steps-n.light strong {
  color: #fff;
}
.steps-n.light span {
  color: #b8c6d8;
}
.big-phone {
  position: relative;
  right: auto;
  bottom: auto;
  margin: 0 auto;
  width: 290px;
  padding: 36px 18px 22px;
  gap: 12px;
}
.role-sec:not(.section-dark) .big-phone {
  box-shadow: 0 30px 60px rgba(14, 27, 46, 0.22);
}
.role-sec:not(.section-dark) .browser {
  box-shadow: 0 30px 60px rgba(14, 27, 46, 0.16), 0 1px 3px rgba(14, 27, 46, 0.1);
}
.role-art .float-chip.c3 {
  left: max(0px, calc(50% - 230px));
}

/* Banda */
.band-mint {
  background: var(--mint);
  color: var(--ink);
  padding: clamp(40px, 6vw, 72px) 0;
}
.band-mint h2 {
  margin-bottom: 26px;
}
.band-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.band-cols div {
  display: grid;
  gap: 4px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}
.band-cols strong {
  font: 800 19px var(--f-display);
}

/* Qué hay hoy */
.integr {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.integr article {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 22px;
  border-radius: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.integr h3 {
  font-size: 20px;
}
.integr p {
  color: var(--ink-2);
}
.badge {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.badge.ok {
  background: var(--teal-50);
  border-color: var(--teal-100);
  color: var(--teal-600);
}
.sim-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sim-list li {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px dashed var(--line-2);
  font-size: 13.5px;
  color: var(--ink-2);
}

/* Contacto, preguntas, cierre */
body.site .contact-intro h2 {
  font-size: clamp(30px, 3.8vw, 46px);
}
body.site .contact-intro .lead {
  color: #c4d0df;
}
body.site .wizard {
  border-radius: 26px;
  padding: clamp(18px, 2.4vw, 28px);
}
body.site .opt {
  border-radius: 14px;
}
body.site .opt:has(input:checked) {
  background: var(--mint-2);
  border-color: var(--teal);
}
.faq-h {
  font-size: clamp(28px, 3.4vw, 40px) !important;
}
body.site .faq details {
  border-radius: 18px;
}
body.site .closing {
  background: var(--dark-2);
  border-top: 0;
  padding: clamp(44px, 6vw, 72px) 0;
}
body.site .closing h2 {
  color: #fff;
  font-size: clamp(26px, 3.4vw, 40px);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.site .journey {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  .hero-in {
    grid-template-columns: 1fr;
  }
  .hero-stage {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }
  .split-head,
  .mg-explain {
    grid-template-columns: 1fr;
  }
  body.site .case-grid {
    grid-template-columns: 1fr 1fr;
  }
  .money-card {
    grid-column: 1 / -1;
  }
  .features,
  body.site .journey {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.site .ending-steps,
  body.site #fin-b .ending-steps {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 860px) {
  .role-in {
    grid-template-columns: 1fr;
  }
  .role-in.rev > .role-art {
    order: 2;
  }
  .integr,
  .band-cols {
    grid-template-columns: 1fr;
  }
  body.site .mg-st {
    padding-top: 74px;
  }
}
@media (max-width: 640px) {
  body.site .case-grid {
    grid-template-columns: 1fr;
  }
  .features,
  body.site .journey {
    grid-template-columns: 1fr 1fr;
  }
  body.site .ending-steps,
  body.site #fin-b .ending-steps {
    grid-template-columns: 1fr;
  }
  body.site .ending-steps li {
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
  }
  body.site .ending-result {
    border-radius: 16px;
  }
  .browser.tilt {
    transform: none;
    margin-right: 0;
  }
  .hero-stage {
    min-height: 0;
    padding: 30px 0 230px;
  }
  .phone {
    width: 200px;
    padding: 28px 12px 14px;
    right: 4px;
  }
  .hero-stage .phone .p-line {
    display: none;
  }
  .float-chip.c2 {
    left: 0;
    bottom: 120px;
  }
  .b-rows li {
    grid-template-columns: 26px minmax(0, 1fr) 18px auto;
    gap: 6px;
    padding: 5px 8px;
    font-size: 12.5px;
  }
  .b-rows .ico {
    width: 26px;
    height: 18px;
  }
  .b-rows em {
    font-size: 10.5px;
    padding: 2px 6px;
  }
}
@media (max-width: 520px) {
  .b-kpis {
    grid-template-columns: 1fr 1fr;
  }
  .b-kpis > div:first-child {
    grid-column: 1 / -1;
  }
  .float-chip {
    font-size: 12px;
    padding: 7px 12px;
  }
  .float-chip.c1 {
    left: 8px;
  }
  .big-phone {
    width: min(290px, 100%);
  }
  .role-art .float-chip.c3 {
    position: static;
    margin-bottom: 12px;
  }
  .doc-chips svg {
    width: 39px;
    height: 26px;
  }
  .doc-chips li {
    font-size: 13.5px;
  }
  .b-compare {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 380px) {
  .features,
  body.site .journey {
    grid-template-columns: 1fr;
  }
  body.site .journey li {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
  }
  .phone {
    width: 180px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .float-chip,
  .mg-art svg.play * {
    animation: none !important;
  }
  .browser.tilt {
    transform: none;
  }
}

/* Ajustes tras revisión visual */
body.site .mg h3,
body.site .mg h4 {
  color: var(--ink);
}
body.site .finding-line {
  display: block;
  line-height: 1.5;
}
body.site .finding-line .chip {
  margin-right: 4px;
}
body.site .ending-steps li svg {
  max-height: 104px;
}
@media (min-width: 641px) {
  .hero-stage .phone {
    width: 214px;
  }
  .browser.tilt {
    margin-right: 190px;
  }
}
body.site .hero .kicker {
  color: var(--mint);
}
.role-art .float-chip.c3 {
  top: -22px;
}
.band-cols span {
  line-height: 1.5;
}
@media (max-width: 520px) {
  .features {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .features li {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    padding: 12px;
  }
  .features svg {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .features .f-n,
  .features h3,
  .features p {
    grid-column: 2;
  }
}
.integr .f-n {
  order: 0;
}
body.site .role-in .btn {
  white-space: normal;
  text-align: center;
}
@media (max-width: 400px) {
  body.site .btn {
    white-space: normal;
    text-align: center;
  }
}

/* Bajada pareja: mismo ritmo vertical en todas las secciones y aparición suave de cada bloque */
body.site .section,
body.site .band-mint,
body.site .closing {
  padding: clamp(64px, 8vw, 104px) 0;
  scroll-margin-top: 66px;
}
body.site .docs-band {
  padding: 28px 0;
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.7, 0.25, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
.logo-word {
  display: inline;
}

/* Al bajar, cada sección se acomoda justo bajo la barra de navegación (solo cuando se está cerca
   de su inicio: las secciones largas se recorren libremente). Se activa recién cuando nav.mjs ya
   dejó la página en la sección pedida; antes, el ajuste devolvía la página al inicio. */
html:has(body.site) {
  scroll-padding-top: 66px;
}
html.nav-ready:has(body.site) {
  scroll-snap-type: y proximity;
}
/* Las partes de la página son el inicio y cada sección; las franjas delgadas (documentos, "Recibido
   no es validado", cierre) acompañan a la parte vecina y no se detienen solas. */
body.site main > :is(.hero, .section) {
  scroll-snap-align: start;
  scroll-margin-top: 0;
}
/* En escritorio cada sección ocupa al menos una pantalla bajo la barra, con su contenido centrado
   en vertical: al bajar parte por parte, cada una se ve completa y encuadrada igual. */
@media (min-width: 900px) and (min-height: 640px) {
  body.site main > .section {
    /* Márgenes según el alto de la pantalla: en un monitor de ~900 px de alto la sección entera cabe. */
    --sec-pad: clamp(28px, 5svh, 104px);
    min-height: calc(100svh - 66px);
    padding-block: var(--sec-pad);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.site main > .section .split-head {
    margin-bottom: clamp(20px, 3.5svh, 48px);
  }
  /* Para quién es: el diagrama de la cadena se ajusta al alto disponible. */
  body.site #para-quien .chain-art svg {
    max-height: 26svh;
  }
  body.site #para-quien .chain-notes {
    margin-block: clamp(12px, 2svh, 24px) 0;
  }
  /* Funcionalidades: dos filas de tarjetas en una pantalla. */
  body.site .features li > svg {
    height: clamp(56px, 9svh, 112px);
  }
  /* Pantallas: la captura se achica para que pestañas, captura y pie se vean juntos. */
  /* Un solo ancho para pestañas, marco y pie, calculado del alto disponible y la proporción de
     las capturas (1366×900): al cambiar de pestaña nada cambia de tamaño, aunque la imagen aún cargue. */
  body.site .screens {
    --shot-w: min(100%, calc((100svh - 66px - 2 * var(--sec-pad) - 290px) * 1.5178));
    justify-items: center;
  }
  body.site .screens > .seg,
  body.site .screens > .screen {
    width: var(--shot-w);
    margin-inline: auto;
  }
  body.site .screens > .seg {
    justify-content: center;
  }
  body.site .screen .browser.wide img {
    width: 100%;
    height: auto;
    aspect-ratio: 1366 / 900;
  }
}
/* Notebooks de poca altura (≈768 px): títulos y dibujos algo menores para que cada parte quepa. */
@media (min-width: 900px) and (min-height: 640px) and (max-height: 820px) {
  body.site main > .section h2 {
    font-size: min(5.6svh, 50px);
  }
  body.site .features li > svg {
    height: 7svh;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.site) {
    scroll-behavior: auto;
  }
}

/* ── V2 · secciones para la empresa subcontratista ───────────────────────── */
.chain-art .mg-art {
  border-radius: 24px;
  padding: clamp(10px, 2vw, 18px);
}
.chain-art .mg-art svg {
  max-width: 100%;
}
.chain-notes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 24px;
}
body.site .flow .mg-explain {
  border-top: 0;
}
body.site .flow .mg-art {
  min-height: 260px;
}
.screens {
  display: grid;
  gap: 14px;
}
.screen {
  margin: 0;
  display: grid;
  gap: 10px;
}
.screen img {
  display: block;
  width: 100%;
  height: auto;
}
.screen figcaption {
  color: var(--ink-2);
  font-size: 15px;
}
.learn article .btn {
  margin-top: 4px;
}
body.site .section-dark .integr article {
  background: var(--dark-2);
  border-color: var(--dark-line);
  color: #c9d5e4;
}
body.site .section-dark .integr article h3 {
  color: #fff;
}
body.site .section-dark .integr article p {
  color: #b8c6d8;
}
body.site .section-dark .integr .f-n {
  color: var(--mint);
}
.cobro-art svg,
.role-art .mg-art svg {
  width: 100%;
  max-width: 460px;
}
.role-art .mg-art {
  border-radius: 24px;
}
.page-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 64px) !important;
}
.page-hero h1 {
  color: #fff;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.06;
  margin: 0 0 16px;
  max-width: 20ch;
}
.page-hero .lead {
  color: #c4d0df;
}
.case-label.dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--dark-line);
  color: #c9d5e4;
}
.card-like {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(18px, 2.4vw, 26px);
  display: grid;
  gap: 14px;
  min-width: 0;
}
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.facts li {
  display: grid;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.facts span {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.facts strong {
  color: var(--ink);
}
body.site .journey.stages-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.integr.cases article p:first-of-type {
  font-style: italic;
}
.cal-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cal-list li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.cal-list li.is-law {
  border-color: var(--teal-100);
  background: var(--teal-50);
}
.cal-date {
  font-size: 13px;
  color: var(--ink-2);
}
.zip-rows li {
  grid-template-columns: 34px minmax(0, 1fr) 0 auto;
}
@media (max-width: 960px) {
  .chain-notes,
  body.site .journey.stages-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .chain-notes,
  body.site .journey.stages-4 {
    grid-template-columns: 1fr;
  }
  .chain-art .mg-art svg {
    min-width: 0;
  }
  .cal-list li {
    grid-template-columns: 1fr auto;
  }
  .cal-date {
    grid-column: 1 / -1;
  }
  body.site .flow .mg-art {
    min-height: 0;
  }
}
.chain-v {
  display: none;
}
@media (max-width: 640px) {
  .chain-art svg:not(.chain-v) {
    display: none;
  }
  .chain-art svg.chain-v {
    display: block;
    max-width: 360px;
    margin: 0 auto;
  }
}
body.site .case-label.dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--dark-line);
  color: #c9d5e4;
}

/* ── Cómo funciona · escena única ─────────────────────────────────────────────
   Un mismo documento (la planilla de cotizaciones de septiembre) recorre los siete pasos: su
   posición cambia con una transición y cada paso arma su parte alrededor. Sin animación (o con
   movimiento reducido) todo queda en su estado final. */
body.site .flow .mg-art {
  padding: 16px;
}
body.site .flow .mg-art svg.fs {
  max-width: 560px;
  overflow: visible;
}
.fs .fs-bg {
  fill: #fff;
}
.fs .fs-t {
  font: 600 12px var(--f-body);
  fill: var(--ink);
  text-anchor: middle;
}
.fs .fs-t.l {
  text-anchor: start;
}
.fs .fs-t.end {
  text-anchor: end;
}
.fs .fs-t.xs {
  font-size: 10.5px;
  font-weight: 700;
}
.fs .fs-t.xxs {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.fs .fs-t.b {
  font: 800 15px var(--f-display);
}
.fs .fs-t.mono {
  font-family: var(--f-mono);
  font-size: 11.5px;
}
.fs .fs-t.mono.sm {
  font-size: 9.5px;
  font-weight: 700;
}
.fs .fs-t.m {
  fill: #5d6b80;
}
.fs .fs-t.inv {
  fill: #fff;
}
.fs text.ok {
  fill: #0b7a78;
}
.fs .fs-t.warn {
  fill: #8a5200;
}
.fs .f-w {
  fill: #fff;
}
.fs .f-mint {
  fill: #c7f3e6;
}
.fs .f-mint2 {
  fill: #8ce9cf;
}
.fs .f-tint {
  fill: #e4efeb;
}
.fs .f-teal {
  fill: #19b38d;
}
.fs .f-amber {
  fill: #fdeec8;
}
.fs .f-amber2 {
  fill: #f2b544;
}
.fs .f-ink {
  fill: #0e1b2e;
}
.fs .fs-l,
.fs .fs-pp,
.fs .fs-pf {
  stroke: #0e1b2e;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.fs path.fs-l:not([class*='f-']) {
  fill: none;
}
.fs .fs-l.thin {
  stroke-width: 1.3;
}
.fs .fs-l.soft {
  stroke: #c9d2de;
}
.fs path.ok {
  stroke: #0b7a78;
  stroke-width: 2;
}
.fs .fs-pp {
  fill: #fff;
}
.fs .fs-pf {
  fill: #e4efeb;
}
.fs .fs-cells {
  fill: none;
  stroke: #c7e6dc;
  stroke-width: 5;
  stroke-linecap: round;
}
.fs .fs-drop {
  fill: #f3faf7;
  stroke: #19b38d;
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}
.fs .fs-slot {
  fill: rgba(255, 255, 255, 0.55);
  stroke: #0e1b2e;
  stroke-opacity: 0.32;
  stroke-width: 1.3;
  stroke-dasharray: 4 4;
}
.fs .fs-miss {
  fill: #fdeec8;
  stroke: #e3a21a;
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
.fs .fs-dash {
  fill: none;
  stroke: #e3a21a;
  stroke-width: 2;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}
.fs .fs-dash.solid {
  stroke-dasharray: none;
}
.fs .s1-scan {
  fill: #8ce9cf;
  opacity: 0;
}
.fs .draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Capas de cada paso: entra la del paso actual, sale la anterior. */
.fs .lay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.fs[data-s='0'] .lay[data-k='0'],
.fs[data-s='1'] .lay[data-k='1'],
.fs[data-s='4'] .lay[data-k='4'],
.fs[data-s='5'] .lay[data-k='5'],
.fs[data-s='6'] .lay[data-k='6'],
.fs[data-s='7'] .lay[data-k='7'],
.fs[data-s='8'] .lay[data-k='8'],
.fs[data-s='9'] .lay[data-k='9'] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease 0.12s, visibility 0s;
}

/* El documento protagonista: la misma pieza en otro lugar en cada paso. */
.fs .fs-doc {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(214px, 116px) scale(0.64);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.fs[data-s='1'] .fs-doc {
  transform: translate(34px, 66px) scale(1.35);
}
.fs[data-s='4'] .fs-doc {
  transform: translate(300px, 40px) scale(1.4);
  opacity: 0;
}
.fs[data-s='5'] .fs-doc {
  transform: translate(44px, 80px) scale(1.05);
}
.fs[data-s='6'] .fs-doc {
  transform: translate(217px, 96px) scale(0.5);
  transition-delay: 0.5s;
}
/* En los pasos económicos (presupuesto, avance, estado de pago) la planilla espera fuera de escena. */
.fs[data-s='7'] .fs-doc,
.fs[data-s='8'] .fs-doc,
.fs[data-s='9'] .fs-doc {
  transform: translate(214px, 150px) scale(0.5);
  opacity: 0;
}
.fs .fs-doc-in {
  transition: opacity 0.4s ease;
}
.fs[data-s='5'] .fs-doc-in {
  opacity: 0.72;
}
.fs .doc-miss,
.fs .doc-stamp {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fs[data-s='5'] .doc-miss,
.fs[data-s='5'] .doc-stamp {
  opacity: 1;
  transition-delay: 0.7s;
}

/* Armado de cada paso: solo puntos de partida; el estado final es el dibujo tal cual. */
.fs.play[data-s='0'] .s0-pdf {
  animation: fs-fly-l 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.fs.play[data-s='0'] .s0-foto {
  animation: fs-fly-r 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.fs.play[data-s='0'] .fs-doc-in {
  animation: fs-fly-t 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}
.fs.play[data-s='0'] .s0-bar {
  animation: fs-grow 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.9s both;
}
.fs.play[data-s='0'] .s0-saved {
  animation: fs-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 2.3s both;
}
.fs.play[data-s='1'] .s1-scan {
  animation: fs-scan 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.25s both;
}
.fs.play[data-s='1'] .lay[data-k='1'] .draw {
  animation: fs-draw 0.55s ease-out both;
}
.fs.play[data-s='1'] .lay[data-k='1'] .d1 {
  animation-delay: 0.9s;
}
.fs.play[data-s='1'] .lay[data-k='1'] .d2 {
  animation-delay: 1.05s;
}
.fs.play[data-s='1'] .lay[data-k='1'] .d3 {
  animation-delay: 1.2s;
}
.fs.play[data-s='1'] .lay[data-k='1'] .d4 {
  animation-delay: 1.35s;
}
.fs.play[data-s='1'] .s1-tag {
  animation: fs-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fs.play[data-s='1'] .t1 {
  animation-delay: 1s;
}
.fs.play[data-s='1'] .t2 {
  animation-delay: 1.15s;
}
.fs.play[data-s='1'] .t3 {
  animation-delay: 1.3s;
}
.fs.play[data-s='1'] .t4 {
  animation-delay: 1.45s;
}
.fs.play[data-s='1'] .t5 {
  animation-delay: 1.65s;
}
.fs.play[data-s='1'] .s1-meter {
  animation: fs-grow 1s cubic-bezier(0.16, 1, 0.3, 1) 1.9s both;
}
.fs.play[data-s='4'] .s4-a {
  animation: fs-fly-l 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.fs.play[data-s='4'] .s4-b {
  animation: fs-fly-r 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.fs.play[data-s='4'] .s4-links .draw {
  animation: fs-draw 0.4s ease-out both;
}
.fs.play[data-s='4'] .s4-links .d1 {
  animation-delay: 0.75s;
}
.fs.play[data-s='4'] .s4-links .d2 {
  animation-delay: 0.9s;
}
.fs.play[data-s='4'] .s4-links .d3 {
  animation-delay: 1.05s;
}
.fs.play[data-s='4'] .s4-links .d4 {
  animation-delay: 1.2s;
}
.fs.play[data-s='4'] .s4-links .d5 {
  animation-delay: 1.35s;
}
.fs.play[data-s='4'] .s4-links .fs-dash {
  animation: fs-fade 0.4s ease 1.65s both;
}
.fs.play[data-s='4'] .s4-alert {
  animation: fs-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 2s both, fs-pulse 1.1s ease 2.6s 2;
}
.fs.play[data-s='5'] .lay[data-k='5'] .d1 {
  animation: fs-draw 0.5s ease-out 0.5s both;
}
.fs.play[data-s='5'] .s5-v2 {
  animation: fs-fly-r 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}
.fs.play[data-s='5'] .s5-row {
  animation: fs-fade 0.6s ease 1.6s both;
}
.fs.play[data-s='5'] .s5-ok {
  animation: fs-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 2s both;
}
.fs.play[data-s='5'] .lay[data-k='5'] .d2 {
  animation: fs-draw 0.45s ease-out 2.35s both;
}
.fs.play[data-s='6'] .s6-back {
  animation: fs-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.fs.play[data-s='6'] .s6-in.i1 {
  animation: fs-fly-t 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.fs.play[data-s='6'] .s6-in.i2 {
  animation: fs-fly-t 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}
.fs.play[data-s='6'] .s6-front {
  animation: fs-front 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.15s both;
}
.fs.play[data-s='6'] .s6-list {
  animation: fs-fade 0.5s ease 1.6s both;
}
.fs.play[data-s='6'] .s6-zip {
  animation: fs-fly-r 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.75s both;
}
/* 1 · Contrato: el contrato entrega sus partidas y el total se suma. */
.fs.play[data-s='7'] .s7-doc {
  animation: fs-fly-l 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.fs.play[data-s='7'] .lay[data-k='7'] .d1 {
  animation: fs-draw 0.45s ease-out 0.7s both;
}
.fs.play[data-s='7'] .s7-card {
  animation: fs-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}
.fs.play[data-s='7'] .s7-row {
  animation: fs-slide 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.3s both;
}
.fs.play[data-s='7'] .s7-row.r2 {
  animation-delay: 1.5s;
}
.fs.play[data-s='7'] .s7-row.r3 {
  animation-delay: 1.7s;
}
.fs.play[data-s='7'] .s7-total {
  animation: fs-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 2.2s both;
}
.fs.play[data-s='7'] .s7-margin {
  animation: fs-fade 0.6s ease 2.8s both;
}

/* 2 · Avance: las barras crecen; la foto aterriza en la partida que respalda. */
.fs.play[data-s='8'] .s8-card {
  animation: fs-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.fs.play[data-s='8'] .s8-bar {
  animation: fs-grow 1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}
.fs.play[data-s='8'] .s8-bar.b2 {
  animation-delay: 1.1s;
}
.fs.play[data-s='8'] .s8-photo {
  animation: fs-fly-t 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.9s both;
}
.fs.play[data-s='8'] .s8-total {
  animation: fs-fade 0.6s ease 2.7s both;
}

/* 7 · Estado de pago: cada línea entra con su origen; al final, el monto a presentar. */
.fs.play[data-s='9'] .s9-card {
  animation: fs-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.fs.play[data-s='9'] .s9-l {
  animation: fs-slide 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}
.fs.play[data-s='9'] .s9-l.l2 {
  animation-delay: 1.2s;
}
.fs.play[data-s='9'] .s9-l.l3 {
  animation-delay: 1.7s;
}
.fs.play[data-s='9'] .s9-rule {
  animation: fs-grow 0.5s ease-out 2.2s both;
}
.fs.play[data-s='9'] .s9-net {
  animation: fs-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1) 2.6s both;
}

/* 8 · Cobras: tras la carpeta, el pago registrado. */
.fs.play[data-s='6'] .s6-paid {
  animation: fs-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1) 2.6s both;
}

.fs .s0-bar,
.fs .s1-meter,
.fs .s8-bar,
.fs .s9-rule {
  transform-origin: left center;
}
.fs .s7-total,
.fs .s9-net,
.fs .s6-paid {
  transform-origin: center;
  transform-box: fill-box;
}
.fs .fs-t.big-n {
  font: 800 24px var(--f-display);
  fill: #0b7a78;
}
@keyframes fs-fly-l {
  from {
    opacity: 0;
    transform: translate(-60px, -18px) rotate(-10deg);
  }
}
@keyframes fs-fly-r {
  from {
    opacity: 0;
    transform: translate(60px, -18px) rotate(8deg);
  }
}
@keyframes fs-fly-t {
  from {
    opacity: 0;
    transform: translateY(-70px) rotate(-6deg);
  }
}
@keyframes fs-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes fs-slide {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
}
@keyframes fs-fade {
  from {
    opacity: 0;
  }
}
@keyframes fs-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes fs-front {
  from {
    opacity: 0;
    transform: translateY(34px);
  }
}
@keyframes fs-draw {
  0% {
    stroke-dashoffset: 1;
    stroke-opacity: 0;
  }
  2% {
    stroke-opacity: 1;
  }
}
@keyframes fs-grow {
  from {
    transform: scaleX(0);
  }
}
@keyframes fs-glow {
  50% {
    fill: #fff4dc;
    stroke-opacity: 0.8;
  }
}
@keyframes fs-pulse {
  50% {
    transform: scale(1.12);
  }
}
@keyframes fs-scan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  15% {
    opacity: 0.55;
  }
  85% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translateY(142px);
  }
}

/* Funcionalidades: cada tarjeta entra en cascada y su dibujo se arma (barras, sellos, camino). */
.fi .i-dash {
  stroke-dasharray: 4 5;
}
.features .fi {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.features li:hover .fi {
  transform: translateY(-2px) rotate(-1deg);
}
.fi .fi-bar,
.fi .fi-pop {
  transform-box: fill-box;
}
.fi .fi-bar {
  transform-origin: left center;
}
.fi .fi-pop {
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .features.play li {
    animation: fs-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 70ms + 0.1s) both;
  }
  .features.play .fi-bar {
    animation: fs-grow 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 70ms + 0.55s) both;
  }
  .features.play .fi-pop {
    animation: fs-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 70ms + 0.8s) both;
  }
  .features.play .i-dash {
    animation: fi-walk 1.4s linear calc(var(--i, 0) * 70ms + 0.6s) both;
  }
  .features li:hover .fi-bar {
    animation: fs-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .features li:hover .fi-pop {
    animation: fs-pulse 0.8s ease both;
  }
  .features li:hover .i-dash {
    animation: fi-walk 1s linear infinite;
  }
}
@keyframes fi-walk {
  from {
    stroke-dashoffset: 36;
  }
}

/* Caso en la landing: contrato, avance y estado de pago se arman en orden hasta "Pagado". */
.case-fs {
  width: 100%;
  height: auto;
  overflow: visible;
}
.case-fs .cs-seg,
.case-fs .cs-bar {
  transform-box: fill-box;
  transform-origin: left center;
}
.case-fs .cs-ok,
.case-fs .cs-net,
.case-fs .cs-st {
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .case-fs.play .cs-c {
    animation: fs-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
  }
  .case-fs.play .cs-c.c2 {
    animation-delay: 0.9s;
  }
  .case-fs.play .cs-c.c3 {
    animation-delay: 2.2s;
  }
  .case-fs.play .cs-seg {
    animation: fs-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
  }
  .case-fs.play .cs-seg.s2 {
    animation-delay: 0.62s;
  }
  .case-fs.play .cs-seg.s3 {
    animation-delay: 0.74s;
  }
  .case-fs.play .cs-bar {
    animation: fs-grow 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.3s both;
  }
  .case-fs.play .cs-ok {
    animation: fs-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.9s both;
  }
  .case-fs.play .cs-net {
    animation: fs-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1) 2.7s both;
  }
  .case-fs.play .cs-st {
    animation: fs-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) 3.1s both;
  }
  .case-fs.play .cs-st.t2 {
    animation-delay: 3.4s;
  }
  .case-fs.play .cs-st.t3 {
    animation-delay: 3.7s;
  }
  .case-fs.play .cs-st.t4 {
    animation: fs-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 4s both, fs-pulse 1s ease 4.6s 2;
  }
}

/* En el celular los ocho pasos van en una sola fila que se desliza; el paso activo queda a la vista. */
@media (max-width: 700px) {
  body.site .flow .mg-stages {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-padding-inline: 16px;
    padding-bottom: 2px;
  }
  body.site .flow .mg-stages::-webkit-scrollbar {
    display: none;
  }
  body.site .flow .mg-stages button {
    flex: none;
    white-space: nowrap;
    padding: 6px 12px;
  }
}

/* Para quién es: la cadena se arma y luego circula. La carpeta con el estado de pago sube a quien
   contrata; el pago baja a tu empresa. Con movimiento reducido queda el dibujo quieto. */
.pq-fs {
  width: 100%;
  height: auto;
  overflow: visible;
}
.pq-fs .pq-lane {
  stroke-dasharray: 4 6;
}
@media (prefers-reduced-motion: no-preference) {
  .pq-fs.play .pq-c {
    animation: fs-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
  }
  .pq-fs.play .pq-c.c2 {
    animation-delay: 0.3s;
  }
  .pq-fs.play .pq-c.c3 {
    animation: fs-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
    transform-box: fill-box;
    transform-origin: center;
  }
  .pq-fs.play .pq-c.c4 {
    animation-delay: 0.8s;
  }
  .pq-fs.play .pq-ar {
    animation: fs-fade 0.4s ease 1s both;
  }
  .pq-fs.play .pq-lane {
    animation: pq-lane 1.2s linear 1.2s infinite;
  }
  .pq-fs.play .pq-up {
    animation: pq-up 6s cubic-bezier(0.45, 0, 0.25, 1) 1.4s infinite both;
  }
  .pq-fs.play .pq-down {
    animation: pq-down 6s cubic-bezier(0.45, 0, 0.25, 1) 1.4s infinite both;
  }
  .pq-fs.play .pq-up.v {
    animation-name: pq-up-v;
  }
  .pq-fs.play .pq-down.v {
    animation-name: pq-down-v;
  }
}
.is-paused .pq-fs * {
  animation-play-state: paused !important;
}
@keyframes pq-lane {
  to {
    stroke-dashoffset: -20;
  }
}
@keyframes pq-up {
  0% {
    opacity: 0;
    transform: translate(0, 10px);
  }
  8% {
    opacity: 1;
    transform: translate(0, 0);
  }
  30% {
    transform: translate(-106px, -8px);
  }
  44% {
    opacity: 1;
    transform: translate(-212px, 0);
  }
  50%,
  100% {
    opacity: 0;
    transform: translate(-212px, 10px);
  }
}
@keyframes pq-down {
  0%,
  50% {
    opacity: 0;
    transform: translate(0, -10px);
  }
  58% {
    opacity: 1;
    transform: translate(0, 0);
  }
  80% {
    transform: translate(106px, 8px);
  }
  94% {
    opacity: 1;
    transform: translate(212px, 0);
  }
  100% {
    opacity: 0;
    transform: translate(212px, -10px);
  }
}
@keyframes pq-up-v {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
    transform: translateY(0);
  }
  44% {
    opacity: 1;
    transform: translateY(-100px);
  }
  50%,
  100% {
    opacity: 0;
    transform: translateY(-100px);
  }
}
@keyframes pq-down-v {
  0%,
  50% {
    opacity: 0;
    transform: translateY(0);
  }
  58% {
    opacity: 1;
  }
  94% {
    opacity: 1;
    transform: translateY(100px);
  }
  100% {
    opacity: 0;
    transform: translateY(100px);
  }
}

/* Hero: la perspectiva se mantiene; solo se mueven las filas por dentro, una a la vez. */
.hero-foot {
  justify-content: flex-end;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-stage.hs-ready .b-rows li {
    animation: hs-enter 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero-stage.hs-ready .b-rows li:nth-child(2) { animation-delay: 0.3s; }
  .hero-stage.hs-ready .b-rows li:nth-child(3) { animation-delay: 0.6s; }
  .hero-stage.hs-ready .b-rows li:nth-child(4) { animation-delay: 0.9s; }
  .b-rows li.hs-flash {
    animation: hs-flash 2.4s ease-out;
  }
  .b-rows li.hs-flash em {
    animation: hs-pop 1s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .is-paused .b-rows li,
  .is-paused .b-rows li em {
    animation: none !important;
  }
}
@keyframes hs-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes hs-flash {
  0% { box-shadow: 0 0 0 0 rgba(111, 211, 207, 0); background-color: rgba(111, 211, 207, 0.35); }
  60% { box-shadow: 0 0 0 6px rgba(111, 211, 207, 0.25); }
  100% { box-shadow: 0 0 0 10px rgba(111, 211, 207, 0); }
}
@keyframes hs-pop {
  0% { transform: scale(0.7); }
  100% { transform: scale(1); }
}

/* Hero: navegador, celular y etiquetas comparten la misma perspectiva (un solo plano inclinado,
   cada pieza a distinta profundidad). En pantallas angostas todo vuelve a quedar plano. */
@media (min-width: 961px) {
  .hero-stage {
    transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
    transform-origin: left center;
    transform-style: preserve-3d;
  }
  .hero-stage .browser.tilt {
    transform: none;
    transform-style: preserve-3d;
  }
  /* El celular mira de frente: contrarresta la inclinación del conjunto. */
  .hero-stage .phone {
    transform: translateZ(46px) rotateX(-3deg) rotateY(9deg);
    transform-origin: center;
  }
  .hero-stage .float-chip {
    animation-name: hs-chip-float;
    transform: translateZ(80px);
  }
}
@keyframes hs-chip-float {
  0%, 100% { transform: translateZ(80px); }
  50% { transform: translate3d(0, -8px, 80px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage .float-chip {
    animation: none !important;
  }
}
.hero-foot {
  position: relative;
  z-index: 5;
  margin-top: 28px;
}

/* Celular del hero: aspecto de teléfono real (bisel fino con canto, isla, barra de estado,
   barra de pestañas, reflejo en el vidrio). Solo dentro del hero; el resto de celulares no cambia. */
.hero-stage .phone {
  border: 0;
  border-radius: 38px;
  padding: 46px 12px 22px;
  gap: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px #4a5b78,
    0 0 0 5px #0a1222,
    0 0 0 6px #2b3b55,
    0 38px 64px rgba(3, 10, 22, 0.55),
    0 10px 22px rgba(3, 10, 22, 0.35);
}
.hero-stage .phone::before,
.hero-stage .phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #2b3b55;
}
.hero-stage .phone::before {
  left: -8px;
  top: 92px;
  height: 46px;
  box-shadow: 0 60px 0 #2b3b55;
}
.hero-stage .phone::after {
  right: -8px;
  top: 120px;
  height: 64px;
}
.hero-stage .p-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 28%, rgba(255, 255, 255, 0) 46%);
  z-index: 3;
}
.hero-stage .p-notch {
  top: 10px;
  width: 78px;
  height: 22px;
  margin-left: -39px;
  background: radial-gradient(circle at 80% 50%, #1b2a44 0 3px, transparent 3.5px), #05080f;
}
.hero-stage .p-status {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  font: 700 11.5px/1 var(--f-body);
  color: var(--ink);
}
.hero-stage .p-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  fill: currentColor;
}
.hero-stage .p-home {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 84px;
  height: 4px;
  margin-left: -42px;
  border-radius: 2px;
  background: #0a1222;
}
.hero-stage .p-task {
  box-shadow: 0 1px 2px rgba(15, 27, 46, 0.06);
}

/* Contenido: la misma vista de Inicio que tiene la aplicación en el celular. */
.hero-stage .p-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 2px -12px 4px;
  padding: 0 14px 8px;
  border-bottom: 1px solid var(--line);
  font: 600 12px var(--f-body);
  color: var(--ink);
}
.hero-stage .p-menu {
  font-weight: 700;
}
.hero-stage .p-k {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--teal-600);
}
.hero-stage .p-hi {
  font: 800 19px/1.1 var(--f-display);
  color: var(--ink);
}
.hero-stage .p-h {
  font: 700 13px/1.3 var(--f-display);
}
.hero-stage .p-task {
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #f0d9a6;
  box-shadow: 0 0 0 3px rgba(242, 181, 68, 0.18);
}
.hero-stage .p-task.done {
  border-color: var(--teal-100);
  box-shadow: 0 0 0 3px rgba(25, 179, 141, 0.14);
}
.hero-stage .p-next {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--ink);
}
.hero-stage .p-next span {
  font-size: 9.5px;
  color: var(--teal-600);
  text-decoration: underline;
}
.hero-stage .p-item {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
}
.hero-stage .p-chip {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff1d6;
  border: 1px solid #f0d9a6;
  font: 700 9.5px var(--f-body);
  color: #8a5a00;
}
.hero-stage .p-task.done .p-chip {
  background: var(--teal-50);
  border-color: var(--teal-100);
  color: var(--teal-700, var(--teal-600));
}
.hero-stage .p-tt {
  font-size: 12px;
  line-height: 1.3;
}
.hero-stage .p-ts {
  font-size: 10.5px;
  color: var(--ink-2);
}
.hero-stage .p-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-stage .p-btn {
  margin: 0;
  padding: 6px 14px;
  border-radius: 9px;
  background: var(--teal-600);
  color: #fff;
  font: 700 11px var(--f-body);
}
.hero-stage .p-task.done .p-btn {
  background: var(--teal-600);
}
.hero-stage .p-link {
  font: 600 11px var(--f-body);
  color: var(--ink);
}
.hero-stage .p-peek {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-size: 10.5px;
  color: var(--ink);
}
.hero-stage .p-open {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-stage .hs-swap {
    animation: hs-swap 0.9s ease-out;
  }
  .hero-stage .p-task,
  .hero-stage .p-chip,
  .hero-stage .p-btn,
  .hero-stage .b-rows li,
  .hero-stage .b-rows em,
  .hero-stage .b-kpis > div {
    transition: background-color 0.9s ease, border-color 0.9s ease, color 0.9s ease, box-shadow 0.9s ease;
  }
  .is-paused .hero-stage .hs-swap {
    animation: none;
  }
}
@keyframes hs-swap {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}