/* ============================================================= */
/* === ESTILOS PARA LA NUEVA SECCIÓN "PROCESO DE TRABAJO" === */
/* ============================================================= */

.process-step {
  position: relative;
  padding-top: 2.5rem; /* Espacio para el número */
}

/* Estilo de los números grandes y semitransparentes */
.step-number {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem; /* 48px */
  font-weight: 700;
  color: #15803d1a; /* Tu color primario con baja opacidad */
  z-index: 0;
  line-height: 1;
}

/* En pantallas medianas y grandes, alinear el número a la izquierda */
@media (min-width: 768px) {
  .step-number {
    left: 0;
    transform: translateX(0);
  }
}

/* 
 * Flechas de conexión:
 * Aparecen solo en pantallas grandes (lg y superiores)
 * Se usa un SVG curvo como fondo para la flecha
*/
.process-container {
  /* Necesario para posicionar las flechas correctamente */
  position: relative; 
}

@media (min-width: 1024px) {
  .process-step::after {
    content: '';
    position: absolute;
    top: 2.5rem; /* Alineado verticalmente con el título */
    right: -1rem; /* Posicionado entre las tarjetas */
    width: 2rem; /* Ancho de la flecha */
    height: 2rem; /* Alto de la flecha */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1' stroke='%2315803d80'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
  }

  /* Oculta la flecha en el último elemento */
  .process-step:last-child::after {
    display: none;
  }
}