/* ====== ESCENA DE PRESENTACIÓN ====== */
.loader-scene.loader-activo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(-45deg, #ba0672, #021138, #00081b, #0953c8, #c82175);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite,
             fadeOutAll 1.5s ease forwards;
  animation-delay: 0s, 4s;
  z-index: 9999;
}

/* Oculta el contenido institucional solo si el loader está activo */
body.loader-activo header,
body.loader-activo nav,
body.loader-activo main {
  display: none !important;
}

/* Animaciones del loader */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeOutAll {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Logo */
.logo {
  width: 180px;
  height: 180px;
  margin-bottom: 2rem;
  animation: spinAndBounce 2.8s ease forwards;
}

@keyframes spinAndBounce {
  0%   { transform: rotateY(0deg) scale(1); }
  70%  { transform: rotateY(720deg) scale(1.15); }
  85%  { transform: rotateY(750deg) scale(0.95); }
  100% { transform: rotateY(720deg) scale(1); }
}

/* Frase */
.phrase {
  font-size: 4.5vmin;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 3px 3px 8px rgba(0, 50, 150, 0.8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.phrase span {
  opacity: 0;
  transform: translateY(20px);
  display: inline-block;
  animation: fadeInWord 0.7s forwards;
}

@keyframes fadeInWord {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
  .logo { width: 140px; height: 140px; margin-bottom: 1.5rem; }
  .phrase { font-size: 5vmin; gap: 8px; }
}

@media (max-width: 480px) {
  .logo { width: 110px; height: 110px; margin-bottom: 1rem; }
  .phrase { font-size: 6vmin; gap: 6px; }
}