/* ══════════════════════════════
   LABEL-TITLE (ex .subtitle)
══════════════════════════════ */
.label-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ══════════════════════════════
   SECTION PROCESS
══════════════════════════════ */
.section-process {
  width: 100%;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.timeline-wrapper {
  position: relative;
  width: 100%;
  margin-top: 70px;
}

/* Línea horizontal — oculta en mobile */
.timeline-line {
  display: none;
  position: absolute;
  top: 34px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--brand-hover);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
}

/* La animación solo corre cuando la sección es visible */
.section-process.is-visible .timeline-line {
  animation: lineGrow 1s ease forwards;
}

/* ── Steps grid ── */
.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 50px;
  position: relative;
  z-index: 2;
}

/* Mobile: 2 por fila */
.step {
  display: flex;
  flex-direction: column;
  align-items: start;
  /*width: calc((100% - 26px * 2) / 3); */ /* 3 columnas con 2 gaps */
  width: calc((100% - 26px * 2) / 2); /* 3 columnas con 2 gaps */
  opacity: 0;
  transform: translateY(25px) scale(0.9);
}

/* Animación solo cuando visible */
.section-process.is-visible .step {
  animation: showStep 0.5s ease forwards;
}

.section-process.is-visible .step:nth-child(1) { animation-delay: 0.2s; }
.section-process.is-visible .step:nth-child(2) { animation-delay: 0.4s; }
.section-process.is-visible .step:nth-child(3) { animation-delay: 0.6s; }
.section-process.is-visible .step:nth-child(4) { animation-delay: 0.8s; }
.section-process.is-visible .step:nth-child(5) { animation-delay: 1.0s; }
.section-process.is-visible .step:nth-child(6) { animation-delay: 1.2s; }

/* ── Círculo ── */
.circle {
  width: 50%;         /* ocupa el ancho del .step */
  aspect-ratio: 1 / 1; /* siempre redondo */
  border-radius: 50%;
  border: 8px solid var(--brand-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;    /* recorta la imagen dentro */
  background: var(--brand-hover);
  margin-bottom: 12px;
  transition: 0.3s ease;
}

/* Imagen dentro del círculo */
.circle img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* imágenes sin fondo: contain para no recortar */
  /*padding: 10px;   */    /* respiro visual */
  filter: brightness(0) invert(1);
}

/* Ícono de fallback (Font Awesome) */
.circle i { font-size: 24px; }

/* Último paso: color principal */
.step:last-child .circle {
  border-color: var(--brand);
  background: var(--brand);
}

/* ── Label del paso ── */
.step-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
 /* text-align: center;*/
}

.step-description {
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
 /* text-align: center;*/
}



/* ── Texto inferior ── */
/*.process-text {
  margin-top: 56px;
  text-align: center;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  opacity: 0;
}

.section-process.is-visible .process-text {
  animation: fadeText 1s ease forwards;
  animation-delay: 1.5s;
}*/

/* ══════════════════════════════
   DESKTOP
══════════════════════════════ */
@media (min-width: 768px) {
  .section-process { padding: 80px 0; }

  .timeline-line { display: block; }

  .steps {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0; /* space-between maneja la distancia */
  }

  /* Cada step ocupa un porcentaje proporcional */
  .step {
    width: 20%;   /* 6 items → ~14% cada uno deja espacio visual */
  }

  .circle { max-width: 90px; } /* tope para que no crezcan demasiado */

.step {

  align-items: center;
 
}

  /* ── Label del paso ── */
.step-label {
  font-size: 18px;
  font-weight: 600;

  text-align: center;
}

.step-description {
  font-size: 16px;
  font-weight: 400;

  text-align: center;
}
}

/* ══════════════════════════════
   KEYFRAMES
══════════════════════════════ */
@keyframes showStep {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes lineGrow {
  to { transform: scaleX(1); }
}

@keyframes fadeText {
  to { opacity: 1; }
}