/* Componente form-demo (captacion). Solo tokens de style.css.
 * Campos, 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í, la caja:
 * el texto a un lado y el formulario al otro si caben; si no, uno debajo del otro.
 * Depende del ancho de la caja, no del de la ventana.
 * claro: superficie con filete · suave: fondo verdoso · tinta: panel petróleo. */

.pf-form-demo {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-lg) var(--pf-space-xl);
    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);
    color: var(--pf-color-text);
    border: var(--pf-rule);
    border-radius: var(--pf-radius-card);
    /* El CTA de la cabecera salta a #demo: que el título no quede pegado al borde. */
    scroll-margin-top: var(--pf-space-xl);
}

.pf-form-demo--suave {
    background-color: var(--pf-color-bg-alt);
}

.pf-form-demo--tinta {
    background-color: var(--pf-color-bg);
}

.pf-form-demo__texto {
    flex: 1 1 18rem;
    min-width: 0;
}

.pf-form-demo__cuerpo {
    flex: 1 1 22rem;
    min-width: 0;
}

/* Con el componente dentro de la prosa de una plantilla (`.pf-bloques h2`: el
 * bloque de #89), sus márgenes no deben cambiar: doble clase. */
.pf-form-demo .pf-form-demo__titulo {
    max-width: 22ch;
    margin: 0 0 var(--pf-space-sm);
    font-size: var(--pf-text-2xl);
    font-weight: var(--pf-weight-black);
    line-height: var(--pf-leading-tight);
    color: var(--pf-color-heading);
}

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