/* LOADER PANTALLA COMPLETA */
#loader {
  position: fixed;
  inset: 0;
  background: #f2f5f8;
  z-index: 9999;
  animation: ocultarLoader 12s forwards;
}

/* CONTENIDO OCULTO AL INICIO */
#contenido {
  opacity: 0;
  animation: mostrarContenido 1s ease forwards;
  animation-delay: 12s;
}

/* ESCENA */
.escena {
  position: relative;
  width: 100%;
  height: 100%;
}

/* CAMIÓN */
.camion-box {
  position: absolute;
  bottom: 80px;
  left: -400px;
  animation: moverCamion 3s ease-out forwards;
}

.camion {
  width: 1000px;
}

/* PUERTA */
.puerta {
  position: absolute;
  right: 45px;
  top: 65px;
  width: 35px;
  height: 65px;
  background: rgba(0,0,0,0.3);
  transform-origin: right;
  animation: abrirPuerta 1s forwards;
  animation-delay: 3s;
}

/* CAJA */
.caja {
  position: absolute;
  right: 45px;
  top: 140px;
  width: 35px;
  height: 35px;
  background: #caa24d;
  opacity: 0;
  animation: caerCaja 5s forwards;
  animation-delay: 4s;
}

/* LOGO */
.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  transform: translate(-50%, -50%) scale(0);
  animation: reboteLogo 1.5s forwards;
  animation-delay: 4.5s;
}

/* ANIMACIONES */
@keyframes moverCamion {
  to {
    left: 50%;
    transform: translateX(-50%);
  }
}

@keyframes abrirPuerta {
  to { transform: rotateY(70deg); }
}

@keyframes caerCaja {
  to {
    top: 200px;
    opacity: 1;
  }
}

@keyframes reboteLogo {
  0% { transform: translate(-50%, -50%) scale(0); }
  60% { transform: translate(-50%, -50%) scale(1.2); }
  80% { transform: translate(-50%, -50%) scale(0.9); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes ocultarLoader {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes mostrarContenido {
  to {
    opacity: 1;
  }
}