/* Onboarding v3 · sistema visual del embudo (plan sección 4).
   Blanco, casi negro y un solo acento; el color se guarda para los premios.
   Una sola familia sin serif en dos pesos. Separado del sistema de la app. */
:root {
  --ob-bg: #FFFFFF;
  --ob-ink: #11242b;
  --ob-muted: #59727A;
  --ob-line: #E2EAED;
  --ob-soft: #F3F7F8;
  --ob-off: #E2EAED;
  --ob-off-text: #9AAEB5;
  --ob-accent: #5D767E;
  --ob-accent-soft: #E8EFF1;
  --ob-ok: #3a7d5c;
  --ob-grad-a: #A8D6E4;
  --ob-grad-b: #D9EEE3;
  --ob-radius: 14px;
  --ob-gutter: 20px;
  --ob-sa-top: env(safe-area-inset-top, 0px);
  --ob-sa-bottom: env(safe-area-inset-bottom, 0px);
  --ob-font: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
}
.ob, .ob * { box-sizing: border-box; }
.ob {
  font-family: var(--ob-font); color: var(--ob-ink); background: var(--ob-bg);
  font-size: 17px; line-height: 1.4; -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* Solo la fuente: el color lo fija cada botón (en Safari `inherit` aquí
   ganaba a .ob-btn por especificidad y el texto blanco salía negro). */
.ob button { font: inherit; }

/* 1. Marco de pantalla ------------------------------------------------- */
.ob-screen {
  position: relative; display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; width: 100%; background: var(--ob-bg);
  overflow: hidden;
}
.ob-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: calc(10px + var(--ob-sa-top)) var(--ob-gutter) 10px;
}
.ob-back {
  color: var(--ob-ink); -webkit-appearance: none; appearance: none;
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ob-soft);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto;
}
.ob-back:active { background: var(--ob-line); }
.ob-back svg { width: 18px; height: 18px; }
.ob-back[hidden] { display: none; }
.ob-progress { flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--ob-line); overflow: hidden; }
.ob-progress > i { display: block; height: 100%; width: 0; background: var(--ob-ink); border-radius: 2px; transition: width .45s cubic-bezier(.2,.7,.2,1); }
.ob-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px var(--ob-gutter) 24px; overscroll-behavior: contain;
}
.ob-body.center { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.ob-foot {
  flex: 0 0 auto; padding: 12px var(--ob-gutter) calc(14px + var(--ob-sa-bottom));
  background: var(--ob-bg); border-top: 1px solid transparent;
}
.ob-screen.scrolled .ob-foot { border-top-color: var(--ob-line); }
.ob-title { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; margin: 8px 0 10px; }
.ob-sub { font-size: 16px; color: var(--ob-muted); margin: 0 0 20px; }
.center .ob-title { font-size: 30px; }
.ob-eyebrow { font-size: 14px; color: var(--ob-muted); margin: 0 0 6px; }

/* Botón principal: gris hasta que eliges, negro después. */
.ob-btn {
  display: block; width: 100%; border: 0; border-radius: 999px; padding: 17px 20px;
  font-size: 17px; font-weight: 600; background: var(--ob-ink); color: #fff;
  cursor: pointer; transition: background .2s, color .2s, transform .08s;
  -webkit-appearance: none; appearance: none;
}
.ob-btn:active { transform: scale(.985); }
.ob-btn[disabled], .ob-btn.off { background: var(--ob-off); color: var(--ob-off-text); cursor: default; transform: none; }
.ob-btn.ghost { background: transparent; color: var(--ob-ink); padding: 12px; font-weight: 400; }
.ob-btn.ghost.muted { color: var(--ob-muted); }
.ob-btn + .ob-btn { margin-top: 6px; }
.ob-conditions { text-align: center; font-size: 13px; color: var(--ob-muted); margin: 10px 0 0; }
.ob-conditions b { font-weight: 600; color: var(--ob-ink); }

/* 2. Fila de opción ---------------------------------------------------- */
.ob-options { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ob-option {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1.5px solid var(--ob-line); border-radius: var(--ob-radius); background: var(--ob-bg);
  padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s; min-height: 64px;
  color: var(--ob-ink); -webkit-appearance: none; appearance: none;
}
.ob-option:active { background: var(--ob-soft); }
.ob-option .ic {
  width: 40px; height: 40px; border-radius: 50%; background: var(--ob-soft); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.ob-option .ic svg { width: 20px; height: 20px; }
.ob-option .ic img { width: 26px; height: 26px; }
.ob-option .tx { flex: 1 1 auto; min-width: 0; }
.ob-option .tx b { display: block; font-weight: 600; font-size: 17px; line-height: 1.25; }
.ob-option .tx small { display: block; color: var(--ob-muted); font-size: 14px; margin-top: 2px; }
.ob-option .sel {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ob-line); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
}
.ob-option .sel svg { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: all .15s; }
.ob-option[aria-checked="true"] { border-color: var(--ob-ink); }
.ob-option[aria-checked="true"] .sel { background: var(--ob-ink); border-color: var(--ob-ink); }
.ob-option[aria-checked="true"] .sel svg { opacity: 1; transform: scale(1); }
.ob-option[aria-checked="true"] { background: var(--ob-ink); color: #fff; border-color: var(--ob-ink); }
.ob-option[aria-checked="true"] .ic { background: rgba(255,255,255,.92); }
.ob-option[aria-checked="true"] .tx small { color: rgba(255,255,255,.78); }
.ob-option[aria-checked="true"] .sel { background: #fff; border-color: #fff; color: var(--ob-ink); }
.ob-option[aria-checked="true"] .sel svg { color: var(--ob-ink); stroke: var(--ob-ink); }
.ob-options.ob-scrollhint { padding-bottom: 18px; }
.ob-body:has(.ob-options.ob-scrollhint) { position: relative; }
.ob-body:has(.ob-options.ob-scrollhint)::after { content: ""; position: absolute; left: var(--ob-gutter); right: var(--ob-gutter); bottom: 0; height: 56px; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--ob-bg) 82%); }
.ob-option.rec .tx b::after { content: "Recomendada"; font-size: 12px; font-weight: 600; color: var(--ob-accent); background: var(--ob-accent-soft); border-radius: 999px; padding: 3px 8px; margin-left: 8px; vertical-align: middle; }
.ob-length-options { gap: 8px; }
.ob-length-options .ob-option { min-height: 70px; padding-top: 8px; padding-bottom: 8px; }
.ob-length-options .ic { width: 52px; height: 52px; }
.ob-length-options .ic img { width: 38px; height: 38px; }

/* 3. Rueda y regla ----------------------------------------------------- */
.ob-wheel { position: relative; height: 220px; overflow: hidden; margin: 10px 0; }
.ob-wheel ul {
  height: 100%; margin: 0; padding: 88px 0; list-style: none; overflow-y: auto;
  scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ob-wheel ul::-webkit-scrollbar { display: none; }
.ob-wheel li {
  height: 44px; line-height: 44px; text-align: center; scroll-snap-align: center;
  font-size: 22px; color: var(--ob-off-text); transition: color .15s, transform .15s;
}
.ob-wheel li.on { color: var(--ob-ink); font-weight: 600; font-size: 26px; }
.ob-wheel::before, .ob-wheel::after {
  content: ""; position: absolute; left: 0; right: 0; height: 44px; top: 88px; pointer-events: none;
  border-top: 1.5px solid var(--ob-line); border-bottom: 1.5px solid var(--ob-line); border-radius: 12px;
}
.ob-wheel::after { border: 0; top: 0; height: 100%;
  background: linear-gradient(var(--ob-bg), rgba(255,255,255,0) 35%, rgba(255,255,255,0) 65%, var(--ob-bg)); }

.ob-ruler { margin: 10px 0; user-select: none; }
.ob-ruler .val { text-align: center; font-size: 56px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: .95; margin: 8px 0 4px; }
.ob-ruler .val small { font-size: 18px; font-weight: 400; color: var(--ob-muted); margin-left: 4px; }
.ob-ruler .unit { text-align: center; color: var(--ob-muted); font-size: 14px; margin-bottom: 14px; }
.ob-ruler .track { position: relative; height: 72px; }
.ob-ruler .track::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 18px; width: 3px; margin-left: -1.5px;
  background: var(--ob-accent); border-radius: 2px; pointer-events: none;
}
.ob-ruler .scroll {
  height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; display: flex; align-items: flex-start;
}
.ob-ruler .scroll::-webkit-scrollbar { display: none; }
.ob-ruler .pad { flex: 0 0 50%; }
.ob-ruler .tick { flex: 0 0 14px; height: 54px; position: relative; scroll-snap-align: center; }
.ob-ruler .tick::before { content: ""; position: absolute; left: 6px; top: 20px; width: 2px; height: 16px; background: var(--ob-line); border-radius: 1px; }
.ob-ruler .tick.major::before { height: 30px; top: 6px; background: var(--ob-muted); }
.ob-ruler .tick.major::after { content: attr(data-label); position: absolute; left: 7px; top: 40px; transform: translateX(-50%); font-size: 12px; color: var(--ob-muted); white-space: nowrap; }

/* 4. Deslizador de 3 posiciones ---------------------------------------- */
.ob-slider3 { margin: 10px 0; }
.ob-slider3 .icons { display: flex; justify-content: space-between; padding: 0 6px; margin-bottom: 8px; }
.ob-slider3 .icons span { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ob-off-text); background: var(--ob-soft); transition: all .2s; }
.ob-slider3 .icons span svg { width: 26px; height: 26px; }
.ob-slider3 .icons span.on { color: var(--ob-ink); background: var(--ob-line); transform: scale(1.08); }
.ob-slider3 .icons span.on.mid { color: var(--ob-accent); background: var(--ob-accent-soft); }
.ob-slider3 .rail { position: relative; height: 44px; }
.ob-slider3 .rail::before { content: ""; position: absolute; left: 28px; right: 28px; top: 20px; height: 4px; background: var(--ob-line); border-radius: 2px; }
.ob-slider3 .rail input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ob-slider3 .knob { position: absolute; top: 6px; width: 32px; height: 32px; border-radius: 50%; background: var(--ob-ink); margin-left: -16px; transition: left .18s cubic-bezier(.2,.7,.2,1); pointer-events: none; box-shadow: 0 2px 6px rgba(17,36,43,.2); }
.ob-slider3 .labels { display: flex; justify-content: space-between; font-size: 14px; color: var(--ob-muted); padding: 0 8px; }
.ob-slider3 .labels span.on { color: var(--ob-ink); font-weight: 600; }
.ob-slider3 .ob-card { margin-top: 18px; }

/* 5. Tarjeta gris ------------------------------------------------------ */
.ob-card { background: var(--ob-soft); border-radius: 18px; padding: 18px; }
.ob-card h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.ob-card p { margin: 0; color: var(--ob-muted); font-size: 15px; }
.ob-card .big { font-size: 28px; font-weight: 600; color: var(--ob-ink); letter-spacing: -0.01em; }
.ob-card .accent { color: var(--ob-accent); }
.ob-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 8px; text-align: left; }
.ob-compare > div { border-radius: 14px; padding: 12px 12px 14px; background: var(--ob-line); }
.ob-compare .with { background: color-mix(in oklab, var(--ob-accent) 24%, white); box-shadow: inset 0 0 0 1.5px var(--ob-accent); }
.ob-compare strong { display: block; font-size: 13px; margin-bottom: 8px; color: var(--ob-muted); }
.ob-compare .with strong { color: var(--ob-accent); }
.ob-compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ob-compare li { font-size: 13px; line-height: 1.35; color: var(--ob-ink); }
.ob-compare > div:not(.with) li { color: var(--ob-muted); }
.ob-proof .ob-img { margin-bottom: 14px; border-radius: 16px; }
.ob-compare .with li { display: flex; gap: 6px; align-items: flex-start; }
.ob-compare .with li::before { content: "✓"; color: var(--ob-ok); font-weight: 600; }
.ob-compare > div:not(.with) li { display: flex; gap: 6px; align-items: flex-start; }
.ob-compare > div:not(.with) li::before { content: "×"; color: var(--ob-off-text); font-weight: 600; }

/* Pausas de valor: una escena clara y breve, no más cronología antes del plan. */
.ob-routine-orbit, .ob-profile-spark { position: relative; width: 144px; height: 144px; margin: 0 auto 20px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff 0 29%, var(--ob-accent-soft) 30% 31%, transparent 32%), linear-gradient(140deg, var(--ob-grad-a), var(--ob-grad-b)); }
.ob-routine-orbit span, .ob-profile-spark span { position: absolute; inset: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--ob-ink); color: #fff; box-shadow: 0 10px 24px rgba(17,36,43,.18); }
.ob-routine-orbit span svg, .ob-profile-spark span svg { width: 28px; height: 28px; }
.ob-routine-orbit i, .ob-profile-spark i { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--ob-bg); box-shadow: 0 4px 12px rgba(17,36,43,.12); }
.ob-routine-orbit i:nth-child(1), .ob-profile-spark i:nth-child(1) { top: 13px; left: 64px; }
.ob-routine-orbit i:nth-child(2), .ob-profile-spark i:nth-child(2) { right: 14px; bottom: 34px; background: var(--ob-accent); }
.ob-routine-orbit i:nth-child(3), .ob-profile-spark i:nth-child(3) { left: 22px; bottom: 24px; }
.ob-value-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; text-align: left; }
.ob-value-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.35; }
.ob-value-points svg { flex: 0 0 auto; width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: #fff; background: var(--ob-ok); }

/* Demostración del escáner: productos existentes, con una combinación que rota. */
.ob-product-loop { position: relative; height: 320px; margin: 0 auto 10px; overflow: hidden; border-radius: 24px; background: linear-gradient(150deg, #eff5f6, #dfecee); box-shadow: inset 0 -1px 0 rgba(17,36,43,.05); }
.ob-shelf-label { position: absolute; top: 14px; left: 17px; margin: 0; color: var(--ob-ink); font-size: 14px; font-weight: 600; }
.ob-shelf-products { position: absolute; top: 42px; right: 14px; bottom: 64px; left: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 9px 5px; background: linear-gradient(to bottom, transparent 46%, rgba(17,36,43,.18) 46%, rgba(17,36,43,.18) 48%, transparent 48%, transparent 97%, rgba(17,36,43,.18) 97%); }
.ob-product-slot { position: relative; display: flex; align-items: end; justify-content: center; min-width: 0; padding: 2px 5px 5px; }
.ob-product-slot img { display: block; max-width: 100%; height: 100%; max-height: 96px; object-fit: contain; object-position: center bottom; filter: grayscale(1) opacity(.38); transform: scale(.86); transform-origin: center bottom; }
.ob-product-slot::after { content: '✓'; position: absolute; top: 1px; right: 2px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #11242b; color: #fff; font-size: 11px; font-weight: 700; opacity: 0; }
.ob-product-loop .p1 img, .ob-product-loop .p2 img { animation: ob-pick-monday 7s ease-in-out infinite; }
.ob-product-loop .p0 img, .ob-product-loop .p3 img, .ob-product-loop .p6 img { animation: ob-pick-thursday 7s ease-in-out infinite; }
.ob-product-loop .p1::after, .ob-product-loop .p2::after { animation: ob-selected-monday 7s ease-in-out infinite; }
.ob-product-loop .p0::after, .ob-product-loop .p3::after, .ob-product-loop .p6::after { animation: ob-selected-thursday 7s ease-in-out infinite; }
.ob-product-caption { position: absolute; left: 16px; right: 16px; bottom: 13px; display: grid; text-align: left; animation: ob-caption-a 7s ease-in-out infinite; }
.ob-product-caption.alt { animation: ob-caption-b 7s ease-in-out infinite; opacity: 0; }.ob-product-caption b { font-size: 16px; }.ob-product-caption span { color: var(--ob-muted); font-size: 13px; }
@keyframes ob-pick-monday { 0%, 42% { filter: grayscale(0) opacity(1) drop-shadow(0 9px 8px rgba(17,36,43,.22)); transform: scale(1.1); } 51%, 100% { filter: grayscale(1) opacity(.32) drop-shadow(0 9px 8px rgba(17,36,43,0)); transform: scale(.82); } }
@keyframes ob-pick-thursday { 0%, 43% { filter: grayscale(1) opacity(.32) drop-shadow(0 9px 8px rgba(17,36,43,0)); transform: scale(.82); } 53%, 93% { filter: grayscale(0) opacity(1) drop-shadow(0 9px 8px rgba(17,36,43,.22)); transform: scale(1.1); } 100% { filter: grayscale(1) opacity(.32) drop-shadow(0 9px 8px rgba(17,36,43,0)); transform: scale(.82); } }
@keyframes ob-selected-monday { 0%, 42% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes ob-selected-thursday { 0%, 43% { opacity: 0; } 53%, 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ob-caption-a { 0%, 42% { opacity: 1; transform: translateY(0); } 50%, 100% { opacity: 0; transform: translateY(5px); } }
@keyframes ob-caption-b { 0%, 43% { opacity: 0; transform: translateY(5px); } 52%, 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ob-product-loop .ob-product-slot img, .ob-product-loop .ob-product-slot::after, .ob-product-loop .ob-product-caption { animation: none; }
  .ob-product-loop .p1 img, .ob-product-loop .p2 img { filter: drop-shadow(0 5px 6px rgba(17,36,43,.2)); transform: scale(1); }
  .ob-product-loop .p1::after, .ob-product-loop .p2::after { opacity: 1; }
  .ob-product-loop .ob-product-caption:not(.alt) { opacity: 1; }
  .ob-product-loop .ob-product-caption.alt { opacity: 0; }
}
@media (max-height: 700px) { .ob-product-loop { height: 300px; } }

/* 6. Curva ------------------------------------------------------------- */
.ob-curve { display: block; width: 100%; height: auto; overflow: visible; }
.ob-curve .lbl { font-family: var(--ob-font); font-size: 12px; fill: var(--ob-muted); }
.ob-curve .lbl.on { fill: var(--ob-ink); font-weight: 600; }

/* 7. Pantalla de carga ------------------------------------------------- */
.ob-loading { text-align: center; padding-top: 10vh; }
.ob-loading .pct { font-size: 72px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.ob-loading .msg { color: var(--ob-muted); margin: 8px 0 22px; font-size: 16px; }
.ob-loading .bar { height: 10px; border-radius: 5px; background: var(--ob-line); overflow: hidden; margin: 0 10px 28px; }
.ob-loading .bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--ob-grad-a), var(--ob-grad-b)); transition: width .25s linear; }
.ob-checks { text-align: left; margin: 0; padding: 0; list-style: none; }
.ob-checks li { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--ob-line); color: var(--ob-off-text); transition: color .2s; }
.ob-checks li:last-child { border-bottom: 0; }
.ob-checks li .ck { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ob-line); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; transition: all .2s; }
.ob-checks li .ck svg { width: 14px; height: 14px; opacity: 0; }
.ob-checks li.done { color: var(--ob-ink); }
.ob-checks li.done .ck { background: var(--ob-ok); border-color: var(--ob-ok); }
.ob-checks li.done .ck svg { opacity: 1; }

/* 8. Tarjetas de resultado --------------------------------------------- */
.ob-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-result { position: relative; border: 1.5px solid var(--ob-line); border-radius: 16px; padding: 14px 14px 12px; min-height: 92px; }
.ob-result.wide { grid-column: 1 / -1; }
.ob-result small { display: block; color: var(--ob-muted); font-size: 13px; margin-bottom: 4px; }
.ob-result b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.ob-result .edit { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--ob-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ob-result .edit svg { width: 14px; height: 14px; }
.ob-result .ob-mini { height: 6px; border-radius: 3px; background: var(--ob-line); margin-top: 10px; overflow: hidden; }
.ob-result .ob-mini i { display: block; height: 100%; background: var(--ob-accent); border-radius: 3px; }

/* 9. Paywall ------------------------------------------------------------ */
.ob-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 8px; }
.ob-plan { position: relative; border: 1.5px solid var(--ob-line); border-radius: 18px; padding: 24px 14px 16px; text-align: left; background: var(--ob-bg); color: var(--ob-ink); cursor: pointer; transition: border-color .15s; -webkit-appearance: none; appearance: none; }
.ob-plan[aria-checked="true"] { border-color: var(--ob-ink); border-width: 2px; padding: 23.5px 13.5px 15.5px; }
.ob-plan .ribbon { position: absolute; top: -12px; left: 12px; right: 12px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .04em; background: var(--ob-ink); color: #fff; border-radius: 999px; padding: 4px 7px; }
.ob-plan .name { font-size: 15px; color: var(--ob-muted); margin: 0 0 6px; }
.ob-plan .price { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.ob-plan .price small { font-size: 14px; font-weight: 400; color: var(--ob-muted); }
.ob-plan .was { font-size: 14px; color: var(--ob-muted); text-decoration: line-through; margin: 0 0 2px; }
.ob-paywall { max-width: 560px; margin: 0 auto; }
.ob-paywall .ob-title { font-size: 28px; margin: 2px 0 6px; }
.ob-paywall-kicker { margin: 0 0 4px; color: var(--ob-accent); font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: .08em; }
.ob-paywall-lead { margin: 0; color: var(--ob-muted); font-size: 14px; line-height: 1.35; }
.ob-paywall .ob-plans { margin: 20px 0 10px; }
.ob-paywall .ob-plan { min-height: 126px; padding: 21px 13px 13px; }
.ob-paywall .ob-plan[aria-checked="true"] { padding: 20.5px 12.5px 12.5px; }
.ob-paywall .ob-plan .save { position: static; display: inline-block; margin: 0 0 5px; font-size: 12px; color: var(--ob-ok); font-weight: 600; }
.ob-paywall .ob-plan .note { margin: 6px 0 0; font-size: 12px; line-height: 1.25; color: var(--ob-muted); }
.ob-paywall .ob-plan .price { font-size: 22px; }
.ob-paywall .ob-plan .price small { font-size: 12px; white-space: nowrap; }
.ob-trial-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 0 8px; padding: 0; }
.ob-trial-steps li { padding: 9px 7px 8px; border: 1px solid var(--ob-line); border-radius: 10px; min-height: 74px; }
.ob-trial-steps li::before { display: none; }
.ob-trial-steps .dot { position: static; display: none; }
.ob-trial-steps b { font-size: 12px; line-height: 1.1; }
.ob-trial-steps p { margin-top: 4px; font-size: 11px; line-height: 1.25; }
.ob-paywall .ob-trust { margin: 6px 0 0; font-size: 12px; }
.ob-offer-code { text-align: center; margin: 4px 0; }
.ob-code-toggle { border: 0; padding: 7px; background: transparent; color: var(--ob-muted); font-size: 13px; text-decoration: underline; cursor: pointer; }
.ob-offer-code .ob-input { margin-top: 4px; text-align: center; text-transform: uppercase; }

/* Ensayos del producto: el teléfono que ya cuenta la historia en la landing
   escala como pieza central. La interfaz sigue siendo visible, no una imagen
   decorativa recortada. */
.ob-trial-screen .ob-body.center { padding-top: 8px; }
.ob-trial-phone { width: min(52vw, 208px); margin: clamp(14px, 3vh, 24px) auto 0; }
.ob-trial-phone img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(17,36,43,.16)); }
.ob-trial-s32 .ob-trial-phone { width: min(48vw, 185px, max(100px, 42vh - 160px)); width: min(48vw, 185px, max(100px, 42dvh - 160px)); }
.ob-trial-note { display: flex; justify-content: center; align-items: center; gap: 9px; margin: clamp(10px, 2vh, 16px) 0 0; font-size: 16px; font-weight: 600; }
.ob-trial-note span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: var(--ob-ok); font-size: 13px; }
.ob-trial-s32 .ob-body.center { justify-content: safe center; }
.ob-trial-features { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; max-width: 390px; padding: 0; margin: 14px auto 0; list-style: none; text-align: left; }
.ob-trial-features li { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; line-height: 1.25; color: var(--ob-ink); }
.ob-trial-features li::before { content: '✓'; color: var(--ob-ok); font-weight: 600; }
@media (max-height: 700px) { .ob-trial-s32 .ob-body.center { padding-bottom: 4px; } }

/* Oferta: la estructura replica la cadencia de la referencia, pero la escena,
   marca y precios son propios. Imagen a sangre, titular sobre la escena y dos
   opciones que se leen de un golpe. */
.ob-offer-screen .ob-head { position: absolute; top: 0; left: 0; z-index: 2; }
.ob-offer-screen .ob-back { background: #fff; }
.ob-offer-screen .ob-body { padding: 0 0 16px; }
.ob-paywall { max-width: none; margin: 0; }
.ob-offer-hero { position: relative; height: clamp(280px, 47vh, 400px); overflow: hidden; background: #e4eeee; }
.ob-offer-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.ob-offer-hero::after { content: ""; position: absolute; inset: 48% 0 0; background: linear-gradient(transparent, rgba(255,255,255,.82)); pointer-events: none; }
.ob-offer-title { position: absolute; z-index: 1; inset: auto 22px 18px; margin: 0; color: var(--ob-ink); text-align: center; font-size: clamp(32px, 8.7vw, 39px); line-height: .98; letter-spacing: -.052em; text-wrap: balance; }
.ob-offer-plans { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin: 16px var(--ob-gutter) 10px !important; }
.ob-offer-plans .ob-plan { min-height: 82px !important; padding: 17px 91px 15px 70px !important; border-radius: 18px; }
.ob-offer-plans .ob-plan[aria-checked="true"] { min-height: 126px !important; padding: 38px 91px 16px 70px !important; border: 3px solid var(--ob-ink); }
.ob-offer-plans .ob-plan .ribbon { top: 0; left: 0; right: 0; border-radius: 14px 14px 0 0; padding: 6px 8px; font-size: 11px; }
.ob-offer-plans .ob-plan .name { max-width: 180px; margin: 0 0 5px; font-size: 19px; line-height: 1.08; color: var(--ob-ink); font-weight: 600; }
.ob-offer-plans .ob-plan .price { position: absolute; top: 50%; right: 17px; transform: translateY(-50%); font-size: 20px; line-height: 1.05; text-align: right; white-space: nowrap; }.ob-offer-plans .ob-plan .price small { display: block; margin-top: 3px; font-size: 12px; }
.ob-offer-plans .ob-plan .note { margin: 0; color: var(--ob-muted); font-size: 14px; line-height: 1.15; }.ob-offer-plans .ob-plan .save { top: 31px; right: auto; left: 83px; font-size: 11px; }
.ob-offer-plans .ob-plan .sel { top: 50%; bottom: auto; left: 22px; right: auto; width: 29px; height: 29px; transform: translateY(-50%); }
.ob-offer-code { margin: 0 var(--ob-gutter); }
.ob-code-toggle { font-size: 14px; }
@media (max-height: 700px) {
  .ob-offer-hero { height: 215px; }
  .ob-offer-title { inset: auto 18px 13px; font-size: 29px; }
  .ob-offer-plans { margin-top: 12px !important; gap: 10px !important; }
  .ob-offer-plans .ob-plan[aria-checked="true"] { min-height: 112px !important; padding-top: 33px !important; }
  .ob-offer-plans .ob-plan .name { font-size: 17px; }
}
@media (max-width: 380px) {
  .ob-offer-plans .ob-plan .name { max-width: 145px; font-size: 16px; line-height: 1.1; }
  .ob-offer-plans .ob-plan .price { right: 12px; font-size: 18px; }
}
/* Composición de la referencia: jerarquía y geometría de la oferta. */
.ob-offer-screen { color: #19181d; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.ob-offer-hero::after { background: linear-gradient(transparent, rgba(255,255,255,.65)); }
.ob-offer-title { color: #101010; font-size: 31px; font-weight: 700; line-height: 1.12; letter-spacing: -.025em; bottom: 19px; }
.ob-offer-plans { gap: 12px !important; margin: 16px 24px 8px !important; }
.ob-offer-plans .ob-plan, .ob-offer-plans .ob-plan[aria-checked="true"] { min-height: 59px !important; border: 2px solid #e8e8e8; border-radius: 16px; padding: 12px 91px 12px 53px !important; background: #fff; }
.ob-offer-plans .ob-plan[data-id="annual"], .ob-offer-plans .ob-plan[data-id="annual"][aria-checked="true"] { min-height: 96px !important; padding: 34px 91px 10px 53px !important; }
.ob-offer-plans .ob-plan[aria-checked="true"] { border-color: #19181d; }
.ob-offer-plans .ob-plan .ribbon { background: #111; color: #fff; border-radius: 13px 13px 0 0; font: 700 12px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; padding: 5px; }
.ob-offer-plans .ob-plan .name { max-width: none; margin: 0; color: #19181d; font: 500 16px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; letter-spacing: -.025em; }
.ob-offer-plans .ob-plan[data-id="annual"] .name { font-size: 14px; letter-spacing: -.035em; }
.ob-offer-plans .ob-plan .note { margin-top: 2px; color: #858585; font: 400 13px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.ob-offer-plans .ob-plan .price { right: 16px; color: #858585; font: 400 13px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.ob-offer-plans .ob-plan .price small { display: inline; font-size: 13px; color: inherit; }
.ob-offer-plans .ob-plan .sel { left: 16px; width: 24px; height: 24px; border-color: #e2e2e2; }
.ob-offer-plans .ob-plan[aria-checked="true"] .sel { background: #19181d; border-color: #19181d; }
.ob-offer-plans .ob-plan:not([aria-checked="true"]) .name, .ob-offer-plans .ob-plan:not([aria-checked="true"]) .price { color: #999; }
.ob-offer-screen .ob-foot .ob-btn:not(.ghost) { background: #191919; color: #fff; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 600; }
.ob-offer-screen .ob-conditions { color: #808080; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 12px; }
/* s35: proporciones medidas contra la referencia a 393 × 852. */
.ob-offer-hero { height: 55.4vh; height: 55.4dvh; }
.ob-offer-title { font-size: 30px; bottom: 20px; }
.ob-offer-plans .ob-plan[data-id="annual"] .name { font-size: 14px; }
.ob-offer-screen .ob-foot { padding-left: 24px; padding-right: 24px; }
.ob-offer-screen .ob-foot { padding-top: 7px; }
.ob-offer-screen .ob-body { flex: 0 1 auto; padding-bottom: 0; }
.ob-offer-screen .ob-status:empty { display: none; }
.ob-offer-screen .ob-foot .ob-btn.ghost { display: none; }
.ob-offer-screen .ob-conditions, .ob-offer-screen .ob-conditions b { font-size: 11px; font-weight: 400; color: #808080; }
.ob-offer-title { max-width: 310px; margin: 0 auto; font-size: 31px; font-weight: 600; line-height: 1.12; letter-spacing: -.025em; text-wrap: normal; }
.ob-offer-hero::after { inset: 65% 0 0; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, #fff 100%); }
.ob-offer-plans .ob-plan[data-id="annual"] .price { top: calc(50% + 12px); }
.ob-offer-plans .ob-plan .price, .ob-offer-plans .ob-plan .price small { font-size: 12px; }
.ob-offer-plans .ob-plan .name { font-size: 15px; font-weight: 400; }
.ob-offer-plans .ob-plan[data-id="annual"] .name { max-width: none; font-size: 15px; font-weight: 400; letter-spacing: -.03em; }
.ob-offer-plans .ob-plan[data-id="annual"] .sel { top: calc(50% + 12px); }
.ob-offer-screen .ob-offer-code { position: absolute; top: calc(12px + var(--ob-sa-top)); right: 16px; z-index: 3; margin: 0; text-align: right; }
.ob-offer-screen .ob-code-toggle { border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.92); color: #444; font-size: 12px; }
.ob-offer-screen .ob-offer-code .ob-input { width: min(250px, 75vw); background: #fff; }
.ob-offer-hero { isolation: isolate; background: #e8e6e4; }
.ob-offer-hero::before { content: none; }
.ob-offer-hero img { position: relative; display: block; width: 100%; max-width: none; height: 100%; margin: 0; object-fit: cover; object-position: center 20%; -webkit-mask-image: none; mask-image: none; }
.ob-offer-hero::after { inset: 60% 0 0; background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.2) 35%, #fff 100%); }
.ob-offer-title { max-width: 350px; font-size: 31px; font-weight: 700; line-height: 1.12; letter-spacing: -.025em; text-wrap: normal; }
.ob-offer-plans .ob-plan[data-id="annual"] .name { font-size: 16px; font-weight: 500; }
.ob-offer-plans .ob-plan .note { font-size: 14px; }
.ob-offer-screen .ob-conditions { max-width: 330px; margin: 15px auto 0; line-height: 1.35; }
.ob-offer-legal { margin: 12px 0 0; text-align: center; color: #808080; font: 400 12px/1.3 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.ob-offer-legal a { color: inherit; text-decoration: none; }
@media (max-height: 700px) {
  .ob-offer-hero { height: 270px; }
  .ob-offer-title { font-size: 26px; bottom: 13px; }
  .ob-offer-hero img { width: 100%; object-fit: cover; object-position: center 12%; -webkit-mask-image: none; mask-image: none; }
  .ob-offer-legal { margin-top: 8px; }
}
@media (max-width: 380px) {
  .ob-offer-plans .ob-plan[data-id="annual"] .name { font-size: 14px; }
}
/* La imagen domina la primera vista; los planes y el pie continúan en el
   desplazamiento de la pantalla, sin quedar ocultos bajo una barra fija. */
.ob-offer-screen { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ob-offer-screen .ob-body { overflow: visible; min-height: 0; }
.ob-offer-screen .ob-foot { position: static; }
.ob-offer-screen .ob-offer-hero { height: 64vh; height: 64dvh; min-height: 340px; }
.ob-offer-screen .ob-offer-hero::after { inset: 68% 0 0; background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.95) 32%, #fff 88%); }
.ob-offer-screen .ob-offer-title { bottom: 20px; }
.ob-offer-screen .ob-offer-plans { margin-top: 12px !important; gap: 10px !important; }

.ob-launch { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ob-ink); }
.ob-launch i { width: 8px; height: 8px; border-radius: 50%; background: #d9534f; display: inline-block; }
.ob-plan .note { font-size: 13px; color: var(--ob-muted); margin: 6px 0 0; }
.ob-plan .save { position: absolute; top: 14px; right: 12px; font-size: 12px; font-weight: 600; color: var(--ob-ok); background: #E6F2EC; border-radius: 999px; padding: 3px 8px; }
.ob-plan .sel { position: absolute; bottom: 14px; right: 12px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ob-line); display: inline-flex; align-items: center; justify-content: center; }
.ob-plan .sel svg { width: 12px; height: 12px; opacity: 0; }
.ob-plan[aria-checked="true"] .sel { background: var(--ob-ink); border-color: var(--ob-ink); }
.ob-plan[aria-checked="true"] .sel svg { opacity: 1; }
.ob-trust { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ob-muted); font-size: 14px; margin: 6px 0 2px; }
.ob-trust svg { width: 16px; height: 16px; }
.ob-timeline { list-style: none; margin: 12px 0 0; padding: 0 0 0 6px; }
.ob-timeline li { position: relative; padding: 0 0 18px 40px; }
.ob-timeline li::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: -2px; width: 4px; background: var(--ob-line); border-radius: 2px; }
.ob-timeline li:last-child::before { display: none; }
.ob-timeline li .dot { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--ob-soft); display: inline-flex; align-items: center; justify-content: center; }
.ob-timeline li .dot svg { width: 14px; height: 14px; }
.ob-timeline li.now .dot { background: var(--ob-accent-soft); color: var(--ob-accent); }
.ob-timeline li b { display: block; font-weight: 600; font-size: 16px; }
.ob-timeline li p { margin: 2px 0 0; color: var(--ob-muted); font-size: 14px; }

/* 10. Hoja de insignia -------------------------------------------------- */
.ob-badge-sheet { background: linear-gradient(160deg, var(--ob-grad-a), var(--ob-grad-b)); }
.ob-badge-sheet .ob-body { justify-content: center; }
.ob-badge-sheet .ob-foot { background: transparent; }
.ob-badge-sheet .ob-btn.ghost { color: var(--ob-ink); }
.ob-medal { width: 168px; height: 168px; margin: 0 auto 24px; border-radius: 50%; background: var(--ob-bg); display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 40px rgba(17,36,43,.14); animation: ob-pop .6s cubic-bezier(.2,.9,.3,1.3) both; }
.ob-medal svg { width: 96px; height: 96px; }
@keyframes ob-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Aro pastel para ilustraciones (20, 28) ------------------------------- */
.ob-ring { width: 200px; height: 200px; margin: 0 auto 22px; border-radius: 50%; padding: 12px; background: linear-gradient(135deg, var(--ob-grad-a), var(--ob-grad-b)); }
.ob-ring > div { width: 100%; height: 100%; border-radius: 50%; background: var(--ob-bg); display: flex; align-items: center; justify-content: center; color: var(--ob-muted); font-size: 13px; }

/* Marcador de imagen pendiente (Etapa 4) ----------------------------- */
.ob-img { border: 1.5px dashed var(--ob-line); border-radius: var(--ob-radius); background: var(--ob-soft); color: var(--ob-muted); font-size: 13px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; }

/* Demo de escritorio: un teléfono centrado ------------------------------ */
.ob-stage { min-height: 100vh; min-height: 100dvh; background: var(--ob-bg); }
@media (min-width: 720px) {
  .ob-stage { background: #EEF2F4; display: flex; align-items: center; justify-content: center; padding: 32px; }
  .ob-stage .ob-phone { width: 402px; height: 796px; border-radius: 40px; overflow: hidden; background: var(--ob-bg); box-shadow: 0 30px 80px rgba(17,36,43,.18); border: 8px solid #11242b; }
  .ob-stage .ob-phone .ob-screen { height: 100%; }
}

/* Piezas que usan las 43 pantallas (ob-flow.js) ------------------------ */
.ob-accent { color: var(--ob-accent); }
.ob-h2 { font-size: 18px; font-weight: 600; margin: 22px 0 10px; }
.ob-notice { font-size: 13px; color: var(--ob-muted); margin: 14px 0 0; }
.ob-pending { color: var(--ob-accent); font-size: 13px; font-weight: 600; }
.ob-or { margin: 2px 0 0; text-align: center; color: var(--ob-muted); font-size: 13px; }
.ob-status { color: var(--ob-muted); font-size: 14px; min-height: 1.2em; margin: 10px 0 0; text-align: center; }
.ob-error { color: #A85C3C; font-size: 14px; min-height: 1.2em; margin: 8px 0 0; }
.ob-langs { display: flex; justify-content: center; gap: 6px; margin: 0 0 12px; }
.ob-lang { border: 1.5px solid var(--ob-line); background: var(--ob-bg); color: var(--ob-muted); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; -webkit-appearance: none; appearance: none; }
.ob-lang.on { border-color: var(--ob-ink); color: var(--ob-ink); }
.ob-legend { display: flex; justify-content: center; gap: 16px; font-size: 13px; color: var(--ob-muted); margin: 0 0 8px; }
.ob-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--ob-accent); }
.ob-legend i.b { background: var(--ob-line); }
.ob-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ob-chip { border: 1.5px solid var(--ob-line); background: var(--ob-bg); color: var(--ob-ink); border-radius: 999px; padding: 9px 14px; font-size: 14px; font-weight: 600; -webkit-appearance: none; appearance: none; }
.ob-chip.on { border-color: var(--ob-ink); background: var(--ob-ink); color: #fff; }
.ob-sample { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ob-line); }
.ob-sample:last-child { border-bottom: 0; }
.ob-sample .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--ob-soft, #EEF2F3); color: var(--ob-ink); flex: 0 0 auto; display: grid; place-items: center; }
.ob-sample .ic svg { width: 22px; height: 22px; }
.ob-sample b { flex: 1; font-weight: 600; font-size: 15px; }
.ob-sample .tag { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 9px; }
.ob-sample .tag.ok { background: #E6F2EC; color: var(--ob-ok); }
.ob-sample .tag.no { background: #F7E9E3; color: #A85C3C; }
.ob-bigcheck { width: 96px; height: 96px; border-radius: 50%; background: var(--ob-ok); margin: 10px auto 18px; display: flex; align-items: center; justify-content: center; animation: ob-pop .5s cubic-bezier(.2,.9,.3,1.3) both; }
.ob-bigcheck svg { width: 48px; height: 48px; }
.ob-bigcheck.small { width: 56px; height: 56px; margin: 0 0 12px; }
.ob-bigcheck.small svg { width: 28px; height: 28px; }
.ob-lockbig { width: 96px; height: 96px; border-radius: 50%; background: var(--ob-soft); color: var(--ob-muted); margin: 10px auto 18px; display: flex; align-items: center; justify-content: center; }
.ob-lockbig svg { width: 40px; height: 40px; }
.ob-locked-preview { position: relative; margin: 6px auto 22px; padding: 18px; border: 1px solid var(--ob-line); border-radius: 16px; background: var(--ob-soft); filter: saturate(.6); }
.ob-locked-preview::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(243,247,248,.58); backdrop-filter: blur(2px); }
.ob-locked-preview > div { display: grid; grid-template-columns: 26px 1fr; gap: 7px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ob-line); }
.ob-locked-preview > div:last-of-type { border-bottom: 0; }
.ob-locked-preview i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--ob-accent-soft); }
.ob-locked-preview b, .ob-locked-preview small { display: block; height: 8px; border-radius: 99px; background: var(--ob-line); }
.ob-locked-preview small { width: 68%; height: 6px; }
.ob-locked-preview > span { position: absolute; z-index: 1; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ob-ink); }
.ob-locked-preview > span svg { width: 28px; height: 28px; }
.ob-notif { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--ob-line); border-radius: 16px; padding: 14px; margin: 6px 0 16px; box-shadow: 0 10px 30px rgba(17,36,43,.08); }
.ob-notif .ic { width: 36px; height: 36px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; }
.ob-notif .ic img { width: 100%; height: 100%; display: block; }
.ob-notif b { display: block; font-size: 14px; font-weight: 600; }
.ob-notif p { margin: 2px 0 0; font-size: 14px; color: var(--ob-muted); }
.ob-bell { width: 136px; height: 136px; margin: 4px auto 22px; border-radius: 50%; background: var(--ob-soft); position: relative; }
.ob-bell span { position: absolute; top: 8px; right: 8px; min-width: 26px; height: 26px; border-radius: 13px; background: var(--ob-accent); color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.ob-input { width: 100%; border: 1.5px solid var(--ob-line); border-radius: 12px; padding: 15px 14px; font: inherit; font-size: 17px; color: var(--ob-ink); background: var(--ob-bg); margin: 0 0 10px; -webkit-appearance: none; appearance: none; }
.ob-input:focus { outline: none; border-color: var(--ob-ink); }
.ob-input.code { text-align: center; font-size: 28px; letter-spacing: .3em; font-weight: 600; }
.ob-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ob-muted); margin: 6px 0 10px; }
.ob-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ob-ink); flex: 0 0 auto; }
.ob-turnstile { margin: 8px 0; min-height: 0; }
.ob-btn.secondary { background: var(--ob-soft); color: var(--ob-ink); }
.ob-btn.small { width: auto; padding: 12px 16px; font-size: 15px; }
.ob-was { text-decoration: line-through; color: var(--ob-muted); margin: 0 0 4px; }
.ob-steps { list-style: none; margin: 0 0 14px; padding: 0; }
.ob-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--ob-line); }
.ob-steps li:last-child { border-bottom: 0; }
.ob-steps .n { width: 28px; height: 28px; border-radius: 50%; background: var(--ob-ink); color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ob-steps b { display: block; font-weight: 600; font-size: 16px; }
.ob-steps small { display: block; color: var(--ob-muted); font-size: 14px; }
.ob-week { border: 1.5px solid var(--ob-line); border-radius: 16px; padding: 14px; margin: 0 0 12px; }
.ob-week b { display: block; font-weight: 600; margin-bottom: 8px; }
.ob-week .days { display: flex; gap: 6px; margin-bottom: 6px; }
.ob-week .days i { flex: 1; height: 10px; border-radius: 5px; background: var(--ob-line); }
.ob-week small { color: var(--ob-muted); font-size: 13px; }
.ob-addrow { display: flex; gap: 8px; }
.ob-addrow .ob-input { flex: 1; margin: 0; }
.ob-mylist { list-style: none; margin: 12px 0 0; padding: 0; }
.ob-mylist li { padding: 10px 14px; border: 1.5px solid var(--ob-line); border-radius: 12px; margin-bottom: 8px; font-weight: 600; }
.ob-product-examples { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; margin: 18px 0 0; }
.ob-product-examples li { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 9px; border-radius: 12px; background: var(--ob-soft); color: var(--ob-muted); font-size: 13px; line-height: 1.15; }
.ob-product-examples i { width: 22px; height: 28px; border: 2px solid var(--ob-muted); border-radius: 5px 5px 7px 7px; opacity: .7; flex: 0 0 auto; }
.ob-verdict { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; margin: 4px 0 14px; }
.ob-verdict.ok { color: var(--ob-ok); }
.ob-checks.done-all li { padding: 10px 0; }

/* Etapa 4: imágenes reales sobre los marcadores. El marcador queda debajo
   hasta que el archivo carga (.has), así un archivo faltante no rompe nada. */
.ob-img { position: relative; overflow: hidden; }
.ob-img > img, .ob-img > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ob-img.has { border-color: transparent; background: none; color: transparent; padding: 0; }
.ob-ring > div { position: relative; overflow: hidden; }
.ob-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ob-ring > div.has { color: transparent; }
.ob-bell { overflow: visible; }
.ob-bell .ob-fill { inset: 18px; width: auto; height: auto; }
.ob-bell.has { background: none; }
.ob-medal { position: relative; }
.ob-medal.has > svg { visibility: hidden; }
.ob-medal .ob-fill { inset: 0; border-radius: 50%; }
.ob-giftimg { position: relative; width: 120px; height: 120px; margin: 4px auto 12px; }
.ob-giftimg:not(.has) { display: none; }
.ob-option .ic, .ob-slider3 .icons > span { position: relative; }
.ob-option .ic > img, .ob-slider3 .icons > span > img { position: absolute; inset: 0; margin: auto; }
.ob-option .ic.has > svg.ph, .ob-slider3 .icons > span.has > svg.ph { visibility: hidden; }
.ob-slider3 .icons span img { width: 28px; height: 28px; }

/* Rutina inteligente, etapa 4: pasos reales en la pantalla 14 y la pantalla
   18b de agua y clima. */
.ob-steplist { margin: 8px 0 6px; padding-left: 20px; text-align: left; }
.ob-steplist li { padding: 3px 0; font-size: 15px; }
.ob-label { font-size: 14px; font-weight: 600; color: var(--ob-muted); margin: 18px 0 8px; }
.ob-geo-row { border: 1.5px solid var(--ob-line); border-radius: 16px; padding: 14px; margin: 0 0 12px; }
.ob-geo-row > small { display: block; color: var(--ob-muted); font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ob-geo-row > b { display: block; font-weight: 600; font-size: 17px; }
.ob-geo-row > p { margin: 4px 0 10px; }
.ob-geo-row > .ob-chip { margin-top: 10px; }
.ob-geo-row .ob-options { margin-top: 6px; }
.ob-geo .ob-card .ob-chips { margin-top: 12px; }

/* Rutina inteligente, etapa 5: la pantalla 30 (el plan) y la 39 (hoy).
   Jerarquía con tipo y líneas finas; un solo bloque con fondo (la lectura),
   el resto son listas. Las marcas del calendario cambian de forma además de
   tono, para no depender del color. */
.ob-rplan { max-width: 560px; margin: 0 auto; }
.ob-ready { display: flex; align-items: center; gap: 8px; color: var(--ob-ok); font-weight: 600; }
.ob-ready .ck { width: 20px; height: 20px; border-radius: 50%; background: var(--ob-ok); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ob-ready .ck svg { width: 12px; height: 12px; }
.ob-rplan .ob-title { font-size: 28px; margin-bottom: 8px; }
.ob-rplan .ob-sub { margin-bottom: 18px; }
.ob-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--ob-line); border-bottom: 1px solid var(--ob-line); }
.ob-facts > div { padding: 12px 10px 12px 0; }
.ob-facts > div + div { border-left: 1px solid var(--ob-line); padding-left: 12px; }
.ob-facts dt { font-size: 12px; color: var(--ob-muted); margin: 0 0 3px; }
.ob-facts dd { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.ob-sec { margin-top: 30px; }
.ob-sec > .ob-h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.01em; }
.ob-secsub { font-size: 14px; color: var(--ob-muted); margin: 0 0 12px; }
.ob-sec > .ob-h2 + :not(.ob-secsub) { margin-top: 12px; }
.ob-h3 { font-size: 13px; font-weight: 600; color: var(--ob-muted); margin: 18px 0 2px; }
.ob-hint { font-size: 14px; color: var(--ob-ink); background: var(--ob-accent-soft); border-radius: 10px; padding: 10px 12px; margin: 8px 0 4px; }

.ob-reading { background: var(--ob-soft); border-radius: 16px; padding: 4px 16px; }
.ob-reading p { margin: 0; padding: 14px 0; font-size: 16px; line-height: 1.45; }
.ob-reading p + p { border-top: 1px solid var(--ob-line); }
.ob-reading small { display: block; margin-top: 6px; font-size: 13px; color: var(--ob-muted); }

.ob-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ob-cal-wd { text-align: center; font-size: 12px; color: var(--ob-muted); padding-bottom: 2px; }
.ob-cal-day { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 7px 0 9px; border-radius: 10px; border: 1.5px solid transparent; }
.ob-cal-day b { font-size: 13px; font-weight: 600; color: var(--ob-muted); }
.ob-cal-day.today { border-color: var(--ob-ink); }
.ob-cal-day.today b { color: var(--ob-ink); }
.ob-cal-day i, .ob-cal-legend i { display: block; width: 12px; height: 12px; box-sizing: border-box; }
.t-wash i, i.t-wash { border-radius: 50%; background: var(--ob-ink); }
.t-deep i, i.t-deep { border-radius: 50%; background: var(--ob-accent); box-shadow: 0 0 0 2px var(--ob-bg), 0 0 0 3.5px var(--ob-accent); }
.t-protein i, i.t-protein { width: 11px; height: 11px; background: var(--ob-ink); transform: rotate(45deg); border-radius: 2px; }
.t-clarify i, i.t-clarify { border-radius: 3px; background: var(--ob-ink); }
.t-chelate i, i.t-chelate { border-radius: 3px; border: 3px solid var(--ob-ink); }
.t-refresh i, i.t-refresh { width: 8px; height: 8px; margin: 2px; border-radius: 50%; border: 1.5px solid var(--ob-off-text); }
.t-caution i, i.t-caution { width: 10px; height: 2px; margin: 5px 1px; background: var(--ob-off-text); }
.ob-cal-legend { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ob-cal-legend li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ob-cal-legend small { color: var(--ob-muted); font-size: 13px; font-variant-numeric: tabular-nums; }

.ob-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--ob-soft); margin: 4px 0 6px; }
.ob-seg button { -webkit-appearance: none; appearance: none; border: 0; background: transparent; color: var(--ob-muted); border-radius: 9px; padding: 10px 6px; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 44px; }
.ob-seg button.on { background: var(--ob-bg); color: var(--ob-ink); box-shadow: 0 1px 3px rgba(17,36,43,.12); }
.ob-seg button:focus-visible, .ob-info .edit:focus-visible, .ob-more summary:focus-visible { outline: 2px solid var(--ob-ink); outline-offset: 2px; }
.ob-plan-steps li { padding: 14px 0; }
.ob-plan-steps p { margin: 3px 0 0; font-size: 15px; color: var(--ob-ink); line-height: 1.45; }
.ob-tech { margin: 8px 0 0; padding: 0 0 0 16px; font-size: 14px; color: var(--ob-ink); }
.ob-tech li { display: list-item; border: 0; padding: 2px 0; }
.ob-plan-steps .ob-prod { font-size: 14px; font-weight: 600; margin-top: 8px; }
.ob-prod em, .ob-kit em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ob-ok); background: #E7F2EC; border-radius: 999px; padding: 2px 8px; margin-left: 4px; white-space: nowrap; }
.ob-plan-steps .ob-why { margin-top: 6px; font-size: 13px; }

.ob-kit { list-style: none; margin: 0; padding: 0; }
.ob-kit li { padding: 10px 0; border-bottom: 1px solid var(--ob-line); }
.ob-kit li:last-child { border-bottom: 0; }
.ob-kit li > div { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ob-kit b { font-weight: 600; font-size: 16px; }
.ob-kit em { margin-left: 2px; }
.ob-kit small { display: block; color: var(--ob-muted); font-size: 13px; margin-top: 2px; }
.ob-more { margin-top: 14px; border-top: 1px solid var(--ob-line); }
.ob-more summary { cursor: pointer; padding: 14px 0 6px; font-size: 15px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.ob-more summary::-webkit-details-marker { display: none; }
.ob-more summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ob-muted); border-bottom: 2px solid var(--ob-muted); transform: rotate(45deg); margin: -4px 0 0 auto; transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.ob-more[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.ob-more summary span { color: var(--ob-muted); font-weight: 400; }

.ob-rhythms, .ob-between { list-style: none; margin: 0 0 4px; padding: 0; }
.ob-rhythms li { padding: 11px 0; border-bottom: 1px solid var(--ob-line); }
.ob-rhythms li:last-child { border-bottom: 0; }
.ob-rhythms p { margin: 0; font-size: 16px; }
.ob-rhythms small { display: block; color: var(--ob-muted); font-size: 13px; margin-top: 3px; }
.ob-rhythms + .ob-secsub { margin-top: 10px; }
.ob-between li { position: relative; padding: 7px 0 7px 18px; font-size: 15px; }
.ob-between li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--ob-muted); }

.ob-info { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ob-line); }
.ob-info li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--ob-line); }
.ob-info span { flex: 0 0 42%; font-size: 14px; color: var(--ob-muted); }
.ob-info b { flex: 1 1 auto; font-weight: 600; font-size: 15px; line-height: 1.3; }
.ob-info .edit { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ob-soft); color: var(--ob-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ob-info .edit svg { width: 15px; height: 15px; }
.ob-notes { margin: 26px 0 0; }
.ob-notes p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--ob-muted); }
.ob-feedback { margin-top: 4px; }
.ob-feedback + .ob-secsub { margin-top: 10px; min-height: 1em; }
.ob-rplan .ob-trust { margin-top: 26px; }
.ob-wait { display: flex; justify-content: center; gap: 8px; }
.ob-wait i { width: 9px; height: 9px; border-radius: 50%; background: var(--ob-ink); opacity: .25; animation: ob-wait 1s cubic-bezier(.2,.7,.2,1) infinite; }
.ob-wait i:nth-child(2) { animation-delay: .15s; }
.ob-wait i:nth-child(3) { animation-delay: .3s; }
@keyframes ob-wait { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ob-wait i { animation: none; opacity: .6; } .ob-more summary::after { transition: none; } }
/* Etapa 6A: aviso mientras Gemini escribe la rutina de la 39. */
.ob-writing { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ob-muted); margin: 0 0 14px; }
.ob-writing .ob-wait { gap: 4px; }
.ob-writing .ob-wait i { width: 6px; height: 6px; }

/* 25: tres líneas de cómo se arma la rutina */
.ob-points { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 14px; }
.ob-points li { position: relative; padding-left: 26px; color: var(--ob-ink); font-size: 15px; line-height: 1.45; }
.ob-points li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--ob-accent, #5D767E); }

/* 2026-11-13, recorrido en iPhone. Safari descartaba el segundo toque cuando
   llegaba rápido (lo trataba como doble toque): "Continuar" no respondía al
   primer intento. manipulation quita esa espera. */
html, body, .ob button, .ob input { touch-action: manipulation; }
/* Selección múltiple: casillas, no círculos de opción única. */
.ob-options[role="group"] .ob-option .sel { border-radius: 6px; }
/* Botón de Google con su logo. */
.ob-google { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ob-google .g { width: 20px; height: 20px; flex: 0 0 auto; }
.ob-or { margin: 12px 0 10px; }
/* El aviso de cookies tapaba "Comenzar" y "Continuar": en el embudo va arriba. */
@media (max-width: 720px) {
  html body .rz-consent { top: max(12px, env(safe-area-inset-top)); bottom: auto; }
}
/* 7 y 19: línea de tiempo numerada (sin candados, que en el paywall significan
   "se cobra después") y alineada a la izquierda dentro de la tarjeta centrada. */
.ob-card .ob-timeline { text-align: left; }
.ob-tlnum { font-size: 13px; font-weight: 600; color: var(--ob-ink); }
.ob-timeline li.now .ob-tlnum { color: var(--ob-accent); }
/* 20b: 12 productos en dos columnas compactas en vez de una lista de 13 filas. */
.ob-options.compact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-options.compact .ob-option { min-height: 54px; padding: 10px 12px; gap: 8px; align-items: center; }
.ob-options.compact .ob-option .tx b { font-size: 15px; font-weight: 600; }
.ob-options.compact li:last-child { grid-column: 1 / -1; }
.ob-cal-day.empty { visibility: hidden; }

/* En escritorio el contenido conserva una medida de lectura y el botón no
   ocupa toda la ventana. Los estilos móviles quedan fuera de este corte. */
@media (min-width: 768px) {
  #ob-app { background: #f2f5f5; }
  #ob-app > .ob-screen {
    width: min(100%, 720px); margin: 0 auto;
    box-shadow: 0 0 48px rgba(17,36,43,.06);
  }
  #ob-app > .ob-screen .ob-head,
  #ob-app > .ob-screen .ob-body,
  #ob-app > .ob-screen .ob-foot { padding-left: 56px; padding-right: 56px; }
  #ob-app > .ob-screen .ob-head { padding-top: 24px; padding-bottom: 16px; }
  #ob-app > .ob-screen .ob-body.center { justify-content: safe center; }
  #ob-app > .ob-screen .ob-foot { padding-top: 16px; padding-bottom: 24px; }
  #ob-app > .ob-screen .ob-option:hover:not([aria-checked="true"]) { border-color: var(--ob-accent); background: var(--ob-soft); }
  #ob-app > .ob-screen :focus-visible { outline: 3px solid var(--ob-accent); outline-offset: 3px; }

  /* La oferta presenta la imagen y los planes juntos, sin recortarlos a un
     ancho de teléfono ni estirar los precios por toda la ventana. */
  #ob-app > .ob-offer-screen {
    width: min(100%, 1060px); display: grid; overflow-y: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto 1fr;
  }
  #ob-app > .ob-offer-screen .ob-body,
  #ob-app > .ob-offer-screen .ob-paywall { display: contents; }
  #ob-app > .ob-offer-screen .ob-head { position: absolute; padding: 24px; }
  #ob-app > .ob-offer-screen .ob-offer-hero {
    display: contents;
  }
  #ob-app > .ob-offer-screen .ob-offer-hero img {
    grid-column: 1; grid-row: 1 / 4; min-height: 0; height: 100%; object-position: center top;
  }
  #ob-app > .ob-offer-screen .ob-offer-hero::after { content: none; }
  #ob-app > .ob-offer-screen .ob-offer-title {
    position: static; grid-column: 2; grid-row: 1; align-self: end;
    margin: 70px auto 28px; padding: 0 24px;
  }
  #ob-app > .ob-offer-screen .ob-offer-plans {
    grid-column: 2; grid-row: 2; align-self: end;
    margin: 0 48px 8px !important;
  }
  #ob-app > .ob-offer-screen .ob-foot {
    grid-column: 2; grid-row: 3; align-self: start;
    padding: 7px 48px 24px;
  }
  #ob-app > .ob-offer-screen .ob-offer-code { top: 20px; right: 24px; }
}
@media (min-width: 768px) and (max-width: 999px) {
  #ob-app > .ob-offer-screen .ob-offer-plans { margin-left: 24px !important; margin-right: 24px !important; }
  #ob-app > .ob-offer-screen .ob-foot { padding-left: 24px; padding-right: 24px; }
}