/** ==========================================================================
 * Componente «Formulario» — un solo aspecto para los formularios de la web
 *
 *   <div class="FormZoho">          Zoho Web-to-Lead
 *     <form>
 *       <div class="zcwf_row">        una fila = un campo
 *         <div class="zcwf_col_lab">    la etiqueta
 *         <div class="zcwf_col_fld">    el campo
 *
 *   <form class="wpcf7-form">       Contact Form 7
 *     <p>                             una fila = un campo
 *
 * Dos motores de formulario con marcados distintos y, hasta ahora, con dos
 * juegos de estilos: 162 reglas repartidas por style.css que daban cajas
 * distintas en cada pagina (Eduardo, 09/09/2026). Esta hoja los peina igual:
 * los campos del proceso de matricula, dos columnas y el boton del sistema.
 *
 * DONDE SE CARGA. La encola functions.php por slug: hoy en /contacto/,
 * /contacto-empresas/ y /clase-gratuita/, que son las de Zoho. Las de Contact
 * Form 7 —/contacto-fundae/ y /solicitud-de-acceso-bolsa-trabajo/— se quedan
 * como estan por ahora; la hoja ya sabe peinarlas y para igualarlas basta con
 * añadir su slug a ese mapa.
 *
 * DOS COLUMNAS. Los campos cortos van de dos en dos; el area de texto, el
 * captcha, la privacidad y el boton ocupan la fila entera. Doce filas a lo
 * largo hacian un formulario de pantalla y media.
 *
 * LAS ETIQUETAS NO SE OCULTAN CON `display: none`. Estaban asi, y eso las quita
 * tambien del arbol de accesibilidad: quien navega con lector de pantalla se
 * quedaba con el `placeholder`, que desaparece en cuanto escribes. Aqui se
 * esconden a la vista pero siguen anunciandose.
 *
 * LA CLASE DE CF7 VA DOBLADA (`.wpcf7-form.wpcf7-form`) en las reglas que
 * tienen que ganarle a las 26 heredadas de style.css. Es eso o un !important
 * por regla; doblar la clase deja el peso justo y se lee.
 *
 * La newsletter del pie (Brevo) se queda fuera a proposito: esta en TODAS las
 * paginas y su sitio es css/cei-footer-admin.css.
 * ========================================================================== */

.FormZoho,
.wpcf7-form {
  --Formulario-hueco: var(--Global-Espacio-TituloContenido);
  --Formulario-relleno: 14px 16px;
  /* Lo que pinta el navegador al autorrellenar. Ver style.css, «El relleno
     automatico del navegador, del color del campo». */
  --Formulario-fondo: var(--Global-Color-Grey);
  /* La casilla de privacidad y lo que la separa de su frase. */
  --Formulario-casilla: 24px;
  --Formulario-casilla-hueco: calc(var(--Formulario-hueco) / 2);

  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  color: var(--Global-Color-Black);
}

/* --------------------------------------------------------------------------
 * La rejilla: dos columnas desde 700
 * -------------------------------------------------------------------------- */
.FormZoho form,
.wpcf7-form.wpcf7-form {
  display: grid;
  gap: var(--Formulario-hueco);
  margin: 0;
}

.FormZoho .zcwf_row,
.wpcf7-form.wpcf7-form > p {
  display: flex;
  flex-direction: column;
  gap: calc(var(--Formulario-hueco) / 3);
  margin: 0;
  min-width: 0;
}

@media (min-width: 700px) {
  .FormZoho form,
  .wpcf7-form.wpcf7-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* De ancho entero: lo que no se lee de un vistazo o cierra el formulario. */
  .FormZoho .zcwf_row:has(textarea),
  .FormZoho .zcwf_row--captcha,
  .FormZoho .zcwf_privacy,
  .FormZoho .FormZoho--checkbox,
  .FormZoho .zcwf_row:has([type="submit"]),
  .wpcf7-form.wpcf7-form > p:has(textarea),
  .wpcf7-form.wpcf7-form > p:has([type="submit"]),
  .wpcf7-form.wpcf7-form > p:has(.wpcf7-acceptance),
  .wpcf7-form.wpcf7-form > .wpcf7-response-output {
    grid-column: 1 / -1;
  }
}

/*
 * Los campos de sistema de Zoho —origen del lead, estado, etiquetas— viajan en
 * el formulario y no se enseñan. Zoho los marca con `wfrm_fld_dpNn` y el
 * marcado de CEI ademas con `FormZoho--none`: sin esto ocupan una celda vacia.
 */
.FormZoho .wfrm_fld_dpNn,
.FormZoho .FormZoho--none {
  display: none;
}

/* --------------------------------------------------------------------------
 * La etiqueta: a la vista no, al lector de pantalla si
 * -------------------------------------------------------------------------- */
.FormZoho .zcwf_col_lab {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Los campos: los mismos que el proceso de matricula
 *
 * Fondo gris del sistema, esquinas de --Global-Radio-Imagen y cuerpo Size-19,
 * que es lo que ya llevan los campos de /matriculaciones/. Sin borde: el
 * escalon de color basta para ver donde se escribe, y al enfocar aparece uno
 * negro que no mueve nada porque va de `outline` y no de `border`.
 * -------------------------------------------------------------------------- */
.FormZoho input:not([type="checkbox"]):not([type="submit"]):not([type="reset"]),
.FormZoho select,
.FormZoho textarea,
.wpcf7-form.wpcf7-form input:not([type="checkbox"]):not([type="submit"]),
.wpcf7-form.wpcf7-form select,
.wpcf7-form.wpcf7-form textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--Formulario-relleno);
  border: 0;
  border-radius: var(--Global-Radio-Imagen);
  background-color: var(--Global-Color-Grey);
  color: var(--Global-Color-Black);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-0);
}

.FormZoho textarea,
.wpcf7-form.wpcf7-form textarea {
  min-height: 140px;
  resize: vertical;
}

.FormZoho ::placeholder,
.wpcf7-form ::placeholder {
  color: var(--Global-Color-Grey-Secondary);
  opacity: 1;
}

.FormZoho :is(input, select, textarea):focus-visible,
.wpcf7-form :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--Global-Color-Black);
  outline-offset: 2px;
}

/*
 * Y al enfocar NO cambia de color. Betheme imprime desde sus Theme Options un
 * «select:focus { background-color: #ffc0b2 !important }» —su color de
 * acento— que ponia coral el desplegable en cuanto lo tocabas. El !important
 * de aqui es para eso, y se va el dia que ese color se cambie en el panel
 * (Eduardo, 10/09/2026).
 *
 * Solo en los campos, no en la casilla ni en los botones (Eduardo, 24/09/2026).
 * Al pulsar la casilla, el foco se queda en ella, y este gris con !important le
 * tapaba el verde: quedaba marcada pero se veia vacia hasta pulsar en otro
 * sitio. Parecia que el primer clic no hacia nada, se volvia a pulsar y se
 * desmarcaba. «Enviar» se ponia gris igual al pulsarlo.
 */
.FormZoho :is(input:not([type="checkbox"]):not([type="submit"]):not([type="reset"]), select, textarea):focus,
.wpcf7-form :is(input:not([type="checkbox"]):not([type="submit"]), select, textarea):focus {
  background-color: var(--Global-Color-Grey) !important;
  color: var(--Global-Color-Black) !important;
}

/*
 * Un campo que falla se perfila en rojo: la misma forma que el foco y otro
 * color, asi que no mueve nada de sitio.
 *
 * Por dos vias, porque los dos motores avisan distinto. `:user-invalid` es del
 * navegador y salta en cuanto se intenta enviar —es lo unico que hay en los de
 * Zoho—; `.wpcf7-not-valid` la pone Contact Form 7 al volver del servidor, que
 * valida ahi y por eso llega despues.
 */
.FormZoho :is(input, select, textarea):user-invalid,
.wpcf7-form :is(input, select, textarea):user-invalid,
.wpcf7-form.wpcf7-form .wpcf7-not-valid,
.wpcf7-form.wpcf7-form [aria-invalid="true"] {
  outline: 2px solid var(--Global-Destacado);
  outline-offset: 2px;
}

/*
 * Y que ese aro se vea entero (Eduardo, 24/09/2026). El contenido de estas
 * paginas va en un `.area_curso`, al que style.css le pone `overflow-x: clip`
 * con 4px de `overflow-clip-margin` para dejarle sitio al aro. Ese margen no
 * llega a aplicarse (comprobado en Chrome, tambien recortando los dos ejes) y
 * el formulario ocupa la columna entera: a lo que va pegado al borde —la
 * columna de campos de la izquierda, la de la derecha y la casilla— se le
 * cortaba el aro por fuera. En las paginas con formulario no hay nada mas
 * ancho que la columna (comprobado en el movil y en escritorio), asi que aqui
 * no se recorta.
 */
.area_curso:has(.FormZoho, .wpcf7-form) {
  overflow-x: visible;
}

/* --------------------------------------------------------------------------
 * Las etiquetas que se ven (Contact Form 7)
 *
 * En Zoho la etiqueta va escondida y el placeholder hace de rotulo; en CF7 hay
 * filas con <label> a la vista. Aqui se le da el cuerpo del sistema y, si el
 * campo es obligatorio, su asterisco: CF7 marca esos campos con
 * `aria-required="true"`, asi que la regla sale sola sin tocar el formulario.
 *
 * Los campos que solo llevan placeholder no se pueden marcar desde el CSS —el
 * texto de un placeholder no es contenido—: de eso se encarga
 * js/cei-formulario.js, que le añade el asterisco al placeholder.
 * -------------------------------------------------------------------------- */
.wpcf7-form.wpcf7-form label {
  display: block;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  text-transform: none;
}

.wpcf7-form.wpcf7-form p:has([aria-required="true"]) > label::after,
.wpcf7-form.wpcf7-form label:has([aria-required="true"])::after {
  content: " *";
  color: var(--Global-Destacado);
}

/*
 * Menos en el captcha: su asterisco ya va en el placeholder («Escribe aquí tu
 * respuesta *») y este caia suelto, en rojo, en la esquina de arriba a la
 * derecha del campo (Eduardo, 24/09/2026, mirando
 * /solicitud-de-acceso-bolsa-trabajo/).
 */
.wpcf7-form.wpcf7-form p label:has(.wpcf7-quiz)::after {
  content: none;
}

/*
 * La fila del captcha de CF7: la operacion —«12+5=?»— y el campo, en linea y
 * centrados entre si. La pregunta se quedaba pegada arriba porque la fila es
 * una columna flexible y la etiqueta mide una linea (Eduardo, 09/09/2026).
 */
.wpcf7-form.wpcf7-form > p:has(.wpcf7-quiz-label) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--Formulario-hueco) / 2);
}

.wpcf7-form.wpcf7-form .wpcf7-quiz-label {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.wpcf7-form.wpcf7-form > p:has(.wpcf7-quiz-label) .wpcf7-form-control-wrap {
  flex: 1 1 200px;
  min-width: 0;
}

/*
 * La pregunta y el campo, con aire entre los dos y el campo hasta el final de
 * la fila. style.css le da al campo un 85 % fijo con !important (75 y 72 % en
 * el movil), pensado para cuando la pregunta era una caja del 15 %: con la
 * pregunta a su ancho, al campo le sobraba un trozo a la derecha (Eduardo,
 * 24/09/2026, /solicitud-de-acceso-bolsa-trabajo/).
 */
.wpcf7-form.wpcf7-form label:has(.wpcf7-quiz) {
  align-items: center;
  gap: calc(var(--Formulario-hueco) / 2);
}

.wpcf7-form.wpcf7-form p > span.wpcf7-form-control-wrap > label > input.wpcf7-quiz {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
}

/*
 * La casilla de aceptacion de Contact Form 7 va envuelta en tres <span> que
 * heredan `width: 100%` y, dentro de la fila flexible, se encogen hasta dos
 * pixeles: la casilla mide 22 pero se ve como una rayita. Los tres se ajustan
 * a lo que envuelven (Eduardo, 09/09/2026, mirando /contacto-fundae/).
 */
.wpcf7-form.wpcf7-form .wpcf7-acceptance,
.wpcf7-form.wpcf7-form .wpcf7-list-item,
.wpcf7-form.wpcf7-form .wpcf7-list-item label,
.wpcf7-form.wpcf7-form .wpcf7-form-control-wrap:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--Formulario-hueco) / 2);
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

/* --------------------------------------------------------------------------
 * El desplegable: la flecha del sistema, no la del navegador
 * -------------------------------------------------------------------------- */
.FormZoho select,
.wpcf7-form.wpcf7-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-color: var(--Global-Color-Grey);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209l6%206l6-6%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center right 16px;
  background-size: 20px 20px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
 * La casilla de privacidad
 *
 * Zoho la trae de dos maneras:
 *
 *   .zcwf_privacy                  casi todas las paginas
 *     .dIB > … > <input>             la casilla, en dos o tres cajas
 *     .zcwf_privacy_txt              la frase y el enlace (en /contacto-fundae/
 *       <label for> + <a>              con un <div> mas por medio)
 *     #privacyErr…                   el «Acepte por favor» de Zoho
 *
 *   .FormZoho--checkbox            /asesoramiento-formaciones-a-consultar/
 *     <label><input></label>         todo suelto dentro de la fila
 *     <label for> + <a> + #privacyErr…
 *
 * Las dos salen iguales: una rejilla con la casilla en la primera columna y
 * todo lo demas en la segunda, uno debajo de otro.
 *
 * ASI ESTABA (Eduardo, 24/09/2026: «el acepto no funciona, se hacen como
 * varios clicks»). La frase iba a 14px y, en la pagina de la segunda forma, el
 * «Consúltalos haciendo clic aquí» a 19: se leia mas el enlace que lo que se
 * acepta. El enlace iba en la misma linea que la frase, o en la de debajo pero
 * ocupando todo el ancho, asi que al pulsar cerca del final se abria la
 * politica en otra pestaña y la casilla seguia sin marcar. En el movil la
 * casilla se quedaba sola en una linea, con la frase debajo, y los 12px que
 * las separan no marcaban nada.
 *
 * ASI QUEDA. La frase va a Size-19, como los campos, y marca la casilla se
 * pulse donde se pulse, tambien en el hueco que la separa del circulo. El
 * enlace va en su propia linea, a Size-14 y subrayado, y solo es enlace lo que
 * mide su texto.
 *
 * La caja de la segunda forma se busca con `:has()` dentro de un `:is()`: si
 * un navegador no conoce `:has()`, el `:is()` descarta esa parte y la regla
 * sigue valiendo para la primera, que es la de casi todas las paginas.
 * -------------------------------------------------------------------------- */
.FormZoho :is(.zcwf_privacy, .FormZoho--checkbox:not(:has(.zcwf_privacy))) {
  display: grid;
  grid-template-columns: var(--Formulario-casilla) minmax(0, 1fr);
  align-items: start;
  gap: 6px var(--Formulario-casilla-hueco);
}

.FormZoho :is(.zcwf_privacy, .FormZoho--checkbox:not(:has(.zcwf_privacy))) > * {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}

/* La casilla, o la caja que la envuelve, en la primera columna. */
.FormZoho :is(.zcwf_privacy, .FormZoho--checkbox:not(:has(.zcwf_privacy))) > :first-child {
  grid-column: 1;
  display: flex;
}

/* Las cajas de Zoho alrededor de la casilla: que no le sumen alto de linea. */
.FormZoho .zcwf_privacy .displayPurpose {
  display: flex;
}

/*
 * Zoho envuelve la casilla en un <label class="newCustomchkbox-md dIB w100_per">
 * con `width: 100%`. Dentro de la fila flexible ese 100% se encoge hasta 2px y
 * la casilla, aunque mida 20, sale como una rayita (Eduardo, 09/09/2026,
 * mirando /contacto/). La etiqueta se ajusta a lo que envuelve.
 */
.FormZoho label:has(input[type="checkbox"]),
.wpcf7-form.wpcf7-form label:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
}

/* La frase y el enlace, uno debajo de otro y cada uno de su ancho. */
.FormZoho .zcwf_privacy_txt,
.FormZoho .zcwf_privacy_txt > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/*
 * La frase. Se estira hacia la izquierda por encima del hueco que la separa de
 * la casilla (margen negativo y el mismo relleno), asi que pulsar en ese hueco
 * tambien marca.
 */
.FormZoho :is(.zcwf_privacy, .FormZoho--checkbox) label[for] {
  display: block;
  margin: 0 0 0 calc(-1 * var(--Formulario-casilla-hueco));
  padding: 0 0 0 var(--Formulario-casilla-hueco);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: 1.3;
  text-transform: none;
  /* Sin guiones: en el movil partia «privaci-dad». */
  hyphens: manual;
  color: var(--Global-Color-Black);
  cursor: pointer;
}

/* «Consúltalos haciendo clic aquí»: aparte, mas pequeño y con pinta de enlace. */
.FormZoho :is(.zcwf_privacy, .FormZoho--checkbox) a[href*="politica-de-privacidad"] {
  justify-self: start;
  font-size: var(--Font-Size-14);
  line-height: 1.4;
  color: var(--Global-Color-Black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.FormZoho :is(.zcwf_privacy, .FormZoho--checkbox) a[href*="politica-de-privacidad"]:hover {
  color: var(--Global-Destacado);
}

/*
 * El «Acepte por favor» de Zoho, que sale si se intenta enviar sin marcar.
 * Zoho lo esconde con `visibility: hidden`, que le guarda el sitio: aqui no
 * ocupa nada mientras esta escondido y, cuando Zoho lo enseña, sale debajo de
 * la frase como los avisos de los demas campos. Los !important son para
 * ganarle al `style` que Zoho le escribe en linea (12px, «red» y 5px de
 * sangria).
 */
.FormZoho [id^="privacyErr"] {
  padding: 0 !important;
  font-size: var(--Font-Size-14) !important;
  line-height: 1.4;
  color: var(--Global-Destacado) !important;
}

.FormZoho [id^="privacyErr"][style*="hidden"] {
  display: none;
}

/* La de Contact Form 7, en fila y con la frase del mismo cuerpo. */
.wpcf7-form.wpcf7-form > p:has(.wpcf7-acceptance) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--Formulario-casilla-hueco);
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: var(--Font-Size-19);
  line-height: 1.3;
  cursor: pointer;
}

/*
 * La casilla es un circulo y se marca con el verde del area de Videojuegos
 * (Eduardo, 09/09/2026). Redonda para que no se confunda con un campo, y de
 * color para que se vea de un vistazo que el consentimiento esta dado: es el
 * unico control del formulario que bloquea el envio.
 */
.FormZoho input[type="checkbox"],
.wpcf7-form.wpcf7-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: var(--Formulario-casilla);
  height: var(--Formulario-casilla);
  margin: 0;
  border: 1px solid var(--Global-Color-Black);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.FormZoho input[type="checkbox"]:checked,
.wpcf7-form.wpcf7-form input[type="checkbox"]:checked {
  border-color: var(--Area-Videojuegos-Primary);
  background-color: var(--Area-Videojuegos-Primary);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012l5%205l9-9%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

/* --------------------------------------------------------------------------
 * El captcha
 *
 * Son dos filas anidadas: la imagen y el campo donde se copia. Van en linea, y
 * la imagen a su tamaño: el tema estira toda imagen del contenido
 * (`.content_wrapper img { width: 100% }`) y la dejaba en 1080x378, mas alta
 * que el formulario entero.
 * -------------------------------------------------------------------------- */
.FormZoho .zcwf_row--captcha {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--Formulario-hueco);
}

.FormZoho .zcwf_row--captcha .zcwf_col_fld {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--Formulario-hueco);
}

/*
 * La imagen del captcha, a su tamaño. Se engancha por `img` y no por la fila
 * porque `.zcwf_row--captcha` es del marcado de CEI y hay formularios que no lo
 * llevan —/asesoramiento-formaciones-a-consultar/ la servia a 589x206—; dentro
 * de un formulario de Zoho la unica imagen es esa.
 */
.FormZoho img {
  width: auto;
  max-width: 200px;
  height: auto;
  border-radius: var(--Global-Radio-Imagen);
}

.FormZoho .zcwf_row--captcha input[type="text"] {
  width: auto;
  min-width: 200px;
  max-width: 320px;
  flex: 1 1 200px;
}

/*
 * «Cambiar imagen», junto al captcha: lo pone js/cei-formulario.js
 * (captchas()), que mete la imagen y el boton en una caja para que vayan
 * juntos en cualquier fila. Con pinta de enlace y no de boton, para que no
 * compita con «Enviar». Los !important son para Betheme, que le da a todo
 * <button> su relleno y su color de fondo.
 */
.FormZoho .FormZoho-captchaImagen {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--Formulario-hueco) / 2);
}

.FormZoho .FormZoho-recargar {
  display: inline-block;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--Global-Color-Black) !important;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14) !important;
  font-weight: var(--Font-Weight-400);
  line-height: 1.4 !important;
  letter-spacing: normal;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-transform: none;
  cursor: pointer;
}

.FormZoho .FormZoho-recargar:hover {
  color: var(--Global-Destacado) !important;
}

/* --------------------------------------------------------------------------
 * El boton
 *
 * Es el boton del sistema. Se escribe aqui y no se pide la clase
 * `.Global-boton` en el HTML porque el marcado lo generan Zoho y CF7: se
 * engancha por tipo, que es lo unico que se puede dar por seguro.
 * -------------------------------------------------------------------------- */
.FormZoho input[type="submit"],
.wpcf7-form.wpcf7-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: auto;
  padding: 12px 24px;
  border: 1px solid var(--Global-Color-Black);
  border-radius: var(--Global-Radio-Pastilla);
  background-color: var(--Global-Color-Black);
  color: var(--Global-Color-White);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: normal;
  letter-spacing: var(--Font-Letter-spacing-2);
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.FormZoho input[type="submit"]:hover,
.wpcf7-form.wpcf7-form input[type="submit"]:hover {
  background-color: transparent;
  color: var(--Global-Color-Black);
}

/* El «Restablecer» de Zoho no pinta nada: nadie lo usa y ocupa sitio. */
.FormZoho input[type="reset"] {
  display: none;
}


/* --------------------------------------------------------------------------
 * Los avisos: el campo que falla y la respuesta del envio
 *
 * ASI ESTABA. Contact Form 7 escribe debajo de cada campo que falla un
 * <span class="wpcf7-not-valid-tip"> con el motivo —«El campo es
 * obligatorio»—, y Betheme lo convertia en un cuadrado rojo de 44x44 clavado
 * 50px a la IZQUIERDA del campo, con una equis de su tipografia de iconos
 * dentro y el texto empujado fuera de la pantalla:
 *
 *   body:not(.cf7p-message) .wpcf7-not-valid-tip {
 *     position: absolute !important;  left: -50px !important;
 *     width: 44px !important;         height: 44px !important;
 *     background-color: #ed3b2e;      text-indent: -9999px !important; }
 *   ...::after { content: '\e82a'; font-family: "mfn-icons"; color: var(--Global-Color-White) }
 *   ...::before { ... transform: rotate(45deg) }   ← el piquito
 *
 * A una columna eso ya era una equis muda; a dos, ese -50px cae encima de la
 * columna de al lado y sale una hilera de cuadrados rojos por mitad del
 * formulario que no dicen que pasa ni de que campo hablan (Eduardo,
 * 09/09/2026, mirando /contacto-fundae/).
 *
 * ASI QUEDA. El motivo vuelve a donde CF7 lo pone —debajo de su campo—, en
 * Size-14 y en --Global-Destacado; el campo se perfila en rojo; y el panel de
 * respuesta dice de que color va segun como acabe el envio: rojo si algo
 * falla, verde si sale. Un error se lee, no se adivina.
 *
 * LOS !important SON DE IDA Y VUELTA. Las reglas de Betheme los llevan y a un
 * !important solo se le gana con otro; el `color` del panel pelea ademas con
 * un `.wpcf7 form .wpcf7-response-output { color: var(--Global-Color-Black) !important }` de
 * nuestro propio style.css. Cuando esas dos hojas se limpien, sobran.
 * -------------------------------------------------------------------------- */

/* El motivo del error, debajo de su campo y con el texto a la vista. */
.wpcf7-form.wpcf7-form .wpcf7-not-valid-tip {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-indent: 0 !important;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-14);
  font-weight: var(--Font-Weight-400);
  line-height: 1.4;
  color: var(--Global-Destacado);
}

/* La equis de la tipografia de iconos y su piquito, fuera. */
.wpcf7-form.wpcf7-form .wpcf7-not-valid-tip::before,
.wpcf7-form.wpcf7-form .wpcf7-not-valid-tip::after {
  content: none !important;
}

/*
 * En las filas que van en linea —la de la privacidad— el envoltorio se ajusta
 * al ancho de la casilla, y dentro de el el aviso salia estrangulado a una
 * palabra por linea. El envoltorio pasa a ocupar la fila y a poder partirla:
 * la casilla y su texto arriba, el aviso debajo y entero.
 */
.wpcf7-form.wpcf7-form .wpcf7-form-control-wrap {
  flex-wrap: wrap;
}

/*
 * El envoltorio de la casilla desaparece como caja: sus hijos —la casilla y el
 * aviso— pasan a ser hijos directos de la fila. Sin esto el envoltorio se
 * ajusta al ancho de la casilla (22px) y el aviso sale dentro estrangulado a
 * una palabra por linea; y si se le da ancho, empuja el texto de la politica
 * hacia la derecha. `display: contents` no pinta nada, asi que el aspecto sin
 * error no cambia. Lleva !important porque style.css trae un
 * `span.wpcf7-form-control-wrap { display: block !important }`.
 */
.wpcf7-form.wpcf7-form .wpcf7-form-control-wrap:has(input[type="checkbox"]) {
  display: contents !important;
}

.wpcf7-form.wpcf7-form .wpcf7-form-control-wrap > .wpcf7-not-valid-tip,
.wpcf7-form.wpcf7-form > p > .wpcf7-not-valid-tip {
  /* El ultimo de la fila: en la de la privacidad el aviso va delante del texto
     en el HTML, y sin esto se colaba entre la casilla y «Acepto la politica». */
  order: 1;
  flex: 1 0 100%;
  margin-top: calc(var(--Formulario-hueco) / 3) !important;
}

/* El hueco de ayuda de Zoho, del mismo color por si algun dia trae texto. */
.FormZoho .zcwf_col_help {
  font-size: var(--Font-Size-14);
  color: var(--Global-Destacado);
}

/* --------------------------------------------------------------------------
 * El panel de respuesta: lo que se dice del envio entero
 * -------------------------------------------------------------------------- */
.wpcf7-form.wpcf7-form > .wpcf7-response-output {
  margin: 0;
  padding: var(--Formulario-relleno);
  border: 1px solid var(--Global-Filete);
  border-radius: var(--Global-Radio-Imagen);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  font-weight: var(--Font-Weight-400);
  line-height: 1.4;
  text-align: left;
  color: var(--Global-Color-Black) !important;
}

/*
 * Rojo cuando no se ha enviado, sea por lo que sea: campos sin rellenar
 * (invalid), la casilla sin marcar (unaccepted), el servidor caido (failed,
 * aborted) o el filtro de spam.
 */
.wpcf7-form.wpcf7-form.invalid > .wpcf7-response-output,
.wpcf7-form.wpcf7-form.unaccepted > .wpcf7-response-output,
.wpcf7-form.wpcf7-form.payment-required > .wpcf7-response-output,
.wpcf7-form.wpcf7-form.spam > .wpcf7-response-output,
.wpcf7-form.wpcf7-form.failed > .wpcf7-response-output,
.wpcf7-form.wpcf7-form.aborted > .wpcf7-response-output {
  border-color: var(--Global-Destacado);
  color: var(--Global-Destacado) !important;
}

/*
 * Y verde cuando sale. Es el verde de Videojuegos, el mismo con el que se
 * marca la casilla de privacidad: en un formulario, «hecho» es siempre ese.
 * El relleno se reescribe porque style.css le mete 3.5rem por arriba y el
 * panel quedaba descolgado.
 */
.wpcf7-form.wpcf7-form.sent > .wpcf7-response-output {
  padding: var(--Formulario-relleno);
  border-color: var(--Area-Videojuegos-Primary);
  color: var(--Area-Videojuegos-Primary) !important;
}

/* ==========================================================================
 * EL AUTOCOMPLETADO DE «FORMACIÓN DE INTERÉS» (Eduardo, 16/09/2026)
 *
 * Cinco sugerencias como mucho, pegadas al campo. Sustituye al <datalist>
 * nativo, que lo pintaba el navegador —sin estilos, sin tope de resultados y
 * casi inexistente en el Safari de iOS—.
 *
 * El envoltorio lo crea el JS y contiene EXACTAMENTE el campo, así que la
 * lista cae justo debajo tanto en Contact Form 7 como en Zoho, que envuelven
 * sus campos de maneras distintas.
 * ========================================================================== */

.Autocompletar {
  display: block;
  position: relative;
}

.Autocompletar-lista {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 6px;
  list-style: none;
  background: var(--Global-Color-White);
  border: 1px solid var(--Global-Filete);
  border-radius: var(--Global-Radio-Tarjeta);
  /* La sombra es lo que la despega del campo de debajo: sin ella, dos cajas
     blancas seguidas se leen como una sola. */
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  /*
   * Tope de alto. Los títulos largos —«Curso de Diseño de Interfaces y
   * Experiencia de Usuario (UX/UI) en Sevilla»— ocupan tres o cuatro renglones
   * en una columna estrecha, y cinco de esos tapaban media pantalla. No se
   * cortan con puntos suspensivos a propósito: lo que distingue a esos títulos
   * entre sí —«en Sevilla», «Online»— está justo al final.
   */
  max-height: 320px;
  overflow-y: auto;
}

/* El atributo `hidden` lo pone y lo quita el JS; sin esto, el `display` de
   arriba lo pisaría y la lista se quedaría puesta. */
.Autocompletar-lista[hidden] {
  display: none;
}

.Autocompletar-opcion {
  margin: 0;
  padding: 10px 12px;
  border-radius: calc(var(--Global-Radio-Tarjeta) - 4px);
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-19);
  line-height: 1.3;
  color: var(--Global-Color-Black);
  cursor: pointer;
}

/* Una sola regla para el ratón y para las flechas: el JS pone `is-activa` al
   navegar con teclado y el `:hover` hace lo mismo con el puntero. */
/*
 * Tinta negra sobre el naranja, como en el buscador de la cabecera: blanco
 * sobre --Global-Destacado da 4,33:1 y se queda corto para texto normal; negro
 * da 4,85:1 y pasa AA.
 */
.Autocompletar-opcion:hover,
.Autocompletar-opcion.is-activa {
  background: var(--Global-Destacado);
  color: var(--Global-Color-Black);
}

/* Lo que coincide con lo escrito. El 500 del sistema, que es el peso fuerte
   que hay; un 700 de navegador no sale de ningún token de la casa. */
.Autocompletar-opcion b {
  font-weight: var(--Font-Weight-500);
}

/* --------------------------------------------------------------------------
 * Una etiqueta a la vista en un formulario de Zoho (Eduardo, 21/09/2026)
 *
 * En .FormZoho las etiquetas van escondidas y el placeholder hace de rotulo,
 * pero un <input type="date"> no enseña placeholder: sin esto el campo «Fecha
 * de inicio» de /contacto-fundae/ era un calendario sin nombre. La clase
 * deshace el escondite y le da el cuerpo de los campos.
 * -------------------------------------------------------------------------- */
.FormZoho .zcwf_col_lab.zcwf_col_lab--visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  font-size: var(--Font-Size-19);
  color: var(--Global-Color-Black);
}

.FormZoho .FormZoho-obligatorio {
  font-style: normal;
  color: var(--Global-Destacado);
}

/*
 * Y en la misma linea que su campo, a la izquierda (Eduardo, 24/09/2026).
 * Encima, la celda de «Fecha de inicio» medía 87px y su vecina, «Preferencias
 * horarias», 50: el desplegable quedaba arriba y la fecha abajo, y la fila se
 * descuadraba. Si no cabe —en un movil muy estrecho—, el campo baja a la linea
 * de debajo en vez de encogerse hasta no leerse.
 */
.FormZoho .zcwf_row:has(> .zcwf_col_lab--visible) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--Formulario-hueco);
}

.FormZoho .zcwf_row:has(> .zcwf_col_lab--visible) > .zcwf_col_lab--visible {
  flex: 0 0 auto;
  white-space: nowrap;
}

.FormZoho .zcwf_row:has(> .zcwf_col_lab--visible) > .zcwf_col_fld {
  flex: 1 1 160px;
  min-width: 0;
}

/*
 * «Puedes consultar los descuentos aquí», encima del formulario de
 * /contacto-fundae/ (Eduardo, 05/10/2026; lo pone el SQL
 * contacto-fundae-formulario-estudios-sede.sql). El enlace, como el de la
 * privacidad: subrayado y en el color destacado al pasar.
 */
.FormZoho .FormZoho-descuentos {
  margin: 0 0 var(--Formulario-hueco);
  font-size: var(--Font-Size-14);
  line-height: 1.4;
  color: var(--Global-Color-Black);
}

.FormZoho .FormZoho-descuentos a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.FormZoho .FormZoho-descuentos a:hover {
  color: var(--Global-Destacado);
}