@font-face{font-family:Anton;src:url(/fonts/anton.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(/fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url(/fonts/barlow-700.woff2) format("woff2");font-weight:700;font-display:swap}
/* Una sola columna de móvil: una pantalla = una acción, botón principal abajo */
:root{
  --bg:#0E0E0C; --surface:#181815; --line:#2E2C28; --fg:#F2EEE6; --muted:#A8A39A; --soft:#CFCAC0;
  --accent:#FF9F1C; --on-accent:#0E0E0C; --amber:#FFB020; --green:#C6F24E; --red:#FF8A6E; --red-bg:#2A1612; --red-line:#5C2A1E; --blue:#5AC8FA;
  --display:Anton, Impact, "Arial Narrow", sans-serif;
  --body:Barlow, "Helvetica Neue", Arial, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.app{max-width:440px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px));padding-block:max(20px, env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-bottom, 0px))}
.screen{display:flex;flex-direction:column;gap:18px;min-height:calc(100svh - 48px)}
.top{display:flex;justify-content:space-between;align-items:center;min-height:44px;gap:8px}
.brand{font-family:var(--display);font-size:22px;letter-spacing:2px}
.brand b{color:var(--accent);font-weight:400}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;margin:0;line-height:.94;text-wrap:balance;letter-spacing:.3px}
h1{font-size:clamp(48px,15vw,66px)}
h2{font-size:clamp(36px,11vw,46px)}
.hl{color:var(--accent)}
p{margin:0}
.lead{font-size:17px;color:var(--soft)}
.grow{flex:1}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;border-radius:30px;border:0;background:var(--accent);color:var(--on-accent);font:700 17px var(--body);cursor:pointer;width:100%;padding:0 20px;text-align:center;text-decoration:none}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.link{background:none;border:0;color:var(--soft);font:600 15px var(--body);min-height:44px;cursor:pointer;padding:0 6px}
.icon-btn{width:44px;height:44px;border-radius:22px;border:1px solid var(--line);background:var(--surface);color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:22px;flex-shrink:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.bar{display:flex;gap:6px}.bar i{flex:1;height:4px;border-radius:2px;background:var(--line)}.bar i.on{background:var(--accent)}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;min-height:60px;padding:0 20px;border-radius:20px;background:var(--surface);border:1px solid var(--line);color:var(--fg);font:600 17px var(--body);cursor:pointer;text-align:left;width:100%}
.opt:active{border-color:var(--accent)}
.note{font-size:12.5px;color:var(--muted);text-align:center}
.note a,.legal a{color:var(--soft)}
.hero-scan{height:230px;border-radius:28px;background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-scan .line{position:absolute;left:10%;right:10%;height:2px;background:var(--accent);top:30%;animation:scan 2.6s ease-in-out infinite alternate}
@keyframes scan{to{top:72%}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.hero-scan .line,.spin,.step.now .ring{animation:none!important}}
.check{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);cursor:pointer;font-size:15px}
.check input{width:24px;height:24px;flex-shrink:0;accent-color:var(--accent);margin:1px 0 0}
.check small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.slot{position:relative;aspect-ratio:3/4;max-width:100%;border-radius:18px;background:var(--surface);border:2px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;overflow:hidden;text-align:center;padding:6px}
.slot.done{border:2px solid var(--green)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot .lbl{position:relative;font-size:13px;font-weight:700;background:rgba(14,14,12,.75);padding:3px 8px;border-radius:8px}
.slot input{position:absolute;width:1px;height:1px;opacity:0}
.slot svg{position:relative}
.tip{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;border:1px dashed var(--line);font-size:14px}
.tip b{display:block}.tip small{color:var(--muted);font-size:13px}
.steps{display:flex;flex-direction:column;gap:14px;align-self:stretch;text-align:left}
.step{display:flex;gap:12px;align-items:center;font-size:16px;color:var(--muted)}
.step .dot{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.step .ring{width:14px;height:14px;border-radius:7px;border:2px solid var(--muted)}
.step.now{color:var(--fg);font-weight:700}
.step.now .ring{border:3px solid var(--accent);border-right-color:transparent;animation:spin 1s linear infinite}
.step.ok{color:var(--soft)}
.answer{font-family:var(--display);font-size:clamp(60px,20vw,84px);line-height:.9;text-transform:uppercase}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:14px}
.chip .n{font-family:var(--display);font-size:20px}
.chip.sem{font-weight:700;letter-spacing:.5px;font-size:13px;border:0}
.chip.sem i{width:8px;height:8px;border-radius:4px;display:block}
.card{border-radius:22px;background:var(--surface);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px}
.card .k{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.zone{display:flex;flex-direction:column;gap:4px}
.zone .row{display:flex;justify-content:space-between;font-size:14px}
.zone .track{height:8px;border-radius:4px;background:var(--line)}
.zone .fill{height:8px;border-radius:4px}
.tips{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.tips li{display:flex;gap:10px;font-size:15px}
.tips li::before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:4px;background:var(--accent);margin-top:8px}
.say{background:var(--bg);border-radius:12px;padding:10px 12px;font-size:14.5px}
.derm{background:var(--red-bg);border-color:var(--red-line)}
.derm .k{color:var(--red)}
.err{color:var(--red);font-size:14px;text-align:center}
.legal{display:flex;justify-content:center;gap:16px;font-size:12.5px}

/* --- zona Pro --- */
.lock{position:relative;border-radius:22px;background:var(--surface);border:1px solid var(--line);overflow:hidden;min-height:220px;display:flex;align-items:center;justify-content:center}
.lock .blur{filter:blur(9px);opacity:.8;display:flex;flex-direction:column;gap:12px;padding:20px;width:100%}
.lock .blur i{display:block;height:12px;border-radius:6px;background:#3A3833}
.lock .over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center}
.lock .candado{width:52px;height:52px;border-radius:26px;background:var(--bg);border:1px solid #3A3833;display:flex;align-items:center;justify-content:center}
.plans{display:flex;flex-direction:column;gap:10px}
.plan{position:relative;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-radius:20px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;text-align:left;cursor:pointer;width:100%}
.plan[aria-pressed="true"]{border:2px solid var(--accent);background:#2A2215}
.plan .precio{font-family:var(--display);font-size:26px}
.plan .badge{position:absolute;top:-11px;left:16px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;background:var(--accent);color:var(--on-accent)}
.benefits{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.benefits li{display:flex;gap:12px;align-items:center;font-size:15px}
.benefits li::before{content:"";width:22px;height:22px;flex-shrink:0;border-radius:11px;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E0C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--soft)}
.field input{height:54px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:16px var(--body);padding:0 16px}
.tasks{display:flex;flex-direction:column;gap:10px}
.task{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:20px;background:var(--surface);border:1px solid var(--line);color:var(--fg);font:inherit;text-align:left;cursor:pointer;width:100%;text-decoration:none}
.task .dotc{width:30px;height:30px;border-radius:15px;border:2px solid #3A3833;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.task.done .dotc{background:var(--green);border-color:var(--green)}
.task.done b{color:var(--muted);text-decoration:line-through}
.task.next{border:2px solid var(--accent);background:#2A2215}
.task small{display:block;color:var(--muted);font-size:13px}
.tabbar{position:sticky;bottom:0;display:flex;justify-content:space-around;border-top:1px solid var(--line);background:var(--bg);margin:0 calc(-1 * max(20px, env(safe-area-inset-left, 0px)));padding:8px 0 max(14px, env(safe-area-inset-bottom, 0px))}
.tabbar button{background:none;border:0;color:var(--muted);font:600 11px var(--body);display:flex;flex-direction:column;align-items:center;gap:3px;min-width:64px;min-height:44px;cursor:pointer}
.tabbar button[aria-current="page"]{color:var(--accent)}
.big{font-family:var(--display);font-size:clamp(90px,30vw,120px);line-height:1}
.racha{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:14px;background:#2A2215;color:var(--accent);font-size:13px;font-weight:700}
.chart{width:100%;height:auto}
.hist{display:flex;flex-direction:column;gap:8px}
.hist div{display:flex;justify-content:space-between;font-size:14px;padding:10px 12px;border-radius:12px;background:var(--surface)}
.danger{background:none;border:1px solid var(--red-line);color:var(--red);border-radius:30px;min-height:52px;font:600 15px var(--body);cursor:pointer;width:100%}
.ok-msg{color:var(--green);font-size:14px;text-align:center}
/* aviso «añádela a tu pantalla de inicio» */
.inst{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px, env(safe-area-inset-bottom, 0px));width:min(440px, calc(100% - 32px));z-index:40;background:var(--surface);border:1px solid var(--accent);border-radius:20px;padding:16px 16px 14px;box-shadow:0 12px 40px rgba(0,0,0,.6);display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center}
.inst[hidden]{display:none}
.inst img{width:48px;height:48px;border-radius:12px}
.inst b{display:block;font:700 15px var(--body);color:var(--fg)}
.inst p{margin:2px 0 0;font-size:13px;color:var(--soft);line-height:1.35}
.inst .x{background:none;border:0;color:var(--muted);font-size:22px;min-width:44px;min-height:44px;cursor:pointer;align-self:start}
.inst .btn{grid-column:1 / -1;min-height:48px;font-size:15px}
.tabbar:not([hidden]) ~ .inst, body.contab .inst{bottom:calc(86px + env(safe-area-inset-bottom, 0px))}