/* Onboarding v2 (js/onboarding2.js): pantalla completa con barra superior (atrás + progreso), escenario con scroll
   y pie fijo con el botón principal. Paleta de la app: marino + ámbar sobre crema. */
.o2{position:fixed;inset:0;z-index:60;background:var(--crema);display:flex;flex-direction:column;animation:onbIn .25s ease}
.o2__top{flex:none;display:flex;align-items:center;gap:12px;padding:calc(var(--sat) + 10px) 16px 4px;min-height:calc(var(--sat) + 46px);max-width:560px;width:100%;margin:0 auto}
.o2__back{width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--marino);font-size:1.7rem;font-weight:900;line-height:1;flex:none;display:flex;align-items:center;justify-content:center;padding-bottom:4px}
.o2__back[hidden]{display:flex;visibility:hidden}
.o2__prog{flex:1;height:8px;border-radius:99px;background:#e7e0d1;overflow:hidden}
.o2__prog[hidden]{display:block;visibility:hidden}
.o2__prog i{display:block;height:100%;width:0;background:var(--ambar);border-radius:99px;transition:width .35s ease}
.o2__stage{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.o2__step{max-width:560px;margin:0 auto;padding:6px 20px 18px;animation:o2In .32s ease both}
.o2__step.from-left{animation-name:o2InL}
@keyframes o2In{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes o2InL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.o2__foot{flex:none;max-width:560px;width:100%;margin:0 auto;padding:10px 20px calc(14px + var(--sab));background:linear-gradient(rgba(250,246,238,0),var(--crema) 26%)}
.o2__foot[hidden]{display:none}
.o2__cta{width:100%;margin:0;padding:15px;font-size:1.05rem;border-radius:16px;box-shadow:0 6px 18px rgba(245,158,11,.35)}
.o2__cta.is-off{opacity:.45;box-shadow:none}
.o2__link{display:block;width:100%;background:none;border:0;color:var(--marino);font-weight:800;font-size:.95rem;padding:12px 0 2px;text-decoration:underline;text-underline-offset:3px}
.o2__link--sm{font-size:.85rem;padding:6px 0 0;width:auto;margin:0 auto}

.o2-hero{border-radius:24px;overflow:hidden;box-shadow:0 12px 32px rgba(20,48,110,.14);background:#f2ecdf}
.o2-hero img{display:block;width:100%;aspect-ratio:4/3.3;object-fit:cover}
.o2-hero--p img{aspect-ratio:4/3}
.o2-brand{display:flex;align-items:center;gap:8px;margin:18px 0 4px;font-weight:900;color:var(--marino);font-size:1.05rem}
.o2-brand img{width:26px;height:26px}
.o2-h{font-size:2rem;line-height:1.1;font-weight:900;color:var(--marino);margin:2px 0 8px;letter-spacing:-.01em}
.o2-h2{font-size:1.5rem;line-height:1.18;font-weight:900;color:var(--marino);margin:6px 0 8px}
.o2-sub{font-size:1.02rem;line-height:1.5;color:var(--ink-2);margin:0 0 12px}
.o2-kicker{font-size:.74rem;font-weight:900;letter-spacing:.09em;color:var(--ambar);margin:6px 0 0}
.o2-note{font-size:.88rem;line-height:1.45;color:var(--muted);margin:12px 0 0}
.o2-dots{display:flex;gap:7px;justify-content:center;margin:16px 0 6px}
.o2-dots i{width:8px;height:8px;border-radius:50%;background:#d8d2c4}
.o2-dots i.on{background:var(--ambar);width:22px;border-radius:99px}

/* demo: la resta de antes vs la de hoy */
.o2-antes{background:#efe9dc;border-radius:16px;padding:12px 14px;margin:12px 0 10px;color:#6b6457}
.o2-antes__k,.o2-hoy__k{font-size:.72rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.o2-antes__row{display:flex;align-items:center;gap:14px;margin-top:6px}
.o2-antes__row p{margin:0;font-size:.9rem;line-height:1.4}
.o2-col{display:grid;grid-template-columns:repeat(3,auto);grid-template-rows:auto auto auto;font:700 1.15rem/1.15 ui-monospace,Menlo,Consolas,monospace;color:#5d564a;flex:none;column-gap:2px}
.o2-col span{text-align:center;min-width:16px;position:relative}
.o2-col span:nth-child(1){grid-column:2}.o2-col span:nth-child(2){grid-column:3}
.o2-col__op{grid-column:1;grid-row:2}
.o2-col span:nth-child(4){grid-column:2;grid-row:2}.o2-col span:nth-child(5){grid-column:3;grid-row:2}
.o2-col__r{grid-row:3;border-top:2px solid #8a8274}
.o2-col span:nth-child(6){grid-column:2}.o2-col span:nth-child(7){grid-column:3}
.o2-col__p s{opacity:.55}.o2-col__p i{position:absolute;top:-.85em;left:2px;font-size:.7em;font-style:normal;color:#b45309}
.o2-col sup{font-size:.6em;color:#b45309;vertical-align:super}
.o2-hoy{background:#fff;border:2px solid var(--ambar);border-radius:18px;padding:12px 14px 10px;box-shadow:0 8px 24px rgba(245,158,11,.16)}
.o2-hoy__k{color:#b45309}
.o2-bloques{display:flex;align-items:flex-end;gap:18px;min-height:132px;padding:12px 4px 6px}
.o2-bl__d{display:flex;gap:6px;align-items:flex-end}
.o2-bl__bar{display:block;width:14px;height:120px;border-radius:4px;background:repeating-linear-gradient(to top,#3b6fd8 0 10px,#2f5fc4 10px 12px);box-shadow:inset 0 0 0 1.5px #1e3f8a;transition:opacity .5s,transform .5s,filter .5s}
.o2-bl__u{display:grid;grid-template-columns:repeat(4,14px);gap:4px;align-content:end}
.o2-bl__cubo{display:block;width:14px;height:14px;border-radius:3px;background:#f59e0b;box-shadow:inset 0 0 0 1.5px #b45309;transition:opacity .5s,transform .5s}
.o2-bl__cubo.is-falta{animation:o2Falta 1s ease infinite}
@keyframes o2Falta{50%{box-shadow:0 0 0 3px rgba(220,38,38,.55),inset 0 0 0 1.5px #b45309}}
.o2-bl__cubo.is-nueva{animation:o2Pop .45s ease both;animation-delay:var(--d)}
@keyframes o2Pop{from{opacity:0;transform:translateY(-26px) scale(.4)}to{opacity:1;transform:none}}
.o2-bl__bar.is-fuera,.o2-bl__cubo.is-fuera{opacity:.14;transform:scale(.85)}
.o2-bl__bar.is-ok{filter:drop-shadow(0 0 6px rgba(22,163,74,.7))}
.o2-bl__cubo.is-ok{background:#22c55e;box-shadow:inset 0 0 0 1.5px #15803d}
.o2-hoy__cap{min-height:3.2em;margin:6px 0 2px;font-size:.98rem;line-height:1.45;color:var(--ink)}
.o2-hoy__n{display:inline-block;font-size:.7rem;font-weight:900;color:#fff;background:var(--marino);border-radius:99px;padding:2px 7px;margin-right:4px;vertical-align:1px}

/* opciones */
.o2-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 4px}
.o2-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:18px;background:#fff;border:2px solid var(--line);font-weight:800;color:var(--marino);font-size:.95rem}
.o2-card.is-on{border-color:var(--ambar);background:#fff7e6;box-shadow:0 0 0 2px var(--ambar) inset}
.o2-card__ic{width:58px;height:58px;object-fit:contain}
.o2-opts{display:flex;flex-direction:column;gap:10px;margin:12px 0 4px}
.o2-opt{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:16px;background:#fff;border:2px solid var(--line);text-align:left;font-weight:800;color:var(--marino);font-size:1rem;min-height:62px}
.o2-opt span:not(.o2-opt__chk){flex:1}
.o2-opt.is-on{border-color:var(--ambar);background:#fff7e6}
.o2-opt__img{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:none}
.o2-opt__ic{width:44px;height:44px;object-fit:contain;flex:none}
.o2-opt__chk{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center}
.o2-opt.is-on .o2-opt__chk{background:var(--ambar);border-color:var(--ambar)}
.o2-opt.is-on .o2-opt__chk::after{content:"";width:7px;height:12px;border:solid var(--marino);border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
.o2-glbl{font-size:.8rem;font-weight:800;color:var(--muted);margin:10px 0 0}

/* hábito */
.o2-chart{display:flex;align-items:flex-end;gap:12px;height:170px;padding:10px 6px 0;margin:14px 0 4px;border-bottom:2px solid var(--line)}
.o2-chart__c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.o2-chart__c b{color:var(--marino);font-size:1.05rem;margin-bottom:4px;opacity:0;transition:opacity .4s}
.o2-chart__c i{display:block;width:100%;max-width:56px;height:0;border-radius:10px 10px 0 0;background:linear-gradient(var(--ambar-2),var(--ambar));transition:height .8s cubic-bezier(.2,.8,.2,1)}
.o2-chart__c small{font-size:.72rem;color:var(--muted);font-weight:700;margin:6px 0 -22px;white-space:nowrap}
.o2-chart.is-in .o2-chart__c i{height:calc(var(--h) * 120px)}
.o2-chart.is-in .o2-chart__c b{opacity:1;transition-delay:.6s}
.o2-chart.is-in .o2-chart__c:nth-child(2) i{transition-delay:.15s}.o2-chart.is-in .o2-chart__c:nth-child(3) i{transition-delay:.3s}.o2-chart.is-in .o2-chart__c:nth-child(4) i{transition-delay:.45s}
.o2-chart__l{text-align:center;font-size:.8rem;color:var(--muted);margin:30px 0 0}

/* hora + aviso */
.o2-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px 14px;margin:16px 0 0;font-weight:800;color:var(--marino)}
.o2-toggle span{display:flex;align-items:center;gap:8px}
.o2-toggle__ic{width:28px;height:28px;object-fit:contain}
.o2-toggle input{display:none}
.o2-toggle i{width:50px;height:30px;border-radius:99px;background:#d8d2c4;position:relative;flex:none;transition:background .2s}
.o2-toggle i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s}
.o2-toggle input:checked + i{background:var(--ambar)}
.o2-toggle input:checked + i::after{left:23px}

/* preparando */
.o2-spark{display:flex;justify-content:center;margin:34px 0 8px}
.o2-spark img{width:72px;height:72px;animation:o2Pulso 1.6s ease-in-out infinite}
@keyframes o2Pulso{50%{transform:scale(1.1);filter:drop-shadow(0 0 14px rgba(245,158,11,.75))}}
.o2-bars{display:flex;flex-direction:column;gap:16px;margin:22px 0 10px}
.o2-bar__l{display:flex;justify-content:space-between;gap:10px;font-weight:800;color:var(--marino);font-size:.95rem;margin-bottom:6px}
.o2-bar__l b{color:var(--muted);font-variant-numeric:tabular-nums}
.o2-bar.is-ok .o2-bar__l b{color:#15803d}
.o2-bar__t{height:10px;border-radius:99px;background:#e7e0d1;overflow:hidden}
.o2-bar__t i{display:block;height:100%;width:0;background:var(--ambar);border-radius:99px}
.o2-bar.is-ok .o2-bar__t i{background:#22c55e}
.o2-mq{background:#fff;border-radius:18px;padding:16px;margin-top:16px;box-shadow:0 10px 30px rgba(20,48,110,.15)}
.o2-mq.is-in{animation:o2In .3s ease}
.o2-mq p{margin:0 0 12px;font-weight:900;color:var(--marino);font-size:1.05rem;line-height:1.35;text-align:center}
.o2-mq__b{display:flex;gap:10px}.o2-mq__b .btn{flex:1;margin:0}

/* plan */
.o2-plan{display:flex;flex-direction:column;gap:8px;margin:12px 0 6px}
.o2-day{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 12px;animation:o2In .4s ease both;animation-delay:calc(var(--i) * 110ms)}
.o2-day:first-child{border-color:var(--ambar);box-shadow:0 6px 18px rgba(245,158,11,.18)}
.o2-day__d{width:74px;flex:none;font-size:.8rem;font-weight:900;color:var(--ambar);text-transform:uppercase;letter-spacing:.03em;line-height:1.2}
.o2-day__tx{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.o2-day__tx b{color:var(--marino);font-size:.95rem;line-height:1.25}
.o2-day__tx .chip{align-self:flex-start}
.o2-day__free{font-size:.66rem;font-weight:900;color:#15803d;background:#dcfce7;border-radius:99px;padding:3px 7px;flex:none}
.o2-day--blur{filter:blur(2.5px);opacity:.6}
.o2-prom{display:flex;flex-direction:column;gap:8px;margin:12px 0 0}
.o2-prom__r{display:flex;gap:10px;align-items:flex-start;background:#fff7e6;border-radius:14px;padding:10px 12px;font-size:.92rem;line-height:1.4;color:var(--ink)}
.o2-prom__r .ui-ico{flex:none;margin-top:1px}

/* cuenta y cierre */
.o2-art{display:flex;justify-content:center;margin:10px 0 6px}
.o2-art img{width:100%;max-width:340px;aspect-ratio:4/3;object-fit:cover;border-radius:22px;box-shadow:0 10px 28px rgba(20,48,110,.12)}
.o2-art img.o2-art__ic{width:110px;height:110px;max-width:none;aspect-ratio:auto;object-fit:contain;box-shadow:none;border-radius:0}
.o2-bul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:10px}
.o2-bul li{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:.97rem}
.o2-bul__ic{width:30px;height:30px;object-fit:contain;flex:none}
.o2-tl{position:relative;margin:14px 0 4px;padding-left:6px}
.o2-tl::before{content:"";position:absolute;left:15px;top:14px;bottom:18px;width:3px;background:#e7e0d1;border-radius:2px}
.o2-tl__r{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;position:relative}
.o2-tl__p{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #d8d2c4;flex:none;margin-top:1px}
.o2-tl__p.is-on{background:var(--ambar);border-color:var(--ambar)}
.o2-tl__r b{display:block;color:var(--marino);font-size:1rem}
.o2-tl__r small{display:block;color:var(--ink-2);font-size:.9rem;line-height:1.4}

/* la hoja de la cuenta, abierta desde el onboarding, va encima */
.ov.ov--sobre{z-index:80}