* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
  /* margin: 50px; */
}

/* Transition */
/* 
    Sirve para no hacer cambios bruscos en la UI
    ux / ui 
*/
.btn-inicio {
  padding: 12px 16px;
  background-color: forestgreen;
  border: none;
  border-radius: 12px;
  /* transition: ; */
  transition: all 0.3s linear;
}
.btn-inicio:hover {
  background-color: greenyellow;
  padding: 50px;
  font-size: 50px;
}

.input {
  outline: none;
  border: 1px solid red;
  transition: all 0.1s ease-in;
}

.input:focus {
  outline: none;
  border: 3px solid crimson;
}

.caja {
  margin-top: 50px;
  width: 200px;
  height: 200px;
  background-color: peru;
  transition: all 0.3s linear;
}

.caja:hover {
  /* transform: scale(1.5); */
  transform: scaleZ(1.5);
}

.img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  transition: all 0.2s linear;
  cursor: pointer;
}
.img:hover {
  transform: scale(1.3);
}

.caja2 {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: peru;
  transition: all 0.2s linear;
  border-radius: 16px;
}

.caja2:hover {
  transform: rotate(120deg);
  border-radius: 50%;
  background-color: cadetblue;
}

/* Animation */

/* ------30%---------50%----------80%------- */

.caja3 {
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background-color: #58a0c8;
  animation: parpadear 0.5s linear infinite alternate;
  margin-bottom: 50px;
}
/* 113F67 oscuro */
/* 34699A medio */
/* 58A0C8 claro */
@keyframes parpadear {
  0% {
    background-color: #58a0c8;
  }
  50% {
    background-color: #34699a;
  }
  100% {
    background-color: #113f67;
  }
}

.spinner {
  width: 50px;
  height: 50px;
  border: 8px dotted slateblue;
  border-radius: 50%;
  animation: spinner 1.5s linear infinite;
  /* border-top-color: white; */
}
.ocultar {
  width: 100px;
  height: 100px;
  background-color: salmon;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-color: #cc0000 #ffcccc; /* thumb color / track color */
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.bola {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff3d00;
  position: relative;
  animation: mover 2s ease-in-out infinite alternate;
}
@keyframes mover {
  0% {
    left: -50px;
  }
  100% {
    left: calc(100vw); /* se detiene antes del borde derecho */
  }
}