/* KairSun Web — pantalla 47: Onboarding v3 (elegir, bautizar, plantar, crecer).
 *
 * Clon 1:1 en HTML/CSS de las escenas reales de la app (sin Dart, sin JS).
 * Fuentes exactas, archivo:línea, en docs/screens/47_onboarding.md.
 *
 * Lo que este mock corrige de todo el sitio: **Kitsune no es la mascota por
 * defecto**. La app elige entre perro (Golden Retriever) y gato (Gato Naranja)
 * — `owned_item.dart:87-90` —; Kitsu, el guía, se dibuja con el arte adulto de
 * Kitsune (Legendary) y flota por fuera del claro (`escena_comun.dart:41-42`).
 *
 * Unidad: `--u` la define el contrato base (393dp de ancho de teléfono). Todo
 * el interior se mide en `calc(N * var(--u))`; la página, alrededor, sigue la
 * tipografía normal del sitio.
 *
 * Sin toggle Hoy|Tracking: el onboarding no tiene tracking (no existe en el
 * guion de `onboarding_script.dart:78-189`).
 *
 * Animaciones: finitas y con estado final estable (`both`/`forwards`). Con
 * `prefers-reduced-motion` el base las apaga y acá se fija el cuadro final:
 * la semilla queda plantada, el brote crecido y la lluvia como postal.
 */

/* ── Página: propuesta de venta + catálogo de arte ─────────────────────── */

.onb-pitch {
  border: 1px solid var(--ks-glass-border);
  border-radius: 16px;
  padding: 20px 22px;
  background:
    radial-gradient(600px 240px at 8% -20%, rgba(139, 92, 246, 0.16), transparent 60%),
    rgba(255, 255, 255, 0.03);
}
.onb-pitch h2 { margin: 0 0 6px; font-size: 1.05rem; }
.onb-pitch p { margin: 0 0 12px; color: var(--ks-text-2); font-size: 0.9rem; }
.onb-pitch ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.onb-pitch li { color: var(--ks-text-2); font-size: 0.94rem; line-height: 1.45; }
.onb-pitch li strong { color: var(--ks-text); }

.onb-skins { display: grid; gap: 16px; }
.onb-skins h2 { margin: 0; font-size: 1.05rem; }
.onb-skins > p { margin: 0; color: var(--ks-text-2); font-size: 0.9rem; line-height: 1.5; }
.onb-skins__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
}
.onb-skin {
  margin: 0;
  border: 1px solid var(--ks-glass-border);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}
.onb-skin img { height: 96px; width: auto; }
.onb-skin figcaption { display: grid; gap: 4px; justify-items: center; }
.onb-skin b { font-size: 0.86rem; }
.onb-skin small { color: var(--ks-muted); font-size: 0.74rem; }
.onb-rarity {
  display: inline-flex; align-items: center;
  min-height: 20px; padding: 0 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.onb-rarity--rare { color: #9FB0CC; }
.onb-rarity--epic { color: #C4B5FD; }
.onb-rarity--legendary { color: var(--ks-gold); }
.onb-rarity--starter { color: var(--ks-ok); }
.onb-skin--starter { border-color: rgba(16, 185, 129, 0.45); }

.onb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .onb-grid { grid-template-columns: 1fr; }
}

.onb-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
}
.onb-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 12px;
  border: 1px solid var(--ks-glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ks-text-2);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.onb-chip:first-child { color: var(--ks-ok); border-color: rgba(16, 185, 129, 0.4); }
.onb-chip:nth-child(2) { color: var(--ks-gold); border-color: rgba(245, 196, 81, 0.4); }
.onb-chip:nth-child(3) { color: var(--ks-streak); border-color: rgba(255, 161, 46, 0.4); }

/* ── Pantalla del teléfono ─────────────────────────────────────────────── */

.onb {
  --onb-noche: #0B0918;
  --onb-noche-profunda: #05040C;
  --onb-violeta: #8B5CF6;
  --onb-violeta-claro: #A78BFA;
  --onb-indigo: #6366F1;
  --onb-cian: #22D3EE;
  --onb-rosa: #F472B6;
  --onb-vidrio: rgba(255, 255, 255, 0.07);
  --onb-borde-vidrio: rgba(255, 255, 255, 0.14);
  --onb-dog: #FFB020;
  --onb-cat: #FB923C;
  --onb-ink: #1A1206;
  --onb-agua: #38BDF8;
  --onb-animo: #F472B6;
  --onb-rutina: #FFB020;
  --onb-skills: #A78BFA;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: calc(46 * var(--u));
  background: linear-gradient(180deg, #17123A 0%, var(--onb-noche) 45%, var(--onb-noche-profunda) 100%);
  color: var(--ks-text);
}

.onb-aurora,
.onb-stars { position: absolute; inset: 0; pointer-events: none; }

.onb-aurora {
  background:
    radial-gradient(58% 42% at 12% 12%, rgba(139, 92, 246, 0.34), transparent 70%),
    radial-gradient(46% 34% at 96% 30%, rgba(34, 211, 238, 0.14), transparent 70%),
    radial-gradient(52% 36% at 55% 98%, rgba(244, 114, 182, 0.10), transparent 70%);
  animation: onb-deriva 18s ease-in-out 0s 2 alternate both;
}

.onb-stars {
  opacity: 0.85;
  background-image:
    radial-gradient(1px 1px at 22px 28px, rgba(255, 255, 255, 0.9), transparent 55%),
    radial-gradient(1px 1px at 96px 12px, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(1.4px 1.4px at 148px 74px, rgba(255, 255, 255, 0.75), transparent 55%),
    radial-gradient(1px 1px at 54px 118px, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(1px 1px at 176px 132px, rgba(255, 255, 255, 0.65), transparent 55%);
  background-size: 210px 170px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 72%);
}

/* Aurora, luciérnagas y Kitsu: se apagan en reposo y no dejan tickers vivos. */

/* ── Constelación de progreso (6 pasos, `escena_comun.dart:437-444`) ───── */

.onb-const {
  position: relative;
  z-index: 3;
  flex: none;
  list-style: none;
  margin: 0;
  padding: calc(12 * var(--u)) calc(48 * var(--u)) 0;
  height: calc(18 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.onb-const::before {
  content: "";
  position: absolute;
  left: calc(48 * var(--u));
  right: calc(48 * var(--u));
  top: calc(15 * var(--u) - 0.6 * var(--u));
  height: calc(1.2 * var(--u));
  background: rgba(255, 255, 255, 0.14);
}
.onb-const li {
  position: relative;
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.onb-const li.is-done { background: var(--onb-violeta-claro); }
.onb-const li.is-now {
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  background: #FFFFFF;
  box-shadow: 0 0 calc(8 * var(--u)) calc(1 * var(--u)) rgba(167, 139, 250, 0.55);
  animation: onb-latido 1.6s ease-in-out 0s 6 both;
}

/* ── Cuerpo de escena, tipografía y pie ────────────────────────────────── */

.onb-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: calc(2 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
}
.onb-title {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: calc(25 * var(--u));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: calc(-0.3 * var(--u));
  animation: onb-sube 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}
.onb-copy {
  position: relative;
  z-index: 1;
  margin: calc(8 * var(--u)) 0 0;
  text-align: center;
  font-size: calc(15.5 * var(--u));
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.74);
  animation: onb-sube 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
.onb-fade { animation: onb-aparece 0.6s ease-out 0.2s both; }

.onb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  width: 100%;
  min-height: calc(58 * var(--u));
  margin-top: calc(16 * var(--u));
  padding: 0 calc(16 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: calc(28 * var(--u));
  background: linear-gradient(96deg, var(--onb-violeta), var(--onb-indigo));
  box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(139, 92, 246, 0.45);
  color: #FFFFFF;
  font: inherit;
  font-size: calc(16.5 * var(--u));
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.onb-btn--ghost {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-size: calc(15 * var(--u));
  font-weight: 700;
}
.onb-btn--water { background: linear-gradient(96deg, #0EA5E9, #2563EB); box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(14, 165, 233, 0.4); }
.onb-btn--water .onb-ico { color: #FFFFFF; }
.onb-btn--water .onb-ico--water { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.onb-btn:focus-visible,
.onb-pet__cta:focus-visible,
.onb-later:focus-visible,
.onb-pillar:focus-visible {
  outline: 2px solid var(--ks-gold);
  outline-offset: 2px;
}
@media (hover: hover) {
  .onb-btn:hover { filter: brightness(1.08); }
  .onb-pet__cta:hover { filter: brightness(1.07); }
  .onb-pillar:hover { border-color: currentColor; }
}

/* ── Iconos: máscaras SVG teñidas con `currentColor` (sin inline styles) ── */

.onb-ico {
  display: block;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.onb-ico--water { -webkit-mask-image: url("/assets/images/screens/onboarding/icon-water.svg"); mask-image: url("/assets/images/screens/onboarding/icon-water.svg"); }
.onb-ico--mood { -webkit-mask-image: url("/assets/images/screens/onboarding/icon-mood.svg"); mask-image: url("/assets/images/screens/onboarding/icon-mood.svg"); }
.onb-ico--routine { -webkit-mask-image: url("/assets/images/screens/onboarding/icon-routine.svg"); mask-image: url("/assets/images/screens/onboarding/icon-routine.svg"); }
.onb-ico--skills { -webkit-mask-image: url("/assets/images/screens/onboarding/icon-skills.svg"); mask-image: url("/assets/images/screens/onboarding/icon-skills.svg"); }
.onb-ico--paw { -webkit-mask-image: url("/assets/images/screens/onboarding/icon-paw.svg"); mask-image: url("/assets/images/screens/onboarding/icon-paw.svg"); }
.onb-ico--store { -webkit-mask-image: url("/assets/images/screens/onboarding/icon-storefront.svg"); mask-image: url("/assets/images/screens/onboarding/icon-storefront.svg"); }
.onb-ico--cloud { -webkit-mask-image: url("/assets/images/screens/onboarding/icon-cloud-check.svg"); mask-image: url("/assets/images/screens/onboarding/icon-cloud-check.svg"); }
.onb-ico--seed { -webkit-mask-image: url("/assets/images/screens/onboarding/icon-seed.svg"); mask-image: url("/assets/images/screens/onboarding/icon-seed.svg"); }
.onb-ico--heart { -webkit-mask-image: url("/assets/images/screens/onboarding/icon-heart.svg"); mask-image: url("/assets/images/screens/onboarding/icon-heart.svg"); }

/* ── 1 · Elegir compañero: pradera + dos tarjetas comparables ──────────── */

.onb-pradera { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.onb-pradera img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  transform: scale(1.1);
  transform-origin: top center;
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 42%);
  mask-image: linear-gradient(180deg, transparent 8%, #000 42%);
}
.onb-pradera::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(95% 55% at 50% 0%, rgba(23, 18, 58, 0.85), transparent 72%),
    linear-gradient(180deg,
      rgba(23, 18, 58, 0.55) 0%,
      rgba(11, 9, 24, 0.18) 36%,
      rgba(11, 9, 24, 0.45) 70%,
      rgba(11, 9, 24, 0.82) 92%,
      rgba(11, 9, 24, 0.96) 100%);
}

.onb-pets {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: grid;
  gap: calc(12 * var(--u));
}
.onb-pet {
  --onb-acento: var(--onb-dog);
  display: grid;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u));
  border: 1px solid rgba(255, 176, 32, 0.5);
  border: 1px solid color-mix(in srgb, var(--onb-acento) 50%, transparent);
  border-radius: calc(28 * var(--u));
  background: linear-gradient(160deg,
    rgba(255, 176, 32, 0.1),
    rgba(11, 9, 24, 0.55));
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--onb-acento) 10%, transparent),
    rgba(11, 9, 24, 0.55));
  -webkit-backdrop-filter: blur(calc(18 * var(--u)));
  backdrop-filter: blur(calc(18 * var(--u)));
  box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, 0.35);
}
.onb-pet--cat { --onb-acento: var(--onb-cat); }
.onb-pet__row {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
}
.onb-pet__row img {
  flex: none;
  height: calc(96 * var(--u));
  width: auto;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.4));
}
.onb-pet__name {
  margin: 0;
  font-size: calc(18 * var(--u));
  font-weight: 800;
  line-height: 1.2;
}
.onb-pet__pitch {
  margin: calc(4 * var(--u)) 0 0;
  font-size: calc(13 * var(--u));
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.74);
}
.onb-pet__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  min-height: calc(48 * var(--u));
  border: none;
  border-radius: calc(24 * var(--u));
  background: var(--onb-acento);
  color: var(--onb-ink);
  font: inherit;
  font-size: calc(15 * var(--u));
  font-weight: 800;
  cursor: pointer;
}
.onb-pet__cta .onb-ico {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
}

/* ── 2 · Plantar + primera lluvia: el claro del santuario ──────────────── */

.onb-body--cantero { padding-left: calc(16 * var(--u)); padding-right: calc(16 * var(--u)); }
.onb-mini { font-size: calc(12 * var(--u)); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.55); text-align: center; }

.onb-cantera {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: calc(12 * var(--u));
  border-radius: calc(24 * var(--u));
  overflow: hidden;
  background: #10131C;
}
.onb-cantera > img.onb-terreno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
.onb-cantera::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(60% 34% at 50% 30%, rgba(52, 211, 153, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(11, 9, 24, 0.7) 0%, rgba(11, 9, 24, 0.15) 22%, rgba(11, 9, 24, 0.1) 60%, rgba(11, 9, 24, 0.5) 100%);
}
.onb-cantera::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(5, 4, 12, 0.6), transparent 14%, transparent 86%, rgba(5, 4, 12, 0.6));
}

.onb-espiritu {
  position: absolute;
  top: calc(2 * var(--u));
  right: calc(4 * var(--u));
  z-index: 2;
  width: calc(92 * var(--u));
  animation: onb-espiritu 3.6s ease-in-out 0.4s 6 alternate both;
}
.onb-espiritu::before {
  content: "";
  position: absolute;
  inset: -34% -40% -30% -40%;
  background: radial-gradient(closest-side, rgba(11, 9, 24, 0.92), rgba(11, 9, 24, 0.55), transparent);
}
.onb-espiritu img {
  position: relative;
  width: 100%;
  height: auto;
  transform: scaleX(-1);
  opacity: 0.78;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.onb-mascota {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 36%;
  translate: -50% 0;
  height: calc(74 * var(--u));
  width: auto;
  filter: drop-shadow(0 calc(5 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 0, 0.45));
}

.onb-luciernagas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.onb-luciernagas i {
  position: absolute;
  width: calc(3 * var(--u));
  height: calc(3 * var(--u));
  border-radius: 50%;
  background: #F7FFC2;
  box-shadow: 0 0 calc(7 * var(--u)) calc(1 * var(--u)) rgba(233, 255, 138, 0.65);
  animation: onb-luciernaga 7s ease-in-out 0s 3 both;
}
.onb-luciernagas i:nth-child(1) { left: 14%; top: 58%; animation-delay: 0.2s; }
.onb-luciernagas i:nth-child(2) { left: 30%; top: 72%; animation-delay: 1.1s; }
.onb-luciernagas i:nth-child(3) { left: 68%; top: 64%; animation-delay: 2s; }
.onb-luciernagas i:nth-child(4) { left: 82%; top: 76%; animation-delay: 0.6s; }
.onb-luciernagas i:nth-child(5) { left: 48%; top: 82%; animation-delay: 1.6s; }

.onb-hoyo {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 26%;
  translate: -50% 0;
  width: calc(88 * var(--u));
  height: calc(36 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid rgba(167, 139, 250, 0.85);
  background: radial-gradient(closest-side, #1A1208, rgba(59, 42, 24, 0.9));
  box-shadow: 0 0 calc(18 * var(--u)) rgba(167, 139, 250, 0.45);
}
.onb-anillo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(26% + 18 * var(--u));
  translate: -50% 0;
  width: calc(88 * var(--u));
  height: calc(36 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--onb-violeta-claro);
  animation: onb-onda 1.6s ease-out 0.4s 6 both;
}
.onb-ruta {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 4%;
  height: 22%;
  translate: -50% 0;
  border-left: calc(2 * var(--u)) dashed rgba(255, 255, 255, 0.28);
}
.onb-ruta::after {
  content: "";
  position: absolute;
  left: calc(-5 * var(--u));
  bottom: calc(-2 * var(--u));
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-right: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.4);
  border-bottom: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.4);
  rotate: 45deg;
}
.onb-flechas {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 11%;
  translate: -50% 0;
  display: grid;
  gap: calc(4 * var(--u));
  justify-items: center;
  color: var(--onb-violeta-claro);
}
.onb-flechas i {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  animation: onb-flecha 1.6s ease-out 0.4s 6 both;
}
.onb-flechas i:nth-child(2) { opacity: 0.8; animation-delay: 0.5s; }
.onb-flechas i:nth-child(3) { opacity: 0.55; animation-delay: 0.6s; }
.onb-flechas i::before {
  content: "";
  display: block;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  margin: calc(4 * var(--u)) auto 0;
  border-right: calc(2.4 * var(--u)) solid currentColor;
  border-bottom: calc(2.4 * var(--u)) solid currentColor;
  rotate: 45deg;
}

.onb-semilla {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 26%;
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  translate: -50% calc(-7 * var(--u));
  border-radius: calc(26 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(26 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(140deg, #A1887F, #6D4C41);
  box-shadow:
    0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.3),
    0 0 calc(16 * var(--u)) rgba(167, 139, 250, 0.3);
  animation: onb-caida 2.2s cubic-bezier(0.5, 0, 0.9, 0.6) 1.2s 2 both;
}
.onb-semilla .onb-ico {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  margin: calc(11 * var(--u)) auto 0;
  color: var(--onb-violeta-claro);
}
.onb-toque {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 26%;
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  translate: -50% calc(-11 * var(--u));
  border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.28), transparent 70%);
  opacity: 0;
  animation: onb-toque 2.2s ease-in 1.2s 2 both;
}
.onb-brote {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 26%;
  translate: -50% -82%;
  transform-origin: 50% 100%;
  height: calc(120 * var(--u));
  width: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  animation: onb-brotar 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 3.4s 1 both;
}
.onb-lluvia { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.onb-lluvia i {
  position: absolute;
  top: 0;
  width: calc(9 * var(--u));
  height: calc(13 * var(--u));
  background: var(--onb-cian);
  -webkit-mask-image: url("/assets/images/screens/onboarding/icon-water.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: url("/assets/images/screens/onboarding/icon-water.svg");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  opacity: 0;
  animation: onb-llover 1.4s ease-in 4.5s 1 forwards;
}
.onb-lluvia i:nth-child(1) { left: 6%; animation-delay: 4.5s; }
.onb-lluvia i:nth-child(2) { left: 17%; animation-delay: 4.62s; }
.onb-lluvia i:nth-child(3) { left: 28%; animation-delay: 4.74s; }
.onb-lluvia i:nth-child(4) { left: 39%; animation-delay: 4.86s; }
.onb-lluvia i:nth-child(5) { left: 50%; animation-delay: 4.98s; }
.onb-lluvia i:nth-child(6) { left: 61%; animation-delay: 5.1s; }
.onb-lluvia i:nth-child(7) { left: 72%; animation-delay: 5.22s; }
.onb-lluvia i:nth-child(8) { left: 83%; animation-delay: 5.34s; }
.onb-lluvia i:nth-child(9) { left: 94%; animation-delay: 5.46s; }

/* ── 3 · Pilares: cuatro tarjetas con la identidad de su módulo ────────── */

.onb-guide { flex: none; display: block; margin: 0 auto; height: calc(120 * var(--u)); width: auto; filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(167, 139, 250, 0.35)); }

.onb-pillars {
  margin-top: calc(16 * var(--u));
  display: grid;
  gap: calc(12 * var(--u));
}
.onb-pillar {
  --onb-pilar: var(--onb-agua);
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  width: 100%;
  padding: calc(12 * var(--u));
  border: calc(1.4 * var(--u)) solid rgba(56, 189, 248, 0.55);
  border: calc(1.4 * var(--u)) solid color-mix(in srgb, var(--onb-pilar) 55%, transparent);
  border-radius: calc(24 * var(--u));
  background: linear-gradient(90deg,
    rgba(56, 189, 248, 0.18),
    rgba(255, 255, 255, 0.03));
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--onb-pilar) 18%, transparent),
    rgba(255, 255, 255, 0.03));
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(56, 189, 248, 0.18);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) color-mix(in srgb, var(--onb-pilar) 18%, transparent);
  color: var(--onb-pilar);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.onb-pillar--mood { --onb-pilar: var(--onb-animo); }
.onb-pillar--routine { --onb-pilar: var(--onb-rutina); }
.onb-pillar--skills { --onb-pilar: var(--onb-skills); }
.onb-pillar__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.45);
  border: 1px solid color-mix(in srgb, var(--onb-pilar) 45%, transparent);
  background: rgba(56, 189, 248, 0.16);
  background: color-mix(in srgb, var(--onb-pilar) 16%, transparent);
}
.onb-pillar__ico .onb-ico { width: calc(24 * var(--u)); height: calc(24 * var(--u)); color: var(--onb-pilar); }
.onb-pillar__txt { flex: 1 1 auto; min-width: 0; display: block; }
.onb-pillar__name { display: block; margin: 0; font-size: calc(16.5 * var(--u)); font-weight: 800; color: #FFFFFF; }
.onb-pillar__hint { display: block; margin: calc(2 * var(--u)) 0 0; font-size: calc(13 * var(--u)); line-height: 1.3; color: rgba(255, 255, 255, 0.66); }
.onb-chevron {
  flex: none;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-right: calc(2 * var(--u)) solid var(--onb-pilar);
  border-bottom: calc(2 * var(--u)) solid var(--onb-pilar);
  rotate: -45deg;
}

/* ── 4 · Recompensa: oferta de cuenta +100 semillas ────────────────────── */

.onb-benefits { margin-top: calc(16 * var(--u)); display: grid; gap: calc(12 * var(--u)); }
.onb-benefit { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); }
.onb-benefit .onb-ico { flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: var(--onb-violeta-claro); }
.onb-benefit p { margin: 0; font-size: calc(15 * var(--u)); font-weight: 500; line-height: 1.4; }
.onb-account { position: relative; margin-top: auto; padding-top: calc(30 * var(--u)); }
.onb-seal {
  position: absolute;
  top: calc(-14 * var(--u));
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  max-width: calc(300 * var(--u));
  padding: calc(5 * var(--u)) calc(14 * var(--u));
  border: 1px solid #FFF4D6;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFE3A1, #FFB020);
  box-shadow: 0 calc(3 * var(--u)) calc(16 * var(--u)) rgba(255, 176, 32, 0.5);
  color: #4A2E00;
  font-size: calc(12.5 * var(--u));
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  animation: onb-sello 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}
.onb-seal .onb-ico { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: #4A2E00; }
.onb-account .onb-btn { margin-top: 0; }
.onb-later {
  display: block;
  width: 100%;
  min-height: calc(48 * var(--u));
  margin-top: calc(4 * var(--u));
  border: none;
  background: none;
  color: var(--onb-violeta-claro);
  font: inherit;
  font-size: calc(15 * var(--u));
  font-weight: 700;
  cursor: pointer;
}

/* ── Animaciones (todas finitas: el reposo no gasta) ───────────────────── */

@keyframes onb-deriva {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(3%, 2%, 0); }
}
@keyframes onb-sube {
  from { opacity: 0; transform: translateY(calc(6 * var(--u))); }
  to { opacity: 1; transform: none; }
}
@keyframes onb-aparece {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes onb-latido {
  0%, 100% { box-shadow: 0 0 calc(6 * var(--u)) calc(0.5 * var(--u)) rgba(167, 139, 250, 0.4); }
  50% { box-shadow: 0 0 calc(14 * var(--u)) calc(3 * var(--u)) rgba(167, 139, 250, 0.75); }
}
@keyframes onb-onda {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes onb-flecha {
  0% { transform: translateY(calc(-4 * var(--u))); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(calc(6 * var(--u))); opacity: 0; }
}
@keyframes onb-caida {
  from { transform: translateY(calc(-150 * var(--u))); }
  to { transform: translateY(0); }
}
@keyframes onb-toque {
  0% { transform: translateY(calc(-150 * var(--u))); opacity: 0.85; }
  80% { opacity: 0.55; }
  100% { transform: translateY(0); opacity: 0; }
}
@keyframes onb-brotar {
  from { transform: scale(0.35); opacity: 0.5; translate: -50% -82%; }
  to { transform: scale(1); opacity: 1; translate: -50% -82%; }
}
@keyframes onb-llover {
  0% { transform: translateY(0); opacity: 0.75; }
  80% { opacity: 0.5; }
  100% { transform: translateY(calc(220 * var(--u))); opacity: 0; }
}
@keyframes onb-luciernaga {
  0% { transform: translateY(0); opacity: 0.35; }
  45% { opacity: 1; }
  100% { transform: translateY(calc(-18 * var(--u))); opacity: 0.35; }
}
@keyframes onb-espiritu {
  from { transform: translateY(0); opacity: 0.74; }
  to { transform: translateY(calc(-6 * var(--u))); opacity: 0.86; }
}
@keyframes onb-sello {
  from { opacity: 0; transform: translateY(calc(6 * var(--u))); }
  to { opacity: 1; transform: none; }
}

/* El brote usa translate para centrarse y transform para escalar: las dos
 * propiedades se animan por separado (keyframes `onb-brotar`). */

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

@media (prefers-reduced-motion: reduce) {
  /* La semilla arranca arriba de la ruta: el gesto se lee quieto. */
  .onb-semilla { transform: translateY(calc(-122 * var(--u))); }
  .onb-toque { opacity: 0; }
  .onb-brote { transform: scale(1); opacity: 1; }
  .onb-lluvia i { opacity: 0.45; }
  .onb-lluvia i:nth-child(1) { transform: translateY(calc(60 * var(--u))); }
  .onb-lluvia i:nth-child(2) { transform: translateY(calc(150 * var(--u))); }
  .onb-lluvia i:nth-child(3) { transform: translateY(calc(95 * var(--u))); }
  .onb-lluvia i:nth-child(4) { transform: translateY(calc(190 * var(--u))); }
  .onb-lluvia i:nth-child(5) { transform: translateY(calc(120 * var(--u))); }
  .onb-lluvia i:nth-child(6) { transform: translateY(calc(205 * var(--u))); }
  .onb-lluvia i:nth-child(7) { transform: translateY(calc(80 * var(--u))); }
  .onb-lluvia i:nth-child(8) { transform: translateY(calc(170 * var(--u))); }
  .onb-lluvia i:nth-child(9) { transform: translateY(calc(135 * var(--u))); }
  .onb-anillo { opacity: 0.25; transform: scale(1.25); }
  .onb-luciernagas i { opacity: 0.7; }
}

/* ── Página: en pantallas angostas la propuesta y el catálogo respiran ─── */

@media (max-width: 560px) {
  .onb-pitch, .onb-skins { padding: 16px; }
  .onb-skin img { height: 80px; }
}