/* La portada cabe en una pantalla.
 *
 * El hero traía `min-height: 100vh`, pero la cabecera (93 px en escritorio,
 * 104 en móvil) y el pie (26 px) son HERMANOS suyos dentro de .wp-site-blocks,
 * no hijos. Así que la página medía siempre 100vh + cabecera + pie: quedaba una
 * franja de scroll de ~129 px que no enseñaba nada, solo el borde inferior de
 * la foto cortado y una línea de pie. Parecía que la página estaba truncada.
 *
 * Se resuelve haciendo columna flexible el contenedor y dejando que el hero
 * ocupe lo que sobre, en vez de fijarle 100vh a mano. Sin números mágicos, así
 * que vale para cualquier alto de cabecera y cualquier pantalla.
 *
 * Borrar este fichero y su <link> en index.html devuelve la página a como
 * estaba.
 */

.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* svh = alto visible real en móvil, sin contar la barra del navegador que
     * aparece y desaparece al hacer scroll. */
    min-height: 100svh;
}

.wp-site-blocks > .wp-block-kubio-section {
    flex: 1 1 auto;
    /* `!important` porque Kubio pone el min-height con una clase generada por
     * elemento (style-local-NN), imposible de superar por especificidad. */
    min-height: 0 !important;
}


/* --- La foto del hero, en condiciones ---------------------------------- */
/*
 * Se servía un JPG de 1264x848 estirado a 1440 px o más: se veía blando, y en
 * pantalla retina el doble de mal.
 *
 * La foto se amplió en local con Real-ESRGAN (mejorar-foto), x4 y luego a
 * 2528x1696; PSNR 29,7 frente al original, dentro del rango sano. El JPG de
 * 1920x1281 que quedaba en WordPress NO servía: es otra toma, más blanda.
 *
 * Mismo selector que la regla original de Kubio (#kubio + una clase) para
 * ganarle por orden de cascada sin recurrir a !important. Un navegador que no
 * entienda image-set() descarta esta declaración entera y se queda con la
 * original en línea, que sigue siendo válida: degrada solo.
 */
#kubio .style-Uyl6DKvUlR-outer {
    background-image: image-set(
        url("/img/hero-2528.avif") type("image/avif") 2x,
        url("/img/hero-1264.avif") type("image/avif") 1x,
        url("/img/hero-2528.webp") type("image/webp") 2x,
        url("/img/hero-1264.webp") type("image/webp") 1x
    );
}


/* --- El hero en móvil: el texto sobre la foto, como en escritorio -------- */
/*
 * En escritorio la foto llena el hero y el nombre va superpuesto abajo a la
 * izquierda. En móvil salía completamente distinto: el texto arriba sobre un
 * fondo negro, la foto debajo con franjas negras y un hueco vacío al final.
 *
 * Son dos causas sumadas:
 *
 *  1. `background-size: contain` — la foto es apaisada (1264x848) y el hueco en
 *     móvil es muy vertical, así que al «contenerla» quedaba una tira de foto
 *     en medio y negro por arriba y por abajo.
 *
 *  2. Entre la cabecera y el texto hay una fila de 470 px que en escritorio
 *     empuja el texto hasta abajo, y que Kubio **oculta en móvil**
 *     (`kubio-hide-on-mobile`). Sin ella el texto se va arriba del todo.
 *
 * Se corrige recortando la foto en vez de contenerla, anclándola donde está la
 * cara, y bajando el texto al final de la sección. El degradado asegura que el
 * texto blanco se lea sobre la parte clara de la foto — en escritorio no hace
 * falta porque ahí cae sobre el pasillo oscuro.
 */
@media (max-width: 767px) {
    #kubio .style-Uyl6DKvUlR-outer {
        /* LA CAUSA de la cara gigantesca en móvil.
         *
         * Kubio declara `background-attachment: fixed`. Con `fixed`, el fondo
         * se dimensiona y se posiciona contra el VIEWPORT, no contra el
         * elemento. En móvil el viewport es 390x844 —vertical— y la foto es
         * apaisada (1264x848), así que `cover` la escalaba a 1258x844 para
         * cubrir 844 px de alto... y de eso solo se veía la ventana de 390x348
         * del hero. Resultado: un primer plano de la cara a 2,4 veces el tamaño
         * que le toca, con la cabeza cortada.
         *
         * Contra el elemento (`scroll`) la misma foto sale a 519x348 y se ve la
         * composición entera: el pasillo a la izquierda y la persona a la
         * derecha, que es lo que hay que ver.
         *
         * Además `fixed` está roto en Safari de iOS desde siempre: el fondo se
         * congela o parpadea al hacer scroll. No se pierde nada quitándolo. */
        background-attachment: scroll !important;
        background-size: cover;
        /* Recalculada tras quitar `fixed`: con la foto a 519x348 en una
         * ventana de 390, solo sobran 129 px de ancho y nada de alto. El 62 %
         * deja la persona a la derecha y el pasillo a la izquierda, que es
         * donde cae el nombre. */
        background-position: 62% center;
        /* La sección es `flex-direction: row` con `align-items: flex-start`, y
         * por eso su hijo se quedaba midiendo solo lo que su contenido (214 px
         * de 714) y no había contra qué alinear nada. Con `stretch` ocupa toda
         * la altura y el `flex-end` de abajo ya surte efecto.
         *
         * No hace falta `min-height`: la sección ya se estira sola por la regla
         * de arriba (`.wp-site-blocks > .wp-block-kubio-section { flex: 1 }`).
         *
         * `!important` porque Kubio declara `align-items` para este mismo
         * elemento con una clase generada (`style-local-NN-outer`) y la escribe
         * en un <style> del <head> que va DESPUÉS de este <link>: misma
         * especificidad, así que gana por orden. */
        align-items: stretch !important;
    }

    /* El bloque de nombre, anclado al fondo de la sección.
     *
     * Kubio reparte la alineación vertical entre cuatro contenedores anidados
     * (section__inner, row, row__inner, column__align), cada uno con su clase
     * generada. Ir cambiando `justify-content` y `align-items` por esa cadena
     * es frágil y no funcionó: la fila lleva `flex: 0 1 100%`, así que siempre
     * ocupa el alto entero y nunca le sobra espacio contra el que alinear.
     *
     * Anclarlo con posición absoluta es directo y no depende de esa cadena.
     * Solo en móvil: en escritorio el texto ya cae donde debe. */
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row {
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

    /* ...y los espaciadores de dentro, a cero.
     *
     * `bottom: 0` no bastaba: la fila mide desde el borde inferior del
     * `__inner`, y DENTRO de ella Kubio deja 100 px de espaciadores por debajo
     * del nombre (`#spacer-1` y `#spacer-2`, 50 px cada uno). Sumados a los
     * 30 px de padding inferior de la sección, el nombre acababa 166 px por
     * encima del suelo de la foto: en mitad del hero, no al pie como en
     * escritorio.
     *
     * Las medidas del bloque de escritorio (`min-width: 768px`) no llegan aquí
     * porque están dentro de su propia consulta. */
    #kubio .style-Uyl6DKvUlR-outer #spacer,
    #kubio .style-Uyl6DKvUlR-outer #spacer-1,
    #kubio .style-Uyl6DKvUlR-outer #spacer-2,
    #kubio .style-Uyl6DKvUlR-outer #spacer-3 {
        height: 0 !important;
    }
    #kubio .style-Uyl6DKvUlR-outer {
        padding-bottom: 0 !important;
    }
    /* El aire bajo el nombre lo pone la propia fila, que es lo que se ve. */
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row .wp-block-kubio-column__inner {
        padding-bottom: 22px !important;
    }

    /* Alineado a la izquierda, como en escritorio.
     *
     * Kubio centra el bloque en móvil, así que el nombre salía centrado
     * mientras que en pantalla grande va pegado a la izquierda. Son la misma
     * página y debe leerse igual. */
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row,
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row * {
        text-align: left !important;
    }
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row .wp-block-kubio-column__inner {
        padding-left: 16px !important;
        padding-right: 8px !important;
    }

    /* El cuerpo del 2º y 3er renglón, atado al ancho de la pantalla.
     *
     * Con 15px fijos el titular español —«Administrador de sistemas Linux |
     * Ciberseguridad», 48 caracteres— se parte en dos líneas por debajo de
     * 390 px. Y eso rompe el hero: el bloque está anclado al fondo con posición
     * absoluta, así que al crecer una línea empuja el nombre hacia arriba.
     *
     * `clamp` lo resuelve sin recortar el cargo, que es el nombre real del
     * puesto y no debería abreviarse para que quepa. Medido: 13,86 px en una
     * pantalla de 360 y 15 px de 390 en adelante, que es donde ya cabía.
     *
     * El inglés (42 caracteres) cabía en las dos y se queda como estaba: de
     * 381 px en adelante siguen siendo los mismos 15 px de siempre. */
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row .wp-block-kubio-text__text {
        font-size: 15px !important;
    }

    /* Sombra bajo el texto para que se lea sobre la camisa blanca. */
    #kubio .style-Uyl6DKvUlR-outer::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 46%;
        background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
        pointer-events: none;
        z-index: 1;
    }
    #kubio .style-Uyl6DKvUlR-inner { position: relative; z-index: 2; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Bloque de presentación bajo el hero
 *
 * Lo inserta `mejorar-portada.py`. La portada era solo el hero y el pie: quien
 * entraba no se llevaba más que un nombre y una foto. Aquí va lo justo para
 * decidir en diez segundos si te interesa; el detalle está en /resume/.
 *
 * Los colores son los mismos que usa resume.css, para que las dos páginas
 * hablen el mismo idioma visual.
 * ───────────────────────────────────────────────────────────────────────── */

.pf-seccion {
    background: #12151a;
    /* 4.5rem arriba y abajo eran 144 px que salían directamente del alto de la
     * foto. Con 2.75rem el bloque sigue respirando y el hero gana 56 px.
     *
     * El presupuesto vertical de esta página está **exactamente lleno**: a
     * 1440x900 la suma de cabecera + hero + bloque + pie daba 900 clavados, y a
     * 1920x1080 se pasaba por 1 px. Sin holgura, cualquier palabra que se añada
     * al texto saca barra de scroll. Estos 8 px son el margen. */
    padding: 2.75rem 0;
}

/* El bloque tiene que alinearse con el texto del hero, y el hero usa la rejilla
 * de Kubio (Bootstrap): 1232 / 960 / 720 px centrados según el ancho de ventana.
 * Medido en el navegador a 1920, 1440, 1200, 1024, 768 y 390 px; se replica aquí
 * en lugar de fijar un ancho a ojo, que es lo que dejaba el bloque descolgado
 * casi 300 px a la derecha del nombre. */
.pf-intro {
    width: 100%;
    /* Sin `border-box` el padding se suma al 100%: en una ventana de 390 px el
     * bloque medía 430 y sacaba barra horizontal a toda la portada. */
    box-sizing: border-box;
    margin: 0 auto;
    /* 16 px es el padding lateral que usa el hero en móvil (medido: x=16). */
    padding: 0 16px;
    color: #d9dee5;
}

@media (min-width: 768px) {
    .pf-intro { max-width: 720px; padding: 0; }
}

@media (min-width: 992px) {
    .pf-intro { max-width: 960px; }
}

@media (min-width: 1200px) {
    .pf-intro { max-width: 1232px; }
}

.pf-intro__texto p {
    margin: 0 0 1rem;
    /* 68ch es donde se lee cómodo: a ancho completo el ojo pierde el renglón
     * al volver. Mismo criterio que en el CV. */
    max-width: 68ch;
    font-size: 1.0625rem;
    line-height: 1.7;
}

.pf-intro__texto p:last-child {
    color: #98a2b0;
}

.pf-intro__enlaces {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.6rem;
}

.pf-enlace {
    display: inline-block;
    padding: .85rem 1.6rem;
    border-radius: 3px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease;
}

.pf-enlace--principal {
    background: #2f7fd4;
    color: #fff !important;
}

.pf-enlace--principal:hover,
.pf-enlace--principal:focus {
    background: #245f9f;
}

.pf-enlace--suave {
    border: 1px solid #2b3340;
    color: #98a2b0 !important;
}

.pf-enlace--suave:hover,
.pf-enlace--suave:focus {
    border-color: #2f7fd4;
    color: #d9dee5 !important;
}

@media (max-width: 640px) {
    .pf-seccion {
        padding: 3rem 0;
    }

    .pf-intro__enlaces {
        gap: .75rem;
    }

    /* Los tres botones iban apilados a ancho completo: 162 px de los 844 que
     * tiene un móvil, casi todo lo que necesita la foto para seguir siendo una
     * foto. En fila ocupan 47. Caben porque las etiquetas son cortas
     * («Experience», «Resume», «Get in touch») y el padding baja a 1rem. */
    .pf-enlace {
        padding: .7rem 1rem;
        font-size: .9375rem;
    }
}

/* --- El hero, desde que hay un bloque debajo --------------------------- */
/*
 * La regla de arriba —`.wp-site-blocks > .wp-block-kubio-section { flex: 1 1
 * auto; min-height: 0 !important }`— se escribió cuando la portada era **solo
 * el hero y el pie**: entonces «que el hero ocupe lo que sobre» era exactamente
 * una pantalla, sin números mágicos.
 *
 * Al añadir el bloque de presentación eso dejó de ser cierto. `.pf-seccion` es
 * también un `.wp-block-kubio-section` hermano, así que recibía el mismo
 * `flex: 1` y las dos se repartían el alto. Con `min-height: 0` anulando
 * cualquier suelo, el hero se quedaba en nada:
 *
 *     ventana 390x844  ->  hero de 102 px de alto
 *     ventana 390x700  ->  hero de  30 px de alto
 *
 * Y como su texto va anclado al fondo con posición absoluta (más arriba en este
 * mismo fichero), salía despedido fuera de la pantalla: medido, el nombre
 * quedaba en `y = -51` y el titular se superponía a la cabecera.
 *
 * En escritorio no se veía porque ahí sobraba alto de sobra.
 */

/* El bloque de presentación ocupa lo que pide su contenido y no compite. */
.wp-site-blocks > .pf-seccion {
    flex: 0 0 auto;
}

/* Y el hero vuelve a ocupar «lo que sobre» —que es lo que hacía el `flex: 1`
 * original— pero ahora con un suelo.
 *
 * El objetivo es que la portada entera quepa sin scroll. Con el bloque de
 * presentación ya no vale fijarle una pantalla al hero: sumaba más que el
 * viewport y siempre quedaba scroll. Medido antes de este cambio:
 *
 *     1440x900   doc 1388  ->  488 px de scroll
 *     1366x768   doc 1388  ->  620 px de scroll
 *      390x844   doc 1410  ->  566 px de scroll
 *
 * Con `flex: 1 1 auto` (regla general de arriba) el hero se estira hasta llenar
 * el hueco que dejan cabecera, bloque y pie, y no más. El `min-height` es el
 * suelo: por debajo de 340 px la foto deja de ser una foto y pasa a ser una
 * franja, y entonces es preferible que haya scroll.
 *
 * Ventaja sobre el `calc(100svh - 93px)` anterior: **ya no hay que descontar la
 * cabecera a mano**, así que un cambio en su altura no obliga a tocar nada. */
.wp-site-blocks > .style-Uyl6DKvUlR-outer {
    min-height: 340px !important;
}

/* --- Que la portada entera quepa sin scroll ---------------------------- */
/*
 * El hero tiene `flex: 1 1 auto`, así que se estira hasta llenar lo que dejan
 * cabecera, bloque y pie. Pero **no puede encoger por debajo de su contenido**,
 * y su contenido en escritorio era casi todo aire de Kubio. Medido a 1440x900:
 *
 *     padding de la sección   95 + 90 = 185 px
 *     #spacer-3                       350 px
 *     #spacer                          70 px
 *     texto real (nombre + 2 líneas)  ~206 px
 *                                     ------
 *                                      911 px  <- suelo natural del hero
 *
 * Con 93 de cabecera, 300 de bloque y 26 de pie, eso son 1.330 px de página:
 * 430 de scroll en una pantalla de 900 y 562 en un portátil de 768.
 *
 * Aquí se recorta ese aire. No se le fija una altura al hero: se le baja el
 * suelo, y `flex: 1` hace el resto —en una pantalla grande sigue estirándose y
 * llenando—. Así la misma regla vale para 1080, 900 y 768 sin números por
 * pantalla.
 *
 * Solo de 768 px de ancho en adelante: en móvil `#spacer-3` ya está oculto por
 * Kubio y el hero se comporta bien.
 */
@media (min-width: 768px) {
    #kubio .style-Uyl6DKvUlR-outer {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* 350 px de espaciador vacío empujando el nombre hacia abajo. Con 60 el
     * texto sigue cayendo en el tercio inferior, que es donde debe estar. */
    #kubio .style-Uyl6DKvUlR-outer #spacer-3 {
        height: 60px !important;
    }

    #kubio .style-Uyl6DKvUlR-outer #spacer {
        height: 30px !important;
    }
}

/* Pantallas bajas: el portátil de 1366x768 y los móviles.
 *
 * Aquí el problema es el ALTO, no el ancho, así que la consulta pregunta por lo
 * que de verdad falla. Con las medidas de arriba faltaban 127 px en un portátil
 * de 768 y 36 px en un móvil de 844.
 */
@media (min-width: 768px) and (max-height: 820px) {
    #kubio .style-Uyl6DKvUlR-outer {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    #kubio .style-Uyl6DKvUlR-outer #spacer-3 { height: 20px !important; }
    #kubio .style-Uyl6DKvUlR-outer #spacer   { height: 10px !important; }
    #kubio .style-Uyl6DKvUlR-outer #spacer-1,
    #kubio .style-Uyl6DKvUlR-outer #spacer-2 { height: 36px !important; }
}

/* En móvil lo que sobra no está en el hero —ya está en su suelo de 340— sino en
 * el bloque de presentación: 410 px para dos párrafos y tres botones. */
@media (max-width: 767px) {
    .pf-seccion { padding: 1.5rem 0; }
    .pf-intro__texto p { margin-bottom: .7rem; }
    .pf-intro__enlaces { margin-top: 1rem; }

    /* El suelo del hero, 50 px más bajo que el general.
     *
     * Con los botones a 48 px de alto y repartidos en dos filas, la portada
     * pasaba de 844 a 903 px en un móvil de 390: volvía a hacer falta scroll.
     * Los 59 px se recuperan de la foto y no del texto —bajarlo a 16 px habría
     * dado lo mismo—, porque a 390 px de ancho la foto ya ocupaba el 40 % de la
     * pantalla y el texto es lo que se ha venido a leer.
     *
     * En pantallas más altas no se pierde nada: el hero es `flex: 1 1 auto` y
     * vuelve a crecer solo hasta llenar el hueco. Medido: 398 px en un 430x932.
     */
    .wp-site-blocks > .style-Uyl6DKvUlR-outer {
        min-height: 290px !important;
    }
}

/* La foto, ahora que el hero es más bajo.
 *
 * Kubio la declara con `background-size: contain`. Con un hero de 911 px eso
 * llenaba casi todo el ancho; al bajarlo a 481 la foto se encogió con él y
 * quedó un rectángulo centrado con dos bandas negras a los lados.
 *
 * `cover` la recorta en vez de encogerla, que es lo que ya se hacía en móvil por
 * la misma razón. El recorte se ancla arriba —18 %— porque la cara está en la
 * mitad superior: centrado se le comía la frente.
 */
/* En escritorio NO se recorta: la foto se difumina.
 *
 * `cover` en un hueco de 1440x480 —proporción 3:1— sobre una foto de 1264x848
 * —proporción 1,49:1— la amplía 1,14 veces y **tira el 50 % del alto**. El
 * resultado era un primer plano de media cara, con el pelo cortado por arriba y
 * sin hombros, y el pasillo de racks reducido a una franja.
 *
 * Descartado antes de llegar aquí, todo medido y mirado:
 *
 *   - **Hero más alto (620 px)**: sigue recortando la cabeza y además echa los
 *     botones fuera de la pantalla.
 *   - **`contain`**: a 1440 de ancho la foto entera cabe en 715 px y deja 725 px
 *     de banda vacía al lado.
 *   - **Foto a la derecha + degradado oscuro por encima**: o queda una costura
 *     vertical donde empieza la foto, o para taparla hay que oscurecer tanto que
 *     se come el pasillo.
 *
 * Lo que sí funciona: la foto a su tamaño natural, anclada a la derecha, y el
 * borde izquierdo **difuminado con una máscara**. Lo que se desvanece es la
 * propia imagen, no algo puesto delante, así que no hay costura posible. Se ve
 * la composición entera —pasillo y persona, sin recortes— y el nombre cae sobre
 * la zona oscura, que es donde mejor se lee.
 *
 * **La máscara va sobre un `::before` con `aspect-ratio`, no sobre la sección.**
 * Es la parte que costó: en porcentajes de la sección, los cortes solo valen
 * para un ancho. El borde izquierdo de la foto está en el 50 % a 1440 px y en
 * el 4,5 % a 768, así que una máscara fija o dejaba costura en pantalla ancha o
 * borraba el pasillo entero en tablet (probado, se veía la persona flotando en
 * negro). Con `aspect-ratio: 1264/848` el pseudo-elemento mide **exactamente lo
 * que la foto**, y entonces los porcentajes son de la foto y valen para todos
 * los anchos.
 *
 * `max-height: 64vw` es la otra mitad: sin él, en ventanas altas el hero crece
 * hasta que la foto es más ancha que la pantalla y vuelve a recortarse por la
 * izquierda. 64vw la mantiene siempre dentro (1/1,491 = 0,67).
 */
@media (min-width: 768px) {
    #kubio .style-Uyl6DKvUlR-outer {
        background-image: none !important;
        background-color: #0a0c11 !important;
        max-height: 64vw !important;
    }

    #kubio .style-Uyl6DKvUlR-outer::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: auto;
        /* De aquí sale el ancho: el mismo que tendría la foto a esta altura.
         *
         * Y de aquí salía un fallo: **el ancho de la foto depende de su alto**,
         * así que en una ventana ancha y baja el hero se encoge, la foto se
         * estrecha con él y acaba arrinconada arriba a la derecha. Medido:
         *
         *     2560x1440  hero 953 px  ->  foto 56 % del ancho
         *     1920x1080  hero 597 px  ->  foto 46 %
         *     1920x900   hero 419 px  ->  foto 33 %   <- arrinconada
         *     1366x768   hero 300 px  ->  foto 33 %   <- arrinconada
         *
         * `min-width` le pone un suelo: por debajo de ese ancho la caja deja de
         * seguir la proporción y, como el fondo va con `cover`, la foto se
         * recorta un poco por arriba y por abajo en vez de encogerse. Recortar
         * mantiene el tamaño de la persona; encoger, no.
         *
         * **NO se le pone suelo de ancho.** Lo tuvo —`min-width: 58%`— para que
         * no se arrinconara en ventanas bajas, y fue un error: en cuanto la caja
         * es más ancha de lo que da la proporción, `cover` recorta por arriba y
         * por abajo. En una ventana de 1440x760 —un portátil normal, con la
         * barra del navegador— eso cortaba la cara **a la altura de la nariz**.
         *
         * La regla es: la caja sigue la proporción de la foto y punto. Así la
         * imagen se ve **entera en vertical** siempre, que es lo que importa.
         * Que en pantallas muy bajas salga estrecha es el precio, y es menos
         * malo que cortar una cara. */
        aspect-ratio: 1264 / 848;
        z-index: 0;
        background-image: image-set(
            url("/img/hero-2528.avif") type("image/avif") 2x,
            url("/img/hero-1264.avif") type("image/avif") 1x,
            url("/img/hero-2528.webp") type("image/webp") 2x,
            url("/img/hero-1264.webp") type("image/webp") 1x
        );
        background-size: cover;
        /* Sin recorte vertical, `center` no desplaza nada: la caja tiene la
         * proporción exacta de la foto y la imagen la llena justa. */
        background-position: center;
        background-repeat: no-repeat;
        -webkit-mask-image: linear-gradient(to right,
            transparent 0%, rgba(0, 0, 0, .55) 16%, #000 36%);
        mask-image: linear-gradient(to right,
            transparent 0%, rgba(0, 0, 0, .55) 16%, #000 36%);
        pointer-events: none;
    }
}

/* El mismo degradado en escritorio.
 *
 * Antes no hacía falta: con el hero de 911 px el nombre caía sobre el tramo
 * oscuro del pasillo. Al recortar la foto con `cover`, el texto quedó sobre la
 * parte iluminada y perdió contraste. Es el mismo problema que ya tenía el
 * móvil sobre la camisa blanca, y la misma solución.
 */
@media (min-width: 768px) {
    #kubio .style-Uyl6DKvUlR-outer::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 62%;
        background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0));
        pointer-events: none;
        z-index: 1;
    }
    #kubio .style-Uyl6DKvUlR-inner { position: relative; z-index: 2; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Los iconos de contacto de la cabecera, en su esquina
 *
 * En la portada salían en mitad de la pantalla de 768 px para arriba, y solo
 * en la portada. No es cosa del ancho: es que el HTML de esta página trae DOS
 * declaraciones para el mismo bloque —`text-align: left` en la regla base y
 * `text-align: right` dentro de `@media (max-width: 767px)`—, así que en móvil
 * quedaban a la derecha y en cuanto la ventana pasaba de 767 se iban a la
 * izquierda. Las otras páginas solo traen la de la derecha, y por eso allí
 * están bien.
 *
 * La caja que los contiene mide 360 px en la portada y 120 en las demás, de ahí
 * que «a la izquierda» se vea como «en el centro».
 *
 * El origen es que la portada y la plantilla vienen de dos exportaciones
 * distintas de Kubio. Se corrige aquí, en la hoja que solo carga la portada, en
 * vez de tocar el HTML generado: `mejorar-portada.py` parte de `index.base.html`
 * en cada pasada y una edición a mano del HTML se perdería.
 *
 * `!important` porque el <style> de Kubio va después de este <link> en el
 * <head>: a igualdad de especificidad, gana el último.
 * ───────────────────────────────────────────────────────────────────────── */
#kubio .style-NW-UBaFvP_o-outer {
    text-align: right !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Los botones, con la luz de la foto
 *
 * Eran un rectángulo azul plano que podía ser de cualquier sitio. La portada
 * tiene una identidad muy marcada —los pasillos de rack iluminados en azul— y
 * los botones no la recogían.
 *
 * Los colores están tomados de la propia fotografía, no elegidos a ojo: el azul
 * dominante de las tiras de luz de los racks es #2851a0 y los reflejos más
 * vivos llegan a #4a7fd8. De ahí salen el degradado, el borde y el halo.
 * ───────────────────────────────────────────────────────────────────────── */
.pf-enlace {
    display: inline-flex;
    /* Sin esto el `min-height` mide la caja de CONTENIDO, no la del borde: el
     * botón de /resume/ salía a 76 px en vez de 48 porque le sumaba los 25,6 px
     * de padding vertical. El sitio no trae un `border-box` general. */
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    /* 48 px es el mínimo que se puede tocar con el pulgar sin fallar. Antes
     * medían 39 px de alto. */
    min-height: 48px;
    padding: .8rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none !important;
    transition: background .18s ease, border-color .18s ease,
                box-shadow .18s ease, color .18s ease;
}

.pf-enlace--principal {
    background: linear-gradient(180deg, #3a86df, #2761b4);
    border: 1px solid #4a90e6;
    color: #fff !important;
    /* El halo es la misma luz que sale de los racks, muy rebajada. */
    box-shadow: 0 8px 20px -10px rgba(47, 127, 212, .8);
}

.pf-enlace--principal:hover,
.pf-enlace--principal:focus-visible {
    background: linear-gradient(180deg, #4a93ea, #2f6cc4);
    border-color: #7fb6ff;
    box-shadow: 0 10px 24px -8px rgba(74, 144, 230, .95);
}

.pf-enlace--suave {
    background: rgba(40, 81, 160, .12);
    border: 1px solid #2b3340;
    color: #98a2b0 !important;
}

.pf-enlace--suave:hover,
.pf-enlace--suave:focus-visible {
    background: rgba(47, 127, 212, .18);
    border-color: #3a86df;
    color: #e4e9ef !important;
}

.pf-enlace:focus-visible {
    outline: 2px solid #7fb6ff;
    outline-offset: 2px;
}

/* En móvil, a lo ancho: dos arriba y el de contacto debajo.
 *
 * Sueltos e «inline» se partían en dos filas desiguales, con el tercero
 * colgando. Repartidos así se tocan sin apuntar. */
@media (max-width: 767px) {
    .pf-intro__enlaces {
        gap: .75rem;
    }
    .pf-enlace {
        padding: .8rem .9rem;
    }
    .pf-enlace--principal {
        flex: 1 1 0;
        min-width: 0;
    }
    .pf-enlace--suave {
        flex: 1 1 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * El nombre, al pie de la foto en TODOS los anchos
 *
 * En móvil ya se hacía. De 768 px para arriba dependía del reparto de
 * espaciadores de Kubio, y ese reparto solo daba el resultado correcto en un
 * rango estrecho de alturas de ventana. Medido antes de esta regla, distancia
 * del nombre al suelo de la foto:
 *
 *     768x1024   338 px      1024x768    15 px
 *     820x1180   494 px      1366x768    15 px
 *     991x1200   514 px      1920x1080  225 px
 *
 * Es decir: estaba bien en un portátil de 768 px de alto —que es donde se
 * miró— y flotando en el tercio superior en todo lo demás. En tablet, además,
 * caía justo sobre las tiras de luz de los racks, que es el punto más claro de
 * la foto, y el degradado (anclado abajo) no le llegaba: se leía mal.
 *
 * Se ancla al suelo y se acabó la dependencia del alto de la ventana.
 *
 * `align-items: stretch` es imprescindible: al pasar las dos filas a
 * `position: absolute`, el `__inner` se queda sin contenido en flujo y colapsa
 * a 0 px de alto. Como es él quien sirve de referencia al `bottom: 0`, el
 * nombre se iba a y=-53, por encima del hero. Con `stretch` el `__inner` ocupa
 * toda la altura de la sección y el anclaje mide contra lo que se ve.
 * ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    #kubio .style-Uyl6DKvUlR-outer {
        align-items: stretch !important;
        padding-bottom: 0 !important;
    }
    #kubio .style-Uyl6DKvUlR-outer #spacer,
    #kubio .style-Uyl6DKvUlR-outer #spacer-1,
    #kubio .style-Uyl6DKvUlR-outer #spacer-2,
    #kubio .style-Uyl6DKvUlR-outer #spacer-3 {
        height: 0 !important;
    }
    #kubio .style-Uyl6DKvUlR-inner {
        position: relative;
        z-index: 2;
    }
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row {
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row .wp-block-kubio-column__inner {
        padding-bottom: 28px !important;
    }
}

/* El enlace a Inetum del tercer renglón del hero medía 211x20 px: el único
 * objetivo táctil que quedaba por debajo del mínimo. Se le da alto con padding
 * y se compensa con un margen negativo del mismo valor, así que la zona que
 * responde crece pero NADA se mueve de sitio — y el anclaje del nombre al pie
 * de la foto, que está medido al píxel, se queda como está. */
#kubio .style-Uyl6DKvUlR-inner .wp-block-kubio-row a[href*="inetum"] {
    display: inline-block;
    padding: 12px 0;
    margin: -12px 0;
}

/* ─────────────────────────────────────────────────────────────────────────
 * El hueco muerto del final en tablet
 *
 * Medido: 111 px sin usar al fondo de un 768x1024, 234 en un 820x1180 y 290 en
 * un iPad de 1024x1366. En móvil y en escritorio no pasa (0 px), y por eso no
 * se había visto.
 *
 * La causa es que ninguno de los dos bloques se queda lo que sobra: el hero
 * está topado por `max-height: 64vw` —para que la foto no se salga por la
 * izquierda— y el bloque de presentación es `flex: 0 0 auto`. Lo que queda
 * libre se va al fondo de la página, debajo del pie.
 *
 * Se lo queda el bloque de presentación, y su contenido se centra en él. El
 * resultado no es «texto estirado»: es el mismo texto con más aire alrededor,
 * que es lo que se ve en una pantalla alta.
 *
 * OJO: `flex: 1 1 auto` en este bloque fue justo lo que tiró el hero abajo en
 * su día —cuando la portada era solo hero y pie, la regla general le daba el
 * crecimiento al hero y al aparecer un hermano competían—. Ahora no puede
 * pasar: el hero tiene suelo (`min-height`) y techo (`max-height`), así que lo
 * que crece es solo el que tiene sitio.
 * ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    /* El hero crece PRIMERO —peso 100 contra 1— hasta chocar con su
     * `max-height`. Ahí flexbox lo congela y reparte lo que queda entre los
     * demás, que es exactamente lo que se quiere: la foto todo lo grande que
     * pueda sin salirse, y el sobrante para el texto.
     *
     * Con los dos a peso 1 se repartían el hueco a partes y el hero encogía de
     * 480 a 340 px en un 1440x900. Medido. */
    .wp-site-blocks > .style-Uyl6DKvUlR-outer {
        flex-grow: 100;
    }

    .wp-site-blocks > .pf-seccion {
        flex: 1 0 auto;
        /* `column` + `justify-content`, NO `align-items: center`: centrando por
         * el eje transversal el bloque deja de estirarse a lo ancho y pierde el
         * `margin: 0 auto` con el que se alinea a la rejilla de Kubio. Medido:
         * se quedaba en 643 px pegado a la izquierda en todos los anchos, en
         * vez de los 1232 px centrados que le tocan a 1440. */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Suelo del hero en escritorio.
 *
 * Al añadir la columna técnica, el bloque de texto pasó a medir más y el hero
 * —que reparte con él— bajó de 480 a 384 px en un 1440x900. Con la máscara, un
 * hero bajo significa además una foto estrecha (su ancho es el alto x 1,49), así
 * que se perdía presencia por partida doble.
 *
 * 420 px es el suelo, y solo a partir de 950 px de alto de ventana. Por debajo
 * no cabe: en un 1440x900 el hero a 420 más la columna técnica suman 932 px y
 * vuelve el scroll. Ahí la foto cede a 384. Es el precio de la columna, y se
 * paga en la foto y no en el contenido a propósito. */
@media (min-width: 992px) and (min-height: 950px) {
    .wp-site-blocks > .style-Uyl6DKvUlR-outer {
        min-height: 420px !important;
    }
}

/* Y en pantallas bajas, al revés: en un portátil de 768 px de alto el suelo
 * general de 340 px no deja sitio al texto. Ahí el hero cede.
 *
 * 260 y no 300 porque **el texto español es más largo que el inglés**: tres
 * líneas por párrafo contra dos, unos 58 px más de bloque. Con 300 la versión
 * española se iba a 778 px en una ventana de 768 y sacaba barra de scroll,
 * mientras que la inglesa entraba justa. Es el tipo de fallo que solo aparece
 * si se miran los DOS idiomas: `comprobar-portada.py` lo hace ahora.
 *
 * Bajar el suelo no encoge la foto: con `min-width: 46%` en el `::before`, lo
 * que hace es recortarla un poco más por arriba y por abajo. */
@media (min-width: 768px) and (max-height: 820px) {
    .wp-site-blocks > .style-Uyl6DKvUlR-outer {
        min-height: 260px !important;
    }
    /* En pantallas bajas hace falta más: a 1280x720 la versión española se
     * pasaba por 14 px (la inglesa entraba justa, por ser más corta). */
    .pf-seccion {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}


/* Pantallas muy estrechas (iPhone SE, Galaxy S de gama de entrada).
 *
 * Medido en el navegador a 360 px: el titular español ocupa **exactamente** los
 * 336 px disponibles a 15 px de cuerpo. Exactamente, no «casi»: basta el
 * redondeo a subpíxel para que se parta en dos líneas, y al partirse empuja el
 * nombre hacia arriba porque el bloque está anclado al fondo.
 *
 * 13,2 px deja el texto en 323 px y sobran 13. No se abrevia el cargo para que
 * quepa: «Administrador de sistemas Linux» es el nombre real del puesto.
 */
@media (max-width: 380px) {
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row .wp-block-kubio-text__text {
        font-size: 13.2px !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
 * MÓVIL: la portada se rehace (21-ago-2026)
 *
 * Lo anterior era una franja de foto de 290 px arriba y un bloque de texto
 * debajo, todo apretado para que cupiera en una pantalla sin scroll. Cabía,
 * pero la foto quedaba reducida a una tira y el hueco se rellenaba con párrafos:
 * un diseño pobre, y con razón.
 *
 * Ahora la primera pantalla es **la foto entera**, con la cabecera superpuesta
 * encima en vez de robándole 114 px, y el nombre al pie sobre el degradado. El
 * contenido —presentación, tecnologías y botones— pasa a la segunda pantalla.
 *
 * Sí, ahora hay scroll en móvil. Es a propósito: en un teléfono el scroll es
 * gratis y una foto de 290 px no lo es.
 * ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── La cabecera, superpuesta y transparente ──────────────────────────
     *
     * En flujo se llevaba 114 px de los 844 antes de que empezara nada. Fuera
     * de flujo no ocupa: los iconos y el botón de menú flotan sobre la parte
     * alta de la foto, que es el techo del pasillo —oscuro—, así que el blanco
     * de los iconos se lee sin ayuda.
     *
     * Kubio pinta el negro en varias capas anidadas (`background-wrapper`,
     * `background-layer`, la barra superior y la de navegación), así que hay
     * que apagarlas todas: apagar solo la de fuera deja un rectángulo negro. */
    .wp-site-blocks > .wp-block-kubio-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 20;
        background: transparent !important;
    }

    .wp-site-blocks > .wp-block-kubio-header .background-wrapper,
    .wp-site-blocks > .wp-block-kubio-header .background-layer,
    .wp-site-blocks > .wp-block-kubio-header .wp-block-kubio-navigation-top-bar,
    .wp-site-blocks > .wp-block-kubio-header .wp-block-kubio-navigation-section,
    .wp-site-blocks > .wp-block-kubio-header .wp-block-kubio-navigation-section__nav,
    /* Y las dos filas de dentro, que son las que de verdad pintan el negro:
     * medido, `background-color: rgb(0,0,0)` en la de los iconos (30 px) y en
     * la de navegación (64 px). Apagando solo las capas de fuera seguía
     * saliendo la banda. */
    .wp-site-blocks > .wp-block-kubio-header .wp-block-kubio-row {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }

    /* Sombra bajo los iconos, por si la parte alta de la foto viene clara en
     * algún recorte. Es más barata que un fondo y no ensucia la imagen. */
    .wp-site-blocks > .wp-block-kubio-header .h-svg-icon,
    .wp-site-blocks > .wp-block-kubio-header svg {
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .9));
    }

    /* ── La foto, a pantalla completa ─────────────────────────────────────
     *
     * `svh` y no `vh`: en el móvil `100vh` es la ventana SIN las barras del
     * navegador, así que con ellas visibles —que es como se entra— la foto se
     * sale por abajo y el nombre queda debajo del borde. `svh` es la ventana
     * pequeña, la que de verdad se ve. `vh` queda de reserva para el navegador
     * que no entienda `svh`. */
    .wp-site-blocks > .style-Uyl6DKvUlR-outer {
        /* 74 % y no 100: es la altura donde la foto se ve MEJOR, no la más
         * grande. `cover` en un hueco de 390x844 amplía la foto apaisada hasta
         * 1258 px de ancho para cubrir los 844 de alto, y de eso solo se ve el
         * 31 %: un primerísimo plano de la cara. A 74 svh (625 px) la foto sale
         * a 932 px y se ve el 42 %, o sea la persona con su entorno.
         *
         * Y hay un segundo motivo: dejando la pantalla al 74 % asoma el
         * arranque del bloque de abajo, que es lo que dice que hay más. */
        min-height: 74vh !important;
        min-height: 74svh !important;
        max-height: none !important;
    }

    /* El recorte, sobre la persona. Con la foto apaisada en un hueco vertical,
     * `cover` la amplía hasta cubrir el alto y solo se ve un tercio del ancho:
     * hay que decirle cuál. */
    #kubio .style-Uyl6DKvUlR-outer {
        background-position: 76% center;
    }

    /* El degradado, más alto: en una foto de 750 px el 46 % dejaba el nombre
     * justo en el arranque. */
    #kubio .style-Uyl6DKvUlR-outer::after {
        height: 58%;
        background: linear-gradient(to top,
            rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
    }

    /* Más aire bajo el nombre: al pie de una pantalla entera, 22 px se quedan
     * cortos y el texto parece caído. */
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row .wp-block-kubio-column__inner {
        padding-bottom: 28px !important;
    }

    /* ── La segunda pantalla ──────────────────────────────────────────────
     *
     * Ya no hay que apretar nada para que quepa, así que el texto respira y
     * entran las tecnologías, que es lo que de verdad se busca. */
    .pf-seccion {
        padding: 2.75rem 0 3rem;
    }

    .pf-intro__texto p {
        margin-bottom: 1rem;
    }

    .pf-intro__enlaces {
        margin-top: 1.75rem;
    }

}


/* ─────────────────────────────────────────────────────────────────────────
 * La foto mide lo mismo en español que en inglés
 *
 * Hasta aquí el hero era flexible: se quedaba el hueco que dejaba el texto. Y
 * el texto español ocupa **tres líneas por párrafo donde el inglés ocupa dos**,
 * así que el hero español salía más bajo... y con la máscara, un hero más bajo
 * es una foto más estrecha. Medido a 1440x900: 419 px de alto en español contra
 * 476 en inglés, o sea 662 px de foto contra 707.
 *
 * Es un fallo de verdad: la misma página, la misma foto, dos tamaños según el
 * idioma. Y no se arregla acortando el texto español —volvería a pasar con
 * cualquier frase que se añada mañana—: se arregla quitando la dependencia.
 *
 * Ahora el hero tiene **altura propia**, calculada solo a partir de la ventana,
 * y es el bloque de texto el que absorbe la diferencia. Los dos topes siguen
 * ahí: `64vw` para que la foto no se salga por la izquierda, y una altura menor
 * en pantallas bajas para que quepa el texto español, que es el largo.
 * ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .wp-site-blocks > .style-Uyl6DKvUlR-outer {
        flex: 0 0 auto;
        /* El hero se queda TODO lo que no usan cabecera, pie y bloque.
         *
         * 330 px = 93 de cabecera + 26 de pie + 211 del bloque de texto (un
         * párrafo, los tres botones y su aire). Es una resta exacta, no un
         * porcentaje a ojo: así el hero es lo más alto posible sin sacar
         * scroll, y como la foto mide `alto x 1,49`, lo más alto posible es
         * también lo más ancha posible.
         *
         * Y es **independiente del idioma**, que era el otro fallo: no depende
         * de cuánto ocupe el texto, sino de un número fijo.
         *
         * Si algún día se añade una línea al párrafo de la portada, hay que
         * subir el 330 o volverá el scroll. `comprobar-portada.py` lo caza. */
        height: min(64vw, calc(100vh - 330px));
        min-height: 0 !important;
        max-height: none !important;
    }
}

@media (min-width: 768px) and (max-height: 820px) {
    .wp-site-blocks > .style-Uyl6DKvUlR-outer {
        height: min(64vw, calc(100vh - 300px));
    }
}

/* ═════════════════════════════════════════════════════════════════════════
 * ESCRITORIO: el texto va ENCIMA de la foto
 *
 * Es lo que desbloquea el problema. Hasta aquí la foto y el texto se repartían
 * la altura de la ventana, y como la foto se ve entera —sin recortar— su ANCHO
 * sale de su ALTO (x 1,49), cada línea de texto le quitaba anchura a la foto.
 * La aritmética no daba: en un 1440x760 quedaban 641 px para repartir, el texto
 * se llevaba 370 y a la foto le quedaban 430 px de ancho. Pequeña, arrinconada.
 *
 * Poniendo el texto encima, **el hero se queda toda la altura disponible** y la
 * foto pasa de 430 a unos 955 px de ancho en esa misma ventana.
 *
 * Se lee porque la máscara ya difumina el borde izquierdo de la foto hacia el
 * fondo oscuro: el texto cae sobre esa zona, no sobre la imagen.
 * ═════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    /* El ancla de la superposición. */
    .wp-site-blocks {
        position: relative;
    }

    /* El hero, todo lo que dejan cabecera y pie. `height: auto` para anular la
     * resta fija de más arriba, que ya no hace falta: el texto no ocupa sitio. */
    .wp-site-blocks > .style-Uyl6DKvUlR-outer {
        flex: 1 1 auto;
        height: auto;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* El bloque de texto, fuera del flujo y pegado al fondo, justo encima del
     * pie. Sin fondo propio: lo que se ve detrás es la foto difuminada. */
    .wp-site-blocks > .pf-seccion {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: block;
        background: transparent;
        padding: 0 0 2.25rem;
    }

    /* El texto se queda en la mitad izquierda, que es la zona oscura. Más allá
     * empieza la foto y, aunque el degradado ayuda, no es sitio para leer. */
    .pf-intro__texto p {
        max-width: 46ch;
    }

    /* Y el nombre sube para dejarle hueco: un párrafo, los tres botones y su
     * aire son unos 190 px. */
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row .wp-block-kubio-column__inner {
        padding-bottom: 200px !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
 * MÓVIL: que vuelva a caber todo en una pantalla
 *
 * Solo móvil. En escritorio el texto va encima de la foto y ahí no sobra nada.
 *
 * Medido a 390x844 antes de esto: la página medía 1023 px, o sea **179 de más**.
 * El reparto era hero 625 + bloque 372 + pie 26.
 *
 * Los 179 salen de tres sitios, para no cargárselos todos de la foto:
 *
 *   ~135  la foto, de 74svh a 58svh   (se recorta más por arriba y por abajo:
 *                                      en móvil va con `cover` sobre la sección,
 *                                      así que recortar no la deforma)
 *    ~24  el aire del bloque de texto
 *    ~12  los botones, de 48 a 42 px de alto
 *
 * 42 px sigue siendo un objetivo táctil válido: el mínimo que se acierta con el
 * pulgar sin fallar son 44x44, y estos miden 42 de alto por 358 de ancho — de
 * sobra en el eje que cuesta.
 * ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* La foto se queda TODO menos lo que necesita el contenido: 345 px = el
     * bloque de texto (319 en el caso peor, que es el español a 360 px) más los
     * 26 del pie. Es una resta exacta, no un porcentaje: con `58svh` fijo la
     * página cabía a 390 y 430 pero se pasaba por 17 px a 360.
     *
     * Y al ser una resta fija, **la foto mide igual en los dos idiomas**, que es
     * el mismo criterio que en escritorio. */
    .wp-site-blocks > .style-Uyl6DKvUlR-outer {
        min-height: calc(100vh - 345px) !important;
        min-height: calc(100svh - 345px) !important;
    }

    /* El nombre, más abajo: pegado al pie de la foto, no flotando en el tercio
     * inferior. Medido: estaba a 110 px del suelo de la imagen. */
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row .wp-block-kubio-column__inner {
        padding-bottom: 8px !important;
    }
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row {
        bottom: 14px;
    }

    .pf-seccion {
        padding: 1.75rem 0 2rem;
    }

    .pf-intro__enlaces {
        margin-top: .9rem;
        gap: .6rem;
    }

    /* 42 px de alto. El padding es lo que manda aquí: con `.8rem` el botón
     * medía 45 aunque el `min-height` dijera 42. */
    .pf-enlace {
        min-height: 42px;
        padding: .6rem .9rem;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
 * MÓVIL: menos peso al nombre y a los botones
 *
 * Dos cosas pesaban más de lo que valen en una pantalla de teléfono:
 *
 *  · **El nombre**, a 34 px, ocupaba media foto. Baja a 23 px (−32 %) y las dos
 *    líneas de debajo de 15 a 12 (−20 %). No les aplico el mismo −30 % que al
 *    nombre porque a 10,5 px el cargo dejaría de leerse; el problema de peso
 *    estaba en el titular grande, no en ellas.
 *  · **Los botones**: iban a todo el ancho, y dos enlaces de navegación no
 *    merecen ser lo más llamativo de la página. Pasan a medir lo que ocupa su
 *    texto y a 38 px de alto.
 *
 * Sigue siendo tocable: 38 px de alto es poco menos que los 44 recomendados,
 * pero con 1,2 rem de padding lateral cada botón ronda los 110 px de ancho, que
 * es el eje donde de verdad se falla al apuntar con el pulgar.
 * ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row #heading {
        font-size: 23px !important;
        line-height: 1.15 !important;
    }

    #kubio .style-Uyl6DKvUlR-inner > .wp-block-kubio-row .wp-block-kubio-text__text {
        font-size: 12px !important;
    }

    .pf-intro__enlaces {
        gap: .5rem;
    }

    /* Se acabó el ancho completo: cada uno mide lo que dice. */
    .pf-enlace,
    .pf-enlace--principal,
    .pf-enlace--suave {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        min-height: 38px;
        padding: .5rem 1.2rem;
        font-size: .875rem;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
 * MÓVIL: más foto, menos zona de botones
 *
 * A 390x844 la franja de abajo se llevaba 304 px: 28 de aire arriba, el
 * párrafo, y **84 px solo de botones** porque no cabían en una fila y se
 * partían en dos.
 *
 * Apretándolos hasta que entran en UNA fila se recuperan ~46 px de golpe, y
 * otros ~28 del aire. Todo eso se lo queda la foto, que pasa de 514 a ~587 px.
 *
 * 34 px de alto es el mínimo al que los dejo: por debajo dejan de ser cómodos
 * de tocar. Como son enlaces de navegación y no la acción principal de la
 * página, ese tamaño es el que les corresponde.
 * ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .pf-seccion {
        padding: 1.25rem 0 1.25rem;
    }

    .pf-intro__enlaces {
        margin-top: .8rem;
        gap: .4rem;
        flex-wrap: nowrap;
    }

    .pf-enlace,
    .pf-enlace--principal,
    .pf-enlace--suave {
        min-height: 34px;
        padding: .35rem .7rem;
        font-size: .8125rem;
        white-space: nowrap;
    }
}

/* La cabecera de una sola línea en móvil vive ahora en `comun.css`: la
 * necesitan las seis páginas, y esta hoja solo la carga la portada. Se movió
 * al añadir el nombre como enlace a la portada, que dejaba la cabecera de las
 * páginas interiores en TRES líneas. */