@font-face {
  font-family: 'ChauPhilomeneOne-Regular';
  src: url('/01_Yo_nunca/src/fuentes/ChauPhilomeneOne-Regular.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Contenedor principal */
  body, html {
    height: 100vh;
    font-family: 'ChauPhilomeneOne-Regular', sans-serif;
    overflow: hidden;
  }
  
  body {
    display: block;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #014AAD, #C96CE6); /* Cambiar colores del degradado */
  }

  /* Contenedor del contenido */
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Para alinear los elementos en el centro verticalmente */
    align-items: center;
    text-align: center;
    color: white;
    width: 100vw;
    height: 100vh;
  }

  #particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .rowContainer {
    display: flex;
    flex-direction: row; /* Disposición en fila */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Alinea los elementos verticalmente */
    text-align: center;
    color: white;
    border-radius: 5vh;
    background-color: rgba(179, 136, 43, 0); /* Fondo semitransparente */
    width: 100vw;
    height: auto;
    gap: 13vw;
}
  
  /* Estilo del logo */
  .logo {
    font-size: 8vw;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    width: 30vw;  /* Ajusta el ancho relativo al 50% del ancho del viewport */
    height: auto; /* Mantén la relación de aspecto correcta */
    margin-bottom: 2vh;
    margin-top: 2vh;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Título principal */
  .main-heading {
    font-size: 4vw;
    font-weight: bold;
    margin-bottom: 2vh;
    margin-top: 2vh;
    font-family: 'ChauPhilomeneOne-Regular', sans-serif;
    letter-spacing: 0.3vw;
    text-shadow: 0.1vw 0.1vw 0.2vw rgb(244, 29, 29), -0.1vw -0.1vw 0.2vw rgb(0, 255, 255);
    transition: transform 0.3s ease, text-shadow 0.3s ease; /* Transiciones suaves */
}
  
  /* Descripción */
  .description {
    font-size: 1.8vw;
    margin-bottom: 3vh;
  }
  
  /* Botón de entrada */
  .btn-entrar {
    background-color: #29211d;
    color: white;
    width: 5vw;
    margin-left: 37vw;
    font-family: 'ChauPhilomeneOne-Regular', sans-serif;
    font-size: 4vw;
    border-radius: 12vh;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    flex: auto;
    text-align: center;
    margin-right: auto; /* Empuja el botón al centro */
    text-decoration: none; /* Elimina el subrayado */
  }

  .btn-entrar:hover {
    background-color: #4b3810;
    transform: translateY(-0.5vh); /* Mueve el botón hacia arriba */
    box-shadow: 1vw 1vw 2vw rgba(0, 0, 0, 0.4); /* Mueve la sombra */
  }

  .btn-entrar:active {
    background-color: #30aabb; /* Cambia a un color más oscuro o diferente cuando se presiona */
    transform: translateY(0.5vh); /* Mueve el botón hacia abajo para simular la acción de clic */
    box-shadow: 0.5vw 0.5vw 1vw rgba(0, 0, 0, 0.3); /* Ajusta la sombra durante el clic */
  }

  .btn-info {
    background-color: #29211d;
    color: white;
    width: 6vw;
    height: auto;
    margin-right: 15vw;
    aspect-ratio: 1 / 1; 
    font-family: 'ChauPhilomeneOne-Regular', sans-serif;
    text-decoration: none;
    border-radius: 50%;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    margin-left: auto; /* Empuja este botón al extremo derecho */

    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .btn-info:hover {
    background-color: #4b3810;
    transform: translateY(-0.5vh); /* Mueve el botón hacia arriba */
    box-shadow: 1vw 1vw 2vw rgba(0, 0, 0, 0.4); /* Mueve la sombra */
  }

  .btn-info:active {
    background-color: #30aabb; /* Cambia a un color más oscuro o diferente cuando se presiona */
    transform: translateY(0.5vh); /* Mueve el botón hacia abajo para simular la acción de clic */
    box-shadow: 0.5vw 0.5vw 1vw rgba(0, 0, 0, 0.3); /* Ajusta la sombra durante el clic */
}
  
.icon-image {
  width: 60%; /* Ajusta el tamaño de la imagen */
  height: 60%;
}


.footer__copy {
  font-family: 'ChauPhilomeneOne-Regular', sans-serif; /* Cambia por la fuente que prefieras */
  color: #ffffff; /* Cambia el color a blanco */
  font-size: 1vw; /* Ajusta el tamaño de la fuente */
  text-align: center; /* Centra el texto horizontalmente */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra para contraste */
  position: fixed; /* Fija el texto en la pantalla */
  bottom: 8px; /* Ajusta la distancia desde la parte inferior */
  left: 0; /* Alinea con el borde izquierdo */
  width: 100%; /* Ocupa todo el ancho de la pantalla */
  background-color: rgba(0, 0, 0, 0); /* Fondo semitransparente opcional */
  padding: 10px 0; /* Añade espacio arriba y abajo del texto */
  z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
}

.ai-icon {
  height: 2vw; /* Mismo tamaño que la fuente del footer */
  width: auto; /* Mantiene la proporción */
  vertical-align: middle; /* Alinea verticalmente con el texto */
  margin-left: 0.2vw; /* Pequeño espacio entre "by" y el icono */
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5)); /* Sombra similar al texto */
  /*box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);*/ /* Sombra similar al texto */
}