/* [IRIDIAN AI LAYER] CSS del bloc IaStepsV1 — familia ia*v1 (passos ordenats, JS-free).
 * Tot scoped sota .iaLayer-iastepsv1. Sense CSS global, sense tocar CSS legacy.
 * Numeració via <ol>/loop.index (cercles) + línia connectora vertical.
 */
.iaLayer-iastepsv1 {
    /* [P7B.4 estàndard 2026-07-14] Escala canònica --ia-color-* (fallback = valor original). */
    --iasteps-accent: var(--ia-color-accent, #0071e3);
    --iasteps-ink: var(--ia-color-text, #1d1d1f);
    --iasteps-ink-2: var(--ia-color-text-soft, #6e6e73);
    --iasteps-hairline: var(--ia-color-border, #e3e3e8);
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: var(--ial-font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color: var(--iasteps-ink);
}
.iaLayer-iastepsv1 .iasteps-title {
    margin: 0 0 6px;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -.02em;
    font-weight: 700;
}
.iaLayer-iastepsv1 .iasteps-intro {
    margin: 0 0 26px;
    color: var(--iasteps-ink-2);
    font-size: 1rem;
    line-height: 1.5;
}
.iaLayer-iastepsv1 .iasteps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}
.iaLayer-iastepsv1 .iasteps-item {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 0 0 24px 0;
}
/* línia connectora entre cercles */
.iaLayer-iastepsv1 .iasteps-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--iasteps-hairline);
}
.iaLayer-iastepsv1 .iasteps-num {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--iasteps-accent);
    color: var(--ia-color-text-inverted, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.iaLayer-iastepsv1 .iasteps-body { padding-top: 4px; }
.iaLayer-iastepsv1 .iasteps-step-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
}
.iaLayer-iastepsv1 .iasteps-step-text {
    color: var(--iasteps-ink-2);
    font-size: .97rem;
    line-height: 1.6;
}
.iaLayer-iastepsv1 .iasteps-step-text > :first-child { margin-top: 0; }
.iaLayer-iastepsv1 .iasteps-step-text > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
    .iaLayer-iastepsv1 { padding: 28px 14px; }
    .iaLayer-iastepsv1 .iasteps-num { width: 30px; height: 30px; font-size: .85rem; }
    .iaLayer-iastepsv1 .iasteps-item:not(:last-child)::before { left: 14px; top: 32px; }
}