#hero {
    position: relative;
    min-height: 100vh;
    background-color: var(--bs-light); /* fondo base blanco */
    padding: var(--spacing-section) 0;
    color: var(--bs-body-color);
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
  }
  
  #hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/img/intro_2.jpg') center center/cover no-repeat;
    opacity: 0.5; /* transparencia de la imagen */
    z-index: 0;
  }
  
  #hero > * {
    position: relative;
    z-index: 1;
  }
  
  
  #hero .container {
    position: relative;
    z-index: 2;
  }
  
  /* Content box over image */
  .hero-overlay-box {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    padding: var(--spacing-inner);
    border-radius: var(--border-radius-lg);
    max-width: 600px;
    box-shadow: 0 0 1rem rgba(246, 244, 244, 0.3);
  }
  
  /* Text styling */
  #hero-subtitle {
    color: var(--brand-blue);
    font-size: var(--text-small);
    letter-spacing: 0.05em;
  }
  
  #hero-title {
    color: var(--brand-orange);
    font-size: var(--heading-xl);
    font-weight: 300;
  }
  
  #hero-description {
    font-size: var(--text-base);
  }
  
  /* WhatsApp Button */
  .btn-whatsapp {
    background-color: var(--brand-orange);
    color: #fff;
    border: 2px solid var(--brand-blue);
    transition: all 0.3s ease;
  }
  
  .btn-whatsapp:hover {
    background-color: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-orange);
  }
  
  /* Custom control over background position */
  #hero.position-left {
    background-position: left center;
  }
  
  #hero.position-right {
    background-position: right center;
  }
  
  #hero.position-top {
    background-position: center top;
  }
  
  #hero.position-bottom {
    background-position: center bottom;
  }