/*
 * bloques/pasos/estilos.css
 * El nº de columnas y el color salen inline del template. Aquí, la mecánica
 * de la línea de puntos y la tipografía.
 */

.bl-pasos { padding: var(--bl-aire) 0; }

.bl-pasos .bl-pasos-titulo {
    text-align: center;
    font-size: clamp(26px, 2.6vw, 38px);
    line-height: 1.3;
    font-weight: 300;
    margin: 0 0 clamp(44px, 4.5vw, 76px);
    text-wrap: balance;
}

.bl-pasos .bl-pasos-grid {
    display: grid;
    gap: 40px 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.bl-pasos .bl-paso { text-align: center; min-width: 0; }

/*
 * La marca es la fila del número. La línea es un ::before centrado
 * verticalmente que cruza toda la celda por detrás del círculo; en el primer
 * y el último paso se recorta a la mitad para que no salga por los extremos.
 */
.bl-pasos .bl-paso-marca {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: clamp(24px, 2.4vw, 40px);
}

.bl-pasos .bl-paso-marca::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 0;
}

.bl-pasos .bl-paso-marca.es-primero::before { left: 50%; }
.bl-pasos .bl-paso-marca.es-ultimo::before  { right: 50%; }

.bl-pasos .bl-paso-num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(46px, 3.8vw, 60px);
    height: clamp(46px, 3.8vw, 60px);
    border-radius: 50%;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 6px var(--bl-pasos-halo, #fff);
}

.bl-pasos .bl-paso-titulo {
    font-size: 17px;
    line-height: 1.35;
    font-weight: 600;
    margin: 0 0 8px;
    text-wrap: balance;
}

.bl-pasos .bl-paso-texto {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    opacity: .8;
}

@media (max-width: 860px) {
    /* En una sola columna la línea horizontal no significa nada. */
    .bl-pasos .bl-paso-marca::before { display: none; }
    .bl-pasos .bl-pasos-titulo { font-size: 24px; margin-bottom: 28px; }
}