/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:'Manrope',sans-serif;color:#1B1635;background:#FBFAFF;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.display{font-family:'Montserrat',sans-serif;letter-spacing:-.02em;line-height:1.1;}

/* ===== CSS VARIABLES ===== */
:root{
  --blue:#5566F0;--purple:#7C3AED;--magenta:#D946EF;
  --ink:#1B1635;--ink-soft:#534D6E;--bg:#FBFAFF;
  --card:#FFFFFF;--line:rgba(124,58,237,.12);
  --grad:linear-gradient(105deg,#5566F0 0%,#7C3AED 45%,#D946EF 100%);
  --nav-h:72px;
}

/* ===== FULL-PAGE SCROLL SNAP ===== */
html{
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}
.snap-section{
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Sections with lots of content shouldn't be forced to one screen */
.snap-section.snap-free{
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ===== NAVBAR ===== */
.bh-nav{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  height:var(--nav-h);
  background:rgba(251,250,255,0);
  backdrop-filter:blur(0px);
  border-bottom:1px solid transparent;
  transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.bh-nav.scrolled{
  background:rgba(251,250,255,0.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(124,58,237,.08);
  box-shadow:0 2px 24px rgba(85,102,240,.10);
}
.bh-nav-inner{
  width:100%;padding:0 40px;height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.bh-nav-logo{
  font-family:'Montserrat',sans-serif;font-weight:900;font-size:26px;
  letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-decoration:none;justify-self:start;
}
.bh-nav-links{
  display:flex;align-items:center;gap:4px;list-style:none;
  margin:0;padding:0;justify-self:center;
}
.bh-nav-links li{list-style:none;}
.bh-nav-links a{
  font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;
  color:#534D6E;text-decoration:none;padding:7px 13px;border-radius:8px;
  transition:color .2s,background .2s;white-space:nowrap;
}
.bh-nav-links a:hover{color:#7C3AED;background:rgba(124,58,237,.07);}
.bh-nav-links a.active{background:rgba(124,58,237,.12);color:#7C3AED;font-weight:700;}
.bh-nav-cta-wrap{justify-self:end;display:flex;align-items:center;gap:12px;}
.bh-nav-cta{
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;
  padding:10px 22px;border-radius:10px;
  background:var(--grad);color:#fff !important;text-decoration:none;
  box-shadow:0 4px 16px rgba(124,58,237,.28);
  transition:transform .2s,box-shadow .2s;display:inline-block;white-space:nowrap;
}
.bh-nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.38);}
.bh-nav-login{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;padding:9px 18px;border-radius:10px;border:1.5px solid var(--line);color:var(--purple) !important;text-decoration:none;background:transparent;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;white-space:nowrap;}
.bh-nav-login:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.38);border-color:var(--purple);background:rgba(124,58,237,.06);}
.nav-only-mobile{display:none;}

.bh-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;}
.bh-hamburger span{display:block;width:22px;height:2px;background:var(--grad);border-radius:2px;transition:transform .3s,opacity .3s;}
@media(max-width:820px){
  .bh-nav-inner{grid-template-columns:1fr auto;}
  .bh-nav-links{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    background:rgba(251,250,255,0.97);backdrop-filter:blur(20px);
    flex-direction:column;padding:16px 24px 20px;gap:4px;
    border-bottom:1px solid rgba(124,58,237,.10);
    box-shadow:0 8px 24px rgba(85,102,240,.10);
  }
  .bh-nav-links.open{display:flex;}
  .nav-only-mobile{display:block;}
  .bh-nav-links a{padding:10px 14px;width:100%;}
  .bh-nav-cta-wrap{display:none;}
  .bh-hamburger{display:flex;}
}

/* ===== ENTRANCE ANIMATIONS ===== */
.reveal-up{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease;}
.reveal-up.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s ease,transform .7s ease;}
.reveal-left.visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s ease,transform .7s ease;}
.reveal-right.visible{opacity:1;transform:translateX(0);}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .7s ease,transform .7s ease;}
.reveal-scale.visible{opacity:1;transform:scale(1);}
.delay-1{transition-delay:.1s!important;}
.delay-2{transition-delay:.2s!important;}
.delay-3{transition-delay:.3s!important;}
.delay-4{transition-delay:.4s!important;}
.delay-5{transition-delay:.5s!important;}
.delay-6{transition-delay:.6s!important;}

/* ===== HERO ===== */
#inicio{
  background:linear-gradient(145deg,#FBFAFF 0%,#F3EEFF 50%,#FDF0FF 100%);
  padding-top:var(--nav-h);
}
.hero-inner{
  max-width:1120px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100dvh - var(--nav-h));
}
.eyebrow{
  display:inline-block;font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--magenta);margin-bottom:16px;
}
.hero-text h1{font-size:clamp(42px,6.5vw,78px);font-weight:900;line-height:1.05;}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-text .sub{font-size:18px;color:var(--ink-soft);margin-top:18px;max-width:440px;font-weight:500;}
.cta-row{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.btn{font-family:'Montserrat';font-weight:700;font-size:15px;padding:15px 28px;border-radius:14px;cursor:pointer;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform .25s,box-shadow .25s;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 28px rgba(124,58,237,.30);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(124,58,237,.42);}
.btn-ghost{background:#fff;color:var(--purple);border:1.5px solid var(--line);}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--magenta);}

/* Animated gradient orbs */
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none;animation:orbFloat 8s ease-in-out infinite;}
.orb-1{width:420px;height:420px;background:#7C3AED;top:-120px;right:-80px;animation-delay:0s;}
.orb-2{width:300px;height:300px;background:#D946EF;bottom:-60px;right:100px;animation-delay:-3s;}
.orb-3{width:250px;height:250px;background:#5566F0;bottom:40px;left:-60px;animation-delay:-5s;}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(20px,-20px) scale(1.05);}66%{transform:translate(-15px,15px) scale(.97);}}

/* ===== HERO PARALLAX + QR DRAW ===== */
.orb-layer{position:absolute;inset:0;pointer-events:none;will-change:transform;transition:transform .35s ease-out;}
.phone-stage{perspective:1100px;}
.phone{transition:transform .25s ease-out;will-change:transform;}
.hero-text{transition:transform .35s ease-out;}
.qr{position:relative;overflow:hidden;}
.qr svg{display:block;width:100%;height:100%;}
.qr-draw{animation:qrWipe 1.3s cubic-bezier(.6,0,.3,1) both;}
@keyframes qrWipe{0%{clip-path:inset(0 0 100% 0);}100%{clip-path:inset(0 0 0 0);}}
.qr::after{content:'';position:absolute;left:0;right:0;height:16px;top:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(124,58,237,0),rgba(124,58,237,.45),rgba(124,58,237,0));
  opacity:0;animation:qrScanLine 2s ease-in-out 1.3s 2;}
@keyframes qrScanLine{0%{top:0;opacity:1;}90%{opacity:1;}100%{top:calc(100% - 16px);opacity:0;}}

/* Phone mockup */
.phone-stage{position:relative;display:flex;justify-content:center;align-items:center;}
.phone-wrap{position:relative;animation:phoneFloat 4s ease-in-out infinite;}
@keyframes phoneFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.phone{width:220px;border-radius:36px;background:#0E0B1F;padding:10px;box-shadow:0 40px 80px rgba(85,40,150,.40);position:relative;z-index:2;}
.phone-screen{background:#fff;border-radius:28px;overflow:hidden;text-align:center;padding:22px 16px 16px;}
.phone-screen .bh{font-family:'Montserrat';font-weight:800;font-size:22px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.phone-screen .tag{font-size:9.5px;color:var(--ink-soft);margin-bottom:14px;}
.phone-screen .ed{font-family:'Montserrat';font-weight:700;font-size:13px;margin-bottom:4px;}
.phone-screen .hint{font-size:9px;color:var(--ink-soft);margin-bottom:12px;line-height:1.4;}
.qr{width:110px;height:110px;margin:0 auto;border-radius:10px;background:#f4f0ff;}
.phone-screen .name{font-size:10.5px;font-weight:700;margin-top:12px;}
.phone-screen .ev{font-size:9px;color:var(--ink-soft);}
.ring{position:absolute;width:290px;height:290px;border-radius:50%;border:1.5px dashed rgba(124,58,237,.22);animation:ringPulse 3s ease-in-out infinite;}
.ring-2{width:360px;height:360px;border-color:rgba(217,70,239,.15);animation-delay:-1.5s;}
@keyframes ringPulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04);}}
.ring,.ring-2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border-style:dashed;border-width:1.5px;pointer-events:none;}

/* ===== SECTIONS ===== */
.section-inner{max-width:1120px;margin:0 auto;padding:80px 28px;}
.sec-head{text-align:center;max-width:640px;margin:0 auto 50px;}
.sec-head .eyebrow{color:var(--purple);}
.sec-head h2{font-size:clamp(28px,4vw,42px);font-weight:800;}
.sec-head p{color:var(--ink-soft);font-size:16px;margin-top:12px;font-weight:500;}

/* Alternating backgrounds */
#inicio-end{background:linear-gradient(145deg,#FBFAFF,#F3EEFF,#FDF0FF);}
#como{background:#F9F5FF;}
#caracteristicas{background:#FFFFFF;}
#casos{background:#F9F5FF;}
#beneficios{background:#FFFFFF;}
#contacto{background:linear-gradient(135deg,#0E0B1F 0%,#1e0a3c 50%,#2d1065 100%);}

/* ===== BAND (Gestionar grandes grupos) ===== */
.band{
  background:var(--grad);color:#fff;border-radius:28px;padding:50px;
  position:relative;overflow:hidden;
  box-shadow:0 30px 60px rgba(124,58,237,.25);
  max-width:1064px;margin:0 auto;
}
.band-pattern{position:absolute;inset:0;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='white' stroke-width='2'%3E%3Crect x='22' y='24' width='36' height='32' rx='6'/%3E%3Cline x1='22' y1='34' x2='58' y2='34'/%3E%3Cpath d='M33 44l5 5 9-10'/%3E%3C/g%3E%3C/svg%3E");
}
.band h2{font-size:clamp(24px,3.4vw,36px);font-weight:800;position:relative;z-index:2;max-width:700px;}
.band p{font-size:17px;opacity:.9;margin-top:14px;position:relative;z-index:2;max-width:660px;font-weight:500;}

/* ===== FLOW (Como funciona) ===== */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;}
.flow-track{position:absolute;top:50px;left:12.5%;right:12.5%;height:3px;border-radius:2px;background:rgba(124,58,237,.12);z-index:0;}
.flow-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--grad);transition:width 1.5s cubic-bezier(.6,0,.3,1);}
.flow.flow-go .flow-fill{width:100%;}
@media(max-width:760px){.flow-track{display:none;}}
@media(max-width:760px){.flow{grid-template-columns:repeat(2,1fr);}}
.step{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 22px;transition:transform .3s,box-shadow .3s;position:relative;z-index:1;}
.step:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(124,58,237,.12);}
.step .num{font-family:'Montserrat';font-weight:900;font-size:36px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:12px;}
.step h3{font-size:16px;font-weight:700;margin-bottom:7px;}
.step p{font-size:13.5px;color:var(--ink-soft);}

/* ===== FEATURES ===== */
.features{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;}
.features>.feat{flex:0 1 calc(33.333% - 14.67px);}
@media(max-width:980px){.features>.feat{flex-basis:calc(50% - 11px);}}
@media(max-width:620px){.features>.feat{flex-basis:100%;}}
.feat{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden;}
.feat::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.6,0,.3,1);}
.feat:hover::after{transform:scaleX(1);}
.feat:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(124,58,237,.13);}
.ic{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,rgba(85,102,240,.12),rgba(217,70,239,.12));display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s;}
.feat:hover .ic{transform:translateY(-3px) scale(1.08) rotate(-5deg);background:linear-gradient(135deg,rgba(85,102,240,.2),rgba(217,70,239,.2));}
.ic svg{width:26px;height:26px;stroke:var(--purple);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.feat h3{font-size:19px;font-weight:700;margin-bottom:8px;}
.feat p{font-size:14.5px;color:var(--ink-soft);}

/* ===== CASES ===== */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(max-width:620px){.cases{grid-template-columns:1fr;}}
.case{display:flex;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden;}
.case::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.6,0,.3,1);}
.case:hover::after{transform:scaleX(1);}
.case:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(124,58,237,.11);}
.cic{flex:0 0 46px;width:46px;height:46px;border-radius:14px;background:var(--grad);display:flex;align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;}
.case:hover .cic{transform:scale(1.1) rotate(5deg);box-shadow:0 8px 20px rgba(124,58,237,.32);}
.cic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.case h3{font-size:17px;font-weight:700;margin-bottom:5px;}
.case p{font-size:14px;color:var(--ink-soft);}

/* ===== BENEFITS ===== */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:760px){.benefits{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.benefits{grid-template-columns:1fr;}}
.ben{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;transition:transform .3s,box-shadow .3s;}
.ben:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(124,58,237,.10);}
.ben .chk{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,rgba(85,102,240,.12),rgba(217,70,239,.12));display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.ben .chk svg{width:17px;height:17px;stroke:var(--purple);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.ben .chk{transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.ben:hover .chk{transform:scale(1.15) rotate(-6deg);}
.ben h3{font-size:15.5px;font-weight:700;margin-bottom:4px;}
.ben p{font-size:13.5px;color:var(--ink-soft);}

/* ===== BEFORE/AFTER ===== */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:40px auto 0;}
@media(max-width:600px){.cmp{grid-template-columns:1fr;}}
.cmp-card{border-radius:22px;padding:28px;border:1px solid var(--line);background:var(--card);}
.cmp-card.bad{background:#FBF7FB;}
.cmp-card.good{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;}
.cmp-tag{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat';font-weight:700;font-size:13px;margin-bottom:12px;}
.cmp-card.bad .cmp-tag{color:var(--ink-soft);}
.cmp-card.good .cmp-tag{color:var(--purple);}
.cmp-tag svg{width:17px;height:17px;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;}
.cmp .time{font-family:'Montserrat';font-weight:900;font-size:36px;line-height:1;}
.cmp-card.bad .time{color:#9a93b3;}
.cmp-card.good .time{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.cmp .per{font-size:13px;color:var(--ink-soft);margin-top:4px;}
.cmp ul{margin-top:16px;list-style:none;display:flex;flex-direction:column;gap:8px;}
.cmp ul li{font-size:13.5px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;}
.cmp ul li::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#ccc;flex-shrink:0;}
.cmp-card.good ul li::before{background:var(--purple);}
.cmp-card.good ul li{color:var(--ink);}
/* mini animated time bars */
.cmp-bar{height:8px;border-radius:5px;background:rgba(124,58,237,.08);margin-top:16px;overflow:hidden;}
.cmp-bar-fill{display:block;height:100%;width:0;border-radius:5px;transition:width 1.5s cubic-bezier(.6,0,.3,1);}
.cmp-card.bad .cmp-bar-fill{background:#ef4444;}
.cmp-card.good .cmp-bar-fill{background:var(--grad);}
.cmp.bars-go .cmp-bar-fill{width:var(--w);}

/* hero scroll indicator */
.hero-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(124,58,237,.32);border-radius:14px;display:flex;justify-content:center;padding-top:7px;z-index:5;text-decoration:none;transition:border-color .2s;}
.hero-scroll:hover{border-color:rgba(124,58,237,.6);}
.hero-scroll span{width:4px;height:8px;border-radius:2px;background:var(--purple);animation:scrollDot 1.6s ease-in-out infinite;}
@keyframes scrollDot{0%{opacity:0;transform:translateY(-3px);}30%{opacity:1;}60%{opacity:1;transform:translateY(9px);}100%{opacity:0;transform:translateY(13px);}}
@media(max-width:820px){.hero-scroll{display:none;}}

/* ===== MID CTA ===== */
.mid-cta{background:var(--grad);padding:70px 28px;text-align:center;}
.mid-cta-inner{max-width:580px;margin:0 auto;}
.mid-cta .tag{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:10px;}
.mid-cta h2{font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:900;color:#fff;margin-bottom:12px;}
.mid-cta p{font-size:.97rem;color:rgba(255,255,255,.85);margin-bottom:26px;}
.mid-cta .btn-white{background:#fff;color:var(--purple);font-weight:700;padding:14px 32px;border-radius:50px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat';font-size:.97rem;transition:transform .2s,box-shadow .2s;}
.mid-cta .btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.15);}
.arrow-anim{display:inline-block;transition:transform .2s;}
.mid-cta .btn-white:hover .arrow-anim{transform:translateX(5px);}

/* ===== CONTACTO / FOOTER ===== */
#contacto{color:#fff;}
.contact-inner{max-width:1120px;margin:0 auto;padding:80px 28px;}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:start;}
.contact-head{max-width:760px;margin:0 auto 48px;text-align:center;}.contact-head h2{font-size:clamp(28px,4vw,42px);font-weight:800;color:#fff;margin-bottom:16px;}.contact-head p{font-size:17px;color:rgba(255,255,255,.75);line-height:1.7;max-width:620px;margin:0 auto;}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;gap:40px;}}
.contact-left h2{font-size:clamp(28px,4vw,42px);font-weight:800;color:#fff;margin-bottom:16px;}
.contact-left p{font-size:17px;color:rgba(255,255,255,.75);line-height:1.7;margin-bottom:28px;}
.contact-btn{background:var(--grad);color:#fff;padding:16px 36px;border-radius:14px;font-family:'Montserrat';font-weight:700;font-size:15px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(124,58,237,.4);transition:transform .2s,box-shadow .2s;}
.contact-btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(124,58,237,.5);}
.contact-right{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:24px;padding:32px;}
.contact-right h3{font-size:18px;font-weight:700;color:#fff;margin-bottom:20px;}
.contact-items{display:flex;flex-direction:column;gap:16px;}
.contact-item{display:flex;align-items:flex-start;gap:14px;}
.contact-item-icon{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-item-icon svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.contact-item-text strong{display:block;font-size:13px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;}
.contact-item-text span{font-size:15px;color:#fff;}
.contact-email{color:#fff;text-decoration:none;transition:color .2s;}
.contact-email:hover{color:#D946EF;text-decoration:underline;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;margin-top:40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-bottom p{font-size:13px;color:rgba(255,255,255,.6);}
.footer-legal{display:flex;flex-direction:column;gap:4px;text-align:center;}
.footer-legal a{color:rgba(255,255,255,.75);text-decoration:none;}
.footer-legal a:hover{color:#D946EF;text-decoration:underline;}
.footer-tag{font-size:12px;}
.footer-logo{font-family:'Montserrat';font-weight:900;font-size:22px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ===== WHATSAPP FLOAT ===== */
.bh-wa{position:fixed;bottom:24px;right:24px;z-index:9998;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(37,211,102,.4);text-decoration:none;transition:transform .25s,box-shadow .25s;}
.bh-wa:hover{transform:scale(1.1) translateY(-2px);box-shadow:0 10px 28px rgba(37,211,102,.5);}
.bh-wa svg{width:28px;height:28px;fill:#fff;}
.bh-wa-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(37,211,102,.3);animation:pulse 2.4s infinite;}
@keyframes pulse{0%{transform:scale(1);opacity:1;}70%{transform:scale(1.6);opacity:0;}100%{transform:scale(1.6);opacity:0;}}

/* ===== PROGRESS BAR ===== */
.progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--grad);z-index:10000;width:0%;transition:width .1s linear;}

/* ===== SECTION INDICATOR DOTS ===== */
.section-dots{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:9000;display:flex;flex-direction:column;gap:10px;}
.section-dots a{width:8px;height:8px;border-radius:50%;background:rgba(124,58,237,.25);border:1.5px solid rgba(124,58,237,.3);transition:background .3s,transform .3s;display:block;}
.section-dots a.active{background:var(--purple);transform:scale(1.4);}
@media(max-width:820px){.section-dots{display:none;}}

@media(max-width:820px){
  .hero-inner{grid-template-columns:1fr;padding-top:20px;padding-bottom:40px;min-height:auto;}
  .phone-stage{display:none;}
  .contact-grid{grid-template-columns:1fr;}
}

/* ===== CUSTOM CURSOR ===== */
/* minimal cursor: keep the native cursor visible, add a subtle trailing ring */
.bh-cursor { display: none; }
.bh-cursor-ring {
  position: fixed; left: 0; top: 0; pointer-events: none; z-index: 99998;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(124,58,237,0.30);
  transform: translate(-50%,-50%);
  transition: width .28s cubic-bezier(.2,.8,.3,1), height .28s cubic-bezier(.2,.8,.3,1), border-color .25s;
}
.bh-cursor-ring.hovered { width: 38px; height: 38px; border-color: rgba(124,58,237,0.55); }
.bh-cursor-ring.clicking { width: 22px; height: 22px; border-color: rgba(124,58,237,0.6); }

/* ===== MOBILE OPTIMIZATION ===== */
@media(max-width:820px){
  html{ scroll-snap-type: none; }
  .snap-section{ min-height: auto; scroll-snap-stop: normal; }
  .section-inner{ padding: 56px 20px; }
}


/* ===== COMPARISON ANIMATION ===== */
.bh-compare-section { background: #f9f5ff; padding: 80px 28px; }
.bh-compare-inner { max-width: 1000px; margin: 0 auto; }
.bh-compare-title {
  text-align: center; font-family: 'Montserrat', sans-serif;
  font-size: clamp(24px, 3.5vw, 38px); font-weight: 800; margin-bottom: 10px;
}
.bh-compare-sub { text-align: center; color: #534D6E; font-size: 15px; margin-bottom: 50px; }
.bh-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media(max-width:640px){ .bh-compare-grid { grid-template-columns: 1fr; } }

.bh-compare-card {
  border-radius: 22px; padding: 28px; position: relative; overflow: hidden;
}
.bh-compare-card.manual { background: #fff; border: 1.5px solid #e5e7eb; }
.bh-compare-card.smart { 
  background: linear-gradient(135deg, #0E0B1F, #1e0a3c);
  border: 1.5px solid rgba(124,58,237,.4);
}
.bh-compare-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px;
  padding: 5px 12px; border-radius: 20px; margin-bottom: 18px;
  text-transform: uppercase; letter-spacing: .08em;
}
.manual .bh-compare-badge { background: #f3f4f6; color: #6b7280; }
.smart .bh-compare-badge { background: rgba(124,58,237,.3); color: #c4b5fd; }

.bh-anim-stage {
  height: 230px; position: relative; display: flex;
  align-items: stretch; justify-content: stretch; overflow: hidden;
  border-radius: 12px; margin-bottom: 20px;
  perspective: 820px; perspective-origin: 50% 24%;
}
.manual .bh-anim-stage {
  background: radial-gradient(130% 120% at 50% 0%, #ffffff 0%, #f3f4f6 60%, #eceef2 100%);
  border: 1px solid #ececf0;
}
.smart .bh-anim-stage {
  background:
    radial-gradient(120% 130% at 72% 22%, rgba(168,85,247,.30) 0%, rgba(124,58,237,.12) 42%, rgba(12,8,24,0) 78%),
    linear-gradient(160deg, #1b1233 0%, #120c24 100%);
  border: 1px solid rgba(255,255,255,.07);
}

/* Manual animation elements */
.anim-paper-list {
  width: 130px; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 8px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.anim-paper-row {
  height: 10px; border-radius: 3px; margin-bottom: 7px;
  background: #e5e7eb; position: relative; overflow: hidden;
}
.anim-paper-row.highlight { background: #fde68a; }
.anim-pencil {
  position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
  font-size: 20px; animation: pencilWrite 3s ease-in-out infinite;
}
@keyframes pencilWrite {
  0%  { right: -30px; opacity: 0; }
  15% { right: 5px; opacity: 1; }
  30% { right: -10px; }
  45% { right: 5px; }
  60% { right: -10px; }
  75% { right: 5px; }
  85% { opacity: 1; right: 5px; }
  100%{ right: -30px; opacity: 0; }
}
.anim-timer {
  position: absolute; top: 8px; right: 8px;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
  color: #ef4444; background: #fee2e2; padding: 3px 8px; border-radius: 6px;
  animation: timerTick 1s steps(1) infinite;
}
.sq-count {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
  color: #34d399; background: rgba(16,185,129,.16);
  border: 1px solid rgba(52,211,153,.35);
  padding: 3px 10px; border-radius: 6px; white-space: nowrap;
}
.mq-count {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
  color: #ef4444; background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.28);
  padding: 3px 10px; border-radius: 6px; white-space: nowrap;
}
/* mechanical analog clock chip (one full sweep = one attendee processed) */
.bh-clock { position: absolute; top: 8px; z-index: 3; width: 36px; height: 36px; }
.bh-clock svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.clk-hand { transform-box: view-box; transform-origin: 20px 20px; }
@keyframes clkSpin { to { transform: rotate(360deg); } }
.clk-slow .ch-sec { animation: clkSpin 8s steps(16) infinite; }
.clk-slow .ch-min { animation: clkSpin 96s steps(48) infinite; }
.clk-fast .ch-sec { animation: clkSpin 2.3s steps(23) infinite; }
.clk-fast .ch-min { animation: clkSpin 27.6s steps(46) infinite; }
@keyframes timerTick {
  0%  { content: '4:32'; } 50% { opacity: .4; } 100% { opacity: 1; }
}

/* QR scan animation */
.anim-qr-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.anim-qr-box {
  width: 90px; height: 90px; border-radius: 10px;
  background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(124,58,237,.3);
  position: relative; overflow: hidden;
}
.anim-qr-box::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(124,58,237,.5) 50%, transparent 100%);
  animation: qrScan 1.8s ease-in-out infinite;
  transform: translateY(-100%);
}
@keyframes qrScan { 0%{ transform:translateY(-100%); } 100%{ transform:translateY(100%); } }
.anim-qr-inner { font-size: 52px; line-height: 1; }
.anim-qr-beam {
  width: 120px; height: 3px;
  background: linear-gradient(90deg, transparent, #7C3AED, #D946EF, transparent);
  border-radius: 2px; animation: beamPulse 1.8s ease-in-out infinite;
}
@keyframes beamPulse { 0%,100%{ opacity:.3; transform:scaleX(.8); } 50%{ opacity:1; transform:scaleX(1); } }
.anim-check {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  display: flex; align-items: center; justify-content: center;
  animation: checkPop 2s ease-in-out infinite;
}
@keyframes checkPop {
  0%,40%{ transform:scale(0); opacity:0; }
  55%{ transform:scale(1.2); opacity:1; }
  65%,100%{ transform:scale(1); opacity:1; }
}
.anim-name-tag {
  color: #fff; font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 13px; text-align: center;
  animation: nameFade 2s ease-in-out infinite;
}
@keyframes nameFade {
  0%,40%{ opacity:0; transform:translateY(6px); }
  60%,100%{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   COMPARISON SCENES v2 — animated queue stories (~loop)
   Manual: slow line; the front person fills a paper form, then
   the whole queue shuffles forward (seamless 64px conveyor).
   BeHere: fast line; each person scans the QR, the gate opens
   and they walk in. Same conveyor, much shorter cycle.
   ============================================================ */
.cmp-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: rotateX(17deg); transform-origin: 50% 100%; backface-visibility: hidden; }

/* ---------- MANUAL QUEUE (slow, laborious — 4s cycle) ---------- */
.m-scene { filter: drop-shadow(0 6px 14px rgba(31,41,55,.10)); }
.mq-lane { animation: mqMarch 13s cubic-bezier(.66,0,.34,1) infinite; }
@keyframes mqMarch { 0%,58%{ transform: translateX(0); } 80%{ transform: translateX(64px); } 100%{ transform: translateX(64px); } }
.mq-bob { animation: mqBob 13s ease-in-out infinite; }
@keyframes mqBob { 0%,58%{ transform: translateY(0); } 69%{ transform: translateY(-3.5px); } 80%,100%{ transform: translateY(0); } }
.mq-fig { transform-box: fill-box; transform-origin: 50% 100%; animation: mqSway 4.2s ease-in-out infinite; }
.mq-fig.d1{ animation-delay:-.4s } .mq-fig.d2{ animation-delay:-.9s } .mq-fig.d3{ animation-delay:-1.5s } .mq-fig.d4{ animation-delay:-2.1s }
@keyframes mqSway { 0%,100%{ transform: rotate(-1.3deg); } 50%{ transform: rotate(1.3deg); } }
/* writing action at the desk — visible only while front person writes */
.mq-action { animation: mqActShow 13s ease-in-out infinite; }
@keyframes mqActShow { 0%{ opacity:0 } 6%{ opacity:1 } 54%{ opacity:1 } 60%,100%{ opacity:0 } }
.mq-arm { transform-box: view-box; transform-origin: 309px 123px; animation: mqWrite 1.3s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes mqWrite { 0%{ transform:rotate(0) } 25%{ transform:rotate(-6deg) } 50%{ transform:rotate(5deg) } 75%{ transform:rotate(-2.5deg) } 100%{ transform:rotate(0) } }
.mq-ink { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.mq-ink-1{ animation: mqInk1 13s ease-in-out infinite } .mq-ink-2{ animation: mqInk2 13s ease-in-out infinite } .mq-ink-3{ animation: mqInk3 13s ease-in-out infinite }
@keyframes mqInk1 { 0%,6%{transform:scaleX(0)} 18%{transform:scaleX(1)} 56%{transform:scaleX(1)} 60%,100%{transform:scaleX(0)} }
@keyframes mqInk2 { 0%,20%{transform:scaleX(0)} 32%{transform:scaleX(1)} 56%{transform:scaleX(1)} 60%,100%{transform:scaleX(0)} }
@keyframes mqInk3 { 0%,34%{transform:scaleX(0)} 46%{transform:scaleX(1)} 56%{transform:scaleX(1)} 60%,100%{transform:scaleX(0)} }
.mq-clock-min{ transform-box:view-box; transform-origin:33px 32px; animation:mqSpin 3.6s linear infinite }
.mq-clock-hr { transform-box:view-box; transform-origin:33px 32px; animation:mqSpin 11s linear infinite }
@keyframes mqSpin{ to{ transform:rotate(360deg) } }

/* ---------- BeHere QUEUE (fast, premium — 2.3s cycle) ---------- */
.s-scene { filter: drop-shadow(0 8px 20px rgba(124,58,237,.30)); }
.sq-lane { animation: sqMarch 2.3s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes sqMarch { 0%,46%{ transform: translateX(0); } 72%{ transform: translateX(64px); } 100%{ transform: translateX(64px); } }
.sq-bob { animation: sqBob 2.3s ease-in-out infinite; }
@keyframes sqBob { 0%,46%{ transform: translateY(0); } 59%{ transform: translateY(-3.5px); } 72%,100%{ transform: translateY(0); } }
.sq-fig { transform-box: fill-box; transform-origin: 50% 100%; animation: sqSway 2s ease-in-out infinite; }
.sq-fig.d1{ animation-delay:-.3s } .sq-fig.d2{ animation-delay:-.7s } .sq-fig.d3{ animation-delay:-1.1s } .sq-fig.d4{ animation-delay:-1.6s }
@keyframes sqSway { 0%,100%{ transform: rotate(-1deg); } 50%{ transform: rotate(1deg); } }
.sq-action { animation: sqActShow 2.3s ease-in-out infinite; }
@keyframes sqActShow { 0%{ opacity:0 } 8%{ opacity:1 } 44%{ opacity:1 } 50%,100%{ opacity:0 } }
.sq-phone { transform-box: view-box; transform-origin: 300px 120px; animation: sqLift 2.3s ease-in-out infinite; }
@keyframes sqLift { 0%,46%{ transform: translateY(0) rotate(0) } 22%{ transform: translateY(-2px) rotate(-3deg) } }
.sq-beam { animation: sqBeam 2.3s ease-in-out infinite; }
@keyframes sqBeam { 0%,10%{ opacity:0 } 18%,36%{ opacity:1 } 42%,100%{ opacity:0 } }
.sq-flash { transform-box: fill-box; transform-origin: center; opacity:0; animation: sqFlash 2.3s ease-out infinite; }
@keyframes sqFlash { 0%,16%{ opacity:0; transform:scale(.5) } 24%{ opacity:.85; transform:scale(1) } 40%{ opacity:0; transform:scale(1.4) } 100%{ opacity:0 } }
.sq-check { transform-box: fill-box; transform-origin: center; opacity:0; animation: sqCheck 2.3s ease-in-out infinite; }
@keyframes sqCheck { 0%,28%{ opacity:0; transform:scale(0) } 38%{ opacity:1; transform:scale(1.25) } 46%{ opacity:1; transform:scale(1) } 50%,100%{ opacity:0; transform:scale(1) } }
.sq-gate { transform-box: view-box; transform-origin: 388px 150px; animation: sqGate 2.3s ease-in-out infinite; }
@keyframes sqGate { 0%,38%{ transform:rotate(0) } 52%,72%{ transform:rotate(-78deg) } 88%,100%{ transform:rotate(0) } }
.sq-gateglow { animation: sqGlow 2.3s ease-in-out infinite; }
@keyframes sqGlow { 0%,38%{ opacity:.25 } 52%,72%{ opacity:1 } 88%,100%{ opacity:.25 } }
.bh-compare-stat {
  text-align: center; padding-top: 8px;
}
.bh-compare-stat strong {
  display: block; font-family: 'Montserrat', sans-serif;
  font-weight: 900; font-size: 28px;
}
.manual .bh-compare-stat strong { color: #ef4444; }
.smart .bh-compare-stat strong { 
  background: linear-gradient(105deg,#5566F0,#D946EF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bh-compare-stat span { font-size: 13px; }
.manual .bh-compare-stat span { color: #6b7280; }
.smart .bh-compare-stat span { color: rgba(255,255,255,.6); }

/* ===== INTERACTIVE DEMO ===== */
.bh-demo-section { background: #fff; padding: 80px 28px; }
.bh-demo-inner { max-width: 720px; margin: 0 auto; }
.bh-demo-title {
  text-align: center; font-family: 'Montserrat', sans-serif;
  font-size: clamp(24px, 3.5vw, 36px); font-weight: 800; margin-bottom: 10px;
}
.bh-demo-badge{display:inline-flex;align-items:center;gap:7px;margin:0 auto 14px;
  padding:6px 14px;border-radius:999px;background:rgba(124,58,237,.10);
  border:1px solid rgba(124,58,237,.28);color:#7C3AED;font-size:12.5px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.bh-demo-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:#7C3AED;}
.bh-demo-head{display:flex;flex-direction:column;align-items:center;}
.bh-demo-sub { text-align: center; color: #534D6E; font-size: 15px; margin-bottom: 36px; }

.bh-demo-card {
  background: #f9f5ff; border: 1.5px solid rgba(124,58,237,.15);
  border-radius: 24px; padding: 36px; position: relative; overflow: hidden;
}
.bh-demo-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.bh-demo-input {
  flex: 1; padding: 14px 18px; border-radius: 12px;
  border: 1.5px solid rgba(124,58,237,.2); font-family: 'Manrope', sans-serif;
  font-size: 15px; outline: none; color: #1B1635;
  background: #fff; transition: border-color .2s;
}
.bh-demo-input:focus { border-color: #7C3AED; }
.bh-demo-btn {
  padding: 14px 24px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(105deg,#5566F0,#7C3AED,#D946EF);
  color: #fff; font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 14px; transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.bh-demo-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,.35); }
.bh-demo-btn:active { transform: scale(.97); }

.bh-demo-screen {
  background: #fff; border-radius: 16px; padding: 24px;
  border: 1px solid rgba(124,58,237,.1);
  min-height: 160px; display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  position: relative; overflow: hidden;
}
.bh-demo-idle {
  text-align: center; color: #9ca3af;
}
.bh-demo-idle svg { width: 40px; height: 40px; stroke: #d1d5db; margin-bottom: 10px; }
.bh-demo-idle p { font-size: 14px; }

.bh-demo-scanning {
  display: none; text-align: center; width: 100%;
}
.bh-demo-scanning .scan-qr {
  font-size: 64px; animation: scanBounce .6s ease-in-out infinite alternate;
}
@keyframes scanBounce { 0%{ transform:scale(.95); } 100%{ transform:scale(1.05); } }
.bh-demo-scanning p { color: #7C3AED; font-weight: 600; font-size: 14px; margin-top: 8px; }
.bh-demo-scanning .scan-bar {
  width: 80px; height: 3px; margin: 10px auto 0;
  background: linear-gradient(90deg,#5566F0,#D946EF);
  border-radius: 2px; animation: scanBarMove 1s ease-in-out infinite;
}
@keyframes scanBarMove { 0%,100%{ transform:scaleX(.4); opacity:.5; } 50%{ transform:scaleX(1); opacity:1; } }

.bh-demo-success {
  display: none; text-align: center; width: 100%;
  animation: successAppear .4s ease forwards;
}
@keyframes successAppear { 0%{ opacity:0; transform:scale(.9); } 100%{ opacity:1; transform:scale(1); } }
.bh-demo-success .success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg,#10b981,#059669);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; font-size: 26px;
}
.bh-demo-success h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 22px; color: #1B1635; margin-bottom: 6px;
}
.bh-demo-success .welcome-name {
  background: linear-gradient(105deg,#5566F0,#D946EF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bh-demo-success p { color: #534D6E; font-size: 14px; }
.bh-demo-success .success-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ecfdf5; color: #059669; font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: 20px; margin-top: 10px;
}
.bh-demo-reset {
  display: none; margin-top: 16px; text-align: center;
}
.bh-demo-reset button {
  background: none; border: 1.5px solid rgba(124,58,237,.3); color: #7C3AED;
  padding: 8px 18px; border-radius: 8px; font-family: 'Manrope', sans-serif;
  font-weight: 600; font-size: 13px; cursor: pointer; transition: background .2s;
}
.bh-demo-reset button:hover { background: rgba(124,58,237,.07); }

/* ===== EMAIL INVITATION ANIMATION ===== */
.demo-sending, .demo-mail { display: none; width: 100%; }
.demo-sending { text-align: center; }
.send-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(124,58,237,.18); border-top-color: #7C3AED; margin: 6px auto 12px; animation: demoSpin .8s linear infinite; }
@keyframes demoSpin { to { transform: rotate(360deg); } }
.demo-sending p { color: #7C3AED; font-weight: 600; font-size: 14px; }

.demo-mail { border: 1px solid rgba(124,58,237,.14); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 12px 32px rgba(124,58,237,.12); text-align: left; }
.mail-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f3eefc; border-bottom: 1px solid rgba(124,58,237,.1); }
.mail-dot { width: 9px; height: 9px; border-radius: 50%; }
.mail-dot.r { background: #ff5f57; } .mail-dot.y { background: #febc2e; } .mail-dot.g { background: #28c840; }
.mail-title { margin-left: 8px; font-size: 12px; font-weight: 600; color: #534D6E; }
.mail-row { display: flex; align-items: center; gap: 12px; padding: 14px; opacity: 0; transform: translateY(-16px); transition: background .3s; }
.mail-row.in { opacity: 1; transform: none; animation: mailIn .55s cubic-bezier(.2,.7,.3,1); }
@keyframes mailIn { 0% { transform: translateY(-18px); } 60% { transform: translateY(3px); } 100% { transform: translateY(0); } }
.demo-mail.opened .mail-row { background: #faf7ff; }
.mail-ava { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg,#5566F0,#D946EF); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.mail-rowtext { flex: 1; min-width: 0; }
.mail-from { font-weight: 700; font-size: 13.5px; color: #1B1635; display: flex; align-items: center; gap: 8px; }
.mail-new { font-size: 10px; font-weight: 700; color: #fff; background: #10b981; padding: 1px 7px; border-radius: 20px; letter-spacing: .04em; animation: mailNew 1s ease-in-out infinite; }
@keyframes mailNew { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.mail-subj { font-size: 13px; color: #1B1635; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-prev { font-size: 12px; color: #9089a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-unread { width: 9px; height: 9px; border-radius: 50%; background: #5566F0; flex-shrink: 0; }
.mail-open { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s ease, opacity .5s ease; border-top: 1px dashed rgba(124,58,237,0); }
.demo-mail.opened .mail-open { max-height: 900px; opacity: 1; border-top-color: rgba(124,58,237,.18); }
.inv-wrap { background: #121c2e; padding: 20px 16px 24px; }
.inv-wrap .tk { max-width: 296px; margin: 0 auto; border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.32); }
.demo-mail.opened .inv-wrap .tk { animation: qrPop .55s .2s cubic-bezier(.2,.8,.3,1) backwards; }
.demo-mail:not(.opened) .inv-wrap .tk { transform: scale(.7); opacity: 0; }
@keyframes qrPop { to { transform: scale(1); opacity: 1; } }
/* La entrada se ve un poco más grande en el correo */
.inv-wrap .tk-banner { min-height: 62px; font-size: 14px; }
.inv-wrap .tk-title { font-size: 14.5px; margin-top: 14px; }
.inv-wrap .tk-sub { font-size: 11px; padding: 4px 26px 0; }
.inv-wrap .tk-qr { max-width: 160px; margin: 16px auto 18px; }
.inv-wrap .tk-meta { font-size: 11px; padding: 13px 12px; }
.inv-wrap .tk-meta strong { font-size: 11.5px; }
.inv-wrap .tk-foot { font-size: 9px; padding: 11px 10px; }

/* ===== DOS CANALES: WHATSAPP + CORREO ===== */
.demo-channels { display: none; width: 100%; gap: 20px; grid-template-columns: 1fr 1fr; align-items: start; }
.demo-channels.on { display: grid; }
@media(max-width:860px){ .demo-channels.on { grid-template-columns: 1fr; } }
.chan { min-width: 0; }
.chan-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #7C3AED; margin-bottom: 9px; }
.chan-label svg { width: 15px; height: 15px; flex-shrink: 0; }
.chan-label.wa { color: #1DA851; }

.demo-wa { display: none; border-radius: 14px; overflow: hidden; border: 1px solid rgba(29,168,81,.25); box-shadow: 0 12px 32px rgba(11,20,26,.22); text-align: left; }
.demo-wa.on { display: block; }
.wa-top { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #1f2c34; color: #e9edef; }
.wa-back { width: 15px; height: 15px; opacity: .8; flex-shrink: 0; }
.wa-ava { width: 32px; height: 32px; border-radius: 9px; background: #6D28D9; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wa-ava svg { width: 18px; height: 18px; }
.wa-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.wa-who strong { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-who span { font-size: 10.5px; color: #8696a0; }
.wa-ico { width: 16px; height: 16px; opacity: .6; flex-shrink: 0; }
.wa-body {
  padding: 12px 10px 16px; min-height: 120px;
  background-color: #0b141a;
  background-image: radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 22px 22px; background-position: 0 0, 11px 11px;
}
.wa-day { text-align: center; margin-bottom: 12px; }
.wa-day span { display: inline-block; background: #182229; color: #8696a0; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 3px 11px; border-radius: 20px; }
.wa-typing { display: none; width: 54px; gap: 4px; align-items: center; background: #202c33; border-radius: 10px 10px 10px 2px; padding: 11px 10px; }
.wa-typing.on { display: flex; }
.wa-typing span { width: 7px; height: 7px; border-radius: 50%; background: #667781; animation: waDot 1.1s ease-in-out infinite; }
.wa-typing span:nth-child(2){ animation-delay: .18s; }
.wa-typing span:nth-child(3){ animation-delay: .36s; }
@keyframes waDot { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.wa-msg {
  position: relative; max-width: 95%; background: #202c33; border-radius: 10px 10px 10px 2px;
  padding: 5px 5px 5px; box-shadow: 0 1px 1px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(12px) scale(.95); transition: opacity .35s ease, transform .4s cubic-bezier(.2,.8,.3,1);
}
.wa-msg.in { opacity: 1; transform: none; }
.wa-msg::before { content: ''; position: absolute; left: -6px; bottom: 0; width: 0; height: 0; border: 6px solid transparent; border-right-color: #202c33; border-bottom: 0; }

/* ===== ENTRADA DIGITAL (compartida por WhatsApp y correo) ===== */
.tk { background: #fff; border-radius: 4px; overflow: hidden; }
.tk-banner {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 46px; padding: 8px 10px; background: linear-gradient(100deg,#0d2b10,#1a5c1e 55%,#0b2410);
  color: #b8ff5e; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px;
  letter-spacing: .02em; line-height: 1.2; text-transform: uppercase;
  overflow-wrap: break-word; word-break: break-word;
}
.tk-title { text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; color: #1B1635; margin-top: 9px; }
.tk-sub { text-align: center; font-size: 9.5px; color: #534D6E; line-height: 1.35; padding: 2px 14px 0; }
.tk-qr { width: 100%; max-width: 132px; aspect-ratio: 1/1; margin: 8px auto; background: #fff; }
.tk-meta { text-align: center; font-size: 9.5px; color: #2f4a72; line-height: 1.5; padding: 11px 10px; background: #f6f7f9; border-top: 1px solid #e9ebf0; }
.tk-meta strong { display: block; font-weight: 800; font-size: 10px; color: #1b2a4a; }
.tk-meta strong + span { display: block; margin-bottom: 5px; overflow-wrap: break-word; word-break: break-word; }
.tk-meta strong + span:last-child { margin-bottom: 0; }
.tk-foot { background: #1c2b45; color: #9fb0cc; text-align: center; font-size: 8.5px; line-height: 1.35; padding: 9px 8px; }

/* Marco oscuro de la imagen adjunta en WhatsApp */
.wa-card { background: #16233b; border-radius: 7px; padding: 10px 10px 6px; margin-bottom: 6px; }
.wa-msg.in .wa-card { animation: waQrPop .5s .12s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes waQrPop { from { transform: scale(.75); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wa-card-foot { text-align: center; font-size: 8px; color: #7f8fa6; padding: 7px 4px 2px; line-height: 1.3; }

.wa-text { font-size: 12.5px; line-height: 1.45; color: #e9edef; padding: 0 4px; overflow-wrap: break-word; word-break: break-word; }
.wa-text p { margin-bottom: 8px; }
.wa-text p:last-child { margin-bottom: 0; }
.wa-text strong { font-weight: 700; }
.wa-note { color: #8696a0; font-size: 11.5px; }
.wa-meta { display: flex; align-items: center; justify-content: flex-end; font-size: 10px; color: #8696a0; margin-top: 3px; padding-right: 4px; }

/* ===== PHONE TOOLTIPS ===== */
.phone-stage { position: relative; }
.ph-tip {
  position: absolute; z-index: 60;
  background: #1B1635; color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.4;
  padding: 9px 13px; border-radius: 12px;
  pointer-events: none;
  opacity: 0; transform: translateY(-50%) scale(.94);
  transition: opacity .25s, transform .25s;
  width: max-content; max-width: 190px; white-space: normal;
  box-shadow: 0 12px 30px rgba(27,22,53,.35);
}
.ph-tip::before {
  content: ''; position: absolute; border: 6px solid transparent;
}
.ph-tip.tip-left::before { left: 100%; top: 50%; transform:translateY(-50%); border-left-color: #1B1635; }
.ph-tip.tip-right::before { right: 100%; top: 50%; transform:translateY(-50%); border-right-color: #1B1635; }
.ph-tip.tip-bottom::before { bottom: 100%; left: 50%; transform:translateX(-50%); border-bottom-color: #1B1635; }
.ph-hotspot {
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(124,58,237,.7); border: 2px solid #fff;
  cursor: pointer; animation: hotspotPulse 2s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff; font-weight: 700; text-decoration: none; z-index: 30;
}
.ph-hotspot:hover { background: rgba(124,58,237,1); transform: scale(1.12); z-index: 61; }
@keyframes hotspotPulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(124,58,237,.4); }
  50%{ box-shadow: 0 0 0 8px rgba(124,58,237,0); }
}
.ph-hotspot:hover + .ph-tip,
.ph-hotspot:hover ~ .ph-tip,
.ph-hotspot:hover .ph-tip,
.ph-hotspot:focus .ph-tip { opacity: 1; transform: translateY(-50%) scale(1); }

/* ===== CONFETTI ===== */
.confetti-piece {
  position: fixed; width: 8px; height: 8px; pointer-events: none;
  z-index: 99997; border-radius: 2px;
  animation: confettiFall 1.2s ease-in forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(300px) rotate(720deg) scale(.3); opacity: 0; }
}

/* ===== Responsive overrides (declared after base rules so they win) ===== */
@media(max-width:600px){
  .bh-compare-section, .bh-demo-section{ padding: 52px 18px; }
  .bh-compare-sub{ margin-bottom: 28px; }
  .band{ padding: 32px 22px; border-radius: 22px; }
  .band h2{ font-size: 22px; }
  .band p{ font-size: 15px; }
  .bh-anim-stage{ height: 178px; }
  .cmp{ margin-top: 26px; }
  .mid-cta{ padding: 56px 20px; }
  .contact-inner{ padding: 56px 20px; }
  .cta-row{ width: 100%; }
  .cta-row .btn{ flex: 1 1 100%; justify-content: center; }
  .sec-head h2{ font-size: 28px; }
  /* Demo "Pruébalo tú mismo" — mobile */
  .bh-demo-sub{ font-size: 14px; margin-bottom: 24px; padding: 0 4px; }
  .bh-demo-card{ padding: 16px 13px; border-radius: 18px; }
  .bh-demo-form{ gap: 10px; margin-bottom: 18px; }
  .bh-demo-input{ padding: 13px 14px; font-size: 14px; }
  .bh-demo-btn{ white-space: normal; padding: 14px 16px; font-size: 14px; line-height: 1.3; }
  .bh-demo-screen{ padding: 16px; }
  .mail-row{ padding: 12px; gap: 10px; }
  .mail-ava{ width: 36px; height: 36px; font-size: 16px; }
  /* Canales en móvil */
  .demo-channels{ gap: 22px; }
  .wa-body{ padding: 12px 8px 14px; }
  .tk-qr{ max-width: 124px; }
  .inv-wrap{ padding: 16px 10px 18px; }
  .inv-wrap .tk-qr{ max-width: 142px; }
  .wa-text{ font-size: 12px; }
  .wa-note{ font-size: 11px; }
  .wa-who strong{ font-size: 12.5px; }
}
/* Safety net: the demo card and its contents must never overflow horizontally */
.bh-demo-btn{ white-space: normal; }
.bh-demo-card, .bh-demo-screen, .bh-demo-form,
.bh-demo-input, .demo-mail, .mail-open,
.demo-channels, .chan, .demo-wa, .tk{ max-width: 100%; }


/* ===== A2 · MOVIMIENTO REDUCIDO =====
   Quien tenga activada la preferencia del sistema no ve ninguna de las
   animaciones en bucle. El contenido queda en su estado final visible. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0s !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  html{scroll-behavior:auto;scroll-snap-type:none;}
  .snap-section{scroll-snap-stop:normal;}
  .reveal-up,.reveal-left,.reveal-right,.reveal-scale{
    opacity:1 !important;transform:none !important;
  }
}

/* ===== C1 · FORMULARIO DE CAPTURA ===== */
.lead-form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:24px;padding:30px;max-width:480px;position:relative;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.lf-row{display:flex;gap:14px;}
.lf-field{margin-bottom:16px;flex:1;min-width:0;}
.lead-form label{display:block;font-size:12px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;}
.lead-form input,.lead-form select{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;font-family:'Manrope',sans-serif;font-size:15px;color:#fff;background:rgba(255,255,255,.05);transition:border-color .2s,background .2s;}
.lead-form input::placeholder{color:rgba(255,255,255,.4);}
.lead-form input:focus,.lead-form select:focus{outline:none;border-color:var(--magenta);background:rgba(255,255,255,.09);}
.lead-form select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;cursor:pointer;}
.lead-form option{color:#1B1635;}
.lf-consent{display:flex;gap:10px;align-items:flex-start;margin:6px 0 18px;}
.lf-consent input{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--magenta);}
.lf-consent label{font-size:12.5px;font-weight:400;color:rgba(255,255,255,.65);line-height:1.5;margin:0;text-transform:none;letter-spacing:0;}
.lf-consent a{color:#E9A5F5;}
.lf-submit{width:100%;background:var(--grad);color:#fff;border:none;padding:15px;border-radius:14px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 10px 30px rgba(124,58,237,.4);}
.lf-submit:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(124,58,237,.5);}
.lf-submit:disabled{opacity:.6;cursor:default;transform:none;}
.lf-alt{margin-top:16px;font-size:15px;color:rgba(255,255,255,.7);}
.lf-alt a{color:#fff;font-weight:600;}
.lf-msg{margin-top:14px;padding:12px 15px;border-radius:12px;font-size:14px;display:none;}
.lf-msg.ok{display:block;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.5);color:#6ee7b7;}
.lf-msg.err{display:block;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.5);color:#fca5a5;}
.lf-hp{position:absolute;left:-9999px;top:-9999px;}
@media(max-width:600px){ .lf-row{flex-direction:column;gap:0;} }
.case-link{display:inline-block;margin-top:8px;color:var(--purple);font-weight:600;font-size:14px;text-decoration:none;}
.case-link:hover{text-decoration:underline;}

/* ===== FAQ (páginas de segmento) ===== */
.faq-list{max-width:820px;margin:0 auto;}
.faq-list details{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden;}
.faq-list summary{padding:20px 24px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--ink);}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:'+';font-size:26px;color:var(--purple);font-weight:300;flex-shrink:0;line-height:1;}
.faq-list details[open] summary::after{content:'\2212';}
.faq-list details p{padding:0 24px 22px;color:var(--ink-soft);font-size:15.5px;line-height:1.65;}
.faq-list details p a{color:var(--purple);}

/* ===== SECCIÓN DE VIDEO ===== */
.video-wrap{max-width:900px;margin:0 auto;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(27,22,53,.18);border:1px solid var(--line);background:#0E0B1F;position:relative;}
.video-wrap video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#0E0B1F;}