/* ==========================================================================
   Formulario de solicitud — JetFormBuilder
   --------------------------------------------------------------------------
   Campos en píldora (radio 50px, borde #E3E3E3), dos por fila salvo el
   mensaje. Las etiquetas existen pero no se ven: el original las deja en
   blanco sobre blanco (página) o a 0px (popup), y habla el placeholder.
   ========================================================================== */
.cid-formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  margin-top: -34px;   /* el formulario empieza pegado a las tarjetas */
  padding-top: 61px;
}

.cid-fila { position: relative; padding: 5px 0; }

.cid-fila.es-lleno { grid-column: 1 / -1; }

/* Los saltos entre filas del original no son regulares (las etiquetas
   blancas ocupan sitio en unas filas y no en otras); se copian tal cual. */
.cid-formulario.es-pagina .cid-fila:nth-child(-n+2) { margin-bottom: 38px; }

.cid-formulario.es-pagina .cid-fila:nth-child(n+3):nth-child(-n+4) { margin-bottom: 14px; }

.cid-formulario.es-pagina .cid-fila-envio { padding-top: 12px; padding-bottom: 0; }

.cid-formulario.es-popup .cid-fila.es-medio { margin-bottom: 10px; }

.cid-formulario.es-popup .cid-fila.es-lleno { margin-bottom: 7px; }

.cid-formulario.es-popup .cid-fila-envio { margin-bottom: 0; }

.cid-etiqueta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cid-campo {
  display: block;
  width: 100%;
  height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--borde);
  border-radius: 50px;
  background: var(--blanco);
  color: var(--gris);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 24px;
  outline: none;
}

.cid-campo::placeholder { color: var(--gris); opacity: 1; }

.cid-campo:focus { border-color: #c4c4c4; }

textarea.cid-campo { height: 66px; min-height: 42px; resize: vertical; }

.cid-enviar {
  height: 42px;
  padding: 8px 16px;
  border: 1px solid #CC3366;
  border-radius: 3px;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 24px;
  transition: all .3s;
}

.cid-enviar:hover,
.cid-enviar:focus { background: var(--blanco); color: var(--rojo); border-radius: 5px; }

.cid-enviar:disabled { opacity: .6; cursor: progress; }

.cid-formulario.es-popup .cid-enviar { width: 100%; border-color: var(--rojo); }

.cid-trampa {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}

.cid-aviso {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 10px 16px;
  border: 1px solid currentColor;
  text-align: center;
}

.cid-aviso.es-ok { color: #46b450; }

.cid-aviso.es-error { color: var(--rojo); }

/* «¿Qué necesitas?»: los tipos de servicio como botones que se marcan. */
.cid-tipos { margin: 0 0 6px; padding: 5px 0; border: 0; min-width: 0; }

.cid-tipos legend { padding: 0 0 10px 4px; color: var(--azul); font-family: var(--texto); font-size: 15px; font-weight: 600; }

.cid-tipos-lista { display: flex; flex-wrap: wrap; gap: 8px; }

.cid-tipo {
  padding: 8px 16px;
  border: 1px solid var(--borde);
  border-radius: 50px;
  background: var(--blanco);
  color: var(--gris);
  font-family: var(--texto);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.cid-tipo:hover { border-color: var(--azul); color: var(--azul); }

.cid-tipo.es-marcado { border-color: var(--azul); background: var(--azul); color: var(--blanco); }

.cid-tipo:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }