/* bloques/proceso — carrusel de pasos con el activo grande (modo desplazar de _base/base.js)
 *
 * Cada <li> ocupa SIEMPRE el hueco de una tarjeta pequeña; la tarjeta activa
 * crece por encima de sus vecinos (inset negativo) y los pasos anteriores y
 * siguientes se apartan con transform. Así la posición de cada <li> no cambia
 * nunca: el motor centra el <li> activo con su propio ancho, y la cuenta sale
 * exacta también a mitad de la transición (si el <li> cambiase de ancho, el
 * motor mediría el anterior todavía grande al avanzar y se pasaría de largo).
 * Por eso aquí NO se usa --bl-car-ancho-activo (se anula por si se hereda).
 */

.bl-proceso {
    --bl-pr-lg: 530px;                      /* tarjeta activa (ancho) */
    --bl-pr-lg-alto: var(--bl-pr-lg);       /* tarjeta activa (alto) */
    --bl-pr-sm: 300px;                      /* demás pasos (cuadradas) */
    --bl-pr-hueco: 6px;
    --bl-pr-pad: 30px;
    --bl-pr-pad-sm: 20px;
    --bl-pr-t: .6s;
    --bl-pr-curva: cubic-bezier(.22, .61, .36, 1);
}
.bl-pr-carrusel { --bl-car-ancho-activo: initial; }

.bl-pr-visor { position: relative; height: var(--bl-pr-lg-alto); overflow: hidden; overflow: clip; touch-action: pan-y; }

.bl-pr-pista {
    position: relative; display: flex; align-items: center; gap: var(--bl-pr-hueco);
    height: 100%; margin: 0; padding: 0; list-style: none;
    /* Sin JS sale ya centrado el primer paso; el motor pone luego el mismo valor en px. */
    transform: translateX(calc(50% - var(--bl-pr-sm) / 2));
    transition: transform var(--bl-pr-t) var(--bl-pr-curva);
}

.bl-pr-paso {
    position: relative; flex: 0 0 var(--bl-pr-sm); height: var(--bl-pr-sm);
    cursor: pointer;
    transition: transform var(--bl-pr-t) var(--bl-pr-curva);
}
.bl-pr-paso.es-activo { z-index: 1; cursor: auto; }
.bl-pr-paso:has(~ .es-activo) { transform: translateX(calc((var(--bl-pr-sm) - var(--bl-pr-lg)) / 2)); }
.bl-pr-paso.es-activo ~ .bl-pr-paso { transform: translateX(calc((var(--bl-pr-lg) - var(--bl-pr-sm)) / 2)); }

.bl-pr-tarjeta {
    position: absolute; inset: 0; overflow: hidden;
    background: var(--vk-crema-2, #efe9e1); color: var(--vk-texto, #262524);
    transition: inset var(--bl-pr-t) var(--bl-pr-curva), background-color var(--bl-pr-t) var(--bl-pr-curva);
}
.bl-pr-paso:not(.es-activo):hover .bl-pr-tarjeta { background: var(--color-gris, #e7e2db); }
.bl-pr-paso.es-activo .bl-pr-tarjeta {
    inset: calc((var(--bl-pr-sm) - var(--bl-pr-lg-alto)) / 2) calc((var(--bl-pr-sm) - var(--bl-pr-lg)) / 2);
    background: var(--vk-oscuro, #262524); color: #fff;
}

/* Foto a sangre con degradado para el texto (solo en el activo) */
.bl-pr-media { position: absolute; inset: 0; opacity: 0; transition: opacity var(--bl-pr-t) var(--bl-pr-curva); }
.bl-pr-media img { width: 100%; height: 100%; object-fit: cover; }
.bl-pr-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20, 19, 18, 0) 25%, rgba(20, 19, 18, .58) 52%, rgba(20, 19, 18, .9) 100%);
}
.bl-pr-paso.es-activo .bl-pr-media { opacity: 1; }

/* Etiqueta del paso, arriba a la derecha */
.bl-pr-chip {
    position: absolute; z-index: 2; top: var(--bl-pr-pad-sm); right: var(--bl-pr-pad-sm);
    max-width: calc(100% - 2 * var(--bl-pr-pad-sm)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    background: var(--vk-oscuro, #262524); color: var(--vk-crema, #f8f5f1);
    transition: top var(--bl-pr-t) var(--bl-pr-curva), right var(--bl-pr-t) var(--bl-pr-curva),
                background-color var(--bl-pr-t) var(--bl-pr-curva), color var(--bl-pr-t) var(--bl-pr-curva);
}
.bl-pr-paso.es-activo .bl-pr-chip {
    top: var(--bl-pr-pad); right: var(--bl-pr-pad); max-width: calc(100% - 2 * var(--bl-pr-pad));
    background: var(--vk-crema, #f8f5f1); color: var(--vk-oscuro, #262524);
}

.bl-pr-num { font-family: var(--fuente-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; color: var(--vk-texto-2, #5f5c58); }

/* Paso en reposo: número y título centrados */
.bl-pr-reposo {
    position: absolute; inset: 0; padding: calc(var(--bl-pr-pad-sm) + 26px) var(--bl-pr-pad-sm);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
    transition: opacity calc(var(--bl-pr-t) * .5) calc(var(--bl-pr-t) * .4);
}
.bl-pr-reposo-titulo { font-weight: 500; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.bl-pr-paso.es-activo .bl-pr-reposo { opacity: 0; transition: opacity calc(var(--bl-pr-t) * .25); }

/* Paso activo: número, título, texto y entregable sobre el degradado.
   Ancho fijo para que el texto no se recoloque mientras crece la tarjeta. */
.bl-pr-detalle {
    position: absolute; left: var(--bl-pr-pad); bottom: var(--bl-pr-pad);
    width: min(440px, calc(var(--bl-pr-lg) - 2 * var(--bl-pr-pad)));
    display: flex; flex-direction: column; gap: 10px;
    color: #fff; opacity: 0;
    transition: opacity calc(var(--bl-pr-t) * .3);
}
.bl-pr-paso.es-activo .bl-pr-detalle { opacity: 1; transition: opacity calc(var(--bl-pr-t) * .75) calc(var(--bl-pr-t) * .45); }
.bl-pr-detalle .bl-pr-num { color: rgba(255, 255, 255, .85); }
.bl-pr-titulo { margin: 0; font-weight: 500; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -.015em; color: #fff; }
.bl-pr-texto { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.bl-pr-entregable { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .28); font-size: 15px; line-height: 1.45; color: #fff; }
.bl-pr-entregable-etq { font-family: var(--fuente-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }

/* Fondo gris oscuro */
.bl-tema-oscuro .bl-pr-tarjeta { background: var(--vk-oscuro-2, #2f2e2c); color: #fff; }
.bl-tema-oscuro .bl-pr-paso:not(.es-activo):hover .bl-pr-tarjeta { background: var(--vk-oscuro-3, #3b3a37); }
.bl-tema-oscuro .bl-pr-paso.es-activo .bl-pr-tarjeta { background: var(--vk-oscuro-3, #3b3a37); }
.bl-tema-oscuro .bl-pr-chip { background: var(--vk-crema, #f8f5f1); color: var(--vk-oscuro, #262524); }
.bl-tema-oscuro .bl-pr-reposo .bl-pr-num { color: rgba(255, 255, 255, .62); }

.bl-pr-controles { margin-top: clamp(32px, 4vw, 48px); }
/* Sin JS las flechas no harían nada: se muestran cuando el motor arranca. */
.bl-pr-carrusel:not(.bl-car-listo) .bl-pr-controles { visibility: hidden; }

@media (max-width: 1130px) {
    .bl-proceso { --bl-pr-lg: min(440px, 76vw); --bl-pr-sm: min(240px, 42vw); --bl-pr-pad: 24px; --bl-pr-pad-sm: 14px; }
}
/* Móvil: el activo casi a todo el ancho (más alto que ancho, para que quepa
   el texto) y los demás asomando por los lados. */
@media (max-width: 640px) {
    .bl-proceso {
        --bl-pr-lg: calc(100vw - 2 * var(--margen, 20px) - 32px);
        --bl-pr-lg-alto: calc(var(--bl-pr-lg) * 1.22);
        --bl-pr-sm: 200px;
        --bl-pr-pad: 20px;
    }
    .bl-pr-texto, .bl-pr-entregable { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-proceso { --bl-pr-t: 0s; }
}

/* Foto opcional junto a la entradilla (campo `imagen`). */
.bl-pr-foto { margin: 6px 0 0; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(38, 37, 36, .08); }
.bl-pr-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-proceso .bl-cab--dividida:has(.bl-pr-foto) { align-items: start; }

/* Pasos sin texto (nombre, plazo y entregable): tarjetas más bajas. Dos
   clases para ganar a las variables de los @media de arriba. */
.bl-proceso.bl-proceso--breve { --bl-pr-lg-alto: 400px; --bl-pr-sm: 250px; }
@media (max-width: 1130px) {
    .bl-proceso.bl-proceso--breve { --bl-pr-lg-alto: calc(var(--bl-pr-lg) * .78); --bl-pr-sm: min(210px, 40vw); }
}
@media (max-width: 640px) {
    .bl-proceso.bl-proceso--breve { --bl-pr-lg-alto: calc(var(--bl-pr-lg) * .82); --bl-pr-sm: 180px; }
}