/* ==========================
   ACQUIMICA - Estilos Globales
   ========================== */

/* --- Botones --- */
.btn-anim {
  transition: all 0.3s ease-in-out;
}
.btn-anim:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* --- Hero personalizado --- */
.hero-bg {
  background: url('../img/background-acquimica.jpg') center/cover no-repeat;
}

/* --- Menú móvil: animación tipo explosión --- */
.menu-explode-enter {
  animation: explode 0.4s ease-out forwards;
}

@keyframes explode {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- Utilidades --- */
.rotate-90 {
  transform: rotate(90deg);
  transition: transform 0.3s ease-in-out;
}

[x-cloak] {
  display: none;
}

/* --- Responsive Nav Menu --- */
@media (max-width: 768px) {
  nav .mobile-menu {
    transition: all 0.4s ease-in-out;
    transform-origin: top center;
  }
}

/* Animación de entrada explosiva */
.menu-explode-enter {
  animation: explode 0.4s ease-out forwards;
}

@keyframes explode {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}