/* ===== hero.css - Licencia Ambiental Querétaro ===== */
/* Basado en el skill animar-interfaz */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  background-color: #022c22;
}

/* --- Fade entre imágenes del hero + overlay fijo --- */
.hero .capa-imagen {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1.2s ease;
  z-index: 0;
}

.hero .capa-imagen.activa {
  opacity: 1;
}

.hero .overlay-oscuro {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(2, 44, 34, 0.94) 0%, rgba(6, 78, 59, 0.85) 55%, rgba(6, 78, 59, 0.65) 100%);
}

.hero .contenido-hero {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* --- Servicio rotativo en el título --- */
.rotativo-etiqueta,
.rotativo-titulo {
  transition: opacity .4s ease;
}

/* --- Botón magnético --- */
.btn-magnetico {
  transition: transform .15s ease, background .2s ease;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .hero .capa-imagen {
    transition: none;
  }
  .rotativo-etiqueta,
  .rotativo-titulo {
    transition: none;
  }
  .btn-magnetico {
    transition: none;
  }
}