/* Componente descarga-recurso (captacion). Solo tokens de style.css.
 * Campos, casillas, primera capa, envío, estado y éxito son los de la base de
 * formulario de shell (common/formulario, se encola antes). Aquí, la caja y sus
 * variantes (según el ancho de la caja, no el de la ventana), la imagen del
 * recurso, su formato y el botón de descarga.
 * normal: caja con filete, texto y formulario en dos columnas si caben ·
 * compacta: filete arriba y sin caja · contenedor: banda al ancho de página (landing). */

.pf-descarga-recurso-banda {
    padding-block: var(--pf-space-section);
}

.pf-descarga-recurso {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-lg) var(--pf-space-xl);
    color: var(--pf-color-text);
    /* El botón de la cabecera de la landing salta a #descarga: que no quede pegada al borde. */
    scroll-margin-top: var(--pf-space-xl);
}

.pf-descarga-recurso--normal {
    padding: clamp(var(--pf-space-md), 4vw, var(--pf-space-xl)) clamp(var(--pf-space-md), 3vw, var(--pf-space-lg));
    background-color: var(--pf-color-surface);
    border: var(--pf-rule);
    border-radius: var(--pf-radius-card);
}

.pf-descarga-recurso--compacta {
    padding-top: var(--pf-space-md);
    border-top: var(--pf-rule);
}

.pf-descarga-recurso__texto {
    flex: 1 1 16rem;
    min-width: 0;
}

.pf-descarga-recurso__cuerpo {
    flex: 1 1 20rem;
    min-width: 0;
}

.pf-descarga-recurso__imagen {
    display: block;
    width: 100%;
    max-width: 16rem;
    height: auto;
    margin: 0 0 var(--pf-space-md);
    border: var(--pf-rule);
    border-radius: var(--pf-radius-md);
}

/* Con el componente dentro de la prosa de una plantilla (`.pf-bloques h2`),
 * sus márgenes no deben cambiar: doble clase. */
.pf-descarga-recurso .pf-descarga-recurso__titulo {
    max-width: 24ch;
    margin: 0 0 var(--pf-space-xs);
    font-size: var(--pf-text-xl);
    font-weight: var(--pf-weight-black);
    line-height: var(--pf-leading-tight);
    color: var(--pf-color-heading);
}

.pf-descarga-recurso__entradilla {
    max-width: var(--pf-measure-narrow);
    margin: 0;
    color: var(--pf-color-text-soft);
}

.pf-descarga-recurso__formato {
    margin: var(--pf-space-sm) 0 0;
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}

.pf-descarga-recurso__enlace {
    margin: var(--pf-space-md) 0 0;
}