/* styles.css */

/* Estilos generales para el cuerpo de la página */

html {
  scroll-behavior: smooth; /* Activa el scroll suave */
  height: 100%;
  margin: 0;
}

body {
  position: relative;
  font-family: Arial, sans-serif;
  height: 100%;
  margin: 0; /* Asegura que no haya margen alrededor de la página */
  padding: 0; /* Asegura que no haya padding alrededor de la página */
  color: rgb(0, 0, 0); /* Color del texto en blanco */
  overflow-x: hidden; /* Evita el scroll horizontal */
  background-image: url('uno.jpg'); /* Imagen de fondo inicial */
  background-size: cover; /* Asegura que la imagen cubra toda la pantalla */
  background-position: center; /* Centra la imagen en la pantalla */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-attachment: fixed; /* Fija la imagen de fondo en su lugar */
  transition: background-color 0.3s ease; /* Transición suave del color de fondo */
}

/* Media query para ajustar el tamaño de la fuente en dispositivos móviles */
@media (max-width: 600px) {
  body {
    position: absolute;
    font-family: Arial, sans-serif;
    height: 100%;
    margin: 0; /* Asegura que no haya margen alrededor de la página */
    padding: 0; /* Asegura que no haya padding alrededor de la página */
    color: rgba(0, 0, 0, 0.747); /* Color del texto en blanco */
    overflow-x: hidden; /* Evita el scroll horizontal */
    background-size: cover; /* Asegura que la imagen cubra toda la pantalla */
    background-position: center; /* Centra la imagen en la pantalla */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: fixed; /* Fija la imagen de fondo en su lugar */
  -webkit-overflow-scrolling: touch; /* Asegura que el desplazamiento sea fluido en dispositivos táctiles */
  }
}

body:hover {
  height: 100%;
  margin: 0;
  background-color: #000000; /* Cambia el color de fondo al pasar el mouse */
  -webkit-overflow-scrolling: touch; /* Asegura que el desplazamiento sea fluido en dispositivos táctiles */
}

.content {
  padding: 1em;
  transition: transform 0.5s ease; /* Transición suave en el contenido */
}

/* Para dispositivos táctiles */
.touch-scroll {
  -webkit-overflow-scrolling: touch; /* Desplazamiento suave en táctiles */
  overflow-y: auto; /* Permitir desplazamiento vertical */
  max-height: 400px; /* Ajustar la altura según tus necesidades */
}

/* Contenedor del interruptor */
.toggle-container-2 {
  position: fixed;
  top: 20px; /* Ajusta la distancia desde la parte superior */
  left: 20px;
  right: 20px; /* Ajusta la distancia desde la parte derecha */
  border: none;
  z-index: 999999;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  padding: 10px 15px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  text-decoration: none;
  color: #ffffff;
  text-shadow: 2px 1px 1px rgb(0, 0, 0);
  border: 2px solid #0400f000;
  /* Borde oscuro */
  cursor: pointer;
  text-align: center;
  border-radius: 20px;
  font-style: italic;
  font-weight: bold;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  animation: twinkle8 1.5s ease-in-out infinite;
  background: linear-gradient(to right, #000000, #bb0000, #000000);
  /* Hace la letra más gruesa (puedes ajustar el valor según tus preferencias) */
  /* Asegúrate de que el tamaño del botón sea suficiente para contener la imagen */
  width: 150px;
  height: 50px;
  /* Estilo adicional para el texto */
  font-size: .8em;
  filter: var(--sombra);
  filter: drop-shadow(2px 2px 4px rgb(0, 0, 0));
  filter: -webkit-drop-shadow(2px 2px 4px rgb(255, 0, 0));
  /* Safari y Chrome antiguo */
  filter: -moz-drop-shadow(2px 2px 4px rgb(255, 0, 0));
  /* Firefox antiguo */
  filter: -ms-drop-shadow(2px 2px 4px rgb(255, 0, 0));
  /* Internet Explorer */
  filter: -o-drop-shadow(2px 2px 4px rgb(255, 0, 0));
  /* Opera */
}

.toggle-container-2:hover {
  position: fixed;
  top: 20px; /* Ajusta la distancia desde la parte superior */
  left: 20px;
  right: 20px; /* Ajusta la distancia desde la parte derecha */
  border: none;
  z-index: 999999;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: background-color 15.5s ease, box-shadow 15.5s ease;
  padding: 10px 15px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  text-decoration: none;
  color: #000000;
  text-shadow: 2px 1px 1px rgb(255, 255, 255);
  border: 2px solid #0400f000;
  /* Borde oscuro */
  cursor: pointer;
  text-align: center;
  border-radius: 15px;
  font-style: italic;
  font-weight: bold;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  animation: twinkle3 1.5s ease-in-out infinite;
  background: linear-gradient(to right, #ffffff, #000000, #ffffff);
  /* Hace la letra más gruesa (puedes ajustar el valor según tus preferencias) */
  /* Asegúrate de que el tamaño del botón sea suficiente para contener la imagen */
  width: 150px;
  height: 50px;
  /* Estilo adicional para el texto */
  font-size: .8em;
  filter: var(--sombra);
  filter: drop-shadow(2px 2px 4px rgb(255, 255, 255));
  filter: -webkit-drop-shadow(2px 2px 4px rgb(255, 255, 255));
  /* Safari y Chrome antiguo */
  filter: -moz-drop-shadow(2px 2px 4px rgb(255, 255, 255));
  /* Firefox antiguo */
  filter: -ms-drop-shadow(2px 2px 4px rgb(255, 255, 255));
  /* Internet Explorer */
  filter: -o-drop-shadow(2px 2px 4px rgb(255, 255, 255));
  /* Opera */
}

/* Animación para el brillo y resplandor */
@keyframes twinkle2 {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0);
  }
}

/* Animación para el brillo y resplandor */
@keyframes twinkle3 {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px rgb(255, 255, 255), 0 0 20px rgb(255, 255, 255);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgb(255, 255, 255), 0 0 30px rgb(255, 255, 255);
  }
}

/* Animación para el brillo y resplandor */
@keyframes twinkle4 {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px rgb(68, 0, 131), 0 0 20px rgb(68, 0, 131);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgb(68, 0, 131), 0 0 30px rgb(68, 0, 131);
  }
}

/* Animación para el brillo y resplandor */
@keyframes twinkle5 {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px rgb(0, 4, 255), 0 0 20px rgb(0, 4, 255);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgb(0, 4, 255), 0 0 30px rgb(0, 4, 255);
  }
}

/* Animación para el brillo y resplandor */
@keyframes twinkle6 {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px rgb(140, 0, 255), 0 0 20px rgb(140, 0, 255);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgb(140, 0, 255), 0 0 30px rgb(140, 0, 255);
  }
}

/* Animación para el brillo y resplandor */
@keyframes twinkle7 {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px rgb(88, 0, 204), 0 0 20px rgb(88, 0, 204);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgb(88, 0, 204), 0 0 30px rgb(88, 0, 204);
  }
}

/* Animación para el brillo y resplandor solo en los lados izquierdo y derecho */
@keyframes twinkle8 {
  0%, 100% {
    opacity: 1;
    /* Resplandor hacia la izquierda (-x) y derecha (+x) */
    box-shadow: -10px 0 10px rgb(255, 0, 0), 10px 0 10px rgb(255, 0, 0);
  }
  50% {
    opacity: 1;
    /* Incrementa el resplandor en los lados izquierdo y derecho */
    box-shadow: -15px 0 20px rgb(255, 0, 0), 15px 0 20px rgb(255, 0, 0);
  }
}

/*-----------------------------------------------------------------------*/
.title-container {
  position: relative;
  width: 100%;
  height: auto; /* Ajuste automático para acomodar el tamaño del texto */
  padding: 0.5em 0; /* Reduce el padding arriba y abajo */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(4px 4px 10px rgb(255, 0, 0));
}

.title-container:hover {
  position: relative;
  width: 100%;
  height: auto; /* Ajuste automático para acomodar el tamaño del texto */
  padding: 0.5em 0; /* Reduce el padding arriba y abajo */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(4px 4px 10px rgb(255, 255, 255));
}

/* Contenedor con imágenes de fondo */
.moving-title {
  position: relative;
  font-size: 8vw; /* Tamaño de fuente responsivo */
  font-weight: bold;
  text-shadow: none; /* Eliminar la sombra de texto si es necesario */
  cursor: default;
  padding: 0.2em;
  margin: 0; /* Eliminar márgenes */
  line-height: 1; /* Ajustar la altura de línea para reducir el espacio vertical */
  transition: transform 1.3s, color 1.5s, opacity 1.5s, filter 1.5s ease-in-out; /* Transición suave para color, opacidad y filter */
  background: url('siete.jpg');
  background-size: cover; /* Ajusta la imagen para que cubra el área */
  background-position: center;
  -webkit-background-clip: text; /* Compatibilidad con navegadores WebKit */
  background-clip: text;
  color: transparent; /* Hace que solo se vea la imagen en las letras */
  letter-spacing: 0.1em; /* Espaciado entre letras */
  filter: drop-shadow(2px 2px 4px rgb(255, 0, 0)); /* Sombra exterior */
  margin-left: -30px; /* Mueve el título hacia la izquierda */
  opacity: 1; /* Inicialmente visible */
}

/* Estado hover */
.moving-title:hover {
  position: relative;
  font-size: 8vw; /* Tamaño de fuente responsivo */
  font-weight: bold;
  text-shadow: none; /* Eliminar la sombra de texto si es necesario */
  cursor: default;
  padding: 0.2em;
  margin: 0; /* Eliminar márgenes */
  line-height: 1; /* Ajustar la altura de línea para reducir el espacio vertical */
  transition: transform 1.3s, color 1.5s, opacity 1.5s, filter 1.5s ease-in-out; /* Transición suave para color, opacidad y filter */
  background: url('seis.jpg');
  background-size: cover; /* Ajusta la imagen para que cubra el área */
  background-position: center;
  -webkit-background-clip: text; /* Compatibilidad con navegadores WebKit */
  background-clip: text;
  color: transparent; /* Hace que solo se vea la imagen en las letras */
  letter-spacing: 0.1em; /* Espaciado entre letras */
  filter: drop-shadow(2px 2px 4px rgb(255, 255, 255)); /* Cambio de sombra exterior */
  margin-left: -30px; /* Mueve el título hacia la izquierda */
  opacity: 1; /* Asegura que el título sea completamente visible */
}

/* Media query para ajustar el tamaño de la fuente en dispositivos móviles */
@media (max-width: 600px) {
  .moving-title {
    font-size: 16vw; /* Ajusta el tamaño para pantallas más pequeñas */
  }
}

/* Media query para ajustar el tamaño de la fuente en dispositivos móviles */
@media (max-width: 600px) {
  .moving-title:hover {
    font-size: 16vw; /* Ajusta el tamaño para pantallas más pequeñas */
  }
}

/*-------------------------------------------------------------*/
/* Estilos para el encabezado */
header {
  position: relative; /* Cambia a fixed para que el encabezado permanezca en la parte superior */
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 1em;
  z-index: 1000; /* Asegura que esté por encima del contenido */
}

/* Estilos para el contenido principal */
main {
  margin-top: 50px;
  padding: 10px;
}

/*------------------------------------------------*/

/* Aplica la animación a un elemento específico */
.move-element_1 {
  text-align: center;
  font-style: italic;
  color: #2600ff;
  text-shadow: 2px 1px 1px rgb(255, 255, 255);
  /* Colores del subrayado en degradado */
  border-bottom: 5px solid #00000075;
  /*s Agrega un subrayado con color personalizado */
  cursor: pointer;
  display: block;
  width: 100%;
  /* Ocupa el ancho completo de la ventana */
  filter:
    drop-shadow(4px 4px 10px rgb(255, 255, 255));
}

.texto-bicolor {
  color: #ffffff;
  display: inline-block;
  font-style: italic;
  text-shadow: 2px 1px 1px rgb(0, 0, 0);
  font-weight: bold;
  /* Hacer las letras más gruesas */
  /* Ajusta la sombra según sea necesario */
  background: linear-gradient(to right, #000000, #5700bb, #000000);
  /* Colores del subrayado en degradado */
  border-radius: 15px;
  border-bottom: 5px solid #000000bd;
  /*s Agrega un subrayado con color personalizado */
}

/*------------------------------------------------*/

/* Aplica la animación a un elemento específico */
.move-element_2 {
  font-style: italic;
  text-align: center;
  color: #2600ff;
  text-shadow: 2px 1px 1px rgb(255, 255, 255);
  /* Colores del subrayado en degradado */
  border-bottom: 5px solid #00000075;
  /*s Agrega un subrayado con color personalizado */
  cursor: pointer;
  display: block;
  filter:
    drop-shadow(4px 4px 10px rgb(255, 255, 255));
}

/*------------------------------------------------*/

/* Aplica la animación a un elemento específico */
.move-element_3 {
  font-style: italic;
  text-align: center;
  color: #2600ff;
  text-shadow: 2px 1px 1px rgb(252, 252, 252);
  display: block;
}

ul {
  display: none;
  /* La lista estará oculta inicialmente */
  color: #ffffff;
  border-radius: 20px;
}

.toggleButton {
  padding: 10px;
  /* Espaciado interno del botón */
  border: none;
  /* Sin borde */
  cursor: pointer;
  border-radius: 20px;
  color: #ffffff;
  text-shadow: 2px 1px 1px rgb(0, 0, 0);
  /* Cambia el color del texto cuando el cursor está sobre el botón */
  border-bottom: 5px solid #00000075;
  /*s Agrega un subrayado con color personalizado */
}

/*------------------------------------------------*/

.titulo_0 {
  animation: move 2s ease-in-out infinite;
  font-style: italic;
  text-align: center;
  color: #2600ff;
  text-shadow: 2px 1px 1px rgb(255, 255, 255);
  font-size: 4em;
  /* 2 veces el tamaño normal del texto */
  border-radius: 20px;
  display: block;
  filter:
    drop-shadow(4px 4px 10px rgb(255, 255, 255));
}

.boton_0 {
  padding: 10px 35px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  font-size: 1em;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 2px 1px 1px rgb(0, 0, 0);
  border: 2px solid #0400f000;
  /* Borde oscuro */
  cursor: pointer;
  text-align: center;
  border-radius: 15px;
  font-style: italic;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  transform: scale(0.95);
  font-weight: 900;
  /* Hace la letra más gruesa (puedes ajustar el valor según tus preferencias) */
  background: linear-gradient(to right, #000000, #5700bb, #000000);
  /* Colores del subrayado en degradado */
  background-size: cover;
  /* Ajusta el tamaño de la imagen de fondo */
  background-position: center;
  /* Centra la imagen de fondo */
  border-bottom: 2px solid #4d4b4baf;
  /* Agrega un subrayado con color personalizado */
  filter:
    drop-shadow(1px 1px 10px rgb(0, 0, 0));
}

.boton_0::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-size: 800%;
  border-radius: 10px;

}

/* Estilo del botón cuando está seleccionado (focus) */
.boton_0:hover {
  animation: tambaleo 0.8s ease;
  padding: 10px 35px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  font-size: 1em;
  text-decoration: none;
  color: #000000;
  text-shadow: 2px 1px 1px rgb(255, 255, 255);
  border: 2px solid #0400f000;
  /* Borde oscuro */
  cursor: pointer;
  text-align: center;
  border-radius: 15px;
  font-style: italic;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  transform: scale(0.95);
  font-weight: 900;
  /* Hace la letra más gruesa (puedes ajustar el valor según tus preferencias) */
  background: linear-gradient(to right, #000000, #ffffff, #000000);
  /* Colores del subrayado en degradado */
  background-size: cover;
  /* Ajusta el tamaño de la imagen de fondo */
  background-position: center;
  /* Centra la imagen de fondo */
  border-bottom: 2px solid #4d4b4baf;
  /* Agrega un subrayado con color personalizado */
  filter:
    drop-shadow(1px 1px 10px rgb(0, 0, 0));
}

/* Restaura el estado normal al dejar de tambalear (hover) */
.boton_0:active,
.boton_0:focus {
  transform: rotate(0);
}

/* Definición de la animación de tambaleo */
@keyframes tambaleo {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }

  75% {
    transform: rotate(-3deg);
  }
}

@keyframes parpadeo {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0.5;
  }
}

/*------------------------------------------------*/

.boton_1 {
  padding: 20px 35px; /* Ajusta el tamaño del botón */
  font-size: 1em;
  text-decoration: none;
  color: #ffffff;
  border: none;
  cursor: pointer;
  text-align: center;
  border-radius: 15px;
  font-style: italic;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  font-weight: 1000; /* Hace la letra más gruesa */
  background: linear-gradient(to right, #000000, #5700bb, #000000); /* Colores del subrayado en degradado */
  background-size: cover; /* Ajusta el tamaño de la imagen de fondo */
  background-position: center; /* Centra la imagen de fondo */
  border-bottom: 2px solid #00000075; /* Agrega un subrayado con color personalizado */
}

/* Estilo del botón cuando está seleccionado (hover) */
.boton_1:hover {
  animation: tambaleo 0.8s ease; /* Aplica la animación en hover */
  padding: 20px 35px; /* Ajusta el tamaño del botón */
  font-size: 1em;
  text-decoration: none;
  color: #000000;
  border: none;
  cursor: pointer;
  text-align: center;
  border-radius: 15px;
  font-style: italic;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  font-weight: 1000; /* Hace la letra más gruesa */
  background: linear-gradient(to right, #000000, #ffffff, #000000); /* Colores del subrayado en degradado */
  background-size: cover; /* Ajusta el tamaño de la imagen de fondo */
  background-position: center; /* Centra la imagen de fondo */
  border-bottom: 2px solid #00000075; /* Agrega un subrayado con color personalizado */
}


/* Definición de la animación de parpadeo */
@keyframes parpadeo {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0.5;
  }
}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen img {
  margin-right: 30px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 58px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 15px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-61 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-61 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 68px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-62 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-62 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 45px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-63 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-63 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 60px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-64 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-64 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 60px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-65 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-65 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 70px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-66 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-66 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 100px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-67 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-67 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 78px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-68 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-68 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 54px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-69 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-69 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 75px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-70 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-70 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 45px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-71 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-71 img {
  margin-right: 50px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 85px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-72 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-72 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 85px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-73 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-73 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 74px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-74 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-74 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 150px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-75 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-75 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 50px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-2 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-2 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 50px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-81 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-81 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 43px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-40 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-40 img {
  margin-right: 10px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 65px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-41 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-41 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 75px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-42 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-42 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 45px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-43 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-43 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 57px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-44 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-44 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 50px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-45 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-45 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 44px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-46 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-46 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 95px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-47 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-47 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 53px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-48 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-48 img {
  margin-right: 50px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 76px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-49 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-49 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 85px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-50 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-50 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 68px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-51 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-51 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 100px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-52 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-52 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 60px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-53 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-53 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 45px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-54 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-54 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 60px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-55 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-55 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 47px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-56 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-56 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 58px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-57 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-57 img {
  margin-right: 10px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 70px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-58 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-58 img {
  margin-right: 10px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 50px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-59 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-59 img {
  margin-right: 20px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 140px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-60 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-60 img {
  margin-right: -10px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 220px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-3 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-3 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 120px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-4 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-4 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 180px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-5 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-5 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 65px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-6 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-6 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 35px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-7 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-7 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 60px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-8 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-8 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 45px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-9 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-9 img {
  margin-right: 50px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 65px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-10 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-10 img {
  margin-right: 50px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 50px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-11 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-11 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 45px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-12 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-12 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 45px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-13 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-13 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 62px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-14 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-14 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 80px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-15 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-15 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 100px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-16 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-16 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 45px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-17 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-17 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 90px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-18 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-18 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 50px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-19 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-19 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 75px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-20 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-20 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 95px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-21 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-21 img {
  margin-right: 50px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 35px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-22 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-22 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 70px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-23 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-23 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 62px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-24 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-24 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 90px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-25 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-25 img {
  margin-right: -50px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 180px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-75 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-75 img {
  margin-right: 10px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 210px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-76 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-76 img {
  margin-right: -80px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 230px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */
  position: relative;
  left: -50px; /* Mueve la imagen 10px a la izquierda */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-77 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-77 img {
  margin-right: 10px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 85px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-78 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-78 img {
  margin-right: 10px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 48px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-79 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-79 img {
  margin-right: 50px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 88px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-80 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-80 img {
  margin-right: 10px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 100px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-26 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-26 img {
  margin-right: 10px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 65px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-27 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-27 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 80px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-28 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-28 img {
  margin-right: 15px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 80px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-29 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-29 img {
  margin-right: 25px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 90px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-30 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-30 img {
  margin-right: 25px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 45px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-31 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-31 img {
  margin-right: 25px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 65px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-32 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-32 img {
  margin-right: 25px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 55px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-33 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-33 img {
  margin-right: 25px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 55px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/* Estilo para el contenedor del enlace y la imagen */
.enlace-con-imagen-34 {
  display: flex;
  /* Utilizar un contenedor flexible */
  align-items: center;
  /* Centrar verticalmente los elementos */
}

/* Estilo para la imagen */
.enlace-con-imagen-34 img {
  margin-right: 5px;
  /* Espacio entre la imagen y el texto del enlace */
  max-width: 45px;
  /* Ancho máximo de la imagen */
  height: auto;
  /* Permitir que la altura se ajuste automáticamente */
  text-align: center;
  border-radius: 5px;
  /* Bordes redondeados */

}

/*------------------------------------------------*/

.video-container {
  width: 100%;
  height: 220px;
  /* Establece un tamaño fijo para todos los contenedores */
  overflow: hidden;
  overflow-y: auto;
  /* Habilita el desplazamiento vertical si es necesario */
  border-radius: 15px;
  display: inline-block;
  margin-right: 2%;
  filter: drop-shadow(4px 4px 10px rgb(255, 255, 255));
}

/* Define un tamaño fijo para los elementos de video dentro de los contenedores */
.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ajusta el tamaño del video para cubrir completamente el contenedor */
}

.video-container:last-child {
  margin-right: 0;
}

/* Contenedor principal para las imágenes */
.contenedor-imagenes {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Asegura que las imágenes estén alineadas en la parte superior */
}

/* Media query para dispositivos móviles */
@media (max-width: 600px) { /* Cambia 600px según el tamaño de pantalla deseado */
  .contenedor-imagenes {
    max-width: 100%; /* Ajusta el ancho máximo al 100% en dispositivos móviles */
    width: 600px; /* Tamaño específico en dispositivos móviles */
    margin: auto; /* Centrar el contenedor */
  }
}


/* Estilo para la imagen flotante */
.imagen-flotante {
  width: 30%;
  /* Ajusta el ancho según tus preferencias */
  bottom: 50px;
  /* Ajusta la posición vertical según tus preferencias */
  right: 1px;
  position: relative; /* Asegura que la imagen flote en la pantalla */
  /* Ajusta la posición horizontal según tus preferencias */
  border-radius: 50%;
  /* Ajusta el radio del borde para que sea redondeado */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  /* Sombra para dar un efecto visual */
  display: block;
  filter:
    drop-shadow(2px 2px 4px rgb(44, 41, 41));
}

/*--------------------------------------------------*/

.boton_4 {
  padding: 30px 35px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  font-size: 1em;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 2px 1px 1px rgb(0, 0, 0);
  border: none;
  cursor: pointer;
  border-radius: 100px;
  font-style: italic;
  background-image: url('bolaazul.gif');
  /* Ruta de la imagen de fondo */
  background-size: cover;
  /* Ajusta el tamaño de la imagen de fondo */
  background-position: center;
  /* Centra la imagen de fondo */
  text-align: center;
  display: inline-block;
  margin: 4px 2px;
  position: fixed;
  bottom: 70px;
  right: 20px;
  /* Puedes ajustar la posición según tus necesidades */
  z-index: 999;
  /* Asegura que esté por encima de otros elementos */

}

#reloj {
  font-size: 2em;
  color: #ffffff;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  /* Ajusta el margen según sea necesario */
}

/* Estilo del botón cuando está seleccionado (focus) */
.boton_4:hover {

  transform: rotate(0);
  animation: tambaleo 0.8s ease infinite;
  /* Aplica la animación en hover de forma continua */

}

.boton_4.moviendo {
  animation: tambaleo 0.8s ease infinite;
  /* Aplica la animación en hover de forma continua */
}

/* Definición de la animación de parpadeo */
@keyframes parpadeo {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0.5;
  }
}

/*-------------------------------------------------------*/

/* Estilo para el botón de música */
.boton_5 {
  position: fixed;
  /* Fijar posición */
  bottom: 220px;
  /* Distancia desde abajo */
  right: 70px;
  /* Distancia desde la derecha */
  font-size: 24px;
  /* Tamaño de la fuente */
  color: #ffffff;
  text-shadow: 2px 1px 1px rgb(0, 0, 0);
  /* Color del texto */
  background-color: #4CAF50;
  /* Color de fondo */
  padding: 10px;
  /* Espaciado interno */
  border: none;
  /* Sin borde */
  border-radius: 70px;
  /* Borde redondeado */
  cursor: pointer;
  /* Cursor al pasar por encima */
  animation: none;
  /* Inicialmente, no hay animación */
  z-index: 999;
  /* Asegura que esté por encima de otros elementos */
  border-bottom: 4px solid #010f01c1;
  /*s Agrega un subrayado con color personalizado */
  background-image: url('rayo1.gif');
  /* Ruta de la imagen de fondo para el botón 5 */
  background-size: cover;
  /* Ajuste para cubrir completamente el fondo */
  background-position: center;
  /* Centrar la imagen de fondo */
  background-repeat: no-repeat;
  /* No repetir la imagen de fondo */

}

/* Estilo de animación cuando se activa */
.boton_5.moviendo {
  animation: saltar 0.5s ease infinite;
  /* Agregar animación de salto */
}

/* Definir la animación de salto */
@keyframes saltar {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
    /* Posición inicial y final */
  }

  40% {
    transform: translateY(-20px);
    /* Punto más alto del salto */
  }

  60% {
    transform: translateY(-10px);
    /* Punto intermedio del salto */
  }
}

.boton_5::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg,
      rgba(0, 0, 0, 0.53), rgba(38, 242, 11, 0.678), rgba(30, 255, 0, 0.638), rgba(0, 0, 0, 0.57),
      rgba(0, 0, 0, 0.53), rgba(38, 242, 11, 0.678), rgba(30, 255, 0, 0.638), rgba(0, 0, 0, 0.57));
  background-size: 800%;
  border-radius: 100px;
  filter: blur(4px);
  animation: glowing 10s linear infinite;

}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400%;
  }

  100% {
    background-position: 0 0;
  }

}

#contenedorNombre {
  position: fixed; /* Fija el contenedor en la pantalla */
  bottom: 182px;
  right: 10px;
  z-index: 999; /* Asegura que esté encima de otros elementos */
}

#nombreContenedor {
  width: 300px; /* Ancho fijo para el contenedor, ajusta según sea necesario */
  overflow: hidden; /* Oculta el contenido que se desborde */
}

#nombreSonido {
  display: inline-block; /* Permite que el texto se mueva en línea */
  background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente */
  color: white; /* Texto en blanco */
  padding: 5px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  animation: moverNombre 10s linear infinite; /* Llama a la animación */
}

#nombreSonido.paused {
  animation: none; /* Detener la animación */
  transform: translateX(0); /* Centra el texto */
}

/* Definir la animación que mueve el texto de izquierda a derecha */
@keyframes moverNombre {
  0% {
    transform: translateX(100%); /* Empieza fuera de la pantalla a la derecha */
  }
  50% {
    transform: translateX(0); /* En el medio, el texto está completamente visible */
  }
  100% {
    transform: translateX(-100%); /* Termina fuera de la pantalla a la izquierda */
  }
}

/*-------------------------------------------------*/

.centro {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  /* Ajusta la opacidad según sea necesario */
  z-index: -1;
  animation: escala 6s infinite alternate;
  /* Animación de escala */

  display: block;

  filter:
    drop-shadow(4px 4px 12px rgb(255, 255, 255));

}

@keyframes escala {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
  }

  100% {
    transform: translate(-50%, -50%) scale(0.8);
  }
}

.contenedor-imagenes1 {
  position: relative;
  display: inline-block;

}

.contenedor-imagenes1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  animation: fondoAnimado 6s infinite linear;
  opacity: 0.4;
  /* Ajusta la opacidad según sea necesario */

}

@keyframes fondoAnimado {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 100% 100%;
  }
}

/*-------------------------------------------------*/

.imagen {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 780px;
  /* Ajusta el ancho según sea necesario */
  height: 800px;
  /* Ajusta la altura según sea necesario */
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  z-index: -1;
  display: block;
  filter: drop-shadow(2px 2px 16px gold);
  transition: opacity 0.5s ease-in-out, transform 6s ease-in-out;
  /* Añade una transición para suavizar la aparición y el cambio de escala */

}

.imagen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  animation: fondoAnimado 6s infinite linear;
  opacity: 0.4;
  /* Ajusta la opacidad según sea necesario */
}

.imagen0 {
  animation: balanceoAtrasAdelante0 6s infinite alternate, aparecer0 6s forwards;
}

.imagen1 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen2 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(255, 255, 255));
}

.imagen3 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen4 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen5 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen6 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen7 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen8 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen9 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(242, 0, 255));
}

.imagen10 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(255, 255, 255));
}

.imagen11 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(242, 0, 255));
}

.imagen12 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px gold);
}

.imagen13 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(0, 140, 255));
}

.imagen14 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(255, 0, 0));
}

.imagen15 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen16 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen17 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(242, 0, 255));
}

.imagen18 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(255, 0, 0));
}

.imagen19 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen20 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(242, 0, 255));
}

.imagen21 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(255, 255, 255));
}

.imagen22 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(0, 255, 21));
}

.imagen23 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen24 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(0, 255, 21));
}

.imagen25 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(0, 255, 21));
}

.imagen26 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(255, 255, 255));
}

.imagen27 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(0, 140, 255));
}

.imagen28 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(242, 0, 255));
}

.imagen29 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(255, 255, 255));
}

.imagen30 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(242, 0, 255));
}

.imagen31 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(0, 140, 255));
}

.imagen32 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(255, 0, 0));
}

.imagen33 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(0, 140, 255));
}

.imagen34 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(255, 0, 0));
}

.imagen35 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen36 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(242, 0, 255));
}

.imagen37 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen38 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(242, 0, 255));
}

.imagen39 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen40 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(255, 0, 0));
}

.imagen41 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen42 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen43 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(242, 0, 255));
}

.imagen44 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen45 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(242, 0, 255));
}

.imagen46 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen47 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen48 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen49 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen50 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(242, 0, 255));
}

.imagen51 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen52 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen53 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen54 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen55 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen56 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(255, 0, 0));
}

.imagen57 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen58 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
  filter: drop-shadow(2px 2px 16px rgb(242, 0, 255));
}

.imagen59 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen60 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen61 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen62 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen63 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen64 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

.imagen65 {
  animation: balanceoAtrasAdelante1 6s infinite alternate, aparecer1 6s forwards;
}

/* Añade reglas de animación similares para las imágenes restantes */

@keyframes fondoAnimado {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 100% 100%;
  }
}

@keyframes balanceoAtrasAdelante0 {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.5);
  }

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

@keyframes aparecer0 {

  0%,
  49.9%,
  50.1%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

/* Añade reglas de animación similares para las imágenes restantes */

/* ... Más estilos si es necesario ... */


/*---------------------------------------------------*/

.titulo_7 {
  font-style: italic;
  text-align: center;
  color: #000000;
  padding: 20px 35px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  font-size: 1em;
  border-radius: 15px;
  /* Bordes redondeados */
}

.boton_7 {
  padding: 10px 35px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  font-size: 1em;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 2px 1px 1px rgb(0, 0, 0);
  /* Borde oscuro */
  cursor: pointer;
  text-align: center;
  border-radius: 20px;
  font-style: italic;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  transform: scale(0.95);
  font-weight: bolder;
  /* Hace la letra más gruesa (puedes ajustar el valor según tus preferencias) */
  background: linear-gradient(to right, #030303, #5700bb, #0b0a0c);
  background-size: cover;
  /* Ajusta el tamaño de la imagen de fondo */
  background-position: center;
}

/* Media query para pantallas pequeñas (como celulares) */
@media (max-width: 600px) {
  .boton_7 {
    padding: 8px 25px; /* Reducir padding en pantallas pequeñas */
    font-size: 0.9em; /* Reducir ligeramente el tamaño de la fuente */
    border-radius: 15px; /* Ajustar el radio de borde */
  }
}

@media (max-width: 400px) {
  .boton_7 {
    padding: 6px 20px; /* Aún más pequeño en pantallas muy pequeñas */
    font-size: 0.8em; /* Ajustar tamaño de fuente para pantallas más pequeñas */
    background-size: 100%; /* Asegura que el fondo cubra todo el botón */
  }
}

/* Estilo del botón cuando está seleccionado (focus) */
.boton_7:hover {
  padding: 10px 35px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  font-size: 1em;
  text-decoration: none;
  color: #000000;
  text-shadow: 2px 1px 1px rgb(255, 255, 255);
  /* Borde oscuro */
  cursor: pointer;
  text-align: center;
  border-radius: 20px;
  font-style: italic;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  transform: scale(0.95);
  font-weight: bolder;
  /* Hace la letra más gruesa (puedes ajustar el valor según tus preferencias) */
  background: linear-gradient(to right, #030303, #ffffff, #0b0a0c);
  background-size: cover;
  /* Ajusta el tamaño de la imagen de fondo */
  background-position: center;
}

/* Media query para pantallas pequeñas (como celulares) */
@media (max-width: 600px) {
  .boton_7:hover {
    padding: 8px 25px; /* Reducir padding en pantallas pequeñas */
    font-size: 0.9em; /* Reducir ligeramente el tamaño de la fuente */
    border-radius: 15px; /* Ajustar el radio de borde */
  }
}

@media (max-width: 400px) {
  .boton_7:hover {
    padding: 6px 20px; /* Aún más pequeño en pantallas muy pequeñas */
    font-size: 0.8em; /* Ajustar tamaño de fuente para pantallas más pequeñas */
    background-size: 100%; /* Asegura que el fondo cubra todo el botón */
  }
}

/* Restaura el estado normal al dejar de tambalear (hover) */
.boton_7:active,
.boton_7:focus {
  transform: rotate(0);
}

.boton_7::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-size: 100%;
  border-radius: 15px;
}

/*------------------------------------------------*/

.img {
  display: block;
  filter:
    drop-shadow(0px 0px 5px Blue);
  border-radius: 10px;
}

/*------------------------------------------------*/

.img1 {
  display: block;
  filter:
    drop-shadow(0px 0px 5px gold);
  border-radius: 10px;
  width: 32px;
}

/*------------------------------------------------*/

.img2 {
  display: block;
  filter:
    drop-shadow(0px 0px 5px rgb(255, 0, 0));
  border-radius: 10px;
}

/*------------------------------------------------*/

.img3 {
  display: block;
  filter:
    drop-shadow(0px 0px 5px rgb(255, 255, 255));
  border-radius: 10px;
}

/*----------------------------------------------*/

.titulo_1 {
  font-style: italic;
  text-align: center;
  margin: auto; /* Centrar el contenedor */
  padding: 10px 125px; /* Ajusta el tamaño del botón ajustando los valores de padding */
  font-size: 1em; /* Tamaño de fuente por defecto */
  filter: var(--sombra);
  filter: drop-shadow(2px 2px 4px rgb(255, 255, 255));
  filter: -webkit-drop-shadow(2px 2px 4px rgb(255, 255, 255)); /* Safari y Chrome antiguo */
  filter: -moz-drop-shadow(2px 2px 4px rgb(255, 255, 255)); /* Firefox antiguo */
  filter: -ms-drop-shadow(2px 2px 4px rgb(255, 255, 255)); /* Internet Explorer */
  filter: -o-drop-shadow(2px 2px 4px rgb(255, 255, 255)); /* Opera */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
               0 0 20px rgba(255, 255, 255, 0.6),
               0 0 30px rgba(255, 255, 255, 0.4),
               0 0 40px rgba(255, 255, 255, 0.2);
}

/* Media query para dispositivos móviles */
@media (max-width: 600px) { /* Cambia 600px según el tamaño de pantalla deseado */
  .titulo_1 {
    max-width: 100%; /* Ajusta el ancho máximo al 100% en dispositivos móviles */
    width: 600px; /* Tamaño específico en dispositivos móviles */
    margin: auto; /* Centrar el contenedor */
  }
}

.boton_8 {
  padding: 10px 15px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  text-decoration: none;
  color: #ffffff;
  text-shadow: 2px 1px 1px rgb(0, 0, 0);
  border: 2px solid #0400f000;
  /* Borde oscuro */
  cursor: pointer;
  text-align: center;
  border-radius: 15px;
  font-style: italic;
  font-weight: bold;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  animation: twinkle6 1.5s ease-in-out infinite;
  background: linear-gradient(to right, #000000, #5700bb, #000000);
  /* Hace la letra más gruesa (puedes ajustar el valor según tus preferencias) */
  /* Asegúrate de que el tamaño del botón sea suficiente para contener la imagen */
  width: 200px;
  height: 60px;
  /* Estilo adicional para el texto */
  font-size: 1em;
  filter: var(--sombra);
  filter: drop-shadow(2px 2px 4px rgb(119, 0, 255));
  filter: -webkit-drop-shadow(2px 2px 4px rgb(0, 0, 0));
  /* Safari y Chrome antiguo */
  filter: -moz-drop-shadow(2px 2px 4px rgb(0, 0, 0));
  /* Firefox antiguo */
  filter: -ms-drop-shadow(2px 2px 4px rgb(0, 0, 0));
  /* Internet Explorer */
  filter: -o-drop-shadow(2px 2px 4px rgb(0, 0, 0));
  /* Opera */
  text-shadow: 0 0 10px rgba(140, 0, 255, 0.8),
    0 0 20px rgba(109, 0, 252, 0.6),
    0 0 30px rgba(89, 0, 255, 0.4),
    0 0 40px rgba(90, 1, 255, 0.2);
}

/* Estilo del botón cuando está seleccionado (focus) */
.boton_8:hover {
  padding: 10px 15px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  text-decoration: none;
  color: #000000;
  border: 2px solid #0400f000;
  /* Borde oscuro */
  cursor: pointer;
  text-align: center;
  border-radius: 15px;
  font-style: italic;
  font-weight: bold;
  animation: twinkle3 1.5s ease-in-out infinite;
  background: linear-gradient(to right, #ffffff, #000000, #ffffff);
  /* Colores del subrayado en degradado */
  z-index: 1;
  filter:
    drop-shadow(1px 1px 10px rgb(255, 255, 255));
  font-size: 1em;
  /* Ajusta el tamaño del texto cuando el cursor está sobre el botón */
  text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.5); /* Agrega una sombra suave al texto */
}

/* Aplica estilos al texto cuando el cursor está sobre el botón */
.boton_8:hover .titulo_8 {
  font-size: 5.2em;
  /* Ajusta el tamaño del texto cuando el cursor está sobre el botón */
  font-weight: bold;
  /* Hace que el texto sea más grueso cuando el cursor está sobre el botón */
}

/*------------------------------------------------*/
.move-element_11 {
  animation: parpadeo 5s ease-in-out infinite;
  text-decoration: underline;
  text-align: center;
  font-style: italic;
  color: #ffffff;
  cursor: pointer;
  display: block;
  font-size: 4em;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  /* 4 veces el tamaño normal del texto */
  filter:
    drop-shadow(4px 4px 10px rgb(255, 255, 255));
  filter: -webkit-drop-shadow(2px 2px 4px rgb(255, 255, 255));
  /* Safari y Chrome antiguo */
  filter: -moz-drop-shadow(2px 2px 4px rgb(255, 255, 255));
  /* Firefox antiguo */
  filter: -ms-drop-shadow(2px 2px 4px rgb(255, 255, 255));
  /* Internet Explorer */
  filter: -o-drop-shadow(2px 2px 4px rgb(255, 255, 255));
  /* Opera */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(255, 255, 255, 0.4),
    0 0 40px rgba(255, 255, 255, 0.2);
}

@keyframes parpadeo {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0.8;
  }
}

.move-element_11:hover {
  animation: parpadeo 5s ease-in-out infinite;
  text-align: center;
  font-style: italic;
  color: #000000;
  cursor: pointer;
  display: block;
  font-size: 4em;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  /* 2 veces el tamaño normal del texto */
  filter:
    drop-shadow(4px 4px 10px rgb(0, 0, 0));
  filter: -webkit-drop-shadow(2px 2px 4px rgb(0, 0, 0));
  /* Safari y Chrome antiguo */
  filter: -moz-drop-shadow(2px 2px 4px rgb(0, 0, 0));
  /* Firefox antiguo */
  filter: -ms-drop-shadow(2px 2px 4px rgb(0, 0, 0));
  /* Internet Explorer */
  filter: -o-drop-shadow(2px 2px 4px rgb(0, 0, 0));
  /* Opera */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
    0 0 20px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(255, 255, 255, 0.4),
    0 0 40px rgba(255, 255, 255, 0.2);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* Media query para dispositivos móviles */
@media (max-width: 600px) { /* Cambia 600px según el tamaño de pantalla deseado */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Tamaño de 200px en dispositivos móviles */
  }
}

.grid-container-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Tamaño de columna en pantallas grandes */
  gap: 20px;
  padding: 20px;
  border-radius: 20px;
  font-weight: 900;
  background-image: url('sayax3.jpg'); /* Ruta de la imagen de fondo */
  background-size: cover; /* Ajusta el tamaño de la imagen de fondo */
  background-position: center; /* Centra la imagen de fondo */
  border-bottom: 2px solid #000000af; /* Agrega un subrayado con color personalizado */
}

/* Media query para dispositivos móviles */
@media (max-width: 200px) { /* Cambia 200px según el tamaño de pantalla deseado */
  .grid-container-2 {
    grid-template-columns: repeat(auto-fill, minmax(120px, 10fr)); /* Tamaño de columna en dispositivos móviles */
  }
}

#productos {
  display: flex;
  justify-content: space-between;
  gap: 50px; /* Espaciado de 10px entre los elementos */
}

/* Media query para dispositivos móviles */
@media (max-width: 200px) { /* Cambia 600px según el tamaño de pantalla deseado */
  #productos {
    display: table;
    max-width: 100%; /* Ajusta el ancho máximo al 100% en dispositivos móviles */
    width: 100px; /* Tamaño específico en dispositivos móviles */
    margin: auto; /* Centrar el contenedor */
    gap: 10px; /* Mantén el mismo espaciado en dispositivos móviles */
  }
}

/*------------------------------------------------*/

.boton_9 {
  padding: 20px 35px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  font-size: 1em;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 2px 1px 1px rgb(0, 0, 0);
  border: none;
  cursor: pointer;
  text-align: center;
  border-radius: 15px;
  font-style: italic;
  font-weight: 900;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  /* Hace la letra más gruesa (puedes ajustar el valor según tus preferencias) */
  background: linear-gradient(to right, #000000, #5700bb, #000000);
  /* Colores del subrayado en degradado */
  background-size: cover;
  /* Ajusta el tamaño de la imagen de fondo */
  background-position: center;
  /* Centra la imagen de fondo */
  border-bottom: 5px solid #00000075;
  /*s Agrega un subrayado con color personalizado */
}

/* Estilo del botón cuando está seleccionado (focus) */
.boton_9:hover {
  color: #000000;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  text-shadow: 2px 1px 1px rgb(255, 255, 255);
  /* Cambia el color del texto cuando el cursor está sobre el botón */
  background: linear-gradient(to right, #ffffff, #000000, #ffffff);
}

/*------------------------------------------------*/
.boton_15 {
  padding: 10px 15px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  font-size: 1em;
  text-decoration: none;
  color: #ffffff;
  border: 2px solid #00000000;
  /* Borde oscuro */
  cursor: pointer;
  text-align: center;
  border-radius: 15px;
  font-style: italic;
  margin: 0.625em;
  margin-left: 10px; /* Elimina el espacio en el lado izquierdo */
  /* 10px en em (10px / 16px = 0.625em) */
  gap: 20px;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  transform: scale(0.95);
  font-weight: 900;
  /* Hace la letra más gruesa (puedes ajustar el valor según tus preferencias) */
  background: linear-gradient(to right, #000000, #5700bb, #000000);
  /* Colores del subrayado en degradado */
  background-size: cover;
  /* Ajusta el tamaño de la imagen de fondo */
  background-position: center;
  /* Centra la imagen de fondo */
  border-bottom: 2px solid #4d4b4baf;
  /* Agrega un subrayado con color personalizado */
  filter:
    drop-shadow(1px 1px 10px rgb(0, 0, 0));
}

.boton_15::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-size: 800%;
  border-radius: 15px;

}

/* Estilo del botón cuando está seleccionado (focus) */
.boton_15:hover {
  animation: tambaleo 0.8s ease;
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  /* Aplica la animación en hover de forma continua */
  color: #000000;
  /* Cambia el color del texto cuando el cursor está sobre el botón */
  font-size: 1em;
  background: linear-gradient(to right, #ffffff, #000000, #ffffff);
  font-style: italic;
  filter:
    drop-shadow(1px 1px 10px rgb(255, 255, 255));
}

/* Restaura el estado normal al dejar de tambalear (hover) */
.boton_15:active,
.boton_15:focus {
  transform: rotate(0);
}

/* Definición de la animación de tambaleo */
@keyframes tambaleo {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }

  75% {
    transform: rotate(-3deg);
  }
}

@keyframes parpadeo {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0.5;
  }
}

#characterList {
  display: none;
}

#characterList2 {
  display: none;
}

#characterList3 {
  display: none;
}

/* Botones de control */
.control-button {
  position: fixed;
  top: 20px; /* Ajusta la distancia desde la parte superior */
  right: 20px; /* Ajusta la distancia desde la parte derecha */
  font-size: 16px;
  border: none;
  z-index: 999999;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  padding: 10px 15px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  text-decoration: none;
  color: #ffffff;
  text-shadow: 2px 1px 1px rgb(0, 0, 0);
  border: 2px solid #0400f000;
  /* Borde oscuro */
  cursor: pointer;
  text-align: center;
  border-radius: 20px;
  font-style: italic;
  font-weight: bold;
  animation: twinkle8 1.5s ease-in-out infinite;
  background: linear-gradient(to right, #000000, #bb0000, #000000);
  /* Hace la letra más gruesa (puedes ajustar el valor según tus preferencias) */
  /* Asegúrate de que el tamaño del botón sea suficiente para contener la imagen */
  width: 150px;
  height: 50px;
  /* Estilo adicional para el texto */
  font-size: .8em;
  filter: var(--sombra);
  filter: drop-shadow(2px 2px 4px rgb(0, 0, 0));
  filter: -webkit-drop-shadow(2px 2px 4px rgb(255, 0, 0));
  /* Safari y Chrome antiguo */
  filter: -moz-drop-shadow(2px 2px 4px rgb(255, 0, 0));
  /* Firefox antiguo */
  filter: -ms-drop-shadow(2px 2px 4px rgb(255, 0, 0));
  /* Internet Explorer */
  filter: -o-drop-shadow(2px 2px 4px rgb(255, 0, 0));
  /* Opera */
}

.control-button:hover {
  position: fixed;
  top: 20px; /* Ajusta la distancia desde la parte superior */
  right: 20px; /* Ajusta la distancia desde la parte derecha */
  font-size: 16px;
  border: none;
  z-index: 999999;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s, color 1.2s; /* Agrega transición para el color */
  padding: 10px 15px;
  /* Ajusta el tamaño del botón ajustando los valores de padding */
  text-decoration: none;
  color: #000000;
  text-shadow: 2px 1px 1px rgb(255, 255, 255);
  border: 2px solid #0400f000;
  /* Borde oscuro */
  cursor: pointer;
  text-align: center;
  font-style: italic;
  font-weight: bold;
  /* Colores del subrayado en degradado */
  animation: twinkle3 1.5s ease-in-out infinite;
  background: linear-gradient(to right, #ffffff, #000000, #ffffff);
  /* Hace la letra más gruesa (puedes ajustar el valor según tus preferencias) */
  /* Asegúrate de que el tamaño del botón sea suficiente para contener la imagen */
  width: 150px;
  height: 50px;
  /* Estilo adicional para el texto */
  font-size: .8em;
  filter: var(--sombra);
  filter: drop-shadow(2px 2px 4px rgb(255, 255, 255));
  filter: -webkit-drop-shadow(2px 2px 4px rgb(255, 255, 255));
  /* Safari y Chrome antiguo */
  filter: -moz-drop-shadow(2px 2px 4px rgb(255, 255, 255));
  /* Firefox antiguo */
  filter: -ms-drop-shadow(2px 2px 4px rgb(255, 255, 255));
  /* Internet Explorer */
  filter: -o-drop-shadow(2px 2px 4px rgb(255, 255, 255));
  /* Opera */
}

/* Aplica estilos al texto cuando el cursor está sobre el botón */
.control-button:hover .titulo_8 {
  font-size: 5.2em;
  /* Ajusta el tamaño del texto cuando el cursor está sobre el botón */
  font-weight: bold;
  /* Hace que el texto sea más grueso cuando el cursor está sobre el botón */
}

.container {
  min-height: 100vh; /* Asegura que haya contenido suficiente para desplazarse */
}

/* Estilos para el buscador */
.search-container {
  position: relative;
  bottom: 0;
  width: 100%;
  padding: 5px;
  text-align: center;
}

.search-container input[type="text"] {
  padding: 5px;
  font-size: 14px;
  border: 1px solid #ffffff;
  width: 60%;
  margin-right: 5px;
}

.search-container button {
  padding: 5px 10px;
  font-size: 14px;
  background-color: #4CAF50;
  color: rgb(255, 255, 255);
  border: none;
  cursor: pointer;
}

.search-container button:hover {
  background-color: #45a049;
}

/* Ajuste de tamaño para pantallas más pequeñas */
@media (max-width: 600px) {
  .search-container input[type="text"] {
      width: 50%;
  }
  
  .search-container button {
      padding: 5px 8px;
  }
}

/*-----------------------------------------------------------------------------*/

/* Estilo para el título del video */
.video-title {
  position: absolute;
  top: 30px; /* Ajusta la distancia desde la parte superior (puedes cambiar este valor según lo necesites) */
  left: 50%;
  transform: translateX(-50%); /* Centra el título horizontalmente */
  font-size: 24px; /* Tamaño de la fuente */
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  z-index: 10; /* Asegura que el título esté sobre el video */
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */
  overflow: hidden; /* Asegura que el texto que no cabe se oculte */
  text-overflow: ellipsis; /* Agrega "..." si el texto es demasiado largo */
}

#videoContainer {
  position: relative;
  width: fit-content;
  margin: auto;
  max-width: 600px; /* Tamaño máximo en pantallas grandes */
  border-radius: 20px;
}

/* Media query para dispositivos móviles */
@media (max-width: 600px) { /* Cambia 600px según el tamaño de pantalla deseado */
  #videoContainer {
    max-width: 100%; /* Ajusta el ancho máximo al 100% en dispositivos móviles */
    width: 550px; /* Tamaño específico en dispositivos móviles */
    margin: auto; /* Centrar el contenedor */
  }
}

#miVideo {
  width: 100%;
  height: 560px; /* Ajusta la altura */
  max-width: 600px;
  display: block;
  filter: var(--sombra);
  filter: drop-shadow(2px 2px 4px rgb(2, 2, 2));
  filter: -webkit-drop-shadow(2px 2px 4px rgb(8, 8, 8)); /* Safari y Chrome antiguo */
  filter: -moz-drop-shadow(2px 2px 4px rgb(8, 8, 8)); /* Firefox antiguo */
  filter: -ms-drop-shadow(2px 2px 4px rgb(8, 8, 8)); /* Internet Explorer */
  filter: -o-drop-shadow(2px 2px 4px rgb(8, 8, 8)); /* Opera */
  text-shadow: 0 0 10px rgba(3, 3, 3, 0.8),
    0 0 20px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(255, 255, 255, 0.4),
    0 0 40px rgba(255, 255, 255, 0.2);
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 30px;
  cursor: pointer;
  padding: 10px;
}

#leftArrow {
  left: -50px;
}

#rightArrow {
  right: -50px;
}

/* Controles del video visibles dentro del contenedor */
video::-webkit-media-controls {
  opacity: 1;
  bottom: 0;
  height: 40px;
}

video::-webkit-media-controls-panel {
  position: absolute;
  bottom: 110px; /* Posición en pantallas grandes */
  left: 0;
  right: 0;
}

/* Media query para dispositivos móviles */
@media (max-width: 600px) { /* Cambia 600px según el tamaño de pantalla deseado */
  video::-webkit-media-controls-panel {
    bottom: 125px; /* Ajusta la posición de los controles en dispositivos móviles */
  }
}

/*-----------------------------------------------------*/
footer {
  position: relative;
  padding: 10px 15px;
  background: linear-gradient(to right, #00000093, #ff0000, #00000093);
  border-radius: 2px;
  border-bottom: 2px solid #00000075;
  justify-content: space-between;
  filter: drop-shadow(2px 2px 4px rgb(255, 13, 13));
  flex-wrap: wrap;
  display: flex; /* Necesario para flexbox */
}
  .footer-social-icons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.footer-social-icons a {
    display: inline-block;
    text-decoration: none;
    width: 40px;
    height: 40px;
}

.footer-social-icons a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.footer-social-icons a img:hover {
    transform: scale(1.25);
}

@media (max-width: 768px){

  .footer-social-icons {
    justify-content: center;
    margin-top: 5px;
}
  .centro2{
    justify-content: center;
    margin-top: -5px;
  }

}

@media (max-width: 480px){
  .footer-social-icons a {
    width: 25px;
    height: 25px;
}
}

.centro2 {
  color: #ffffff;
  text-shadow: 2px 1px 1px rgb(0, 0, 0);
  display: block;
  filter: drop-shadow(4px 4px 10px rgb(255, 255, 255));
  position: relative;
  top: 10px; /* Mueve el texto hacia arriba */
}