/* Primeros pasos. Builds on marketing-pro.css. */
.ob-ring{transform:rotate(-90deg);flex:none}
.ob-ring circle{fill:none;stroke:#e3ebdf;stroke-width:5}
.ob-ring .ob-ring-fill{stroke:var(--cp-accent,#2f6b46);stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1)}
.ob-hero{display:flex;align-items:center;gap:24px;padding:22px 24px;margin-bottom:18px;border-radius:22px;background:linear-gradient(135deg,#1f4a35,#2f6b46 60%,#4d8a5a);color:#fff;box-shadow:0 14px 34px #1c362826}
.mp-enter .ob-hero{animation:mp-rise .45s cubic-bezier(.22,1,.36,1) both}
.ob-hero-ring{position:relative;display:grid;place-items:center}
.ob-hero-ring .ob-ring circle{stroke:#ffffff2e;stroke-width:7}.ob-hero-ring .ob-ring .ob-ring-fill{stroke:#c9f0b4}
.mp-enter .ob-hero-ring .ob-ring-fill{animation:ob-fill 1s cubic-bezier(.22,1,.36,1) both .15s}
@keyframes ob-fill{from{stroke-dashoffset:var(--c,260)}}
.ob-hero-ring b{position:absolute;font:750 22px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.6px}
.ob-hero-copy small{font:600 11px 'DM Sans',sans-serif;letter-spacing:.5px;text-transform:uppercase;opacity:.75}
.ob-hero-copy h2{margin:4px 0;font:750 21px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.5px}
.ob-hero-copy p{margin:0;max-width:620px;font-size:13px;line-height:1.5;opacity:.9}
.ob-hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.ob-hero-actions .button.primary{background:#fff;color:#1f4a35;border-color:#fff}
.ob-hero-actions span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;opacity:.85}.ob-hero-actions .icon{width:14px;height:14px}
.ob-phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.ob-phase{padding:16px;border:1px solid var(--cp-line);border-radius:18px;background:#fff;animation:mp-rise .45s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.06s + var(--i) * 60ms)}
.ob-phase>header{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.ob-num{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:#eef3ea;color:var(--cp-ink);font:750 13px 'Plus Jakarta Sans',sans-serif}
.ob-num .icon{width:15px;height:15px;stroke-width:2.6}
.ob-phase.complete .ob-num{background:var(--cp-accent);color:#fff}
.ob-phase h3{margin:0;font:750 15px 'Plus Jakarta Sans',sans-serif}.ob-phase header p{margin:2px 0 0;font-size:12px;color:var(--cp-muted);line-height:1.4}
.ob-phase header em{margin-left:auto;font-style:normal;font:700 12px 'DM Sans',sans-serif;color:var(--cp-muted)}
.ob-phase ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ob-step{border:1px solid #eef2ec;border-radius:13px;background:#fbfcfa;transition:border-color .15s,background .15s}
.ob-step.open{border-color:#cfdcc9;background:#fff;box-shadow:0 6px 18px #1c36280d}
.ob-step-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.ob-step-head>.icon{width:15px;height:15px;margin-left:auto;color:var(--cp-muted);transition:transform .2s}
.ob-step.open .ob-step-head>.icon{transform:rotate(180deg)}
.ob-check{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;border:2px solid #cfdbc9;background:#fff;transition:background .2s,border-color .2s}
.ob-check .icon{width:13px;height:13px;color:#fff;stroke-width:3}
.ob-step.done .ob-check{background:var(--cp-accent);border-color:var(--cp-accent);animation:ob-pop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes ob-pop{from{transform:scale(.6)}}
.ob-step-title{min-width:0}.ob-step-title strong{display:block;font-size:13px;color:var(--cp-ink)}
.ob-step.done .ob-step-title strong{color:var(--cp-muted);text-decoration:line-through;text-decoration-color:#b9c7b3}
.ob-step-title small{font-size:11.5px;color:var(--cp-muted)}
.ob-step-body{padding:0 12px 12px 44px;animation:mp-rise .25s ease both}
.ob-step-body p{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--cp-text)}
.ob-step-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ob-step-actions small{font-size:11.5px;color:var(--cp-muted)}
.ob-ok{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;color:#2f6b46}.ob-ok .icon{width:14px;height:14px}
#sidebar .ob-nav .ob-ring{width:18px;height:18px}
#sidebar .ob-nav .ob-ring circle{stroke-width:4}
#sidebar .ob-nav .ob-count{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;color:var(--cp-accent,#2f6b46);background:#e2f0dc;padding:1px 7px;border-radius:999px}
@media(max-width:1180px){.ob-phases{grid-template-columns:1fr}}
@media(max-width:700px){.ob-hero{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.ob-phase,.ob-step-body,.ob-step.done .ob-check,.mp-enter .ob-hero-ring .ob-ring-fill{animation:none}}