:root{
  --dtp-loader-z: 99999;
  --dtp-glass: rgba(18, 18, 24, .55);
  --dtp-line: rgba(255,255,255,.18);
  --dtp-line-strong: rgba(255,255,255,.32);
}

.dtp-loader{
  position: fixed;
  inset: 0;
  z-index: var(--dtp-loader-z);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.dtp-loader.is-active{
  opacity: 1;
  pointer-events: auto;
}

.dtp-loader__backdrop{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(900px 600px at 80% 75%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.70));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.dtp-loader__backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px);
  mix-blend-mode: overlay;
  opacity: .35;
}

.dtp-loader__card{
  position: relative;
  width: min(560px, calc(100vw - 40px));
  border-radius: 22px;
  padding: 26px 22px 22px;
  background: var(--dtp-glass);
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}

.dtp-loader__content{
  position: relative;
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

/* LOGO: sin fondo, sin contorno */
.dtp-loader__logo{
  width: min(420px, 80vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.32));
  animation: dtp-logoFloat 1.1s ease-in-out infinite alternate;
}

@keyframes dtp-logoFloat{
  from{ transform: translateY(0) scale(1); }
  to{ transform: translateY(-3px) scale(1.01); }
}

/* RUTAS: solo líneas + trip pequeño moviéndose */
.dtp-loader__routes{
  width: 100%;
  height: 86px;
  position: relative;
  margin-top: 6px;
  opacity: .95;
}

.dtp-loader__routes svg{
  width: 100%;
  height: 100%;
  display:block;
}

.dtp-path{
  fill: none;
  stroke: var(--dtp-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  animation: dtp-dash 1.35s linear infinite;
}

.dtp-path--strong{
  stroke: var(--dtp-line-strong);
  stroke-dasharray: 14 12;
  animation-duration: 1.0s;
}

@keyframes dtp-dash{
  to{ stroke-dashoffset: -60; }
}

/* Trip pequeño sobre la ruta */
.dtp-tripMover{
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.35));
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce){
  .dtp-loader, .dtp-loader *{
    animation: none !important;
    transition: none !important;
  }
}