/* ══════════════════════════════════════════════════
   VaciaTuPiso — Preloader
   ══════════════════════════════════════════════════ */

.vtp-preloader{
  position: fixed; inset: 0; z-index: 99999;
  background: #ffffff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 44px;
  transition: opacity .5s ease-out, visibility 0s linear .5s;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.vtp-preloader.is-done{
  opacity: 0; visibility: hidden;
}

.vtp-scene{
  position: relative;
  width: min(560px, 90vw);
  aspect-ratio: 560 / 220;
}

/* Carretera */
.vtp-road{
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #111 10%, #111 90%, transparent);
  opacity: 0.15;
}
.vtp-road::before{
  content:"";
  position: absolute; top: 0; left: 0;
  width: 300%; height: 100%;
  background: repeating-linear-gradient(to right,
    #0e6b2c 0 32px,
    transparent 32px 80px
  );
  animation: vtpRoadMove .55s linear infinite;
}
@keyframes vtpRoadMove{
  0%   { transform: translateX(-112px); }
  100% { transform: translateX(0); }
}

/* Polvo */
.vtp-dust{
  position: absolute;
  right: 8%;
  bottom: 6px;
  width: 60px; height: 30px;
  pointer-events: none;
}
.vtp-dust span{
  position: absolute; bottom: 0;
  width: 12px; height: 12px;
  background: rgba(14,107,44,0.16);
  border-radius: 50%;
  animation: vtpDustPuff 1.4s ease-out infinite;
}
.vtp-dust span:nth-child(1){ left: 0;   animation-delay: 0s; }
.vtp-dust span:nth-child(2){ left: 18px; animation-delay: .45s; }
.vtp-dust span:nth-child(3){ left: 36px; animation-delay: .9s; }
@keyframes vtpDustPuff{
  0%   { transform: translate(0, 0) scale(.3); opacity: .5; }
  60%  { transform: translate(22px, -6px) scale(1); opacity: .3; }
  100% { transform: translate(40px, -14px) scale(1.4); opacity: 0; }
}

/* Furgoneta */
.vtp-van-wrap{
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 78%;
  animation: vtpVanBounce 1.2s ease-in-out infinite;
}
@keyframes vtpVanBounce{
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-1.5px); }
}
.vtp-van{ width: 100%; height: auto; display: block; }

.vtp-spokes{
  transform-box: fill-box;
  transform-origin: center;
  animation: vtpWheelSpin .35s linear infinite;
}
@keyframes vtpWheelSpin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Copy */
.vtp-caption{
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.vtp-caption-tag{
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0e6b2c;
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600;
}
.vtp-caption-tag::before,
.vtp-caption-tag::after{
  content:"";
  width: 28px; height: 1px; background: #0e6b2c; opacity:.5;
}
.vtp-caption-main{
  font-weight: 500;
  font-size: 16px;
  color: #333;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 8px;
}
.vtp-caption-main b{ color: #0e6b2c; font-weight: 700; }

.vtp-dots{
  display: inline-flex; gap: 5px;
  margin-left: 4px;
}
.vtp-dots span{
  width: 5px; height: 5px; border-radius: 50%; background: #0e6b2c;
  opacity: .3;
  animation: vtpDotPulse 1.3s ease-in-out infinite;
}
.vtp-dots span:nth-child(2){ animation-delay: .22s; }
.vtp-dots span:nth-child(3){ animation-delay: .44s; }
@keyframes vtpDotPulse{
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce){
  .vtp-road::before, .vtp-van-wrap, .vtp-spokes, .vtp-dust span, .vtp-dots span{
    animation: none;
  }
}