/* Un trazo coral enfatiza la frase del titular y conserva las letras claras. */
.version-three .headline-accent {
  display: inline-block;
  position: relative;
  isolation: isolate;
}

.version-three .headline-accent::after {
  content: '';
  position: absolute;
  left: 16%;
  right: 6%;
  bottom: -.095em;
  height: .22em;
  z-index: -1;
  pointer-events: none;
  background: url('documentacion-assets/crayola-titular.svg') center / 100% 100% no-repeat;
  opacity: .85;
}

.version-serif .headline-accent::after {
  bottom: -.27em;
}

.version-serif .portada-heading h1 {
  margin-bottom: calc(.27em + 18px);
}

/* La textura acompaña el recorrido ilustrado desde una posición baja. */
.version-three .path-wrap::before {
  content: '';
  position: absolute;
  top: 84px;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: -2;
  pointer-events: none;
  background: url('documentacion-assets/crayola-recorrido.svg') center / 100% 100% no-repeat;
  opacity: .65;
}

.version-three .path-art {
  background: transparent;
}

.version-three .path-art img {
  mix-blend-mode: multiply;
}

.version-three .topics,
.version-three .featured {
  position: relative;
}

.version-three .topics::after,
.version-three .featured::after {
  content: '';
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 0;
  height: 24px;
  pointer-events: none;
  background: url('documentacion-assets/crayola-separador.svg') center / 100% 24px no-repeat;
  opacity: .45;
}

.version-three .featured::after {
  transform: scaleX(-1);
}

@media (max-width: 850px) {
  .version-three .path-wrap::before {
    top: 70px;
    height: 100px;
  }

  .version-three .topics::after,
  .version-three .featured::after {
    left: 30px;
    right: 30px;
  }
}

@media (max-width: 600px) {
  .version-three .path-wrap::before {
    top: 65px;
    bottom: 65px;
    width: 125px;
    height: auto;
    background-image: url('documentacion-assets/crayola-recorrido-movil.svg');
    opacity: .45;
  }

  .version-three .topics::after,
  .version-three .featured::after {
    left: 23px;
    right: 23px;
    height: 18px;
    background-size: 100% 18px;
  }
}

@media (max-width: 360px) {
  .version-three .path-wrap::before {
    width: 100px;
  }
}

@media (min-width: 1280px) {
  .version-three .path-wrap::before {
    top: calc(var(--scene-height) * .455);
    height: calc(var(--scene-height) * .65);
  }
}