/**
 * Riera — estilo del formulario Fluent Forms para igualar el diseño del tema (.cform).
 * Scopeado a .cform-section (Home block + page-contacto) para no afectar otros forms,
 * y a .cform__card (tarjeta blanca del formulario de las landings, 1-oct-2026),
 * que toma los estilos de la variante clara (.cform-section--light).
 */

.cform-section .fluentform,
.cform__card .fluentform { display: grid; gap: 16px; }
.cform-section .fluentform .ff-el-group,
.cform__card .fluentform .ff-el-group { margin-bottom: 0; }
.cform-section .fluentform .ff-step-body,
.cform-section .fluentform .ff-t-container,
.cform__card .fluentform .ff-step-body,
.cform__card .fluentform .ff-t-container { gap: 16px; }

/* Labels — mono, mayúsculas, tenue (como .cform__field label) */
.cform-section .fluentform .ff-el-input--label label,
.cform__card .fluentform .ff-el-input--label label {
  font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 8px; padding: 0;
}
.cform-section .fluentform .ff-el-input--label label .ff_required,
.cform__card .fluentform .ff-el-input--label label .ff_required { color: #E87820; }
/* Asterisco de obligatorio (25-sep-2026). Fluent lo pinta con un ::after que
   hereda el cuerpo de 10px de la etiqueta y apenas se veía: se agranda y va en
   naranja. Solo el asterisco; la etiqueta sigue igual. */
.cform-section .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.cform__card .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
  content: "*"; color: #E87820; font-family: var(--sans); font-size: 17px; font-weight: 700;
  line-height: 0; letter-spacing: 0; margin-left: 4px; vertical-align: -3px;
}

/* Inputs / select / textarea — fondo translúcido sobre oscuro (como .cform__input) */
.cform-section .fluentform input[type="text"],
.cform-section .fluentform input[type="email"],
.cform-section .fluentform input[type="tel"],
.cform-section .fluentform input[type="number"],
.cform-section .fluentform textarea,
.cform-section .fluentform select,
.cform__card .fluentform input[type="text"],
.cform__card .fluentform input[type="email"],
.cform__card .fluentform input[type="tel"],
.cform__card .fluentform input[type="number"],
.cform__card .fluentform textarea,
.cform__card .fluentform select {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 2px;
  color: #fff; font-family: var(--sans); font-size: 15px; line-height: 1.4; padding: 14px 16px;
  outline: none; box-shadow: none; width: 100%; height: auto;
  transition: border-color .2s, background .2s;
}
.cform-section .fluentform input::placeholder,
.cform-section .fluentform textarea::placeholder,
.cform__card .fluentform input::placeholder,
.cform__card .fluentform textarea::placeholder {
  color: rgba(255,255,255,.3); -webkit-text-fill-color: rgba(255,255,255,.3); opacity: 1;
}
.cform-section .fluentform input[type="text"]:focus,
.cform-section .fluentform input[type="email"]:focus,
.cform-section .fluentform input[type="tel"]:focus,
.cform-section .fluentform textarea:focus,
.cform-section .fluentform select:focus,
.cform__card .fluentform input[type="text"]:focus,
.cform__card .fluentform input[type="email"]:focus,
.cform__card .fluentform input[type="tel"]:focus,
.cform__card .fluentform textarea:focus,
.cform__card .fluentform select:focus {
  border-color: #E87820; background: rgba(255,255,255,.09); box-shadow: none;
}

/* Select — sin apariencia nativa + chevron naranja */
.cform-section .fluentform select,
.cform__card .fluentform select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E87820' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.cform-section .fluentform select option,
.cform__card .fluentform select option { background: #1a1a1a; color: #fff; }
.cform-section .fluentform textarea,
.cform__card .fluentform textarea { resize: vertical; min-height: 120px; }
/* Texto blanco real al escribir (Fluent fuerza text-fill oscuro → se veía con velo) */
.cform-section .fluentform textarea,
.cform-section .fluentform textarea:focus,
.cform__card .fluentform textarea,
.cform__card .fluentform textarea:focus {
  color: #fff; -webkit-text-fill-color: #fff; caret-color: #E87820; opacity: 1;
}

/* Checkbox RGPD (como .cform__check) */
.cform-section .fluentform .ff-el-form-check,
.cform__card .fluentform .ff-el-form-check { display: flex; align-items: flex-start; gap: 12px; }
.cform-section .fluentform .ff-el-form-check-input,
.cform-section .fluentform input[type="checkbox"],
.cform__card .fluentform .ff-el-form-check-input,
.cform__card .fluentform input[type="checkbox"] {
  margin-top: 3px; width: 16px; height: 16px; accent-color: #E87820; flex-shrink: 0; cursor: pointer;
}
.cform-section .fluentform .ff-el-form-check-label,
.cform__card .fluentform .ff-el-form-check-label {
  font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: normal;
  text-transform: none; color: rgba(255,255,255,.5); line-height: 1.5; cursor: pointer;
}
.cform-section .fluentform .ff-el-form-check-label a,
.cform__card .fluentform .ff-el-form-check-label a { color: #E87820; }

/* Botón enviar (como .btn-p) */
.cform-section .fluentform .ff-btn-submit,
.cform__card .fluentform .ff-btn-submit {
  background: #E87820; color: #fff; padding: 16px 26px; border: none; border-radius: 2px;
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; width: auto; box-shadow: none; margin-top: 1em; margin-bottom: 1.5em;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.cform-section .fluentform .ff-btn-submit:hover,
.cform__card .fluentform .ff-btn-submit:hover {
  background: #CC6510; transform: translateY(-2px); box-shadow: 0 12px 36px rgba(232,120,32,.28);
}

/* Estados de validación / mensajes */
.cform-section .fluentform .ff-el-is-error input,
.cform-section .fluentform .ff-el-is-error textarea,
.cform-section .fluentform .ff-el-is-error select,
.cform__card .fluentform .ff-el-is-error input,
.cform__card .fluentform .ff-el-is-error textarea,
.cform__card .fluentform .ff-el-is-error select { border-color: #e3342f; }
.cform-section .fluentform .error,
.cform-section .fluentform .text-danger,
.cform__card .fluentform .error,
.cform__card .fluentform .text-danger { color: #ff9b94; font-size: 12px; margin-top: 6px; }
.cform-section .fluentform .ff-message-success,
.cform__card .fluentform .ff-message-success {
  color: #fff; background: rgba(255,255,255,.06); border: 1px solid #E87820;
  padding: 18px 20px; border-radius: 2px; font-size: 15px;
}

/* =========================================================
   VARIANTE CLARA (21-sep-2026)
   El formulario de contacto pasó a fondo claro y esta hoja estaba
   escrita entera para oscuro: etiquetas y texto en blanco sobre crema
   no se leían. Se repintan solo dentro de `.cform-section--light`, así
   que el mismo formulario sigue en oscuro donde toca (bloque
   `acf/contact-form` y ficha de equipo).
========================================================= */
.cform-section--light .fluentform .ff-el-input--label label { color: var(--text-2); }

.cform-section--light .fluentform input[type="text"],
.cform-section--light .fluentform input[type="email"],
.cform-section--light .fluentform input[type="tel"],
.cform-section--light .fluentform input[type="url"],
.cform-section--light .fluentform input[type="number"],
.cform-section--light .fluentform select,
.cform-section--light .fluentform textarea,
.cform__card .fluentform input[type="text"],
.cform__card .fluentform input[type="email"],
.cform__card .fluentform input[type="tel"],
.cform__card .fluentform input[type="url"],
.cform__card .fluentform input[type="number"],
.cform__card .fluentform select,
.cform__card .fluentform textarea {
  background: var(--white); border-color: rgba(0,0,0,.14); color: var(--ink);
}
.cform-section--light .fluentform input::placeholder,
.cform-section--light .fluentform textarea::placeholder,
.cform__card .fluentform input::placeholder,
.cform__card .fluentform textarea::placeholder {
  color: rgba(0,0,0,.34); -webkit-text-fill-color: rgba(0,0,0,.34);
}
.cform-section--light .fluentform input:focus,
.cform-section--light .fluentform select:focus,
.cform-section--light .fluentform textarea:focus,
.cform__card .fluentform input:focus,
.cform__card .fluentform select:focus,
.cform__card .fluentform textarea:focus {
  border-color: #E87820; background: var(--white);
}
.cform-section--light .fluentform select option,
.cform__card .fluentform select option { background: var(--white); color: var(--ink); }
.cform-section--light .fluentform textarea,
.cform-section--light .fluentform textarea:focus,
.cform__card .fluentform textarea,
.cform__card .fluentform textarea:focus {
  color: var(--ink); -webkit-text-fill-color: var(--ink);
}
.cform-section--light .fluentform .ff-el-form-check-label,
.cform__card .fluentform .ff-el-form-check-label { color: var(--text-2); }
.cform-section--light .fluentform .ff-el-form-check-label a,
.cform__card .fluentform .ff-el-form-check-label a { color: #E87820; }

/* Etiqueta «Protección de datos» oculta (25-sep-2026): el texto del propio
   checkbox ya dice qué se acepta. Se oculta desde el campo en Fluent
   (Label Placement: Hide Label) y esta regla lo asegura. */
.cform-section .fluentform .ff-el-form-hide_label > .ff-el-input--label,
.cform__card .fluentform .ff-el-form-hide_label > .ff-el-input--label { display: none; }
/* Sin su etiqueta, la casilla se pegaba al campo de mensaje: se le devuelve
   el aire que ocupaba la etiqueta. */
.cform-section .fluentform .ff-el-group.ff-el-form-hide_label,
.cform__card .fluentform .ff-el-group.ff-el-form-hide_label { margin-top: 18px; }