/* ── Ecosystem reveal on scroll ── */

@media (min-width: 768px) {

    /* Estado inicial: invisible y desplazado */
    .eco-reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    /* Imagen: entra desde su lado (izquierda si pos=left, derecha si pos=right) */
    .eco-reveal[data-pos="left"] .eco-reveal__img {
        clip-path: inset(0 100% 0 0);
        transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .eco-reveal[data-pos="right"] .eco-reveal__img {
        clip-path: inset(0 0 0 100%);
        transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Texto: entra desde el lado opuesto */
    .eco-reveal[data-pos="left"] .eco-reveal__txt {
        opacity: 0;
        transform: translateX(60px);
        transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
    }

    .eco-reveal[data-pos="right"] .eco-reveal__txt {
        opacity: 0;
        transform: translateX(-60px);
        transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
    }

    /* ── Estado visible (clase añadida por JS) ── */
    .eco-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .eco-reveal.is-visible .eco-reveal__img {
        clip-path: inset(0 0% 0 0);
    }

    .eco-reveal.is-visible .eco-reveal__txt {
        opacity: 1;
        transform: translateX(0);
    }
}