@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');

:root {
   --active-color: rgb(41, 112, 160);
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: 'Poppins', sans-serif;
   font-weight: 600;
   transition: background-image 0.6s ease-in-out;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   min-height: 100vh;
}

.circulo {
   color: rgb(0, 0, 0);
   background-color: rgb(255, 255, 255);
   border-radius: 50%;
   width: 32px;
   height: 32px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 3.5px solid rgb(207, 204, 204);
   transition: border 0.4s ease;
}

.active {
   border: 3.5px solid var(--active-color);
}

main {
   display: flex;
   height: 100vh;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
   padding-bottom: 9rem;
}

.cont-progreso {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 500px;
   position: relative;
}
.cont-progreso::before {
   content: '';
   position: absolute;
   height: 5px;
   width: 100%;
   top: 50%;
   transform: translateY(-50%);
   background-color: rgb(207, 204, 204);
   z-index: -1;
}

.barra-progreso {
   position: absolute;
   height: 6px;
   width: 100%;
   top: 50%;
   transform: translateY(-50%);
   background-color: var(--active-color);
   z-index: -1;
   width: 0;
   transition: 0.4s ease;
}

.cont-botones {
   display: flex;
   margin-top: 3rem;
   justify-content: center;
   align-items: center;
   gap: 1.5rem;
}

.btn {
   padding: 0.5rem 2rem;
   background-color: var(--active-color);
   border: none;
   border-radius: 5px;
   overflow: hidden;
   position: relative;
}
.circle {
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: white;
   border-radius: 50%;
   transform: translate(-50%, -50%) scale(0);
   animation: escalar 0.5s ease-out;
}

@keyframes escalar {
   to {
      transform: translate(-50%, -50%) scale(3);
      opacity: 0;
   }
}

img {
   width: 20px;
   filter: invert();
}

.prev {
   transform: rotate(-180deg);
}

.btn:active {
   transform: scale(0.98);
}

.btn:disabled {
   background-color: rgb(89, 131, 160);
   cursor: not-allowed;
}

.btn img {
   pointer-events: none;
}