/* =========================================================
   PORTADA CON VÍDEO (solo ordenador, pantalla ancha de 1000px o más)
   En móvil y tablet no se aplica nada de esto.
   ========================================================= */

.hero-video {
    display: none;
}

@media (min-width: 1000px) and (min-aspect-ratio: 3/2) {

    html.hv .hero {
        min-height: 100vh;
        min-height: max(100svh, 640px);
    }

    /* Vídeo a pantalla completa. Mientras carga se ve la imagen fija. */
    html.hv .hero-video {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        background: #e9eef2;
    }

    html.hv .hero-video-media {
        position: absolute;
        inset: 0;
        background: url("video/portada-egaibar-poster.webp") 30% 50% / cover no-repeat;
    }

    html.hv .hero-video-media video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 30% 50%;
        opacity: 0;
        transition: opacity 0.9s ease;
    }

    html.hv .hero-video.is-playing video {
        opacity: 1;
    }

    /* Velo claro a la izquierda: el texto se lee siempre, sea cual sea la escena */
    html.hv .hero-video-veil {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(
                90deg,
                rgba(238, 247, 250, 0.94) 0%,
                rgba(238, 247, 250, 0.84) 24%,
                rgba(238, 247, 250, 0.42) 42%,
                rgba(238, 247, 250, 0) 60%
            );
    }

    html.hv .hero .navbar,
    html.hv .hero .hero-main {
        position: relative;
        z-index: 2;
    }

    /* La cabecera (y su menú desplegado) siempre por encima del texto de la portada */
    html.hv .hero .navbar {
        z-index: 3;
    }

    /* La foto de siempre se sustituye por el vídeo */
    html.hv .hero .hero-image {
        display: none;
    }

    /* Texto algo más contenido para dejar respirar la imagen */
    html.hv .hero .hero-content {
        max-width: clamp(620px, 52vw, 860px);
    }

    html.hv .hero .hero-content h1 {
        font-size: clamp(44px, 4vw, 68px);
    }

    /* Sello: más pequeño y pegado al borde derecho (alineado con el menú).
       En pantallas muy anchas se desplaza hacia el borde de la ventana
       para no tapar el vídeo. */
    html.hv .hero-badge {
        right: calc(-1 * clamp(0px, (100vw - 1440px) * 0.6, 300px));
        bottom: max(17%, 115px);
        width: 96px;
        height: 96px;
    }

    html.hv .hero-badge img.hero-badge-flake {
        width: 80px;
        height: 80px;
    }
}

/* Portátiles pequeños */
@media (min-width: 1000px) and (max-width: 1199px) and (min-aspect-ratio: 3/2) {

    html.hv .hero .hero-content {
        max-width: 46%;
    }

    html.hv .hero .hero-content h1 {
        font-size: clamp(28px, 3vw, 36px);
    }

    html.hv .hero .hero-description {
        font-size: 16px;
    }
}

/* Pantallas muy grandes: el vídeo se acerca un poco para que el texto no choque con la imagen
   (no en ventanas muy anchas y bajas, para que el protagonista no se acerque a la barra del menú) */
@media (min-width: 1700px) and (max-aspect-ratio: 21/10) {

    html.hv .hero-video-media {
        transform: scale(1.07);
        transform-origin: 0 55%;
    }
}


/* =========================================================
   PORTADA CON VÍDEO EN MÓVIL (y tablet en vertical)
   El vídeo ocupa la parte de arriba de la portada, detrás del logo,
   y se funde con el azul claro donde empieza el texto. Así se ve el
   producto en movimiento y el texto se lee siempre sobre fondo liso.
   Vídeo vertical aparte (video/portada-egaibar-movil.*): pesa poco.
   ========================================================= */

@media (max-width: 999px) and (max-aspect-ratio: 1/1) {

    html.hvm .hero {
        --banda: clamp(230px, 36vh, 520px);
        --banda: clamp(230px, 36svh, 520px);
    }

    html.hvm .hero-video {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: var(--banda);
        z-index: 0;
        overflow: hidden;
        background: #e9eef2;
        -webkit-mask-image: linear-gradient(180deg, #000 0, #000 64%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 0, #000 64%, transparent 100%);
    }

    html.hvm .hero-video-media {
        position: absolute;
        inset: 0;
        background: url("video/portada-egaibar-movil-poster.webp") 50% 40% / cover no-repeat;
    }

    html.hvm .hero-video-media video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 40%;
        opacity: 0;
        transition: opacity 0.9s ease;
    }

    html.hvm .hero-video.is-playing video {
        opacity: 1;
    }

    /* Velo suave arriba: el logo y el menú se leen sobre cualquier escena */
    html.hvm .hero-video-veil {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(
                ellipse 250px 150px at 90px 75px,
                rgba(238, 247, 250, 0.92) 0%,
                rgba(238, 247, 250, 0.7) 45%,
                rgba(238, 247, 250, 0) 100%
            ),
            linear-gradient(
                180deg,
                rgba(238, 247, 250, 0.55) 0%,
                rgba(238, 247, 250, 0.18) 30%,
                rgba(238, 247, 250, 0) 50%
            );
    }

    html.hvm .hero .navbar,
    html.hvm .hero .hero-main {
        position: relative;
        z-index: 2;
    }

    /* La cabecera (y su menú desplegado) siempre por encima del texto de la portada */
    html.hvm .hero .navbar {
        z-index: 3;
    }

    /* El texto empieza justo donde el vídeo ya se ha fundido */
    html.hvm .hero .hero-main {
        margin-top: calc(var(--banda) - 202px);
        padding-top: 0;
    }

    html.hvm .hero .hero-image {
        display: none;
    }
}

/* Móvil: logo pequeño, textos más juntos y los dos botones a la vista sin bajar.
   (Todo aquí, con prioridad alta, para que no dependa de otras hojas de estilo) */
@media (max-width: 600px) and (max-aspect-ratio: 1/1) {
    html.hvm .hero { padding-top: 25px; }
    html.hvm .hero .logo { width: 150px; }
    html.hvm .hero .navbar { height: 187px; align-items: flex-start; }
    html.hvm .hero .hero-main { padding-bottom: 40px; }
    html.hvm .hero .hero-works { display: none; }
    html.hvm .hero .hero-label { margin-bottom: 14px; }
    html.hvm .hero .hero-content h1 { margin-bottom: 14px; }
    html.hvm .hero .hero-description { margin-bottom: 18px; line-height: 1.55; }
    html.hvm .hero .hero-buttons { margin-top: 0; gap: 6px; }
}

/* Tablet en vertical: el logo es algo más grande, el texto empieza un poco más abajo */
@media (min-width: 601px) and (max-width: 999px) and (max-aspect-ratio: 1/1) {
    html.hvm .hero .hero-main {
        margin-top: calc(var(--banda) - 263px);
    }

    /* más velo arriba para que el menú se lea sobre el producto */
    html.hvm .hero-video-veil {
        background:
            radial-gradient(
                ellipse 300px 170px at 110px 85px,
                rgba(238, 247, 250, 0.92) 0%,
                rgba(238, 247, 250, 0.7) 45%,
                rgba(238, 247, 250, 0) 100%
            ),
            linear-gradient(
                180deg,
                rgba(238, 247, 250, 0.85) 0%,
                rgba(238, 247, 250, 0.5) 22%,
                rgba(238, 247, 250, 0) 46%
            );
    }
}