/* ==========================================================================
   GL Homes · vídeo que avanza al bajar por la página (entrada de la home)
   Colores, letras, medidas y transiciones del sistema de diseño del tema (root.css).

   El truco: la pieza mide varias pantallas de alto y lo que se ve va PEGADO dentro,
   justo debajo de la cabecera. Quien baja percibe que la página se queda quieta y
   el vídeo avanza. La altura grande y el pegado solo se activan cuando el programa
   arranca (`is-activa`); sin él, queda una imagen fija de una pantalla.
   ========================================================================== */

.glh-vs {
    position: relative;
    width: 100%;
}

.glh-vs.is-activa {
    height: calc(var(--glh-vs-recorrido-movil, 220) * 1vh);
}

.glh-vs__pega {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(100vh - var(--gl-header-height));
    height: calc(100svh - var(--gl-header-height));
    overflow: hidden;
    background-color: var(--gl-primary);
}

.glh-vs.is-activa .glh-vs__pega {
    position: sticky;
    top: var(--gl-header-height);
}

body.admin-bar .glh-vs.is-activa .glh-vs__pega {
    top: calc(var(--gl-header-height) + var(--wp-admin--admin-bar--height, 0px));
}

/* La primera imagen del vídeo, que es lo que se ve hasta que el lienzo está listo */
.glh-vs__poster,
.glh-vs__lienzo,
.glh-vs__velo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.glh-vs__poster img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.glh-vs__lienzo {
    display: block;
    opacity: 0;
}

.glh-vs.is-lista .glh-vs__lienzo {
    opacity: 1;
}

/* Velo: oscurece la zona del titular para que el blanco se lea sobre cualquier fotograma.
   En móvil el titular ocupa casi todo el ancho, así que el velo cubre la imagen entera;
   en ordenador (más abajo) solo el lado izquierdo, y la casa queda limpia a la derecha. */
.glh-vs__velo {
    background-image:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--gl-primary) 74%, transparent) 0%,
            color-mix(in srgb, var(--gl-primary) 58%, transparent) 100%
        );
}

.glh-vs__texto {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gl-space-md);
    width: 100%;
    padding: var(--gl-space-xl) var(--gl-space-md);
    color: var(--gl-white);
}

.glh-vs__titulo.gl-heading {
    margin: 0;
    font-weight: 300 !important;
    letter-spacing: normal !important;
    color: var(--gl-white) !important;
}

.glh-vs__linea {
    display: block;
    width: var(--gl-divider-width);
    height: var(--gl-line);
    background-color: var(--gl-white);
}

.glh-vs__subtitulo {
    margin: 0;
    max-width: 30em;
    font-family: var(--gl-font-body);
    font-size: var(--gl-text-base);
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--gl-white);
}

/* Aviso de que se puede bajar: se va en cuanto se baja */
.glh-vs__pista {
    position: absolute;
    left: 50%;
    bottom: var(--gl-space-lg);
    z-index: 2;
    display: none;
    width: var(--gl-space-md);
    height: var(--gl-space-md);
    color: var(--gl-white);
    transform: translateX(-50%);
    transition: opacity var(--gl-transition);
}

.glh-vs.is-activa .glh-vs__pista {
    display: block;
    animation: glh-vs-baja 1.9s ease-in-out infinite;
}

.glh-vs.is-bajada .glh-vs__pista {
    opacity: 0;
}

.glh-vs__pista svg {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes glh-vs-baja {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 var(--gl-space-xs); }
}

/* Barra de progreso: cuánto queda de vídeo */
.glh-vs__barra {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: none;
    height: calc(var(--gl-line) * 2);
    background-color: color-mix(in srgb, var(--gl-white) 22%, transparent);
}

.glh-vs.is-activa .glh-vs__barra {
    display: block;
}

.glh-vs__barra i {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--gl-white);
    transform: scaleX(0);
    transform-origin: left center;
}

/* Aviso para quien edita, cuando todavía no hay fotogramas subidos */
.glh-vs__aviso {
    margin: 0;
    padding: var(--gl-space-lg);
    font-family: var(--gl-font-body);
    font-size: var(--gl-text-base);
    color: var(--gl-muted);
    text-align: center;
    background-color: var(--gl-bg);
}

@media (min-width: 768px) {
    .glh-vs.is-activa {
        height: calc(var(--glh-vs-recorrido, 300) * 1vh);
    }

    .glh-vs__texto {
        padding: var(--gl-space-xl);
    }

    .glh-vs__velo {
        background-image:
            linear-gradient(
                90deg,
                color-mix(in srgb, var(--gl-primary) 78%, transparent) 0%,
                color-mix(in srgb, var(--gl-primary) 62%, transparent) 36%,
                color-mix(in srgb, var(--gl-primary) 10%, transparent) 64%,
                transparent 82%
            );
    }
}

/* El contenedor de Elementor que lleva la pieza: a sangre, sin aire ni huecos */
.e-con.gl-hero-scroll {
    --padding-top: 0px;
    --padding-right: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --gap: 0px;
    --width: 100%;
    --content-width: 100%;
}

.gl-hero-scroll > .elementor-widget-glh_video_scroll,
.gl-hero-scroll > .e-con-inner > .elementor-widget-glh_video_scroll {
    width: 100%;
    max-width: 100%;
}