/* Paleta violeta (--ma-violet-*) en css/brand-tokens.css (global). */
#hero-animation{
  margin:0; padding:0; color:#fff; position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(61,26,110,0.94) 0%, rgba(109,40,217,0.88) 100%),
    url("../../img/front-pages/backgrounds/hero-software.d15ab44851cf.jpg") center/cover no-repeat;
}
#hero-animation::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;
  background:rgba(167,139,250,0.12);top:-150px;right:-100px;pointer-events:none;}
#hero-animation::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;
  background:rgba(167,139,250,0.08);bottom:-80px;left:10%;pointer-events:none;}
.hero-banner{position:relative;padding:64px 0 48px;overflow:hidden;}
.hero-badge{display:inline-block;background:rgba(167,139,250,0.2);color:var(--ma-violet-300);
  border:1px solid rgba(167,139,250,0.4);padding:6px 16px;border-radius:9999px;font-size:0.8rem;
  font-weight:600;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:20px;}
.hero-banner-title{font-size:3.25rem;font-weight:800;line-height:1.1;letter-spacing:-0.5px;
  color:#fff;margin-bottom:1rem;}
.hero-banner-title span{color:var(--ma-violet-300);}
.hero-banner-subtitle{font-size:1.125rem;line-height:1.5;color:rgba(255,255,255,0.92);
  margin-bottom:1.75rem;max-width:520px;}
.btn-hero-primary{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ma-violet-700);
  padding:13px 28px;border-radius:9999px;font-weight:700;font-size:1rem;border:none;text-decoration:none;
  box-shadow:0 4px 24px rgba(109,40,217,0.3);transition:transform 0.2s,box-shadow 0.2s;}
.btn-hero-primary:hover{color:var(--ma-violet-900);transform:translateY(-2px);box-shadow:0 8px 32px rgba(109,40,217,0.4);}
.btn-hero-secondary{display:inline-flex;align-items:center;gap:6px;background:transparent;color:#fff;
  padding:13px 28px;border-radius:9999px;font-weight:600;font-size:1rem;border:2px solid rgba(255,255,255,0.5);
  text-decoration:none;transition:border-color 0.2s,background 0.2s;}
.btn-hero-secondary:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,0.08);}
.hero-banner-content .btn{margin-top:0;}
.hero-microcopy{font-size:0.875rem;color:rgba(255,255,255,0.8);margin-top:1rem;}
.hero-microcopy i{vertical-align:middle;}
.hero-mockup-col{display:flex;align-items:center;justify-content:center;padding-top:1.5rem;}
.hero-visual{position:relative;}
.hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:24px;
  padding:14px;box-shadow:0 24px 60px rgba(30,19,51,.28);backdrop-filter:blur(4px);
  transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);transition:transform .5s ease;}
.hero-card:hover{transform:perspective(1400px) rotateY(0) rotateX(0);}
.hero-card img{border-radius:14px;width:100%;display:block;}
.hero-float{position:absolute;background:#fff;color:var(--ma-violet-900);border-radius:14px;padding:12px 16px;
  box-shadow:0 14px 40px rgba(75,42,156,.16);font-weight:700;font-size:0.92rem;display:flex;align-items:center;
  gap:10px;animation:hero-bob 4s ease-in-out infinite;}
.hero-float .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--ma-violet-50);color:var(--ma-violet-700);flex-shrink:0;}
.hero-float .ic svg{width:20px;height:20px;}
.hero-float.f1{top:-18px;left:-26px;}
.hero-float.f2{bottom:24px;right:-22px;animation-delay:1.4s;}
@keyframes hero-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@media (prefers-reduced-motion:reduce){.hero-float{animation:none;}.hero-card{transform:none;}}
@media (max-width:991.98px){
  .hero-banner{padding:48px 0 40px;text-align:center;}
  .hero-banner-subtitle{margin-left:auto;margin-right:auto;}
  .hero-mockup-col{padding-top:2rem;}
  .hero-card{transform:none;max-width:460px;margin:0 auto;}
  .hero-float.f1{left:-6px;}
  .hero-float.f2{right:-6px;}
}
@media (max-width:575.98px){
  .hero-banner{padding:32px 0 36px;}
  .hero-banner-title{font-size:2.25rem;}
  .hero-banner-subtitle{font-size:1rem;}
  .hero-float{padding:6px 9px;font-size:0.68rem;gap:6px;border-radius:9px;}
  .hero-float .ic{width:22px;height:22px;border-radius:6px;}
  .hero-float .ic svg{width:14px;height:14px;}
  .hero-float.f1{top:-10px;left:0;}
  .hero-float.f2{bottom:10px;right:0;}
}