/* Sin JavaScript y en escritorio, conservar el flujo original. */
.servicios__secuencia,
.servicios__escenario,
.servicios__pantalla {
    display: contents;
}

@media (max-width: 1100px) {
    /* El tamaño grande es estable al abrir/cerrar las barras del navegador. */
    .servicios--horizontal .servicios__portada {
        position: sticky;
        top: 0;
        min-height: calc(100 * var(--vh-estable, 1vh));
        min-height: calc(100 * var(--lvh-estable, 1lvh));
        overflow-x: clip;
        overflow-y: visible;
    }

    .servicios--horizontal .servicios__portada::after {
        bottom: auto;
        height: max(100%, var(--alto-visible, 0px));
        height: max(100%, 100dvh, var(--alto-visible, 0px));
    }

    .servicios--horizontal .servicios__secuencia {
        display: block;
        position: relative;
        margin-top: calc(-100 * var(--vh-estable, 1vh));
        margin-top: calc(-100 * var(--lvh-estable, 1lvh));
        height: var(--alto-secuencia, calc(400 * var(--svh-estable, 1svh)));
    }

    .servicios--horizontal .servicios__escenario {
        display: block;
        position: sticky;
        top: 0;
        height: calc(100 * var(--vh-estable, 1vh));
        height: calc(100 * var(--lvh-estable, 1lvh));
        overflow: visible;
        background: transparent;
    }

    /* Marco visible independiente de la escena que mide el recorrido.
       El fondo ocupa toda la pantalla sin sombras ni recortes negativos. */
    .servicios--horizontal .servicios__pantalla {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: max(100%, var(--alto-visible, 0px));
        height: max(100%, 100dvh, var(--alto-visible, 0px));
        overflow: hidden;
    }

    .servicios--horizontal .servicio {
        position: absolute;
        inset: 0;
        height: 100%;
        overflow: visible;
        translate: var(--entrada-lateral, 100%) 0;
        will-change: translate;
        background-color: var(--fondo-tarjeta);
    }

    .servicios--horizontal .servicio__lienzo {
        min-height: calc(100 * var(--lvh-estable, 1lvh));
        padding-block: calc(76px + 1rem) 1.25rem;
        rotate: none;
        translate: none;
        will-change: auto;
    }

    .servicios--horizontal .servicio__titulo {
        padding-block: 0.75rem;
    }

    .servicios--horizontal .servicio__detalles {
        gap: 0.8rem;
        margin-block: 1rem;
    }

    .servicios--horizontal .servicio__detalle {
        gap: 0.2rem;
    }

    .servicios--horizontal .servicio__encabezado {
        padding-block: 0.75rem 0;
    }

    .servicios--horizontal .servicio--eucalipto { --fondo-tarjeta: var(--color-eucalipto); }
    .servicios--horizontal .servicio--naranja { --fondo-tarjeta: var(--color-naranja); }
    .servicios--horizontal .servicio--claro { --fondo-tarjeta: var(--color-blanco); }

    .proceso--horizontal {
        --ancho-paso: min(86vw, 26rem);
        --aire-inferior-pasos: clamp(0px, calc(calc(100 * var(--lvh-estable, 1lvh)) - 36rem), 7rem);
        height: var(--alto-proceso, calc(500 * var(--svh-estable, 1svh)));
    }

    .proceso--horizontal .proceso__escenario {
        position: sticky;
        top: 0;
        height: calc(100 * var(--vh-estable, 1vh));
        height: calc(100 * var(--lvh-estable, 1lvh));
        padding: 5.5rem 0 1.25rem;
        justify-content: flex-start;
        overflow: clip;
    }

    .proceso--horizontal .proceso__titulo {
        position: relative;
        margin: 0 var(--margen-lateral) 1rem;
        flex-shrink: 0;
    }

    .proceso--horizontal .proceso__ventana {
        display: block;
        flex: 1;
        min-height: 0;
        width: 100%;
    }

    .proceso--horizontal .proceso__riel {
        flex-direction: row;
        align-items: center;
        gap: 1.75rem;
        width: max-content;
        height: 100%;
        padding-inline: calc((100vw - var(--ancho-paso)) / 2);
        margin: 0;
        translate: calc(var(--avance) * var(--recorrido) * -1) 0;
        will-change: translate;
    }

    .proceso--horizontal .proceso__recorrido {
        width: auto;
        height: 100%;
    }

    .proceso--horizontal .proceso__pasos {
        width: auto;
        height: 100%;
        flex-direction: row;
        align-items: center;
        gap: 1.75rem;
    }

    .proceso--horizontal .proceso__pasos::before {
        display: none;
    }

    .proceso--horizontal .proceso__paso {
        flex: none;
        width: var(--ancho-paso);
        height: 100%;
        padding: 0 0 var(--aire-inferior-pasos);
        justify-content: center;
    }

    .proceso--horizontal .proceso__texto {
        position: relative;
        inset: auto;
        width: 100%;
        padding: 1.25rem;
        background-color: rgba(255, 255, 255, 0.94);
        filter: none;
        opacity: 1;
        translate: none;
    }

    .proceso--horizontal .proceso__linea,
    .proceso--horizontal .proceso__punto {
        display: none;
    }

    .proceso--horizontal .proceso__cierre {
        flex: none;
        width: var(--ancho-paso);
        translate: 0 calc(var(--aire-inferior-pasos) / -2);
    }

    .proceso--horizontal .proceso__obra--jinete {
        top: 15%;
        left: -3%;
        width: clamp(6rem, 30vw, 13rem);
        opacity: 0.3;
    }

    .proceso--horizontal .proceso__obra--anfora {
        top: auto;
        right: -2%;
        bottom: 10%;
        width: clamp(6rem, 30vw, 13rem);
        opacity: 0.6;
    }

    .proceso--horizontal .proceso__obra--virgen {
        bottom: -4%;
        left: 19%;
        width: clamp(5rem, 25vw, 11rem);
        opacity: 0.4;
    }
}

@media (max-width: 1100px) {
    /* Evitar superficies rectangulares al combinar blur y drop-shadow en
       navegadores móviles. La transparencia conserva la profundidad. */
    .proceso .proceso__obra {
        filter: none;
    }

    .hero .logo-3d {
        margin-bottom: clamp(-2.75rem, calc(-3.6 * var(--vh-estable, 1vh)), -1.4rem);
    }
}