:root{
  --blue:#2E6FF2;
  --blue-d:#1B54D0;
  --teal:#0E9F9A;
  --bg:#F6F8FC;
  --bg2:#EAF1FB;
  --surface:#FFFFFF;
  --ink:#0F2540;
  --muted:#5B6B82;
  --green:#15A05B;
  --amber:#E08600;
  --radius:20px;
  --shadow:0 18px 50px -22px rgba(15,37,64,.35);
  --shadow-sm:0 8px 24px -14px rgba(15,37,64,.30);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- Fondo animado ---------- */
.bg-decor{position:fixed;inset:0;z-index:-1;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;animation:float 18s ease-in-out infinite}
.blob-1{width:520px;height:520px;background:radial-gradient(circle at 30% 30%,#84b3ff,#2E6FF2);top:-160px;left:-120px}
.blob-2{width:460px;height:460px;background:radial-gradient(circle at 30% 30%,#54d6cf,#0E9F9A);top:40%;right:-140px;animation-delay:-6s}
.blob-3{width:400px;height:400px;background:radial-gradient(circle at 30% 30%,#a9c6ff,#6f8dff);bottom:-160px;left:30%;animation-delay:-11s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,25px) scale(.95)}}

.cross-pattern{
  position:absolute;inset:0;opacity:.05;
  background-image:
    linear-gradient(var(--blue) 2px,transparent 2px),
    linear-gradient(90deg,var(--blue) 2px,transparent 2px);
  background-size:46px 46px,46px 46px;
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);
  mask-image:radial-gradient(circle,#000 30%,transparent 70%);
  animation:drift 40s linear infinite;
}
@keyframes drift{to{background-position:46px 46px,46px 46px}}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:14px clamp(18px,5vw,56px);
  backdrop-filter:saturate(160%) blur(14px);
  background:rgba(246,248,252,.72);
  border-bottom:1px solid rgba(46,111,242,.10);
  transition:box-shadow .3s, background .3s;
}
.nav.scrolled{box-shadow:var(--shadow-sm);background:rgba(255,255,255,.85)}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.nav-brand img{width:34px;height:34px;object-fit:contain}
.nav-links{display:flex;gap:26px;margin-left:auto;font-weight:600;color:var(--muted)}
.nav-links a{position:relative;transition:color .2s}
.nav-links a:hover{color:var(--blue)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--blue);border-radius:2px;transition:width .25s}
.nav-links a:hover::after{width:100%}
.nav-cta{margin-left:8px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-family:inherit;cursor:pointer;border:0;transition:transform .2s, box-shadow .2s, background .2s;padding:13px 24px;border-radius:14px;font-size:15px}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;box-shadow:0 14px 30px -12px rgba(46,111,242,.65)}
.btn-primary:hover{box-shadow:0 18px 38px -12px rgba(46,111,242,.8)}
.btn-ghost{background:#fff;color:var(--blue);box-shadow:var(--shadow-sm)}
.btn-pill{border-radius:999px;padding:10px 20px;background:var(--blue);color:#fff;font-size:14px}
.btn-lg{padding:16px 34px;font-size:17px}

/* ---------- Hero ---------- */
.hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;
  padding:clamp(40px,7vw,90px) clamp(18px,5vw,56px);max-width:1240px;margin:0 auto;
}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--blue);font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px;box-shadow:var(--shadow-sm)}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(14,159,154,.6);animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(14,159,154,.55)}100%{box-shadow:0 0 0 12px rgba(14,159,154,0)}}
.hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.05;letter-spacing:-1.4px;margin:18px 0 16px;font-weight:800}
.grad-text{background:linear-gradient(120deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:clamp(16px,1.4vw,19px);max-width:540px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 30px}

/* ECG card */
.ecg-card{background:#fff;border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);max-width:560px}
.ecg-head{display:flex;align-items:center;gap:14px}
.ecg-head strong{display:block;font-size:15px}
.ecg-head small{color:var(--muted);font-size:13px}
.bpm{margin-left:auto;font-weight:800;color:var(--blue);font-size:22px}
.bpm i{font-style:normal;font-size:12px;color:var(--muted);font-weight:600}
.pulse-ring{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(46,111,242,.10);position:relative}
.pulse-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue);opacity:.6;animation:ping 2s ease-out infinite}
.pulse-core{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--teal))}
.ecg{width:100%;height:90px;margin-top:8px}
.ecg-line{fill:none;stroke:url(#g);stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;animation:trace 3.4s ease-in-out infinite}
@keyframes trace{0%{stroke-dashoffset:1400}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-1400}}

/* Phone mockup */
.phone{justify-self:center;width:280px;height:560px;background:linear-gradient(160deg,#1b2c4a,#0f2540);border-radius:42px;padding:14px;box-shadow:var(--shadow);position:relative;animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.phone-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:120px;height:24px;background:#0f2540;border-radius:0 0 16px 16px;z-index:2}
.phone-shot{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:30px;display:block}
.phone-screen{background:var(--bg);border-radius:30px;height:100%;padding:24px 16px 18px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.ps-top{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);margin:4px 2px 6px}
.ps-top img{width:26px;height:26px}
.ps-card{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:12px;box-shadow:var(--shadow-sm)}
.ps-card b{font-size:13px;display:block}
.ps-card small{font-size:11px;color:var(--muted)}
.ps-card div{flex:1;min-width:0}
.ps-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px}
.ps-tag{font-size:10px;font-weight:800;padding:4px 8px;border-radius:999px;letter-spacing:.4px}
.ps-green{background:#e3f6ec;color:var(--green)}
.ps-amber{background:#fdf0dc;color:var(--amber)}
.ps-blue{background:#e6efff;color:var(--blue)}
.ps-btn{margin-top:auto;border:0;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;font-weight:700;padding:13px;border-radius:14px;font-family:inherit;font-size:14px}
.ps-pop{opacity:0;transform:translateY(14px);animation:pop .6s ease forwards;animation-delay:var(--d,0s)}
@keyframes pop{to{opacity:1;transform:translateY(0)}}

/* ---------- Strip ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1100px;margin:0 auto;padding:10px clamp(18px,5vw,56px) 30px}
.strip-item{background:#fff;border-radius:18px;padding:22px;text-align:center;box-shadow:var(--shadow-sm)}
.strip-item .num{font-size:38px;font-weight:800;background:linear-gradient(120deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.strip-item small{display:block;color:var(--muted);margin-top:6px;font-size:13px;font-weight:600}

/* ---------- Sections ---------- */
.section{max-width:1180px;margin:0 auto;padding:clamp(50px,7vw,90px) clamp(18px,5vw,56px)}
.section-tint{background:linear-gradient(180deg,rgba(14,159,154,.06),transparent)}
.section-head{text-align:center;max-width:680px;margin:0 auto 50px}
.kicker{font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:12px;color:var(--blue);background:#e6efff;padding:6px 14px;border-radius:999px}
.kicker-teal{color:var(--teal);background:#e0f5f3}
.kicker-light{color:#bcd3ff;background:rgba(255,255,255,.10)}
.section-head h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-1px;margin:16px 0 12px;font-weight:800}
.section-head p{color:var(--muted);font-size:17px}
.white{color:#fff}.white-soft{color:rgba(255,255,255,.72)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:#fff;border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .25s, box-shadow .25s}
.step::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--blue),var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .35s}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step:hover::before{transform:scaleX(1)}
.step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;font-weight:800;font-size:18px;margin-bottom:14px}
.step h3{font-size:18px;margin-bottom:6px}
.step p{color:var(--muted);font-size:14.5px}

/* feat cards */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.feat{background:#fff;border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow-sm);transition:transform .25s, box-shadow .25s}
.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.feat-ic{font-size:30px;display:inline-grid;place-items:center;width:60px;height:60px;border-radius:18px;background:var(--bg2);margin-bottom:14px}
.feat h4{font-size:18px;margin-bottom:6px}
.feat p{color:var(--muted);font-size:14.5px}
.feat.dark{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.feat.dark h4{color:#fff}.feat.dark p{color:rgba(255,255,255,.66)}
.feat.dark .feat-ic{background:rgba(255,255,255,.10)}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.check{list-style:none;display:flex;flex-direction:column;gap:16px}
.check li{position:relative;padding-left:38px;color:var(--muted);font-size:15.5px}
.check li b{color:var(--ink)}
.check li::before{content:"✓";position:absolute;left:0;top:0;width:26px;height:26px;border-radius:8px;background:#e0f5f3;color:var(--teal);font-weight:800;display:grid;place-items:center;font-size:14px}
.tag-amber{color:var(--amber);font-weight:800}
.tag-green{color:var(--green);font-weight:800}

/* Agenda mock */
.agenda{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.agenda-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.agenda-head small{color:var(--muted)}
.agenda-grid{position:relative;height:300px}
.ag-hour{display:flex;align-items:flex-start;gap:10px;height:75px}
.ag-hour span{font-size:11px;color:#94a3b8;width:42px;text-align:right;padding-top:-4px}
.ag-hour i{flex:1;border-top:1px solid #e2e8f0;margin-top:7px}
.ag-block{position:absolute;left:58px;right:10px;border-radius:12px;padding:8px 12px;box-shadow:var(--shadow-sm);border-left:4px solid;animation:slideIn .6s ease both}
.ag-block b{font-size:13px;display:block}
.ag-block small{font-size:11px;color:var(--muted)}
.ag-b1{top:18px;height:60px;background:#e6efff;border-color:var(--blue);animation-delay:.1s}
.ag-b2{top:120px;height:60px;background:#fff7ec;border-color:var(--amber);animation-delay:.25s}
.ag-pay{position:absolute;right:12px;top:10px;font-size:9px;font-weight:800;padding:3px 7px;border-radius:999px}
.ag-paid{background:#e3f6ec;color:var(--green)}
.ag-unpaid{background:#fdf0dc;color:var(--amber)}
@keyframes slideIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
.ag-now{position:absolute;left:0;right:0;top:96px;height:0;border-top:2px solid #ff4444;animation:nowPulse 2.5s ease-in-out infinite}
.ag-now span{position:absolute;left:8px;top:-9px;font-size:9px;font-weight:800;color:#ff4444;background:var(--bg);padding:0 4px}
.ag-now::before{content:"";position:absolute;left:48px;top:-5px;width:9px;height:9px;border-radius:50%;background:#ff4444}
@keyframes nowPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* grid feat (admin) */
.grid-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gf{background:#fff;border-radius:18px;padding:22px;box-shadow:var(--shadow-sm);transition:transform .22s, box-shadow .22s}
.gf:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.gf-ic{font-size:24px;display:inline-grid;place-items:center;width:50px;height:50px;border-radius:14px;background:var(--bg2);margin-bottom:12px}
.gf h4{font-size:16px;margin-bottom:5px}
.gf p{color:var(--muted);font-size:14px}

/* Galería de capturas reales */
.shots{display:flex;flex-wrap:wrap;gap:34px;justify-content:center;margin-top:44px}
.shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.shot-frame{width:240px;background:linear-gradient(160deg,#1b2c4a,#0f2540);border-radius:34px;padding:11px;box-shadow:var(--shadow);position:relative;transition:transform .3s, box-shadow .3s}
.shot-frame::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:96px;height:18px;background:#0f2540;border-radius:0 0 12px 12px;z-index:2}
.shot-frame img{width:100%;border-radius:24px;display:block}
.shot:hover .shot-frame{transform:translateY(-8px) rotate(-1deg);box-shadow:0 30px 60px -28px rgba(15,37,64,.5)}
.shot figcaption{color:var(--muted);font-size:13.5px;font-weight:600;max-width:240px;text-align:center}

/* Callout */
.callout{display:flex;gap:20px;align-items:flex-start;background:linear-gradient(135deg,rgba(46,111,242,.08),rgba(14,159,154,.08));border:1px solid rgba(46,111,242,.16);border-radius:var(--radius);padding:26px;margin-top:34px}
.callout-ic{font-size:30px;width:60px;height:60px;border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-sm);flex-shrink:0}
.callout h4{font-size:18px;margin-bottom:6px}
.callout p{color:var(--muted);font-size:15px}

/* Dark section */
.section-dark{max-width:none;background:linear-gradient(150deg,#11264a,#0f2540);position:relative}
.section-dark .section{padding-top:0}
.tag-green,.tag-amber{white-space:nowrap}

/* CTA final */
.cta-final{text-align:center;padding:clamp(50px,7vw,90px) 20px;max-width:760px;margin:0 auto}
.cta-final h2{font-size:clamp(26px,3.6vw,42px);letter-spacing:-1px;margin-bottom:10px}
.cta-final p{color:var(--muted);font-size:18px;margin-bottom:26px}

/* Footer */
.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:30px clamp(18px,5vw,56px);border-top:1px solid rgba(46,111,242,.12)}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand img{width:40px;height:40px}
.footer-brand b{display:block}
.footer-brand small{color:var(--muted);font-size:13px}
.footer-hrc{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.footer-hrc img{height:26px;background:#0f2540;padding:5px 8px;border-radius:8px}

/* to top */
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:grid;place-items:center;font-size:20px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(12px);transition:.3s;z-index:40}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero .badge{margin:0 auto}
  .lead{margin:0 auto}
  .hero-actions{justify-content:center}
  .ecg-card{margin:0 auto}
  .phone{margin-top:30px}
  .split{grid-template-columns:1fr}
  .steps,.cards-3,.grid-feat{grid-template-columns:1fr 1fr}
  .strip{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media (max-width:600px){
  .steps,.cards-3,.grid-feat,.strip{grid-template-columns:1fr}
  .footer{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}