/* Reset de márgenes y rellenos para todos los elementos */
* {
  padding: 0;
  margin: 0;
}

/* Estilos generales del cuerpo del documento */
body {
  align-items: center;
  justify-content: center;
  padding: 0px;
  background-image:url(img/xd.png);
  cursor: url("img/mouse.png"), auto;
}

a {
  text-decoration: none;
}

/* Estilos para la clase .img1 */
.img1 {
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
  width: 70px;
}

/* Estilos para las listas no ordenadas (ul) */
ul {
  list-style: none;
  background: rgb(27, 27, 27);
  position: fixed;
  width: 100%;
  z-index: 999;
}

/* Estilos para los elementos de la lista (li) dentro de ul */
ul li {
  display: inline-block;
  position: relative;
  top: -20px;
}

/* Estilos para los enlaces (a) dentro de los elementos li */
ul li a {
  display: block;
  padding: 20px 25px;
  color: #FFF;
  text-decoration: none;
  text-align: center;
  font-size: 20px;
  margin-bottom: -10px;
}

/* Estilos para los elementos de la lista (li) dentro de ul.menudesp */
ul li ul.menudesp li {
  display: block;
  top: -10px;
}

/* Estilos para el menú desplegable ul.menudesp dentro de los elementos li */
ul > li > ul.menudesp {
  width: 100%;
  background: rgb(26, 26, 26);
  position: absolute;
  display: none;
}

/* Estilos para el enlace (a) cuando se coloca el ratón encima */
ul li a:hover {
  background: rgb(20, 20, 20);
  color: red;
  border-radius: 25px;
}

/* Estilos para mostrar el menú desplegable ul.menudesp cuando se coloca el ratón encima */
ul li:hover ul.menudesp {
  position: absolute;
  display: block;
  top: 77px;
}

/* Estilos para la clase .equipo1 */
.equipo1 {
  background-color: #d8d8d8;
  width: 300px;
  height: 150px;
  border-radius: 10px;
  padding: 10px;
  color: #000000;
}

/* Estilo de la transición */
.seccion {
  transition: background-color 0.5s ease;
  height: 100vh;
  display: flex;
  font-size: 24px;
  padding: 0px;
  position: relative; 
}

/* Espacio entre apartados*/
.space2{
  height: 20px;
  background-color: #2c2b2b;
}


/* Estilo específico de la sección 1 */
#seccion1 {
  background-color: #ffffff;
}

/* Estilo específico de la sección 2 */
#seccion2 {
  background-image: url(./img/cielo-morado.jpg);
  height: 1200px;
  background-attachment: fixed;
}

#seccion3 {
  background-image: url(./img/fondo-rojo.jpg);
  height: 100%;
  background-attachment: fixed;
  position: relative;
  height: 1250px;
}

#seccion4 {
  background-color: #2c2b2b;
  height: 250px;
}


.imagen-texto-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.imagen-fondo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.texto .hola {
  position: absolute;
  top: 10%;
  left: 50%;
  margin-top: 17%;
  font-size: 120px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  transform: translateX(-50%);
  z-index: 1;
  color: #b6b6b6;
  text-shadow: 
      -2px -2px 0 #000000,
      2px -2px 0 #000000,
      2px 2px 0 #000000,
      -2px 2px 0 #000000
}

.texto .hola2 {
  position: absolute;
  top: 10%;
  left: 50%;
  margin-top: 17%;
  font-size: 120px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  transform: translateX(-50%);
  z-index: 1;
  color: rgb(20, 45, 126);
  animation: shift 3s ease-in-out infinite;
}

@keyframes shift {
  0%, 100% {
      clip-path: polygon(0% 27%, 10% 48%, 33% 54%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
  }
  50% {
      clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
  }
}

.texto1 .text1 {
  position: absolute;
  top: 10%;
  left: 50%;
  margin-top: 14%;
  font-size: 80px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  transform: translateX(-50%);
  z-index: 1;
  color: #b6b6b6;
  text-shadow: 
      -3px -3px 0 #000000,
      3px -3px 0 #000000,
      3px 3px 0 #000000,
      -3px 3px 0 #000000
}

.texto1 .text2 {
  position: absolute;
  top: 10%;
  left: 50%;
  margin-top: 14%;
  font-size: 80px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  transform: translateX(-50%);
  z-index: 1;
  color: #6f00ff;
  animation: shift 3s ease-in-out infinite;
}

@keyframes shift {
  0%, 100% {
      clip-path: polygon(0% 27%, 10% 48%, 33% 54%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
  }
  50% {
      clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
  }
}


.nosotros1 {
  border: 3px solid rgb(0, 0, 0);
  text-align: left;
  color: rgb(0, 0, 0);
  background-color: #bbbbbb;
  display: inline-block;
  margin-top: 8%;
  max-height: 260px; /* Ancho máximo del rectángulo, ajusta según tus necesidades */
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px; /* Ajusta el valor según la curvatura deseada de los bordes */
  top: -80px;
  position: absolute;
  right: 350px;
  left: 350px;
}

.nosotros1 p {
  margin-left: 15px;
  margin-top: 35px;
  text-align: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.nosotros1 h3 {
  margin-left: 15px;
  text-align: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 40px;
}

.nosotros2 {
  border: 3px solid rgb(0, 0, 0);
  text-align: left;
  color: rgb(0, 0, 0);
  background-color: #bbbbbb;
  display: inline-block;
  margin-top: 8%;
  max-height: 260px; /* Ancho máximo del rectángulo, ajusta según tus necesidades */
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px; /* Ajusta el valor según la curvatura deseada de los bordes */
  top: 370px;
  position: absolute;
  right: 76%;
  left: 2%;
}



.nosotros2 p {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
  font-size: 20px;
}

.mi-boton1 {
  padding: 10px 20px; /* Espaciado interno (arriba y abajo, izquierda y derecha) */
  font-size: 16px; /* Tamaño del texto */
  background-color: #000000; /* Color de fondo */
  color: white; /* Color del texto */
  border: none; /* Quita el borde */
  border-radius: 15px; /* Borde redondeado */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  width: 150px; /* Ancho del botón */
  height: 50px; /* Alto del botón */
  margin-top: 820px;
  margin-left: 9%;
}

/* Estilo cuando se pasa el cursor sobre el botón */
.mi-boton1:hover {
  background-color: #818181;
}

.mi-boton2 {
  padding: 10px 20px; /* Espaciado interno (arriba y abajo, izquierda y derecha) */
  font-size: 16px; /* Tamaño del texto */
  background-color: #000000; /* Color de fondo */
  color: white; /* Color del texto */
  border: none; /* Quita el borde */
  border-radius: 15px; /* Borde redondeado */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  width: 150px; /* Ancho del botón */
  height: 50px; /* Alto del botón */
  margin-top: 820px;
  margin-left: 16%;
}

/* Estilo cuando se pasa el cursor sobre el botón */
.mi-boton2:hover {
  background-color: #818181;
}

.mi-boton3 {
  padding: 10px 20px; /* Espaciado interno (arriba y abajo, izquierda y derecha) */
  font-size: 16px; /* Tamaño del texto */
  background-color: #000000; /* Color de fondo */
  color: white; /* Color del texto */
  border: none; /* Quita el borde */
  border-radius: 15px; /* Borde redondeado */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  width: 150px; /* Ancho del botón */
  height: 50px; /* Alto del botón */
  margin-top: 820px;
  margin-left: 17%;
}

/* Estilo cuando se pasa el cursor sobre el botón */
.mi-boton3:hover {
  background-color: #818181;
}

.mi-boton4 {
  padding: 10px 20px; /* Espaciado interno (arriba y abajo, izquierda y derecha) */
  font-size: 16px; /* Tamaño del texto */
  background-color: #000000; /* Color de fondo */
  color: white; /* Color del texto */
  border: none; /* Quita el borde */
  border-radius: 15px; /* Borde redondeado */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  width: 150px; /* Ancho del botón */
  height: 50px; /* Alto del botón */
  margin-top: 820px;
  margin-left: 17%;
}

/* Estilo cuando se pasa el cursor sobre el botón */
.mi-boton4:hover {
  background-color: #818181;
}

.nosotros3 {
  border: 3px solid rgb(0, 0, 0);
  text-align: left;
  color: rgb(0, 0, 0);
  background-color: #bbbbbb;
  display: inline-block;
  margin-top: 8%;
  max-height: 260px; /* Ancho máximo del rectángulo, ajusta según tus necesidades */
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px; /* Ajusta el valor según la curvatura deseada de los bordes */
  top: 370px;
  position: absolute;
  right: 52%;
  left: 26%;
}


.nosotros3 p {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
  font-size: 20px;
}


.nosotros4 {
  border: 3px solid rgb(0, 0, 0);
  text-align: left;
  color: rgb(0, 0, 0);
  background-color: #bbbbbb;;
  display: inline-block;
  margin-top: 8%;
  max-height: 260px; /* Ancho máximo del rectángulo, ajusta según tus necesidades */
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px; /* Ajusta el valor según la curvatura deseada de los bordes */
  top: 370px;
  position: absolute;
  right: 27%;
  left: 50%;
}



.nosotros4 p {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
  font-size: 20px;
}

.nosotros5 {
  border: 3px solid rgb(0, 0, 0);
  text-align: left;
  color: rgb(0, 0, 0);
  background-color: #bbbbbb;;
  display: inline-block;
  margin-top: 8%;
  max-height: 260px; /* Ancho máximo del rectángulo, ajusta según tus necesidades */
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px; /* Ajusta el valor según la curvatura deseada de los bordes */
  top: 370px;
  position: absolute;
  right: 2%;
  left: 75%;
}

.nosotros5 p {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
  font-size: 20px;
}

.nosotros2,
.nosotros3,
.nosotros4,
.nosotros5 {
    opacity: 0;
    transform: translateY(500px);
    transition: opacity 1s ease, transform 1s ease;
}

h2 {
  position: relative;
  font-size: 80px;
  color: rgb(255, 255, 255);
}

body .seccion .texto-ani {
  display: flex;
  margin-top: 2%;
  margin-left: 30%;
}

h2::before {
  content: attr(data-text);
  position: absolute;
  color: #000000;
  width: 350px;
  overflow: hidden;
  white-space: nowrap;
  animation: animate 8s linear infinite;
  filter: drop-shadow(0 0 20px rgb(216, 36, 36)) drop-shadow(0 0 50px rgb(216, 36, 36));
}

@keyframes animate {
  0%,10%,100% {
    width: 0;
  }
  70%,90% {
    width: 100%;
  }
}

.nosotros6 {
  border: 3px solid rgb(0, 0, 0);
  text-align: left;
  color: rgb(0, 0, 0);
  background-color: #bbbbbb;;
  display: inline-block;
  margin-top: 8%;
  max-height: 260px; /* Ancho máximo del rectángulo, ajusta según tus necesidades */
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px; /* Ajusta el valor según la curvatura deseada de los bordes */
  top: 80px;
  position: absolute;
  right: 76%;
  left: 2%;
}


.nosotros6 p {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
  font-size: 20px;
}

.nosotros7 {
  border: 3px solid rgb(0, 0, 0);
  text-align: left;
  color: rgb(0, 0, 0);
  background-color: #bbbbbb;;
  display: inline-block;
  margin-top: 8%;
  max-height: 260px; /* Ancho máximo del rectángulo, ajusta según tus necesidades */
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px; /* Ajusta el valor según la curvatura deseada de los bordes */
  top: 80px;
  position: absolute;
  right: 52%;
  left: 26%;
}


.nosotros7 p {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
  font-size: 20px;
}


.nosotros8 {
  border: 3px solid rgb(0, 0, 0);
  text-align: left;
  color: rgb(0, 0, 0);
  background-color: #bbbbbb;;
  display: inline-block;
  margin-top: 8%;
  max-height: 260px; /* Ancho máximo del rectángulo, ajusta según tus necesidades */
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px; /* Ajusta el valor según la curvatura deseada de los bordes */
  top: 80px;
  position: absolute;
  right: 27%;
  left: 50%;
}


.nosotros8 p {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
  font-size: 20px;
}

.nosotros9 {
  border: 3px solid rgb(0, 0, 0);
  text-align: left;
  color: rgb(0, 0, 0);
  background-color: #bbbbbb;;
  display: inline-block;
  margin-top: 8%;
  max-height: 260px; /* Ancho máximo del rectángulo, ajusta según tus necesidades */
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px; /* Ajusta el valor según la curvatura deseada de los bordes */
  top: 80px;
  position: absolute;
  right: 2%;
  left: 75%;
}


.nosotros9 p {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  text-align: center;
  font-size: 20px;
}

.nosotros6,
.nosotros7,
.nosotros8,
.nosotros9 {
    opacity: 0;
    transform: translateY(500px);
    transition: opacity 1s ease, transform 1s ease;
}


.video_turtle {
  position: absolute;
  margin-top: 33%;
  margin-left: 21%;
  width: 1100px;
  height: 520px;
  z-index: 1;
}

.video-iframe {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.mi-boton5 {
  position: absolute;
  padding: 10px 20px; /* Espaciado interno (arriba y abajo, izquierda y derecha) */
  font-size: 16px; /* Tamaño del texto */
  background-color: #000000; /* Color de fondo */
  color: white; /* Color del texto */
  border: none; /* Quita el borde */
  border-radius: 15px; /* Borde redondeado */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  width: 150px; /* Ancho del botón */
  height: 50px; /* Alto del botón */
  margin-top: 520px;
  margin-left: 9%;
}

/* Estilo cuando se pasa el cursor sobre el botón */
.mi-boton5:hover {
  background-color: #818181;
}

.mi-boton6 {
  position: absolute;
  padding: 10px 20px; /* Espaciado interno (arriba y abajo, izquierda y derecha) */
  font-size: 16px; /* Tamaño del texto */
  background-color: #000000; /* Color de fondo */
  color: white; /* Color del texto */
  border: none; /* Quita el borde */
  border-radius: 15px; /* Borde redondeado */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  width: 150px; /* Ancho del botón */
  height: 50px; /* Alto del botón */
  margin-top: 520px;
  margin-left: 33%;
}

/* Estilo cuando se pasa el cursor sobre el botón */
.mi-boton6:hover {
  background-color: #818181;
}

.mi-boton7 {
  position: absolute;
  padding: 10px 20px; /* Espaciado interno (arriba y abajo, izquierda y derecha) */
  font-size: 16px; /* Tamaño del texto */
  background-color: #000000; /* Color de fondo */
  color: white; /* Color del texto */
  border: none; /* Quita el borde */
  border-radius: 15px; /* Borde redondeado */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  width: 150px; /* Ancho del botón */
  height: 50px; /* Alto del botón */
  margin-top: 520px;
  margin-left: 57%;
}

/* Estilo cuando se pasa el cursor sobre el botón */
.mi-boton7:hover {
  background-color: #818181;
}

.mi-boton8 {
  position: absolute;
  padding: 10px 20px; /* Espaciado interno (arriba y abajo, izquierda y derecha) */
  font-size: 16px; /* Tamaño del texto */
  background-color: #000000; /* Color de fondo */
  color: white; /* Color del texto */
  border: none; /* Quita el borde */
  border-radius: 15px; /* Borde redondeado */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  width: 150px; /* Ancho del botón */
  height: 50px; /* Alto del botón */
  margin-top: 520px;
  margin-left: 83%;
}

/* Estilo cuando se pasa el cursor sobre el botón */
.mi-boton8:hover {
  background-color: #818181;
}

#btnScrollToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  display: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  z-index: 999; /* Asegura que el botón esté por encima de otros elementos */
}

/* Estilos para el botón de desplazamiento hacia arriba cuando se coloca el ratón encima */
#btnScrollToTop:hover {
  background-color: #555;
}

/* FOOTER */


.textcopy {
  position: absolute;
  bottom: 160px;
  margin-left: 200px;
  margin-right: 700px;
  margin-bottom: -50px;
  font-size: 13px;
  color:gray;
  text-justify: auto;
}

.privacity {
  position: absolute;
  bottom: 100px;
  margin-left: 200px;
  margin-bottom: -50px;
  font-size: 13px;
  color:gray;
  cursor: pointer;
}


.LogoContenedor {
  position: relative;
  width: 50px; /* Ajusta el tamaño según tus necesidades */
  height: 50px; /* Ajusta el tamaño según tus necesidades */
  overflow: hidden; /* Oculta cualquier parte de la imagen que sobresalga del contenedor */
  left: 1600px;
  bottom: -150px;

}

.LogoNormal {
  height: 50px;
}

.LogoHover {
  display: none;
  position: absolute;
  height: 50px;
  top: 0;
  left: 0;
}


.LogoLS:hover .LogoHover {
  display: block;
}

.LogoLS:hover .LogoNormal {
  display: none;
}