.hero{
  background-image: var(--hero-bg-image);
  /* Cubrir todo el contenedor manteniendo la relación de aspecto */
  background-size: cover;
  background-repeat: no-repeat;
  /* Fijar la imagen al viewport para un efecto fijo */
  background-attachment: fixed;
  /* Center horizontally and set vertical position via a CSS variable (default 35%) */
  background-position: center var(--hero-bg-position, 100%);
  min-height: 85vh; /* Aumenta para que la imagen se vea mejor */
  display: flex;
  align-items: center; /* Centrar verticalmente el contenido */
  justify-content: center; /* Centrar horizontalmente el contenido */
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.712); /* Oscurece con negro al 40% de opacidad; ajusta el valor */
    z-index: 1; /* Por encima del fondo, debajo del contenido */
}

.hero-bg-cover {
    position: relative;
    z-index: 2; /* Asegura que el contenido esté por encima del overlay */
}

/* Mobile fallback: fixed backgrounds are not always supported on mobile devices */
@media (max-width: 768px) {
  .hero {
    background-attachment: scroll;
    background-position: center center;
    min-height: 60vh;
  }
}

@keyframes float {
    0%, 100% { transform: translateY(-2%); }
    50% { transform: translateY(2%); }
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .hero-image-custom {
    width: 80px;
    height: auto;
    max-width: 100%;
  }
    
    .btn-modern-secondary {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      color: white;
      padding: 16px 32px;
      border-radius: 12px;
      font-size: 18px;
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
      cursor: pointer;
      position: relative;
    }
    
    .btn-modern-secondary:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.4);
    }
    
    .btn-modern-secondary::after {
      transition: transform 0.3s ease;
    }
    
    .btn-modern-secondary:hover::after {
      transform: translateX(4px);
    }