.intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: fadeOutIntro 1s ease forwards;
    animation-delay: 3.5s;
}

/* Habilitar para Carga con Video */
/* .intro-contenido h1,
h2 {
    color: #f2fffe;
    font-size: 3rem;
    text-align: center;
    position: relative;
    animation: zoomIn 1.5s ease;
    text-shadow: 0 0 20px rgb(214, 254, 255), 0 0 40px rgb(180, 248, 255);
    z-index: 10;
}

 .intro-contenido video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
} FIN*/

/* Pantalla completa CHARGE ANIMATION*/
/* Pantalla completa blanca */
.intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Contenedor centrado */
.intro-contenido {
  text-align: center;
}

/* Logo con efecto de entrada */
.intro-logo {
  width: 180px;
  opacity: 0;
  transform: scale(0.9);
  animation: logoFadeIn 2s ease-out forwards;
  position: relative;
  z-index: 1;
}

/* Efecto de entrada elegante */
@keyframes logoFadeIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Contenedor del brillo */
.logo-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* Brillo que cruza el logo */
.shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: shineMove 2.5s ease-in-out 1.2s forwards;
}

/* Movimiento del brillo */
@keyframes shineMove {
  from {
    left: -100%;
  }
  to {
    left: 100%;
  }
}


@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOutIntro {
    to {
        opacity: 0;
        visibility: hidden;
    }
}


canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.mensaje {
    position: absolute;
    top: 79%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    animation: fadeIn 2s ease forwards, glow 2s ease-in-out infinite alternate;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes glow {
    from {
        text-shadow: 0 0 10px rgb(174, 255, 0), 0 0 20px #0ff;
    }

    to {
        text-shadow: 0 0 20px #0ff, 0 0 40px #f0f;
    }
}