.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url('../../img/hero-placeholder.jpg') center/cover no-repeat;
  z-index: -1;
  animation: zoomBackground 8s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 80px;
  width: 100%;
  background: linear-gradient(to bottom, transparent, #121212);
  z-index: 0;
}

@keyframes zoomBackground {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.hero-content {
  text-align: center;
  z-index: 1;
}

.logo-hero {
max-
opacity: 0;
  transition: opacity .5s ease, transform .5s ease;

  /* Tamaño grande seguro y responsive */
max-
height: auto;

  width: clamp(180px, 28vw, 380px);
  max-width: 90vw;
  height: auto;
}

.logo-hero.visible {
  opacity: 1;
}

.logo-hero:hover { transform: translateY(-2px) scale(1.03); transition: transform .25s ease, opacity .25s ease; }


/* Fondo dinámico con fade */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

/* Asegurar que el logo esté por encima del fondo */
.hero /* Oscurecimiento superpuesto dentro del hero-fade */
.hero-fade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* Oscurecimiento leve */
  z-index: 1;
}

/* ===== Hero: sincronizar el logo con el final del Splash ===== */
.logo-hero {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
  will-change: opacity, transform;
}

/* Mientras el Splash está activo, el logo del hero permanece oculto */
body.is-splashing .logo-hero {
  opacity: 0;
  transform: translateY(8px);
}

/* Cuando el Splash termina, habilitamos aparición suave del logo del hero */


/* ===== Hero logo: control de aparición vía clase .show ===== */
.logo-hero {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
  will-change: opacity, transform;
}

.logo-hero.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Hover suave para el logo del Hero */
.logo-hero.show:hover {
  transform: scale(1.05);
  transition: transform .25s ease, opacity .25s ease;
}


/* Viewports bajos: reducir un poco para evitar solapamientos */
@media (max-height: 600px) {
  .logo-hero {
    width: clamp(160px, 22vw, 320px);
  }
}

/* Desktop: doble de grande pero sin romper layout */
@media (min-width: 1024px) {
  .logo-hero {
    width: clamp(360px, 56vw, 760px); /* x2 de los valores base */
    max-width: 90vw;
  }
}

/* Viewports bajos: evitar desbordes (protección) */
@media (max-height: 600px) {
  .logo-hero {
    width: clamp(200px, 24vw, 480px);
  }
}