/* =========================================================
   PROCESS STEPS · TRAVEL NOW
========================================================= */

#travelingDotProcess {
  position: relative;
  padding: 72px 0;
  overflow: hidden;

  background:
    radial-gradient(circle at top, rgba(78,150,200,.25), transparent 45%),
    linear-gradient(135deg, #031b35, #062947);

  color: #fff;
}

#travelingDotProcess .procsserv {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 48px);
}

/* =========================================================
   HEADER
========================================================= */

#travelingDotProcess .proceso-servicios {
  margin-bottom: 56px;
}

#travelingDotProcess .proceso-servicios h2 {
  color: #fff;
}

#travelingDotProcess .steps {
  max-width: 720px;
  margin: 24px auto 0;
  padding-left: 20px;

  text-align: left;

  color: rgba(255,255,255,.72);
}

/* =========================================================
   WRAP
========================================================= */

#travelingDotProcess .process-wrap {
  position: relative;
  padding-top: 24px;
}
/* =========================================================
   SVG PATH
========================================================= */

#travelingDotProcess .path-svg {
  position: absolute;

  left: 6%;
  top: 38px;

  width: 88%;
  height: 96px;

  max-width: none !important;

  overflow: visible;

  z-index: 1;

  pointer-events: none;
}

/* línea tenue base */

#travelingDotProcess .path-base {
  fill: none;

  stroke: rgba(255,255,255,.12);

  stroke-width: 2;

  stroke-linecap: round;
}

/* línea animada */

#travelingDotProcess .path-active {
  fill: none;

  stroke: url(#travelNowProcessGrad);

  stroke-width: 4;

  stroke-linecap: round;

  stroke-dasharray: 1;
  stroke-dashoffset: 1;

  opacity: 0;

  filter:
    drop-shadow(0 0 10px rgba(81,214,199,.85))
    drop-shadow(0 0 22px rgba(81,214,199,.45));
}

/* inicia dibujo */

#travelingDotProcess.is-animating .path-active {
  opacity: 1;

  animation:
    processDrawPath 3.8s cubic-bezier(.65,0,.35,1) forwards;
}

/* queda dibujada */

#travelingDotProcess.is-complete .path-active {
  opacity: 1;

  stroke-dashoffset: 0;
}

@keyframes processDrawPath {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* =========================================================
   TRAVEL DOT
========================================================= */

#travelingDotProcess .travel-dot {
  position: absolute;

  left: 6%;
  top: 39px;

  width: 16px;
  height: 16px;

  border-radius: 999px;

  background: #51d6c7;

  box-shadow:
    0 0 12px #51d6c7,
    0 0 28px rgba(81,214,199,.95);

  offset-path: path("M 20 50 C 160 0, 250 100, 380 50 S 600 0, 760 50 S 940 100, 1080 50");

  offset-distance: 0%;

  opacity: 0;

  z-index: 2;

  pointer-events: none;
}

#travelingDotProcess.is-animating .travel-dot {
  animation:
    processTravelDot 3.8s cubic-bezier(.65,0,.35,1) forwards;
}

@keyframes processTravelDot {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  6% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

/* =========================================================
   GRID
========================================================= */

#travelingDotProcess .proceso-steps {
  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;
}

#travelingDotProcess .proceso-step {
  min-width: 0;
  text-align: center;
  cursor: pointer;
}

/* =========================================================
   STEP CIRCLE
========================================================= */

#travelingDotProcess .step-circle {
  width: 68px;
  height: 68px;

  margin: 0 auto 18px;

  border-radius: 999px;

  display: grid;
  place-items: center;

  font-size: 1.35rem;

  color: rgba(255,255,255,.45);

  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), rgba(255,255,255,.04) 60%),
    rgba(4,40,72,.95);

  border: 1px solid rgba(255,255,255,.18);

  box-shadow:
    0 0 0 8px rgba(255,255,255,.04);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

#travelingDotProcess .step-circle i {
  color: rgba(255,255,255,.45);

  transition:
    color .35s ease,
    transform .35s cubic-bezier(.2,.8,.2,1),
    filter .35s ease;
}

/* =========================================================
   COMPLETE STATE
========================================================= */

#travelingDotProcess .proceso-step.is-complete .step-circle {
  border-color: rgba(81,214,199,.75);

  background:
    radial-gradient(circle at 30% 25%, rgba(81,214,199,.42), rgba(46,159,145,.12) 60%),
    rgba(4,40,72,.95);

  box-shadow:
    0 0 0 8px rgba(46,159,145,.10),
    0 0 34px rgba(81,214,199,.45);

  transform: translateY(-7px) scale(1.06);
}

#travelingDotProcess .proceso-step:nth-child(1).is-complete .step-circle i {
  color: #51d6c7;
}

#travelingDotProcess .proceso-step:nth-child(2).is-complete .step-circle i {
  color: #28f265;
}

#travelingDotProcess .proceso-step:nth-child(3).is-complete .step-circle i {
  color: #ffa908;
}

#travelingDotProcess .proceso-step:nth-child(4).is-complete .step-circle i {
  color: #ff0000;
}

#travelingDotProcess .proceso-step.is-complete .step-circle i {
  transform: scale(1.12);

  filter:
    drop-shadow(0 0 6px rgba(81,214,199,.85))
    drop-shadow(0 0 16px rgba(81,214,199,.65));
}

/* =========================================================
   COMPLETE TEXT HIGHLIGHT
========================================================= */

#travelingDotProcess .proceso-step h4,
#travelingDotProcess .proceso-step p {
  transition:
    color .35s ease,
    opacity .35s ease,
    transform .35s ease,
    text-shadow .35s ease;
}

#travelingDotProcess .proceso-step.is-complete h4 {
  color: #ffffff;
  transform: translateY(-3px);
  text-shadow:
    0 0 10px rgba(81,214,199,.45),
    0 0 22px rgba(81,214,199,.28);
}

#travelingDotProcess .proceso-step.is-complete p {
  color: rgba(255,255,255,.92);
  opacity: 1;
  transform: translateY(-2px);
  text-shadow:
    0 0 8px rgba(255,255,255,.16);
}

/* color del título según paso */
#travelingDotProcess .proceso-step:nth-child(1).is-complete h4 {
  color: #51d6c7;
}

#travelingDotProcess .proceso-step:nth-child(2).is-complete h4 {
  color: #28f265;
}

#travelingDotProcess .proceso-step:nth-child(3).is-complete h4 {
  color: #ffa908;
}

#travelingDotProcess .proceso-step:nth-child(4).is-complete h4 {
  color: #ff6b6b;
}

/* hover también sobre texto */
#travelingDotProcess .proceso-step:hover h4 {
  color: #ffffff;
  transform: translateY(-4px);
  text-shadow:
    0 0 12px rgba(81,214,199,.65),
    0 0 28px rgba(81,214,199,.35);
}

#travelingDotProcess .proceso-step:hover p {
  color: #ffffff;
  transform: translateY(-3px);
}
/* =========================================================
   HOVER
========================================================= */

#travelingDotProcess .proceso-step:hover .step-circle {
  transform: translateY(-8px) scale(1.08);

  border-color: rgba(81,214,199,.9);

  box-shadow:
    0 0 0 10px rgba(46,159,145,.12),
    0 0 42px rgba(81,214,199,.55);
}

#travelingDotProcess .proceso-step:hover .step-circle i {
  color: #fff;

  transform: scale(1.18) rotate(-6deg);

  filter:
    drop-shadow(0 0 10px rgba(81,214,199,1))
    drop-shadow(0 0 22px rgba(81,214,199,.8));
}

/* =========================================================
   TEXT
========================================================= */

#travelingDotProcess .proceso-step h4 {
  color: #fff;

  font-size: .98rem;

  line-height: 1.2;

  margin-bottom: 10px;
}

#travelingDotProcess .proceso-step p {
  max-width: 240px;

  margin: 0 auto;

  font-size: .88rem;

  color: rgba(255,255,255,.68);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {
  #travelingDotProcess {
    padding: 48px 0;
  }

  #travelingDotProcess .proceso-servicios {
    margin-bottom: 28px;
  }

  #travelingDotProcess .steps {
    font-size: .85rem;
  }

  #travelingDotProcess .proceso-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  #travelingDotProcess .proceso-step {
    padding: 16px 10px;

    border-radius: 20px;

    background: rgba(255,255,255,.075);

    border: 1px solid rgba(255,255,255,.09);
  }

  #travelingDotProcess .step-circle {
    width: 52px;
    height: 52px;

    font-size: 1rem;

    margin-bottom: 12px;
  }

  #travelingDotProcess .proceso-step h4 {
    font-size: .82rem;
  }

  #travelingDotProcess .proceso-step p {
    font-size: .74rem;
  }

  /* ocultamos path en mobile */

  #travelingDotProcess .path-svg,
  #travelingDotProcess .travel-dot {
    display: none;
  }
}