/* =============================================================================
   AUTOMATIZACIÓN DE PROCESOS — composición de /automatizacion-de-procesos.
   Depende de sistema.css y pagina.css.

   Una sola idea visual sostiene la página: el trabajo avanza por un camino y
   cada tramo lo da una persona o lo da el sistema. El ámbar marca siempre lo
   mismo — persona. El mismo componente `.tramo` construye la comparación del
   movimiento 2 y los tres comportamientos del movimiento 4.
   ========================================================================== */

/* --- Cabeceras de sección: titular + lead en dos columnas ------------------ */
.aut-cab { display: grid; gap: var(--s-5); }
.aut-cab .h2 { margin-top: var(--s-5); max-width: 20ch; }
.aut-cab .lead { max-width: 38ch; }
@media (min-width: 62rem) {
    .aut-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(3rem, 5vw, 5rem); align-items: end; }
}

/* Frase que cierra un movimiento. */
.remate {
    margin-top: var(--s-10);
    font-size: var(--t-h3);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    max-width: 30ch;
}

/* =============================================================================
   1. HERO — seis trabajos, un solo punto donde se detienen
   ========================================================================== */
.aut-hero { padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 7rem); }
.aut-hero__grid { display: grid; gap: var(--s-8); }
.aut-hero .display {
    margin-top: var(--s-6);
    max-width: 19ch;
    /* Titular largo: un punto por debajo del display general. */
    font-size: clamp(2.375rem, 1.1rem + 4.5vw, 4.25rem);
}
.aut-hero .lead { margin-top: var(--s-6); max-width: 50ch; }
.aut-hero__visual { display: none; }
@media (min-width: 62rem) {
    .aut-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem); gap: clamp(3rem, 5vw, 5rem); align-items: center; }
    .aut-hero__visual { display: block; }
}

.fila { width: 100%; height: auto; overflow: visible; }
.fila__muro {
    stroke: var(--c-ink);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    transition: stroke-dashoffset 1.1s var(--e-out) 150ms;
}
.fila.is-visible .fila__muro { stroke-dashoffset: 0; }

.fila__pieza {
    fill: var(--c-ink-3);
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity var(--d-base) var(--e-out) calc(400ms + var(--i, 0) * 95ms),
                transform var(--d-slow) var(--e-out) calc(400ms + var(--i, 0) * 95ms);
}
.fila.is-visible .fila__pieza { opacity: 0.4; transform: none; }

.fila__atencion { fill: var(--c-signal); opacity: 0; transition: opacity var(--d-base) var(--e-out) 1150ms; }
.fila__cruzada { fill: var(--c-ink-3); opacity: 0; transition: opacity var(--d-base) var(--e-out) 1300ms; }
.fila.is-visible .fila__atencion, .fila.is-visible .fila__cruzada { opacity: 1; }

.fila__etq {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.09em;
    fill: var(--c-ink-3);
    opacity: 0;
    transition: opacity var(--d-base) var(--e-out) 1450ms;
}
.fila.is-visible .fila__etq { opacity: 1; }
.fila__etq--c { text-anchor: middle; }
.fila__etq--r { text-anchor: end; }

.no-js .fila__muro { stroke-dashoffset: 0; }
.no-js .fila__pieza { opacity: 0.4; transform: none; }
.no-js .fila__atencion, .no-js .fila__cruzada, .no-js .fila__etq { opacity: 1; }

/* =============================================================================
   2. EL CAMINO — componente compartido
   Móvil: el camino baja. Escritorio: avanza. El conector lo dibuja cada tramo,
   de modo que la orientación cambia sin recalcular nada.
   ========================================================================== */
.via__pista { position: relative; margin-top: var(--s-6); }
.via__tramos {
    --via-gap: var(--s-5);
    display: grid;
    gap: var(--via-gap);
}

/* La pieza que recorre el camino y la huella que deja. Sólo en escritorio:
   ahí las paradas caen en posiciones exactas y calculables (cinco columnas
   iguales más el hueco). En vertical el camino ya se lee solo. */
.via__avance, .via__pieza { display: none; }

@media (min-width: 62rem) {
    .via__avance {
        display: block;
        position: absolute;
        left: 0; top: 4px;
        width: 0; height: 3px;
        background: var(--c-signal);
    }
    .via--auto .via__avance { background: var(--c-ink); }
    .section--deep .via--auto .via__avance { background: var(--c-deep-ink); }

    .via__pieza {
        display: block;
        position: absolute;
        left: 0; top: 3px;
        width: 5px; height: 5px;
        background: var(--c-paper);
        box-shadow: 0 0 0 2px var(--c-paper);
        opacity: 0;
    }
    .section--deep .via__pieza { background: var(--c-deep-ink); box-shadow: 0 0 0 2px var(--c-deep); }

    /* Las dos pistas arrancan a la vez: la comparación está en el avance.
       Cuando el camino automatizado ya terminó, el de hoy sigue esperando
       en la primera persona. */
    .is-visible .via--hoy .via__pieza   { animation: pieza-hoy 5s linear 900ms forwards; }
    .is-visible .via--hoy .via__avance  { animation: avance-hoy 5s linear 900ms forwards; }
    .is-visible .via--auto .via__pieza  { animation: pieza-auto 5s linear 900ms forwards; }
    .is-visible .via--auto .via__avance { animation: avance-auto 5s linear 900ms forwards; }
}

/* Paradas: el marcador i cae en i × (20% + hueco/5). */
@keyframes pieza-hoy {
    0%, 4%    { left: 0; opacity: 1; }
    10%, 28%  { left: calc(20% + 0.3rem); opacity: 1; }
    34%, 52%  { left: calc(40% + 0.6rem); opacity: 1; }
    58%, 76%  { left: calc(60% + 0.9rem); opacity: 1; }
    82%, 100% { left: calc(80% + 1.2rem); opacity: 1; }
}
@keyframes avance-hoy {
    0%, 4%    { width: 0; }
    10%, 28%  { width: calc(20% + 0.3rem); }
    34%, 52%  { width: calc(40% + 0.6rem); }
    58%, 76%  { width: calc(60% + 0.9rem); }
    82%, 100% { width: calc(80% + 1.2rem); }
}
@keyframes pieza-auto {
    0%, 4%    { left: 0; opacity: 1; }
    22%, 100% { left: calc(80% + 1.2rem); opacity: 1; }
}
@keyframes avance-auto {
    0%, 4%    { width: 0; }
    22%, 100% { width: calc(80% + 1.2rem); }
}

.tramo {
    position: relative;
    padding-left: 1.75rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--d-base) var(--e-out) var(--tramo-d),
                transform var(--d-base) var(--e-out) var(--tramo-d);
    --tramo-d: calc(200ms + var(--r, 0) * 320ms + var(--i, 0) * 110ms);
}
.is-visible .tramo { opacity: 1; transform: none; }

.tramo__marca {
    position: absolute;
    left: 0; top: 0.3rem;
    width: 11px; height: 11px;
    background: var(--c-ink);
}
/* Conector hacia el tramo siguiente. */
.tramo::before {
    content: '';
    position: absolute;
    left: 5px; top: calc(0.3rem + 11px);
    bottom: calc(var(--via-gap) * -1);
    width: var(--hairline);
    background: var(--c-rule);
}
.tramo:last-child::before { display: none; }

.tramo__quien { display: block; color: var(--c-ink-3); }
.section--deep .tramo__quien { color: var(--c-deep-ink-2); }
.tramo__nombre { display: block; font-size: clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: break-word; }

.tramo--entra   .tramo__marca { background: var(--c-rule); }
.tramo--persona .tramo__marca { background: var(--c-signal); }
.tramo--sistema .tramo__marca { background: var(--c-ink); }
.tramo--ia      .tramo__marca { background: transparent; border: var(--hairline) solid var(--c-ink); }

@media (min-width: 62rem) {
    .via__tramos {
        --via-gap: var(--s-5);
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .tramo { padding-left: 0; padding-top: 1.5rem; }
    .tramo__marca { top: 0; }
    .tramo::before {
        left: 11px; top: 5px;
        right: calc(var(--via-gap) * -1);
        bottom: auto;
        width: auto; height: var(--hairline);
    }
}

/* --- Los dos caminos ------------------------------------------------------ */
.comparacion { margin-top: var(--s-9); display: grid; gap: var(--s-9); }
.via__quien { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; }
.via__marca { width: 11px; height: 11px; flex: none; }
.via__marca--hoy  { background: var(--c-signal); }
.via__marca--auto { background: var(--c-ink); }
.section--deep .via__marca--auto { background: var(--c-deep-ink); }

/* La desviación: el único punto donde el camino automático llama a alguien.
   El codo se dibuja con dos filetes, así que sube hasta el riel sin depender
   de la altura que tenga la etiqueta del tramo. */
.via__rama {
    position: relative;
    margin-top: var(--s-6);
    padding-left: 1.75rem;
    color: var(--c-ink-2);
}
.via__rama::before {
    content: '';
    position: absolute;
    left: 5px; top: -1.5rem;
    width: var(--hairline); height: 2.2rem;
    background: var(--c-rule);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 380ms var(--e-out) 1500ms;
}
/* El giro llega justo después de que la pieza pasa por ese tramo. */
.via__rama::after {
    content: '';
    position: absolute;
    left: 5px; top: 0.7rem;
    width: 1rem; height: var(--hairline);
    background: var(--c-rule);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms var(--e-out) 1880ms;
}
.is-visible .via__rama::before { transform: scaleY(1); }
.is-visible .via__rama::after  { transform: scaleX(1); }
.via__rama-marca { display: inline-block; width: 11px; height: 11px; margin-right: var(--s-2); background: var(--c-signal); }
.via__rama b { color: var(--c-ink); }
.section--deep .via__rama { color: var(--c-deep-ink-2); }
.section--deep .via__rama b { color: var(--c-deep-ink); }
.section--deep .via__rama::before,
.section--deep .via__rama::after { background: var(--c-deep-rule); }

@media (min-width: 62rem) {
    /* Pausa editorial entre los dos caminos: la comparación necesita respirar. */
    .comparacion { margin-top: var(--s-10); gap: var(--s-12); }
    /* La rama cuelga del tercer tramo: donde el proceso decide. */
    .via__rama { margin-left: 40%; margin-top: var(--s-7); }
}
/* Sin JS el camino se ve completo y quieto: la huella llena, sin pieza. */
.no-js .tramo { opacity: 1; transform: none; }
.no-js .via__pieza { display: none; }
.no-js .via__avance { width: calc(80% + 1.2rem); }
.no-js .via__rama::before { transform: scaleY(1); }
.no-js .via__rama::after { transform: scaleX(1); }

/* =============================================================================
   3. QUÉ SE PUEDE AUTOMATIZAR — índice, no muro de tarjetas
   ========================================================================== */
.trabajos { margin-top: var(--s-8); display: grid; border-top: var(--hairline) solid var(--c-ink); }
.trabajo {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: var(--s-2) var(--s-3);
    padding: var(--s-7) 0;
    border-bottom: var(--hairline) solid var(--c-rule-soft);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--d-base) var(--e-out) calc(var(--i, 0) * 110ms),
                transform var(--d-base) var(--e-out) calc(var(--i, 0) * 110ms);
}
.trabajos.is-visible .trabajo { opacity: 1; transform: none; }
.trabajo__num { grid-column: 1; color: var(--c-ink-3); padding-top: 0.3rem; }
.trabajo__nombre { grid-column: 2; font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: break-word; }
.trabajo__que { grid-column: 2; color: var(--c-ink-2); }

@media (min-width: 62rem) {
    .trabajo { grid-template-columns: 2.25rem minmax(0, 30rem) minmax(0, 1fr); align-items: baseline; column-gap: clamp(2rem, 4vw, 4rem); }
    .trabajo__que { grid-column: 3; }
}
.no-js .trabajo { opacity: 1; transform: none; }

/* =============================================================================
   4. REGLAS, IA Y PERSONAS — tres comportamientos, un mismo camino
   ========================================================================== */
.bifurcacion { position: relative; margin-top: var(--s-8); }
.criterios { display: grid; }
.criterio {
    position: relative;
    display: grid;
    gap: var(--s-5);
    padding: var(--s-8) 0;
    border-top: var(--hairline) solid var(--c-rule);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--d-slow) var(--e-out) calc(var(--r, 0) * 220ms),
                transform var(--d-slow) var(--e-out) calc(var(--r, 0) * 220ms);
}
.is-visible .criterio { opacity: 1; transform: none; }

/* El registro que se bifurca. Sólo en escritorio: ahí las tres rutas tienen
   la misma altura y el abanico cae exacto sobre sus rieles. */
.bifurcacion__pieza { display: none; }
.criterio__que { color: var(--c-ink-2); max-width: 46ch; }
.section--deep .criterio { border-top-color: var(--c-deep-rule); }
.section--deep .criterio__que { color: var(--c-deep-ink-2); }

/* Camino corto: baja como el largo en pantallas estrechas y se despliega en
   tres columnas cuando hay ancho para que las etiquetas quepan enteras. */
.via__tramos--corta { margin-top: 0; --via-gap: var(--s-4); }
.via__tramos--corta .tramo__nombre { font-size: var(--t-body); letter-spacing: -0.012em; }

/* En banda profunda el camino invierte sus tonos; el ámbar no cambia. */
.section--deep .tramo::before { background: var(--c-deep-rule); }
.section--deep .tramo--entra   .tramo__marca { background: var(--c-deep-rule); }
.section--deep .tramo--sistema .tramo__marca { background: var(--c-deep-ink); }
.section--deep .tramo--ia      .tramo__marca { background: transparent; border-color: var(--c-deep-ink); }

.principio {
    margin-top: var(--s-8);
    font-size: var(--t-lead);
    line-height: var(--lh-lead);
    letter-spacing: -0.008em;
    color: var(--c-ink);
    max-width: 56ch;
    padding-top: var(--s-6);
    border-top: var(--hairline) solid var(--c-signal);
}
.section--deep .principio { color: var(--c-deep-ink); }

@media (min-width: 62rem) {
    /* Filas iguales: el riel de cada ruta queda a la misma distancia del
       borde superior de su fila, así que la espina y los codos son exactos. */
    .criterios { grid-auto-rows: 1fr; }
    .criterio {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
        gap: clamp(2.5rem, 5vw, 5rem);
        align-items: start;
        padding: var(--s-7) 0;
        padding-left: 4.5rem;
        border-top: 0;
    }

    /* Espina: del riel de la primera ruta al de la tercera. */
    .bifurcacion::before {
        content: '';
        position: absolute;
        left: 5px;
        top: calc(var(--s-7) + 5px);
        bottom: calc(100% / 3 - var(--s-7) - 5px);
        width: var(--hairline);
        background: var(--c-rule);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 700ms var(--e-out) 200ms;
    }
    .bifurcacion.is-visible::before { transform: scaleY(1); }

    /* Codo hacia cada ruta. */
    .criterio::before {
        content: '';
        position: absolute;
        left: 5px;
        top: calc(var(--s-7) + 5px);
        width: 4.5rem;
        height: var(--hairline);
        background: var(--c-rule);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 420ms var(--e-out) calc(500ms + var(--r, 0) * 320ms);
    }
    .is-visible .criterio::before { transform: scaleX(1); }

    /* El registro entra por el centro del abanico: el riel de la ruta de enmedio. */
    .bifurcacion__pieza {
        display: block;
        position: absolute;
        left: -5px;
        top: calc(100% / 3 + var(--s-7) - 1px);
        width: 21px; height: 13px;
        background: var(--c-ink);
        box-shadow: 0 0 0 4px var(--c-paper-2);
        opacity: 0;
        transform: translateX(-8px);
        transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
    }
    .bifurcacion.is-visible .bifurcacion__pieza { opacity: 1; transform: none; }
    .via__tramos--corta { --via-gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .via__tramos--corta .tramo { padding-left: 0; padding-top: 1.25rem; }
    .via__tramos--corta .tramo__marca { top: 0; }
    .via__tramos--corta .tramo::before {
        left: 11px; top: 5px;
        right: calc(var(--via-gap) * -1);
        bottom: auto;
        width: auto; height: var(--hairline);
    }
}
.no-js .criterio { opacity: 1; transform: none; }
.no-js .bifurcacion::before { transform: scaleY(1); }
.no-js .criterio::before { transform: scaleX(1); }
.no-js .bifurcacion__pieza { opacity: 1; transform: none; }

/* =============================================================================
   5. ARRANQUE — empezar pequeño y conversar
   ========================================================================== */
.section--arranque .cierre > div { align-content: start; }
.aut-relacionadas { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.aut-relacionadas .mono { color: var(--c-deep-ink-2); }