/* Sitio público de Orbit — diseño «Órbita» (oscuro), el mismo lenguaje que los accesos del panel.
   Página principal (barra flotante, anillos, vista del panel, planes en tabla) y, al final, la versión
   oscura de las páginas internas: ingresar, crear tienda, términos, privacidad y avisos. */
body.ox {
  --ox-bg: #07080c; --ox-text: #f4f5f8; --ox-body: #c9ccd8; --ox-muted: #a3a8ba; --ox-dim: #8a8fa3;
  --ox-line: rgba(255, 255, 255, .08); --ox-line-2: rgba(255, 255, 255, .14); --ox-accent: #ff5a1f;
  --ox-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --ox-display: "Space Grotesk", system-ui, sans-serif;
  color-scheme: dark;
  background-color: var(--ox-bg);
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ox-body);
  font-family: Inter, "Public Sans", system-ui, sans-serif;
  scroll-behavior: smooth;
}
body.ox-home main { max-width: none; padding: 0; }
body.ox:not(.ox-home) main { padding-top: 48px; padding-bottom: 24px; overflow-x: clip; }
.ox a { color: #ff8a5c; }
.ox a:hover { color: #ffb08f; }
.ox h1, .ox h2, .ox h3 { font-family: var(--ox-display); color: var(--ox-text); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ox-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.ox section[id] { scroll-margin-top: 110px; }

/* ---------------------------------------------------------------- barra flotante */
.ox-nav-wrap { position: sticky; top: 16px; z-index: 50; padding: 16px 16px 0; }
.ox-nav {
  max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 8px 8px 8px 20px;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(12, 13, 19, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8);
}
.ox-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ox-text) !important; text-decoration: none; }
.ox-brand span { font: 700 18px var(--ox-display); letter-spacing: .18em; }
.ox-links { display: flex; gap: 26px; margin-left: 16px; font-size: 14px; font-weight: 500; }
.ox-links a, .ox-login { color: var(--ox-body) !important; text-decoration: none; }
.ox-links a:hover, .ox-login:hover { color: #fff !important; }
.ox-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ox-login { padding: 10px 14px; font-size: 14px; font-weight: 500; }

/* ---------------------------------------------------------------- botones */
.ox-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 22px;
  border-radius: 14px; border: 1px solid transparent; font-weight: 600; font-size: 15px; text-decoration: none;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease; white-space: nowrap;
}
.ox-btn:hover { transform: translateY(-1px); }
.ox-btn-sm { height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px; }
.ox-btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }
.ox-btn-accent { background: var(--ox-accent); color: #0b0b0f !important; box-shadow: 0 14px 40px -14px rgba(255, 90, 31, .7); }
.ox-btn-accent:hover { filter: brightness(1.08); }
.ox-btn-ghost { border-color: var(--ox-line-2); color: var(--ox-text) !important; background: transparent; }
.ox-btn-ghost:hover { border-color: rgba(255, 255, 255, .3); }
.ox-btn-dark { background: #0b0b0f; color: #fff !important; }

/* ---------------------------------------------------------------- portada */
.ox-hero { position: relative; max-width: 1120px; margin: 0 auto; padding: 110px 24px 40px; text-align: center; overflow-x: clip; }
.ox-orbitals { position: absolute; left: 50%; top: 0; width: 760px; height: 760px; margin-left: -380px; pointer-events: none; }
.ox-orbitals svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ox-glow { position: absolute; inset: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 90, 31, .2), transparent 70%); }
.ox-spin { transform-origin: 380px 380px; animation: ox-spin 70s linear infinite; }
.ox-spin-rev { transform-origin: 380px 380px; animation: ox-spin 100s linear infinite reverse; }
@keyframes ox-spin { to { transform: rotate(360deg); } }
.ox-hero-in { position: relative; }
.ox-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; font: 12px var(--ox-mono); letter-spacing: .08em; text-transform: uppercase; color: #b6bacb; }
.ox-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 3px rgba(61, 220, 151, .15); }
.ox-hero h1 { margin: 28px auto 0; max-width: 900px; font-weight: 600; font-size: clamp(42px, 7vw, 88px); line-height: .98; letter-spacing: -.035em; }
.ox-hero h1 em { font-style: normal; color: var(--ox-accent); }
.ox-lead { margin: 26px auto 0; max-width: 640px; font-size: 19px; line-height: 1.6; color: var(--ox-muted); }
.ox-cta { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ox-note { margin: 18px 0 0; font-size: 14px; color: var(--ox-dim); }

/* ---------------------------------------------------------------- vista del panel */
.ox-shot { margin-top: 40px; }
.ox-window { border-radius: 20px; border: 1px solid rgba(255, 255, 255, .1); background: #0e0f15; overflow: hidden; box-shadow: 0 60px 120px -40px rgba(255, 90, 31, .35), 0 40px 80px -30px rgba(0, 0, 0, .9); }
.ox-window-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.ox-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a2c36; }
.ox-window-bar span { margin: 0 auto; padding: 4px 14px; border-radius: 8px; background: rgba(255, 255, 255, .05); font: 12px var(--ox-mono); color: var(--ox-dim); }
.ox-window-body { display: flex; min-height: 360px; }
.ox-side { flex: 0 0 200px; list-style: none; margin: 0; padding: 18px 12px; border-right: 1px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ox-muted); }
.ox-side li { padding: 9px 12px; border-radius: 9px; }
.ox-side li.is-on { background: rgba(255, 90, 31, .14); color: #ffb08f; font-weight: 600; }
.ox-orders { flex: 1; min-width: 0; padding: 22px 26px; }
.ox-orders-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ox-orders-head b { font: 600 20px var(--ox-display); color: var(--ox-text); }
.ox-orders-head span { font: 11px var(--ox-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ox-dim); }
.ox-scroll { overflow-x: auto; }
.ox-orders table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 14px; }
.ox-orders td { padding: 14px 8px; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--ox-text); }
.ox-orders td:nth-child(3) { color: var(--ox-muted); }
.ox-mono { font-family: var(--ox-mono); color: var(--ox-dim) !important; }
.ox-num { text-align: right; }
.ox-orders td:last-child { text-align: right; }
.ox-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .08); color: var(--ox-body); }
.ox-tag.is-new { background: rgba(255, 90, 31, .16); color: #ffb08f; }
.ox-tag.is-paid { background: rgba(61, 220, 151, .14); color: #7be8b8; }
.ox-tag.is-ship { background: rgba(56, 189, 248, .14); color: #8fd6fa; }

.ox-strip { margin-top: 72px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; font: 13px var(--ox-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ox-dim); }

/* ---------------------------------------------------------------- secciones */
.ox-sec { padding-top: 120px; }
.ox-kicker { margin: 0 0 12px; font: 12px var(--ox-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ox-accent); }
.ox-sec h2 { max-width: 720px; font-weight: 600; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.025em; }
.ox-grid { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.ox-card { padding: 28px; border-radius: 18px; border: 1px solid var(--ox-line); background: rgba(255, 255, 255, .025); transition: border-color .2s ease, transform .2s ease; }
.ox-card:hover { border-color: rgba(255, 90, 31, .35); transform: translateY(-2px); }
.ox-card h3 { margin: 20px 0 8px; font-weight: 600; font-size: 20px; }
.ox-card p { margin: 0; font-size: 15px; color: var(--ox-muted); }
.ox-ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 90, 31, .12); color: var(--ox-accent); }
.ox-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ox-step { font: 13px var(--ox-mono); color: var(--ox-accent); }
.ox-steps h3 { margin-top: 14px; font-size: 22px; }
.ox-muted { color: var(--ox-muted); }

/* ---------------------------------------------------------------- planes (tabla comparativa) */
.ox-plans-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: 40px; }
.ox-plans-head .ox-muted { margin: 0; max-width: 360px; }
.ox-table-box { overflow-x: auto; border-radius: 22px; border: 1px solid var(--ox-line-2); background: rgba(10, 11, 16, .7); }
.ox-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.ox-table th, .ox-table td { padding: 16px 24px; border-top: 1px solid var(--ox-line); text-align: left; }
.ox-table thead th { border-top: 0; vertical-align: bottom; padding-top: 32px; padding-bottom: 24px; }
.ox-table tbody th { font-weight: 500; color: var(--ox-body); }
.ox-th-label { font: 12px var(--ox-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ox-dim); }
.ox-table th:first-child { position: sticky; left: 0; z-index: 1; background: #0b0c11; width: 34%; }
.ox-plan { width: 22%; }
.ox-plan span { display: block; }
.ox-plan-name { font: 600 22px var(--ox-display); color: var(--ox-text); }
.ox-plan-lead { margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--ox-muted); }
.ox-price { margin-top: 18px; font: 600 46px/1 var(--ox-display); letter-spacing: -.03em; color: var(--ox-text); }
.ox-price small { margin-left: 6px; font: 500 15px Inter, sans-serif; letter-spacing: 0; color: var(--ox-dim); }
.ox-per-day { margin-top: 8px; font-size: 13px; font-weight: 400; color: var(--ox-dim); }
.ox-badge { width: max-content; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: var(--ox-accent); color: #0b0b0f; font-size: 12px; font-weight: 700; }
/* Columna Pro resaltada de arriba abajo */
.ox-table .is-featured { background: rgba(255, 90, 31, .07); box-shadow: inset 1px 0 rgba(255, 90, 31, .45), inset -1px 0 rgba(255, 90, 31, .45); }
.ox-table thead .is-featured { box-shadow: inset 1px 0 rgba(255, 90, 31, .45), inset -1px 0 rgba(255, 90, 31, .45), inset 0 3px var(--ox-accent); }
.ox-table tbody tr:last-child .is-featured { box-shadow: inset 1px 0 rgba(255, 90, 31, .45), inset -1px 0 rgba(255, 90, 31, .45), inset 0 -1px rgba(255, 90, 31, .45); }
.ox-table tbody tr:hover th, .ox-table tbody tr:hover td { background-color: rgba(255, 255, 255, .025); }
.ox-table tbody tr:hover th:first-child { background-color: #101117; }
.ox-yes { width: 22px; height: 22px; fill: none; stroke: #3ddc97; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ox-no { color: #4a4e5c; font-weight: 600; }
.ox-table-cta td { padding-top: 24px; padding-bottom: 28px; }
.ox-table-cta .ox-btn { width: 100%; }
.ox-all { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--ox-muted); }
.ox-all li:not(:first-child)::before { content: "✓"; margin-right: 8px; color: #3ddc97; font-weight: 700; }
.ox-all b { color: var(--ox-text); }

/* ---------------------------------------------------------------- preguntas */
.ox-faq { max-width: 820px; }
.ox-faq h2 { margin-bottom: 32px; }
.ox-faq details { border-top: 1px solid var(--ox-line); padding: 20px 4px; }
.ox-faq details:last-child { border-bottom: 1px solid var(--ox-line); }
.ox-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 17px; color: var(--ox-text); }
.ox-faq summary::-webkit-details-marker { display: none; }
.ox-faq summary::after { content: "+"; font: 400 24px/1 var(--ox-display); color: var(--ox-dim); transition: transform .2s ease; }
.ox-faq details[open] summary::after { transform: rotate(45deg); color: var(--ox-accent); }
.ox-faq p { margin: 12px 0 0; color: var(--ox-muted); }

/* ---------------------------------------------------------------- cierre y pie */
.ox-final { position: relative; overflow: hidden; padding: 64px 40px; border-radius: 28px; background: var(--ox-accent); color: #0b0b0f; text-align: center; }
.ox-final svg { position: absolute; right: -120px; top: -140px; width: 520px; height: 520px; opacity: .14; }
.ox-final h2 { position: relative; margin: 0 auto; color: #0b0b0f; }
.ox-final p { position: relative; margin: 14px auto 28px; max-width: 520px; font-size: 18px; }
.ox-final .ox-btn { position: relative; }
.ox-foot { margin-top: 72px; padding-top: 32px; padding-bottom: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; font-size: 14px; color: var(--ox-dim); border-top: 1px solid var(--ox-line); }
.ox-foot nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 20px; }
.ox-foot nav a { color: var(--ox-muted) !important; text-decoration: none; }
.ox-foot nav a:hover { color: #fff !important; }

/* ---------------------------------------------------------------- pantallas angostas */
@media (max-width: 960px) {
  .ox-links { display: none; }
  .ox-side { display: none; }
}
@media (max-width: 560px) {
  .ox-nav { gap: 8px; padding-left: 16px; }
  .ox-login { display: none; }
  .ox-hero { padding-top: 72px; }
  .ox-orbitals { transform: scale(.6); transform-origin: 50% 0; }
  .ox-spin-rev { display: none; }
  .ox-final { padding: 48px 24px; }
  .ox-foot nav { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ox-spin, .ox-spin-rev { animation: none; } body.ox { scroll-behavior: auto; } .ox-btn, .ox-card { transition: none; } }

/* ================================================================ páginas internas (orbit.css en oscuro) */
.ox-nav-min { justify-content: center; padding: 14px 20px; }
.ox-foot-min { justify-content: center; }
body.ox .ob-eyebrow { font: 12px var(--ox-mono); letter-spacing: .14em; color: var(--ox-accent); }
body.ox .ob-lead, body.ox .ob-muted, body.ox .ob-note { color: var(--ox-muted); }
body.ox .ob-hint { color: var(--ox-dim); }
body.ox .ob-code { font-family: var(--ox-mono); font-weight: 500; color: var(--ox-accent); }
body.ox .ob-card {
  position: relative; background: rgba(14, 15, 21, .82); border: 1px solid var(--ox-line-2); border-radius: 22px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02) inset;
}
/* Resplandor naranja detrás de los formularios (ingresar, crear tienda) */
body.ox .ob-auth, body.ox .ob-signup { position: relative; }
body.ox .ob-auth::before, body.ox .ob-signup::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 640px; height: 640px; margin-left: -320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 90, 31, .16), transparent 65%); pointer-events: none;
}
body.ox .ob-auth h1, body.ox .ob-signup h1 { letter-spacing: -.025em; }
body.ox .ob-field label, body.ox .ob-field legend { color: var(--ox-body); font-weight: 500; }
body.ox .ob-form .form-control {
  min-height: 52px; padding: 12px 16px; color: var(--ox-text); background: rgba(255, 255, 255, .03);
  border: 1px solid var(--ox-line-2); border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease;
}
body.ox .ob-form .form-control::placeholder { color: #5d6170; }
body.ox .ob-form .form-control:focus { outline: none; border-color: var(--ox-accent); box-shadow: 0 0 0 4px rgba(255, 90, 31, .18); }
body.ox .ob-form .form-control:-webkit-autofill,
body.ox .ob-form .form-control:-webkit-autofill:hover,
body.ox .ob-form .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ox-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #12131a inset !important;
  caret-color: var(--ox-text);
}
body.ox .ob-input-suffix .form-control { border-right: 0; border-radius: 12px 0 0 12px; }
body.ox .ob-input-suffix span { background: rgba(255, 255, 255, .05); border-color: var(--ox-line-2); color: var(--ox-dim); font-family: var(--ox-mono); font-size: 13px; }
body.ox .ob-input-suffix:focus-within .form-control { box-shadow: none; }
body.ox .ob-input-suffix:focus-within { border-radius: 12px; box-shadow: 0 0 0 4px rgba(255, 90, 31, .18); }
body.ox .ob-input-suffix:focus-within span { border-color: var(--ox-accent); }
body.ox .ob-btn { min-height: 52px; border-radius: 14px; transition: transform .15s ease, filter .15s ease; }
body.ox .ob-btn:hover { transform: translateY(-1px); }
body.ox .ob-btn-primary { background: var(--ox-accent); color: #0b0b0f; box-shadow: 0 14px 40px -16px rgba(255, 90, 31, .7); }
body.ox .ob-btn-primary:hover { filter: brightness(1.08); color: #0b0b0f; }
body.ox .ob-btn-ghost { background: transparent; border-color: var(--ox-line-2); color: var(--ox-text); }
body.ox .ob-btn-ghost:hover { border-color: rgba(255, 255, 255, .3); color: var(--ox-text); }
body.ox .ob-form a, body.ox .ob-msg a:not(.ob-btn) { color: #ff8a5c; }
body.ox .ob-remind { border-top-color: var(--ox-line); }
body.ox .ob-remind summary { color: var(--ox-text); }
body.ox .ob-remind summary::marker { color: var(--ox-accent); }
body.ox .ob-err { color: #ff9b9b; }
body.ox .ob-alert { background: rgba(255, 107, 107, .08); border: 1px solid rgba(255, 107, 107, .3); color: #ffb4b4; }
body.ox .ob-ok { background: rgba(61, 220, 151, .08); border: 1px solid rgba(61, 220, 151, .3); color: #a6f0cf; }
body.ox .ob-checks li { color: var(--ox-body); }
body.ox .ob-checks li::before { color: #3ddc97; }
body.ox .ob-check input { accent-color: var(--ox-accent); }
body.ox .ob-field .ob-pick { border-color: var(--ox-line-2); background: rgba(255, 255, 255, .02); color: var(--ox-text); }
body.ox .ob-pick span { color: var(--ox-dim); }
body.ox .ob-pick.is-checked { border-color: var(--ox-accent); box-shadow: 0 0 0 1px var(--ox-accent); background: rgba(255, 90, 31, .07); }
body.ox .ob-done-icon { color: #0b0b0f; box-shadow: 0 0 0 10px rgba(255, 90, 31, .12); }
body.ox .ob-msg { padding-top: 96px; }
/* Términos y privacidad */
body.ox .ob-legal .ob-updated { color: var(--ox-dim); font-family: var(--ox-mono); font-size: 12px; letter-spacing: .06em; }
body.ox .ob-legal nav.ob-toc, body.ox .ob-legal .ob-legal-box { background: rgba(255, 255, 255, .025); border-color: var(--ox-line); }
body.ox .ob-legal nav.ob-toc a, body.ox .ob-legal a { color: var(--ox-text); }
body.ox .ob-legal nav.ob-toc a:hover, body.ox .ob-legal a:hover { color: #ff8a5c; }
body.ox .ob-legal nav.ob-toc li::marker { color: var(--ox-dim); }
body.ox .ob-legal h2 { scroll-margin-top: 110px; }
body.ox .ob-legal p, body.ox .ob-legal li { color: var(--ox-body); }
body.ox .ob-legal strong { color: var(--ox-text); }
body.ox .ob-legal .ob-legal-box p { margin: 0; }

/* Soporte › adjuntar evidencia en el sitio oscuro */
body.ox .ob-drop { border-color: var(--ox-line-2); background: rgba(255, 255, 255, .02); }
body.ox .ob-drop:hover, body.ox .ob-drop.is-over { border-color: var(--ox-accent); background: rgba(255, 90, 31, .07); }
body.ox .ob-drop.is-ready { border-color: var(--ox-accent); }
body.ox .ob-drop.is-invalid { border-color: #ff6b6b; }
body.ox .ob-drop-icon { background: rgba(255, 90, 31, .14); color: var(--ox-accent); }
body.ox .ob-drop-empty b, body.ox .ob-drop-file b { color: var(--ox-text); }
body.ox .ob-drop-empty small, body.ox .ob-drop-file small { color: var(--ox-dim); }
body.ox .ob-drop-file img { border-color: var(--ox-line-2); }
body.ox .ob-drop-x { background: rgba(255, 255, 255, .08); color: var(--ox-dim); }
body.ox .ob-drop-x:hover { background: #e5484d; color: #fff; }