/* Estilos generales */
.container:has(.steps) {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f5;
      }
      
      .steps {
        display: flex;
        align-items: center;
        position: relative;
      }
      
      .step {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #e0e6ef;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 1rem;
        color: #333;
        margin: 0 15px;
        transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
        position: relative;
        z-index: 1;
      }
      
      .step:hover {
        background-color: #2255a4;
        color: white;
        box-shadow: 0 0 15px rgba(34, 85, 164, 0.5);
      }
      
      /* Contenedor SVG en la capa inferior para las conexiones */
      #svgContainer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
      }