/* Componente form-suscripcion (captacion). Solo tokens de style.css.
 * Campo, casilla, primera capa, trampa, envío, estado y éxito son los de la base
 * de formulario de shell (common/formulario, se encola antes; #30). Aquí solo la
 * caja y las dos variantes, según el ancho de la caja y no el de la ventana.
 * normal: caja con filete, texto y formulario en dos columnas si caben ·
 * compacta: filete arriba y sin caja, para el final de un artículo. */

.pf-form-suscripcion {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-md) var(--pf-space-xl);
    color: var(--pf-color-text);
}

.pf-form-suscripcion--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-form-suscripcion--compacta {
    padding-top: var(--pf-space-md);
    border-top: var(--pf-rule);
}

.pf-form-suscripcion__texto {
    flex: 1 1 16rem;
    min-width: 0;
}

.pf-form-suscripcion__cuerpo {
    flex: 1 1 20rem;
    min-width: 0;
}

/* Con el componente dentro de la prosa de una plantilla (`.pf-bloques h2`),
 * sus márgenes no deben cambiar: doble clase. */
.pf-form-suscripcion .pf-form-suscripcion__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-form-suscripcion--compacta .pf-form-suscripcion__titulo {
    font-size: var(--pf-text-lg);
}

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