/* One drawing, seven annotations. */
#proceso-anim { position: relative; margin-top: 32px; }
#proceso .proceso-stage { display: none; }
.js #proceso .proceso-stage {
    display: block;
    position: relative;
    width: 100%;
    height: min(56.25vw, 648px, 80vh);
    overflow: hidden;
    border: 1px solid var(--gris-linea);
    border-radius: 12px;
    background: var(--fondo);
}
#proceso .proceso-stage[data-unavailable] { display: none; }
#proceso .proceso-stage canvas { display: block; width: 100%; height: 100%; }
#proceso .proceso-annotations, #proceso .proceso-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#proceso .proceso-leaders path { fill: none; stroke: var(--negro); stroke-opacity: .7; stroke-width: 1; }
#proceso .proceso-leaders circle { fill: var(--negro); fill-opacity: .7; }
#proceso .proceso-leaders .is-active { stroke: var(--naranja); stroke-opacity: 1; }
#proceso .proceso-leaders circle.is-active { fill: var(--naranja); fill-opacity: 1; }
#proceso .proceso-label {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    max-width: 186px;
    padding: 5px 7px 5px 0;
    border: 0;
    border-radius: 5px;
    background: var(--fondo);
    color: var(--azul);
    font-family: var(--font-heading);
    font-size: 14px;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
}
#proceso .proceso-marker {
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--gris-acero);
    border-radius: 50%;
    background: var(--blanco);
    color: var(--azul);
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1;
}
#proceso .proceso-label.is-active .proceso-marker { border-color: var(--naranja); color: var(--naranja-hover); }
#proceso .proceso-label:focus-visible, #proceso .proceso-card button:focus-visible, #proceso .proceso-card a:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }
/* Mutable CSSOM transforms keep projected coordinates out of inline style attributes. */
#proceso .proceso-label[data-step="0"] { transform: translate(0, 0); }
#proceso .proceso-label[data-step="1"] { transform: translate(0, 0); }
#proceso .proceso-label[data-step="2"] { transform: translate(0, 0); }
#proceso .proceso-label[data-step="3"] { transform: translate(0, 0); }
#proceso .proceso-label[data-step="4"] { transform: translate(0, 0); }
#proceso .proceso-label[data-step="5"] { transform: translate(0, 0); }
#proceso .proceso-label[data-step="6"] { transform: translate(0, 0); }
#proceso .proceso-card {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 18px;
    padding: 12px 16px;
    border: 1px solid var(--gris-linea);
    border-left: 2px solid var(--naranja);
    border-radius: 5px;
    background: var(--blanco);
    color: var(--azul);
    box-shadow: 0 4px 16px rgb(15 42 61 / 4%);
}
#proceso .proceso-card[hidden] { display: none; }
#proceso .proceso-card-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; font-family: var(--font-heading); font-size: 16px; }
#proceso .proceso-card-title > span { color: var(--naranja-hover); font-family: var(--font-display); font-size: 22px; }
#proceso .proceso-card .proceso-paso-texto { display: block; font-size: 13px; line-height: 1.5; }
#proceso .proceso-card a { color: var(--azul); text-decoration: underline; text-decoration-color: var(--naranja); text-underline-offset: 3px; }
#proceso .proceso-card-controls { display: none; }
#proceso .proceso-hint, #proceso .proceso-card-count { display: none; }
/* Override the component's list margins without removing its semantics. */
#proceso .proceso-fallback.visually-hidden { margin: -1px; padding: 0; }
@media (max-width: 768px) {
    #proceso-anim { margin-top: 24px; --proceso-card-height: 190px; }
    #proceso-anim.proceso-enhanced { min-height: calc(60vh + 76px + var(--proceso-card-height)); min-height: calc(60svh + 76px + var(--proceso-card-height)); }
    .js #proceso .proceso-stage { height: 60vh; height: 60svh; min-height: 0; }
    #proceso .proceso-label { width: 44px; height: 44px; padding: 7px; border-radius: 50%; background: transparent; }
    #proceso .proceso-label.is-active { z-index: 1; }
    /* 30 px visible circle inside the 44 px touch target. */
    #proceso .proceso-marker {
        position: relative;
        border: 2px solid var(--naranja);
        color: var(--azul);
        box-shadow: 0 2px 8px rgb(15 42 61 / 22%);
        transition: transform .2s var(--ease-out-ui), background-color .2s var(--ease-out-ui), color .2s var(--ease-out-ui);
    }
    #proceso .proceso-label.is-active .proceso-marker { border-color: var(--naranja); background: var(--naranja); color: var(--blanco); transform: scale(1.15); }
    #proceso .proceso-label-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    /* Bottom margin clears the floating WhatsApp button (52 px + 24 px offset). */
    #proceso .proceso-card { position: relative; inset: auto; min-height: var(--proceso-card-height); margin: 12px 0 64px; padding: 14px; }
    #proceso .proceso-card-title { font-size: 15px; }
    #proceso .proceso-card-count { display: block; margin-left: auto; color: var(--azul-claro); font-family: var(--font-body); font-size: 12px; white-space: nowrap; }
    #proceso .proceso-card .proceso-paso-texto { font-size: 13px; }
    #proceso .proceso-card-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
    #proceso .proceso-card-controls button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 44px;
        padding: 10px 12px;
        border: 1px solid var(--azul);
        border-radius: 5px;
        background: var(--blanco);
        color: var(--azul);
        font-family: var(--font-heading);
        font-size: 15px;
        letter-spacing: .04em;
        text-transform: uppercase;
        cursor: pointer;
    }
    #proceso .proceso-card-controls span { font-size: 20px; line-height: 1; }
    #proceso .proceso-card-controls .proceso-nav-siguiente { border-color: var(--naranja); background: var(--naranja); color: var(--blanco); }
    #proceso .proceso-card-controls [aria-disabled="true"] { opacity: .4; cursor: default; }
    /* Usage hint: shown once per visit, never intercepts taps or focus. */
    #proceso-anim.proceso-enhanced .proceso-hint:not([hidden]) {
        position: absolute;
        top: 10px;
        left: 50%;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 10px;
        width: max-content;
        max-width: calc(100% - 32px);
        margin: 0;
        padding: 8px 16px 8px 12px;
        border-radius: 22px;
        background: rgb(15 42 61 / 90%);
        background: color-mix(in srgb, var(--azul) 90%, transparent);
        color: var(--blanco);
        font-family: var(--font-body);
        font-size: 14px;
        line-height: 1.35;
        transform: translateX(-50%);
        pointer-events: none;
        transition: opacity .3s var(--ease-out-ui);
    }
    #proceso-anim .proceso-hint.is-leaving { opacity: 0; }
    #proceso .proceso-hint-icono { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    #proceso-anim.proceso-hint-on .proceso-label[data-step="0"] .proceso-marker::after {
        content: '';
        position: absolute;
        inset: -2px;
        border: 2px solid var(--naranja);
        border-radius: 50%;
        animation: proceso-pulso 1.6s var(--ease-out-ui) infinite;
        pointer-events: none;
    }
}
@keyframes proceso-pulso {
    from { opacity: .8; transform: scale(1); }
    to { opacity: 0; transform: scale(1.9); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    #proceso .proceso-marker, #proceso-anim.proceso-enhanced .proceso-hint:not([hidden]) { transition: none; }
    #proceso-anim.proceso-hint-on .proceso-label[data-step="0"] .proceso-marker::after { content: none; animation: none; }
}