body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  font-family: system-ui, sans-serif;
  background-color: #60a0ff;
  color: #fff;
}

.btn-group {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 900px;
}

.boton {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 0;
  min-width: 160px;
  max-width: 320px;
  padding: 30px 60px;
  background: #fff;
  color: #4a8ee9;
  border: 3px solid #d1d9e6;
  border-radius: 50px;
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

.boton:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.boton:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 750px) {
  .btn-group {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    width: 92%;
    max-width: 420px;
    margin-inline: auto;
  }

  .boton {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 15px 30px;
    min-height: 68px;
    font-size: clamp(20px, 6vw, 34px);
    border-radius: 50px;
  }
}

@media (hover: hover) {
  .boton::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.36s ease,
      transform 0.42s cubic-bezier(0.2, 0.9, 0.2, 1);
    pointer-events: none;
    will-change: transform, opacity;
    z-index: -1;
  }

  .boton:hover::before {
    opacity: 0.98;
  }

  #botonWordle::before {
    right: -28px;
    bottom: -22px;
    background-image: url("../assets/index/mando.svg");
    background-position: right bottom;
    transform: translate(28px, 22px) rotate(12deg) scale(0.98);
  }
  #botonWordle:hover::before {
    transform: translate(0, 0) rotate(-6deg) scale(1);
  }
  #botonWordle:focus::before,
  #botonWordle:active::before {
    opacity: 0.98;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  #botonCv::before {
    left: -28px;
    bottom: -22px;
    background-image: url("../assets/index/curriculum.svg");
    background-position: left bottom;
    transform: translate(-28px, 22px) rotate(-12deg) scale(0.98);
  }
  #botonCv:hover::before {
    transform: translate(0, 0) rotate(6deg) scale(1);
  }
  #botonCv:focus::before,
  #botonCv:active::before {
    opacity: 0.98;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}