/* PROCESO */

  .proceso-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom:4rem;
  }

  .proceso-header .section-body {
    max-width: 340px;
  }

  .proceso-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }

  @media (max-width: 768px) {
    .proceso-steps {
      grid-template-columns: 1fr;
    }
  }

 .step {
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
  cursor: default;
  overflow: hidden;
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(20, 30, 49, 0.06);
  border: 1px solid rgba(20, 30, 49, 0.03);
  padding:20px;
}

.step:hover {
  transform: scale(1.02);
  
}

.step p{
border-left: 2px solid transparent; /* invisible inicialmente */
padding-left: 1.5rem; /* recomendable para que el borde respire */
}

.step p:hover{
  border-left-color: var(--color-primary); /* aparece al hover */
}

/* Contenedor círculo + título */
.step-icon {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Evita márgenes raros del h3 */
.step-icon h3 {
  margin: 0;
}

  /* Círculo decorativo con número */
  .step-circle {
    min-width: 48px;
    min-height: 48px;
    background-color: var(--color-secondary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    font-weight: 400;
    font-family: "Baskerville Old Face", serif;
    transition: background-color 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1), transform 0.2s ease, box-shadow 0.2s;
    box-shadow: 0 6px 12px -5px rgba(0, 0, 0, 0.15);
    letter-spacing: 0;
  }

  /* EFECTO PRINCIPAL: al hacer hover sobre la card, el círculo cambia de color */
  .step:hover .step-circle {
    background-color: var(--color-primary);
    transform: scale(1.02);
  }