/* Paleta oficial DEEC Studio: blanco, azul tecnológico y grafito */
:root{
  --bg:#FFFFFF; --bg2:#F9FAFB; --card:#FFFFFF;
  --fg:#111827; --text:#4B5563; --muted:#6B7280;
  --acc:#2563EB; --acc-hover:#1D4ED8; --acc-dark:#3B82F6; --accfg:#FFFFFF;
  --line:#E5E7EB; --line-strong:#D1D5DB; --g100:#F3F4F6; --g200:#E5E7EB;
  --sans:"Manrope","Raleway","Segoe UI",system-ui,sans-serif; /* Manrope solo carga dígitos y $ % : */
  --logo:"Cormorant Garamond",Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:72px}
body{font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;letter-spacing:.005em;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.wrap{max-width:1180px;margin-inline:auto}

h1,h2,h3{font-weight:300}
h1{font-size:clamp(40px,6vw,76px);line-height:1.04;letter-spacing:-.025em;max-width:15ch}
h2{font-size:clamp(32px,4vw,44px);line-height:1.12;letter-spacing:-.02em;margin-bottom:40px}
h3{font-size:26px;line-height:1.2;letter-spacing:-.01em}
em{font-style:normal;color:var(--muted)}
.lead{font-size:18px;color:var(--text);max-width:58ch}
.eyebrow{display:block;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin-bottom:20px}
.head{max-width:780px;margin-bottom:56px}
.head h2{margin-bottom:20px}

/* Botón */
.btn{display:inline-block;background:var(--acc);color:var(--accfg);font-weight:500;font-size:14px;letter-spacing:.04em;padding:13px 28px;border-radius:2px;transition:transform .25s,background .25s}
.btn:hover{transform:translateY(-2px);background:var(--acc-hover)}

/* Navegación */
.nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 6vw}
.nav__links{display:flex;gap:clamp(20px,2.4vw,36px);font-size:14px;font-weight:400;letter-spacing:.04em;white-space:nowrap}
.nav__links a{color:var(--text);transition:color .2s}
.nav__links a:hover{color:var(--acc)}
.logo{display:inline-flex;align-items:center;color:var(--fg);line-height:0}
.logo__svg{display:block;height:24px;width:auto;aspect-ratio:298/51}

/* Placeholders de fotografía */
.ph{display:grid;place-items:center;text-align:center;padding:12px;background:repeating-linear-gradient(135deg,var(--g100) 0 14px,var(--g200) 14px 28px);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.ph span{opacity:1}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.sprite{position:absolute;width:0;height:0}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__bg::after{content:"";position:absolute;right:-5%;top:50%;width:70%;aspect-ratio:1;translate:0 -50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 12%,transparent),color-mix(in srgb,var(--acc) 0%,transparent) 62%)}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2vw;align-items:center;max-width:1480px;margin-inline:auto;padding:9vh 3vw 9vh 6vw}
.hero__copy{max-width:620px}

/* Entrada */
.rv{animation:rv .8s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0s)}
@keyframes rv{from{opacity:0;transform:translateY(16px)}}

.pill{display:block;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin-bottom:28px}
.hero h1{font-size:clamp(42px,5.1vw,80px);font-weight:500;line-height:.98;letter-spacing:-.035em;max-width:none;margin-bottom:28px}
.hero .hl,.hero .dot{color:var(--acc)}
.hero .lead{font-size:clamp(16px,1.35vw,20px);margin-bottom:32px;max-width:46ch}
.btn--hero{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;font-size:15px;font-weight:500;letter-spacing:.01em;padding:0 24px;border-radius:7px;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--acc) 50%,transparent);transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn--hero .ic{width:1.15em;height:1.15em;stroke-width:1.6;transition:transform .2s}
.btn--hero:hover{background:var(--acc-hover);transform:translateY(-1px);box-shadow:0 10px 20px -10px color-mix(in srgb,var(--acc) 55%,transparent)}
.btn--hero:hover .ic{transform:translateX(2px)}
.btn--hero:active{transform:translateY(0);box-shadow:0 3px 8px -6px color-mix(in srgb,var(--acc) 55%,transparent)}
.btn--hero:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 40%,transparent);outline-offset:3px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.btn--ghost{background:var(--card);color:var(--fg);border:1px solid var(--line-strong);box-shadow:none}
.btn--ghost:hover{background:var(--g100);border-color:var(--acc);color:var(--acc);box-shadow:none}
.btn--ghost:active{box-shadow:none}
.perks{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:12px;margin:0 0 32px;max-width:none}
.perks li{display:flex;align-items:center;justify-content:flex-start;gap:10px}
.perks li>div{text-align:left}
.perks__ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--acc-l);color:var(--acc)}
.perks b{display:block;font-size:14px;font-weight:500;line-height:1.25;margin-bottom:2px}
.perks small{display:block;font-size:12.5px;line-height:1.35;color:var(--muted)}

/* Ecosistema */
.eco{container-type:inline-size;width:100%;margin-right:-1vw}
.eco__stage{position:relative;aspect-ratio:1000/760;font-size:1cqw;color:var(--fg)}
.eco__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:draw 1.3s cubic-bezier(.4,0,.2,1) .7s backwards}
@keyframes draw{from{clip-path:circle(0% at 58% 52.6%)}to{clip-path:circle(120% at 58% 52.6%)}}
.ln path{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-dasharray:5 7;vector-effect:non-scaling-stroke}
.ln circle{fill:var(--acc)}
.ln--a path,.ln--b path,.ln--c path{opacity:.8}
.ln--d path,.ln--e path,.ln--f path{opacity:.4}
.ln--a circle,.ln--b circle,.ln--c circle{opacity:.9}
.ln--d circle,.ln--e circle,.ln--f circle{opacity:.45}

/* Negocio central */
.core{position:absolute;left:58%;top:52.6%;width:25%;aspect-ratio:1;translate:-50% -50%;animation:rv .9s cubic-bezier(.2,.7,.2,1) .45s backwards}
.core::before{content:"";position:absolute;inset:-3.4em;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc) 20%,transparent);background:color-mix(in srgb,var(--acc) 5%,transparent)}
.core::after{content:"";position:absolute;inset:-7em;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc) 10%,transparent)}
.core img{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;object-fit:cover;border:.9em solid var(--card);box-shadow:0 0 0 1px var(--line),0 3em 6em -2em color-mix(in srgb,var(--acc) 40%,transparent)}
.core__label{position:absolute;z-index:2;left:50%;bottom:-1.6em;translate:-50% 0;display:flex;align-items:center;gap:.7em;white-space:nowrap;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.55em 1.4em .55em .55em;font-size:1.75em;font-weight:500;box-shadow:0 .8em 1.8em -.8em color-mix(in srgb,var(--shadow) 25%,transparent)}
.core__label i{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:.45em;background:var(--acc);color:var(--accfg)}
.core__label .ic{width:1em;height:1em}

/* Ventanas */
.win{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:1.4em;padding:1.6em 1.8em 1.8em;box-shadow:0 .1em .3em color-mix(in srgb,var(--shadow) 5%,transparent),0 1.4em 2.6em -.9em color-mix(in srgb,var(--shadow) 16%,transparent),0 3.4em 7em -2.4em color-mix(in srgb,var(--acc) 20%,transparent);transition:transform .3s,box-shadow .3s;animation:rv .8s cubic-bezier(.2,.7,.2,1) var(--d) backwards,float 9s ease-in-out var(--f) infinite}
.win:hover{transform:translateY(-.5em);box-shadow:0 .1em .3em color-mix(in srgb,var(--shadow) 5%,transparent),0 2em 3.2em -.9em color-mix(in srgb,var(--shadow) 20%,transparent),0 3.4em 7em -2.4em color-mix(in srgb,var(--acc) 28%,transparent)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -.5em}}
.win--a{--d:.8s;--f:1.6s;left:3%;top:2.6%;width:41%}
.win--b{--d:.95s;--f:2.4s;left:70%;top:8%;width:30%}
.win--c{--d:1.1s;--f:3.2s;left:14.5%;top:53%;width:32%}
.win__head{display:flex;align-items:center;gap:.8em;margin-bottom:1.1em;font-size:1.4em;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.win__head .ic{width:1.3em;height:1.3em}

/* A: sitio web */
.web{border:1px solid var(--line);border-radius:.9em;overflow:hidden;background:var(--card)}
.web__bar{display:flex;gap:.6em;padding:.9em 1.2em;background:var(--g100)}
.web__bar i{width:.8em;height:.8em;border-radius:50%;background:var(--line-strong)}
.web__hero{position:relative;aspect-ratio:16/8.4;background:#14100c url(assets/web-hero.svg) center/cover;color:var(--inv-fg)}
.web__hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.9),rgba(10,8,6,.35) 60%,rgba(10,8,6,0))}
.web__nav{position:absolute;z-index:1;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:1em 1.5em}
.web__logo{font-family:var(--logo);font-weight:600;font-size:1.55em;letter-spacing:.14em}
.web__links{display:flex;align-items:center;gap:1.4em;font-size:1.05em;font-weight:400}
.web u,.web__links u{text-decoration:none;background:#E9C79B;color:#1a1208;font-weight:500;border-radius:.5em;padding:.45em 1em}
.web__copy{position:absolute;z-index:1;left:1.8em;bottom:3.6em}
.web__copy p{font-family:var(--logo);font-weight:500;font-size:2.7em;line-height:1.08;max-width:9em;margin-bottom:.7em}
.web__copy u{display:inline-block;font-size:1.05em}
.web__svc{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;padding:0 1.1em 1.1em;margin-top:-2.8em;background:linear-gradient(#0000 2.8em,var(--card) 2.8em)}
.web__svc div{display:flex;flex-direction:column;align-items:center;gap:.5em;background:var(--card);border:1px solid var(--line);border-radius:.7em;padding:1em .4em;font-size:1.05em;color:var(--fg);text-align:center;box-shadow:0 .6em 1.2em -.6em color-mix(in srgb,var(--shadow) 25%,transparent)}
.web__svc .ic{width:2em;height:2em}

/* B: panel operativo */
.adm{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4em}
.adm__nav{display:grid;gap:.3em;align-content:start}
.adm__nav li{display:flex;align-items:center;gap:.6em;padding:.7em .7em;border-radius:.6em;font-size:1.05em;color:var(--text);white-space:nowrap}
.adm__nav .ic{width:1.3em;height:1.3em;color:var(--muted)}
.adm__nav .on{background:var(--acc-l);color:var(--acc)}
.adm__nav .on .ic{color:var(--acc)}
.cal{margin-bottom:1em}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9em;font-size:1.25em}
.cal__head b{font-weight:500}
.cal__head span{display:flex;gap:.4em;color:var(--muted)}
.cal__head .ic{width:1.1em;height:1.1em}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:.7em;text-align:center;font-size:1.05em;font-style:normal;color:var(--text)}
.cal__grid i{display:block;font-style:normal;line-height:2em}
.cal__grid .wd{color:var(--muted);font-weight:500;font-size:.95em}
.cal__grid .on{background:var(--acc);color:var(--accfg);border-radius:50%;width:2em;margin:auto;font-weight:500}
.cal__grid .soft{background:var(--acc-l);color:var(--acc);border-radius:50%;width:2em;margin:auto;font-weight:500}
.appt{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;grid-template-areas:"av nm tm" "av sv sv";column-gap:.9em;row-gap:.2em;align-items:center;padding:.9em .2em;border-top:1px solid var(--line)}
.appt .av{grid-area:av}
.appt b{grid-area:nm;font-size:1.2em;font-weight:500;white-space:nowrap}
.appt time{grid-area:tm;justify-self:end;text-align:center;font-size:1.05em;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;color:var(--acc);background:var(--acc-l);padding:.5em .7em}
.appt small{grid-area:sv;font-size:1.05em;color:var(--muted);white-space:nowrap}

/* C: membresía y pago */
.mem__t{font-size:1.5em;font-weight:500;margin-bottom:1.7em}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.plan{position:relative;display:grid;justify-items:start;gap:.15em;padding:1.2em .9em .9em;border:1px solid var(--line);border-radius:.8em;background:var(--card)}
.plan--on{border-color:var(--acc);background:var(--acc-l);box-shadow:0 0 0 1px var(--acc)}
.plan b{font-size:1.15em;font-weight:500}
.plan strong{font-size:1.6em;font-weight:500;line-height:1.15}
.plan small{font-size:1em;color:var(--muted)}
.plan__r{position:static;display:block;margin-bottom:.5em;width:1.2em;height:1.2em;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--card)}
.plan--on .plan__r{border-color:var(--acc);background:var(--acc);box-shadow:inset 0 0 0 .28em var(--card)}
.plan__badge{position:absolute;top:-.8em;right:.6em;line-height:1.2;background:var(--acc);color:var(--accfg);font-size:.9em;font-weight:500;padding:.25em .8em;border-radius:999px;letter-spacing:.04em}
.mem__inc{display:flex;align-items:center;gap:.6em;margin:1em 0;font-size:1.15em;color:var(--text)}
.mem__inc .ic{width:1.2em;height:1.2em;color:var(--acc)}
.pay{display:flex;align-items:center;gap:1em;margin-top:1.6em;padding:1em 1.1em;border:1px solid var(--line);border-radius:.7em}
.pay__ic{display:grid;place-items:center;flex:none;width:3em;height:2.2em;border-radius:.4em;background:var(--g100);color:var(--text)}
.pay__ic .ic{width:1.5em;height:1.5em}
.pay div{flex:1;min-width:0}
.pay b{display:block;font-size:1.2em;font-weight:500;white-space:nowrap}
.pay small{display:block;font-size:1em;color:var(--muted)}
.pay__ck{display:grid;place-items:center;flex:none;width:1.8em;height:1.8em;border-radius:50%;background:var(--acc-l);color:var(--acc)}
.pay__ck .ic{width:1.1em;height:1.1em}
.sum{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-top:1.6em;padding-top:1.3em;border-top:1px solid var(--line)}
.sum small{display:block;font-size:1.05em;color:var(--muted)}
.sum strong{display:block;font-size:1.9em;font-weight:500;line-height:1.1;white-space:nowrap}
.sub{background:var(--acc);color:var(--accfg);font-size:1.35em;font-weight:500;padding:.75em 1.3em;border-radius:.55em;white-space:nowrap}

/* Etiquetas */
.chip{position:absolute;display:flex;align-items:center;gap:.9em;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.8em 1.8em .8em .8em;font-size:1.5em;line-height:1.2;box-shadow:0 1em 2em -.9em color-mix(in srgb,var(--shadow) 22%,transparent);animation:rv .8s cubic-bezier(.2,.7,.2,1) 1.25s backwards}
.chip i{display:grid;place-items:center;flex:none;width:2.5em;height:2.5em;border-radius:50%;background:var(--acc-l);color:var(--acc)}
.chip b{font-weight:500}
.chip--a{left:46%;top:9%}
.chip--b{left:73%;top:68%}
.chip--c{left:57%;top:84%}
.eco__note{position:absolute;right:0;bottom:-1em;font-size:1.1em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr;gap:56px;padding:8vh 6vw}
  .eco{max-width:780px;margin:0 auto}
}
/* Agrupadores: sin caja en escritorio */
.orbit,.deck{display:contents}
.eco__tabs{display:none}
.orbit__ring{display:block;position:absolute;left:58%;top:52.6%;width:46%;aspect-ratio:1;translate:-50% -50%;border:1.5px dashed color-mix(in srgb,var(--acc) 32%,transparent);border-radius:50%;animation:spin 60s linear infinite}
.orbit__ring i{position:absolute;width:1.1em;height:1.1em;border-radius:50%;background:var(--acc);box-shadow:0 0 0 .5em color-mix(in srgb,var(--acc) 14%,transparent)}
.orbit__ring i:nth-child(1){left:50%;top:0;translate:-50% -50%}
.orbit__ring i:nth-child(2){left:93.3%;top:75%;translate:-50% -50%}
.orbit__ring i:nth-child(3){left:6.7%;top:75%;translate:-50% -50%}
@keyframes spin{to{rotate:360deg}}
@keyframes drawm{from{clip-path:circle(0% at 50% 49.4%)}to{clip-path:circle(150% at 50% 49.4%)}}
.mlines{display:none}
@keyframes floatm{0%,100%{translate:0 0}50%{translate:0 -.35em}}
@keyframes breathe{0%,100%{scale:1}50%{scale:1.025}}

@media (max-width:760px){
  .hero__in{padding:6vh 6vw 8vh}
  .pill{font-size:11px;letter-spacing:.12em;margin-bottom:22px}
  .hero h1{font-size:clamp(43px,12.9vw,60px)}
  .hero .lead{font-size:17px}
  .hero__cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .btn--hero{gap:8px;min-height:46px;font-size:14.5px;padding:0 10px}
  .perks{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;gap:10px;margin-bottom:26px}
  .perks li{min-width:0;gap:7px;justify-content:flex-start;align-items:flex-start}
  .perks li>div{min-width:0}
  .perks__ic{width:28px;height:28px}
  .perks__ic .ic{width:13px;height:13px}
  .perks b{font-size:12px;line-height:1.2}
  .perks small{font-size:10.5px;line-height:1.3}
  .eco{margin-right:0}
  .eco__stage{aspect-ratio:auto;display:block;font-size:3.1cqw}
  .eco__lines{display:none}
  .mlines{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:drawm 1.3s cubic-bezier(.4,0,.2,1) .7s backwards}

  /* Órbita: negocio al centro con anillo giratorio y etiquetas */
  .orbit{display:block;position:relative;width:100%;aspect-ratio:1/1.2}
  .orbit__ring{display:block;position:absolute;left:50%;top:50%;width:86%;aspect-ratio:1;translate:-50% -50%;border:1.5px dashed color-mix(in srgb,var(--acc) 40%,transparent);border-radius:50%;animation:spin 48s linear infinite}
  .orbit__ring i{position:absolute;width:1.1em;height:1.1em;border-radius:50%;background:var(--acc);box-shadow:0 0 0 .5em color-mix(in srgb,var(--acc) 14%,transparent)}
  .orbit__ring i:nth-child(1){left:50%;top:0;translate:-50% -50%}
  .orbit__ring i:nth-child(2){left:93.3%;top:75%;translate:-50% -50%}
  .orbit__ring i:nth-child(3){left:6.7%;top:75%;translate:-50% -50%}
  .core{left:50%;top:50%;width:46%}
  .core::before{inset:-2.2em}
  .core::after{display:none}
  .core__label{font-size:1.45em}
  .chip{font-size:1.2em;padding:.6em 1.2em .6em .6em;gap:.7em}
  .chip--a{left:0;top:0}
  .chip--b{left:auto;right:0;top:15%}
  .chip--c{left:auto;right:4%;top:auto;bottom:0}

  /* Ventanas: carrusel deslizable */
  .deck{display:flex;position:relative;gap:1.4em;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-6vw;padding:1em 6vw 3.4em;scroll-padding-inline:6vw;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .deck::-webkit-scrollbar{display:none}
  .win{position:relative;left:auto;top:auto;width:auto;flex:0 0 92%;scroll-snap-align:center;box-shadow:0 .1em .3em color-mix(in srgb,var(--shadow) 5%,transparent),0 1em 2em -1em color-mix(in srgb,var(--shadow) 18%,transparent),0 1.4em 2.4em -1.6em color-mix(in srgb,var(--acc) 28%,transparent);animation:rv .8s cubic-bezier(.2,.7,.2,1) 1s backwards,floatm 7s ease-in-out var(--f) infinite}
  .win:hover{transform:none}
  .eco__tabs{display:grid;grid-template-columns:repeat(3,1fr);position:relative;width:100%;max-width:30em;margin:0 auto;padding:.4em;background:var(--card);border:1px solid var(--line);border-radius:999px;box-shadow:0 .6em 1.4em -.9em color-mix(in srgb,var(--shadow) 22%,transparent);--i:0}
  .eco__tabs::before{content:"";position:absolute;top:.4em;bottom:.4em;left:.4em;width:calc((100% - .8em)/3);border-radius:999px;background:var(--acc-l);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 30%,transparent);transform:translateX(calc(var(--i)*100%));transition:transform .4s cubic-bezier(.3,.7,.2,1)}
  .eco__tabs span{position:relative;text-align:center;font-size:1.25em;padding:.6em 0;color:var(--muted);transition:color .25s}
  .eco__tabs span.on{color:var(--acc)}
  .eco__note{position:static;text-align:center;margin-top:2.2em}
  .hero__bg::after{left:50%;right:auto;top:54%;width:130%;translate:-50% -50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 10%,transparent),color-mix(in srgb,var(--acc) 0%,transparent) 55%)}
  .chip{animation:rv .8s cubic-bezier(.2,.7,.2,1) 1.25s backwards,floatm 6s ease-in-out var(--cf,2s) infinite}
  .chip--a{--cf:2s}
  .chip--b{--cf:3.2s}
  .chip--c{--cf:4.4s}
  .core img{animation:breathe 8s ease-in-out 2s infinite}

  /* Ajustes de las interfaces en pantalla estrecha */
  .web__hero{aspect-ratio:4/3.4}
  .web__links span{display:none}
  .web__copy{left:1.5em;bottom:4.2em}
  .web__copy p{font-size:2.2em}
  .mem__t{margin-bottom:1.7em}
  .plans{gap:1em}
  .plan{padding:1.4em 1em 1.1em}
  .pay{margin-top:2em;padding:1.2em 1.2em;gap:1.2em}
  .sum{margin-top:2em;padding-top:1.6em;border-top:1px solid var(--line)}
  .adm{grid-template-columns:3.4em minmax(0,1fr);gap:1.3em}
  .adm__nav{gap:.6em}
  .adm__nav li{justify-content:center;height:3.4em;padding:0}
  .adm__nav li span{display:none}
  .adm__nav .ic{width:1.5em;height:1.5em}
}
@media (prefers-reduced-motion:reduce){
  .hero *,.hero *::before{animation:none!important;transition:none!important}
}

/* Secciones */
.section{padding:9vh 6vw}
.section--alt{background:var(--bg2)}
.grid{display:grid;gap:24px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--5{grid-template-columns:repeat(6,1fr)}
.grid--5 .card{grid-column:span 2}
.grid--5 .card:nth-child(n+4){grid-column:span 3}

/* Tarjetas */
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:26px;transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-2px);border-color:var(--acc)}
.card h3{margin-bottom:12px}
.card p,.product p,.list p,.step p{color:var(--text)}
.card--feat{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.section--alt .card{background:var(--card)}

/* Producto (mosaico: esquinas rectas) */
.product{background:var(--card);border:1px solid var(--line);border-radius:0;transition:transform .25s,border-color .25s}
.product:hover{transform:translateY(-2px);border-color:var(--acc)}
.product .ph{aspect-ratio:4/3;border:0;border-bottom:1px solid var(--line)}
.product__body{padding:26px}
.product h3{margin-bottom:10px}
.banner{margin-top:24px;padding:32px 36px;background:var(--bg2);border:1px solid var(--acc);border-radius:6px;font-size:18px}
.banner p{max-width:70ch}

/* Beneficios */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.split__side{position:sticky;top:110px}
.split__side .head{margin-bottom:0}
.split__side .ph{aspect-ratio:4/3;margin-top:40px}
.list li{padding:30px 0;border-top:1px solid var(--line)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list h3{font-size:24px;margin-bottom:8px}

/* Pasos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{border-top:1px solid var(--line);padding-top:28px}
.step__n{display:block;font-size:clamp(44px,5vw,56px);font-weight:300;line-height:1;color:var(--acc);margin-bottom:22px}
.step h3{font-size:24px;margin-bottom:10px}

/* Manifiesto */
.manifesto{padding:16vh 6vw;text-align:center;border-block:1px solid var(--line);background:var(--bg2)}
.manifesto h2{font-size:clamp(34px,5.4vw,64px);max-width:20ch;margin:0 auto 32px;line-height:1.1}
.manifesto p{font-size:18px;color:var(--text)}

/* CTA */
.cta{background:var(--card);border:1px solid var(--acc);box-shadow:0 0 0 1px var(--acc);border-radius:6px;padding:80px 6vw;text-align:center}
.cta h2{max-width:18ch;margin:0 auto 20px}
.cta .lead{margin:0 auto 40px}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.faq__side{position:sticky;top:110px}
.faq__side h2{margin:0}
.faq__list{display:grid;gap:12px}
.q{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 26px;background:var(--card);border:1px solid var(--line);border-radius:6px;font-weight:400;font-size:17px}
.q i{flex:none;width:9px;height:9px;border-right:1.5px solid var(--acc);border-bottom:1.5px solid var(--acc);transform:rotate(45deg) translate(-2px,-2px)}

/* Footer */
.footer{background:var(--inv-bg);color:var(--inv-fg);padding:9vh 6vw 32px}
.footer .logo{color:var(--inv-fg)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:64px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.14)}
.footer__brand p{margin-top:24px;max-width:38ch;font-size:15px;color:var(--inv-fg)}
.footer h4{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--acc-dark);margin-bottom:20px}
.footer li{margin-bottom:12px;font-size:15px}
.footer li a{color:var(--inv-fg);transition:color .2s}
.footer li a:hover{color:var(--inv-fg)}
.footer__copy{padding-top:28px;font-size:11px;color:var(--muted)}

/* Móvil */
@media (max-width:760px){
  .nav__links{display:none}
  .nav__in .btn{padding:11px 18px}
  .logo__svg{height:21px}
  .cta .btn{display:block;text-align:center}
  .grid--3,.steps,.split,.faq,.footer__grid{grid-template-columns:1fr}
  .grid--5{grid-template-columns:1fr}
  .grid--5 .card,.grid--5 .card:nth-child(n+4){grid-column:auto}
  .split,.faq{gap:40px}
  .split__side,.faq__side{position:static}
  .footer__grid{gap:40px}
  .banner{padding:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Burbujas flotantes */
.bubbles{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.bubble{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 24px color-mix(in srgb,var(--shadow) 35%,transparent);animation:float 5s ease-in-out infinite;transition:transform .25s}
.bubble:nth-child(2){animation-delay:-2.5s}
.bubble:hover{transform:scale(1.06)}
.bubble svg{width:28px;height:28px}
.bubble--wa{background:#25d366;color:var(--inv-fg)}
.bubble--faq{background:var(--acc);color:var(--accfg)}
.bubble__tag{position:absolute;right:68px;top:50%;transform:translate(8px,-50%);white-space:nowrap;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:2px;padding:8px 14px;font-size:13px;font-weight:400;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.bubble:hover .bubble__tag,.bubbles.show .bubble__tag{opacity:1;transform:translate(0,-50%)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (max-width:760px){.bubbles{right:16px;bottom:16px}}
@media (prefers-reduced-motion:reduce){.bubble{animation:none}}

/* Menú hamburguesa (solo móvil) */
.burger,.menu{display:none}
.burger{position:relative;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;flex:none}
.burger:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 40%,transparent);outline-offset:2px;border-radius:8px}
.burger span{position:absolute;right:0;width:26px;height:1.5px;border-radius:2px;background:var(--inv-bg);transition:transform .45s cubic-bezier(.7,0,.2,1),top .45s cubic-bezier(.7,0,.2,1),width .3s}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:26px;width:16px}
.burger:hover span:nth-child(2){width:26px}
.burger--close span:nth-child(1),.burger--close span:nth-child(2){top:21px;width:26px}
.burger--close span:nth-child(1){transform:rotate(45deg)}
.burger--close span:nth-child(2){transform:rotate(-45deg)}
html.menu-open{overflow:hidden}

@media (max-width:1080px){
  .nav__links{display:none}
  .nav__in{gap:0}
  .nav__in .btn{margin-left:auto;margin-right:10px;padding:10px 16px;font-size:13px}
  .burger{display:block}
  .menu{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,var(--card) 0%,#F7FAFF 38%,#EAF2FF 72%,var(--info-l) 100%);visibility:hidden;clip-path:circle(0 at calc(100% - 6vw - 13px) 40px);transition:clip-path .75s cubic-bezier(.7,0,.2,1),visibility 0s .75s}
  .menu-open .menu{visibility:visible;clip-path:circle(150% at calc(100% - 6vw - 13px) 40px);transition:clip-path .75s cubic-bezier(.7,0,.2,1),visibility 0s}

  .menu__bg{position:absolute;inset:0;pointer-events:none}
  .menu__bg::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 85% 45% at 85% 100%,color-mix(in srgb,var(--acc) 22%,transparent),color-mix(in srgb,var(--acc) 0%,transparent) 70%),radial-gradient(ellipse 70% 35% at 0% 55%,color-mix(in srgb,var(--acc) 7%,transparent),color-mix(in srgb,var(--acc) 0%,transparent) 70%)}
  .menu__bg::after{display:none}

  .menu__top{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 6vw}
  .menu__nav{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 6vw;overflow-y:auto;overscroll-behavior:contain}
  .menu__nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:clamp(20px,4.2vh,36px) 0;border-bottom:1px solid color-mix(in srgb,var(--shadow) 9%,transparent);font-size:min(8.5vw,36px);font-weight:300;letter-spacing:-.03em;line-height:1.1;color:var(--fg);opacity:0;transform:translateY(28px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1),color .2s}
  .menu-open .menu__nav a{opacity:1;transform:none;transition-delay:calc(.3s + var(--i)*.08s),calc(.3s + var(--i)*.08s),0s}
  .menu__n{font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--acc)}
  .menu__nav .ic{width:22px;height:22px;color:var(--line-strong);transition:transform .25s,color .25s}
  .menu__nav a:first-child{border-top:1px solid color-mix(in srgb,var(--shadow) 9%,transparent)}
  .menu__nav .ic{width:20px;height:20px;flex:none;opacity:.5}
  .menu__nav a:active,.menu__nav a:hover{color:var(--acc)}
  .menu__nav a:active .ic,.menu__nav a:hover .ic{color:var(--acc);transform:translateX(4px)}

  .menu__foot{position:relative;padding:20px 6vw calc(26px + env(safe-area-inset-bottom));opacity:0;transform:translateY(20px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .menu-open .menu__foot{opacity:1;transform:none;transition-delay:.7s}
  .menu__cta{display:grid;gap:10px}
  .menu__cta .btn{width:100%}
  .menu__foot p{margin-top:18px;max-width:36ch;font-size:12.5px;line-height:1.55;color:var(--muted)}
}
@media (prefers-reduced-motion:reduce){
  .menu,.menu__nav a,.menu__foot,.burger span,.menu__bg::after{transition:none!important;animation:none!important}
}

/* Radio de borde uniforme y mínimo (se excluyen la imagen circular del negocio, los anillos, puntos, botones de radio y burbujas flotantes) */
:root{--r:4px}
.btn,.btn--hero,.card,.product,.banner,.cta,.q,.pill,.perks__ic,.core__label,.core__label i,.win,.web,.web u,.web__links u,.web__svc div,.adm__nav li,.av,.cal__grid .on,.cal__grid .soft,.appt time,.plan,.plan__badge,.pay,.pay__ic,.pay__ck,.sub,.chip,.chip i,.eco__tabs,.eco__tabs::before,.bubble__tag,.web__logo{border-radius:var(--r)}
.web__hero,.web__bar,.ph{border-radius:0}

/* Segunda sección: propuesta de valor (dot grid + lista conectada con iconos, sin tarjetas) */
.section--dots{position:relative;overflow:hidden}
.section--dots::before{content:"";position:absolute;inset:-40px 0;translate:0 var(--py,0px);pointer-events:none;background-image:radial-gradient(circle,color-mix(in srgb,var(--acc) 26%,transparent) 1.3px,transparent 1.6px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 80% 90% at 72% 50%,#000 15%,transparent 78%);mask-image:radial-gradient(ellipse 80% 90% at 72% 50%,#000 15%,transparent 78%)}
.section--dots>*{position:relative}
.pillars{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:7vw;align-items:start}
.pillars__head{position:sticky;top:110px}
.pillars__head h2{margin-bottom:20px}
.pillars__head .hl{color:var(--acc)}
.pillars__list{position:relative;padding-left:68px}
.pillars__list li{position:relative;padding:36px 0}
.pillars__list li:first-child{padding-top:8px}
.pillars__list li:last-child{padding-bottom:8px}
.pnode{position:absolute;left:-68px;top:34px;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r);background:var(--card);border:1px solid var(--line-strong);color:var(--muted);transition:background .5s,border-color .5s,color .5s,box-shadow .6s}
.pillars__list li:first-child .pnode{top:6px}
.pnode .ic{width:20px;height:20px}
.pillars__list li.on .pnode{background:var(--acc);border-color:var(--acc);color:var(--accfg);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 14%,transparent)}
.pillars__list li:not(:last-child)::before,.pillars__list li:not(:last-child)::after{content:"";position:absolute;left:-48px;top:54px;height:100%;border-left:1.5px dashed color-mix(in srgb,var(--acc) 40%,transparent)}
.pillars__list li:not(:last-child)::after{border-left:1.5px solid var(--acc);transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.4,0,.2,1) .2s}
.pillars__list li:first-child:not(:last-child)::before,.pillars__list li:first-child:not(:last-child)::after{top:26px;height:calc(100% + 28px)}
.pillars__list li.on:not(:last-child)::after{transform:scaleY(1)}
.pillars__list h3{font-size:clamp(26px,2.8vw,36px);font-weight:300;letter-spacing:-.025em;line-height:1.15;margin-bottom:10px;transition:color .25s}
.pillars__list li:hover h3{color:var(--acc)}
.pillars__list p{max-width:44ch;font-size:17px;color:var(--text)}
.js .pillars__head>*,.js .pillars__list li{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .pillars__head>:nth-child(2){transition-delay:.12s}
.js .pillars__head>:nth-child(3){transition-delay:.24s}
.js .pillars__list li:nth-child(1){transition-delay:.3s}
.js .pillars__list li:nth-child(2){transition-delay:.45s}
.js .pillars__list li:nth-child(3){transition-delay:.6s}
.js .pillars.is-in .pillars__head>*,.js .pillars.is-in .pillars__list li{opacity:1;transform:none}
@media (max-width:900px){
  .pillars{grid-template-columns:1fr;gap:44px}
  .pillars__head{position:static}
  .pillars__list{padding-left:56px}
  .pnode{left:-56px;width:36px;height:36px}
  .pnode .ic{width:18px;height:18px}
  .pillars__list li:not(:last-child)::before,.pillars__list li:not(:last-child)::after{left:-38px;top:52px}
  .pillars__list li:first-child:not(:last-child)::before,.pillars__list li:first-child:not(:last-child)::after{top:24px;height:calc(100% + 28px)}
}
@media (prefers-reduced-motion:reduce){
  .js .pillars__head>*,.js .pillars__list li{opacity:1;transform:none;transition:none}
  .pnode,.pillars__list li:not(:last-child)::after{transition:none}
}

/* Tercera sección: enfoque de producto (showcase interactivo con mockups + tira de integración) */
.showcase__head{max-width:800px;margin:0 auto 56px;text-align:center}
.showcase__head h2{margin-bottom:20px}
.showcase__head .lead{margin-inline:auto}
.showcase__head .hl{color:var(--acc)}

.show__tabs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);max-width:760px;margin:0 auto 48px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 2px color-mix(in srgb,var(--shadow) 4%,transparent),0 14px 30px -18px color-mix(in srgb,var(--shadow) 20%,transparent)}
.show__tabs button{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 12px;border:0;border-radius:var(--r);background:none;font:inherit;font-size:15px;font-weight:400;color:var(--muted);cursor:pointer;overflow:hidden;transition:color .25s,background .25s}
.show__tabs button:hover{color:var(--fg)}
.show__tabs button:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 40%,transparent);outline-offset:-3px}
.show__tabs button.on{color:var(--acc);background:var(--acc-l)}
.show__tabs .ic{width:18px;height:18px;flex:none}
.show__tabs .short{display:none}
.prog{z-index:1;position:absolute;left:16px;right:16px;bottom:7px;height:2px;border-radius:2px;background:var(--acc);transform:scaleX(0);transform-origin:left}
.show__tabs button::after{content:"";position:absolute;left:16px;right:16px;bottom:7px;height:2px;border-radius:2px;background:var(--info-l);opacity:0;transition:opacity .25s}
.show__tabs button.on::after{opacity:1}
.show__tabs button.on .prog{animation:prog 7s linear forwards}
.show.paused .prog{animation-play-state:paused}
.show.manual .prog{animation:none}
.show.manual .show__tabs button.on .prog{transform:scaleX(1)}
@keyframes prog{to{transform:scaleX(1)}}

.show__stage{display:grid}
.show__panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px;align-items:center;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s .6s}
.show__panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .1s,transform .7s cubic-bezier(.2,.7,.2,1) .1s}

.show__frame{container-type:inline-size;position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 1px 3px color-mix(in srgb,var(--shadow) 5%,transparent),0 24px 48px -20px color-mix(in srgb,var(--shadow) 20%,transparent),0 50px 90px -40px color-mix(in srgb,var(--acc) 35%,transparent)}
.show__bar{display:flex;gap:7px;padding:14px 18px;background:var(--g100);border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
.show__bar i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.show__body{position:relative;padding:5cqw;background:radial-gradient(ellipse 80% 70% at 50% 0%,color-mix(in srgb,var(--acc) 10%,transparent),color-mix(in srgb,var(--acc) 0%,transparent) 70%),var(--bg2);border-radius:0 0 var(--r) var(--r)}
.mock{width:min(100%,46em);margin:0 auto;font-size:1.55cqw;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.8em;box-shadow:0 1.6em 3em -1.6em color-mix(in srgb,var(--shadow) 25%,transparent)}
.mock--web{padding:0;border:0;background:none;box-shadow:none}
.mock--web .web{box-shadow:0 1.6em 3em -1.6em color-mix(in srgb,var(--shadow) 30%,transparent)}
.toast{position:absolute;right:2.5cqw;top:1.8cqw;display:flex;align-items:center;gap:.9em;padding:.8em 1.1em .8em .8em;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:1.45cqw;line-height:1.25;box-shadow:0 1em 2em -.8em color-mix(in srgb,var(--shadow) 30%,transparent);animation:floatm 6s ease-in-out infinite}
.toast i{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:var(--r);background:var(--acc);color:var(--accfg)}
.toast .ic{width:1.3em;height:1.3em}
.toast b{display:block;font-weight:500}
.toast small{display:block;color:var(--muted);font-size:.9em}

.show__info .show__ic{display:grid;place-items:center;width:58px;height:58px;margin-bottom:26px;border-radius:var(--r);background:var(--acc);color:var(--accfg);box-shadow:0 0 0 8px color-mix(in srgb,var(--acc) 12%,transparent)}
.show__info .show__ic .ic{width:26px;height:26px}
.show__info h3{font-size:clamp(28px,3vw,40px);font-weight:300;letter-spacing:-.025em;line-height:1.12;margin-bottom:14px}
.show__info p{max-width:34ch;font-size:18px;color:var(--text)}
.show__note{margin-top:28px;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.merge{margin:84px auto 0;max-width:920px;text-align:center}
.merge__chips{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center}
.mchip{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:15px;line-height:1.25;text-align:left;box-shadow:0 12px 24px -14px color-mix(in srgb,var(--shadow) 25%,transparent)}
.mchip i{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r);background:var(--acc-l);color:var(--acc)}
.mchip .ic{width:19px;height:19px}
.mchip b{font-weight:500}
.merge__lines{display:block;width:100%;height:70px;overflow:visible}
.merge__bar{display:flex;align-items:center;gap:22px;padding:26px 32px;background:var(--card);border:1px solid var(--acc);border-radius:var(--r);box-shadow:0 0 0 1px var(--acc),0 30px 60px -36px color-mix(in srgb,var(--acc) 50%,transparent);text-align:left}
.merge__node{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:var(--r);background:var(--acc);color:var(--accfg);box-shadow:0 0 0 7px color-mix(in srgb,var(--acc) 14%,transparent)}
.merge__node .ic{width:24px;height:24px}
.merge__bar p{font-size:18px;color:var(--fg)}

.js .showcase__head,.js .show__tabs,.js .show__stage,.js .merge>*{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .show__tabs{transition-delay:.15s}
.js .show__stage{transition-delay:.3s}
.js .merge>:nth-child(2){transition-delay:.12s}
.js .merge>:nth-child(3){transition-delay:.24s}
.js .showcase.is-in .showcase__head,.js .showcase.is-in .show__tabs,.js .showcase.is-in .show__stage,.js .showcase.is-in .merge>*{opacity:1;transform:none}

@media (max-width:900px){
  .showcase__head{margin-bottom:36px}
  .show__tabs{margin-bottom:32px}
  .show__tabs button{flex-direction:column;gap:6px;padding:12px 4px;font-size:12.5px}
  .show__tabs .long{display:none}
  .show__tabs .short{display:inline}
  .show__panel{grid-template-columns:1fr;gap:32px}
  .show__body{padding:4.5cqw}
  .mock{font-size:3.1cqw;width:100%}
  .toast{font-size:2.9cqw;right:3cqw;top:-3cqw}
  .show__info{text-align:left}
  .show__info p{max-width:none}
  .merge{margin-top:64px}
  .merge__chips{gap:8px}
  .mchip{flex-direction:column;gap:8px;padding:12px 6px;font-size:12px;text-align:center;width:100%}
  .merge__bar{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
  .merge__bar p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .js .showcase__head,.js .show__tabs,.js .show__stage,.js .merge>*{opacity:1;transform:none;transition:none}
  .show__panel,.show__panel.on{transition:none}
  .toast{animation:none}
  .show__tabs button.on .prog{animation:none;transform:scaleX(1)}
}

.mock--web .web__bar{display:none}

/* Tercera sección: mockups detallados (sitio web completo, panel de gestión y configurador de paquete) */
.show__body{padding:4cqw}
.mock--pro{width:100%;font-size:1.42cqw;padding:0;border:0;background:none;box-shadow:none;position:relative;color:var(--fg)}
.mock--pro i,.mock--pro em{font-style:normal}
.mock--pro .ic{width:1.3em;height:1.3em;flex:none}
.mock--pro b{font-weight:500}
.mock--pro small{display:block;color:var(--muted)}
.mock--pro h4,.mock--pro h5{font-weight:500}
.mock--site{margin-bottom:2.6em}

/* 1 · Sitio web profesional */
.s1{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 2em 4em -2em color-mix(in srgb,var(--shadow) 30%,transparent)}
.s1__bar{display:flex;align-items:center;gap:.5em;padding:.7em 1em;background:var(--g100);border-bottom:1px solid var(--line)}
.s1__bar>i{width:.7em;height:.7em;border-radius:50%;background:var(--line-strong)}
.s1__url{display:flex;align-items:center;gap:.5em;margin-left:1em;padding:.35em 1em;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:.9em;color:var(--muted)}
.s1__url .ic{width:1em;height:1em}
.s1__nav{display:flex;align-items:center;gap:2em;padding:1em 1.6em;border-bottom:1px solid var(--line)}
.s1__logo{font-family:var(--logo);font-weight:600;font-size:1.6em;letter-spacing:.14em}
.s1__links{display:flex;gap:1.6em;margin-left:auto;color:var(--text)}
.s1 u{text-decoration:none;display:inline-block;background:var(--inv-bg);color:var(--inv-fg);font-weight:500;padding:.55em 1.2em;border-radius:var(--r)}
.s1__hero{display:grid;grid-template-columns:1.1fr 1fr}
.s1__copy{display:grid;gap:.9em;align-content:center;padding:2.4em 1.8em}
.s1__copy>small{font-size:.85em;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);font-weight:500}
.s1__copy h4{font-family:var(--logo);font-size:2.7em;line-height:1.05;letter-spacing:-.01em}
.s1__copy p{max-width:26em;font-size:1.1em;color:var(--text)}
.s1__btns{display:flex;gap:.8em;margin-top:.3em}
.s1__btns u{background:var(--acc);padding:.8em 1.4em}
.s1__btns s{text-decoration:none;display:inline-block;border:1px solid var(--line-strong);padding:.8em 1.4em;border-radius:var(--r);font-weight:500}
.s1__meta{display:flex;flex-wrap:wrap;gap:.5em 1.4em;margin-top:.5em;font-size:.9em;color:var(--muted)}
.s1__meta span{display:flex;align-items:center;gap:.4em}
.s1__meta .ic{width:1.1em;height:1.1em;color:var(--acc)}
.s1__img{position:relative;min-height:17em;background:#14100c url(assets/web-hero.svg) center/cover}
.s1__svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;padding:1.5em 1.6em;background:var(--bg2);border-top:1px solid var(--line)}
.s1__card{display:grid;grid-template-columns:auto 1fr auto;gap:.9em;align-items:center;padding:.9em 1em;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.s1__card>i{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:var(--r);background:var(--acc-l);color:var(--acc)}
.s1__card b{display:block;font-size:1.05em}
.s1__card strong{font-size:1.25em;font-weight:500}
.s1__gal{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em;padding:0 1.6em 1.6em;background:var(--bg2)}
.s1__gal img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.s1__phone{position:absolute;right:1.4em;bottom:-2.4em;z-index:2;display:grid;gap:.6em;width:10em;padding:1.1em .8em .9em;background:var(--card);border:.35em solid var(--fg);border-radius:var(--r);box-shadow:0 1.8em 3em -1em color-mix(in srgb,var(--shadow) 50%,transparent)}
.s1p__top{display:flex;align-items:center;justify-content:space-between}
.s1p__top b{font-family:var(--logo);font-weight:600;letter-spacing:.12em;font-size:.95em}
.s1p__top .ic{width:1.2em;height:1.2em}
.s1p__img{aspect-ratio:16/10;background:#14100c url(assets/web-hero.svg) center/cover;border-radius:var(--r)}
.s1__phone h5{font-family:var(--logo);font-size:1.2em;line-height:1.1}
.s1__phone u{text-align:center;background:var(--acc);padding:.55em;font-size:.9em}

/* 2 · Herramientas operativas */
.d{display:grid;grid-template-columns:5em 1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 2em 4em -2em color-mix(in srgb,var(--shadow) 30%,transparent)}
.d__side{display:flex;flex-direction:column;align-items:center;gap:.8em;padding:1.2em 0;background:var(--inv-bg);color:var(--muted)}
.d__side>span{display:grid;place-items:center;width:2.8em;height:2.8em;border-radius:var(--r)}
.d__side>span.on{background:var(--acc);color:var(--accfg);box-shadow:0 0 0 .4em color-mix(in srgb,var(--acc) 25%,transparent)}
.d__logo{display:grid;place-items:center;width:2.8em;height:2.8em;margin-bottom:.8em;border-radius:var(--r);background:var(--card);color:var(--acc)}
.d__me{margin-top:auto;display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:var(--r);background:#374151;color:var(--inv-fg);font-size:.9em;font-weight:500}
.d__main{display:grid;gap:1.1em;padding:1.4em 1.6em;background:var(--bg2)}
.d__top{display:flex;align-items:center;gap:1em}
.d__top h4{font-size:1.6em;line-height:1.1}
.d__top small{font-size:.9em}
.d__search{display:flex;align-items:center;gap:.6em;margin-left:auto;padding:.6em 1.1em;background:var(--card);border:1px solid var(--line);border-radius:var(--r);color:var(--muted);font-size:.95em}
.d__bell{display:grid;place-items:center;width:2.5em;height:2.5em;background:var(--card);border:1px solid var(--line);border-radius:var(--r);color:var(--text)}
.d__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.9em}
.kpi{display:grid;gap:.25em;padding:.9em 1em;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.kpi small{font-size:.85em}
.kpi strong{font-size:1.9em;font-weight:500;line-height:1.1}
.kpi .up{display:flex;align-items:center;gap:.35em;font-size:.85em;font-weight:500;color:var(--acc)}
.kpi .up .ic{width:1.1em;height:1.1em}
.kpi .bar{display:block;height:.45em;margin-top:.5em;background:var(--g200);border-radius:var(--r);overflow:hidden}
.kpi .bar b{display:block;height:100%;background:var(--acc)}
.d__body{display:grid;grid-template-columns:1.7fr 1fr;gap:1em}
.d__agenda,.d__inv,.d__recent{padding:1em 1.2em;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.d__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7em}
.d__head b{font-size:1.05em}
.d__chips{display:flex;gap:.4em;font-size:.85em}
.d__chips i{padding:.3em .8em;border-radius:var(--r);color:var(--muted)}
.d__chips i.on{background:var(--acc-l);color:var(--acc);font-weight:500}
.slot{display:grid;grid-template-columns:3.4em 1fr;gap:.8em;align-items:stretch;padding:.45em 0;border-top:1px solid var(--line)}
.slot time{padding-top:.5em;font-size:.85em;color:var(--muted);font-variant-numeric:tabular-nums}
.ev{padding:.55em .9em;background:var(--acc-l);border-left:.3em solid var(--acc);border-radius:var(--r)}
.ev b{display:block;font-size:1em}
.ev small{font-size:.85em}
.ev--now{background:var(--acc);border-left-color:var(--acc-hover)}
.ev--now b,.ev--now small{color:var(--inv-fg)}
.ev--free{display:flex;align-items:center;background:none;border:1px dashed var(--line-strong);border-left-width:1px}
.d__side2{display:grid;gap:1em;align-content:start}
.inv{display:grid;grid-template-columns:1fr auto;gap:.35em .8em;align-items:center;margin-bottom:.8em;font-size:.95em}
.inv>i{grid-column:1/-1;display:block;height:.45em;background:var(--g200);border-radius:var(--r);overflow:hidden}
.inv>i b{display:block;height:100%;background:var(--acc)}
.inv--low>i b{background:var(--muted)}
.inv--low small{display:inline;font-size:.8em;font-weight:500;color:var(--text)}

/* 3 · Funciones comerciales */
.p{display:grid;grid-template-columns:1.3fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 2em 4em -2em color-mix(in srgb,var(--shadow) 30%,transparent)}
.p__cfg{display:grid;gap:1.2em;align-content:start;padding:1.7em}
.p__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1em}
.p__top h4{font-size:1.55em;line-height:1.15}
.p__seg{display:flex;padding:.3em;background:var(--g100);border-radius:var(--r);font-size:.9em}
.p__seg i{padding:.4em 1em;border-radius:var(--r);color:var(--muted)}
.p__seg i.on{background:var(--card);color:var(--fg);font-weight:500;box-shadow:0 .1em .4em color-mix(in srgb,var(--shadow) 12%,transparent)}
.p__opts{display:grid;gap:.8em}
.opt{display:grid;grid-template-columns:auto 1fr auto auto;gap:.9em;align-items:center;padding:.9em 1em;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.opt--on{border-color:var(--acc);background:#F5F9FF;box-shadow:0 0 0 1px var(--acc)}
.opt__ic{display:grid;place-items:center;width:2.8em;height:2.8em;border-radius:var(--r);background:var(--g100);color:var(--muted)}
.opt--on .opt__ic{background:var(--acc-l);color:var(--acc)}
.opt b{display:block;font-size:1.05em}
.opt small{font-size:.85em}
.opt strong{font-size:1.2em;font-weight:500}
.sw{position:relative;width:2.8em;height:1.5em;border-radius:var(--r);background:var(--line-strong)}
.sw::after{content:"";position:absolute;left:.2em;top:.2em;width:1.1em;height:1.1em;border-radius:var(--r);background:var(--card);transition:transform .3s}
.sw.on{background:var(--acc)}
.sw.on::after{transform:translateX(1.3em)}
.p__freq{display:flex;align-items:center;justify-content:space-between;gap:1em}
.p__freq small{font-size:.95em}
.p__chips{display:flex;gap:.5em;font-size:.9em}
.p__chips i{padding:.5em 1em;border:1px solid var(--line);border-radius:var(--r);color:var(--text)}
.p__chips i.on{border-color:var(--acc);background:var(--acc-l);color:var(--acc);font-weight:500}
.p__sum{display:grid;gap:.9em;align-content:start;padding:1.7em;background:var(--bg2);border-left:1px solid var(--line)}
.p__h{font-size:1.2em}
.ln2{display:flex;justify-content:space-between;gap:1em;padding-bottom:.8em;border-bottom:1px solid var(--line);color:var(--text)}
.ln2 em{color:var(--fg);font-weight:500}
.ln2--disc em{color:var(--acc)}
.p__total small{font-size:.9em}
.p__total strong{display:block;font-size:2.4em;font-weight:500;line-height:1.1}
.p__total strong u{text-decoration:none;font-size:.4em;color:var(--muted);letter-spacing:.06em}
.p__sum .pay{margin-top:.2em;padding:.8em 1em;background:var(--card)}
.p__cta{padding:.95em;background:var(--acc);color:var(--accfg);text-align:center;font-weight:500;font-size:1.1em;border-radius:var(--r);box-shadow:0 .9em 1.6em -.8em color-mix(in srgb,var(--acc) 60%,transparent)}

@media (max-width:900px){
  .show__body{padding:4cqw}
  .mock--pro{font-size:3.05cqw}
  .mock--site{margin-bottom:0}
  .s1__links,.s1__phone{display:none}
  .s1__nav{gap:1em;padding:.9em 1.2em}
  .s1__nav u{margin-left:auto}
  .s1__hero{grid-template-columns:1fr}
  .s1__img{order:-1;min-height:11em}
  .s1__copy{padding:1.6em 1.3em}
  .s1__copy h4{font-size:2.3em}
  .s1__svc{grid-template-columns:1fr;padding:1.2em}
  .s1__gal{grid-template-columns:repeat(2,1fr);padding:0 1.2em 1.2em}
  .d{grid-template-columns:1fr}
  .d__side{display:none}
  .d__main{padding:1.2em}
  .d__search{display:none}
  .d__bell{margin-left:auto}
  .d__kpis{grid-template-columns:repeat(2,1fr)}
  .d__body{grid-template-columns:1fr}
  .d__side2{display:none}
  .p{grid-template-columns:1fr}
  .p__cfg{padding:1.3em}
  .p__sum{padding:1.3em;border-left:0;border-top:1px solid var(--line)}
  .p__top{flex-direction:column;gap:.8em}
  .p__freq{flex-direction:column;align-items:flex-start;gap:.6em}
  .opt{grid-template-columns:auto 1fr auto;gap:.7em}
  .opt .sw{grid-column:3;grid-row:1}
  .opt strong{grid-column:2;grid-row:2;font-size:1.05em}
  .opt>div{grid-column:2;grid-row:1}
  .opt__ic{grid-row:1/3}
}
@media (prefers-reduced-motion:reduce){.sw::after{transition:none}}
#sp-1 .show__bar{display:none}
#sp-1 .show__body{border-radius:var(--r)}
.mock--site{margin-bottom:4.2em}
.s1__phone{bottom:-4.2em;right:1em}
@media (max-width:900px){.mock--site{margin-bottom:0}}

/* ====== Tercera sección: mockups animados (escenas tipo video) ====== */
@property --n{syntax:"<integer>";initial-value:0;inherits:false}

/* Cursor simulado */
.cur{position:absolute;left:62%;top:78%;z-index:20;width:1.8em;height:1.8em;opacity:0;pointer-events:none;transition:left 1.15s cubic-bezier(.6,0,.2,1),top 1.15s cubic-bezier(.6,0,.2,1),opacity .35s;filter:drop-shadow(0 .25em .35em color-mix(in srgb,var(--shadow) 45%,transparent))}
.cur svg{display:block;width:100%;height:100%}
.cur.on{opacity:1}
.cur::after{content:"";position:absolute;left:-.45em;top:-.45em;width:1.4em;height:1.4em;border-radius:50%;border:.15em solid var(--acc);opacity:0;transform:scale(.4)}
.cur.click::after{animation:clk .55s ease-out}
@keyframes clk{0%{opacity:.95;transform:scale(.4)}100%{opacity:0;transform:scale(1.9)}}
.toast{opacity:0;transform:translateY(-.6em);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1)}
.mock.st-toast~.toast{opacity:1;transform:none}
@keyframes slidein{to{opacity:1;transform:none}}
@keyframes growx{to{transform:scaleX(var(--w,1))}}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes spin2{to{transform:rotate(360deg)}}

/* ---- 1 · Sitio web: se arma, abre una reserva y la confirma ---- */
.s1{position:relative;transition:opacity .6s ease}
.st-out .s1{opacity:0}
.mock--site .s1__nav,.mock--site .s1__copy>*,.mock--site .s1__card,.mock--site .s1__gal img,.mock--site .s1__phone{opacity:0;transform:translateY(1.4em);transition:opacity .6s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.mock--site .s1__img{opacity:0;transform:scale(1.06);transition:opacity .8s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.st-a1 .s1__nav,.st-a2 .s1__copy>*,.st-a4 .s1__card,.st-a5 .s1__gal img,.st-a6 .s1__phone{opacity:1;transform:none}
.st-a3 .s1__img{opacity:1;transform:none}
.mock--site .s1__copy>:nth-child(2){transition-delay:.1s}
.mock--site .s1__copy>:nth-child(3){transition-delay:.2s}
.mock--site .s1__copy>:nth-child(4){transition-delay:.3s}
.mock--site .s1__copy>:nth-child(5){transition-delay:.4s}
.mock--site .s1__card:nth-child(2),.mock--site .s1__gal img:nth-child(2){transition-delay:.12s}
.mock--site .s1__card:nth-child(3),.mock--site .s1__gal img:nth-child(3){transition-delay:.24s}
.mock--site .s1__gal img:nth-child(4){transition-delay:.36s}
.s1__btns u,.s1__confirm,.p3 .next,.p3 .cta{transition:transform .15s ease,box-shadow .2s}
.st-press .s1__btns u{transform:scale(.93)}
.s1__modal{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:color-mix(in srgb,var(--shadow) 42%,transparent);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
.s1__mc{width:min(22em,88%);padding:1.5em;background:var(--card);border-radius:var(--r);box-shadow:0 2em 4em -1em color-mix(in srgb,var(--shadow) 50%,transparent);transform:translateY(1.6em) scale(.97);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.st-modal .s1__modal{opacity:1;visibility:visible;transition:opacity .4s ease}
.st-modal .s1__mc{transform:none}
.s1__mform{display:grid;gap:.9em}
.s1__mform h5{font-family:var(--sans);font-size:1.4em;line-height:1.2}
.s1__days{display:flex;gap:.6em}
.s1__days span{flex:1;padding:.6em 0;text-align:center;border:1px solid var(--line);border-radius:var(--r);color:var(--text)}
.s1__days span.on{border-color:var(--acc);background:var(--acc-l);color:var(--acc);font-weight:500}
.s1__times{display:flex;gap:.6em}
.s1__times i{flex:1;padding:.75em 0;text-align:center;border:1px solid var(--line);border-radius:var(--r);transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.st-slot .s1__times .t2{background:var(--acc);border-color:var(--acc);color:var(--accfg);box-shadow:0 .6em 1.2em -.5em color-mix(in srgb,var(--acc) 60%,transparent)}
.s1__confirm{display:block;text-align:center;background:var(--acc)!important;color:var(--accfg);padding:.9em!important}
.st-press2 .s1__confirm{transform:scale(.94)}
.s1__mok{display:none;justify-items:center;gap:.5em;padding:.6em 0;text-align:center}
.s1__mok i{display:grid;place-items:center;width:3.6em;height:3.6em;border-radius:var(--r);background:var(--acc);color:var(--accfg);animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.s1__mok i .ic{width:2em;height:2em}
.s1__mok b{font-size:1.3em}
.st-done .s1__mform{display:none}
.st-done .s1__mok{display:grid}
.st-done .cur{opacity:0}

/* ---- 2 · Panel de gestión: sidebar que se abre y se cierra, tres tableros ---- */
.dx{display:flex;min-height:25em;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 2em 4em -2em color-mix(in srgb,var(--shadow) 30%,transparent);transition:opacity .5s}
.dx__side{flex:none;display:flex;flex-direction:column;gap:.45em;width:4.9em;padding:1em .8em;background:var(--inv-bg);color:var(--muted);overflow:hidden;transition:width .75s cubic-bezier(.6,0,.2,1)}
.st-exp .dx__side{width:12.6em}
.dx__brand{display:flex;align-items:center;gap:.8em;margin-bottom:.9em;color:var(--inv-fg);white-space:nowrap}
.dx__logo{flex:none;display:grid;place-items:center;width:2.9em;height:2.9em;border-radius:var(--r);background:var(--card);color:var(--acc)}
.dx__brand b,.nv em,.dx__user>div{opacity:0;transition:opacity .3s}
.st-exp .dx__brand b,.st-exp .nv em,.st-exp .dx__user>div{opacity:1;transition:opacity .4s .3s}
.nv{display:flex;align-items:center;gap:.9em;padding:.75em .8em;border-radius:var(--r);white-space:nowrap;transition:background .4s,color .4s,box-shadow .4s}
.nv .ic{flex:none}
.nv em{color:inherit}
.st-v1 .nv1,.st-v2 .nv2,.st-v3 .nv3{background:var(--acc);color:var(--accfg);box-shadow:0 0 0 .35em color-mix(in srgb,var(--acc) 22%,transparent)}
.dx__user{display:flex;align-items:center;gap:.8em;margin-top:auto;white-space:nowrap;color:var(--inv-fg)}
.dx__user small{color:var(--muted);font-size:.85em}
.dx__me{flex:none;display:grid;place-items:center;width:2.9em;height:2.9em;border-radius:var(--r);background:#374151;font-size:.9em;font-weight:500}
.dx__main{flex:1;min-width:0;display:grid;gap:1em;align-content:start;padding:1.3em 1.5em;background:var(--bg2)}
.dx__top{display:flex;align-items:center;gap:1em}
.dx__titles{display:grid}
.tt{grid-area:1/1;font-size:1.6em;line-height:1.1;opacity:0;transform:translateY(.5em);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.dx__titles small{grid-area:2/1;font-size:.9em}
.st-v1 .tt1,.st-v2 .tt2,.st-v3 .tt3{opacity:1;transform:none}
.dx__search{display:flex;align-items:center;gap:.6em;margin-left:auto;padding:.6em 1.1em;background:var(--card);border:1px solid var(--line);border-radius:var(--r);color:var(--muted);font-size:.95em}
.dx__bell{display:grid;place-items:center;width:2.5em;height:2.5em;background:var(--card);border:1px solid var(--line);border-radius:var(--r);color:var(--text)}
.dx__views{display:grid}
.view{grid-area:1/1;display:grid;gap:1em;align-content:start;opacity:0;visibility:hidden;transform:translateY(.9em);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
.st-v1 .view1,.st-v2 .view2,.st-v3 .view3{opacity:1;visibility:visible;transform:none;transition:opacity .5s .2s,transform .6s .2s cubic-bezier(.2,.7,.2,1)}
.dx__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.9em}
.dx__grid{display:grid;gap:1em}
.dx__grid--a,.dx__grid--b{grid-template-columns:1.5fr 1fr}
.dx__grid--c{grid-template-columns:1fr 1.25fr}
.dx__stack{display:grid;gap:1em;align-content:start}
.card2{padding:1em 1.2em;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.card2__h{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:.8em}
.card2__h b{font-size:1.05em}
.card2__h small{font-size:.9em;color:var(--acc);font-weight:500}
.cnt{--n:var(--to,0);counter-reset:n var(--n)}
.cnt::after{content:counter(n)}
.cnt--pct::after{content:counter(n) "%"}
.st-v1 .cnt{animation:cntup 1.6s ease-out both}
@keyframes cntup{from{--n:0}to{--n:var(--to)}}
.chart{display:block;width:100%;height:9em;overflow:visible}
.chart .grid path{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.chart-area{fill:color-mix(in srgb,var(--acc) 14%,transparent);clip-path:inset(0 100% 0 0)}
.chart-line{fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.cdot{fill:var(--inv-fg);stroke:var(--acc);stroke-width:2;vector-effect:non-scaling-stroke;opacity:0}
.st-v1 .chart-line{animation:draw 1.8s .35s ease-out forwards}
.st-v1 .chart-area{animation:wipe 1.8s .35s ease-out forwards}
.st-v1 .cdot{animation:fadein .4s 1.9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes fadein{to{opacity:1}}
.cols{display:flex;align-items:flex-end;gap:.7em;height:9em}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.4em;height:100%}
.col i{display:block;width:100%;height:var(--h);max-height:calc(100% - 1.6em);background:var(--info-l);border-radius:var(--r);transform:scaleY(0);transform-origin:bottom}
.col--hi i{background:var(--acc)}
.col span{font-size:.8em;color:var(--muted)}
.st-v1 .col i{animation:growy .9s calc(.5s + var(--i)*.09s) cubic-bezier(.2,.8,.2,1) forwards}
@keyframes growy{to{transform:scaleY(1)}}
.view2 .ev{opacity:0;transform:translateX(-1em)}
.st-v2 .ev{animation:slidein .6s calc(.35s + var(--i)*.22s) cubic-bezier(.2,.7,.2,1) forwards}
.hbar{display:grid;gap:.35em;margin-bottom:.85em;font-size:.95em}
.hbar>i{display:block;height:.5em;background:var(--g200);border-radius:var(--r);overflow:hidden}
.hbar b{display:block;height:100%;background:var(--acc);transform:scaleX(0);transform-origin:left}
.st-v2 .hbar b{animation:growx 1s calc(.5s + var(--i)*.15s) cubic-bezier(.2,.8,.2,1) forwards}
.card2--ring{display:flex;align-items:center;gap:1em}
.ring{flex:none;width:4.4em;height:4.4em;transform:rotate(-90deg)}
.ring__bg,.ring__fg{fill:none;stroke-width:4}
.ring__bg{stroke:var(--g200)}
.ring__fg{stroke:var(--acc);stroke-dasharray:0 100}
.st-v2 .ring__fg{animation:dash86 1.4s .6s ease-out forwards}
@keyframes dash86{to{stroke-dasharray:86 100}}
.donut{display:grid;grid-template-columns:7.6em 1fr;gap:1.2em;align-items:center}
.donut svg{width:100%;transform:rotate(-90deg)}
.dn{fill:none;stroke-width:4.4}
.dn--bg{stroke:var(--g200)}
.seg{stroke:var(--info);stroke-dasharray:0 100;stroke-dashoffset:var(--o)}
.seg2{stroke:#3B82F6}
.seg3{stroke:#DBEAFE}
.st-v3 .seg{animation:segdash 1.1s calc(.35s + var(--i)*.25s) ease-out forwards}
@keyframes segdash{to{stroke-dasharray:var(--d) 100}}
.legend{display:grid;gap:.7em}
.legend span{display:flex;align-items:center;gap:.6em;font-size:.95em}
.legend i{width:.9em;height:.9em;border-radius:var(--r);background:var(--acc-hover)}
.legend .k2{background:var(--acc-top)}
.legend .k3{background:var(--info-l)}
.legend em{margin-left:auto;color:var(--fg);font-weight:500}
.rrow{display:grid;grid-template-columns:2.4em 1fr auto auto;gap:.8em;align-items:center;padding:.55em 0;border-top:1px solid var(--line);opacity:0;transform:translateX(-1em)}
.rrow b{font-size:1em}
.rrow small{display:inline;font-size:.85em;padding:.2em .7em;border-radius:var(--r);background:var(--acc-l);color:var(--acc)}
.rrow time{font-size:.85em;color:var(--muted)}
.st-v3 .rrow{animation:slidein .6s calc(.45s + var(--i)*.2s) cubic-bezier(.2,.7,.2,1) forwards}
.st-out .dx{opacity:0}

/* ---- 3 · Membresía: se arma, avanza sola al resumen y se paga ---- */
.p3{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 2em 4em -2em color-mix(in srgb,var(--shadow) 30%,transparent);transition:opacity .6s ease}
.st-out .p3{opacity:0}
.p3__head{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:1.2em 1.6em;border-bottom:1px solid var(--line)}
.p3__t,.p3__s{display:grid}
.p3__t .t1,.p3__t .t2,.p3__s .t1,.p3__s .t2{grid-area:1/1;transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.p3__t{font-size:1.55em;line-height:1.15}
.p3__t .t2,.p3__s .t2{opacity:0;transform:translateY(.5em)}
.st-s2 .p3__t .t1,.st-s2 .p3__s .t1{opacity:0;transform:translateY(-.5em)}
.st-s2 .p3__t .t2,.st-s2 .p3__s .t2{opacity:1;transform:none}
.p3__s{font-size:.9em;color:var(--muted)}
.p3__steps{display:flex;gap:.4em}
.p3__steps i{width:3.2em;height:.35em;border-radius:var(--r);background:var(--g200);transition:background .5s}
.p3__steps i:first-child,.st-s2 .p3__steps i:last-child{background:var(--acc)}
.p3__stage{position:relative;display:grid;overflow:hidden}
.p3__s1,.p3__s2{grid-area:1/1;display:grid;gap:1.1em;align-content:start;padding:1.4em 1.6em;transition:transform .8s cubic-bezier(.6,0,.2,1),opacity .6s}
.p3__s2{transform:translateX(105%);opacity:0}
.st-s2 .p3__s1{transform:translateX(-105%);opacity:0}
.st-s2 .p3__s2{transform:none;opacity:1}
.plans3{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em;margin-top:.5em}
.pl{position:relative;display:grid;gap:.25em;justify-items:start;padding:1.1em .95em .95em;background:var(--card);border:1px solid var(--line);border-radius:var(--r);transition:border-color .35s,background .35s,box-shadow .35s,transform .35s}
.pl .plan__r{margin-bottom:.3em}
.pl b{font-size:1.1em}
.pl strong{font-size:1.7em;font-weight:500;line-height:1.1}
.pl strong small{display:inline;font-size:.5em;margin-left:.2em;color:var(--muted)}
.pl__b{display:flex;align-items:center;gap:.4em;margin-top:.4em;font-size:.88em;color:var(--text)}
.pl__b .ic{width:1.1em;height:1.1em;color:var(--acc)}
.st-plan .pl2{border-color:var(--acc);background:#F5F9FF;box-shadow:0 0 0 1px var(--acc),0 1.2em 2em -1em color-mix(in srgb,var(--acc) 50%,transparent);transform:translateY(-.25em)}
.st-plan .pl2 .plan__r{border-color:var(--acc);background:var(--acc);box-shadow:inset 0 0 0 .28em var(--card)}
.adds{display:grid;gap:.7em}
.adds>small{font-size:.9em}
.add{display:grid;grid-template-columns:auto 1fr auto auto;gap:.9em;align-items:center;padding:.75em 1em;background:var(--card);border:1px solid var(--line);border-radius:var(--r);transition:border-color .35s,background .35s}
.add b{display:block;font-size:1.02em}
.add small{font-size:.85em}
.add em{font-weight:500;color:var(--fg)}
.st-add .add2{border-color:var(--acc);background:#F5F9FF}
.st-add .add2 .opt__ic{background:var(--acc-l);color:var(--acc)}
.st-add .add2 .sw{background:var(--acc)}
.st-add .add2 .sw::after{transform:translateX(1.3em)}
.sw::after{transition:transform .35s cubic-bezier(.4,0,.2,1)}
.sw{transition:background .35s}
.p3__foot{display:flex;align-items:center;justify-content:space-between;gap:1em;padding-top:.9em;border-top:1px solid var(--line)}
.p3__foot small{font-size:.9em}
.p3__foot .tot{display:block;font-size:2.1em;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.next{display:inline-flex;align-items:center;gap:.6em;padding:.9em 1.5em;background:var(--acc);color:var(--accfg);text-decoration:none;font-weight:500;border-radius:var(--r);box-shadow:0 .9em 1.6em -.8em color-mix(in srgb,var(--acc) 60%,transparent)}
.st-press .next{transform:scale(.94)}
.co{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6em}
.co__h{display:block;margin-bottom:.9em;font-size:1.1em}
.co__row{display:grid;grid-template-columns:auto 1fr auto;gap:.9em;align-items:center;padding:.8em 0;border-bottom:1px solid var(--line)}
.co__row b{display:block}
.co__row small{font-size:.85em}
.co__row em{font-weight:500;color:var(--fg)}
.co__total{padding-top:1em}
.co__total small{font-size:.9em}
.co__total strong{display:block;font-size:2.3em;font-weight:500;line-height:1.1}
.co__total u{text-decoration:none;font-size:.4em;color:var(--muted);letter-spacing:.06em}
.co__pay .pay{margin-top:0}
.co__note{margin:.8em 0 1em;font-size:.9em}
.cta{display:flex;align-items:center;justify-content:center;gap:.6em;padding:1em;background:var(--acc);color:var(--accfg);font-weight:500;font-size:1.1em;border-radius:var(--r);box-shadow:0 .9em 1.6em -.8em color-mix(in srgb,var(--acc) 60%,transparent)}
.cta .sp{display:none;width:1.1em;height:1.1em;border:2px solid rgba(255,255,255,.4);border-top-color:var(--card);border-radius:50%;animation:spin2 .8s linear infinite}
.cta .lb2{display:none}
.st-pay .cta .sp{display:inline-block}
.st-pay .cta .lb1{display:none}
.st-pay .cta .lb2{display:inline}
.p3__ok{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:.6em;background:color-mix(in srgb,var(--card) 95%,transparent);text-align:center;opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
.st-ok .p3__ok{opacity:1;visibility:visible;transition:opacity .45s}
.p3__ok i{display:grid;place-items:center;width:4.4em;height:4.4em;border-radius:var(--r);background:var(--acc);color:var(--accfg);box-shadow:0 0 0 .6em color-mix(in srgb,var(--acc) 15%,transparent)}
.p3__ok i .ic{width:2.4em;height:2.4em}
.st-ok .p3__ok i{animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.p3__ok b{font-size:1.6em}
.st-ok .cur{opacity:0}

@media (max-width:900px){
  .dx{min-height:0}
  .dx__side{width:3.8em;padding:.8em .5em}
  .st-exp .dx__side{width:3.8em}
  .dx__brand b,.nv em,.dx__user>div,.dx__search{display:none}
  .dx__main{padding:1em}
  .dx__kpis{grid-template-columns:repeat(2,1fr)}
  .dx__grid--a,.dx__grid--b,.dx__grid--c{grid-template-columns:1fr}
  .dx__stack{display:none}
  .donut{grid-template-columns:6em 1fr}
  .plans3{gap:.6em}
  .pl{padding:.9em .6em}
  .pl__b{display:none}
  .co{grid-template-columns:1fr}
  .add{grid-template-columns:auto 1fr auto}
  .add em{display:none}
  .p3__s1,.p3__s2{padding:1.1em}
}
@media (prefers-reduced-motion:reduce){
  .cur{display:none}
  .toast{opacity:1;transform:none}
}

.mock--pro .p3__s{display:grid}
@media (max-width:900px){
  .s1__gal{display:none}
  .s1__svc{padding:1.1em 1.2em 1.3em}
  .s1__img{min-height:9.5em}
}

/* ====== Ajustes de detalle: sitio web, panel de gestión (4 tableros) y membresía (3 pasos) ====== */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes tipin{to{opacity:1;transform:none}}
@keyframes swbg{to{background:var(--acc)}}
@keyframes swk{to{transform:translateX(1.2em)}}
@keyframes ringp{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.5)}}

/* -- 1 · Sitio web: la imagen queda centrada y el teléfono pasa a ser una versión móvil completa al lado -- */
.s1__img{background-position:82% 50%}
.mock--site{display:block;margin-bottom:0}
.s1__side{display:grid;justify-items:center;gap:.9em}
.s1__phone{position:relative;right:auto;bottom:auto;z-index:1;display:grid;gap:.7em;width:100%;padding:1.1em .9em .8em;background:var(--card);border:.4em solid var(--fg);border-radius:1.8em;box-shadow:0 1.8em 3em -1em color-mix(in srgb,var(--shadow) 45%,transparent),0 0 0 .12em #374151}
.ph__sb{display:flex;align-items:center;justify-content:space-between;padding:0 .5em;font-size:.72em;font-weight:500}
.ph__dots{display:flex;gap:.25em}
.ph__dots i{width:.55em;height:.55em;border-radius:50%;background:var(--inv-bg)}
.ph__nav{display:flex;align-items:center;justify-content:space-between}
.ph__nav b{font-family:var(--logo);font-weight:600;letter-spacing:.12em;font-size:.95em}
.ph__nav .ic{width:1.2em;height:1.2em}
.ph__img{aspect-ratio:16/10;background:#14100c url(assets/web-hero.svg) 82% 50%/cover;border-radius:.6em}
.s1__phone h5{font-family:var(--logo);font-size:1.3em;line-height:1.1}
.s1__phone u{text-align:center;background:var(--acc);padding:.6em;font-size:.9em}
.ph__list{display:grid;gap:.45em}
.ph__list span{display:flex;align-items:center;gap:.5em;padding:.5em .6em;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);font-size:.78em}
.ph__list .ic{width:1.2em;height:1.2em;color:var(--acc)}
.ph__list em{margin-left:auto;font-weight:500;color:var(--fg)}
.ph__home{justify-self:center;width:4.4em;height:.32em;margin-top:.2em;border-radius:var(--r);background:var(--line-strong)}
.s1__cap{font-size:.85em;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mock--site .s1__side{opacity:0;transform:translateY(1.4em);transition:opacity .6s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.mock--site .s1__phone{opacity:1;transform:none}
.st-a6 .s1__side{opacity:1;transform:none}
.st-out .s1__side{opacity:0}

/* -- 2 · Panel de gestión: más elementos -- */
.dx{min-height:30em}
.nv__n{margin-left:auto;display:grid;place-items:center;min-width:1.7em;height:1.7em;border-radius:var(--r);background:var(--acc);color:var(--accfg);text-decoration:none;font-size:.75em;font-weight:500;opacity:0;transition:opacity .3s}
.st-exp .nv__n{opacity:1;transition:opacity .4s .3s}
.st-v4 .nv4{background:var(--acc);color:var(--accfg);box-shadow:0 0 0 .35em color-mix(in srgb,var(--acc) 22%,transparent)}
.st-v4 .nv4 .nv__n{background:var(--card);color:var(--acc)}
.dx__plan{margin-top:auto;padding:.8em .9em;border-radius:var(--r);background:rgba(255,255,255,.07);color:var(--inv-fg);white-space:nowrap;opacity:0;transition:opacity .3s}
.st-exp .dx__plan{opacity:1;transition:opacity .4s .3s}
.dx__plan small{color:var(--muted);font-size:.8em}
.dx__plan>b{display:block}
.dx__plan>i{display:block;height:.35em;margin-top:.55em;border-radius:var(--r);background:rgba(255,255,255,.14);overflow:hidden}
.dx__plan>i b{display:block;height:100%;background:var(--acc)}
.dx__user{margin-top:.8em}
.tt4{white-space:nowrap}
.live{display:flex;align-items:center;gap:.5em;margin-left:auto;padding:.45em .9em;border-radius:var(--r);background:var(--acc-l);color:var(--acc);font-size:.85em;font-weight:500}
.live i{width:.55em;height:.55em;border-radius:50%;background:var(--acc);animation:pulse 1.6s ease-in-out infinite}
.dx__search{margin-left:0}
.dx__search kbd{margin-left:1.2em;padding:.1em .55em;border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:.8em;color:var(--muted)}
.dx__bell{position:relative}
.dx__bell em{position:absolute;top:-.5em;right:-.5em;display:grid;place-items:center;min-width:1.6em;height:1.6em;border-radius:var(--r);background:var(--acc);color:var(--accfg);font-size:.7em;font-weight:500}
.spark{display:block;width:100%;height:1.7em;margin-top:.35em;overflow:visible}
.spark path{fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.st-v1 .spark path{animation:draw 1.4s .7s ease-out forwards}
.lg{display:flex;gap:1em;font-size:.8em;color:var(--muted)}
.lg i{display:inline-block;width:.9em;height:.22em;margin-right:.4em;vertical-align:middle;border-radius:var(--r);background:var(--acc)}
.lg .prev i{background:var(--line-strong)}
.chart-prev{fill:none;stroke:var(--line-strong);stroke-width:1.6;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.chartwrap{position:relative}
.tip{position:absolute;right:4%;top:2%;padding:.55em .9em;border-radius:var(--r);background:var(--inv-bg);color:var(--inv-fg);font-size:.85em;line-height:1.3;white-space:nowrap;opacity:0;transform:translateY(.5em);box-shadow:0 1em 1.6em -.8em color-mix(in srgb,var(--shadow) 60%,transparent)}
.tip small{color:var(--muted);font-size:.85em}
.st-v1 .tip{animation:tipin .5s 2.5s cubic-bezier(.2,.7,.2,1) forwards}
.card2--feed .feed{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.fi{display:flex;align-items:flex-start;gap:.8em;opacity:0;transform:translateY(.7em)}
.fi>i{flex:none;display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:var(--r);background:var(--acc-l);color:var(--acc)}
.fi b{display:block;font-size:.95em}
.fi small{font-size:.82em}
.st-v1 .fi{animation:slidein .6s calc(1.1s + var(--i)*.2s) cubic-bezier(.2,.7,.2,1) forwards}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:.6em}
.wk{display:grid;justify-items:center;gap:.1em;padding:.55em 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);opacity:0;transform:translateY(.6em)}
.wk small{font-size:.75em}
.wk b{font-size:1.2em;font-weight:500}
.wk i{width:.45em;height:.45em;border-radius:50%;background:var(--acc)}
.wk:not(:has(i)){padding-bottom:.95em}
.wk--on{background:var(--acc);border-color:var(--acc);color:var(--accfg);box-shadow:0 .8em 1.4em -.7em color-mix(in srgb,var(--acc) 70%,transparent)}
.wk--on small{color:#DBEAFE}
.wk--on i{background:var(--card)}
.st-v2 .wk{animation:slidein .5s calc(.25s + var(--i)*.07s) cubic-bezier(.2,.7,.2,1) forwards}
.team{display:flex;gap:.7em}
.tm{position:relative;display:grid;place-items:center;width:2.7em;height:2.7em;border-radius:var(--r);background:var(--acc-l);color:var(--acc);font-size:.85em;font-weight:500}
.tm::after{content:"";position:absolute;right:-.25em;bottom:-.25em;width:.8em;height:.8em;border-radius:50%;background:var(--acc);border:2px solid var(--card)}
.tm--busy{background:var(--g100);color:var(--muted)}
.tm--busy::after{background:var(--line-strong)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em}
.tile{display:flex;align-items:center;gap:.9em;padding:.85em 1em;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.tile>i{flex:none;display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:var(--r);background:var(--acc-l);color:var(--acc)}
.tile small{font-size:.8em}
.tile strong{display:block;font-size:1.5em;font-weight:500;line-height:1.1}
.view3 .tile,.view4 .tile{opacity:0;transform:translateY(.6em)}
.st-v3 .tile,.st-v4 .tile{animation:slidein .5s calc(.25s + var(--i,0)*.1s) forwards}
.tile:nth-child(2){--i:1}
.tile:nth-child(3){--i:2}
.dx__grid--d{grid-template-columns:1.45fr 1fr}
.tr{display:grid;grid-template-columns:1.2fr .8fr .8fr 1.1fr auto;gap:.8em;align-items:center;padding:.6em 0;border-top:1px solid var(--line);font-size:.95em}
.tr--h{padding-top:0;border-top:0;font-size:.78em;color:var(--muted)}
.tr:not(.tr--h){opacity:0;transform:translateX(-1em)}
.st-v4 .tr:not(.tr--h){animation:slidein .55s calc(.35s + var(--i)*.18s) cubic-bezier(.2,.7,.2,1) forwards}
.tr>span>i{display:inline-block;width:.8em;height:.8em;margin-right:.6em;border-radius:var(--r);background:var(--acc-hover);vertical-align:middle}
.tr>span>i.k2{background:var(--acc-top)}
.tr>span>i.k3{background:var(--info-l)}
.mini{display:block;height:.45em;border-radius:var(--r);background:var(--g200);overflow:hidden}
.mini b{display:block;height:100%;background:var(--acc);transform:scaleX(0);transform-origin:left}
.st-v4 .mini b{animation:growx 1s calc(.7s + var(--i,0)*.15s) cubic-bezier(.2,.8,.2,1) forwards}
.sw2{position:relative;width:2.5em;height:1.35em;border-radius:var(--r);background:var(--line-strong)}
.sw2::after{content:"";position:absolute;left:.2em;top:.2em;width:.95em;height:.95em;border-radius:var(--r);background:var(--card)}
.st-v4 .sw2{animation:swbg .3s calc(1s + var(--i)*.25s) forwards}
.st-v4 .sw2::after{animation:swk .3s calc(1s + var(--i)*.25s) forwards}
.pg{display:grid;grid-template-columns:auto 1fr auto;gap:.8em;align-items:center;margin-bottom:.7em;padding:.7em .8em;border:1px solid var(--line);border-radius:var(--r);opacity:0;transform:translateX(1em)}
.st-v4 .pg{animation:slidein .55s calc(.5s + var(--i)*.2s) cubic-bezier(.2,.7,.2,1) forwards}
.pg>i{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:var(--r);background:var(--acc-l);color:var(--acc)}
.pg b{display:block;font-size:.95em}
.pg small{font-size:.8em}
.bd{text-decoration:none;padding:.3em .8em;border-radius:var(--r);font-size:.78em;font-weight:500}
.bd--on{background:var(--acc-l);color:var(--acc)}
.bd--sch{background:var(--g100);color:var(--text)}

/* -- 3 · Membresía: cuestionario intermedio y resumen más completo -- */
.p3__t .t3,.p3__s .t3{grid-area:1/1;opacity:0;transform:translateY(.5em);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.st-q .p3__t .t1,.st-q .p3__s .t1{opacity:0;transform:translateY(-.5em)}
.st-q .p3__t .t2,.st-q .p3__s .t2{opacity:1;transform:none}
.st-s2 .p3__t .t2,.st-s2 .p3__s .t2{opacity:0;transform:translateY(-.5em)}
.st-s2 .p3__t .t3,.st-s2 .p3__s .t3{opacity:1;transform:none}
.p3__steps i{width:2.6em}
.st-q .p3__steps i:nth-child(2),.st-s2 .p3__steps i:nth-child(2){background:var(--acc)}
.p3__sq{grid-area:1/1;display:grid;gap:1.1em;align-content:start;padding:1.4em 1.6em;transform:translateX(105%);opacity:0;transition:transform .8s cubic-bezier(.6,0,.2,1),opacity .6s}
.st-q .p3__s1{transform:translateX(-105%);opacity:0}
.st-q .p3__sq{transform:none;opacity:1}
.st-s2 .p3__sq{transform:translateX(-105%);opacity:0}
.qs{display:grid;gap:.8em}
.qa{padding:.85em 1em;background:var(--card);border:1px solid var(--line);border-radius:var(--r);transition:border-color .35s,background .35s}
.q__h{display:flex;align-items:center;gap:.8em;margin-bottom:.7em}
.q__h b{font-size:1.02em}
.q__n{display:grid;place-items:center;flex:none;width:1.9em;height:1.9em;border-radius:var(--r);background:var(--g100);color:var(--muted);font-size:.9em;font-weight:500;transition:background .35s,color .35s}
.q__ok{margin-left:auto;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:var(--r);background:var(--acc);color:var(--accfg);opacity:0;transform:scale(.5);transition:opacity .3s,transform .4s cubic-bezier(.2,1.4,.4,1)}
.q__ok .ic{width:1em;height:1em}
.q__opts{display:flex;gap:.6em}
.ch{flex:1;padding:.7em .4em;text-align:center;border:1px solid var(--line);border-radius:var(--r);color:var(--text);transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.st-a1 .q1,.st-a2 .q2,.st-a3 .q3{border-color:color-mix(in srgb,var(--acc) 40%,transparent);background:#FBFDFF}
.st-a1 .q1 .q__n,.st-a2 .q2 .q__n,.st-a3 .q3 .q__n{background:var(--acc);color:var(--accfg)}
.st-a1 .q1 .q__ok,.st-a2 .q2 .q__ok,.st-a3 .q3 .q__ok{opacity:1;transform:none}
.st-a1 .q1 .ch2,.st-a2 .q2 .ch2,.st-a3 .q3 .ch1{border-color:var(--acc);background:var(--acc-l);color:var(--acc);font-weight:500;box-shadow:0 .5em 1em -.6em color-mix(in srgb,var(--acc) 60%,transparent)}
.p3__foot .ans{display:block;font-size:1.6em;font-weight:500;line-height:1.1}
.st-press .p3__sq .next2{transform:scale(.94)}
.co__list>.co__row:first-of-type{padding-top:.4em}
.co__disc{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .5s ease}
.st-promo .co__disc{max-height:5em;opacity:1}
.co__row .neg{color:var(--acc)}
.co__perk{display:flex;align-items:center;gap:.5em;margin-top:.55em;font-size:.9em;color:var(--text)}
.co__perk .ic{width:1.1em;height:1.1em;color:var(--acc)}
.co__tot{display:inline-block;font-variant-numeric:tabular-nums}
.promo{display:flex;gap:.6em;margin:.9em 0 .3em}
.promo__f{flex:1;padding:.7em .9em;background:var(--card);border:1px solid var(--line);border-radius:var(--r);color:var(--muted);font-size:.95em;white-space:nowrap}
.promo__f .cd{display:none;color:var(--fg);font-weight:500;letter-spacing:.06em}
.st-promo .promo__f{border-color:var(--acc);background:#F5F9FF}
.st-promo .promo__f .phd{display:none}
.st-promo .promo__f .cd{display:inline}
.apply{padding:.7em 1.1em;background:var(--inv-bg);color:var(--inv-fg);text-decoration:none;font-weight:500;border-radius:var(--r);transition:background .3s}
.st-promo .apply{background:var(--acc)}
.p3__ok i{position:relative}
.st-ok .p3__ok i::after{content:"";position:absolute;inset:-.5em;border:.14em solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:var(--r);animation:ringp 1.6s ease-out infinite}
.p3__ok small{font-size:1em}
.p3__ok .p3__ok2{font-size:.9em;color:var(--muted)}

@media (max-width:900px){
  .mock--site{display:block}
  .s1__side{display:none}
  .dx__plan{display:none}
  .dx__user>div{display:none}
  .live,.dx__search{display:none}
  .dx__bell{margin-left:auto}
  .dx__top{gap:.8em}
  .tt4{white-space:normal}
  .card2--feed .feed{grid-template-columns:1fr}
  .week{gap:.4em}
  .stats{grid-template-columns:1fr}
  .stats .tile:nth-child(n+3){display:none}
  .dx__grid--d{grid-template-columns:1fr}
  .tr{grid-template-columns:1.2fr .7fr .8fr auto}
  .tr>.mini,.tr--h>span:nth-child(4){display:none}
  .view4 .dx__grid--d .card2:last-child{display:none}
  .q__h b{font-size:.95em}
  .ch{padding:.65em .2em;font-size:.9em}
}

.st-v4 .view4{opacity:1;visibility:visible;transform:none;transition:opacity .5s .2s,transform .6s .2s cubic-bezier(.2,.7,.2,1)}
.st-v4 .tt4{opacity:1;transform:none}

/* ===== Concepto adjunto: mockups con alcance .cn ===== */
.cn{--blue:#2563EB;--blue2:#6b8cff;--navy:#111827;--text:#1F2937;--muted:#6B7280;--line:#E5E7EB;--green:#16A34A;--amber:#D97706;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:12px;color:var(--text);line-height:normal;letter-spacing:normal;font-weight:400}
.cn *{box-sizing:border-box}
.cn h1,.cn h2{font-family:inherit}
.cn button{font:inherit;cursor:pointer}
.cn button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.cn .site{color:var(--inv-fg);background:#0d1522}
.cn .site-nav{height:65px;display:flex;align-items:center;padding:0 4%;gap:25px;border-bottom:1px solid #ffffff18}
.cn .wordmark{font-weight:850;letter-spacing:1.6px;font-size:15px;color:white}
.cn .wordmark span{color:#8ca7ff}
.cn .site-links{display:flex;gap:25px;margin-left:auto;color:#b8c2d2;font-size:10px}
.cn .site-cta{background:var(--card);color:#182338;border:0;border-radius:4px;padding:10px 14px;font-size:10px;font-weight:750}
.cn .site-hero{display:grid;grid-template-columns:1.08fr .92fr;min-height:390px;padding:58px 6% 46px;gap:35px;align-items:center;background:radial-gradient(ellipse at 80% 42%,#263f77 0,#15233b 30%,#0d1522 67%)}
.cn .eyeline{display:flex;align-items:center;gap:8px;color:#9fb5ff;text-transform:uppercase;letter-spacing:1.8px;font-size:9px;font-weight:800}
.cn .eyeline:before{content:"";width:20px;height:1px;background:#7897ff}
.cn .site h1{font-size:clamp(35px,4vw,57px);line-height:1.02;letter-spacing:-2.5px;margin:20px 0 17px;font-weight:600;max-width:590px}
.cn .site h1 em{font-style:normal;color:#8ba5ff}
.cn .site p{color:#b1bdce;font-size:12px;line-height:1.8;max-width:410px;margin:0 0 25px}
.cn .actions{display:flex;gap:9px}
.cn .site-cta.primary{background:var(--blue);color:white}
.cn .site-cta.ghost{background:#ffffff08;border:1px solid #ffffff2a;color:#e6ebf4}
.cn .hero-art{position:relative;min-height:285px;display:grid;place-items:center}
.cn .orbit{position:absolute;border:1px solid #91aaff26;border-radius:50%;width:285px;height:285px}
.cn .orbit.two{width:225px;height:225px;border-color:#91aaff40}
.cn .orbit.three{width:165px;height:165px;border-color:#91aaff4f}
.cn .core{width:116px;height:116px;border-radius:4px;background:linear-gradient(145deg,var(--acc-top),var(--acc-hover));box-shadow:0 25px 70px #2563EB59;display:grid;place-items:center;position:relative;z-index:2}
.cn .core svg{width:52px;height:52px}
.cn .float-card{position:absolute;z-index:3;background:var(--card);color:#253047;border:1px solid #e6eaf2;box-shadow:0 14px 35px #0002;border-radius:4px;padding:12px 14px;min-width:142px}
.cn .float-card b{font-size:10px;display:block}
.cn .float-card small{font-size:8px;color:#8792a4}
.cn .float-card .num{font-size:19px;font-weight:800;letter-spacing:-.6px;margin:5px 0}
.cn .fc1{top:20px;right:0}
.cn .fc2{bottom:17px;left:0}
.cn .fc3{bottom:40px;right:0;min-width:118px}
.cn .tinyline{display:flex;align-items:end;gap:4px;height:22px;margin-top:6px}
.cn .tinyline i{display:block;width:8px;border-radius:3px 3px 0 0;background:#7796ff}
.cn .site-proof{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ffffff17;padding:20px 6%;gap:15px}
.cn .proof{display:flex;gap:10px;align-items:center;color:#b5c0d0;font-size:9px}
.cn .proof svg{width:19px;height:19px;color:#91aaff;flex:none}
.cn .proof b{display:block;color:var(--inv-fg);font-size:11px;margin-bottom:2px}
.cn .admin{display:grid;grid-template-columns:205px minmax(0,1fr);min-height:720px;background:var(--bg2)}
.cn .sidebar{background:#111a2b;color:#aab6c8;padding:20px 12px;display:flex;flex-direction:column}
.cn .brandline{padding:2px 11px 23px;color:white;font-size:14px;font-weight:850;letter-spacing:1px}
.cn .brandline span{color:#86a1ff}
.cn .brandline small{display:block;color:#738199;font-size:8px;letter-spacing:2px;margin-top:4px;font-weight:500}
.cn .nav-label{font-size:8px;color:#6e7b91;letter-spacing:1.6px;font-weight:800;padding:13px 11px 7px}
.cn .navitem{display:flex;align-items:center;gap:11px;padding:11px;border-radius:4px;font-size:10px;margin:2px 0;color:#aeb9ca}
.cn .navitem svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.cn .navitem.active{background:#253e76;color:var(--inv-fg);box-shadow:inset 2px 0 #7193ff}
.cn .navitem .count{margin-left:auto;background:#30466f;border-radius:4px;padding:2px 5px;font-size:8px}
.cn .sidebottom{margin-top:auto;border-top:1px solid #ffffff18;padding:14px 9px;display:flex;gap:9px;align-items:center;font-size:9px;color:white}
.cn .userpic{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#9cb1d8,#455b7d);display:grid;place-items:center;color:white;font-weight:800}
.cn .sidebottom small{display:block;color:#8491a6;margin-top:3px}
.cn .admin-main{padding:23px 26px;min-width:0}
.cn .admin-top{display:flex;align-items:center;gap:10px;margin-bottom:25px}
.cn .search{display:flex;align-items:center;gap:8px;border:1px solid #e3e8f0;border-radius:4px;background:white;padding:9px 12px;color:#9aa4b4;flex:1;max-width:390px;font-size:10px}
.cn .search svg{width:14px;height:14px}
.cn .admin-icons{display:flex;gap:7px;margin-left:auto}
.cn .iconbtn{width:31px;height:31px;display:grid;place-items:center;border:1px solid #e3e8f0;background:white;border-radius:4px;color:#657187}
.cn .iconbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7}
.cn .admin-top .userpic{margin-left:3px}
.cn .admin-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.cn .admin-heading h2{font-size:23px;letter-spacing:-.8px;margin:0;font-weight:700}
.cn .admin-heading p{font-size:10px;color:#8b96a8;margin:6px 0 0}
.cn .datebtn,.cn .addbtn{border:1px solid #e2e7ef;background:var(--card);border-radius:4px;padding:10px 12px;font-size:10px;color:#596579;font-weight:650}
.cn .addbtn{background:var(--blue);color:white;border-color:var(--blue);margin-left:7px}
.cn .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:15px}
.cn .kpi{background:white;border:1px solid #e6eaf1;border-radius:4px;padding:15px;min-width:0}
.cn .kpihead{display:flex;justify-content:space-between;align-items:center;color:#778397;font-size:9px}
.cn .kpiicon{width:27px;height:27px;background:#edf3ff;color:var(--blue);border-radius:4px;display:grid;place-items:center}
.cn .kpiicon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7}
.cn .kpival{font-size:24px;letter-spacing:-1px;font-weight:800;margin:11px 0 4px}
.cn .kpifoot{font-size:9px;color:#8c96a7}
.cn .kpifoot b{color:var(--green)}
.cn .admin-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:13px}
.cn .widget{background:white;border:1px solid #e5eaf1;border-radius:4px;overflow:hidden;margin-bottom:13px;min-width:0}
.cn .widgethead{display:flex;justify-content:space-between;align-items:center;padding:14px 15px;border-bottom:1px solid #edf0f5;font-size:11px;font-weight:750}
.cn .widgethead small{font-size:9px;color:#8b96a8;font-weight:500}
.cn .widgetbody{padding:13px 15px}
.cn .chartlegend{display:flex;gap:14px;font-size:9px;color:#7f899a}
.cn .chartlegend span:before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--blue);margin-right:5px}
.cn .chartlegend span+span:before{background:#9eb6ff}
.cn .chartsvg{width:100%;height:160px;display:block;margin-top:6px}
.cn .axis{display:flex;justify-content:space-between;font-size:8px;color:#a0a8b5}
.cn .agenda-row{display:grid;grid-template-columns:46px 28px minmax(0,1fr) auto;gap:9px;align-items:center;padding:11px 0;border-bottom:1px solid #f0f2f6}
.cn .agenda-row:last-child{border-bottom:0}
.cn .agenda-time{font-size:9px;font-weight:750;color:#7c8799}
.cn .initials{width:28px;height:28px;border-radius:4px;display:grid;place-items:center;background:#edf2ff;color:var(--acc);font-size:9px;font-weight:800}
.cn .agenda-name{font-size:10px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn .agenda-detail{font-size:8px;color:#8a95a6;margin-top:3px}
.cn .badge{font-size:8px;border-radius:4px;padding:5px 7px;background:#e8f8ef;color:#14835c;white-space:nowrap}
.cn .badge.pending{background:#fff3df;color:#a66d17}
.cn .offerrow{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid #f0f2f6}
.cn .offerrow:last-child{border:0}
.cn .offericon{width:32px;height:32px;border-radius:4px;background:#f0f4ff;color:var(--blue);display:grid;place-items:center}
.cn .offericon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.cn .offername{font-size:9px;font-weight:750}
.cn .offerdesc{font-size:8px;color:#8a95a6;margin-top:3px}
.cn .offerprice{margin-left:auto;font-size:10px;font-weight:800;white-space:nowrap}
.cn .stockline{display:grid;grid-template-columns:minmax(0,1fr) 70px 50px;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #f0f2f6;font-size:9px}
.cn .stockline:last-child{border:0}
.cn .stockbar{height:5px;border-radius:4px;background:#edf0f6;overflow:hidden}
.cn .stockbar i{display:block;height:100%;background:#7091ff}
.cn .stockqty{text-align:right;color:#7b8798;font-size:8px}
.cn .flow-shell{padding:25px 24px 22px;background:var(--bg2);min-height:720px}
.cn .flow-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.cn .flow-head h2{font-size:22px;letter-spacing:-.7px;margin:0}
.cn .flow-head small{display:block;color:#8994a5;font-size:10px;margin-top:5px}
.cn .secure{border:1px solid #e1e7ef;background:white;border-radius:4px;padding:8px 10px;color:#758195;font-size:9px}
.cn .stepper{display:flex;align-items:center;max-width:820px;margin:0 auto 24px}
.cn .step{display:flex;align-items:center;gap:8px;color:#9aa3b2;font-size:9px;white-space:nowrap}
.cn .step .n{width:27px;height:27px;border-radius:50%;border:1px solid #dce2eb;background:var(--card);display:grid;place-items:center;font-weight:750}
.cn .step.active{color:var(--blue);font-weight:750}
.cn .step.active .n{background:var(--blue);border-color:var(--blue);color:var(--inv-fg)}
.cn .step.done .n{background:#e9f8f0;border-color:#bce8d2;color:#14835c}
.cn .step-line{height:1px;background:#dfe5ed;flex:1;margin:0 13px}
.cn .flow-grid{display:grid;grid-template-columns:1.2fr .95fr .85fr;gap:13px;align-items:start}
.cn .flow-panel{border:1px solid #e3e8f0;border-radius:4px;background:white;overflow:hidden;min-width:0}
.cn .flow-panelhead{padding:15px 15px 13px;border-bottom:1px solid #edf0f5;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800}
.cn .flow-panelhead small{font-size:9px;color:#8b96a7;font-weight:500}
.cn .flow-panelbody{padding:13px}
.cn .chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.cn .chip{border:1px solid #e4e8ef;border-radius:4px;padding:6px 8px;color:#7a8596;font-size:8px}
.cn .chip.active{border-color:#b8c9ff;background:#edf3ff;color:var(--blue);font-weight:750}
.cn .product-option{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid #f0f2f6}
.cn .product-option:last-child{border:0}
.cn .product-icon{width:42px;height:42px;border-radius:4px;background:linear-gradient(145deg,#eff3ff,#dce6ff);display:grid;place-items:center;color:var(--acc)}
.cn .product-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.cn .product-option b{font-size:10px;display:block}
.cn .product-option small{display:block;font-size:8px;color:#8a95a6;margin-top:4px}
.cn .price{font-size:10px;font-weight:800;white-space:nowrap}
.cn .plus{width:22px;height:22px;border:1px solid #dfe5ef;border-radius:4px;display:grid;place-items:center;color:var(--blue);font-weight:800}
.cn .fieldlabel{font-size:9px;color:#697589;font-weight:700;margin:13px 0 6px}
.cn .inputmock{border:1px solid #e1e6ee;background:var(--card);border-radius:4px;padding:10px 11px;font-size:9px;color:#9aa3b2;margin-bottom:8px}
.cn .inputmock.multiline{height:57px}
.cn .choicepills{display:flex;gap:6px;flex-wrap:wrap}
.cn .choicepill{border:1px solid #e1e6ee;border-radius:4px;padding:7px 9px;color:#7c8798;font-size:8px}
.cn .choicepill.active{background:#edf3ff;border-color:#b7c8ff;color:var(--blue)}
.cn .checkrow{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:9px;color:#606d80}
.cn .checkbox{width:14px;height:14px;border:1px solid #cbd4e1;border-radius:4px;display:grid;place-items:center;color:white;font-size:9px}
.cn .checkbox.on{background:var(--blue);border-color:var(--blue)}
.cn .checkrow span:last-child{margin-left:auto;font-weight:700;color:#3a4557}
.cn .summary-label{font-size:8px;color:#8c96a6;text-transform:uppercase;letter-spacing:1px;font-weight:800;margin-bottom:10px}
.cn .summary-product{display:flex;gap:9px;padding-bottom:13px;border-bottom:1px solid #edf0f5}
.cn .summary-thumb{width:43px;height:43px;border-radius:4px;background:#edf3ff;display:grid;place-items:center;color:var(--blue)}
.cn .summary-thumb svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.cn .summary-product b{font-size:10px;display:block}
.cn .summary-product small{font-size:8px;color:#8a95a6;display:block;margin-top:4px}
.cn .sumline{display:flex;justify-content:space-between;gap:10px;padding:10px 0;font-size:9px;color:#7a8596}
.cn .sumline strong{color:#293447}
.cn .total{border-top:1px solid #e9edf3;padding-top:13px;display:flex;justify-content:space-between;font-size:12px;font-weight:850}
.cn .checkout{width:100%;margin-top:15px;border:0;border-radius:4px;background:var(--blue);color:white;padding:12px;font-size:10px;font-weight:800}
.cn .payment-methods{display:flex;justify-content:center;gap:8px;margin-top:10px;color:#8b96a7}
.cn .payment-methods span{border:1px solid #e6eaf0;border-radius:4px;padding:3px 6px;font-size:8px}
.cn .foot{font-size:8px;color:#a0a8b5;text-align:center;margin-top:14px}
@container cn (max-width:1050px){.cn .site-hero{grid-template-columns:1fr .8fr;padding:45px 4%}
.cn .site-links{gap:12px}
.cn .admin{grid-template-columns:170px minmax(0,1fr)}
.cn .admin-main{padding:18px}
.cn .admin-grid{grid-template-columns:1fr}
.cn .flow-grid{grid-template-columns:1fr 1fr}
.cn .flow-panel:last-child{grid-column:1/-1}
.cn .kpis{grid-template-columns:repeat(2,1fr)}
}
@container cn (max-width:680px){.cn .site-nav{padding:0 12px}
.cn .site-links span{display:none}
.cn .site-hero{grid-template-columns:1fr;padding:35px 22px}
.cn .hero-art{min-height:230px}
.cn .site h1{font-size:40px}
.cn .site-proof{grid-template-columns:repeat(2,1fr)}
.cn .admin{grid-template-columns:66px minmax(0,1fr)}
.cn .sidebar{padding:12px 5px}
.cn .brandline{font-size:0;padding:4px 0 15px;text-align:center}
.cn .brandline:before{content:"D";font-size:15px}
.cn .brandline small,.cn .nav-label,.cn .navitem:not(.active){display:none}
.cn .navitem.active{font-size:0;justify-content:center;padding:12px}
.cn .navitem.active svg{width:18px;height:18px}
.cn .sidebottom{font-size:0;justify-content:center;padding:10px 0}
.cn .sidebottom small{display:none}
.cn .admin-main{padding:12px 8px}
.cn .admin-heading{align-items:start}
.cn .admin-heading h2{font-size:18px}
.cn .datebtn{display:none}
.cn .kpi{padding:10px}
.cn .kpival{font-size:19px}
.cn .admin-grid{display:block}
.cn .agenda-row{grid-template-columns:36px 24px minmax(0,1fr);gap:5px}
.cn .agenda-row .badge{grid-column:3;justify-self:start}
.cn .flow-shell{padding:15px 9px}
.cn .flow-head h2{font-size:18px}
.cn .secure{display:none}
.cn .stepper{gap:4px}
.cn .step{font-size:7px;gap:4px}
.cn .step .n{width:23px;height:23px}
.cn .step-line{margin:0 4px}
.cn .flow-grid{grid-template-columns:1fr}
.cn .flow-panel:last-child{grid-column:auto}
.cn .flow-grid .flow-panel{grid-column:auto}
}

/* ===== Mockups de la tercera sección: contenedor, escenas animadas y ajustes ===== */
.show__frame{container:cn/inline-size}
.show__bar{display:none}
.show__body{position:relative;padding:0;background:none}
.show__panel{grid-template-columns:1fr;gap:30px}
.show__info{order:-1;display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:4px;align-items:center;max-width:800px;margin:0 auto;text-align:left}
.show__info .show__ic{grid-row:1/3;margin:0;width:54px;height:54px}
.show__info h3{margin:0;font-size:clamp(24px,2.4vw,32px)}
.show__info p{margin:0;max-width:none;font-size:17px}
.toast{top:-16px;right:18px;font-size:12px;animation:none}
.mock.cn{width:100%;margin:0;padding:0;font-size:12px;position:relative;background:var(--card);border:1px solid #dce2ec;border-radius:var(--r);overflow:hidden;box-shadow:0 24px 70px rgba(27,42,66,.16);transition:opacity .6s ease}
.show.manual .mock.cn.st-out{opacity:0}
.cn .cur{z-index:30}
.cn [class^="ty"]{color:#202939}
.cn [class^="ty"]:not(:empty)+.phd{display:none}
@keyframes rot{to{rotate:360deg}}
@keyframes bobc{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes grow2{to{transform:scaleY(1)}}
@keyframes growx2{to{transform:scaleX(var(--w,1))}}
@keyframes up2{to{opacity:1;transform:none}}
@keyframes drawl{to{stroke-dashoffset:0}}
@keyframes wipe2{to{clip-path:inset(0 0 0 0)}}
@keyframes flash{0%{background:#dbe7ff}100%{background:#f3f7ff}}
@keyframes tgl{to{background:#2563EB}}
@keyframes tglk{to{transform:translateX(12px)}}

/* ---- 1 · Sitio web ---- */
.cn-site .site-nav,.cn-site .eyeline,.cn-site h1,.cn-site .site-hero p,.cn-site .actions,.cn-site .orbit,.cn-site .core,.cn-site .float-card,.cn-site .proof{opacity:0;transition:opacity .7s ease,transform .85s cubic-bezier(.2,.7,.2,1),background .25s,box-shadow .25s}
.cn-site .site-nav{transform:translateY(-10px)}
.cn-site .eyeline,.cn-site h1,.cn-site .site-hero p,.cn-site .actions{transform:translateY(20px)}
.cn-site .orbit{transform:scale(.8)}
.cn-site .core{transform:scale(.5)}
.cn-site .float-card{transform:translateY(18px) scale(.95)}
.cn-site .proof{transform:translateY(14px)}
.cn-site.st-a1 .site-nav,.cn-site.st-a2 .eyeline,.cn-site.st-a2 h1,.cn-site.st-a2 .site-hero p,.cn-site.st-a2 .actions,.cn-site.st-a3 .orbit,.cn-site.st-a3 .core,.cn-site.st-a4 .float-card,.cn-site.st-a5 .proof{opacity:1;transform:none}
.cn-site h1{transition-delay:.1s}
.cn-site .site-hero p{transition-delay:.2s}
.cn-site .actions{transition-delay:.3s}
.cn-site .orbit.two{transition-delay:.1s}
.cn-site .orbit.three{transition-delay:.2s}
.cn-site .core{transition-delay:.35s}
.cn-site .fc2{transition-delay:.2s}
.cn-site .fc3{transition-delay:.4s}
.cn-site .proof:nth-child(2){transition-delay:.1s}
.cn-site .proof:nth-child(3){transition-delay:.2s}
.cn-site .proof:nth-child(4){transition-delay:.3s}
.cn-site .orbit::after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#9fb5ff;box-shadow:0 0 12px #7897ff}
.cn-site.st-a3 .orbit{animation:rot 26s linear infinite}
.cn-site.st-a3 .orbit.two{animation-duration:19s;animation-direction:reverse}
.cn-site.st-a3 .orbit.three{animation-duration:14s}
.cn-site.st-a4 .fc1{animation:bobc 7s ease-in-out .8s infinite}
.cn-site.st-a4 .fc2{animation:bobc 8s ease-in-out 1.2s infinite}
.cn-site.st-a4 .fc3{animation:bobc 6.5s ease-in-out 1.6s infinite}
.cn-site .tinyline i{transform:scaleY(0);transform-origin:bottom}
.cn-site.st-a4 .tinyline i{animation:grow2 .8s cubic-bezier(.2,.8,.2,1) forwards}
.cn-site.st-a4 .tinyline i:nth-child(1){animation-delay:.5s}
.cn-site.st-a4 .tinyline i:nth-child(2){animation-delay:.6s}
.cn-site.st-a4 .tinyline i:nth-child(3){animation-delay:.7s}
.cn-site.st-a4 .tinyline i:nth-child(4){animation-delay:.8s}
.cn-site.st-a4 .tinyline i:nth-child(5){animation-delay:.9s}
.cn-site.st-a4 .tinyline i:nth-child(6){animation-delay:1s}
.cn-site.st-hov .site-cta.primary{background:var(--acc-hover);box-shadow:0 8px 22px #2563EB66;transform:translateY(-1px)}
.cn-site.st-press .site-cta.primary{transform:scale(.94)}
.cn-site .site-cta{transition:transform .15s,background .25s,box-shadow .25s}

/* ---- 2 · Panel de gestión ---- */
.cn-admin .avs{display:grid}
.cn-admin .av{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s .5s}
.cn-admin.st-v1 .av1,.cn-admin.st-v2 .av2{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .15s,transform .65s cubic-bezier(.2,.7,.2,1) .15s}
.cn-admin .navitem{transition:background .4s,color .4s,box-shadow .4s}
.cn-admin.st-v1 .n-res,.cn-admin.st-v2 .n-pla{background:#253e76;color:var(--inv-fg);box-shadow:inset 2px 0 #7193ff}
.cn-admin .kpi,.cn-admin .widget{opacity:0;transform:translateY(14px)}
.cn-admin.st-v1 .av1 .kpi,.cn-admin.st-v1 .av1 .widget,.cn-admin.st-v2 .av2 .kpi,.cn-admin.st-v2 .av2 .widget{animation:up2 .7s cubic-bezier(.2,.7,.2,1) forwards}
.cn-admin .kpi.kp2{animation-delay:.1s!important}
.cn-admin .kpi.kp3{animation-delay:.2s!important}
.cn-admin .kpi.kp4{animation-delay:.3s!important}
.cn-admin .av .widget{animation-delay:.45s!important}
.cn-admin .av .admin-grid>div+div .widget{animation-delay:.6s!important}
.cn-admin .cw-line{stroke-dasharray:1;stroke-dashoffset:1}
.cn-admin .cw-area{clip-path:inset(0 100% 0 0)}
.cn-admin .cw-prev{opacity:0}
.cn-admin.st-v1 .cw-line{animation:drawl 1.9s .9s ease-out forwards}
.cn-admin.st-v1 .cw-area{animation:wipe2 1.9s .9s ease-out forwards}
.cn-admin.st-v1 .cw-prev{animation:up2 .8s .8s forwards}
.cn-admin .agenda-row,.cn-admin .offerrow{opacity:0;transform:translateX(-14px)}
.cn-admin.st-v1 .agenda-row,.cn-admin.st-v1 .av1 .offerrow,.cn-admin.st-v2 .av2 .offerrow{animation:up2 .6s cubic-bezier(.2,.7,.2,1) forwards}
.cn-admin .ar1{animation-delay:1.1s!important}
.cn-admin .ar2{animation-delay:1.3s!important}
.cn-admin .ar3{animation-delay:1.5s!important}
.cn-admin .av1 .or1{animation-delay:1.2s!important}
.cn-admin .av1 .or2{animation-delay:1.4s!important}
.cn-admin .av1 .or3{animation-delay:1.6s!important}
.cn-admin .stockbar i{transform:scaleX(0);transform-origin:left;width:calc(var(--w,1)*100%)}
.cn-admin .av1 .stockbar i{width:100%}
.cn-admin.st-v1 .av1 .stockbar i{animation:growx2 1s 1.4s cubic-bezier(.2,.8,.2,1) forwards}
.cn-admin .av1 .sl1 .stockbar i{--w:.78}
.cn-admin .av1 .sl2 .stockbar i{--w:.54}
.cn-admin .av1 .sl3 .stockbar i{--w:.28}
.cn-admin.st-v2 .av2 .stockbar i{animation:growx2 1s 1.2s cubic-bezier(.2,.8,.2,1) forwards}
/* vista 2: tabla de planes */
.cn-admin .prow{display:grid;grid-template-columns:1.4fr .7fr .7fr 1.1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #f0f2f6;font-size:10px}
.cn-admin .prow:last-child{border-bottom:0}
.cn-admin .prow--h{padding-top:0;font-size:8px;color:#8b96a8;text-transform:uppercase;letter-spacing:1px;font-weight:800}
.cn-admin .pname{display:flex;align-items:center;gap:8px;font-weight:750}
.cn-admin .pdot{width:9px;height:9px;border-radius:3px;background:var(--acc)}
.cn-admin .pdot.p2{background:#6b8cff}
.cn-admin .pdot.p3{background:#b7c8ff}
.cn-admin .pdot.p4{background:#16A34A}
.cn-admin .pbar{display:block;height:5px;border-radius:5px;background:#edf0f6;overflow:hidden}
.cn-admin .pbar i{display:block;height:100%;background:#7091ff;transform:scaleX(0);transform-origin:left;width:100%}
.cn-admin.st-v2 .pbar i{animation:growx2 1s 1s cubic-bezier(.2,.8,.2,1) forwards}
.cn-admin .tgl{position:relative;width:28px;height:16px;border-radius:4px;background:#cfd6e2}
.cn-admin .tgl::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:3px;background:var(--card)}
.cn-admin.st-v2 .tgl{animation:tgl .3s forwards}
.cn-admin.st-v2 .tgl::after{animation:tglk .3s forwards}
.cn-admin.st-v2 .pr1 .tgl,.cn-admin.st-v2 .pr1 .tgl::after{animation-delay:1.1s}
.cn-admin.st-v2 .pr2 .tgl,.cn-admin.st-v2 .pr2 .tgl::after{animation-delay:1.3s}
.cn-admin.st-v2 .pr3 .tgl,.cn-admin.st-v2 .pr3 .tgl::after{animation-delay:1.5s}
.cn-admin .prow:not(.prow--h):not(.prow--new){opacity:0;transform:translateX(-14px)}
.cn-admin.st-v2 .prow:not(.prow--h):not(.prow--new){animation:up2 .6s cubic-bezier(.2,.7,.2,1) forwards}
.cn-admin .pr1{animation-delay:.6s!important}
.cn-admin .pr2{animation-delay:.8s!important}
.cn-admin .pr3{animation-delay:1s!important}
.cn-admin .av2 .pg1{animation-delay:1.2s!important}
.cn-admin .av2 .pg2{animation-delay:1.4s!important}
.cn-admin .av2 .pg3{animation-delay:1.6s!important}
.cn-admin .prow--new{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0;border-bottom-color:transparent;transition:max-height .6s ease,padding .6s ease,opacity .6s ease}
.cn-admin.st-pub .prow--new{max-height:60px;padding:11px 0;opacity:1;background:#f3f7ff;animation:flash 1.6s ease-out}
.cn-admin.st-pub .prow--new .pbar i{transform:scaleX(var(--w));transition:transform 1s}
.cn-admin.st-pub .prow--new .tgl{background:var(--acc)}
.cn-admin.st-pub .prow--new .tgl::after{transform:translateX(12px)}
.cn-admin .nuevo .choicepill{transition:background .3s,border-color .3s,color .3s}
.cn-admin.st-tp .tp1{background:#edf3ff;border-color:#b7c8ff;color:var(--acc)}
.cn-admin .pub{transition:transform .15s,background .3s}
.cn-admin.st-press .pub{transform:scale(.95)}
.cn-admin.st-pub .pub{background:#16A34A}
.cn-admin.st-pub .nuevo .widgethead small{color:#16A34A}
.cn-admin .inputmock{min-height:34px}

/* ---- 3 · Flujo comercial ---- */
.cn-flow .flow-head,.cn-flow .stepper,.cn-flow .flow-panel{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.cn-flow.st-a1 .flow-head,.cn-flow.st-a1 .stepper,.cn-flow.st-a2 .flow-panel:nth-child(1),.cn-flow.st-a3 .flow-panel:nth-child(2),.cn-flow.st-a4 .flow-panel:nth-child(3){opacity:1;transform:none}
.cn-flow .product-option,.cn-flow .choicepill,.cn-flow .checkrow,.cn-flow .inputmock{transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.cn-flow .product-option{padding-left:8px;padding-right:8px;margin:0 -8px;border-radius:4px}
.cn-flow.st-p2 .po2{background:#f3f7ff;box-shadow:inset 3px 0 var(--acc)}
.cn-flow.st-p2 .po2 .price{color:var(--acc)}
.cn-flow .checkbox::after{content:"✓";color:transparent;font-size:9px}
.cn-flow.st-c1 .cr1 .checkbox,.cn-flow.st-c4 .cr4 .checkbox{background:var(--acc);border-color:var(--acc)}
.cn-flow.st-c1 .cr1 .checkbox::after,.cn-flow.st-c4 .cr4 .checkbox::after{color:var(--inv-fg)}
.cn-flow.st-t2 .cpn2,.cn-flow.st-h2 .cpn5{background:#edf3ff;border-color:#b7c8ff;color:var(--acc)}
.cn-flow .dateinp .dv{transition:color .3s}
.cn-flow.st-dt .dateinp{border-color:#b7c8ff;color:#202939}
.cn-flow.st-dt .dateinp .dv{color:#202939}
.cn-flow .flow-panel:nth-child(3) .flow-panelbody>*:not(.summary-label){opacity:.3;transition:opacity .5s}
.cn-flow.st-p2 .flow-panel:nth-child(3) .summary-product,.cn-flow.st-p2 .flow-panel:nth-child(3) .sl-base,.cn-flow.st-p2 .flow-panel:nth-child(3) .total{opacity:1}
.cn-flow.st-c1 .flow-panel:nth-child(3) .sl-pri{opacity:1}
.cn-flow.st-p2 .flow-panel:nth-child(3) .sumline:nth-of-type(n+3),.cn-flow.st-p2 .flow-panel:nth-child(3) .payment-methods,.cn-flow.st-p2 .flow-panel:nth-child(3) .checkout{opacity:1}
.cn-flow .checkout{transition:transform .15s,background .3s}
.cn-flow.st-press .checkout{transform:scale(.96);background:var(--acc-hover)}
.cn-flow.st-s3 .stp2,.cn-flow.st-s4 .stp2,.cn-flow.st-s5 .stp2,.cn-flow.st-s4 .stp3,.cn-flow.st-s5 .stp3,.cn-flow.st-s5 .stp4{color:#9aa3b2;font-weight:400}
.cn-flow.st-s3 .stp2 .n,.cn-flow.st-s4 .stp2 .n,.cn-flow.st-s5 .stp2 .n,.cn-flow.st-s4 .stp3 .n,.cn-flow.st-s5 .stp3 .n,.cn-flow.st-s5 .stp4 .n{background:#e9f8f0;border-color:#bce8d2;color:#14835c;font-size:0}
.cn-flow.st-s3 .stp2 .n::after,.cn-flow.st-s4 .stp2 .n::after,.cn-flow.st-s5 .stp2 .n::after,.cn-flow.st-s4 .stp3 .n::after,.cn-flow.st-s5 .stp3 .n::after,.cn-flow.st-s5 .stp4 .n::after{content:"✓";font-size:12px}
.cn-flow.st-s3 .stp3,.cn-flow.st-s4 .stp4,.cn-flow.st-s5 .stp5{color:var(--acc);font-weight:750}
.cn-flow.st-s3 .stp3 .n,.cn-flow.st-s4 .stp4 .n,.cn-flow.st-s5 .stp5 .n{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.cn-flow .step .n{transition:background .4s,border-color .4s,color .4s}
.cn-flow .flowok{position:absolute;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:10px;background:rgba(251,252,254,.97);text-align:center;opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.cn-flow.st-ok .flowok{opacity:1;visibility:visible;transition:opacity .5s}
.cn-flow .flowok i{display:grid;place-items:center;width:64px;height:64px;border-radius:4px;background:var(--acc);color:var(--accfg);font-style:normal;font-size:30px;box-shadow:0 0 0 10px color-mix(in srgb,var(--acc) 14%,transparent)}
.cn-flow.st-ok .flowok i{animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.cn-flow .flowok b{font-size:22px;font-weight:800;letter-spacing:-.5px}
.cn-flow .flowok small{font-size:11px;color:#7a8596}
.cn-flow.st-ok .cur,.cn-site .cur.hide{opacity:0}

@container cn (max-width:680px){
  .cn-admin .prow{grid-template-columns:1.3fr .6fr .7fr auto}
  .cn-admin .prow>.pbar,.cn-admin .prow--h>span:nth-child(4){display:none}
}
@media (max-width:900px){
  .show__info{grid-template-columns:1fr;row-gap:8px;justify-items:start}
  .show__info .show__ic{grid-row:auto;width:48px;height:48px}
  .toast{right:10px;top:-14px}
}
@media (prefers-reduced-motion:reduce){.toast{opacity:1;transform:none}}
/* La altura del escenario sigue al mockup activo */
.show__stage{display:block;position:relative}
.show__panel{position:absolute;left:0;right:0;top:0;grid-area:auto}
.show__panel.on{position:relative}
/* Móvil: versión compacta de cada mockup para que no sean demasiado largos */
@container cn (max-width:680px){
  .cn-admin .av1 .admin-grid>div:nth-child(2){display:none}
  .cn-admin .av2 .admin-grid>div:nth-child(1) section:nth-child(2){display:none}
  .cn-admin .av2 .admin-grid>div:nth-child(2) section:nth-child(2){display:none}
  .cn-admin .av1 .agenda-row:nth-child(3){display:none}
  .cn-flow .flow-grid .flow-panel:nth-child(2){display:none}
  .cn-site .site-hero{min-height:0}
}

/* ===== Mockups de la tercera sección: misma medida de columna que antes (diseño de 1100 px escalado) ===== */
.show__frame{container:none;position:relative}
.mock.cn{container:cn/inline-size}
.show__panel{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:56px;align-items:center}
.show__info{order:0;display:block;max-width:none;margin:0;text-align:left}
.show__info .show__ic{width:58px;height:58px;margin:0 0 26px}
.show__info h3{margin:0 0 14px;font-size:clamp(28px,3vw,40px)}
.show__info p{margin:0;max-width:34ch;font-size:18px}
@media (min-width:901px){
  .mock.cn{position:absolute;left:0;top:0;width:1100px;transform-origin:0 0;transform:scale(var(--k,.6))}
  .toast{top:-14px;right:14px}
}
@media (max-width:900px){
  .show__panel{grid-template-columns:1fr;gap:32px}
  .mock.cn{width:100%}
}

/* ===== Los tres mockups con exactamente la misma medida ===== */
@media (min-width:901px){
  .mock.cn{height:880px;overflow:hidden}
}
.cn-site>.site,.cn-admin>.admin,.cn-flow>.flow-shell{height:100%}
.cn-site>.site{display:flex;flex-direction:column}
.cn .site-hero{flex:1}
.cn-admin>.admin{min-height:0}
.cn-admin .admin-main{overflow:hidden}
.cn-flow>.flow-shell{display:flex;flex-direction:column;min-height:0}
.cn-flow .flow-grid{flex:1;align-items:stretch}
@media (max-width:900px){
  .show__frame{height:760px;overflow:hidden;border-radius:var(--r)}
  .mock.cn{width:100%;height:100%;overflow:hidden}
  .show__frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(rgba(255,255,255,0),var(--card));pointer-events:none;z-index:40}
}
/* Alturas más bajas: 680 px de diseño en escritorio y 600 px en móvil */
@media (min-width:901px){.mock.cn{height:680px}}
@media (max-width:900px){.show__frame{height:620px}}
/* Móvil: lo esencial de cada escena queda dentro del marco de 600 px */
@container cn (max-width:680px){
  .cn-admin .av2 .admin-grid>div:nth-child(1){display:none}
  .cn-admin .av2 .admin-grid>div:nth-child(2) section:nth-child(2){display:none}
  .cn-admin .av1 .agenda-row:nth-child(n+2){display:none}
  .cn-flow .flow-head small,.cn-flow .stepper .step-line{display:none}
  .cn-flow .stepper{justify-content:space-between;margin-bottom:14px}
  .cn-flow .flow-shell{padding:12px 9px}
  .cn-flow .flow-head{margin-bottom:12px}
  .cn-flow .chips,.cn-flow .po1,.cn-flow .po3,.cn-flow .po4,.cn-flow .cr2,.cn-flow .cr3,.cn-flow .fieldlabel:has(+ .cr1){display:none}
  .cn-flow .sl-base~.sumline:not(.sl-pri){display:none}
  .cn-flow .payment-methods,.cn-flow .flow-panel:last-child .flow-panelbody>div:last-child{display:none}
  .cn-site .site-proof{grid-template-columns:repeat(2,1fr);padding:14px 22px}
}
@container cn (max-width:680px){
  .cn-admin .admin-top,.cn-admin .av2 .admin-heading p,.cn-admin .av2 .admin-heading>div:last-child{display:none}
  .cn-admin .admin-main{padding-top:12px}
}

/* ===== Modos de escala: escritorio 1100x680 y móvil 420x600 (se ajustan al ancho) ===== */
.mock.cn[data-mode]{position:absolute;left:0;top:0;transform-origin:0 0;transform:translate3d(var(--tx,0px),0,0) scale(var(--k,.6));overflow:hidden;will-change:transform}
.mock.cn[data-mode=desk]{width:1100px;height:680px}
.mock.cn[data-mode=mob]{width:420px;height:610px}
@media (max-width:900px){.show__frame{overflow:hidden}.show__frame::after{display:none}}
@media (prefers-reduced-motion:reduce){.show__frame{overflow-x:auto}}

/* Escritorio: contenido ajustado para que quepa en 1100 x 680 sin recortes */
@container cn (min-width:701px){
  .cn-admin .admin-main{padding:16px 22px}
  .cn-admin .admin-top{margin-bottom:14px}
  .cn-admin .admin-heading{margin-bottom:12px}
  .cn-admin .admin-heading h2{font-size:20px}
  .cn-admin .admin-heading p{margin-top:4px}
  .cn-admin .kpis{margin-bottom:12px}
  .cn-admin .kpi{padding:11px 13px}
  .cn-admin .kpival{font-size:21px;margin:7px 0 3px}
  .cn-admin .widget{margin-bottom:11px}
  .cn-admin .widgethead{padding:10px 13px}
  .cn-admin .widgetbody{padding:9px 13px}
  .cn-admin .chartsvg{height:110px}
  .cn-admin .agenda-row{padding:7px 0}
  .cn-admin .av1 .ar3{display:none}
  .cn-admin .av1 .admin-grid>div:nth-child(2) .widget:nth-child(3){display:none}
  .cn-admin .offerrow{padding:7px 0}
  .cn-admin .stockline{padding:7px 0}
  .cn-admin .prow{padding:8px 0}
  .cn-admin .av2 .offerrow{margin-bottom:0}
  .cn-admin .av2 .admin-grid>div:nth-child(1) .widget:nth-child(2) .offerrow:nth-child(n+3){display:none}
  .cn-admin .fieldlabel{margin:9px 0 5px}
  .cn-admin .inputmock{padding:8px 10px;margin-bottom:5px}
  .cn-admin .checkout{margin-top:9px;padding:10px}
  .cn-flow .flow-shell{padding:16px 22px}
  .cn-flow .flow-head{margin-bottom:12px}
  .cn-flow .flow-head h2{font-size:20px}
  .cn-flow .stepper{margin-bottom:14px}
  .cn-flow .flow-panelhead{padding:11px 13px 10px}
  .cn-flow .flow-panelbody{padding:10px 13px}
  .cn-flow .product-option{padding:7px 8px}
  .cn-flow .product-icon{width:36px;height:36px}
  .cn-flow .fieldlabel{margin:9px 0 5px}
  .cn-flow .inputmock{padding:8px 10px;margin-bottom:6px}
  .cn-flow .inputmock.multiline{height:46px}
  .cn-flow .checkrow{padding:5px 0}
  .cn-flow .sumline{padding:7px 0}
  .cn-flow .summary-product{padding-bottom:10px}
  .cn-flow .checkout{margin-top:11px;padding:10px}
  .cn-flow .flow-panel:last-child .flow-panelbody>div:last-child{display:none}
  .cn-site .site-hero{padding:46px 6% 36px}
}
@container cn (min-width:701px){
  .cn-admin .av2 .admin-grid>div:nth-child(2) .widget:nth-child(2){display:none}
}
/* Móvil (diseño de 420 px): contenido optimizado para caber en 420 x 600 sin recortes */
@container cn (max-width:680px){
  .cn-site .hero-art{min-height:190px}
  .cn-site .site-hero{padding:26px 22px 22px;gap:18px}
  .cn-site .site h1{margin:14px 0 10px;font-size:36px}
  .cn-site .site-hero p{margin-bottom:16px}
  .cn-admin .admin-main{padding:10px 8px}
  .cn-admin .admin-heading{margin-bottom:10px}
  .cn-admin .admin-heading p{display:none}
  .cn-admin .kpis{gap:8px;margin-bottom:9px}
  .cn-admin .kpi{padding:8px 10px}
  .cn-admin .kpival{font-size:17px;margin:6px 0 3px}
  .cn-admin .kpifoot{font-size:8px}
  .cn-admin .chartsvg{height:92px}
  .cn-admin .widgethead{padding:9px 11px}
  .cn-admin .widgetbody{padding:8px 11px}
  .cn-admin .fieldlabel{margin:7px 0 4px}
  .cn-admin .inputmock{padding:7px 9px;margin-bottom:4px}
  .cn-admin .checkout{margin-top:8px;padding:9px}
  .cn-flow .flow-panelhead{padding:10px 11px 9px}
  .cn-flow .flow-panelbody{padding:9px 11px}
  .cn-flow .product-option{padding:7px 0}
  .cn-flow .summary-label{display:none}
  .cn-flow .summary-product{padding-bottom:9px}
  .cn-flow .sumline{padding:7px 0}
  .cn-flow .total{padding-top:9px}
  .cn-flow .checkout{margin-top:10px;padding:10px}
  .cn-flow .flow-grid{gap:10px}
}


/* ===== Mockups: jerarquía tipográfica del sitio (Raleway 300/400/500, números en Manrope, logotipo en Cormorant) ===== */
.cn,.cn *{font-family:var(--sans)!important}
.cn *{font-weight:400!important}
.cn .wordmark,.cn .brandline{font-family:var(--logo)!important;font-weight:600!important;letter-spacing:.16em!important;text-transform:uppercase}
.cn .wordmark span,.cn .brandline span{font-weight:600!important}
.cn .brandline small{font-family:var(--sans)!important;font-weight:400!important;letter-spacing:.2em!important}
/* Nivel 1 · titulares: ligeros y apretados, como los títulos de la página */
.cn h1,.cn h2{font-weight:300!important;letter-spacing:-.025em!important}
.cn .site h1{font-size:clamp(34px,4vw,54px);line-height:1.05}
.cn .site h1 em{font-weight:300!important}
.cn .admin-heading h2,.cn .flow-head h2{font-size:21px;line-height:1.15}
/* Nivel 2 · etiquetas superiores (mismo estilo que los eyebrow del sitio) */
.cn .eyeline,.cn .nav-label,.cn .summary-label{font-weight:500!important;letter-spacing:.2em!important;text-transform:uppercase}
.cn .prow--h,.cn .prow--h span{font-weight:500!important;letter-spacing:.14em!important}
/* Nivel 3 · títulos de bloque y nombres */
.cn .widgethead,.cn .flow-panelhead,.cn .offername,.cn .agenda-name,.cn .product-option b,.cn .summary-product b,.cn .pname,.cn .kpihead,.cn .navitem.n-res,.cn .navitem.n-pla,.cn .flowok b,.cn .step.active,.cn .fieldlabel{font-weight:500!important}
.cn .widgethead small,.cn .flow-panelhead small{font-weight:400!important}
/* Nivel 4 · cifras (Manrope): grandes en 300, precios y datos en 500 */
.cn .kpival,.cn .total strong,.cn .float-card .num{font-weight:300!important;letter-spacing:-.04em!important}
.cn .price,.cn .offerprice,.cn .sumline strong,.cn .stockqty,.cn .total,.cn .checkrow span:last-child,.cn .prow>span:nth-child(3){font-weight:500!important}
.cn .total strong{font-weight:300!important}
/* Botones y etiquetas de estado */
.cn .site-cta,.cn .addbtn,.cn .datebtn,.cn .checkout,.cn .badge,.cn .count,.cn .chip.active,.cn .choicepill.active,.cn .step .n,.cn .initials,.cn .userpic{font-weight:500!important}
.cn .site-links span,.cn .proof b,.cn .float-card b{font-weight:500!important}
.cn .proof b{font-size:11px}
.cn .kpifoot b{font-weight:500!important}
.cn .eyeline{font-size:9px}
.cn .wordmark span,.cn .brandline span{font-family:var(--logo)!important}
@media (max-width:700px){.prog,.show__tabs button::after{left:10px;right:10px;bottom:5px}}

/* Mockups: iconos en trazo único, línea de progreso sin bordes heredados del sitio */
.cn .gi{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.cn .datebtn .gi,.cn .addbtn .gi,.cn .checkout .gi{width:1.2em;height:1.2em;vertical-align:-.22em;margin:0 .35em}
.cn .datebtn .gi:first-child,.cn .addbtn .gi:first-child{margin-left:0}
.cn .widgethead small .gi,.cn .kpifoot .gi{width:1em;height:1em;vertical-align:-.15em;margin-left:.3em}
.cn .kpifoot b .gi{margin:0 .25em 0 0}
.cn .step{border-top:0;padding-top:0}
.cn .stepper{align-items:center}
.cn .step .n{flex:none;line-height:1}
.cn .step .n .gi{width:12px;height:12px;vertical-align:0;margin:0;stroke-width:2.2}
.cn .step-line{align-self:center;flex:1 1 0;min-width:8px}
.cn svg:not(.gi):not(.chartsvg):not(.cur){stroke-width:1.7}
.cn .navitem svg,.cn .search svg,.cn .iconbtn svg,.cn .kpiicon svg{width:14px;height:14px}
.cn .offericon svg,.cn .product-icon svg,.cn .summary-thumb svg{width:18px;height:18px}
.cn .stepper{width:100%}
.cn .step-line{background:#dfe5ed;height:1px}

/* Transición continua entre mockups: el entrante se funde encima y el saliente se retira solo cuando ya está cubierto */
.show__panel{transition:opacity 0s .45s,transform 0s .45s,visibility 0s .45s;z-index:1}
.show__panel.on{z-index:2;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s}
.show.manual .mock.cn.st-out{transition:opacity .5s}
@media (prefers-reduced-motion:reduce){.show__panel,.show__panel.on{transition:none}}

/* Pestañas minimalistas: sin contenedor ni tarjetas, solo la selección activa y su línea de progreso */
.show__tabs{background:none;border:0;box-shadow:none;padding:0;border-radius:0;max-width:640px}
.show__tabs button{background:none!important;border-radius:0;padding:14px 12px 20px}
.show__tabs button.on{background:none!important;color:var(--acc)}
.show__tabs button::after{left:12px;right:12px;bottom:6px}
.show__tabs button::after{opacity:1;background:var(--line)}
.show__tabs button.on::after{background:var(--info-l)}
.prog{left:12px;right:12px;bottom:6px}
@media (max-width:700px){.show__tabs button{padding:12px 4px 18px}.show__tabs button::after,.prog{left:8px;right:8px;bottom:5px}}
.show__tabs .ic{box-sizing:content-box;width:18px;height:18px;padding:9px;border-radius:var(--r);background:var(--g50,var(--g100));color:var(--muted);transition:background .25s,color .25s}
.show__tabs button:hover .ic{background:var(--line)}
.show__tabs button.on .ic{background:var(--info-l);color:var(--acc)}
@media (max-width:700px){.show__tabs .ic{width:16px;height:16px;padding:8px}}

/* Línea de progreso: corta, centrada y fina; solo existe en la opción activa */
.prog,.show__tabs button::after{left:50%;right:auto;width:36px;margin-left:-18px;height:1.5px;bottom:7px}
.show__tabs button::after{opacity:0;background:var(--info-l)}
.show__tabs button.on::after{opacity:1}
@media (max-width:700px){.prog,.show__tabs button::after{left:50%;right:auto;width:28px;margin-left:-14px;bottom:5px}}

/* Progreso en cápsula */
.prog,.show__tabs button::after{height:4px;border-radius:999px;width:44px;margin-left:-22px;bottom:6px}
.show__tabs button::after{background:var(--info-l)}
@media (max-width:700px){.prog,.show__tabs button::after{width:36px;margin-left:-18px;bottom:4px}}

/* Contenedor de pestañas: barra fina con divisiones, icono junto al texto y progreso en cápsula sobre el borde inferior */
.show__tabs{max-width:680px;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px -26px color-mix(in srgb,var(--shadow) 28%,transparent);overflow:hidden}
.show__tabs button{flex-direction:row;gap:12px;padding:16px 12px 22px;border-radius:0;font-size:14px;letter-spacing:.01em}
.show__tabs button+button{border-left:1px solid var(--line)}
.show__tabs .ic{width:16px;height:16px;padding:8px}
.show__tabs button::after,.prog{bottom:7px}
.show__tabs button.on{background:linear-gradient(180deg,rgba(239,246,255,0),rgba(239,246,255,.7))!important}
@media (max-width:700px){
  .show__tabs button{flex-direction:column;gap:8px;padding:12px 4px 20px;font-size:12.5px}
  .show__tabs .ic{width:14px;height:14px;padding:8px}
  .show__tabs button::after,.prog{bottom:6px}
}
.show__tabs button+button{border-left:0}

/* Iconos de las fichas: más pequeños y finos */
.show__info .show__ic{width:38px;height:38px;margin:0 0 20px;background:var(--acc-l);color:var(--acc);box-shadow:inset 0 0 0 1px var(--info-l)}
.show__info .show__ic .ic{width:17px;height:17px;stroke-width:1.5}
@media (max-width:900px){.show__info .show__ic{width:36px;height:36px;margin:0 0 16px}}

/* Móvil: la integración de los tres componentes pasa a ser el resumen inicial, entre el encabezado y las pestañas */
@media (max-width:700px){
  .showcase{display:flex;flex-direction:column}
  .showcase__head{order:1}
  .showcase .merge{order:2;margin:0 auto 44px;width:100%}
  .showcase .show{order:3}
}

/* Integración minimalista: sin tarjetas; iconos y texto sueltos, líneas finas y un párrafo centrado */
.mchip{background:none;border:0;box-shadow:none;padding:0;flex-direction:column;gap:10px;text-align:center;font-size:14px;color:var(--muted)}
.mchip i{width:auto;height:auto;background:none;color:var(--acc)}
.mchip .ic{width:22px;height:22px;stroke-width:1.4}
.mchip b{color:var(--fg)}
.merge__lines{height:56px;opacity:.7}
.merge__bar{flex-direction:column;justify-content:center;gap:14px;padding:0;background:none;border:0;box-shadow:none;text-align:center}
.merge__node{width:auto;height:auto;background:none;color:var(--acc);box-shadow:none}
.merge__node .ic{width:22px;height:22px;stroke-width:1.4}
.merge__bar p{max-width:560px;margin:0 auto;font-size:17px;color:var(--muted)}
@media (max-width:700px){
  .mchip{padding:0;font-size:12px;gap:8px}
  .merge__bar{align-items:center;padding:0}
  .merge__bar p{font-size:15px}
}
.merge__node .ic{width:24px;height:24px}
.merge__bar{margin-top:20px}
.merge__node .ic{width:28px;height:28px}

/* Barra de pestañas en píldora: icono suelto junto al texto, opción activa con fondo azul suave y progreso en cápsula */
.show__tabs{max-width:720px;padding:6px;gap:0;background:var(--card);border:1px solid var(--line);border-radius:999px;box-shadow:0 1px 2px color-mix(in srgb,var(--shadow) 4%,transparent),0 22px 44px -26px color-mix(in srgb,var(--acc) 28%,transparent);overflow:hidden}
.show__tabs button{flex-direction:row;gap:14px;padding:14px 16px 24px;border-radius:999px;font-size:16px;letter-spacing:0;background:none!important;border:0}
.show__tabs button+button{border-left:0}
.show__tabs button.on{background:var(--acc-l)!important;color:var(--acc)}
.show__tabs .ic,.show__tabs button:hover .ic,.show__tabs button.on .ic{box-sizing:border-box;width:22px;height:22px;padding:0;background:none;border-radius:0;color:inherit;stroke-width:1.5}
.show__tabs button::after{display:none}
.prog{left:50%;right:auto;width:48px;margin-left:-24px;bottom:9px;height:4px;border-radius:999px}
.show__tabs button.on .prog{background:linear-gradient(90deg,var(--acc),var(--acc))}
@media (max-width:700px){
  .show__tabs{border-radius:28px;padding:5px}
  .show__tabs button{flex-direction:column;gap:7px;padding:12px 4px 20px;font-size:12.5px;border-radius:24px}
  .show__tabs .ic,.show__tabs button:hover .ic,.show__tabs button.on .ic{width:19px;height:19px}
  .prog{width:32px;margin-left:-16px;bottom:7px}
}

/* Móvil · la leyenda queda pegada al mockup y el icono comparte fila con el título */
.show__note--m{display:none}
@media (max-width:900px){
  .show>.show__note{display:none}
  .show__note--m{display:block;margin:-18px 0 0;text-align:center}
  .show__info{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:10px;align-items:center;justify-items:stretch}
  .show__info .show__ic{grid-row:auto;grid-column:1;margin:0}
  .show__info h3{grid-column:2;margin:0}
  .show__info p{grid-column:1/-1}
}

/* Móvil · barra Digital / Operativa / Comercial del hero con el diseño de píldora: icono + texto, fondo azul suave y progreso en cápsula */
@keyframes ecoprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:760px){
  .eco__tabs{max-width:none;padding:6px;border-radius:999px;box-shadow:0 1px 2px color-mix(in srgb,var(--shadow) 4%,transparent),0 22px 44px -26px color-mix(in srgb,var(--acc) 28%,transparent)}
  .eco__tabs::before{top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/3);box-shadow:none;border-radius:999px}
  .eco__tabs span{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px;padding:13px 0 21px}
  .eco__tabs .ic{width:16px;height:16px;stroke-width:1.5;flex:none}
  .eco__tabs span::after{content:"";position:absolute;left:50%;bottom:9px;width:32px;height:4px;margin-left:-16px;border-radius:999px;background:var(--acc);transform:scaleX(0);transform-origin:left}
  .eco__tabs span.on::after{animation:ecoprog 4.5s linear forwards}
  .eco__tabs.user span.on::after{animation:none;transform:scaleX(1)}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.eco__tabs span.on::after{animation:none;transform:scaleX(1)}}
@media (max-width:760px){
  .eco__tabs span{flex-direction:column;gap:7px;font-size:12.5px;padding:12px 0 20px}
  .eco__tabs .ic{width:19px;height:19px}
  .eco__tabs span::after{bottom:7px}
}
@media (max-width:760px){
  .eco__tabs,.show__tabs{border-radius:28px}
  .eco__tabs::before,.show__tabs button{border-radius:22px}
}
@media (max-width:900px){
  .show__info .show__ic{grid-row:1}
  .show__info h3{grid-row:1}
  .show__info p{grid-column:2;grid-row:2}
}

/* 04 · Beneficios: índice editorial a todo el ancho */
.bx__head{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:end;margin-bottom:64px}
.bx__head h2{max-width:14ch}
.bx__head .hl{color:var(--acc)}
.bx__head .lead{margin:0;max-width:44ch}
/* Mosaico asimétrico */
.bx{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bx__row{position:relative;display:flex;flex-direction:column;min-height:280px;padding:34px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .4s}
.bx__row:nth-child(1){grid-column:span 7}
.bx__row:nth-child(2){grid-column:span 5;background:var(--acc-l);border-color:var(--info-l)}
.bx__row:nth-child(3){grid-column:span 5}
.bx__row:nth-child(4){grid-column:span 7;background:var(--inv-bg);border-color:var(--fg);color:var(--inv-fg)}
.bx__row:hover{transform:translateY(-4px);box-shadow:0 30px 50px -34px color-mix(in srgb,var(--shadow) 35%,transparent);border-color:var(--acc)}
.bx__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);background:var(--acc-l);color:var(--acc);margin-bottom:auto}
.bx__ic .ic{width:20px;height:20px;stroke-width:1.5}
.bx__row:nth-child(2) .bx__ic{background:var(--card)}
.bx__row:nth-child(4) .bx__ic{background:rgba(255,255,255,.08);color:var(--inv-fg)}
.bx__num{position:absolute;top:26px;right:30px;font-family:"Manrope",var(--sans);font-weight:300;font-size:64px;line-height:1;letter-spacing:-.05em;color:color-mix(in srgb,var(--shadow) 8%,transparent)}
.bx__row:nth-child(2) .bx__num{color:color-mix(in srgb,var(--acc) 16%,transparent)}
.bx__row:nth-child(4) .bx__num{color:color-mix(in srgb,var(--inv-fg) 12%,transparent)}
.bx__row h3{margin:36px 0 10px;font-size:clamp(22px,2.1vw,28px);font-weight:300;letter-spacing:-.02em;line-height:1.2}
.bx__row p{margin:0;max-width:44ch;font-size:15.5px;line-height:1.6;color:var(--muted)}
.bx__row:nth-child(4) p{color:color-mix(in srgb,var(--inv-fg) 70%,transparent)}
.bx__go{display:none}
@media (max-width:900px){
  .bx{grid-template-columns:1fr;gap:12px}
  .bx__row,.bx__row:nth-child(n){grid-column:auto;min-height:0;padding:26px}
  .bx__num{font-size:48px;top:20px;right:22px}
  .bx__row h3{margin-top:28px;font-size:21px}
}
@media (prefers-reduced-motion:reduce){.bx__row{transition:none}.bx__row:hover{transform:none}}
.bx__row:nth-child(4) h3{color:var(--inv-fg)}
@media (max-width:900px){.bx__head{grid-template-columns:1fr;gap:20px;margin-bottom:40px}}

/* Mosaico también en móvil: ancho completo / dos mitades / ancho completo */
@media (max-width:900px){
  .bx{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bx__row:nth-child(1),.bx__row:nth-child(4){grid-column:span 2}
  .bx__row:nth-child(2),.bx__row:nth-child(3){grid-column:span 1;padding:20px 18px}
  .bx__row:nth-child(2) h3,.bx__row:nth-child(3) h3{font-size:17px;margin-top:22px}
  .bx__row:nth-child(2) p,.bx__row:nth-child(3) p{font-size:13px;line-height:1.5}
  .bx__row:nth-child(2) .bx__num,.bx__row:nth-child(3) .bx__num{font-size:36px;top:16px;right:16px}
  .bx__row:nth-child(2) .bx__ic,.bx__row:nth-child(3) .bx__ic{width:38px;height:38px}
}
.bx__row:nth-child(5){grid-column:span 7}
.bx__row:nth-child(6){grid-column:span 5}
@media (max-width:900px){
  .bx__row:nth-child(5),.bx__row:nth-child(6){grid-column:span 1;padding:20px 18px}
  .bx__row:nth-child(5) h3,.bx__row:nth-child(6) h3{font-size:17px;margin-top:22px}
  .bx__row:nth-child(5) p,.bx__row:nth-child(6) p{font-size:13px;line-height:1.5}
  .bx__row:nth-child(5) .bx__num,.bx__row:nth-child(6) .bx__num{font-size:36px;top:16px;right:16px}
  .bx__row:nth-child(5) .bx__ic,.bx__row:nth-child(6) .bx__ic{width:38px;height:38px}
}

/* Mosaico: solo título y botón; la descripción vive en el modal */
.bx__row{cursor:pointer;min-height:240px}
.bx__row p{display:none}
.bx__row h3{margin:auto 0 0;padding-right:72px}
.bx__ic{margin-bottom:0}
.bx__go{display:grid;position:absolute;right:30px;bottom:30px;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);opacity:1;cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.bx__row:nth-child(2) .bx__go{border-color:var(--info-b)}
.bx__row:nth-child(4) .bx__go{background:transparent;border-color:rgba(255,255,255,.3);color:var(--inv-fg)}
.bx__go .ic{width:18px;height:18px;stroke-width:1.5;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.bx__row:hover .bx__go,.bx__go:focus-visible{background:var(--acc);border-color:var(--acc);color:var(--accfg);transform:none}
.bx__row:hover .bx__go .ic{transform:translateX(3px)}
.bx__go:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 40%,transparent);outline-offset:3px}
@media (max-width:900px){
  .bx__row,.bx__row:nth-child(n){min-height:0}
  .bx__row h3,.bx__row:nth-child(n) h3{margin:26px 0 0;padding-right:0}
  .bx__go{position:static;margin-top:18px;width:40px;height:40px}
  .bx__row:nth-child(1),.bx__row:nth-child(4){min-height:200px}
  .bx__row:nth-child(1) .bx__go,.bx__row:nth-child(4) .bx__go{position:absolute;right:22px;bottom:22px;margin:0}
  .bx__row:nth-child(1) h3,.bx__row:nth-child(4) h3{margin-top:auto;padding-right:60px}
}

/* Modal de beneficio a pantalla completa: visual azul a la izquierda, contenido sobre grafito a la derecha */
html.bm-open{overflow:hidden}
.bm{position:fixed;inset:0;z-index:300;opacity:0;transition:opacity .4s ease}
.bm[hidden]{display:none}
.bm.open{opacity:1}
.bm__panel{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#0B0F1A;color:var(--inv-fg);transform:scale(1.015);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.bm.open .bm__panel{transform:none}
.bm__vis{position:relative;overflow:hidden;background:radial-gradient(ellipse 90% 70% at 20% 10%,var(--acc-top) 0%,color-mix(in srgb,var(--acc-top) 0%,transparent) 60%),radial-gradient(ellipse 80% 80% at 90% 100%,var(--acc-hover) 0%,color-mix(in srgb,var(--acc-hover) 0%,transparent) 65%),#0F2A6B}
.bm__vis::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.28) 1.2px,transparent 1.6px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 20%,transparent 80%)}
.bm__bgnum{position:absolute;left:-.04em;bottom:-.14em;font-family:"Manrope",var(--sans);font-weight:300;font-size:clamp(220px,34vw,520px);line-height:1;letter-spacing:-.06em;color:color-mix(in srgb,var(--inv-fg) 9%,transparent)}
.bm__ic{position:absolute;left:clamp(28px,4vw,64px);top:clamp(28px,4vw,64px);display:grid;place-items:center;width:64px;height:64px;border-radius:var(--r);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bm__ic .ic{width:26px;height:26px;stroke-width:1.4;color:var(--inv-fg)}
.bm__count{position:absolute;left:clamp(28px,4vw,64px);bottom:32px;font-family:"Manrope",var(--sans);font-size:13px;letter-spacing:.2em;color:color-mix(in srgb,var(--inv-fg) 75%,transparent)}
.bm__body{position:relative;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.08);background:linear-gradient(160deg,#141A2A 0%,#0B0F1A 60%)}
.bm__bar{display:flex;align-items:center;justify-content:space-between;padding:32px clamp(28px,4vw,64px) 0}
.bm__brand{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--inv-fg) 75%,transparent)}
.bm__x{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:transparent;color:var(--inv-fg);cursor:pointer;transition:background .3s,border-color .3s}
.bm__x:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.bm__x .ic{width:18px;height:18px;stroke-width:1.5}
.bm__main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(28px,4vw,64px);max-width:760px}
.bm__eyebrow{display:block;font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--inv-acc);margin-bottom:26px}
.bm h3{margin:0 0 28px;font-size:clamp(34px,4.4vw,64px);font-weight:300;letter-spacing:-.03em;line-height:1.08;color:var(--inv-fg)}
.bm p{margin:0;max-width:34em;font-size:clamp(17px,1.5vw,21px);line-height:1.7;color:color-mix(in srgb,var(--inv-fg) 72%,transparent)}
.bm__foot{display:flex;align-items:center;gap:16px;padding:26px clamp(28px,4vw,64px);border-top:1px solid rgba(255,255,255,.1)}
.bm__arrow{display:grid;place-items:center;flex:none;width:52px;height:52px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:transparent;color:var(--inv-fg);cursor:pointer;transition:background .3s,border-color .3s}
.bm__arrow:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
.bm__arrow .ic{width:18px;height:18px;stroke-width:1.5}
.bm__cta{flex:1;display:grid;place-items:center;height:52px;border-radius:var(--r);background:var(--acc);color:var(--accfg);font-size:15px;font-weight:500;letter-spacing:.02em;text-decoration:none;transition:background .3s}
.bm__cta:hover{background:var(--acc-hover)}
.bm button:focus-visible,.bm a:focus-visible{outline:3px solid color-mix(in srgb,var(--acc-2) 70%,transparent);outline-offset:3px}
.bm.open .bm__panel.swap .bm__eyebrow,.bm.open .bm__panel.swap h3,.bm.open .bm__panel.swap p,.bm.open .bm__panel.swap .bm__bgnum,.bm.open .bm__panel.swap .bm__ic{animation:bmin .55s cubic-bezier(.2,.7,.2,1) both}
.bm__panel.swap h3{animation-delay:.05s!important}
.bm__panel.swap p{animation-delay:.1s!important}
@keyframes bmin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .bm__panel{grid-template-columns:1fr;grid-template-rows:32vh minmax(0,1fr)}
  .bm__body{border-left:0;border-top:1px solid rgba(255,255,255,.08);overflow-y:auto}
  .bm__bgnum{font-size:220px}
  .bm__ic{width:52px;height:52px}
  .bm__count{bottom:20px}
  .bm__bar{padding:20px 24px 0;position:sticky;top:0}
  .bm__main{padding:28px 24px;justify-content:flex-start}
  .bm__foot{padding:18px 24px;gap:12px}
  .bm__arrow{width:46px;height:46px}
  .bm__cta{height:46px}
  .bm h3{font-size:30px;margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){.bm,.bm__panel{transition:none}.bm__panel.swap *{animation:none!important}}

/* Mosaico en dos filas de tres: 5·4·3 y 3·4·5 */
.bx__row:nth-child(1){grid-column:span 5}
.bx__row:nth-child(2){grid-column:span 4}
.bx__row:nth-child(3){grid-column:span 3}
.bx__row:nth-child(4){grid-column:span 3}
.bx__row:nth-child(5){grid-column:span 4}
.bx__row:nth-child(6){grid-column:span 5}
.bx__row{min-height:290px;padding:30px}
.bx__row:nth-child(3) h3,.bx__row:nth-child(4) h3{font-size:22px;padding-right:0}
.bx__row:nth-child(3) .bx__go,.bx__row:nth-child(4) .bx__go{position:static;margin-top:22px}
.bx__row:nth-child(3) .bx__num,.bx__row:nth-child(4) .bx__num{font-size:52px}
@media (max-width:1100px){.bx__row h3{font-size:21px}}
@media (max-width:900px){
  .bx__row:nth-child(n){grid-column:span 1;min-height:0;padding:20px 18px}
  .bx__row:nth-child(n) h3{font-size:17px;margin:26px 0 0;padding-right:0}
  .bx__row:nth-child(n) .bx__go{position:static;margin:18px 0 0;width:40px;height:40px}
  .bx__row:nth-child(n) .bx__num{font-size:36px;top:16px;right:16px}
  .bx__row:nth-child(n) .bx__ic{width:38px;height:38px}
}

/* Mosaico a todo el ancho de la página, sin números y con botones centrados */
#beneficios .bx{margin:0 16px}
.bx__num{display:none}
.bx__go{display:flex;align-items:center;justify-content:center}
.bx__row{min-height:340px}
@media (min-width:1200px){
  .bx__row:nth-child(3) h3,.bx__row:nth-child(4) h3{font-size:clamp(22px,2.1vw,28px);padding-right:72px}
  .bx__row:nth-child(3) .bx__go,.bx__row:nth-child(4) .bx__go{position:absolute;margin:0}
}
@media (max-width:900px){
  #beneficios .bx{margin:0 12px;gap:10px}
  .bx__row:nth-child(n){min-height:0;padding:20px 16px}
  .bx__row:nth-child(n) h3{margin:auto 0 0;padding-top:34px;font-size:17px}
  .bx__row:nth-child(n) .bx__go{margin:16px 0 0}
}
#beneficios .bx{margin-inline:calc(16px - 6vw)}
@media (max-width:900px){#beneficios .bx{margin-inline:calc(12px - 6vw)}}

/* Margen lateral uniforme: mosaico y encabezado comparten el mismo borde izquierdo y derecho que el resto de la página */
#beneficios .wrap{max-width:none}
#beneficios .bx{margin-inline:0}
@media (max-width:900px){#beneficios .bx{margin-inline:0}}

/* Móvil: mosaico 1 grande / 1 alto + 2 apilados / 2 iguales */
@media (max-width:900px){
  .bx{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:104px;gap:10px}
  .bx__row:nth-child(n){grid-column:span 1;grid-row:span 1;min-height:0;padding:16px 14px}
  .bx__row:nth-child(1){grid-column:1/-1;grid-row:span 2}
  .bx__row:nth-child(2){grid-row:span 2}
  .bx__row:nth-child(n) h3{margin:auto 0 0;padding:0 42px 0 0;font-size:15px;line-height:1.25}
  .bx__row:nth-child(1) h3,.bx__row:nth-child(2) h3{font-size:19px}
  .bx__row:nth-child(n) .bx__go{position:absolute;right:12px;bottom:12px;margin:0;width:34px;height:34px}
  .bx__row:nth-child(n) .bx__go .ic{width:15px;height:15px}
  .bx__row:nth-child(n+3) .bx__ic{display:none}
  .bx__row:nth-child(n) .bx__ic{width:38px;height:38px}
}

/* Encabezado de Beneficios: título a la izquierda, párrafo pegado al borde derecho y alineado con la base del título */
.bx__head{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:48px 80px;align-items:end;margin-bottom:56px}
.bx__head h2{max-width:20ch;margin:0}
.bx__head .lead{justify-self:end;max-width:42ch;margin:0;font-size:17px;line-height:1.65}
@media (max-width:900px){
  .bx__head{grid-template-columns:1fr;gap:18px;margin-bottom:36px}
  .bx__head h2{max-width:none}
  .bx__head .lead{justify-self:start;max-width:none;font-size:16px}
}

/* Imágenes temporales por beneficio (ilustraciones locales; se sustituirán por fotografías) */
.bx__row:nth-child(n){background:#0B0F1A;border-color:transparent;color:var(--inv-fg);isolation:isolate}
.bx__row::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img) center/cover no-repeat;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.bx__row::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,15,26,.05) 30%,rgba(11,15,26,.78) 100%)}
.bx__row:hover::before{transform:scale(1.06)}
.bx__row:nth-child(n) h3{color:var(--inv-fg)}
.bx__row:nth-child(n) .bx__ic{background:rgba(255,255,255,.12);color:var(--inv-fg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bx__row:nth-child(n) .bx__go{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:var(--inv-fg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bx__row:hover .bx__go,.bx__row .bx__go:focus-visible{background:var(--acc);border-color:var(--acc)}
.bx__row:hover{border-color:transparent}
.bm__vis{background:radial-gradient(ellipse 90% 70% at 20% 10%,color-mix(in srgb,var(--acc-top) 55%,transparent) 0%,color-mix(in srgb,var(--acc-top) 0%,transparent) 60%),var(--img,linear-gradient(transparent,transparent)) center/cover no-repeat,#0F2A6B}
@media (prefers-reduced-motion:reduce){.bx__row::before{transition:none}.bx__row:hover::before{transform:none}}
.bx__row::after{background:linear-gradient(180deg,rgba(11,15,26,0) 22%,rgba(11,15,26,.6) 62%,rgba(11,15,26,.92) 100%)}

/* Mosaico sin bordes: la imagen llega hasta el filo del bloque */
.bx__row:nth-child(n),.bx__row:nth-child(n):hover{border:0;background-color:transparent}
.bx__row::before{inset:0}

/* Mosaico dividido: fotografía al 70 % a la derecha, zona blanca al 30 % y mockup cruzando la división */
.bx__row:nth-child(n){background:var(--card);container-type:inline-size;color:var(--fg)}
.bx__row::before{left:30%;background:var(--ph) var(--pos,50% 50%)/cover no-repeat}
.bx__row:nth-child(5)::before{scale:-1 1}
.bx__row::after{left:30%;background:linear-gradient(180deg,rgba(11,15,26,0) 45%,rgba(11,15,26,.72) 100%)}
.bx__row:nth-child(n) .bx__ic{position:relative;z-index:2;background:var(--acc-l);color:var(--acc);box-shadow:inset 0 0 0 1px var(--info-l);-webkit-backdrop-filter:none;backdrop-filter:none}
.bx__row:nth-child(n) h3{position:relative;z-index:2;margin-left:calc(30cqw - 16px);padding-right:66px}
.bx__row:nth-child(n) .bx__go{position:absolute;z-index:3;right:20px;bottom:20px;margin:0;width:44px;height:44px}
.bx__row:nth-child(3) h3,.bx__row:nth-child(4) h3{font-size:18px}

.bx__mk{position:absolute;z-index:1;left:6cqw;top:50%;transform:translateY(-56%);width:17em;font-size:2.55cqw;pointer-events:none}
.bx__row:nth-child(3) .bx__mk,.bx__row:nth-child(4) .bx__mk{font-size:3.7cqw;left:5cqw}
.mk{padding:.9em;background:var(--card);border:.13em solid color-mix(in srgb,var(--acc) 85%,transparent);border-radius:1.1em;box-shadow:0 1.8em 2.8em -1.3em color-mix(in srgb,var(--acc) 50%,transparent),0 .3em 1em rgba(15,23,42,.1);color:#0F172A;line-height:1.2;font-weight:400}
.mk svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mk__h{display:flex;align-items:center;gap:.65em;margin-bottom:.8em}
.mk__ic{display:grid;place-items:center;flex:none;width:2.3em;height:2.3em;border-radius:.65em;background:var(--acc-l);color:var(--acc)}
.mk__t{font-size:1.15em;font-weight:600;white-space:nowrap}
.mk__s{font-size:.82em;color:#64748B;white-space:nowrap}
.mk__pill{margin-left:auto;padding:.3em .65em;border-radius:99px;background:var(--acc-l);color:var(--acc);font-size:.8em;font-weight:600;white-space:nowrap}
.mk__bar{height:.45em;margin-bottom:.8em;border-radius:9px;background:#E2E8F0}
.mk__bar i{display:block;height:100%;border-radius:inherit;background:var(--acc)}
.mk__row{display:flex;align-items:center;gap:.65em;margin-bottom:.45em;padding:.6em .7em;border:1px solid #E2E8F0;border-radius:.75em}
.mk__row:last-child{margin-bottom:0}
.mk__row b{display:block;font-size:.95em;font-weight:500;white-space:nowrap}
.mk__row small{display:block;margin-top:.15em;font-size:.78em;color:#64748B;white-space:nowrap}
.mk__dot{display:grid;place-items:center;flex:none;width:1.5em;height:1.5em;border-radius:50%;background:var(--acc);color:var(--accfg)}
.mk__dot svg{width:.9em;height:.9em;stroke-width:3}
.mk__dot--ring{background:var(--card);border:.2em solid var(--acc)}
.mk__dot--ring i{width:.5em;height:.5em;border-radius:50%;background:var(--acc)}
/* 02 · sitio web */
.mk:has(.mk__bw){padding:0;overflow:hidden}
.mk__bw{display:flex;align-items:center;gap:.4em;padding:.6em .8em;background:#F1F5F9}
.mk__bw span{width:.6em;height:.6em;border-radius:50%;background:#CBD5E1}
.mk__bw span:nth-child(1){background:#F87171}.mk__bw span:nth-child(2){background:#FBBF24}.mk__bw span:nth-child(3){background:#34D399}
.mk__bw em{margin-left:.5em;padding:.25em .8em;border-radius:99px;background:var(--card);color:#64748B;font-size:.75em;font-style:normal}
.mk__nav{display:flex;align-items:center;gap:.6em;padding:.7em .9em 0}
.mk__nav b{margin-right:auto;font-size:.95em;font-weight:700}
.mk__nav i{width:2em;height:.3em;border-radius:9px;background:#E2E8F0}
.mk__nav u{padding:.25em .7em;border-radius:.4em;background:var(--acc);color:var(--accfg);font-size:.72em;font-weight:600;text-decoration:none}
.mk__hero{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.9em}
.mk__hero b{display:block;font-size:1.25em;font-weight:300;line-height:1.15;white-space:nowrap}
.mk__hero b.b{color:var(--acc)}
.mk__hero small{display:block;margin:.5em 0 .7em;font-size:.76em;color:#64748B;white-space:nowrap}
.mk__hero u{display:inline-block;padding:.45em .9em;border-radius:.5em;background:var(--acc);color:var(--accfg);font-size:.8em;font-weight:600;text-decoration:none}
.mk__art{display:grid;place-items:center;flex:none;width:4.6em;height:5.6em;border-radius:.8em;background:var(--acc-l)}
.mk__art i{width:1.9em;height:1.9em;border-radius:50%;background:var(--acc);box-shadow:0 0 0 .7em var(--info-b)}
.mk__chips{display:flex;gap:.45em;padding:0 .9em .9em}
.mk__chips span{flex:1;padding:.5em .3em;border:1px solid #E2E8F0;border-radius:.6em;background:#F8FAFC;font-size:.75em;font-weight:500;text-align:center}
/* 03 · solicitud */
.mk__who{display:flex;align-items:center;gap:.7em;margin-bottom:.7em}
.mk__av{display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;border-radius:50%;background:var(--info-l);color:var(--acc);font-size:.9em;font-weight:700}
.mk__who b{display:block;font-size:1em;font-weight:600}
.mk__who small{display:block;font-size:.78em;color:#64748B}
.mk__msg{margin-bottom:.8em;padding:.7em .8em;border:1px solid #E2E8F0;border-radius:.7em;background:#F8FAFC;font-size:.82em;line-height:1.35}
.mk__btns{display:flex;gap:.5em}
.mk__btns u{flex:1;padding:.55em .3em;border-radius:.55em;background:var(--acc);color:var(--accfg);font-size:.82em;font-weight:600;text-align:center;text-decoration:none}
.mk__btns u.o{background:var(--card);border:1px solid var(--info-b);color:var(--acc)}
/* 04 · propuesta */
.mk__ln{display:flex;justify-content:space-between;gap:1em;padding:.55em 0;border-bottom:1px solid #E2E8F0;font-size:.9em}
.mk__ln b{font-weight:600}.mk__ln b.g{color:#64748B}
.mk__tot{display:flex;align-items:baseline;justify-content:space-between;margin:.7em 0 .8em;font-size:.9em;color:#64748B}
.mk__tot b{color:var(--acc);font-size:1.35em;font-weight:700}
.mk__steps{display:flex;gap:.3em;margin-bottom:.35em}
.mk__steps i{flex:1;height:.3em;border-radius:9px;background:#E2E8F0}
.mk__steps i.d{background:var(--acc)}
.mk__stl{display:flex;justify-content:space-between;font-size:.7em;color:#64748B}
/* 05 · configuración */
.mk__row--t{justify-content:space-between}
.mk__tg{position:relative;flex:none;width:2.6em;height:1.45em;border-radius:99px;background:#CBD5E1}
.mk__tg i{position:absolute;top:.2em;left:.2em;width:1.05em;height:1.05em;border-radius:50%;background:var(--card)}
.mk__tg.on{background:var(--acc)}.mk__tg.on i{left:auto;right:.2em}
/* 06 · oferta */
.mk__tabs{display:flex;gap:.4em;margin-bottom:.7em}
.mk__tabs span{padding:.35em .8em;border-radius:99px;background:var(--acc-l);color:var(--acc);font-size:.78em;font-weight:600}
.mk__tabs span.on{background:var(--acc);color:var(--accfg)}
.mk__row--p i{flex:none;width:2.1em;height:2.1em;border-radius:.55em}
.mk__row--p em{margin-left:auto;padding:.25em .6em;border-radius:99px;background:var(--acc-l);color:var(--acc);font-size:.8em;font-style:normal;font-weight:700}
.bx__row:nth-child(3) .mk__s,.bx__row:nth-child(4) .mk__row:nth-of-type(n+3){display:none}

/* Móvil: el bloque 1 conserva la división; en los demás la fotografía llena el bloque */
@media (max-width:900px){
  .bx__row:nth-child(n+2){background:#0B0F1A}
  .bx__row:nth-child(n+2)::before,.bx__row:nth-child(n+2)::after{left:0}
  .bx__row:nth-child(5)::before{scale:1 1}
  .bx__row:nth-child(n+2) .bx__mk{display:none}
  .bx__row:nth-child(n+2) h3{margin-left:0;padding-right:42px}
  .bx__row:nth-child(n+2) .bx__ic{background:rgba(255,255,255,.14);color:var(--inv-fg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .bx__row:nth-child(n) .bx__go{right:12px;bottom:12px;width:34px;height:34px}
  .bx__row:nth-child(1) h3{padding-right:46px}
}
/* cqw se mide sobre el contenido del bloque (sin relleno): se compensa para que 30 % y el tamaño del mockup sean los pretendidos */
.bx__row:nth-child(n) h3{margin-left:calc(30cqw + 2px)}
.bx__mk{left:calc(6cqw + 4px);font-size:3.05cqw}
.bx__row:nth-child(3) .bx__mk,.bx__row:nth-child(4) .bx__mk{left:calc(3cqw + 2px);font-size:4.6cqw}
@media (max-width:900px){.bx__row:nth-child(n+2) h3{margin-left:0}}
.bx__mk{top:50%;transform:translateY(-50%)}
.bx__row:nth-child(n) h3{font-size:clamp(16px,1.45vw,21px);line-height:1.2;padding-right:62px}
.bx__row:nth-child(3) h3,.bx__row:nth-child(4) h3{font-size:15px}
@media (max-width:900px){
  .bx__row:nth-child(1) .mk>div:nth-of-type(4){display:none}
  .bx__row:nth-child(1) .bx__mk{font-size:3.1cqw}
}

/* Sin iconos en los mosaicos (el modal sigue usándolos) */
.bx__row:nth-child(n) .bx__ic{display:none}

/* Mockups del mosaico con esquinas rectas (se mantienen redondos solo los círculos: puntos de estado, avatar y controles) */
.bx__mk .mk,.bx__mk .mk__ic,.bx__mk .mk__pill,.bx__mk .mk__bar,.bx__mk .mk__bar i,.bx__mk .mk__row,.bx__mk .mk__row--p i,.bx__mk .mk__row--p em,
.bx__mk .mk__nav i,.bx__mk .mk__nav u,.bx__mk .mk__hero u,.bx__mk .mk__art,.bx__mk .mk__chips span,.bx__mk .mk__msg,.bx__mk .mk__btns u,
.bx__mk .mk__steps i,.bx__mk .mk__tabs span,.bx__mk .mk__bw em{border-radius:0}

/* Radio mínimo y sin bordes azules en los mockups */
.bx__mk .mk,.bx__mk .mk__ic,.bx__mk .mk__pill,.bx__mk .mk__bar,.bx__mk .mk__bar i,.bx__mk .mk__row,.bx__mk .mk__row--p i,.bx__mk .mk__row--p em,
.bx__mk .mk__nav i,.bx__mk .mk__nav u,.bx__mk .mk__hero u,.bx__mk .mk__art,.bx__mk .mk__chips span,.bx__mk .mk__msg,.bx__mk .mk__btns u,
.bx__mk .mk__steps i,.bx__mk .mk__tabs span,.bx__mk .mk__bw em{border-radius:2px}
.bx__mk .mk{border:0;box-shadow:0 1.8em 2.8em -1.3em rgba(15,23,42,.45),0 .3em 1em rgba(15,23,42,.12)}
.bx__mk .mk__btns u.o{border-color:#E2E8F0;color:#0F172A}

/* Desktop: mockups del mismo tamaño en los seis bloques; la flecha pasa a la izquierda y el título queda a su lado */
@media (min-width:901px){
  .bx__row:nth-child(n) .bx__mk{left:18px;font-size:clamp(9px,.68vw,11px)}
  .bx__row:nth-child(n) .mk{display:flex;flex-direction:column;justify-content:center;height:16.6em}
  .bx__row:nth-child(n) .bx__go{right:auto;left:calc(30% + 14px);bottom:20px}
  .bx__row:nth-child(n) h3{margin-left:calc(30cqw + 58px);padding-right:0}
  .bx__row:nth-child(3) h3,.bx__row:nth-child(4) h3{font-size:14px}
  .bx__row:nth-child(3) .bx__go,.bx__row:nth-child(4) .bx__go{width:38px;height:38px}
  .bx__row:nth-child(3) h3,.bx__row:nth-child(4) h3{margin-left:calc(30cqw + 52px)}
}
@media (min-width:901px){.bx__row:nth-child(n) .mk{height:17em;width:17em;box-sizing:border-box;overflow:hidden}}
/* Ajuste al cuadrado: lo que no cabe se retira */
.bx__row:nth-child(2) .mk__art{display:none}
.bx__row:nth-child(4) .mk__pill{display:none}
.bx__row:nth-child(5) .mk__tg{width:2.3em}
.bx__row:nth-child(5) .mk__row--t{gap:.4em}
.bx__row:nth-child(3) .mk__pill{display:none}
.bx__row:nth-child(5) .mk__row--t small{display:none}
.bx__row:nth-child(5) .mk__row--t b{white-space:normal;line-height:1.2}
.bx__row:nth-child(5) .mk__row{padding:.7em .6em}
.bx__row:nth-child(6) .mk__row--p{gap:.45em;padding:.6em .5em}
.bx__row:nth-child(6) .mk__row--p i{width:1.5em;height:1.5em}
.bx__row:nth-child(6) .mk__row--p b{font-size:.88em}
.bx__row:nth-child(6) .mk__row--p small{display:none}
.bx__row:nth-child(6) .mk__row--p em{padding:.2em .4em;font-size:.74em}

/* Desktop: flecha a la izquierda (apunta a la izquierda) y título alineado a la derecha, centrados en la misma línea */
@media (min-width:901px){
  .bx__row:nth-child(n){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;column-gap:16px;align-items:center}
  .bx__row:nth-child(n) .bx__go{position:static;grid-column:1;grid-row:2;left:auto;right:auto;bottom:auto;margin:0;background:var(--card);border-color:#CBD5E1;color:#0F172A;-webkit-backdrop-filter:none;backdrop-filter:none}
  .bx__row:nth-child(n) .bx__go .ic{transform:scaleX(-1)}
  .bx__row:hover .bx__go .ic{transform:scaleX(-1) translateX(3px)}
  .bx__row:hover .bx__go,.bx__row .bx__go:focus-visible{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
  .bx__row:nth-child(n) h3{grid-column:2;grid-row:2;margin:0;padding:0;text-align:right}
}

/* Desktop: títulos del mismo tamaño (máx. 2 líneas dentro de la zona fotográfica), flechas pequeñas y margen inferior uniforme */
@media (min-width:901px){
  .bx__row:nth-child(n){padding:22px}
  .bx__row:nth-child(n) h3,.bx__row:nth-child(3) h3,.bx__row:nth-child(4) h3{
    justify-self:end;width:auto;max-width:70cqw;margin:0;padding:0;text-align:right;
    font-size:clamp(13px,.95vw,16px);line-height:1.25;text-wrap:balance;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .bx__row:nth-child(n) .bx__go,.bx__row:nth-child(3) .bx__go,.bx__row:nth-child(4) .bx__go{width:32px;height:32px}
  .bx__row:nth-child(n) .bx__go .ic{width:14px;height:14px}
}

/* CTA «Ver más»: sin círculo, solo flecha y texto */
.bx__row:nth-child(n) .bx__go,.bx__row:nth-child(n) .bx__go:hover,.bx__row:hover .bx__go,.bx__row .bx__go:focus-visible{width:auto;height:auto;padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.bx__go span{position:relative}
.bx__go span::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.bx__row:hover .bx__go span::after{transform:scaleX(1)}
@media (min-width:901px){
  .bx__row:nth-child(n) .bx__go{color:#0F172A;column-gap:7px}
  .bx__row:hover .bx__go,.bx__row .bx__go:focus-visible{color:var(--acc)}
  .bx__row:nth-child(n) .bx__go .ic,.bx__row:nth-child(3) .bx__go .ic,.bx__row:nth-child(4) .bx__go .ic{width:15px;height:15px}
}
@media (max-width:900px){
  .bx__row:nth-child(n) .bx__go{position:absolute;left:auto;right:12px;bottom:12px;color:var(--inv-fg);font-size:11px}
  .bx__row:nth-child(n) .bx__go .ic{width:14px;height:14px}
  .bx__row:nth-child(n) h3{padding-right:0;margin-bottom:22px}
}
@media (min-width:901px){
  .bx__row:nth-child(n) .bx__go,.bx__row:nth-child(n) .bx__go:hover,.bx__row:hover .bx__go{gap:5px;font-size:11px;letter-spacing:.01em}
  .bx__row:nth-child(n) .bx__go .ic,.bx__row:nth-child(3) .bx__go .ic,.bx__row:nth-child(4) .bx__go .ic{width:12px;height:12px}
}
@media (min-width:901px){
  .bx__row:nth-child(n){padding:16px 16px 18px}
  .bx__row:nth-child(n) .bx__go,.bx__row:nth-child(n) .bx__go:hover,.bx__row:hover .bx__go{font-size:10.5px}
}

/* Hover: la fotografía hace zoom sin invadir la zona blanca ni el mockup, y la zona blanca permanece sólida */
.bx__row:nth-child(5)::before,.bx__row:nth-child(5):hover::before{scale:1 1}
.bx__row:nth-child(n):hover{background-color:var(--card)}
.bx__row::before{transform-origin:left center;will-change:transform}
.bx__row::before,.bx__row::after{overflow:hidden}
@media (max-width:900px){
  .bx__row:nth-child(n+2):hover{background-color:#0B0F1A}
  .bx__row:nth-child(n+2)::before{transform-origin:center}
}
.bx__row::before{background:var(--ph) var(--pos,50% 50%)/var(--size,cover) no-repeat}

/* Móvil: una sola columna, seis mosaicos idénticos al 01 (mismo ancho y alto) con la división foto / zona blanca */
@media (max-width:900px){
  .bx{grid-template-columns:1fr;grid-auto-rows:218px;gap:12px}
  .bx__row:nth-child(n){grid-column:auto;grid-row:auto;height:218px;min-height:218px;padding:16px 16px 18px;background:var(--card);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;column-gap:14px;align-items:center}
  .bx__row:nth-child(n):hover{background-color:var(--card)}
  .bx__row:nth-child(n)::before,.bx__row:nth-child(n)::after{left:30%}
  .bx__row:nth-child(n)::before{transform-origin:left center}
  .bx__row:nth-child(n) .bx__mk{display:block;left:calc(5cqw + 4px);top:42%;transform:translateY(-50%);font-size:2.6cqw}
  .bx__row:nth-child(n) .mk{display:flex;flex-direction:column;justify-content:center;width:17em;height:17em;box-sizing:border-box;overflow:hidden}
  .bx__row:nth-child(1) .mk>div:nth-of-type(4){display:flex}
  .bx__row:nth-child(n) h3{grid-column:2;grid-row:2;justify-self:end;width:auto;max-width:70cqw;margin:0;padding:0;text-align:right;font-size:13px;line-height:1.25;text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  .bx__row:nth-child(n) .bx__go{position:static;grid-column:1;grid-row:2;margin:0;color:#0F172A;font-size:10.5px;gap:5px}
  .bx__row:nth-child(n) .bx__go .ic{width:12px;height:12px;transform:scaleX(-1)}
  .bx__row:nth-child(5)::before{scale:1 1}
}

/* Móvil: mosaicos escalonados (derecha / izquierda) que entran desde el lateral según el scroll */
@media (max-width:900px){
  .bx__row:nth-child(n){--p:1;--dir:1;width:88%;justify-self:end;transform:translate3d(calc((1 - var(--p)) * var(--dir) * 72px),0,0);opacity:var(--p);transition:box-shadow .5s,border-color .4s;will-change:transform,opacity}
  .bx__row:nth-child(even){--dir:-1;justify-self:start}
  .bx__row:nth-child(n):hover{transform:translate3d(calc((1 - var(--p)) * var(--dir) * 72px),0,0)}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.bx__row:nth-child(n){transform:none;opacity:1}}

/* Entrada y salida vinculadas al scroll (móvil y desktop): se usa la propiedad `translate`, que no interfiere con el hover */
.bx__row:nth-child(n){--p:1;--dir:1;translate:calc((1 - var(--p)) * var(--dir) * 72px) calc((1 - var(--p)) * 22px);opacity:var(--p);will-change:translate,opacity}
.bx__row:nth-child(even){--dir:-1}
@media (max-width:900px){
  /* tarjetas casi de borde a borde con margen lateral uniforme; la alternancia pasa a ser la dirección de entrada */
  #beneficios .bx{margin-inline:calc(12px - 6vw);gap:16px}
  .bx__row:nth-child(n),.bx__row:nth-child(even){width:100%;justify-self:stretch;transform:none}
  .bx__row:nth-child(n):hover{transform:translateY(-4px)}
}
@media (prefers-reduced-motion:reduce){.bx__row:nth-child(n){translate:none;opacity:1}}

/* Títulos de los mosaicos: un punto más grandes, mismo tamaño en los seis */
@media (min-width:901px){
  .bx__row:nth-child(n) h3,.bx__row:nth-child(3) h3,.bx__row:nth-child(4) h3{font-size:clamp(14.5px,1.12vw,18px);line-height:1.28}
}
@media (max-width:900px){
  .bx__row:nth-child(n) h3{font-size:15px;line-height:1.28}
}
/* Títulos +5 % */
@media (min-width:901px){
  .bx__row:nth-child(n) h3,.bx__row:nth-child(3) h3,.bx__row:nth-child(4) h3{font-size:clamp(15.2px,1.176vw,18.9px)}
}
@media (max-width:900px){
  .bx__row:nth-child(n) h3{font-size:15.75px}
}
@media (max-width:900px){.bx__row:nth-child(n) .bx__mk{top:38%}}
/* Móvil: títulos más grandes (18 px) y mockup algo más compacto para conservar el aire entre ambos */
@media (max-width:900px){
  .bx__row:nth-child(n) h3{font-size:18px;line-height:1.25}
  .bx__row:nth-child(n) .bx__mk{font-size:2.4cqw;top:37%}
}

/* ===== Carrusel de beneficios (alternativa al mosaico; data-view="mosaic" restaura el mosaico) ===== */
.bxc__tog{display:inline-flex;gap:0;margin:0 0 22px;padding:3px;border:1px solid #E2E8F0;border-radius:6px;background:var(--card)}
.bxc__tog button{padding:7px 14px;border:0;border-radius:4px;background:none;color:#64748B;font:inherit;font-size:12px;font-weight:500;letter-spacing:.04em;cursor:pointer}
.bxc__tog button[aria-pressed=true]{background:var(--acc-l);color:var(--acc)}
.bxc__ctl{display:none}
.bxc__vp{display:block}

.bxc[data-view=carousel]{position:relative}
.bxc[data-view=carousel] .bxc__vp{overflow:hidden;margin-inline:-6vw;padding:34px 0 40px}
#beneficios .bxc[data-view=carousel] .bx{display:flex;flex-wrap:nowrap;gap:28px;margin:0;padding:0;transform:translate3d(var(--x,0px),0,0);transition:transform .95s cubic-bezier(.65,0,.2,1);will-change:transform}
#beneficios .bxc[data-view=carousel] .bx__row:nth-child(n){flex:0 0 min(920px,74vw);width:min(920px,74vw);height:clamp(400px,33vw,480px);min-height:0;padding:28px;grid-column:auto;justify-self:auto;translate:none;opacity:.4;scale:.93;transition:opacity .8s ease,scale .9s cubic-bezier(.2,.7,.2,1),box-shadow .5s;will-change:opacity,scale}
#beneficios .bxc[data-view=carousel] .bx__row.is-active:nth-child(n){opacity:1;scale:1;box-shadow:0 40px 70px -40px color-mix(in srgb,var(--shadow) 40%,transparent)}
#beneficios .bxc[data-view=carousel] .bx__row:nth-child(n):hover{transform:none}
#beneficios .bxc[data-view=carousel] .bx__row:nth-child(n) .bx__mk{left:4cqw;top:47%;transform:translateY(-50%);font-size:1.75cqw}
#beneficios .bxc[data-view=carousel] .bx__row:nth-child(n) h3{font-size:clamp(20px,1.9vw,26px);max-width:68cqw;line-height:1.2}
#beneficios .bxc[data-view=carousel] .bx__row:nth-child(n) .bx__go{font-size:12.5px}
#beneficios .bxc[data-view=carousel] .bx__row:nth-child(n) .bx__go .ic{width:14px;height:14px}

.bxc[data-view=carousel] .bxc__ctl{display:flex;align-items:center;justify-content:center;gap:20px}
.bxc__arrow{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #E2E8F0;border-radius:50%;background:var(--card);color:#0F172A;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.bxc__arrow:hover{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.bxc__arrow .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bxc__bars{display:flex;gap:8px;align-items:center}
.bxc__bars button{position:relative;width:34px;height:20px;padding:0;border:0;background:none;cursor:pointer}
.bxc__bars i{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:#E2E8F0;overflow:hidden}
.bxc__bars .done i{background:var(--inv-acc)}
.bxc__bars i::after{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left}
.bxc__bars .on i::after{animation:bxcprog 6.5s linear forwards}
.bxc.is-paused .bxc__bars .on i::after{animation-play-state:paused}
@keyframes bxcprog{to{transform:scaleX(1)}}
.bxc button:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 40%,transparent);outline-offset:2px}
@media (max-width:900px){
  .bxc[data-view=carousel] .bxc__vp{padding:20px 0 28px}
  #beneficios .bxc[data-view=carousel] .bx{gap:14px}
  #beneficios .bxc[data-view=carousel] .bx__row:nth-child(n){flex-basis:86vw;width:86vw;height:270px;padding:16px 16px 18px}
  #beneficios .bxc[data-view=carousel] .bx__row:nth-child(n) .bx__mk{left:calc(5cqw + 4px);top:39%;font-size:2.9cqw}
  #beneficios .bxc[data-view=carousel] .bx__row:nth-child(n) h3{font-size:18px;max-width:70cqw}
  #beneficios .bxc[data-view=carousel] .bx__row:nth-child(n) .bx__go{font-size:10.5px}
  .bxc__tog{margin-bottom:14px}
}
@media (prefers-reduced-motion:reduce){#beneficios .bxc[data-view=carousel] .bx,#beneficios .bxc[data-view=carousel] .bx__row:nth-child(n){transition:none}.bxc__bars .on i::after{animation:none;transform:scaleX(1)}}

/* Carrusel: 3 s por tarjeta, transición más ágil y sin flechas ni selector de vista */
.bxc__tog,.bxc__arrow{display:none!important}
#beneficios .bxc[data-view=carousel] .bx{transition:transform .6s cubic-bezier(.65,0,.2,1)}
#beneficios .bxc[data-view=carousel] .bx__row:nth-child(n){transition:opacity .5s ease,scale .6s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.bxc__bars .on i::after{animation-duration:3s}
.bxc[data-view=carousel] .bx__row{cursor:pointer}
@media (prefers-reduced-motion:reduce){#beneficios .bxc[data-view=carousel] .bx,#beneficios .bxc[data-view=carousel] .bx__row:nth-child(n){transition:none}}
.bxc__vp{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.bxc__vp img,.bxc__vp svg{-webkit-user-drag:none}

/* Modal (solo desktop): fotografía limpia, sin cuadrícula de puntos ni número grande, y mockup centrado sobre la línea divisoria */
.bm__mk{display:none}
@media (min-width:861px){
  .bm__vis{background:radial-gradient(ellipse 90% 70% at 20% 10%,color-mix(in srgb,var(--acc-top) 55%,transparent) 0%,color-mix(in srgb,var(--acc-top) 0%,transparent) 60%),var(--imgd,linear-gradient(transparent,transparent)) var(--mpos,50% 50%)/var(--msize,cover) no-repeat,#0F2A6B}
  .bm__vis::before,.bm__bgnum{display:none}
  .bm__main{padding-left:calc(110px + clamp(28px,4vw,64px))}
  .bm__mk{display:block;position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;pointer-events:none}
  .bm__mk .mk{display:flex;flex-direction:column;justify-content:center;width:17em;height:17em;box-sizing:border-box;overflow:hidden;padding:.9em;background:var(--card);border:0;border-radius:2px;box-shadow:0 2em 3.2em -1.4em rgba(2,6,23,.6),0 .3em 1em rgba(15,23,42,.14);color:#0F172A;line-height:1.2}
  .bm__mk .mk__ic,.bm__mk .mk__pill,.bm__mk .mk__bar,.bm__mk .mk__bar i,.bm__mk .mk__row,.bm__mk .mk__row--p i,.bm__mk .mk__row--p em,.bm__mk .mk__nav i,.bm__mk .mk__nav u,.bm__mk .mk__hero u,.bm__mk .mk__art,.bm__mk .mk__chips span,.bm__mk .mk__msg,.bm__mk .mk__btns u,.bm__mk .mk__steps i,.bm__mk .mk__tabs span,.bm__mk .mk__bw em{border-radius:2px}
  .bm__mk .mk__btns u.o{border-color:#E2E8F0;color:#0F172A}
  .bm__mk.m2 .mk__art,.bm__mk.m3 .mk__pill,.bm__mk.m4 .mk__pill{display:none}
  .bm__mk.m5 .mk__tg{width:2.3em}
  .bm__mk.m5 .mk__row--t{gap:.4em;padding:.7em .6em}
  .bm__mk.m5 .mk__row--t small{display:none}
  .bm__mk.m5 .mk__row--t b{white-space:normal;line-height:1.2}
  .bm__mk.m6 .mk__row--p{gap:.45em;padding:.6em .5em}
  .bm__mk.m6 .mk__row--p i{width:1.5em;height:1.5em}
  .bm__mk.m6 .mk__row--p b{font-size:.88em}
  .bm__mk.m6 .mk__row--p small{display:none}
  .bm__mk.m6 .mk__row--p em{padding:.2em .4em;font-size:.74em}
}

/* Modal: sin icono superior izquierdo ni etiqueta «Beneficio» (desktop y móvil); en móvil el cierre pasa a la esquina superior derecha de la imagen */
.bm__ic,.bm__eyebrow{display:none}
@media (max-width:860px){
  .bm__body{position:static}
  .bm__x{position:absolute;top:16px;right:16px;z-index:8}
}
@media (max-width:860px){.bm__bar{position:static}}

/* Modal móvil: fotografía limpia con el mockup superpuesto en la esquina inferior derecha de la imagen */
@media (max-width:860px){
  .bm__vis{background:radial-gradient(ellipse 90% 70% at 20% 10%,color-mix(in srgb,var(--acc-top) 45%,transparent) 0%,color-mix(in srgb,var(--acc-top) 0%,transparent) 60%),var(--imgm,linear-gradient(transparent,transparent)) var(--mposm,50% 25%)/cover no-repeat,#0F2A6B}
  .bm__vis::before,.bm__bgnum{display:none}
  .bm__mk{display:block;position:absolute;z-index:6;left:auto;right:16px;top:calc(32vh - 160px);font-size:8.5px;pointer-events:none}
  .bm__mk .mk{display:flex;flex-direction:column;justify-content:center;width:17em;height:17em;box-sizing:border-box;overflow:hidden;padding:.9em;background:var(--card);border:0;border-radius:2px;box-shadow:0 1.6em 2.6em -1.2em rgba(2,6,23,.6),0 .3em 1em rgba(15,23,42,.14);color:#0F172A;line-height:1.2}
  .bm__mk .mk__ic,.bm__mk .mk__pill,.bm__mk .mk__bar,.bm__mk .mk__bar i,.bm__mk .mk__row,.bm__mk .mk__row--p i,.bm__mk .mk__row--p em,.bm__mk .mk__nav i,.bm__mk .mk__nav u,.bm__mk .mk__hero u,.bm__mk .mk__art,.bm__mk .mk__chips span,.bm__mk .mk__msg,.bm__mk .mk__btns u,.bm__mk .mk__steps i,.bm__mk .mk__tabs span,.bm__mk .mk__bw em{border-radius:2px}
  .bm__mk .mk__btns u.o{border-color:#E2E8F0;color:#0F172A}
  .bm__mk.m2 .mk__art,.bm__mk.m3 .mk__pill,.bm__mk.m4 .mk__pill{display:none}
  .bm__mk.m5 .mk__tg{width:2.3em}
  .bm__mk.m5 .mk__row--t{gap:.4em;padding:.7em .6em}
  .bm__mk.m5 .mk__row--t small{display:none}
  .bm__mk.m5 .mk__row--t b{white-space:normal;line-height:1.2}
  .bm__mk.m6 .mk__row--p{gap:.45em;padding:.6em .5em}
  .bm__mk.m6 .mk__row--p i{width:1.5em;height:1.5em}
  .bm__mk.m6 .mk__row--p b{font-size:.88em}
  .bm__mk.m6 .mk__row--p small{display:none}
  .bm__mk.m6 .mk__row--p em{padding:.2em .4em;font-size:.74em}
}
@media (max-width:860px){.bm__mk{top:32vh;transform:translateY(calc(-100% - 14px))}}
/* Modal móvil: el mockup cruza la línea divisoria como una pestaña y baja hasta la altura de «DEEC STUDIO» */
@media (max-width:860px){.bm__mk{top:calc(32vh + 40px);transform:translateY(-100%)}}

/* Carrusel móvil: tarjetas casi de borde a borde (12 px de margen lateral), mismas proporciones */
@media (max-width:900px){
  #beneficios .bxc[data-view=carousel] .bx{gap:10px}
  #beneficios .bxc[data-view=carousel] .bx__row:nth-child(n){flex:0 0 calc(100% - 24px);width:calc(100% - 24px);height:auto;aspect-ratio:322/270}
}

/* Modal: degradado oscuro progresivo en la unión imagen / panel de texto (el color final coincide con el fondo del panel) */
.bm__count{z-index:2}
.bm__vis::after{content:"";position:absolute;z-index:1;pointer-events:none}
@media (min-width:861px){
  .bm__body{border-left:0}
  .bm__vis::after{top:0;bottom:0;right:0;width:min(36%,240px);background:linear-gradient(180deg,#141A2A 0%,#0B0F1A 79%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 30%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.88) 86%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 30%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.88) 86%,#000 100%)}
}
@media (max-width:860px){
  .bm__body{border-top:0}
  .bm__vis::after{left:0;right:0;bottom:0;height:min(46%,120px);background:linear-gradient(180deg,rgba(19,26,42,0) 0%,rgba(19,26,42,.2) 30%,rgba(19,26,42,.55) 62%,rgba(19,26,42,.88) 86%,#131A2A 100%)}
}
/* Modal: sin línea divisoria sobre el pie de controles */
.bm__foot{border-top:0}

/* Modal: título, descripción completa y ejemplos prácticos con iconos discretos; el contenido hace scroll si no cabe */
.bm__main{justify-content:flex-start;justify-content:safe center;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;padding-top:12px;padding-bottom:20px}
.bm h3{font-size:clamp(28px,3.2vw,44px);margin-bottom:20px}
.bm p#bm-p{font-size:clamp(15px,1.2vw,17px);line-height:1.7}
.bm__ex{margin-top:26px;max-width:34em}
.bm__ex h4{margin:0 0 12px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--inv-acc)}
.bm__ex ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bm__ex li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.4;color:color-mix(in srgb,var(--inv-fg) 86%,transparent)}
.bm__eic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:2px;background:rgba(255,255,255,.07);color:var(--inv-acc)}
.bm__eic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bm .bm__note{margin-top:14px;font-size:12px;line-height:1.5;color:color-mix(in srgb,var(--inv-fg) 50%,transparent)}
.bm.open .bm__panel.swap .bm__ex{animation:bmin .55s cubic-bezier(.2,.7,.2,1) .15s both}
@media (max-width:860px){
  .bm__main{overflow:visible;padding:20px 24px 24px}
  .bm h3{font-size:28px;margin-bottom:16px}
  .bm p#bm-p{font-size:15px}
  .bm__ex{margin-top:22px}
}
@media (max-width:860px){.bm__main{flex:0 0 auto;min-height:auto}}
.bm__ex li:last-child{color:color-mix(in srgb,var(--inv-fg) 62%,transparent)}

/* Modal a pantalla completa con scroll interno: solo se desplaza el contenido central; cabecera, cierre y controles quedan fijos */
.bm{height:100vh;height:100dvh}
.bm__body{overflow:hidden;min-height:0}
.bm__main{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) rgba(255,255,255,.06);outline:none}
.bm__main::-webkit-scrollbar{width:8px}
.bm__main::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:4px}
.bm__main::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:4px}
.bm__main::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--card) 60%,transparent)}
.bm__bar,.bm__foot{flex:none}
@media (max-width:860px){
  .bm__body{overflow:hidden}
  .bm__main{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
  .bm__bar{position:static}
}
@media (max-height:540px){
  .bm__foot{padding-top:12px;padding-bottom:12px}
  .bm__arrow,.bm__cta{height:42px}
  .bm__arrow{width:42px}
}

/* Toda la tarjeta es clicable: el botón «Ver más» se extiende sobre la superficie completa (enlace estirado) */
.bx__go::after{content:"";position:absolute;inset:0;z-index:4}
.bx__row{cursor:pointer}
.bx__row:has(.bx__go:focus-visible){outline:3px solid color-mix(in srgb,var(--acc) 55%,transparent);outline-offset:-3px}
.bx__go:focus-visible{outline:0}

/* Modal móvil: la fila de la imagen (32vh) terminaba en una fracción de píxel y dejaba ver una línea oscura del fondo del panel entre imagen y contenido.
   Se redondea la fila a píxeles enteros, el fondo del panel toma el color de la unión y la imagen se solapa 1 px bajo el contenido. */
@media (max-width:860px){
  .bm__panel{grid-template-rows:32vh minmax(0,1fr);grid-template-rows:round(down,32vh,1px) minmax(0,1fr);background:#131A2A}
  .bm__vis{margin-bottom:-1px}
  .bm__vis::after{bottom:0}
}
/* Modal móvil: el contenido arranca exactamente con el color donde termina el degradado de la imagen, para que no exista ninguna línea de unión */
@media (max-width:860px){
  .bm__body{background:linear-gradient(180deg,#131A2A 0%,#101524 35%,#0B0F1A 100%)}
  .bm__vis::after{background:linear-gradient(180deg,rgba(19,26,42,0) 0%,rgba(19,26,42,.2) 30%,rgba(19,26,42,.55) 62%,rgba(19,26,42,.88) 86%,#131A2A 100%);bottom:-1px}
}
/* Modal móvil: unión imagen/contenido sin costura. La imagen se solapa 8 px bajo el contenido y ambos tienen un tramo plano idéntico (#131A2A) en esa zona, de modo que ningún redondeo puede dibujar un borde */
@media (max-width:860px){
  .bm__vis{margin-bottom:-8px}
  .bm__vis::after{bottom:0;height:min(46%,128px);background:linear-gradient(180deg,rgba(19,26,42,0) 0%,rgba(19,26,42,.2) 28%,rgba(19,26,42,.55) 58%,rgba(19,26,42,.88) 80%,#131A2A 90%,#131A2A 100%)}
  .bm__body{background:linear-gradient(180deg,#131A2A 0,#131A2A 10px,#101524 35%,#0B0F1A 100%)}
}
/* Modal móvil: causa real de la línea = el borde inferior del pseudo-elemento ::after del degradado. El degradado pasa a ser una capa del propio fondo de la imagen, así que ya no hay borde entre dos cajas */
@media (max-width:860px){
  .bm__vis::after{display:none}
  .bm__vis{background:linear-gradient(180deg,rgba(19,26,42,0) 0%,rgba(19,26,42,.2) 28%,rgba(19,26,42,.55) 58%,rgba(19,26,42,.88) 80%,#131A2A 90%,#131A2A 100%) left bottom/100% 128px no-repeat,
    radial-gradient(ellipse 90% 70% at 20% 10%,color-mix(in srgb,var(--acc-top) 45%,transparent) 0%,color-mix(in srgb,var(--acc-top) 0%,transparent) 60%),
    var(--imgm,linear-gradient(transparent,transparent)) var(--mposm,50% 25%)/cover no-repeat,
    #131A2A}
}
/* Modal móvil · causa de la línea: el borde inferior de la imagen caía sobre la foto y varias capas con anti-aliasing (foto + degradado) dejaban una fila más clara.
   Ahora la foto es una capa que se desvanece por sí misma hasta ser transparente (máscara) y termina 20 px antes del borde de la caja; el borde de la caja solo toca un color plano. */
@media (max-width:860px){
  .bm__vis{background:#131A2A;margin-bottom:-8px}
  .bm__vis::after{display:none}
  .bm__vis::before{content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:20px;pointer-events:none;
    background:radial-gradient(ellipse 90% 70% at 20% 10%,color-mix(in srgb,var(--acc-top) 45%,transparent) 0%,color-mix(in srgb,var(--acc-top) 0%,transparent) 60%),var(--imgm,linear-gradient(transparent,transparent)) var(--mposm,50% 25%)/cover no-repeat;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 130px),rgba(0,0,0,.8) calc(100% - 100px),rgba(0,0,0,.45) calc(100% - 62px),rgba(0,0,0,.15) calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 130px),rgba(0,0,0,.8) calc(100% - 100px),rgba(0,0,0,.45) calc(100% - 62px),rgba(0,0,0,.15) calc(100% - 28px),transparent 100%)}
}

/* ===== 05 · Modelo de adquisición: recorrido «de la compra a tu propiedad» (sección oscura) ===== */
#adquisicion.acq{position:relative;overflow:hidden;color:var(--inv-fg);background:linear-gradient(180deg,#0B0F1A 0%,var(--fg) 100%)}
#adquisicion.acq::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 70% 30%,#000 10%,transparent 75%)}
#adquisicion.acq::after{content:"";position:absolute;right:-12%;top:-18%;width:60vw;height:60vw;max-width:880px;max-height:880px;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 28%,transparent) 0%,color-mix(in srgb,var(--acc) 0%,transparent) 62%)}
#adquisicion .wrap{position:relative;z-index:1;max-width:1180px}
.acq__head{max-width:760px;margin-bottom:72px}
.acq__head .eyebrow{color:var(--inv-acc)}
.acq__head h2{color:var(--inv-fg);font-weight:300}
.acq__head .hl{color:var(--inv-acc)}
.acq__head .lead{color:color-mix(in srgb,var(--inv-fg) 66%,transparent);margin:0}
.acq__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:88px;align-items:start}

.acq__path{--p:0;position:relative;list-style:none;margin:0;padding:0}
.acq__path::before,.acq__path::after{content:"";position:absolute;left:11px;top:12px;bottom:12px;width:1px;background:rgba(255,255,255,.14)}
.acq__path::after{background:linear-gradient(180deg,var(--acc-2),var(--acc));box-shadow:0 0 14px color-mix(in srgb,var(--acc-top) 70%,transparent);transform:scaleY(var(--p));transform-origin:top}
.acq__step{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:28px;padding:0 0 48px}
.acq__step:last-child{padding-bottom:0}
.acq__node{position:relative;z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:#0F1422;color:transparent;transition:background .5s,border-color .5s,box-shadow .5s,color .4s}
.acq__node svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.acq__step.on .acq__node{background:var(--acc);border-color:var(--acc-2);color:var(--accfg);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 18%,transparent),0 0 22px color-mix(in srgb,var(--acc-top) 55%,transparent)}
.acq__txt{opacity:.38;transform:translateX(8px);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1)}
.acq__step.on .acq__txt{opacity:1;transform:none}
.acq__n{display:block;margin-bottom:6px;font-family:"Manrope",var(--sans);font-size:12px;font-weight:300;letter-spacing:.2em;color:var(--inv-acc)}
.acq__step h3{margin:0 0 8px;font-size:clamp(21px,2vw,26px);font-weight:300;letter-spacing:-.015em;line-height:1.2;color:var(--inv-fg)}
.acq__step p{margin:0;max-width:44ch;font-size:15.5px;line-height:1.65;color:color-mix(in srgb,var(--inv-fg) 62%,transparent)}
.acq__step.is-final .acq__node{width:30px;height:30px;margin:-3px 0 0 -3px}
.acq__step.is-final .acq__node svg{width:15px;height:15px}
.acq__step.is-final h3{font-size:clamp(26px,2.7vw,36px)}
.acq__step.is-final p{font-size:17px;color:color-mix(in srgb,var(--inv-fg) 80%,transparent)}
.acq__step.is-final.on h3{background:linear-gradient(90deg,var(--card),var(--inv-acc));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.acq__sheet{position:sticky;top:120px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:4px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--shadow) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--acc) 8%,transparent) inset}
.acq__sh-head{display:flex;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.1);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--inv-fg) 55%,transparent)}
.acq__sh-head span:last-child{color:var(--inv-acc)}
.acq__sheet ul{list-style:none;margin:0;padding:6px 22px}
.acq__row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k ok" "v ok";column-gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.07);opacity:.35;transition:opacity .6s}
.acq__row:last-child{border-bottom:0}
.acq__row.on{opacity:1}
.acq__k{grid-area:k;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--inv-fg) 50%,transparent)}
.acq__v{grid-area:v;margin-top:3px;font-size:17px;font-weight:300;color:var(--inv-fg)}
.acq__ok{grid-area:ok;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.2);color:transparent;transition:background .5s,border-color .5s,color .4s}
.acq__ok svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.acq__row.on .acq__ok{background:var(--acc);border-color:var(--acc-2);color:var(--accfg)}
.acq__row.is-final.on .acq__v{color:var(--inv-acc);font-size:20px}
.acq__sh-note{margin:0;padding:14px 22px 18px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:color-mix(in srgb,var(--inv-fg) 45%,transparent)}

@media (max-width:900px){
  .acq__head{margin-bottom:44px}
  .acq__grid{grid-template-columns:1fr;gap:48px}
  .acq__sheet{position:static}
  .acq__step{gap:20px;padding-bottom:36px}
  .acq__step p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.acq__txt,.acq__row,.acq__node,.acq__ok{transition:none}.acq__txt{opacity:1;transform:none}.acq__row{opacity:1}}

/* ===== Ajuste: 05 vuelve a fondo claro y liso (sin cuadrícula ni resplandor), sin ficha; el fondo oscuro pasa a Filosofía de marca ===== */
#adquisicion.acq{color:inherit;background:var(--bg,var(--card))}
#adquisicion.acq::before,#adquisicion.acq::after{display:none}
.acq__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:96px}
.acq__head{position:sticky;top:120px;margin:0;max-width:none}
.acq__head .eyebrow{color:var(--acc)}
.acq__head h2{color:var(--fg)}
.acq__head .hl{color:var(--acc)}
.acq__head .lead{color:var(--muted)}
.acq__path::before{background:color-mix(in srgb,var(--shadow) 12%,transparent)}
.acq__path::after{background:var(--acc);box-shadow:none}
.acq__node{border-color:var(--line-strong);background:var(--card)}
.acq__step.on .acq__node{background:var(--acc);border-color:var(--acc);color:var(--accfg);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 12%,transparent)}
.acq__n{color:var(--acc)}
.acq__step h3{color:var(--fg)}
.acq__step p{color:var(--muted)}
.acq__step.is-final p{color:var(--text)}
.acq__step.is-final.on h3{background:linear-gradient(90deg,var(--fg),var(--acc));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (max-width:900px){
  .acq__grid{grid-template-columns:1fr;gap:44px}
  .acq__head{position:static}
}

/* Filosofía de marca: sección oscura lisa */
.manifesto{background:linear-gradient(180deg,#0B0F1A 0%,var(--fg) 100%);border-block:0;color:var(--inv-fg)}
.manifesto .eyebrow{color:var(--inv-acc)}
.manifesto h2{color:var(--inv-fg);font-weight:300}
.manifesto h2 em{color:var(--inv-acc);font-style:normal}
.manifesto p{color:color-mix(in srgb,var(--inv-fg) 70%,transparent)}

/* 05: iconos en lugar de números; el bloque izquierdo acompaña el scroll (sticky) en desktop */
#adquisicion.acq{overflow:visible}
.acq__ic{display:inline-flex;margin-bottom:12px;color:var(--acc)}
.acq__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.acq__step.is-final .acq__ic svg{width:26px;height:26px}
.acq__head{position:sticky;top:120px;align-self:start}
@media (max-width:900px){.acq__head{position:static}}

/* 03: el bloque de título y texto (derecha) acompaña el scroll mientras se ve el mockup */
@media (min-width:901px){
  #productos .show__info{position:sticky;top:120px}
}
/* 03: el texto se ancla al centro de la pantalla desde el primer momento, para que acompañe el scroll hacia abajo y hacia arriba */
@media (min-width:901px){
  #productos .show__info{top:calc(50vh - 100px)}
}

/* 03 (desktop): la escena completa (pestañas + mockup + texto) queda anclada mientras dura un tramo extra de scroll, hacia abajo y hacia arriba */
@media (min-width:901px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  #productos .show{padding-bottom:70vh}
  #productos .show__pin{position:sticky;top:84px;z-index:5;background:var(--bg,var(--card))}
  #productos .show__info{position:static}
}
/* el recorrido de un elemento sticky se limita al contenido de su contenedor (no al relleno): el tramo extra va como espaciador */
@media (min-width:901px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  #productos .show{padding-bottom:0}
  #productos .show::after{content:"";display:block;height:70vh}
}

/* El anclaje de la sección 3 también debe funcionar en ventanas bajas (p. ej. 580 px de alto): se compacta la escena en lugar de desactivarla */
@media (min-width:901px) and (max-height:639px) and (prefers-reduced-motion:no-preference){
  #productos .show{padding-bottom:0}
  #productos .show__pin{position:sticky;top:68px;z-index:5;background:var(--bg,var(--card))}
  #productos .show::after{content:"";display:block;height:70vh}
  #productos .show__info{position:static}
}
@media (min-width:901px) and (max-height:700px){
  #productos .show__tabs{margin-bottom:20px}
  #productos .show__note{margin-top:12px}
}

/* Sección 3: el bloque de texto parte alineado arriba y desciende con el scroll mientras el mockup permanece fijo */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  #productos .show__panel{align-items:start}
  #productos .show__info{position:static;will-change:transform}
}

/* ===== 06 · Modelo de funcionamiento: recorrido en tres fases con vistas de estado ===== */
.fx{--p:0;position:relative;margin-top:16px}
.fx__rail{position:absolute;left:0;right:0;top:11px;height:1px;background:color-mix(in srgb,var(--shadow) 14%,transparent)}
.fx__rail i{position:absolute;inset:0;background:var(--acc);transform:scaleX(var(--p));transform-origin:left}
.fx__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.fx__step{position:relative;padding-top:56px}
.fx__node{position:absolute;left:0;top:0;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;border:1px solid var(--line-strong);background:var(--card);transition:border-color .5s,box-shadow .5s,background .5s}
.fx__node i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);transition:background .5s,transform .5s}
.fx__step.on .fx__node{border-color:var(--acc);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 12%,transparent)}
.fx__step.on .fx__node i{background:var(--acc)}
.fx__top{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.fx__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:2px;background:var(--acc-l);color:var(--acc);box-shadow:inset 0 0 0 1px var(--info-l)}
.fx__ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fx__ph{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.fx__step h3{margin:0 0 10px;font-size:clamp(21px,1.9vw,26px);font-weight:300;letter-spacing:-.015em;line-height:1.2}
.fx__step>p{margin:0;max-width:34ch;font-size:15.5px;line-height:1.65;color:var(--muted)}
.fx__step>.fx__top,.fx__step>h3,.fx__step>p,.fx__step>.fx__v{opacity:.5;transform:translateY(8px);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1)}
.fx__step.on>.fx__top,.fx__step.on>h3,.fx__step.on>p,.fx__step.on>.fx__v{opacity:1;transform:none}

.fx__v{margin-top:26px;border:1px solid var(--line);border-radius:2px;background:var(--card);box-shadow:0 24px 40px -30px color-mix(in srgb,var(--shadow) 30%,transparent)}
.fx__vr,.fx__vb{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;border-bottom:1px solid var(--g100);font-size:13.5px;color:var(--text)}
.fx__v>*:last-child{border-bottom:0}
.fx__tg{position:relative;flex:none;width:34px;height:19px;border-radius:99px;background:var(--line-strong);transition:background .45s}
.fx__tg i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px color-mix(in srgb,var(--shadow) 25%,transparent);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.fx__step.on .fx__tg{background:var(--acc)}
.fx__step.on .fx__tg i{transform:translateX(15px)}
.fx__vb{flex-direction:column;align-items:stretch;gap:8px}
.fx__vb span{font-size:12px;color:var(--muted)}
.fx__vb em{display:block;height:5px;border-radius:2px;background:var(--line);overflow:hidden}
.fx__vb em i{display:block;height:100%;width:0;background:var(--acc);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.fx__step.on .fx__vb em i{width:100%}
.fx__vb:nth-child(2) em i{transition-delay:.25s}
.fx__vr b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--line-strong);color:transparent;transition:background .45s,border-color .45s,color .35s}
.fx__vr b svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fx__step.on .fx__vr--ok b,.fx__step.on .fx__vr--end b{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.fx__vr--ok:nth-child(2) b{transition-delay:.2s}
.fx__vr--end{transition:background .5s,color .5s}
.fx__vr--end b{transition-delay:.4s}
.fx__step.on .fx__vr--end{background:var(--acc-l);color:var(--acc);font-weight:500}

@media (max-width:900px){
  .fx__rail{left:11px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .fx__rail i{transform:scaleY(var(--p));transform-origin:top}
  .fx__list{grid-template-columns:1fr;gap:48px}
  .fx__step{padding:0 0 0 52px}
  .fx__node{top:2px}
}
@media (prefers-reduced-motion:reduce){.fx__step>*,.fx__tg,.fx__tg i,.fx__vb em i,.fx__vr b,.fx__node,.fx__node i{transition:none}.fx__step>.fx__top,.fx__step>h3,.fx__step>p,.fx__step>.fx__v{opacity:1;transform:none}}

/* ===== 06 · Modelo de funcionamiento (v2): fases que se apilan al hacer scroll, sin líneas ===== */
.pl{margin-top:20px}
.pl__list{list-style:none;margin:0;padding:0}
.pl__card{position:sticky;top:calc(104px + var(--i) * 26px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:64px;align-items:center;min-height:380px;margin-bottom:24vh;padding:52px 60px;background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:0 36px 70px -46px color-mix(in srgb,var(--shadow) 40%,transparent);transform-origin:50% 0;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .6s}
.pl__card:last-child{margin-bottom:0}
.pl__card.is-covered{transform:scale(.965);opacity:.9}
.pl__top{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.pl__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:2px;background:var(--acc-l);color:var(--acc);box-shadow:inset 0 0 0 1px var(--info-l)}
.pl__ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pl__ph{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.pl__card h3{margin:0 0 14px;font-size:clamp(26px,2.8vw,38px);font-weight:300;letter-spacing:-.02em;line-height:1.14}
.pl__card .pl__txt>p{margin:0;max-width:38ch;font-size:16.5px;line-height:1.7;color:var(--muted)}
.pl__txt>*{opacity:.4;transform:translateY(8px);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1)}
.pl__card.on .pl__txt>*{opacity:1;transform:none}
.pl__vis{padding:30px;border:1px solid var(--info-l);border-radius:2px;background:linear-gradient(160deg,var(--acc-l) 0%,var(--bg2) 100%)}
.pl__vis .fx__v{margin:0;font-size:15px}
.pl__vis .fx__vr,.pl__vis .fx__vb{padding:16px 18px;font-size:15px}
.pl__vis .fx__vb span{font-size:13px}
.pl__vis .fx__tg{width:40px;height:22px}
.pl__vis .fx__tg i{width:18px;height:18px}
.pl__card.on .fx__tg{background:var(--acc)}
.pl__card.on .fx__tg i{transform:translateX(18px)}
.pl__card.on .fx__vb em i{width:100%}
.pl__card.on .fx__vr--ok b,.pl__card.on .fx__vr--end b{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.pl__card.on .fx__vr--end{background:var(--acc-l);color:var(--acc);font-weight:500}
.pl__vis .fx__vr b{width:22px;height:22px}

@media (max-width:900px){
  .pl__card{position:static;grid-template-columns:1fr;gap:28px;min-height:0;margin-bottom:28px;padding:30px 24px}
  .pl__card.is-covered{transform:none;opacity:1}
  .pl__vis{padding:18px}
}
@media (prefers-reduced-motion:reduce){.pl__card{position:static;margin-bottom:28px;transition:none}.pl__txt>*{opacity:1;transform:none;transition:none}}

/* ===== 06 · Modelo de funcionamiento (v3): mosaico de tres fases ===== */
.mz{margin-top:20px}
.mz__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.mz__tile{position:relative;display:flex;flex-direction:column;gap:32px;padding:40px;border:1px solid var(--line);border-radius:4px;background:var(--card);overflow:hidden;opacity:0;translate:0 28px;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.7,.2,1)}
.mz__tile.on{opacity:1;translate:0 0}
.mz__tile--a{grid-column:1/6;grid-row:1/3;justify-content:space-between}
.mz__tile--b{grid-column:6/13;grid-row:1;background:var(--acc-l);border-color:var(--info-l);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:36px;align-items:center}
.mz__tile--c{grid-column:6/13;grid-row:2;background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-fg);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:36px;align-items:center;transition-delay:.12s}
.mz__top{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.mz__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:2px;background:var(--acc-l);color:var(--acc);box-shadow:inset 0 0 0 1px var(--info-l)}
.mz__tile--b .mz__ic{background:var(--card)}
.mz__tile--c .mz__ic{background:rgba(255,255,255,.08);color:var(--inv-acc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.mz__ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mz__ph{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.mz__tile--c .mz__ph{color:color-mix(in srgb,var(--inv-fg) 55%,transparent)}
.mz__tile h3{margin:0 0 12px;font-size:clamp(24px,2.5vw,34px);font-weight:300;letter-spacing:-.02em;line-height:1.14}
.mz__tile--c h3{color:var(--inv-fg)}
.mz__txt>p{margin:0;max-width:36ch;font-size:16px;line-height:1.7;color:var(--muted)}
.mz__tile--c .mz__txt>p{color:color-mix(in srgb,var(--inv-fg) 66%,transparent)}
.mz__vis .fx__v{margin:0;font-size:14.5px}
.mz__tile--c .fx__v{border-color:rgba(255,255,255,.14);box-shadow:0 30px 50px -30px color-mix(in srgb,var(--shadow) 70%,transparent)}
.mz__tile--a .mz__vis{padding:24px;border:1px solid var(--info-l);border-radius:2px;background:linear-gradient(160deg,var(--acc-l),var(--bg2))}
.mz__vis .fx__vr,.mz__vis .fx__vb{padding:15px 17px;font-size:14.5px}
.mz__vis .fx__tg{width:38px;height:21px}
.mz__vis .fx__tg i{width:17px;height:17px}
.mz__tile.on .fx__tg{background:var(--acc)}
.mz__tile.on .fx__tg i{transform:translateX(17px)}
.mz__tile.on .fx__vb em i{width:100%}
.mz__tile.on .fx__vr--ok b,.mz__tile.on .fx__vr--end b{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.mz__tile.on .fx__vr--end{background:var(--acc-l);color:var(--acc);font-weight:500}
.mz__vis .fx__vr b{width:21px;height:21px}

@media (max-width:900px){
  .mz__grid{grid-template-columns:1fr}
  .mz__tile--a,.mz__tile--b,.mz__tile--c{grid-column:auto;grid-row:auto;display:flex;flex-direction:column;gap:26px;padding:28px 24px}
}
@media (prefers-reduced-motion:reduce){.mz__tile{opacity:1;translate:0 0;transition:none}}

/* 06: cabecera centrada con palabras destacadas en azul */
#como-funciona .head{max-width:760px;margin:0 auto 56px;text-align:center}
#como-funciona .head .lead{margin-inline:auto;text-align:center}
#como-funciona .head h2 .hl{color:var(--acc)}
#como-funciona .head .eyebrow{text-align:center}

/* 06 · móvil: las tres tarjetas del mosaico con el mismo ancho interno, texto arriba y vista de estado a todo el ancho */
@media (max-width:900px){
  .mz__grid{gap:12px}
  .mz__tile--a,.mz__tile--b,.mz__tile--c{align-items:stretch;justify-content:flex-start;padding:26px 22px;gap:22px}
  .mz__top{margin-bottom:18px}
  .mz__tile h3{font-size:25px}
  .mz__txt>p{max-width:none;font-size:15.5px}
  .mz__vis{width:100%}
  .mz__tile--a .mz__vis{padding:0;border:0;background:none}
  #como-funciona .head{margin-bottom:36px}
}

/* 06 · móvil: una tarjeta grande arriba (Fase 1) y las dos fases siguientes, más pequeñas, lado a lado */
@media (max-width:900px){
  .mz__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mz__tile--a{grid-column:1/-1}
  .mz__tile--b{grid-column:1;grid-row:auto}
  .mz__tile--c{grid-column:2;grid-row:auto}
  .mz__tile--b,.mz__tile--c{padding:20px 16px;gap:18px;justify-content:space-between}
  .mz__tile--b .mz__top,.mz__tile--c .mz__top{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:14px}
  .mz__tile--b .mz__ic,.mz__tile--c .mz__ic{width:34px;height:34px}
  .mz__tile--b .mz__ph,.mz__tile--c .mz__ph{font-size:9.5px;letter-spacing:.16em}
  .mz__tile--b h3,.mz__tile--c h3{font-size:19px;line-height:1.18;margin-bottom:10px}
  .mz__tile--b .mz__txt>p,.mz__tile--c .mz__txt>p{font-size:13.5px;line-height:1.55}
  /* en las tarjetas pequeñas solo se muestra la fila de estado más representativa */
  .mz__tile--b .fx__v>*:not(:first-child){display:none}
  .mz__tile--c .fx__v>*:not(:last-child){display:none}
  .mz__tile--b .fx__vr,.mz__tile--b .fx__vb,.mz__tile--c .fx__vr{padding:11px 12px;font-size:12.5px}
  .mz__tile--b .fx__vb span{font-size:11.5px}
  .mz__tile--c .fx__vr b{width:18px;height:18px}
}

/* ===== 06 · Modelo de funcionamiento (v4): paneles expansivos ===== */
.xp{margin-top:16px}
.xp__list{display:flex;gap:12px;height:500px;list-style:none;margin:0;padding:0}
.xp__p{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:var(--card);transition:flex-grow .9s cubic-bezier(.2,.7,.2,1),box-shadow .6s}
.xp__p.is-active{flex-grow:4.4;box-shadow:0 40px 70px -48px color-mix(in srgb,var(--shadow) 40%,transparent)}
.xp__p--b{background:var(--acc-l);border-color:var(--info-l)}
.xp__p--c{background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-fg)}
.xp__hd{position:absolute;inset:0;z-index:2;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.xp__hd:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 55%,transparent);outline-offset:-3px}
.xp__ic{position:absolute;left:28px;top:28px;display:grid;place-items:center;width:44px;height:44px;border-radius:2px;background:var(--acc-l);color:var(--acc);box-shadow:inset 0 0 0 1px var(--info-l)}
.xp__p--b .xp__ic{background:var(--card)}
.xp__p--c .xp__ic{background:rgba(255,255,255,.08);color:var(--inv-acc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.xp__ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.xp__ph{position:absolute;left:88px;top:42px;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .4s}
.xp__p--c .xp__ph{color:color-mix(in srgb,var(--inv-fg) 55%,transparent)}
.xp__p.is-active .xp__ph{opacity:1;transition-delay:.3s}
.xp__tv{position:absolute;left:34px;bottom:30px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:21px;font-weight:300;letter-spacing:-.005em;white-space:nowrap;color:var(--fg);transition:opacity .35s}
.xp__p--c .xp__tv{color:var(--inv-fg)}
.xp__p.is-active .xp__tv{opacity:0;pointer-events:none}
.xp__chev{display:none}
.xp__body{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.xp__p.is-active .xp__body{opacity:1;visibility:visible;transition:opacity .55s ease .35s,visibility 0s}
.xp__in{position:absolute;left:44px;top:108px;bottom:40px;width:clamp(520px,49vw,640px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-rows:auto 1fr;column-gap:36px}
.xp__t{grid-column:1;margin:0 0 14px;font-size:clamp(26px,2.5vw,34px);font-weight:300;letter-spacing:-.02em;line-height:1.14}
.xp__p--c .xp__t{color:var(--inv-fg)}
.xp__in>p{grid-column:1;margin:0;font-size:16px;line-height:1.7;color:var(--muted)}
.xp__p--c .xp__in>p{color:color-mix(in srgb,var(--inv-fg) 66%,transparent)}
.xp__vis{grid-column:2;grid-row:1/3;align-self:end}
.xp__vis .fx__v{margin:0;font-size:14.5px}
.xp__p--c .fx__v{border-color:rgba(255,255,255,.14);box-shadow:0 30px 50px -30px color-mix(in srgb,var(--shadow) 70%,transparent)}
.xp__vis .fx__vr,.xp__vis .fx__vb{padding:15px 17px;font-size:14.5px}
.xp__vis .fx__tg{width:38px;height:21px}
.xp__vis .fx__tg i{width:17px;height:17px}
.xp__vis .fx__vr b{width:21px;height:21px}
.xp__p.is-active .fx__tg{background:var(--acc)}
.xp__p.is-active .fx__tg i{transform:translateX(17px)}
.xp__p.is-active .fx__vb em i{width:100%}
.xp__p.is-active .fx__vr--ok b,.xp__p.is-active .fx__vr--end b{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.xp__p.is-active .fx__vr--end{background:var(--acc-l);color:var(--acc);font-weight:500}

@media (max-width:1100px) and (min-width:901px){
  .xp__p.is-active{flex-grow:5.4}
  .xp__in{width:430px;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;row-gap:0}
  .xp__vis{grid-column:1;grid-row:3;align-self:end;max-width:300px}
  .xp__in>p{font-size:15px}
}
@media (max-width:900px){
  .xp__list{flex-direction:column;height:auto;gap:10px}
  .xp__p,.xp__p.is-active{flex:none;overflow:hidden}
  .xp__hd{position:relative;inset:auto;display:flex;align-items:center;gap:16px;padding:20px 20px}
  .xp__ic{position:static;flex:none;width:40px;height:40px}
  .xp__ph{display:none}
  .xp__tv{position:static;writing-mode:horizontal-tb;transform:none;flex:1;font-size:20px;line-height:1.2;white-space:normal;opacity:1!important}
  .xp__chev{display:grid;place-items:center;flex:none;width:28px;height:28px;color:var(--muted);transition:transform .5s}
  .xp__chev svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .xp__p--c .xp__chev{color:color-mix(in srgb,var(--inv-fg) 60%,transparent)}
  .xp__p.is-active .xp__chev{transform:rotate(180deg)}
  .xp__body{position:static;display:grid;grid-template-rows:0fr;opacity:1;visibility:visible;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1)}
  .xp__p.is-active .xp__body{grid-template-rows:1fr;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1)}
  .xp__in{position:static;display:block;width:auto;min-height:0;overflow:hidden;padding:0 20px}
  .xp__p.is-active .xp__in{padding-bottom:22px}
  .xp__t{display:none}
  .xp__in>p{font-size:15.5px;margin-bottom:20px}
  .xp__vis{max-width:none}
}
@media (prefers-reduced-motion:reduce){.xp__p,.xp__body,.xp__ph,.xp__tv,.xp__chev{transition:none}}

/* 06 (desktop): la franja de paneles se ancla y el scroll abre y cierra un panel tras otro */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  #como-funciona .xp__list{position:sticky;top:96px;height:clamp(400px,calc(100vh - 150px),500px)}
  #como-funciona .xp::after{content:"";display:block;height:150vh}
}

/* ===== 06 · mockups detallados dentro de los paneles ===== */
.xp__p.is-active{flex-grow:6}
.xp__in{width:clamp(560px,56vw,700px);grid-template-columns:230px minmax(0,1fr);column-gap:34px;top:104px}
.xp__t{font-size:clamp(24px,2.2vw,30px)}
.xp__in>p{font-size:14.5px;line-height:1.65}
.xp__vis{grid-column:2;grid-row:1/3;align-self:stretch;display:flex}
.xp__vis .xm{flex:1}
.xm{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:4px;background:var(--card);box-shadow:0 34px 60px -38px color-mix(in srgb,var(--shadow) 45%,transparent);overflow:hidden;font-size:13px;color:var(--fg);text-align:left}
.xp__p--c .xm{border-color:rgba(255,255,255,.14);box-shadow:0 36px 60px -34px color-mix(in srgb,var(--shadow) 80%,transparent)}
.xm__bar{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--bg2);border-bottom:1px solid #EEF0F3}
.xm__dots{display:flex;gap:5px}
.xm__dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.xm__dots i:nth-child(1){background:#F87171}
.xm__dots i:nth-child(2){background:#FBBF24}
.xm__dots i:nth-child(3){background:#34D399}
.xm__tt{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap}
.xm__il{margin-left:auto;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.xm__body{flex:1;padding:16px;display:flex;flex-direction:column}
.xm__sec{margin:0 0 9px;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.xm__sec.xm__opt,.xm__opt{margin-top:14px}
.xm__rows{display:grid;gap:7px}
.xm__row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #EEF0F3;border-radius:3px;background:var(--card)}
.xm__row>span:nth-child(2){flex:1}
.xm__ri{display:grid;place-items:center;width:24px;height:24px;border-radius:3px;background:var(--acc-l);color:var(--acc)}
.xm__ri svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.xm__tg{position:relative;flex:none;width:30px;height:17px;border-radius:99px;background:var(--line-strong);transition:background .5s}
.xm__tg i{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px color-mix(in srgb,var(--shadow) 25%,transparent);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.xp__p.is-active .xm__tg:not(.xm__tg--off){background:var(--acc)}
.xp__p.is-active .xm__tg:not(.xm__tg--off) i{transform:translateX(13px)}
.xm__fld{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:3px;color:var(--muted)}
.xm__type{font-weight:500;color:var(--fg);overflow:hidden;white-space:nowrap}
.xm__type em{display:inline-block;font-style:normal;max-width:0;overflow:hidden;white-space:nowrap;vertical-align:bottom;transition:max-width 1.1s steps(11) .4s}
.xp__p.is-active .xm__type em{max-width:12em}
.xm__sw{display:flex;align-items:center;gap:7px;margin-top:9px;color:var(--muted)}
.xm__sw span{margin-right:auto}
.xm__sw i{width:17px;height:17px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--shadow) 8%,transparent)}
.xm__sw .s1{background:var(--inv-bg)}
.xm__sw .s2{background:var(--acc)}
.xm__sw .s3{background:#0EA5E9}
.xm__sw .s4{background:var(--inv-acc)}
.xm__sw .sel{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--acc)}
.xm__seg{display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:3px;background:var(--g100)}
.xm__seg span{padding:7px 0;border-radius:2px;text-align:center;color:var(--muted);font-size:12px}
.xm__seg .sel{background:var(--card);color:var(--fg);font-weight:500;box-shadow:0 1px 2px color-mix(in srgb,var(--shadow) 12%,transparent)}
.xm__hdr{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.xm__hdr b{display:block;font-size:14px;font-weight:500}
.xm__hdr span{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.xm__ring{width:48px;height:48px;flex:none;transform:rotate(-90deg)}
.xm__ring circle{fill:none;stroke-width:4}
.xm__ring .bg{stroke:var(--inv-fg)}
.xm__ring .fg{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .2s}
.xp__p.is-active .xm__ring .fg{stroke-dashoffset:0}
.xm__tasks{display:grid;gap:7px}
.xm__task{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #EEF0F3;border-radius:3px;color:var(--muted);transition:color .4s}
.xm__ck{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong);color:transparent;transition:background .4s,border-color .4s,color .3s}
.xm__ck svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.xp__p.is-active .xm__task{color:var(--fg)}
.xp__p.is-active .xm__ck{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.xp__p.is-active .xm__task.t1 .xm__ck{transition-delay:.35s}
.xp__p.is-active .xm__task.t2 .xm__ck{transition-delay:.6s}
.xp__p.is-active .xm__task.t3 .xm__ck{transition-delay:.85s}
.xp__p.is-active .xm__task.t4 .xm__ck{transition-delay:1.1s}
.xm__prog{margin-top:auto;padding-top:14px}
.xm__prog span{display:block;margin-bottom:7px;font-size:11px;color:var(--muted)}
.xm__prog em{display:block;height:6px;border-radius:2px;background:var(--line);overflow:hidden}
.xm__prog em i{display:block;height:100%;width:0;background:var(--acc);transition:width 1.8s cubic-bezier(.2,.7,.2,1) .3s}
.xp__p.is-active .xm__prog em i{width:100%}
.xm__env{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:14px;border:1px solid var(--info-l);border-radius:3px;background:var(--acc-l)}
.xm__gi{display:grid;place-items:center;width:30px;height:30px;border-radius:3px;background:var(--card);color:var(--acc)}
.xm__gi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.xm__env b{display:block;font-size:13.5px;font-weight:500}
.xm__env div span{display:block;font-size:11.5px;color:var(--muted)}
.xm__live{margin-left:auto;padding:3px 9px;border-radius:99px;background:var(--card);color:var(--acc);font-style:normal;font-size:11px;font-weight:600}
.xm__done{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding:11px 12px;border-radius:3px;background:var(--acc-l);color:var(--acc);font-weight:500}
.xm__done u{padding:7px 12px;border-radius:3px;background:var(--acc);color:var(--accfg);font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.xm--3 .xm__tasks{margin-bottom:14px}

@media (max-width:1100px) and (min-width:901px){
  .xp__in{width:520px;grid-template-columns:200px minmax(0,1fr)}
}
@media (max-width:900px){
  .xp__in{display:block;padding:0 18px}
  .xp__vis{display:block}
  .xm__opt{display:none}
  .xm__body{padding:14px}
  .xm__il{display:none}
  #como-funciona .xp__list{position:sticky;top:72px}
  #como-funciona .xp::after{content:"";display:block;height:150vh}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  #como-funciona .xp__list{position:static}
  #como-funciona .xp::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .xm__tg,.xm__tg i,.xm__ring .fg,.xm__prog em i,.xm__ck,.xm__type em{transition:none}
}

/* Ajuste de alturas: los mockups caben completos dentro de su panel */
@media (min-width:901px){
  #como-funciona .xp__list{height:clamp(400px,calc(100vh - 150px),540px)}
  .xp__in{top:96px;bottom:28px}
  .xm__bar{padding:10px 14px}
  .xm__body{padding:14px}
  .xm__sec{margin-bottom:8px}
  .xm__sec.xm__opt,.xm__opt{margin-top:12px}
  .xm__row,.xm__task{padding:7px 10px}
  .xm__tasks,.xm__rows{gap:6px}
  .xm__env{margin-bottom:12px;padding:9px 12px}
  .xm--3 .xm__tasks{margin-bottom:12px}
  .xm__done{padding:9px 12px}
}
@media (min-width:901px) and (max-height:700px){
  .xm__opt{display:none}
  .xm--1 .xm__sw{display:none}
}
/* corrige el recorte de elementos: «xm__opt» marca filas opcionales; solo se ocultan en ventanas muy bajas y en móvil */
@media (min-width:901px){
  .xm__opt{display:revert}
  .xm__sec.xm__opt{display:block}
  .xm__task.xm__opt{display:flex}
}
@media (min-width:901px) and (max-height:640px){
  .xm--1 .xm__sw,.xm--1 .xm__seg,.xm--1 .xm__sec:nth-of-type(3){display:none}
  .xm__task.xm__opt{display:none}
}
@media (max-width:900px){
  .xm__sec.xm__opt{display:none}
  .xm--1 .xm__sw,.xm--1 .xm__seg{display:none}
  .xm__task.xm__opt{display:none}
}
.xm__task.xm__opt{margin-top:0}

/* 06: fondo con dot grid (overflow:clip para no romper el anclaje) y en móvil el contenido ocupa solo el ancho del panel */
#como-funciona.section--dots{overflow:clip}
@media (max-width:900px){
  .xp__in{width:auto;max-width:100%;min-width:0}
  .xp__vis,.xp__vis .xm{width:100%;max-width:100%;min-width:0}
}
/* móvil: panel abierto más compacto para que quepa en la pantalla mientras está anclado */
@media (max-width:900px){
  #como-funciona .xp__list{top:64px;gap:8px}
  .xp__hd{padding:14px 18px;gap:14px}
  .xp__ic{width:36px;height:36px}
  .xp__tv{font-size:18px}
  .xp__in>p{font-size:14.5px;line-height:1.55;margin-bottom:14px}
  .xp__p.is-active .xp__in{padding-bottom:16px}
  .xm__bar{padding:8px 12px}
  .xm__body{padding:12px}
  .xm__row,.xm__task{padding:6px 9px}
  .xm__tasks,.xm__rows{gap:5px}
  .xm__env{margin-bottom:10px;padding:8px 10px}
  .xm--3 .xm__tasks{margin-bottom:10px}
  .xm__done{padding:8px 10px}
  .xm__hdr{margin-bottom:10px}
  .xm__prog{padding-top:10px}
}
/* 06 · móvil: los acordeones casi de borde a borde (12 px de margen lateral) */
@media (max-width:900px){
  #como-funciona .xp{margin-inline:calc(12px - 6vw)}
}

/* 06 · móvil: el bloque anclado ocupa la pantalla (el panel abierto crece y llena el hueco) y el tramo de scroll es más corto */
@media (max-width:900px){
  #como-funciona .xp::after{height:120vh}
  #como-funciona .xp__list{display:flex;flex-direction:column;height:auto;min-height:calc(100vh - 88px);min-height:calc(100svh - 88px)}
  #como-funciona .xp__p{flex:none}
  #como-funciona .xp__p.is-active{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  #como-funciona .xp__p.is-active .xp__body{flex:1;grid-template-rows:1fr;min-height:0}
  #como-funciona .xp__p.is-active .xp__in{display:flex;flex-direction:column;min-height:0}
  #como-funciona .xp__p.is-active .xp__vis{display:flex;flex:1;min-height:0}
  #como-funciona .xp__p.is-active .xp__vis .xm{flex:1}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){#como-funciona .xp__list{min-height:0}}

/* ===== móvil: mockups más completos y mejor distribuidos (se muestran todos los elementos y una vista previa del producto) ===== */
.xm__prev{display:none}
@media (max-width:900px){
  .xm__body{gap:12px;padding:14px}
  .xm__sec,.xm__sec.xm__opt{display:block;margin:0 0 -4px}
  .xm__sec.xm__opt{margin-top:2px}
  .xm--1 .xm__sw,.xm--1 .xm__seg{display:flex}
  .xm--1 .xm__seg{display:grid}
  .xm__task.xm__opt{display:flex;margin-top:0}
  .xm__rows,.xm__tasks{gap:7px}
  .xm__row,.xm__task{padding:9px 11px}
  .xm--1 .xm__fld{padding:10px 11px}
  .xm--1 .xm__sw{margin-top:0}
  .xm__seg span{padding:9px 0}
  .xm--1 .xm__seg{margin-top:auto}
  .xm__hdr{margin-bottom:0}
  .xm__env{margin-bottom:0;padding:11px 12px}
  .xm--3 .xm__tasks{margin-bottom:0}
  .xm__prog{margin-top:auto;padding-top:0}
  .xm__done{margin-top:auto;padding:11px 12px}
  .xm__prev{display:flex;flex-direction:column;flex:1 1 auto;min-height:74px;overflow:hidden;border:1px solid var(--line);border-radius:3px;background:var(--bg2)}
  .xm__pvb{display:flex;align-items:center;gap:4px;padding:7px 9px;background:var(--card);border-bottom:1px solid #EEF0F3}
  .xm__pvb i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
  .xm__pvb span{margin-left:8px;flex:1;height:7px;border-radius:99px;background:var(--g100)}
  .xm__pvh{display:grid;gap:5px;padding:10px 12px}
  .xm__pvh b{display:block;height:7px;width:60%;border-radius:2px;background:var(--inv-bg);opacity:.85}
  .xm__pvh b.s{width:82%;height:5px;background:var(--muted);opacity:.6}
  .xm__pvh u{display:block;width:54px;height:14px;margin-top:3px;border-radius:2px;background:var(--acc);text-decoration:none}
  .xm__pvg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 12px 10px;margin-top:auto}
  .xm__pvg i{display:block;height:20px;border-radius:2px;background:var(--card);border:1px solid var(--line)}
  .xm__prev--b .xm__pvh u{background:#0F172A}
  .xm__prev--b .xm__pvg i:first-child{background:var(--acc-l);border-color:var(--info-l)}
  .xp__p.is-active .xm__prev .xm__pvh b{animation:xmPv 1s ease both}
  .xm__sec{display:block}
}
@keyframes xmPv{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:.85}}
.xm__pvh b{transform-origin:left}
@media (prefers-reduced-motion:reduce){.xp__p.is-active .xm__prev .xm__pvh b{animation:none}}
/* ajuste fino móvil: todo el contenido cabe en la altura disponible */
@media (max-width:900px){
  .xm{min-height:0}
  .xm__body{gap:10px;min-height:0;padding:12px 14px}
  .xm__row,.xm__task{padding:7px 10px}
  .xm__rows,.xm__tasks{gap:6px}
  .xm__prev{min-height:44px}
  .xm--3 .xm__task.xm__opt{display:none}
  .xm__env{padding:9px 12px}
  .xm__done{padding:9px 12px}
  .xm--1 .xm__fld{padding:8px 10px}
  .xm__seg span{padding:7px 0}
  .xm__sec,.xm__sec.xm__opt{margin-bottom:-2px}
}
@media (max-width:900px){
  #como-funciona .xp__list{height:calc(100vh - 88px);height:calc(100svh - 88px);min-height:0}
  #como-funciona .xp__p.is-active{overflow:hidden}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){#como-funciona .xp__list{height:auto}}

/* ===== 06 · mockups detallados (v2): ventana de aplicación con barra lateral, listas, formularios y estados ===== */
.xp__vis{container-type:size;min-width:0}
.xn{--H:31;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;font-size:min(3.15cqw,calc(100cqh / var(--H)));line-height:1.25;color:var(--fg);text-align:left;background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:0 34px 60px -38px color-mix(in srgb,var(--shadow) 45%,transparent);overflow:hidden}
.xp__p--c .xn{border-color:rgba(255,255,255,.14);box-shadow:0 36px 60px -34px color-mix(in srgb,var(--shadow) 80%,transparent)}
.xn svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.xn__bar{display:flex;align-items:center;gap:.9em;padding:.8em 1.1em;background:var(--bg2);border-bottom:1px solid #EEF0F3;flex:none}
.xn__dots{display:flex;gap:.4em}
.xn__dots i{width:.62em;height:.62em;border-radius:50%;background:var(--line-strong)}
.xn__dots i:nth-child(1){background:#F87171}
.xn__dots i:nth-child(2){background:#FBBF24}
.xn__dots i:nth-child(3){background:#34D399}
.xn__tt{font-size:.95em;font-weight:500;color:var(--text);white-space:nowrap}
.xn__il{margin-left:auto;font-size:.76em;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.xn__app{flex:1;display:flex;min-height:0}
.xn__rail{display:flex;flex-direction:column;align-items:center;gap:.5em;flex:none;width:3.3em;padding:.9em 0;background:var(--bg2);border-right:1px solid #EEF0F3}
.xn__rail span{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:.3em;color:var(--muted)}
.xn__rail span.on{background:var(--acc-l);color:var(--acc)}
.xn__rail svg{width:1.25em;height:1.25em}
.xn__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.85em;padding:1em 1.15em}
.xn__h{display:flex;align-items:center;justify-content:space-between;gap:.8em}
.xn__h b{font-size:.78em;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.xn__chip{padding:.2em .7em;border-radius:99px;background:var(--acc-l);color:var(--acc);font-style:normal;font-size:.78em;font-weight:600;white-space:nowrap}
.xn__list{display:grid;gap:.5em}
.xn__r,.xn__tk{display:flex;align-items:center;gap:.8em;padding:.6em .75em;border:1px solid #EEF0F3;border-radius:.3em;background:var(--card)}
.xn__ri{display:grid;place-items:center;flex:none;width:2.1em;height:2.1em;border-radius:.3em;background:var(--acc-l);color:var(--acc)}
.xn__ri svg{width:1.15em;height:1.15em}
.xn__rt{flex:1;min-width:0;display:flex;flex-direction:column}
.xn__rt b{font-size:.98em;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xn__rt small{font-size:.8em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xn__tg{position:relative;flex:none;width:2.4em;height:1.35em;border-radius:99px;background:var(--line-strong);transition:background .5s}
.xn__tg i{position:absolute;top:.17em;left:.17em;width:1.01em;height:1.01em;border-radius:50%;background:var(--card);box-shadow:0 1px 2px color-mix(in srgb,var(--shadow) 25%,transparent);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.xp__p.is-active .xn__tg:not(.xn__tg--off){background:var(--acc)}
.xp__p.is-active .xn__tg:not(.xn__tg--off) i{transform:translateX(1.05em)}
.xn__g2{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.xn__f{display:flex;flex-direction:column;gap:.35em;min-width:0}
.xn__f small{font-size:.78em;color:var(--muted)}
.xn__in{display:flex;align-items:center;min-height:2.3em;padding:.4em .7em;border:1px solid var(--line);border-radius:.3em;font-size:.95em;font-weight:500;color:var(--fg);white-space:nowrap;overflow:hidden}
.xn__in--ph{color:var(--muted);font-weight:400}
.xn__type{display:inline-block;font-style:normal;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width 1.1s steps(11) .4s}
.xp__p.is-active .xn__type{max-width:12em}
.xn__sw{display:flex;align-items:center;gap:.5em;min-height:2.3em}
.xn__sw i{width:1.45em;height:1.45em;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--shadow) 8%,transparent)}
.xn__sw .s1{background:var(--inv-bg)}
.xn__sw .s2{background:var(--acc)}
.xn__sw .s3{background:#0EA5E9}
.xn__sw .s4{background:var(--inv-acc)}
.xn__sw .s5{background:var(--line)}
.xn__sw .sel{box-shadow:0 0 0 .18em var(--card),0 0 0 .32em var(--acc)}
.xn__up{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;padding:.6em;border:1px dashed var(--info-b);border-radius:.3em;background:var(--bg2);color:var(--acc)}
.xn__up svg{width:1.4em;height:1.4em}
.xn__up span{font-size:.92em;font-weight:500}
.xn__up small{font-size:.75em;color:var(--muted)}
.xn__seg{display:grid;grid-template-columns:repeat(3,1fr);padding:.25em;border-radius:.3em;background:var(--g100)}
.xn__seg span{padding:.55em 0;border-radius:.2em;text-align:center;color:var(--muted);font-size:.92em}
.xn__seg .sel{background:var(--card);color:var(--fg);font-weight:500;box-shadow:0 1px 2px color-mix(in srgb,var(--shadow) 12%,transparent)}
/* fase 2 */
.xn__top{display:flex;align-items:center;justify-content:space-between;gap:.8em}
.xn__hd{display:flex;align-items:center;gap:.9em;min-width:0}
.xn__ring{width:3.9em;height:3.9em;flex:none;transform:rotate(-90deg)}
.xn__ring circle{fill:none;stroke-width:4}
.xn__ring .bg{stroke:var(--inv-fg)}
.xn__ring .fg{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.7s cubic-bezier(.2,.7,.2,1) .2s}
.xp__p.is-active .xn__ring .fg{stroke-dashoffset:0}
.xn__hd .xn__rt b{font-size:1.02em}
.xn__chip--st{position:relative;display:inline-grid}
.xn__chip--st span{grid-area:1/1;text-align:center;transition:opacity .4s}
.xn__chip--st .b{opacity:0}
.xp__p.is-active .xn__chip--st .a{opacity:0;transition-delay:1.5s}
.xp__p.is-active .xn__chip--st .b{opacity:1;transition-delay:1.5s}
.xn__tk{color:var(--muted);transition:color .4s}
.xn__ck{display:grid;place-items:center;flex:none;width:1.55em;height:1.55em;border-radius:50%;border:1px solid var(--line-strong);color:transparent;transition:background .4s,border-color .4s,color .3s}
.xn__ck svg{width:.85em;height:.85em;stroke-width:3.2}
.xn__tag{flex:none;padding:.15em .6em;border-radius:99px;background:var(--g100);color:var(--muted);font-style:normal;font-size:.75em;font-weight:600;transition:background .4s,color .4s}
.xp__p.is-active .xn__tk{color:var(--fg)}
.xp__p.is-active .xn__tk .xn__ck{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.xp__p.is-active .xn__tk .xn__tag{background:var(--acc-l);color:var(--acc)}
.xp__p.is-active .xn__tk.t1 .xn__ck,.xp__p.is-active .xn__tr.t1 .xn__ok{transition-delay:.35s}
.xp__p.is-active .xn__tk.t2 .xn__ck,.xp__p.is-active .xn__tr.t2 .xn__ok{transition-delay:.6s}
.xp__p.is-active .xn__tk.t3 .xn__ck,.xp__p.is-active .xn__tr.t3 .xn__ok{transition-delay:.85s}
.xp__p.is-active .xn__tk.t4 .xn__ck,.xp__p.is-active .xn__tr.t4 .xn__ok{transition-delay:1.1s}
.xp__p.is-active .xn__tk.t5 .xn__ck{transition-delay:1.35s}
.xn__seg2{margin-top:auto}
.xn__seg2 span{display:block;margin-bottom:.45em;font-size:.8em;color:var(--muted)}
.xn__seg2 div{display:grid;grid-template-columns:repeat(5,1fr);gap:.3em}
.xn__seg2 i{display:block;height:.5em;border-radius:.15em;background:var(--line);transition:background .4s}
.xp__p.is-active .xn__seg2 i{background:var(--acc)}
.xp__p.is-active .xn__seg2 i:nth-child(2){transition-delay:.3s}
.xp__p.is-active .xn__seg2 i:nth-child(3){transition-delay:.6s}
.xp__p.is-active .xn__seg2 i:nth-child(4){transition-delay:.9s}
.xp__p.is-active .xn__seg2 i:nth-child(5){transition-delay:1.2s}
/* fase 3 */
.xn__env{display:flex;align-items:center;gap:.85em;padding:.75em .9em;border:1px solid var(--info-l);border-radius:.3em;background:var(--acc-l)}
.xn__gi{display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;border-radius:.3em;background:var(--card);color:var(--acc)}
.xn__gi svg{width:1.3em;height:1.3em}
.xn__live{flex:none;padding:.2em .7em;border-radius:99px;background:var(--card);color:var(--acc);font-style:normal;font-size:.78em;font-weight:600}
.xn__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.xn__steps span{display:flex;align-items:center;justify-content:center;gap:.4em;padding:.5em .3em;border-radius:.3em;background:var(--g100);color:var(--muted);font-size:.82em;transition:background .4s,color .4s}
.xn__steps svg{width:1em;height:1em;stroke-width:3}
.xp__p.is-active .xn__steps span{background:var(--acc-l);color:var(--acc)}
.xn__tbl{display:grid;border:1px solid #EEF0F3;border-radius:.3em;overflow:hidden}
.xn__tr{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:.6em .85em;border-bottom:1px solid var(--g100)}
.xn__tr:last-child{border-bottom:0}
.xn__ok{display:inline-flex;align-items:center;gap:.35em;flex:none;padding:.15em .6em;border-radius:99px;background:var(--g100);color:var(--muted);font-style:normal;font-size:.78em;font-weight:600;transition:background .4s,color .4s}
.xn__ok svg{width:.95em;height:.95em;stroke-width:3.2}
.xp__p.is-active .xn__ok{background:var(--acc-l);color:var(--acc)}
.xn__done{display:flex;align-items:center;justify-content:space-between;gap:.8em;margin-top:auto;padding:.7em .9em;border-radius:.3em;background:var(--acc-l)}
.xn__dl{display:flex;align-items:center;gap:.6em;color:var(--acc)}
.xn__dl svg{width:1.35em;height:1.35em}
.xn__dl b{font-weight:500}
.xn__done u{padding:.5em .95em;border-radius:.3em;background:var(--acc);color:var(--accfg);font-size:.88em;font-weight:600;text-decoration:none;white-space:nowrap}
/* vista previa del producto (solo cuando hay altura: móvil) */
.xn__mx{display:none}
.xn__pvwrap{flex:1 1 auto;min-height:3em}
.xn__prev{display:flex;flex-direction:column;height:100%;min-height:3em;overflow:hidden;border:1px solid var(--line);border-radius:.3em;background:var(--bg2)}
.xn__pvb{display:flex;align-items:center;gap:.35em;padding:.5em .7em;background:var(--card);border-bottom:1px solid #EEF0F3}
.xn__pvb i{width:.5em;height:.5em;border-radius:50%;background:var(--line-strong)}
.xn__pvb span{margin-left:.6em;flex:1;height:.55em;border-radius:99px;background:var(--g100)}
.xn__pvh{display:grid;gap:.4em;padding:.8em .9em}
.xn__pvh b{display:block;height:.55em;width:58%;border-radius:.15em;background:var(--inv-bg);opacity:.85}
.xn__pvh b.s{width:80%;height:.4em;background:var(--muted);opacity:.6}
.xn__pvh u{display:block;width:4.2em;height:1.1em;margin-top:.25em;border-radius:.2em;background:var(--acc);text-decoration:none}
.xn__pvg{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;padding:0 .9em .8em;margin-top:auto}
.xn__pvg i{display:block;height:1.8em;border-radius:.2em;background:var(--card);border:1px solid var(--line)}

@media (max-width:900px){
  .xn{--H:41}
  .xn__mx{display:flex}
  .xn__r.xn__mx,.xn__tk.xn__mx{display:flex}
  .xn__h.xn__mx{display:flex}
  .xn__seg.xn__mx{display:grid}
  .xn__steps.xn__mx{display:grid}
  .xn__il{display:none}
  .xn__rail{width:2.8em}
  .xn__main{gap:.8em;padding:.9em 1em}
}
@media (prefers-reduced-motion:reduce){
  .xn__tg,.xn__tg i,.xn__ring .fg,.xn__ck,.xn__tag,.xn__ok,.xn__seg2 i,.xn__type,.xn__chip--st span,.xn__steps span{transition:none}
}
.xp__vis{display:flex}
.xp__vis .xn{flex:1;align-self:stretch}
/* la vista previa ocupa todo el ancho del mockup (en móvil quedaba como una columna estrecha) */
.xn__pvwrap{display:flex}
.xn__pvwrap .xn__prev{flex:1 1 auto;width:100%;min-width:0}
@media (max-width:900px){
  .xn__pvwrap{min-height:7em}
  .xn__pvh{padding:1em 1.1em .6em}
  .xn__pvg i{height:2.4em}
  .xn__pvh b{height:.7em}
  .xn__pvh b.s{height:.5em}
  .xn__pvh u{width:5.5em;height:1.5em}
}
/* check central en la vista previa del producto */
.xn__prev{position:relative}
.xn__pvok{position:absolute;left:50%;top:54%;display:grid;place-items:center;width:3.2em;height:3.2em;border-radius:50%;background:var(--acc);color:var(--accfg);transform:translate(-50%,-50%) scale(.6);opacity:.35;box-shadow:0 0 0 .6em color-mix(in srgb,var(--acc) 12%,transparent),0 .8em 1.6em -.6em color-mix(in srgb,var(--acc) 60%,transparent);transition:transform .7s cubic-bezier(.2,.7,.2,1) .9s,opacity .5s .9s}
.xn__pvok svg{width:1.6em;height:1.6em;stroke-width:3;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.xp__p.is-active .xn__pvok{transform:translate(-50%,-50%) scale(1);opacity:1}
@media (prefers-reduced-motion:reduce){.xn__pvok{transition:none;transform:translate(-50%,-50%);opacity:1}}

/* ===== 07 · Filosofía de marca: manifiesto con horizonte «de lo que hoy funciona a tu visión» ===== */
#filosofia.mf{position:relative;overflow:hidden;padding:18vh 6vw 16vh;text-align:left}
.mf__orbits{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.mf__in{position:relative;z-index:1;max-width:1180px;margin-inline:auto}
#filosofia .eyebrow{margin-bottom:34px}
#filosofia .mf__h{max-width:15ch;margin:0;font-size:clamp(40px,6.6vw,96px);font-weight:300;letter-spacing:-.035em;line-height:1.03;color:var(--inv-fg)}
#filosofia .mf__h .w{color:color-mix(in srgb,var(--inv-fg) 16%,transparent);transition:color .6s ease}
#filosofia .mf__h .w.on{color:var(--inv-fg)}
#filosofia .mf__h .w--hl.on{color:var(--inv-acc)}
#filosofia .mf__h .w--dim.on{color:color-mix(in srgb,var(--inv-fg) 42%,transparent)}

.mf__line{--p:0;position:relative;height:120px;margin:72px 0 0;max-width:760px}
.mf__curve{position:absolute;inset:0 0 28px;width:100%;height:calc(100% - 28px);overflow:visible}
.mf__curve--v{display:none}
.mf__base,.mf__fill{fill:none;stroke-linecap:round}
.mf__base{stroke:color-mix(in srgb,var(--inv-fg) 16%,transparent);stroke-width:1}
.mf__fill{stroke:var(--inv-acc);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p))}
.mf__pt{position:absolute;display:flex;flex-direction:column;gap:12px}
.mf__pt i{display:block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:#0F1422;transition:background .5s,border-color .5s,box-shadow .5s}
.mf__pt b{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--inv-fg) 50%,transparent);white-space:nowrap;transition:color .5s}
.mf__pt--a{left:-7px;bottom:0;align-items:flex-start;flex-direction:column-reverse}
.mf__pt--a i{margin-bottom:-1px;background:var(--acc);border-color:var(--acc-2)}
.mf__pt--b{right:-7px;top:-7px;align-items:flex-end;flex-direction:column}
.mf__pt--b{top:0;transform:translateY(0)}
.mf__line.end .mf__pt--b i{background:var(--acc);border-color:var(--inv-acc);box-shadow:0 0 0 7px color-mix(in srgb,var(--acc) 18%,transparent)}
.mf__line.end .mf__pt--b b{color:var(--inv-acc)}
#filosofia .mf__p{margin:64px 0 0 auto;max-width:30ch;text-align:left;font-size:15px;line-height:1.7;color:color-mix(in srgb,var(--inv-fg) 55%,transparent)}

@media (max-width:900px){
  #filosofia.mf{padding:14vh 6vw 12vh}
  #filosofia .mf__h{max-width:none;font-size:clamp(34px,10.5vw,52px)}
  .mf__line{height:230px;max-width:none;margin-top:48px;padding-left:0}
  .mf__curve--h{display:none}
  .mf__curve--v{display:block;inset:6px auto 6px 0;width:90px;height:calc(100% - 12px)}
  .mf__pt--a{left:5px;top:-2px;bottom:auto;flex-direction:row;align-items:center;gap:20px}
  .mf__pt--b{right:auto;left:73px;top:auto;bottom:-2px;flex-direction:row;align-items:center;gap:20px}
  .mf__pt--a b{order:2}.mf__pt--b b{order:2}
  .mf__pt--a i{margin:0}
  #filosofia .mf__p{margin:44px 0 0}
}
@media (prefers-reduced-motion:reduce){.mf__h .w,.mf__pt i,.mf__pt b{transition:none}}

/* ===== Filosofía de marca: escena anclada. El revelado ocurre mientras la sección permanece a la vista ===== */
#filosofia.mf{position:relative;overflow:clip;min-height:260vh;padding:0}
#filosofia .mf__stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding:78px 6vw 40px;overflow:hidden}
#filosofia .mf__orbits{position:absolute;inset:0;width:100%;height:100%}
#filosofia .mf__in{width:100%}
#filosofia .mf__h{font-size:clamp(38px,min(6.4vw,10.5vh),92px)}
#filosofia .mf__line{margin-top:clamp(36px,6vh,72px)}
#filosofia .mf__p{margin-top:clamp(30px,5.5vh,60px)}
/* más color en las palabras atenuadas y en el texto de apoyo */
#filosofia .mf__h .w{color:color-mix(in srgb,var(--inv-fg) 20%,transparent)}
#filosofia .mf__h .w--dim.on{color:color-mix(in srgb,var(--inv-fg) 70%,transparent)}
#filosofia .mf__h .w--hl.on{color:#7DB4FF}
#filosofia .mf__p{color:color-mix(in srgb,var(--inv-fg) 72%,transparent);font-size:16px}
#filosofia .mf__pt b{color:color-mix(in srgb,var(--inv-fg) 62%,transparent)}
@media (max-width:900px){
  #filosofia.mf{min-height:240vh}
  #filosofia .mf__stage{padding:74px 6vw 28px}
  #filosofia .mf__h{font-size:clamp(32px,min(10.2vw,6.4vh),50px)}
  #filosofia .mf__line{height:min(210px,26vh);margin-top:clamp(24px,4vh,40px)}
  #filosofia .mf__p{margin-top:clamp(22px,3.5vh,40px);font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  #filosofia.mf{min-height:0;padding:16vh 6vw}
  #filosofia .mf__stage{position:static;height:auto;padding:0}
}

/* Implementación (desktop): mockup más alto para que la vista previa y el check se vean completos */
@media (min-width:901px){
  #como-funciona .xp__p--b .xp__vis{margin-top:-72px}
  #como-funciona .xp__p--b .xn--2{--H:35}
  #como-funciona .xp__p--b .xn__pvwrap{min-height:9em}
  #como-funciona .xp__p--b .xn__pvok{width:2.6em;height:2.6em;top:58%;box-shadow:0 0 0 .45em color-mix(in srgb,var(--acc) 12%,transparent),0 .6em 1.2em -.5em color-mix(in srgb,var(--acc) 55%,transparent)}
  #como-funciona .xp__p--b .xn__pvok svg{width:1.3em;height:1.3em}
}

/* Filosofía: la curva ocupa todo el contenedor y su trazado se calcula en JS entre los centros de los puntos */
#filosofia .mf__curve{inset:0;width:100%;height:100%}
#filosofia .mf__curve--v{inset:0}
@media (max-width:900px){#filosofia .mf__curve--v{inset:0;width:100%;height:100%}}

/* Indicador de verificación de las fases 2 y 3: insignia blanca, pequeña y flotante en la esquina de la vista previa */
#como-funciona .xn__pvok,#como-funciona .xp__p--b .xn__pvok{left:auto;right:.8em;top:.45em;width:1.9em;height:1.9em;border-radius:50%;background:var(--card);color:var(--acc);border:1px solid var(--info-l);transform:scale(.6);opacity:.35;box-shadow:0 .25em .7em -.2em color-mix(in srgb,var(--shadow) 28%,transparent),0 0 0 .2em rgba(255,255,255,.7)}
#como-funciona .xn__pvok svg,#como-funciona .xp__p--b .xn__pvok svg{width:1em;height:1em;stroke-width:3.2}
#como-funciona .xp__p.is-active .xn__pvok{transform:scale(1);opacity:1}
@media (prefers-reduced-motion:reduce){#como-funciona .xn__pvok{transform:none;opacity:1}}

/* ===== Mockups de «Modelo de funcionamiento» como video: el estado lo gobierna el script (clase .sc) ===== */
#como-funciona .xn{position:relative}
#como-funciona .xn .cur{z-index:30}
#como-funciona .xn.sc .xn__main{transition:opacity .5s ease}
#como-funciona .xn.sc.st-out .xn__main{opacity:0}
#como-funciona .xn.sc .xn__r.hov,#como-funciona .xn.sc .xn__tk.hov{background:var(--bg2)}
/* 1 · configuración */
#como-funciona .xn.sc .xn__tg{background:var(--line-strong)}
#como-funciona .xn.sc .xn__tg i{transform:none}
#como-funciona .xn.sc .xn__tg.on{background:var(--acc)}
#como-funciona .xn.sc .xn__tg.on i{transform:translateX(1.05em)}
#como-funciona .xn.sc .xn__type{max-width:none;transition:none;min-height:1em}
#como-funciona .xn.sc .xn__type:empty::before{content:attr(data-ph);color:var(--muted);font-weight:400}
#como-funciona .xn.sc .xn__in.typing .xn__type::after{content:"";display:inline-block;width:1px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--acc);animation:xnblink .7s steps(1) infinite}
#como-funciona .xn.sc .xn__in--ph.filled{color:var(--fg);font-weight:500}
#como-funciona .xn.sc .xn__sw i{transition:box-shadow .3s}
#como-funciona .xn.sc .xn__sw i:not(.sel){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--shadow) 8%,transparent)}
#como-funciona .xn.sc .xn__up{transition:background .4s,border-color .4s}
#como-funciona .xn.sc .xn__up.done{border-style:solid;border-color:var(--inv-acc);background:var(--acc-l)}
@keyframes xnblink{50%{opacity:0}}
/* 2 · implementación */
#como-funciona .xn.sc .xn__ring .fg{stroke-dashoffset:calc(100 - var(--rp,0));transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1)}
#como-funciona .xn.sc .xn__chip--st .a{opacity:1;transition-delay:0s}
#como-funciona .xn.sc .xn__chip--st .b{opacity:0;transition-delay:0s}
#como-funciona .xn.sc.st-done .xn__chip--st .a{opacity:0}
#como-funciona .xn.sc.st-done .xn__chip--st .b{opacity:1}
#como-funciona .xn.sc .xn__tk{color:var(--muted)}
#como-funciona .xn.sc .xn__tk .xn__ck{background:var(--card);border-color:var(--line-strong);color:transparent;transition-delay:0s}
#como-funciona .xn.sc .xn__tk .xn__tag{background:var(--g100);color:var(--muted);transition-delay:0s}
#como-funciona .xn.sc .xn__tk.on{color:var(--fg)}
#como-funciona .xn.sc .xn__tk.on .xn__ck{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
#como-funciona .xn.sc .xn__tk.on .xn__tag{background:var(--acc-l);color:var(--acc)}
#como-funciona .xn.sc .xn__seg2 i{background:var(--line);transition-delay:0s}
#como-funciona .xn.sc .xn__seg2 i.on{background:var(--acc)}
/* 3 · entrega */
#como-funciona .xn.sc .xn__steps span{background:var(--g100);color:var(--muted)}
#como-funciona .xn.sc .xn__steps span.on{background:var(--acc-l);color:var(--acc)}
#como-funciona .xn.sc .xn__ok{background:var(--g100);color:var(--muted);transition-delay:0s}
#como-funciona .xn.sc .xn__tr.on .xn__ok{background:var(--acc-l);color:var(--acc)}
#como-funciona .xn.sc .xn__tr{transition:background .3s}
#como-funciona .xn.sc .xn__done u{transition:transform .2s}
#como-funciona .xn.sc .xn__done u.press{transform:scale(.93)}
#como-funciona .xn.sc .xn__pvok{transform:scale(.6);opacity:0;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .4s}
#como-funciona .xn.sc.st-fin .xn__pvok{transform:scale(1);opacity:1}

/* Altura estándar de los tres mockups en desktop y cursor más ágil */
@media (min-width:901px){
  #como-funciona .xp__vis{margin-top:-72px}
  #como-funciona .xn{--H:35}
}
#como-funciona .xn .cur{transition:left .62s cubic-bezier(.45,0,.2,1),top .62s cubic-bezier(.45,0,.2,1),opacity .25s}

/* ===== Filosofía de marca: prueba con fondo blanco (para volver al oscuro, eliminar este bloque) ===== */
#filosofia.manifesto{background:var(--card);color:var(--fg)}
#filosofia .eyebrow{color:var(--acc)}
#filosofia .mf__h{color:var(--fg)}
#filosofia .mf__h .w{color:color-mix(in srgb,var(--shadow) 15%,transparent)}
#filosofia .mf__h .w.on{color:var(--fg)}
#filosofia .mf__h .w--hl.on{color:var(--acc)}
#filosofia .mf__h .w--dim.on{color:var(--text)}
#filosofia .mf__p{color:var(--text);font-size:17px}
#filosofia .mf__pt b{color:var(--text)}
#filosofia .mf__line.end .mf__pt--b b{color:var(--acc)}
#filosofia .mf__base{stroke:color-mix(in srgb,var(--shadow) 20%,transparent)}
#filosofia .mf__fill{stroke:var(--acc)}
#filosofia .mf__pt i{background:var(--card);border-color:color-mix(in srgb,var(--shadow) 40%,transparent)}
#filosofia .mf__pt--a i{background:var(--acc);border-color:var(--inv-acc)}
#filosofia .mf__line.end .mf__pt--b i{background:var(--acc);border-color:var(--inv-acc);box-shadow:0 0 0 7px color-mix(in srgb,var(--acc) 15%,transparent)}
#filosofia .mf__orbits circle[fill="none"]{stroke-opacity:.32}

/* Frase final: a la izquierda, bajo la línea, más grande y fuera de la zona de los botones flotantes (desktop) */
@media (min-width:901px){
  #filosofia .mf__stage{padding:84px 6vw 96px}
  #filosofia .mf__h{font-size:clamp(36px,min(6vw,9.2vh),88px)}
  #filosofia .mf__line{margin-top:clamp(28px,5vh,60px)}
  #filosofia .mf__p{margin:clamp(22px,3.8vh,40px) 0 0;max-width:36ch;font-size:clamp(19px,1.7vw,24px);line-height:1.5;color:var(--fg);padding-left:18px;border-left:2px solid var(--acc)}
}

/* Frase final en móvil: mismo estilo que en desktop */
@media (max-width:900px){
  #filosofia .mf__p{margin:clamp(20px,3.2vh,32px) 0 0;max-width:30ch;font-size:clamp(17px,4.7vw,20px);line-height:1.5;color:var(--fg);padding-left:14px;border-left:2px solid var(--acc);text-align:left}
}

/* Frase final: mismo estilo en todos los anchos (barra lateral y tamaño); se aplica sin depender de media queries */
#filosofia .mf__stage .mf__p{padding-left:16px;border-left:3px solid var(--acc);color:var(--fg);text-align:left;line-height:1.5;margin-left:0;margin-right:0}
@media (max-width:900px){
  #filosofia .mf__stage .mf__p{font-size:clamp(20px,5.8vw,26px);max-width:24ch}
}

/* ===== 08 · CTA final (rediseño; la clase anterior .cta chocaba con la de los mockups) ===== */
.cf__card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(48px,6vw,84px) clamp(28px,5vw,72px);border-radius:6px;background:linear-gradient(135deg,#0B0F1A 0%,var(--fg) 60%,#162033 100%);color:var(--inv-fg);box-shadow:0 40px 70px -46px color-mix(in srgb,var(--shadow) 60%,transparent)}
.cf__rings{position:absolute;right:-60px;top:-80px;width:min(560px,70%);height:auto;pointer-events:none}
.cf__h{position:relative;margin:0;max-width:14ch;font-size:clamp(32px,4vw,56px);font-weight:300;line-height:1.08;letter-spacing:-.025em;color:var(--inv-fg);text-align:left}
.cf__side{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.cf__p{margin:0;max-width:38ch;font-size:clamp(16px,1.25vw,18px);line-height:1.65;color:color-mix(in srgb,var(--inv-fg) 76%,transparent);text-align:left}
.cf__btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:12px 26px;border-radius:4px;background:var(--acc);color:var(--accfg);font-size:15px;font-weight:500;line-height:1.3;text-align:center;box-shadow:0 14px 28px -14px color-mix(in srgb,var(--acc) 80%,transparent);transition:transform .2s,background .2s,box-shadow .2s}
.cf__btn svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cf__btn:hover{background:var(--acc-hover);transform:translateY(-2px);box-shadow:0 18px 32px -14px color-mix(in srgb,var(--acc) 85%,transparent)}
.cf__btn:hover svg{transform:translateX(3px)}
@media (max-width:900px){
  .cf__card{grid-template-columns:1fr;gap:26px;padding:48px 24px 40px}
  .cf__h{max-width:12ch;font-size:clamp(32px,9.5vw,44px)}
  .cf__side{gap:24px;align-items:stretch}
  .cf__btn{width:100%}
  .cf__rings{right:-120px;top:-60px;width:420px}
}

/* CTA final: dos botones */
.cf__h{max-width:16ch;font-size:clamp(30px,3.6vw,50px)}
.cf__btns{display:flex;flex-wrap:wrap;gap:12px}
.cf__btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.32);box-shadow:none}
.cf__btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);box-shadow:none}
@media (max-width:900px){
  .cf__h{max-width:15ch;font-size:clamp(28px,8.4vw,40px)}
  .cf__btns{flex-direction:column}
  .cf__btns .cf__btn{width:100%}
}
@media (min-width:901px){
  .cf__btns{flex-direction:column;width:min(100%,300px)}
  .cf__btns .cf__btn{width:100%}
}

/* ===== 08 · CTA final · versión premium (banda completa) ===== */
.cp{position:relative;overflow:hidden;padding:clamp(88px,15vh,150px) 0 clamp(56px,9vh,88px);background:radial-gradient(120% 90% at 85% 0%,#17233A 0%,#0F1626 45%,#0A0E19 100%);color:var(--inv-fg)}
.cp__rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cp__in{position:relative}
.cp__h{margin:0;max-width:17ch;font-size:clamp(38px,5.6vw,80px);font-weight:300;line-height:1.04;letter-spacing:-.035em;color:var(--inv-fg);text-align:left}
.cp__h em{font-style:normal;color:var(--inv-acc)}
.cp__row{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-top:clamp(40px,7vh,72px);padding-top:clamp(28px,4vh,40px);border-top:1px solid rgba(255,255,255,.14)}
.cp__p{margin:0;max-width:42ch;font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:color-mix(in srgb,var(--inv-fg) 74%,transparent);text-align:left}
.cp__btns{display:flex;flex-wrap:wrap;gap:12px}
.cp__btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:12px 28px;border-radius:4px;background:var(--card);color:var(--fg);font-size:15px;font-weight:500;line-height:1.3;white-space:nowrap;transition:transform .2s,background .2s,box-shadow .2s,border-color .2s}
.cp__btn svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cp__btn:hover{transform:translateY(-2px);background:var(--acc-l);box-shadow:0 16px 30px -16px color-mix(in srgb,var(--inv-acc) 70%,transparent)}
.cp__btn:hover svg{transform:translateX(3px)}
.cp__btn--ghost{background:transparent;color:var(--inv-fg);border:1px solid rgba(255,255,255,.3)}
.cp__btn--ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.6);box-shadow:none}
.cp__perks{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(56px,10vh,96px) 0 0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.14)}
.cp__perks li{display:flex;flex-direction:column;gap:4px;padding:26px 0 0 28px;border-left:1px solid rgba(255,255,255,.14)}
.cp__perks li:first-child{padding-left:0;border-left:0}
.cp__perks b{font-size:15px;font-weight:500;color:var(--inv-fg)}
.cp__perks small{font-size:13.5px;color:color-mix(in srgb,var(--inv-fg) 55%,transparent)}
@media (max-width:900px){
  .cp{padding:84px 0 48px}
  .cp__h{max-width:13ch;font-size:clamp(34px,10.4vw,48px)}
  .cp__row{flex-direction:column;align-items:stretch;gap:28px;margin-top:36px}
  .cp__btns{flex-direction:column}
  .cp__btn{width:100%}
  .cp__perks{grid-template-columns:1fr;margin-top:44px}
  .cp__perks li,.cp__perks li:first-child{flex-direction:row;justify-content:space-between;align-items:baseline;padding:16px 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .cp__perks li:last-child{border-bottom:0}
}
.cp .cp__in{box-sizing:border-box;max-width:1180px;margin-inline:auto;padding-inline:6vw}
@media (min-width:1300px){.cp .cp__in{padding-inline:0}}

/* CTA final: sin aros, divisores ni barra de datos; fondo con dot grid */
.cp{padding:clamp(96px,16vh,160px) 0;background:radial-gradient(90% 80% at 80% 20%,#16233B 0%,#0F1626 55%,#0A0E19 100%)}
.cp::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,color-mix(in srgb,var(--inv-acc) 34%,transparent) 1.3px,transparent 1.7px);background-size:28px 28px;-webkit-mask-image:radial-gradient(ellipse 75% 85% at 82% 35%,#000 0%,rgba(0,0,0,.55) 45%,transparent 80%);mask-image:radial-gradient(ellipse 75% 85% at 82% 35%,#000 0%,rgba(0,0,0,.55) 45%,transparent 80%)}
.cp__row{border-top:0;padding-top:0;margin-top:clamp(36px,6vh,60px)}
@media (max-width:900px){
  .cp{padding:84px 0 72px}
  .cp::before{-webkit-mask-image:radial-gradient(ellipse 120% 70% at 60% 25%,#000 0%,rgba(0,0,0,.5) 50%,transparent 85%);mask-image:radial-gradient(ellipse 120% 70% at 60% 25%,#000 0%,rgba(0,0,0,.5) 50%,transparent 85%)}
}

/* CTA final centrada */
.cp .cp__h{max-width:18ch;margin-inline:auto;text-align:center}
.cp .cp__row{flex-direction:column;align-items:center;justify-content:center;gap:32px;text-align:center}
.cp .cp__p{max-width:46ch;margin-inline:auto;text-align:center}
.cp .cp__btns{justify-content:center}
.cp::before{-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 0%,rgba(0,0,0,.55) 45%,transparent 80%);mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000 0%,rgba(0,0,0,.55) 45%,transparent 80%)}
.cp{background:radial-gradient(80% 90% at 50% 40%,#16233B 0%,#0F1626 55%,#0A0E19 100%)}
@media (max-width:900px){
  .cp .cp__h{max-width:13ch}
  .cp .cp__row{align-items:stretch}
}

/* CTA: sin puntos detrás del texto, solo alrededor */
.cp::before{-webkit-mask-image:radial-gradient(ellipse 46% 54% at 50% 50%,transparent 72%,#000 100%);mask-image:radial-gradient(ellipse 46% 54% at 50% 50%,transparent 72%,#000 100%)}
@media (max-width:900px){
  .cp::before{-webkit-mask-image:radial-gradient(ellipse 80% 48% at 50% 50%,transparent 70%,#000 100%);mask-image:radial-gradient(ellipse 80% 48% at 50% 50%,transparent 70%,#000 100%)}
}

/* CTA: saltos de línea del titular solo en desktop */
.cp .cp__h{max-width:none}
@media (max-width:900px){.cp__br{display:none}.cp .cp__h{max-width:13ch}}

/* CTA en móvil: titular en tres renglones como en desktop y botones en una sola fila */
@media (max-width:900px){
  .cp__br{display:inline}
  .cp .cp__h{max-width:none;font-size:clamp(25px,8.5vw,42px);white-space:nowrap}
  .cp .cp__row{align-items:center}
  .cp .cp__btns{flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:8px;width:100%}
  .cp .cp__btns .cp__btn{width:auto;flex:0 1 auto;min-height:46px;padding:10px 14px;gap:8px;font-size:clamp(12.5px,3.5vw,14px)}
  .cp .cp__btn svg{width:15px;height:15px}
}
@media (max-width:900px){
  .cp .cp__btns{gap:6px}
  .cp .cp__btns .cp__btn{padding:10px 11px;gap:6px;font-size:clamp(11.5px,3.25vw,14px)}
  .cp .cp__btn svg{width:13px;height:13px}
}

/* CTA final: tarjeta oscura (versión restaurada) con textos actualizados */
.cf__h{max-width:15ch}
.cf__h em{font-style:normal;color:var(--inv-acc)}
@media (max-width:900px){
  .cf__h{max-width:none}
  .cf__side{align-items:stretch}
  .cf .cf__btns{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:6px;width:100%}
  .cf .cf__btns .cf__btn{width:auto;flex:1 1 auto;min-height:46px;padding:10px 10px;gap:6px;font-size:clamp(11.5px,3.25vw,14px)}
  .cf .cf__btn svg{width:13px;height:13px}
}

/* CTA tarjeta: más altura y botones en una sola fila en desktop */
@media (min-width:901px){
  .cf__card{min-height:clamp(440px,62vh,560px);grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);padding-block:clamp(72px,10vh,110px)}
  .cf .cf__btns{flex-direction:row;flex-wrap:nowrap;width:auto;gap:12px}
  .cf .cf__btns .cf__btn{width:auto;white-space:nowrap;padding:12px 22px}
}
@media (max-width:900px){
  .cf__card{min-height:440px;padding:72px 24px 64px;justify-content:center;align-content:center}
}

/* CTA tarjeta: eyebrow */
.cf__head{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.cf__eb{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--inv-acc);line-height:1.4}
@media (max-width:900px){.cf__head{gap:18px}.cf__eb{font-size:10.5px;letter-spacing:.16em}}

/* CTA tarjeta en móvil: ocupa la mayor parte de la pantalla */
@media (max-width:900px){
  #contacto.cf{padding-block:28px}
  #contacto .cf__card{min-height:clamp(540px,calc(100svh - 120px),780px);padding:64px 24px;align-content:center;gap:36px}
}

/* CTA tarjeta: patrón orbital de fondo (como en Filosofía de marca), desktop y móvil */
#contacto .cf__rings{position:absolute;inset:0;right:auto;top:0;width:100%;height:100%;max-width:none;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
@media (max-width:900px){
  #contacto .cf__rings{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%);mask-image:linear-gradient(180deg,transparent 0%,#000 55%)}
}

/* Continuidad del patrón orbital: los mismos círculos de «Filosofía de marca» siguen hacia abajo, dentro de la sección CTA */
#contacto.cf{position:relative}
#contacto .cf__cont{position:absolute;left:0;right:0;top:0;height:100vh;height:100svh;overflow:hidden;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
#contacto .cf__orb{position:absolute;left:0;top:-100vh;top:-100svh;width:100%;height:100vh;height:100svh;overflow:visible}
#contacto .cf__orb circle[fill="none"]{stroke-opacity:.32}
#contacto .cf .wrap,#contacto .wrap{position:relative;z-index:1}

/* CTA tarjeta: fondo azul de marca, liso y sin aros dentro */
#contacto .cf__card{background:linear-gradient(135deg,var(--acc) 0%,var(--acc-hover) 100%);box-shadow:0 40px 70px -40px color-mix(in srgb,var(--acc-hover) 70%,transparent)}
#contacto .cf__card .cf__rings{display:none}
#contacto .cf__eb{color:#BFDBFE}
#contacto .cf__h em{color:#DBEAFE}
#contacto .cf__p{color:color-mix(in srgb,var(--inv-fg) 88%,transparent)}
#contacto .cf__btn:not(.cf__btn--ghost){background:var(--card);color:var(--info);box-shadow:0 14px 28px -14px rgba(10,20,60,.55)}
#contacto .cf__btn:not(.cf__btn--ghost):hover{background:var(--acc-l);box-shadow:0 18px 32px -14px rgba(10,20,60,.6)}
#contacto .cf__btn--ghost{border-color:rgba(255,255,255,.55);color:var(--inv-fg)}
#contacto .cf__btn--ghost:hover{background:rgba(255,255,255,.12);border-color:var(--card)}

/* ===== CTA tarjeta azul · refinamiento premium ===== */
/* 1 · luz suave y textura sutil en lugar de dibujos */
#contacto .cf__card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(60% 90% at 88% -10%,color-mix(in srgb,var(--inv-acc) 55%,transparent) 0%,color-mix(in srgb,var(--acc-2) 18%,transparent) 40%,transparent 70%),radial-gradient(45% 70% at 0% 110%,rgba(10,30,110,.45) 0%,transparent 70%)}
#contacto .cf__card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s;background:radial-gradient(circle 240px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2) 0%,rgba(255,255,255,.06) 55%,transparent 75%)}
#contacto .cf__card.lit::after{opacity:1}
#contacto .cf__head,#contacto .cf__side{z-index:1}
/* 2 · titular más grande y más aire */
@media (min-width:901px){
  #contacto .cf__card{grid-template-columns:minmax(0,1.2fr) minmax(0,.95fr)}
  #contacto .cf__h{max-width:none;font-size:clamp(36px,3.9vw,56px);line-height:1.06;letter-spacing:-.03em}
}
@media (max-width:900px){#contacto .cf__h{font-size:clamp(32px,9.2vw,44px);line-height:1.08}}
/* 3 · un botón dominante y una acción discreta en texto */
#contacto .cf__btn--ghost{min-height:0;padding:12px 4px;border:0;background:transparent;box-shadow:none;border-radius:0;gap:8px;position:relative}
#contacto .cf__btn--ghost::after{content:"→";transition:transform .2s}
#contacto .cf__btn--ghost span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .25s}
#contacto .cf__btn--ghost:hover{background:transparent;transform:none}
#contacto .cf__btn--ghost:hover span{background-size:100% 1px}
#contacto .cf__btn--ghost:hover::after{transform:translateX(3px)}
@media (max-width:900px){
  #contacto .cf .cf__btns,#contacto .cf__btns{justify-content:flex-start;align-items:center;gap:18px}
  #contacto .cf__btns .cf__btn:not(.cf__btn--ghost){flex:0 0 auto;padding:10px 16px}
  #contacto .cf__btns .cf__btn--ghost{flex:0 0 auto;padding:10px 2px}
}
@media (max-width:900px){
  #contacto .cf__btns{gap:14px;flex-wrap:nowrap}
  #contacto .cf__btns .cf__btn:not(.cf__btn--ghost){padding:10px 13px;font-size:clamp(11.5px,3.2vw,13.5px)}
  #contacto .cf__btns .cf__btn--ghost{padding:10px 0;font-size:clamp(11.5px,3.2vw,13.5px)}
  #contacto .cf__btn--ghost::after{display:none}
}

/* CTA: descripción con barra lateral (como en Filosofía) y mejor distribución en móvil */
#contacto .cf__p{padding-left:18px;border-left:3px solid var(--card);color:color-mix(in srgb,var(--inv-fg) 92%,transparent);line-height:1.55}
@media (min-width:901px){#contacto .cf__p{font-size:clamp(17px,1.5vw,20px)}}
@media (max-width:900px){
  #contacto .cf__card{align-content:space-between;padding:72px 24px 56px}
  #contacto .cf__p{font-size:clamp(19px,5.4vw,22px);max-width:none;padding-left:16px}
  #contacto .cf__side{gap:36px}
}

/* ===== CTA tarjeta: versión final (azul marino con aros, barra azul y botones sólido/contorno) ===== */
#contacto .cf__card{background:linear-gradient(170deg,#040E30 0%,#041A52 55%,#030F33 100%);box-shadow:0 40px 70px -44px rgba(4,26,82,.85)}
#contacto .cf__card::before{background:radial-gradient(55% 38% at 92% 0%,color-mix(in srgb,var(--acc) 65%,transparent) 0%,color-mix(in srgb,var(--acc) 20%,transparent) 45%,transparent 75%),radial-gradient(60% 40% at 0% 100%,color-mix(in srgb,var(--acc) 18%,transparent) 0%,transparent 70%)}
#contacto .cf__card .cf__rings{display:block;-webkit-mask-image:none;mask-image:none}
#contacto .cf__eb{color:#3B82F6}
#contacto .cf__h em{color:var(--inv-acc)}
#contacto .cf__p{border-left-color:var(--acc-top);color:color-mix(in srgb,var(--inv-fg) 90%,transparent)}
#contacto .cf__btn:not(.cf__btn--ghost){background:#1D5BFF;color:var(--inv-fg);box-shadow:0 14px 28px -14px rgba(29,91,255,.8)}
#contacto .cf__btn:not(.cf__btn--ghost):hover{background:#2F6BFF;box-shadow:0 18px 32px -14px rgba(29,91,255,.9)}
#contacto .cf__btn--ghost{min-height:52px;padding:12px 24px;border:1px solid rgba(255,255,255,.3);border-radius:4px;color:var(--inv-fg);background:transparent;justify-content:center}
#contacto .cf__btn--ghost::after{display:none}
#contacto .cf__btn--ghost span{background:none;padding-bottom:0}
#contacto .cf__btn--ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.6)}
@media (max-width:900px){
  #contacto .cf__card{align-content:center;gap:44px}
  #contacto .cf__btns{flex-direction:column;align-items:stretch;gap:12px;width:100%}
  #contacto .cf__btns .cf__btn,#contacto .cf__btns .cf__btn:not(.cf__btn--ghost),#contacto .cf__btns .cf__btn--ghost{width:100%;flex:none;min-height:52px;padding:12px 22px;font-size:15px}
  #contacto .cf__btn:not(.cf__btn--ghost){justify-content:space-between}
  #contacto .cf__btn svg{width:18px;height:18px}
}

/* ===== CTA tarjeta: sin fondos decorativos; azul liso + dot grid estratégico en esquinas opuestas ===== */
#contacto .cf__card{background:#0A2468;box-shadow:0 40px 70px -44px rgba(10,36,104,.8)}
#contacto .cf__card .cf__rings{display:none}
#contacto .cf__card::after{display:none}
#contacto .cf__card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb,var(--inv-acc) 50%,transparent) 1.3px,transparent 1.8px) 0 0/26px 26px;-webkit-mask-image:radial-gradient(ellipse 36% 62% at 100% 0%,#000 0%,rgba(0,0,0,.5) 50%,transparent 100%),radial-gradient(ellipse 36% 62% at 0% 100%,#000 0%,rgba(0,0,0,.5) 50%,transparent 100%);mask-image:radial-gradient(ellipse 36% 62% at 100% 0%,#000 0%,rgba(0,0,0,.5) 50%,transparent 100%),radial-gradient(ellipse 36% 62% at 0% 100%,#000 0%,rgba(0,0,0,.5) 50%,transparent 100%)}
@media (max-width:900px){
  #contacto .cf__card::before{-webkit-mask-image:radial-gradient(ellipse 70% 24% at 100% 0%,#000 0%,rgba(0,0,0,.5) 50%,transparent 100%),radial-gradient(ellipse 70% 20% at 0% 100%,#000 0%,rgba(0,0,0,.5) 50%,transparent 100%);mask-image:radial-gradient(ellipse 70% 24% at 100% 0%,#000 0%,rgba(0,0,0,.5) 50%,transparent 100%),radial-gradient(ellipse 70% 20% at 0% 100%,#000 0%,rgba(0,0,0,.5) 50%,transparent 100%)}
}

/* CTA: descripción sin barra lateral */
#contacto .cf__p{border-left:0;padding-left:0}

/* CTA: descripción con más presencia (tamaño, blanco pleno e interlineado amplio) */
#contacto .cf__p{color:var(--inv-fg);font-weight:300;line-height:1.65;letter-spacing:-.005em}
@media (min-width:901px){#contacto .cf__p{font-size:clamp(18px,1.6vw,22px);max-width:34ch}}
@media (max-width:900px){#contacto .cf__p{font-size:clamp(20px,5.8vw,24px);line-height:1.6}}

/* CTA móvil: contenido de los botones centrado */
@media (max-width:900px){
  #contacto .cf__btns .cf__btn,#contacto .cf__btn:not(.cf__btn--ghost),#contacto .cf__btn--ghost{justify-content:center;text-align:center;gap:10px}
}


/* Footer: dot grid estratégico en esquinas opuestas (arriba a la derecha y abajo a la izquierda), muy tenue para no competir con el texto */
.footer{position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle,color-mix(in srgb,var(--inv-acc) 34%,transparent) 1.2px,transparent 1.7px) 0 0/26px 26px;-webkit-mask-image:radial-gradient(ellipse 42% 60% at 100% 0%,#000 0%,rgba(0,0,0,.45) 50%,transparent 100%),radial-gradient(ellipse 34% 55% at 0% 100%,#000 0%,rgba(0,0,0,.45) 50%,transparent 100%);mask-image:radial-gradient(ellipse 42% 60% at 100% 0%,#000 0%,rgba(0,0,0,.45) 50%,transparent 100%),radial-gradient(ellipse 34% 55% at 0% 100%,#000 0%,rgba(0,0,0,.45) 50%,transparent 100%)}
.footer > *{position:relative;z-index:1}
@media (max-width:900px){
  .footer::before{-webkit-mask-image:radial-gradient(ellipse 80% 22% at 100% 0%,#000 0%,rgba(0,0,0,.45) 50%,transparent 100%),radial-gradient(ellipse 80% 20% at 0% 100%,#000 0%,rgba(0,0,0,.45) 50%,transparent 100%);mask-image:radial-gradient(ellipse 80% 22% at 100% 0%,#000 0%,rgba(0,0,0,.45) 50%,transparent 100%),radial-gradient(ellipse 80% 20% at 0% 100%,#000 0%,rgba(0,0,0,.45) 50%,transparent 100%)}
}

/* Eyebrows largos: una sola línea en móvil */
@media (max-width:900px){
  .eyebrow{font-size:10.5px;letter-spacing:.12em;white-space:nowrap}
}

/* Titular del hero: mismo peso ligero que el resto de los títulos */
.hero h1,.hero h1 em{font-weight:300}

/* Indicador «Continúa desplazándote» (Filosofía de marca e Integración en tu negocio) */
.sd{position:fixed;left:50%;bottom:26px;z-index:60;display:flex;align-items:center;gap:10px;padding:9px 16px 9px 18px;border-radius:999px;background:color-mix(in srgb,var(--card) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--shadow) 8%,transparent);box-shadow:0 10px 30px -16px color-mix(in srgb,var(--shadow) 35%,transparent);color:var(--text);pointer-events:none;opacity:0;transform:translate(-50%,10px);transition:opacity .45s ease,transform .45s ease}
.sd.on{opacity:1;transform:translate(-50%,0)}
.sd__t{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.sd__a{width:16px;height:16px;fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:sdbob 1.8s ease-in-out infinite}
@keyframes sdbob{0%,100%{transform:translateY(-2px);opacity:.55}50%{transform:translateY(3px);opacity:1}}
@media (max-width:900px){.sd{bottom:20px;padding:8px 14px 8px 16px}.sd__t{font-size:10px;letter-spacing:.14em}}
@media (prefers-reduced-motion:reduce){.sd{display:none}}
/* móvil: el acordeón anclado deja espacio al indicador de continuidad */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  #como-funciona .xp__list{height:calc(100vh - 128px);height:calc(100svh - 128px)}
}
@media (max-width:900px){.sd{bottom:12px}}

/* Indicador más visible: cápsula grafito de alto contraste, texto más grande y flecha azul clara */
.sd{bottom:14px;gap:12px;padding:12px 20px 12px 24px;background:color-mix(in srgb,var(--shadow) 94%,transparent);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px -14px color-mix(in srgb,var(--shadow) 55%,transparent),0 0 0 6px color-mix(in srgb,var(--acc) 12%,transparent);color:var(--inv-fg);-webkit-backdrop-filter:none;backdrop-filter:none}
.sd__t{font-size:12px;letter-spacing:.14em;font-weight:500;color:var(--inv-fg)}
.sd__a{width:20px;height:20px;stroke:var(--inv-acc);stroke-width:2.2;animation:sdbob 1.5s ease-in-out infinite}
@keyframes sdbob{0%,100%{transform:translateY(-3px);opacity:.6}50%{transform:translateY(4px);opacity:1}}
@media (max-width:900px){.sd{bottom:12px;padding:11px 16px 11px 20px}.sd__t{font-size:11px;letter-spacing:.12em}.sd__a{width:18px;height:18px}}

/* Announcement bar sobre la navegación */
.ann{background:#0B1226;color:var(--inv-fg);text-align:center;padding:9px 6vw;border-bottom:1px solid rgba(255,255,255,.08)}
.ann p{margin:0;font-size:12px;font-weight:400;letter-spacing:.06em;line-height:1.45}
.ann__dot{display:inline-block;margin:0 12px;color:var(--inv-acc);font-weight:600}
@media (max-width:900px){.ann{padding:8px 16px}.ann p{font-size:11px;letter-spacing:.04em}.ann__dot{margin:0 8px}}

/* Integración: trazado progresivo de las conexiones hacia el nodo central */
.merge__lines .mk{fill:none;stroke:var(--inv-fg);stroke-width:12;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.45,0,.2,1) .15s}
.merge.is-drawn .mk{stroke-dashoffset:0}
.merge__lines .ln__dot{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s cubic-bezier(.2,.8,.2,1) 1.45s}
.merge.is-drawn .ln__dot{transform:scale(1)}
.merge.is-drawn .merge__node{animation:mnode 1.1s ease 1.55s 1 both}
@keyframes mnode{0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(37,99,235,0))}40%{transform:scale(1.2);filter:drop-shadow(0 0 10px rgba(37,99,235,.55))}100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(37,99,235,0))}}
@media (prefers-reduced-motion:reduce){.merge__lines .mk{stroke-dashoffset:0;transition:none}.merge__lines .ln__dot{transform:none;transition:none}.merge.is-drawn .merge__node{animation:none}}

/* Conexiones tipo circuito: las laterales llegan en ángulo recto al eje central, que continúa hasta el nodo */
.merge__lines .mk2{transition-duration:.45s;transition-delay:1.65s}
.merge__lines .ln__dot{transition-delay:2.1s}
.merge.is-drawn .merge__node{animation-delay:2.2s}
@media (prefers-reduced-motion:reduce){.merge__lines .mk2{transition:none}}

/* Conexiones de integración: trazo continuo */
.merge__lines .ln path{stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}

/* Líneas más delgadas y punto final redondo (sin deformarse con el ancho) */
.merge__lines .ln path{stroke-width:1.1}
.merge__lines .ln path.ln__dot{stroke:var(--acc);stroke-width:8;stroke-linecap:round;vector-effect:non-scaling-stroke;transform:none;opacity:0;transition:opacity .4s ease 2.1s}
.merge.is-drawn .merge__lines .ln path.ln__dot{opacity:1}
@media (max-width:900px){.merge__lines .ln path{stroke-width:1}.merge__lines .ln path.ln__dot{stroke-width:7}}
@media (prefers-reduced-motion:reduce){.merge__lines .ln path.ln__dot{opacity:1;transition:none}}

/* Footer: columnas de información (compras, legal, privacidad y soporte) */
.footer__grid{grid-template-columns:1.6fr 1fr;border-bottom:0;padding-bottom:40px}
.footer__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:44px 0 48px;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.footer .fc__t{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:17px;font-weight:500;letter-spacing:-.005em;text-transform:none;color:var(--inv-fg)}
.fc__i{flex:none;width:22px;height:22px;fill:none;stroke:#CBD5E1;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fc__d{margin:0 0 22px;padding-left:34px;max-width:30ch;font-size:15px;line-height:1.55;color:var(--muted)}
.footer .fc ul{padding-left:34px}
.footer .fc li{margin-bottom:12px;font-size:15px;line-height:1.45}
@media (max-width:1100px){.footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 32px}}
@media (max-width:900px){
  .footer__grid{grid-template-columns:1fr}
}
@media (max-width:600px){.footer__cols{grid-template-columns:1fr;gap:36px}}

/* Footer: títulos de columna con el estilo anterior (etiqueta en mayúsculas, azul y sin ícono) */
.footer .fc__t{display:block;margin:0 0 20px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--acc-dark)}
.fc__i{display:none}
.fc__d,.footer .fc ul{padding-left:0}
.footer .fc__t{margin-bottom:22px}

/* Footer: cinco columnas en una fila (Enlaces + las cuatro de información) con tipografía más compacta */
.footer__grid{grid-template-columns:1fr;padding-bottom:36px}
.footer__cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.footer .fc__t{font-size:11px;letter-spacing:.18em;margin-bottom:20px}
.footer .fc li{margin-bottom:10px;font-size:13.5px;line-height:1.45}
@media (max-width:1100px){.footer__cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}}
@media (max-width:700px){.footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.footer__cols{grid-template-columns:1fr;gap:30px}}

/* ===== Footer · rediseño premium tecnológico ===== */
.footer{background:linear-gradient(180deg,var(--inv-bg) 0%,#0E1526 55%,#090E1B 100%);padding:96px 6vw 0;color:var(--inv-fg)}
.footer::after{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;pointer-events:none;z-index:2;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc-2) 85%,transparent) 50%,transparent);box-shadow:0 0 46px 6px color-mix(in srgb,var(--acc) 28%,transparent)}
.footer .wrap{max-width:1180px;margin-inline:auto}
.ft__top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding-bottom:56px}
.ft__brand .logo{display:inline-block}
.ft__brand p{margin:22px 0 0;max-width:46ch;font-size:15px;line-height:1.7;color:#9AA4B5}
.ft__cta{display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border:1px solid color-mix(in srgb,var(--inv-acc) 35%,transparent);border-radius:4px;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--inv-fg);font-size:14px;font-weight:500;letter-spacing:.01em;white-space:nowrap;transition:background .25s,border-color .25s,transform .25s,box-shadow .25s}
.ft__cta svg,.ft__up svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.ft__cta:hover{background:var(--acc);border-color:var(--acc);transform:translateY(-2px);box-shadow:0 18px 34px -16px color-mix(in srgb,var(--acc) 90%,transparent)}
.ft__cta:hover svg{transform:translateX(3px)}
.footer .ft__panel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:38px 34px;border:1px solid rgba(255,255,255,.09);border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -50px color-mix(in srgb,var(--shadow) 70%,transparent)}
.ft__panel .fc{padding:0 24px;border-left:1px solid rgba(255,255,255,.08)}
.ft__panel .fc:first-child{padding-left:0;border-left:0}
.ft__panel .fc:last-child{padding-right:0}
.footer .fc__t{display:flex;align-items:center;gap:10px;margin:0 0 22px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--inv-acc)}
.footer .fc__t::before{content:"";flex:none;width:5px;height:5px;background:var(--acc-top);box-shadow:0 0 10px 1px color-mix(in srgb,var(--acc-top) 90%,transparent)}
.footer .fc ul{padding:0;margin:0;list-style:none}
.footer .fc li{margin-bottom:11px;font-size:13.5px;line-height:1.45}
.footer .fc li a{display:inline-block;color:#A9B3C4;transition:color .2s,transform .2s}
.footer .fc li a:hover{color:var(--inv-fg);transform:translateX(4px)}
.ft__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 0 22px}
.footer .footer__copy{margin:0;padding:0;font-size:12px;letter-spacing:.04em;color:#7B8599}
.ft__up{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;font-size:12px;letter-spacing:.06em;color:#A9B3C4;transition:color .2s,border-color .2s}
.ft__up:hover{color:var(--inv-fg);border-color:color-mix(in srgb,var(--acc-2) 70%,transparent)}
.ft__up:hover svg{transform:translateY(-2px)}
.ft__mark{position:relative;z-index:1;margin:6px 0 0;text-align:center;font-size:clamp(70px,17.4vw,270px);line-height:.8;font-weight:700;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap;user-select:none;overflow:hidden;height:.62em;color:transparent}
.ft__mark span,.ft__mark i{background:linear-gradient(180deg,color-mix(in srgb,var(--inv-acc) 34%,transparent) 0%,color-mix(in srgb,var(--acc-top) 9%,transparent) 58%,transparent 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ft__mark i{font-style:normal;font-weight:200;letter-spacing:-.03em;margin-left:.04em}
@media (max-width:1100px){
  .footer .ft__panel{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 0;padding:32px 28px}
  .ft__panel .fc:nth-child(3n+1){padding-left:0;border-left:0}
  .ft__panel .fc{padding:0 22px}
}
@media (max-width:900px){
  .footer{padding:72px 6vw 0}
  .ft__top{flex-direction:column;align-items:flex-start;gap:28px;padding-bottom:40px}
  .ft__cta{width:100%;justify-content:center}
}
@media (max-width:700px){
  .footer .ft__panel{grid-template-columns:repeat(2,minmax(0,1fr));padding:28px 22px;gap:30px 0}
  .ft__panel .fc,.ft__panel .fc:last-child{padding:0 16px;border-left:1px solid rgba(255,255,255,.08)}
  .ft__panel .fc:nth-child(odd){padding-left:0;border-left:0}
  .ft__panel .fc:nth-child(even){padding-right:0}
  .ft__bar{flex-direction:column;align-items:flex-start;gap:16px}
}
@media (max-width:440px){
  .footer .ft__panel{grid-template-columns:1fr}
  .ft__panel .fc,.ft__panel .fc:nth-child(even),.ft__panel .fc:nth-child(odd){padding:0;border-left:0}
}
.ft__mark{font-size:clamp(56px,13.2vw,210px)}
@media (min-width:1101px){
  .footer .fc__t{align-items:flex-start;min-height:2.7em;margin-bottom:12px;line-height:1.4}
  .footer .fc__t::before{margin-top:.38em}
}

/* Footer: títulos de columna sin marcador */
.footer .fc__t::before{display:none}
.footer .fc__t{gap:0}

/* ===== Selector de idioma (premium) ===== */
.lang{position:relative;flex:none}
.lang__btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 14px;border:1px solid color-mix(in srgb,var(--shadow) 12%,transparent);border-radius:999px;background:color-mix(in srgb,var(--card) 70%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--fg);font:inherit;font-size:12px;font-weight:500;letter-spacing:.14em;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.lang__btn:hover,.lang.is-open .lang__btn{border-color:color-mix(in srgb,var(--acc) 55%,transparent);box-shadow:0 8px 24px -14px color-mix(in srgb,var(--acc) 55%,transparent);background:var(--card)}
.lang__btn:focus-visible,.lang__menu li:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.lang__g{width:17px;height:17px;fill:none;stroke:var(--acc);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lang__c{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .25s}
.lang.is-open .lang__c{transform:rotate(180deg)}
.lang__menu{position:absolute;top:calc(100% + 12px);inset-inline-end:0;z-index:50;min-width:232px;margin:0;padding:8px;list-style:none;background:color-mix(in srgb,var(--card) 96%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid color-mix(in srgb,var(--shadow) 8%,transparent);border-radius:12px;box-shadow:0 28px 70px -24px color-mix(in srgb,var(--shadow) 40%,transparent),0 2px 6px color-mix(in srgb,var(--shadow) 5%,transparent);animation:langin .22s cubic-bezier(.2,.8,.2,1)}
.lang__menu[hidden]{display:none}
@keyframes langin{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.lang__menu li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;color:var(--text);cursor:pointer;transition:background .15s,color .15s}
.lang__menu li:hover,.lang__menu li:focus{background:var(--acc-l);color:var(--fg);outline:0}
.lang__code{display:inline-grid;place-items:center;width:34px;height:24px;border-radius:6px;background:var(--g100);color:var(--text);font-size:11px;font-weight:600;letter-spacing:.1em}
.lang__name{flex:1;font-size:15px;font-weight:400;color:var(--fg)}
.lang__k{width:16px;height:16px;fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.lang__menu li[aria-selected=true] .lang__code{background:var(--acc);color:var(--accfg)}
.lang__menu li[aria-selected=true] .lang__k{opacity:1}
.lang-seg{display:inline-flex;gap:4px;padding:4px;margin-bottom:22px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.lang-seg button{min-width:58px;height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:500;letter-spacing:.1em;cursor:pointer;transition:background .2s,color .2s}
.lang-seg button[aria-pressed=true]{background:var(--acc);color:var(--accfg)}
@media (max-width:900px){.lang{display:none}}
@media (min-width:901px){.lang-seg{display:none}}

/* ===== Árabe (RTL) y ajustes de dirección ===== */
html[lang=ar] body,html[lang=ar] button,html[lang=ar] input,html[lang=ar] textarea{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
html[lang=ar] *:not(svg):not(svg *){letter-spacing:0!important;text-transform:none!important}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] .mf__h{line-height:1.3!important}
html[lang=ar] .hero h1{line-height:1.25!important}
html[lang=ar] .lang__code,html[lang=ar] .lang-seg button{letter-spacing:.06em!important}
html[lang=ar] .lang__name{font-size:16px}
html[dir=rtl] .btn--hero .ic,html[dir=rtl] .menu__nav .ic,html[dir=rtl] .cf__btn svg,html[dir=rtl] .ft__cta svg{transform:scaleX(-1)}
/* maquetas y piezas de composición física se mantienen en LTR para no romper su geometría */
html[dir=rtl] .eco__stage,html[dir=rtl] .show__frame,html[dir=rtl] .xn,html[dir=rtl] .mock,html[dir=rtl] .xp,html[dir=rtl] .mf__line,html[dir=rtl] .bm__vis,html[dir=rtl] .merge__lines,html[dir=rtl] .ft__mark{direction:ltr}
html[dir=rtl] .xp__in,html[dir=rtl] .show__frame .cn{direction:ltr}
html[dir=rtl] .xp__t,html[dir=rtl] .xp__in p{direction:rtl;text-align:right}
html[dir=rtl] .ann,html[dir=rtl] .footer{direction:rtl}

/* Banderas del selector de idioma */
.flag{flex:none;width:24px;height:16px;border-radius:3px;box-shadow:0 0 0 1px color-mix(in srgb,var(--shadow) 14%,transparent),0 1px 2px color-mix(in srgb,var(--shadow) 12%,transparent);overflow:hidden}
.lang__fl{width:22px;height:15px}
.lang__btn{gap:9px;padding:0 12px 0 12px}
.lang__menu li .flag{order:1}
.lang__menu li .lang__name{order:2}
.lang__menu li .lang__code{order:3;width:auto;height:auto;padding:0;background:transparent;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.1em}
.lang__menu li .lang__k{order:4}
.lang__menu li[aria-selected=true] .lang__code{background:transparent;color:var(--acc)}
.lang__menu li[aria-selected=true]{background:var(--acc-l)}
.lang-seg button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.lang-seg .flag{width:20px;height:13px}

/* Modelo de adquisición en árabe: la línea de progreso sigue a los nodos (a la derecha) y el texto entra desde el otro lado */
html[dir=rtl] .acq__path::before,html[dir=rtl] .acq__path::after{left:auto;right:11px}
html[dir=rtl] .acq__txt{transform:translateX(-8px)}
html[dir=rtl] .acq__step.on .acq__txt{transform:none}
html[dir=rtl] .acq__step.is-final .acq__node{margin:-3px -3px 0 0}

/* Carrusel de beneficios en árabe: la pista se calcula de izquierda a derecha, así que el carrusel se mantiene en LTR y solo los textos se leen en RTL */
html[dir=rtl] .bxc{direction:ltr}
html[dir=rtl] .bxc h3,html[dir=rtl] .bxc p,html[dir=rtl] .bxc .bx__go span,html[dir=rtl] .bxc__tog button{unicode-bidi:plaintext;text-align:start}

/* Enfoque de producto: escenas de los mockups más rápidas (cursor, clics y transiciones de estado) */
#productos .cur{transition:left .4s cubic-bezier(.45,0,.2,1),top .4s cubic-bezier(.45,0,.2,1),opacity .2s}
#productos .cur.click::after{animation-duration:.35s}
#productos .mock *,#productos .mock *::before,#productos .mock *::after{transition-duration:.22s!important;transition-delay:0s!important}
#productos .mock .cur{transition:left .4s cubic-bezier(.45,0,.2,1),top .4s cubic-bezier(.45,0,.2,1),opacity .2s!important;transition-delay:0s!important}

/* ===== Cursor premium ===== */
.pc{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;opacity:0;will-change:transform}
.pc{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 2px rgba(255,255,255,.85);transition:opacity .25s,width .25s,height .25s,background .25s}
.pc--ring{width:38px;height:38px;border:1.5px solid color-mix(in srgb,var(--acc-top) 65%,transparent);background:color-mix(in srgb,var(--acc) 4%,transparent);box-shadow:none;transition:opacity .25s,width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s}
html.has-pc .pc{opacity:1}
html.has-pc,html.has-pc *{cursor:none!important}
html.pc-hot .pc{width:0;height:0;opacity:0}
html.pc-hot .pc--ring{width:62px;height:62px;opacity:1;background:color-mix(in srgb,var(--acc) 12%,transparent);border-color:color-mix(in srgb,var(--acc) 90%,transparent)}
html.pc-down .pc--ring{width:30px;height:30px;background:color-mix(in srgb,var(--acc) 20%,transparent)}
html.pc-down.pc-hot .pc--ring{width:50px;height:50px}
html.pc-text .pc{width:2px;height:24px;border-radius:2px;opacity:1;box-shadow:none}
html.pc-text .pc--ring{opacity:0}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.pc{display:none}}

/* Cursor: imán sobre botones y etiqueta «Ver» sobre tarjetas */
html.pc-morph .pc{width:0;height:0;opacity:0}
html.pc-morph .pc--ring{opacity:1;background:color-mix(in srgb,var(--acc) 10%,transparent);border:1.5px solid color-mix(in srgb,var(--acc) 90%,transparent);transition:opacity .18s,width .16s cubic-bezier(.2,.8,.2,1),height .16s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s,border-radius .16s}
html.pc-label .pc{width:0;height:0;opacity:0}
html.pc-label .pc--ring{width:84px;height:84px;opacity:1;background:var(--acc);border-color:var(--acc);box-shadow:0 16px 36px -12px color-mix(in srgb,var(--acc) 70%,transparent)}
.pc__lb{position:absolute;inset:0;display:grid;place-items:center;font:500 12px/1 var(--sans,system-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--inv-fg);opacity:0;transform:scale(.7);transition:opacity .2s,transform .25s}
html.pc-label .pc__lb{opacity:1;transform:none}
html[lang=ar] .pc__lb{letter-spacing:0;text-transform:none;font-size:14px}
html.pc-down.pc-label .pc--ring{width:72px;height:72px}
html.pc-down.pc-morph .pc--ring{background:color-mix(in srgb,var(--acc) 20%,transparent)}

/* ===== Barra de navegación: contacto + idioma unificados en una sola cápsula ===== */
.nav__tools{display:flex;align-items:center;gap:6px;flex:none;padding:4px;border:1px solid color-mix(in srgb,var(--shadow) 12%,transparent);border-radius:999px;background:color-mix(in srgb,var(--card) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 28px -20px color-mix(in srgb,var(--shadow) 40%,transparent)}
.nav__ct{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--acc);color:var(--accfg);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--acc) 90%,transparent);transition:background .2s,transform .2s,box-shadow .2s}
.nav__ct svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav__ct:hover{background:var(--acc-hover);transform:translateY(-1px);box-shadow:0 12px 22px -10px color-mix(in srgb,var(--acc) 95%,transparent)}
.nav__ct:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.nav__sep{width:1px;height:20px;background:color-mix(in srgb,var(--shadow) 14%,transparent)}
.nav__tools .lang__btn{height:36px;border:0;border-radius:999px;background:transparent;box-shadow:none;padding:0 12px 0 10px;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav__tools .lang__btn:hover,.nav__tools .lang.is-open .lang__btn{background:var(--acc-l);box-shadow:none}
.nav__tools .lang__menu{top:calc(100% + 16px);inset-inline-end:-4px}
@media (max-width:900px){
  .lang{display:block}
  .lang-seg{display:none}
  .nav__tools{margin-inline-start:auto;margin-inline-end:6px;gap:4px;padding:3px}
  .nav__ct{width:34px;height:34px}
  .nav__tools .lang__btn{height:34px;padding:0 9px 0 8px;gap:6px;font-size:11px}
  .nav__tools .lang__menu{min-width:220px;inset-inline-end:-3px}
}

/* Footer: botón del título (acordeón en móvil) */
.fc__b{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:start;cursor:default;pointer-events:none}
.fc__chev{display:none;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.fc__p{display:block}
@media (max-width:900px){
  .footer .ft__panel{grid-template-columns:1fr;gap:0;padding:4px 22px}
  .ft__panel .fc,.ft__panel .fc:first-child,.ft__panel .fc:last-child,.ft__panel .fc:nth-child(odd),.ft__panel .fc:nth-child(even){padding:0;border-left:0;border-top:1px solid rgba(255,255,255,.08)}
  .ft__panel .fc:first-child{border-top:0}
  .footer .fc__t{margin:0;min-height:0}
  .fc__b{padding:19px 0;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
  .fc__b:focus-visible{outline:2px solid var(--acc-2);outline-offset:2px;border-radius:4px}
  .fc__chev{display:block;color:var(--inv-acc)}
  .fc.is-open .fc__chev{transform:rotate(180deg)}
  .fc__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}
  .fc__p>ul{min-height:0;overflow:hidden;margin:0}
  .fc.is-open .fc__p{grid-template-rows:1fr}
  .fc.is-open .fc__p>ul{padding-bottom:18px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.fc__p,.fc__chev{transition:none}}


/* Hero · maquetas neutrales (sin oficio concreto) y centro con DEEC Business Suite */
.core__brand{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;border:.9em solid var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7em;text-align:center;color:var(--accfg);background:radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--acc-2) 55%,transparent),color-mix(in srgb,var(--acc-2) 0%,transparent) 58%),linear-gradient(160deg,#0B1220,#17296B 70%,var(--acc-hover));box-shadow:0 0 0 1px var(--line),0 3em 6em -2em color-mix(in srgb,var(--acc) 40%,transparent);overflow:hidden}
.core__brand::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,color-mix(in srgb,var(--inv-acc) 32%,transparent) 1px,transparent 1.5px) 0 0/1.9em 1.9em;-webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 38%,#000 100%);mask-image:radial-gradient(circle at 50% 50%,transparent 38%,#000 100%);opacity:.7}
.core__brand b{position:relative;font-size:4.6em;font-weight:600;letter-spacing:.05em;line-height:1}
.core__brand small{position:relative;font-size:1.25em;font-weight:500;letter-spacing:.24em;color:#BFDBFE}
.web__hero{background:#0B1220 url(assets/web-hero-neutral.svg) center/cover}
.web__hero::before{background:linear-gradient(90deg,rgba(8,12,30,.55),rgba(8,12,30,.12) 62%,rgba(8,12,30,0))}
.web u,.web__links u{background:var(--acc);color:var(--accfg)}
.web__logo{letter-spacing:.2em}
@media (prefers-reduced-motion:no-preference){.core__brand{animation:breathe 8s ease-in-out 2s infinite}}
.web__logo{white-space:nowrap;letter-spacing:.14em}

/* Centro del hero · DEEC Business Suite con presencia premium */
.core__brand{gap:.55em;background:radial-gradient(circle at 30% 14%,rgba(255,255,255,.2),rgba(255,255,255,0) 42%),radial-gradient(circle at 50% 108%,color-mix(in srgb,var(--acc-top) 70%,transparent),color-mix(in srgb,var(--acc-top) 0%,transparent) 62%),linear-gradient(165deg,#070C1A 0%,#0E1B45 58%,#12286F 100%);box-shadow:0 0 0 1px var(--line),inset 0 0 0 1px color-mix(in srgb,var(--inv-acc) 28%,transparent),inset 0 0 5em -1.2em color-mix(in srgb,var(--acc) 55%,transparent),0 3em 7em -2em color-mix(in srgb,var(--acc) 55%,transparent),0 0 9em -3em color-mix(in srgb,var(--acc) 45%,transparent)}
.core__mark{position:relative;display:grid;place-items:center;width:2.6em;height:2.6em;margin-bottom:.15em;border-radius:50%;border:1px solid color-mix(in srgb,var(--inv-acc) 50%,transparent);background:color-mix(in srgb,var(--inv-acc) 10%,transparent);color:#BFDBFE;box-shadow:0 0 1.6em -.2em color-mix(in srgb,var(--acc-2) 80%,transparent)}
.core__mark .ic{width:1.4em;height:1.4em}
.core__brand b{font-size:4.3em;font-weight:600;letter-spacing:.1em;padding-left:.1em;background:linear-gradient(180deg,var(--card) 18%,var(--info-b));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .12em .4em color-mix(in srgb,var(--acc) 45%,transparent))}
.core__rule{position:relative;width:55%;height:1px;background:linear-gradient(90deg,transparent,rgba(191,219,254,.9),transparent)}
.core__rule::after{content:"";position:absolute;left:50%;top:50%;width:.42em;height:.42em;translate:-50% -50%;rotate:45deg;background:var(--inv-acc);box-shadow:0 0 .8em color-mix(in srgb,var(--inv-acc) 90%,transparent)}
.core__brand small{font-size:1.1em;font-weight:500;letter-spacing:.36em;padding-left:.36em;color:#DBEAFE}

/* Móvil: círculo central algo más grande y texto con aire (antes el texto tocaba el borde) */
@media (max-width:760px){
  .core{width:50%}
  .core__brand{gap:.45em}
  .core__brand b{font-size:3.2em;letter-spacing:.09em}
  .core__brand small{font-size:.88em;letter-spacing:.26em;padding-left:.26em}
}

/* Maqueta del sitio web: tipografía del sitio (Raleway) en lugar de la serif de la barbería */
.web__logo{font-family:var(--sans);font-weight:600;font-size:1.35em;letter-spacing:.16em}
.web__copy p{font-family:var(--sans);font-weight:400;font-size:2.25em;line-height:1.14;letter-spacing:-.012em;max-width:10.5em}

/* FAQ acordeón */
.faq__list{display:grid;gap:44px}
.faqg__t{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.faqg__items{display:grid;gap:12px}
.fq{background:var(--card);border:1px solid var(--line);border-radius:6px;transition:border-color .25s,box-shadow .25s}
.fq:hover{border-color:var(--acc)}
.fq.is-open{border-color:var(--acc);box-shadow:0 14px 34px -22px color-mix(in srgb,var(--acc) 45%,transparent)}
.fq__h{margin:0;font:inherit}
.fq__q{all:unset;font-family:inherit;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 26px;font-size:17px;line-height:1.4;font-weight:400;color:inherit;cursor:pointer}
.fq__q:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.fq__c{flex:none;color:var(--acc);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.fq.is-open .fq__c{transform:rotate(180deg)}
.fq__a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s}
.fq.is-open .fq__a{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.fq__ai{overflow:hidden;min-height:0}
.fq__ab{padding:0 26px 24px;color:var(--mut,var(--text));font-size:15.5px;line-height:1.7}
.fq__ab p{margin:0}
.fq__ab p+p,.fq__ab p+ul,.fq__ab ul+p{margin-top:12px}
.fq__ab ul{margin:0;padding-left:20px;display:grid;gap:8px}
.fq__ab strong{font-weight:600;color:var(--fg,var(--fg))}
html[dir=rtl] .fq__ab ul{padding-left:0;padding-right:20px}
@media (max-width:640px){.fq__q{padding:18px 18px;font-size:16px;gap:16px}.fq__ab{padding:0 18px 20px}.faq__list{gap:36px}}
@media (prefers-reduced-motion:reduce){.fq,.fq__c,.fq__a{transition:none}}

/* FAQ: categorías colapsables */
.faq__list{gap:14px}
.faqg{border-bottom:1px solid var(--line)}
.faqg__h{margin:0;font:inherit}
.faqg__b{all:unset;font-family:inherit;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;color:var(--fg)}
.faqg__b:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.faqg__t{margin:0;font-size:20px;font-weight:600;letter-spacing:0;text-transform:none;color:inherit;line-height:1.3;transition:color .25s}
.faqg__b:hover .faqg__t,.faqg.is-open .faqg__t{color:var(--acc)}
.faqg__c{flex:none;color:var(--acc);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.faqg.is-open .faqg__c{transform:rotate(180deg)}
.faqg__p{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1),visibility 0s linear .4s}
.faqg.is-open .faqg__p{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.faqg__pi{overflow:hidden;min-height:0}
.faqg__items{padding:2px 0 26px}
@media (max-width:640px){.faqg__t{font-size:18px}.faqg__b{padding:18px 0}}
@media (prefers-reduced-motion:reduce){.faqg__c,.faqg__p{transition:none}}

/* Hero · sin aros ni puntos orbitales y centro claro (como el resto de maquetas) */
.orbit__ring,.core::before,.core::after{display:none!important}
.eco__lines .ln circle,.mlines .ln circle{display:none}
.core__brand{background:radial-gradient(circle at 30% 14%,var(--card),rgba(255,255,255,0) 55%),linear-gradient(165deg,var(--card) 0%,#F4F7FC 58%,#E9EFFA 100%);box-shadow:0 0 0 1px var(--line),inset 0 0 0 1px color-mix(in srgb,var(--shadow) 5%,transparent),0 2.4em 5.2em -2.6em color-mix(in srgb,var(--shadow) 30%,transparent)}
.core__brand::before{background:radial-gradient(circle,color-mix(in srgb,var(--acc) 16%,transparent) 1px,transparent 1.5px) 0 0/1.9em 1.9em;opacity:.8}
.core__mark{border-color:color-mix(in srgb,var(--acc) 28%,transparent);background:color-mix(in srgb,var(--acc) 7%,transparent);color:var(--acc);box-shadow:none}
.core__brand b{background:linear-gradient(180deg,var(--fg) 30%,#4B5563);-webkit-background-clip:text;background-clip:text;color:transparent;filter:none}
.core__rule{background:linear-gradient(90deg,transparent,#CBD5E1,transparent)}
.core__rule::after{background:var(--acc);box-shadow:none}
.core__brand small{color:var(--muted)}

/* Hero · dot grid estratégico: solo se percibe alrededor del centro y se desvanece hacia los bordes */
.eco__stage::before{content:"";position:absolute;inset:-3% -2%;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--shadow) 34%,transparent) 1px,transparent 1.6px) 0 0/2.3em 2.3em;-webkit-mask-image:radial-gradient(ellipse 46% 50% at 58% 52.6%,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:radial-gradient(ellipse 46% 50% at 58% 52.6%,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);opacity:.55}
@media (max-width:900px){.eco__stage::before{inset:0;background-size:1.1em 1.1em;-webkit-mask-image:radial-gradient(ellipse 52% 46% at 50% 50%,#000 0%,rgba(0,0,0,.5) 50%,transparent 100%);mask-image:radial-gradient(ellipse 52% 46% at 50% 50%,#000 0%,rgba(0,0,0,.5) 50%,transparent 100%)}}

/* Hero · sin iluminación azul (resplandor de fondo y sombras teñidas) */
.hero__bg::after{display:none!important}
.win,.win:hover{box-shadow:0 .1em .3em color-mix(in srgb,var(--shadow) 5%,transparent),0 1.4em 2.6em -.9em color-mix(in srgb,var(--shadow) 16%,transparent),0 3.4em 7em -2.4em color-mix(in srgb,var(--shadow) 14%,transparent)}
.win:hover{box-shadow:0 .1em .3em color-mix(in srgb,var(--shadow) 5%,transparent),0 2em 3.2em -.9em color-mix(in srgb,var(--shadow) 20%,transparent),0 3.4em 7em -2.4em color-mix(in srgb,var(--shadow) 20%,transparent)}
@media (max-width:900px){
  .win{box-shadow:0 .1em .3em color-mix(in srgb,var(--shadow) 5%,transparent),0 1em 2em -1em color-mix(in srgb,var(--shadow) 18%,transparent),0 1.4em 2.4em -1.6em color-mix(in srgb,var(--shadow) 12%,transparent)}
  /* Móvil: el dot grid va solo detrás del círculo central (no en todo el bloque con el carrusel) */
  .eco__stage::before{display:none}
  .orbit::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--shadow) 34%,transparent) 1px,transparent 1.6px) 0 0/16px 16px;-webkit-mask-image:radial-gradient(ellipse 50% 42% at 50% 50%,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%);mask-image:radial-gradient(ellipse 50% 42% at 50% 50%,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%);opacity:.55}
}

/* Hero · maqueta del sitio web en tonos claros (misma paleta que las demás maquetas) */
.eco .web__hero{background:linear-gradient(165deg,var(--card) 0%,#F5F8FD 55%,#EAF0FA 100%);color:var(--fg)}
.eco .web__hero::before{inset:0;background:radial-gradient(circle,color-mix(in srgb,var(--shadow) 20%,transparent) 1px,transparent 1.5px) 0 0/1.7em 1.7em;-webkit-mask-image:radial-gradient(ellipse 55% 75% at 82% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 55% 75% at 82% 40%,#000,transparent 75%);opacity:.5}
.eco .web__logo{color:var(--fg)}
.eco .web__links{color:var(--text)}
.eco .web__links u,.eco .web__copy u{background:var(--acc);color:var(--accfg)}
.eco .web__copy p{color:var(--fg)}

/* Acceso discreto al panel interno */
.ft__left{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ft__adm{font-size:12px;letter-spacing:.06em;color:rgba(229,231,235,.22);transition:color .25s}
.ft__adm:hover,.ft__adm:focus-visible{color:rgba(229,231,235,.8)}
.ft__adm{display:inline-flex;align-items:center;gap:7px}
.ft__adm svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}