/*movimiento de logo*/
.logo {
  height: 100px;
  transform-style: preserve-3d;
  animation: spin 5s linear infinite; /* Aquí configuramos la animación */
}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

/*estilo texto*/

@keyframes changeColor {
  0% {
    color: #FB9F0F;
  }
  50% {
    color: #FF5733;
  }
  100% {
    color: #FB9F0F;
  }
}

.p {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  animation: changeColor 3s infinite;
}

/*imagen fondo */
#caja{
  background-position: center;
  background-size: cover;
}
.header-text {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.5rem; 
      font-weight: 700; 
      color: #FFFFFF; 
      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
      letter-spacing: 0.5px; 
      margin: 1rem 0;
      text-transform: uppercase;
    }