.hero {
  position: relative;
  min-height: 100vh;
  padding: 2rem 1rem 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* quitamos background aquí; va en .hero-bg */
}

/* Fondo separado para animarlo con transform (mejor en móvil) */
.hero-bg {
  position: absolute; inset: 0;
  background: url('https://144053362.fs1.hubspotusercontent-eu1.net/hub/144053362/hubfs/d0fc91fa-ae56-49d2-8cca-642de8de6154.jpg?width=1200&length=1200&name=d0fc91fa-ae56-49d2-8cca-642de8de6154.jpg')
    center/cover no-repeat;
  transform: scale(1.12);             /* punto de partida elegante */
  transform-origin: center;
  will-change: transform;
  z-index: -3;
}

.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;                /* no bloquea clics */
  z-index: -2;
}

.hero-content {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: #eeeeee;
  padding: 0 1rem;
  transition: transform 0.1s ease-out;
}

.tagline { font-size: 2rem; margin-bottom: 0.5rem; line-height: 1.4 !important; }
.hero-content h1 { font-size: 3rem; margin: 0.5rem 0 1.5rem; line-height: 1.2; }



/* Banner UCAM */
.hero-banner {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  padding: 1.5rem 3rem; border-radius: 0.75rem; margin-top: 2.5rem;
  max-width: 800px; width: 90%; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  flex-wrap: wrap;
}
.ucam-logo { height: 80px; margin-right: 1.25rem; }
.banner-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; padding: 0; }
.banner-list li { display: flex; align-items: center; font-size: 1.1rem; color: #eeeeee; }
.banner-list li i { margin-right: 0.5rem; color: #0a2540; }

/* Forzar blanco sobre presets de HubSpot */
.hero-content .tagline,
.hero-content h1 { color: #ffffff !important; }

/* ===== Animaciones Mobile (más fiables) ===== */
@media (max-width: 900px), (pointer: coarse) {
  /* Ken Burns por transform (fluido en iOS/Android) */
  .hero-bg {
    animation: kb 22s ease-in-out infinite alternate;
  }
  @keyframes kb {
    0%   { transform: scale(1.12) translateY(0); }
    100% { transform: scale(1.28) translateY(-2%); }
  }

  /* Flotado suave del bloque */
  .hero-content {
    padding-bottom: 2rem;
    animation: heroFloat 7s ease-in-out infinite;
    will-change: transform;
  }

.hero-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* por encima del overlay */
  overflow: hidden;
  opacity: 0.55; /* control global de intensidad del efecto */
}
  @keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }


}

/* Respeto a usuarios con reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-content { animation: none !important; }
  .hero-content { transition: none !important; }
}


  /* --- Láser sweep (::before) --- */
  .hero-effects::before {
    content: "";
    position: absolute;
    top: -20%; left: -60%;
    width: 220%; height: 140%;
    /* banda diagonal con fade */
    background: linear-gradient(
      60deg,
      rgba(255,255,255,0) 35%,
      rgba(255,255,255,0.18) 50%,
      rgba(255,255,255,0) 65%
    );
    transform: translateX(-30%);
    animation: sweep 12s linear infinite;
    will-change: transform;
  }
  @keyframes sweep {
    to { transform: translateX(30%); }
  }

  /* --- Bokeh suave (::after) --- */
  .hero-effects::after {
    content: "";
    position: absolute;
    inset: -10% -10%;
    background:
      radial-gradient(70px 70px at 20% 30%, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%),
      radial-gradient(90px 90px at 85% 25%, rgba(56,180,213,0.10), rgba(56,180,213,0) 60%),
      radial-gradient(80px 80px at 55% 80%, rgba(251,180,20,0.08), rgba(251,180,20,0) 60%);
    background-repeat: no-repeat;
    background-position: 20% 30%, 85% 25%, 55% 80%;
    animation: bokehDrift 26s ease-in-out infinite alternate;
  }
  @keyframes bokehDrift {
    0%   { background-position: 20% 30%, 85% 25%, 55% 80%; }
    100% { background-position: 25% 35%, 80% 30%, 50% 75%; }
  }

  /* Si querés que el “Ken Burns” del .hero-bg siga activo, no toques nada.
     Si preferís SOLO estos efectos, podés quitar la animación del .hero-bg. */
}

/* Accesibilidad: respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hero-effects::before,
  .hero-effects::after,
  .hero-content,

}