:root{
  --qba-navy:#0a3d56;
  --qba-blue:#263a7d;
  --qba-ink:#111a3e;
  --qba-red:#cd2027;
  --qba-cyan:#1ba8d8;
  --qba-bg:#f3f7fb;
  --qba-muted:#657089;
  --qba-line:#d9e3ef;
  --qba-card:#ffffff;
  --qba-soft:#eaf2f8;
  --radius-xl:32px;
  --radius-lg:22px;
  --shadow:0 24px 60px rgba(14,32,68,.14);
  --container:1180px;
  --section:84px;
  --hero-title:clamp(2.3rem,4.2vw,4.25rem);
  --h2:clamp(1.75rem,3vw,3.05rem);
  --h3:clamp(1.25rem,1.8vw,1.75rem);
  --body:1rem;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:"Montserrat","Inter","Segoe UI",Arial,sans-serif;background:#fff;color:var(--qba-ink);line-height:1.65} img{max-width:100%;display:block} a{color:inherit;text-decoration:none}.container{width:min(var(--container),calc(100% - 42px));margin-inline:auto}.eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 18px;padding:7px 14px;border-radius:999px;background:rgba(205,32,39,.09);color:var(--qba-red);font-size:.72rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.eyebrow.light{background:rgba(255,255,255,.14);color:#fff}.section{padding:var(--section) 0}.section-title{margin:0;font-size:var(--h2);line-height:1.08;letter-spacing:-.035em}.section-lead{margin:20px 0 0;font-size:1.02rem;color:var(--qba-muted);max-width:760px}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(217,227,239,.85);backdrop-filter:blur(18px)}.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;align-items:center;gap:12px;font-weight:900;color:var(--qba-ink)}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--qba-red),#7b1f48);display:grid;place-items:center;color:#fff;font-weight:900}.brand small{display:block;margin-top:-3px;color:var(--qba-muted);font-weight:600;font-size:.76rem}.cta{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;padding:12px 22px;background:var(--qba-red);color:#fff;font-weight:900;box-shadow:0 18px 36px rgba(205,32,39,.22);cursor:pointer}.cta.secondary{background:#fff;color:var(--qba-blue);box-shadow:none;border:1px solid var(--qba-line)}
.hero{position:relative;overflow:hidden;min-height:650px;padding:92px 0 82px;background:radial-gradient(700px 420px at 82% 90%,rgba(205,32,39,.28),transparent 60%),linear-gradient(135deg,#07384f 0%,#092f49 46%,#141a42 100%);color:#fff}.hero::after{content:"";position:absolute;inset:auto 0 0;height:150px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.15))}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:.86fr 1.14fr;gap:56px;align-items:center}.hero h1{margin:0;font-size:var(--hero-title);line-height:1.04;letter-spacing:-.045em;max-width:620px}.hero p{margin:24px 0 0;max-width:640px;color:#d9edf8;font-size:1.05rem}.hero-visual{min-height:460px;position:relative}.browser-shot{position:absolute;border:14px solid rgba(255,255,255,.12);background:#fff;border-radius:28px;box-shadow:var(--shadow);overflow:hidden;transition:transform .5s ease,box-shadow .5s ease}.browser-shot img{width:100%;height:100%;object-fit:cover}.browser-shot:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 35px 80px rgba(0,0,0,.34)}.browser-shot.main{right:0;top:35px;width:84%;height:365px}.browser-shot.back{left:0;bottom:8px;width:63%;height:270px;opacity:.96}.browser-bar{height:26px;background:#f1f4f8;display:flex;gap:7px;align-items:center;padding-left:13px}.dot{width:9px;height:9px;border-radius:999px;background:#d7dce4}.dot.red{background:#cd2027}.dot.blue{background:#263a7d}.floating-note{position:absolute;z-index:4;left:62px;bottom:88px;width:275px;background:#fff;color:var(--qba-ink);padding:18px 20px;border-radius:18px;box-shadow:var(--shadow);font-weight:700}.hero-kicker{margin-bottom:18px;color:#a7e0f6;font-size:.78rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.dark-video{background:linear-gradient(180deg,#092f49,#07273d);color:#fff}.video-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}.video-frame{position:relative;min-height:430px;border:1px dashed rgba(255,255,255,.35);border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.04));display:grid;place-items:center;text-align:center;overflow:hidden}.play{width:92px;height:92px;border-radius:50%;background:var(--qba-red);display:grid;place-items:center;margin-inline:auto;box-shadow:0 18px 40px rgba(205,32,39,.35)}.play::before{content:"";border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}.video-note{font-weight:800;font-size:1.1rem}.video-card{display:flex;gap:17px;padding:26px;border-radius:28px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);margin-bottom:16px}.icon-bubble{flex:0 0 auto;width:54px;height:54px;border-radius:18px;background:rgba(255,255,255,.11);display:grid;place-items:center;font-size:1.45rem}.saas{background:linear-gradient(180deg,#f3f7fb 0%,#fff 100%)}.saas-layout{display:grid;grid-template-columns:1fr;gap:24px}.saas-diagram{background:#fff;border:1px solid var(--qba-line);border-radius:34px;box-shadow:var(--shadow);padding:22px;overflow:hidden}.saas-diagram img{width:100%;border-radius:22px}.benefit-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.chip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--qba-line);border-radius:999px;padding:11px 16px;background:#fff;font-weight:800;color:#25305b}.value{background:#fff}.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:42px;border:1px solid var(--qba-line);border-radius:32px;overflow:hidden;box-shadow:0 16px 50px rgba(14,32,68,.08)}.pillar{padding:36px 30px;min-height:240px;background:#fff;border-right:1px solid var(--qba-line)}.pillar:last-child{border-right:0}.pillar-num{font-size:.86rem;color:var(--qba-red);font-weight:900;letter-spacing:.12em}.pillar h3{font-size:1.38rem;line-height:1.1;margin:18px 0 12px}.module{position:relative;overflow:hidden}.module.assets{background:#f8fbfe}.module.helpdesk{background:linear-gradient(180deg,#fff,#eff6fb)}.module-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:38px;align-items:center}.module-title{font-size:var(--h2);line-height:1.08;margin:0}.module-video{min-height:360px;border-radius:34px;border:1px solid var(--qba-line);background:#fff;box-shadow:var(--shadow);padding:28px;display:grid;place-items:center;text-align:center}.category-strip{display:flex;gap:14px;overflow:auto;padding:18px 2px 6px;margin-top:34px}.cat{min-width:140px;padding:18px;border-radius:22px;background:#fff;border:1px solid var(--qba-line);box-shadow:0 10px 30px rgba(14,32,68,.06);font-weight:900;text-align:center}.cat span{display:block;font-size:1.6rem;margin-bottom:8px}.radial-wrap{margin-top:56px;display:grid;grid-template-columns:.75fr 1.25fr;gap:38px;align-items:center}.radial{position:relative;min-height:430px;border-radius:34px;background:radial-gradient(circle at center,#fff 0,#fff 23%,#eaf2f8 24%,#f7fbff 100%);border:1px solid var(--qba-line);overflow:hidden}.radial-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:170px;height:170px;border-radius:50%;background:linear-gradient(135deg,var(--qba-blue),var(--qba-navy));color:#fff;display:grid;place-items:center;text-align:center;font-weight:900;padding:20px;box-shadow:var(--shadow)}.orbit{position:absolute;width:138px;padding:12px;border-radius:18px;background:#fff;border:1px solid var(--qba-line);box-shadow:0 12px 28px rgba(14,32,68,.09);text-align:center;font-weight:800;font-size:.87rem}.orbit.o1{left:9%;top:12%}.orbit.o2{right:9%;top:12%}.orbit.o3{right:5%;top:46%}.orbit.o4{right:16%;bottom:10%}.orbit.o5{left:16%;bottom:10%}.orbit.o6{left:5%;top:46%}.split{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;border-radius:36px;overflow:hidden;box-shadow:var(--shadow)}.before,.after{padding:38px}.before{background:#18213e;color:#cbd3e6}.after{background:#fff;color:var(--qba-ink)}.split h3{font-size:1.7rem;margin:0 0 18px}.split ul{padding-left:20px}.areas{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:34px}.area{padding:18px;border-radius:18px;background:#fff;border:1px solid var(--qba-line);text-align:center;font-weight:900}.gallery{margin-top:56px}.gallery-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:22px}.gallery-track{display:flex;gap:20px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:16px}.shot-card{min-width:min(560px,82vw);scroll-snap-align:start;border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--qba-line);box-shadow:0 18px 48px rgba(14,32,68,.11)}.shot-card img{height:315px;width:100%;object-fit:cover;transition:transform .6s ease}.shot-card:hover img{transform:scale(1.045)}.shot-card figcaption{padding:18px 22px;font-weight:900}.flow{margin-top:50px;padding:40px;border-radius:36px;background:#082f49;color:#fff;overflow:hidden}.flow-steps{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:26px}.step{position:relative;padding:18px 12px;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);text-align:center;font-weight:900}.step:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:#fff}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}.image-panel{border-radius:34px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--qba-line);background:#fff}.image-panel img{width:100%;height:390px;object-fit:cover}.integrations{padding:52px;border-radius:42px;background:linear-gradient(135deg,#111a3e,#0a3d56);color:#fff}.integration-line{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.integration-line .chip{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.18);color:#fff}.cases{background:#fff}.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:42px}.case{position:relative;border-radius:34px;padding:34px;background:#fff;border:1px solid var(--qba-line);box-shadow:var(--shadow);overflow:hidden}.case::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(90deg,var(--qba-red),var(--qba-blue))}.case-logo{height:82px;max-width:230px;object-fit:contain;margin-bottom:22px}.service{background:linear-gradient(180deg,#f7fbff,#fff)}.service-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:38px;align-items:start}.service-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.service-item{padding:20px;border-radius:20px;background:#fff;border:1px solid var(--qba-line);font-weight:800}.pricing{background:#0b3048;color:#fff;text-align:center}.pricing-card{max-width:850px;margin:0 auto;padding:48px;border-radius:36px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}.price{font-size:clamp(2.4rem,6vw,5rem);font-weight:900;letter-spacing:-.05em;margin:16px 0}.contact{background:#fff}.contact-box{display:grid;grid-template-columns:.88fr 1.12fr;gap:38px;align-items:start;border-radius:40px;background:#f3f7fb;padding:44px;border:1px solid var(--qba-line)}.form{display:grid;gap:14px}.field{width:100%;border:1px solid var(--qba-line);border-radius:14px;padding:14px 16px;font:inherit}.textarea{min-height:120px;resize:vertical}.footer{padding:36px 0;background:#071d30;color:#a8c2d2}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
/* v5.1: video general más limpio y tipografía más cercana a QNMonitor */
.video-intro{max-width:880px;margin-bottom:34px}
.video-intro .section-lead{max-width:780px}
.video-frame.wide{min-height:540px;width:100%;border-radius:38px}
.video-frame.wide .video-note{font-size:1.18rem}
@media(max-width:640px){.video-frame.wide{min-height:340px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}@media(max-width:980px){.hero-grid,.video-grid,.module-head,.radial-wrap,.two-col,.service-grid,.contact-box{grid-template-columns:1fr}.hero{min-height:auto}.hero-visual{min-height:520px}.browser-shot.main{width:92%;right:0}.browser-shot.back{width:78%}.pillars,.areas,.case-grid,.service-list{grid-template-columns:1fr 1fr}.flow-steps{grid-template-columns:1fr}.step:not(:last-child)::after{display:none}}@media(max-width:640px){.container{width:min(100% - 28px,var(--container))}.section{padding:70px 0}.header-inner{height:66px}.brand small{display:none}.hero{padding-top:80px}.hero-visual{min-height:430px}.floating-note{left:10px;bottom:80px;width:250px}.browser-shot.main{height:270px}.browser-shot.back{height:220px}.pillars,.areas,.case-grid,.service-list{grid-template-columns:1fr}.split{grid-template-columns:1fr}.radial{min-height:560px}.orbit{width:120px}.image-panel img{height:260px}.video-frame{min-height:320px}}


/* v5.2: ajuste fuerte de escala tipográfica basado en QNMonitor / GeneratePress + Inter */
:root{
  --container:1200px;
  --section:72px;
  --radius-xl:28px;
  --radius-lg:20px;
  --hero-title:clamp(2.05rem,3.35vw,3.65rem);
  --h2:clamp(1.55rem,2.35vw,2.55rem);
  --h3:clamp(1.08rem,1.35vw,1.45rem);
  --body:.97rem;
}
html{font-size:16px}
body{font-family:"Inter","Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.58;color:#162044}
.container{width:min(var(--container),calc(100% - 48px))}
.eyebrow{font-size:.66rem;padding:6px 12px;margin-bottom:14px;letter-spacing:.16em}
.section{padding:var(--section) 0}
.section-title{font-size:var(--h2);line-height:1.14;letter-spacing:-.025em;font-weight:700;max-width:920px}
.section-lead{font-size:.98rem;line-height:1.68;margin-top:14px;max-width:720px}
.header-inner{height:66px}.brand-mark{width:38px;height:38px;border-radius:12px}.brand strong{font-size:.98rem}.brand small{font-size:.7rem}.cta{padding:10px 18px;font-size:.88rem}
.hero{min-height:570px;padding:76px 0 66px}.hero-grid{grid-template-columns:.88fr 1.12fr;gap:48px}.hero h1{font-size:var(--hero-title);line-height:1.08;letter-spacing:-.035em;font-weight:800;max-width:560px}.hero p{font-size:1rem;line-height:1.66;max-width:590px;margin-top:20px}.hero-kicker{font-size:.68rem;margin-bottom:14px}.hero-visual{min-height:420px}.browser-shot{border-width:11px;border-radius:24px}.browser-shot.main{top:30px;width:82%;height:330px}.browser-shot.back{width:61%;height:240px}.floating-note{font-size:.88rem;line-height:1.35;width:250px;padding:14px 16px;border-radius:16px;left:54px;bottom:78px}.browser-bar{height:22px}
.video-intro{max-width:820px;margin-bottom:26px}.video-frame.wide{min-height:485px;border-radius:34px}.video-frame.wide .video-note,.video-note{font-size:1rem}.play{width:78px;height:78px}.play::before{border-left-width:18px;border-top-width:11px;border-bottom-width:11px}.video-frame p{font-size:.95rem}.video-frame{min-height:390px}
.saas-layout{gap:18px}.saas-diagram{padding:18px;border-radius:30px}.saas-diagram img{border-radius:18px}.benefit-chips{gap:10px}.chip{font-size:.86rem;padding:9px 13px}
.pillars{margin-top:32px;border-radius:28px}.pillar{padding:28px 24px;min-height:190px}.pillar h3{font-size:1.14rem;line-height:1.18;margin:14px 0 10px}.pillar p,.case p,.case li,.service-item{font-size:.93rem;line-height:1.55}.pillar-num{font-size:.76rem}
.module-head{gap:32px}.module-title{font-size:var(--h2);line-height:1.14;letter-spacing:-.025em;font-weight:700}.module-video{min-height:305px;padding:24px;border-radius:30px}.module-video h3{font-size:1.08rem;line-height:1.25}.module-video p{font-size:.92rem;line-height:1.5}.category-strip{margin-top:28px}.cat{min-width:124px;padding:14px;border-radius:18px;font-size:.9rem}.cat span{font-size:1.35rem;margin-bottom:6px}
.radial-wrap{margin-top:48px;grid-template-columns:.82fr 1.18fr}.radial{min-height:385px;border-radius:30px}.radial-center{width:150px;height:150px;font-size:.92rem}.orbit{font-size:.78rem;width:122px;padding:10px;border-radius:15px}.split{margin-top:46px;border-radius:30px}.before,.after{padding:30px}.split h3{font-size:1.32rem}.split li{font-size:.93rem;margin-bottom:4px}.areas{margin-top:26px}.area{padding:14px;border-radius:16px;font-size:.9rem}
.gallery{margin-top:46px}.gallery-head{margin-bottom:18px}.shot-card{min-width:min(520px,82vw);border-radius:24px}.shot-card img{height:285px}.shot-card figcaption{padding:14px 18px;font-size:.9rem}.two-col{gap:32px}.image-panel{border-radius:28px}.image-panel img{height:340px}.flow{margin-top:42px;padding:34px;border-radius:32px}.flow-steps{gap:10px;margin-top:20px}.step{font-size:.84rem;padding:14px 10px;border-radius:15px}.integrations{padding:42px;border-radius:36px}.case-grid{margin-top:32px}.case{border-radius:28px;padding:28px}.case-logo{height:68px;margin-bottom:18px}.case h3{font-size:1.18rem;line-height:1.22}.service-grid{gap:32px}.service-list{gap:12px}.pricing-card{padding:40px;border-radius:32px}.price{font-size:clamp(2rem,4.8vw,4rem)}.contact-box{padding:38px;border-radius:34px}.field{padding:12px 14px;font-size:.94rem}
@media(max-width:980px){.hero{padding-top:70px}.hero h1{max-width:720px}.hero-visual{min-height:460px}.browser-shot.main{height:310px}.browser-shot.back{height:230px}.pillars{grid-template-columns:1fr 1fr}.flow-steps{grid-template-columns:1fr 1fr}.step:not(:last-child)::after{display:none}}
@media(max-width:640px){html{font-size:15.5px}.container{width:min(100% - 28px,var(--container))}.section{padding:58px 0}.hero{padding:64px 0 54px}.hero h1{font-size:clamp(2rem,10vw,3rem)}.hero p{font-size:.96rem}.hero-visual{min-height:370px}.browser-shot.main{height:245px;width:92%}.browser-shot.back{height:190px;width:76%}.floating-note{left:10px;bottom:64px;width:230px}.video-frame.wide{min-height:330px}.module-video{min-height:250px}.pillars,.areas,.case-grid,.service-list{grid-template-columns:1fr}.flow-steps{grid-template-columns:1fr}.radial{min-height:520px}.image-panel img{height:250px}.contact-box{padding:26px}}


/* v5.2.2: espaciado interno de módulos y diferenciación visual */
.module.assets{
  background:linear-gradient(180deg,#f8fbfe 0%,#f3f7fb 54%,#ffffff 100%);
}
.module.helpdesk{
  background:
    radial-gradient(720px 360px at 88% 12%,rgba(38,58,125,.10),transparent 62%),
    linear-gradient(180deg,#eef7ff 0%,#e7f2fb 48%,#f7fbff 100%);
}
.module.helpdesk::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:8px;
  background:linear-gradient(180deg,var(--qba-blue),var(--qba-cyan));
  opacity:.75;
}
.module .module-head{
  margin-bottom:64px;
}
.module.helpdesk .module-head{
  padding:26px;
  border-radius:34px;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(217,227,239,.85);
  box-shadow:0 18px 46px rgba(14,32,68,.08);
}
.module.assets .category-strip{
  margin-top:0;
}
.module.assets > .container.radial-wrap,
.module.assets > .container.split,
.module.assets > .container.gallery,
.module.helpdesk > .container.two-col,
.module.helpdesk > .container.flow,
.module.helpdesk > .container.integrations,
.module.helpdesk > .container.gallery{
  margin-top:86px !important;
}
.module.assets > .container.reveal[style]{
  margin-top:86px !important;
}
.module .section-title{
  margin-bottom:10px;
}
.module .section-lead{
  margin-top:16px;
}
.module .gallery-head{
  padding-top:4px;
}
.module .two-col{
  align-items:center;
}
.module.helpdesk .image-panel,
.module.helpdesk .module-video,
.module.helpdesk .shot-card{
  box-shadow:0 20px 52px rgba(38,58,125,.12);
}
@media(max-width:980px){
  .module .module-head{margin-bottom:48px}
  .module.assets > .container.radial-wrap,
  .module.assets > .container.split,
  .module.assets > .container.gallery,
  .module.assets > .container.reveal[style],
  .module.helpdesk > .container.two-col,
  .module.helpdesk > .container.flow,
  .module.helpdesk > .container.integrations,
  .module.helpdesk > .container.gallery{margin-top:64px !important}
  .module.helpdesk .module-head{padding:20px}
}
@media(max-width:640px){
  .module .module-head{margin-bottom:40px}
  .module.assets > .container.radial-wrap,
  .module.assets > .container.split,
  .module.assets > .container.gallery,
  .module.assets > .container.reveal[style],
  .module.helpdesk > .container.two-col,
  .module.helpdesk > .container.flow,
  .module.helpdesk > .container.integrations,
  .module.helpdesk > .container.gallery{margin-top:54px !important}
}


/* v5.2.3: imágenes protagonistas, contraste entre secciones y hero con intercambio de capturas */
.dark-video{
  background:linear-gradient(180deg,#ffffff 0%,#f6f9fd 100%);
  color:var(--qba-ink);
}
.dark-video .eyebrow.light{
  background:rgba(205,32,39,.09);
  color:var(--qba-red);
}
.dark-video .section-lead{color:var(--qba-muted)!important;}
.dark-video .video-frame{
  background:linear-gradient(135deg,#071d30 0%,#0a3d56 54%,#111a3e 100%);
  color:#fff;
  border:1px solid rgba(38,58,125,.16);
  box-shadow:0 26px 70px rgba(14,32,68,.18);
}
.hero-switch{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:8;
  display:flex;
  gap:8px;
  padding:7px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
}
.hero-switch button{
  border:0;
  border-radius:999px;
  padding:9px 13px;
  font-family:inherit;
  font-size:.78rem;
  font-weight:900;
  color:#24304f;
  background:transparent;
  cursor:pointer;
}
.hero-switch button.active{
  background:var(--qba-blue);
  color:#fff;
}
.browser-shot.main{z-index:4;opacity:1;filter:none;}
.browser-shot.back{z-index:2;filter:saturate(.92) brightness(.96);}
.browser-shot.hero-shot{cursor:zoom-in;}
.browser-shot.hero-shot.main{transform:translateY(0) scale(1);}
.browser-shot.hero-shot.back{transform:translateY(0) scale(.98);}
.browser-shot.hero-shot.main:hover{transform:translateY(-8px) scale(1.015);}
.browser-shot.hero-shot.back:hover{transform:translateY(-4px) scale(.995);}

.module .two-col.visual-right{grid-template-columns:.62fr 1.38fr;gap:44px;}
.module .two-col.visual-left{grid-template-columns:1.38fr .62fr;gap:44px;}
.module .image-panel{position:relative;border-radius:30px;cursor:zoom-in;}
.module .image-panel::after,
.shot-card::after,
.saas-diagram::after{
  content:"Clic para ampliar";
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:3;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(7,29,48,.82);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;
}
.module .image-panel:hover::after,
.shot-card:hover::after,
.saas-diagram:hover::after{opacity:1;transform:none;}
.module .image-panel img{
  height:470px;
  object-fit:contain;
  background:#fff;
  padding:8px;
  transition:transform .45s ease;
}
.module .image-panel:hover img{transform:scale(1.018);}
.gallery-track{gap:30px;}
.shot-card{
  position:relative;
  min-width:min(760px,88vw);
  border-radius:28px;
  cursor:zoom-in;
}
.shot-card img{
  height:430px;
  object-fit:contain;
  background:#fff;
  padding:8px;
}
.shot-card:hover img{transform:scale(1.018);}
.saas-diagram{position:relative;cursor:zoom-in;}
.saas-diagram img{transition:transform .45s ease;}
.saas-diagram:hover img{transform:scale(1.01);}
.qnd-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(4,12,25,.86);
  backdrop-filter:blur(10px);
}
.qnd-lightbox.open{display:flex;}
.qnd-lightbox img{
  max-width:min(96vw,1500px);
  max-height:88vh;
  object-fit:contain;
  background:#fff;
  border-radius:18px;
  box-shadow:0 35px 100px rgba(0,0,0,.5);
}
.qnd-lightbox button{
  position:absolute;
  top:22px;
  right:22px;
  border:0;
  border-radius:999px;
  width:44px;
  height:44px;
  background:#fff;
  color:#071d30;
  font-size:1.4rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}
.qnd-lightbox .caption{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  max-width:min(92vw,900px);
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#071d30;
  font-size:.9rem;
  font-weight:800;
  text-align:center;
}
@media(max-width:980px){
  .module .two-col.visual-right,.module .two-col.visual-left{grid-template-columns:1fr;}
  .module .image-panel img{height:390px;}
  .shot-card{min-width:min(700px,88vw)}
  .shot-card img{height:380px;}
  .hero-switch{right:12px;bottom:12px;}
}
@media(max-width:640px){
  .module .image-panel img{height:300px;}
  .shot-card{min-width:88vw;}
  .shot-card img{height:300px;}
  .hero-switch{left:10px;right:auto;bottom:18px;}
  .hero-switch button{font-size:.72rem;padding:8px 10px;}
  .qnd-lightbox{padding:12px;}
  .qnd-lightbox img{max-height:82vh;}
}


/* v5.2.4: hero más visual, sin recuadro flotante, más identidad QbaNet y fondos inspirados en QNMonitor */
:root{
  --qba-blue:#263A7C;
  --qba-red:#CD1F26;
}
.hero{
  min-height:630px;
  padding:82px 0 78px;
  background:
    radial-gradient(720px 420px at 82% 22%,rgba(147,180,255,.20),transparent 62%),
    radial-gradient(620px 380px at 76% 92%,rgba(205,31,38,.34),transparent 60%),
    linear-gradient(135deg,#08243e 0%,#0b3a50 42%,#111a3e 100%);
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.24;
  background:
    linear-gradient(115deg,transparent 0 62%,rgba(205,31,38,.36) 62% 64%,transparent 64% 100%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.11) 0 1px,transparent 1px 18px);
  mix-blend-mode:screen;
}
.hero::after{
  height:7px;
  background:linear-gradient(90deg,var(--qba-red) 0 28%,var(--qba-blue) 28% 100%);
  opacity:1;
}
.hero-grid{
  grid-template-columns:.76fr 1.24fr;
  gap:42px;
}
.hero-visual{
  min-height:515px;
}
.browser-shot{
  border-width:10px;
  border-color:rgba(255,255,255,.14);
  border-radius:26px;
}
.browser-shot.main{
  top:6px;
  right:-2%;
  width:94%;
  height:420px;
}
.browser-shot.back{
  left:-5%;
  bottom:4px;
  width:74%;
  height:318px;
  opacity:.98;
}
.browser-shot.hero-shot.main:hover{transform:translateY(-9px) scale(1.012);}
.browser-shot.hero-shot.back:hover{transform:translateY(-5px) scale(1.002);}
.hero-switch{
  right:14px;
  bottom:14px;
}
.floating-note{display:none!important;}

.dark-video{
  background:
    linear-gradient(180deg,#ffffff 0%,#f7f8f9 100%);
  position:relative;
}
.dark-video::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:5px;
  background:linear-gradient(90deg,var(--qba-blue),var(--qba-red));
}
.saas{
  background:
    radial-gradient(900px 360px at 14% 0%,rgba(38,58,124,.11),transparent 58%),
    linear-gradient(180deg,#f3f7fb 0%,#ffffff 100%);
}
.value{
  background:
    linear-gradient(180deg,#fff 0%,#fff 78%,#f8fbfe 100%);
}
.value .pillars{
  position:relative;
}
.value .pillars::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg,var(--qba-red),var(--qba-blue));
  z-index:2;
}
.value .pillars{
  gap:0;
  align-items:stretch;
}
.value .pillar{
  position:relative;
  min-height:210px;
  padding:0;
  background:transparent;
  border-right:1px solid var(--qba-line);
  perspective:1400px;
  opacity:0;
  transform:translateX(72px);
  transition:opacity 1.05s ease, transform 1.05s cubic-bezier(.22,.72,.16,1);
}
.value .pillar:last-child{border-right:0;}
.value .reveal.visible .pillar{
  opacity:1;
  transform:translateX(0);
}
.value .reveal.visible .pillar:nth-child(1){transition-delay:.12s;}
.value .reveal.visible .pillar:nth-child(2){transition-delay:.52s;}
.value .reveal.visible .pillar:nth-child(3){transition-delay:.92s;}
.value .reveal.visible .pillar:nth-child(4){transition-delay:1.32s;}
.pillar-inner{
  position:relative;
  width:100%;
  min-height:210px;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.72,.18,1);
}
.pillar-flip-card:hover .pillar-inner,
.pillar-flip-card:focus-within .pillar-inner,
.pillar-flip-card:focus .pillar-inner{
  transform:rotateY(180deg);
}
.pillar-face{
  position:absolute;
  inset:0;
  padding:28px 24px;
  background:#fff;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.pillar-front{
  align-items:center;
  text-align:center;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbfe 100%);
}
.pillar-front img{
  width:min(150px,74%);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 14px 30px rgba(14,32,68,.10));
}
.pillar-back{
  transform:rotateY(180deg);
  align-items:flex-start;
  text-align:left;
  background:#fff;
}
.pillar-flip-card{outline:none;}
.pillar-flip-card:focus-visible{box-shadow:inset 0 0 0 2px rgba(38,58,125,.35);}
@media(max-width:980px){
  .value .pillar{border-right:0;border-bottom:1px solid var(--qba-line);}
  .value .pillar:last-child{border-bottom:0;}
}
@media(max-width:640px){
  .pillar-inner,.value .pillar{min-height:190px;}
  .pillar-face{padding:24px 20px;}
  .pillar-back img{width:min(132px,68%);}
}
.module.assets{
  background:
    radial-gradient(620px 280px at 12% 0%,rgba(38,58,124,.08),transparent 65%),
    linear-gradient(180deg,#f8fbfe 0%,#eef5fb 100%);
}
.module.helpdesk{
  background:
    radial-gradient(820px 360px at 90% 2%,rgba(38,58,124,.15),transparent 62%),
    linear-gradient(180deg,#edf6fc 0%,#f8fbff 100%);
}
.module.helpdesk::before{
  width:8px;
  background:linear-gradient(180deg,var(--qba-blue),var(--qba-red));
}
.module .module-head,
.module .radial,
.module .split,
.module .two-col,
.module .flow,
.module .integrations,
.module .gallery{
  scroll-margin-top:95px;
}
.module .image-panel img{
  height:500px;
}
.shot-card{
  min-width:min(820px,90vw);
}
.shot-card img{
  height:470px;
}
.service{
  background:
    radial-gradient(760px 360px at 85% 10%,rgba(205,31,38,.08),transparent 62%),
    linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
}
.cases{
  background:#fff;
}
.pricing{
  background:
    radial-gradient(680px 320px at 85% 20%,rgba(205,31,38,.28),transparent 60%),
    linear-gradient(135deg,#071d30 0%,#0b3a50 48%,#1a2856 100%);
}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px;}
  .hero-visual{min-height:540px;}
  .browser-shot.main{right:0;width:96%;height:350px;}
  .browser-shot.back{left:0;width:76%;height:270px;}
  .module .image-panel img{height:420px;}
  .shot-card{min-width:min(760px,90vw);}
  .shot-card img{height:410px;}
}
@media(max-width:640px){
  .hero{padding:62px 0 54px;}
  .hero-visual{min-height:410px;}
  .browser-shot.main{height:260px;width:94%;}
  .browser-shot.back{height:205px;width:78%;}
  .hero-switch{left:10px;right:auto;bottom:8px;}
  .module .image-panel img{height:310px;}
  .shot-card img{height:310px;}
}


/* v5.2.5: fondos tecnológicos, hero reforzado y carrusel 3D para mesa de ayuda */
.hero{
  background:
    linear-gradient(135deg,rgba(7,56,79,.9) 0%,rgba(9,47,73,.88) 42%,rgba(20,26,66,.92) 100%),
    url('../assets/images/extracted/css/css-img-001.svg') center/cover no-repeat;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(560px 360px at 88% 12%,rgba(205,32,39,.24),transparent 64%);
  pointer-events:none;
}
.hero-visual{min-height:520px}
.browser-shot.main{width:88%;height:392px;top:28px}
.browser-shot.back{width:69%;height:295px;left:0;bottom:16px}
.hero-switch{right:28px;bottom:22px}
.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:7;
  width:48px;height:48px;border:0;border-radius:999px;
  background:rgba(255,255,255,.92); color:#183152; font-size:2rem; line-height:1; cursor:pointer;
  box-shadow:0 18px 45px rgba(0,0,0,.2);
}
.hero-prev{left:-8px}
.hero-next{right:-8px}
.hero-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.03)}
.dark-video{background:linear-gradient(180deg,#ffffff 0%,#f6f9fd 100%), url('../assets/images/extracted/css/css-img-002.svg') center/cover no-repeat}
.saas{background:linear-gradient(180deg,#f6fbff 0%,#fff 100%), url('../assets/images/extracted/css/css-img-002.svg') center top/cover no-repeat}
.module.assets{
  background:
    linear-gradient(180deg,rgba(248,251,254,.96) 0%,rgba(243,247,251,.95) 54%,rgba(255,255,255,.98) 100%),
    url('../assets/images/extracted/css/css-img-002.svg') center top/cover no-repeat;
}
.module.helpdesk{
  background:
    linear-gradient(180deg,rgba(238,247,255,.97) 0%,rgba(231,242,251,.97) 48%,rgba(247,251,255,.98) 100%),
    url('../assets/images/extracted/css/css-img-003.svg') center top/cover no-repeat;
}
.service{background:linear-gradient(180deg,#f7fbff,#fff), url('../assets/images/extracted/css/css-img-002.svg') center/cover no-repeat}
.pricing{background:linear-gradient(135deg,rgba(11,48,72,.96),rgba(17,26,62,.96)), url('../assets/images/extracted/css/css-img-004.svg') center/cover no-repeat}

/* make section visuals slightly more prominent */
.module .image-panel img{height:500px}
.shot-card{min-width:min(780px,90vw)}
.shot-card img{height:450px}

/* stacked 3d gallery only for helpdesk */
.stack-gallery .gallery-track{
  position:relative;
  min-height:540px;
  overflow:visible;
  padding:28px 0 10px;
  display:block;
}
.stack-gallery .shot-card{
  position:absolute;
  left:50%; top:50%;
  width:min(840px,88vw);
  min-width:0;
  margin:0;
  transform-origin:center center;
  transition:transform .6s ease, opacity .45s ease, filter .45s ease, box-shadow .45s ease;
  will-change:transform,opacity;
  cursor:pointer;
}
.stack-gallery .shot-card img{height:460px}
.stack-gallery .shot-card figcaption{font-size:.95rem}
.stack-gallery .shot-card.is-active{z-index:5;opacity:1;filter:none;box-shadow:0 34px 86px rgba(14,32,68,.22)}
.stack-gallery .shot-card.is-prev{z-index:4;opacity:.92;filter:saturate(.9);box-shadow:0 24px 54px rgba(14,32,68,.15)}
.stack-gallery .shot-card.is-next{z-index:4;opacity:.92;filter:saturate(.9);box-shadow:0 24px 54px rgba(14,32,68,.15)}
.stack-gallery .shot-card.is-hidden{z-index:1;opacity:0;pointer-events:none}
.stack-gallery .shot-card.is-active{transform:translate(-50%,-50%) translateX(0) rotate(0deg) scale(1)}
.stack-gallery .shot-card.is-prev{transform:translate(-50%,-50%) translateX(-27%) rotate(-8deg) scale(.88)}
.stack-gallery .shot-card.is-next{transform:translate(-50%,-50%) translateX(27%) rotate(8deg) scale(.88)}
.stack-gallery .shot-card.is-hidden.left{transform:translate(-50%,-50%) translateX(-40%) rotate(-14deg) scale(.72)}
.stack-gallery .shot-card.is-hidden.right{transform:translate(-50%,-50%) translateX(40%) rotate(14deg) scale(.72)}
.stack-gallery .shot-card::before{
  content:"";
  position:absolute; inset:10px; border-radius:22px; border:1px solid rgba(38,58,125,.08); pointer-events:none;
}
@media(max-width:980px){
  .hero-visual{min-height:470px}
  .browser-shot.main{height:340px;width:90%}
  .browser-shot.back{height:250px;width:72%}
  .hero-prev{left:0}.hero-next{right:0}
  .stack-gallery .gallery-track{min-height:470px}
  .stack-gallery .shot-card img{height:360px}
  .stack-gallery .shot-card.is-prev{transform:translate(-50%,-50%) translateX(-16%) rotate(-6deg) scale(.86)}
  .stack-gallery .shot-card.is-next{transform:translate(-50%,-50%) translateX(16%) rotate(6deg) scale(.86)}
}
@media(max-width:640px){
  .hero-visual{min-height:420px}
  .browser-shot.main{height:268px;width:94%}
  .browser-shot.back{height:205px;width:78%}
  .hero-switch{left:50%;right:auto;transform:translateX(-50%);bottom:10px}
  .hero-arrow{width:40px;height:40px;font-size:1.7rem}
  .hero-prev{left:4px}.hero-next{right:4px}
  .module .image-panel img{height:320px}
  .shot-card{min-width:min(92vw,640px)}
  .shot-card img{height:280px}
  .stack-gallery .gallery-track{min-height:380px;padding-top:10px}
  .stack-gallery .shot-card{width:min(92vw,540px)}
  .stack-gallery .shot-card img{height:250px}
  .stack-gallery .shot-card.is-prev{transform:translate(-50%,-50%) translateX(-10%) rotate(-4deg) scale(.84)}
  .stack-gallery .shot-card.is-next{transform:translate(-50%,-50%) translateX(10%) rotate(4deg) scale(.84)}
}


/* v5.2.7: corrección puntual solicitada: logo transparente en header sin tocar hero */
.site-header .brand{gap:0}
.site-header .brand-mark{display:none}
.site-header .brand-logo{display:block;height:40px;width:auto;max-width:220px}
@media(max-width:640px){.site-header .brand-logo{height:32px;max-width:175px}}
.saas-diagram{background:linear-gradient(180deg,#fff,#f7fbff)}
.saas-diagram img{background:transparent}


/* v5.2.10: video discreto de activos en hero, bajo demanda y sin icono de play */
.browser-shot[data-video-src]{cursor:pointer;}
.qnd-video-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(4,12,25,.88);
  backdrop-filter:blur(12px);
}
.qnd-video-lightbox.open{display:flex;}
.qnd-video-shell{
  position:relative;
  width:min(94vw,1280px);
  border-radius:24px;
  overflow:hidden;
  background:#071d30;
  box-shadow:0 38px 110px rgba(0,0,0,.54);
  border:1px solid rgba(255,255,255,.16);
}
.qnd-video-shell video{
  display:block;
  width:100%;
  max-height:82vh;
  background:#071d30;
}
.qnd-video-lightbox .qnd-video-close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:2;
  border:0;
  border-radius:999px;
  width:44px;
  height:44px;
  background:#fff;
  color:#071d30;
  font-size:1.45rem;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 42px rgba(0,0,0,.32);
}
@media(max-width:640px){
  .qnd-video-lightbox{padding:12px;}
  .qnd-video-shell{border-radius:16px;}
  .qnd-video-lightbox .qnd-video-close{top:10px;right:10px;width:38px;height:38px;font-size:1.25rem;}
}




/* v5.2.11: actualización de capturas del hero y separador difuminado */
.dark-video::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:10px;
  background:linear-gradient(90deg,
    rgba(205,32,39,1) 0%,
    rgba(205,32,39,.98) 18%,
    rgba(174,38,79,.96) 34%,
    rgba(123,49,127,.93) 56%,
    rgba(74,57,141,.92) 76%,
    rgba(38,58,124,.96) 100%);
  box-shadow:0 0 18px rgba(93,58,136,.22);
}



/* v5.2.12: separador corregido a una sola línea horizontal sin doble capa */
.dark-video::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:9px !important;
  background:linear-gradient(90deg,
    #CD2027 0%,
    #CD2027 22%,
    #9A2E67 46%,
    #5B367D 68%,
    #263A7D 100%
  ) !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
}



/* v5.2.13: módulo de activos más enfocado, sin tira de iconos y comparativa antes/después reforzada */
.module.assets .category-strip{
  display:none !important;
}

.module.assets .module-head{
  grid-template-columns:minmax(320px,.72fr) minmax(520px,1.28fr) !important;
  gap:54px !important;
  align-items:center !important;
}

.module.assets .module-video{
  min-height:430px !important;
  padding:34px 42px !important;
  border-radius:34px !important;
  box-shadow:0 28px 72px rgba(14,32,68,.14) !important;
}

.module.assets .module-video .play{
  width:94px !important;
  height:94px !important;
}

.module.assets .module-video h3{
  font-size:1.18rem !important;
  margin-top:20px !important;
}

.module.assets .module-video p{
  max-width:620px !important;
  margin:14px auto 0 !important;
  line-height:1.55 !important;
}

.module.assets > .container.radial-wrap{
  margin-top:72px !important;
}

.before-after-enhanced{
  margin-top:64px !important;
  border-radius:34px !important;
  overflow:hidden !important;
  box-shadow:0 28px 75px rgba(14,32,68,.13) !important;
  border:1px solid rgba(204,214,226,.82) !important;
}

.before-after-enhanced .before,
.before-after-enhanced .after{
  position:relative !important;
  padding:42px 48px !important;
}

.before-after-enhanced .before{
  background:
    radial-gradient(480px 220px at 12% 10%,rgba(205,32,39,.16),transparent 60%),
    #151d39 !important;
  color:#dbe4f4 !important;
}

.before-after-enhanced .after{
  background:
    radial-gradient(520px 240px at 92% 8%,rgba(38,58,125,.10),transparent 60%),
    #ffffff !important;
  color:#07142d !important;
}

.before-after-enhanced h3{
  margin:16px 0 20px !important;
  font-size:1.75rem !important;
  letter-spacing:-.025em !important;
}

.before-after-enhanced ul{
  margin:0 !important;
  padding-left:1.15rem !important;
}

.before-after-enhanced li{
  margin:10px 0 !important;
  line-height:1.45 !important;
}

.comparison-label{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 13px !important;
  border-radius:999px !important;
  font-size:.73rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

.before .comparison-label{
  color:#ffd6d9 !important;
  background:rgba(205,32,39,.16) !important;
  border:1px solid rgba(205,32,39,.28) !important;
}

.after .comparison-label{
  color:#263A7D !important;
  background:rgba(38,58,125,.08) !important;
  border:1px solid rgba(38,58,125,.16) !important;
}

.comparison-icon{
  width:25px !important;
  height:25px !important;
  border-radius:999px !important;
  display:inline-grid !important;
  place-items:center !important;
  font-size:1.05rem !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.comparison-icon.bad{
  background:#CD2027 !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(205,32,39,.24) !important;
}

.comparison-icon.good{
  background:#263A7D !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(38,58,125,.22) !important;
}

@media(max-width:980px){
  .module.assets .module-head{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .module.assets .module-video{
    min-height:340px !important;
  }
}

@media(max-width:640px){
  .module.assets .module-video{
    min-height:300px !important;
    padding:28px 22px !important;
  }
  .before-after-enhanced .before,
  .before-after-enhanced .after{
    padding:32px 28px !important;
  }
}



/* v5.2.14: imagen protagonista en Activo como núcleo operativo */
.asset-core-showcase{
  margin-top:74px !important;
  display:grid !important;
  grid-template-columns:minmax(640px,1.28fr) minmax(300px,.72fr) !important;
  gap:52px !important;
  align-items:center !important;
}

.asset-core-image{
  border-radius:34px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(204,214,226,.82) !important;
  box-shadow:0 28px 75px rgba(14,32,68,.13) !important;
}

.asset-core-image img{
  width:100% !important;
  height:auto !important;
  display:block !important;
}

.asset-core-copy{
  padding:18px 0 !important;
}

.asset-core-copy .section-title{
  max-width:500px !important;
  margin-top:18px !important;
  font-size:clamp(2.15rem,3.35vw,3.35rem) !important;
  line-height:1.08 !important;
}

@media(max-width:1100px){
  .asset-core-showcase{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
  .asset-core-copy{
    order:-1 !important;
  }
  .asset-core-copy .section-title{
    max-width:760px !important;
  }
}

@media(max-width:640px){
  .asset-core-showcase{
    margin-top:56px !important;
  }
  .asset-core-image{
    border-radius:22px !important;
  }
  .asset-core-copy .section-title{
    font-size:clamp(1.9rem,9vw,2.65rem) !important;
  }
}



/* v5.2.15: marco tecnológico de marca y animación para la imagen del activo centralizado */
.asset-core-showcase{
  width:min(100% - 64px,1440px) !important;
  max-width:1440px !important;
  grid-template-columns:minmax(760px,1.42fr) minmax(280px,.58fr) !important;
  gap:58px !important;
  margin-top:82px !important;
}

.asset-core-image{
  position:relative !important;
  overflow:visible !important;
  padding:22px 24px 28px 18px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  isolation:isolate !important;
}

.asset-core-image::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  left:42px !important;
  right:-18px !important;
  top:34px !important;
  bottom:0 !important;
  border-radius:42px !important;
  background:
    radial-gradient(620px 360px at 18% 22%,rgba(205,32,39,.34),transparent 58%),
    radial-gradient(720px 420px at 88% 18%,rgba(24,167,216,.22),transparent 60%),
    linear-gradient(135deg,#071D30 0%,#263A7D 54%,#0B3048 100%) !important;
  box-shadow:0 34px 85px rgba(7,29,48,.24) !important;
  transform:rotate(-1.2deg) translateY(10px) scale(.985) !important;
  opacity:.96 !important;
}

.asset-core-image::after{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  left:62px !important;
  right:8px !important;
  top:54px !important;
  bottom:20px !important;
  border-radius:36px !important;
  opacity:.20 !important;
  background-image:
    linear-gradient(120deg,rgba(255,255,255,.18) 1px,transparent 1px),
    linear-gradient(30deg,rgba(255,255,255,.13) 1px,transparent 1px),
    radial-gradient(circle at 18% 32%,rgba(255,255,255,.28) 0 2px,transparent 3px),
    radial-gradient(circle at 78% 64%,rgba(255,255,255,.20) 0 2px,transparent 3px) !important;
  background-size:92px 92px,92px 92px,140px 140px,160px 160px !important;
  transform:rotate(-1.2deg) !important;
}

.asset-core-image img{
  position:relative !important;
  z-index:1 !important;
  border-radius:30px !important;
  background:#fff !important;
  box-shadow:0 30px 86px rgba(14,32,68,.20) !important;
  transform:translateY(24px) scale(.965) !important;
  opacity:.88 !important;
  will-change:transform,opacity !important;
}

.asset-core-showcase.visible .asset-core-image img{
  animation:qndAssetImageRise .95s cubic-bezier(.18,.82,.24,1) .08s forwards !important;
}

.asset-core-showcase.visible .asset-core-image::before{
  animation:qndAssetFrameRise .95s cubic-bezier(.18,.82,.24,1) forwards !important;
}

.asset-core-image:hover img{
  transform:translateY(-6px) scale(1.035) !important;
  transition:transform .55s ease, box-shadow .55s ease !important;
  box-shadow:0 38px 96px rgba(14,32,68,.24) !important;
}

@keyframes qndAssetImageRise{
  0%{opacity:.78;transform:translateY(34px) scale(.94)}
  70%{opacity:1;transform:translateY(-4px) scale(1.028)}
  100%{opacity:1;transform:translateY(0) scale(1.018)}
}

@keyframes qndAssetFrameRise{
  0%{opacity:.55;transform:rotate(-1.2deg) translateY(28px) scale(.955)}
  100%{opacity:.96;transform:rotate(-1.2deg) translateY(10px) scale(.985)}
}

.asset-core-copy .section-title{
  max-width:470px !important;
}

@media(max-width:1100px){
  .asset-core-showcase{
    width:min(100% - 36px,980px) !important;
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
  .asset-core-image{
    padding:18px 16px 24px 12px !important;
  }
  .asset-core-image::before{
    left:30px !important;
    right:-8px !important;
    top:28px !important;
    bottom:0 !important;
  }
}

@media(max-width:640px){
  .asset-core-showcase{
    width:min(100% - 28px,640px) !important;
    margin-top:58px !important;
  }
  .asset-core-image{
    padding:12px 10px 18px 8px !important;
  }
  .asset-core-image::before{
    left:22px !important;
    right:-4px !important;
    top:22px !important;
    border-radius:26px !important;
  }
  .asset-core-image::after{display:none !important;}
  .asset-core-image img{border-radius:20px !important;}
}



/* v5.2.16: imagen opaca sobre tarjeta blanca y entrada tipo fade-in sobre marco tecnológico */
.asset-core-showcase{
  width:min(100% - 56px,1480px) !important;
  max-width:1480px !important;
  grid-template-columns:minmax(840px,1.5fr) minmax(250px,.5fr) !important;
  gap:62px !important;
}

.asset-core-image{
  min-height:720px !important;
  padding:8px 8px 40px 8px !important;
}

.asset-core-image::before{
  left:54px !important;
  right:-8px !important;
  top:24px !important;
  bottom:20px !important;
  border-radius:44px !important;
  background:
    radial-gradient(700px 400px at 12% 18%, rgba(205,32,39,.30), transparent 58%),
    radial-gradient(580px 340px at 88% 18%, rgba(24,167,216,.16), transparent 58%),
    linear-gradient(135deg,#06172b 0%, #1d2d63 32%, #263A7D 56%, #0c3048 100%) !important;
  box-shadow:0 36px 96px rgba(7,29,48,.24) !important;
  transform:rotate(-1.35deg) translateY(6px) scale(1) !important;
  opacity:1 !important;
}

.asset-core-image::after{
  left:76px !important;
  right:18px !important;
  top:52px !important;
  bottom:42px !important;
  border-radius:36px !important;
  opacity:.18 !important;
  background-image:
    radial-gradient(circle at 10% 16%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    linear-gradient(120deg, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(60deg, rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 84% 78%, rgba(255,255,255,.10) 0 110px, transparent 111px) !important;
  background-size:160px 160px, 180px 180px, 88px 88px, 88px 88px, 100% 100% !important;
}

.asset-core-image img{
  position:relative !important;
  z-index:2 !important;
  width:calc(100% - 86px) !important;
  margin:0 0 0 0 !important;
  background:#ffffff !important;
  padding:18px !important;
  border:1px solid rgba(210,220,233,.95) !important;
  border-radius:30px !important;
  box-sizing:border-box !important;
  box-shadow:0 30px 86px rgba(14,32,68,.22) !important;
  opacity:0 !important;
  transform:translate(10px, 34px) scale(.965) !important;
  filter:saturate(1.01) !important;
  will-change:transform,opacity !important;
}

.asset-core-showcase.visible .asset-core-image img{
  animation:qndAssetImageFadeIn 1.08s cubic-bezier(.18,.82,.24,1) .12s forwards !important;
}

.asset-core-showcase.visible .asset-core-image::before{
  animation:qndAssetFrameGlow .92s cubic-bezier(.18,.82,.24,1) forwards !important;
}

.asset-core-image:hover img{
  transform:translate(0,-4px) scale(1.024) !important;
  transition:transform .55s ease, box-shadow .55s ease !important;
  box-shadow:0 38px 98px rgba(14,32,68,.25) !important;
}

@keyframes qndAssetImageFadeIn{
  0%{opacity:0;transform:translate(18px, 46px) scale(.945)}
  60%{opacity:1;transform:translate(0, -2px) scale(1.01)}
  100%{opacity:1;transform:translate(0, 0) scale(1)}
}

@keyframes qndAssetFrameGlow{
  0%{filter:brightness(.92);transform:rotate(-1.35deg) translateY(18px) scale(.975)}
  100%{filter:brightness(1);transform:rotate(-1.35deg) translateY(6px) scale(1)}
}

@media(max-width:1100px){
  .asset-core-showcase{
    width:min(100% - 36px,1040px) !important;
    grid-template-columns:1fr !important;
    gap:36px !important;
  }
  .asset-core-image{
    min-height:auto !important;
    padding:8px 8px 28px 8px !important;
  }
  .asset-core-image::before{
    left:34px !important;
    right:-4px !important;
    top:20px !important;
    bottom:12px !important;
  }
  .asset-core-image::after{
    left:48px !important;
    right:10px !important;
    top:38px !important;
    bottom:26px !important;
  }
  .asset-core-image img{
    width:calc(100% - 42px) !important;
    padding:14px !important;
  }
}

@media(max-width:640px){
  .asset-core-showcase{
    width:min(100% - 24px,680px) !important;
    gap:28px !important;
  }
  .asset-core-image{
    padding:6px 6px 18px 6px !important;
  }
  .asset-core-image::before{
    left:18px !important;
    right:-2px !important;
    top:14px !important;
    bottom:8px !important;
    border-radius:26px !important;
  }
  .asset-core-image::after{
    display:none !important;
  }
  .asset-core-image img{
    width:calc(100% - 18px) !important;
    padding:10px !important;
    border-radius:20px !important;
  }
}



/* v5.2.17: fix de visibilidad para que la imagen principal siempre aparezca */
.asset-core-image img{
  opacity:1 !important;
  visibility:visible !important;
  display:block !important;
  transform:translate(0, 0) scale(1) !important;
}

.asset-core-showcase.reveal .asset-core-image img{
  opacity:1 !important;
  visibility:visible !important;
}

.asset-core-showcase.visible .asset-core-image img{
  animation:qndAssetImageFadeInFixed .95s cubic-bezier(.18,.82,.24,1) .08s both !important;
}

@keyframes qndAssetImageFadeInFixed{
  0%{opacity:.01; transform:translate(16px, 36px) scale(.965)}
  55%{opacity:1; transform:translate(0, -2px) scale(1.008)}
  100%{opacity:1; transform:translate(0, 0) scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .asset-core-showcase.visible .asset-core-image img{
    animation:none !important;
    opacity:1 !important;
    transform:translate(0,0) scale(1) !important;
  }
}



/* v5.2.18: ajuste fino del frame de activo, imagen sin marco y entrada real por scroll */
.asset-core-showcase{
  width:min(100% - 64px,1420px) !important;
  max-width:1420px !important;
  grid-template-columns:minmax(760px,1.34fr) minmax(330px,.66fr) !important;
  gap:54px !important;
  align-items:center !important;
}

.asset-core-image{
  min-height:610px !important;
  padding:0 0 32px 0 !important;
  overflow:visible !important;
}

/* Fondo tecnológico más contenido: funciona como respaldo visual, no como bloque dominante */
.asset-core-image::before{
  left:102px !important;
  right:18px !important;
  top:58px !important;
  bottom:72px !important;
  border-radius:36px !important;
  background:
    radial-gradient(540px 300px at 14% 20%, rgba(205,32,39,.25), transparent 58%),
    radial-gradient(520px 320px at 88% 20%, rgba(24,167,216,.14), transparent 60%),
    linear-gradient(135deg,#071D30 0%,#203772 52%,#0B3048 100%) !important;
  box-shadow:0 28px 72px rgba(7,29,48,.22) !important;
  transform:rotate(-1deg) translateY(8px) scale(.98) !important;
  transform-origin:center !important;
  opacity:.98 !important;
}

.asset-core-image::after{
  left:126px !important;
  right:44px !important;
  top:82px !important;
  bottom:98px !important;
  border-radius:30px !important;
  opacity:.15 !important;
  transform:rotate(-1deg) scale(.98) !important;
}

/* Imagen principal sin marco/padding alrededor */
.asset-core-image img{
  position:relative !important;
  z-index:2 !important;
  width:calc(100% - 86px) !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  border-radius:24px !important;
  box-shadow:0 28px 78px rgba(14,32,68,.20) !important;
  opacity:0 !important;
  visibility:visible !important;
  display:block !important;
  transform:translate(34px,42px) scale(.965) !important;
  will-change:transform,opacity !important;
}

.asset-core-showcase.qnd-asset-in .asset-core-image img{
  animation:qndAssetArriveClean 1.05s cubic-bezier(.18,.82,.24,1) .12s forwards !important;
}

.asset-core-image:hover img{
  transform:translate(0,-4px) scale(1.022) !important;
  transition:transform .55s ease, box-shadow .55s ease !important;
  box-shadow:0 34px 90px rgba(14,32,68,.24) !important;
}

@keyframes qndAssetArriveClean{
  0%{opacity:0;transform:translate(40px,48px) scale(.955)}
  62%{opacity:1;transform:translate(-2px,-3px) scale(1.008)}
  100%{opacity:1;transform:translate(0,0) scale(1)}
}

/* Texto al tamaño del resto de encabezados del módulo */
.asset-core-copy .section-title{
  max-width:520px !important;
  font-size:clamp(2rem,2.65vw,2.85rem) !important;
  line-height:1.11 !important;
  letter-spacing:-.035em !important;
}

@media(max-width:1100px){
  .asset-core-showcase{
    width:min(100% - 36px,1040px) !important;
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
  .asset-core-image{
    min-height:auto !important;
    padding:0 0 26px 0 !important;
  }
  .asset-core-image::before{
    left:46px !important;
    right:0 !important;
    top:36px !important;
    bottom:34px !important;
  }
  .asset-core-image::after{
    left:64px !important;
    right:18px !important;
    top:56px !important;
    bottom:54px !important;
  }
  .asset-core-image img{
    width:calc(100% - 36px) !important;
  }
}

@media(max-width:640px){
  .asset-core-showcase{
    width:min(100% - 24px,680px) !important;
  }
  .asset-core-image::before{
    left:22px !important;
    right:0 !important;
    top:24px !important;
    bottom:22px !important;
    border-radius:24px !important;
  }
  .asset-core-image::after{display:none !important;}
  .asset-core-image img{
    width:calc(100% - 16px) !important;
    border-radius:18px !important;
  }
  .asset-core-copy .section-title{
    font-size:clamp(1.9rem,8.2vw,2.45rem) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .asset-core-image img{
    opacity:1 !important;
    transform:translate(0,0) scale(1) !important;
    animation:none !important;
  }
}



/* v5.2.19: entrada lateral real de la imagen principal; sin movimiento al hover */
.asset-core-image:hover img{
  transform:translate(0,0) scale(1) !important;
  box-shadow:0 28px 78px rgba(14,32,68,.20) !important;
}

.asset-core-showcase.qnd-asset-in .asset-core-image img{
  animation:none !important;
}



/* v5.2.20: hero sin flechas laterales, texto más ancho y entrada lateral real del activo */

/* 1) Hero: quitar flechas laterales, mantener solo switch Activos / Mesa de ayuda */
.hero-arrow,
.hero-prev,
.hero-next{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* 2) Hero: dar más aire al bloque de texto para evitar líneas demasiado compactas */
.hero-grid{
  grid-template-columns:minmax(500px,1.02fr) minmax(590px,.98fr) !important;
  gap:42px !important;
}
.hero h1{
  max-width:650px !important;
}
.hero p{
  max-width:650px !important;
}

@media(max-width:1180px){
  .hero-grid{
    grid-template-columns:minmax(440px,.95fr) minmax(520px,1.05fr) !important;
    gap:34px !important;
  }
}
@media(max-width:980px){
  .hero-grid{
    grid-template-columns:1fr !important;
  }
  .hero h1,
  .hero p{
    max-width:760px !important;
  }
}

/* 3) Activo como núcleo operativo: fondo fijo e imagen entrando desde izquierda hacia su posición final */
.asset-core-image::before,
.asset-core-image::after{
  animation:none !important;
}

.asset-core-image img{
  opacity:0 !important;
  visibility:visible !important;
  transform:translateX(-96px) scale(.985) !important;
  transition:none !important;
  will-change:transform,opacity !important;
}

.asset-core-showcase.visible .asset-core-image img{
  animation:qndAssetSlideInFromLeft_v520 1.15s cubic-bezier(.18,.82,.24,1) .12s forwards !important;
}

.asset-core-image:hover img,
.asset-core-showcase.visible .asset-core-image:hover img{
  transform:translateX(0) scale(1) !important;
  transition:none !important;
}

@keyframes qndAssetSlideInFromLeft_v520{
  0%{
    opacity:0;
    transform:translateX(-110px) scale(.985);
  }
  58%{
    opacity:1;
    transform:translateX(8px) scale(1);
  }
  100%{
    opacity:1;
    transform:translateX(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce){
  .asset-core-image img,
  .asset-core-showcase.visible .asset-core-image img{
    animation:none !important;
    opacity:1 !important;
    transform:translateX(0) scale(1) !important;
  }
}



/* v5.2.21: hero con capturas en composición tipo collage, proporción real y transición de intercambio */

/* Más ancho útil en el hero: menos margen lateral sin quitar espacio a las capturas */
.hero .container.hero-grid{
  width:min(100% - 44px,1500px) !important;
  max-width:1500px !important;
  grid-template-columns:minmax(430px,.78fr) minmax(760px,1.22fr) !important;
  gap:44px !important;
}

/* Mantiene el texto más respirado, pero prioriza el área visual */
.hero h1{
  max-width:650px !important;
}
.hero p{
  max-width:600px !important;
}

/* Lienzo visual más grande */
.hero-visual{
  min-height:540px !important;
  overflow:visible !important;
}

/* Sin flechas laterales: solo queda el switch inferior */
.hero-arrow{
  display:none !important;
}

/* Las capturas ya no se recortan: conservan su proporción real */
.browser-shot.hero-shot{
  border:0 !important;
  background:transparent !important;
  height:auto !important;
  overflow:visible !important;
  border-radius:22px !important;
  cursor:pointer !important;
  transition:
    left .9s cubic-bezier(.19,.82,.22,1),
    top .9s cubic-bezier(.19,.82,.22,1),
    width .9s cubic-bezier(.19,.82,.22,1),
    opacity .72s ease,
    filter .72s ease,
    transform .9s cubic-bezier(.19,.82,.22,1),
    box-shadow .72s ease !important;
  will-change:left,top,width,transform,opacity !important;
}

.hero-visual .browser-bar{
  display:none !important;
}

.browser-shot.hero-shot img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  border-radius:20px !important;
  background:#fff !important;
}

/* Estado principal: imagen al frente, grande, arriba-izquierda */
.browser-shot.hero-shot.main{
  z-index:5 !important;
  opacity:1 !important;
  filter:none !important;
  box-shadow:0 30px 78px rgba(0,0,0,.28) !important;
}

/* Estado secundario: imagen detrás, desplazada y todavía visible */
.browser-shot.hero-shot.back{
  z-index:2 !important;
  opacity:.78 !important;
  filter:saturate(.9) brightness(.96) contrast(.96) !important;
  box-shadow:0 22px 58px rgba(0,0,0,.20) !important;
}

/* Composición cuando Activos está al frente */
.browser-shot.hero-shot[data-shot="assets"].main{
  left:0 !important;
  top:2px !important;
  width:74% !important;
  transform:translate3d(0,0,0) scale(1) rotate(0deg) !important;
}

.browser-shot.hero-shot[data-shot="helpdesk"].back{
  left:19% !important;
  top:146px !important;
  width:84% !important;
  transform:translate3d(0,0,0) scale(.965) rotate(0deg) !important;
}

/* Composición cuando Mesa de ayuda está al frente */
.browser-shot.hero-shot[data-shot="helpdesk"].main{
  left:0 !important;
  top:24px !important;
  width:86% !important;
  transform:translate3d(0,0,0) scale(1) rotate(0deg) !important;
}

.browser-shot.hero-shot[data-shot="assets"].back{
  left:24% !important;
  top:138px !important;
  width:66% !important;
  transform:translate3d(0,0,0) scale(.965) rotate(0deg) !important;
}

/* El intercambio se siente como cambio de planos, no como simple ocultar/mostrar */
.hero-visual.is-switching .browser-shot.hero-shot.main{
  animation:qndHeroBringForward .62s cubic-bezier(.19,.82,.22,1) both !important;
}
.hero-visual.is-switching .browser-shot.hero-shot.back{
  animation:qndHeroSendBack .62s cubic-bezier(.19,.82,.22,1) both !important;
}

@keyframes qndHeroBringForward{
  0%{opacity:.78; filter:saturate(.9) brightness(.96); transform:translate3d(20px,22px,0) scale(.94)}
  65%{opacity:1; filter:none; transform:translate3d(-4px,-3px,0) scale(1.012)}
  100%{opacity:1; filter:none}
}

@keyframes qndHeroSendBack{
  0%{opacity:1; filter:none; transform:translate3d(-8px,-6px,0) scale(1)}
  100%{opacity:.78; filter:saturate(.9) brightness(.96) contrast(.96)}
}

/* Switch centrado bajo el collage */
.hero-switch{
  left:50% !important;
  right:auto !important;
  bottom:12px !important;
  transform:translateX(-50%) !important;
  z-index:10 !important;
}

/* Evitar hover que altere la composición del collage */
.browser-shot.hero-shot.main:hover,
.browser-shot.hero-shot.back:hover{
  transform:inherit;
}

/* Responsive */
@media(max-width:1180px){
  .hero .container.hero-grid{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
  .hero h1,
  .hero p{
    max-width:760px !important;
  }
  .hero-visual{
    min-height:560px !important;
  }
}

@media(max-width:760px){
  .hero .container.hero-grid{
    width:min(100% - 28px,760px) !important;
  }
  .hero-visual{
    min-height:430px !important;
  }
  .browser-shot.hero-shot[data-shot="assets"].main{
    width:80% !important;
  }
  .browser-shot.hero-shot[data-shot="helpdesk"].back{
    left:12% !important;
    top:132px !important;
    width:86% !important;
  }
  .browser-shot.hero-shot[data-shot="helpdesk"].main{
    width:92% !important;
  }
  .browser-shot.hero-shot[data-shot="assets"].back{
    left:18% !important;
    top:132px !important;
    width:72% !important;
  }
  .hero-switch{
    bottom:4px !important;
  }
}

@media(max-width:520px){
  .hero-visual{
    min-height:350px !important;
  }
  .hero-switch button{
    font-size:.7rem !important;
    padding:8px 10px !important;
  }
}



/* v5.2.22: ajuste responsive del hero para laptop/intermedios sin perder el diseño aprobado */

/* Escritorio grande: se conserva el diseño v5.2.21 */
@media (max-width:1450px){
  .hero .container.hero-grid{
    width:min(100% - 60px,1380px) !important;
    grid-template-columns:minmax(410px,.82fr) minmax(720px,1.18fr) !important;
    gap:40px !important;
  }

  .hero h1{
    max-width:640px !important;
  }

  .hero p{
    max-width:590px !important;
  }

  .hero-visual{
    min-height:510px !important;
  }

  /* Activos al frente: mantiene proporción, evita que mesa de ayuda se salga */
  .browser-shot.hero-shot[data-shot="assets"].main{
    left:0 !important;
    top:4px !important;
    width:73% !important;
  }

  .browser-shot.hero-shot[data-shot="helpdesk"].back{
    left:17% !important;
    top:142px !important;
    width:78% !important;
  }

  /* Mesa de ayuda al frente: captura rectangular completa dentro del área visual */
  .browser-shot.hero-shot[data-shot="helpdesk"].main{
    left:0 !important;
    top:28px !important;
    width:88% !important;
  }

  .browser-shot.hero-shot[data-shot="assets"].back{
    left:23% !important;
    top:136px !important;
    width:64% !important;
  }

  .hero-switch{
    bottom:8px !important;
  }
}

/* Laptop 13–15 pulgadas / pantallas más justas */
@media (max-width:1280px){
  .hero{
    min-height:640px !important;
    padding-top:88px !important;
    padding-bottom:76px !important;
  }

  .hero .container.hero-grid{
    width:min(100% - 56px,1224px) !important;
    grid-template-columns:minmax(390px,.84fr) minmax(650px,1.16fr) !important;
    gap:34px !important;
  }

  .hero h1{
    max-width:610px !important;
    font-size:clamp(3.25rem,5.2vw,4.9rem) !important;
  }

  .hero p{
    max-width:560px !important;
    font-size:1rem !important;
  }

  .hero-visual{
    min-height:480px !important;
  }

  .browser-shot.hero-shot[data-shot="assets"].main{
    left:0 !important;
    top:10px !important;
    width:72% !important;
  }

  .browser-shot.hero-shot[data-shot="helpdesk"].back{
    left:15% !important;
    top:138px !important;
    width:78% !important;
  }

  .browser-shot.hero-shot[data-shot="helpdesk"].main{
    left:0 !important;
    top:36px !important;
    width:88% !important;
  }

  .browser-shot.hero-shot[data-shot="assets"].back{
    left:22% !important;
    top:132px !important;
    width:62% !important;
  }
}

/* Cuando ya no hay ancho suficiente, se apila: texto arriba, collage abajo */
@media (max-width:1120px){
  .hero .container.hero-grid{
    width:min(100% - 44px,1040px) !important;
    grid-template-columns:1fr !important;
    gap:38px !important;
  }

  .hero h1,
  .hero p{
    max-width:780px !important;
  }

  .hero-visual{
    width:100% !important;
    min-height:520px !important;
  }

  .browser-shot.hero-shot[data-shot="assets"].main{
    left:2% !important;
    top:0 !important;
    width:63% !important;
  }

  .browser-shot.hero-shot[data-shot="helpdesk"].back{
    left:25% !important;
    top:150px !important;
    width:70% !important;
  }

  .browser-shot.hero-shot[data-shot="helpdesk"].main{
    left:2% !important;
    top:18px !important;
    width:82% !important;
  }

  .browser-shot.hero-shot[data-shot="assets"].back{
    left:30% !important;
    top:150px !important;
    width:56% !important;
  }
}

/* Tablet/móvil: conserva idea de superposición sin cortar imágenes */
@media (max-width:760px){
  .hero .container.hero-grid{
    width:min(100% - 28px,760px) !important;
  }

  .hero-visual{
    min-height:430px !important;
  }

  .browser-shot.hero-shot[data-shot="assets"].main{
    left:0 !important;
    top:6px !important;
    width:78% !important;
  }

  .browser-shot.hero-shot[data-shot="helpdesk"].back{
    left:12% !important;
    top:128px !important;
    width:84% !important;
  }

  .browser-shot.hero-shot[data-shot="helpdesk"].main{
    left:0 !important;
    top:32px !important;
    width:94% !important;
  }

  .browser-shot.hero-shot[data-shot="assets"].back{
    left:20% !important;
    top:132px !important;
    width:70% !important;
  }
}



/* v5.2.23: reemplazo de video general por sección-resumen con fondo de flujo y copy integrado */
.flow-summary{
  padding-top:82px !important;
  padding-bottom:86px !important;
  background:linear-gradient(180deg,#f7f9fd 0%, #f3f7fc 100%) !important;
}

.flow-summary-wrap{
  width:min(100% - 48px, 1520px) !important;
  max-width:1520px !important;
}

.flow-summary-stage{
  position:relative !important;
  min-height:560px !important;
  border-radius:36px !important;
  overflow:hidden !important;
  background-image:
    linear-gradient(90deg, rgba(243,246,252,.14) 0%, rgba(246,249,253,.10) 28%, rgba(248,250,254,.28) 48%, rgba(248,250,254,.68) 66%, rgba(250,251,255,.90) 82%, rgba(252,253,255,.98) 100%),
    url("../assets/images/extracted/css/css-img-005.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  box-shadow:0 24px 70px rgba(14,32,68,.08) !important;
  border:1px solid rgba(205,217,231,.58) !important;
}

.flow-summary-copy{
  position:relative !important;
  z-index:2 !important;
  width:min(44%, 660px) !important;
  margin-left:auto !important;
  padding:82px 66px 74px 24px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

.flow-summary-copy .eyebrow{
  background:rgba(255,255,255,.66) !important;
  backdrop-filter:blur(5px) !important;
}

.flow-summary-copy .section-title{
  max-width:620px !important;
  font-size:clamp(2.9rem, 4.9vw, 4.85rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.04em !important;
  margin-top:14px !important;
  color:#071a4f !important;
}

.flow-summary-copy .section-title span{
  color:#2663ff !important;
}

.flow-summary-line{
  width:min(100%, 540px) !important;
  height:2px !important;
  margin:24px 0 26px !important;
  background:linear-gradient(90deg, rgba(38,99,255,.88) 0%, rgba(38,99,255,.42) 48%, rgba(38,99,255,.08) 100%) !important;
  border-radius:999px !important;
}

.flow-summary-copy .section-lead{
  max-width:560px !important;
  font-size:1.02rem !important;
  line-height:1.58 !important;
  color:#414d68 !important;
  margin:0 !important;
}

.flow-summary-closing{
  margin:18px 0 0 !important;
  font-size:1.04rem !important;
  line-height:1.5 !important;
  font-weight:800 !important;
  color:#2663ff !important;
}

@media (max-width:1360px){
  .flow-summary-stage{ min-height:520px !important; }
  .flow-summary-copy{
    width:min(48%, 620px) !important;
    padding:72px 54px 64px 20px !important;
  }
}

@media (max-width:1120px){
  .flow-summary-wrap{
    width:min(100% - 34px, 1040px) !important;
  }
  .flow-summary-stage{
    min-height:unset !important;
    background-image:
      linear-gradient(180deg, rgba(248,250,255,.46) 0%, rgba(248,250,255,.78) 42%, rgba(250,252,255,.92) 100%),
      url("../assets/images/extracted/css/css-img-005.png") !important;
    background-position:left center !important;
  }
  .flow-summary-copy{
    width:min(100%, 760px) !important;
    padding:58px 34px 54px 34px !important;
    margin-left:0 !important;
  }
  .flow-summary-copy .section-title{
    max-width:760px !important;
    font-size:clamp(2.4rem, 6vw, 3.75rem) !important;
  }
  .flow-summary-line{
    width:min(100%, 620px) !important;
  }
}

@media (max-width:760px){
  .flow-summary{ padding-top:58px !important; padding-bottom:64px !important; }
  .flow-summary-wrap{ width:min(100% - 20px, 760px) !important; }
  .flow-summary-stage{ border-radius:26px !important; }
  .flow-summary-copy{ padding:34px 22px 34px 22px !important; }
  .flow-summary-copy .section-title{
    font-size:clamp(2.05rem, 10.5vw, 3rem) !important;
    line-height:1.08 !important;
  }
  .flow-summary-copy .section-lead{
    font-size:.98rem !important;
  }
  .flow-summary-closing{
    font-size:1rem !important;
  }
}



/* v5.2.24: sección web full-width para resumen de control operativo */
.flow-summary.flow-summary-web{
  position:relative !important;
  min-height:620px !important;
  padding:0 !important;
  overflow:hidden !important;
  background-color:#f6f9fe !important;
  background-image:
    linear-gradient(90deg,
      rgba(247,250,255,.06) 0%,
      rgba(247,250,255,.04) 34%,
      rgba(247,250,255,.18) 49%,
      rgba(248,251,255,.62) 64%,
      rgba(250,252,255,.92) 82%,
      rgba(252,253,255,.98) 100%
    ),
    none !important;
}

/* Reusar la imagen ya embebida en la versión anterior */
.flow-summary-web::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:inherit !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* Neutraliza el diseño tipo postal anterior */
.flow-summary-wrap,
.flow-summary-stage{
  display:contents !important;
}

.flow-summary-web .flow-summary-copy,
.flow-summary-web .eyebrow{
  display:none !important;
}

.flow-summary-content{
  position:relative !important;
  z-index:2 !important;
  width:min(43vw, 660px) !important;
  margin-left:auto !important;
  padding:104px 7vw 0 0 !important;
}

.flow-summary-content .section-title{
  max-width:660px !important;
  margin:0 !important;
  color:#07142d !important;
  font-size:clamp(3rem,4.7vw,5rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.045em !important;
}

.flow-summary-content .section-title span{
  color:#2563ff !important;
}

.flow-summary-content .flow-summary-line{
  width:min(100%, 560px) !important;
  height:2px !important;
  margin:26px 0 28px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,
    rgba(37,99,255,.86) 0%,
    rgba(37,99,255,.44) 52%,
    rgba(37,99,255,.06) 100%
  ) !important;
}

.flow-summary-content .section-lead{
  max-width:590px !important;
  margin:0 !important;
  color:#3f4c67 !important;
  font-size:1.06rem !important;
  line-height:1.62 !important;
}

.flow-summary-closing{
  position:absolute !important;
  z-index:2 !important;
  right:7vw !important;
  bottom:72px !important;
  max-width:760px !important;
  margin:0 !important;
  color:#2563ff !important;
  font-size:1.16rem !important;
  line-height:1.4 !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  white-space:normal !important;
}

/* Restaurar el background real, porque arriba se neutraliza para evitar duplicados */
.flow-summary.flow-summary-web{
  background-image:
    linear-gradient(90deg,
      rgba(247,250,255,.04) 0%,
      rgba(247,250,255,.03) 34%,
      rgba(247,250,255,.14) 49%,
      rgba(248,251,255,.58) 64%,
      rgba(250,252,255,.90) 82%,
      rgba(252,253,255,.98) 100%
    ),
    var(--flow-bg-image) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

:root{--flow-bg-image:url("../assets/images/extracted/css/css-img-005.png");}



/* v5.2.25: sección control operativo como bloque web full-width, sin postal */
.flow-summary-web-v2{
  position:relative !important;
  min-height:650px !important;
  padding:0 !important;
  overflow:hidden !important;
  background-image:url("../assets/images/extracted/css/css-img-005.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  isolation:isolate !important;
}

/* Ligero velo solo para legibilidad, sin ocultar el fondo */
.flow-summary-web-v2::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.02) 0%,
      rgba(255,255,255,.00) 34%,
      rgba(255,255,255,.08) 52%,
      rgba(255,255,255,.30) 72%,
      rgba(255,255,255,.54) 100%
    ) !important;
  pointer-events:none !important;
}

.flow-title{
  position:absolute !important;
  z-index:2 !important;
  top:82px !important;
  right:7vw !important;
  width:min(760px, 47vw) !important;
  text-align:center !important;
}

.flow-title h2{
  margin:0 !important;
  color:#CD2027 !important;
  font-size:clamp(3rem, 4.5vw, 5rem) !important;
  line-height:1.16 !important;
  letter-spacing:.035em !important;
  font-weight:800 !important;
  text-shadow:0 2px 18px rgba(255,255,255,.55) !important;
}

.flow-bottom-copy{
  position:absolute !important;
  z-index:2 !important;
  left:50% !important;
  bottom:48px !important;
  transform:translateX(-50%) !important;
  width:min(1120px, 82vw) !important;
  text-align:center !important;
}

.flow-bottom-copy p{
  margin:0 auto !important;
  max-width:1120px !important;
  color:#263A7D !important;
  font-size:clamp(1rem, 1.45vw, 1.55rem) !important;
  line-height:1.42 !important;
  font-weight:650 !important;
  letter-spacing:.035em !important;
  text-shadow:0 2px 16px rgba(255,255,255,.78) !important;
}

.flow-bottom-copy strong{
  display:block !important;
  margin-top:18px !important;
  color:#2563ff !important;
  font-size:clamp(1rem, 1.3vw, 1.35rem) !important;
  line-height:1.35 !important;
  font-weight:900 !important;
  letter-spacing:.005em !important;
  text-shadow:0 2px 14px rgba(255,255,255,.76) !important;
}

@media(max-width:1180px){
  .flow-summary-web-v2{
    min-height:610px !important;
    background-position:42% center !important;
  }
  .flow-title{
    top:70px !important;
    right:5vw !important;
    width:min(680px, 55vw) !important;
  }
  .flow-title h2{
    font-size:clamp(2.7rem, 5.1vw, 4.2rem) !important;
  }
  .flow-bottom-copy{
    width:min(980px, 88vw) !important;
    bottom:44px !important;
  }
}

@media(max-width:820px){
  .flow-summary-web-v2{
    min-height:660px !important;
    background-position:34% center !important;
  }
  .flow-summary-web-v2::before{
    background:linear-gradient(180deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.08) 38%,
      rgba(255,255,255,.70) 100%
    ) !important;
  }
  .flow-title{
    top:52px !important;
    right:24px !important;
    left:24px !important;
    width:auto !important;
    text-align:center !important;
  }
  .flow-title h2{
    font-size:clamp(2.2rem, 8.5vw, 3.5rem) !important;
    line-height:1.08 !important;
  }
  .flow-bottom-copy{
    width:calc(100% - 40px) !important;
    bottom:34px !important;
  }
  .flow-bottom-copy p{
    font-size:.98rem !important;
    line-height:1.48 !important;
    letter-spacing:.01em !important;
  }
  .flow-bottom-copy strong{
    font-size:1rem !important;
  }
}



/* v5.2.26: control operativo full-width con fondo visible y texto reajustado */
.control-flow-section{
  position:relative !important;
  width:100% !important;
  min-height:790px !important;
  padding:0 !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background-image:url("../assets/images/extracted/css/css-img-005.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* Velo mucho más leve: solo suaviza el extremo derecho para texto, sin ocultar la imagen */
.control-flow-section::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 42%,
      rgba(255,255,255,.10) 58%,
      rgba(255,255,255,.36) 74%,
      rgba(255,255,255,.58) 100%
    ) !important;
  pointer-events:none !important;
}

.control-flow-title{
  position:absolute !important;
  z-index:2 !important;
  top:92px !important;
  right:7.5vw !important;
  width:min(720px, 43vw) !important;
  text-align:center !important;
}

.control-flow-title h2{
  margin:0 !important;
  color:#CD2027 !important;
  font-size:clamp(3rem, 3.75vw, 4.75rem) !important;
  line-height:1.16 !important;
  letter-spacing:.025em !important;
  font-weight:850 !important;
  text-shadow:0 2px 18px rgba(255,255,255,.72) !important;
}

.control-flow-copy{
  position:absolute !important;
  z-index:2 !important;
  left:50% !important;
  bottom:54px !important;
  transform:translateX(-50%) !important;
  width:min(1200px, 78vw) !important;
  text-align:center !important;
  padding:0 !important;
}

.control-flow-copy p{
  margin:0 auto !important;
  max-width:1160px !important;
  color:#263A7D !important;
  font-size:clamp(1.03rem, 1.15vw, 1.34rem) !important;
  line-height:1.48 !important;
  font-weight:700 !important;
  letter-spacing:.018em !important;
  text-shadow:0 2px 18px rgba(255,255,255,.82) !important;
}

.control-flow-copy strong{
  display:block !important;
  margin-top:18px !important;
  color:#2563ff !important;
  font-size:clamp(1.03rem, 1.12vw, 1.28rem) !important;
  line-height:1.35 !important;
  font-weight:900 !important;
  letter-spacing:.004em !important;
  text-shadow:0 2px 16px rgba(255,255,255,.80) !important;
}

@media(max-width:1360px){
  .control-flow-section{
    min-height:720px !important;
    background-position:center center !important;
  }
  .control-flow-title{
    top:78px !important;
    right:5vw !important;
    width:min(660px, 48vw) !important;
  }
  .control-flow-title h2{
    font-size:clamp(2.65rem, 4.1vw, 4.1rem) !important;
  }
  .control-flow-copy{
    width:min(1080px, 84vw) !important;
    bottom:46px !important;
  }
}

@media(max-width:980px){
  .control-flow-section{
    min-height:760px !important;
    background-position:38% center !important;
  }
  .control-flow-section::before{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.10) 0%,
        rgba(255,255,255,.06) 44%,
        rgba(255,255,255,.66) 100%
      ) !important;
  }
  .control-flow-title{
    top:54px !important;
    left:24px !important;
    right:24px !important;
    width:auto !important;
  }
  .control-flow-title h2{
    font-size:clamp(2.25rem, 7.8vw, 3.5rem) !important;
    line-height:1.1 !important;
  }
  .control-flow-copy{
    width:calc(100% - 44px) !important;
    bottom:38px !important;
  }
  .control-flow-copy p{
    font-size:1rem !important;
    line-height:1.5 !important;
    letter-spacing:.005em !important;
  }
  .control-flow-copy strong{
    font-size:1rem !important;
  }
}



/* v5.2.27: ajuste fino del bloque "control operativo" según boceto */
.control-flow-section{
  min-height:730px !important;
  background-position:center center !important;
}

.control-flow-section::before{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,.08) 58%,
      rgba(255,255,255,.26) 76%,
      rgba(255,255,255,.42) 100%
    ) !important;
}

.control-flow-title{
  top:72px !important;
  right:5.6vw !important;
  left:auto !important;
  width:min(700px, 42vw) !important;
  text-align:right !important;
}

.control-flow-title h2{
  font-size:clamp(2.6rem, 3.2vw, 4.1rem) !important;
  line-height:1.18 !important;
  letter-spacing:.018em !important;
  font-weight:800 !important;
  text-shadow:0 2px 16px rgba(255,255,255,.68) !important;
}

.control-flow-copy{
  left:50% !important;
  bottom:56px !important;
  transform:translateX(-50%) !important;
  width:min(1180px, 80vw) !important;
  text-align:center !important;
}

.control-flow-copy p{
  max-width:1040px !important;
  margin:0 auto !important;
  color:#30478f !important;
  font-size:clamp(1.02rem, 1vw, 1.18rem) !important;
  line-height:1.34 !important;
  font-weight:500 !important;
  letter-spacing:.02em !important;
  text-shadow:0 2px 16px rgba(255,255,255,.80) !important;
}

.control-flow-copy strong{
  display:none !important;
}

@media(max-width:1360px){
  .control-flow-section{
    min-height:680px !important;
  }
  .control-flow-title{
    top:64px !important;
    right:4.8vw !important;
    width:min(620px, 46vw) !important;
  }
  .control-flow-title h2{
    font-size:clamp(2.35rem, 3.8vw, 3.6rem) !important;
  }
  .control-flow-copy{
    width:min(1040px, 86vw) !important;
    bottom:44px !important;
  }
  .control-flow-copy p{
    max-width:960px !important;
    font-size:clamp(0.98rem, 1.02vw, 1.1rem) !important;
  }
}

@media(max-width:980px){
  .control-flow-section{
    min-height:720px !important;
    background-position:38% center !important;
  }
  .control-flow-title{
    top:46px !important;
    right:22px !important;
    left:22px !important;
    width:auto !important;
    text-align:right !important;
  }
  .control-flow-title h2{
    font-size:clamp(2rem, 6.5vw, 3.1rem) !important;
    line-height:1.12 !important;
  }
  .control-flow-copy{
    width:calc(100% - 42px) !important;
    bottom:34px !important;
  }
  .control-flow-copy p{
    max-width:100% !important;
    font-size:.98rem !important;
    line-height:1.42 !important;
    letter-spacing:.008em !important;
  }
}

@media(max-width:640px){
  .control-flow-section{
    min-height:680px !important;
  }
  .control-flow-title h2{
    font-size:clamp(1.8rem, 8.2vw, 2.65rem) !important;
  }
  .control-flow-copy p{
    font-size:.94rem !important;
  }
}



/* v5.2.28: ajuste de zoom de fondo, título en dos líneas y copy inferior más ancho */
.control-flow-section{
  min-height:720px !important;
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

.control-flow-section::before{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 44%,
      rgba(255,255,255,.05) 60%,
      rgba(255,255,255,.18) 78%,
      rgba(255,255,255,.30) 100%
    ) !important;
}

.control-flow-title{
  top:54px !important;
  right:6.4vw !important;
  width:min(980px, 58vw) !important;
  text-align:right !important;
}

.control-flow-title h2{
  font-size:clamp(2.55rem, 3.05vw, 3.75rem) !important;
  line-height:1.18 !important;
  letter-spacing:.014em !important;
  font-weight:800 !important;
  text-shadow:0 2px 14px rgba(255,255,255,.72) !important;
}

.control-flow-copy{
  left:50% !important;
  bottom:46px !important;
  transform:translateX(-50%) !important;
  width:min(1560px, 88vw) !important;
  text-align:center !important;
}

.control-flow-copy p{
  max-width:1560px !important;
  margin:0 auto !important;
  color:#263A7D !important;
  font-size:clamp(1.08rem, 1.16vw, 1.32rem) !important;
  line-height:1.34 !important;
  font-weight:520 !important;
  letter-spacing:.006em !important;
  text-shadow:0 2px 16px rgba(255,255,255,.82) !important;
}

.control-flow-copy strong{
  display:none !important;
}

@media(max-width:1360px){
  .control-flow-section{
    min-height:670px !important;
    background-size:100% 100% !important;
  }
  .control-flow-title{
    top:48px !important;
    right:5vw !important;
    width:min(820px, 60vw) !important;
  }
  .control-flow-title h2{
    font-size:clamp(2.25rem, 3.45vw, 3.35rem) !important;
  }
  .control-flow-copy{
    width:min(1180px, 90vw) !important;
    bottom:42px !important;
  }
  .control-flow-copy p{
    font-size:clamp(1rem, 1.12vw, 1.18rem) !important;
    line-height:1.36 !important;
  }
}

@media(max-width:980px){
  .control-flow-section{
    min-height:700px !important;
    background-size:cover !important;
    background-position:38% center !important;
  }
  .control-flow-section::before{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.08) 0%,
        rgba(255,255,255,.04) 45%,
        rgba(255,255,255,.66) 100%
      ) !important;
  }
  .control-flow-title{
    top:44px !important;
    right:24px !important;
    left:24px !important;
    width:auto !important;
    text-align:right !important;
  }
  .control-flow-title h2{
    font-size:clamp(1.95rem, 6.6vw, 3rem) !important;
    line-height:1.12 !important;
  }
  .control-flow-copy{
    width:calc(100% - 40px) !important;
    bottom:34px !important;
  }
  .control-flow-copy p{
    max-width:100% !important;
    font-size:.97rem !important;
    line-height:1.42 !important;
    letter-spacing:0 !important;
  }
}

@media(max-width:640px){
  .control-flow-section{
    min-height:660px !important;
  }
  .control-flow-title h2{
    font-size:clamp(1.72rem, 8vw, 2.45rem) !important;
  }
  .control-flow-copy p{
    font-size:.92rem !important;
  }
}



/* v5.2.29: suavizado de fondo + animaciones de entrada para título y copy */
.control-flow-section::before{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.06) 44%,
      rgba(255,255,255,.12) 60%,
      rgba(255,255,255,.26) 78%,
      rgba(255,255,255,.40) 100%
    ) !important;
}

/* Estado inicial del título: entra de derecha a izquierda */
.control-flow-title.reveal{
  opacity:0 !important;
  transform:translateX(90px) !important;
  will-change:transform, opacity !important;
}

.control-flow-title.reveal.visible{
  animation:qndControlTitleIn 1.15s cubic-bezier(.2,.78,.2,1) forwards !important;
}

/* Estado inicial del copy inferior: entra después con fade + zoom tenue */
.control-flow-copy.reveal{
  opacity:0 !important;
  transform:scale(.94) translateY(10px) !important;
  will-change:transform, opacity !important;
}

.control-flow-copy.reveal.visible{
  animation:qndControlCopyIn .95s cubic-bezier(.18,.82,.24,1) .65s forwards !important;
}

@keyframes qndControlTitleIn{
  0%{
    opacity:0;
    transform:translateX(90px);
  }
  72%{
    opacity:1;
    transform:translateX(-4px);
  }
  100%{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes qndControlCopyIn{
  0%{
    opacity:0;
    transform:scale(.94) translateY(10px);
  }
  60%{
    opacity:1;
    transform:scale(1.015) translateY(0);
  }
  100%{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

/* Si el usuario prefiere menos movimiento, mantener visibilidad */
@media (prefers-reduced-motion: reduce){
  .control-flow-title.reveal,
  .control-flow-copy.reveal{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}

/* Ajuste responsive coherente con la animación */
@media(max-width:980px){
  .control-flow-title.reveal{
    transform:translateX(56px) !important;
  }
  @keyframes qndControlTitleIn{
    0%{
      opacity:0;
      transform:translateX(56px);
    }
    72%{
      opacity:1;
      transform:translateX(-2px);
    }
    100%{
      opacity:1;
      transform:translateX(0);
    }
  }
}



/* v5.2.30: fix real de opacidad de fondo y animaciones visibles */

/* La imagen deja de ser background directo para poder bajarle opacidad sin afectar textos */
.control-flow-section{
  position:relative !important;
  background:none !important;
  background-color:#f7faff !important;
  overflow:hidden !important;
  isolation:isolate !important;
  min-height:720px !important;
}

/* Capa real de imagen: aquí sí aplica opacidad, saturación y brillo */
.control-flow-section::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background-image:url("../assets/images/extracted/css/css-img-005.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  opacity:.68 !important;
  filter:saturate(.72) brightness(1.08) contrast(.94) !important;
  pointer-events:none !important;
}

/* Velo suave encima de la imagen para bajar colores sin desaparecerla */
.control-flow-section::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.13) 42%,
      rgba(255,255,255,.22) 62%,
      rgba(255,255,255,.40) 82%,
      rgba(255,255,255,.54) 100%
    ) !important;
  pointer-events:none !important;
}

.control-flow-title,
.control-flow-copy{
  z-index:3 !important;
}

/* Neutraliza el reveal base solo en estos contenedores para que no desaparezcan */
.control-flow-title.reveal,
.control-flow-copy.reveal{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* Estado inicial de los elementos internos, sin !important para que la animación pueda ejecutarse */
.control-flow-title h2{
  opacity:0;
  transform:translateX(110px);
  will-change:transform, opacity;
}

.control-flow-copy p{
  opacity:0;
  transform:scale(.965) translateY(12px);
  will-change:transform, opacity;
}

/* Las animaciones se disparan cuando el observer agrega .visible */
.control-flow-title.reveal.visible h2{
  animation:qndControlTitleSlideIn 1.35s cubic-bezier(.18,.82,.22,1) forwards;
}

.control-flow-copy.reveal.visible p{
  animation:qndControlCopyFadeZoom .95s cubic-bezier(.18,.82,.24,1) .72s forwards;
}

@keyframes qndControlTitleSlideIn{
  0%{opacity:0; transform:translateX(110px);}
  72%{opacity:1; transform:translateX(-5px);}
  100%{opacity:1; transform:translateX(0);}
}

@keyframes qndControlCopyFadeZoom{
  0%{opacity:0; transform:scale(.965) translateY(12px);}
  65%{opacity:1; transform:scale(1.012) translateY(0);}
  100%{opacity:1; transform:scale(1) translateY(0);}
}

/* Fallback: si por cualquier razón no se agrega .visible, los textos aparecen de todos modos */
.control-flow-section:not(:has(.visible)) .control-flow-title h2,
.control-flow-section:not(:has(.visible)) .control-flow-copy p{
  animation:qndControlSafeReveal .9s ease 1.2s forwards;
}

@keyframes qndControlSafeReveal{
  to{opacity:1; transform:none;}
}

@media (prefers-reduced-motion: reduce){
  .control-flow-title h2,
  .control-flow-copy p{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}

@media(max-width:1360px){
  .control-flow-section{
    min-height:670px !important;
  }
  .control-flow-section::before{
    background-size:cover !important;
    background-position:center center !important;
  }
}

@media(max-width:980px){
  .control-flow-section::before{
    opacity:.62 !important;
    background-position:38% center !important;
  }
  .control-flow-section::after{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.22) 0%,
        rgba(255,255,255,.12) 45%,
        rgba(255,255,255,.70) 100%
      ) !important;
  }
  .control-flow-title h2{
    transform:translateX(64px);
  }
  @keyframes qndControlTitleSlideIn{
    0%{opacity:0; transform:translateX(64px);}
    72%{opacity:1; transform:translateX(-3px);}
    100%{opacity:1; transform:translateX(0);}
  }
}



/* v5.2.31: sección estrecha estilo franja, sin animaciones, texto protagonista */
.control-flow-strip {
  position: relative !important;
  width: 100% !important;
  min-height: 255px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f6f8fc !important;
  isolation: isolate !important;
}

.control-flow-strip::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: url("../assets/images/extracted/css/css-img-005.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: .30 !important;
  filter: saturate(.68) brightness(1.05) contrast(.94) !important;
  pointer-events: none !important;
}

.control-flow-strip::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.10) 36%,
      rgba(255,255,255,.16) 60%,
      rgba(255,255,255,.26) 82%,
      rgba(255,255,255,.34) 100%
    ) !important;
  pointer-events: none !important;
}

.control-flow-strip__inner {
  position: relative !important;
  z-index: 2 !important;
  width: min(100% - 56px, 1180px) !important;
  margin: 0 auto !important;
  min-height: 255px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 22px 0 18px !important;
}

.control-flow-strip h2 {
  margin: 0 0 28px !important;
  text-align: center !important;
  color: #d32027 !important;
  font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(2rem, 2.8vw, 3.15rem) !important;
  line-height: 1.08 !important;
  letter-spacing: .01em !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 10px rgba(255,255,255,.40) !important;
  white-space: nowrap !important;
}

.control-flow-strip p {
  margin: 0 auto !important;
  width: min(100%, 960px) !important;
  text-align: left !important;
  color: #111315 !important;
  font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(1.05rem, 1.34vw, 1.28rem) !important;
  line-height: 1.34 !important;
  letter-spacing: .004em !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 10px rgba(255,255,255,.55) !important;
}

.control-flow-strip .reveal,
.control-flow-strip * {
  animation: none !important;
  transition: none !important;
}

@media (max-width: 1280px) {
  .control-flow-strip {
    min-height: 245px !important;
  }
  .control-flow-strip__inner {
    width: min(100% - 40px, 1080px) !important;
    min-height: 245px !important;
  }
  .control-flow-strip h2 {
    font-size: clamp(1.8rem, 3vw, 2.65rem) !important;
    margin-bottom: 24px !important;
  }
  .control-flow-strip p {
    width: min(100%, 900px) !important;
    font-size: clamp(1rem, 1.3vw, 1.16rem) !important;
  }
}

@media (max-width: 900px) {
  .control-flow-strip {
    min-height: 270px !important;
  }
  .control-flow-strip__inner {
    width: calc(100% - 28px) !important;
    min-height: 270px !important;
    padding: 18px 0 18px !important;
  }
  .control-flow-strip h2 {
    white-space: normal !important;
    font-size: clamp(1.55rem, 5.2vw, 2.2rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 18px !important;
  }
  .control-flow-strip p {
    width: 100% !important;
    font-size: .98rem !important;
    line-height: 1.38 !important;
    text-align: center !important;
  }
}



/* v5.2.32: franja un poco más amplia y respirada */
.control-flow-strip {
  min-height: 320px !important;
}

.control-flow-strip::before {
  opacity: .28 !important;
}

.control-flow-strip__inner {
  width: min(100% - 64px, 1240px) !important;
  min-height: 320px !important;
  padding: 34px 0 30px !important;
}

.control-flow-strip h2 {
  margin: 0 0 34px !important;
  font-size: clamp(2.2rem, 3vw, 3.35rem) !important;
  line-height: 1.10 !important;
}

.control-flow-strip p {
  width: min(100%, 1040px) !important;
  font-size: clamp(1.08rem, 1.38vw, 1.34rem) !important;
  line-height: 1.42 !important;
}

/* Laptop / desktop medio */
@media (max-width: 1280px) {
  .control-flow-strip {
    min-height: 300px !important;
  }
  .control-flow-strip__inner {
    width: min(100% - 44px, 1140px) !important;
    min-height: 300px !important;
    padding: 30px 0 26px !important;
  }
  .control-flow-strip h2 {
    margin-bottom: 30px !important;
    font-size: clamp(2rem, 3.1vw, 2.95rem) !important;
  }
  .control-flow-strip p {
    width: min(100%, 980px) !important;
    font-size: clamp(1rem, 1.34vw, 1.2rem) !important;
    line-height: 1.40 !important;
  }
}

/* Tablet / móvil */
@media (max-width: 900px) {
  .control-flow-strip {
    min-height: 295px !important;
  }
  .control-flow-strip__inner {
    width: calc(100% - 28px) !important;
    min-height: 295px !important;
    padding: 24px 0 22px !important;
  }
  .control-flow-strip h2 {
    margin-bottom: 20px !important;
    font-size: clamp(1.7rem, 5.2vw, 2.3rem) !important;
    line-height: 1.14 !important;
  }
  .control-flow-strip p {
    width: 100% !important;
    font-size: .98rem !important;
    line-height: 1.42 !important;
  }
}



/* v5.2.33: integración estética de la franja control operativo */

/* Separador superior suavizado */
.section-divider,
.hero-divider,
.gradient-divider,
.top-accent-line {
  height: 6px !important;
  background: linear-gradient(
    90deg,
    #ef2a2f 0%,
    #ef2a2f 24%,
    #c62a5a 38%,
    #6b3ea6 58%,
    #3348b6 76%,
    #243a8f 100%
  ) !important;
  opacity: .98 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Fallback por si la línea está implementada como pseudo-elemento en alguna sección */
.control-flow-strip {
  position: relative !important;
  min-height: 332px !important;
  background: linear-gradient(180deg, #f6f8fc 0%, #f4f7fb 56%, #f2f5fa 100%) !important;
}

.control-flow-strip::before {
  opacity: .22 !important;
  filter: saturate(.62) brightness(1.06) contrast(.93) !important;
  background-size: cover !important;
  background-position: center center !important;
}

.control-flow-strip::after {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.08) 0%,
      rgba(255,255,255,.12) 48%,
      rgba(244,247,251,.56) 78%,
      rgba(242,245,250,.96) 100%
    ) !important;
}

/* Capa adicional para fundir el fondo con la sección de abajo */
.control-flow-strip .control-flow-strip__inner {
  width: min(100% - 64px, 1280px) !important;
  min-height: 332px !important;
  padding: 38px 0 40px !important;
}

.control-flow-strip h2 {
  color: #18306c !important;
  margin: 0 0 36px !important;
  font-size: clamp(2.1rem, 2.85vw, 3.2rem) !important;
  line-height: 1.10 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 8px rgba(255,255,255,.26) !important;
}

.control-flow-strip p {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  text-align: center !important;
  color: #17191c !important;
  font-size: clamp(1.08rem, 1.26vw, 1.28rem) !important;
  line-height: 1.40 !important;
  letter-spacing: -.005em !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 8px rgba(255,255,255,.26) !important;
}

/* Fade visual hacia la siguiente sección */
.control-flow-strip {
  margin-bottom: -1px !important;
}
.control-flow-strip + section,
.control-flow-strip + .section {
  position: relative !important;
  z-index: 1 !important;
}
.control-flow-strip::after {
  box-shadow: inset 0 -82px 72px -58px rgba(242,245,250,.98) !important;
}

@media (max-width: 1280px) {
  .control-flow-strip {
    min-height: 312px !important;
  }
  .control-flow-strip .control-flow-strip__inner {
    width: min(100% - 44px, 1160px) !important;
    min-height: 312px !important;
    padding: 34px 0 36px !important;
  }
  .control-flow-strip h2 {
    margin-bottom: 30px !important;
    font-size: clamp(1.95rem, 3vw, 2.8rem) !important;
  }
  .control-flow-strip p {
    width: min(100%, 1020px) !important;
    max-width: 1020px !important;
    font-size: clamp(1rem, 1.2vw, 1.16rem) !important;
    line-height: 1.42 !important;
  }
}

@media (max-width: 900px) {
  .control-flow-strip {
    min-height: 286px !important;
  }
  .control-flow-strip .control-flow-strip__inner {
    width: calc(100% - 28px) !important;
    min-height: 286px !important;
    padding: 24px 0 28px !important;
  }
  .control-flow-strip h2 {
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
    margin-bottom: 18px !important;
    white-space: normal !important;
  }
  .control-flow-strip p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: .98rem !important;
    line-height: 1.42 !important;
    text-align: center !important;
  }
}



/* v5.2.34: línea superior difuminada + red más visible e integrada con la siguiente sección */

/* Franja */
.control-flow-strip{
  position: relative !important;
  min-height: 332px !important;
  background: #f2f5fa !important;
  overflow: visible !important;
  margin-bottom: -26px !important;
  z-index: 2 !important;
}

/* Red neuronal más visible y que baja/difumina hacia la siguiente sección */
.control-flow-strip::before{
  inset: 0 0 -76px 0 !important;
  opacity: .34 !important;
  filter: saturate(.74) brightness(1.03) contrast(.97) !important;
  background-size: cover !important;
  background-position: center center !important;
  mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 72%,
    rgba(0,0,0,.72) 86%,
    rgba(0,0,0,0) 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 72%,
    rgba(0,0,0,.72) 86%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* Overlay mucho más sutil y con la línea difuminada arriba */
.control-flow-strip::after{
  background:
    linear-gradient(
      90deg,
      rgba(239,42,47,1) 0%,
      rgba(239,42,47,.98) 18%,
      rgba(215,46,84,.92) 31%,
      rgba(155,58,139,.85) 47%,
      rgba(84,67,183,.92) 68%,
      rgba(36,58,143,1) 100%
    ) top/100% 5px no-repeat,
    linear-gradient(
      180deg,
      rgba(255,255,255,.03) 0%,
      rgba(255,255,255,.05) 42%,
      rgba(242,245,250,.12) 68%,
      rgba(242,245,250,.55) 84%,
      rgba(242,245,250,.94) 100%
    ) !important;
  box-shadow: none !important;
}

/* Contenido: mantener título azul y texto negro como te gustó */
.control-flow-strip .control-flow-strip__inner{
  width: min(100% - 64px, 1280px) !important;
  min-height: 332px !important;
  padding: 40px 0 46px !important;
}

.control-flow-strip h2{
  color: #18306c !important;
  margin: 0 0 36px !important;
  font-size: clamp(2.1rem, 2.85vw, 3.2rem) !important;
  line-height: 1.10 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
}

.control-flow-strip p{
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  text-align: center !important;
  color: #17191c !important;
  font-size: clamp(1.08rem, 1.26vw, 1.28rem) !important;
  line-height: 1.40 !important;
  letter-spacing: -.005em !important;
  font-weight: 800 !important;
}

/* La siguiente sección se monta sutilmente para que no se note un corte duro */
.control-flow-strip + section.section.saas{
  position: relative !important;
  z-index: 3 !important;
  background: linear-gradient(180deg, rgba(242,245,250,.72) 0%, #f2f5fa 20%, #f2f5fa 100%) !important;
  padding-top: 88px !important;
}

/* Responsive */
@media (max-width: 1280px){
  .control-flow-strip{
    min-height: 316px !important;
    margin-bottom: -20px !important;
  }
  .control-flow-strip::before{
    inset: 0 0 -58px 0 !important;
    opacity: .31 !important;
  }
  .control-flow-strip .control-flow-strip__inner{
    width: min(100% - 44px, 1160px) !important;
    min-height: 316px !important;
    padding: 36px 0 42px !important;
  }
  .control-flow-strip h2{
    margin-bottom: 30px !important;
    font-size: clamp(1.95rem, 3vw, 2.8rem) !important;
  }
  .control-flow-strip p{
    width: min(100%, 1020px) !important;
    max-width: 1020px !important;
    font-size: clamp(1rem, 1.2vw, 1.16rem) !important;
  }
  .control-flow-strip + section.section.saas{
    padding-top: 74px !important;
  }
}

@media (max-width: 900px){
  .control-flow-strip{
    min-height: 286px !important;
    margin-bottom: -12px !important;
  }
  .control-flow-strip::before{
    inset: 0 0 -28px 0 !important;
    opacity: .28 !important;
    background-position: 38% center !important;
  }
  .control-flow-strip::after{
    background:
      linear-gradient(
        90deg,
        rgba(239,42,47,1) 0%,
        rgba(239,42,47,.96) 24%,
        rgba(155,58,139,.88) 54%,
        rgba(36,58,143,1) 100%
      ) top/100% 4px no-repeat,
      linear-gradient(
        180deg,
        rgba(255,255,255,.04) 0%,
        rgba(255,255,255,.08) 54%,
        rgba(242,245,250,.84) 100%
      ) !important;
  }
  .control-flow-strip .control-flow-strip__inner{
    width: calc(100% - 28px) !important;
    min-height: 286px !important;
    padding: 24px 0 30px !important;
  }
  .control-flow-strip h2{
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
    margin-bottom: 18px !important;
    white-space: normal !important;
  }
  .control-flow-strip p{
    width: 100% !important;
    max-width: 100% !important;
    font-size: .98rem !important;
    line-height: 1.42 !important;
    text-align: center !important;
  }
  .control-flow-strip + section.section.saas{
    padding-top: 58px !important;
  }
}



/* v5.2.35: copy SaaS reorganizado: título, imagen, texto inferior */
.saas > .container:first-child {
  text-align: left !important;
}

.saas > .container:first-child .section-title {
  max-width: 980px !important;
  margin-bottom: 0 !important;
}

.saas-layout {
  margin-top: 42px !important;
}

.saas-caption {
  margin-top: 26px !important;
  text-align: center !important;
}

.saas-caption p {
  max-width: 980px !important;
  margin: 0 auto !important;
  color: var(--qba-muted) !important;
  font-size: clamp(1.02rem, 1.22vw, 1.22rem) !important;
  line-height: 1.55 !important;
  letter-spacing: .005em !important;
  font-weight: 600 !important;
}

@media (max-width: 900px) {
  .saas > .container:first-child .section-title {
    max-width: 100% !important;
  }

  .saas-layout {
    margin-top: 30px !important;
  }

  .saas-caption {
    margin-top: 20px !important;
  }

  .saas-caption p {
    font-size: .98rem !important;
    line-height: 1.48 !important;
  }
}



/* v5.2.36: se eliminan todos los labels/eyebrows de secciones */
.eyebrow,
.hero-kicker {
  display: none !important;
}

.section-title:first-child,
.module-title:first-child {
  margin-top: 0 !important;
}



/* v5.2.37: tarjetas SaaS bajo imagen de arquitectura */
.saas-cards{
  margin-top: 18px !important;
}

.saas-card-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:24px 28px !important;
}

.saas-info-card{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 112px !important;
  align-items:stretch !important;
  min-height:170px !important;
  background:#fff !important;
  border:1px solid rgba(29,54,111,.10) !important;
  border-left:4px solid #2b6df2 !important;
  border-radius:6px !important;
  overflow:hidden !important;
  box-shadow:0 10px 28px rgba(16,32,74,.08) !important;
}

.saas-info-copy{
  padding:30px 22px 26px 28px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}

.saas-info-copy h3{
  margin:0 0 14px !important;
  color:#16306d !important;
  font-size:clamp(1.05rem,1.26vw,1.28rem) !important;
  line-height:1.18 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
}

.saas-info-copy p{
  margin:0 !important;
  color:#505c77 !important;
  font-size:clamp(.98rem,1.06vw,1.06rem) !important;
  line-height:1.55 !important;
  font-weight:500 !important;
}

.saas-info-icon{
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,#16306d 0%, #1e3f88 100%) !important;
  color:#fff !important;
  min-height:100% !important;
}

.saas-info-icon svg{
  width:58px !important;
  height:58px !important;
  display:block !important;
}

@media (max-width: 1180px){
  .saas-card-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:22px !important;
  }
}

@media (max-width: 720px){
  .saas-card-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .saas-info-card{
    grid-template-columns:minmax(0, 1fr) 98px !important;
    min-height:156px !important;
  }
  .saas-info-copy{
    padding:24px 18px 22px 22px !important;
  }
  .saas-info-icon svg{
    width:52px !important;
    height:52px !important;
  }
}



/* v5.2.38: tarjetas SaaS ajustadas con iconos entregados */
.saas-cards{
  width:min(1320px, calc(100vw - 48px)) !important;
  max-width:min(1320px, calc(100vw - 48px)) !important;
  margin:18px auto 0 !important;
}

.saas-card-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:26px 28px !important;
  align-items:stretch !important;
}

.saas-info-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 116px !important;
  align-items:stretch !important;
  min-height:128px !important;
  background:#fff !important;
  border:1px solid rgba(21,48,108,.10) !important;
  border-left:4px solid #2f6ff3 !important;
  border-radius:6px !important;
  overflow:hidden !important;
  box-shadow:0 10px 24px rgba(17,32,74,.09) !important;
}

.saas-info-copy{
  padding:18px 18px 16px 26px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
}

.saas-info-copy h3{
  margin:0 0 10px !important;
  color:#16306d !important;
  font-size:clamp(1rem, 1.15vw, 1.2rem) !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
}

.saas-info-copy p{
  margin:0 !important;
  color:#4e5974 !important;
  font-size:clamp(.95rem, .98vw, 1rem) !important;
  line-height:1.45 !important;
  font-weight:500 !important;
}

.saas-info-icon{
  background:#173a84 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}

.saas-info-icon img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}

@media (max-width: 1240px){
  .saas-cards{
    width:min(1180px, calc(100vw - 40px)) !important;
    max-width:min(1180px, calc(100vw - 40px)) !important;
  }
  .saas-card-grid{
    gap:22px !important;
  }
  .saas-info-card{
    grid-template-columns:minmax(0,1fr) 104px !important;
    min-height:120px !important;
  }
}

@media (max-width: 980px){
  .saas-card-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:20px !important;
  }
}

@media (max-width: 640px){
  .saas-cards{
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
  }
  .saas-card-grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .saas-info-card{
    grid-template-columns:minmax(0,1fr) 96px !important;
    min-height:116px !important;
  }
  .saas-info-copy{
    padding:16px 16px 14px 20px !important;
  }
}



/* v5.2.39: iconos SaaS embebidos en base64 para que se vean al abrir el HTML local */
.saas-info-icon img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.saas-info-icon {
  overflow: hidden !important;
  background: #173a84 !important;
}



/* v5.2.40: tarjetas SaaS compactas con iconos transparentes proporcionados por el usuario */
.saas-cards{
  width:min(1180px, calc(100vw - 72px)) !important;
  max-width:min(1180px, calc(100vw - 72px)) !important;
  margin:14px auto 0 !important;
}

.saas-card-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:18px 18px !important;
  align-items:stretch !important;
}

.saas-info-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 82px !important;
  align-items:stretch !important;
  min-height:92px !important;
  background:#ffffff !important;
  border:1px solid rgba(21,48,108,.10) !important;
  border-left:4px solid #2f6ff3 !important;
  border-radius:6px !important;
  overflow:hidden !important;
  box-shadow:0 8px 20px rgba(17,32,74,.08) !important;
}

.saas-info-copy{
  padding:14px 14px 12px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
}

.saas-info-copy h3{
  margin:0 0 8px !important;
  color:#16306d !important;
  font-size:clamp(.88rem, .92vw, 1.02rem) !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
}

.saas-info-copy p{
  margin:0 !important;
  color:#4e5974 !important;
  font-size:clamp(.82rem, .82vw, .92rem) !important;
  line-height:1.35 !important;
  font-weight:500 !important;
}

.saas-info-icon{
  background:#173a84 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  overflow:hidden !important;
}

.saas-info-icon img{
  width:48px !important;
  height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  display:block !important;
  object-fit:contain !important;
  image-rendering:auto !important;
  filter:none !important;
}

@media (max-width: 1240px){
  .saas-cards{
    width:min(1080px, calc(100vw - 48px)) !important;
    max-width:min(1080px, calc(100vw - 48px)) !important;
  }
  .saas-card-grid{
    gap:16px !important;
  }
  .saas-info-card{
    grid-template-columns:minmax(0,1fr) 78px !important;
    min-height:88px !important;
  }
  .saas-info-icon img{
    width:42px !important;
    height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
  }
}

@media (max-width: 980px){
  .saas-card-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:16px !important;
  }
}

@media (max-width: 640px){
  .saas-cards{
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
  }
  .saas-card-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .saas-info-card{
    grid-template-columns:minmax(0,1fr) 74px !important;
    min-height:86px !important;
  }
  .saas-info-copy{
    padding:12px 12px 10px 16px !important;
  }
  .saas-info-icon img{
    width:42px !important;
    height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
  }
}



/* v5.2.44: agrandar solo los iconos, manteniendo el ancho de las tarjetas */
.saas-info-card{
  grid-template-columns:minmax(0,1fr) 116px !important;
  min-height:128px !important;
}

.saas-info-icon{
  background:#173a84 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:0 !important;
}

.saas-info-icon img{
  width:64px !important;
  height:64px !important;
  max-width:64px !important;
  max-height:64px !important;
  object-fit:contain !important;
  display:block !important;
}

@media (max-width: 1240px){
  .saas-info-card{
    grid-template-columns:minmax(0,1fr) 104px !important;
    min-height:120px !important;
  }
  .saas-info-icon img{
    width:58px !important;
    height:58px !important;
    max-width:58px !important;
    max-height:58px !important;
  }
}

@media (max-width: 640px){
  .saas-info-card{
    grid-template-columns:minmax(0,1fr) 96px !important;
    min-height:116px !important;
  }
  .saas-info-icon img{
    width:52px !important;
    height:52px !important;
    max-width:52px !important;
    max-height:52px !important;
  }
}



/* v5.2.45: iconos recortados + tarjetas más estrechas + franja azul más angosta */
.saas-cards.container{
  width:min(1040px, calc(100% - 48px)) !important;
}

.saas-card-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
}

.saas-info-card{
  grid-template-columns:minmax(0,1fr) 84px !important;
  min-height:112px !important;
  border-radius:10px !important;
}

.saas-info-copy{
  padding:16px 18px 16px 18px !important;
}

.saas-info-copy h3{
  margin:0 0 6px 0 !important;
  font-size:18px !important;
  line-height:1.12 !important;
}

.saas-info-copy p{
  margin:0 !important;
  font-size:14px !important;
  line-height:1.35 !important;
}

.saas-info-icon{
  background:#173a84 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  overflow:hidden !important;
}

.saas-info-icon img{
  width:58px !important;
  height:58px !important;
  max-width:58px !important;
  max-height:58px !important;
  object-fit:contain !important;
  display:block !important;
}

@media (max-width: 1240px){
  .saas-cards.container{
    width:min(980px, calc(100% - 40px)) !important;
  }
  .saas-card-grid{
    gap:14px !important;
  }
  .saas-info-card{
    grid-template-columns:minmax(0,1fr) 78px !important;
    min-height:108px !important;
  }
  .saas-info-copy{
    padding:15px 16px !important;
  }
  .saas-info-copy h3{
    font-size:17px !important;
  }
  .saas-info-copy p{
    font-size:13.5px !important;
  }
  .saas-info-icon img{
    width:54px !important;
    height:54px !important;
    max-width:54px !important;
    max-height:54px !important;
  }
}

@media (max-width: 980px){
  .saas-cards.container{
    width:min(760px, calc(100% - 32px)) !important;
  }
  .saas-card-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;
  }
}

@media (max-width: 640px){
  .saas-cards.container{
    width:min(100%, calc(100% - 24px)) !important;
  }
  .saas-card-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .saas-info-card{
    grid-template-columns:minmax(0,1fr) 74px !important;
    min-height:104px !important;
  }
  .saas-info-copy{
    padding:14px 15px !important;
  }
  .saas-info-copy h3{
    font-size:16px !important;
  }
  .saas-info-copy p{
    font-size:13px !important;
  }
  .saas-info-icon img{
    width:50px !important;
    height:50px !important;
    max-width:50px !important;
    max-height:50px !important;
  }
}



/* v5.2.46: tarjetas SaaS más horizontales: más anchas y menos altas */
.saas-cards.container{
  width:min(1240px, calc(100% - 42px)) !important;
  max-width:1240px !important;
}

.saas-card-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
}

.saas-info-card{
  grid-template-columns:minmax(0,1fr) 78px !important;
  min-height:88px !important;
  height:88px !important;
  border-radius:9px !important;
  overflow:hidden !important;
}

.saas-info-copy{
  padding:11px 18px 10px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
}

.saas-info-copy h3{
  margin:0 0 4px 0 !important;
  font-size:16.5px !important;
  line-height:1.08 !important;
  letter-spacing:-.01em !important;
}

.saas-info-copy p{
  margin:0 !important;
  font-size:13.25px !important;
  line-height:1.28 !important;
}

.saas-info-icon{
  width:78px !important;
  min-width:78px !important;
  height:88px !important;
  padding:0 !important;
  background:#173a84 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.saas-info-icon img{
  width:56px !important;
  height:56px !important;
  max-width:56px !important;
  max-height:56px !important;
  object-fit:contain !important;
  display:block !important;
}

@media (max-width: 1240px){
  .saas-cards.container{
    width:min(1160px, calc(100% - 36px)) !important;
  }
  .saas-info-card{
    grid-template-columns:minmax(0,1fr) 74px !important;
    min-height:86px !important;
    height:86px !important;
  }
  .saas-info-icon{
    width:74px !important;
    min-width:74px !important;
    height:86px !important;
  }
  .saas-info-icon img{
    width:53px !important;
    height:53px !important;
    max-width:53px !important;
    max-height:53px !important;
  }
  .saas-info-copy{
    padding:10px 16px !important;
  }
  .saas-info-copy h3{
    font-size:15.8px !important;
  }
  .saas-info-copy p{
    font-size:12.9px !important;
  }
}

@media (max-width: 980px){
  .saas-cards.container{
    width:min(820px, calc(100% - 32px)) !important;
  }
  .saas-card-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;
  }
  .saas-info-card{
    height:92px !important;
    min-height:92px !important;
    grid-template-columns:minmax(0,1fr) 78px !important;
  }
  .saas-info-icon{
    width:78px !important;
    min-width:78px !important;
    height:92px !important;
  }
}

@media (max-width: 640px){
  .saas-cards.container{
    width:min(100%, calc(100% - 24px)) !important;
  }
  .saas-card-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .saas-info-card{
    height:auto !important;
    min-height:96px !important;
    grid-template-columns:minmax(0,1fr) 74px !important;
  }
  .saas-info-icon{
    width:74px !important;
    min-width:74px !important;
    height:auto !important;
    min-height:96px !important;
  }
  .saas-info-icon img{
    width:50px !important;
    height:50px !important;
    max-width:50px !important;
    max-height:50px !important;
  }
}



/* v5.2.47: tarjetas más largas + mismos altos + subir iconos indicados */
.saas-cards.container{
  width:min(1328px, calc(100% - 34px)) !important;
  max-width:1328px !important;
}
.saas-card-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
}
.saas-info-card{
  min-height:88px !important;
  height:88px !important;
  grid-template-columns:minmax(0,1fr) 78px !important;
}
.saas-info-icon{
  width:78px !important;
  min-width:78px !important;
  height:88px !important;
}
.saas-info-icon img{
  transform:translateY(0) !important;
}
/* Subir todos excepto 1) Servidor en la nube y 5) Autenticación multifactor */
.saas-card-grid > .saas-info-card:not(:first-child):not(:nth-child(5)) .saas-info-icon img{
  transform:translateY(-7px) !important;
}
@media (max-width: 1240px){
  .saas-cards.container{
    width:min(1240px, calc(100% - 30px)) !important;
    max-width:1240px !important;
  }
}
@media (max-width: 980px){
  .saas-cards.container{
    width:min(820px, calc(100% - 32px)) !important;
  }
}
@media (max-width: 640px){
  .saas-cards.container{
    width:min(100%, calc(100% - 24px)) !important;
  }
  .saas-card-grid > .saas-info-card:not(:first-child):not(:nth-child(5)) .saas-info-icon img{
    transform:translateY(-6px) !important;
  }
}



/* v5.2.48: ensanchar tarjetas SaaS para que el copy no se corte, sin aumentar altura */
.saas-cards.container{
  width:min(1488px, calc(100% - 28px)) !important;
  max-width:1488px !important;
}
.saas-card-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
}
.saas-info-card{
  height:88px !important;
  min-height:88px !important;
  grid-template-columns:minmax(0, 1fr) 78px !important;
}
.saas-info-copy{
  padding:10px 20px 10px 18px !important;
}
.saas-info-copy h3{
  font-size:16.3px !important;
  line-height:1.06 !important;
}
.saas-info-copy p{
  font-size:13.1px !important;
  line-height:1.24 !important;
}
.saas-info-icon{
  width:78px !important;
  min-width:78px !important;
  height:88px !important;
}
/* mantener arriba los iconos indicados */
.saas-card-grid > .saas-info-card:not(:first-child):not(:nth-child(5)) .saas-info-icon img{
  transform:translateY(-7px) !important;
}
@media (max-width: 1320px){
  .saas-cards.container{
    width:min(1260px, calc(100% - 28px)) !important;
    max-width:1260px !important;
  }
}
@media (max-width: 980px){
  .saas-cards.container{
    width:min(860px, calc(100% - 28px)) !important;
  }
  .saas-card-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .saas-info-card{
    height:92px !important;
    min-height:92px !important;
  }
}
@media (max-width: 640px){
  .saas-cards.container{
    width:min(100%, calc(100% - 24px)) !important;
  }
  .saas-card-grid{
    grid-template-columns:1fr !important;
  }
  .saas-info-card{
    height:auto !important;
    min-height:96px !important;
  }
}



/* v5.2.49: ancho real de tarjetas SaaS sin depender del contenedor .container ni del media query anterior */
@media (min-width: 981px){
  .saas-cards.container{
    width:min(1500px, calc(100vw - 40px)) !important;
    max-width:none !important;
    margin-left:50% !important;
    margin-right:0 !important;
    transform:translateX(-50%) !important;
  }
  .saas-card-grid{
    width:100% !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:16px !important;
  }
  .saas-info-card{
    height:88px !important;
    min-height:88px !important;
    grid-template-columns:minmax(0,1fr) 78px !important;
  }
  .saas-info-copy{
    padding:9px 18px 9px 18px !important;
  }
  .saas-info-copy h3{
    font-size:16.1px !important;
    line-height:1.06 !important;
    margin-bottom:4px !important;
  }
  .saas-info-copy p{
    font-size:13px !important;
    line-height:1.2 !important;
  }
  .saas-info-icon{
    width:78px !important;
    min-width:78px !important;
    height:88px !important;
  }
}

/* mantener los iconos que ya estaban bien ubicados */
.saas-card-grid > .saas-info-card:not(:first-child):not(:nth-child(5)) .saas-info-icon img{
  transform:translateY(-7px) !important;
}

@media (min-width: 981px) and (max-width: 1280px){
  .saas-cards.container{
    width:calc(100vw - 24px) !important;
  }
  .saas-info-copy h3{
    font-size:15.8px !important;
  }
  .saas-info-copy p{
    font-size:12.7px !important;
    line-height:1.18 !important;
  }
}

@media (max-width: 980px){
  .saas-cards.container{
    width:min(860px, calc(100% - 28px)) !important;
    max-width:860px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
  }
}



/* v5.2.50: restaurar tamaño del diagrama SaaS y centrar solo las tarjetas anchas */
.saas > .container.saas-layout{
  width:min(1180px, calc(100% - 42px)) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
}

.saas > .container.saas-layout .saas-diagram{
  width:100% !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media (min-width:981px){
  .saas > .container.saas-cards{
    width:min(1500px, calc(100vw - 96px)) !important;
    max-width:1500px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
  }

  .saas > .container.saas-cards .saas-card-grid{
    width:100% !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:16px !important;
  }

  .saas > .container.saas-cards .saas-info-card{
    height:88px !important;
    min-height:88px !important;
    grid-template-columns:minmax(0,1fr) 78px !important;
  }

  .saas > .container.saas-cards .saas-info-copy{
    padding:9px 18px 9px 18px !important;
  }

  .saas > .container.saas-cards .saas-info-copy h3{
    font-size:16.1px !important;
    line-height:1.06 !important;
    margin-bottom:4px !important;
  }

  .saas > .container.saas-cards .saas-info-copy p{
    font-size:13px !important;
    line-height:1.2 !important;
  }

  .saas > .container.saas-cards .saas-info-icon{
    width:78px !important;
    min-width:78px !important;
    height:88px !important;
  }
}

@media (min-width:981px) and (max-width:1280px){
  .saas > .container.saas-cards{
    width:calc(100vw - 48px) !important;
    max-width:none !important;
  }
}

@media (max-width:980px){
  .saas > .container.saas-layout,
  .saas > .container.saas-cards{
    width:min(860px, calc(100% - 28px)) !important;
    max-width:860px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
  }
}



/* v5.2.51: separar definitivamente diagrama y tarjetas.
   El diagrama queda con el ancho original del contenedor SaaS.
   Las tarjetas, aunque están anidadas dentro de saas-layout, se centran respecto al centro del diagrama/página. */
.saas > .container.saas-layout{
  width:min(var(--container), calc(100% - 42px)) !important;
  max-width:var(--container) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
  overflow:visible !important;
  position:relative !important;
}

.saas > .container.saas-layout > .saas-diagram{
  width:100% !important;
  max-width:var(--container) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
}

.saas > .container.saas-layout > .saas-diagram img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

@media (min-width:981px){
  .saas .container.saas-cards{
    width:min(1500px, calc(100vw - 96px)) !important;
    max-width:1500px !important;
    position:relative !important;
    left:50% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    transform:translateX(-50%) !important;
  }

  .saas .container.saas-cards .saas-card-grid{
    width:100% !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:16px !important;
  }

  .saas .container.saas-cards .saas-info-card{
    height:88px !important;
    min-height:88px !important;
    grid-template-columns:minmax(0,1fr) 78px !important;
  }

  .saas .container.saas-cards .saas-info-copy{
    padding:9px 18px 9px 18px !important;
  }

  .saas .container.saas-cards .saas-info-copy h3{
    font-size:16.1px !important;
    line-height:1.06 !important;
    margin-bottom:4px !important;
  }

  .saas .container.saas-cards .saas-info-copy p{
    font-size:13px !important;
    line-height:1.2 !important;
  }

  .saas .container.saas-cards .saas-info-icon{
    width:78px !important;
    min-width:78px !important;
    height:88px !important;
  }
}

@media (min-width:981px) and (max-width:1280px){
  .saas .container.saas-cards{
    width:calc(100vw - 48px) !important;
    max-width:none !important;
  }
}

@media (max-width:980px){
  .saas > .container.saas-layout{
    width:min(860px, calc(100% - 28px)) !important;
    max-width:860px !important;
  }
  .saas .container.saas-cards{
    width:100% !important;
    max-width:100% !important;
    position:static !important;
    left:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
  }
}



/* v5.2.52: centrado real de diagrama y tarjetas SaaS
   Corrección estructural: .saas-cards ya no depende del contenedor .saas-layout. */
section.saas{
  overflow-x:hidden !important;
}

section.saas > .container.saas-layout{
  width:min(1180px, calc(100vw - 84px)) !important;
  max-width:1180px !important;
  margin-top:38px !important;
  margin-left:0 !important;
  margin-right:0 !important;
  position:relative !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  display:block !important;
  overflow:visible !important;
}

section.saas > .container.saas-layout > .saas-diagram{
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  transform:none !important;
}

section.saas > .container.saas-layout > .saas-diagram img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

section.saas > .container.saas-cards{
  width:min(1500px, calc(100vw - 96px)) !important;
  max-width:1500px !important;
  margin-top:42px !important;
  margin-bottom:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  position:relative !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  display:block !important;
  overflow:visible !important;
}

section.saas > .container.saas-cards .saas-card-grid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
}

section.saas > .container.saas-cards .saas-info-card{
  height:88px !important;
  min-height:88px !important;
  grid-template-columns:minmax(0,1fr) 78px !important;
  border-radius:9px !important;
  overflow:hidden !important;
}

section.saas > .container.saas-cards .saas-info-copy{
  padding:9px 18px !important;
  justify-content:center !important;
}

section.saas > .container.saas-cards .saas-info-copy h3{
  font-size:16.1px !important;
  line-height:1.06 !important;
  margin:0 0 4px !important;
}

section.saas > .container.saas-cards .saas-info-copy p{
  font-size:13px !important;
  line-height:1.2 !important;
  margin:0 !important;
}

section.saas > .container.saas-cards .saas-info-icon{
  width:78px !important;
  min-width:78px !important;
  height:88px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#173a84 !important;
}

section.saas > .container.saas-cards .saas-info-icon img{
  width:56px !important;
  height:56px !important;
  max-width:56px !important;
  max-height:56px !important;
  object-fit:contain !important;
  display:block !important;
}

section.saas > .container.saas-cards .saas-card-grid > .saas-info-card:not(:first-child):not(:nth-child(5)) .saas-info-icon img{
  transform:translateY(-7px) !important;
}

@media (max-width:1280px){
  section.saas > .container.saas-layout{
    width:min(1120px, calc(100vw - 56px)) !important;
  }
  section.saas > .container.saas-cards{
    width:min(1180px, calc(100vw - 48px)) !important;
  }
}

@media (max-width:980px){
  section.saas > .container.saas-layout,
  section.saas > .container.saas-cards{
    width:calc(100vw - 32px) !important;
    max-width:none !important;
  }
  section.saas > .container.saas-cards .saas-card-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width:640px){
  section.saas > .container.saas-layout,
  section.saas > .container.saas-cards{
    width:calc(100vw - 24px) !important;
  }
  section.saas > .container.saas-cards .saas-card-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
}



/* v5.2.55: banner separador del módulo de gestión de inventarios recortado desde la parte superior */
.inventory-module-banner{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0;
  overflow:hidden;
  background:#061f34;
  line-height:0;
  box-shadow:0 18px 48px rgba(7,29,48,.10);
}
.inventory-module-banner img{
  width:100%;
  height:clamp(128px,8.2vw,154px);
  object-fit:cover;
  object-position:center 64%;
  display:block;
}
.inventory-module-banner + .module.assets{
  padding-top:clamp(58px,6vw,96px);
}
@media(max-width:760px){
  .inventory-module-banner img{
    height:132px;
    object-position:left 64%;
  }
}
/* v5.2.56: banner separador para inicio del módulo de mesa de ayuda */
.helpdesk-module-banner{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0;
  overflow:hidden;
  background:#061f34;
  line-height:0;
  box-shadow:0 18px 48px rgba(7,29,48,.10);
}
.helpdesk-module-banner img{
  width:100%;
  height:clamp(128px,8.2vw,154px);
  object-fit:cover;
  object-position:center center;
  display:block;
}
.helpdesk-module-banner + .module.helpdesk{
  padding-top:clamp(58px,6vw,96px);
}
@media(max-width:760px){
  .helpdesk-module-banner img{
    height:132px;
    object-position:left center;
  }
}



/* v5.2.57: reestructura del quick overview de gestión de inventarios para dar más protagonismo a la vista previa del video */
.section.module.assets .module-head.assets-overview-head{
  grid-template-columns:minmax(0,1.32fr) minmax(300px,.68fr);
  gap:46px;
  align-items:center;
}
.section.module.assets .assets-overview-copy{
  max-width:440px;
}
.section.module.assets .assets-overview-copy .module-title{
  max-width:11.5ch;
}
.section.module.assets .assets-overview-copy .section-lead{
  margin-top:18px;
  max-width:44ch;
}
.section.module.assets .module-video.module-video-preview{
  position:relative;
  min-height:0;
  padding:24px 28px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:34px;
  background:linear-gradient(180deg,#f9fcff 0%, #eef5fb 100%);
  text-align:left;
  cursor:pointer;
}
.section.module.assets .module-video.module-video-preview img{
  width:min(100%,760px);
  height:auto;
  display:block;
  filter:drop-shadow(0 18px 40px rgba(9,36,73,.18));
}
.section.module.assets .module-video.module-video-preview .preview-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:96px;
  height:96px;
  border-radius:50%;
  background:rgba(205,31,38,.96);
  box-shadow:0 18px 36px rgba(205,31,38,.24);
}
.section.module.assets .module-video.module-video-preview .preview-play::before{
  content:'';
  position:absolute;
  left:39px;
  top:30px;
  width:0;
  height:0;
  border-top:18px solid transparent;
  border-bottom:18px solid transparent;
  border-left:28px solid #fff;
}
.section.module.assets .module-video.module-video-preview .preview-caption{
  position:absolute;
  left:22px;
  bottom:20px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(7,29,48,.78);
  color:#fff;
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.01em;
  backdrop-filter:blur(8px);
}
@media (max-width:1100px){
  .section.module.assets .module-head.assets-overview-head{
    grid-template-columns:1fr;
    gap:28px;
  }
  .section.module.assets .assets-overview-copy{
    max-width:none;
    order:2;
  }
  .section.module.assets .module-video.module-video-preview{
    order:1;
  }
}
@media (max-width:760px){
  .section.module.assets .module-video.module-video-preview{
    padding:18px 14px 26px;
  }
  .section.module.assets .module-video.module-video-preview .preview-play{
    width:76px;
    height:76px;
  }
  .section.module.assets .module-video.module-video-preview .preview-play::before{
    left:31px;
    top:23px;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    border-left:23px solid #fff;
  }
  .section.module.assets .module-video.module-video-preview .preview-caption{
    left:14px;
    right:14px;
    bottom:12px;
    text-align:center;
    border-radius:18px;
  }
}



/* v5.2.58: ajuste de layout del quick overview de gestión de inventarios: copy a la izquierda, video protagonista a la derecha */
.section.module.assets .module-head.assets-overview-head{
  grid-template-columns:minmax(300px,.38fr) minmax(620px,.62fr) !important;
  gap:56px !important;
  align-items:center !important;
}
.section.module.assets .assets-overview-copy{
  max-width:490px !important;
}
.section.module.assets .assets-overview-copy .module-title{
  max-width:14ch !important;
  font-size:var(--h2) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
}
.section.module.assets .assets-overview-copy .section-lead{
  margin-top:20px !important;
  max-width:45ch !important;
  font-size:1.02rem !important;
  line-height:1.65 !important;
}
.section.module.assets .module-video.module-video-preview{
  width:100% !important;
  min-height:0 !important;
  aspect-ratio:1.48 / 1 !important;
  padding:10px !important;
  border-radius:34px !important;
  border:1px solid var(--qba-line) !important;
  background:linear-gradient(180deg,#f9fcff 0%,#eef5fb 100%) !important;
  box-shadow:var(--shadow) !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
}
.section.module.assets .module-video.module-video-preview img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  filter:drop-shadow(0 18px 38px rgba(9,36,73,.20)) !important;
}
.section.module.assets .module-video.module-video-preview .preview-play{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:104px !important;
  height:104px !important;
  border-radius:50% !important;
  background:rgba(205,31,38,.94) !important;
  box-shadow:0 20px 42px rgba(205,31,38,.26) !important;
}
.section.module.assets .module-video.module-video-preview .preview-play::before{
  content:'' !important;
  position:absolute !important;
  left:43px !important;
  top:33px !important;
  width:0 !important;
  height:0 !important;
  border-top:19px solid transparent !important;
  border-bottom:19px solid transparent !important;
  border-left:30px solid #fff !important;
}
.section.module.assets .module-video.module-video-preview .preview-caption{
  display:none !important;
}
@media (max-width:1100px){
  .section.module.assets .module-head.assets-overview-head{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .section.module.assets .assets-overview-copy{
    max-width:720px !important;
  }
  .section.module.assets .module-video.module-video-preview{
    aspect-ratio:1.48 / 1 !important;
  }
}
@media (max-width:760px){
  .section.module.assets .module-video.module-video-preview{
    padding:8px !important;
    border-radius:24px !important;
  }
  .section.module.assets .module-video.module-video-preview .preview-play{
    width:78px !important;
    height:78px !important;
  }
  .section.module.assets .module-video.module-video-preview .preview-play::before{
    left:32px !important;
    top:24px !important;
    border-top:15px solid transparent !important;
    border-bottom:15px solid transparent !important;
    border-left:24px solid #fff !important;
  }
}



/* v5.2.63: estabilización visual de Activo como núcleo operativo.
   Se dejan fijas las dos capas: fondo azul visible + imagen principal, sin animaciones temporales. */
.asset-core-showcase .asset-core-image{
  position:relative !important;
  overflow:visible !important;
  isolation:isolate !important;
}

.asset-core-showcase .asset-core-image::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  left:102px !important;
  right:-8px !important;
  top:58px !important;
  bottom:72px !important;
  border-radius:36px !important;
  background:
    radial-gradient(540px 300px at 14% 20%, rgba(205,32,39,.25), transparent 58%),
    radial-gradient(520px 320px at 88% 20%, rgba(24,167,216,.14), transparent 60%),
    linear-gradient(135deg,#071D30 0%,#203772 52%,#0B3048 100%) !important;
  box-shadow:0 28px 72px rgba(7,29,48,.22) !important;
  transform:rotate(-1deg) translateY(8px) scale(.98) !important;
  opacity:.98 !important;
  animation:none !important;
  transition:none !important;
}

.asset-core-showcase .asset-core-image::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:1 !important;
  left:126px !important;
  right:44px !important;
  top:82px !important;
  bottom:98px !important;
  border-radius:30px !important;
  opacity:.15 !important;
  background-image:
    radial-gradient(circle at 10% 16%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    linear-gradient(120deg, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(60deg, rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 84% 78%, rgba(255,255,255,.10) 0 110px, transparent 111px) !important;
  background-size:160px 160px,180px 180px,88px 88px,88px 88px,100% 100% !important;
  transform:rotate(-1deg) scale(.98) !important;
  animation:none !important;
  transition:none !important;
}

.asset-core-showcase .asset-core-image img,
.asset-core-showcase.visible .asset-core-image img,
.asset-core-showcase.qnd-asset-in .asset-core-image img,
.asset-core-showcase .asset-core-image:hover img,
.asset-core-showcase.visible .asset-core-image:hover img{
  position:relative !important;
  z-index:2 !important;
  opacity:1 !important;
  visibility:visible !important;
  display:block !important;
  transform:translateX(0) translateY(0) scale(1) !important;
  animation:none !important;
  transition:none !important;
  will-change:auto !important;
  box-shadow:0 28px 78px rgba(14,32,68,.20) !important;
}

@media(max-width:1100px){
  .asset-core-showcase .asset-core-image::before{
    left:46px !important;
    right:0 !important;
    top:36px !important;
    bottom:34px !important;
  }
  .asset-core-showcase .asset-core-image::after{
    left:64px !important;
    right:18px !important;
    top:56px !important;
    bottom:54px !important;
  }
}

@media(max-width:640px){
  .asset-core-showcase .asset-core-image::before{
    left:22px !important;
    right:0 !important;
    top:24px !important;
    bottom:22px !important;
    border-radius:24px !important;
  }
  .asset-core-showcase .asset-core-image::after{
    display:none !important;
  }
}



/* v5.2.64: visualización antes/después de inventario congelado a control operativo */
.inventory-control-visual{
  margin-top:clamp(52px,5vw,76px);
}
.inventory-compare-stage{
  position:relative;
  min-height:clamp(420px,36vw,560px);
  display:grid;
  grid-template-columns:minmax(300px,.98fr) minmax(72px,.16fr) minmax(410px,1.22fr);
  align-items:center;
  gap:clamp(18px,2.2vw,34px);
  padding:clamp(34px,4.5vw,64px);
  border:1px solid rgba(139,158,184,.24);
  border-radius:36px;
  overflow:hidden;
  background:linear-gradient(90deg,#fbfbfc 0%,#f7f7f8 47%,#eef5ff 47%,#f7fbff 100%);
  box-shadow:0 26px 72px rgba(14,32,68,.10);
}
.inventory-compare-stage::before{
  content:"";
  position:absolute;
  inset:-18% 41% -18% auto;
  width:19%;
  background:rgba(255,255,255,.62);
  transform:skewX(-13deg);
  z-index:0;
}
.inventory-compare-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 22%,rgba(255,255,255,.88),transparent 26%),
    radial-gradient(circle at 78% 24%,rgba(255,255,255,.78),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0));
  pointer-events:none;
  z-index:0;
}
.inventory-compare-side,
.inventory-flow-arrow{
  position:relative;
  z-index:1;
}
.inventory-compare-side.before-side{
  opacity:.78;
}
.inventory-side-label{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border-radius:999px;
  padding:12px 24px;
  font-size:.88rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  box-shadow:0 12px 28px rgba(14,32,68,.10);
}
.before-side .inventory-side-label{
  background:rgba(34,34,38,.88);
}
.after-side .inventory-side-label{
  background:linear-gradient(135deg,#1d45e8,#0439d8);
}
.inventory-side-label .label-mark{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  font-size:1rem;
  font-weight:900;
}
.inventory-side-title{
  margin:20px 0 22px;
  font-size:clamp(1.04rem,1.35vw,1.34rem);
  font-weight:700;
  color:#323947;
}
.after-side .inventory-side-title{
  color:#0b46df;
  text-align:center;
  margin-bottom:18px;
}
.scattered-doc-card{
  width:min(100%,520px);
  min-height:210px;
  border-radius:18px;
  background:#fff;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:22px;
  padding:30px 34px;
  box-shadow:0 18px 48px rgba(14,32,68,.09);
  border:1px solid rgba(216,224,235,.72);
}
.scattered-file{
  display:grid;
  place-items:center;
  gap:7px;
}
.file-box{
  position:relative;
  width:66px;
  height:66px;
  border-radius:11px;
  background:#fbfcff;
  box-shadow:0 9px 18px rgba(14,32,68,.08);
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  font-size:1.3rem;
}
.file-box.excel{color:#1e9f56;}
.file-box.pdf{color:#cd1f26;}
.file-box.mail{color:#1248ff;}
.file-box.folder{color:#f4aa22;}
.file-box.doc{color:#6c7fa5;}
.file-box::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:-18px;
  height:7px;
  border-radius:999px;
  background:#d7dbe2;
  box-shadow:0 16px 0 #e3e6ec;
  opacity:.9;
}
.inventory-problems{
  display:grid;
  gap:10px;
  margin-top:28px;
  padding:0;
  list-style:none;
}
.inventory-problems li{
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:700;
  color:#414a5e;
}
.problem-x{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:999px;
  background:#878d98;
  color:#fff;
  font-size:1.05rem;
  font-weight:900;
}
.inventory-flow-arrow{
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  justify-self:center;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#0849ff;
  font-size:3.2rem;
  font-weight:900;
  box-shadow:0 20px 46px rgba(14,32,68,.10);
}
.connected-record-card{
  width:min(100%,640px);
  min-height:310px;
  border-radius:20px;
  background:#fff;
  display:grid;
  grid-template-columns:175px 1fr;
  gap:26px;
  padding:30px 30px 30px 24px;
  border:1px solid rgba(216,224,235,.82);
  box-shadow:0 22px 58px rgba(14,32,68,.11);
}
.asset-mini-card{
  min-height:210px;
  align-self:center;
  border-radius:18px;
  background:linear-gradient(180deg,#edf4ff,#f5f8fd);
  display:grid;
  place-items:center;
  padding:22px 18px;
  border:1px solid rgba(208,219,236,.65);
}
.asset-cube{
  position:relative;
  width:72px;
  height:72px;
  margin-bottom:20px;
}
.asset-cube::before{
  content:"";
  position:absolute;
  inset:6px;
  border:5px solid #0b4cff;
  transform:rotate(45deg) skew(-8deg,-8deg);
  border-radius:4px;
}
.asset-mini-lines{
  width:86px;
  display:grid;
  gap:10px;
}
.asset-mini-lines span{
  height:8px;
  border-radius:999px;
  background:#cfd6e3;
}
.connected-list{
  display:grid;
  gap:0;
  align-self:center;
  border-left:1px solid #e7ecf3;
  padding-left:24px;
}
.connected-row{
  display:grid;
  grid-template-columns:38px 1fr 28px;
  align-items:center;
  gap:14px;
  min-height:48px;
  border-bottom:1px solid #eef2f7;
}
.connected-row:last-child{border-bottom:0;}
.connected-icon{
  color:#0b4cff;
  font-size:1.75rem;
  line-height:1;
  text-align:center;
}
.connected-text strong{
  display:block;
  color:#1c2541;
  font-size:1.02rem;
  margin-bottom:7px;
}
.connected-text span{
  display:block;
  width:min(100%,210px);
  height:8px;
  border-radius:999px;
  background:#d9dde5;
}
.check-dot{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:999px;
  border:2px solid #2fb35d;
  color:#2fb35d;
  font-weight:900;
  font-size:.92rem;
}
@media(max-width:1100px){
  .inventory-compare-stage{
    grid-template-columns:1fr;
    gap:26px;
  }
  .inventory-compare-stage::before{display:none;}
  .inventory-flow-arrow{
    transform:rotate(90deg);
    width:70px;
    height:70px;
    font-size:2.7rem;
  }
  .connected-record-card,
  .scattered-doc-card{
    width:100%;
  }
  .after-side .inventory-side-title{text-align:left;}
}
@media(max-width:680px){
  .inventory-compare-stage{
    padding:24px;
    border-radius:28px;
  }
  .scattered-doc-card{
    grid-template-columns:repeat(2,1fr);
    padding:24px;
  }
  .connected-record-card{
    grid-template-columns:1fr;
    padding:24px;
  }
  .connected-list{
    border-left:0;
    padding-left:0;
  }
  .inventory-side-label{
    width:100%;
    justify-content:center;
    padding:12px 16px;
    font-size:.78rem;
  }
}



/* v5.2.66: ajuste de escala de la imagen antes/después para evitar altura excesiva */
.inventory-control-image-section{
  margin-top:48px !important;
  width:min(100% - 64px,920px) !important;
  max-width:920px !important;
}
.inventory-control-image-card{
  margin:0 auto !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:30px !important;
  border:1px solid rgba(204,214,226,.72) !important;
  background:#fff !important;
  box-shadow:0 24px 64px rgba(14,32,68,.11) !important;
}
.inventory-control-image-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}
@media(max-width:1100px){
  .inventory-control-image-section{
    width:min(100% - 48px,880px) !important;
  }
}
@media(max-width:760px){
  .inventory-control-image-section{
    width:min(100% - 28px,920px) !important;
    margin-top:34px !important;
  }
  .inventory-control-image-card{
    border-radius:22px !important;
  }
}



/* v5.2.67: ajuste del fondo azul detrás de la tarjeta de activo centralizado */
.asset-core-image::before{
  left:88px !important;
  right:34px !important;
  top:18px !important;
  bottom:34px !important;
}
.asset-core-image::after{
  left:108px !important;
  right:56px !important;
  top:36px !important;
  bottom:52px !important;
}
@media(max-width:1100px){
  .asset-core-image::before{
    left:54px !important;
    right:20px !important;
    top:16px !important;
    bottom:24px !important;
  }
  .asset-core-image::after{
    left:74px !important;
    right:38px !important;
    top:30px !important;
    bottom:40px !important;
  }
}
@media(max-width:640px){
  .asset-core-image::before{
    left:30px !important;
    right:10px !important;
    top:10px !important;
    bottom:18px !important;
  }
  .asset-core-image::after{
    left:46px !important;
    right:24px !important;
    top:20px !important;
    bottom:30px !important;
  }
}



/* v5.2.68: recorte adicional del alto del fondo azul para desktop medio y pantallas más cerradas */
.asset-core-image::before{
  left:96px !important;
  right:44px !important;
  top:8px !important;
  bottom:78px !important;
}
.asset-core-image::after{
  left:116px !important;
  right:64px !important;
  top:24px !important;
  bottom:94px !important;
}
@media(max-width:1500px){
  .asset-core-image::before{
    left:82px !important;
    right:26px !important;
    top:2px !important;
    bottom:96px !important;
  }
  .asset-core-image::after{
    left:102px !important;
    right:44px !important;
    top:18px !important;
    bottom:112px !important;
  }
}
@media(max-width:1100px){
  .asset-core-image::before{
    left:50px !important;
    right:16px !important;
    top:4px !important;
    bottom:68px !important;
  }
  .asset-core-image::after{
    left:66px !important;
    right:32px !important;
    top:18px !important;
    bottom:84px !important;
  }
}
@media(max-width:640px){
  .asset-core-image::before{
    left:28px !important;
    right:8px !important;
    top:6px !important;
    bottom:30px !important;
  }
  .asset-core-image::after{
    left:42px !important;
    right:20px !important;
    top:16px !important;
    bottom:42px !important;
  }
}



/* v5.2.69: fondo azul más compacto en activo centralizado + ampliación de la imagen principal */
.asset-core-image img{
  cursor:zoom-in !important;
  transition:transform .35s ease, box-shadow .35s ease !important;
}
.asset-core-image:hover img{
  box-shadow:0 34px 92px rgba(14,32,68,.24) !important;
}
.asset-core-image::before{
  left:92px !important;
  right:40px !important;
  top:28px !important;
  bottom:auto !important;
  height:56% !important;
  min-height:300px !important;
  transform:rotate(-1.2deg) translateY(0) scale(1) !important;
}
.asset-core-image::after{
  left:112px !important;
  right:58px !important;
  top:46px !important;
  bottom:auto !important;
  height:46% !important;
  min-height:240px !important;
  transform:rotate(-1.2deg) !important;
}
@media(max-width:1500px), (max-height:920px){
  .asset-core-showcase{
    gap:42px !important;
  }
  .asset-core-image::before{
    left:74px !important;
    right:22px !important;
    top:16px !important;
    height:47% !important;
    min-height:248px !important;
  }
  .asset-core-image::after{
    left:92px !important;
    right:38px !important;
    top:32px !important;
    height:38% !important;
    min-height:192px !important;
  }
}
@media(max-width:1280px), (max-height:820px){
  .asset-core-showcase{
    gap:36px !important;
    grid-template-columns:minmax(620px,1.22fr) minmax(240px,.78fr) !important;
  }
  .asset-core-image::before{
    left:66px !important;
    right:16px !important;
    top:10px !important;
    height:42% !important;
    min-height:210px !important;
  }
  .asset-core-image::after{
    left:82px !important;
    right:32px !important;
    top:26px !important;
    height:33% !important;
    min-height:162px !important;
  }
}
@media(max-width:1100px){
  .asset-core-image::before{
    left:44px !important;
    right:14px !important;
    top:16px !important;
    height:54% !important;
    min-height:220px !important;
  }
  .asset-core-image::after{
    left:60px !important;
    right:28px !important;
    top:32px !important;
    height:44% !important;
    min-height:178px !important;
  }
}
@media(max-width:640px){
  .asset-core-image::before{
    left:26px !important;
    right:8px !important;
    top:12px !important;
    height:40% !important;
    min-height:120px !important;
  }
  .asset-core-image::after{
    left:40px !important;
    right:18px !important;
    top:24px !important;
    height:30% !important;
    min-height:80px !important;
  }
}



/* v5.2.71: fondo azul equilibrado en escritorio y tablet + ayuda visual integrada dentro de la imagen */
.asset-core-image{
  position:relative !important;
}
.asset-core-main-zoom{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  border-radius:30px !important;
  overflow:hidden !important;
  cursor:zoom-in !important;
}
.asset-core-main-zoom::after{
  content:"Clic para ampliar" !important;
  position:absolute !important;
  right:14px !important;
  bottom:14px !important;
  z-index:4 !important;
  padding:7px 11px !important;
  border-radius:999px !important;
  background:rgba(7,29,48,.82) !important;
  color:#fff !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  opacity:0 !important;
  transform:translateY(5px) !important;
  transition:opacity .25s ease,transform .25s ease !important;
  pointer-events:none !important;
}
.asset-core-main-zoom:hover::after,
.asset-core-main-zoom:focus-within::after{
  opacity:1 !important;
  transform:none !important;
}
.asset-core-image img{
  cursor:zoom-in !important;
}
.asset-core-image::before{
  left:74px !important;
  right:16px !important;
  top:34px !important;
  bottom:auto !important;
  height:76% !important;
  min-height:420px !important;
  transform:rotate(-1.2deg) translateY(2px) scale(1) !important;
}
.asset-core-image::after{
  left:94px !important;
  right:36px !important;
  top:54px !important;
  bottom:auto !important;
  height:64% !important;
  min-height:340px !important;
  transform:rotate(-1.2deg) !important;
}
@media(max-width:1600px){
  .asset-core-image::before{
    left:72px !important;
    right:20px !important;
    height:72% !important;
    min-height:390px !important;
  }
  .asset-core-image::after{
    left:92px !important;
    right:38px !important;
    height:60% !important;
    min-height:315px !important;
  }
}
@media(max-width:1400px){
  .asset-core-showcase{
    gap:44px !important;
  }
  .asset-core-image::before{
    left:70px !important;
    right:16px !important;
    top:28px !important;
    height:67% !important;
    min-height:345px !important;
  }
  .asset-core-image::after{
    left:90px !important;
    right:32px !important;
    top:46px !important;
    height:56% !important;
    min-height:280px !important;
  }
}
@media(max-width:1280px){
  .asset-core-showcase{
    gap:38px !important;
  }
  .asset-core-image::before{
    left:62px !important;
    right:14px !important;
    top:20px !important;
    height:59% !important;
    min-height:285px !important;
  }
  .asset-core-image::after{
    left:80px !important;
    right:28px !important;
    top:38px !important;
    height:48% !important;
    min-height:220px !important;
  }
}
@media(max-width:1100px){
  .asset-core-image::before{
    left:44px !important;
    right:14px !important;
    top:16px !important;
    height:60% !important;
    min-height:250px !important;
  }
  .asset-core-image::after{
    left:60px !important;
    right:28px !important;
    top:32px !important;
    height:50% !important;
    min-height:200px !important;
  }
}
@media(max-width:640px){
  .asset-core-main-zoom{
    border-radius:22px !important;
  }
  .asset-core-main-zoom::after{
    right:12px !important;
    bottom:12px !important;
    font-size:.68rem !important;
  }
  .asset-core-image::before{
    left:24px !important;
    right:8px !important;
    top:12px !important;
    height:48% !important;
    min-height:135px !important;
  }
  .asset-core-image::after{
    left:38px !important;
    right:18px !important;
    top:24px !important;
    height:36% !important;
    min-height:96px !important;
  }
}



/* v5.2.72: escala responsiva de la imagen Antes/Después para pantallas pequeñas/cuadradas */
@media(max-width:1440px){
  .inventory-control-image-section{
    width:min(100% - 56px,800px) !important;
    max-width:800px !important;
    margin-top:40px !important;
  }
}
@media(max-width:1280px){
  .inventory-control-image-section{
    width:min(100% - 48px,720px) !important;
    max-width:720px !important;
    margin-top:34px !important;
  }
}
@media(max-width:1280px) and (max-height:850px){
  .inventory-control-image-section{
    width:min(100% - 48px,660px) !important;
    max-width:660px !important;
    margin-top:30px !important;
  }
}
@media(max-width:980px){
  .inventory-control-image-section{
    width:min(100% - 40px,640px) !important;
    max-width:640px !important;
  }
}
@media(max-width:760px){
  .inventory-control-image-section{
    width:min(100% - 28px,560px) !important;
    max-width:560px !important;
    margin-top:28px !important;
  }
}



/* v5.2.73: reemplazo de botones por imagen full-width de áreas de inventario */
.inventory-areas-section{
  margin-top:62px !important;
  width:100% !important;
}
.inventory-areas-heading{
  width:min(100% - 64px,1480px) !important;
}
.inventory-areas-title{
  max-width:none !important;
  width:100% !important;
  white-space:nowrap !important;
  font-size:clamp(2.05rem,2.55vw,3.05rem) !important;
  line-height:1.08 !important;
}
.inventory-areas-fullwidth{
  width:100vw !important;
  max-width:none !important;
  margin:36px 0 0 calc(50% - 50vw) !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
.inventory-areas-fullwidth img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
@media(max-width:1380px){
  .inventory-areas-title{
    white-space:normal !important;
    max-width:1050px !important;
  }
}
@media(max-width:980px){
  .inventory-areas-section{
    margin-top:48px !important;
  }
  .inventory-areas-heading{
    width:min(100% - 36px,980px) !important;
  }
  .inventory-areas-title{
    font-size:clamp(1.9rem,5vw,2.55rem) !important;
  }
  .inventory-areas-fullwidth{
    margin-top:28px !important;
  }
}
@media(max-width:640px){
  .inventory-areas-heading{
    width:min(100% - 28px,640px) !important;
  }
  .inventory-areas-fullwidth{
    margin-top:24px !important;
  }
}



/* v5.2.74: centrar título de áreas y compactar tira full-width de tarjetas */
.inventory-areas-heading{
  width:min(100% - 64px,1580px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}
.inventory-areas-title{
  width:auto !important;
  max-width:1580px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  white-space:nowrap !important;
}
.inventory-areas-fullwidth{
  width:min(calc(100vw - 48px),1580px) !important;
  max-width:1580px !important;
  margin:34px auto 0 !important;
  overflow:visible !important;
}
.inventory-areas-fullwidth img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}
@media(max-width:1600px){
  .inventory-areas-fullwidth{
    width:min(calc(100vw - 56px),1440px) !important;
    max-width:1440px !important;
  }
}
@media(max-width:1400px){
  .inventory-areas-heading{
    width:min(100% - 56px,1180px) !important;
  }
  .inventory-areas-title{
    max-width:1180px !important;
    white-space:normal !important;
  }
  .inventory-areas-fullwidth{
    width:min(calc(100vw - 64px),1180px) !important;
    max-width:1180px !important;
    margin-top:30px !important;
  }
}
@media(max-width:1100px){
  .inventory-areas-heading{
    width:min(100% - 40px,980px) !important;
  }
  .inventory-areas-fullwidth{
    width:min(calc(100vw - 40px),980px) !important;
    max-width:980px !important;
    margin-top:28px !important;
  }
}
@media(max-width:760px){
  .inventory-areas-heading{
    width:min(100% - 28px,720px) !important;
  }
  .inventory-areas-fullwidth{
    width:min(calc(100vw - 24px),720px) !important;
    max-width:720px !important;
    margin-top:24px !important;
  }
}



/* v5.2.75: microinteracción en imagen de activo centralizado + integración visual de tira de áreas */
.asset-core-main-zoom{
  transform-origin:center center !important;
  transition:transform .46s cubic-bezier(.2,.8,.2,1), filter .46s ease, box-shadow .46s ease !important;
  will-change:transform,filter !important;
}
.asset-core-image:hover .asset-core-main-zoom,
.asset-core-main-zoom:focus-within{
  transform:translate3d(-4px,-6px,0) rotate(-.55deg) scale(1.024) !important;
  filter:drop-shadow(0 28px 70px rgba(9,36,73,.22)) !important;
}
.asset-core-image:hover::before{
  filter:saturate(1.06) brightness(1.04) !important;
}
.asset-core-image:hover .asset-core-main-zoom::after{
  opacity:1 !important;
  transform:none !important;
}
.inventory-areas-fullwidth{
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
}
.inventory-areas-fullwidth::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:-46px -84px -58px !important;
  border-radius:44px !important;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 42%, rgba(227,239,250,.54) 68%, rgba(227,239,250,0) 88%),
    radial-gradient(ellipse at 16% 58%, rgba(210,226,242,.52) 0%, rgba(210,226,242,0) 62%),
    radial-gradient(ellipse at 84% 58%, rgba(210,226,242,.52) 0%, rgba(210,226,242,0) 62%) !important;
  filter:blur(10px) !important;
  pointer-events:none !important;
}
.inventory-areas-fullwidth::after{
  content:"" !important;
  position:absolute !important;
  z-index:2 !important;
  inset:-1px !important;
  pointer-events:none !important;
  background:
    linear-gradient(to right, rgba(244,249,253,1) 0%, rgba(244,249,253,.62) 3.5%, rgba(244,249,253,0) 11%, rgba(244,249,253,0) 89%, rgba(244,249,253,.62) 96.5%, rgba(244,249,253,1) 100%),
    linear-gradient(to bottom, rgba(244,249,253,1) 0%, rgba(244,249,253,.52) 5%, rgba(244,249,253,0) 15%, rgba(244,249,253,0) 85%, rgba(244,249,253,.50) 95%, rgba(244,249,253,1) 100%) !important;
}
.inventory-areas-fullwidth img{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  mix-blend-mode:normal !important;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 0%, #000 72%, rgba(0,0,0,.88) 84%, rgba(0,0,0,.22) 96%, transparent 100%) !important;
  mask-image:radial-gradient(ellipse at center, #000 0%, #000 72%, rgba(0,0,0,.88) 84%, rgba(0,0,0,.22) 96%, transparent 100%) !important;
}
@media(max-width:1100px){
  .asset-core-image:hover .asset-core-main-zoom,
  .asset-core-main-zoom:focus-within{
    transform:translate3d(-2px,-4px,0) rotate(-.35deg) scale(1.018) !important;
  }
  .inventory-areas-fullwidth::before{
    inset:-32px -44px -42px !important;
    filter:blur(8px) !important;
  }
  .inventory-areas-fullwidth::after{
    background:
      linear-gradient(to right, rgba(244,249,253,1) 0%, rgba(244,249,253,.56) 2.5%, rgba(244,249,253,0) 9%, rgba(244,249,253,0) 91%, rgba(244,249,253,.56) 97.5%, rgba(244,249,253,1) 100%),
      linear-gradient(to bottom, rgba(244,249,253,1) 0%, rgba(244,249,253,.46) 4%, rgba(244,249,253,0) 12%, rgba(244,249,253,0) 88%, rgba(244,249,253,.46) 96%, rgba(244,249,253,1) 100%) !important;
  }
}
@media(max-width:640px){
  .inventory-areas-fullwidth::before{
    inset:-22px -22px -28px !important;
    border-radius:28px !important;
  }
  .inventory-areas-fullwidth img{
    -webkit-mask-image:radial-gradient(ellipse at center, #000 0%, #000 76%, rgba(0,0,0,.80) 88%, rgba(0,0,0,.28) 97%, transparent 100%) !important;
    mask-image:radial-gradient(ellipse at center, #000 0%, #000 76%, rgba(0,0,0,.80) 88%, rgba(0,0,0,.28) 97%, transparent 100%) !important;
  }
}



/* v5.2.76: fade real de la tira de áreas. La imagen ya trae alpha perimetral; estas reglas evitan que se lea como rectángulo. */
.inventory-areas-fullwidth{
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
  background:transparent !important;
}
.inventory-areas-fullwidth::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:-54px -90px -66px !important;
  border-radius:64px !important;
  pointer-events:none !important;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.90) 0%, rgba(255,255,255,.66) 42%, rgba(223,236,248,.28) 70%, rgba(223,236,248,0) 92%) !important;
  filter:blur(18px) !important;
}
.inventory-areas-fullwidth::after{
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  inset:-2px !important;
  pointer-events:none !important;
  background:
    linear-gradient(to right, rgba(244,249,253,1) 0%, rgba(244,249,253,.94) 2.5%, rgba(244,249,253,.60) 6.5%, rgba(244,249,253,.16) 12.5%, rgba(244,249,253,0) 20%, rgba(244,249,253,0) 80%, rgba(244,249,253,.16) 87.5%, rgba(244,249,253,.60) 93.5%, rgba(244,249,253,.94) 97.5%, rgba(244,249,253,1) 100%),
    linear-gradient(to bottom, rgba(244,249,253,1) 0%, rgba(244,249,253,.70) 3.5%, rgba(244,249,253,.22) 9%, rgba(244,249,253,0) 16%, rgba(244,249,253,0) 84%, rgba(244,249,253,.22) 91%, rgba(244,249,253,.70) 96.5%, rgba(244,249,253,1) 100%) !important;
}
.inventory-areas-fullwidth img{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  background:transparent !important;
  box-shadow:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
@media(max-width:1100px){
  .inventory-areas-fullwidth::before{
    inset:-36px -46px -46px !important;
    filter:blur(13px) !important;
  }
  .inventory-areas-fullwidth::after{
    background:
      linear-gradient(to right, rgba(244,249,253,1) 0%, rgba(244,249,253,.88) 3%, rgba(244,249,253,.38) 9%, rgba(244,249,253,0) 17%, rgba(244,249,253,0) 83%, rgba(244,249,253,.38) 91%, rgba(244,249,253,.88) 97%, rgba(244,249,253,1) 100%),
      linear-gradient(to bottom, rgba(244,249,253,1) 0%, rgba(244,249,253,.58) 4%, rgba(244,249,253,.14) 10%, rgba(244,249,253,0) 17%, rgba(244,249,253,0) 83%, rgba(244,249,253,.14) 90%, rgba(244,249,253,.58) 96%, rgba(244,249,253,1) 100%) !important;
  }
}



/* v5.2.77: fade perimetral más controlado en la tira de áreas.
   Objetivo: disolver solo los bordes sin lavar la primera ni la última tarjeta. */
.inventory-areas-fullwidth{
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
  background:transparent !important;
}
.inventory-areas-fullwidth::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:-30px -36px -36px !important;
  border-radius:52px !important;
  pointer-events:none !important;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.68) 0%, rgba(255,255,255,.38) 44%, rgba(227,239,250,.16) 68%, rgba(227,239,250,0) 88%) !important;
  filter:blur(12px) !important;
}
.inventory-areas-fullwidth::after{
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(to right,
      rgba(244,249,253,1) 0%,
      rgba(244,249,253,.96) 1.2%,
      rgba(244,249,253,.54) 3.1%,
      rgba(244,249,253,.16) 4.9%,
      rgba(244,249,253,0) 7.2%,
      rgba(244,249,253,0) 92.8%,
      rgba(244,249,253,.16) 95.1%,
      rgba(244,249,253,.54) 96.9%,
      rgba(244,249,253,.96) 98.8%,
      rgba(244,249,253,1) 100%) ,
    linear-gradient(to bottom,
      rgba(244,249,253,.96) 0%,
      rgba(244,249,253,.38) 3.4%,
      rgba(244,249,253,.10) 6.2%,
      rgba(244,249,253,0) 9.4%,
      rgba(244,249,253,0) 90.6%,
      rgba(244,249,253,.10) 93.8%,
      rgba(244,249,253,.38) 96.6%,
      rgba(244,249,253,.96) 100%),
    radial-gradient(circle at top left, rgba(244,249,253,.92) 0%, rgba(244,249,253,.38) 10%, rgba(244,249,253,0) 19%),
    radial-gradient(circle at top right, rgba(244,249,253,.92) 0%, rgba(244,249,253,.38) 10%, rgba(244,249,253,0) 19%),
    radial-gradient(circle at bottom left, rgba(244,249,253,.92) 0%, rgba(244,249,253,.34) 10%, rgba(244,249,253,0) 19%),
    radial-gradient(circle at bottom right, rgba(244,249,253,.92) 0%, rgba(244,249,253,.34) 10%, rgba(244,249,253,0) 19%) !important;
}
.inventory-areas-fullwidth img{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
@media(max-width:1100px){
  .inventory-areas-fullwidth::before{
    inset:-22px -24px -26px !important;
    filter:blur(9px) !important;
  }
  .inventory-areas-fullwidth::after{
    background:
      linear-gradient(to right,
        rgba(244,249,253,1) 0%,
        rgba(244,249,253,.92) 1.4%,
        rgba(244,249,253,.44) 3.6%,
        rgba(244,249,253,.12) 5.5%,
        rgba(244,249,253,0) 8.2%,
        rgba(244,249,253,0) 91.8%,
        rgba(244,249,253,.12) 94.5%,
        rgba(244,249,253,.44) 96.4%,
        rgba(244,249,253,.92) 98.6%,
        rgba(244,249,253,1) 100%),
      linear-gradient(to bottom,
        rgba(244,249,253,.94) 0%,
        rgba(244,249,253,.32) 3.4%,
        rgba(244,249,253,.08) 6.0%,
        rgba(244,249,253,0) 9.2%,
        rgba(244,249,253,0) 90.8%,
        rgba(244,249,253,.08) 94.0%,
        rgba(244,249,253,.32) 96.6%,
        rgba(244,249,253,.94) 100%),
      radial-gradient(circle at top left, rgba(244,249,253,.84) 0%, rgba(244,249,253,.26) 10%, rgba(244,249,253,0) 18%),
      radial-gradient(circle at top right, rgba(244,249,253,.84) 0%, rgba(244,249,253,.26) 10%, rgba(244,249,253,0) 18%),
      radial-gradient(circle at bottom left, rgba(244,249,253,.84) 0%, rgba(244,249,253,.24) 10%, rgba(244,249,253,0) 18%),
      radial-gradient(circle at bottom right, rgba(244,249,253,.84) 0%, rgba(244,249,253,.24) 10%, rgba(244,249,253,0) 18%) !important;
  }
}



/* v5.2.78: capa decorativa fija para todo el bloque del módulo de inventario.
   La capa vive entre el banner de inventarios y el banner de mesa de ayuda. */
.inventory-module-shell{
  position:relative !important;
  isolation:isolate !important;
  overflow:clip !important;
  background:#f8fbfe !important;
}
.inventory-module-shell .inventory-fixed-deco{
  position:sticky !important;
  top:0 !important;
  width:100vw !important;
  height:100vh !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-bottom:-100vh !important;
  z-index:0 !important;
  pointer-events:none !important;
  background-image:url("../assets/images/extracted/css/css-img-006.png") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
.inventory-module-shell > .inventory-module-banner,
.inventory-module-shell > .module.assets{
  position:relative !important;
  z-index:2 !important;
}
.inventory-module-shell > .inventory-module-banner{
  z-index:3 !important;
}
.inventory-module-shell > .module.assets{
  background:transparent !important;
}
.inventory-module-shell .module.assets::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(248,251,254,.22) 0%, rgba(248,251,254,.10) 45%, rgba(248,251,254,.20) 100%) !important;
}
@media(max-width:760px){
  .inventory-module-shell .inventory-fixed-deco{
    background-position:center center !important;
    background-size:auto 100vh !important;
  }
}



/* v5.2.79: capa decorativa del módulo de inventario embebida en el HTML.
   Corrige v5.2.78: ya no depende de un PNG externo y usa background-attachment: fixed
   para que el adorno permanezca fijo dentro del bloque visual de inventario. */
.inventory-module-shell{
  position:relative !important;
  isolation:isolate !important;
  overflow:clip !important;
  background-color:#f8fbfe !important;
  background-image:url("../assets/images/extracted/css/css-img-006.png") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  background-attachment:fixed !important;
}
.inventory-module-shell .inventory-fixed-deco{
  display:none !important;
}
.inventory-module-shell > .inventory-module-banner,
.inventory-module-shell > .module.assets{
  position:relative !important;
}
.inventory-module-shell > .inventory-module-banner{
  z-index:3 !important;
}
.inventory-module-shell > .module.assets{
  z-index:2 !important;
  background:transparent !important;
}
.inventory-module-shell > .module.assets::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(248,251,254,.18) 0%, rgba(248,251,254,.08) 45%, rgba(248,251,254,.16) 100%) !important;
}
@media(max-width:760px){
  .inventory-module-shell{
    background-attachment:scroll !important;
    background-size:auto 100vh !important;
    background-position:center top !important;
  }
}



/* v5.2.80: decoración lateral del módulo de inventario usando columnas recortadas.
   Reemplaza la imagen completa por laterales transparentes, pegados a los bordes y con menor presencia visual. */
.inventory-module-shell{
  position:relative !important;
  isolation:isolate !important;
  overflow:clip !important;
  background-color:#f8fbfe !important;
  background-image:url("../assets/images/extracted/css/css-img-007.png"), url("../assets/images/extracted/css/css-img-008.png") !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:left top, right top !important;
  background-size:auto 100vh, auto 100vh !important;
  background-attachment:fixed, fixed !important;
}
.inventory-module-shell .inventory-fixed-deco{
  display:none !important;
}
.inventory-module-shell > .inventory-module-banner,
.inventory-module-shell > .module.assets{
  position:relative !important;
  z-index:2 !important;
}
.inventory-module-shell > .inventory-module-banner{
  z-index:3 !important;
}
.inventory-module-shell > .module.assets{
  background:transparent !important;
}
.inventory-module-shell .module.assets::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(248,251,254,.34) 0%, rgba(248,251,254,.18) 45%, rgba(248,251,254,.34) 100%) !important;
}
@media(max-width:980px){
  .inventory-module-shell{
    background-size:auto 100vh, auto 100vh !important;
    background-position:left top, right top !important;
  }
}
@media(max-width:640px){
  .inventory-module-shell{
    background-size:auto 100vh, auto 100vh !important;
  }
}



/* v5.2.81: carrusel de inventario tipo stack/pila de tarjetas */
.inventory-stack-gallery{
  position:relative !important;
  z-index:4 !important;
  margin-top:clamp(54px,5vw,86px) !important;
  overflow:visible !important;
}
.inventory-stack-head{
  align-items:center !important;
  margin-bottom:16px !important;
}
.inventory-stack-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.inventory-stack-counter{
  min-width:98px !important;
  padding:9px 14px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(38,58,125,.14) !important;
  color:#728098 !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  box-shadow:0 12px 34px rgba(14,32,68,.08) !important;
  backdrop-filter:blur(10px) !important;
}
.inventory-stack-counter strong{
  color:#0b3a84 !important;
  font-size:1.08rem !important;
}
.inventory-stack-gallery .gallery-track{
  position:relative !important;
  display:block !important;
  height:clamp(500px,34vw,600px) !important;
  min-height:0 !important;
  overflow:visible !important;
  scroll-snap-type:none !important;
  padding:8px 0 36px !important;
}
.inventory-stack-gallery .shot-card{
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:min(760px,62vw) !important;
  min-width:0 !important;
  margin:0 !important;
  transform-origin:center center !important;
  cursor:pointer !important;
  will-change:transform,opacity,filter !important;
  transition:transform .62s cubic-bezier(.22,.72,.16,1), opacity .48s ease, filter .48s ease, box-shadow .48s ease !important;
  box-shadow:0 18px 48px rgba(14,32,68,.13) !important;
}
.inventory-stack-gallery .shot-card img{
  height:clamp(330px,26.5vw,430px) !important;
  object-fit:contain !important;
  background:#fff !important;
  padding:8px !important;
}
.inventory-stack-gallery .shot-card figcaption{
  font-size:.95rem !important;
  line-height:1.15 !important;
  background:#fff !important;
  position:relative !important;
  z-index:2 !important;
}
.inventory-stack-gallery .shot-card::before{
  content:"" !important;
  position:absolute !important;
  inset:9px !important;
  border-radius:22px !important;
  border:1px solid rgba(38,58,125,.08) !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.inventory-stack-gallery .shot-card.inventory-pos-0{
  z-index:10 !important;
  opacity:1 !important;
  filter:none !important;
  transform:translateY(-50%) translateX(0) scale(1) !important;
  box-shadow:0 34px 90px rgba(14,32,68,.22) !important;
}
.inventory-stack-gallery .shot-card.inventory-pos-1{
  z-index:9 !important;
  opacity:.82 !important;
  filter:saturate(.94) brightness(.99) !important;
  transform:translateY(-50%) translateX(250px) scale(.91) !important;
}
.inventory-stack-gallery .shot-card.inventory-pos-2{
  z-index:8 !important;
  opacity:.58 !important;
  filter:saturate(.82) brightness(1.03) !important;
  transform:translateY(-50%) translateX(430px) scale(.80) !important;
}
.inventory-stack-gallery .shot-card.inventory-pos-3{
  z-index:7 !important;
  opacity:.34 !important;
  filter:saturate(.72) brightness(1.08) !important;
  transform:translateY(-50%) translateX(575px) scale(.70) !important;
}
.inventory-stack-gallery .shot-card.inventory-pos-back{
  z-index:1 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(-50%) translateX(650px) scale(.64) !important;
}
.inventory-stack-gallery .shot-card.inventory-pos-prev{
  z-index:2 !important;
  opacity:0 !important;
  pointer-events:none !important;
  transform:translateY(-50%) translateX(-110px) scale(.72) !important;
}
.inventory-stack-gallery .shot-card.inventory-pos-0:hover{
  transform:translateY(-51.5%) translateX(0) scale(1.018) rotate(-.25deg) !important;
}
.inventory-stack-gallery .shot-card.inventory-pos-0::after{
  opacity:0 !important;
}
.inventory-stack-gallery .shot-card.inventory-pos-0:hover::after{
  opacity:1 !important;
  transform:none !important;
}
.inventory-stack-gallery .shot-card:not(.inventory-pos-0)::after{
  display:none !important;
}
.inventory-stack-gallery .shot-card:not(.inventory-pos-0) img{
  pointer-events:none !important;
}
.inventory-stack-gallery::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:10px !important;
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(38,58,125,.16), transparent) !important;
  pointer-events:none !important;
}
@media(max-width:1180px){
  .inventory-stack-gallery .shot-card{
    width:min(710px,66vw) !important;
  }
  .inventory-stack-gallery .shot-card.inventory-pos-1{transform:translateY(-50%) translateX(190px) scale(.90) !important;}
  .inventory-stack-gallery .shot-card.inventory-pos-2{transform:translateY(-50%) translateX(330px) scale(.79) !important;}
  .inventory-stack-gallery .shot-card.inventory-pos-3{transform:translateY(-50%) translateX(440px) scale(.69) !important;}
}
@media(max-width:860px){
  .inventory-stack-head{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
  .inventory-stack-controls{justify-content:flex-start !important;}
  .inventory-stack-gallery .gallery-track{
    height:clamp(410px,72vw,500px) !important;
    overflow:hidden !important;
  }
  .inventory-stack-gallery .shot-card{
    left:50% !important;
    width:min(92vw,680px) !important;
  }
  .inventory-stack-gallery .shot-card img{height:clamp(280px,58vw,380px) !important;}
  .inventory-stack-gallery .shot-card.inventory-pos-0{transform:translate(-50%,-50%) scale(1) !important;}
  .inventory-stack-gallery .shot-card.inventory-pos-0:hover{transform:translate(-50%,-51.5%) scale(1.012) !important;}
  .inventory-stack-gallery .shot-card.inventory-pos-1{opacity:.40 !important; transform:translate(-50%,-50%) translateX(11%) scale(.92) !important;}
  .inventory-stack-gallery .shot-card.inventory-pos-2,
  .inventory-stack-gallery .shot-card.inventory-pos-3{opacity:0 !important; pointer-events:none !important; transform:translate(-50%,-50%) translateX(20%) scale(.84) !important;}
}
@media(max-width:560px){
  .inventory-stack-counter{min-width:88px !important; padding:8px 12px !important;}
  .inventory-stack-gallery .gallery-track{height:390px !important;}
  .inventory-stack-gallery .shot-card img{height:270px !important;}
}



/* v5.2.82: copy comercial para carrusel stack de gestión de activos */
.inventory-stack-head{
  align-items:flex-start !important;
}
.inventory-stack-copy{
  max-width:920px !important;
}
.inventory-stack-copy .section-title{
  max-width:920px !important;
}
.inventory-stack-subtitle{
  margin:14px 0 0 !important;
  max-width:820px !important;
  color:var(--qba-muted) !important;
  font-size:clamp(.95rem,1.15vw,1.08rem) !important;
  line-height:1.55 !important;
  font-weight:500 !important;
}
@media(max-width:900px){
  .inventory-stack-head{
    align-items:flex-start !important;
  }
  .inventory-stack-copy{
    max-width:100% !important;
  }
  .inventory-stack-subtitle{
    max-width:100% !important;
    font-size:.94rem !important;
  }
}



/* v5.2.84: corrección del quick overview de Mesa de ayuda.
   La imagen de laptop queda embebida en el HTML para que funcione al abrir index.html solo. */
.section.module.helpdesk .module-head.helpdesk-overview-head{
  grid-template-columns:minmax(620px,.62fr) minmax(430px,.38fr) !important;
  gap:56px !important;
  align-items:center !important;
  max-width:1280px !important;
}
.section.module.helpdesk .helpdesk-overview-copy{
  max-width:610px !important;
}
.section.module.helpdesk .helpdesk-overview-copy .module-title{
  max-width:18ch !important;
  font-size:var(--h2) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
}
.section.module.helpdesk .helpdesk-overview-copy .section-lead{
  margin-top:20px !important;
  max-width:48ch !important;
  font-size:1.02rem !important;
  line-height:1.65 !important;
}
.section.module.helpdesk .module-video.helpdesk-video-preview{
  position:relative !important;
  width:100% !important;
  min-height:0 !important;
  aspect-ratio:1.48 / 1 !important;
  padding:10px !important;
  border-radius:34px !important;
  border:1px solid var(--qba-line) !important;
  background:linear-gradient(180deg,#f9fcff 0%,#eef5fb 100%) !important;
  box-shadow:var(--shadow) !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  text-align:center !important;
}
.section.module.helpdesk .module-video.helpdesk-video-preview img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  filter:drop-shadow(0 18px 38px rgba(9,36,73,.20)) !important;
}
.section.module.helpdesk .module-video.helpdesk-video-preview .preview-play{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:104px !important;
  height:104px !important;
  border-radius:50% !important;
  background:rgba(205,31,38,.94) !important;
  box-shadow:0 20px 42px rgba(205,31,38,.26) !important;
  z-index:2 !important;
}
.section.module.helpdesk .module-video.helpdesk-video-preview .preview-play::before{
  content:'' !important;
  position:absolute !important;
  left:43px !important;
  top:33px !important;
  width:0 !important;
  height:0 !important;
  border-top:19px solid transparent !important;
  border-bottom:19px solid transparent !important;
  border-left:30px solid #fff !important;
}
@media (max-width:1100px){
  .section.module.helpdesk .module-head.helpdesk-overview-head{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .section.module.helpdesk .helpdesk-overview-copy{
    max-width:720px !important;
  }
  .section.module.helpdesk .module-video.helpdesk-video-preview{
    aspect-ratio:1.48 / 1 !important;
  }
}
@media (max-width:760px){
  .section.module.helpdesk .module-video.helpdesk-video-preview{
    padding:8px !important;
    border-radius:24px !important;
  }
  .section.module.helpdesk .module-video.helpdesk-video-preview .preview-play{
    width:78px !important;
    height:78px !important;
  }
  .section.module.helpdesk .module-video.helpdesk-video-preview .preview-play::before{
    left:32px !important;
    top:24px !important;
    border-top:15px solid transparent !important;
    border-bottom:15px solid transparent !important;
    border-left:24px solid #fff !important;
  }
}



/* v5.2.85: ajuste fino del quick overview de Mesa de ayuda.
   Se amplía la caja visual de la laptop y se actualiza el título comercial. */
.section.module.helpdesk .module-head.helpdesk-overview-head{
  max-width:1380px !important;
  grid-template-columns:minmax(710px,.67fr) minmax(430px,.33fr) !important;
  gap:42px !important;
}
.section.module.helpdesk .module-video.helpdesk-video-preview{
  aspect-ratio:1.58 / 1 !important;
  padding:4px !important;
  border-radius:34px !important;
}
.section.module.helpdesk .module-video.helpdesk-video-preview img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  transform:scale(1.115) translateY(2px) !important;
  transform-origin:center center !important;
}
.section.module.helpdesk .helpdesk-overview-copy{
  max-width:560px !important;
}
.section.module.helpdesk .helpdesk-overview-copy .module-title{
  max-width:20.5ch !important;
  line-height:1.08 !important;
}
.section.module.helpdesk .helpdesk-overview-copy .section-lead{
  max-width:45ch !important;
}
@media (max-width:1240px){
  .section.module.helpdesk .module-head.helpdesk-overview-head{
    grid-template-columns:minmax(620px,.64fr) minmax(390px,.36fr) !important;
    gap:34px !important;
  }
  .section.module.helpdesk .module-video.helpdesk-video-preview img{
    transform:scale(1.08) translateY(2px) !important;
  }
}
@media (max-width:1100px){
  .section.module.helpdesk .module-head.helpdesk-overview-head{
    grid-template-columns:1fr !important;
    max-width:900px !important;
  }
  .section.module.helpdesk .module-video.helpdesk-video-preview{
    aspect-ratio:1.55 / 1 !important;
  }
  .section.module.helpdesk .helpdesk-overview-copy .module-title{
    max-width:24ch !important;
  }
}
@media (max-width:760px){
  .section.module.helpdesk .module-video.helpdesk-video-preview img{
    transform:scale(1.04) translateY(1px) !important;
  }
}



/* v5.2.86: acabado premium azul grisáceo para el contenedor grande del quick overview de Mesa de ayuda.
   Se mantiene intacto el cuadro interno de la laptop, imagen, botón play, copy y layout. */
.section.module.helpdesk .module-head.helpdesk-overview-head{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:
    radial-gradient(760px 360px at 16% 0%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.42) 34%,rgba(255,255,255,0) 66%),
    linear-gradient(135deg,#e6f0f8 0%,#f7fbff 44%,#dde9f3 100%) !important;
  border:1px solid rgba(172,194,216,.76) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(138,164,190,.18),
    0 24px 64px rgba(20,54,88,.13),
    0 8px 20px rgba(255,255,255,.42) !important;
}
.section.module.helpdesk .module-head.helpdesk-overview-head::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(112deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.18) 24%,rgba(127,156,184,.10) 58%,rgba(255,255,255,.04) 100%),
    radial-gradient(560px 240px at 96% 96%,rgba(38,58,125,.11),transparent 68%);
  opacity:.9;
}
.section.module.helpdesk .module-head.helpdesk-overview-head::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:0;
  height:1px;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.96),rgba(180,200,220,.32),transparent);
}
.section.module.helpdesk .module-head.helpdesk-overview-head > *{
  position:relative !important;
  z-index:1 !important;
}
@media (max-width:760px){
  .section.module.helpdesk .module-head.helpdesk-overview-head{
    border-radius:28px !important;
  }
}



/* v5.2.87: acabado premium azul grisáceo para el contenedor grande del quick overview de Gestión de inventarios.
   El fondo visual se extiende desde el cuadro del tablet hacia el texto sin cambiar copy, tablet, play, imagen ni layout. */
.section.module.assets .module-head.assets-overview-head{
  position:relative !important;
  isolation:isolate !important;
}
.section.module.assets .module-head.assets-overview-head::before{
  content:"";
  position:absolute;
  left:-36px;
  right:-36px;
  top:-6px;
  bottom:-6px;
  z-index:0;
  pointer-events:none;
  border-radius:34px;
  background:
    radial-gradient(760px 360px at 16% 0%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.42) 34%,rgba(255,255,255,0) 66%),
    linear-gradient(135deg,#e6f0f8 0%,#f7fbff 44%,#dde9f3 100%);
  border:1px solid rgba(172,194,216,.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(138,164,190,.18),
    0 24px 64px rgba(20,54,88,.13),
    0 8px 20px rgba(255,255,255,.42);
}
.section.module.assets .module-head.assets-overview-head::after{
  content:"";
  position:absolute;
  left:-12px;
  right:-12px;
  top:-5px;
  height:1px;
  z-index:0;
  pointer-events:none;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.96),rgba(180,200,220,.32),transparent);
}
.section.module.assets .module-head.assets-overview-head > *{
  position:relative !important;
  z-index:1 !important;
}
@media (max-width:1100px){
  .section.module.assets .module-head.assets-overview-head::before{
    left:-24px;
    right:-24px;
    top:-10px;
    bottom:-10px;
  }
}
@media (max-width:760px){
  .section.module.assets .module-head.assets-overview-head::before{
    left:-14px;
    right:-14px;
    top:-12px;
    bottom:-12px;
    border-radius:28px;
  }
}



/* v5.2.88: capa decorativa fija para todo el bloque del módulo de mesa de ayuda.
   Vive entre el banner de mesa de ayuda y la sección de casos de éxito. */
.helpdesk-module-shell{
  position:relative !important;
  isolation:isolate !important;
  overflow:clip !important;
  background:#f8fbfe !important;
}
.helpdesk-module-shell .helpdesk-fixed-deco{
  position:sticky !important;
  top:0 !important;
  width:100vw !important;
  height:100vh !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-bottom:-100vh !important;
  z-index:0 !important;
  pointer-events:none !important;
  background-image:url("../assets/images/extracted/css/css-img-009.png"), url("../assets/images/extracted/css/css-img-010.png");
  background-repeat:no-repeat, no-repeat !important;
  background-position:left top, right top !important;
  background-size:auto 100vh, auto 100vh !important;
}
.helpdesk-module-shell > .helpdesk-module-banner,
.helpdesk-module-shell > .module.helpdesk{
  position:relative !important;
  z-index:2 !important;
}
.helpdesk-module-shell > .helpdesk-module-banner{
  z-index:3 !important;
}
.helpdesk-module-shell > .module.helpdesk{
  background:transparent !important;
}
.helpdesk-module-shell .module.helpdesk::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(248,251,254,.16) 0%, rgba(248,251,254,.08) 48%, rgba(248,251,254,.18) 100%) !important;
}
@media(max-width:760px){
  .helpdesk-module-shell .helpdesk-fixed-deco{
    background-position:left top, right top !important;
    background-size:auto 100vh, auto 100vh !important;
  }
}



/* v5.2.89: suaviza la capa decorativa fija del módulo de mesa de ayuda para que no compita con el contenido principal. */
.helpdesk-module-shell .helpdesk-fixed-deco{
  opacity:.40 !important;
}



/* v5.2.91: carrusel automático Deck 3D sobrio para solicitudes, incidencias y reservas.
   Respeta la proporción natural de cada captura y evita franjas blancas artificiales. */
.helpdesk-auto-deck{
  position:relative !important;
  width:100% !important;
  max-width:880px !important;
  margin-left:auto !important;
  padding:0 0 clamp(52px,4.6vw,78px) !important;
  perspective:1500px !important;
  overflow:visible !important;
}
.helpdesk-auto-deck .helpdesk-deck-stage{
  position:relative !important;
  width:100% !important;
  min-height:340px !important;
  transition:height .46s cubic-bezier(.2,.75,.2,1) !important;
  overflow:visible !important;
  transform-style:preserve-3d !important;
}
.helpdesk-auto-deck .helpdesk-deck-card{
  position:absolute !important;
  inset:0 auto auto 0 !important;
  width:100% !important;
  margin:0 !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(150,170,195,.34) !important;
  box-shadow:0 26px 64px rgba(14,32,68,.16) !important;
  cursor:zoom-in !important;
  transform-origin:center center !important;
  transition:transform .58s cubic-bezier(.2,.72,.18,1), opacity .46s ease, filter .46s ease, box-shadow .46s ease !important;
  will-change:transform,opacity,filter !important;
  backface-visibility:hidden !important;
}
.helpdesk-auto-deck .helpdesk-deck-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  transform:none !important;
}
.helpdesk-auto-deck .helpdesk-deck-card figcaption{
  display:none !important;
}
.helpdesk-auto-deck .helpdesk-deck-card.is-active{
  z-index:5 !important;
  opacity:1 !important;
  filter:none !important;
  transform:translate3d(0,0,0) rotateZ(0deg) scale(1) !important;
  box-shadow:0 30px 78px rgba(14,32,68,.19) !important;
}
.helpdesk-auto-deck .helpdesk-deck-card.is-next{
  z-index:4 !important;
  opacity:.54 !important;
  filter:saturate(.88) contrast(.96) brightness(1.02) !important;
  transform:translate3d(28px,34px,-80px) rotateZ(1.4deg) scale(.94) !important;
}
.helpdesk-auto-deck .helpdesk-deck-card.is-prev{
  z-index:3 !important;
  opacity:.30 !important;
  filter:saturate(.76) contrast(.92) brightness(1.04) !important;
  transform:translate3d(-22px,58px,-150px) rotateZ(-1.2deg) scale(.88) !important;
}
.helpdesk-auto-deck .helpdesk-deck-dots{
  position:absolute !important;
  left:50% !important;
  bottom:6px !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  z-index:8 !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(150,170,195,.20) !important;
  box-shadow:0 12px 28px rgba(14,32,68,.08) !important;
  backdrop-filter:blur(8px) !important;
}
.helpdesk-auto-deck .helpdesk-deck-dots span{
  width:8px !important;
  height:8px !important;
  border-radius:999px !important;
  background:rgba(38,58,125,.24) !important;
  transition:width .35s ease, background .35s ease !important;
}
.helpdesk-auto-deck .helpdesk-deck-dots span.is-active{
  width:23px !important;
  background:linear-gradient(90deg,var(--qba-blue),#50a8ff) !important;
}
@media(max-width:980px){
  .helpdesk-auto-deck{
    max-width:100% !important;
    margin:8px auto 0 !important;
    padding-bottom:62px !important;
  }
  .helpdesk-auto-deck .helpdesk-deck-card.is-next{transform:translate3d(16px,28px,-70px) rotateZ(1deg) scale(.94) !important;}
  .helpdesk-auto-deck .helpdesk-deck-card.is-prev{transform:translate3d(-14px,48px,-130px) rotateZ(-.9deg) scale(.89) !important;}
}
@media(max-width:640px){
  .helpdesk-auto-deck .helpdesk-deck-stage{min-height:220px !important;}
  .helpdesk-auto-deck .helpdesk-deck-card{border-radius:18px !important;}
  .helpdesk-auto-deck .helpdesk-deck-card.is-next{opacity:.38 !important; transform:translate3d(10px,22px,-60px) rotateZ(.8deg) scale(.94) !important;}
  .helpdesk-auto-deck .helpdesk-deck-card.is-prev{opacity:.18 !important; transform:translate3d(-8px,38px,-110px) rotateZ(-.8deg) scale(.88) !important;}
}



/* v5.2.93: flecha discreta de avance manual para el Deck 3D de solicitudes, incidencias y reservas. */
.helpdesk-auto-deck .helpdesk-deck-next{
  position:absolute !important;
  right:clamp(-28px,-1.6vw,-14px) !important;
  top:50% !important;
  width:44px !important;
  height:44px !important;
  transform:translateY(-50%) !important;
  z-index:12 !important;
  border-radius:999px !important;
  border:1px solid rgba(150,170,195,.32) !important;
  background:rgba(255,255,255,.76) !important;
  color:var(--qba-blue) !important;
  box-shadow:0 16px 34px rgba(14,32,68,.13) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:1 !important;
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease, color .22s ease, border-color .22s ease !important;
}
.helpdesk-auto-deck .helpdesk-deck-next::before{
  content:"" !important;
  width:12px !important;
  height:12px !important;
  border-right:2.2px solid currentColor !important;
  border-bottom:2.2px solid currentColor !important;
  transform:rotate(-45deg) !important;
  margin-left:-3px !important;
}
.helpdesk-auto-deck .helpdesk-deck-next:hover,
.helpdesk-auto-deck .helpdesk-deck-next:focus-visible{
  transform:translateY(-50%) translateX(3px) !important;
  background:rgba(255,255,255,.94) !important;
  color:#0f6fb8 !important;
  border-color:rgba(80,168,255,.38) !important;
  box-shadow:0 18px 40px rgba(14,32,68,.18) !important;
  outline:none !important;
}
.helpdesk-auto-deck .helpdesk-deck-next:active{
  transform:translateY(-50%) translateX(1px) scale(.98) !important;
}
@media(max-width:980px){
  .helpdesk-auto-deck .helpdesk-deck-next{
    right:8px !important;
    width:40px !important;
    height:40px !important;
  }
}
@media(max-width:640px){
  .helpdesk-auto-deck .helpdesk-deck-next{
    right:6px !important;
    width:36px !important;
    height:36px !important;
  }
  .helpdesk-auto-deck .helpdesk-deck-next::before{
    width:10px !important;
    height:10px !important;
  }
}



/* v5.2.96: hover más nítido para el Deck 3D.
   Mantiene feedback visual de pausa sin rotación ni profundidad 3D para evitar borrosidad en capturas con texto pequeño. */
.helpdesk-auto-deck .helpdesk-deck-card.is-active:hover{
  transform:translate3d(0,-6px,0) scale(1.018) !important;
  box-shadow:0 36px 88px rgba(14,32,68,.24) !important;
}
.helpdesk-auto-deck .helpdesk-deck-card.is-active:hover img{
  filter:none !important;
}



/* v5.2.97: carrusel Deck 3D sobrio para formularios multiárea.
   Usa capturas con proporción natural, sin padding/marcos internos, y flecha izquierda de avance manual. */
.forms-auto-deck{
  max-width:760px !important;
  margin:0 auto 0 0 !important;
  padding:0 0 clamp(52px,4.6vw,78px) !important;
}
.forms-auto-deck .helpdesk-deck-stage{
  min-height:430px !important;
}
.forms-auto-deck .helpdesk-deck-card{
  border-radius:24px !important;
  background:#fff !important;
  overflow:hidden !important;
}
.forms-auto-deck .helpdesk-deck-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}
.forms-auto-deck .forms-deck-prev{
  left:clamp(-28px,-1.6vw,-14px) !important;
  right:auto !important;
}
.forms-auto-deck .forms-deck-prev::before{
  transform:rotate(135deg) !important;
  margin-left:3px !important;
}
.forms-auto-deck .forms-deck-prev:hover,
.forms-auto-deck .forms-deck-prev:focus-visible{
  transform:translateY(-50%) translateX(-3px) !important;
}
.forms-auto-deck .forms-deck-prev:active{
  transform:translateY(-50%) translateX(-1px) scale(.98) !important;
}
@media(max-width:980px){
  .forms-auto-deck{
    max-width:100% !important;
    margin:8px auto 0 !important;
  }
  .forms-auto-deck .forms-deck-prev{
    left:8px !important;
  }
}
@media(max-width:640px){
  .forms-auto-deck .helpdesk-deck-stage{min-height:260px !important;}
  .forms-auto-deck .forms-deck-prev{
    left:6px !important;
  }
}



/* v5.2.98: navegación dentro del lightbox por grupo de carrusel */
.qnd-lightbox{overflow:hidden;}
.qnd-lightbox .lightbox-close{
  position:absolute;
  top:22px;
  right:22px;
  z-index:5;
}
.qnd-lightbox .lightbox-nav{
  position:absolute;
  top:50%;
  z-index:5;
  width:52px;
  height:52px;
  border:1px solid rgba(210,221,238,.92);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#263A7C;
  box-shadow:0 18px 52px rgba(4,12,25,.28);
  cursor:pointer;
  transform:translateY(-50%);
  transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.qnd-lightbox .lightbox-nav:hover{
  transform:translateY(-50%) scale(1.06);
  box-shadow:0 22px 64px rgba(4,12,25,.34);
}
.qnd-lightbox .lightbox-nav[hidden]{display:none!important;}
.qnd-lightbox .lightbox-prev{left:clamp(18px,3vw,46px);right:auto;}
.qnd-lightbox .lightbox-next{right:clamp(18px,3vw,46px);left:auto;}
.qnd-lightbox .lightbox-nav::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:13px;
  height:13px;
  border-top:3px solid currentColor;
  border-right:3px solid currentColor;
}
.qnd-lightbox .lightbox-prev::before{transform:translateX(3px) rotate(-135deg);}
.qnd-lightbox .lightbox-next::before{transform:translateX(-3px) rotate(45deg);}
.qnd-lightbox .lightbox-counter{
  position:absolute;
  left:50%;
  bottom:64px;
  transform:translateX(-50%);
  z-index:4;
  min-width:58px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.90);
  color:#263A7C;
  font-size:.78rem;
  font-weight:900;
  text-align:center;
  box-shadow:0 10px 26px rgba(4,12,25,.14);
}
.qnd-lightbox .lightbox-counter[hidden]{display:none!important;}
@media(max-width:720px){
  .qnd-lightbox .lightbox-nav{width:44px;height:44px;}
  .qnd-lightbox .lightbox-prev{left:10px;}
  .qnd-lightbox .lightbox-next{right:10px;}
  .qnd-lightbox .lightbox-counter{bottom:58px;}
}



/* v5.2.100: altura estable para el carrusel de formularios.
   Evita que la sección siguiente suba/baje cuando cambian capturas con proporciones distintas. */
.forms-auto-deck{
  padding-bottom:clamp(76px,6.2vw,116px) !important;
}
.forms-auto-deck .helpdesk-deck-stage{
  overflow:visible !important;
}
@media(max-width:980px){
  .forms-auto-deck{
    padding-bottom:clamp(64px,7vw,96px) !important;
  }
}
@media(max-width:640px){
  .forms-auto-deck{
    padding-bottom:clamp(54px,8vw,78px) !important;
  }
}



/* v5.2.101: altura estable para el carrusel de solicitudes, incidencias y reservas.
   Reserva la altura de la captura más alta y evita que la sección de formularios suba/baje durante la rotación. */
.helpdesk-auto-deck{
  padding-bottom:clamp(76px,6vw,112px) !important;
}
.helpdesk-auto-deck .helpdesk-deck-stage{
  overflow:visible !important;
}
@media(max-width:980px){
  .helpdesk-auto-deck{
    padding-bottom:clamp(64px,7vw,96px) !important;
  }
}
@media(max-width:640px){
  .helpdesk-auto-deck{
    padding-bottom:clamp(54px,8vw,78px) !important;
  }
}



/* v5.2.103: ancho amplio controlado para la infografía de flujo.
   Evita que las tarjetas internas queden pegadas a los bordes del navegador sin deformar la imagen. */
.flow-visual-section{
  width:100% !important;
  margin:clamp(72px,7vw,118px) 0 clamp(74px,7vw,122px) !important;
  padding:0 clamp(24px,4vw,76px) !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
.flow-visual-bleed{
  width:100% !important;
  max-width:1820px !important;
  margin:0 auto !important;
  position:relative !important;
  cursor:default !important;
}
.flow-visual-bleed img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:0 34px 96px rgba(7,29,48,.24), 0 0 0 1px rgba(80,168,255,.10) !important;
  border-radius:30px !important;
  transition:transform .35s ease, box-shadow .35s ease !important;
}
.flow-visual-bleed:hover img{
  transform:translateY(-4px) scale(1.004) !important;
  box-shadow:0 42px 118px rgba(7,29,48,.28), 0 0 0 1px rgba(80,168,255,.14) !important;
}
@media(max-width:980px){
  .flow-visual-section{
    margin:clamp(56px,8vw,86px) 0 clamp(58px,8vw,90px) !important;
    padding:0 clamp(18px,4.5vw,42px) !important;
  }
  .flow-visual-bleed img{
    border-radius:22px !important;
  }
}
@media(max-width:640px){
  .flow-visual-section{
    margin:46px 0 56px !important;
    padding:0 14px !important;
  }
  .flow-visual-bleed img{
    border-radius:16px !important;
  }
}



/* v5.2.106: ajuste fino de infografía de flujo.
   Elimina el zoom hover, evita la sensación de imagen encerrada y alinea el título con la tipografía principal. */
.flow-visual-bleed{
  overflow:visible !important;
}
.flow-visual-bleed:hover img{
  transform:none !important;
  box-shadow:0 34px 96px rgba(7,29,48,.24), 0 0 0 1px rgba(80,168,255,.10) !important;
}
.flow-visual-copy{
  position:absolute !important;
  top:clamp(34px,4vw,72px) !important;
  left:50% !important;
  right:auto !important;
  width:calc(100% - clamp(80px,10vw,180px)) !important;
  z-index:3 !important;
  pointer-events:none !important;
  opacity:0 !important;
  transform:translate(-50%,18px) !important;
  text-align:center !important;
  transition:opacity .78s ease .18s, transform .78s ease .18s !important;
}
.flow-visual-section.visible .flow-visual-copy{
  opacity:1 !important;
  transform:translate(-50%,0) !important;
}
.flow-visual-copy h2{
  max-width:none !important;
  margin:0 auto !important;
  color:#fff !important;
  font-size:var(--h2) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  text-shadow:0 10px 30px rgba(0,0,0,.38), 0 0 22px rgba(80,168,255,.14) !important;
}
@media(max-width:980px){
  .flow-visual-copy{
    top:clamp(24px,4vw,44px) !important;
    width:calc(100% - clamp(48px,10vw,92px)) !important;
  }
  .flow-visual-copy h2{
    font-size:clamp(1.25rem,3.35vw,2.15rem) !important;
    white-space:normal !important;
  }
}
@media(max-width:640px){
  .flow-visual-copy{
    top:18px !important;
    width:calc(100% - 42px) !important;
  }
  .flow-visual-copy h2{
    font-size:clamp(1.02rem,4.8vw,1.55rem) !important;
    line-height:1.08 !important;
    white-space:normal !important;
  }
}



/* v5.2.107: la infografía de flujo queda como imagen fija, sin lightbox ni cursor de ampliación. */
.flow-visual-bleed{
  cursor:default !important;
}
.flow-visual-bleed img{
  cursor:default !important;
}



/* v5.2.108: soporte de interacción para stack-gallery restaurado. */
.stack-gallery .shot-card.is-active{cursor:zoom-in !important;}
.stack-gallery .shot-card.is-prev,
.stack-gallery .shot-card.is-next{cursor:pointer !important;}



/* v5.2.109: reordenamiento del cierre del módulo de mesa de ayuda.
   El carrusel queda como cierre comercial y la integración se mueve antes de casos de éxito. */
.stack-gallery .gallery-head .section-lead{
  max-width:820px !important;
}
.integrations-relocated{
  position:relative !important;
  z-index:2 !important;
}
@media(max-width:760px){
  .stack-gallery .gallery-head{
    align-items:flex-start !important;
  }
  .integrations-relocated{
    margin-top:54px !important;
    margin-bottom:54px !important;
  }
}



/* v5.2.110: copy secundario del carrusel de mesa de ayuda en una sola línea en escritorio. */
@media(min-width:981px){
  .stack-gallery .gallery-head > div:first-child{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  .stack-gallery .gallery-head .section-lead{
    max-width:none !important;
    width:auto !important;
    white-space:nowrap !important;
  }
}



/* v5.2.111: separador principal hero → control operativo más visible y corporativo.
   Barra gruesa con transición suave rojo QbaNet → morado intermedio → azul QbaNet. */
.hero::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  height:12px !important;
  background:linear-gradient(
    90deg,
    #CD2027 0%,
    #CD2027 30%,
    #C73758 43%,
    #6C4FB2 56%,
    #263A7C 70%,
    #263A7C 100%
  ) !important;
  opacity:1 !important;
  border:0 !important;
  box-shadow:0 8px 22px rgba(38,58,124,.18) !important;
  pointer-events:none !important;
  z-index:3 !important;
}



/* v5.2.112: sección de integraciones con infografía protagonista y bordes difuminados.
   Reemplaza la tarjeta oscura por una imagen amplia integrada al fondo claro. */
.integration-ecosystem-section{
  position:relative !important;
  width:100% !important;
  margin:clamp(72px,7vw,112px) 0 clamp(76px,7vw,122px) !important;
  padding:clamp(18px,2.2vw,34px) 0 !important;
  background:
    radial-gradient(920px 360px at 50% 42%, rgba(38,58,124,.075), transparent 64%),
    radial-gradient(760px 320px at 18% 34%, rgba(205,32,39,.045), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(247,250,254,.78) 44%, rgba(255,255,255,0) 100%) !important;
  overflow:hidden !important;
  isolation:isolate !important;
}
.integration-ecosystem-wrap{
  position:relative !important;
  width:100% !important;
  margin:0 auto !important;
  min-height:clamp(560px,43vw,770px) !important;
}
.integration-ecosystem-visual{
  position:relative !important;
  z-index:1 !important;
  width:min(calc(100vw - 56px),1720px) !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  overflow:visible !important;
}
.integration-ecosystem-visual::before{
  content:"" !important;
  position:absolute !important;
  inset:8% 5% 4% 5% !important;
  z-index:-1 !important;
  border-radius:48px !important;
  background:
    radial-gradient(closest-side at 50% 45%, rgba(38,58,124,.18), rgba(38,58,124,0) 72%),
    radial-gradient(closest-side at 58% 54%, rgba(80,168,255,.12), rgba(80,168,255,0) 76%) !important;
  filter:blur(26px) !important;
  opacity:.82 !important;
  pointer-events:none !important;
}
.integration-ecosystem-visual::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,
      rgba(247,250,254,.98) 0%,
      rgba(247,250,254,.56) 3.5%,
      rgba(247,250,254,0) 10%,
      rgba(247,250,254,0) 90%,
      rgba(247,250,254,.56) 96.5%,
      rgba(247,250,254,.98) 100%
    ),
    linear-gradient(180deg,
      rgba(247,250,254,.98) 0%,
      rgba(247,250,254,.46) 4.8%,
      rgba(247,250,254,0) 12%,
      rgba(247,250,254,0) 84%,
      rgba(247,250,254,.48) 94%,
      rgba(247,250,254,.98) 100%
    ) !important;
}
.integration-ecosystem-visual img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:default !important;
}
.integration-ecosystem-copy{
  position:absolute !important;
  z-index:4 !important;
  left:clamp(42px,7vw,148px) !important;
  top:clamp(42px,5vw,94px) !important;
  width:min(520px,calc(100vw - 72px)) !important;
  padding:clamp(20px,2vw,30px) clamp(22px,2.4vw,34px) !important;
  border-radius:30px !important;
  background:
    linear-gradient(135deg, rgba(205,32,39,.94) 0%, rgba(139,43,91,.92) 44%, rgba(38,58,124,.94) 100%) !important;
  color:#fff !important;
  box-shadow:0 28px 78px rgba(14,32,68,.18), 0 0 0 1px rgba(255,255,255,.26) inset !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  opacity:0 !important;
  transform:translateY(18px) !important;
  transition:opacity .78s ease .12s, transform .78s ease .12s !important;
}
.integration-ecosystem-section.visible .integration-ecosystem-copy{
  opacity:1 !important;
  transform:translateY(0) !important;
}
.integration-ecosystem-copy h2{
  margin:0 0 10px !important;
  color:#fff !important;
  font-size:clamp(1.55rem,2.05vw,2.55rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
  font-weight:800 !important;
  text-shadow:0 10px 26px rgba(0,0,0,.22) !important;
}
.integration-ecosystem-copy p{
  margin:0 !important;
  color:rgba(255,255,255,.90) !important;
  font-size:clamp(.96rem,1.04vw,1.13rem) !important;
  line-height:1.46 !important;
  font-weight:650 !important;
}
@media(max-width:1180px){
  .integration-ecosystem-wrap{
    min-height:auto !important;
  }
  .integration-ecosystem-copy{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:min(100% - 44px,760px) !important;
    margin:0 auto 24px !important;
  }
  .integration-ecosystem-visual{
    width:min(calc(100vw - 36px),1120px) !important;
  }
}
@media(max-width:720px){
  .integration-ecosystem-section{
    margin:56px 0 68px !important;
  }
  .integration-ecosystem-copy{
    width:min(100% - 28px,640px) !important;
    border-radius:24px !important;
  }
  .integration-ecosystem-copy h2{
    font-size:clamp(1.4rem,6vw,2rem) !important;
  }
  .integration-ecosystem-copy p{
    font-size:.96rem !important;
  }
  .integration-ecosystem-visual{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:0 !important;
  }
}



/* v5.2.113: integración reequilibrada.
   El copy queda como franja superior roja, la imagen baja de escala y los bordes se funden mejor con el fondo. */
.integration-ecosystem-section{
  margin:clamp(66px,6vw,96px) 0 clamp(74px,6vw,110px) !important;
  padding:clamp(20px,2vw,34px) 0 clamp(28px,3vw,48px) !important;
  background:
    radial-gradient(980px 360px at 50% 54%, rgba(38,58,124,.055), transparent 66%),
    radial-gradient(720px 300px at 20% 38%, rgba(205,32,39,.035), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,251,254,.86) 50%, rgba(255,255,255,0) 100%) !important;
}
.integration-ecosystem-wrap{
  width:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:clamp(26px,3vw,42px) !important;
}
.integration-ecosystem-copy{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  width:min(calc(100vw - 96px),1380px) !important;
  max-width:1380px !important;
  margin:0 auto !important;
  padding:clamp(22px,2vw,30px) clamp(30px,3vw,52px) !important;
  border-radius:30px !important;
  background:
    radial-gradient(520px 140px at 22% 0%, rgba(255,255,255,.22), transparent 72%),
    linear-gradient(135deg, #CD2027 0%, #B51F38 58%, #8D284E 100%) !important;
  color:#fff !important;
  box-shadow:
    0 26px 74px rgba(205,32,39,.18),
    0 18px 44px rgba(14,32,68,.11),
    0 0 0 1px rgba(255,255,255,.24) inset !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:0 !important;
  transform:translateY(18px) !important;
  text-align:left !important;
}
.integration-ecosystem-section.visible .integration-ecosystem-copy{
  opacity:1 !important;
  transform:translateY(0) !important;
}
.integration-ecosystem-copy h2{
  margin:0 0 8px !important;
  max-width:none !important;
  color:#fff !important;
  font-size:clamp(1.85rem,2.35vw,3.05rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  text-shadow:0 8px 24px rgba(0,0,0,.20) !important;
}
.integration-ecosystem-copy p{
  margin:0 !important;
  max-width:1180px !important;
  color:rgba(255,255,255,.92) !important;
  font-size:clamp(1rem,1.05vw,1.15rem) !important;
  line-height:1.44 !important;
  font-weight:600 !important;
}
.integration-ecosystem-visual{
  width:min(calc(100vw - 120px),1400px) !important;
  max-width:1400px !important;
  margin:0 auto !important;
}
.integration-ecosystem-visual::before{
  inset:10% 7% 6% 7% !important;
  border-radius:46px !important;
  background:
    radial-gradient(closest-side at 50% 52%, rgba(38,58,124,.13), rgba(38,58,124,0) 72%),
    radial-gradient(closest-side at 36% 50%, rgba(205,32,39,.07), rgba(205,32,39,0) 78%) !important;
  filter:blur(24px) !important;
  opacity:.78 !important;
}
.integration-ecosystem-visual::after{
  inset:-1px !important;
  background:
    linear-gradient(90deg,
      rgba(248,251,254,1) 0%,
      rgba(248,251,254,.88) 3%,
      rgba(248,251,254,.42) 8%,
      rgba(248,251,254,0) 18%,
      rgba(248,251,254,0) 82%,
      rgba(248,251,254,.42) 92%,
      rgba(248,251,254,.88) 97%,
      rgba(248,251,254,1) 100%
    ),
    linear-gradient(180deg,
      rgba(248,251,254,1) 0%,
      rgba(248,251,254,.78) 3.5%,
      rgba(248,251,254,.34) 9%,
      rgba(248,251,254,0) 18%,
      rgba(248,251,254,0) 82%,
      rgba(248,251,254,.36) 91%,
      rgba(248,251,254,.84) 97%,
      rgba(248,251,254,1) 100%
    ) !important;
}
.integration-ecosystem-visual img{
  filter:saturate(.98) contrast(.99) brightness(1.01) !important;
}
@media(max-width:1180px){
  .integration-ecosystem-copy{
    width:min(100% - 44px,980px) !important;
    text-align:left !important;
  }
  .integration-ecosystem-copy h2{
    white-space:normal !important;
  }
  .integration-ecosystem-visual{
    width:min(calc(100vw - 48px),1040px) !important;
  }
}
@media(max-width:720px){
  .integration-ecosystem-section{
    margin:54px 0 68px !important;
  }
  .integration-ecosystem-copy{
    width:min(100% - 28px,640px) !important;
    padding:22px 24px !important;
    border-radius:24px !important;
  }
  .integration-ecosystem-copy h2{
    font-size:clamp(1.35rem,6vw,1.95rem) !important;
    white-space:normal !important;
  }
  .integration-ecosystem-copy p{
    font-size:.96rem !important;
  }
  .integration-ecosystem-visual{
    width:min(100vw - 20px,680px) !important;
  }
}



/* v5.2.114: imagen transparente de integraciones.
   Sustituye la versión con fondo blanco y elimina los difuminados perimetrales. */
.integration-ecosystem-visual::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
.integration-ecosystem-visual::before{
  inset:18% 14% 12% 14% !important;
  border-radius:44px !important;
  background:
    radial-gradient(closest-side at 50% 58%,
      rgba(38,58,124,.14),
      rgba(38,58,124,.06) 42%,
      rgba(38,58,124,0) 74%) !important;
  filter:blur(24px) !important;
  opacity:.42 !important;
}
.integration-ecosystem-visual{
  background:transparent !important;
  overflow:visible !important;
}
.integration-ecosystem-visual img{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
  filter:drop-shadow(0 18px 30px rgba(10,24,56,.08)) !important;
}



/* v5.2.115: ajuste de proximidad, tipografía y franja roja en integraciones.
   Acerca la imagen al copy, reduce la altura del bloque y normaliza pesos tipográficos. */
.integration-ecosystem-section{
  padding-top:clamp(16px,1.8vw,28px) !important;
  padding-bottom:clamp(18px,2.4vw,38px) !important;
}
.integration-ecosystem-wrap{
  gap:0 !important;
}
.integration-ecosystem-copy{
  width:min(calc(100vw - 140px),1500px) !important;
  max-width:1500px !important;
  padding:clamp(16px,1.55vw,22px) clamp(34px,3.2vw,56px) !important;
  border-radius:28px !important;
  background:
    radial-gradient(820px 180px at 20% 0%, rgba(255,255,255,.20), transparent 68%),
    radial-gradient(760px 220px at 88% 110%, rgba(90,18,28,.28), transparent 70%),
    #CD2027 !important;
  box-shadow:
    0 24px 66px rgba(205,32,39,.16),
    0 14px 38px rgba(14,32,68,.10),
    0 0 0 1px rgba(255,255,255,.22) inset !important;
}
.integration-ecosystem-copy h2{
  font-size:var(--h2) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  margin:0 0 6px !important;
  text-shadow:0 8px 22px rgba(0,0,0,.16) !important;
}
.integration-ecosystem-copy p{
  max-width:none !important;
  width:100% !important;
  font-size:clamp(.95rem,.92vw,1.06rem) !important;
  line-height:1.36 !important;
  font-weight:400 !important;
  white-space:nowrap !important;
  color:rgba(255,255,255,.94) !important;
}
.integration-ecosystem-visual{
  margin-top:clamp(-132px,-7vw,-86px) !important;
  margin-bottom:clamp(-110px,-5.6vw,-64px) !important;
}
.integration-ecosystem-visual img{
  filter:drop-shadow(0 18px 30px rgba(10,24,56,.075)) !important;
}
@media(max-width:1180px){
  .integration-ecosystem-copy{
    width:min(100% - 44px,980px) !important;
    padding:20px 28px !important;
  }
  .integration-ecosystem-copy h2,
  .integration-ecosystem-copy p{
    white-space:normal !important;
  }
  .integration-ecosystem-visual{
    margin-top:clamp(-78px,-6vw,-42px) !important;
    margin-bottom:clamp(-64px,-4.8vw,-34px) !important;
  }
}
@media(max-width:720px){
  .integration-ecosystem-copy{
    width:min(100% - 28px,640px) !important;
    padding:20px 22px !important;
    border-radius:22px !important;
  }
  .integration-ecosystem-copy h2{
    font-size:clamp(1.35rem,6vw,1.95rem) !important;
    white-space:normal !important;
  }
  .integration-ecosystem-copy p{
    font-size:.95rem !important;
    line-height:1.42 !important;
    white-space:normal !important;
  }
  .integration-ecosystem-visual{
    margin-top:-34px !important;
    margin-bottom:-24px !important;
  }
}



/* v5.2.116: normaliza tipografía y separación de la sección de integraciones.
   El copy copia el sistema visual de los títulos principales y la imagen recupera aire bajo el bloque rojo. */
.integration-ecosystem-wrap{
  gap:clamp(14px,1.6vw,28px) !important;
}
.integration-ecosystem-copy h2{
  font-size:var(--h2) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
  font-weight:700 !important;
  margin:0 0 8px !important;
  white-space:nowrap !important;
  text-shadow:0 8px 22px rgba(0,0,0,.16) !important;
}
.integration-ecosystem-copy p{
  font-size:1.02rem !important;
  line-height:1.55 !important;
  font-weight:400 !important;
  white-space:nowrap !important;
  color:rgba(255,255,255,.94) !important;
  margin:0 !important;
  max-width:none !important;
}
.integration-ecosystem-visual{
  margin-top:clamp(-52px,-3vw,-32px) !important;
  margin-bottom:clamp(-70px,-4vw,-42px) !important;
}
@media(max-width:1180px){
  .integration-ecosystem-copy h2,
  .integration-ecosystem-copy p{
    white-space:normal !important;
  }
  .integration-ecosystem-visual{
    margin-top:clamp(-34px,-3vw,-18px) !important;
    margin-bottom:clamp(-42px,-3.5vw,-24px) !important;
  }
}
@media(max-width:720px){
  .integration-ecosystem-copy h2{
    font-size:clamp(1.35rem,6vw,1.95rem) !important;
    white-space:normal !important;
  }
  .integration-ecosystem-copy p{
    font-size:.96rem !important;
    line-height:1.42 !important;
    white-space:normal !important;
  }
  .integration-ecosystem-visual{
    margin-top:-18px !important;
    margin-bottom:-18px !important;
  }
}



/* v5.2.117: carrusel de dos láminas en la comparativa de inventario.
   Mantiene proporción 1672x941, sin lightbox, autoplay cada 4s, pausa en hover/focus y flechas laterales. */
.inventory-duo-slider{
  position:relative !important;
  width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
}
.inventory-duo-stage{
  position:relative !important;
  width:100% !important;
  aspect-ratio:1672 / 941 !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.inventory-duo-slide{
  position:absolute !important;
  inset:0 !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  transform:translateX(28px) scale(.992) !important;
  transition:opacity .58s ease, transform .58s cubic-bezier(.2,.72,.18,1) !important;
  pointer-events:none !important;
  z-index:1 !important;
}
.inventory-duo-slide.is-active{
  opacity:1 !important;
  transform:translateX(0) scale(1) !important;
  pointer-events:auto !important;
  z-index:2 !important;
}
.inventory-duo-slide img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  cursor:default !important;
  filter:drop-shadow(0 20px 34px rgba(14,32,68,.08)) !important;
}
.inventory-duo-arrow{
  position:absolute !important;
  top:50% !important;
  z-index:5 !important;
  width:46px !important;
  height:46px !important;
  border-radius:999px !important;
  border:1px solid rgba(38,58,124,.18) !important;
  background:rgba(255,255,255,.88) !important;
  color:#263A7C !important;
  display:grid !important;
  place-items:center !important;
  font-size:1.12rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  cursor:pointer !important;
  box-shadow:0 14px 34px rgba(14,32,68,.11) !important;
  transform:translateY(-50%) !important;
  transition:transform .24s ease, box-shadow .24s ease, background .24s ease !important;
}
.inventory-duo-arrow:hover,
.inventory-duo-arrow:focus-visible{
  background:#fff !important;
  box-shadow:0 18px 42px rgba(14,32,68,.16) !important;
}
.inventory-duo-prev{
  left:clamp(-58px,-4vw,-24px) !important;
}
.inventory-duo-next{
  right:clamp(-58px,-4vw,-24px) !important;
}
.inventory-duo-prev:hover,
.inventory-duo-prev:focus-visible{
  transform:translateY(-50%) translateX(-3px) !important;
}
.inventory-duo-next:hover,
.inventory-duo-next:focus-visible{
  transform:translateY(-50%) translateX(3px) !important;
}
.inventory-duo-dots{
  position:absolute !important;
  left:50% !important;
  bottom:clamp(-22px,-1.8vw,-14px) !important;
  z-index:6 !important;
  display:flex !important;
  gap:8px !important;
  transform:translateX(-50%) !important;
  pointer-events:none !important;
}
.inventory-duo-dots span{
  width:8px !important;
  height:8px !important;
  border-radius:999px !important;
  background:rgba(38,58,124,.22) !important;
  transition:width .28s ease, background .28s ease !important;
}
.inventory-duo-dots span.is-active{
  width:24px !important;
  background:#263A7C !important;
}
@media(max-width:980px){
  .inventory-duo-prev{left:8px !important;}
  .inventory-duo-next{right:8px !important;}
  .inventory-duo-arrow{
    width:42px !important;
    height:42px !important;
  }
}
@media(max-width:640px){
  .inventory-duo-arrow{
    width:38px !important;
    height:38px !important;
    font-size:1rem !important;
  }
  .inventory-duo-dots{
    bottom:-18px !important;
  }
}



/* v5.2.119: tarjeta roja de respaldo detrás del carrusel Antes/Después / QNDesk Agent.
   Inspirada en la tarjeta de fondo del bloque de activo centralizado, sin tocar imágenes ni JS. */
.inventory-duo-slider{
  position:relative !important;
  isolation:isolate !important;
}
.inventory-duo-slider::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  left:clamp(46px,7vw,92px) !important;
  right:clamp(-38px,-2.4vw,-18px) !important;
  top:clamp(72px,8vw,118px) !important;
  bottom:clamp(-22px,-2vw,-12px) !important;
  border-radius:42px !important;
  background:
    radial-gradient(520px 220px at 18% 18%, rgba(255,255,255,.18), transparent 72%),
    linear-gradient(135deg, #CD2027 0%, #B32038 46%, #7E203F 100%) !important;
  box-shadow:
    0 34px 86px rgba(205,32,39,.20),
    0 18px 46px rgba(14,32,68,.10) !important;
  transform:rotate(-1.05deg) translateY(10px) scale(.986) !important;
  transform-origin:center center !important;
  pointer-events:none !important;
}
.inventory-duo-stage,
.inventory-duo-arrow,
.inventory-duo-dots{
  position:relative !important;
  z-index:2 !important;
}
.inventory-duo-slide img{
  filter:drop-shadow(0 22px 36px rgba(14,32,68,.10)) !important;
}
@media(max-width:980px){
  .inventory-duo-slider::before{
    left:clamp(28px,7vw,58px) !important;
    right:clamp(-20px,-2vw,-10px) !important;
    top:clamp(52px,9vw,88px) !important;
    bottom:-10px !important;
    border-radius:34px !important;
    transform:rotate(-.8deg) translateY(8px) scale(.988) !important;
  }
}
@media(max-width:640px){
  .inventory-duo-slider::before{
    left:18px !important;
    right:10px !important;
    top:44px !important;
    bottom:6px !important;
    border-radius:24px !important;
    transform:rotate(-.45deg) translateY(6px) scale(.992) !important;
  }
}



/* v5.2.120: ajuste visual del carrusel Antes/Después / QNDesk Agent.
   Flechas homologadas al carrusel de formularios, tarjeta roja recta y lámina principal con bordes suaves. */
.inventory-duo-slider{
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
}
.inventory-duo-slider::before{
  left:clamp(24px,4vw,56px) !important;
  right:clamp(-76px,-4.4vw,-38px) !important;
  top:clamp(72px,8vw,118px) !important;
  bottom:clamp(-22px,-2vw,-12px) !important;
  border-radius:42px !important;
  transform:translateY(10px) scale(.988) !important;
  transform-origin:center center !important;
}
.inventory-duo-stage{
  border-radius:34px !important;
  overflow:hidden !important;
}
.inventory-duo-slide{
  border-radius:34px !important;
  overflow:hidden !important;
}
.inventory-duo-slide img{
  border-radius:34px !important;
}

/* Flechas con el mismo lenguaje visual del deck de formularios */
.inventory-duo-arrow{
  position:absolute !important;
  top:50% !important;
  z-index:12 !important;
  width:44px !important;
  height:44px !important;
  border-radius:999px !important;
  border:1px solid rgba(150,170,195,.32) !important;
  background:rgba(255,255,255,.76) !important;
  color:var(--qba-blue) !important;
  box-shadow:0 16px 34px rgba(14,32,68,.13) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:1 !important;
  transform:translateY(-50%) !important;
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease, color .22s ease, border-color .22s ease !important;
}
.inventory-duo-arrow::before{
  content:"" !important;
  width:12px !important;
  height:12px !important;
  border-right:2.2px solid currentColor !important;
  border-bottom:2.2px solid currentColor !important;
}
.inventory-duo-prev{
  left:clamp(-28px,-1.6vw,-14px) !important;
  right:auto !important;
}
.inventory-duo-next{
  right:clamp(-28px,-1.6vw,-14px) !important;
  left:auto !important;
}
.inventory-duo-prev::before{
  transform:rotate(135deg) !important;
  margin-left:3px !important;
}
.inventory-duo-next::before{
  transform:rotate(-45deg) !important;
  margin-left:-3px !important;
}
.inventory-duo-arrow:hover,
.inventory-duo-arrow:focus-visible{
  background:rgba(255,255,255,.94) !important;
  color:#0f6fb8 !important;
  border-color:rgba(80,168,255,.38) !important;
  box-shadow:0 18px 40px rgba(14,32,68,.18) !important;
  outline:none !important;
}
.inventory-duo-prev:hover,
.inventory-duo-prev:focus-visible{
  transform:translateY(-50%) translateX(-3px) !important;
}
.inventory-duo-next:hover,
.inventory-duo-next:focus-visible{
  transform:translateY(-50%) translateX(3px) !important;
}
.inventory-duo-prev:active{
  transform:translateY(-50%) translateX(-1px) scale(.98) !important;
}
.inventory-duo-next:active{
  transform:translateY(-50%) translateX(1px) scale(.98) !important;
}

@media(max-width:980px){
  .inventory-duo-slider::before{
    left:clamp(20px,5vw,42px) !important;
    right:clamp(-34px,-3vw,-16px) !important;
    top:clamp(52px,9vw,88px) !important;
    bottom:-10px !important;
    border-radius:34px !important;
    transform:translateY(8px) scale(.99) !important;
  }
  .inventory-duo-stage,
  .inventory-duo-slide,
  .inventory-duo-slide img{
    border-radius:26px !important;
  }
  .inventory-duo-prev{
    left:8px !important;
  }
  .inventory-duo-next{
    right:8px !important;
  }
  .inventory-duo-arrow{
    width:40px !important;
    height:40px !important;
  }
}
@media(max-width:640px){
  .inventory-duo-slider::before{
    left:14px !important;
    right:8px !important;
    top:44px !important;
    bottom:6px !important;
    border-radius:24px !important;
    transform:translateY(6px) scale(.992) !important;
  }
  .inventory-duo-stage,
  .inventory-duo-slide,
  .inventory-duo-slide img{
    border-radius:20px !important;
  }
  .inventory-duo-arrow{
    width:38px !important;
    height:38px !important;
  }
}



/* v5.2.121: separación visual entre carruseles y secciones siguientes.
   Da más aire después del carrusel de inventario y separa el encabezado del carrusel de mesa de ayuda. */
.inventory-areas-section{
  margin-top:clamp(104px,8vw,142px) !important;
}
.stack-gallery .gallery-head{
  margin-bottom:clamp(42px,4vw,68px) !important;
}
.stack-gallery .gallery-track{
  padding-top:clamp(42px,4vw,64px) !important;
}
@media(max-width:980px){
  .inventory-areas-section{
    margin-top:clamp(78px,9vw,104px) !important;
  }
  .stack-gallery .gallery-head{
    margin-bottom:clamp(34px,5vw,48px) !important;
  }
  .stack-gallery .gallery-track{
    padding-top:clamp(34px,5vw,48px) !important;
  }
}
@media(max-width:640px){
  .inventory-areas-section{
    margin-top:68px !important;
  }
  .stack-gallery .gallery-head{
    margin-bottom:32px !important;
  }
  .stack-gallery .gallery-track{
    padding-top:32px !important;
  }
}



/* v5.2.122: fondo visual aplicado a la sección de acompañamiento SaaS.
   Usa la imagen horizontal proporcionada como background de la sección, con velo suave para conservar legibilidad. */
.service{
  position:relative !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg, rgba(247,251,255,.68) 0%, rgba(255,255,255,.78) 52%, rgba(255,255,255,.88) 100%),
    url("../assets/images/extracted/css/css-img-011.png") center center / cover no-repeat !important;
}
.service::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(720px 260px at 50% 50%, rgba(255,255,255,.26), transparent 72%),
    linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 22%, rgba(255,255,255,.05) 78%, rgba(255,255,255,.18) 100%) !important;
}
.service > .container{
  position:relative !important;
  z-index:1 !important;
}
.service .service-item{
  background:rgba(255,255,255,.86) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
@media(max-width:980px){
  .service{
    background:
      linear-gradient(180deg, rgba(247,251,255,.72) 0%, rgba(255,255,255,.84) 55%, rgba(255,255,255,.92) 100%),
      url("../assets/images/extracted/css/css-img-011.png") center center / cover no-repeat !important;
  }
}



/* v5.2.123: mayor presencia del fondo en sección de acompañamiento SaaS.
   Reduce los velos blancos para que la imagen lateral se perciba mejor sin perder legibilidad. */
.service{
  background:
    linear-gradient(
      180deg,
      rgba(247,251,255,.16) 0%,
      rgba(255,255,255,.22) 52%,
      rgba(255,255,255,.32) 100%
    ),
    url("../assets/images/extracted/css/css-img-011.png") center center / cover no-repeat !important;
}
.service::before{
  opacity:.16 !important;
  background:
    radial-gradient(720px 260px at 50% 50%, rgba(255,255,255,.12), transparent 72%),
    linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 76%, rgba(255,255,255,.08) 100%) !important;
}
.service .service-item{
  background:rgba(255,255,255,.90) !important;
  backdrop-filter:blur(7px) !important;
  -webkit-backdrop-filter:blur(7px) !important;
}
@media(max-width:980px){
  .service{
    background:
      linear-gradient(
        180deg,
        rgba(247,251,255,.20) 0%,
        rgba(255,255,255,.30) 55%,
        rgba(255,255,255,.42) 100%
      ),
      url("../assets/images/extracted/css/css-img-011.png") center center / cover no-repeat !important;
  }
}



/* v5.2.124: ajuste de copy y botones en sección de acompañamiento.
   Título en dos líneas, énfasis rojo en el segundo renglón y botones centrados con profundidad. */
.service-title{
  max-width:620px !important;
}
.service-title span{
  position:relative !important;
  display:inline-block !important;
  padding-bottom:10px !important;
}
.service-title span::after{
  content:"" !important;
  position:absolute !important;
  left:2px !important;
  bottom:0 !important;
  width:72% !important;
  height:5px !important;
  border-radius:999px !important;
  background:#CD2027 !important;
  box-shadow:0 8px 18px rgba(205,32,39,.22) !important;
}
.service .service-item{
  min-height:74px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:20px 24px !important;
  border-radius:20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)) !important;
  border:1px solid rgba(174,194,218,.72) !important;
  box-shadow:
    0 18px 36px rgba(14,32,68,.10),
    0 6px 14px rgba(14,32,68,.045),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  color:var(--qba-ink) !important;
  font-weight:850 !important;
  line-height:1.25 !important;
  transform:translateY(0) !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
}
.service .service-item:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(80,168,255,.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.91)) !important;
  box-shadow:
    0 24px 48px rgba(14,32,68,.14),
    0 8px 18px rgba(14,32,68,.06),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}
@media(max-width:980px){
  .service-title{
    max-width:720px !important;
  }
  .service .service-item{
    min-height:68px !important;
  }
}
@media(max-width:640px){
  .service-title span::after{
    height:4px !important;
    width:68% !important;
  }
  .service .service-item{
    min-height:62px !important;
    padding:17px 18px !important;
  }
}



/* v5.2.125: título de acompañamiento en dos líneas exactas.
   Evita que "Ganas acompañamiento." se parta y da un poco más de ancho a la columna izquierda. */
.service-grid{
  grid-template-columns:.9fr 1.1fr !important;
}
.service-title span{
  white-space:nowrap !important;
}
@media(max-width:980px){
  .service-grid{
    grid-template-columns:1fr !important;
  }
  .service-title span{
    white-space:normal !important;
  }
}



/* v5.2.126: línea roja del título de acompañamiento más larga. */
.service-title span::after{
  width:96% !important;
}
@media(max-width:640px){
  .service-title span::after{
    width:92% !important;
  }
}



/* v5.2.128: reduce separación entre integraciones y acompañamiento.
   Sube ligeramente la sección "No pierdes control. Ganas acompañamiento." sin alterar su diseño interno. */
.integration-ecosystem-section{
  margin-bottom:clamp(42px,4vw,72px) !important;
}
.integration-ecosystem-section + .service{
  padding-top:clamp(58px,5vw,70px) !important;
}
@media(max-width:980px){
  .integration-ecosystem-section{
    margin-bottom:clamp(34px,5vw,54px) !important;
  }
  .integration-ecosystem-section + .service{
    padding-top:clamp(50px,6vw,62px) !important;
  }
}
@media(max-width:640px){
  .integration-ecosystem-section{
    margin-bottom:32px !important;
  }
  .integration-ecosystem-section + .service{
    padding-top:46px !important;
  }
}



/* v5.2.129: subtítulo de "Valor empresarial en cuatro frentes" en una sola línea en escritorio. */
.value .section-lead{
  max-width:1120px !important;
  white-space:nowrap !important;
}
@media(max-width:980px){
  .value .section-lead{
    max-width:760px !important;
    white-space:normal !important;
  }
}



/* v5.2.130: copy de casos reales y logos enlazables con tooltip corporativo. */
.cases .section-lead{
  max-width:1120px !important;
}
.case-logo-link{
  position:relative !important;
  display:inline-block !important;
  width:max-content !important;
  max-width:100% !important;
  margin-bottom:22px !important;
  border-radius:18px !important;
  outline:none !important;
}
.case-logo-link .case-logo{
  margin-bottom:0 !important;
  transition:transform .22s ease, filter .22s ease !important;
  cursor:pointer !important;
}
.case-logo-link:hover .case-logo,
.case-logo-link:focus-visible .case-logo{
  transform:translateY(-2px) scale(1.015) !important;
  filter:drop-shadow(0 12px 20px rgba(14,32,68,.12)) !important;
}
.case-logo-tooltip{
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 14px) !important;
  z-index:20 !important;
  min-width:260px !important;
  max-width:320px !important;
  padding:12px 14px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#071d30,#263A7C) !important;
  color:#fff !important;
  box-shadow:0 18px 40px rgba(14,32,68,.24) !important;
  transform:translateX(-50%) translateY(8px) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease !important;
  font-size:.82rem !important;
  line-height:1.35 !important;
  font-weight:650 !important;
  text-align:left !important;
}
.case-logo-tooltip::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:100% !important;
  width:12px !important;
  height:12px !important;
  background:#182f5b !important;
  transform:translate(-50%,-6px) rotate(45deg) !important;
}
.case-logo-tooltip span{
  display:block !important;
}
.case-logo-tooltip span:first-child{
  font-weight:900 !important;
}
.case-logo-link:hover .case-logo-tooltip,
.case-logo-link:focus-visible .case-logo-tooltip{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateX(-50%) translateY(0) !important;
}
.case h3 + ul,
.case h3 + p + ul{
  margin-top:14px !important;
}
@media(max-width:720px){
  .case-logo-tooltip{
    left:0 !important;
    transform:translateY(8px) !important;
    min-width:min(280px,82vw) !important;
  }
  .case-logo-link:hover .case-logo-tooltip,
  .case-logo-link:focus-visible .case-logo-tooltip{
    transform:translateY(0) !important;
  }
  .case-logo-tooltip::after{
    left:28px !important;
  }
}



/* v5.2.131: sección independiente de reseñas dinámicas Trustindex / Google Reviews. */
.trust-reviews{
  position:relative !important;
  overflow:hidden !important;
  background:
    radial-gradient(780px 300px at 18% 22%, rgba(38,58,124,.08), transparent 64%),
    radial-gradient(700px 280px at 86% 80%, rgba(205,32,39,.07), transparent 66%),
    linear-gradient(180deg,#fff 0%,#f6f9fd 100%) !important;
  padding-top:clamp(72px,6vw,104px) !important;
}
.trust-reviews::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.72), rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(255,255,255,.72)) !important;
  pointer-events:none !important;
}
.trust-reviews > .container{
  position:relative !important;
  z-index:1 !important;
}
.trust-reviews-head{
  text-align:center !important;
  max-width:980px !important;
  margin:0 auto clamp(32px,4vw,52px) !important;
}
.trust-reviews-head .section-lead{
  max-width:860px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.trust-reviews-panel{
  position:relative !important;
  border:1px solid rgba(198,213,231,.78) !important;
  border-radius:34px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)) !important;
  box-shadow:0 28px 80px rgba(14,32,68,.11), 0 10px 28px rgba(14,32,68,.06) !important;
  padding:clamp(24px,3.2vw,44px) !important;
  overflow:hidden !important;
}
.trust-reviews-panel::before{
  content:"" !important;
  position:absolute !important;
  inset:0 0 auto 0 !important;
  height:6px !important;
  background:linear-gradient(90deg,#CD2027 0%,#CD2027 32%,#6C4FB2 56%,#263A7C 100%) !important;
}
.trust-reviews-widget{
  position:relative !important;
  min-height:clamp(230px,26vw,360px) !important;
}
.trust-reviews-widget noscript{
  display:block !important;
  padding:22px !important;
  border-radius:22px !important;
  border:1px dashed rgba(38,58,124,.28) !important;
  background:rgba(248,251,254,.92) !important;
  color:var(--qba-muted) !important;
  text-align:center !important;
  font-weight:700 !important;
}
@media(max-width:720px){
  .trust-reviews{
    padding-top:64px !important;
  }
  .trust-reviews-panel{
    border-radius:26px !important;
    padding:22px !important;
  }
  .trust-reviews-widget{
    min-height:280px !important;
  }
}



/* v5.2.132: compacta separación entre casos de éxito y reseñas, y reduce altura del panel Trustindex. */
.cases{
  padding-bottom:clamp(34px,3.5vw,52px) !important;
}
.cases + .trust-reviews{
  padding-top:clamp(30px,3vw,46px) !important;
}
.trust-reviews-head{
  margin-bottom:clamp(24px,2.8vw,38px) !important;
}
.trust-reviews-panel{
  padding:clamp(18px,2.4vw,32px) !important;
}
.trust-reviews-widget{
  min-height:clamp(190px,20vw,270px) !important;
}
@media(max-width:720px){
  .cases{
    padding-bottom:32px !important;
  }
  .cases + .trust-reviews{
    padding-top:34px !important;
  }
  .trust-reviews-head{
    margin-bottom:24px !important;
  }
  .trust-reviews-panel{
    padding:20px !important;
  }
  .trust-reviews-widget{
    min-height:250px !important;
  }
}



/* v5.2.133: compacta tarjetas de casos, centra logos, corrige tooltip y colorea QNDesk. */
.cases .brand-word{
  white-space:nowrap !important;
}
.cases .brand-qn{
  color:#263A7C !important;
}
.cases .brand-desk{
  color:#CD2027 !important;
}
.cases .case-grid{
  max-width:1120px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  gap:24px !important;
}
.cases .case{
  padding:28px 30px 30px !important;
  overflow:visible !important;
}
.cases .case::before{
  border-radius:34px 34px 0 0 !important;
}
.cases .case-logo-link{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:26px !important;
}
.cases .case-logo-link .case-logo{
  height:92px !important;
  max-width:260px !important;
}
.cases .case-logo-tooltip{
  bottom:calc(100% + 12px) !important;
}
@media(max-width:900px){
  .cases .case-grid{
    max-width:680px !important;
    grid-template-columns:1fr !important;
  }
}
@media(max-width:640px){
  .cases .case{
    padding:26px 22px 28px !important;
  }
  .cases .case-logo-link .case-logo{
    height:78px !important;
    max-width:220px !important;
  }
}



/* v5.2.134: centra encabezado de casos y ajusta barra superior al ancho real de las tarjetas. */
.cases > .container > .section-title{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.cases > .container > .section-lead{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:1120px !important;
}
.cases .case::before{
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  border-radius:34px 34px 0 0 !important;
  clip-path:inset(0 round 34px 34px 0 0) !important;
  transform:none !important;
}
@media(max-width:640px){
  .cases > .container > .section-title,
  .cases > .container > .section-lead{
    text-align:left !important;
  }
}



/* v5.2.135: ajusta franja superior de tarjetas de casos dentro del borde redondeado real. */
.cases .case::before{
  left:1px !important;
  right:1px !important;
  top:1px !important;
  width:auto !important;
  max-width:none !important;
  height:6px !important;
  border-radius:32px 32px 0 0 !important;
  clip-path:none !important;
  transform:none !important;
}



/* v5.2.136: replica lógica del panel de reseñas en tarjetas de casos; el contenedor recorta la franja. */
.cases .case{
  overflow:hidden !important;
}
.cases .case::before{
  left:0 !important;
  right:0 !important;
  top:0 !important;
  width:auto !important;
  max-width:none !important;
  height:6px !important;
  border-radius:0 !important;
  clip-path:none !important;
  transform:none !important;
}
.cases .case-logo-link{
  margin-bottom:26px !important;
  z-index:2 !important;
}
.cases .case-logo-tooltip{
  top:calc(100% + 10px) !important;
  bottom:auto !important;
  left:50% !important;
  transform:translateX(-50%) translateY(-8px) !important;
  z-index:25 !important;
}
.cases .case-logo-tooltip::after{
  top:auto !important;
  bottom:100% !important;
  transform:translate(-50%,6px) rotate(45deg) !important;
}
.cases .case-logo-link:hover .case-logo-tooltip,
.cases .case-logo-link:focus-visible .case-logo-tooltip{
  transform:translateX(-50%) translateY(0) !important;
}
@media(max-width:720px){
  .cases .case-logo-tooltip{
    left:50% !important;
    transform:translateX(-50%) translateY(-8px) !important;
    min-width:min(280px,76vw) !important;
  }
  .cases .case-logo-link:hover .case-logo-tooltip,
  .cases .case-logo-link:focus-visible .case-logo-tooltip{
    transform:translateX(-50%) translateY(0) !important;
  }
  .cases .case-logo-tooltip::after{
    left:50% !important;
  }
}



/* v5.2.137: hover rojo completo para botones de acompañamiento. */
.service .service-item{
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease !important;
}
.service .service-item:hover,
.service .service-item:focus-visible{
  background:#CD2027 !important;
  color:#fff !important;
  border-color:#CD2027 !important;
  box-shadow:0 18px 34px rgba(205,32,39,.24), 0 8px 16px rgba(14,32,68,.08) !important;
  transform:translateY(-3px) !important;
}



/* v5.2.138: reemplazo de imagen de integraciones por versión actualizada de branding. */
.integration-ecosystem-visual img{
  object-fit:contain !important;
}



/* v5.2.139: integra reseñas con casos reales como un mismo bloque visual. */
.cases{
  background:#fff !important;
  padding-bottom:clamp(18px,2vw,30px) !important;
}
.cases + .trust-reviews{
  background:#fff !important;
  padding-top:0 !important;
  padding-bottom:clamp(72px,6vw,104px) !important;
}
.trust-reviews::before{
  display:none !important;
}
.trust-reviews > .container{
  margin-top:0 !important;
}
.trust-reviews-panel{
  margin-top:0 !important;
}
@media(max-width:720px){
  .cases{
    padding-bottom:22px !important;
  }
  .cases + .trust-reviews{
    padding-top:0 !important;
    padding-bottom:64px !important;
  }
}



/* v5.2.140: widget flotante WhatsApp estilo Join.Chat para QNDesk. */
.qndesk-whatsapp-widget{
  position:fixed !important;
  right:clamp(18px,2.2vw,30px) !important;
  bottom:clamp(18px,2.2vw,30px) !important;
  z-index:9999 !important;
  font-family:"Montserrat","Inter","Segoe UI",Arial,sans-serif !important;
  cursor:grab !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  touch-action:none !important;
  -webkit-touch-callout:none !important;
}
.qndesk-whatsapp-widget.is-dragging{
  cursor:grabbing !important;
}
.qndesk-whatsapp-widget.is-dragging,
.qndesk-whatsapp-widget.is-dragging *{
  cursor:grabbing !important;
}
.qndesk-wa-bubble{
  position:relative !important;
  width:62px !important;
  height:62px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#25d366 !important;
  color:#fff !important;
  display:grid !important;
  place-items:center !important;
  box-shadow:0 18px 36px rgba(9,42,29,.22),0 8px 18px rgba(37,211,102,.28) !important;
  cursor:inherit !important;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease !important;
}
.qndesk-wa-bubble:hover,
.qndesk-wa-bubble:focus-visible,
.qndesk-whatsapp-widget.is-open .qndesk-wa-bubble{
  transform:translateY(-3px) scale(1.035) !important;
  background:#20c35d !important;
  box-shadow:0 22px 44px rgba(9,42,29,.25),0 10px 24px rgba(37,211,102,.34) !important;
}
.qndesk-wa-bubble svg{
  width:34px !important;
  height:34px !important;
  display:block !important;
}
.qndesk-wa-tip{
  position:absolute !important;
  right:74px !important;
  top:50% !important;
  transform:translateY(-50%) translateX(8px) !important;
  padding:9px 13px !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#10204a !important;
  border:1px solid rgba(201,216,233,.72) !important;
  box-shadow:0 12px 28px rgba(14,32,68,.14) !important;
  white-space:nowrap !important;
  font-size:.84rem !important;
  font-weight:800 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease !important;
}
.qndesk-wa-tip::after{
  content:"" !important;
  position:absolute !important;
  left:100% !important;
  top:50% !important;
  width:10px !important;
  height:10px !important;
  background:#fff !important;
  border-right:1px solid rgba(201,216,233,.72) !important;
  border-bottom:1px solid rgba(201,216,233,.72) !important;
  transform:translate(-5px,-50%) rotate(-45deg) !important;
}
.qndesk-whatsapp-widget:not(.is-open) .qndesk-wa-bubble:hover .qndesk-wa-tip,
.qndesk-whatsapp-widget:not(.is-open) .qndesk-wa-bubble:focus-visible .qndesk-wa-tip{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(-50%) translateX(0) !important;
}
.qndesk-wa-card{
  position:absolute !important;
  right:0 !important;
  bottom:82px !important;
  top:auto !important;
  width:min(400px, calc(100vw - 36px)) !important;
  border-radius:28px !important;
  background:#f4fbf7 !important;
  border:1px solid rgba(200,222,211,.72) !important;
  box-shadow:0 24px 70px rgba(14,32,68,.22),0 8px 24px rgba(14,32,68,.12) !important;
  overflow:hidden !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(14px) scale(.985) !important;
  transform-origin:bottom right !important;
  pointer-events:none !important;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease !important;
}
.qndesk-whatsapp-widget.is-panel-up .qndesk-wa-card{
  top:auto !important;
  bottom:82px !important;
}
.qndesk-whatsapp-widget.is-panel-down .qndesk-wa-card{
  top:82px !important;
  bottom:auto !important;
  transform:translateY(-14px) scale(.985) !important;
}
.qndesk-whatsapp-widget.is-panel-left .qndesk-wa-card{
  left:auto !important;
  right:0 !important;
  transform-origin:bottom right !important;
}
.qndesk-whatsapp-widget.is-panel-right .qndesk-wa-card{
  left:0 !important;
  right:auto !important;
  transform-origin:bottom left !important;
}
.qndesk-whatsapp-widget.is-panel-left.is-panel-down .qndesk-wa-card{
  transform-origin:top right !important;
}
.qndesk-whatsapp-widget.is-panel-right.is-panel-down .qndesk-wa-card{
  transform-origin:top left !important;
}
.qndesk-whatsapp-widget.is-open .qndesk-wa-card{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) scale(1) !important;
  pointer-events:auto !important;
}
.qndesk-wa-header{
  min-height:70px !important;
  padding:0 22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  background:#25d366 !important;
  color:#fff !important;
}
.qndesk-wa-powered{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  font-size:.78rem !important;
  font-weight:700 !important;
  opacity:.96 !important;
}
.qndesk-wa-powered strong{
  font-size:1.05rem !important;
  letter-spacing:-.025em !important;
}
.qndesk-wa-close{
  width:38px !important;
  height:38px !important;
  border:0 !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(0,0,0,.16) !important;
  color:#fff !important;
  font-size:28px !important;
  line-height:1 !important;
  cursor:inherit !important;
  transition:background .18s ease, transform .18s ease !important;
}
.qndesk-wa-close:hover,
.qndesk-wa-close:focus-visible{
  background:rgba(0,0,0,.24) !important;
  transform:rotate(6deg) !important;
}
.qndesk-wa-body{
  padding:22px 18px 18px !important;
  min-height:228px !important;
}
.qndesk-wa-message{
  position:relative !important;
  width:max-content !important;
  max-width:78% !important;
  margin:0 0 16px 8px !important;
  padding:14px 18px !important;
  border-radius:22px !important;
  background:#fff !important;
  color:#1b2a4a !important;
  box-shadow:0 8px 18px rgba(14,32,68,.13),0 1px 0 rgba(255,255,255,.8) inset !important;
  font-size:.98rem !important;
  line-height:1.35 !important;
}
.qndesk-wa-message::before{
  content:"" !important;
  position:absolute !important;
  left:-8px !important;
  top:18px !important;
  width:16px !important;
  height:16px !important;
  background:#fff !important;
  border-radius:2px !important;
  transform:rotate(45deg) !important;
  box-shadow:-4px 4px 10px rgba(14,32,68,.05) !important;
}
.qndesk-wa-start{
  position:absolute !important;
  right:14px !important;
  bottom:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  min-height:50px !important;
  padding:0 16px 0 22px !important;
  border-radius:999px !important;
  background:#76e3a0 !important;
  color:#fff !important;
  font-size:1rem !important;
  font-weight:900 !important;
  text-decoration:none !important;
  box-shadow:0 12px 26px rgba(37,211,102,.24) !important;
  touch-action:auto !important;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.qndesk-wa-start:hover,
.qndesk-wa-start:focus-visible{
  background:#25d366 !important;
  transform:translateY(-2px) !important;
  box-shadow:0 16px 32px rgba(37,211,102,.30) !important;
}
.qndesk-is-dragging,
.qndesk-is-dragging *{
  user-select:none !important;
  -webkit-user-select:none !important;
}
.qndesk-wa-start svg{
  width:32px !important;
  height:32px !important;
}
@media(max-width:640px){
  .qndesk-whatsapp-widget{
    right:16px !important;
    bottom:16px !important;
  }
  .qndesk-wa-bubble{
    width:58px !important;
    height:58px !important;
  }
  .qndesk-wa-card{
    width:calc(100vw - 28px) !important;
    right:-2px !important;
    bottom:76px !important;
    top:auto !important;
    border-radius:24px !important;
  }
  .qndesk-whatsapp-widget.is-panel-up .qndesk-wa-card{
    bottom:76px !important;
    top:auto !important;
  }
  .qndesk-whatsapp-widget.is-panel-down .qndesk-wa-card{
    top:76px !important;
    bottom:auto !important;
  }
  .qndesk-whatsapp-widget.is-panel-right .qndesk-wa-card{
    left:-2px !important;
    right:auto !important;
  }
  .qndesk-wa-tip{
    display:none !important;
  }
  .qndesk-wa-body{
    min-height:218px !important;
  }
}



/* v5.2.141: ajuste de copy en saludo del widget WhatsApp: QbaNet en lugar de QNDesk. */



/* v5.2.142: demo form copy, QNDesk con color de marca, campo área eliminado y formulario listo para PHP. */
.contact-box{
  align-items:center !important;
  padding:clamp(32px,3.2vw,40px) !important;
  gap:clamp(30px,3.2vw,46px) !important;
}
.contact-copy .section-title{
  max-width:520px !important;
}
.contact-copy .section-lead{
  max-width:560px !important;
  line-height:1.62 !important;
}
.contact .brand-word{
  white-space:nowrap !important;
}
.contact .brand-qn{
  color:#263A7C !important;
}
.contact .brand-desk{
  color:#CD2027 !important;
}
.demo-form{
  gap:12px !important;
}
.demo-form .field{
  min-height:50px !important;
}
.demo-form .textarea{
  min-height:104px !important;
}
.demo-hidden-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.demo-form-status{
  display:none;
  margin:0;
  padding:10px 14px;
  border-radius:14px;
  font-size:.92rem;
  font-weight:750;
}
.demo-form-status.is-success{
  display:block;
  background:rgba(6,194,112,.10);
  color:#067a49;
  border:1px solid rgba(6,194,112,.22);
}
.demo-form-status.is-error{
  display:block;
  background:rgba(205,32,39,.09);
  color:#a91d24;
  border:1px solid rgba(205,32,39,.22);
}
.demo-form .cta{
  width:100% !important;
}
@media(max-width:980px){
  .contact-box{
    align-items:start !important;
  }
  .contact-copy .section-title,
  .contact-copy .section-lead{
    max-width:760px !important;
  }
}



/* v5.2.143: resalta sin costo ni compromiso y hover azul en CTAs */
.contact-copy .section-lead strong{
  font-weight: 800 !important;
  color: var(--qba-blue) !important;
}
.site-header .cta,
.demo-form .cta{
  transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.site-header .cta:hover,
.demo-form .cta:hover{
  background: var(--qba-blue) !important;
  box-shadow: 0 18px 36px rgba(38,58,124,.24) !important;
  transform: translateY(-1px);
}
.site-header .cta:focus-visible,
.demo-form .cta:focus-visible{
  outline: 3px solid rgba(38,58,124,.18);
  outline-offset: 2px;
}



/* v5.2.147: ajusta la postal de planes a un punto intermedio de escala y hace que el marco se acople al tamaño real de la imagen. */
.pricing{
  background:
    radial-gradient(900px 360px at 22% 35%, rgba(26,83,118,.36), transparent 68%),
    linear-gradient(120deg,#0b3048 0%,#0d2144 58%,#101d42 100%) !important;
  color:#fff !important;
  text-align:center !important;
  padding:clamp(64px,6.6vw,104px) 0 !important;
  overflow:hidden !important;
}
.pricing-visual-card{
  display:flex !important;
  width:fit-content !important;
  max-width:calc(100% - 88px) !important;
  margin-inline:auto !important;
  padding:clamp(12px,1vw,14px) !important;
  border-radius:clamp(28px,2.5vw,42px) !important;
  background:
    conic-gradient(from 205deg at 50% 50%,
      rgba(38,58,124,.98) 0deg,
      rgba(38,58,124,.98) 56deg,
      rgba(205,32,39,.98) 104deg,
      rgba(41,57,122,.96) 156deg,
      rgba(205,32,39,.97) 212deg,
      rgba(38,58,124,.98) 272deg,
      rgba(205,32,39,.96) 326deg,
      rgba(38,58,124,.98) 360deg) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 34px 90px rgba(0,0,0,.26), 0 10px 30px rgba(8,22,50,.18) !important;
}
.pricing-visual-inner{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:fit-content !important;
  padding:0 !important;
  border-radius:calc(clamp(28px,2.5vw,42px) - 8px) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(248,250,253,.975) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), inset 0 0 0 1px rgba(14,32,68,.03) !important;
  overflow:hidden !important;
}
.pricing-visual-card img{
  display:block !important;
  width:min(1190px, calc(100vw - 210px)) !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
  border-radius:clamp(18px,1.6vw,26px) !important;
  object-fit:contain !important;
}
@media(max-width:980px){
  .pricing{
    padding:clamp(52px,8vw,76px) 0 !important;
  }
  .pricing-visual-card{
    max-width:calc(100% - 36px) !important;
    padding:10px !important;
    border-radius:26px !important;
  }
  .pricing-visual-inner{
    border-radius:20px !important;
  }
  .pricing-visual-card img{
    width:min(100%, calc(100vw - 56px)) !important;
    border-radius:18px !important;
  }
}
@media(max-width:640px){
  .pricing{
    padding:46px 0 !important;
  }
  .pricing-visual-card{
    max-width:calc(100% - 22px) !important;
    padding:8px !important;
    border-radius:22px !important;
  }
  .pricing-visual-inner{
    border-radius:16px !important;
  }
  .pricing-visual-card img{
    width:calc(100vw - 38px) !important;
    max-width:100% !important;
    border-radius:14px !important;
  }
}



/* v5.2.148: corrige scroll del botón Solicitar demo compensando el header sticky. */
#demo{
  scroll-margin-top:96px !important;
}
.site-header a.cta{
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}



/* v5.2.149: módulo Mesa de ayuda como imagen estática, sin botón de reproducción. */
.section.module.helpdesk .module-video.helpdesk-video-preview{
  cursor:default !important;
}
.section.module.helpdesk .module-video.helpdesk-video-preview .preview-play{
  display:none !important;
}



/* v5.2.150: reemplazo de imagen estática del módulo Mesa de ayuda por versión actualizada sin Quick Overview. */
.section.module.helpdesk .module-video.helpdesk-video-preview{
  cursor:default !important;
}
.section.module.helpdesk .module-video.helpdesk-video-preview .preview-play{
  display:none !important;
}



/* v5.2.151: módulo Gestión de inventarios como imagen estática, sin botón de reproducción. */
.section.module.assets .module-video.module-video-preview{
  cursor:default !important;
}
.section.module.assets .module-video.module-video-preview .preview-play{
  display:none !important;
}

/* v5.2.152: footer corporativo QNDesk y página interna de aviso de privacidad. */
.footer--corporate{
  background:#0b1f3a;
  color:#fff;
  border-top:1px solid rgba(168,194,210,.18);
  padding:30px 0;
}
.footer-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.footer-brand{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.footer-logo{
  display:block;
  width:104px;
  height:auto;
}
.footer-copy{
  margin:0;
  flex:1 1 auto;
  color:#fff;
  font-size:.95rem;
  line-height:1.7;
  text-align:right;
}
.footer-copy a{
  color:#8fd3ff;
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer-copy a:hover,
.footer-copy a:focus-visible{
  color:#d7f0ff;
}
.privacy-page{
  background:#fff;
  color:#1d2a44;
}
.privacy-main{
  min-height:calc(100vh - 96px);
}
.privacy-shell{
  max-width:1100px;
  padding-top:56px;
  padding-bottom:72px;
}
.privacy-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:28px;
  color:#335f9d;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px;
}
.privacy-card{
  max-width:980px;
  margin:0 auto;
}
.privacy-header{
  margin-bottom:38px;
  text-align:center;
}
.privacy-title{
  margin:0;
  color:#16325f;
  font-size:clamp(2.2rem,4.5vw,3.5rem);
  line-height:1.1;
  letter-spacing:-.03em;
}
.privacy-content{
  color:#26354f;
  font-size:1.03rem;
  line-height:1.9;
}
.privacy-content h2{
  margin:36px 0 12px;
  color:#16325f;
  font-size:1.18rem;
  font-weight:800;
  line-height:1.4;
}
.privacy-content p{
  margin:0 0 16px;
}
.privacy-content a{
  color:#335f9d;
  text-decoration:underline;
  text-underline-offset:3px;
}
@media(max-width:760px){
  .footer--corporate{
    padding:24px 0;
  }
  .footer-shell{
    flex-direction:column;
    justify-content:center;
    gap:14px;
    text-align:center;
  }
  .footer-logo{
    width:90px;
  }
  .footer-copy{
    text-align:center;
  }
  .privacy-shell{
    padding-top:36px;
    padding-bottom:56px;
  }
  .privacy-header{
    margin-bottom:26px;
  }
  .privacy-content{
    font-size:1rem;
    line-height:1.8;
  }
  .privacy-content h2{
    font-size:1.08rem;
  }
.footer-copy{
    font-size:.9rem;
  }
}

/* v5.2.153: corrección responsive de la sección "Cada activo puede convertirse en un expediente operativo completo." */
@media(max-width:1280px){
  .asset-core-showcase{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:min(100% - 40px,1040px) !important;
    max-width:100% !important;
    gap:30px !important;
    align-items:start !important;
    margin-top:64px !important;
    margin-bottom:56px !important;
  }
  .asset-core-copy{
    order:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:0 !important;
  }
  .asset-core-copy .section-title{
    max-width:100% !important;
    font-size:clamp(1.95rem, 4.6vw, 2.85rem) !important;
    line-height:1.12 !important;
    overflow-wrap:anywhere !important;
  }
  .asset-core-image{
    order:2 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 auto !important;
    overflow:visible !important;
    min-height:auto !important;
    padding:0 0 18px 0 !important;
  }
  .asset-core-image::before{
    left:36px !important;
    right:10px !important;
    top:16px !important;
    bottom:auto !important;
    height:46% !important;
    min-height:180px !important;
  }
  .asset-core-image::after{
    left:52px !important;
    right:24px !important;
    top:30px !important;
    bottom:auto !important;
    height:34% !important;
    min-height:120px !important;
  }
  .asset-core-main-zoom{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
  }
  .asset-core-image:hover .asset-core-main-zoom,
  .asset-core-main-zoom:focus-within,
  .asset-core-image:hover img,
  .asset-core-main-zoom:hover{
    transform:none !important;
    filter:none !important;
    box-shadow:none !important;
  }
  .asset-core-image img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 auto !important;
    transform:none !important;
  }
}

@media(max-width:900px){
  .asset-core-showcase{
    width:min(100% - 28px,760px) !important;
    gap:24px !important;
    margin-bottom:44px !important;
  }
  .asset-core-image::before,
  .asset-core-image::after{
    display:none !important;
  }
}

@media(max-width:640px){
  .asset-core-showcase{
    width:min(100% - 24px,640px) !important;
    gap:20px !important;
    margin-bottom:36px !important;
  }
  .asset-core-copy{
    padding:0 !important;
  }
  .asset-core-copy .section-title{
    font-size:clamp(1.6rem, 7vw, 2.15rem) !important;
    line-height:1.16 !important;
  }
  .asset-core-image{
    padding:0 !important;
  }
  .asset-core-image::before,
  .asset-core-image::after{
    display:none !important;
  }
  .asset-core-image img{
    border-radius:20px !important;
    transform:none !important;
  }
}

/* v5.2.154: banners de módulos fluidos en tablet y móvil, sin recorte horizontal ni texto cortado */
@media(max-width:1200px){
  .inventory-module-shell,
  .helpdesk-module-shell,
  .inventory-module-banner,
  .helpdesk-module-banner{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
  }

  .inventory-module-shell,
  .helpdesk-module-shell{
    overflow-x:clip !important;
  }

  .inventory-module-banner,
  .helpdesk-module-banner{
    padding:0 !important;
    overflow:visible !important;
    box-shadow:none !important;
  }

  .inventory-module-banner img,
  .helpdesk-module-banner img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    margin:0 auto !important;
    transform:none !important;
  }
}

@media(max-width:900px){
  .inventory-module-banner,
  .helpdesk-module-banner{
    line-height:0 !important;
    border-radius:0 !important;
  }

  .inventory-module-banner img,
  .helpdesk-module-banner img{
    border-radius:0 !important;
  }
}

@media(max-width:640px){
  .inventory-module-shell,
  .helpdesk-module-shell{
    overflow-x:hidden !important;
  }
}

/* v5.2.160: lightbox para carrusel QNDesk Agent / inventory-duo. */
.inventory-duo-slide{
  cursor:zoom-in !important;
}
.inventory-duo-slide img{
  cursor:zoom-in !important;
  transition:transform .42s cubic-bezier(.2,.72,.18,1), filter .42s ease !important;
}
.inventory-duo-slide.is-active:hover img,
.inventory-duo-slide.is-active:focus-within img{
  transform:scale(1.012) !important;
  filter:drop-shadow(0 26px 42px rgba(14,32,68,.14)) !important;
}
.inventory-duo-slide::after{
  content:"Clic para ampliar" !important;
  position:absolute !important;
  right:16px !important;
  bottom:16px !important;
  z-index:4 !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  background:rgba(7,29,48,.84) !important;
  color:#fff !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  box-shadow:0 12px 30px rgba(4,12,25,.24) !important;
  opacity:0 !important;
  transform:translateY(6px) !important;
  transition:opacity .24s ease, transform .24s ease !important;
  pointer-events:none !important;
}
.inventory-duo-slide.is-active:hover::after,
.inventory-duo-slide.is-active:focus-within::after{
  opacity:1 !important;
  transform:none !important;
}
@media(max-width:640px){
  .inventory-duo-slide::after{
    right:12px !important;
    bottom:12px !important;
    font-size:.66rem !important;
    padding:6px 10px !important;
  }
}


/* v5.2.165: responsive móvil para infografía de flujo.
   En pantallas pequeñas el título deja de ser overlay y se coloca arriba de la imagen
   para evitar traslapes sobre la infografía. */
@media(max-width:640px){
  .flow-visual-section{
    margin:38px 0 56px !important;
    padding:0 14px !important;
  }

  .flow-visual-bleed{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
    overflow:visible !important;
  }

  .flow-visual-copy,
  .flow-visual-section.visible .flow-visual-copy{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    z-index:1 !important;
    opacity:1 !important;
    transform:none !important;
    text-align:left !important;
    pointer-events:auto !important;
    padding:0 2px !important;
  }

  .flow-visual-copy h2{
    color:var(--qba-ink) !important;
    text-shadow:none !important;
    font-size:clamp(1.55rem,7vw,2.05rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
    white-space:normal !important;
    max-width:100% !important;
    margin:0 !important;
  }

  .flow-visual-bleed img{
    width:100% !important;
    height:auto !important;
    margin:0 auto !important;
    border-radius:16px !important;
  }
}

/* v5.2.166: orden responsivo formularios.
   En escritorio se conserva carrusel izquierda + copy derecha.
   En tablet/móvil el copy pasa arriba del carrusel para mantener la lectura correcta. */
@media(max-width:980px){
  .forms-section-layout{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:clamp(24px,5vw,42px) !important;
    margin-top:clamp(44px,8vw,64px) !important;
  }

  .forms-section-layout > .forms-section-copy{
    order:1 !important;
    width:100% !important;
  }

  .forms-section-layout > .forms-auto-deck{
    order:2 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
  }

  .forms-section-layout .forms-section-copy .section-title,
  .forms-section-layout .forms-section-copy .section-lead{
    max-width:860px !important;
  }
}

@media(max-width:640px){
  .forms-section-layout{
    gap:22px !important;
    margin-top:44px !important;
  }

  .forms-section-layout .forms-section-copy .section-title{
    font-size:clamp(1.7rem,8vw,2.25rem) !important;
    line-height:1.1 !important;
  }

  .forms-section-layout .forms-section-copy .section-lead{
    font-size:1rem !important;
    line-height:1.65 !important;
  }
}