:root{
  --bg:#000000; --bg-soft:rgb(15,17,15);
  --featured:#16a34a; --featured-rgb:22,163,74;
  --text:#ffffff; --text-2:rgb(209,213,219); --text-soft:rgb(92,122,92);
}
/* Self-hosted Inter (replaces render-blocking Google Fonts request).
   Latin variable woff2 — one 48KB same-origin file covers weights 300-900.
   font-display:swap so text paints immediately with the system fallback. */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 900;
  font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2')}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);
  line-height:1.4;min-height:100vh;overflow-x:hidden}

/* ============================================================
   Tailwind Play CDN removed (was render-blocking ~3MB, killing
   connect rate). Ported below: the v3 Preflight subset this
   funnel actually depends on + the ~16 utilities used in app.js.
   Same values as Tailwind v3 defaults — visual output identical.
   ============================================================ */
*,::before,::after{border-width:0;border-style:solid;border-color:currentColor}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
button,[role=button]{cursor:pointer}
:disabled{cursor:default}
.w-full{width:100%}
.flex{display:flex}
.flex-col{flex-direction:column}
.grid{display:grid}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mb-4{margin-bottom:1rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.text-center{text-align:center}
.break-words{overflow-wrap:break-word}
.opacity-40{opacity:.4}

.main-content{display:flex;flex-direction:column;padding:.75rem;min-height:95svh}
@media(min-width:768px){.main-content{padding:1.25rem}}
/* Live mechanism: shell fills the viewport and space-between distributes
   header(top) / body(centred) / footer(bottom). Header stays pinned up. */
.shell{flex:1;width:100%;max-width:28rem;margin:0 auto;
  display:flex;flex-direction:column;justify-content:space-between}
.shell-body{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto}
.shell-foot{flex:0 0 auto;min-height:3.5rem;display:flex;align-items:flex-start;
  justify-content:center;padding-top:.75rem}
/* Header logo: centered on its own line, above the full-width bar */
.shell-logo{display:flex;justify-content:center;margin-bottom:.85rem}
.shell-logo img{width:auto;max-width:60%;height:1.75rem;object-fit:contain}
.progress-track{position:relative;border-radius:9999px;overflow:hidden;width:100%;height:.5rem;margin-top:.5rem}
.progress-track .bg{position:absolute;inset:0;background:var(--featured);opacity:.1}
.progress-track .fill{position:absolute;top:0;left:0;height:100%;background:var(--featured);
  transition:width .7s cubic-bezier(.4,0,.2,1)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeIn .35s ease-out}

/* ---- Quill content typography (matches live: h1=32/700, h2=24/700,
       h3=18.72/700 left-aligned body, p=16/400 white) ---- */
.content{font-size:16px}
.content.py-2{padding-top:.5rem;padding-bottom:.5rem}
/* Live truth: Quill headings render their text in <strong> at weight 900,
   color slate-50 rgb(248,250,252). Question titles match this. */
.q-h1{font-size:32px;font-weight:900;line-height:1.15;text-align:center;color:rgb(248,250,252)}
.q-h2{font-size:24px;font-weight:900;line-height:1.15;text-align:center;color:rgb(248,250,252)}
.q-h1 strong,.q-h2 strong{font-weight:900}
.q-h1+.q-h2{margin-top:0}
.q-body{font-size:16px;font-weight:400;line-height:1.4;text-align:center;margin-top:12px;color:#fff}
.q-body p{margin:0}
/* Multi-select subtitle ("Selecciona todas las opciones…") is green on live */
.q-body-green{color:rgb(5,150,105)}
/* Landing intro paragraphs: centered 16px, white on live (not gray) */
.q-body-lines{margin-top:12px;text-align:center}
.q-body-lines p{font-size:16px;font-weight:400;line-height:1.4;color:#fff;margin:0}
.q-body3{margin-top:12px}
.q-body3 h3{font-size:18.72px;font-weight:900;line-height:1.4;text-align:left;color:rgb(248,250,252);margin:0}
.q-body3 h3 .q-c{display:block;text-align:center}
/* Inline emphasis colors (live: yellow run is weight 400, a green box, etc.) */
.q-hl-yellow{color:rgb(250,204,21);font-weight:400}
.q-hl-box{background-color:rgb(22,163,74);color:#fff;font-weight:900;padding:0 .18em;border-radius:4px}
.content-img{margin:1.25rem 0}
.content-img img{width:100%;border-radius:16px;display:block;object-fit:cover}

/* ---- Base option card ---- */
.opt-card{border:.8px solid rgba(var(--featured-rgb),.5);border-radius:16px;overflow:hidden;
  cursor:pointer;text-align:left;width:100%;
  transition:transform .2s,border-color .2s,background-color .2s;
  background:rgba(var(--featured-rgb),.1);color:var(--text)}
.opt-card:hover{border-color:var(--featured)}
.opt-card:active{transform:scale(1.01)}
.opt-card.selected{border-color:var(--featured);background:rgba(var(--featured-rgb),.1)}
.opt-card.touch-hover{border-color:var(--featured)}

/* square 2-col image grid (steps 0 & 1) */
.opt-card.sq{display:flex;flex-direction:column}
.opt-card.sq .imgwrap{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#000}
.opt-card.sq .imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.opt-card.sq .label{min-height:56px;display:flex;align-items:center;padding:12px;
  font-size:16px;line-height:1.15}
.opt-label{font-size:16px;font-weight:400}
.opt-sub{font-size:.78rem;margin-top:2px;color:var(--text-2)}

/* full-width horizontal list card (steps 2,3,6,7,8,10).
   Live box model: button(border) > wrap(flex,p0) > [imgbox 72px][text].
   Text box is flex/space-between/center, padding 12px; inner block holds
   label <p>(lh20) + optional sub <p>(margin-top 12px, lh20). No-sub card
   = 72 + 0.8*2 = 73.6px; has-sub card = (20+12+20+24) + 1.6*2 = 79.2px. */
.opt-card.lh{display:block}
.opt-card.lh .opt-wrap{display:flex;align-items:stretch}
.opt-imgbox{width:100%;min-width:3rem;max-width:4.5rem;flex:0 1 auto;
  display:flex;align-items:center;justify-content:center}
.opt-imgsq{width:72px;height:72px;aspect-ratio:1/1;overflow:hidden;flex:0 0 auto}
.opt-imgsq img{width:100%;height:100%;object-fit:cover;display:block}
.opt-txt{width:100%;flex:0 1 auto;padding:12px;display:flex;flex-direction:row;
  justify-content:space-between;align-items:center}
.opt-txt-inner{padding-right:4px;line-height:20px}
.opt-p{margin:0;font-size:16px;font-weight:400;line-height:20px}
.opt-p-sub{margin-top:12px}
.opt-strong{font-size:16px;font-weight:400;color:#fff}
.opt-sub-em{font-size:16px;font-weight:400;color:var(--featured);font-style:italic;font-weight:400}
/* Multi-select checkbox square (steps 3 & 8) — live: 1px green border,
   black fill, 6px radius; selected shows a GREEN check (box stays black). */
.opt-check{flex:0 0 auto;width:26px;height:26px;margin-left:10px;border-radius:6px;
  border:1px solid rgb(22,163,74);display:flex;align-items:center;
  justify-content:center;background:rgb(0,0,0)}
.opt-check svg{width:16px;height:16px;color:rgb(22,163,74);display:block}
/* Circular outlined chevron on list-img cards (step 10) */
.opt-chev{flex:0 0 auto;width:26px;height:26px;margin-left:10px;border-radius:9999px;
  border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;
  justify-content:center;background:transparent}
.opt-chev svg{width:16px;height:16px;color:rgba(255,255,255,.7);display:block}

/* Live: cards with a sub-label use a 1.6px border and a bold label. */
.opt-card.lh.has-sub{border-width:1.6px}
.opt-card.lh.has-sub .opt-strong{font-weight:700}

/* 2-col text card with radio (step 9) */
.opt-card.gt{display:block}
.opt-card.gt{height:66px}
.opt-card.gt .gt-wrap{display:flex;flex-direction:row;align-items:center;
  justify-content:space-between;gap:8px;padding:0 16px;height:100%;box-sizing:border-box}
.opt-radio-lbl{font-size:16px;font-weight:400;color:rgb(240,253,244)}
.opt-radio{width:25.6px;height:25.6px;flex:0 0 auto;border:.8px solid rgba(255,255,255,.5);
  border-radius:9999px;display:flex;align-items:center;justify-content:center}
.opt-card.gt.selected .opt-radio{border-color:var(--featured)}
.opt-radio-dot{width:12px;height:12px;border-radius:9999px;background:var(--featured)}

/* ---- Green-list (step 9): solid-green button column + side image ---- */
.green-list{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.gl-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.gl-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;min-height:67px;padding:12px 16px;border:none;border-radius:16px;
  background:rgb(22,163,74);color:#fff;font-size:16px;font-weight:400;
  text-align:left;cursor:pointer;transition:filter .15s}
.gl-btn:hover{filter:brightness(1.06)}
.gl-btn:active{transform:scale(1.01)}
.gl-lbl{flex:1 1 auto}
.gl-chev{flex:0 0 auto;width:26px;height:26px;border-radius:9999px;
  border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center}
.gl-chev svg{width:16px;height:16px;color:#fff;display:block}
.gl-img{flex:0 0 auto;align-self:stretch;display:flex}
.gl-img img{height:100%;width:auto;max-width:42vw;object-fit:contain;
  object-position:bottom;display:block}
@media(min-width:520px){.gl-img img{max-width:200px}}

/* ---- Ruler ---- */
.ruler-units{display:flex;justify-content:center;gap:8px;margin:1rem 0}
.ruler-unit{padding:4px 20px;border:none;border-radius:16px;font-size:16px;font-weight:500;
  cursor:pointer;background:rgba(var(--featured-rgb),.12);color:#fff;transition:background .2s}
.ruler-unit.active{background:var(--featured);color:#fff}
/* Live structure: relative container, ticks track with pt-16 pb-[28px],
   value SPAN absolutely pinned to the top, green caret SVG centred. */
.ruler-wrap{position:relative;width:100%;overflow:hidden}
.ruler-track{display:flex;overflow-x:auto;scrollbar-width:none;padding:64px 0 28px}
.ruler-track::-webkit-scrollbar{display:none}
.ruler-pad{flex:0 0 50%}
.ruler-mark{flex:0 0 15px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.ruler-mark .line{width:1px;background:rgb(13,13,13);margin:0 auto}
.ruler-mark .line.minor{height:16px}
.ruler-mark .line.middle{height:32px}
.ruler-mark .line.major{height:40px}
.ruler-mark .lbl{font-size:16px;color:rgb(193,193,193);margin-top:8px;white-space:nowrap}
.ruler-value{position:absolute;top:0;left:0;width:100%;text-align:center;
  font-size:40px;font-weight:600;color:#fff;line-height:60px;pointer-events:none}
.ruler-value small{font-size:20px;font-weight:600}
.ruler-caret{position:absolute;bottom:0;left:50%;width:28px;height:100px;
  transform:translateX(-50%);color:var(--featured);pointer-events:none;z-index:10}
.ruler-hint{text-align:center;margin-top:12px;color:var(--text-2);font-size:.85rem}

/* ---- Progress chart (Recharts-equivalent SVG, viewBox 0 0 448 252) ----
   Scales responsively to the shell width; overflow visible so the
   "Tu objetivo" badge (negative y) is not clipped. */
.chart-shell{margin-top:1.5rem;padding:24px 3.2px 0;display:block}
.chart-svg{display:block;width:100%;height:auto;overflow:visible}
.chart-svg .recharts-cartesian-grid line{stroke:rgb(77,77,77);stroke-width:1;
  stroke-dasharray:3 3;fill:none}
.chart-axis-txt{fill:#fff;font-size:12px;font-weight:400;font-family:Inter,sans-serif}
/* Live step-15 subtitle is two green runs, not plain white */
.chart-sub .chart-sub-a{color:rgb(5,150,105);font-weight:700}
.chart-sub .chart-sub-b{color:rgb(21,128,61);font-weight:700}

/* ---- Processing step ---- */
.proc-bars{display:flex;flex-direction:column;gap:1rem;margin-top:1.25rem}
.proc-row{display:flex;flex-direction:column;gap:6px}
.proc-row-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.proc-label{font-size:16px;font-weight:700;color:#fff;flex:1;text-align:center}
.proc-state{font-size:14px;color:var(--text-2);font-weight:700}
.proc-pct{font-size:16px;font-weight:700;color:#fff}
.proc-track{position:relative;width:100%;height:8px;border-radius:9999px;
  background:rgba(var(--featured-rgb),.12);overflow:hidden}
.proc-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--featured);
  border-radius:9999px;transition:width .15s linear}
.proc-final{margin-top:1.5rem;text-align:center}
.proc-testis{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin-top:1.25rem;
  padding-bottom:4px;cursor:grab;-webkit-overflow-scrolling:touch}
.proc-testis::-webkit-scrollbar{display:none}
.proc-testi{flex:0 0 80%;border:.8px solid rgba(var(--featured-rgb),.4);border-radius:16px;
  padding:16px;background:rgba(var(--featured-rgb),.06);user-select:none}
.proc-testi-head{display:flex;align-items:center;gap:10px}
.proc-testi-av{width:40px;height:40px;border-radius:9999px;object-fit:cover;
  flex:0 0 auto;display:block;pointer-events:none}
.proc-testi-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.proc-stars{color:#fbbf24;font-size:14px;letter-spacing:2px}
.proc-testi-title{font-weight:700;font-size:15px;color:#fff}
.proc-testi-body{font-size:14px;color:var(--text-2);margin-top:10px;line-height:1.5}

/* ---- Approval ---- */
.appr-title strong{font-weight:700;color:#fff}
.appr-item{display:flex;gap:14px;padding:8px;align-items:flex-start;
  background:rgb(202,252,208);border:1px solid rgb(154,243,168);border-radius:16px}
.appr-ico{font-size:18.72px;flex:0 0 auto;line-height:1.4}
.appr-it-title{font-size:18.72px;font-weight:900;color:rgb(22,163,74)}
.appr-it-desc{font-size:16px;font-weight:400;color:rgb(9,9,11);margin-top:2px}

/* ---- Buttons ---- */
.btn-continue{width:100%;padding:8.8px 16px;min-height:56px;border:none;border-radius:16px;
  font-weight:500;font-size:16px;cursor:pointer;background:var(--featured);color:#fff;
  text-transform:none;transition:opacity .2s}
.btn-back{background:none;border:none;color:var(--text-2);font-size:.8rem;cursor:pointer;
  display:flex;align-items:center;gap:6px;margin:8px auto 0}
/* VSL-only: small back arrow pinned top-left, clear of the bottom CTA */
.btn-back-tl{position:fixed;top:.6rem;left:.6rem;z-index:50;width:2.25rem;height:2.25rem;
  display:flex;align-items:center;justify-content:center;border:none;border-radius:9999px;
  background:rgba(255,255,255,.08);color:#fff;font-size:1.25rem;line-height:1;cursor:pointer;
  transition:background .2s}
.btn-back-tl:hover{background:rgba(255,255,255,.18)}

/* ---- Embedded VSL (mirrors standalone vsl.html, no redirect) ---- */
.vsl-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:20px;background:#000}
.vsl-embed{width:100%;display:flex;flex-direction:column;align-items:center}
.vsl-header{text-align:center;font-weight:700;font-size:18.72px;line-height:1.15;padding:8px 0}
.vsl-header u{text-decoration:underline}
.vsl-header .hl-red{color:rgb(220,38,38)}
.vsl-header .hl-green{color:rgb(22,163,74)}
.vsl-container{width:100%;max-width:800px;margin:0 auto}
.video-container{width:100%;min-height:300px;display:flex;align-items:center;
  justify-content:center;padding:20px 0;background:#000}
.cta-container{padding:20px;display:none;text-align:center;animation:vslFadeIn 1s ease-out}
.btn-vsl-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:#16a34a;color:#fff;text-decoration:none;padding:22px 40px;border-radius:60px;
  font-size:18px;font-weight:900;text-transform:uppercase;
  box-shadow:0 10px 25px rgba(22,163,74,.4);width:100%;max-width:350px;
  animation:pulse 2s infinite ease-in-out}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes vslFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}