.hero{
  background: linear-gradient(335deg, #1e4b7a 0%, var(--color-primary) 100%);
  color:#fff; padding:60px 0 30px; min-height:50vh;
  display:flex; align-items:center;
}
.hero-container{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1.2fr 1fr;; gap:var(--space-7); align-items:center;
}
.hero-content{ animation:fadeInLeft 1s ease-out; }

.hero-logo{ margin-bottom:20px; }
.hero-logo-img{
  max-width:300px; width:100%; height:auto; object-fit:contain;
  filter:drop-shadow(2px 2px 4px rgba(0,0,0,.3));
}

.hero-buttons{ display:flex; gap:20px; flex-wrap:wrap; }

.hero-image{ display:flex; justify-content:center; align-items:center; animation:fadeInRight 1s ease-out; }
.hero-icon{ font-size:15rem; opacity:.8; animation:float 3s ease-in-out infinite; }
.hero-img{
  max-width:100%; max-height:300px; width:auto; height:auto;
  animation:float 5s ease-in-out infinite; object-fit:contain;
  filter:
    drop-shadow(0 0 0 var(--color-primary))
    drop-shadow(0 12px 25px rgba(0,0,0,.18));    
}

/* Spacing aplicado a utilidades .ds dentro del héroe */
.hero .ds-titleHero{ margin-bottom:10px; text-shadow:2px 2px 4px rgba(0,0,0,.3); }
.hero .ds-subtitle { margin-bottom:20px; opacity:.9; }
.hero .ds-bodyBase { margin-bottom:20px; line-height:1.5; opacity:.9; }
.hero .btn{ font-weight:600; }

/* Responsive héroe */
@media (max-width:768px){
  .hero-container{ grid-template-columns:1fr; text-align:center; gap:30px; }
  .hero-logo-img{ max-width:250px; }
  .hero-icon{ font-size:8rem; }
  .hero-img{ max-height:250px; }
  .hero-buttons{ justify-content:center; }
}
@media (max-width:480px){
  .hero{ padding:100px 0 60px; }
  .hero-logo-img{ max-width:200px; }
  .hero-img{ max-height:200px; }
}