/* Contact Form 7 con el diseño del prototipo. El HTML del formulario ya es el
   del prototipo (inc/formulario.php); esto cubre lo que CF7 agrega por su
   cuenta: el envoltorio de cada campo, sus avisos, su rueda de carga y su
   caja de respuesta. Solo se carga en /contacto/. */

/* CF7 mete cada control en un <span>: tiene que ocupar el ancho del label. */
.campos .wpcf7-form-control-wrap{display:block}
.campos .wpcf7-form-control-wrap > input,
.campos .wpcf7-form-control-wrap > select,
.campos .wpcf7-form-control-wrap > textarea{width:100%}

/* Campo inválido según el servidor: el mismo rojo que la validación propia. */
.campos label:has(.wpcf7-not-valid) > span{color:var(--rojo)}
.campos .wpcf7-not-valid{border-color:var(--rojo)}
.campos .wpcf7-not-valid:focus{outline-color:var(--rojo)}
.campos .wpcf7-not-valid-tip{display:block;margin-top:6px;font-family:var(--texto);font-size:12.5px;
  line-height:1.45;color:var(--rojo);text-transform:none;letter-spacing:0}
/* Si ya está el aviso propio (JS), el de CF7 sobra. */
.campos label.mal .wpcf7-not-valid-tip{display:none}

/* La respuesta va en .form-estado (la escribe el JS del tema con el mismo
   texto que manda CF7). La caja de CF7 queda solo si no hay JS. */
.cv-js .wpcf7 form .wpcf7-response-output{display:none}
.wpcf7 form .wpcf7-response-output{margin:18px 0 0;padding:13px 15px;border:0;border-left:2px solid var(--linea-f);font-size:14.5px}

/* Rueda de carga de CF7 al lado del botón. */
.form .wpcf7-spinner{margin:22px 0 0 12px;vertical-align:middle}

/* Captcha de Cloudflare: arriba del botón, sin el margen negativo del plugin. */
.form .cf7-cf-turnstile{margin:18px 0 0 !important}
.form .cf-turnstile-br{display:none}

/* El <textarea> dentro del <span> de CF7 quedaba en línea y el navegador le
   dejaba 5 px de aire abajo (109 contra 104 del prototipo). */
.campos .wpcf7-form-control-wrap > textarea{display:block}