/* ============================================================
   Widget Steps — TechMaleon
   ============================================================ */

/* ── Custom Properties (definidas en el wrapper) ────────────── */
.ws-steps-wrapper {
  --ws-primary:            #2874fd;
  --ws-surface:            #F1F5FA;
  --ws-shadow:             0px 0px 15px 0px rgba(117, 117, 117, 0.11);
  --ws-track-base:         #e2e8f0;
  --ws-fill-color-start:   #2874fd;
  --ws-fill-color-end:     #5a9bff;
  --ws-track-h:            3px;
  --ws-indicator-size:     48px;

  box-sizing: border-box;
  width: 100%;
}

/* ── Contenedor de pasos ─────────────────────────────────────── */
/*
  Estructura DOM:
  .ws-steps (position: relative)
    .ws-step            ← flex item
    .ws-step
    .ws-step
    ...
    .ws-timeline-track-row   ← absolute, generado por JS entre filas
*/
.ws-steps {
  position:         relative;  /* contiene los tracks absolutos */
  display:          flex;
  flex-direction:   row;
  flex-wrap:        wrap;      /* habilita cuadrícula multi-fila */
  align-items:      flex-start;
  width:            100%;
}

/* ── Paso individual ────────────────────────────────────────── */
.ws-step {
  /* Elementor sobreescribe con calc(100% / N) según columnas */
  flex:            1 1 0;
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  box-sizing:      border-box;
}

/* ── Línea de tiempo: filas generadas por JS ─────────────────── */
.ws-timeline-track-row {
  position:         absolute;
  background-color: var(--ws-track-base, #e2e8f0);
  border-radius:    4px;
  overflow:         hidden;
  z-index:          0;
  pointer-events:   none;
}

/* Relleno animado (horizontal por defecto) */
.ws-track-fill {
  position:   absolute;
  inset:      0;
  width:      0%;
  height:     100%;
  background: linear-gradient(
    90deg,
    var(--ws-fill-color-start, #2874fd) 0%,
    var(--ws-fill-color-end,   #5a9bff) 100%
  );
  border-radius: inherit;
  transition:    none;
}

/* Relleno vertical (mobile) */
.ws-timeline-track-row--v .ws-track-fill {
  width:      100%;
  height:     0%;
  background: linear-gradient(
    180deg,
    var(--ws-fill-color-start, #2874fd) 0%,
    var(--ws-fill-color-end,   #5a9bff) 100%
  );
}

/* ── Indicador: sobre la línea ──────────────────────────────── */
.ws-indicator {
  position:         relative;
  z-index:          1;          /* la línea pasa por detrás del círculo */
  width:            var(--ws-indicator-size, 48px);
  height:           var(--ws-indicator-size, 48px);
  min-width:        var(--ws-indicator-size, 48px);
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        18px;
  font-weight:      600;
  line-height:      1;
  flex-shrink:      0;
  background-color: var(--ws-surface, #F1F5FA);
  color:            var(--ws-primary, #2874fd);
  box-shadow:       var(--ws-shadow);
  transition:       background-color 0.3s ease,
                    color            0.3s ease,
                    transform        0.3s ease,
                    box-shadow       0.3s ease;
}

.ws-step.is-active .ws-indicator {
  background-color: var(--ws-primary, #2874fd);
  color:            #ffffff;
  box-shadow:       0 4px 20px rgba(40, 116, 253, 0.35);
  transform:        scale(1.08);
}

.ws-indicator i,
.ws-indicator svg {
  display:     block;
  line-height: 1;
}

.ws-number {
  font-weight: 700;
  line-height: 1;
}

/* ── Pulso en indicador activo ──────────────────────────────── */
@keyframes ws-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(40, 116, 253, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(40, 116, 253, 0);    }
  100% { box-shadow: 0 0 0 0    rgba(40, 116, 253, 0);    }
}

.ws-step.is-active .ws-indicator {
  animation: ws-pulse 1.8s ease-out infinite;
}

/* ── Contenido (heading + descripción) ──────────────────────── */
.ws-content {
  display:         block;       /* text-align cascade correcto a hijos */
  align-self:      stretch;
  min-width:       0;
  word-break:      break-word;
  overflow-wrap:   break-word;
  box-sizing:      border-box;
  padding:         0 4px;
  text-align:      center;
}

.ws-heading {
  margin:      12px 0 4px;
  font-size:   1rem;
  font-weight: 600;
  line-height: 1.3;
  color:       #1a202c;
  transition:  color 0.3s ease;
}

.ws-step.is-active .ws-heading {
  color: var(--ws-primary, #2874fd);
  transition: color 0.3s ease;
}

.ws-description {
  margin:      0;
  font-size:   0.875rem;
  line-height: 1.6;
  color:       #64748b;
  transition:  color 0.3s ease;
}

.ws-step.is-active .ws-description {
  color: #334155;
}

/* ── Desactivar coloreo de contenido ────────────────────────── */
/* Cuando el usuario desactiva "Colorear contenido al activar" */
.ws-no-content-active .ws-step.is-active .ws-heading {
  color: inherit;
  animation: none;
}

.ws-no-content-active .ws-step.is-active .ws-description {
  color: inherit;
}

/* ── DISEÑO VERTICAL (móvil) ────────────────────────────────── */
@media (max-width: 767px) {

  .ws-step {
    flex-direction: row;        /* indicador izq, contenido der */
    align-items:    flex-start;
    gap:            12px;
  }

  /* En móvil el contenido se alinea al inicio */
  .ws-content {
    text-align: left;
    padding:    0;
  }

  .ws-heading {
    margin-top: 0;
  }
}

/* ── Editor Elementor: muestra la línea aunque no anime ─────── */
.elementor-editor-active .ws-track-fill {
  transition: none !important;
}