/* Wrapper para los botones del index */
.index__buttons-wrapper {
  width: 80vw;
  max-width: 80vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  width: 100%;
  min-height: 100dvh;
  background-image: url(/images/fondo.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.index {
  width: 100%;
  min-height: 100dvh;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}

/* HERO */
.index__hero {
  width: 100%;
  max-width: 50rem;
  margin: 0 0 1.5rem 0;
  padding: 0;
  & img {
    width: 60dvw;
    max-width: 20rem;
    margin: 0 auto;
  }
}

/* BOTONES */
.index__buttons {
  width: 100%;
  max-width: 50rem;
  padding-left: 0;
  color: var(--color-secundario);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  z-index: 2;
  cursor: pointer;
}
.index__buttons > :nth-child(1) {
  width: 100%;
  /* Animaciones */
  animation: rotation 2s;
}
.index__buttons > :nth-child(2) {
  width: 90%;
  animation: rotation 2s;
}
.index__buttons > :nth-child(3) {
  width: 65%;
  animation: rotation 2s;
}
/* .index__buttons > :nth-child(4) {
  width: 65%;
  animation: rotation 2s;
}
.index__buttons > :nth-child(5) {
  width: 55%;
  animation: rotation 2s;
}
.index__buttons > :nth-child(6) {
  width: 45%;
  animation: rotation 2s;
} */
.index__buttons-btn {
  width: 100%;
  padding: 0.7rem 0.5rem;
  border-radius: var(--border-radius);
  box-shadow: var(--sombra);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}
.index__buttons-texto {
  font-size: 1.7rem;
}

.easy-index {
  display: flex;
}