/* TempusCore web — un solo CSS. Tipografía: Anton (OFL, alojada aquí) + sistema. Sin recursos externos. */
@font-face{font-family:"Anton";src:url(/assets/fonts/anton-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@property --a{syntax:"<angle>";inherits:false;initial-value:250deg}
:root{
  color-scheme:dark;
  --bg:#121212;--surface:#1c1c1c;--ink:#f0f0ec;--ink2:#b5b5ae;--mute:#8a8a84;--line:#2e2e2c;--line-s:#3a3a37;
  --g:#2f80ed;--gd:#8ab8ff;--gsoft:#0f1f36;--glow:rgba(47,128,237,.30);--box:#1d3f6e;--ok:#1D9E75;
  --btn:#f0f0ec;--onbtn:#121212;--bezel:#0b0b0c;--phone-ring:#3a3a37;--tone-mint:#0f1f36;--design-bg:#000;
  --ui-bg:#121212;--ui-surf:#1c1c1c;--ui-ink:#f0f0ec;--ui-ink2:#9a9a94;--ui-line:#2e2e2c;--ui-acc:var(--g);--ui-box:var(--box);--gd-d:#8ab8ff;--box-d:#1d3f6e;--band:#1557b0;--band-ink2:#e3eefc;
  --r:20px;--ease:cubic-bezier(.2,.7,.2,1);
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Anton",Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Serif",serif;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f5f5f0;--surface:#fff;--ink:#1a1a1a;--ink2:#4d4d49;--mute:#6a6a64;--line:#e3e3da;--line-s:#cfcfc4;
  --g:#1a73e8;--gd:#1557b0;--gsoft:#eef4fd;--glow:rgba(26,115,232,.18);--box:#bcd5f7;--btn:#1a1a1a;--onbtn:#fff;--phone-ring:#cfcfc4;--tone-mint:#eef4fd;--design-bg:#0b0b0c;
  --ui-bg:#f5f5f0;--ui-surf:#fff;--ui-ink:#1a1a1a;--ui-ink2:#6a6a64;--ui-line:#e8e8e0;--ui-acc:var(--g);--ui-box:var(--box);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:1.0625rem/1.6 var(--font);-webkit-font-smoothing:antialiased;transition:background-color .9s var(--ease)}
body[data-tone=mint]{--bg:var(--tone-mint)}
img,svg{max-width:100%}
a{color:var(--gd)}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.2rem,6.2vw,4rem);letter-spacing:-.035em;font-weight:760}
h2{font-size:clamp(1.7rem,3.8vw,2.5rem);font-weight:720}
h3{font-size:1.2rem;font-weight:680}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--g);outline-offset:3px;border-radius:6px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.narrow{width:min(760px,100% - 40px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--btn);color:var(--onbtn);padding:10px 16px;border-radius:10px;z-index:80;text-decoration:none}
.skip:focus{top:12px}
.disp{font:400 clamp(2.4rem,6vw,5rem)/1.02 var(--display);text-transform:uppercase;letter-spacing:0;text-wrap:balance}
.disp.xl{font-size:clamp(5rem,17vw,14rem);line-height:.95;margin-bottom:.1em}
.serif{font-family:var(--serif);font-style:italic;font-weight:400}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gd);margin-bottom:14px}

/* Cabecera y pie */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:720;letter-spacing:-.01em;text-decoration:none;min-height:48px}
.top nav{display:flex;align-items:center;gap:4px}
.top nav a{color:var(--ink2);text-decoration:none;font-size:.95rem;padding:12px;border-radius:10px;min-height:48px;display:inline-flex;align-items:center}
.top nav a:hover{color:var(--ink);background:var(--gsoft)}
.top nav a.lang{border:1px solid var(--box);color:var(--ink);margin-left:6px;border-radius:999px;padding-inline:16px}
@media (max-width:860px){.hide-s{display:none!important}}
.theme{display:none;position:relative;width:48px;height:48px;margin-left:4px;border:1px solid var(--box);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;padding:0;overflow:hidden}
.js .theme{display:inline-grid;place-items:center}
.theme:hover{background:var(--gsoft)}
.theme svg{grid-area:1/1;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .35s}
.theme .sun{transform:scale(0) rotate(-180deg);opacity:0}
:root[data-theme="light"] .theme .sun{transform:none;opacity:1}
:root[data-theme="light"] .theme .moon{transform:scale(0) rotate(180deg);opacity:0}
.clock{display:none;margin-left:6px;font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--ink2);font-variant-numeric:tabular-nums;margin-right:8px}
@media (min-width:1000px){.js .clock{display:inline-block}}
.fab{position:fixed;right:20px;bottom:20px;z-index:35;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:650;font-size:.9rem;text-decoration:none;box-shadow:0 14px 34px -14px rgba(0,0,0,.6);transition:transform .3s var(--ease)}
.fab:hover{transform:translateY(-3px)}
.fab i{width:9px;height:9px;border-radius:50%;background:var(--g);box-shadow:0 0 0 0 var(--g);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.fab2{position:fixed;left:20px;bottom:20px;z-index:35;display:none;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--box);background:var(--surface);color:var(--ink);font-size:.88rem;font-weight:650;text-decoration:none}
@media (min-width:900px){.fab2{display:inline-flex}}
@media print{.fab,.fab2{display:none}}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{transition:background-color .55s,color .55s,border-color .55s,fill .55s,stroke .55s!important}
.foot{border-top:1px solid var(--line);padding:48px 0 32px;font-size:.95rem;color:var(--ink2)}
.foot-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:28px}
.foot h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);margin-bottom:8px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li a{display:inline-block;padding:8px 0;color:var(--ink);text-decoration:none;min-height:40px}
.foot li a:hover{color:var(--gd);text-decoration:underline}
.foot .note{font-size:.85rem;margin:0 0 .6em;max-width:70ch}
.word{font:400 clamp(4rem,19.5vw,22rem)/.8 var(--display);margin:0;text-align:center;white-space:nowrap;overflow:hidden;padding-top:.06em;color:var(--ink);user-select:none}
.word span{display:block;transform:translateY(calc((1 - var(--p,1)) * 45%))}

/* Botones y píldoras */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;background:var(--btn);color:var(--onbtn);font-weight:650;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--g)}
.stores{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.store{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:6px 22px;border:1px solid var(--box);border-radius:14px;background:var(--surface);line-height:1.2}
.store small{font-size:.72rem;color:var(--ink2)}.store b{font-size:1.1rem;letter-spacing:-.01em}
.small{font-size:.9rem;color:var(--ink2)}
.illus{font-size:.78rem;color:var(--ink2);margin:14px 0 0}

/* Intro: cortina y líneas verticales (solo CSS) */
@property --r{syntax:"<percentage>";inherits:false;initial-value:-10%}
/* Loader: negro total, solo el icono; el anillo se rellena con los colores de los planes y, al abrirse, el borde del hueco lleva el acento a la página */
.loader{position:fixed;inset:0;z-index:60;pointer-events:none;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,transparent var(--r),var(--g) calc(var(--r) + 1.5%),#000 calc(var(--r) + 7%));
  animation:open .75s cubic-bezier(.7,0,.2,1) .8s both,gone 0s 1.6s forwards}
.loader svg{animation:pop .45s cubic-bezier(.6,0,.9,.4) .8s both}
.loader path{fill:none;stroke-width:135;stroke-linecap:round;stroke-dasharray:1;animation:dash .55s cubic-bezier(.3,.6,.2,1) .1s both}
.loader path:nth-child(2){animation-delay:.3s}.loader path:nth-child(3){animation-delay:.5s}
@keyframes open{from{--r:-10%}to{--r:105%}}
@keyframes pop{to{transform:scale(2.4);opacity:0}}
@keyframes gone{to{visibility:hidden}}
.lines{position:fixed;inset:0;z-index:-1;display:flex;justify-content:space-between;padding-inline:max(20px,calc((100% - 1120px) / 2));pointer-events:none}
.lines i{width:1px;background:var(--line-s);opacity:.7;transform-origin:top;animation:draw 1.4s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 500ms)}
@keyframes draw{from{transform:scaleY(0)}}
@media (max-width:700px){.lines i:nth-child(even){display:none}}

/* Hero */
.hero{position:relative;min-height:calc(100svh - 61px);display:flex;align-items:flex-end;padding:64px 0 32px;overflow:hidden;overflow:clip}
.hero-in{position:relative;z-index:1;transform:translateY(calc(var(--hp,0) * -48px));opacity:calc(1 - var(--hp,0) * .9)}
.mark-bg{position:absolute;right:-8%;top:50%;width:min(86vw,820px);translate:calc(var(--mx,0) * 26px) calc(-50% + var(--my,0) * 26px);fill:none;stroke:color-mix(in srgb,var(--ink) 11%,transparent);stroke-width:30;stroke-linecap:round;pointer-events:none;transition:translate .6s var(--ease)}
.mark-bg path{stroke-dasharray:1;stroke-dashoffset:0;animation:dash 1.8s var(--ease) 1.1s both}
.mark-bg path:nth-child(2){animation-delay:1.4s}.mark-bg path:nth-child(3){animation-delay:1.7s}
@keyframes dash{from{stroke-dashoffset:1}}
.mega-h{font:400 clamp(5rem,20vw,15.5rem)/.84 var(--display);text-transform:uppercase;letter-spacing:0;margin:0 0 .12em;text-wrap:nowrap}
.mega-h .up{display:block;overflow:hidden;padding-top:.04em}
.mega-h .up>span{display:block;animation:up 1s var(--ease) both;animation-delay:var(--d)}
@keyframes up{from{transform:translateY(106%)}}
.mega-h b{font-weight:400;color:var(--g)}
.words{font-size:clamp(1.5rem,3.6vw,2.8rem);line-height:1.15;margin:0 0 26px;max-width:20ch}
@media (min-width:1000px){.words{max-width:none}}
.words span{animation:hl 10s ease-in-out infinite;animation-delay:calc(var(--k) * 2.5s)}
@keyframes hl{0%,100%{color:inherit}4%,20%{color:var(--gd)}24%{color:inherit}}
.hero-foot{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:end;justify-content:space-between}
.lead{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--ink2);max-width:46ch;margin:0}
.hero .lead,.cta .lead{color:var(--ink)}
.mute{color:var(--mute)}
.badge{position:absolute;right:0;top:-6%;width:clamp(104px,12vw,150px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;text-decoration:none;transition:transform .4s var(--ease)}
.badge:hover{transform:scale(1.06)}
.badge .spin{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.badge text{font:700 10.4px var(--font);letter-spacing:.2em;text-transform:uppercase;fill:currentColor}
.badge .arrow{font-size:1.6rem;position:relative}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:700px){.badge{position:relative;top:auto;right:auto;margin-top:28px;width:104px}.mega-h{font-size:26vw}.hero{padding-top:36px}}

/* Banda de texto en movimiento */
.marq{overflow:hidden;border-block:1px solid var(--line-s);padding:14px 0;background:var(--bg)}
.track{display:flex;width:max-content;animation:marq 34s linear infinite}
.track>div{display:flex;flex:none}
.track span{display:inline-flex;align-items:center;gap:.45em;padding:0 .45em;font:400 clamp(2.6rem,7vw,6rem)/1 var(--display);text-transform:uppercase;white-space:nowrap}
.track span.o{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.track svg{width:.55em;height:.55em;color:var(--g);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* Manifiesto: las palabras se encienden al hacer scroll */
.manifesto{padding:clamp(80px,14vw,180px) 0}
.big{font:800 clamp(1.8rem,5.4vw,4.6rem)/1.05 var(--font);letter-spacing:-.035em;text-transform:uppercase;margin:0;max-width:22ch;text-wrap:balance}
.w{--k:clamp(0,calc(var(--p,1) * var(--n) * 1.25 - var(--i)),1);opacity:calc(.16 + .84 * var(--k))}

/* Todo en 1: escena fijada; las 4 apps se reúnen en una */
.scene{--p:1}
.stage{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:150px 0 70px}
.caps{position:absolute;top:clamp(72px,12svh,120px);left:0;right:0;text-align:center;padding-inline:20px;display:grid;justify-items:center}
.cap{font:400 clamp(2.4rem,6vw,5rem)/.95 var(--display);text-transform:uppercase;margin:0}
.cap em{font:italic 400 .62em var(--serif);text-transform:none;color:var(--gd)}
.cap-a,.cap-b{grid-area:2/1}
.cap-b{opacity:clamp(0,calc((var(--p) - .5) / .15),1)}
.cap-a{opacity:calc(1 - clamp(0,calc((var(--p) - .3) / .15),1))}
.phone{height:var(--ph,560px);aspect-ratio:9/19.5;border:7px solid var(--bezel);border-radius:44px;background:var(--bezel);box-shadow:0 40px 80px -30px rgba(0,0,0,.5),0 0 0 1px var(--phone-ring);position:relative;flex:none}
.phone::after{content:"";position:absolute;top:8px;left:50%;width:28%;height:3.4%;transform:translateX(-50%);background:var(--bezel);border-radius:999px;z-index:3}
.screen{width:100%;height:100%;border-radius:37px;overflow:hidden;container-type:inline-size;background:var(--ui-bg)}
.scene-phone{--e:clamp(0,calc((var(--p) - .04) / .46),1);--ph:min(66svh,640px);transform:scale(calc(.92 + .08 * var(--e)));margin-top:6svh}
.tiles{--e:clamp(0,calc((var(--p) - .04) / .46),1);--e2:calc(var(--e) * var(--e) * (3 - 2 * var(--e)))}
.tile{z-index:4;position:absolute;left:50%;top:54%;width:clamp(78px,11vw,116px);aspect-ratio:1;border-radius:26px;display:grid;place-content:center;justify-items:center;gap:6px;color:#fff;font-size:.78rem;font-weight:700;box-shadow:0 18px 36px -16px rgba(0,0,0,.5);
  transform:translate(-50%,-50%) translate(calc(var(--x) * (1 - var(--e2)) * 1vw),calc(var(--y) * (1 - var(--e2)) * 1vh)) rotate(calc(var(--r) * (1 - var(--e2)) * 1deg)) scale(calc(1 - .5 * var(--e2)));
  opacity:calc(1 - clamp(0,calc((var(--e) - .72) / .28),1))}
.t1{background:var(--g)}.t2{background:#BA7517}.t3{background:#1D9E75}.t4{background:#0b7f8c}
.tile .ico{stroke:#fff}
.stage>.illus{position:absolute;bottom:14px;left:0;right:0;text-align:center;margin:0}
.ui{height:100%;padding:11cqw 5.5cqw 5cqw;font-size:4.2cqw;display:flex;flex-direction:column;gap:3cqw;background:var(--ui-bg);color:var(--ui-ink)}
.ui-h{font:800 6.4cqw/1 var(--font);letter-spacing:-.03em;margin:0 0 1cqw}
.mod{--m:clamp(0,calc((var(--p) - var(--s)) / .12),1);opacity:var(--m);transform:translateY(calc((1 - var(--m)) * 18px));background:var(--ui-surf);border:1px solid var(--ui-box);border-radius:4cqw;padding:3.2cqw 4cqw;display:grid;gap:2.2cqw;flex:1;align-content:center}
.mh{display:flex;align-items:center;gap:2cqw;font-size:4.4cqw}
.mh svg{width:5.6cqw;height:5.6cqw;color:var(--ui-acc);flex:none}
.mh small{margin-left:auto;color:var(--ui-ink2);font-size:3.4cqw}
.gr{display:flex;justify-content:space-between;font-size:3.8cqw;color:var(--ui-ink2)}
.dots{display:flex;gap:1.6cqw}.dots i{flex:1;height:1.8cqw;border-radius:9px;background:var(--ui-line)}.dots i.on{background:var(--ui-acc)}
.nut{display:flex;gap:4cqw;align-items:center}
.ring{--v:70;width:25cqw;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--ui-acc) calc(var(--v) * 1%),var(--ui-line) 0);display:grid;place-content:center;text-align:center;position:relative;flex:none}
.ring::before{content:"";position:absolute;inset:2.4cqw;background:var(--ui-surf);border-radius:50%}
.ring b,.ring small{position:relative}.ring b{font-size:4.6cqw;line-height:1.1}.ring small{font-size:2.5cqw;color:var(--ui-ink2)}
.nut ul{list-style:none;margin:0;padding:0;flex:1;display:grid;gap:2cqw}
.nut li{display:grid;grid-template-columns:10cqw 1fr;align-items:center;font-size:3cqw;color:var(--ui-ink2)}
.nut li i{height:1.7cqw;border-radius:9px;background:linear-gradient(var(--ui-acc),var(--ui-acc)) 0/calc(var(--v) * 1%) 100% no-repeat,var(--ui-line)}
.hab{display:flex;gap:2.4cqw}
.hab i,.sets li i{width:8cqw;aspect-ratio:1;border-radius:50%;border:.5cqw solid var(--ui-line);display:grid;place-items:center}
.hab i.on,.sets .done i{background:var(--ui-acc);border-color:var(--ui-acc)}
.hab svg,.sets svg{width:62%;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.hab .on svg,.sets .done svg{opacity:1}
.bubble{margin:0;background:color-mix(in srgb,var(--ui-acc) 82%,#000);color:#fff;border-radius:4cqw 4cqw 4cqw 1cqw;padding:2.6cqw 3.6cqw;font-size:3.7cqw;line-height:1.3}

/* Funciones: filas editoriales */
.section{padding:clamp(56px,9vw,112px) 0}
.head{max-width:760px;margin-bottom:40px}
.head p:last-child{color:var(--ink2);font-size:1.15rem;margin:0}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-s)}
.row{position:relative;display:grid;grid-template-columns:3rem 1fr;gap:8px 16px;padding:28px 0;border-bottom:1px solid var(--line-s);isolation:isolate;overflow:hidden}
.row::before{content:"";position:absolute;inset:0;background:var(--gsoft);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:-1}
.num{font:400 1.2rem/1.6 var(--display);color:var(--gd);letter-spacing:.04em}
.row h3{font:400 clamp(1.9rem,4.2vw,3.2rem)/1 var(--display);text-transform:uppercase;letter-spacing:0;margin:0;transition:transform .5s var(--ease)}
.row p{grid-column:2;margin:0;color:var(--ink2);max-width:62ch}
.row .ico{display:none;color:var(--gd)}
@media (hover:hover){.row:hover::before{transform:scaleY(1)}.row:hover h3{transform:translateX(14px)}}
@media (min-width:900px){.row{grid-template-columns:4rem 1.05fr 1fr 32px;gap:24px;align-items:start}.row p{grid-column:auto}.row .ico{display:block}.row h3{padding-right:12px}}

/* Diseño: demostración interactiva (solo CSS) */
.design{--ink:#f0f0ec;--ink2:#b5b5ae;--gd:var(--gd-d);--box:var(--box-d);--line:#2e2e2c;--line-s:#3a3a37;--phone-ring:#3a3a37;background:var(--design-bg);color:var(--ink);padding:clamp(64px,10vw,128px) 0;overflow:clip}
.design .lead{color:var(--ink2);margin:0 0 24px}
.design-grid{display:grid;gap:56px;align-items:center}
@media (min-width:920px){.design-grid{grid-template-columns:1.05fr .95fr}}
.big-serif{font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.15;color:var(--gd);margin:0 0 22px}
.ticks{list-style:none;padding:0;margin:0 0 24px}
.ticks li{position:relative;padding:8px 0 8px 34px}
.ticks li::before{content:"";position:absolute;left:0;top:12px;width:20px;height:20px;border-radius:50%;background:var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.demo{display:grid;gap:28px;justify-items:center;--ui-bg:#f5f5f0;--ui-surf:#fff;--ui-ink:#1a1a1a;--ui-ink2:#6a6a64;--ui-line:#e8e8e0;--on:#fff;
  --azul:#1a73e8;--plata:#6e6e76;--oro:#8c6c0d;--b-azul:#bcd5f7;--b-plata:#d0d0d6;--b-oro:#ecd9a0;--ui-acc:var(--azul);--ui-box:var(--b-azul)}
.demo:has(#th1:checked){--on:#07121f;--ui-bg:#121212;--ui-surf:#1c1c1c;--ui-ink:#f0f0ec;--ui-ink2:#9a9a94;--ui-line:#2e2e2c;--azul:#2f80ed;--plata:#86868c;--oro:#a8861a;--b-azul:#1d3f6e;--b-plata:#3a3a3f;--b-oro:#5c4a14}
.demo:has(#th2:checked){--on:#07121f;--ui-bg:#000;--ui-surf:#0d0d0d;--ui-ink:#f0f0ec;--ui-ink2:#9a9a94;--ui-line:#232323;--azul:#2f80ed;--plata:#86868c;--oro:#a8861a;--b-azul:#1d3f6e;--b-plata:#3a3a3f;--b-oro:#5c4a14}
.demo:has(#ac0:checked){--ui-acc:var(--azul);--ui-box:var(--b-azul)}
.demo:has(#ac1:checked){--ui-acc:var(--plata);--ui-box:var(--b-plata)}
.demo:has(#ac2:checked){--ui-acc:var(--oro);--ui-box:var(--b-oro)}
.ctl{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:center}
.ctl fieldset{border:0;padding:0;margin:0;min-width:0}
.ctl legend{padding:0;margin:0 0 8px;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.ctl input{position:absolute;opacity:0;width:1px;height:1px}
.ctl label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;margin:0 6px 6px 0;border:1px solid var(--line-s);border-radius:999px;cursor:pointer;font-size:.95rem;transition:background-color .3s,color .3s,border-color .3s}
.ctl label:hover{border-color:var(--gd)}
.ctl input:checked + label{background:var(--ink);color:#0b0b0c;border-color:var(--ink)}
.ctl input:focus-visible + label{outline:3px solid var(--g);outline-offset:3px}
.sw i{width:14px;height:14px;border-radius:50%;background:var(--c)}
.s0{--c:#2f80ed}.s1{--c:#86868c}.s2{--c:#d4af37}
.demo-phone{--ph:min(560px,72svh,128vw)}
.demo-phone *{transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.dex{display:flex;align-items:baseline;justify-content:space-between;font-size:5cqw}.dex small{color:var(--ui-ink2);font-size:3.4cqw}
.sets{list-style:none;padding:0;margin:0;display:grid;gap:2cqw}
.sets li{display:grid;grid-template-columns:1fr auto 8cqw;gap:3cqw;align-items:center;background:var(--ui-surf);border:1px solid var(--ui-box);border-radius:3.4cqw;padding:3cqw 3.6cqw;font-size:3.8cqw}
.sets li span:nth-child(2){color:var(--ui-ink2)}
.sets .now{border-color:var(--ui-acc)}
.rest{display:grid;justify-items:center;gap:1.2cqw;margin-top:auto;font-size:3.2cqw;color:var(--ui-ink2)}
.timer{--a:250deg;width:32cqw;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--ui-acc) var(--a),var(--ui-line) 0);display:grid;place-items:center;position:relative}
.timer::before{content:"";position:absolute;inset:2.6cqw;border-radius:50%;background:var(--ui-bg)}
.timer b{position:relative;font-size:7.4cqw;color:var(--ui-ink)}
.btnui{background:var(--ui-acc);color:var(--on);text-align:center;font-weight:700;padding:3.4cqw;border-radius:99px;font-size:4cqw}
.add{margin:0;text-align:center;color:var(--ui-ink2);font-size:3.4cqw}

/* Entrenadores */
.band{--ink:#fff;--ink2:var(--band-ink2);--gd:#fff;--line:color-mix(in srgb,#fff 25%,var(--band));background:var(--band);color:var(--ink);padding:clamp(64px,10vw,128px) 0}
.band a{color:var(--ink)}
.band .lead{color:var(--ink2);margin:0 0 20px;max-width:52ch}
.band .disp{font-size:clamp(2.2rem,5vw,4.2rem)}
.band .btn{--btn:#fff;--onbtn:var(--band);color:var(--band)}
.band .ticks li::before{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.coach-grid{display:grid;gap:48px;align-items:center}
@media (min-width:920px){.coach-grid{grid-template-columns:1.1fr .9fr}}
.board{background:#fff;color:#1a1a1a;border-radius:26px;padding:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.bt{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#555;margin:0 0 14px}
.board ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.board li{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:12px;border:1px solid #e8e8e0;border-radius:16px}
.av{width:44px;height:44px;border-radius:50%;background:#e8f7ef;color:#0f7a48;display:grid;place-items:center;font-weight:800}
.board b{display:block}.board small{display:block;color:#555;font-size:.88rem}
.dot{width:14px;height:14px;border-radius:50%}.dot.ok{background:#1D9E75}.dot.warn{background:#BA7517}.dot.alert{background:#E24B4A}
.band .illus{color:var(--ink2)}

/* FAQ y cierre */
.faq details{border-bottom:1px solid var(--line-s)}
.faq details:first-child{border-top:1px solid var(--line-s)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-weight:650;position:relative;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;translate:0 -50%;font-size:1.6rem;font-weight:400;color:var(--gd);transition:rotate .3s var(--ease)}
.faq details[open] summary::after{rotate:45deg}
.faq details p{color:var(--ink2);margin:0 0 20px;max-width:62ch}
.cta{text-align:center}.cta .lead{margin:0 auto 24px}.cta .stores{justify-content:center;margin-bottom:24px}
.cta .disp{font-size:clamp(2.6rem,8vw,6.5rem)}

/* Páginas de texto (legales, soporte, borrar cuenta) */
.read{width:min(760px,100% - 40px);padding:clamp(32px,6vw,64px) 0 24px}
.prose h1{font:400 clamp(2.4rem,6vw,4rem)/.95 var(--display);text-transform:uppercase;letter-spacing:0;margin-bottom:.4em}
.prose h2{font-size:1.45rem;margin:2em 0 .5em;scroll-margin-top:72px}
.prose h3{margin:1.6em 0 .4em}
.prose li{margin:.3em 0}
.prose p,.prose li{overflow-wrap:anywhere}
.prose .meta{color:var(--ink2);font-size:.95rem;margin-bottom:2em}
.prose hr{border:0;border-top:1px solid var(--line-s);margin:2.5em 0}
.prose blockquote{margin:1.2em 0;padding:.6em 1.2em;border-left:3px solid var(--g);background:var(--gsoft);border-radius:0 12px 12px 0}
.trans{margin:0 0 28px;padding:12px 18px;border:1px solid var(--box);border-left:3px solid var(--g);border-radius:12px;background:var(--surface);font-size:.95rem}
.trans p{margin:0}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1.2em 0}
.prose th,.prose td{border:1px solid var(--line-s);padding:10px 12px;vertical-align:top;text-align:left}
.prose th{background:var(--surface)}
@media (max-width:700px){
  .prose thead{position:absolute;left:-9999px}
  .prose table,.prose tbody,.prose tr,.prose td{display:block;width:100%}
  .prose tr{border:1px solid var(--line-s);border-radius:14px;margin-bottom:14px;background:var(--surface);overflow:hidden}
  .prose td{border:0;border-bottom:1px solid var(--line-s)}.prose td:last-child{border-bottom:0}
  .prose td::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gd);margin-bottom:4px}
}

/* Movimiento: solo si el usuario no pide reducirlo */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .9s var(--ease) both;animation-delay:var(--d,0ms)}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
  .js .reveal.in{opacity:1;transform:none}
  .js .scene{--p:0;height:360vh}
  .js .scene .stage{position:sticky;top:0;height:100svh;padding:0}
  .js .manifesto .big,.js .word{--p:0}
  .timer{animation:tick 7s linear infinite}
  @keyframes tick{from{--a:0deg}to{--a:360deg}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .loader{display:none}
  .tile{display:none}
  .cap-a{display:none}
}

/* Demo de la app (iframe aislado, se carga al pulsar) */
.js-only{display:none}.js .js-only{display:inline-flex}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--box)}
.try-grid{display:grid;gap:48px;align-items:center}
@media (min-width:920px){.try-grid{grid-template-columns:1fr 1fr}.try-phone{justify-self:center}}
.try-phone{--ph:min(780px,92svh,150vw);margin-inline:auto}
.try .screen{background:var(--ui-bg)}
.try-poster{height:100%;display:grid;place-content:center;justify-items:center;gap:22px;background:linear-gradient(165deg,var(--gsoft),var(--ui-bg) 70%)}
.try .screen iframe{width:100%;height:100%;border:0;display:block;background:var(--ui-bg)}
.try .lead{margin-bottom:24px}
.try .screen iframe{margin-top:30px;height:calc(100% - 30px)}
@media (max-width:700px){.try-phone{--ph:min(calc((100vw - 40px) * 2.1667),780px)}}
.try-close{display:flex;margin:18px auto 0}
@media (max-width:700px){.fab{display:none}}

/* ¿Cómo se ve con Pro y Max? El plan elegido tiñe el móvil (ola de color), el halo de detrás y el botón (brillo) */
@property --gc{syntax:"<color>";inherits:true;initial-value:#2f80ed}
.demo{position:relative;--gc:var(--ui-acc);transition:--gc .9s var(--ease)}
.demo>*{position:relative;z-index:1}
.demo>.demo-glow{position:absolute;z-index:0;left:50%;bottom:-6%;width:min(560px,110%);aspect-ratio:1;translate:-50% 0;background:radial-gradient(closest-side,color-mix(in srgb,var(--gc) 42%,transparent),transparent);pointer-events:none}
.plan-ask{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;color:var(--gd);margin:0;text-align:center}
.plan-hint{margin:0;text-align:center;max-width:36ch}
.plan-chip{display:inline-block;vertical-align:middle;margin-left:2cqw}
.plan-chip b{display:none;padding:.4cqw 2.6cqw;border-radius:99px;background:var(--ui-acc);color:var(--on);font:700 3.1cqw/1.5 var(--font);letter-spacing:0}
.plan-chip .pl0{display:inline-block}
.demo:has(#ac1:checked) .pl0,.demo:has(#ac2:checked) .pl0{display:none}
.demo:has(#ac1:checked) .pl1,.demo:has(#ac2:checked) .pl2{display:inline-block}
.wave{position:absolute;z-index:2;left:50%;bottom:6%;width:22%;aspect-ratio:1;border-radius:50%;background:var(--ui-acc);opacity:0;translate:-50% 50%;pointer-events:none}
@keyframes wv0{0%{opacity:.5;scale:.2}100%{opacity:0;scale:14}}
@keyframes wv1{0%{opacity:.5;scale:.2}100%{opacity:0;scale:14}}
@keyframes wv2{0%{opacity:.5;scale:.2}100%{opacity:0;scale:14}}
.demo:has(#ac0:checked) .wave{animation:wv0 1.1s var(--ease)}
.demo:has(#ac1:checked) .wave{animation:wv1 1.1s var(--ease)}
.demo:has(#ac2:checked) .wave{animation:wv2 1.1s var(--ease)}
@keyframes shine{from{background-position:180% 0}to{background-position:-80% 0}}
.demo:has(#ac1:checked) .btnui,.demo:has(#ac2:checked) .btnui{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);background-size:250% 100%;background-repeat:no-repeat;animation:shine 2.8s ease-in-out infinite}
.demo-phone .screen{position:relative}

/* Plan de la app (Gratis azul · Pro plata · Max oro): recolorea TODA la web. Mismos tonos que VitalCore/src/utils/theme.js.
   Con JavaScript lo fija data-plan en <html> (con la ola de color); sin él, el plan elegido en la demo de «Diseño» (:has). */
:root:not([data-theme="light"])[data-plan="pro"],:root:not([data-theme="light"]):has(#ac1:checked){--g:#86868c;--gd:#c7c7cc;--gsoft:#1e1e21;--glow:rgba(134,134,140,.30);--box:#3a3a3f;--tone-mint:#1e1e21;--gd-d:#c7c7cc;--box-d:#3a3a3f;--band:#4a4a52;--band-ink2:#e9e9ec;--btn:#f0f0ec;--onbtn:#121212;}
:root[data-theme="light"][data-plan="pro"],:root[data-theme="light"]:has(#ac1:checked){--g:#6e6e76;--gd:#4a4a52;--gsoft:#f2f2f4;--glow:rgba(110,110,118,.20);--box:#d0d0d6;--tone-mint:#f2f2f4;--gd-d:#c7c7cc;--box-d:#3a3a3f;--band:#4a4a52;--band-ink2:#e9e9ec;}
:root:not([data-theme="light"])[data-plan="max"],:root:not([data-theme="light"]):has(#ac2:checked){--g:#a8861a;--gd:#e6c65a;--gsoft:#2a2310;--glow:rgba(168,134,26,.30);--box:#5c4a14;--tone-mint:#2a2310;--gd-d:#e6c65a;--box-d:#5c4a14;--band:#6e5409;--band-ink2:#f6edcf;}
:root[data-theme="light"][data-plan="max"],:root[data-theme="light"]:has(#ac2:checked){--g:#94730f;--gd:#6e5409;--gsoft:#fbf6e6;--glow:rgba(148,115,15,.20);--box:#ecd9a0;--tone-mint:#fbf6e6;--gd-d:#e6c65a;--box-d:#5c4a14;--band:#6e5409;--band-ink2:#f6edcf;}

body{transition:background-color .9s var(--ease)}
.band,.hero .mega-h b,.logo-fill{transition:background-color .6s var(--ease),color .6s var(--ease)}

/* selector de plan de la cabecera (solo con JavaScript y en pantallas anchas) */
.plans{display:none}
@media (min-width:900px){.js .plans{display:inline-flex;align-items:center;margin-left:4px}}
.pdot{width:34px;height:44px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.pdot i{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--line-s);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.pdot[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink);transform:scale(1.15)}
.pdot:hover i{transform:scale(1.2)}
.pdot.s0{--c:#2f80ed}.pdot.s1{--c:#86868c}.pdot.s2{--c:#d4af37}

/* Cambio de plan: una ola de color sale del punto pulsado y cubre la página mientras los colores se funden */
.plan-wave{position:fixed;left:0;top:0;z-index:70;width:var(--s);height:var(--s);border-radius:50%;pointer-events:none;translate:calc(var(--x) - 50%) calc(var(--y) - 50%);
  background:radial-gradient(closest-side,transparent 80%,color-mix(in srgb,var(--wc) 60%,transparent) 95%,transparent 100%),color-mix(in srgb,var(--wc) 18%,transparent);
  animation:planwave 1.05s cubic-bezier(.2,.7,.2,1) both}
@keyframes planwave{from{scale:0;opacity:1}70%{opacity:.9}to{scale:1;opacity:0}}
@media (prefers-reduced-motion:reduce){.plan-wave{display:none}}

/* Lista «Avísame cuando salga» (portada) y páginas /lista/ */
.lista{text-align:center}.lista .lead{margin:0 auto 28px}
.lista-box{display:none}.js .lista-box{display:block}.js .lista-nojs{display:none}
.lista-form{display:grid;gap:16px;max-width:560px;margin:0 auto;text-align:left}
.lista-row{display:grid;gap:12px;align-items:end}
@media (min-width:600px){.lista-row{grid-template-columns:1fr auto}}
.lista-field label{display:block;font-weight:650;margin-bottom:6px}
.lista-field input{width:100%;min-height:52px;padding:0 16px;border:1px solid var(--box);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit}
.lista-form .btn{border:0;cursor:pointer;font:inherit;font-weight:650}
.lista-form .btn:disabled,.lista-pag .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.consent{display:flex;gap:12px;align-items:flex-start;line-height:1.45;cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--g)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.lista-msg{margin:0;min-height:1.5em;font-weight:600}
.clause{max-width:560px;margin:20px auto 0;text-align:left;font-size:.86rem;line-height:1.55;color:var(--ink2)}
.clause a{color:var(--gd)}
.founders{max-width:560px;margin:44px auto 36px;padding:24px;border:1px solid var(--box);border-radius:18px;background:var(--surface);text-align:left}
.founders h3{font:400 clamp(1.5rem,4vw,2rem)/1.1 var(--display);text-transform:uppercase;margin:0 0 10px}
.founders p{margin:0 0 10px}.founders .small{margin:0}
.lista .stores{justify-content:center}
.read .btn{margin-top:4px}