/*
 * 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(30px, 3.4vw, 44px);
    line-height: 1.1;
    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, var(--vk-crema, #f8f5f1));
}

.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;
}
.bl-pasos .bl-paso-texto p { margin: 0 0 .6em; }
.bl-pasos .bl-paso-texto > :last-child { margin-bottom: 0; }

/* Antetítulo y recuadro final (en las dos disposiciones). */
.bl-pasos .bl-paso-antetitulo { margin: 0 0 10px; }
.bl-pasos .bl-paso-final {
    margin: 22px 0 0;
    padding: 16px 20px;
    border-radius: 6px;
    background: var(--vk-crema-2, #efe9e1);
    font-size: 16px;
    line-height: 1.45;
    color: var(--vk-texto, #262524);
    text-align: left;
}
.bl-pasos .bl-paso-final-etq {
    font-family: var(--fuente-mono, ui-monospace, monospace);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@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 { margin-bottom: 28px; }
}

/* ── Disposición «izquierda» ───────────────────────────────────────────
   Número 01, 02… a la izquierda con una línea hasta el final de la
   columna; todo alineado a la izquierda y el recuadro final abajo del todo
   (las columnas miden lo mismo), así los recuadros quedan alineados. */
.bl-pasos--izquierda .bl-pasos-grid { gap: 40px clamp(24px, 3.4vw, 44px); }
.bl-pasos--izquierda .bl-paso { display: flex; flex-direction: column; text-align: left; }
.bl-pasos--izquierda .bl-paso-marca { justify-content: flex-start; align-items: center; gap: clamp(16px, 1.8vw, 24px); margin-bottom: clamp(22px, 2.4vw, 34px); }
.bl-pasos--izquierda .bl-paso-marca::before { display: none; }
.bl-pasos--izquierda .bl-paso-marca::after { content: ""; flex: 1; height: 1px; background: var(--vk-oscuro, #262524); }
.bl-pasos--izquierda .bl-paso-num { flex: none; width: clamp(48px, 4.2vw, 56px); height: clamp(48px, 4.2vw, 56px); box-shadow: none; font-size: clamp(15px, 1.2vw, 17px); font-weight: 700; }
.bl-pasos--izquierda .bl-paso-antetitulo { color: var(--vk-texto-2, #5f5c58); font-weight: 700; letter-spacing: .08em; margin-bottom: 14px; }
.bl-pasos--izquierda .bl-paso-titulo { margin: 0 0 14px; font-size: clamp(21px, 2vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.bl-pasos--izquierda .bl-paso-texto { font-size: 17px; line-height: 1.55; color: var(--vk-texto-2, #5f5c58); opacity: 1; margin-bottom: 22px; }
.bl-pasos--izquierda .bl-paso-final { margin-top: auto; }
@media (max-width: 860px) {
    /* En una columna la línea de cada paso sigue teniendo sentido. */
    .bl-pasos--izquierda .bl-paso-marca::after { display: block; }
}