.portada-overlay-veracruz {
    position: absolute;
    top: 66%;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0% 29% 4% 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* En móvil se conserva la posición de la tarjeta, pero se amplía la columna
   de texto para que no se amontone ni se parta en demasiadas líneas. */
@media (max-width: 768px) {
    .portada-overlay-veracruz {
        padding: 0% 8% 5% 6%;
    }
}
/* El header de Veracruz no termina en un color plano: va de verde oliva
   (#526b31) a la izquierda a verde azulado oscuro (#143642) a la derecha.
   Por eso la numeralia arranca con ese mismo degradado horizontal y encima
   se funde verticalmente hacia el azul de la sección (#20525d).
   El tile de fondo mide 100vw y va centrado tanto en .header-content (80%)
   como en su ::before (100vw); como ambos están centrados en el viewport, el
   degradado horizontal coincide en los dos y no se nota la unión. */
.header-content,
.header-content::before {
    background-color: #20525d;
    background-image:
        linear-gradient(180deg, rgba(32, 82, 93, 0) 0, rgba(32, 82, 93, 0) 56px, #20525d 340px),
        linear-gradient(90deg, #526b31 0%, #526b31 7%, #2e4b3f 50%, #143642 100%);
    background-size: 100vw 100%;
    background-position: center top;
    background-repeat: no-repeat;
}

/* En escritorio el color se sostiene un rato más antes de empezar a fundirse. */
@media (min-width: 992px) {
    .header-content,
    .header-content::before {
        background-image:
            linear-gradient(180deg, rgba(32, 82, 93, 0) 0, rgba(32, 82, 93, 0) 120px, #20525d 460px),
            linear-gradient(90deg, #526b31 0%, #526b31 7%, #2e4b3f 50%, #143642 100%);
    }
}

/* La imagen del header escala a un alto fraccionario y el fondo claro del body
   se colaba como una línea de 1px entre la imagen y la numeralia, sobre todo
   en móvil: el contenedor se pinta con el mismo degradado y la numeralia se
   solapa 1px. */
.header-image-container {
    background: linear-gradient(90deg, #526b31 0%, #526b31 7%, #2e4b3f 50%, #143642 100%);
}

.header-content {
    margin-top: -1px;
}