.guided-feature--detran {
  --feature-background: #071a35;
  color: #fff;
  background: #071a35;
}

.guided-feature--detran .guided-feature__inner {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4.5vw, 72px);
  padding-block: 72px;
}

.guided-feature--detran h2 {
  color: #fff;
}

.guided-feature--detran .feature-title__acronym {
  letter-spacing: .005em;
  white-space: nowrap;
}

.guided-feature--detran .feature-title__line--accent {
  color: #f45118;
}

.guided-feature--detran .guided-feature__summary {
  max-width: 460px;
  color: #a7b7cc;
}

.detran-availability {
  max-width: 440px;
  margin: 17px 0 0;
  color: #96a9c0;
  font-size: 0.8rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.guided-feature--detran .guided-feature__learn-more {
  max-width: 100%;
  margin-top: 28px;
  color: #fff;
  line-height: 1.6;
  white-space: normal;
}

.guided-feature--detran .guided-feature__learn-more .arrow-icon {
  flex: 0 0 auto;
  color: #f45118;
}

.guided-feature--detran .guided-feature__media::before,
.guided-feature--detran .guided-feature__media::after {
  display: none;
  content: none;
}

.guided-feature__media--detran {
  overflow: visible;
  perspective: 1300px;
}

.detran-bridge {
  width: 100%;
  max-width: 650px;
  aspect-ratio: 65 / 48;
  perspective: 1300px;
  pointer-events: none;
}

.detran-bridge__plane {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translate3d(0, var(--detran-lift, 0px), 0) rotateX(var(--detran-pitch, 4deg)) rotateY(var(--detran-turn, -5deg));
  transform-origin: 50% 52%;
  transform-style: preserve-3d;
}

.detran-bridge__plane::before {
  position: absolute;
  inset: 74% -3% -4%;
  background: radial-gradient(ellipse at center, rgba(21, 63, 109, 0.36), transparent 68%);
  content: "";
  pointer-events: none;
}

.detran-bridge__connections {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.detran-bridge__route,
.detran-bridge__wire {
  stroke-linecap: round;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.detran-bridge__route {
  stroke: #38597b;
  opacity: 0.6;
}

.detran-bridge__wire {
  stroke: #49a5e5;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  opacity: 0.8;
}

.detran-bridge__packet {
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(244, 81, 24, 0.23));
}

.detran-bridge__document {
  fill: #f45118;
  stroke: #ffad7c;
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.detran-bridge__fold {
  fill: none;
  stroke: #ffe6d7;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detran-bridge__panel {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(126, 171, 216, 0.45);
  border-radius: 10px;
  background: linear-gradient(155deg, #173554 0%, #0e2540 37%, #07182e 100%);
  box-shadow: 5px 5px 0 #091f39, 6px 5px 0 rgba(87, 134, 177, 0.45), 12px 22px 24px rgba(0, 8, 21, 0.3);
}

.detran-bridge__panel--origin {
  inset: 8% auto auto 2%;
  width: 34%;
  height: 75%;
}

.detran-bridge__panel--destination {
  inset: 20% 2% auto auto;
  width: 40%;
  height: 72%;
}

.detran-bridge__brand {
  position: absolute;
  top: 12%;
  left: 11%;
  display: block;
  width: 78%;
  height: 11%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.detran-bridge__title {
  position: absolute;
  top: 7.5%;
  left: 12%;
  color: #f4f8fe;
  font-size: clamp(16px, 1.75vw, 24px);
  font-weight: 650;
  letter-spacing: 0.025em;
  line-height: 1.2;
}

.detran-bridge__record,
.detran-bridge__destination {
  position: absolute;
  left: 8%;
  display: flex;
  box-sizing: border-box;
  width: 84%;
  align-items: center;
  gap: 10%;
  padding: 0 8%;
  border: 1px solid rgba(112, 153, 193, 0.25);
  border-radius: 5px;
  background: linear-gradient(120deg, rgba(37, 66, 97, 0.55), rgba(12, 32, 54, 0.75));
  box-shadow: inset 0 1px 0 rgba(190, 218, 247, 0.035);
  color: #e4edf7;
  font-size: clamp(11px, 1.18vw, 16px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.detran-bridge__record {
  height: 18%;
  opacity: calc(0.55 + var(--record-progress, 1) * 0.45);
  transform: translateY(calc((1 - var(--record-progress, 1)) * 8px));
}

.detran-bridge__record[data-detran-record="0"] { top: 31%; }
.detran-bridge__record[data-detran-record="1"] { top: 52%; }
.detran-bridge__record[data-detran-record="2"] { top: 73%; }

.detran-bridge__destination {
  height: 18%;
  gap: 8%;
  padding-inline: 7%;
  font-size: clamp(10px, 1.03vw, 14px);
  white-space: normal;
  opacity: calc(0.55 + var(--destination-progress, 1) * 0.45);
  transform: translateY(calc((1 - var(--destination-progress, 1)) * 8px));
}

.detran-bridge__destination > span {
  min-width: 0;
  text-wrap: balance;
}

.detran-bridge__destination[data-detran-destination="0"] { top: 22%; }
.detran-bridge__destination[data-detran-destination="1"] { top: 40%; }
.detran-bridge__destination[data-detran-destination="2"] { top: 58%; }
.detran-bridge__destination[data-detran-destination="3"] { top: 76%; }

.detran-bridge__icon {
  display: block;
  width: clamp(14px, 2vw, 24px);
  height: auto;
  flex: 0 0 auto;
  fill: none;
  stroke: #b6cbe1;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detran-bridge__destination .detran-bridge__icon {
  width: clamp(11px, 1.55vw, 20px);
}

@media (max-width: 900px) {
  .guided-feature--detran .guided-feature__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-block: 44px 36px;
  }

  .detran-availability {
    max-width: 38rem;
    font-size: 0.75rem;
  }

  .guided-feature__media--detran {
    width: 100%;
  }

  .detran-bridge {
    max-width: 580px;
  }

  .detran-bridge__title {
    font-size: clamp(16px, 3.8vw, 24px);
  }

  .detran-bridge__record {
    gap: 8%;
    padding-inline: 6%;
    font-size: clamp(11px, 2.35vw, 16px);
  }

  .detran-bridge__destination {
    gap: 6%;
    padding-inline: 5%;
    font-size: clamp(10px, 1.95vw, 14px);
  }

  .detran-bridge__icon {
    width: clamp(14px, 3.2vw, 24px);
  }

  .detran-bridge__destination .detran-bridge__icon {
    width: clamp(11px, 2.5vw, 20px);
  }
}

@media (max-width: 600px) {
  .detran-bridge__destination .detran-bridge__icon {
    display: none;
  }
}

@media (max-width: 370px) {
  .detran-bridge__record {
    gap: 5%;
    font-size: 10px;
  }

  .detran-bridge__destination {
    justify-content: center;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detran-bridge__plane {
    transform: none;
  }

  .detran-bridge__record,
  .detran-bridge__destination {
    opacity: 1;
    transform: none;
  }

  .detran-bridge__packet {
    display: none;
  }
}