/* ==========================================================================
   IncubArte — Formularios (patrocinadores y contacto)
   Fondo blanco, campos legibles, captcha anti-spam
   ========================================================================== */

.form-section {
  background: var(--blanco);
}

.form-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* Tarjeta del formulario sobre lenguaje gráfico de cuadritos */
.form-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  background-image: url('../img/brand/cuadros-verde-rosa.png');
  background-repeat: repeat;
  background-size: auto 44px;
  border-radius: var(--radius-lg);
}

.form-card__inner {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--blanco);
  border-radius: var(--radius-md);
}

.form-card__title {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--negro);
}

/* --- Campos ------------------------------------------------------------------ */
.field {
  margin-bottom: var(--space-md);
}

.field__label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--negro);
}

.field__req {
  color: var(--rosa-texto);
}

.field__input,
.field__textarea,
.field__select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--negro);
  background: var(--blanco);
  border: 2px solid var(--gris-borde);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.field__textarea {
  min-height: 130px;
  resize: vertical;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: #6b6b6b;
}

.field__input:hover,
.field__textarea:hover {
  border-color: #bdbdbd;
}

.field__input:focus,
.field__textarea:focus,
.field__select:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px rgb(252 84 160 / 0.18);
}

/* Estado de error */
.field__input[aria-invalid='true'],
.field__textarea[aria-invalid='true'] {
  border-color: #d32020;
}

.field__error {
  display: none;
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: #d32020;
}

.field__error.is-visible {
  display: block;
}

/* --- Honeypot (señuelo invisible para bots) ------------------------------------ */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Captcha ------------------------------------------------------------------- */
.captcha {
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--gris-suave);
  border: 2px solid var(--gris-borde);
  border-radius: var(--radius-md);
}

.captcha__legend {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--negro);
}

.captcha__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.captcha__question {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--negro);
  background: var(--blanco);
  border: 2px solid var(--negro);
  border-radius: var(--radius-sm);
  user-select: none;
}

.captcha__input {
  width: 110px;
  min-height: 44px;
  padding: var(--space-xs) var(--space-sm);
  font-family: inherit;
  font-size: var(--text-base);
  text-align: center;
  border: 2px solid var(--gris-borde);
  border-radius: var(--radius-md);
}

.captcha__input:focus {
  outline: none;
  border-color: var(--rosa);
  box-shadow: 0 0 0 3px rgb(252 84 160 / 0.18);
}

.captcha__reload {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 2px solid var(--gris-borde);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.captcha__reload:hover,
.captcha__reload:focus-visible {
  border-color: var(--rosa);
  background: var(--blanco);
}

.captcha__reload svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--negro);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Mensajes de envío ----------------------------------------------------------- */
.form-status {
  display: none;
  margin-top: var(--space-md);
  padding: var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
}

.form-status.is-visible {
  display: block;
}

.form-status--ok {
  background: var(--verde);
  color: var(--negro);
}

.form-status--error {
  background: #ffe3e3;
  color: #a11010;
  border: 1px solid #f2b8b8;
}

/* Botón en estado de carga */
.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--negro);
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* --- Columna de texto junto al formulario -------------------------------------------- */
.form-aside p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--negro);
}

/* --- Datos de contacto (página Contacto) ----------------------------------------------- */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-info__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--space-md);
  align-items: start;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

.contact-info__item svg {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  fill: none;
  stroke: var(--rosa-texto);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-info__item a {
  color: var(--rosa-texto);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-info__item a:hover {
  color: var(--rosa-oscuro);
}