/* ════════════════════════════════════════════
   SACi FACT — Landing page
   Paleta: azul #1466C8 · rojo #ED1C24 · ámbar #F7B23B · tinta #0B1B33
   ════════════════════════════════════════════ */
:root{
  --azul:#1466C8;
  --azul-dark:#0d4ba0;
  --rojo:#ED1C24;
  --ambar:#F7B23B;
  --ambar-dark:#e09a1d;
  --tinta:#0B1B33;
  --tinta-2:#12264a;
  --gris:#5b6b82;
  --radio:18px;
  --shadow:0 18px 45px -18px rgba(11,27,51,.35);
}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  font-family:'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#22334d;background:#fff;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none}
.text-grad{
  background:linear-gradient(92deg,var(--azul) 0%,var(--ambar) 55%,var(--rojo) 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.text-blue{color:var(--azul)!important}.text-red{color:var(--rojo)!important}.text-amber{color:var(--ambar)!important}
.bg-blue{background:linear-gradient(135deg,#1466C8,#3f8bff)}
.bg-red{background:linear-gradient(135deg,#ED1C24,#ff5a52)}
.bg-amber{background:linear-gradient(135deg,#F7B23B,#ffc95e)}
.bg-green{background:linear-gradient(135deg,#12a150,#3ecf78)}
.bg-purple{background:linear-gradient(135deg,#6f42c1,#9a6fe0)}
.bg-cyan{background:linear-gradient(135deg,#0d9aa8,#38c6d4)}

/* ── Botones ── */
.btn-amber{
  background:linear-gradient(135deg,var(--ambar),#ffc258);color:#20242c;border:none;
  box-shadow:0 12px 26px -10px rgba(247,178,59,.65);transition:.25s;
}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(247,178,59,.8);color:#111}

/* ══════════ PRELOADER ══════════ */
#preloader{
  position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,#16305c 0%,var(--tinta) 60%);
  transition:opacity .6s ease,visibility .6s;
}
#preloader.hide{opacity:0;visibility:hidden}
.pre-inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.pre-logo{display:flex;gap:7px;height:54px;align-items:flex-end}
.pre-bar{width:13px;border-radius:6px;animation:preBar 1s ease-in-out infinite}
.pre-bar.b1{height:34px;background:var(--azul);animation-delay:0s}
.pre-bar.b2{height:52px;background:#fff;animation-delay:.12s}
.pre-bar.b3{height:40px;background:var(--rojo);animation-delay:.24s}
.pre-bar.b4{height:24px;background:var(--ambar);animation-delay:.36s}
@keyframes preBar{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.pre-bar{transform-origin:bottom}
.pre-img{width:120px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));animation:preFloat 2.4s ease-in-out infinite}
@keyframes preFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pre-track{width:180px;height:4px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}
.pre-fill{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--azul),var(--ambar));animation:preFill 1.4s ease forwards}
@keyframes preFill{to{width:100%}}

/* ── Barra de progreso de scroll ── */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:1100;
  background:linear-gradient(90deg,var(--azul),var(--ambar),var(--rojo));
}

/* ══════════ NAVBAR ══════════ */
.saci-nav{
  background:rgba(11,27,51,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:.7rem 0;transition:.3s;border-bottom:1px solid rgba(255,255,255,.06);
}
.saci-nav.scrolled{background:rgba(9,21,40,.92);box-shadow:0 10px 30px -12px rgba(0,0,0,.55)}
.nav-logo{height:34px;width:auto}
.nav-title{color:#fff;font-weight:500;letter-spacing:.4px;font-size:1.05rem}
.nav-title b{color:var(--ambar);font-weight:700}
.saci-nav .nav-link{color:rgba(255,255,255,.82);font-weight:500;font-size:.93rem;padding:.45rem .8rem;border-radius:10px;transition:.2s}
.saci-nav .nav-link:hover,.saci-nav .nav-link:focus{color:#fff;background:rgba(255,255,255,.09)}
.navbar-collapse{border:none}
@media (max-width:991.98px){
  .saci-nav{background:rgba(9,21,40,.97)}
  .navbar-collapse{padding:.6rem 0 .2rem}
}

/* ══════════ HERO ══════════ */
.hero{
  position:relative;color:#fff;overflow:hidden;padding:170px 0 130px;
  background:linear-gradient(160deg,#0a1830 0%,var(--tinta) 45%,#123063 100%);
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-grid{
  position:absolute;inset:0;opacity:.10;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(75% 70% at 50% 30%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(75% 70% at 50% 30%,#000 30%,transparent 100%);
}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;animation:blobMove 14s ease-in-out infinite}
.blob-1{width:420px;height:420px;background:var(--azul);top:-120px;left:-120px}
.blob-2{width:340px;height:340px;background:var(--rojo);bottom:-90px;right:12%;animation-delay:-5s;opacity:.22}
.blob-3{width:260px;height:260px;background:var(--ambar);top:30%;right:-90px;animation-delay:-9s;opacity:.20}
@keyframes blobMove{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,25px) scale(.95)}}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.83rem;font-weight:600;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  padding:.5rem 1rem;border-radius:999px;color:#ffe9bd;margin-bottom:1.4rem;backdrop-filter:blur(6px);
}
.hero-badge i{color:var(--ambar)}
.hero-title{font-size:clamp(2.1rem,5vw,3.5rem);font-weight:800;line-height:1.12;letter-spacing:-.5px}
.hero-sub{font-size:clamp(1rem,1.6vw,1.15rem);color:rgba(255,255,255,.80);max-width:600px;margin:1.2rem 0 1.8rem;line-height:1.75}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hero-points{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-direction:column;gap:.55rem;font-size:.92rem;color:rgba(255,255,255,.85)}
.hero-points i{color:#3ecf78;margin-right:.5rem}
.hero-wave{
  position:absolute;left:0;right:0;bottom:-2px;height:70px;
  background:#fff;clip-path:ellipse(75% 100% at 50% 100%);
}
/* Phone mockup */
.phone-wrap{position:relative;display:flex;justify-content:center}
.phone{
  position:relative;width:270px;aspect-ratio:9/19.2;border-radius:38px;
  background:#0c0f16;padding:10px;
  box-shadow:0 40px 80px -25px rgba(0,0,0,.65),0 0 0 2px rgba(255,255,255,.10),inset 0 0 0 2px #2a2f3a;
}
.phone-lg{width:300px}
.phone-notch{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:96px;height:22px;background:#0c0f16;border-radius:0 0 14px 14px;z-index:3;
}
.phone-video{width:100%;height:100%;object-fit:cover;border-radius:30px;background:#000;display:block}
.phone-glow{
  position:absolute;inset:-18px;border-radius:48px;z-index:-1;
  background:conic-gradient(from 120deg,var(--azul),var(--ambar),var(--rojo),var(--azul));
  filter:blur(28px);opacity:.5;animation:spinGlow 9s linear infinite;
}
@keyframes spinGlow{to{transform:rotate(360deg)}}
.float-y{animation:floatY 6s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-chip{
  position:absolute;display:flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:600;color:#fff;
  background:rgba(15,30,58,.92);border:1px solid rgba(255,255,255,.14);padding:.55rem .9rem;border-radius:12px;
  box-shadow:var(--shadow);backdrop-filter:blur(8px);animation:floatY 7s ease-in-out infinite;
}
.hero-chip i{color:var(--ambar)}
.chip-1{top:12%;left:-6%;animation-delay:-2s}
.chip-2{bottom:14%;right:-8%;animation-delay:-4.5s}
@media (max-width:575.98px){.chip-1{left:0}.chip-2{right:0}}

/* ══════════ STATS ══════════ */
.stats-band{
  background:#fff;padding:10px 0 46px;position:relative;z-index:2;margin-top:-46px;
}
.stats-band .row{
  background:linear-gradient(135deg,var(--tinta),#16335f);
  border-radius:24px;padding:34px 10px;box-shadow:var(--shadow);
}
.stat-num{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;color:var(--ambar);line-height:1}
.stat-label{color:rgba(255,255,255,.78);font-size:.85rem;margin-top:.35rem}

/* ══════════ SECCIONES ══════════ */
.section{padding:96px 0}
.section-alt{background:linear-gradient(180deg,#f5f8fd,#eef3fb)}
.section-head{text-align:center;max-width:720px;margin:0 auto 56px}
.section-head h2{font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.4px}
.section-head p{color:var(--gris);margin-top:.9rem;font-size:1.02rem}
.kicker{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--azul);background:rgba(20,102,200,.10);padding:.42rem .95rem;border-radius:999px;margin-bottom:1rem;
}
.kicker i{color:var(--ambar)}
.kicker-light{color:#ffd98a;background:rgba(255,255,255,.10)}
.container-narrow{max-width:860px}

/* ── Tarjetas de beneficio ── */
.feature-card{
  height:100%;background:#fff;border-radius:var(--radio);padding:28px 24px;
  border:1px solid #e8eef7;box-shadow:0 10px 30px -18px rgba(11,27,51,.18);
  transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden;
}
.feature-card::after{
  content:"";position:absolute;inset:auto -40% -60% -40%;height:120px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,102,200,.10),transparent);opacity:0;transition:.35s;
}
.feature-card:hover{transform:translateY(-7px);box-shadow:0 26px 50px -22px rgba(11,27,51,.35)}
.feature-card:hover::after{opacity:1}
.f-icon{
  width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  font-size:1.45rem;color:#fff;margin-bottom:1.1rem;
  box-shadow:0 12px 24px -10px rgba(11,27,51,.4);
}
.feature-card h6,.feature-card h5{font-weight:700;margin-bottom:.5rem}
.feature-card p{color:var(--gris);font-size:.9rem;line-height:1.65;margin:0}
.c-blue .f-icon{background:linear-gradient(135deg,#1466C8,#3f8bff)}
.c-amber .f-icon{background:linear-gradient(135deg,#F7B23B,#ffc95e)}
.c-red .f-icon{background:linear-gradient(135deg,#ED1C24,#ff5a52)}
.c-green .f-icon{background:linear-gradient(135deg,#12a150,#3ecf78)}
.c-purple .f-icon{background:linear-gradient(135deg,#6f42c1,#9a6fe0)}
.c-cyan .f-icon{background:linear-gradient(135deg,#0d9aa8,#38c6d4)}

/* ── Tarjetas de módulo ── */
.mod-card{
  height:100%;background:#fff;border-radius:var(--radio);padding:26px 24px 22px;
  border:1px solid #e8eef7;box-shadow:0 10px 30px -18px rgba(11,27,51,.18);transition:.3s;
}
.mod-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -22px rgba(11,27,51,.35)}
.mod-top{
  width:52px;height:52px;border-radius:14px;color:#fff;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
  box-shadow:0 12px 22px -10px rgba(11,27,51,.45);
}
.mod-card h5{font-weight:700;margin-bottom:.7rem}
.mod-list{list-style:none;padding:0;margin:0}
.mod-list li{
  position:relative;padding:.32rem 0 .32rem 1.35rem;font-size:.875rem;color:var(--gris);line-height:1.5;
}
.mod-list li::before{
  content:"";position:absolute;left:0;top:.85rem;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--azul),var(--ambar));
}

/* ── POS ── */
.pos-card{
  background:#fff;border-radius:var(--radio);padding:20px;border:1px solid #e8eef7;
  box-shadow:0 10px 30px -18px rgba(11,27,51,.18);transition:.3s;
}
.pos-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -22px rgba(11,27,51,.35)}
.pos-card h5{font-weight:700;margin:1.1rem 0 .5rem}
.pos-card p{color:var(--gris);font-size:.9rem;line-height:1.65}
.pos-card a{color:var(--azul)}
.frame-browser{
  border-radius:14px;overflow:hidden;border:1px solid #dde6f2;background:#fff;
  box-shadow:0 16px 36px -18px rgba(11,27,51,.35);transition:.35s;
}
.frame-browser:hover{box-shadow:0 24px 50px -20px rgba(11,27,51,.45)}
.fb-bar{
  display:flex;align-items:center;gap:6px;background:#eef2f8;padding:9px 12px;border-bottom:1px solid #e2e9f4;
}
.fb-bar span{width:10px;height:10px;border-radius:50%}
.fb-bar span:nth-child(1){background:#ff5f57}.fb-bar span:nth-child(2){background:#febc2e}.fb-bar span:nth-child(3){background:#28c840}
.fb-bar em{
  font-style:normal;font-size:.68rem;color:#8b9ab3;margin-left:8px;background:#fff;border-radius:6px;
  padding:2px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;
}
.frame-browser img{width:100%;height:auto}
.frame-mobile{
  border-radius:26px;overflow:hidden;max-width:250px;margin:0 auto;border:6px solid #101827;background:#101827;
  box-shadow:0 22px 44px -18px rgba(11,27,51,.5);transition:.35s;
}
.frame-mobile:hover{transform:translateY(-5px) rotate(-.5deg)}
.frame-mobile img{border-radius:20px}

/* ── Demo (sección oscura) ── */
.section-dark{
  background:
    radial-gradient(60% 90% at 85% 10%,rgba(20,102,200,.35),transparent 60%),
    radial-gradient(50% 80% at 10% 90%,rgba(237,28,36,.18),transparent 60%),
    linear-gradient(150deg,#0a1830,var(--tinta-2));
  color:#fff;position:relative;overflow:hidden;
}
.section-dark h2{font-weight:800;letter-spacing:-.4px}
.demo-copy p{color:rgba(255,255,255,.78);line-height:1.75;margin:.9rem 0 1.2rem}
.demo-points{list-style:none;padding:0;margin:0 0 1.4rem}
.demo-points li{padding:.42rem 0;color:rgba(255,255,255,.88);font-size:.95rem}
.demo-points i{color:#3ecf78;margin-right:.55rem;font-size:1.05rem}
.section-dark .phone{box-shadow:0 50px 100px -30px rgba(0,0,0,.8),0 0 0 2px rgba(255,255,255,.12)}

/* ── Capturas ── */
.shot-card h6{font-weight:700}
.shot-card .frame-browser img{transition:transform .5s ease}
.shot-card .frame-browser:hover img{transform:scale(1.03)}

/* ── Pasos ── */
.step-card{
  height:100%;background:#fff;border-radius:var(--radio);padding:30px 26px;text-align:center;
  border:1px solid #e8eef7;box-shadow:0 10px 30px -18px rgba(11,27,51,.18);transition:.3s;
}
.step-card:hover{transform:translateY(-6px)}
.step-num{
  width:58px;height:58px;margin:0 auto 1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.35rem;color:#fff;
  background:linear-gradient(135deg,var(--azul),var(--ambar));box-shadow:0 14px 28px -10px rgba(20,102,200,.55);
}
.step-card h5{font-weight:700;margin-bottom:.5rem}
.step-card p{color:var(--gris);font-size:.92rem;margin:0}

/* ── FAQ ── */
.accordion{--bs-accordion-border-radius:16px;--bs-accordion-border-color:#e3eaf5;--bs-accordion-btn-font-weight:600}
.accordion-button{font-size:1rem;padding:1.15rem 1.35rem}
.accordion-button:not(.collapsed){background:rgba(20,102,200,.07);color:var(--azul-dark);box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 .18rem rgba(20,102,200,.15)}
.accordion-body{color:var(--gris);line-height:1.7;padding:.4rem 1.35rem 1.25rem}
.accordion-body a{color:var(--azul);font-weight:600}

/* ── CTA ── */
.cta-band{padding:40px 0 90px}
.cta-card{
  background:
    radial-gradient(70% 130% at 90% 0%,rgba(247,178,59,.35),transparent 55%),
    linear-gradient(120deg,var(--azul-dark),var(--azul) 55%,#2f7ce8);
  border-radius:28px;padding:56px 44px;color:#fff;text-align:center;
  box-shadow:0 30px 70px -25px rgba(20,102,200,.7);position:relative;overflow:hidden;
}
.cta-card::before{
  content:"";position:absolute;inset:-50% -20%;background:
    repeating-linear-gradient(115deg,transparent 0 40px,rgba(255,255,255,.05) 40px 80px);
  animation:ctaSlide 16s linear infinite;
}
@keyframes ctaSlide{to{transform:translateX(18%)}}
.cta-copy{position:relative}
.cta-card h2{font-weight:800;margin-bottom:.5rem}
.cta-card p{opacity:.9;margin-bottom:1.8rem}
.cta-btns{position:relative;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ── Footer ── */
.saci-footer{background:linear-gradient(180deg,var(--tinta),#081226);color:#fff;padding:64px 0 0}
.foot-logo{height:36px;width:auto}
.foot-title{font-weight:700;margin-bottom:1rem;font-size:.95rem;letter-spacing:.4px}
.foot-list{list-style:none;padding:0;margin:0}
.foot-list li{margin-bottom:.55rem}
.foot-list a{color:rgba(255,255,255,.66);font-size:.9rem;transition:.2s}
.foot-list a:hover{color:var(--ambar)}
.foot-bottom{
  margin-top:44px;padding:22px 0;border-top:1px solid rgba(255,255,255,.10);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.83rem;color:rgba(255,255,255,.5);
}
.foot-bottom a{color:rgba(255,255,255,.66)}
.foot-bottom a:hover{color:var(--ambar)}

/* ── Botón volver arriba ── */
.to-top{
  position:fixed;right:22px;bottom:22px;width:48px;height:48px;border:none;border-radius:50%;
  background:linear-gradient(135deg,var(--azul),#3f8bff);color:#fff;font-size:1.2rem;
  box-shadow:0 14px 30px -10px rgba(20,102,200,.7);cursor:pointer;z-index:900;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:.3s;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{transform:translateY(-3px)}

/* ══════════ REVEAL (aparición al hacer scroll) ══════════ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}
.delay-3{transition-delay:.36s}
.delay-4{transition-delay:.48s}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:991.98px){
  .hero{padding:140px 0 110px;text-align:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-cta,.hero-points{justify-content:center}
  .hero-points{align-items:center}
  .phone-wrap{margin-top:2rem}
  .phone{width:240px}
}
@media (max-width:575.98px){
  .section{padding:70px 0}
  .hero{padding:120px 0 90px}
  .hero-badge{font-size:.72rem;padding:.45rem .8rem;text-align:center}
  .cta-card{padding:42px 22px}
  .stats-band .row{padding:26px 6px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}