/* Mejoras v2: entrada de portada, profundidad con el mouse, avisos, sección Sistemas (demo de reserva), Academia. */
:root{--sx-surface:#1e2a22;--sx-surface-2:#25332a;--sx-line:#33443a;--sx-muted:#a7b0a1;--ok:#3b7a1e;--warn:#b5730c}

/* ---------- Portada: entrada ---------- */
@keyframes mg-rise{from{opacity:0;transform:translateY(42px)}}
@keyframes mg-sweep{from{transform:rotate(-1.5deg) scaleX(0)}to{transform:rotate(-1.5deg) scaleX(1)}}
@keyframes mg-art{from{opacity:0;translate:0 60px}}
@keyframes mg-fade{from{opacity:0;transform:translateY(14px)}}
.js .hero h1>span{animation:mg-rise 1s var(--ease) backwards}
.js .hero h1>span:nth-child(2){animation-delay:.1s}
.js .hero h1>span:nth-child(3){animation-delay:.2s}
.js .hero h1 .highlight:before{transform-origin:left center;animation:mg-sweep .9s var(--ease) .75s backwards}
.js .hero-intro,.js .hero-description,.js .hero-actions,.js .hero-person{animation:mg-fade .9s var(--ease) backwards}
.js .hero-intro{animation-delay:0s}.js .hero-description{animation-delay:.35s}.js .hero-actions{animation-delay:.45s}.js .hero-person{animation-delay:.55s}
.js .hero-browser{animation:mg-art 1.1s var(--ease) .15s backwards}
.js .hero-phone{animation:mg-art 1.1s var(--ease) .3s backwards}
.js .result-sticker{animation:mg-art 1.1s var(--ease) .45s backwards}

/* ---------- Portada: profundidad con el mouse ---------- */
.hero-art{transform:perspective(1400px) rotateY(calc(var(--mx,0) * 3.5deg)) rotateX(calc(var(--my,0) * -3deg));transform-style:preserve-3d}
.hero-browser{translate:calc(var(--mx,0) * -12px) calc(var(--my,0) * -8px)}
.hero-phone{translate:calc(var(--mx,0) * 16px) calc(var(--my,0) * 10px)}
.result-sticker{translate:calc(var(--mx,0) * 26px) calc(var(--my,0) * 16px)}
.art-orbit{translate:calc(var(--mx,0) * -6px) calc(var(--my,0) * -6px)}

/* ---------- Portada: avisos ---------- */
.mg-toasts{position:absolute;top:34px;left:4%;z-index:6;width:236px;height:64px;pointer-events:none;translate:calc(var(--mx,0) * 30px) calc(var(--my,0) * 18px)}
.mg-toast{position:absolute;inset:0 auto auto 0;width:100%;display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #dfe3d8;border-radius:10px;padding:10px 12px;box-shadow:0 18px 40px -16px #17201a40;font-size:11px;line-height:1.3;animation:mg-toast-in .55s var(--ease) both}
.mg-toast.out{animation:mg-toast-out .45s var(--ease) both}
.mg-toast i{width:30px;height:30px;border-radius:8px;background:var(--lime);display:grid;place-items:center;flex-shrink:0;font-style:normal}
.mg-toast i svg{width:16px;height:16px}
.mg-toast b{display:block;font-weight:600;font-size:11.5px}
.mg-toast small{display:block;color:var(--muted);font-size:10px}
.mg-toast .mg-now{margin-left:auto;align-self:flex-start;font-size:8.5px;color:var(--muted);letter-spacing:.06em}
@keyframes mg-toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes mg-toast-out{to{opacity:0;transform:translateY(-12px) scale(.98)}}

/* ---------- Sistemas ---------- */
.sx{background:var(--dark);color:#f3f4ec;padding-block:120px;position:relative;overflow:clip}
.sx:before{content:'';position:absolute;width:760px;height:760px;right:-260px;top:-280px;border-radius:50%;background:radial-gradient(circle,#cfef5222,transparent 65%);pointer-events:none}
.sx-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:64px;align-items:center;position:relative}
.sx-copy h2{margin-top:26px}
.sx-copy h2 em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;color:var(--lime);letter-spacing:-.07em}
.sx-lead{margin-top:26px;color:var(--sx-muted);font-size:15px;max-width:440px;line-height:1.7}
.sx-list{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:0;border-top:1px solid var(--sx-line)}
.sx-list li{display:grid;grid-template-columns:28px 1fr auto;gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid var(--sx-line);font-size:14px}
.sx-list li span{font-size:10px;color:var(--sx-muted);letter-spacing:.1em}
.sx-list li b{font-weight:600;font-family:var(--heading);font-size:17px;letter-spacing:-.03em}
.sx-list li small{font-size:11px;color:var(--sx-muted);text-align:right}
.sx-offer{margin-top:28px;display:flex;align-items:center;gap:18px;background:var(--lime);color:var(--ink);border-radius:10px;padding:16px 18px}
.sx-offer strong{font-family:var(--heading);font-size:34px;letter-spacing:-.06em;line-height:1;font-weight:600}
.sx-offer p{font-size:12.5px;line-height:1.45}
.sx-offer p b{display:block;font-size:14px}
.sx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:22px}
.sx-actions .text-link{color:#f3f4ec}
.sx-demo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:stretch}
.sx-label{font-size:9.5px;letter-spacing:.13em;color:var(--sx-muted);font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.sx-label i{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.sx-phone{background:#0b100c;border:1px solid var(--sx-line);border-radius:34px;padding:8px;box-shadow:0 40px 70px -30px #000c}
.sx-screen{background:#fbfbf7;color:var(--ink);border-radius:27px;overflow:hidden;min-height:520px;display:flex;flex-direction:column}
.sx-head{display:flex;align-items:center;gap:10px;background:var(--ink);color:#f3f4ec;padding:22px 16px 13px}
.sx-logo{width:34px;height:34px;border-radius:10px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-family:var(--heading);font-weight:700;font-size:14px;flex-shrink:0}
.sx-head b{display:block;font-family:var(--heading);font-size:14px;letter-spacing:-.02em;line-height:1.2}
.sx-head small{display:block;font-size:10.5px;color:var(--sx-muted)}
.sx-steps{display:flex;gap:5px;padding:12px 16px 0}
.sx-steps i{flex:1;height:3px;border-radius:2px;background:#dfe2d6;transition:background .3s}
.sx-steps i.on{background:var(--ink)}
.sx-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.sx-title{font-family:var(--heading);font-weight:600;font-size:19px;letter-spacing:-.04em;line-height:1.15}
.sx-sub{font-size:11.5px;color:#5e645b;margin-top:-4px}
.sx-svc{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 12px;border-radius:12px;border:1px solid #dfe2d6;background:#fff;transition:border-color .2s,transform .2s}
.sx-svc:hover{border-color:var(--ink);transform:translateY(-1px)}
.sx-svc b{display:block;font-size:13.5px;font-weight:600}
.sx-svc small{display:block;font-size:10.5px;color:#6b7168}
.sx-svc .p{font-size:12px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.sx-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.sx-day,.sx-hour{border:1px solid #dfe2d6;background:#fff;border-radius:10px;padding:7px 2px;text-align:center;font-size:12px;transition:background .2s,color .2s,border-color .2s}
.sx-day small{display:block;font-size:9px;color:#6b7168;text-transform:uppercase;letter-spacing:.06em}
.sx-day b{display:block;font-family:var(--heading);font-size:17px;letter-spacing:-.03em}
.sx-day[aria-pressed="true"],.sx-hour[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sx-day[aria-pressed="true"] small{color:var(--lime)}
.sx-hours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.sx-hour{font-variant-numeric:tabular-nums;font-weight:500;padding:9px 2px}
.sx-hour:disabled{background:#eef0e8;color:#b3b8ad;text-decoration:line-through;cursor:not-allowed;border-color:#eef0e8}
.sx-field{width:100%;border:1px solid #cfd3c6;border-radius:10px;padding:11px 12px;font-size:14px;background:#fff;color:var(--ink)}
.sx-sum{border-radius:12px;background:#f1f3ea;padding:11px 12px;font-size:12px;display:grid;gap:3px}
.sx-sum div{display:flex;justify-content:space-between;gap:10px}
.sx-sum span{color:#6b7168}
.sx-go{margin-top:auto;width:100%;min-height:46px;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;font-size:13.5px}
.sx-go:disabled{opacity:.35;cursor:not-allowed}
.sx-back{font-size:11.5px;color:#5e645b;align-self:flex-start;text-decoration:underline;text-underline-offset:3px;background:none;padding:0}
.sx-done{display:grid;place-items:center;text-align:center;gap:10px;margin-block:auto;padding-block:14px}
.sx-ok{width:62px;height:62px;border-radius:50%;background:var(--lime);display:grid;place-items:center;animation:sx-pop .5s var(--ease)}
.sx-ok svg{width:30px;height:30px;stroke-width:2.6}
@keyframes sx-pop{from{transform:scale(.4);opacity:0}}
.sx-wa{background:#e9e4d8;border-radius:12px;padding:9px;text-align:left;font-size:11.5px;width:100%;line-height:1.45}
.sx-wa div{background:#fff;border-radius:9px 9px 9px 3px;padding:7px 9px}
.sx-wa span{display:block;font-size:8.5px;letter-spacing:.1em;color:#6b7168;margin-bottom:5px;font-weight:600}
.sx-panel{background:var(--sx-surface);border:1px solid var(--sx-line);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:11px;min-width:0;position:relative;overflow:hidden;height:calc(100% - 25px)}
.sx-ptop{display:flex;align-items:center;gap:8px}
.sx-ptop b{font-family:var(--heading);font-size:17px;letter-spacing:-.03em;font-weight:600}
.sx-ptop span:last-child{margin-left:auto;font-size:9.5px;letter-spacing:.12em;color:var(--sx-muted)}
.sx-live{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px #cfef5222}
.sx-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sx-kpis div{background:var(--sx-surface-2);border-radius:10px;padding:9px 10px;min-width:0}
.sx-kpis span{display:block;font-size:8.5px;letter-spacing:.1em;color:var(--sx-muted);text-transform:uppercase;white-space:nowrap}
.sx-kpis strong{display:block;font-family:var(--heading);font-weight:600;font-size:24px;letter-spacing:-.05em;line-height:1.1;transition:color .4s;font-variant-numeric:tabular-nums}
.sx-kpis strong.bump{color:var(--lime)}
.sx-rows{display:grid;gap:5px}
.sx-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px 10px;border-radius:9px;background:var(--sx-surface-2);font-size:12px}
.sx-row .t{font-size:11px;color:var(--sx-muted);font-variant-numeric:tabular-nums}
.sx-row b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-row b small{font-weight:400;color:var(--sx-muted)}
.sx-row.free{background:transparent;border:1px dashed var(--sx-line);color:var(--sx-muted)}
.sx-row.free b{font-weight:400}
.sx-row.new{background:#cfef521f;outline:1px solid var(--lime);animation:sx-row .7s var(--ease)}
@keyframes sx-row{from{transform:translateX(-12px);opacity:0}}
.sx-tag{font-size:8.5px;letter-spacing:.08em;padding:3px 7px;border-radius:99px;text-transform:uppercase;font-weight:700;white-space:nowrap}
.sx-tag.web{background:var(--lime);color:var(--ink)}
.sx-tag.rem{background:#f0b44c26;color:#f0b44c}
.sx-tag.ok{background:#8fd16a24;color:#8fd16a}
.sx-tag.free{color:var(--sx-muted)}
.sx-toast{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:8px;background:var(--lime);color:var(--ink);border-radius:10px;padding:8px 12px;font-size:11.5px;font-weight:600;box-shadow:0 16px 30px -14px #000c;animation:mg-toast-in .5s var(--ease)}
.sx-toast svg{width:15px;height:15px}
.sx-note{margin-top:auto;font-size:10.5px;color:var(--sx-muted);display:flex;gap:7px;align-items:center}
.sx-note svg{width:14px;height:14px;color:var(--lime)}
.sx-sample{font-size:9px;letter-spacing:.12em;color:#7d8778;text-align:right;margin-top:10px}

/* ---------- Servicio 04 y Academia ---------- */
.art-system{display:grid;place-items:center;gap:8px;font-size:9px;letter-spacing:.12em}
.art-system .mini-cal{display:grid;grid-template-columns:repeat(5,22px);gap:5px}
.art-system .mini-cal i{width:22px;height:22px;border-radius:5px;background:#17201a14;display:block}
.art-system .mini-cal i.on{background:var(--lime)}
.academy-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:18px;padding:22px 24px;border:1px dashed #acb5a4;border-radius:10px}
.academy-row .eyebrow{margin:0}
.academy-row p{font-family:var(--heading);font-size:20px;letter-spacing:-.04em;font-weight:600;line-height:1.2}
.academy-row ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.academy-row li{font-size:11px;padding:5px 10px;border-radius:99px;background:#fff;border:1px solid var(--line)}
.academy-row .text-link{margin-left:auto;font-size:11px}
.academy-row p.eyebrow{font-family:var(--font);font-size:10px;letter-spacing:.13em;font-weight:600;line-height:1.5}

@media(max-width:1100px){.sx-grid{grid-template-columns:minmax(0,1fr);gap:48px}.sx-demo{max-width:720px}}
@media(max-width:960px){.mg-toasts{left:0;top:8px;width:210px}}
@media(max-width:760px){
  .sx{padding-block:84px}
  .sx-demo{grid-template-columns:minmax(0,1fr)}
  .sx-phone{max-width:360px;width:100%;margin-inline:auto}
  .sx-panel{height:auto}
  .sx-list li{grid-template-columns:24px 1fr}
  .sx-list li small{grid-column:2;text-align:left}
  .sx-offer strong{font-size:28px}
  .mg-toasts{left:auto;right:0;top:0;width:200px;height:56px}
  .mg-toast{padding:8px 10px}
  .academy-row .text-link{margin-left:0}
  .academy-row p{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .hero-art{transform:none}
  .hero-browser,.hero-phone,.result-sticker,.art-orbit,.mg-toasts{translate:none}
}

/* ===================== v3: más movimiento ===================== */
@font-face{font-family:Caveat;src:url('./caveat.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* Sistemas: escena fija donde el caos se ordena */
.sx{padding-block:0 120px}
.sx-pin{position:relative;height:250vh}
.sx-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sx-stage .sx-grid{height:100%;padding-top:86px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.sx-stage .sx-copy h2{margin-top:26px}
.sx-meter{display:flex;align-items:center;gap:14px;margin-top:34px;font-size:9.5px;letter-spacing:.13em;color:var(--sx-muted);font-weight:600}
.sx-meter b{font-family:var(--heading);font-size:34px;letter-spacing:-.05em;color:#f08a6a;min-width:2ch;font-weight:600;transition:color .4s}
.sx-meter .bar{width:110px;height:3px;border-radius:2px;background:var(--sx-line);overflow:hidden}
.sx-meter .bar i{display:block;height:100%;background:#f08a6a;transform-origin:left;transition:background .4s}
.sx-meter.done b{color:var(--lime)}.sx-meter.done .bar i{background:var(--lime)}
.sx-area{position:relative;height:min(540px,76%);min-width:0}
.sx-board{position:absolute;inset:0;margin:auto;height:fit-content;max-height:100%;border-radius:20px;padding:16px;display:grid;gap:8px;background:rgba(30,42,34,var(--f,0));border:1px solid rgba(51,68,58,var(--f,0));box-shadow:0 50px 90px -40px rgba(0,0,0,calc(.75 * var(--f,0)))}
.sx-bframe{opacity:0}
.sx-bhead{display:flex;align-items:center;gap:9px;font-size:12px;padding-bottom:2px}
.sx-bhead b{font-family:var(--heading);font-size:15px;letter-spacing:-.02em;font-weight:600}
.sx-bhead span:last-child{margin-left:auto;font-size:9px;letter-spacing:.13em;color:var(--sx-muted)}
.sx-bkpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.sx-bkpis>div{height:clamp(58px,8.5vh,74px)}
.sx-brow{height:clamp(34px,5vh,42px)}
.sx-chips{position:absolute;inset:0;pointer-events:none;z-index:3}
.sx-chip{position:absolute;left:0;top:0;will-change:transform}
.sx-chip .hand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:240px;line-height:1.25}
.sx-chip .hand.note{background:#f3edd5;background-image:repeating-linear-gradient(transparent 0 25px,#c9d6de 25px 26px);color:#2a3a6e;font-family:Caveat,'Comic Sans MS',cursive;font-size:23px;padding:8px 16px 6px;border-radius:3px;box-shadow:0 18px 30px -16px #000b}
.sx-chip .hand.note:before{content:'';position:absolute;top:-8px;left:50%;width:46px;height:16px;transform:translateX(-50%) rotate(-3deg);background:#cfef5299}
.sx-chip .hand.bubble{background:#fbfbf7;color:var(--ink);font-size:13.5px;padding:9px 12px 7px;border-radius:14px 14px 14px 4px;box-shadow:0 18px 30px -16px #000b}
.sx-chip .hand.bubble small{display:block;text-align:right;font-size:9px;color:#7b8277;margin-top:2px}
.sx-chip .hand.bubble:after{content:attr(data-n);position:absolute;right:-6px;top:-6px;width:18px;height:18px;border-radius:50%;background:#25d366;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.sx-chip .hand.missed{background:var(--sx-surface-2);color:#f08a6a;border:1px solid var(--sx-line);font-size:13px;font-weight:600;padding:10px 14px;border-radius:12px}
.sx-chip .clean{position:absolute;inset:0;opacity:0;border-radius:10px;background:var(--sx-surface-2);display:flex;align-items:center;gap:11px;padding:0 12px;font-size:12.5px;color:#f3f4ec;overflow:hidden;white-space:nowrap}
.sx-chip .clean .t{font-size:11px;color:var(--sx-muted);width:38px;flex-shrink:0;font-variant-numeric:tabular-nums}
.sx-chip .clean b{font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.sx-chip .clean.kpi{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.sx-chip .clean.kpi span{font-size:8.5px;letter-spacing:.11em;color:var(--sx-muted);text-transform:uppercase}
.sx-chip .clean.kpi strong{font-family:var(--heading);font-weight:600;font-size:clamp(22px,2vw,28px);letter-spacing:-.05em;line-height:1}
.sx-chip .clean.kpi.hl{background:var(--lime);color:var(--ink)}
.sx-chip .clean.kpi.hl span{color:var(--ink);opacity:.7}
.sx-stage-note{position:absolute;right:56px;bottom:22px;margin:0}
.sx-try{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center;padding-top:40px}
.sx-h3{font-family:var(--heading);font-weight:600;font-size:clamp(36px,4vw,54px);letter-spacing:-.06em;line-height:1;margin-top:22px}
.sx-h3 em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;color:var(--lime);letter-spacing:-.06em}

/* Títulos que suben palabra por palabra */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .12em 0;margin:0 -.06em -.12em 0}
.wi{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0) * 45ms)}
.is-revealed .wi,.wi.in{transform:none}

/* Pequeños movimientos permanentes */
@keyframes mg-spin{to{rotate:360deg}}
@keyframes mg-breathe{50%{scale:1.07;opacity:.55}}
@keyframes mg-bob{50%{translate:0 4px}}
@keyframes mg-glow{50%{box-shadow:0 0 0 7px #cfef5226}}
.hero-spark,.heading-spark{animation:mg-spin 16s linear infinite}
.target-ring{animation:mg-breathe 3.2s ease-in-out infinite}
.target-ring:nth-child(2){animation-delay:.4s}.target-ring:nth-child(3){animation-delay:.8s}
.art-flow>i{animation:mg-bob 1.6s ease-in-out infinite}
.art-flow>i:nth-of-type(2){animation-delay:.3s}
.art-system .mini-cal i.on{animation:mg-breathe 2.4s ease-in-out infinite}
.art-system .mini-cal i:nth-child(3n){animation-delay:.6s}
.status-dot{animation:mg-glow 2.2s ease-in-out infinite}
.button{will-change:translate}

@media(max-width:1100px){
  .sx-try{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media(max-width:760px){
  .sx{padding-block:0 84px}
  .sx-pin{height:230vh}
  .sx-stage .sx-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:14px;padding-top:84px;padding-bottom:30px;align-items:start}
  .sx-stage .sx-copy h2{font-size:42px;margin-top:14px}
  .sx-stage .sx-lead{margin-top:12px;font-size:13.5px}
  .sx-meter{margin-top:14px}
  .sx-meter b{font-size:26px}
  .sx-area{height:100%}
  .sx-board{padding:11px;gap:6px}
  .sx-bkpis>div{height:54px}
  .sx-brow{height:33px}
  .sx-chip .clean{font-size:11.5px;padding:0 9px;gap:7px}
  .sx-chip .hand.note{font-size:19px;padding:6px 12px 4px}
  .sx-chip .hand.bubble{font-size:12.5px}
  .m-hide{display:none!important}
  .sx-stage-note{right:20px;bottom:10px}
}
@media(prefers-reduced-motion:reduce){
  .wi{transform:none}
}