@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;
  font-family: "Saira Stencil One", sans-serif;
}

/* 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;
  }
}


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

   
}

#lista1 {

   

    line-height: 75px; /* distancia de los elementos verticales */
   
    text-align:center; /* centrar lista */
  box-shadow: 0 0 10px rgba(149, 228, 254, 0.8) inset;
      font-weight: bold;
        font-family: Franklin Gothic Medium;
}
a {
   color:rgb(241, 241, 249); 
   
}
.put{
    text-align: center;
}




.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 */
}
header{

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

}
main{
    text-align:left 30%;
    color:white;
    text-decoration:none;
 font-family: "Saira Stencil One", sans-serif;
 
}
article{
    margin-top: 2%;
    background-color: rgb(5, 5, 5);
 border-radius: 40px;
 opacity: 0.9;
 image-orientation: from-image;
width: 80%;
    margin-left: auto;
    margin-right: auto;
 }
 .articulosuperior{
box-shadow: 0 0 10px rgba(149, 228, 254, 0.8) inset;
 }
h2
{
text-align: center;
font-size: 50px !important;
text-decoration: underline; /* Subrayar los títulos */
font-family: "Saira Stencil One", sans-serif;
}

ul
{
   background-color: rgba(2, 23, 44, 0.9);
    border-radius: 40px;
     width: 83%;
}
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;
    }
    h3
{
text-align: center;
}
p{
    text-align: center;
}
/* 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: white;
  }
  
  /* Efecto de zoom y cambio de color al pasar el cursor sobre el enlace */
  #lista1 li a:hover {
    transform: scale(1.1); /* Zoom al 110% del tamaño original */
    color: #8bc8e9; /* Cambiamos el color a verde claro */
  }
  
  /*estilos para los carruceles */
  .carousel-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.carousel-main {
    width: 965px; /* Ajusta el ancho según tus necesidades */
    height:400px; /* Ajusta la altura según tus necesidades */
    overflow: hidden;
    position: relative;
}

.carousel-slide {
    width: 100%;
    border-radius: 3%;
    position: absolute;
    display: none;
}

.carousel-slide img {
  width: 70%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 0 40px rgb(24, 181, 95);
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* Añade transición suave también para el zoom */
}

.carousel-slide img:hover {
  box-shadow: 0 0 50px rgb(24, 181, 95); /* Aumenta el box-shadow en hover */
  transform: scale(1.05); /* Aplica el zoom con un 10% de aumento */

}



.thumbnails-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumbnail {
    margin:  5px; /* Espacio entre miniaturas */
    cursor: pointer;
}

.thumbnail img {
  width: 40px; /* Tamaño de las miniaturas */
  height: 40px;

  transition: transform 0.5s ease; /* Transición suave para el zoom */
}


/*zoom a carruzel*/

.carousel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.carousel-main {
    position: relative;
}

.carousel-slide {
    
    overflow: hidden;
    position: absolute;
    display: none;
    transition: transform 0.3s ease, scale 0.3s ease; /* Transiciones suaves para el zoom */
}



.carousel-slide img {
   
    object-fit: cover;
}

/* Resto del CSS... */




    /* Agregar este estilo CSS para el borde amarillo */
    .thumbnail.active-carousel{
    
      border: 2px solid rgb(69, 255, 93);
      text-align: center;
      border-radius: 5px;
    }
    /* Estilos para el segundo carrusel */
   .thumbnail-1.active-carousel-1{
    border: 2px solid rgb(69, 255, 93);
        text-align: center;
        border-radius: 10px;
       
      }
    
    
      .carousel-container-1 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    
      .carousel-main-1 {
        width: 1112px; /* Ajusta el ancho según tus necesidades */
        height: 420px; /* Ajusta la altura según tus necesidades */
        overflow: hidden;
        position: relative;
      }
    
      .carousel-slide-1 {
        
        border-radius: 3%;
        position: absolute;
        display: none;
      }
      
      @media only screen and (max-width: 950px) {
    .carousel-slide-1 {
        width: 100%;
        height: 100%;
       /* Puedes ajustar la altura según tus necesidades */
        margin-left: 0;
    }

}
 
   @media only screen and (max-width: 950px) {
       .carousel-slide-2 {
           width: 100%;
           height: 100%;
           /* Puedes ajustar la altura según tus necesidades */
           margin-left: 0;
       }

   }
      .carousel-slide-1 img {
        width: 97%;
        height: 50%;
        object-fit: cover;
        box-shadow: 0 0 30px rgb(18, 146, 76);
        transition: transform 0.5s ease; 
      }
      .carousel-slide-1 img:hover {
        box-shadow: 0 0 50px rgb(24, 181, 95); /* Aumenta el box-shadow en hover */
        transform: scale(1.05); /* Aplica el zoom con un 10% de aumento */
      
      }
      .thumbnails-container-1 {
        display: flex;
        justify-content: center;
        align-items: center;
       
      }
    
      .thumbnail-1 {
        margin: 0 5px; /* Espacio entre miniaturas */
        cursor: pointer;
      }
    
      .thumbnail-1 img {
        width: 40px; /* Tamaño de las miniaturas */
        height: 40px;
        object-fit: cover;

      }
    
 
    
       /* Estilos para el tercer  carrusel */
    .thumbnail-2.active-carousel-2 {
        border: 2px solid rgb(69, 255, 93);
        border-radius: 10px;
      }
      .carousel-container-2 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    
      .carousel-main-2 {
        width: 965px; /* Ajusta el ancho según tus necesidades */
        height: 550px; /* Ajusta la altura según tus necesidades */
        overflow: hidden;
        position: relative;
      }
    
      .carousel-slide-2 {
        width: 100%;
        height: 100%;
        position: absolute;
        display: none;
      }
    
      .carousel-slide-2 img {
        width: 80%;
      height: auto;
        object-fit: cover;
      }
    
      .thumbnails-container-2 {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    
      .thumbnail-2 {
        margin: 0 5px; /* Espacio entre miniaturas */
        cursor: pointer;
      }
    
      .thumbnail-2 img {
        width: 50px; /* Tamaño de las miniaturas */
        height: 50px;
        object-fit: cover;
      }
    
      /* Zoom a carrusel */
    
      .carousel-container-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    
      .carousel-main-2 {
        position: relative;
      }
    
      .carousel-slide-2 {
        overflow: hidden;
        position: absolute;
        display: none;
        transition: transform 0.3s ease, scale 0.3s ease; /* Transiciones suaves para el zoom */
      }
    
      .carousel-slide-2 img {
        object-fit: cover;
      }


        /* Estilos para el Cuarto carrucel*/
    .thumbnail-3.active-carousel-3 {
        border: 2px solid yellow;
      }
      .carousel-container-3 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    
      .carousel-main-3 {
        width: 965px; /* Ajusta el ancho según tus necesidades */
        height: 550px; /* Ajusta la altura según tus necesidades */
        overflow: hidden;
        position: relative;
      }
    
      .carousel-slide-3 {
        width: 100%;
        height: 100%;
        position: absolute;
        display: none;
      }
    
      .carousel-slide-3 img {
        width: 60%;
        height: auto;
         object-fit: cover;
       box-shadow: 0 0 30px rgb(24, 181, 95);
      }
    
      .thumbnails-container-3 {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    
      .thumbnail-3 {
        margin: 0 5px; /* Espacio entre miniaturas */
        cursor: pointer;
      }
    
      .thumbnail-3 img {
        width: 40px; /* Tamaño de las miniaturas */
        height: 40px;
        object-fit: cover;
      }
    
      /* Zoom a carrusel */
    
      .carousel-container-3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    
      .carousel-main-3 {
        position: relative;
      }
    
      .carousel-slide-3 {
        overflow: hidden;
        position: absolute;
        display: none;
        transition: transform 0.3s ease, scale 0.3s ease; /* Transiciones suaves para el zoom */
      }
    
      .carousel-slide-3 img {
        object-fit: cover;
      }

      /* estilso quinto carrucel */
      .thumbnail-4.active-carousel-4{
        border: 2px solid rgb(42, 255, 38);
        text-align: center;
        border-radius: 10px;
      }
      .carousel-container-4 {
        display: flex;
        justify-content: center; /* Centra horizontalmente */
        align-items: center; /* Centra verticalmente */
    }
    
    .carousel-main-4 {
        width: auto; /* Ancho del carrusel */
        height: auto; /* Alto del carrusel */
        overflow: hidden;
    }
    
    .carousel-slide-4 {
        position: relative;
    }
    
    .carousel-slide-4 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
       box-shadow: 0 0 30px rgb(24, 181, 95);
    }
      
      @media only screen and (max-width: 950px) {
    .carousel-slide-4 {
        width: 100%;
        height: 100%;
       /* Puedes ajustar la altura según tus necesidades */
        margin-left: 50%;
    }


}

      .carousel-slide-4 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    
      .thumbnails-container-4 {
        display: flex;
        justify-content: center;
        align-items: center;
       
      }
    
      .thumbnail-4 {
        margin: 5px; /* Espacio entre miniaturas */
        cursor: pointer;
        
      }
    
      .thumbnail-4 img {
        width: 50px; /* Tamaño de las miniaturas */
        height: 50px;
        object-fit: cover;
      }
    @media (max-width: 768px) {
    .carousel-slide img {
    width: 70%;
    height: 50%;
    object-fit: cover;
  
  
}
.carousel-slide-2 img {
  width: 50%;
height: auto;
  object-fit: cover;
}
#titulo1, #cursor {
  font-size:90%;
}
}
#titulo1, #cursor {
   font-size: 250%;
  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; }
}
 .imagen-con-sombra {
        border-radius: 40%;
       align-items: center;
        box-shadow: 0 0 20px rgb(20, 146, 77);
        transition: transform 0.5s ease;
    }

    .imagen-con-sombra:hover{
transform: scale(1.3);

  box-shadow: 0 0 20px rgb(35, 252, 133);

    }
  /* Animacion de flechas */

    @keyframes zoom {
      0% {
          transform: scale(1);
      }
      50% {
          transform: scale(1.2);
      }
      100% {
          transform: scale(1);
      }
  }

  /* Aplicar la animación a la imagen */
  .zoom-animation {
      height: 30px;
      margin-left: 20px;
      animation: zoom 1s infinite;
  }
  .zoom-animation-1 {
    height: 30px;
    margin-left: 20px;
    animation: zoom 1s infinite;
}

audio {
  display: none;
  }
    .thumbnail-4.active-carousel-4{
        border: 2px solid rgb(42, 255, 38);
        text-align: center;
        border-radius: 10px;
      }
      .carousel-container-5 {
        display: flex;
        justify-content: center; /* Centra horizontalmente */
        align-items: center; /* Centra verticalmente */
    }
    
    .carousel-main-5 {
        width: auto; /* Ancho del carrusel */
        height: auto; /* Alto del carrusel */
        overflow: hidden;
    }
    
    .carousel-slide-5 {
        position: relative;
    }
    
    .carousel-slide-5 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
       box-shadow: 0 0 30px rgb(24, 181, 95);
    }
      
      @media only screen and (max-width: 950px) {
    .carousel-slide-5 {
        width: 100%;
        height: 100%;
       /* Puedes ajustar la altura según tus necesidades */
        margin-left: 50%;
    }


}

      .carousel-slide-5 img {
        width: 60%;
        height: 60%;
        object-fit: cover;
      }
    
      .thumbnails-container-5 {
        display: flex;
        justify-content: center;
        align-items: center;
       
      }
    
      .thumbnail-5 {
        margin: 5px; /* Espacio entre miniaturas */
        cursor: pointer;
        
      }
    
      .thumbnail-5 img {
        width: 50px; /* Tamaño de las miniaturas */
        height: 50px;
        object-fit: cover;
      }