/* Reset básico */
@font-face {
    font-family: 'Coolvetica';
    src: url('Recursos/fuentes/COOLVETICA_RG.OTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hanson';
    src: url('Recursos/fuentes/HANSON-BOLD.TTF') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'poppin';
    src: url('Recursos/fuentes/Poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Estilos generales */
  
.section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden; /* Oculta el exceso del video o imagen */
  }

#section1 {
    font-family: 'Coolvetica', sans-serif;
    font-size: 30px;
    text-transform: uppercase;
    line-height: 0.8;
}


#section2 {
    background-color: black; /* Fondo negro */
    min-height: 8vh; /* Disminuye la altura a la mitad de la pantalla */
  }
  
  /* Video de fondo */
.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
  
  /* Imagen de fondo */
.image-background {
    background-image: url('Recursos/fondo4.png');
    background-size: cover;
    background-position: center;
  }
  
  /* Adaptabilidad */


/* Animación para mover los textos desde la derecha */
@keyframes slideInFromRight {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* Animación para mover los textos desde la izquierda */
  @keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
/* Estilos generales para los textos */
.texto1, .texto2, .texto3, .texto4 {
  position: absolute;
  color: white;
  z-index: 2;
  text-align: left;
  transform: scaleY(1.6); /* Mantén el escalado vertical */
  transition: transform 0.3s ease, color 0.3s ease; /* Añadimos tiempo de transición */
}

/* Posicionamiento de los textos */
.texto1 {
  animation: slideInFromRight 1s ease-out forwards;
  top: 15%;
  left: 60%;
}

.texto2 {
  animation: slideInFromLeft 1s ease-out forwards;
  top: 40%;
  right: 62%;
}

.texto3 {
  animation: slideInFromRight 1s ease-out forwards;
  bottom: 28%;
  left: 66%;
}

.texto4 {
  animation: slideInFromLeft 1s ease-out forwards;
  bottom: 25%;
  right: 58%;
}

/* Efecto al pasar el cursor sobre los textos */
.texto1:hover, .texto2:hover, .texto3:hover, .texto4:hover {
  transform: scale(1.5) scaleY(1.6); /* Aumentar el tamaño a 1.5x, manteniendo la escala Y */
  color: #FF69B4; /* Rosa neón */
}

.btn-registrarse23 {
  display: inline-block;
  padding: 20px 50px;
  font-family: 'Coolvetica', sans-serif;
  font-size: 35px;
  color: white;
  background-color: black;
  border-radius: 30px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Añadir la transición de transform */
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%); /* Esto asegura el centrado */
  z-index: 3;
}
  
/* Estilo normal del botón */
.btn-registrarse {
  display: inline-block;
  padding: 20px 50px;
  font-family: 'poppin', sans-serif;
  font-size: 25px;
  color: white;
  background-color: black;
  border-radius: 30px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease, transform 0.3s ease; /* Añadir la transición de transform */
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  bottom: 48%;
  left: 69%;
  transform: translateX(-50%); /* Esto asegura el centrado */
  z-index: 3;
}

/* Efecto hover */
.btn-registrarse:hover {
  transform: scale(1.1) translateX(-50%); /* Añadir la escala y asegurarse de mantener el centrado */
  border: 0.5px solid #ff00ff; /* Borde rosa neón */
  box-shadow: 0 0 15px 5px rgba(255, 0, 255, 1.5); /* Resplandor rosa */
}


.line1 {
    display: block; /* Hace que 'congreso' esté en una línea separada */
    font-weight: normal; /* Aplica un peso más fuerte si lo deseas */
  }
  
.line2 {
    display: block; /* Hace que 'soy avivamiento' esté en una línea separada */
    font-weight: normal; /* Puedes ajustar el peso de la fuente */
    text-align: right;
}

.imagen-centro {
  width: 1300px; /* Cambia el valor según el tamaño deseado */
  height: auto; /* Mantiene la proporción original */
  transition: transform 0.3s ease, filter 0.3s ease; /* Efecto suave para las transformaciones */
  pointer-events: visiblePainted; /* Asegura que solo las áreas visibles respondan al hover */
}

.imagen-centro:hover {
  transform: scale(1.05); /* Aumenta ligeramente el tamaño */
  filter: drop-shadow(0 0 25px #ff00ff); /* Resplandor rosa neón */
}


  
.moving-wrapper {
  display: flex;
  overflow: hidden; /* Oculta el contenido que está fuera del contenedor */
  position: relative;
  width: 100%; /* Ocupa todo el ancho disponible */
  height: 50px; /* Ajusta la altura al tamaño del texto */
  align-items: center;
}

.moving-text {
  font-family: 'hanson', sans-serif;
  font-size: 25px;
  color: white; /* Color del texto */
  white-space: nowrap; /* Evita que el texto se divida en líneas */
  display: inline-block;
  text-transform: uppercase;
  animation: moving 20s linear infinite; /* Asigna la animación correctamente */
  margin-right: 15px; /* Espacio entre las dos oraciones */
}

/* Animación que mueve el texto de derecha a izquierda */
@keyframes moving {
  0% {
    transform: translateX(100%); /* Comienza fuera del borde derecho */
  }
  100% {
    transform: translateX(-100%); /* Termina fuera del borde izquierdo */
  }
}

#section3 {
    font-family: 'Coolvetica', sans-serif;
    font-size: 30px;
    text-transform: uppercase;
    line-height: 0.8;
    text-align: center;
}
  
.content13 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 5%; /* Espacio proporcional entre los elementos */
}

.item3 {
  position: relative;
  width: 40%; /* Ajusta el ancho de cada contenedor */
  text-align: center;
}

.text5, .text6 {
  font-size: 2rem; /* Usa unidades relativas para responsividad */
  color: #ffffff;
  margin-top: 1rem;
  transform: scaleY(1.2); /* Suaviza la transformación vertical */
}

.imagen-centro1, .imagen-centro2 {
  margin-top: 10%;
  width: 80%; /* Escalado relativo al contenedor */
  height: auto;
  z-index: 0;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.imagen-centro1:hover, .imagen-centro2:hover {
  transform: scale(1.1); /* Incrementa ligeramente el tamaño */
  filter: drop-shadow(0 0 15px #ff00ff); /* Sombra que sigue la forma de la imagen */
}


.line3, .line4 {
  display: block;
  font-weight: bold; /* Resalta el texto */
}

.gif-center {
  position: absolute;
  top: 17%; /* Centra verticalmente */
  left: 30%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta la posición exacta */
  z-index: 0; /* Asegúrate de que esté detrás de las imágenes */
}

.gif-bucle {
  width: 200%; /* Ajusta el tamaño del GIF si es necesario */
  height: auto;
}

#section4 {
    min-height: 20vh; /* Disminuye la altura a la mitad de la pantalla */
  }

.btn-serparte {
    display: inline-block;
    padding: 20px 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: bold; /* Esto hace que el texto sea en negrita */
    color: black;
    background-color: #10ee44;
    border-radius: 30px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease;
    margin-top: 20px; /* Ajusta este valor para moverlo hacia abajo */
    position: absolute; /* Mantiene la posición absoluta */
    top: 35%; /* Centrado vertical */
    left: 50%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Asegura que esté perfectamente centrado */
    z-index: 3; /* Asegura que esté por encima de otros elementos */
    text-transform: uppercase;
}

.btn-serparte:hover {
    border: 0.5px solid #ff00ff; /* Borde rosa neón */
    box-shadow: 0 0 15px 5px rgba(255, 0, 255, 1.5); /* Resplandor rosa */
}



/* Estilos para el logo */
.logo {
    position: absolute;
    top: 10px; /* Ajusta la distancia desde el borde superior */
    left: 10px; /* Ajusta la distancia desde el borde izquierdo */
    width: 100px; /* Ajusta el tamaño del logo */
    height: auto; /* Mantiene la proporción del logo */
    z-index: 10; /* Asegura que el logo quede por encima de otros elementos */
}

/* Menú hamburguesa */
.hamburger-menu {
  position: fixed;
  top: 20px;
  right: 20px;
  cursor: pointer;
  z-index: 100; /* Asegura que esté por encima de la barra lateral */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Barras del menú hamburguesa con borde redondeado */
.hamburger-menu .bar {
  width: 35px;            /* Ancho de cada barra */
  height: 5px;            /* Grosor de cada barra */
  background-color: #ffffff; /* Color de la barra */
  margin: 5px 0;
  border-radius: 10px;    /* Borde redondeado */
  transition: 0.4s;
}

/* Estado del menú abierto: transforma el icono en una X */
.hamburger-menu.active #bar1 {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu.active #bar2 {
  opacity: 0; /* Oculta la barra del medio */
}

.hamburger-menu.active #bar3 {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Barra de navegación lateral derecha con fondo de gradiente transparente */
.sidebar {
  font-family: 'poppin', sans-serif;
  position: fixed;
  top: 0;
  right: -250px; /* Oculta la barra fuera del borde derecho */
  width: 250px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)); /* Degradado de blanco semitransparente */
  backdrop-filter: blur(15px); /* Efecto de desenfoque más pronunciado */
  color: black;
  transition: 0.3s;
  padding-top: 60px;
  z-index: 99; /* Justo debajo del icono del menú hamburguesa */
  display: flex;
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
}

/* Lista de elementos (botones) */
.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%; /* Hace que ocupe todo el ancho disponible */
  display: flex;
  flex-direction: column; /* Organiza los botones en una columna */
  align-items: center; /* Centra los botones horizontalmente */
}

/* Estilo de cada botón */
.sidebar ul li {
  margin: 15px 0; /* Espaciado entre los botones */
}

/* Estilo de los enlaces de los botones */
.sidebar ul li a {
  color: #f0f0f0;
  text-decoration: none;
  font-size: 20px;
  padding: 10px 20px;
  border-radius: 10px; /* Bordes redondeados */
  background: linear-gradient(45deg, #ff00ff, #00ffff); /* Degradado ciberpunk */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Sombra para efecto de profundidad */
  transition: 0.3s ease; /* Transición para efectos de hover */
  display: inline-block; /* Hace que el enlace se comporte como un bloque */
}

.sidebar ul li a:hover {
  transform: scale(1.1); /* Efecto de ampliación al pasar el ratón */
  background: linear-gradient(45deg, #ff00ff, #ff7700); /* Cambio de color en hover */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); /* Sombra más intensa */
  color: #fff; /* Cambiar color del texto cuando se pasa el ratón */
}

/* Cuando el menú está activo */
.sidebar.active {
  right: 0; /* Muestra la barra de navegación desde el lado derecho */
}

@media (max-width: 768px) {
  .imagen-centro {
    width: 700px; /* Cambia el valor según el tamaño deseado */
    height: auto; /* Mantiene la proporción original */
    transition: all 0.3s ease; /* Para un efecto suave */
  }

  #section1 {
    font-size: 20px;
  }

  .texto1 {
    animation: slideInFromRight 1s ease-out forwards;
    top: 35%;
    left: 60%;
  }
  
  .texto2 {
    animation: slideInFromLeft 1s ease-out forwards;
    top: 45%;
    right: 72%;
  }
  
  .texto3 {
    animation: slideInFromRight 1s ease-out forwards;
    bottom: 28%;
    left: 66%;
  }
  
  .texto4 {
    animation: slideInFromLeft 1s ease-out forwards;
    bottom: 25%;
    right: 58%;
  }

  .btn-registrarse {
    font-size: 18px; /* Reduce el tamaño de la fuente */
    border-radius: 15px; /* Ajusta el borde redondeado */
    padding: 10px 30px; /* Reduce el relleno (espacio interno) */
    bottom: 13%;
    left: 50%;
  }
  
  .imagen-centro1, .imagen-centro2 {
    margin-top: 450%;
    width: 100%; /* Escalado relativo al contenedor */
    height: auto;
    z-index: 0;
    vertical-align: middle; /* Alineación vertical */
    transition: transform 0.3s ease, filter 0.3s ease;
  }

  .text5, .text6 {
    font-size: 1.5rem; /* Usa unidades relativas para responsividad */
    color: #ffffff;
    margin-top: 150rem;
    transform: scaleY(1.2); /* Suaviza la transformación vertical */
  }

  .gif-center {
    position: absolute;
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%) scale(5); /* Escala sin mover el centro */
    z-index: 0; /* Controla la profundidad */
    transition: transform 0.3s ease; /* Suaviza el cambio de tamaño si es dinámico */
  }

 .gif-bucle {
    width: 100%; /* Mantén el tamaño relativo del GIF */
    height: auto; /* Preserva las proporciones */
  }


  
}