/* ======================================================
   PROCESO – TIMELINE EDITORIAL SINTEGRAD (FINAL)
   ====================================================== */

/* ---------- CONTENEDOR GENERAL ---------- */
.process-timeline {
  position: relative;
  padding: clamp(6rem, 10vw, 9rem) 1.5rem;
  background: #000;
  overflow: hidden;
}

/* ---------- LUZ EDITORIAL ---------- */
.process-timeline::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  height: 120%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 162, 255, 0.18) 0%,
    rgba(0, 80, 160, 0.10) 35%,
    rgba(0, 0, 0, 0) 70%
  );
  filter: blur(60px);
}

.process-timeline::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 70%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(165, 110, 255, 0.14) 0%,
    rgba(120, 70, 200, 0.08) 40%,
    rgba(0, 0, 0, 0) 75%
  );
  filter: blur(70px);
}

/* ---------- HEADER ---------- */
.process-timeline__header {
  max-width: 720px;
  margin-bottom: 5rem;
  position: relative;
  z-index: 2;
}

.process-timeline__header h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.process-timeline__header p {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.75;
  max-width: 520px;
}

/* ---------- HEADER DESKTOP ---------- */
@media (min-width: 1024px) {
  .process-timeline__header {
    max-width: 1200px;
    margin-bottom: 6rem;
  }

  .process-timeline__header p {
    max-width: 1200px;
    font-size: 1.25rem;
    line-height: 1.55;
    opacity: 0.88;
    color: rgba(255,255,255,0.9);
  }
}

/* ---------- STEPS ---------- */
.process-timeline__steps {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  z-index: 2;
}

.process-timeline__steps::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0.35),
    rgba(255,255,255,0)
  );
  transform: translateX(-50%);
}

/* ---------- STEP ---------- */
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3.5rem 0;
}

.process-step__icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  z-index: 3;
  background: rgba(15,15,15,0.9);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15),
    0 0 24px rgba(0,0,0,0.6);
}

/* Variantes */
.step-blue   { color:#00A2FF; box-shadow:0 0 0 1px rgba(0,162,255,.35),0 0 22px rgba(0,162,255,.35);}
.step-purple{ color:#A56EFF; box-shadow:0 0 0 1px rgba(165,110,255,.35),0 0 22px rgba(165,110,255,.35);}
.step-green { color:#2ECC40; box-shadow:0 0 0 1px rgba(46,204,64,.35),0 0 22px rgba(46,204,64,.35);}
.step-gold  { color:#F5C77A; box-shadow:0 0 0 1px rgba(245,199,122,.35),0 0 22px rgba(245,199,122,.35);}

/* ---------- CONTENIDO ---------- */
.process-step__content {
  max-width: 420px;
}

.process-step__content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.process-step__content p {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.8;
}

.process-step:nth-child(odd) .process-step__content {
  grid-column: 1;
  text-align: right;
  margin-left: auto;
  padding-right: 3.5rem;
}

.process-step:nth-child(even) .process-step__content {
  grid-column: 2;
  padding-left: 3.5rem;
}

/* ======================================================
   SHRINK / EXPAND – PROCESO COMPLETO
   ====================================================== */

/* Contenedor de pasos 4–6 */
.process-more {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.8s ease,
    opacity 0.4s ease;
}

/* Estado expandido */
.process-timeline.is-expanded .process-more {
  max-height: 3000px; /* seguro, no limita */
  opacity: 1;
}

/* ======================================================
   CTA DE PROCESO – EXPLORACIÓN
   ====================================================== */

.process-cta {
  margin: 4rem auto 0;
  text-align: center;
}

.process-cta__text {
  max-width: 520px;
  margin: 0 auto 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.8;
}

.process-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  text-decoration: none;
  transition: all 0.25s ease;
}

.process-cta__button:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
}

/* ======================================================
   MOBILE
   ====================================================== */
@media (max-width: 768px) {

  .process-timeline {
    padding: 5rem 1.25rem;
  }

  .process-timeline__steps::before {
    left: 24px;
    transform: none;
  }

  .process-step {
    grid-template-columns: 1fr;
    padding-left: 3.5rem;
  }

  .process-step__icon {
    left: 24px;
    transform: none;
  }

  .process-step__content {
    padding: 0 !important;
    margin: 0;
    text-align: left !important;
  }
}
/* ======================================================
   PROCESO – CONTENIDO EXPANDIBLE (4–6)
   ====================================================== */

.process-more {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.8s ease,
    opacity 0.6s ease;
}

/* Estado expandido */
.process-more.is-expanded {
  max-height: 2000px; /* suficiente para 3 pasos */
  opacity: 1;
}
/* ======================================================
   PROCESO – AJUSTE DE FLUJO CTA / EXPAND
   ====================================================== */

.process-cta--editorial {
  margin: 4rem 0 5rem;
  position: relative;
  z-index: 2;
}

.process-more.is-expanded {
  margin-top: 2rem;
}