/*
 * Hero con vídeo de fondo.
 *
 * Archivo aparte del `styles.css` general: este motivo está en pruebas y se
 * va a reescribir varias veces. Sólo se carga cuando `?hero=video` está
 * activo, así que no pesa para nadie más.
 *
 * El vídeo va limpio, sin velo ni degradados encima. Eso significa que el
 * contraste del texto **depende del material**: hace falta vídeo oscuro y sin
 * detalle en el tercio izquierdo, que es donde cae el titular. Lo único que
 * protege el texto es su propia sombra, que va sobre la letra y no sobre el
 * vídeo.
 */

.hero-video {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;

    /*
     * La pantalla entera, y el vídeo pasa **por debajo** de la cabecera.
     *
     * `styles.css` le da al hero de la portada un `margin-top` igual al alto
     * de la barra, porque con la barra opaca el hero empieza donde ella
     * termina. Aquí la barra es transparente arriba del todo, así que ese
     * margen dejaba ver el fondo blanco del cuerpo por detrás de ella: en
     * lugar de un cristal sobre el vídeo se veía una franja clara.
     *
     * Sin margen y con `100vh`, el vídeo llena la primera pantalla entera y la
     * cabecera flota encima.
     */
    min-height: 100vh;

    /* El fondo de debajo es Azul Profundo y no negro: mientras el vídeo carga
       —o si no llega nunca— la cabecera se ve de la marca, no apagada. */
    background: #0a1230;

    /*
     * Sin el borde de `.hero`.
     *
     * `styles.css` le pone `border-bottom: 1px solid` a toda cabecera, y sobre
     * fondo claro eso separa bien. Aquí el borde es más claro que el vídeo, así
     * que se leía como una raya cruzando el pie de la cabecera —y costó
     * encontrarla porque parecía un hueco de maquetación, no un borde puesto a
     * propósito en otro archivo.
     */
    border-bottom: 0;
}

/*
 * El póster y las dos capas de vídeo ocupan lo mismo y se tapan entre sí.
 *
 * El píxel de más no es un descuido. Con `height: 100 %` el vídeo quedaba un
 * píxel más corto que su sección —medido en cuatro alturas de ventana
 * distintas, siempre uno— y por ese hueco asomaba el Azul Profundo del fondo.
 * Como abajo el vídeo es más oscuro que ese azul, se leía como una raya clara
 * cruzando el pie de la cabecera.
 *
 * `inset` solo no vale: un vídeo es un elemento reemplazado y no se estira
 * para llenar la caja, se queda en su tamaño propio. Se probó y dejaba huecos
 * de hasta cincuenta píxeles según la ventana.
 *
 * El píxel sobrante lo recorta el `overflow: hidden` de la sección.
 */
.hero-video-poster,
.hero-video-lienzo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: calc(100% + 1px);
    object-fit: cover;
}

/*
 * Las dos capas del bucle.
 *
 * Están las dos siempre presentes y se turnan: la que lleva `esta-visible` es
 * la que se ve. El cambio de opacidad es lo que borra el corte del bucle, así
 * que su duración tiene que coincidir con el `FUNDIDO` del script —un
 * segundo—. Si se cambia aquí, hay que cambiarlo allí.
 */
.hero-video-lienzo {
    z-index: 1;
    opacity: 0;
    transition: opacity 1000ms linear;
}

.hero-video-lienzo.esta-visible {
    opacity: 1;
}

/* Hasta que la primera capa da su primer fotograma manda el póster: si no, se
   ve un salto a negro entre el arranque y la imagen. */
.hero-video:not(.esta-reproduciendo) .hero-video-lienzo {
    opacity: 0;
}

/*
 * El velo.
 *
 * **Un solo degradado horizontal**, parejo de arriba abajo: mas fuerte en el
 * borde izquierdo y desvaneciendo hacia la derecha hasta desaparecer.
 *
 * La version anterior sumaba una segunda capa vertical y el resultado era
 * desigual: cargaba la esquina de abajo a la izquierda y dejaba flojo el
 * centro, justo donde cae el titular. Con una sola capa el peso se reparte y
 * el video queda limpio en los dos tercios de la derecha, que es donde esta
 * la imagen que interesa.
 *
 * Los valores no son de gusto: salen de medir el contraste del texto sobre el
 * video servido y subir lo justo hasta pasar el minimo. Ver el comentario de
 * abajo con los numeros.
 */
.hero-video-velo {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(10, 18, 48, 0.80) 0%,
        rgba(10, 18, 48, 0.68) 26%,
        rgba(10, 18, 48, 0.44) 50%,
        rgba(10, 18, 48, 0.16) 74%,
        rgba(10, 18, 48, 0) 92%
    );
}

/*
 * El texto va prefijado con `.hero-video`, y no es cosmético.
 *
 * `styles.css` trae `.home-main-hero .hero-copy { z-index: 1 }`, que tiene más
 * especificidad que `.hero-video-copy` a secas. La sección lleva las dos
 * clases, así que ganaba la de `styles.css` y el texto se quedaba por debajo
 * del vídeo: salía blanco y tapado. El color era correcto y aun así no se
 * veía.
 */
.hero-video .hero-video-copy {
    position: relative;
    z-index: 4;
    width: min(700px, 58vw);
    max-width: 46rem;
    /* El relleno de arriba descuenta la cabecera: el texto va centrado en la
       pantalla, pero el centro óptico tiene que caer por debajo de la barra,
       no detrás de ella. */
    padding: calc(72px + var(--alto-cabecera, 104px)) 28px 72px clamp(34px, 4.2vw, 72px);
    color: #f1f3f6;
}

.hero-video .hero-video-copy .eyebrow {
    color: #19e0c2;
    text-shadow: 0 1px 10px rgba(10, 18, 48, 0.65);
}

.hero-video .hero-video-copy h1 {
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(10, 18, 48, 0.62), 0 1px 3px rgba(10, 18, 48, 0.5);
    text-wrap: balance;
}

/*
 * El remate del titular: el degradado del manual, con los tres colores.
 *
 * ## Por que la sombra va como `drop-shadow` y no como `text-shadow`
 *
 * El titular lleva sombra para despegarse del video. Con relleno macizo eso no
 * molesta: la letra es opaca y tapa su propia sombra. Pero aqui el relleno es
 * **transparente** —el color sale de recortar un degradado contra la forma de
 * la letra— y entonces la sombra se pinta *dentro* del glifo y se ve a traves.
 * El degradado salia sucio y apagado, como si estuviera desaturado, y no habia
 * forma de arreglarlo tocando los colores: se probaron seis combinaciones y
 * todas salian mates, mientras el mismo color macizo salia vivo.
 *
 * `drop-shadow` se aplica sobre el elemento ya pintado, asi que hace halo por
 * fuera del contorno y no toca el interior. Mismo efecto de separacion, y el
 * degradado conserva su saturacion.
 *
 * ## Por que el azul entra al 72 % y no antes
 *
 * El Azul Electrico del manual es el color mas oscuro de los seis: sobre este
 * fondo da 1,91:1, muy por debajo del 3:1 que pide un texto grande. Es
 * inevitable si se quiere el degradado completo, asi que se limita a las dos
 * ultimas letras, donde el halo del `drop-shadow` lo sostiene. El resto de la
 * palabra vive en teal y cian, que van a 5,6:1 y 4,0:1.
 */
.hero-video .hero-video-copy h1 span {
    color: transparent;
    text-shadow: none;
    background: linear-gradient(90deg, #19e0c2 0%, #00b4ff 72%, #2962ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 10px rgba(10, 18, 48, 0.85));
}

.hero-video .hero-video-copy .hero-filete {
    background: linear-gradient(90deg, #19e0c2, #00b4ff, #2962ff);
}

.hero-video .hero-video-copy p {
    max-width: 42rem;
    color: #f1f3f6;
    text-shadow: 0 1px 14px rgba(10, 18, 48, 0.7);
}

/*
 * Pantalla estrecha.
 *
 * Aquí cambian dos cosas de fondo respecto al escritorio.
 *
 * **El encuadre.** Con `cover` en una caja alta y estrecha el vídeo se recorta
 * muchísimo: de un plano de 16:9 se ve una franja central ampliada, y el
 * planeta aparece gigante y sin contexto. Con `contain` cabe el fotograma
 * entero y el planeta se ve a su tamaño, apoyado abajo; el resto de la caja lo
 * llena el Azul Profundo del fondo, que es de marca y no un hueco.
 *
 * **El velo.** El de escritorio es horizontal porque el texto vive en el
 * tercio izquierdo. Aquí ocupa el ancho entero, así que un degradado lateral
 * no protege nada: se cambia por uno vertical, denso arriba —donde va el
 * texto— y suelto abajo, para que el planeta se vea.
 *
 * El texto sube al principio en vez de quedarse centrado: así cae sobre la
 * zona densa y el planeta queda libre debajo.
 */
@media (max-width: 720px) {
    .hero-video {
        align-items: flex-start;
        min-height: calc(88vh - var(--alto-cabecera, 104px));
    }

    /*
     * El vídeo ocupa abajo, con su proporción, y se funde por arriba.
     *
     * Antes llenaba la caja entera con `contain`, así que la imagen quedaba
     * embuzonada: el elemento medía los 620 px del hero y la imagen sólo los
     * 219 de abajo. Su primera fila de píxeles -negro de espacio, no el Azul
     * Profundo del fondo- dibujaba una línea horizontal cruzando la cabecera a
     * media altura. Parecía cosa del velo y no lo era: seguía ahí con el velo
     * quitado, y se localizó midiendo dónde empieza cada capa.
     *
     * Enmascarar el elemento no servía: el 14 % de arriba de la caja es zona
     * vacía, no el canto de la imagen. Dándole a la caja la proporción del
     * material -16:9, la del póster- deja de haber embuzonado: el borde del
     * elemento **es** el borde de la imagen, y ahí sí la máscara lo disuelve.
     *
     * El encuadre no cambia: se sigue viendo el fotograma entero, anclado
     * abajo. `cover` lo arreglaría de raíz pero amplía tanto que el planeta
     * sale gigante y sin contexto, que es lo que este bloque ya decidió evitar.
     */
    .hero-video-poster,
    .hero-video-lienzo {
        inset: auto 0 0;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        /* Del 65 % al 80 % del hero, que es el mismo tramo en el que el velo
           suelta: si uno funde antes que el otro, el desfase se ve. */
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
    }

    .hero-video-velo {
        /*
         * Corta al 74 %, y ése es el techo.
         *
         * Cuanto antes suelte, más planeta se ve; el límite lo pone el
         * párrafo, que llega hasta el 83 % del alto del hero. Se probaron
         * cinco cortes midiendo las dos cosas a la vez:
         *
         *   84 % — párrafo 12,2:1, planeta apagado (era lo de antes)
         *   74 % — párrafo  4,9:1, planeta un 17 % más visible  <- éste
         *   68 % — párrafo  2,5:1, ilegible
         *
         * Bajar la densidad en vez de subir el corte tampoco sirve: al 74 %
         * con menos carga el párrafo cae a 3,6:1, por debajo del 4,5 que pide
         * un texto de este tamaño.
         */
        /*
         * Baja de forma continua, sin meseta y sin codos.
         *
         * El reparto del hero en móvil, medido: kicker 26-29 %, titular
         * 31-51 %, párrafo 53-65 %, botón e iconos 69-76 %, y el vídeo del
         * 65 % al 100 %. O sea que el texto y el vídeo **se solapan** en la
         * franja de abajo.
         *
         * Antes el velo aguantaba en 0,86 hasta el 62 % y luego caía de golpe.
         * Dos problemas a la vez: el tramo plano hacía que el azul se leyera
         * como un bloque macizo con un final visible, y el vídeo empezaba a
         * aparecer justo donde el velo seguía denso, así que los dos fundidos
         * iban a destiempo y el desfase se veía como un corte.
         *
         * Ahora el velo empieza a soltar donde acaba el párrafo -64 %- y baja
         * sin tramos rectos hasta el final, acompañando al vídeo en vez de
         * pelearse con él. Donde caen el botón y los iconos vale entre 0,74 y
         * 0,62, y los dos llevan su propio fondo, así que no dependen de esto.
         */
        background: linear-gradient(
            180deg,
            rgba(10, 18, 48, 0.92) 0%,
            rgba(10, 18, 48, 0.90) 30%,
            rgba(10, 18, 48, 0.88) 52%,
            rgba(10, 18, 48, 0.84) 64%,
            rgba(10, 18, 48, 0.74) 72%,
            rgba(10, 18, 48, 0.58) 80%,
            rgba(10, 18, 48, 0.38) 88%,
            rgba(10, 18, 48, 0.20) 95%,
            rgba(10, 18, 48, 0.12) 100%
        );
    }

    .hero-video .hero-video-copy {
        width: 100%;
        padding: 40px 22px 32px;
    }
}

/* Movimiento reducido: el póster quieto y ya está. El script tampoco carga el
   vídeo; esto sólo evita la transición. */
@media (prefers-reduced-motion: reduce) {
    .hero-video-lienzo {
        transition: none;
    }
}

/* Aviso de que faltan los archivos. Sólo fuera de producción; lo pinta el
   Blade, no llega nunca a nadie de fuera. */
.hero-video-aviso {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 5;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid rgba(25, 224, 194, 0.35);
    border-radius: 999px;
    background: rgba(10, 18, 48, 0.72);
    color: rgba(241, 243, 246, 0.82);
    font-size: 0.78rem;
}

.hero-video-aviso code {
    color: #19e0c2;
    font-size: 0.78rem;
}

/*
 * ══ La cabecera sobre el vídeo ═══════════════════════════════════════
 *
 * Con un hero a sangre, una barra sólida corta la imagen en dos. Aquí nace
 * transparente y se va vistiendo con el scroll, hasta quedar sólida cuando ya
 * hay contenido claro debajo y hace falta separarla de él.
 *
 * `--cabecera-solidez` la escribe `app.js` en cada fotograma de scroll: va de
 * 0 arriba del todo a 1 a partir de los 150 px. Toda la maquinaria ya existía
 * en `styles.css` para el hero claro —y estaba sin usar, porque la clase que
 * la activaba no la ponía nadie—; esto la enciende para el vídeo.
 *
 * **La diferencia con el hero claro es el texto.** Allí los enlaces se
 * oscurecen al hacerse transparente la barra, porque debajo hay una malla
 * clara. Aquí debajo hay vídeo oscuro, así que el texto se queda como está
 * —claro— y sólo se interpola el fondo. Por eso esto no reutiliza
 * `con-cabecera-clara`: comparten el fondo y se contradicen en el color.
 */
body.con-cabecera-sobre-video .site-header {
    --cabecera-solidez: 0;

    transition: transform 0.26s ease;

    /*
     * Dos capas que se relevan.
     *
     * Arriba del todo manda el velo: un degradado que baja de oscuro a nada
     * dentro de la propia barra. Sin él, los enlaces que caen sobre la parte
     * iluminada del vídeo quedaban en 2,1:1 —medido— y no se leían; con él no
     * hay canto duro en ningún sitio, que es lo que hacía que la barra sólida
     * se viera como un corte.
     *
     * Al bajar, el velo se retira y entra el azul macizo, porque a partir de
     * ahí lo que hay detrás es contenido claro.
     */
    background:
        linear-gradient(
            180deg,
            rgba(10, 18, 48, calc(0.88 - 0.88 * var(--cabecera-solidez))) 0%,
            rgba(10, 18, 48, calc(0.46 - 0.46 * var(--cabecera-solidez))) 62%,
            rgba(10, 18, 48, 0) 100%
        ),
        rgba(10, 18, 48, var(--cabecera-solidez));

    /* Arrancan en neutro: `blur(0)` y `brightness(1)` no tocan nada, así que
       arriba del todo el vídeo se ve limpio a través de la barra. */
    -webkit-backdrop-filter:
        blur(calc(24px * var(--cabecera-solidez)))
        saturate(calc(100% + 80% * var(--cabecera-solidez)))
        brightness(calc(1 - 0.55 * var(--cabecera-solidez)));
    backdrop-filter:
        blur(calc(24px * var(--cabecera-solidez)))
        saturate(calc(100% + 80% * var(--cabecera-solidez)))
        brightness(calc(1 - 0.55 * var(--cabecera-solidez)));

    box-shadow: 0 6px 22px rgba(2, 8, 28, calc(0.1 * var(--cabecera-solidez)));
}

/* El velo interior y el desvanecido de debajo aparecen con ella, no antes. */
body.con-cabecera-sobre-video .site-header::before,
body.con-cabecera-sobre-video .site-header::after {
    opacity: var(--cabecera-solidez);
    transition: none;
}

/* El hero de vídeo no lleva el margen que aparta al de la portada: aquí la
   cabecera va encima del vídeo, no a continuación. */
body.con-cabecera-sobre-video main > .hero-video:first-child {
    margin-top: 0;
}

/* ══ El remate que se escribe y se borra ═══════════════════════════
 *
 * **Va en línea, dentro del titular**, a pedido de Maude: «la movilidad
 * global.» tiene que leerse seguido, y «sin fronteras.» igual. Nada de darle
 * línea propia.
 *
 * Eso deja un problema que hay que resolver aparte. Medido sobre la cabecera
 * servida: «global.» ocupa 3,37 em y «sin fronteras.» 6,6 em, casi el doble.
 * Al escribirse, esa diferencia cambia el reparto de palabras por línea y el
 * titular pasa de 116 px a 173 px a 1400 de ancho -y de 126 a 190 a 1700-, así
 * que el párrafo y el botón dan un salto en cada vuelta. Eso es CLS, y aquí no
 * ocurre una vez al cargar: ocurre cada pocos segundos.
 *
 * El alto lo reserva `titular-alterno.js`, midiendo los dos remates de verdad.
 * No se puede fijar aquí: la tipografía es fluida y el número de líneas cambia
 * con el ancho -tres a 1400, dos a 1180, cuatro en el móvil-, así que
 * cualquier valor escrito a mano acertaría en un ancho y fallaría en el resto.
 */

/* El cursor. Va en el `span` para que herede el degradado del remate, y como
   borde y no como carácter: un `|` escrito ocuparía sitio y movería la línea
   al aparecer y desaparecer. */
.hero-video .hero-video-copy h1 span[data-alterna]::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 0.82em;
    margin-left: 0.06em;
    vertical-align: -0.06em;
    background: #19e0c2;
    animation: hero-cursor 1.05s steps(1) infinite;
}

@keyframes hero-cursor {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

/* Sin movimiento, sin cursor: un cursor que parpadea al lado de un texto que
   ya no se escribe no significa nada, y sigue siendo movimiento. */
@media (prefers-reduced-motion: reduce) {
    .hero-video .hero-video-copy h1 span[data-alterna]::after {
        display: none;
    }
}

/* ══ Acciones de la cabecera ═══════════════════════════════════════ */

.hero-video .hero-video-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 22px;
    margin-top: 30px;
}

/*
 * Los iconos, sobre el vídeo.
 *
 * Fondo propio y no el vídeo a pelo: el material cambia de fotograma y un
 * icono blanco sobre un plano claro desaparece. El círculo garantiza el
 * contraste sin depender de lo que pase por detrás.
 *
 * Y **sin `backdrop-filter`**: con transparencia el color que se pinta no es
 * el declarado -lo pone en parte lo que hay debajo-, así que sobre un vídeo
 * que cambia el contraste dejaría de estar garantizado. Aquí el fondo es
 * opaco y medible.
 */
.hero-video .social-links-hero {
    gap: 10px;
    margin: 0;
}

.hero-video .social-links-hero a,
.hero-video .social-links-hero .sin-direccion {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(10, 18, 48, 0.55);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(10, 18, 48, 0.28);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.hero-video .social-links-hero a:hover,
.hero-video .social-links-hero a:focus-visible {
    border-color: #19e0c2;
    background: rgba(10, 18, 48, 0.78);
    transform: translateY(-2px);
}

/* Las que no tienen dirección sólo se ven fuera de producción, apagadas: es
   un recordatorio de que falta el dato, no un botón. */
.hero-video .social-links-hero .sin-direccion {
    opacity: .45;
}

@media (max-width: 720px) {
    .hero-video .hero-video-acciones {
        gap: 14px 16px;
        margin-top: 24px;
    }
}

/* ══ El botón de cristal ═══════════════════════════════════════════
 *
 * ## La opacidad está calculada, no elegida
 *
 * Con transparencia el color que se pinta no es el declarado: más de la mitad
 * lo pone lo que hay detrás, y detrás hay un vídeo que cambia de fotograma.
 * Ya pasó en la cabecera del sitio, que declaraba un navy y pintaba un gris
 * `#404655`. Aquí no se puede medir sobre una captura porque no hay un fondo:
 * hay muchos.
 *
 * Así que se acota el peor caso —un fotograma blanco detrás— componiendo el
 * Azul Profundo sobre blanco y midiendo el contraste del texto:
 *
 *     alfa 0,50 -> 3,51:1   no pasa
 *     alfa 0,55 -> 4,11:1   no pasa
 *     alfa 0,58 -> 4,55:1   justo
 *     alfa 0,62 -> 5,21:1   el que se usa, con margen
 *
 * Por debajo de 0,58 el botón queda más bonito y el texto deja de leerse en
 * cuanto el vídeo aclara. No es negociable: es el único botón de la portada.
 *
 * ## Y funciona sin `backdrop-filter`
 *
 * El desenfoque es el adorno, no el fondo. Donde no esté soportado —o donde el
 * navegador lo desactive por batería— queda el color sólido, que es el que
 * garantiza el contraste. El botón nunca depende del efecto.
 */
.hero-video .btn-cristal {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 999px;
    background: rgba(10, 18, 48, 0.62);
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(10, 18, 48, 0.32);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    transition: background .22s ease, border-color .22s ease,
                box-shadow .22s ease, transform .22s ease;
}

/* El filo del degradado de marca, encima del borde y sólo al pasar.
   Va en un pseudoelemento porque un borde no admite degradado sin recortar el
   fondo, y recortarlo aquí dejaría el botón transparente. */
.hero-video .btn-cristal::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(90deg, #19e0c2, #00b4ff, #2962ff);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}

.hero-video .btn-cristal:hover,
.hero-video .btn-cristal:focus-visible {
    /* Se oscurece al pasar, no se aclara: aclarar sobre un vídeo que puede
       estar claro es justo cuando el texto se pierde. */
    background: rgba(10, 18, 48, 0.80);
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(10, 18, 48, 0.42);
    transform: translateY(-2px);
}

.hero-video .btn-cristal:hover::before,
.hero-video .btn-cristal:focus-visible::before {
    opacity: 1;
}

/* La flecha acompaña al cursor. Es el único movimiento del botón que dice
   algo: hacia dónde lleva. */
.hero-video .btn-cristal i {
    transition: transform .22s ease;
}

.hero-video .btn-cristal:hover i,
.hero-video .btn-cristal:focus-visible i {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .hero-video .btn-cristal,
    .hero-video .btn-cristal i,
    .hero-video .social-links-hero a {
        transition: none;
    }

    .hero-video .btn-cristal:hover,
    .hero-video .btn-cristal:focus-visible,
    .hero-video .social-links-hero a:hover {
        /* El cambio de color se queda: dice que el elemento responde. Lo que
           se va es el desplazamiento, que es lo que marea. */
        transform: none;
    }
}

/* ══ Que quepa en dos líneas ═══════════════════════════════════════
 *
 * Pedido de Maude: el titular tiene que quedar en dos líneas con los dos
 * remates. Con el tamaño anterior no cabía, y no es opinión -está medido
 * sobre la cabecera servida-:
 *
 *     ancho    columna    «la movilidad sin fronteras.»
 *     1920     600 px     786 px      faltaban 186
 *     1400     613 px     719 px      faltaban 106
 *     1180     607 px     606 px      cabía justo
 *      900     456 px     558 px      faltaban 102
 *
 * Así que había que ceder en algo: o la tipografía baja, o la columna crece.
 * Se hacen las dos a medias, que es lo que menos se nota. El titular pasa de
 * un tope de 62 px a 54 y la columna de 700 a 860, y con eso entra en dos
 * líneas desde 900 hasta 1920.
 *
 * Va sólo en el hero de vídeo. El clásico -que usan el bloque de cierre y las
 * páginas interiores- no alterna remate y no tiene este problema.
 */
/*
 * La columna de texto, al 56 % de la ventana.
 *
 * Estuvo al 64 %, elegido mirando una pantalla grande —donde 860 px es el tope
 * y el texto ocupa el 45 % de la ventana—. Pero por debajo de 1.344 px ese tope
 * no llega a aplicarse nunca, así que el 64 % se cumplía literal: **medido, el
 * bloque ocupaba el 64 % de la pantalla igual a 820 que a 1.280**. De ahí que en
 * un portátil o una tableta se viera apretado y en el escritorio no; no es que
 * el texto creciera, es que la ventana encogía y él no.
 *
 * Al 56 % el tope de 860 px entra a los 1.536 px y hasta ahí la proporción es la
 * misma en toda la banda. Un valor por tramo habría dejado un escalón visible al
 * cruzar el corte: 56 % a 1.180 y 64 % a 1.181.
 *
 * Y mejora el contraste sobre el vídeo: el velo está dimensionado para un texto
 * que llega al 61 % del ancho, así que uno que llega al 56 % cae entero sobre la
 * parte más cubierta.
 */
@media (min-width: 721px) {
    .hero-video .hero-video-copy {
        width: min(860px, 56vw);
        max-width: 54rem;
    }
}

.hero-video .hero-video-copy h1 {
    max-width: none;
    font-size: clamp(40px, 3.5vw, 54px);

    /*
     * El alto acompaña al texto, con transición.
     *
     * Reservar el alto del remate más largo quitaba el salto, pero dejaba un
     * hueco a la vista justo cuando el remate está borrado: el titular ocupaba
     * dos líneas y sólo tenía una escrita, así que se abría un agujero entre
     * el titular y su párrafo. Maude lo marcó ahí.
     *
     * Igualar el número de líneas tampoco sirve en todos los casos: en el
     * móvil «without borders.» mide el doble que «globally.» y pide una línea
     * más, y no hay tamaño de letra que arregle una diferencia de 2 a 1 -se
     * probaron 30, 34, 40 y 44 px y ninguno los iguala en los dos idiomas-.
     *
     * Así que el alto sigue al contenido y el cambio se anima. Lo que se
     * evitaba con la reserva era el tirón, no el movimiento: con 320 ms el
     * párrafo acompaña en vez de saltar, y no queda hueco en ningún momento.
     * El alto exacto lo pone `titular-alterno.js`, que es quien sabe cuánto
     * mide el texto de cada momento.
     */
    transition: height .32s cubic-bezier(.4, 0, .2, 1);
}

/*
 * En pantallas medianas, el titular baja con la columna.
 *
 * Estrechar la columna sin bajar la letra parte el titular en más líneas, y
 * bajar la letra sin estrechar la columna deja el mismo bloque con el texto más
 * pequeño dentro. Van juntos: lo que mantiene el titular en dos líneas es la
 * proporción entre el ancho de la columna y el cuerpo de la letra.
 *
 * Lo que pesaba era el **suelo** de 40 px: por debajo de 1.143 px el `clamp` ya
 * no calculaba nada, servía siempre 40. Va después de la regla base y no antes,
 * porque con la misma especificidad gana la última: puesta antes no se aplicaba
 * y el titular seguía en 40 px. Medido, no supuesto.
 *
 * Con suelo por abajo además del techo: sin el `min-width` la regla alcanzaba
 * también al móvil, donde `styles.css` pide `clamp(40px, 12vw, 56px)` y esta
 * la habría pisado —de 47 px a 30 px en una pantalla de 390—. El móvil tiene su
 * propio tramo y no entra aquí.
 */
@media (min-width: 721px) and (max-width: 1180px) {
    .hero-video .hero-video-copy h1 {
        font-size: clamp(30px, 3.3vw, 44px);
    }
}

/* Sin movimiento no hay transición ni alto impuesto: el remate no cambia, así
   que el titular mide lo que mide y no hay nada que animar. */
@media (prefers-reduced-motion: reduce) {
    .hero-video .hero-video-copy h1 {
        transition: none;
        height: auto !important;
    }
}

/*
 * El velo crece con el texto.
 *
 * Estaba dimensionado para la columna de 700: a 1400 el texto llegaba al 50 %
 * del ancho y el velo valía 0,44 ahí. Con la columna en 860 llega al 61 %,
 * donde el velo valía 0,30, así que el final de las líneas largas quedaba
 * sobre vídeo casi desnudo y el contraste pasaba a depender del fotograma.
 *
 * Las paradas se corren para que en el 62 % siga habiendo 0,46, que es lo que
 * había donde acababa el texto antes. El extremo derecho no se toca: es donde
 * se ve el planeta y taparlo era justo lo que Maude no quería.
 */
/*
 * El velo de escritorio se queda **como estaba**, a pedido de Maude: lo del
 * degradado nuevo era sólo para el móvil.
 *
 * Lo hubo un rato y se quitó. Se había corrido para acompañar a la columna,
 * que pasó de 700 a 860 para que el titular entre en dos líneas, y con eso el
 * final de las líneas largas cae donde el velo vale 0,31 en vez de 0,44. El
 * contraste medido sobre el vídeo servido sigue por encima del mínimo, así que
 * no hay motivo para tocarlo. Anotado por si el vídeo se cambia por otro más
 * claro: entonces sí habría que volver a medirlo.
 */