:root {
  --navy:#12294B; --navy-700:#1D3A66; --sky:#7FB5E8; --sky-200:#BFDCF5;
  --ice:#E3EEF9; --white:#FBFDFF; --mint:#2FBF9B; --mint-600:#28A888; --amber:#F4A55C;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body { font-family:Inter,sans-serif; background:var(--white); color:var(--navy); display:flex; flex-direction:column; align-items:center; }
.qs { font-family:Quicksand,sans-serif; }
.hidden { display:none !important; }

#topbar { width:100%; max-width:480px; padding:14px 20px 6px; display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; }
#backbtn { position:absolute; top:12px; left:14px; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:50%; color:#7a8aa5; cursor:pointer; transition:background .15s, color .15s; }
@media (hover:hover) { #backbtn:hover { background:var(--ice); color:var(--navy); } }
#backbtn:active { background:var(--ice); }
#logo { width:96px; }
#progresswrap { width:100%; }
#progressbar { height:7px; background:var(--ice); border-radius:99px; overflow:hidden; }
#progressfill { display:block; height:100%; width:4%; background:var(--sky); border-radius:99px; transition:width .35s ease; }

#screen { width:100%; max-width:480px; padding:18px 22px 48px; flex:1; animation:fadein .3s ease; }
@keyframes fadein { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }

h1 { font-family:Quicksand,sans-serif; font-weight:700; font-size:27px; line-height:1.22; margin-bottom:10px; text-align:center; }
h2.sub { font-family:Inter; font-weight:400; font-size:15px; color:#4a5d78; margin-bottom:22px; line-height:1.55; text-align:center; }
.kicker { font-size:11.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--sky); margin-bottom:8px; text-align:center; }

.opt { display:flex; align-items:center; gap:12px; width:100%; background:var(--white); border:2px solid var(--ice);
  border-radius:14px; padding:15px 17px; font-size:15px; font-weight:500; margin-bottom:11px; cursor:pointer;
  box-shadow:0 2px 10px rgba(18,41,75,.05); transition:all .15s; text-align:left; }
@media (hover:hover) { .opt:hover { border-color:var(--sky-200); } }
.opt.sel { border-color:var(--sky); background:var(--sky-200); }
.opt .em { font-size:21px; }

.btn { font-family:Inter; font-weight:700; font-size:16px; border:none; border-radius:999px; padding:16px 32px;
  cursor:pointer; width:100%; transition:transform .12s, background .15s; }
.btn:active { transform:scale(.98); }
.btn.primary { background:var(--mint); color:#fff; }
@media (hover:hover) { .btn.primary:hover { background:var(--mint-600); } }
.btn.primary:disabled { background:#c5d5cf; cursor:not-allowed; }
.btn.dark { background:var(--navy); color:#fff; }

.likert { display:flex; gap:9px; margin:20px 0 12px; }
.likert button { flex:1; aspect-ratio:1; border-radius:14px; border:2px solid var(--ice); background:var(--white);
  font-size:19px; font-weight:700; font-family:Inter; color:var(--navy); cursor:pointer; }
.likert button.sel { border-color:var(--sky); background:var(--sky-200); }
@media (hover:hover) { .likert button:hover { border-color:var(--sky); background:var(--sky-200); } }
.likert-labels { display:flex; justify-content:space-between; font-size:12px; color:#4a5d78; margin-bottom:8px; }

.heroimg { width:100%; border-radius:18px; margin-bottom:20px; }
/* landing */
.quizpill { display:inline-block; background:var(--ice); color:var(--navy); font-size:12.5px; font-weight:700; border-radius:99px; padding:6px 15px; margin:4px 0 10px; }
.landtitle { font-size:25px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px; }
.landpromise { font-size:15.5px; line-height:1.45; color:#4a5d78; max-width:340px; margin:0 auto 4px; }
.landselect { font-size:12.5px; font-weight:600; color:#7a8aa5; letter-spacing:.2px; margin-top:2px; }
.landgrid { display:grid; grid-template-columns:1fr 1.05fr; gap:6px; align-items:center; margin:6px 0 10px; }
.landmodel { width:100%; max-height:400px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 8px 12px rgba(18,41,75,.10)); }
.landages { display:flex; flex-direction:column; gap:11px; }
.agebtn { display:flex; align-items:center; justify-content:space-between; background:var(--ice); border:2px solid transparent;
  border-radius:14px; padding:16px 18px; font-size:16px; font-weight:700; font-family:Inter; color:var(--navy); cursor:pointer; transition:all .15s; }
.agebtn span { color:var(--sky); font-size:19px; }
@media (hover:hover) { .agebtn:hover { border-color:var(--sky); background:var(--sky-200); } }
.videowrap { position:relative; width:100%; border-radius:20px; overflow:hidden; margin-bottom:20px; aspect-ratio:4/3; background:var(--ice); }
.videowrap video { width:100%; height:100%; object-fit:cover; object-position:top; }

.socialnum { font-family:Quicksand,sans-serif; font-size:42px; font-weight:700; color:var(--sky); }

.note { font-size:12px; color:#7a8aa5; line-height:1.5; margin-top:18px; }
input.field { width:100%; border:2px solid var(--ice); border-radius:14px; padding:16px 18px; font-size:16px;
  font-family:Inter; color:var(--navy); background:var(--white); margin-bottom:14px; outline:none; }
input.field:focus { border-color:var(--sky); }
.emsug-chip { background:var(--white); border:1.5px solid var(--ice); border-radius:999px; padding:9px 15px;
  font-family:Inter; font-size:13.5px; font-weight:500; color:var(--navy); cursor:pointer;
  box-shadow:0 1px 6px rgba(18,41,75,.05); transition:all .15s; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
@media (hover:hover) { .emsug-chip:hover { border-color:var(--sky); background:var(--sky-200); } }

/* diagnosis */
.gauge { position:relative; width:230px; margin:8px auto 4px; }
.gaugelabel { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:6px; }
.gaugelabel b { font-family:Quicksand,sans-serif; font-size:34px; }
.statrow { display:flex; justify-content:space-between; border-bottom:1px solid var(--ice); padding:11px 2px; font-size:14px; }
.statrow b { font-weight:700; }
.pill { background:var(--amber); color:#fff; border-radius:99px; padding:3px 11px; font-size:12.5px; font-weight:700; }
.pill.blue { background:var(--sky); }
.diagcard { background:var(--ice); border-radius:18px; padding:20px; margin:18px 0; font-size:14px; line-height:1.6; }

/* loading */
.loadwrap { text-align:center; padding-top:40px; }
.loadpct { font-family:Quicksand,sans-serif; font-size:56px; font-weight:700; color:var(--sky); }
.loadbar { height:10px; background:var(--ice); border-radius:99px; overflow:hidden; margin:22px 0; }
.loadbar i { display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--sky),var(--mint)); border-radius:99px; transition:width .25s; }
.loadmsg { font-size:14px; color:#4a5d78; min-height:22px; }

/* scratch */
#scratchwrap { position:relative; width:100%; aspect-ratio:16/10; border-radius:18px; overflow:hidden; margin:18px 0; }
#scratchreveal { position:absolute; inset:0; background:var(--navy); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
#scratchreveal .big { font-family:Quicksand,sans-serif; font-size:52px; font-weight:700; color:var(--amber); }
#scratchcanvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }

/* paywall */
.countbar { position:sticky; top:0; z-index:40; background:var(--navy); color:#fff; border-radius:0 0 16px 16px; padding:11px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 -22px 20px; }
.countbar .cb-time b { font-family:Quicksand,sans-serif; font-size:23px; letter-spacing:1px; display:block; line-height:1; }
.countbar .cb-time span { font-size:10px; opacity:.75; letter-spacing:1px; text-transform:uppercase; }
.countbar .cb-btn { background:var(--mint); color:#fff; border:none; border-radius:999px; font-weight:800; font-size:13.5px; padding:11px 20px; cursor:pointer; font-family:Inter; }
.promocard { background:var(--navy); color:#fff; border-radius:18px; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.promocard .pc-label { font-size:12px; opacity:.8; margin-bottom:4px; }
.promocard .pc-code { background:#fff; color:var(--navy); font-weight:800; font-size:14px; border-radius:10px; padding:8px 14px; border:2px dashed var(--sky); }
.promocard .pc-time { text-align:center; }
.promocard .pc-time b { font-family:Quicksand,sans-serif; font-size:22px; display:block; line-height:1; }
.promocard .pc-time span { font-size:10px; opacity:.75; text-transform:uppercase; letter-spacing:1px; }
.nowgoal { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.nowgoal .cell { border-radius:16px; overflow:hidden; border:1px solid var(--ice); background:var(--white); }
.nowgoal img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.nowgoal .cap { padding:10px 12px 4px; font-size:12.5px; font-weight:700; text-align:center; }
.nowgoal .attrs { padding:6px 12px 12px; }
.nowgoal .attr { font-size:11px; color:#4a5d78; padding:5px 0; border-top:1px solid var(--ice); }
.nowgoal .attr b { display:block; font-size:12px; color:var(--navy); }
.nowgoal .cell.goal .attr b { color:var(--mint); }
.badgerow { display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0 4px; flex-wrap:wrap; }
.badgerow .bdg { border:1px solid var(--ice); border-radius:8px; padding:5px 10px; font-size:11px; font-weight:700; color:#4a5d78; background:var(--white); }
.badgerow .lock { font-size:12px; color:var(--mint); font-weight:700; }
.otherpay { display:block; text-align:center; font-size:13.5px; font-weight:600; color:#4a5d78; margin:14px 0 4px; text-decoration:underline; cursor:pointer; background:none; border:none; width:100%; font-family:Inter; }
.researchstrip { background:var(--ice); border-radius:16px; padding:16px 18px; text-align:center; margin:24px 0; }
.researchstrip .rs-title { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#4a5d78; margin-bottom:8px; }
.researchstrip .rs-items { font-size:12.5px; color:var(--navy); font-weight:600; line-height:1.9; }
.rings { display:flex; gap:12px; margin:20px 0 8px; }
.ring { flex:1; text-align:center; }
.ring svg { width:78px; }
.ring .rv { font-family:Quicksand,sans-serif; font-weight:700; font-size:17px; fill:#12294B; }
.ring p { font-size:11px; color:#4a5d78; line-height:1.4; margin-top:6px; }
.planwrap { margin-top:6px; }
/* plan unico (Hotmart): tarjeta grande con precio, subtitulo y CTA */
.oneplan { border:2px solid var(--ice); border-radius:20px; padding:26px 18px 16px; margin-top:6px; text-align:center; background:var(--white); }
.oneplan .op-price { font-family:Quicksand,sans-serif; }
.oneplan .op-price .pold { font-size:20px; color:#9aa8bd; text-decoration:line-through; margin-right:6px; }
.oneplan .op-price .pnow { font-size:52px; font-weight:700; color:var(--navy); letter-spacing:-1px; }
.oneplan .op-sub { font-size:15px; font-weight:700; color:var(--mint); margin:2px 0 16px; }
.oneplan .btn { width:100%; }
.oneplan .legal { margin-top:10px; }
.inside { border:1px solid var(--ice); border-radius:16px; padding:8px 18px; margin:16px 0 22px; }
.inside .in-li { display:flex; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--ice); font-size:14px; }
.inside .in-li:last-child { border-bottom:none; }
.inside .in-li .em { font-size:20px; }
.inside .in-li b { display:block; font-size:14px; }
.inside .in-li span { font-size:12px; color:#4a5d78; }
.plan { display:flex; align-items:center; gap:13px; border:2px solid var(--ice); border-radius:16px; padding:15px; margin-bottom:11px; cursor:pointer; position:relative; }
.plan.sel { border-color:var(--mint); background:#F2FBF8; }
.plan .radio { width:22px; height:22px; border-radius:50%; border:2px solid var(--sky-200); flex:none; }
.plan.sel .radio { border:7px solid var(--mint); }
.plan .pname { font-weight:700; font-size:15px; }
.plan .pold { font-size:12.5px; color:#9aa8bd; text-decoration:line-through; }
.plan .pnew { font-size:14px; font-weight:700; }
.plan .perday { margin-left:auto; text-align:right; }
.plan .perday b { font-family:Quicksand,sans-serif; font-size:22px; display:block; }
.plan .perday span { font-size:11.5px; color:#4a5d78; }
.mostpop { position:absolute; top:-11px; left:16px; background:var(--amber); color:#fff; font-size:11px; font-weight:800; letter-spacing:1px; border-radius:99px; padding:3px 11px; }
.legal { font-size:11.5px; color:#7a8aa5; line-height:1.55; margin:14px 0 26px; }
.goal-li { display:flex; gap:10px; font-size:14.5px; margin-bottom:10px; align-items:flex-start; }
.goal-li span { color:var(--mint); font-weight:800; }
.statbig { display:flex; gap:14px; margin:18px 0 26px; }
.statbig div { flex:1; background:var(--ice); border-radius:16px; padding:16px 12px; text-align:center; }
.statbig b { font-family:Quicksand,sans-serif; font-size:26px; color:var(--sky); display:block; }
.statbig span { font-size:11.5px; color:#4a5d78; line-height:1.35; display:block; margin-top:4px; }
details { border:1px solid var(--ice); border-radius:14px; padding:14px 18px; margin-bottom:10px; font-size:14px; }
details summary { font-weight:700; cursor:pointer; font-size:14.5px; }
details p { margin-top:10px; color:#42536e; line-height:1.6; }
.testi { border:1px solid var(--ice); border-radius:16px; padding:18px; margin-bottom:12px; }
.testi .thead { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.testi img { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.testi .tname { font-weight:700; font-size:14px; }
.testi .stars { color:var(--amber); font-size:13px; }
.testi p { font-size:13.5px; color:#42536e; line-height:1.6; }
.guarantee { background:var(--ice); border-radius:18px; padding:22px; text-align:center; margin:26px 0; }
.guarantee .g-emoji { font-size:34px; }
footer.pfoot { font-size:11px; color:#9aa8bd; text-align:center; padding:10px 0 30px; line-height:1.6; }

#modal { position:fixed; inset:0; background:rgba(18,41,75,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:24px; }
#modalcard { background:var(--white); border-radius:22px; padding:34px 28px; max-width:360px; text-align:center; }
#modalcard h3 { font-family:Quicksand,sans-serif; font-size:22px; margin:10px 0 8px; }
#modalcard p { font-size:14px; color:#42536e; margin-bottom:20px; line-height:1.6; }

.center { text-align:center; }
.mt8 { margin-top:8px; } .mt20 { margin-top:20px; } .mt28 { margin-top:28px; }

/* ---------- Aluna checkout modal (Paddle inline) ---------- */
#ckmodal { position:fixed; inset:0; z-index:90; background:rgba(18,41,75,.58); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center; padding:22px 14px; overflow-y:auto; }
.ck-card { background:var(--white); border-radius:20px; width:100%; max-width:440px; position:relative;
  box-shadow:0 28px 70px rgba(18,41,75,.4); overflow:hidden; animation:ck-in .35s cubic-bezier(.3,1.2,.5,1) both; }
@keyframes ck-in { from { transform:translateY(18px) scale(.97); opacity:0 } to { transform:none; opacity:1 } }
.ck-close { position:absolute; top:10px; right:12px; width:34px; height:34px; border:none; background:transparent;
  font-size:26px; line-height:1; color:var(--navy); opacity:.55; cursor:pointer; z-index:2; }
.ck-close:hover { opacity:1; }
.ck-head { background:var(--ice); padding:18px 22px 16px; text-align:center; }
.ck-kicker { font-size:10.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--mint-600); }
.ck-title { font-family:Quicksand,sans-serif; font-weight:700; font-size:17px; color:var(--navy); margin-top:3px; }
.ck-price { margin-top:8px; display:flex; align-items:baseline; justify-content:center; gap:8px; }
.ck-price b { font-family:Quicksand,sans-serif; font-size:38px; line-height:1; color:var(--navy); }
.ck-price span { font-size:13px; font-weight:600; color:#42536e; }
.ck-frame-wrap { padding:4px 14px 0; min-height:340px; }
.ck-terms { font-size:11.5px; color:#42536e; line-height:1.55; text-align:center; padding:2px 22px 12px; }
.ck-foot { border-top:1px solid var(--ice); background:#F4F9FE; padding:12px 20px 16px; text-align:center;
  font-size:10.5px; color:#5a6b85; line-height:1.65; }
.ck-foot a { color:#4a5d78; }
.ck-lock { margin-top:7px; font-size:10px; opacity:.85; }
@media (max-width:480px) { #ckmodal { padding:10px 8px; } .ck-price b { font-size:32px; } }
.ck-consent { display:flex; gap:9px; align-items:flex-start; padding:2px 22px 12px; font-size:12px; color:#42536e; line-height:1.5; cursor:pointer; }
.ck-consent input { margin-top:2px; accent-color:var(--mint); width:15px; height:15px; flex:0 0 auto; }

/* ---------- Inside the app: carrusel de capturas ---------- */
.swipe-hint { font-size:13px; color:#4a5d78; text-align:center; margin:6px 0 14px; font-weight:600; }
.swipe-arrow { display:inline-block; animation:swipe-nudge 1.6s ease-in-out infinite; }
@keyframes swipe-nudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }
.appshots { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 16px;
  margin:0 -20px; padding-left:20px; padding-right:20px; -webkit-overflow-scrolling:touch; }
.appshots::-webkit-scrollbar { display:none; }
.shot { flex:0 0 68%; max-width:250px; scroll-snap-align:center; text-align:center; }
.shot-phone { position:relative; border-radius:30px; border:7px solid var(--navy); overflow:hidden;
  box-shadow:0 16px 40px rgba(18,41,75,.25); background:#0C1D38; margin-bottom:12px; }
.shot-notch { position:absolute; top:7px; left:50%; transform:translateX(-50%); width:34%; height:14px;
  background:var(--navy); border-radius:99px; z-index:2; }
.shot-phone img { display:block; width:100%; }
.shot b { display:block; font-family:Quicksand,sans-serif; font-size:14.5px; color:var(--navy); margin-bottom:3px; }
.shot span { font-size:12px; color:#42536e; line-height:1.5; display:block; }