/* ===== Bienvenida estilo "¿Tienes negocio o quieres uno?" ===== */
.onb {
  --onb-bg: #111111; --onb-card: #1a1a1a; --onb-card-2: #202020; --onb-line: #2b2b2b; --onb-line-2: #3f3f46; --onb-text: #f4f4f5; --onb-muted: #a1a1aa;
  position: fixed; inset: 0; z-index: 150; overflow-y: auto; background: var(--onb-bg); color: var(--onb-text);
  font-family: "Inter", system-ui, sans-serif; transition: opacity .5s, visibility .5s;
}
.onb.bye { opacity: 0; visibility: hidden; }
.onb__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #1f1f1f; }
.onb__brand { display: flex; align-items: center; gap: .5rem; font-family: "Outfit", sans-serif; font-weight: 900; letter-spacing: 1.5px; font-size: 1.2rem; }
.onb__brand .logo__mark { width: 26px; height: 30px; }
.onb .logo__letter { stroke: url(#gradLogoDark); }
.onb .logo__string { stroke: #fff; }
.onb .logo__pivot { fill: #fff; }
.onb__skip { background: none; border: 0; color: var(--onb-muted); font: 500 .9rem "Inter", sans-serif; cursor: pointer; padding: .4rem .6rem; border-radius: 8px; }
.onb__skip:hover { color: var(--onb-text); background: #1c1c1c; }

.onb__stage { min-height: calc(100% - 60px); display: grid; place-items: center; padding: 40px 16px 60px; }
.onb__step { width: min(900px, 100%); text-align: center; animation: onbIn .5s cubic-bezier(.2, .8, .2, 1) both; }
.onb__step.out { animation: onbOut .25s ease forwards; }
@keyframes onbIn { from { opacity: 0; transform: translateY(18px); } }
@keyframes onbOut { to { opacity: 0; transform: translateY(-12px); } }
.onb__back { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: 1.2rem; background: none; border: 0; color: var(--onb-muted); font: 500 .9rem "Inter", sans-serif; cursor: pointer; }
.onb__back:hover { color: var(--onb-text); }
.onb h2 { font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: .5rem; }
.onb__sub { color: var(--onb-muted); margin-bottom: 2rem; }

/* Tarjetas grandes (paso 1) */
.onb__big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 2.2rem; }
.onb-card {
  display: grid; justify-items: center; align-content: center; gap: 1.6rem; min-height: 262px; padding: 32px 20px 30px;
  background: var(--onb-card); border: 1px solid var(--onb-line); border-radius: 14px; color: var(--onb-text); cursor: pointer;
  font: 600 1.05rem "Inter", sans-serif; transition: background .2s, border-color .2s, transform .25s cubic-bezier(.2, .9, .3, 1.3);
  animation: onbIn .6s cubic-bezier(.2, .8, .2, 1) both;
}
.onb-card:nth-child(2) { animation-delay: .08s; }
.onb-card:hover, .onb-card:focus-visible { background: var(--onb-card-2); border-color: var(--onb-line-2); transform: translateY(-4px); outline: none; }
.onb-card:active { transform: scale(.98); }
.onb-card svg { width: 150px; height: 150px; overflow: visible; }
.onb-card:focus:not(:focus-visible) { background: var(--onb-card); border-color: var(--onb-line); transform: none; }
.onb-opt:focus:not(:focus-visible) { background: var(--onb-card); border-color: var(--onb-line); transform: none; }

/* Ilustraciones: pequeñas animaciones al pasar el mouse */
.ill-rocket .rocket { transform-origin: 70px 60px; transition: transform .4s cubic-bezier(.2, .9, .3, 1.3); }
.ill-rocket .flame { transform-origin: 44px 92px; animation: flame .18s ease-in-out infinite alternate; }
.ill-rocket .smoke circle { transform-box: fill-box; transform-origin: center; animation: puff 2.4s ease-in-out infinite; }
.ill-rocket .smoke circle:nth-child(2n) { animation-delay: .4s; }
.ill-rocket .smoke circle:nth-child(3n) { animation-delay: .9s; }
.onb-card:hover .ill-rocket .rocket { transform: translate(8px, -12px); }
@keyframes flame { to { transform: scale(1.15, .85); } }
@keyframes puff { 50% { transform: scale(1.12); } }
.ill-store .awning path:nth-child(odd) { transition: transform .35s; transform-box: fill-box; transform-origin: top; }
.onb-card:hover .ill-store .awning path:nth-child(odd) { transform: scaleY(1.12); }
.ill-store .door { transition: transform .35s; transform-box: fill-box; transform-origin: left; }
.onb-card:hover .ill-store .door { transform: skewY(-8deg) scaleX(.8); }

/* Opciones (paso 2) */
.onb__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 680px; margin: 0 auto; }
.onb-opt {
  display: flex; align-items: center; gap: .9rem; padding: 16px 18px; text-align: left; cursor: pointer;
  background: var(--onb-card); border: 1px solid var(--onb-line); border-radius: 12px; color: var(--onb-text);
  font: 500 .98rem "Inter", sans-serif; transition: background .2s, border-color .2s, transform .2s; animation: onbIn .5s both;
}
.onb-opt:nth-child(2) { animation-delay: .05s; } .onb-opt:nth-child(3) { animation-delay: .1s; } .onb-opt:nth-child(4) { animation-delay: .15s; } .onb-opt:nth-child(5) { animation-delay: .2s; } .onb-opt:nth-child(6) { animation-delay: .25s; }
.onb-opt:hover, .onb-opt:focus-visible { background: var(--onb-card-2); border-color: var(--onb-line-2); transform: translateY(-2px); outline: none; }
.onb-opt span { font-size: 1.5rem; width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: #242424; border-radius: 10px; }
.onb-opt small { display: block; color: var(--onb-muted); font-size: .8rem; margin-top: .1rem; }

/* Recomendación (paso 3) */
.onb__plan { max-width: 520px; margin: 0 auto; text-align: left; background: var(--onb-card); border: 1px solid var(--onb-line); border-radius: 16px; padding: 26px; animation: onbIn .5s both; }
.onb__plan-tag { display: inline-block; font-size: .75rem; font-weight: 600; color: #fdba74; background: rgba(249, 115, 22, .12); border: 1px solid rgba(249, 115, 22, .35); padding: .2rem .6rem; border-radius: 999px; }
.onb__plan h3 { font-family: "Inter", sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin: .7rem 0 .2rem; }
.onb__price { font-size: 1.05rem; color: var(--onb-muted); }
.onb__price b { color: var(--onb-text); font-size: 1.5rem; }
.onb__plan ul { list-style: none; margin: 1.1rem 0 1.4rem; display: grid; gap: .55rem; }
.onb__plan li { display: flex; gap: .6rem; color: #d4d4d8; font-size: .95rem; }
.onb__plan li::before { content: "✓"; color: #a78bfa; font-weight: 700; }
.onb__btns { display: grid; gap: .6rem; }
.onb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.2rem; border-radius: 10px; font: 600 .98rem "Inter", sans-serif; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: background .2s, transform .15s; }
.onb-btn:active { transform: scale(.98); }
.onb-btn--white { background: #fff; color: #111; }
.onb-btn--white:hover { background: #e4e4e7; }
.onb-btn--dark { background: #222; color: var(--onb-text); border-color: var(--onb-line-2); }
.onb-btn--dark:hover { background: #2a2a2a; }
.onb-btn svg { width: 18px; height: 18px; }
.onb__dots { display: flex; justify-content: center; gap: 6px; margin-top: 2.2rem; }
.onb__dots i { width: 6px; height: 6px; border-radius: 99px; background: #333; transition: width .3s, background .3s; }
.onb__dots i.on { width: 22px; background: #fff; }

@media (max-width: 640px) {
  .onb__big { grid-template-columns: 1fr; gap: 14px; margin-top: 1.6rem; }
  .onb-card { min-height: 190px; gap: 1rem; padding: 22px 16px; }
  .onb-card svg { width: 104px; height: 104px; }
  .onb__opts { grid-template-columns: 1fr; }
  .onb__stage { padding-top: 26px; }
}