.bai{width:100%}
.bai *{box-sizing:border-box}
.bai-box{
  position:relative;overflow:hidden;display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:32px;padding:56px;min-height:300px;border-radius:20px;color:#fff;
  background:linear-gradient(110deg,#071a45 35%,#0a3a9c);font-family:inherit;
}
.bai-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 55%,rgba(25,195,255,.45),transparent 45%)}
.bai-drop{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35;display:none;pointer-events:none}
.bai--drops .bai-drop{display:block;animation:bai-flota 9s ease-in-out infinite}
.bai-g1{width:140px;height:140px;background:#ff3d9a;right:34%;top:-40px}
.bai-g2{width:110px;height:110px;background:#ffd23f;right:6%;bottom:-40px;animation-delay:-3s!important}
.bai-g3{width:120px;height:120px;background:#19c3ff;left:40%;bottom:-60px;animation-delay:-6s!important}
@keyframes bai-flota{50%{transform:translate(18px,-22px)}}

.bai-text{position:relative;z-index:2;flex:1 1 auto;width:100%;max-width:560px}
.bai-title{margin:0 0 12px;font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;line-height:1.15;color:#fff}
.bai-desc{margin:0 0 28px;color:#cfdcff;font-size:1.02rem;line-height:1.55}
.bai-title>span,.bai-desc>span{display:inline-block}
.bai-desc>span{display:block}

.bai-btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  background:#12b04f;color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;
  padding:14px 24px;border-radius:10px;transition:transform .2s,box-shadow .2s,background-color .2s,color .2s;
}
.bai-btn i{font-size:1.3em}
.bai-btn svg{width:1.3em;height:1.3em;fill:currentColor}
.bai-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.bai-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.bai--pulse .bai-btn::after{
  content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 0 var(--bai-pulse,rgba(18,176,79,.7));animation:bai-onda 2.2s infinite;
}
@keyframes bai-onda{70%{box-shadow:0 0 0 16px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}

.bai-visual{position:relative;z-index:2;flex:0 0 auto;width:380px;max-width:100%;align-self:center}
.bai-visual svg,.bai-visual img{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
.bai--float .bai-visual-in{animation:bai-float 4.5s ease-in-out infinite}
@keyframes bai-float{50%{transform:translateY(-10px)}}

/* SVG impresora */
.bai-paper,.bai-tray{fill:#fff}
.bai-l1,.bai-d1{fill:#19c3ff}.bai-l2,.bai-d2{fill:#ff3d9a}.bai-l3,.bai-d3{fill:#ffd23f}.bai-l4{fill:#0a3a9c}
.bai-body1{fill:#e9eefc}.bai-body2{fill:#c9d5f5}.bai-slot{fill:#0b1633}.bai-led{fill:#12e06a}
.bai-linea{transform-box:fill-box;transform-origin:left center}
.bai--print .bai-hoja{animation:bai-sale 5s ease-in-out infinite}
.bai--print .bai-linea{animation:bai-escribe 5s ease-in-out infinite}
.bai--print .bai-l2{animation-delay:.25s}.bai--print .bai-l3{animation-delay:.5s}.bai--print .bai-l4{animation-delay:.75s}
.bai--print .bai-led{animation:bai-parpadea 1s steps(2) infinite}
.bai--print .bai-imp{animation:bai-vibra 5s ease-in-out infinite}
@keyframes bai-sale{0%{transform:translateY(-120px)}55%,85%{transform:translateY(0)}100%{transform:translateY(40px);opacity:0}}
@keyframes bai-escribe{0%,15%{transform:scaleX(0)}45%,100%{transform:scaleX(1)}}
@keyframes bai-parpadea{50%{opacity:.25}}
@keyframes bai-vibra{10%,50%{transform:translateY(0)}20%{transform:translateY(-1.5px)}30%{transform:translateY(1.5px)}40%{transform:translateY(-1px)}}

/* ===== Animaciones de entrada ===== */
.bai-a{transition:opacity var(--d,800ms) ease var(--dl,0ms),transform var(--d,800ms) cubic-bezier(.2,.7,.2,1) var(--dl,0ms),filter var(--d,800ms) ease var(--dl,0ms)}
.bai-a[data-a="fade-up"]{--ty:40px}
.bai-a[data-a="fade-down"]{--ty:-40px}
.bai-a[data-a="slide-left"]{--tx:-70px}
.bai-a[data-a="slide-right"]{--tx:70px}
.bai-a[data-a="zoom-in"]{--sc:.82}
.bai-a[data-a="blur-in"]{--bl:12px}
.bai.is-ready:not(.is-in) .bai-a{opacity:0;transform:translate(var(--tx,0),var(--ty,0)) scale(var(--sc,1));filter:blur(var(--bl,0px))}
.bai .bai-a{will-change:opacity,transform}
.bai-btnin{display:inline-block}

@media (prefers-reduced-motion:reduce){
  .bai *,.bai *::after{animation:none!important;transition:none!important}
  .bai.is-ready:not(.is-in) .bai-a{opacity:1;transform:none;filter:none}
}