/* =========================================================
   CLM Formulario Clementina
   Réplica visual del Form 96 de ActiveCampaign («Clementina»).
   Parte 1: base equivalente a los estilos que inyectaba AC.
   Parte 2: CSS personalizado del Form 96 (copiado tal cual, cambiando
            el ámbito "._form_96" por "#clmf-form").
   ========================================================= */

/* ---------- Parte 1: base ---------- */
.clmf-wrap {
  box-sizing: border-box;
}

#clmf-form {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #000;
  text-align: left;
}

#clmf-form *,
#clmf-form *::before,
#clmf-form *::after {
  box-sizing: border-box;
}

#clmf-form ._form_element {
  position: relative;
  max-width: 100%;
}

#clmf-form ._field-wrapper {
  position: relative;
  font-size: 14px;
  line-height: 1.6;
}

#clmf-form input[type="text"],
#clmf-form input[type="email"],
#clmf-form input[type="tel"] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  font-family: inherit;
  font-weight: 500;
  line-height: 14px;
}

#clmf-form .field-required {
  color: #f00;
}

#clmf-form .sms_consent_checkbox {
  position: relative;
  cursor: pointer;
  font-family: inherit;
}

#clmf-form .sms_consent_message {
  display: block;
  font-family: inherit;
}

#clmf-form ._submit {
  -webkit-appearance: none;
  appearance: none;
  font-family: Barlow, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-align: center !important;
  text-decoration: none !important;
}

#clmf-form ._submit:focus-visible,
#clmf-form .sms_consent_checkbox input:focus-visible {
  outline: 2px solid #ff7043 !important;
  outline-offset: 2px !important;
}

#clmf-form ._clear-element {
  clear: left;
}

/* ---------- Parte 2: CSS personalizado del Form 96 ---------- */

/* Ocultar título del formulario */
#clmf-form ._form-title,
#clmf-form ._x85664380 ._form-title {
  display: none !important;
}

/* Contenedor general del formulario */
#clmf-form {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: Barlow, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Formulario en una sola columna */
#clmf-form ._form-content {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
}

/* Cada campo ocupa toda la línea */
#clmf-form ._form_element {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
}

#clmf-form ._x69905084,
#clmf-form ._x00958036,
#clmf-form ._x01869772,
#clmf-form ._x86961350,
#clmf-form ._x85664380 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  grid-column: 1 / -1 !important;
}

/* Labels */
#clmf-form ._form-label {
  display: block !important;
  margin: 0 0 6px !important;
  height: auto !important;
  line-height: 1.25 !important;
  color: #1f1d1d !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}

/* Inputs normales */
#clmf-form ._form-input,
#clmf-form input[type="text"],
#clmf-form input[type="email"],
#clmf-form input[type="tel"] {
  width: 100% !important;
  height: 50px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1.4px solid #e2ded9 !important;
  border-radius: 10px !important;
  padding: 0 15px !important;
  font-size: 15px !important;
  color: #1f1d1d !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Igual que la base de AC en el Form 96: interlineado, display y color del placeholder */
#clmf-form input[type="text"],
#clmf-form input[type="email"],
#clmf-form input[type="tel"] {
  display: block;
  line-height: 1.3em;
}

#clmf-form input::placeholder {
  color: #142341;
}

/* Focus */
#clmf-form ._form-input:focus,
#clmf-form input[type="text"]:focus,
#clmf-form input[type="email"]:focus,
#clmf-form input[type="tel"]:focus {
  border-color: #ff7043 !important;
  box-shadow: 0 0 0 4px rgba(255, 112, 67, 0.13) !important;
}

/* Teléfono con prefijo */
#clmf-form .iti,
#clmf-form .iti--allow-dropdown,
#clmf-form .iti--separate-dial-code {
  width: 100% !important;
  display: block !important;
}

#clmf-form .iti input {
  width: 100% !important;
  height: 50px !important;
  padding-left: 92px !important;
}

#clmf-form .iti__selected-flag {
  background: #ffffff !important;
  border-radius: 10px 0 0 10px !important;
}

#clmf-form .iti__country-list {
  z-index: 999999 !important;
}

/* Verificación (antes reCAPTCHA, ahora Turnstile) */
#clmf-form .clmf-ts-element {
  width: 100% !important;
  grid-column: 1 / -1 !important;
  margin: 6px 0 0 !important;
}

/* Consentimiento */
#clmf-form .sms_consent_checkbox {
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  color: #3f3a39 !important;
}

#clmf-form .sms_consent_checkbox input {
  width: 16px !important;
  height: 16px !important;
  margin: 3px 0 0 !important;
  accent-color: #ff7043 !important;
}

#clmf-form .sms_consent_message {
  margin: 0 !important;
  color: #3f3a39 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

/* Botón */
#clmf-form ._button-wrapper {
  width: 100% !important;
  grid-column: 1 / -1 !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}

#clmf-form ._submit {
  display: block !important;
  width: 100% !important;
  height: 58px !important;
  margin: 0 !important;
  background: #171717 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 0 24px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22), inset 0 -10px 18px rgba(255, 255, 255, 0.05) !important;
  cursor: pointer !important;
}

#clmf-form ._submit:hover {
  filter: brightness(1.07);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.26), inset 0 -10px 18px rgba(255, 255, 255, 0.05) !important;
}

/* Texto inferior */
#clmf-form ._button-wrapper::after {
  content: "♡  No credit card required";
  display: block;
  margin-top: 16px;
  text-align: center;
  color: #8a817e;
  font-size: 14px;
  font-weight: 500;
}

/* Mobile */
@media (max-width: 700px) {
  #clmf-form ._form-content {
    gap: 13px !important;
  }

  #clmf-form ._submit {
    height: 56px !important;
    font-size: 16px !important;
  }
}

/* ---------- Parte 3: piezas propias ---------- */

/* Honeypot: fuera de la vista, sin display:none */
#clmf-form .clmf-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Turnstile */
#clmf-form .clmf-turnstile {
  min-height: 65px;
}

#clmf-form .clmf-turnstile.clmf-ts-flexible {
  width: 100%;
}

/* Bloque de verificación: oculto hasta saber si el widget es visible */
#clmf-form .clmf-ts-pending ._form-label,
#clmf-form .clmf-ts-invisible ._form-label {
  display: none !important;
}

#clmf-form .clmf-ts-pending .clmf-turnstile {
  min-height: 0;
}

/* Widget invisible: fuera del flujo de la rejilla (sin hueco), pero presente para que Turnstile funcione */
#clmf-form .clmf-ts-element.clmf-ts-invisible {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}

/* Errores (estilo de los avisos de AC) */
#clmf-form input._has_error {
  border-color: #f37c7b !important;
}

#clmf-form ._error {
  display: block;
  margin-top: 6px;
}

#clmf-form ._error-inner,
#clmf-form .clmf-form-error {
  padding: 8px 12px;
  background: #ffdddd;
  border-radius: 4px;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

#clmf-form .clmf-form-error[hidden] {
  display: none !important;
}

#clmf-form .sms_consent_checkbox + ._error {
  margin-top: -4px;
}

/* Enviando */
#clmf-form ._submit.processing {
  cursor: wait !important;
  opacity: 0.75;
}

/* Aviso solo para administradores */
.clmf-admin-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 4px solid #d63638;
  background: #fff4f4;
  color: #1f1d1d;
  font-size: 14px;
  line-height: 1.4;
}