.hero {
    /* Atenuar el fondo mantiene legibles las frases sobre el video y la imagen. */
    --fuerza-grabado: 0.28;
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100 * var(--vh-estable, 1vh));
    min-height: calc(100 * var(--svh-estable, 1svh));
    padding-block: 5rem 3rem;
    background-color: var(--color-fondo-profundo);
}

/* La forja en movimiento, con los mismos bordes fundidos que el grabado. */
.hero__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    opacity: var(--fuerza-grabado, 0.46);
    mix-blend-mode: screen;
    -webkit-mask-image:
        radial-gradient(74% 66% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.88) 34%, rgba(0, 0, 0, 0.42) 64%, transparent 90%),
        linear-gradient(180deg, transparent 0%, #000 18%, #000 76%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(74% 66% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.88) 34%, rgba(0, 0, 0, 0.42) 64%, transparent 90%),
        linear-gradient(180deg, transparent 0%, #000 18%, #000 76%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-composite: intersect;
    pointer-events: none;
}

/* Con el video andando, el grabado fijo sobra */
.hero:has(.hero__video)::before {
    opacity: 0;
}

/* Si piden menos movimiento, vuelve la imagen quieta */
@media (prefers-reduced-motion: reduce) {
    .hero__video {
        display: none;
    }

    .hero:has(.hero__video)::before {
        opacity: var(--fuerza-grabado, 0.46);
    }
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("img/forja/yunque-1400.webp");
    background-size: cover;
    background-position: center 45%;
    opacity: var(--fuerza-grabado, 0.46);
    mix-blend-mode: screen;
    -webkit-mask-image:
        radial-gradient(74% 66% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.88) 34%, rgba(0, 0, 0, 0.42) 64%, transparent 90%),
        linear-gradient(180deg, transparent 0%, #000 18%, #000 76%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(74% 66% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.88) 34%, rgba(0, 0, 0, 0.42) 64%, transparent 90%),
        linear-gradient(180deg, transparent 0%, #000 18%, #000 76%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    mask-composite: intersect;
    pointer-events: none;
}

@media (max-width: 900px) {
    .hero::before {
        background-image: url("img/forja/yunque-900.webp");
    }
}

.hero__lienzo-titulo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero__contenedor {
    position: relative;
    z-index: 1;
    --ancho-contenedor: 1720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, calc(4 * var(--vh-estable, 1vh)), 2.75rem);
    text-align: center;
}

@media (min-width: 1101px) {
    .hero__contenedor {
        --margen-contenedor-base: max(calc(var(--margen-lateral) + 4rem), 11rem);
    }
}

.hero__titulo {
    width: min(100%, 60rem);
    height: clamp(74px, min(9.1vw, calc(18.2 * var(--vh-estable, 1vh))), 157px);
    font-family: var(--fuente-serif);
    font-size: var(--texto-titulo-hero);
    font-weight: 500;
    line-height: 1;
    color: var(--color-blanco);
}

.js .hero__titulo-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.hero__frase {
    font-family: var(--fuente-sans);
    font-size: var(--texto-frase-hero);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-blanco);
}

@media (min-width: 1101px) {
    .hero__frase {
        white-space: nowrap;
    }
}

.hero__bajada {
    margin-top: 0.35em;
    font-family: var(--fuente-sans);
    font-size: var(--texto-frase-hero);
    font-style: italic;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-blanco);
}

.hero__frase em {
    font-style: normal;
    color: inherit;
}

.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    list-style: none;
    padding: 0;
}

.animar .hero__accion {
    opacity: 0;
    scale: 0.6;
    transition:
        opacity 0.6s var(--curva-suave),
        scale 0.8s var(--curva-resorte);
    transition-delay: calc(var(--indice-accion, 0) * 120ms);
}

.animar .hero.acciones-visibles .hero__accion {
    opacity: 1;
    scale: 1;
}

@media (max-width: 1100px) {
    .hero {
        padding-block: 7rem 3rem;
    }

    .hero__titulo {
        height: clamp(90px, 22vw, 170px);
    }

    .hero__frase-renglon {
        display: block;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .hero__acciones {
        flex-direction: column;
        width: 100%;
    }

    .hero__acciones .boton {
        width: 100%;
    }

    .hero__acciones .boton--principal {
        width: min(12rem, 100%);
    }
}

.servicios {
    position: relative;
    z-index: 2;
    background-color: #0A0A0A;
}

/* La pared de pizarra: la textura de fondo de los tramos oscuros. */
.servicios__portada::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(14, 14, 14, 0.52), rgba(14, 14, 14, 0.66)),
        url("img/portfolio/marmol-oscuro-640.webp");
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

@media (min-width: 701px) {
    .servicios__portada::after {
        background-image:
            linear-gradient(rgba(14, 14, 14, 0.52), rgba(14, 14, 14, 0.66)),
            url("img/portfolio/marmol-oscuro-1024.webp");
    }
}

.servicios__portada {
    position: sticky;
    top: 0;
    z-index: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, calc(3 * var(--vh-estable, 1vh)), 1.75rem);
    min-height: calc(100 * var(--vh-estable, 1vh));
    min-height: calc(100 * var(--svh-estable, 1svh));
    padding: clamp(5rem, calc(12 * var(--vh-estable, 1vh)), 7rem) var(--margen-lateral);
    text-align: center;
}

/* El isotipo se asoma por el borde derecho, apenas insinuado. */
.servicios__marca {
    position: absolute;
    top: 50%;
    right: clamp(-7rem, -8vw, -3rem);
    z-index: -1;
    width: clamp(17rem, 40vw, 44rem);
    height: auto;
    translate: 0 -50%;
    opacity: 0.14;
    pointer-events: none;
}

@media (max-width: 767px) {
    /* Reserva su lugar encima del título y sigue asomándose por la derecha. */
    .servicios__marca {
        position: relative;
        top: auto;
        align-self: flex-end;
        flex: none;
        margin-right: calc(-1 * var(--margen-lateral));
        translate: none;
    }
}

.servicios__entrada {
    position: relative;
    max-width: 44ch;
    font-size: var(--texto-lg);
    line-height: 1.6;
    color: var(--color-texto-suave);
    text-wrap: balance;
}

/* El isotipo del fondo no entra con el resto: tiene su propio lugar y su opacidad */
.animar .servicios__portada > *:not(.servicios__marca) {
    opacity: 0;
    translate: 0 22px;
    transition:
        opacity 0.8s var(--curva-suave),
        translate 0.9s var(--curva-entrada);
}

.animar .servicios__portada .servicios__entrada {
    transition-delay: 140ms;
}

.animar .servicios__portada.esta-visible > *:not(.servicios__marca) {
    opacity: 1;
    translate: 0 0;
}

.servicio {
    position: sticky;
    top: 0;
    z-index: calc(var(--indice-panel) + 1);
    min-height: calc(100 * var(--vh-estable, 1vh));
    min-height: calc(100 * var(--svh-estable, 1svh));
    overflow: hidden;
}

.servicio__lienzo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    min-height: calc(100 * var(--vh-estable, 1vh));
    min-height: calc(100 * var(--svh-estable, 1svh));
    padding: clamp(5rem, calc(12 * var(--vh-estable, 1vh)), 8rem) max(calc(var(--margen-lateral) + 4rem), 11rem, var(--reserva-navegacion, 0px)) clamp(3rem, calc(8 * var(--vh-estable, 1vh)), 5rem);
    rotate: var(--giro, 0deg);
    transform-origin: bottom left;
    will-change: rotate;
}

.servicio--eucalipto .servicio__lienzo {
    background-color: var(--color-eucalipto);
    color: var(--color-carbon);
}

.servicio--naranja .servicio__lienzo {
    background-color: var(--color-naranja);
    color: var(--color-carbon);
}

.servicio--claro .servicio__lienzo {
    background-color: var(--color-blanco);
    color: var(--color-carbon);
}

.servicio__encabezado {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
    padding-bottom: clamp(1rem, calc(3 * var(--vh-estable, 1vh)), 1.75rem);
    border-bottom: 1px solid currentColor;
}

.servicio__acciones {
    flex: none;
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 1.2vw, 1rem);
}

.servicio__titulo {
    padding-block: clamp(1.5rem, calc(5 * var(--vh-estable, 1vh)), 3rem);
    border-bottom: 1px solid currentColor;
    font-family: var(--fuente-sans);
    font-size: min(6.5rem, 7.3vw - 28px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.servicio__mas {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding-inline: 0.35rem;
    font-family: var(--fuente-sans);
    font-size: var(--texto-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-carbon);
}

.servicio__mas-texto {
    position: relative;
}

.servicio__mas-texto::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -0.35rem;
    height: 1px;
    background-color: currentColor;
    scale: 0 1;
    transform-origin: left center;
    transition: scale 0.45s var(--curva-entrada);
}

.servicio__mas:hover .servicio__mas-texto::after,
.servicio__mas:focus-visible .servicio__mas-texto::after {
    scale: 1 1;
}

.servicio__detalles {
    display: grid;
    grid-template-columns: max-content minmax(0, 34rem);
    justify-content: center;
    align-items: baseline;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    row-gap: clamp(0.8rem, calc(2.2 * var(--vh-estable, 1vh)), 1.5rem);
    margin-top: clamp(1.5rem, calc(4.5 * var(--vh-estable, 1vh)), 3rem);
    list-style: none;
}

.servicio__detalle {
    display: contents;
}

.servicio__detalle-titulo {
    font-size: var(--texto-base);
    font-weight: 600;
    line-height: 1.4;
}

.servicio__detalle-texto {
    font-size: var(--texto-base);
    line-height: 1.5;
    opacity: 0.72;
}

.servicio__accion {
    flex: none;
    border: 1px solid var(--color-carbon);
    background-color: transparent;
    color: var(--color-carbon);
    letter-spacing: 0.08em;
    transition: transform 0.35s var(--curva-suave);
}

.servicio__accion:hover,
.servicio__accion:focus-visible {
    transform: scale(1.05);
    background-color: transparent;
    color: var(--color-carbon);
}

.servicio__accion:active {
    transform: scale(1.02);
}

@media (max-width: 1100px) {
    .servicio__titulo {
        font-size: 6.4vw;
    }
}

@media (max-width: 760px) {
    .servicio__lienzo {
        padding-block: clamp(3rem, calc(7 * var(--vh-estable, 1vh)), 4.5rem) clamp(2rem, calc(5 * var(--vh-estable, 1vh)), 3rem);
    }

    .servicio__titulo {
        padding-block: clamp(1.25rem, calc(3.5 * var(--vh-estable, 1vh)), 2rem);
    }

    .servicio__detalles {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.25rem;
    }

    .servicio__detalle:not(:first-child) .servicio__detalle-titulo {
        margin-top: 0.9rem;
    }

    .servicio__detalle-titulo,
    .servicio__detalle-texto {
        font-size: var(--texto-sm);
    }
}

@media (max-width: 1100px) {
    .servicio__lienzo {
        padding-inline: var(--margen-lateral);
    }
}

@media (max-width: 620px) {
    .servicio__encabezado {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* En mobile y tablet las tarjetas siguen el desplazamiento natural,
   con altura estable cuando se oculta la barra del navegador. */
@media (max-width: 1100px) {
    .servicios__portada {
        position: relative;
    }

    .servicio {
        position: relative;
        top: 0;
        min-height: 0;
    }

    .servicio__lienzo {
        justify-content: flex-start;
        min-height: calc(100 * var(--svh-estable, 1svh));
        rotate: none;
        will-change: auto;
        padding: clamp(5.5rem, calc(12 * var(--vh-estable, 1vh)), 7rem) var(--margen-lateral) clamp(2.5rem, calc(6 * var(--vh-estable, 1vh)), 4rem);
        text-align: center;
    }

    .servicio__titulo {
        border-top: 1px solid currentColor;
        padding-block: clamp(1.25rem, calc(3 * var(--vh-estable, 1vh)), 2rem);
    }

    .servicio__detalles {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(1.25rem, calc(3 * var(--vh-estable, 1vh)), 2rem);
        width: min(100%, 44rem);
        margin: clamp(1.5rem, calc(4 * var(--vh-estable, 1vh)), 2.5rem) auto clamp(2rem, calc(5 * var(--vh-estable, 1vh)), 3rem);
        padding: 0;
    }

    .servicio__detalle {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        width: 100%;
    }

    .servicio__detalle:not(:first-child) .servicio__detalle-titulo {
        margin-top: 0;
    }

    .servicio__encabezado {
        order: 0;
        align-items: center;
        justify-content: center;
        margin-top: auto;
        padding-block: clamp(1.25rem, calc(3 * var(--vh-estable, 1vh)), 2rem) 0;
        border-top: 1px solid currentColor;
        border-bottom: 0;
    }

    .servicio__acciones {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem 1.5rem;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .servicio {
        position: static;
        min-height: 0;
    }

    .servicio__lienzo {
        min-height: 0;
        rotate: none;
        padding-block: clamp(3rem, calc(8 * var(--vh-estable, 1vh)), 5rem);
    }
}

.proceso {
    --avance: 0;
    --recorrido: 0px;
    --alto-tallo: clamp(2.75rem, calc(7 * var(--vh-estable, 1vh)), 5rem);
    --diametro-punto: 14px;

    position: relative;
    height: calc(320 * var(--vh-estable, 1vh));
    background-color: var(--color-blanco);
    box-shadow: 0 0 0 100vmax var(--color-blanco);
    clip-path: inset(-1px -100vmax);
}

.proceso__escenario {
    background-color: var(--color-blanco);
}

.proceso__ventana {
    display: contents;
}

.proceso__escenario {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100 * var(--vh-estable, 1vh));
    height: calc(100 * var(--svh-estable, 1svh));
    overflow: hidden;
}

.proceso__titulo {
    flex: none;
    align-self: center;
    color: var(--color-carbon);
    margin-top: clamp(4rem, calc(12 * var(--vh-estable, 1vh)), 8rem);
    margin-bottom: clamp(1.5rem, calc(5 * var(--vh-estable, 1vh)), 3rem);
    white-space: nowrap;
}

.proceso__riel {
    display: flex;
    align-items: center;
    flex: 1;
    gap: clamp(3rem, 9vw, 10rem);
    width: max-content;
    padding-left: 44vw;
    padding-right: 26vw;
    translate: calc(var(--avance) * var(--recorrido) * -1) 0;
    will-change: translate;
}

.proceso__recorrido {
    position: relative;
    display: flex;
    align-items: center;
    height: clamp(26rem, calc(64 * var(--vh-estable, 1vh)), 38rem);
}

.proceso__linea {
    position: absolute;
    left: 0;
    top: 50%;
    height: 1px;
    width: calc(var(--avance-linea, 0) * 100%);
    background: linear-gradient(90deg, rgba(129, 161, 152, 0.3), var(--color-eucalipto));
    box-shadow: 0 1px 4px rgba(28, 28, 28, 0.12);
    translate: 0 -50%;
}

.proceso__pasos {
    display: flex;
    align-items: center;
    gap: clamp(3rem, 8vw, 9rem);
    height: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.proceso__paso {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: clamp(16rem, 25vw, 25rem);
    height: 100%;
}

.proceso__punto {
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--diametro-punto);
    height: var(--diametro-punto);
    border-radius: 50%;
    background-color: var(--color-eucalipto);
    box-shadow:
        0 6px 14px -4px rgba(0, 0, 0, 0.85),
        0 0 0 4px rgba(44, 45, 47, 0.7);
    translate: -50% -50%;
    scale: 0;
    transition: scale 0.5s var(--curva-resorte);
}

.proceso__tallo {
    position: absolute;
    left: 0;
    width: 1px;
    height: var(--alto-tallo);
    background: linear-gradient(180deg, rgba(129, 161, 152, 0.35), var(--color-eucalipto));
    box-shadow: 1px 0 4px rgba(28, 28, 28, 0.12);
    scale: 1 0;
    transition: scale 0.6s var(--curva-entrada);
}

.proceso__paso--arriba .proceso__tallo {
    bottom: 50%;
    transform-origin: bottom center;
}

.proceso__paso--abajo .proceso__tallo {
    top: 50%;
    transform-origin: top center;
    background: linear-gradient(0deg, rgba(129, 161, 152, 0.35), var(--color-eucalipto));
}

/* Cada paso se apoya en una tarjeta que se levanta del fondo. */
.proceso__texto {
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: max-content;
    max-width: min(32rem, 92vw);
    padding: clamp(1.1rem, calc(2.6 * var(--vh-estable, 1vh)), 1.6rem) clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1px solid rgba(28, 28, 28, 0.07);
    border-radius: clamp(8px, 0.8vw, 14px);
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 20px 44px -26px rgba(28, 28, 28, 0.42);
}

.proceso__paso--arriba .proceso__texto {
    bottom: calc(50% + var(--alto-tallo));
}

.proceso__paso--abajo .proceso__texto {
    top: calc(50% + var(--alto-tallo));
}

.proceso__titulo-paso {
    font-family: var(--fuente-sans);
    font-size: clamp(1.45rem, 1rem + 0.9vw, 2.1rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-carbon);
}

@media (min-width: 1101px) {
    .proceso__titulo-paso {
        font-size: min(1.95rem, 2.1vw - 3px);
        white-space: nowrap;
    }
}

.proceso__descripcion {
    max-width: 34ch;
    font-size: var(--texto-sm);
    line-height: 1.6;
    color: rgba(28, 28, 28, 0.68);
}

.proceso__cierre {
    display: flex;
    align-items: center;
    padding-left: clamp(1rem, 3vw, 3rem);
}

.animar .proceso__texto,
.js .proceso__texto {
    opacity: 0;
    translate: 0 22px;
    transition:
        opacity 0.6s var(--curva-suave),
        translate 0.7s var(--curva-entrada);
}

.js .proceso__paso.esta-activo .proceso__texto {
    opacity: 1;
    translate: 0 0;
}

.animar .proceso__titulo-paso,
.animar .proceso__descripcion,
.js .proceso__titulo-paso,
.js .proceso__descripcion {
    opacity: 0;
    translate: 0 18px;
    transition:
        opacity 0.6s var(--curva-suave),
        translate 0.7s var(--curva-entrada);
}

.js .proceso__titulo-paso {
    transition-delay: 60ms;
}

.js .proceso__descripcion {
    transition-delay: 120ms;
}

.js .proceso__paso.esta-activo .proceso__titulo-paso,
.js .proceso__paso.esta-activo .proceso__descripcion {
    opacity: 1;
    translate: 0 0;
}

.js .proceso__paso.esta-activo .proceso__punto {
    scale: 1;
}

.js .proceso__paso.esta-activo .proceso__tallo {
    scale: 1 1;
}

.proceso--sin-desplazamiento .proceso__punto,
.proceso--sin-desplazamiento .proceso__tallo {
    scale: 1;
}

@media (min-width: 1101px) and (max-height: 720px) {
    .proceso {
        --alto-tallo: clamp(1.75rem, calc(4 * var(--vh-estable, 1vh)), 3rem);
    }

    .proceso__titulo {
        margin-top: clamp(2.5rem, calc(7 * var(--vh-estable, 1vh)), 5rem);
        margin-bottom: clamp(1rem, calc(3 * var(--vh-estable, 1vh)), 2rem);
    }

    .proceso__recorrido {
        height: clamp(22rem, calc(72 * var(--vh-estable, 1vh)), 30rem);
    }

    .proceso__descripcion {
        max-width: 36ch;
        font-size: 0.8125rem;
        line-height: 1.5;
    }
}

@media (max-width: 1100px) {
    .proceso {
        --alto-tallo: clamp(2.25rem, calc(5.5 * var(--vh-estable, 1vh)), 3.5rem);
    }

    .proceso__riel {
        padding-left: 30vw;
        padding-right: 34vw;
    }

    .proceso__paso {
        width: clamp(15rem, 70vw, 21rem);
    }

}

@media (prefers-reduced-motion: reduce) {
    .proceso {
        height: auto;
    }

    .proceso__escenario {
        position: static;
        height: auto;
        padding-block: clamp(4rem, calc(10 * var(--vh-estable, 1vh)), 7rem);
        overflow: visible;
    }

    .proceso__riel {
        flex-direction: column;
        align-items: flex-start;
        gap: 3rem;
        width: 100%;
        translate: none;
    }

    .proceso__recorrido {
        height: auto;
    }

    .proceso__linea {
        display: none;
    }

    .proceso__pasos {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
        height: auto;
    }

    .proceso__paso {
        width: 100%;
        height: auto;
        padding-left: 1.75rem;
    }

    .proceso__punto {
        top: 0.6rem;
        left: 0;
        translate: 0 0;
        scale: 1;
    }

    .proceso__tallo {
        display: none;
    }

    .proceso__texto {
        position: static;
        padding-right: 0;
    }
}

.proyectos {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100 * var(--vh-estable, 1vh));
    min-height: calc(100 * var(--svh-estable, 1svh));
    padding-block: clamp(5rem, calc(13 * var(--vh-estable, 1vh)), 9rem);
    background-color: #0A0A0A;
    color: var(--color-texto);
}

.proyectos .carrusel-marcas,
.proyectos .invitacion {
    position: relative;
    z-index: 1;
}

/* El cierre vive entre las dos filas: toma el hueco y se centra en el. */
.proyectos .invitacion {
    flex: 1;
    justify-content: center;
    margin-block: 0;
    padding-block: clamp(2.5rem, calc(7 * var(--vh-estable, 1vh)), 4.5rem);
}

.carrusel-marcas {
    --ancho-marca: clamp(126px, 12vw, 180px);
    --alto-logo: clamp(46px, 4.4vw, 66px);

    position: relative;
    overflow: hidden;
    padding-block: clamp(1.4rem, calc(3.6 * var(--vh-estable, 1vh)), 2.25rem);
    border-block: 1px solid rgba(255, 255, 255, 0.09);
    cursor: grab;
    touch-action: pan-y;
    -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.carrusel-marcas.esta-arrastrando {
    cursor: grabbing;
}

.carrusel-marcas__pista {
    display: flex;
    align-items: center;
    gap: clamp(4.5rem, 9vw, 10rem);
    width: max-content;
    list-style: none;
    padding: 0;
    will-change: transform;
}

.carrusel-marcas__marca {
    --cercania: 0;

    flex: none;
    width: var(--ancho-marca);
}

.carrusel-marcas__marca {
    scale: calc(1 + var(--cercania) * 0.16);
}

.carrusel-marcas__logo {
    width: 100%;
    height: var(--alto-logo);
    object-fit: contain;
    opacity: calc(0.46 + var(--cercania) * 0.5);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
    -webkit-user-drag: none;
    user-select: none;
}

.animar .carrusel-marcas {
    opacity: 0;
    transition: opacity 0.9s var(--curva-suave);
}

.animar .carrusel-marcas.esta-visible {
    opacity: 1;
}

@media (max-width: 600px) {
    .carrusel-marcas {
        --ancho-marca: clamp(120px, 40vw, 170px);
        --alto-logo: 48px;

        -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
}

.invitacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, calc(2 * var(--vh-estable, 1vh)), 1.25rem);
    --ancho-contenedor: 46rem;
    margin: clamp(4.5rem, calc(12 * var(--vh-estable, 1vh)), 8rem) auto 0;
    padding-inline: var(--margen-contenedor);
    text-align: center;
}

/* El cierre usa el título del sistema: líneas naranjas a los costados. */
.invitacion__titulo {
    justify-content: center;
    text-align: center;
    text-wrap: balance;
}

.invitacion__texto {
    max-width: 48ch;
    font-size: var(--texto-lg);
    line-height: 1.6;
    color: var(--color-texto-suave);
    text-wrap: balance;
}

.invitacion__accion {
    margin-top: clamp(0.75rem, calc(2 * var(--vh-estable, 1vh)), 1.5rem);
}

@media (min-width: 901px) {
    .invitacion {
        --ancho-contenedor: 64rem;
    }

    .invitacion__titulo {
        white-space: nowrap;
    }
}

@media (min-width: 1101px) {
    .servicio__lienzo {
        container-type: inline-size;
    }

    .servicio__titulo {
        font-size: clamp(2rem, 7cqi, 6.5rem);
        white-space: normal;
        text-wrap: balance;
    }

    .proceso .proceso__titulo {
        max-width: calc(100% - 2 * var(--reserva-navegacion));
    }
}

/* El recorrido se recorta antes del índice, mientras el museo del fondo
   conserva toda la pantalla. El margen simétrico mantiene el eje del diseño. */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
    .proceso__ventana {
        display: flex;
        flex: 1;
        min-height: 0;
        margin-inline: var(--reserva-navegacion);
        overflow: clip;
    }

    .proceso__riel {
        padding-left: max(0px, calc(44vw - var(--reserva-navegacion)));
        padding-right: max(0px, calc(26vw - var(--reserva-navegacion)));
    }
}

@media (min-width: 1101px) and (prefers-reduced-motion: reduce) {
    .proceso__riel {
        align-items: center;
        padding-inline: var(--reserva-navegacion);
    }

    .proceso__recorrido {
        width: min(100%, 48rem);
    }

    .proceso__texto {
        width: 100%;
        max-width: 100%;
        padding-right: clamp(1.25rem, 2.5vw, 1.75rem);
    }
}

.animar .invitacion {
    opacity: 0;
    translate: 0 28px;
    transition:
        opacity 0.8s var(--curva-suave),
        translate 0.9s var(--curva-entrada);
}

.animar .invitacion.esta-visible {
    opacity: 1;
    translate: 0 0;
}

/* ---------- Casos de éxito ---------- */

.casos {
    position: relative;
    z-index: var(--capa-contenido);
    overflow-x: clip;
    padding-block: clamp(4rem, calc(12 * var(--vh-estable, 1vh)), 8rem);
    background-color: var(--color-blanco);
    box-shadow: 0 0 0 100vmax var(--color-blanco);
    clip-path: inset(-1px -100vmax);
}

/* Sobre blanco, el titulo y sus lineas cambian de tinta. */
.casos .titulo-seccion {
    color: var(--color-carbon);
}

.casos__contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, calc(6 * var(--vh-estable, 1vh)), 4rem);
}

.casos__entrada {
    max-width: 52ch;
    margin: 0;
    font-size: var(--texto-lg);
    line-height: 1.6;
    text-align: center;
    text-wrap: pretty;
    color: rgba(28, 28, 28, 0.68);
}

.casos__grilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.2vw, 1.75rem);
    width: 100%;
}

/* ---------- La entrada de cada proyecto forjado ---------- */

.casos__grilla {
    perspective: 1400px;
}

/* De a dónde llega cada tarjeta y hacia dónde barre el naranja */
.caso-exito {
    --entra-x: 65px;
    --entra-y: 35px;
    --gira: 7deg;
    --corte: inset(0 0 0 100%);
    --barrido-desde: 100%;
    --barrido-hasta: -100%;
}

.caso-exito:nth-child(even) {
    --entra-x: -65px;
    --gira: -7deg;
    --corte: inset(0 100% 0 0);
    --barrido-desde: -100%;
    --barrido-hasta: 100%;
}

/* Antes de entrar no se ve; el módulo pone esta clase, así que sin JS queda visible */
.caso-exito.esta-por-entrar {
    opacity: 0;
}

.caso-exito.esta-entrando {
    animation: caso-llega 1250ms var(--curva-entrante) both;
}

.caso-exito.esta-entrando .caso-exito__imagen {
    animation: caso-descubre 1250ms var(--curva-entrante) both;
}

.caso-exito.esta-entrando .caso-exito__datos {
    animation: caso-datos 850ms var(--curva-entrante) 500ms both;
}

/* El barrido naranja: sólo existe mientras dura la entrada */
.caso-exito__figura {
    position: relative;
}

.caso-exito.esta-entrando .caso-exito__figura::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: #FFA51F;
    animation: caso-barrido 1250ms var(--curva-entrante) both;
    pointer-events: none;
}

@keyframes caso-llega {
    from {
        opacity: 0;
        transform: translate3d(var(--entra-x), var(--entra-y), 0) scale(0.95) rotateY(var(--gira));
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    }
}

@keyframes caso-descubre {
    0% {
        clip-path: var(--corte);
        transform: scale(1.18);
    }

    42% {
        clip-path: var(--corte);
    }

    100% {
        clip-path: inset(0 0 0 0);
        transform: scale(1);
    }
}

@keyframes caso-barrido {
    0% {
        transform: translate3d(var(--barrido-desde), 0, 0);
    }

    42% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(var(--barrido-hasta), 0, 0);
    }
}

@keyframes caso-datos {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* En pantalla chica el recorrido es más corto y no hay giro */
@media (max-width: 860px) {
    .caso-exito {
        --entra-x: 32px;
        --entra-y: 22px;
        --gira: 0deg;
    }

    .caso-exito:nth-child(even) {
        --entra-x: -32px;
        --gira: 0deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .caso-exito.esta-por-entrar {
        opacity: 1;
    }

    .caso-exito.esta-entrando,
    .caso-exito.esta-entrando .caso-exito__imagen,
    .caso-exito.esta-entrando .caso-exito__datos {
        animation: none;
    }

    .caso-exito.esta-entrando .caso-exito__figura::after {
        content: none;
    }
}

/* El primero se lleva el ancho entero y acomoda la foto al costado. */
.caso-exito--ancho {
    grid-column: 1 / -1;
}

.caso-exito__enlace {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(28, 28, 28, 0.08);
    border-radius: clamp(10px, 1vw, 16px);
    background-color: rgba(252, 252, 252, 0.92);
    box-shadow: 0 18px 38px -26px rgba(28, 28, 28, 0.55);
    text-decoration: none;
    color: inherit;
    transition:
        border-color 0.5s var(--curva-suave),
        background-color 0.5s var(--curva-suave),
        box-shadow 0.5s var(--curva-suave),
        translate 0.5s var(--curva-suave);
}

.caso-exito--ancho .caso-exito__enlace {
    flex-direction: row;
    align-items: stretch;
}

.caso-exito__figura {
    margin: 0;
    overflow: hidden;
}

.caso-exito--ancho .caso-exito__figura {
    flex: 1 1 62%;
    min-width: 0;
}

.caso-exito__imagen {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.caso-exito--ancho .caso-exito__imagen {
    aspect-ratio: auto;
    min-height: clamp(13rem, 24vw, 19rem);
}

.caso-exito__datos {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.1rem, 2.2vw, 1.6rem);
}

.caso-exito--ancho .caso-exito__datos {
    flex: 1 1 38%;
    justify-content: center;
    gap: 0.9rem;
    padding-inline: clamp(1.5rem, 3.5vw, 3rem);
}

.caso-exito__nombre {
    margin: 0;
    font-family: var(--fuente-sans);
    font-size: clamp(1.2rem, 1rem + 0.55vw, 1.6rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-carbon);
}

.caso-exito--ancho .caso-exito__nombre {
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.35rem);
}

.caso-exito__accion {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--fuente-sans);
    font-size: var(--texto-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-eucalipto-hondo);
}

.caso-exito__accion-texto {
    position: relative;
}

/* El subrayado crece de izquierda a derecha, como el "Ver mas" de servicios */
.caso-exito__accion-texto::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -0.3rem;
    height: 1px;
    background-color: currentColor;
    scale: 0 1;
    transform-origin: left center;
    transition: scale 0.45s var(--curva-entrada);
}

.caso-exito__flecha {
    transition: translate 0.4s var(--curva-suave);
}

/* La foto respira apenas cuando el cursor se posa sobre la tarjeta */
@media (hover: hover) {
    .caso-exito__enlace:hover {
        border-color: var(--color-marca, var(--color-eucalipto-hondo));
        box-shadow:
            0 0 0 1px var(--color-marca, var(--color-eucalipto-hondo)) inset,
            0 26px 52px -28px rgba(28, 28, 28, 0.6);
        translate: 0 -3px;
    }

    .caso-exito__enlace:hover .caso-exito__flecha {
        translate: 2px -2px;
    }

    /* El subrayado aparece solo si el cursor esta sobre el boton */
    .caso-exito__accion:hover .caso-exito__accion-texto::after {
        scale: 1 1;
    }
}

.caso-exito__enlace:focus-visible {
    outline: 2px solid var(--color-eucalipto-hondo);
    outline-offset: 3px;
}

.caso-exito__enlace:focus-visible .caso-exito__accion-texto::after {
    scale: 1 1;
}

/* ---------- Cómo podemos acompañarte ---------- */

.acompanamiento {
    position: relative;
    z-index: var(--capa-contenido);
    padding-block: clamp(4rem, calc(12 * var(--vh-estable, 1vh)), 8rem);
    background-color: var(--color-blanco);
    box-shadow: 0 0 0 100vmax var(--color-blanco);
    clip-path: inset(-1px -100vmax);
}

/* Sobre blanco, el título cambia de tinta */
.acompanamiento .titulo-seccion {
    color: var(--color-carbon);
}

.acompanamiento__contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, calc(5 * var(--vh-estable, 1vh)), 3rem);
}

/* ---------- Comunicación: las dos vías ---------- */

.comunicacion {
    width: 100%;
}

.comunicacion__encabezado {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: clamp(1.1rem, calc(2.6 * var(--vh-estable, 1vh)), 1.6rem);
}

/* El megáfono y sus ondas comparten caja: las ondas salen de su centro */
.comunicacion__llamada {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: clamp(2.4rem, 3.4vw, 3rem);
    height: clamp(2.4rem, 3.4vw, 3rem);
}

.comunicacion__icono {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    color: var(--color-carbon);
}

.comunicacion__rotulo {
    margin: 0;
    font-family: var(--fuente-sans);
    font-size: clamp(1.35rem, 1rem + 1.1vw, 2rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-carbon);
}

.vias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.6rem);
    margin: 0;
    padding: 0;
    list-style: none;
    perspective: 1200px;
}

.via {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(1.4rem, 2.4vw, 2rem);
    border: 1px solid rgba(28, 28, 28, 0.1);
    border-radius: clamp(14px, 1.4vw, 20px);
    background-color: var(--color-blanco);
    box-shadow: 0 22px 48px -30px rgba(28, 28, 28, 0.45);
}

.via__titulo {
    margin: 0;
    font-family: var(--fuente-sans);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-carbon);
}

/* Los logos de clientes: pasa uno por vez, sin recuadro propio */
.cinta {
    display: grid;
    place-items: center;
    height: clamp(6.5rem, 10vw, 9rem);
    margin: clamp(0.5rem, calc(1.5 * var(--vh-estable, 1vh)), 0.9rem) 0 clamp(0.9rem, calc(2 * var(--vh-estable, 1vh)), 1.3rem);
}

.cinta__logo {
    grid-area: 1 / 1;
    width: auto;
    max-width: 82%;
    height: clamp(3rem, 4.8vw, 4.4rem);
    object-fit: contain;
    opacity: 0;
    translate: 0 12px;
    transition:
        opacity 0.7s var(--curva-suave),
        translate 0.7s var(--curva-suave);
}

.cinta__logo.esta-activa {
    opacity: 1;
    translate: 0 0;
}

/* Un sello redondo necesita más alto que un logotipo apaisado para pesar igual */
.cinta__logo--sello {
    height: clamp(4.2rem, 6.6vw, 6rem);
}

.via__texto {
    margin: 0 0 auto;
    font-size: var(--texto-sm);
    line-height: 1.6;
    text-wrap: pretty;
    color: rgba(28, 28, 28, 0.72);
}

.via__accion,
.rayuela__accion {
    align-self: flex-start;
    margin-top: clamp(1rem, calc(2.5 * var(--vh-estable, 1vh)), 1.4rem);
}

/* ---------- La entrada de la sección ---------- */

/* El módulo pone estas clases: sin JS nada se esconde */
.acompanamiento.esta-por-entrar .via,
.acompanamiento.esta-por-entrar .cinta,
.acompanamiento.esta-por-entrar .via__accion {
    opacity: 0;
}

.rayuela.esta-por-entrar {
    opacity: 0;
}

/* 1. El megáfono llama */
.acompanamiento.esta-entrando .comunicacion__icono {
    animation: acomp-megafono 850ms var(--curva-entrante) both;
}

.acompanamiento.esta-entrando .comunicacion__llamada::before,
.acompanamiento.esta-entrando .comunicacion__llamada::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #FFA51F;
    animation: acomp-onda 850ms var(--curva-entrante) both;
    pointer-events: none;
}

.acompanamiento.esta-entrando .comunicacion__llamada::before {
    animation-delay: 130ms;
}

.acompanamiento.esta-entrando .comunicacion__llamada::after {
    animation-delay: 350ms;
}

/* 2. Las tarjetas se despliegan de arriba hacia abajo */
.via {
    transform-origin: top center;
}

.acompanamiento.esta-entrando .via {
    animation: acomp-tarjeta 1000ms var(--curva-entrante) both;
}

.acompanamiento.esta-entrando .via:nth-child(1) {
    animation-delay: 720ms;
}

.acompanamiento.esta-entrando .via:nth-child(2) {
    animation-delay: 920ms;
}

.acompanamiento.esta-entrando .cinta {
    animation: acomp-logos 850ms var(--curva-entrante) both;
}

.acompanamiento.esta-entrando .via:nth-child(1) .cinta {
    animation-delay: 930ms;
}

.acompanamiento.esta-entrando .via:nth-child(2) .cinta {
    animation-delay: 1130ms;
}

.acompanamiento.esta-entrando .via__accion {
    animation: acomp-boton 600ms var(--curva-entrante) both;
}

.acompanamiento.esta-entrando .via:nth-child(1) .via__accion {
    animation-delay: 1200ms;
}

.acompanamiento.esta-entrando .via:nth-child(2) .via__accion {
    animation-delay: 1370ms;
}

/* 3. Rayuela se abre desde una franja central. La demora la pone el módulo:
   1450ms si ya estaba a la vista, 0 si hubo que esperar a que apareciera. */
.rayuela.esta-entrando {
    animation: acomp-rayuela 1150ms var(--curva-entrante) var(--demora, 0ms) both;
}

.rayuela.esta-entrando .rayuela__marca,
.rayuela.esta-entrando .demo,
.rayuela.esta-entrando .rayuela__cierre {
    animation: acomp-dentro 800ms var(--curva-entrante) both;
}

.rayuela.esta-entrando .rayuela__marca {
    animation-delay: calc(var(--demora, 0ms) + 300ms);
}

.rayuela.esta-entrando .demo {
    animation-delay: calc(var(--demora, 0ms) + 470ms);
}

.rayuela.esta-entrando .rayuela__cierre {
    animation-delay: calc(var(--demora, 0ms) + 640ms);
}

@keyframes acomp-megafono {
    0% { rotate: 0deg; scale: 1; }
    16% { rotate: -17deg; scale: 1.06; }
    33% { rotate: 14deg; scale: 1.1; }
    50% { rotate: -12deg; scale: 1.08; }
    66% { rotate: 9deg; scale: 1.05; }
    83% { rotate: -5deg; scale: 1.02; }
    100% { rotate: 0deg; scale: 1; }
}

@keyframes acomp-onda {
    from {
        scale: 0.75;
        opacity: 0.55;
    }

    to {
        scale: 2.3;
        opacity: 0;
    }
}

/* El último tramo abre el recorte más allá del borde: así la sombra de la
   tarjeta vuelve de a poco y no aparece de golpe al terminar. */
@keyframes acomp-tarjeta {
    0% {
        opacity: 0;
        clip-path: inset(0 0 100% 0 round 16px);
        transform: translateY(-14px) rotateX(-9deg) scale(0.96);
    }

    85% {
        clip-path: inset(0 0 0 0 round 16px);
    }

    100% {
        opacity: 1;
        clip-path: inset(-60px -60px -60px -60px round 16px);
        transform: translateY(0) rotateX(0deg) scale(1);
    }
}

@keyframes acomp-logos {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes acomp-boton {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes acomp-rayuela {
    0% {
        clip-path: inset(50% 0 50% 0 round 17px);
        transform: scaleX(0.94);
    }

    88% {
        clip-path: inset(0 0 0 0 round 17px);
    }

    100% {
        clip-path: inset(-70px -70px -70px -70px round 17px);
        transform: scaleX(1);
    }
}

@keyframes acomp-dentro {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .acompanamiento.esta-por-entrar .via,
    .acompanamiento.esta-por-entrar .cinta,
    .acompanamiento.esta-por-entrar .via__accion,
    .rayuela.esta-por-entrar {
        opacity: 1;
    }

    .acompanamiento.esta-entrando .comunicacion__icono,
    .acompanamiento.esta-entrando .via,
    .acompanamiento.esta-entrando .cinta,
    .acompanamiento.esta-entrando .via__accion,
    .rayuela.esta-entrando,
    .rayuela.esta-entrando .rayuela__marca,
    .rayuela.esta-entrando .demo,
    .rayuela.esta-entrando .rayuela__cierre {
        animation: none;
    }

    .acompanamiento.esta-entrando .comunicacion__llamada::before,
    .acompanamiento.esta-entrando .comunicacion__llamada::after {
        content: none;
    }
}

/* ---------- Rayuela ---------- */

.rayuela {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.15fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(1.5rem, 3.5vw, 3rem);
    width: 100%;
    padding: clamp(1.5rem, 2.6vw, 2.25rem);
    border-radius: clamp(14px, 1.4vw, 22px);
    background-color: #354B42;
    box-shadow: 0 26px 54px -30px rgba(28, 28, 28, 0.55);
    color: var(--color-blanco);
}

.rayuela__marca {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.rayuela__icono {
    flex: none;
    width: clamp(2.9rem, 4vw, 3.4rem);
    height: clamp(2.9rem, 4vw, 3.4rem);
}

.rayuela__nombre {
    margin: 0;
    font-family: var(--fuente-sans);
    font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.015em;
}

.rayuela__bajada {
    margin: 0.4rem 0 0;
    font-size: var(--texto-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
}

.rayuela__cierre {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.rayuela__texto {
    margin: 0;
    font-size: var(--texto-base);
    line-height: 1.65;
    text-wrap: pretty;
    color: rgba(255, 255, 255, 0.82);
}

/* La demostración: una consulta atendida de punta a punta */
.demo {
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background-color: rgba(0, 0, 0, 0.16);
}

.demo__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--texto-xs);
    color: rgba(255, 255, 255, 0.55);
}

.demo__canal {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.demo__latido {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #4ADE80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
    animation: latir 2.2s infinite;
}

@keyframes latir {
    70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.demo__hilo {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.4rem;
    height: 12.5rem;
    margin-top: 0.65rem;
    overflow: hidden;
}

.burbuja {
    max-width: 88%;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    font-size: 0.78rem;
    line-height: 1.45;
    opacity: 0;
    translate: 0 8px;
    animation: entrar-burbuja 0.45s var(--curva-suave) forwards;
}

@keyframes entrar-burbuja {
    to { opacity: 1; translate: 0 0; }
}

.burbuja--familia {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.94);
}

.burbuja--bot {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    background-color: rgba(129, 161, 152, 0.34);
}

.burbuja--cierre {
    background-color: rgba(255, 165, 41, 0.2);
    color: #FFD9A0;
}

.escribiendo {
    display: flex;
    align-self: flex-start;
    gap: 3px;
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    background-color: rgba(129, 161, 152, 0.34);
}

.escribiendo span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.75);
    animation: puntear 1.2s infinite;
}

.escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.escribiendo span:nth-child(3) { animation-delay: 0.3s; }

@keyframes puntear {
    0%, 60%, 100% { opacity: 0.3; translate: 0 0; }
    30% { opacity: 1; translate: 0 -3px; }
}

@media (max-width: 900px) {
    .vias,
    .rayuela {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 1101px) and (max-width: 1399px) {
    .rayuela {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 1.5rem;
    }

    .rayuela .demo {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .rayuela__cierre {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .demo__latido,
    .escribiendo span {
        animation: none;
    }
}

/* El "Ver mas" del final: solo la palabra y su subrayado. */
.casos__mas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding-inline: 0.35rem;
    font-family: var(--fuente-sans);
    font-size: var(--texto-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-decoration: none;
    color: var(--color-carbon);
}

.casos__mas-palabra {
    position: relative;
}

.casos__mas-palabra::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -0.35rem;
    height: 1px;
    background-color: currentColor;
    scale: 0 1;
    transform-origin: left center;
    transition: scale 0.45s var(--curva-entrada);
}

@media (hover: hover) {
    .casos__mas:hover .casos__mas-palabra::after {
        scale: 1 1;
    }
}

.casos__mas:focus-visible {
    outline: 2px solid var(--color-carbon);
    outline-offset: 4px;
}

.casos__mas:focus-visible .casos__mas-palabra::after {
    scale: 1 1;
}

@media (prefers-reduced-motion: reduce) {
    .casos__mas-palabra::after {
        transition: none;
    }
}

@media (max-width: 760px) {
    .casos__grilla {
        grid-template-columns: minmax(0, 1fr);
    }

    .caso-exito--ancho .caso-exito__enlace {
        flex-direction: column;
    }

    .caso-exito--ancho .caso-exito__imagen {
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    .caso-exito--ancho .caso-exito__datos {
        padding-inline: clamp(1.1rem, 2.2vw, 1.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .caso-exito__flecha,
    .caso-exito__accion-texto::after {
        transition: none;
    }
}

/* ---------- El proceso, como una sala de museo ---------- */

/* Las obras se reparten en tres planos: el fondo lejano, el riel y el David,
   que queda delante de todo y las tarjetas le pasan por detrás. */
.proceso__museo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.proceso__obra {
    position: absolute;
    height: auto;
    object-fit: contain;
}

.proceso__obra--jinete {
    top: 5%;
    left: 5%;
    width: clamp(7rem, 13vw, 13rem);
    opacity: 0.45;
    filter: blur(3px) drop-shadow(14px 18px 26px rgba(28, 28, 28, 0.35));
}

.proceso__obra--anfora {
    top: 4%;
    right: 4%;
    width: clamp(8rem, 14vw, 14rem);
    opacity: 0.9;
    rotate: 7deg;
    filter: blur(0.7px) drop-shadow(-14px 18px 26px rgba(28, 28, 28, 0.3));
}

.proceso__obra--virgen {
    bottom: -2%;
    left: 34%;
    width: clamp(7.5rem, 13vw, 13rem);
    opacity: 0.75;
    rotate: -9deg;
    filter: blur(1.6px) drop-shadow(-12px 16px 24px rgba(28, 28, 28, 0.32));
}

/* El riel pasa entre el fondo y el David */
.proceso__riel {
    position: relative;
    z-index: 2;
}

.proceso__titulo {
    position: relative;
    z-index: 4;
}

/* Lo que está en el centro se ve nítido; lo que se aleja, se desenfoca. */
.proceso__paso {
    --foco: 1;
}

.proceso__texto {
    filter: blur(calc((1 - var(--foco)) * 4px));
    transition:
        filter 0.45s var(--curva-suave),
        opacity 0.6s var(--curva-suave),
        translate 0.7s var(--curva-entrada);
}

.js .proceso__paso.esta-activo .proceso__texto {
    opacity: calc(0.42 + var(--foco) * 0.58);
}

/* En pantallas angostas las obras se corren para no pelearse con el menú */
@media (max-width: 767px) {
    .proceso__obra--jinete {
        top: 7%;
        left: -4%;
        width: clamp(5rem, 24vw, 7.5rem);
        opacity: 0.35;
    }

    .proceso__obra--anfora {
        top: auto;
        bottom: 6%;
        right: -4%;
        width: clamp(5.5rem, 26vw, 8rem);
        opacity: 0.7;
    }

    .proceso__obra--virgen {
        bottom: 2%;
        left: 28%;
        width: clamp(5rem, 24vw, 7.5rem);
        opacity: 0.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .proceso__texto {
        filter: none;
    }
}

/* Nuestro innegociable: cinco pasos legibles y las obras repartidas entre ellos. */
@media (max-width: 1100px) {
    /* Solapa la unión para que el redondeo de píxeles no deje ver el fondo oscuro. */
    .servicios + .proceso {
        margin-top: -1px;
        z-index: 3;
        box-shadow: none;
        clip-path: none;
    }

    .proceso {
        height: auto;
    }

    .proceso__escenario {
        position: relative;
        height: auto;
        padding: clamp(5.5rem, calc(12 * var(--vh-estable, 1vh)), 7rem) var(--margen-lateral) clamp(3rem, calc(8 * var(--vh-estable, 1vh)), 5rem);
        overflow: hidden;
    }

    .proceso__titulo {
        margin: 0 0 clamp(2rem, 6vw, 3.5rem);
        max-width: 100%;
        white-space: normal;
    }

    .proceso__riel {
        flex: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
        width: min(100%, 44rem);
        margin-inline: auto;
        padding: 0;
        translate: none;
        will-change: auto;
    }

    .proceso__recorrido,
    .proceso__pasos {
        width: 100%;
        height: auto;
    }

    .proceso__pasos {
        position: relative;
        flex-direction: column;
        align-items: stretch;
        gap: clamp(1.75rem, 5vw, 3rem);
    }

    .proceso__pasos::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 7px;
        width: 1px;
        background: linear-gradient(var(--color-eucalipto), rgba(129, 161, 152, 0.25));
    }

    .proceso__paso {
        --espacio-obra: 0px;
        width: 100%;
        height: auto;
        padding: var(--espacio-obra) 0 0 1.75rem;
    }

    .proceso__paso:has(.proceso__obra) {
        --espacio-obra: clamp(8.5rem, 26vw, 12rem);
    }

    .proceso__linea,
    .proceso__tallo {
        display: none;
    }

    .proceso__punto {
        top: calc(var(--espacio-obra) + 1.75rem);
        left: 7px;
        translate: -50% 0;
        scale: 1;
        box-shadow: 0 0 0 4px var(--color-blanco);
    }

    .proceso .proceso__texto {
        position: relative;
        inset: auto;
        z-index: 1;
        width: 100%;
        max-width: none;
        padding: clamp(1.1rem, 3vw, 1.75rem);
        filter: none;
        opacity: 1;
        translate: none;
        background-color: rgba(255, 255, 255, 0.94);
        border-color: rgba(78, 108, 98, 0.2);
    }

    .proceso .proceso__titulo-paso,
    .proceso .proceso__descripcion {
        opacity: 1;
        translate: none;
        max-width: none;
    }

    /* Cada obra tiene aire propio arriba de la tarjeta; sólo su base queda detrás. */
    .proceso__paso .proceso__obra {
        top: 0;
        right: 8%;
        bottom: auto;
        left: auto;
        z-index: 0;
        width: auto;
        max-width: 60%;
        height: calc(var(--espacio-obra) + 1rem);
        opacity: 0.85;
        filter: drop-shadow(8px 12px 15px rgba(28, 28, 28, 0.2));
        pointer-events: none;
    }

    .proceso__paso .proceso__obra--jinete {
        opacity: 0.65;
        filter: blur(2.5px) drop-shadow(12px 16px 20px rgba(28, 28, 28, 0.3));
    }

    .proceso__paso .proceso__obra--anfora {
        right: 14%;
    }

    .proceso__paso .proceso__obra--virgen {
        right: 5%;
        filter: blur(0.7px) drop-shadow(8px 12px 15px rgba(28, 28, 28, 0.2));
    }

    .proceso__cierre {
        justify-content: center;
        padding: 0;
    }
}

/* Logo de Rayuela y descriptor debajo. */
.rayuela__marca { gap: 0.25rem; }
.rayuela__logo { display: block; width: 12rem; max-width: 100%; height: auto; }