/* KairSun Web — beat 62: onboarding en la home (elegir → bautizar → plantar).
 *
 * Vende el onboarding ANTES que cualquier feature: tres mini-teléfonos
 * conectados por una constelación, con los sprites reales del onboarding
 * (Golden Retriever, Gato Naranja, Kitsune bebé) y la corrección clave:
 * **Kitsune no es la mascota por defecto — es una skin Legendary**.
 * Evidencia en docs/screens/62_onboarding_beat.md y docs/screens/47_onboarding.md.
 *
 * Contrato:
 * - Sin JS, sin estilos inline, sin `!important`.
 * - Animaciones CSS finitas con estado final estable (`both`). En
 *   `prefers-reduced-motion` se apagan con `animation: none` y queda el
 *   cuadro final (nombre escrito, semilla plantada, brote crecido, lluvia
 *   postal) — marketing.css congela duraciones con `!important`, pero con
 *   `animation: none` la animación deja de aplicar su fill.
 * - Movimiento solo con `transform`/`opacity` (los latidos viven en pseudos,
 *   la semilla/lluvia viajan con translate3d; nada de `top` ni box-shadow por
 *   frame). Entradas por scroll con `animation-timeline: view()`.
 * - marketing.css fuerza `.phone-screen { background: #09090b !important }`:
 *   el gradiente nocturno del marco va en `.kob-aurora`, no en el screen.
 * - Reutiliza tokens y piezas de marketing.css (`.section`, `.wrap`,
 *   `.section-title`, `.eyebrow`, `.btn`, `.phone-bezel`, `.phone-island`,
 *   `.phone-screen`); no redefine nada del sitio.
 * - Foco visible heredado (`:focus-visible` global). Solo el CTA es
 *   interactivo: los mini-teléfonos son visuales y van `aria-hidden`.
 * - Responsive: 3 columnas ≥ 820px; constelación vertical centrada debajo.
 *   Diseñado 320–1440px.
 */

.kob {
  --kob-gold: var(--gold, #F5C451);
  --kob-gold-hi: var(--gold-hi, #FFE9B8);
  --kob-ink: var(--gold-ink, #2B1D00);
  --kob-night: #17123A;
  --kob-night-deep: #05040C;
  --kob-violet: #A78BFA;
  --kob-water: #7CE3FF;
  --kob-line: rgba(245, 196, 81, 0.38);
  /* Motion: alias de marketing.css (con fallback), mismo lenguaje que el
   * resto del sitio. */
  --kob-t-fast: var(--dur-1, 140ms);
  --kob-t-mid: var(--dur-2, 240ms);
  --kob-t-slow: var(--dur-3, 420ms);
  --kob-ease: var(--ease-spring, cubic-bezier(0.2, 0.85, 0.25, 1));
  --kob-ease-out: var(--ease-out, cubic-bezier(0.22, 0.9, 0.24, 1));
  --kob-lift: var(--lift-3, -5px);
  --kob-stagger: 70ms;
  position: relative;
  /* Si alguien ancla a #primer-minuto, el título no queda bajo header+dock. */
  scroll-margin-top: calc(var(--header-h, 64px) + 96px);
}

/* Halo suave detrás de la escena: cinematic, sin fauna huérfana. */
.kob::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 6% 0 auto;
  height: 74%;
  pointer-events: none;
  background:
    radial-gradient(46% 52% at 50% 44%, rgba(139, 92, 246, 0.14), transparent 70%),
    radial-gradient(30% 34% at 14% 32%, rgba(245, 196, 81, 0.08), transparent 70%),
    radial-gradient(30% 34% at 86% 32%, rgba(45, 212, 191, 0.08), transparent 70%);
}

.kob-head,
.kob-steps,
.kob-cta {
  position: relative;
  z-index: 1;
}

/* ── Cabecera: dos frases clave y nada más ─────────────────────────────── */

.kob-head {
  max-width: 58ch;
  margin: 0 auto;
  text-align: center;
}
.kob-head .section-title {
  margin-bottom: 10px;
  text-wrap: balance;
}
.kob-deck {
  margin: 0 auto;
  max-width: 54ch;
  color: var(--text-2);
  font-size: 1.05rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.kob-deck strong { color: var(--text); }

/* ── Constelación: línea punteada + nodos que laten en secuencia ───────── */

.kob-steps {
  position: relative;
  list-style: none;
  margin: 42px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}
.kob-steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 20px;
  left: 6%;
  right: 6%;
  border-top: 2px dashed var(--kob-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.kob-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.kob-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(245, 196, 81, 0.55);
  background:
    radial-gradient(circle at 50% 32%, rgba(245, 196, 81, 0.28), rgba(23, 18, 58, 0.94) 72%),
    #14132B;
  box-shadow: 0 0 0 6px rgba(2, 13, 26, 0.92), 0 0 10px rgba(245, 196, 81, 0.18);
  color: var(--kob-gold-hi);
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--kob-t-fast) var(--kob-ease-out),
    transform var(--kob-t-mid) var(--kob-ease);
}
/* Látido por OPACIDAD/TRANSFORM (compositor), no por box-shadow. */
.kob-node::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(245, 196, 81, 0.6);
  pointer-events: none;
  opacity: 0;
  animation: kob-node-pulse 3.2s ease-in-out 0s 2 both;
}
.kob-step:nth-child(2) .kob-node::after { animation-delay: 0.35s; }
.kob-step:nth-child(3) .kob-node::after { animation-delay: 0.7s; }

.kob-item {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 14px;
}

.kob-cap {
  margin: 0;
  max-width: 30ch;
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.kob-cap b {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 800;
  transition: color var(--kob-t-fast) var(--kob-ease-out);
}

/* ── Mini-teléfonos (marco real de marketing.css, interior propio) ─────── */

.kob-phone {
  width: min(100%, 196px);
  container-type: inline-size; /* la escena escala con el ancho del teléfono */
  transition: transform var(--kob-t-mid) var(--kob-ease);
}

.kob-screen {
  padding: 24px 10px 12px;
  gap: 8px;
  /* Escalado al aspect-ratio del bezel (9/19.2): los px quedan de fallback. */
  padding: 12.2cqw 5.1cqw 6.1cqw;
  gap: 4.1cqw;
  /* marketing.css fuerza `.phone-screen { background: #09090b !important }`:
   * el gradiente nocturno vive en .kob-aurora (sin !important, capa propia). */
}

.kob-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 15% 8%, rgba(167, 139, 250, 0.30), transparent 70%),
    radial-gradient(50% 36% at 92% 30%, rgba(124, 227, 255, 0.14), transparent 70%),
    radial-gradient(56% 38% at 55% 100%, rgba(244, 114, 182, 0.12), transparent 70%),
    linear-gradient(180deg, var(--kob-night) 0%, #0B0918 45%, var(--kob-night-deep) 100%);
}
.kob-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
  background-image:
    radial-gradient(1px 1px at 22px 30px, rgba(255, 255, 255, 0.9), transparent 55%),
    radial-gradient(1px 1px at 84px 14px, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(1.3px 1.3px at 128px 62px, rgba(255, 255, 255, 0.75), transparent 55%),
    radial-gradient(1px 1px at 52px 104px, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(1px 1px at 150px 118px, rgba(255, 255, 255, 0.6), transparent 55%);
  background-size: 176px 140px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 80%);
}

.kob-mini {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* ── Paso 1 · elegir: perro / gato elegidos por vos; Kitsune, Legendary ── */

.kob-screen--pick { justify-content: center; }
.kob-picks {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}
.kob-pick {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 3px 7px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}
.kob-pick img { height: 54px; height: 27.5cqw; width: auto; }
.kob-pick b { font-size: 12px; font-weight: 800; letter-spacing: 0.02em; }
.kob-pick small {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--kob-violet);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* "LEGENDARY" no ensancha la tarjeta: guionado primero, corte como último
   * recurso. Antes 6.5px; ahora ≥12px sin truncar ni romper a mitad. */
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.kob-pick--dog {
  border-color: rgba(245, 196, 81, 0.85);
  background: linear-gradient(180deg, rgba(245, 196, 81, 0.24), rgba(245, 196, 81, 0.06));
}
/* Resplandor de la carta elegida: capa estática + opacidad animada. */
.kob-pick--dog::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 22px rgba(245, 196, 81, 0.5);
  opacity: 0;
  animation: kob-pick-glow 2.6s ease-in-out 0.5s 2 both;
}
.kob-pick--kit {
  opacity: 0.82;
  border-color: rgba(167, 139, 250, 0.55);
  border-style: dashed;
  filter: saturate(0.85);
}
.kob-paw {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 16px;
  width: 8.2cqw;
  height: 16px;
  height: 8.2cqw;
  background-color: var(--kob-gold);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  -webkit-mask-image: url("/assets/images/screens/onboarding/icon-paw.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("/assets/images/screens/onboarding/icon-paw.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.kob-chips {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}
.kob-chips span {
  min-height: 18px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kob-chips .is-on {
  border-color: transparent;
  background: linear-gradient(180deg, var(--kob-gold-hi), #E8A93E);
  color: var(--kob-ink);
}

/* ── Paso 2 · bautizar: nombre con escritura y cursor CSS ──────────────── */

.kob-screen--name {
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.kob-petface {
  position: relative;
  z-index: 1;
  width: 74px;
  width: 37.5cqw;
}
.kob-petface img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
  animation: kob-bob 3.2s ease-in-out 0.2s 3 both;
}
.kob-namebox {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  min-height: 15.3cqw;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(167, 139, 250, 0.6);
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 16px rgba(139, 92, 246, 0.25);
}
.kob-typed {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  animation: kob-type 0.9s steps(4, end) 1s 1 both;
}
.kob-caret {
  width: 2px;
  height: 13px;
  background: var(--kob-gold);
  animation: kob-blink 1s linear 0.1s 5 both;
}

/* ── Paso 3 · plantar: semilla → hoyo que late → brote y primera lluvia ── */

/* flex-start: el microcopy del paso queda arriba como en los pasos 1-2; con
 * flex-end caía detrás de .kob-ground (mismo z-index, después en el DOM). */
.kob-screen--plant { justify-content: flex-start; }
.kob-ground {
  position: absolute;
  z-index: 1;
  left: -10%;
  right: -10%;
  /* Sin bleed inferior: el overflow oculto del screen ya redondea la loma.
   * Antes bottom:-8% sumaba 32px de scrollHeight = "paso 3 recortado". */
  bottom: 0;
  height: 46%;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  background:
    radial-gradient(72% 92% at 50% 0%, rgba(52, 211, 153, 0.4), transparent 66%),
    linear-gradient(180deg, #17242F, #0A0F16 70%);
  box-shadow: inset 0 2px 0 rgba(124, 227, 255, 0.22);
}
.kob-hole {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 34%;
  translate: -50% 0;
  width: 66px;
  width: 33.7cqw;
  height: 26px;
  height: 13.3cqw;
  border-radius: 50%;
  border: 2px solid rgba(245, 196, 81, 0.7);
  background: radial-gradient(closest-side, #140D04, rgba(59, 42, 24, 0.92));
  box-shadow: 0 0 10px rgba(245, 196, 81, 0.25);
  animation: kob-hole 2.4s ease-in-out 0.6s 3 both;
}
.kob-ripple {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(245, 196, 81, 0.75);
  opacity: 0;
  animation: kob-ripple 2.4s ease-out 1s 2 both;
}
.kob-seed {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 8%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 30px;
  width: 15.3cqw;
  height: 30px;
  height: 15.3cqw;
  border-radius: 55% 45% 50% 50% / 60% 62% 38% 40%;
  background: linear-gradient(140deg, #C9A27A, #6D4C41);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.4),
    0 0 14px rgba(245, 196, 81, 0.3);
  opacity: 0;
  animation: kob-seed 1.4s cubic-bezier(0.45, 0.05, 0.85, 0.6) 1.6s 1 both;
}
.kob-ico-seed {
  width: 20px;
  width: 10.2cqw;
  height: 20px;
  height: 10.2cqw;
  background-color: var(--kob-gold-hi);
  -webkit-mask-image: url("/assets/images/screens/onboarding/icon-seed.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("/assets/images/screens/onboarding/icon-seed.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.kob-sprout {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 33%;
  translate: -50% 0;
  height: 96px;
  height: 49cqw;
  width: auto;
  transform-origin: 50% 100%;
  transform: scale(0.12);
  opacity: 0;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
  animation: kob-sprout 1s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s 1 both;
}
.kob-rain {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.kob-rain i {
  position: absolute;
  top: -12px;
  width: 10px;
  width: 5.1cqw;
  height: 14px;
  height: 7.1cqw;
  background: var(--kob-water);
  opacity: 0;
  -webkit-mask-image: url("/assets/images/screens/onboarding/icon-water.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-image: url("/assets/images/screens/onboarding/icon-water.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 100% 100%;
  animation: kob-rain 1.35s ease-in 3.4s 1 both;
}
.kob-rain i:nth-child(1) { left: 10%; animation-delay: 3.4s; }
.kob-rain i:nth-child(2) { left: 26%; animation-delay: 3.52s; }
.kob-rain i:nth-child(3) { left: 42%; animation-delay: 3.64s; }
.kob-rain i:nth-child(4) { left: 58%; animation-delay: 3.76s; }
.kob-rain i:nth-child(5) { left: 74%; animation-delay: 3.88s; }
.kob-rain i:nth-child(6) { left: 88%; animation-delay: 4s; }

/* P0h (marketing.css:4745) fuerza `position: relative; z-index: 1` en TODO
 * hijo directo de `.phone-screen` con especificidad (0,3,0). Acá se re-afirma
 * el absoluto con la misma especificidad y orden posterior — sin !important.
 * Además `.phone-screen img` (0,1,1) pisa el alto del brote: se sube a (0,3,0). */
.kob .kob-screen > .kob-aurora,
.kob .kob-screen > .kob-stars {
  position: absolute;
  z-index: 0;
}
.kob .kob-screen > .kob-ground {
  position: absolute;
  z-index: 1;
}
.kob .kob-screen > .kob-hole {
  position: absolute;
  z-index: 3;
}
.kob .kob-screen > .kob-sprout {
  position: absolute;
  z-index: 2;
}
.kob .kob-screen > .kob-seed {
  position: absolute;
  z-index: 4;
}
.kob .kob-screen > .kob-rain {
  position: absolute;
  z-index: 5;
}
.kob .kob-screen .kob-sprout {
  height: 96px;
  height: 49cqw;
  width: auto;
}
.kob .kob-screen--pick .kob-pick img {
  width: 100%;
  height: 56px;
  height: 28.5cqw;
  object-fit: contain;
}

/* ── CTA ───────────────────────────────────────────────────────────────── */

.kob-cta {
  margin-top: 36px;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.kob-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ── Animaciones (finitas, con cuadro final estable) ───────────────────── */

@keyframes kob-node-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0; }
  45% { transform: scale(1.14); opacity: 0.8; }
}
@keyframes kob-pick-glow {
  0%, 100% { opacity: 0; }
  45% { opacity: 1; }
}
@keyframes kob-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes kob-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes kob-blink {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0.15; }
  100% { opacity: 1; }
}
@keyframes kob-hole {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes kob-ripple {
  0% { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(1.55); opacity: 0; }
}
/* La semilla viaja con transform (no `top`: evita layout por frame). 88cqw y
 * 104cqw equivalen a bajar del 52% al 60% del alto de pantalla. */
@keyframes kob-seed {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 1; }
  72% { transform: translate3d(0, 88cqw, 0); opacity: 1; }
  100% { transform: translate3d(0, 104cqw, 0); opacity: 0; }
}
@keyframes kob-sprout {
  from { transform: scale(0.12); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* 215cqw ≈ alto de pantalla completo: la gota sale por abajo sin tocar `top`. */
@keyframes kob-rain {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.55; }
  100% { transform: translate3d(0, 215cqw, 0); opacity: 0; }
}
/* Entradas por scroll: solo transform/opacity (sin blur ni layout). */
@keyframes kob-beat-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes kob-rise-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes kob-draw-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes kob-draw-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* ── Entrada por scroll (view timeline; transform/opacity, sin blur) ────── */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Reemplaza el story-enter global (que anima blur+filter) por uno barato. */
    main.story > .kob.story-beat {
      animation: kob-beat-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    .kob-head {
      animation: kob-rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 14%;
    }
    .kob-step {
      animation: kob-rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
    .kob-step:nth-child(2) { animation-range: entry 6% cover 26%; }
    .kob-step:nth-child(3) { animation-range: entry 12% cover 32%; }
    .kob-cta {
      animation: kob-rise-in linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 18%;
    }
    .kob-steps::before {
      transform-origin: 0 50%;
      animation: kob-draw-x linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
    .kob-step:not(:last-child)::after {
      transform-origin: 50% 0;
      animation: kob-draw-y linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
  }
}

/* ── Fallback (sin scroll-driven animations): entrada one-shot con stagger ── */

@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main.story > .kob.story-beat {
      animation: kob-beat-in var(--kob-t-slow) var(--kob-ease-out) both;
    }
    .kob-head {
      animation: kob-rise-in var(--kob-t-slow) var(--kob-ease-out) both;
    }
    .kob-step {
      animation: kob-rise-in var(--kob-t-slow) var(--kob-ease-out) both;
    }
    .kob-step:nth-child(2) { animation-delay: var(--kob-stagger); }
    .kob-step:nth-child(3) { animation-delay: calc(var(--kob-stagger) * 2); }
    .kob-cta {
      animation: kob-rise-in var(--kob-t-slow) var(--kob-ease-out) both;
      animation-delay: calc(var(--kob-stagger) * 3);
    }
    .kob-steps::before {
      transform-origin: 0 50%;
      animation: kob-draw-x var(--kob-t-slow) var(--kob-ease-out) both;
      animation-delay: var(--kob-stagger);
    }
  }
}

/* ── Hover solo con puntero fino ───────────────────────────────────────── */

.kob .phone-bezel {
  transition:
    box-shadow var(--kob-t-mid) var(--kob-ease-out),
    transform var(--kob-t-mid) var(--kob-ease);
}

@media (hover: hover) {
  .kob-step:hover .kob-node { border-color: var(--kob-gold-hi); }
  .kob-step:hover .kob-cap b { color: var(--kob-gold-hi); }
  .kob-phone:hover .phone-bezel {
    box-shadow:
      0 0 0 1px rgba(245, 196, 81, 0.32),
      0 24px 50px rgba(0, 0, 0, 0.52),
      0 0 34px rgba(245, 196, 81, 0.14);
  }
}

/* Lift de teléfono y respuesta del nodo: solo con reduce apagado (el reset de
 * abajo queda como red de seguridad). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kob-phone:hover { transform: translateY(var(--kob-lift)); }
  .kob-step:hover .kob-node { transform: scale(1.05); }
}

/* ── Mobile/tablet: constelación vertical centrada ─────────────────────── */

@media (max-width: 819px) {
  .kob-steps {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 34px;
  }
  .kob-steps::before { display: none; }
  .kob-step {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 14px;
    text-align: center;
  }
  .kob-node { grid-column: 1; grid-row: 1; }
  .kob-item { grid-column: 1; grid-row: 2; }
  .kob-step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 46px;
    bottom: -34px;
    border-left: 2px dashed var(--kob-line);
    translate: -50% 0;
  }
  .kob-phone { width: min(100%, 210px); }
  .kob-cap { text-align: center; }
}

@media (max-width: 560px) {
  .kob-cta .btn { width: 100%; max-width: 340px; }
  .kob-deck { font-size: 1rem; }
}

/* ── Reduce Motion: cuadro final, quieto y legible ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .kob-node::after,
  .kob-pick--dog::after,
  .kob-petface img,
  .kob-typed,
  .kob-caret,
  .kob-hole,
  .kob-ripple,
  .kob-seed,
  .kob-sprout,
  .kob-rain i {
    animation: none;
  }
  .kob-typed {
    -webkit-clip-path: none;
    clip-path: none;
  }
  .kob-caret { opacity: 1; }
  .kob-seed { opacity: 0; }
  .kob-sprout { transform: scale(1); opacity: 1; }
  .kob-ripple { transform: scale(1.12); opacity: 0.3; }
  .kob-rain i { opacity: 0.5; }
  .kob-rain i:nth-child(1) { top: 20%; }
  .kob-rain i:nth-child(2) { top: 36%; }
  .kob-rain i:nth-child(3) { top: 12%; }
  .kob-rain i:nth-child(4) { top: 48%; }
  .kob-rain i:nth-child(5) { top: 28%; }
  .kob-rain i:nth-child(6) { top: 42%; }
  .kob-phone { transition: none; }
  .kob-node,
  .kob-cap b,
  .kob .phone-bezel { transition: none; }
  .kob-phone:hover { transform: none; }
  .kob-step:hover .kob-node { transform: none; }
}