/* Self-hosted fonts (SIL OFL 1.1: Archivo, Inter, JetBrains Mono; latin subset). No requests to Google. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-latin-wdth.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jetbrains-mono-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Layout: landing de una columna con el teléfono como prueba en el hero; Términos, Privacidad y Eliminar cuenta como documentos de lectura (65ch).
   Tokens: brand/tokens.json · dirección G (d.color.semantic + d.glass), dark-first. */
:root{
  --bg:#0B0C0F; --surface:#15171C; --surface2:#1F2229; --line:#2A2E37;
  --text:#F4F6F8; --muted:#9097A3; --muted-strong:#D4D8DD;
  --accent:#7352F2; --accent-2:#5B3FE0; --on-accent:#FFFFFF; --accent-text:#A58BFF;
  --secondary:#F4C6FF; --on-secondary:#2A0F33; --tertiary:#BFEFFF;
  --success:#52E08A; --warning:#FFC247; --danger:#FF7A90;
  --glass-top:rgba(255,255,255,.13); --glass-bottom:rgba(255,255,255,.04); --glass-border:rgba(255,255,255,.16); --glass-hi:rgba(255,255,255,.38); --glass-shadow:0 12px 30px -14px rgba(0,0,0,.7);
  --blob-violet:rgba(115,82,242,.58); --blob-magenta:rgba(200,80,240,.24); --blob-cyan:rgba(44,200,245,.24);
  --hero-top:rgba(115,82,242,.78); --hero-bottom:rgba(91,63,224,.64); --hero-border:rgba(255,255,255,.3);
  --tint-pink:rgba(255,92,138,.30); --tint-cyan:rgba(44,200,245,.24);
  --header-bg:rgba(11,12,15,.72);
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-label:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-card:24px; --r-button:18px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#F3F4EF; --surface:#FFFFFF; --surface2:#ECEDE7; --line:#E1E3DC;
  --text:#101214; --muted:#5E6470; --muted-strong:#3A3F48;
  --accent:#6A48F0; --accent-2:#5B3FE0; --on-accent:#FFFFFF; --accent-text:#5B3FE0;
  --secondary:#F6D9FF; --on-secondary:#2A0F33; --tertiary:#CDEFFB;
  --success:#1C7A43; --warning:#986300; --danger:#C42847;
  --glass-top:rgba(255,255,255,.75); --glass-bottom:rgba(255,255,255,.40); --glass-border:rgba(255,255,255,.9); --glass-hi:rgba(255,255,255,1); --glass-shadow:0 12px 30px -14px rgba(16,18,20,.22);
  --blob-violet:rgba(115,82,242,.28); --blob-magenta:rgba(200,80,240,.22); --blob-cyan:rgba(44,200,245,.26);
  --hero-top:rgba(106,72,240,.96); --hero-bottom:rgba(91,63,224,.92); --hero-border:rgba(255,255,255,.4);
  --tint-pink:rgba(255,92,138,.28); --tint-cyan:rgba(44,200,245,.30);
  --header-bg:rgba(243,244,239,.78);
  color-scheme:light}}
:root[data-theme="light"]{
  --bg:#F3F4EF; --surface:#FFFFFF; --surface2:#ECEDE7; --line:#E1E3DC;
  --text:#101214; --muted:#5E6470; --muted-strong:#3A3F48;
  --accent:#6A48F0; --accent-2:#5B3FE0; --on-accent:#FFFFFF; --accent-text:#5B3FE0;
  --secondary:#F6D9FF; --on-secondary:#2A0F33; --tertiary:#CDEFFB;
  --success:#1C7A43; --warning:#986300; --danger:#C42847;
  --glass-top:rgba(255,255,255,.75); --glass-bottom:rgba(255,255,255,.40); --glass-border:rgba(255,255,255,.9); --glass-hi:rgba(255,255,255,1); --glass-shadow:0 12px 30px -14px rgba(16,18,20,.22);
  --blob-violet:rgba(115,82,242,.28); --blob-magenta:rgba(200,80,240,.22); --blob-cyan:rgba(44,200,245,.26);
  --hero-top:rgba(106,72,240,.96); --hero-bottom:rgba(91,63,224,.92); --hero-border:rgba(255,255,255,.4);
  --tint-pink:rgba(255,92,138,.28); --tint-cyan:rgba(44,200,245,.30);
  --header-bg:rgba(243,244,239,.78);
  color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 40% at 8% 0%,var(--blob-violet),transparent 70%),radial-gradient(45% 35% at 100% 38%,var(--blob-magenta),transparent 70%),radial-gradient(55% 35% at 10% 100%,var(--blob-cyan),transparent 70%)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--header-bg)}
a{color:var(--accent-text);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;line-height:1.04}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.label{font:600 11px/1.3 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.label.ac{color:var(--accent-text)}
.glass{background:linear-gradient(145deg,var(--glass-top),var(--glass-bottom));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi),var(--glass-shadow);border-radius:var(--r-card)}
@media (prefers-reduced-transparency:reduce){.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--header-bg);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;padding-block:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font:800 16px/1 var(--f-display);font-variation-settings:"wdth" 112}
.mono{width:34px;height:34px;border-radius:10px;background:linear-gradient(180deg,#8A6BFF,var(--accent));color:#fff;display:grid;place-items:center;font:900 19px/1 var(--f-display);font-variation-settings:"wdth" 120;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{color:var(--muted-strong);text-decoration:none;font:600 14px/1 var(--f-body);padding:10px 12px;border-radius:999px}
.nav a:hover{color:var(--text);background:var(--surface2)}
.theme{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer}
.theme svg{width:18px;height:18px}
@media (max-width:640px){.nav a.hide-sm{display:none}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding-block:56px 40px}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-block:36px 24px}}
.hero h1{font-size:clamp(44px,7.4vw,92px);font-weight:900;font-variation-settings:"wdth" 118;letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:var(--accent-text)}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--muted-strong);max-width:34em;margin-top:22px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 22px;border-radius:var(--r-button);font:700 15px/1 var(--f-body);text-decoration:none;border:0;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,#8A6BFF,var(--accent));color:var(--on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 24px -10px rgba(115,82,242,.8)}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.btn svg{width:18px;height:18px}
.stores{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.store{font:600 12.5px/1 var(--f-body);color:var(--muted-strong);border:1px solid var(--line);border-radius:999px;padding:9px 13px;background:var(--surface)}

/* phone */
.phone-wrap{display:flex;justify-content:center}
.phone{width:min(340px,100%);border-radius:48px;border:9px solid #050507;background:var(--bg);position:relative;overflow:hidden;box-shadow:0 0 0 1px #2B2E35,0 40px 80px -40px rgba(0,0,0,.7);padding:18px 16px 92px;display:grid;gap:12px;isolation:isolate}
.phone::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(75% 32% at 12% 6%,var(--blob-violet),transparent 70%),radial-gradient(60% 30% at 95% 40%,var(--blob-magenta),transparent 70%),radial-gradient(70% 30% at 15% 88%,var(--blob-cyan),transparent 70%)}
.island{width:96px;height:28px;border-radius:20px;background:#000;justify-self:center;margin-bottom:4px}
.p-title{font:800 25px/1.02 var(--f-display);font-variation-settings:"wdth" 116}
.week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:2px}
.week div{display:grid;gap:4px;justify-items:center;padding:6px 0;border-radius:999px}
.week b{font:800 14px/1 var(--f-display);font-variation-settings:"wdth" 112}
.week i{width:5px;height:5px;border-radius:50%;box-shadow:inset 0 0 0 1.4px color-mix(in srgb,var(--text) 45%,transparent)}
.week .on{background:linear-gradient(180deg,#8A6BFF,var(--accent));color:#fff}
.week .on .label{color:#fff}
.week .on i{background:#fff;box-shadow:none}
.p-hero{position:relative;overflow:hidden;border-radius:var(--r-card);padding:15px;display:grid;gap:9px;color:#fff;background:linear-gradient(145deg,var(--hero-top),var(--hero-bottom));border:1px solid var(--hero-border);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 40px -18px rgba(79,53,210,.9)}
.p-hero::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.09) 0 14px,transparent 14px 28px);pointer-events:none}
.p-hero .label{color:rgba(255,255,255,.85)}
.p-hero h3{font-size:28px;font-weight:800;font-variation-settings:"wdth" 116}
.p-hero .sub{font-size:12px;color:rgba(255,255,255,.9)}
.p-hero .go{height:46px;border-radius:16px;background:#fff;color:#4B31C9;display:flex;align-items:center;justify-content:center;gap:8px;font:750 15px/1 var(--f-body);position:relative;z-index:1}
.p-hero .go svg{width:16px;height:16px}
.p-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{border-radius:20px;padding:12px;display:grid;gap:4px;border:1px solid var(--glass-border);box-shadow:inset 0 1px 0 var(--glass-hi)}
.tile.p{background:linear-gradient(145deg,var(--tint-pink),rgba(255,92,138,.08))}
.tile.q{background:linear-gradient(145deg,var(--tint-cyan),rgba(44,200,245,.06))}
.tile .label{color:var(--text)}
.num{font:800 30px/.95 var(--f-display);font-variation-settings:"wdth" 112;letter-spacing:-.02em}
.num small{font:600 11px/1 var(--f-body);margin-left:3px}
.tile .sm{font-size:11.5px}
.ready{padding:12px;display:grid;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font:650 11px/1 var(--f-body)}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.ok{color:var(--success);background:color-mix(in srgb,var(--success) 15%,transparent)}
.chip.warn{color:var(--warning);background:color-mix(in srgb,var(--warning) 15%,transparent)}
.tabbar{position:absolute;left:12px;right:12px;bottom:16px;height:62px;border-radius:999px;display:flex;justify-content:space-between;align-items:center;padding:0 7px}
.tabbar span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.tabbar span.on{background:var(--secondary);color:var(--on-secondary)}
.tabbar span.go{background:linear-gradient(180deg,#8A6BFF,var(--accent));color:#fff}
.tabbar svg{width:18px;height:18px}

/* sections */
section.block{padding-block:56px}
.sec-head{display:grid;gap:12px;max-width:44em;margin-bottom:28px}
.sec-head h2{font-size:clamp(30px,4.2vw,48px);font-weight:850;font-variation-settings:"wdth" 114;letter-spacing:-.015em}
.sec-head p{color:var(--muted-strong)}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.features{grid-template-columns:1fr}}
.feat{padding:22px;display:grid;gap:10px;align-content:start;min-width:0}
.feat h3{font-size:20px;font-weight:800;font-variation-settings:"wdth" 110}
.feat p{color:var(--muted-strong);font-size:15px}
.feat .fact{font:600 12px/1.4 var(--f-label);color:var(--accent-text);letter-spacing:.02em}
.ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--secondary) 18%,transparent);color:var(--accent-text)}
.ico svg{width:20px;height:20px}

.simple{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
@media (max-width:820px){.simple{grid-template-columns:1fr}}
.setcard{padding:26px;display:grid;justify-items:center;text-align:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.setcard .big{font:900 96px/.9 var(--f-display);font-variation-settings:"wdth" 112;letter-spacing:-.03em}
.setcard .big small{font:600 22px/1 var(--f-body);color:var(--muted);margin-left:6px;letter-spacing:0}
.setcard .reps{font:800 40px/1 var(--f-display);font-variation-settings:"wdth" 112}
.setcard .reps small{font:600 15px/1 var(--f-body);color:var(--muted)}
.unit{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--text) 6%,transparent);font:700 11px/1 var(--f-label);letter-spacing:.08em}
.unit svg{width:13px;height:13px;color:var(--accent-text)}
.hecho{width:100%;height:68px;border-radius:24px;background:linear-gradient(180deg,#8A6BFF,var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font:750 20px/1 var(--f-body);margin-top:6px}
.hecho svg{width:20px;height:20px}
.steps{display:grid;gap:10px;align-content:center}
.step{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 18px;align-items:start}
.step b{font:800 13px/1 var(--f-label);color:var(--accent-text);padding-top:4px}
.step h3{font-size:18px;font-weight:800;font-variation-settings:"wdth" 108;margin-bottom:4px}
.step p{color:var(--muted-strong);font-size:15px}

.pricing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.pricing{grid-template-columns:1fr}}
.plan{padding:26px;display:grid;gap:14px;align-content:start}
.plan.pro{border-color:color-mix(in srgb,var(--accent-text) 50%,transparent)}
.plan h3{font-size:24px;font-weight:850;font-variation-settings:"wdth" 112}
.price{font:900 52px/1 var(--f-display);font-variation-settings:"wdth" 112;letter-spacing:-.02em}
.price small{font:600 15px/1 var(--f-body);color:var(--muted);letter-spacing:0;margin-left:4px}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.plan li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:15px;color:var(--muted-strong)}
.plan li svg{width:18px;height:18px;color:var(--success);margin-top:3px}
.promo{border-radius:16px;padding:14px 16px;background:color-mix(in srgb,var(--secondary) 16%,transparent);color:var(--text);font-size:14.5px;display:grid;gap:4px}
.promo b{font-family:var(--f-display);font-variation-settings:"wdth" 110;font-size:16px}
.fine{color:var(--muted);font-size:13px}

/* legal */
.legal{padding-block:56px;border-top:1px solid var(--line)}
.legal-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:900px){.legal-grid{grid-template-columns:1fr;gap:20px}}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 88px);padding:18px;display:grid;gap:4px}
@media (max-width:900px){.toc{position:static;top:auto}}
.toc a{color:var(--muted-strong);text-decoration:none;font-size:14px;padding:6px 8px;border-radius:8px;display:grid;grid-template-columns:28px 1fr}
.toc a span{font:600 12px/1.6 var(--f-label);color:var(--muted)}
.toc a{transition:background-color .15s var(--ease-out),color .15s var(--ease-out)}
@media (hover:hover){.toc a:hover{background:var(--surface2);color:var(--text)}}
.doc{max-width:68ch;min-width:0}
.doc h2{font-size:clamp(34px,4.6vw,52px);font-weight:900;font-variation-settings:"wdth" 116;letter-spacing:-.02em}
.doc .meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;color:var(--muted);font:600 12px/1.4 var(--f-label);letter-spacing:.04em}
.draft{margin-top:20px;border:1px dashed color-mix(in srgb,var(--warning) 60%,transparent);color:var(--text);background:color-mix(in srgb,var(--warning) 9%,transparent);border-radius:14px;padding:12px 14px;font-size:14px}
.draft b{color:var(--warning)}
.summary{margin-top:24px;padding:20px 22px;display:grid;gap:10px}
.summary ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--muted-strong);font-size:15px}
.doc section{padding-top:30px;display:grid;gap:12px}
.doc h3{font-size:21px;font-weight:800;font-variation-settings:"wdth" 108;display:flex;gap:12px;align-items:baseline}
.doc h3 span{font:600 13px/1 var(--f-label);color:var(--accent-text)}
.doc p,.doc li{color:var(--muted-strong);font-size:16px}
.doc ul{margin:0;padding-left:20px;display:grid;gap:7px}
.doc strong{color:var(--text);font-weight:600}
.contact{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.contact code{font:600 14px/1 var(--f-label);background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;user-select:all}
.copy{height:38px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:600 13px/1 var(--f-body);cursor:pointer}

footer{border-top:1px solid var(--line);padding-block:28px 40px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
footer nav{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap}
footer a{color:var(--muted-strong);text-decoration:none}

/* ===== motion: una entrada orquestada en el hero, revelado ligado al scroll y respuesta al puntero ===== */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);--ease-spring:cubic-bezier(.23,1,.32,1)}
@keyframes rise{from{opacity:.001;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes phoneIn{from{opacity:.001;transform:translateY(40px) rotate(-3deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,1.5%,0) scale(1.06)}100%{transform:translate3d(1.5%,-1%,0) scale(1.02)}}
@keyframes rings{to{transform:rotate(360deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@keyframes reveal{from{opacity:.25;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}}
@keyframes press{0%,62%,100%{transform:scale(1)}66%{transform:scale(.96)}72%{transform:scale(1.02)}}
@keyframes tickOut{0%,64%{transform:none;opacity:1}70%,100%{transform:translateY(-60%);opacity:0}}
@keyframes tickIn{0%,64%{transform:translateY(60%);opacity:0}72%,94%{transform:none;opacity:1}100%{transform:none;opacity:1}}
@keyframes toastIn{0%,68%{opacity:0;transform:translateY(6px)}74%,92%{opacity:1;transform:none}100%{opacity:0}}
.anim .hero .label,.anim .hero .lede,.anim .hero .cta-row,.anim .hero .stores{animation:rise .7s var(--ease-out) both}
.anim .hero .lede{animation-delay:.18s}.anim .hero .cta-row{animation-delay:.28s}.anim .hero .stores{animation-delay:.36s}
.anim .phone{animation:phoneIn 1s var(--ease-out) .2s both}
.anim .phone>*:not(.island){animation:rise .6s var(--ease-out) both}
.anim .phone>*:nth-child(2){animation-delay:.45s}.anim .phone>*:nth-child(3){animation-delay:.52s}.anim .phone>*:nth-child(4){animation-delay:.6s}.anim .phone>*:nth-child(5){animation-delay:.7s}.anim .phone>*:nth-child(6){animation-delay:.78s}.anim .phone .tabbar{animation-delay:.86s}
body::after{animation:drift 26s ease-in-out infinite alternate;transform-origin:30% 30%}
.p-hero::after{animation:rings 60s linear infinite}
.tabbar span.go{animation:ping 2.4s var(--ease-out) 1.6s infinite}
.tilt{perspective:1100px}
.tilt .phone{transition:transform .5s var(--ease-out);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
/* tarjetas: brillo que sigue al puntero + elevación */
.glass.feat,.glass.plan,.glass.step{position:relative;overflow:hidden;transition:transform .35s var(--ease-out),border-color .35s,box-shadow .35s}
.glass.feat::before,.glass.plan::before,.glass.step::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent-text) 18%,transparent),transparent 60%)}
@media (hover:hover){.glass.feat:hover,.glass.plan:hover,.glass.step:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent-text) 45%,var(--glass-border))}
.glass.feat:hover::before,.glass.plan:hover::before,.glass.step:hover::before{opacity:1}}
.feat .ico{transition:transform .45s var(--ease-spring)}
@media (hover:hover){.feat:hover .ico{transform:rotate(-6deg) scale(1.05)}}
.btn{transition:transform .16s var(--ease-out),box-shadow .2s var(--ease-out)}
@media (hover:hover){.btn:hover{transform:translateY(-1px)}}.btn:active{transform:scale(.97)}
@media (hover:hover){.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 32px -12px rgba(115,82,242,.95)}}
/* demo en vivo del Modo simple: Hecho → el peso sube */
.ticker{position:relative;display:inline-grid;overflow:hidden;height:.92em;line-height:.92}
.ticker>span{grid-area:1/1}
.ticker .old{animation:tickOut 5s var(--ease-out) 1.2s infinite}
.ticker .new{animation:tickIn 5s var(--ease-out) 1.2s infinite;color:var(--accent-text)}
.hecho{animation:press 5s var(--ease-out) 1.2s infinite}
.bump-note{justify-self:center;font:600 12.5px/1 var(--f-body);color:var(--success);background:color-mix(in srgb,var(--success) 14%,transparent);padding:7px 11px;border-radius:999px;animation:toastIn 5s var(--ease-out) 1.2s infinite}
/* encabezado al hacer scroll */
.top{transition:box-shadow .3s,border-color .3s}
.top.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
@media (prefers-reduced-motion:reduce){.anim *,.anim *::before,.anim *::after,body::after{animation:none!important}.tilt .phone{transform:none!important}.ticker .old{display:none}.ticker .new{color:inherit}.bump-note{opacity:1}}
/* ===== v1.1 motion ===== */
/* titular palabra por palabra */
.hero h1 .w{display:inline-block;white-space:pre}
.anim .hero h1 .w{animation:wordIn .8s var(--ease-out) both;animation-delay:calc(.06s + var(--i)*55ms)}
@keyframes wordIn{from{opacity:.001;transform:translateY(.32em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
/* revelado: visible por defecto; solo se oculta lo que JS marca fuera de pantalla al cargar */
.pre{opacity:0;transform:translateY(22px);filter:blur(4px)}
.in{opacity:1;transform:none;filter:none;transition:opacity .7s var(--ease-out),transform .8s var(--ease-out),filter .7s var(--ease-out);transition-delay:var(--d,0ms)}
/* listas de planes: las palomitas entran en cascada */
.plan.pre li{opacity:0;transform:translateX(-6px)}
.plan.in li{opacity:1;transform:none;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);transition-delay:calc(var(--d,0ms) + 260ms + var(--li)*60ms)}
/* Pro: un solo destello al aparecer */
.plan.pro::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,#fff 16%,transparent) 50%,transparent 65%);transform:translateX(-120%)}
.plan.pro.in::after{animation:sheen 1.1s var(--ease-io) .55s both}
.plan.pro.in.noshine::after{animation:none}
@keyframes sheen{to{transform:translateX(120%)}}
/* progreso de lectura */
.read-bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;z-index:60;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent),var(--secondary,#F4C6FF));pointer-events:none}
/* índice legal con sección activa */
.toc a.on{color:var(--text);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.toc a.on span{color:var(--accent-text)}
.toc a{position:relative}
.toc a::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--accent-text);transform:scaleY(0);transition:transform .25s var(--ease-out)}
.toc a.on::before{transform:scaleY(1)}
/* números que cuentan */
.num,.price{font-variant-numeric:tabular-nums}
.in.done{transition:transform .35s var(--ease-out),border-color .35s,box-shadow .35s,opacity .2s;transition-delay:0ms}
@media (prefers-reduced-motion:reduce){.pre{opacity:1!important;transform:none!important;filter:none!important}.plan.pre li{opacity:1;transform:none}.plan.pro::after{display:none}.read-bar{display:none}.hero h1 .w{animation:none!important}}
@media print{.pre{opacity:1!important;transform:none!important;filter:none!important}.read-bar{display:none}}

/* ===== v2: contenido completo, nav móvil, tablas, placeholders ===== */
.brand .bt{white-space:nowrap}
@media (max-width:480px){.brand .bt{display:none}.nav a{padding:10px 9px}}
.ph{background:color-mix(in srgb,var(--warning) 24%,transparent);padding:0 5px;border-radius:5px}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.tbl table{border-collapse:collapse;width:100%;min-width:620px;font-size:14.5px}
.tbl th{font:600 11px/1.3 var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted-strong);font-size:14.5px}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--text);font-weight:600}
.legal.solo{border-top:0;padding-top:40px}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
@media (max-width:760px){.paths{grid-template-columns:1fr}}
.path{padding:22px;display:grid;gap:10px;align-content:start;min-width:0}
.path h4{margin:0;font:800 18px/1.15 var(--f-display);font-variation-settings:"wdth" 110}
.path p,.path li{font-size:15px}
.ol{margin:0;padding-left:20px;display:grid;gap:8px}
.keep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.keep{grid-template-columns:1fr}}
.keep>div{padding:20px;display:grid;gap:8px;align-content:start;min-width:0}
.keep h4{margin:0;font:700 12px/1.3 var(--f-label);letter-spacing:.08em;text-transform:uppercase}
.keep .yes h4{color:var(--success)} .keep .no h4{color:var(--warning)}
.keep ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px;color:var(--muted-strong)}
.todo{margin:16px 0 0;border:1px dashed color-mix(in srgb,var(--warning) 60%,transparent);background:color-mix(in srgb,var(--warning) 8%,transparent);border-radius:16px;padding:14px 18px}
.todo summary{cursor:pointer;font:700 15px/1.4 var(--f-body);color:var(--text)}
.todo ol{margin:12px 0 4px;padding-left:20px;display:grid;gap:8px;color:var(--muted-strong);font-size:14.5px}
.todo code,.doc code.inl{font:600 12.5px/1.4 var(--f-label);background:var(--surface2);padding:1px 6px;border-radius:6px}
.sublede{color:var(--muted-strong);max-width:62ch}

.legal-grid.one{grid-template-columns:minmax(0,1fr)}


/* ===== v2: menos movimiento, fotos reales, calculadora de discos, multipágina ===== */
:root.sub{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
/* recorte de animaciones: se quedan la entrada del hero, la demo de Modo simple, los contadores y la calculadora */
body::after{animation:none!important}
.p-hero::after{animation:none!important}
.tabbar span.go{animation:none!important}
.tilt .phone{transform:none!important}
.glass.feat::before,.glass.plan::before,.glass.step::before{display:none}
.plan.pro::after{display:none}
.nav a[aria-current="page"]{color:var(--text);background:var(--surface2)}
.top-cta{height:42px;padding:0 16px;font-size:14px;margin-left:6px}
@media (max-width:760px){.top-cta{display:none}}

/* banda de foto */
.band{position:relative;overflow:hidden;border-radius:var(--r-card);min-height:clamp(320px,52vw,520px);display:grid;align-items:end;isolation:isolate;color:#fff;background:#0B0C0F}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,12,15,0) 30%,rgba(11,12,15,.86) 100%),linear-gradient(90deg,rgba(11,12,15,.55),rgba(11,12,15,0) 60%)}
.band .in{padding:clamp(20px,4vw,40px);display:grid;gap:12px;max-width:40em}
.band h2{font-size:clamp(30px,5vw,58px);font-weight:900;font-variation-settings:"wdth" 116;letter-spacing:-.02em;color:#fff}
.band p{color:rgba(255,255,255,.86);font-size:clamp(16px,1.6vw,18px)}
.band .label{color:#C9BBFF}
.credit{position:absolute;right:12px;top:12px;font:600 10.5px/1 var(--f-label);letter-spacing:.04em;color:rgba(255,255,255,.7);background:rgba(0,0,0,.35);padding:5px 8px;border-radius:999px}

/* calculadora de discos */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:stretch}
@media (max-width:860px){.calc{grid-template-columns:1fr}}
.calc .ctrl{padding:24px;display:grid;gap:18px;align-content:start}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);gap:2px;justify-self:start}
.seg button{height:36px;padding:0 16px;border-radius:999px;border:0;background:transparent;color:var(--muted-strong);font:700 12px/1 var(--f-label);letter-spacing:.08em;cursor:pointer;transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}
.seg button[aria-pressed="true"]{background:linear-gradient(180deg,#8A6BFF,var(--accent));color:#fff}
.wts{display:flex;flex-wrap:wrap;gap:8px}
.wts button{min-width:72px;height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:800 18px/1 var(--f-display);font-variation-settings:"wdth" 112;cursor:pointer;transition:transform .16s var(--ease-out),border-color .2s}
.wts button:active{transform:scale(.96)}
.wts button[aria-pressed="true"]{border-color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-text)}
.calc .out{font-size:15px;color:var(--muted-strong);min-height:3em}
.calc .out b{color:var(--text)}
.rack{position:relative;overflow:hidden;border-radius:var(--r-card);background:#0B0C0F;min-height:300px;display:grid;place-items:center;isolation:isolate}
.rack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;z-index:-1}
.bar{position:relative;width:min(92%,560px);height:200px;display:flex;align-items:center}
.bar .shaft{position:absolute;left:0;right:0;top:50%;height:10px;transform:translateY(-50%);border-radius:5px;background:linear-gradient(180deg,#D9DCE2,#8D939D 60%,#C8CCD3)}
.bar .collar{position:relative;width:14px;height:34px;border-radius:4px;background:linear-gradient(180deg,#E6E8EC,#9AA0A9);z-index:2;margin-left:30%}
.bar .stack{position:relative;height:100%;display:flex;align-items:center;gap:3px;z-index:2;margin-left:4px}
.plate{width:var(--w,20px);height:var(--h,100%);border-radius:5px;background:linear-gradient(90deg,#1E2128,#2C3039 45%,#1A1C22);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);display:grid;place-items:center;animation:slideIn .45s var(--ease-out) both;animation-delay:calc(var(--i)*70ms)}
.plate.hi{background:linear-gradient(90deg,#5B3FE0,#7352F2 45%,#4B31C9)}
.plate span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 10px/1 var(--f-label);color:rgba(255,255,255,.75)}
@keyframes slideIn{from{transform:translateX(60px);opacity:.001}to{transform:none;opacity:1}}
.rack .tag{position:absolute;left:16px;bottom:14px;font:600 11px/1.3 var(--f-label);letter-spacing:.06em;color:rgba(255,255,255,.75)}

/* para quién */
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.who{grid-template-columns:1fr}}
.who>div{padding:24px;display:grid;gap:10px;align-content:start;min-width:0}
.who h3{font-size:22px;font-weight:850;font-variation-settings:"wdth" 112}
.who ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--muted-strong)}

/* preguntas */
.qa{display:grid;max-width:820px}
.qa details{border-top:1px solid var(--line)}
.qa details:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:60px;padding:14px 0;font:800 18px/1.25 var(--f-display);font-variation-settings:"wdth" 108}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;font:500 18px/1 var(--f-body);transition:transform .2s var(--ease-out)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details[open] p{animation:rise .3s var(--ease-out) both}
.qa p{color:var(--muted-strong);padding:0 0 18px;max-width:64ch}

/* cierre */
.closer{min-height:clamp(380px,60vw,560px)}
.closer .in{max-width:34em}

/* revelado solo en dos lugares: la demo y los planes */
@supports (animation-timeline: view()){
  .setcard,.plan{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}

/* CTA fijo en teléfono */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--header-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);transition:transform .3s var(--ease-out)}
.dock .btn{width:100%;justify-content:center}
.dock.off{transform:translateY(110%)}
@media (min-width:861px){.dock{display:none}}
footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
@media (min-width:861px){footer{padding-bottom:40px}}
.credits{width:100%;font-size:12.5px;color:var(--muted)}
.credits a{color:var(--muted-strong)}
.hero .chip-launch{display:inline-flex;align-items:center;gap:8px;margin-top:18px;height:32px;padding:0 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text);font:600 13px/1 var(--f-body)}
.hero .chip-launch b{font-family:var(--f-display);font-variation-settings:"wdth" 112}
.legal.page{border-top:0;padding-top:36px}
@media (prefers-reduced-motion:reduce){.plate{animation:none}.setcard,.plan{animation:none}}

/* Real app screenshots (device frame, galleries) */
.device{margin:0;width:min(320px,100%);border-radius:44px;border:8px solid #050507;background:#0B0C0F;overflow:hidden;box-shadow:0 0 0 1px #2B2E35,0 40px 80px -40px rgba(0,0,0,.7);aspect-ratio:640/1387;isolation:isolate}
.device img{display:block;width:100%;height:100%;object-fit:cover}
.anim .device{animation:phoneIn 1s var(--ease-out) .2s both}
.shots-intro{margin:clamp(24px,4vw,40px) 0 0;max-width:46em;color:var(--muted-strong);font-size:clamp(16px,1.6vw,18px)}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,36px);margin-top:clamp(24px,4vw,40px);justify-items:center}
.shot{margin:0;display:grid;gap:14px;justify-items:center;align-content:start;width:100%;max-width:300px}
.shot .device{width:100%}
.shot figcaption{font:400 14px/1.5 var(--f-body);color:var(--muted-strong);text-align:center;text-wrap:balance}
.shot figcaption b{display:block;font:800 16px/1.2 var(--f-display);font-variation-settings:"wdth" 114;color:var(--text);margin-bottom:2px}
.shots-note{margin:18px 0 0;text-align:center}
@media (max-width:760px){.shots{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(72%,260px);overflow-x:auto;scroll-snap-type:x mandatory;justify-content:start;padding:0 20px 12px;margin-inline:-20px;-webkit-overflow-scrolling:touch}.shot{scroll-snap-align:center}}
@media (prefers-reduced-motion:reduce){.anim .device{animation:none!important}}