.elementor-1048 .elementor-element.elementor-element-e5da7a6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}/* Start custom CSS for html, class: .elementor-element-b83015b */.water-process {
    position: relative;
    overflow: hidden;
    height: 2000px; /* Ajustar para permitir suficiente scroll */
    background-color: white;
    margin: 0 auto;
    max-width: 620px; /* Limita el ancho del contenedor */
}

.container {
    position: relative;
    height: 100%;
    width: 100%;
}

.process-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0; /* Comienza con altura 0 para superposición */
    overflow: hidden;
    transition: height 0.3s ease-out; /* Transición suave para el efecto */
}

.process-img.background {
    height: 100%; /* La imagen de fondo siempre ocupa todo el contenedor */
    opacity: 1;   /* Siempre visible */
    z-index: 1;   /* Asegura que esté detrás de las otras capas */
}

.process-img img {
    width: 100%;
    height: auto;
}

.hidden-xs {
    display: none;
}

@media (min-width: 768px) {
    .hidden-xs {
        display: block;
    }
}

.process-img.over {
    z-index: 2; /* Coloca la imagen de superposición sobre la imagen de fondo */
}

.process-img.over-blur,
.process-img.over-black,
.process-img.over-blue {
    z-index: 3; /* Más capas sobre la superposición */
}/* End custom CSS */