/* Keyzip viva: fondo hero, capturas reales, promo 30 días y animaciones suaves */
.hero-bg{background:#071530 url(/assets/img/hero-mesh.webp) center/cover no-repeat;position:relative;overflow:hidden}
.hero-bg::after{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-140px;border-radius:50%;background:radial-gradient(circle,rgba(140,100,255,.35),transparent 70%);pointer-events:none;animation:kz-float 14s ease-in-out infinite}
.hero-bg>.wrap{position:relative;z-index:1}
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line,#dfe5f1);box-shadow:0 14px 36px rgba(7,21,48,.18)}
.shot figcaption{margin-top:8px;color:var(--muted,#5b6785);font-size:12px}
.promo-home{background:linear-gradient(135deg,#071530,#1d3f8f 60%,#5b3fc4);color:#fff;border-radius:20px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;box-shadow:0 18px 44px rgba(7,21,48,.25)}
.promo-home h2{margin:6px 0 10px;color:#fff}
.promo-home p{color:#d6e0f7}
.promo-home .pill{display:inline-block;background:#e8f7ee;color:#0b5d2a;border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px}
.promo-home .shot img{border-color:rgba(255,255,255,.3)}
.promo-home .shot figcaption{color:#c9d6f3}
@media(max-width:860px){.promo-home{grid-template-columns:1fr;padding:22px}}
@keyframes kz-float{50%{transform:translate(-30px,24px)}}
@keyframes kz-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.kz-js .kz-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.kz-js .kz-reveal.kz-on{opacity:1;transform:none}
.demo,.plan,.gcard,.crm-ben>div,.tool{transition:transform .25s ease,box-shadow .25s ease}
.demo:hover,.plan:hover,.gcard:hover,.crm-ben>div:hover,.tool:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(7,21,48,.14)}
.hero-bg .wrap>*{animation:kz-in .7s ease both}
.hero-bg .wrap>*:nth-child(2){animation-delay:.1s}.hero-bg .wrap>*:nth-child(3){animation-delay:.2s}
@media(prefers-reduced-motion:reduce){
.hero-bg::after,.hero-bg .wrap>*{animation:none}
.kz-js .kz-reveal{opacity:1;transform:none;transition:none}
.demo,.plan,.gcard,.crm-ben>div,.tool{transition:none}
.demo:hover,.plan:hover,.gcard:hover,.crm-ben>div:hover,.tool:hover{transform:none}}