/* Ilustración SVG axonométrica con animación de "despiece" al hacer scroll */
.drawing {
  width: min(86vw, 1060px);
  height: min(72vh, 720px);
  overflow: visible;
  filter: drop-shadow(0 18px 14px rgba(45, 73, 84, .09));
}

.drawing * {
  vector-effect: non-scaling-stroke;
}

.main-stroke {
  fill: #193440;
  fill-opacity: .67;
  stroke: var(--line);
  stroke-width: 1.4;
}

.glass {
  fill: #78b7c4;
  fill-opacity: .16;
  stroke: var(--line);
  stroke-width: 1.25;
}

.detail {
  fill: none;
  stroke: #b0d0d5;
  stroke-width: .85;
}

.thin {
  fill: none;
  stroke: #86aeb6;
  stroke-width: .55;
  opacity: .72;
}

.shade {
  fill: url(#hatch);
  opacity: .55;
}

.node {
  fill: #17313c;
  stroke: #c1e0e2;
  stroke-width: 1;
}

.guide {
  fill: none;
  stroke: #9aafb5;
  stroke-width: .7;
  stroke-dasharray: 4 5;
}

.module {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .05s linear;
}

.guide-lines {
  opacity: 0;
  transition: opacity .18s;
}

.drawing.exploded .guide-lines {
  opacity: 1;
}

@media (max-width: 720px) {
  .drawing {
    width: 125vw;
    height: 60vh;
    transform: translateX(5vw);
  }
}

@media (max-width: 480px) {
  .drawing {
    width: 142vw;
    height: 55vh;
    transform: translateX(9vw);
  }
}