@keyframes scale-up {
    to { transform: scale(1.5); }
  }
  
  @keyframes fade-away {
    to { opacity: 0; }
  }
  
  section {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
  }
  
  h1 span:first-of-type {
    color: #2B3658;
    padding: 10px;
    font-size: 0.55em;
  }
  
  section:nth-of-type(1) {
    height: 100vh;
  }
  
  section:nth-of-type(2) {
    height: 140vh;
  }
  
  h1 {
    display: grid;
  }
  
  h2 {
    font-size: clamp(2rem, 5vw + 1rem, 6rem);
    text-align: center;
  }
  
  section div {
    width: 800px;
    max-width: 100vw;
    padding: 0 1rem;
  }
  
  :is(h1, h2) {
    font-size: clamp(2.5rem, 7vw + 1rem, 10rem);
    text-align: center;
    line-height: 1;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    width: 100%;
  }
  
  /* reset */
  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }
  /* #22232A */
  body {
    background: #F5F0EA;
    color: #2B3658;
    display: grid;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 700;
    margin: 0;
    min-height: 100dvh;
    overflow-x: hidden;
    place-items: center;
  }
  
    /* Estilo del botón */
    .boton-enlace {
      display: inline-block;
          padding: 10px 20px;
          background-color: #2B3658; /* Color de fondo del botón */
          color: #2B3658; /* Color del texto del botón */
          text-decoration: none; /* Quitar el subrayado del enlace */
          border: none;
          border-radius: 5px;
          cursor: pointer;
          transition: background-color 0.3s;
  }

  /* Cambiar el color de fondo del botón al pasar el cursor sobre él */
      .boton-enlace:hover {
          background-color: #2b36584a; /* Nuevo color de fondo del botón al pasar el cursor */
  }



  .hand {

    filter: invert(6%) sepia(00%) saturate(0%) hue-rotate(10deg) brightness(100%) contrast(100%);

    animation: handAnimation 2s ease-in-out infinite alternate;

    position: fixed;
    top: 50%; /* Centra verticalmente */
    left: 90%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta para centrar completamente */
    width: 60px;
    height: 60px;
    z-index: 999; /* Asegura que esté por encima de otros elementos */
    animation: handAnimation 0.5s ease-in-out infinite alternate;
}

@keyframes handAnimation {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(10px);
    }
}





/* === removing default button style ===*/
.button {
  margin: 0;
  height: auto;
  background: transparent;
  padding: 0;
  border: none;
  cursor: pointer;
}

/* button styling */
.button {
  --border-right: 6px;
  --text-stroke-color: #2B3658;
  --animation-color: #2B3658;
  --fs-size: 3em;
  letter-spacing: 10px;
  text-decoration: none;
  font-size: var(--fs-size);
  font-family: "Arial";
  position: relative;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--text-stroke-color);
}
/* this is the text, when you hover on button */
.hover-text {
  position: absolute;
  box-sizing: border-box;
  content: attr(data-text);
  color: var(--animation-color);
  width: 0%;
  inset: 0;
  border-right: var(--border-right) solid var(--animation-color);
  overflow: hidden;
  transition: 0.5s;
  -webkit-text-stroke: 1px var(--animation-color);
}
/* hover */
.button:hover .hover-text {
  width: 100%;
  filter: drop-shadow(0 0 23px var(--animation-color))
}


/* Estilos para dispositivos móviles */
@media only screen and (max-width: 767px) {

  .hover-text {
    display: none;
  }

  /* Estilo del botón */
  .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #2B3658; /* Color de fondo del botón */
      color: #F5F0EA; /* Color del texto del botón */
      text-decoration: none; /* Quitar el subrayado del enlace */
      border: none;
      border-radius: 20px;
      cursor: pointer;
      transition: background-color 0.3s;
      /* Centrar contenido vertical y horizontalmente */
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: -50%;
  }

  /* Cambiar el color de fondo del botón al pasar el cursor sobre él */
  .button:hover {
          background-color: #2b3658be; /* Nuevo color de fondo del botón al pasar el cursor */
  }


  /* Modificar el tamaño del texto en dispositivos móviles */
  .button .actual-text {
      font-size: 20px; /* Tamaño del texto en dispositivos móviles */
  }
  

  .hand {



    position: fixed;
    top: 80%; /* Centra verticalmente */
    left: 45%; /* Centra horizontalmente */

}


}