/* ---------- Tokens (semánticos; light/dark diseñados juntos) ---------- */
:root{color-scheme:light;
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#E8F3F5;--ink:#0F2A33;--mut:#46606A;--line:#D3E4E8;
  --pri:#0E7490;--pri-ink:#FFFFFF;--pri-soft:#DFF3F7;--acc:#15803D;--acc-soft:#DCF5E5;
  --warn-bg:#FEF3C7;--warn-ink:#6B3A07;--danger:#B91C1C;--ring:#0E7490;
  --lv-g:#15803D;--lv-y:#A16207;--lv-o:#C2410C;
  --hero-a:#0E7490;--hero-b:#0B5C73;
  --sh1:0 1px 2px rgba(15,42,51,.06),0 4px 14px rgba(15,42,51,.05);--sh2:0 10px 30px rgba(15,42,51,.18);
  --r1:10px;--r2:16px;--r3:22px;
  --f-head:"Figtree",system-ui,"Segoe UI",sans-serif;--f-body:"Atkinson Hyperlegible",system-ui,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 var(--f-body);padding-bottom:calc(84px + env(safe-area-inset-bottom))}
h1,h2,h3{font-family:var(--f-head);line-height:1.2;margin:0}
h2{font-size:24px;font-weight:700;margin:4px 0 12px}h3{font-size:18px;font-weight:700;margin:18px 0 6px}
p{margin:8px 0}a{color:var(--pri)}
.num,.tabular{font-variant-numeric:tabular-nums}
.ic{flex:none;vertical-align:-4px}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:var(--r1);z-index:99}
.skip:focus{left:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,var(--hero-a),var(--hero-b));color:#fff;
  padding:max(12px,env(safe-area-inset-top)) 16px 12px;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:10px;font:800 20px var(--f-head);letter-spacing:-.01em}
.brand .logo{width:34px;height:34px;border-radius:10px;background:#ffffff26;display:grid;place-items:center}
.pill{background:#ffffff26;border:1px solid #ffffff40;padding:4px 12px;border-radius:99px;font-size:14px;font-weight:700;display:inline-flex;gap:6px;align-items:center}
main{max-width:880px;margin:auto;padding:16px}

/* ---------- Navegación inferior (5 ítems) ---------- */
nav{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--line);display:flex;
  padding-bottom:env(safe-area-inset-bottom);z-index:30;box-shadow:0 -4px 18px rgba(15,42,51,.06)}
nav button{flex:1;min-height:64px;border:0;background:none;color:var(--mut);font:600 12px var(--f-head);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:color .15s}
nav button[aria-current=page]{color:var(--pri)}
nav button[aria-current=page] .ib{background:var(--pri-soft)}
nav .ib{width:52px;height:30px;border-radius:99px;display:grid;place-items:center;transition:background .15s}

/* ---------- Componentes ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:16px;margin-bottom:12px;box-shadow:var(--sh1)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.grid>.card{margin:0}
button{font-family:inherit}
.btn,.btn-ghost{min-height:46px;padding:10px 20px;border-radius:12px;font:700 16px var(--f-head);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;transition:transform .12s,box-shadow .15s,background .15s;touch-action:manipulation}
.btn{background:var(--pri);color:var(--pri-ink);border:0;box-shadow:0 2px 8px rgba(14,116,144,.3)}
.btn:hover{filter:brightness(1.07)}.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--pri);border:1.5px solid var(--pri)}
.btn-ghost:hover{background:var(--pri-soft)}
.btn-sm{min-height:40px;padding:6px 14px;font-size:15px}
.btn-icon{min-width:44px;min-height:44px;padding:0}
.chip{min-height:40px;padding:6px 14px;margin:0 6px 8px 0;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  font:600 15px var(--f-head);cursor:pointer;display:inline-flex;align-items:center;gap:6px;touch-action:manipulation;transition:background .15s,border-color .15s}
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 8px;padding:2px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}.chips .chip{margin:0;white-space:nowrap}
.chip:hover{border-color:var(--pri)}
.chip[aria-pressed=true]{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
.tag{display:inline-flex;align-items:center;gap:4px;background:var(--pri-soft);color:var(--pri);border-radius:99px;padding:3px 10px;font:700 13px var(--f-head);margin:2px 4px 2px 0}
.tag.free{background:var(--acc-soft);color:var(--acc)}
input,select{min-height:46px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);background:var(--surface);max-width:100%}
input[type=checkbox]{min-height:0;width:22px;height:22px;accent-color:var(--pri);vertical-align:-5px;margin-right:6px}
.field{position:relative}.field .ic{position:absolute;left:12px;top:12px;color:var(--mut)}.field input{width:100%;padding-left:42px}
.mut{color:var(--mut);font-size:15px}.small{font-size:14px}
.warn{display:flex;gap:10px;background:var(--warn-bg);color:var(--warn-ink);border-radius:var(--r1);padding:12px 14px;font-size:15px;line-height:1.45;margin:12px 0}
.warn .ic{margin-top:2px}
table{width:100%;border-collapse:collapse}td,th{padding:10px 6px;border-bottom:1px solid var(--line);text-align:left;font-size:15px;vertical-align:top}
th{color:var(--mut);font:700 13px var(--f-head);text-transform:uppercase;letter-spacing:.04em}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.seg{display:flex;background:var(--surface-2);border-radius:14px;padding:4px;margin-bottom:14px}
.seg button{flex:1;min-height:42px;border:0;border-radius:11px;background:none;color:var(--mut);font:700 15px var(--f-head);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--pri);box-shadow:var(--sh1)}

/* Nivel de carbohidratos: color + texto (no solo color) */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:0}
.G{background:var(--lv-g)}.Y{background:var(--lv-y)}.O{background:var(--lv-o)}
.lvl{display:inline-flex;align-items:center;font:700 13px var(--f-head);border-radius:99px;padding:2px 10px 2px 8px;border:1.5px solid currentColor}
.lvl.G{color:var(--lv-g);background:transparent}.lvl.Y{color:var(--lv-y);background:transparent}.lvl.O{color:var(--lv-o);background:transparent}
.lvl .dot{margin-right:5px;background:currentColor}

/* Receta */
.rcard{width:100%;text-align:left;cursor:pointer;color:inherit;display:block;transition:transform .15s,box-shadow .15s,border-color .15s}
.rcard:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--pri)}
.rcard .cat{font:700 12px var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--pri)}
.rcard .tt{font:700 18px/1.25 var(--f-head);margin:4px 0 8px;display:block}
.rcard.locked{background:var(--surface-2)}.rcard.locked .tt{color:var(--mut)}
.metric{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:15px;color:var(--mut)}
.metric b{color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:12px 8px;text-align:center}
.stat b{display:block;font:800 26px var(--f-head);color:var(--pri)}.stat span{font-size:14px;color:var(--mut)}
.nut{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center;margin:12px 0}
.nut div{background:var(--surface-2);border-radius:12px;padding:10px 2px}.nut b{display:block;font:800 19px var(--f-head)}.nut small{color:var(--mut);font-size:13px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--mut);margin:4px 0 14px}
.bar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin-top:8px}.bar i{display:block;height:100%;background:var(--pri);border-radius:99px}
.bar.ok i{background:var(--acc)}
.ok{color:var(--acc)}.bad{color:var(--danger)}
.slot{padding:10px 0;border-top:1px solid var(--line)}
.slot .lab{font:700 12px var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.slot .nm{background:none;border:0;padding:0;text-align:left;color:var(--ink);font:600 17px var(--f-body);cursor:pointer}
details.card summary{cursor:pointer;list-style:none;min-height:28px;display:flex;justify-content:space-between;align-items:center;gap:8px}
details.card summary::-webkit-details-marker{display:none}
details.card summary::after{content:"";width:10px;height:10px;border-right:2.5px solid var(--pri);border-bottom:2.5px solid var(--pri);transform:rotate(45deg);margin:0 4px 4px 8px;flex:none;transition:transform .2s}
details.card[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
details.card>div{margin-top:10px}
ul,ol{padding-left:22px;margin:8px 0}li{margin:4px 0}

/* Bonos */
.bono{cursor:pointer;text-align:left;width:100%;color:inherit;display:flex;flex-direction:column;gap:6px;transition:transform .15s,box-shadow .15s,border-color .15s}
.bono:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--pri)}
.bono .ibox{width:48px;height:48px;border-radius:14px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center}
.bono .bt{font:700 17px/1.25 var(--f-head)}.bono .nb{font:700 12px var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}

/* Precio */
.price-card{border:2px solid var(--pri);position:relative}
.price{font:800 44px/1 var(--f-head);letter-spacing:-.02em}.price small{font:600 17px var(--f-body);color:var(--mut)}
.checks{list-style:none;padding:0}.checks li{display:flex;gap:10px;align-items:flex-start;margin:10px 0}.checks .ic{color:var(--acc);margin-top:3px}

/* Modal (hoja inferior en móvil) */
.modal{position:fixed;inset:0;background:rgba(6,20,26,.55);display:none;align-items:flex-end;justify-content:center;z-index:50}
.modal.on{display:flex}
.modal>div{background:var(--surface);border-radius:var(--r3) var(--r3) 0 0;width:100%;max-width:640px;max-height:92vh;overflow:auto;padding:20px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:var(--sh2)}
@media(min-width:768px){.modal{align-items:center;padding:20px}.modal>div{border-radius:var(--r3)}}
.mhead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.stepper{display:inline-flex;align-items:center;gap:10px}

/* ---------- Portada de venta ---------- */
.hero{margin:-16px -16px 24px;padding:28px 20px 30px;color:#fff;border-radius:0 0 28px 28px;
  background:radial-gradient(120% 80% at 100% 0%,#22C0DD55,transparent 60%),linear-gradient(160deg,var(--hero-a),var(--hero-b))}
.hero .kick{display:inline-block;background:#ffffff26;border:1px solid #ffffff40;border-radius:99px;padding:5px 14px;font:700 13px var(--f-head);margin-bottom:14px}
.hero h1{font:800 clamp(30px,8vw,44px)/1.08 var(--f-head);letter-spacing:-.02em;margin:0 0 12px}
.hero .lead{font-size:18px;line-height:1.5;opacity:.95;margin:0 0 20px;max-width:34em}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.btn-light{background:#fff;color:#0B5C73;border:0;min-height:50px;padding:12px 22px;border-radius:12px;font:800 17px var(--f-head);cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.btn-ghost-w{background:transparent;color:#fff;border:1.5px solid #ffffff99;min-height:50px;padding:12px 20px;border-radius:12px;font:700 16px var(--f-head);cursor:pointer}
.btn-ghost-w:hover,.btn-light:hover{filter:brightness(1.05)}
.trust{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px}
.trust li{display:flex;gap:6px;align-items:center;margin:0}
.mock{background:var(--surface);color:var(--ink);border-radius:var(--r2);padding:16px;margin-top:24px;box-shadow:var(--sh2);max-width:420px}
.mock .cap{font:700 12px var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:8px;display:block}
.sec{margin:34px 0}.sec>h2{font-size:26px;margin-bottom:6px}.sec>.sub{color:var(--mut);margin:0 0 16px}
.quote{border-left:4px solid var(--pri);background:var(--surface);border-radius:0 var(--r2) var(--r2) 0;padding:14px 16px;margin-bottom:10px;font-size:18px;font-style:italic;box-shadow:var(--sh1)}
.feat{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.feat .card{margin:0}
.ibox{width:48px;height:48px;border-radius:14px;background:var(--pri-soft);color:var(--pri);display:grid;place-items:center}
.feat h3{margin:12px 0 4px}.feat p{margin:0;color:var(--mut)}
.steps{list-style:none;padding:0;counter-reset:s}.steps li{counter-increment:s;display:flex;gap:14px;margin:0 0 16px}
.steps li::before{content:counter(s);flex:none;width:36px;height:36px;border-radius:50%;background:var(--pri);color:var(--pri-ink);display:grid;place-items:center;font:800 17px var(--f-head)}
.steps b{display:block;font:700 18px var(--f-head)}.steps span{color:var(--mut)}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mini div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:12px;display:flex;flex-direction:column;gap:8px;font:700 15px/1.25 var(--f-head)}
.mini .ibox{width:40px;height:40px;border-radius:12px}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center}.cmp .ic{color:var(--acc)}.cmp .no{color:var(--mut)}
.cmp .hl{background:var(--pri-soft);font-weight:700}
.guar{display:flex;gap:14px;align-items:flex-start;background:var(--acc-soft);border:1px solid var(--acc);border-radius:var(--r2);padding:16px;margin:16px 0}
.guar .ic{color:var(--acc);flex:none}.guar p{margin:2px 0 0}
.sticky-cta{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:25;background:var(--surface);border-top:1px solid var(--line);
  padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:0 -6px 20px rgba(15,42,51,.10)}
.sticky-cta>div{line-height:1.25}.sticky-cta b{font:800 18px var(--f-head)}
main.has-cta{padding-bottom:96px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.tile{text-align:left;cursor:pointer;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:14px;box-shadow:var(--sh1);display:flex;flex-direction:column;gap:8px;font:700 16px var(--f-head)}
.tile:hover{border-color:var(--pri)}

/* ---------- Diseño moderno: degradados, vidrio, ilustraciones ---------- */
.kick{display:inline-flex;align-items:center;gap:6px;background:#ffffff26;border:1px solid #ffffff4d;border-radius:99px;padding:6px 14px;font:700 13px var(--f-head);margin-bottom:16px;backdrop-filter:blur(6px)}
.lead{font-size:18px;line-height:1.5;opacity:.95;margin:0 0 22px;max-width:34em}
.hero2{position:relative;margin:-16px -16px 28px;padding:30px 20px 26px;color:#fff;border-radius:0 0 32px 32px;overflow:hidden;
  background:radial-gradient(60% 50% at 88% 8%,rgba(34,211,238,.55),transparent 62%),radial-gradient(50% 45% at 0% 100%,rgba(190,242,100,.35),transparent 62%),
  radial-gradient(45% 40% at 65% 105%,rgba(16,185,129,.55),transparent 62%),linear-gradient(155deg,#053B4A 0%,#0E7490 55%,#0D9488 100%)}
.hero2::before{content:"";position:absolute;inset:0;background:radial-gradient(#fff 1px,transparent 1.6px) 0 0/26px 26px;opacity:.07;pointer-events:none}
.hero-in{position:relative;display:grid;gap:26px;align-items:center}
@media(min-width:760px){.hero-in{grid-template-columns:1.1fr .9fr}.hero2{margin:0 0 32px;border-radius:32px;padding:46px 38px 30px}}
.hero2 h1{font:800 clamp(32px,8.5vw,50px)/1.05 var(--f-head);letter-spacing:-.025em;margin:0 0 14px}
.grad{background:linear-gradient(90deg,#A7F3D0,#FDE68A);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-vis{position:relative;height:410px;display:grid;place-items:center}
.phone{width:226px;border-radius:36px;background:#0A1A20;padding:8px;box-shadow:0 40px 70px rgba(0,0,0,.4),inset 0 0 0 2px #2D4A55;transform:rotate(5deg)}
.screen{background:#F2F9FA;border-radius:29px;height:372px;overflow:hidden;color:#0F2A33;font-family:var(--f-head)}
.sbar{background:linear-gradient(135deg,#0E7490,#0B5C73);color:#fff;padding:16px 14px 11px;font:800 14px var(--f-head);display:flex;justify-content:space-between;align-items:center}
.sbar i{width:8px;height:8px;border-radius:50%;background:#A7F3D0}
.sday{margin:10px;padding:10px;background:#fff;border-radius:14px;box-shadow:0 2px 8px rgba(15,42,51,.08);font-size:12px}.sday b{font-size:13px}.sday span{float:right;color:#46606A}
.sday .bar{clear:both;margin-top:10px}
.mrow{margin:0 10px 8px;background:#fff;border-radius:14px;padding:8px;display:flex;gap:9px;align-items:center;box-shadow:0 2px 8px rgba(15,42,51,.08)}
.mrow .mt{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;flex:none}.mrow .mt svg{height:42px;width:auto}
.mrow b{display:block;font-size:12px;line-height:1.2;max-width:116px}.mrow small{font-size:11px;color:#46606A}
.float{position:absolute;border-radius:16px;padding:10px 14px;font:700 14px var(--f-head);box-shadow:0 14px 30px rgba(0,0,0,.25);display:flex;align-items:center;gap:8px}
.glass{background:rgba(255,255,255,.9);color:#0F2A33;backdrop-filter:blur(8px)}
.f1{left:0;top:46px}.f2{right:-2px;top:210px}.f3{left:4px;bottom:4px;width:116px;height:116px;border-radius:50%;padding:0;background:transparent;box-shadow:none}
.f3 img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 14px 28px rgba(0,0,0,.35)}
.rbody .cat{display:block}.f3:empty{display:none}
.stats-row{position:relative;list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stats-row li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);border-radius:16px;padding:12px 6px;text-align:center;margin:0}
.stats-row b{display:block;font:800 26px var(--f-head)}.stats-row span{font-size:14px;opacity:.92}
@media(prefers-reduced-motion:no-preference){.f1{animation:fl 6s ease-in-out infinite}.f2{animation:fl 7s ease-in-out infinite reverse}@keyframes fl{50%{transform:translateY(-8px)}}}
.thumb{display:grid;place-items:center;overflow:hidden;position:relative}
.thumb{aspect-ratio:4/3}.mhero .thumb{aspect-ratio:16/10}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;background:var(--surface-2);transition:transform .35s ease}
.rcard:hover .thumb img{transform:scale(1.04)}
.rcard{padding:0;overflow:hidden}.rbody{padding:14px 16px 16px}
.rcard.locked .thumb img{filter:grayscale(.75) brightness(.9)}
.credit{font-size:13px;color:var(--mut);text-align:center;margin:18px 0 0}
.thumb .lk,.thumb .hrt{position:absolute;top:10px;right:10px;border-radius:99px;padding:6px 8px;display:flex}
.thumb .lk{background:rgba(15,42,51,.78);color:#fff}.thumb .hrt{background:#fff;color:#B91C1C}
.hscroll{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:4px 16px 14px;scroll-snap-type:x proximity;scrollbar-width:none}.hscroll::-webkit-scrollbar{display:none}
.hscroll .rcard{flex:0 0 240px;scroll-snap-align:start;margin:0}
@media(min-width:760px){.hscroll{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:4px 0 14px}.hscroll .rcard{flex:none}}
.rcard .tt{min-height:2.5em}
.panel-dark{border-radius:28px;padding:26px 18px;color:#fff;margin:34px 0;background:radial-gradient(60% 60% at 100% 0%,rgba(34,211,238,.35),transparent 60%),linear-gradient(160deg,#083645,#0B5C73 60%,#0D7A6E)}
.panel-dark h2{color:#fff;margin-top:0}.panel-dark .sub{color:#CFE8EE}
.panel-dark .mini div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#fff}
.price-card{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,#22D3EE,#10B981,#BEF264) border-box;box-shadow:0 18px 44px rgba(14,116,144,.22)}
.mhero{border-radius:var(--r2);margin-bottom:14px;overflow:hidden}
.tiles{grid-template-columns:repeat(2,1fr)}.tile{padding:12px}@media(min-width:760px){.tiles{grid-template-columns:repeat(4,1fr)}}
.thumb.ph{aspect-ratio:auto;height:64px}.mhero .thumb.ph{height:96px}

/* ---------- Avisos, celebración, ayuda, consentimiento, pie ---------- */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom));z-index:80;display:flex;flex-direction:column;gap:8px;width:min(92vw,420px);pointer-events:none}
.toast{pointer-events:auto;background:var(--ink);color:var(--bg);border-radius:14px;padding:12px 16px;display:flex;gap:10px;align-items:center;box-shadow:var(--sh2);font:600 15px/1.3 var(--f-head);animation:tin .25s ease;cursor:pointer}
.toast.out{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:79;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;animation:cf 1.9s ease-in forwards}
@keyframes cf{to{top:105%;margin-left:34px}}
.fab{position:fixed;right:14px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:40;width:50px;height:50px;border-radius:50%;border:0;background:var(--pri);color:var(--pri-ink);display:grid;place-items:center;box-shadow:var(--sh2);cursor:pointer}
body.landing .fab{bottom:calc(18px + env(safe-area-inset-bottom))}
.consent{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));max-width:640px;margin:auto;z-index:90;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--sh2);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.consent p{margin:0;flex:1 1 260px;font-size:15px}.consent-btns{display:flex;gap:8px}
body.landing .consent{bottom:16px}
.sitefoot{margin:34px 0 8px;text-align:center;color:var(--mut);font-size:14px}
.sitefoot nav{display:flex;gap:6px 18px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}.sitefoot a{color:var(--mut)}
mark{background:#FDE68A;color:#6B3A07;padding:0 4px;border-radius:4px}
.empty{text-align:center;padding:28px 18px}.empty .ibox{margin:0 auto 12px;width:56px;height:56px;border-radius:18px}.empty h3{margin:0 0 6px}.empty p{margin:0 0 14px;color:var(--mut)}

/* ---------- Onboarding ---------- */
.onb{max-width:560px;margin:0 auto}
.obar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin:6px 0 20px}
.obar i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),#10B981);border-radius:99px;transition:width .4s ease}
.onb h2{font-size:26px;margin:0 0 6px}.onb .why{color:var(--mut);margin:0 0 18px;font-size:16px}
.onb-top{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.opts{display:grid;gap:10px}
.opt{min-height:58px;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:14px 18px;font:700 17px var(--f-head);color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:border-color .15s,transform .1s,background .15s}
.opt:hover{border-color:var(--pri)}.opt:active{transform:scale(.98)}.opt.sel{background:var(--pri-soft);border-color:var(--pri)}
.linkbtn{background:none;border:0;color:var(--mut);font:600 15px var(--f-head);cursor:pointer;text-decoration:underline;padding:10px 6px;min-height:44px}
.build{text-align:center;padding:30px 6px}.build ul{list-style:none;padding:0;text-align:left;max-width:380px;margin:22px auto}
.build li{display:flex;gap:10px;align-items:center;opacity:0;animation:bin .5s forwards;margin:12px 0}
.build li:nth-child(1){animation-delay:.2s}.build li:nth-child(2){animation-delay:1.1s}.build li:nth-child(3){animation-delay:2s}
@keyframes bin{to{opacity:1}}
.spin{width:54px;height:54px;border-radius:50%;border:5px solid var(--pri-soft);border-top-color:var(--pri);margin:0 auto;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.build li{opacity:1}}
.plans{display:grid;gap:10px;margin:14px 0}
.planopt{display:flex;justify-content:space-between;align-items:center;gap:10px;border:2px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:var(--ink);width:100%;min-height:64px}
.planopt.sel{border-color:var(--pri);background:var(--pri-soft)}.planopt b{font:800 22px var(--f-head)}
.badge2{background:var(--acc);color:#fff;border-radius:99px;padding:2px 10px;font:700 12px var(--f-head)}
.chips-r{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}

/* ---------- Checklist, semana activa, tour ---------- */
.chk{border-color:var(--pri)}
.step{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.step .ck{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;color:#fff}
.step.ok .ck{background:var(--acc);border-color:var(--acc)}.step.ok .t{color:var(--mut);text-decoration:line-through}
.step .go{margin-left:auto}
.wk{display:flex;gap:6px;margin:10px 0 4px}
.wk span{flex:1;text-align:center;font:700 12px var(--f-head);color:var(--mut)}
.wk i{display:block;width:100%;aspect-ratio:1;max-width:36px;margin:0 auto 4px;border-radius:50%;background:var(--surface-2);border:2px solid var(--line)}
.wk .on i{background:var(--acc);border-color:var(--acc)}.wk .today i{border-color:var(--pri)}
.tour{position:fixed;inset:0;z-index:100}
.tour-dim{position:absolute;inset:0;background:rgba(6,20,26,.66)}
.tour-card{position:absolute;left:12px;right:12px;max-width:380px;margin:auto;bottom:calc(92px + env(safe-area-inset-bottom));background:var(--surface);color:var(--ink);border-radius:18px;padding:16px;box-shadow:var(--sh2)}
.tour-card::after{content:"";position:absolute;bottom:-9px;left:var(--ax,50%);width:18px;height:18px;background:var(--surface);transform:translateX(-50%) rotate(45deg)}
body.touring nav{z-index:101}
nav button.tour-hl{color:var(--pri)}nav button.tour-hl .ib{background:var(--pri-soft);box-shadow:0 0 0 3px var(--pri)}
.hint{display:flex;gap:12px;align-items:flex-start}.hint .ibox{flex:none}
.codein{letter-spacing:.45em;text-align:center;font:800 26px var(--f-head);width:100%}
.loginbox{max-width:460px;margin:0 auto}
.small-btn{min-height:40px}

/* ---------- Cuenta y acceso (entrar → elegir acceso) ---------- */
.steps3{display:flex;gap:6px;justify-content:center;margin:2px 0 16px;font:700 13px var(--f-head);color:var(--mut)}
.steps3 span{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:var(--surface-2)}
.steps3 span.on{background:var(--pri);color:var(--pri-ink)}
.authbox{max-width:440px;margin:0 auto}
.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:var(--r2);padding:12px 16px;font:600 16px var(--f-head);cursor:pointer;min-height:48px}
.gbtn:hover{background:#f8f9fa}
.sep{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:14px;margin:16px 0}
.sep:before,.sep:after{content:"";flex:1;height:1px;background:var(--line)}
.pw{position:relative}.pw .linkbtn{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:14px}
.acc{border:2px solid var(--line);border-radius:var(--r3);padding:18px;background:var(--surface);margin-bottom:12px}
.acc.main{border-color:var(--pri);box-shadow:var(--sh1)}
.acc .price{font:800 30px var(--f-head);margin:6px 0 2px}.acc .price small{font:600 15px var(--f-body);color:var(--mut)}

/* ---------- Flujo a pantalla completa: bienvenida → cuenta → onboarding → prueba gratis ---------- */
body.flow{background:linear-gradient(180deg,#DDF1F5 0%,#F3FAFB 38%,#FFFFFF 70%) fixed;padding-bottom:0}
body.flow header{display:none}
body.flow main{max-width:520px;padding:14px 20px 168px}
body.flow .fab{bottom:calc(112px + env(safe-area-inset-bottom))}
body.flow:not(.flow-pay) .fab{display:none}
.fl-top{display:flex;align-items:center;gap:14px;margin:4px 0 20px;min-height:44px}
.fl-back{width:44px;height:44px;border:0;background:none;color:var(--ink);display:grid;place-items:center;border-radius:50%;cursor:pointer;flex:none}
.fl-back:hover{background:#0e74901a}
.fl-prog{flex:1;height:7px;border-radius:99px;background:#0e749026;overflow:hidden}
.fl-prog i{display:block;height:100%;border-radius:99px;background:var(--pri);transition:width .4s ease}
.fl-prog.thick{height:12px}
.fl-h{font:800 30px/1.15 var(--f-head);letter-spacing:-.02em;margin:8px 0 10px}
.fl-h.center,.fl-sub.center{text-align:center}
.fl-sub{color:var(--mut);font-size:17px;margin:0 0 22px}
.fl-kick{text-align:center;font:800 12px var(--f-head);letter-spacing:.16em;color:var(--pri);margin:18px 0 4px}
.fl-logo{display:flex;align-items:center;justify-content:center;gap:10px;font:800 24px var(--f-head);color:var(--pri);margin:6px 0 18px}
.fl-logo .logo{width:38px;height:38px;border-radius:12px;background:var(--pri);color:#fff;display:grid;place-items:center}
.fl-alt{text-align:center;margin:12px 0 0;color:var(--mut);font-size:15px}
.fl-alt .linkbtn{color:var(--pri);text-decoration:none;font-size:15px;padding:4px}
.fl-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:14px 20px calc(14px + env(safe-area-inset-bottom))}
.fl-bar>div{max-width:480px;margin:auto}
.fl-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border:0;border-radius:99px;background:var(--pri);color:var(--pri-ink);font:700 18px var(--f-head);cursor:pointer;text-decoration:none;box-shadow:0 8px 20px #0e749040}
.fl-btn:disabled{background:#CBD5D9;color:#6B7F86;box-shadow:none;cursor:not-allowed}
.fl-bar .fl-alt{margin-top:8px}
.fl-opts{display:grid;gap:12px}
.fo{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:18px 18px;cursor:pointer;font:inherit;color:var(--ink);box-shadow:0 1px 2px rgba(15,42,51,.04);transition:border-color .15s,background .15s,transform .1s}
.fo:active{transform:scale(.99)}
.fo .ft{display:flex;flex-direction:column;gap:2px}.fo b{font:700 18px/1.25 var(--f-head)}.fo small{color:var(--mut);font-size:14px}
.fo .ico{flex:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:var(--mut);background:#fff}
.fo.sel{border:2px solid var(--pri);background:#F1FAFC}
.fo.sel .ico{background:var(--pri);border-color:var(--pri);color:#fff}
/* bienvenida */
.vis{margin:6px 0 4px;min-height:290px}
.dots{display:flex;gap:8px;justify-content:center;margin:20px 0 14px}.dots i{width:26px;height:5px;border-radius:99px;background:#0e749030}.dots i.on{background:var(--pri)}
.mini{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:none}.mini.ph{display:grid;place-items:center;color:#0F2A33}
.plate .pic{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2)}
.plate .pic img,.plate .pic>span:first-child{display:block;width:100%;height:100%;object-fit:cover}
.plate .pl{position:absolute;background:#fff;border-radius:99px;padding:7px 14px;font:700 14px var(--f-head);box-shadow:var(--sh1)}
.plate .p0{left:14px;top:16px}.plate .p1{right:14px;top:46%}.plate .p2{left:22px;bottom:52px}
.mac3{display:flex;gap:10px;margin-top:8px}.mac3 span{flex:1;text-align:center;display:flex;flex-direction:column}.mac3 b{font:800 20px var(--f-head)}.mac3 small{color:var(--mut);font-size:13px}
.shopl{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
/* auth */
.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:99px;padding:12px 16px;font:600 16px var(--f-head);cursor:pointer;min-height:54px}
/* configurando */
.bigpct{text-align:center;font:800 78px/1 var(--f-head);color:var(--pri);margin:6px 0 18px}
.bl{list-style:none;margin:0;padding:0}.bl li{display:flex;align-items:center;gap:12px;padding:9px 0;color:var(--mut);transition:color .3s}
.bl .d{width:12px;height:12px;border-radius:50%;background:#CBD5D9;flex:none;transition:background .3s}
.bl li.done{color:var(--ink)}.bl li.done .d{background:var(--acc)}
/* plan listo */
.chipg{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 16px;font:700 15px var(--f-head);color:var(--pri)}
.tiles2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mt2{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:14px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.mt2 .ico{width:44px;height:44px;border-radius:50%;background:#F3F7F8;display:grid;place-items:center}
.mt2 small{color:var(--mut);font-size:14px;margin-top:4px}.mt2 b{font:800 26px var(--f-head)}.mt2 em{font:600 14px var(--f-body);color:var(--mut);font-style:normal;margin-left:3px}
/* semana */
.dchips{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:0 0 14px}
.dchips button{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:10px 0;font:700 14px var(--f-head);color:var(--mut);cursor:pointer;text-transform:capitalize}
.dchips button.on{background:var(--pri);border-color:var(--pri);color:#fff}
/* coach y herramientas */
.bub{display:flex;gap:12px;align-items:flex-start;margin:0 0 18px}
.bub .av{flex:none;width:44px;height:44px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center}
.bub .bt{background:#fff;border:1px solid var(--line);border-radius:6px 20px 20px 20px;padding:14px 16px;font-size:17px;box-shadow:var(--sh1)}
.tool{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:10px;box-shadow:0 1px 2px rgba(15,42,51,.04)}
.tool .ico{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center}
.tool b{display:block;font:700 17px var(--f-head)}.tool small{color:var(--mut);font-size:14px;line-height:1.35}
/* planes */
.plans2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 8px}
.pl2{position:relative;text-align:center;background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:30px 10px 16px;cursor:pointer;font:inherit;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:2px}
.pl2 b{font:800 19px var(--f-head)}.pl2 small{color:var(--mut);font-size:13px;line-height:1.3}
.pl2 .pr{font:800 24px var(--f-head);margin-top:8px}.pl2 .pr em{font:600 14px var(--f-body);color:var(--mut);font-style:normal}
.pl2 .rd{width:24px;height:24px;border-radius:50%;border:2px solid #CBD5D9;margin-bottom:6px}
.pl2.sel{border:2px solid var(--pri);background:#F1FAFC;box-shadow:0 6px 18px #0e74902b}
.pl2.sel .rd{border:7px solid var(--pri)}
.pl2 .bdg{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--pri);color:#fff;font:800 11px var(--f-head);letter-spacing:.06em;padding:5px 12px;border-radius:99px;white-space:nowrap}

.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;margin:0 0 12px;text-align:left}.agree input{margin-top:3px;flex:none;width:20px;height:20px}
.lgt{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0}.lgt th,.lgt td{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}.lgt th{background:var(--surface-2)}