#lista1 li {  /* llamo al elemento señalado*/
  /* quita estilos ya predeterminados*/
   margin: 20px; /* distancia elementos de la lista*/
    display:inline; /* de vertical a orizontal*/
  }
   

 #lista1 {
  
   text-align: center;
   font-family: 'Franklin Gothic Medium';
   display: flex;
   /* Usar flexbox */
   justify-content: center;
   /* Centrar horizontalmente */
   padding: 0;
   /* Eliminar el relleno */
   list-style: none;
   /* Eliminar los puntos de la lista */
    font-weight: bold;
    padding: -4px;
    line-height: 40px;
 }
h2, p,img,h4,h1{
  animation: fadeIn 2s ease-in-out;
  
}
 
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

h1 {
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
  position: relative;
  color: #0ff; /* Color neón */
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif; /* Fuente futurista */
  text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #00f, 0 0 40px #00f;
  animation: neonGlow 1.5s infinite alternate ease-in-out;
}

/* Efecto de brillo animado */
@keyframes neonGlow {
  0% {
    text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #00f, 0 0 40px #00f;
  }
  100% {
    text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #00f, 0 0 50px #00f;
  }
}



 a {
   color: rgb(241, 241, 249);
  
   text-decoration: none;
   /* Quitar subrayado predeterminado */
 }
nav {
  list-style: none;
  height: 60px;
  line-height: 50px;


  }


header{
padding: 0.5%;
  background-color: rgba(45, 45, 75, 0.9); 
  border-radius: 60px;
  margin-top: 20px;
  margin-bottom: 20px;
box-shadow: 0 0 10px rgba(149, 228, 254, 0.8);
width: 90%;
}
#titulo1{
text-align: center;
  color: rgb(255, 255, 255);
font-family: "Saira Stencil One", sans-serif;
 font-size:25;
}

main{
  text-align:left 30%;
  color:white;
  text-decoration:none;
  font-family:Arial;

}
article{
  margin-top: 2%;
background-color: rgb(5, 5, 5);
border-radius: 40px;
opacity: 0.9;
image-orientation: from-image;
box-shadow: 0 0 10px rgba(149, 228, 255, 0.651) inset;
}
p {
  margin-left: 5%;
  font-family: 'Franklin Gothic Medium', sans-serif; /* Añade una fuente de respaldo */
  margin-right: 5px;
  font-weight: 600;
  font-size: 1.2em; /* Aumenta el tamaño de la letra un 10% */
}
h2
{
text-align: center;
font-weight: bold; /* Poner todos los títulos y párrafos en negrita */
text-decoration: underline; /* Subrayar los títulos */
font-weight: 800 !important;
}
img{
  display:block;
  margin:auto;
  line-height: 10px;
  border-radius: 40%;
  box-shadow: 0 0 30px rgb(14, 122, 63);
  transition: transform 0.5s ease;
}
img:hover{
  transform: scale(1.1);
  
    box-shadow: 0 0 20px rgb(35, 252, 133);
  
      }
ul
{
  background-color: rgba(2, 23, 44, 0.9);
  border-radius: 100px;
  box-shadow: 0 0 10px rgba(149, 228, 254, 0.95) inset;
   width: 85%;
   
}
footer {
  background-color: black;
  
  position:fixed;
  left:0px;
  bottom:0px;
  height: 35px;
  width:100%;
  color: white;
  opacity: 0.9;
  box-shadow: 0 0 10px rgba(149, 228, 254, 0.8) inset;
}

.alinear-izquierda{
  float: right;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  margin-right: 35px;
  transition: transform 1.0s ease; /* Suaviza la rotación */

  }
  .alinear-izquierda:hover {
    transform: rotate(-360deg); /* Rotación completa */
}
/* Estilo para los enlaces en el menú */
#lista1 li a {
  text-decoration: none; /* Quitamos el subrayado predeterminado */
  transition: transform 0.2s, color 0.2s; /* Transición suave para el zoom y el color */
  display: inline-block; /* Para que el transform funcione correctamente */
  color: rgb(241, 241, 249);
}

/* Efecto de zoom y cambio de color al pasar el cursor sobre el enlace */

/* Estilo para el efecto de zoom en los enlaces */
.zoomable {
  transition: transform 0.2s, color 0.2s; /* Transición suave para el efecto de zoom y color */
  display: inline-block; /* Hace que el enlace sea un bloque en línea */
  color: #ffffff; /* Color de texto predeterminado (negro) */
}

/* Efecto de zoom y cambio de color al pasar el cursor sobre los enlaces */
.zoomable:hover {
  transform: scale(1.1); /* Zoom al 110% del tamaño original al pasar el cursor */
  color: #8bc8e9; /* Cambiamos el color a azul (#0074D9) al pasar el cursor */
}


h3{
  margin-left: 40px;
 font-family: 'Franklin Gothic Medium';
font-weight: bold; /* Poner todos los títulos y párrafos en negrita */
font-size: large !important;
}
h4,h5{
  margin-left: 40px;
 font-family: 'Franklin Gothic Medium';
font-weight: bold; /* Poner todos los títulos y párrafos en negrita */

}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

h2, p,img,h4{
  animation: fadeIn 3s ease-in-out;

}
#favicon {
  border-radius: 35%;
}
.carousel-item.active-carousel {
  border: 2px solid yellow;
}
#lista1 li a:hover {
    transform: scale(1.1); /* Zoom al 110% del tamaño original */
    color: #8bc8e9; /* Cambiamos el color a verde claro */
  }
  #titulo1, #cursor {
    font-size: 40px;
    font-weight: bold;
    display: inline;
    font-family: "Saira Stencil One", sans-serif ;
}
#cursor {
    color: green;
    animation: blink 1s step-end infinite;
}
@keyframes blink {
    from, to { color: transparent }
    50% { color: green; }
}
@keyframes glowing {
  0% {box-shadow: 0 0 5px #93e4fe, 0 0 10px #93e4fe, 0 0 15px #93e4fe, 0 0 20px #93e4fe;}
  50% {box-shadow: 0 0 10px #93e4fe, 0 0 20px #93e4fe, 0 0 30px #93e4fe, 0 0 40px #93e4fe;}
  100% {box-shadow: 0 0 5px #93e4fe, 0 0 10px #93e4fe, 0 0 15px #93e4fe, 0 0 20px #93e4fe;}
}

.glowing-image {
  width: 150px;
  height: 200px;
  animation: glowing 3s infinite;
}
.ori {
  position: relative; /* Asegura que z-index funcione */
  z-index: 1; /* Valor inicial */
  transition: transform 0.5s ease; /* Transición suave */
}

.ori:hover {
  transform: scale(1.4); /* Escala el elemento al 150% */
  z-index: 9999; /* Coloca el elemento por encima de todos los demás */
}


.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}

.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover; /* Asegura que el video cubra toda el área */
}

.accordion {
  cursor: pointer;
  background-color: #00027541;
  color: white;
  padding: 10px;
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40PX;
}

.accordion.active .arrow {
  transform: rotate(180deg);
}

.panel {
  padding: 0 10px;
  display: none;
  overflow: hidden;
  background-color: #03030367;
  color: white;
  box-shadow: 0 0 10px rgba(149, 228, 255, 0.651) inset;
  border-radius: 40PX;
}

.arrow {
  transition: transform 0.3s;
  margin-left: 10px;
}
.rotating-logo {
    animation: rotate 12s linear infinite; /* Duración de 5 segundos */
}

/* Define la animación */
@keyframes rotate {
    from {
        transform: rotate(0deg); /* Comienza en 0 grados */
    }
    to {
        transform: rotate(-360deg); /* Rota 360 grados en sentido contrario a las agujas del reloj */
    }
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Evita el scroll horizontal */
}

audio {
  display: none;
}