/* ComandARE · landing. Sin terceros: la fuente (Manrope, SIL OFL, ver fonts/Manrope-OFL.txt) y los íconos son propios y van dentro de esta carpeta. */
@font-face{font-family:"Manrope";src:url("fonts/Manrope-Variable.ttf") format("truetype");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --primary:#A43F24;--on-primary:#FFFFFF;--accent:#FFA776;
  --bg:#FBF8F3;--bg-alt:#F4EEE6;--surface:#FFFFFF;--surface-2:#FCEDE5;
  --ink:#14252A;--muted:#46565B;--line:#E2D9CE;--ok:#14643C;--ok-bg:#E4F4EA;
  --link:#A43F24;--glow-1:rgba(255,167,118,.55);--glow-2:rgba(164,63,36,.22);
  --shadow:0 1px 2px rgba(20,37,42,.06),0 12px 32px -12px rgba(20,37,42,.22);
  --radius:20px;--radius-sm:12px;
  --font:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --maxw:1180px;--gutter:clamp(16px,4vw,32px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --primary:#FFA776;--on-primary:#2A1008;--accent:#FFA776;
    --bg:#0D191D;--bg-alt:#111F24;--surface:#16272C;--surface-2:#1E3036;
    --ink:#EDF3F3;--muted:#A9B9BC;--line:#27393E;--ok:#6EDC9A;--ok-bg:#12352A;
    --link:#FFB68F;--glow-1:rgba(255,167,118,.28);--glow-2:rgba(164,63,36,.45);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -14px rgba(0,0,0,.7);color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --primary:#FFA776;--on-primary:#2A1008;--accent:#FFA776;
  --bg:#0D191D;--bg-alt:#111F24;--surface:#16272C;--surface-2:#1E3036;
  --ink:#EDF3F3;--muted:#A9B9BC;--line:#27393E;--ok:#6EDC9A;--ok-bg:#12352A;
  --link:#FFB68F;--glow-1:rgba(255,167,118,.28);--glow-2:rgba(164,63,36,.45);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -14px rgba(0,0,0,.7);color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--link)}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:12px;inset-block-start:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none}
.skip:focus{inset-block-start:12px}
.wrap{max-inline-size:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.soon{display:inline-block;padding:1px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:.8125rem;font-weight:700;line-height:1.5;border:1px solid var(--line)}
.logo{block-size:auto}
.logo-dark{display:none}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-light{display:none}:root:not([data-theme="light"]) .logo-dark{display:block}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-block-size:48px;padding:0 24px;border-radius:14px;border:1.5px solid transparent;font:inherit;font-weight:800;font-size:1rem;text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease}
.btn svg{inline-size:20px;block-size:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:0 10px 24px -10px var(--primary)}
.btn-primary:hover{box-shadow:0 16px 30px -10px var(--primary)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--primary)}
.btn-light{background:#fff;color:#14252A}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-lg{min-block-size:54px;padding:0 28px;font-size:1.0625rem}
.btn-sm{min-block-size:42px;padding:0 18px;font-size:.9375rem}

/* ---------- barra superior ---------- */
.top{position:sticky;inset-block-start:0;z-index:50;background:var(--bg);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-block-end:1px solid transparent;transition:border-color .2s ease}
.top.is-scrolled{border-block-end-color:var(--line)}
.top-in{display:flex;align-items:center;gap:20px;min-block-size:68px}
.brand{display:inline-flex}
.links{display:none;margin-inline-start:auto;gap:6px}
.links a{padding:8px 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.9375rem}
.links a:hover{background:var(--surface-2)}
.top-actions{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.theme{display:inline-grid;place-items:center;inline-size:44px;block-size:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.theme svg{grid-area:1/1;inline-size:22px;block-size:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme .i-moon{display:none}
:root[data-theme="dark"] .theme .i-sun{display:none}
:root[data-theme="dark"] .theme .i-moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .i-sun{display:none}:root:not([data-theme="light"]) .theme .i-moon{display:block}}
@media (min-width:900px){.links{display:flex}.top-actions{margin-inline-start:0}}
@media (max-width:480px){.hide-sm{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:clip;padding-block:clamp(32px,6vw,72px) clamp(56px,8vw,104px)}
.aura{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.aura-a{inline-size:min(620px,80vw);block-size:min(620px,80vw);inset-block-start:-12%;inset-inline-end:-10%;background:radial-gradient(circle at 40% 40%,var(--glow-1),transparent 66%);animation:drift 16s ease-in-out infinite alternate}
.aura-b{inline-size:min(520px,70vw);block-size:min(520px,70vw);inset-block-end:-18%;inset-inline-start:-12%;background:radial-gradient(circle at 60% 50%,var(--glow-2),transparent 68%);animation:drift 20s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(24px,30px,0) scale(1.08)}}
.hero-in{position:relative;z-index:1;display:grid;gap:clamp(36px,6vw,72px);align-items:center}
@media (min-width:1000px){.hero-in{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:800;font-size:.875rem}
.dot{inline-size:10px;block-size:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}80%,100%{box-shadow:0 0 0 10px transparent}}
h1{margin-block:18px 18px;font-size:clamp(2.2rem,6.2vw,4rem);line-height:1.06;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--primary),#E07A4C 55%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] h1 em{background:linear-gradient(100deg,#FFC9A8,var(--accent));-webkit-background-clip:text;background-clip:text}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) h1 em{background:linear-gradient(100deg,#FFC9A8,var(--accent));-webkit-background-clip:text;background-clip:text}}
.lead{max-inline-size:34em;font-size:clamp(1.0625rem,2.4vw,1.25rem);color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:28px}
.chips{display:flex;flex-wrap:wrap;gap:8px 18px;margin-block-start:26px;color:var(--muted);font-weight:700;font-size:.9375rem}
.chips li{display:inline-flex;align-items:center;gap:8px}
.chips li::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:var(--primary)}

/* ---------- maqueta ---------- */
.stage{position:relative;perspective:1200px}
.device{position:relative;border-radius:26px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:14px;transform:rotateY(-6deg) rotateX(3deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.stage:hover .device{transform:rotateY(-2deg) rotateX(1deg)}
.device-bar{display:flex;align-items:center;gap:7px;padding:2px 6px 12px}
.d-dot{inline-size:10px;block-size:10px;border-radius:50%;background:var(--line)}
.d-dot:nth-child(1){background:#E5675A}.d-dot:nth-child(2){background:#F2BE4B}.d-dot:nth-child(3){background:#5CC48A}
.d-title{margin-inline-start:8px;font-weight:800;font-size:.9375rem}
.d-money{margin-inline-start:auto;display:grid;text-align:end;line-height:1.1}
.d-money small{font-size:.6875rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.d-money b{font-size:1.125rem;font-variant-numeric:tabular-nums}
.lanes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;border-radius:16px;background:var(--bg-alt);min-block-size:236px}
.lane{padding:8px 6px;border-radius:12px;background:var(--surface);background:color-mix(in srgb,var(--surface) 60%,transparent);border:1px dashed var(--line)}
.lane .lane-name{display:block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center}
.mini{display:grid;gap:6px;margin-block-start:10px;opacity:.55}
.mini i{display:block;block-size:34px;border-radius:9px;background:linear-gradient(90deg,var(--line),transparent 140%)}
.ticket{position:absolute;inset-block-start:46px;inset-inline-start:calc(0% + 10px);inline-size:calc(25% - 11px);min-inline-size:0;padding:9px 9px 8px;border-radius:14px;background:var(--surface);border:1.5px solid var(--primary);box-shadow:0 16px 30px -12px rgba(0,0,0,.35);font-size:.75rem;line-height:1.3;transform:translateX(calc(var(--step,0) * (100% + 8px)));transition:transform .7s cubic-bezier(.65,0,.25,1),border-color .4s ease,box-shadow .4s ease}
.ticket[data-step="0"]{--step:0}.ticket[data-step="1"]{--step:1}.ticket[data-step="2"]{--step:2}.ticket[data-step="3"]{--step:3}
.ticket header{display:flex;flex-direction:column;gap:3px}
.ticket header b{font-size:.875rem}
.status{align-self:flex-start;padding:1px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink);font-weight:800;font-size:.6875rem;transition:background-color .3s ease,color .3s ease}
.ticket ul{margin-block:7px;display:grid;gap:3px}
.ticket li{display:flex;justify-content:space-between;gap:6px}
.ticket li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticket footer{display:flex;justify-content:space-between;border-block-start:1px solid var(--line);padding-block-start:5px;font-variant-numeric:tabular-nums}
.ticket[data-step="2"] .status,.ticket[data-step="3"] .status{background:var(--ok-bg);color:var(--ok)}
.ticket[data-step="3"]{border-color:var(--ok);box-shadow:0 16px 30px -12px rgba(20,100,60,.5)}
.check{position:absolute;inset-block-start:-12px;inset-inline-end:-10px;inline-size:28px;block-size:28px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1) .5s}
.check svg{inline-size:16px;block-size:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ticket[data-step="3"] .check{transform:scale(1)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-block-start:12px;counter-reset:t}
.timeline li{position:relative;padding-block-start:14px;font-size:.6875rem;line-height:1.25;font-weight:700;color:var(--muted);text-align:center;transition:color .3s ease}
.timeline li::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:5px;border-radius:99px;background:var(--line);transition:background-color .4s ease}
.stage[data-step="0"] [data-t="0"],.stage[data-step="1"] [data-t="1"],.stage[data-step="2"] [data-t="2"],.stage[data-step="3"] [data-t="3"]{color:var(--ink)}
.stage[data-step="0"] [data-t="0"]::before,.stage[data-step="1"] [data-t="0"]::before,.stage[data-step="1"] [data-t="1"]::before,.stage[data-step="2"] [data-t="0"]::before,.stage[data-step="2"] [data-t="1"]::before,.stage[data-step="2"] [data-t="2"]::before,.stage[data-step="3"] .timeline li::before{background:var(--primary)}
.stage[data-step="3"] .timeline li::before{background:var(--ok)}
.float{position:absolute;display:grid;gap:0;padding:10px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);line-height:1.2;animation:bob 6s ease-in-out infinite}
.float b{font-size:.9375rem}.float span{font-size:.75rem;color:var(--muted);font-weight:700}
.float-a{inset-block-start:-26px;inset-inline-start:38%}
.float-b{inset-block-end:-52px;inset-inline-start:-4%;animation-delay:-3s}
.float-a b{color:var(--ok)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (max-width:560px){
  .device{transform:none;padding:10px}
  .lanes{padding:6px;gap:5px;min-block-size:214px}
  .lane .lane-name{font-size:.625rem;letter-spacing:.03em}
  .ticket{inset-inline-start:6px;inline-size:calc(25% - 7px);padding:7px 6px;font-size:.625rem;transform:translateX(calc(var(--step,0) * (100% + 5px)))}
  .ticket header b{font-size:.75rem}.status{font-size:.5625rem;padding:1px 6px}
  .timeline li{font-size:.625rem}
  .stage{margin-block:48px 68px}
  .ticket ul{display:none}
  .ticket{padding:8px 6px 7px}
  .float-a{inset-block-start:-46px;inset-inline-start:auto;inset-inline-end:4%}.float-b{inset-inline-start:0;inset-block-end:-58px}
  .cta .btn{flex:1 1 100%}
}

/* ---------- secciones ---------- */
.sec{padding-block:clamp(56px,9vw,112px)}
.sec-alt{background:var(--bg-alt)}
.kicker{font-weight:800;font-size:.875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--link)}
h2{margin-block:10px 14px;font-size:clamp(1.8rem,4.4vw,2.9rem);line-height:1.1;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
.sub{max-inline-size:40em;color:var(--muted);font-size:1.125rem}
.grid{display:grid;gap:16px;margin-block-start:40px;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.card{position:relative;padding:26px 24px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.card h3{margin-block:16px 8px;font-size:1.25rem;letter-spacing:-.015em}
.card p{color:var(--muted);font-size:1rem}
.ico{display:inline-grid;place-items:center;inline-size:52px;block-size:52px;border-radius:16px;background:var(--surface-2);color:var(--primary);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.card:hover .ico{transform:rotate(-6deg) scale(1.08)}
.ico svg{inline-size:28px;block-size:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card-cta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;background:linear-gradient(150deg,#B4482A,#7E2D17);border-color:transparent;color:#fff}
@media (min-width:900px){.card-cta{grid-column:span 2}}
.card-cta h3{margin:0;color:#fff}
.card-cta p{color:rgba(255,255,255,.92)}

.steps{display:grid;gap:16px;margin-block-start:40px;counter-reset:s;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.step{position:relative;padding:26px 22px 24px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.num{display:inline-grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-weight:800;font-size:1.125rem}
.step h3{margin-block:16px 8px;font-size:1.1875rem}
.step p{color:var(--muted);font-size:1rem}
@media (min-width:900px){.step:not(:last-child)::after{content:"";position:absolute;inset-block-start:48px;inset-inline-start:calc(100% + 1px);inline-size:16px;block-size:2px;background:repeating-linear-gradient(90deg,var(--primary) 0 4px,transparent 4px 8px)}}

.mx{display:grid;gap:clamp(32px,6vw,72px);align-items:center}
@media (min-width:960px){.mx{grid-template-columns:1.05fr .95fr}}
.ticks{display:grid;gap:18px;margin-block-start:26px}
.ticks li{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start}
.ticks svg{inline-size:30px;block-size:30px;padding:5px;border-radius:50%;background:var(--ok-bg);fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mx-art{position:relative;display:grid;place-items:center;padding:clamp(18px,4vw,36px);border-radius:28px;background:linear-gradient(160deg,var(--surface-2),var(--bg-alt));border:1px solid var(--line)}
.receipt{inline-size:min(100%,340px);padding:22px 22px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font-variant-numeric:tabular-nums;transform:rotate(-2deg);transition:transform .4s ease}
.mx-art:hover .receipt{transform:rotate(0)}
.r-head{display:grid;margin-block-end:12px;padding-block-end:12px;border-block-end:1px dashed var(--line)}
.r-head b{font-size:1.0625rem}.r-head span{font-size:.8125rem;color:var(--muted)}
.r-row{display:flex;justify-content:space-between;gap:10px;padding-block:3px;font-size:.9375rem}
.r-total{display:flex;justify-content:space-between;align-items:baseline;margin-block-start:10px;padding-block-start:12px;border-block-start:1px dashed var(--line);font-size:1.125rem}
.r-total small{font-size:.75rem;color:var(--muted)}
.r-foot{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-block-start:14px;font-size:.8125rem;color:var(--muted)}
.paid{padding:2px 10px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-weight:800}

.sec-band{background:linear-gradient(150deg,#B4482A 0%,#7E2D17 70%);color:#fff;padding-block:clamp(48px,7vw,88px)}
.band{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.band{grid-template-columns:1.4fr .6fr}}
.sec-band h2{color:#fff}
.kicker-on{color:#FFEFE6}
.sub-on{color:rgba(255,255,255,.94)}
.band-cta{display:flex;flex-wrap:wrap;gap:12px}
@media (min-width:900px){.band-cta{flex-direction:column;align-items:stretch}}

.foot{padding-block:40px 48px;border-block-start:1px solid var(--line)}
.foot-in{display:grid;gap:20px}
@media (min-width:760px){.foot-in{grid-template-columns:1.3fr 1fr auto;align-items:start}}
.foot-brand p{margin-block-start:10px;color:var(--muted);font-size:.9375rem;max-inline-size:28em}
.foot-links{display:grid;gap:8px;font-weight:700}
.foot-links a{color:var(--ink)}
.copy{color:var(--muted);font-size:.9375rem}
.privacy{color:var(--muted);font-size:.9375rem;max-inline-size:34em}
.nojs{padding:12px var(--gutter);text-align:center;background:var(--surface-2)}

/* ---------- aparecer al hacer scroll (solo si hay JavaScript) ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}
.js .grid .reveal:nth-child(3n+2),.js .steps .reveal:nth-child(2){transition-delay:.08s}
.js .grid .reveal:nth-child(3n),.js .steps .reveal:nth-child(3){transition-delay:.16s}
.js .steps .reveal:nth-child(4){transition-delay:.24s}

/* ---------- movimiento reducido: sin animaciones; la maqueta muestra el final y todos los pasos ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .device{transform:none}
  .stage .ticket{--step:3}
  .stage .ticket .check{transform:scale(1)}
  .stage .ticket .status{background:var(--ok-bg);color:var(--ok)}
  .stage .timeline li::before{background:var(--ok)}
  .stage .timeline li{color:var(--ink)}
}