/* =========================================================================
   Faz Franquia — formulários do RD Station

   O RD entrega o formulário com o CSS dele. Aqui ele é vestido com os campos
   do projeto: mesmo rótulo em caixa alta, mesma caixa clara de canto 2px,
   mesmo foco em ciano e o mesmo botão sólido.

   O `!important` aparece bastante de propósito: a folha do RD vem do CDN
   depois desta e usa seletores próprios. Onde não briga, não tem.

   Três tamanhos, pela classe do container: --padrao (igual ao projeto),
   --compacto e --grande. Muda a altura do campo, o corpo da letra e o vão.
   ========================================================================= */

.ff-rd{
  /* Tamanho padrão: os mesmos valores do formulário nativo do tema. */
  --rd-pad-y:14px;
  --rd-pad-x:15px;
  --rd-fonte:15px;
  --rd-rotulo:12px;
  --rd-gap:14px;
  --rd-btn-y:19px;
  --rd-btn-fonte:clamp(12px,1.15vw,14px);
}
.ff-rd--compacto{
  --rd-pad-y:10px;
  --rd-pad-x:12px;
  --rd-fonte:14px;
  --rd-rotulo:11px;
  --rd-gap:10px;
  --rd-btn-y:15px;
  --rd-btn-fonte:12px;
}
.ff-rd--grande{
  --rd-pad-y:18px;
  --rd-pad-x:18px;
  --rd-fonte:17px;
  --rd-rotulo:13px;
  --rd-gap:18px;
  --rd-btn-y:23px;
  --rd-btn-fonte:15px;
}

/* Enquanto o script do RD não desenha o formulário, o espaço fica reservado
   — sem isso a página pula quando ele chega. */
.ff-rd:empty{min-height:420px;}

/* ---------------- Estrutura e espaçamento ----------------
   Conferido contra a marcação que o RD entrega de verdade:

     div.rd-form > form
       > input[type=hidden] × 9
       > div.bricks-form__fieldset        flex-wrap, mais largo que o form
         > div.bricks-form__field × N     width:50%, padding lateral de 5px
           > label.bricks-form__label
           > input.bricks-form__input     (ou select, ou div.phone-input-group)
       > div.bricks-form__submit
         > button.rd-button
       > div (dois campos-isca do anti-spam)

   Ou seja: o RD já faz duas colunas. A versão anterior montava uma grade por
   cima e brigava com o width:50% dele — o campo virava metade da metade. Aqui
   o layout dele fica de pé e só os espaçamentos mudam para os do projeto. */
.ff-rd{--rd-gutter:7px;}
.ff-rd--compacto{--rd-gutter:5px;}
.ff-rd--grande{--rd-gutter:9px;}

.ff-rd .bricks--component-embeddable-form,
.ff-rd .rd-form,
.ff-rd .rd-section,
.ff-rd .rd-row,
.ff-rd .rd-column{background:transparent!important;box-shadow:none!important;border:0!important;max-width:none!important;padding:0!important;margin:0!important;width:100%!important;}
.ff-rd form{font-family:var(--f-body),system-ui,sans-serif;width:100%;}

/* A calha lateral sai do padding do campo; a régua negativa devolve a largura. */
.ff-rd .bricks-form__fieldset{
  display:flex!important;flex-wrap:wrap!important;align-items:flex-start;
  width:auto!important;
  margin:0 calc(var(--rd-gutter) * -1)!important;
}
.ff-rd .bricks-form__field{
  box-sizing:border-box;
  flex:1 1 45%;min-width:min(200px,100%);width:auto!important;
  padding:0 var(--rd-gutter)!important;
  margin:0 0 var(--rd-gap)!important;
  display:flex;flex-direction:column;gap:7px;
}
/* Aceite e texto longo ocupam a linha inteira. */
.ff-rd .bricks-form__field--checkbox,
.ff-rd .bricks-form__field--textarea{flex-basis:100%;}
.ff-rd .bricks-form__field:has(textarea),
.ff-rd .bricks-form__field:has(input[type=checkbox]){flex-basis:100%;}

/* Os dois campos-isca do anti-spam do RD, que vêm visíveis. */
.ff-rd input[name="emP7yF13ld"],
.ff-rd input[name="sh0uldN07ch4ng3"]{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;padding:0!important;border:0!important;}
.ff-rd form>div:has(>input[name="emP7yF13ld"]){display:none!important;}

/* O RD às vezes traz um título dentro do formulário; a seção já tem o dela. */
.ff-rd .bricks-form__title,
.ff-rd form h1,.ff-rd form h2,.ff-rd form h3{display:none!important;}

/* ---------------- Campos ---------------- */
.ff-rd .bricks-form__label,
.ff-rd form label{
  display:block;margin:0!important;padding:0!important;
  font-family:var(--f-body),system-ui,sans-serif;
  font-size:var(--rd-rotulo)!important;font-weight:700!important;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2)!important;line-height:1.3;
}

.ff-rd form input[type=text],
.ff-rd form input[type=email],
.ff-rd form input[type=tel],
.ff-rd form input[type=number],
.ff-rd form input[type=url],
.ff-rd form select,
.ff-rd form textarea,
.ff-rd .bricks-form__input{
  width:100%!important;box-sizing:border-box;
  padding:var(--rd-pad-y) var(--rd-pad-x)!important;
  height:auto!important;min-height:0!important;
  border:1px solid var(--line-3)!important;border-radius:2px!important;
  background-color:#f7f9fb!important;
  font-family:var(--f-body),system-ui,sans-serif!important;
  font-size:var(--rd-fonte)!important;color:var(--text)!important;
  outline:none!important;box-shadow:none!important;
  transition:border-color .2s,background .2s;
}
.ff-rd form textarea{resize:vertical;line-height:1.55;min-height:110px!important;}
.ff-rd form input:focus,
.ff-rd form select:focus,
.ff-rd form textarea:focus,
.ff-rd .bricks-form__input:focus{border-color:var(--cyan)!important;background-color:#fff!important;}
.ff-rd form ::placeholder{color:var(--muted-3);opacity:1;}

/* Seta do select igual à dos campos do tema. O segundo seletor existe para
   vencer o .bricks-form__input do RD, que também carrega padding e fundo. */
.ff-rd form select,
.ff-rd form select.bricks-form__input{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:38px!important;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b7683' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 15px center!important;
}

/* O RD troca alguns selects pelo select2; deixa igual ao campo comum. */
.ff-rd .select2-container .select2-choice{
  height:auto!important;line-height:1.3!important;
  padding:var(--rd-pad-y) var(--rd-pad-x)!important;
  border:1px solid var(--line-3)!important;border-radius:2px!important;
  background-color:#f7f9fb!important;box-shadow:none!important;
  font-size:var(--rd-fonte)!important;color:var(--text)!important;
}
.ff-rd .select2-container-active .select2-choice{border-color:var(--cyan)!important;background-color:#fff!important;}
.ff-rd .select2-chosen{color:var(--text)!important;}
.ff-rd span.select2-arrow{background:transparent!important;border:0!important;}

/* Telefone com bandeira: a caixa toda tem que parecer um campo só. */
/* Telefone com bandeira: o RD envolve o input num div. Ele é só um invólucro —
   quem parece campo é o input de dentro. */
.ff-rd .phone-input-group{border:0!important;background:none!important;padding:0!important;width:100%!important;}
.ff-rd .phone-input-group>input{width:100%!important;}

/* ---------------- Consentimento ---------------- */
.ff-rd .bricks-form__field--checkbox,
.ff-rd .bricks-form__field .checkbox{display:flex;align-items:flex-start;gap:11px;}
.ff-rd form input[type=checkbox],
.ff-rd form input[type=radio]{
  flex:0 0 auto;width:18px!important;height:18px!important;min-height:0!important;
  margin:2px 0 0!important;padding:0!important;accent-color:var(--cyan);
  border-radius:2px!important;background:#fff!important;
}
.ff-rd .bricks-form__field--checkbox label,
.ff-rd form label.checkbox{
  font-size:12.5px!important;line-height:1.55!important;font-weight:500!important;
  letter-spacing:0!important;text-transform:none!important;color:var(--muted-2)!important;
}

/* ---------------- Botão ----------------
   O RD põe .bricks-form__submit no <div> que envolve o botão — e é esse div
   que ganhava o ciano e o padding, deixando a cor vazar por fora do controle.
   O invólucro é zerado; a cor vai só no botão. */
.ff-rd div.bricks-form__submit,
.ff-rd .bricks-form__field--submit{
  background:none!important;border:0!important;padding:0!important;
  margin:2px 0 0!important;box-shadow:none!important;width:100%!important;
  /* flex, e não block: o botão é inline-flex, e num bloco ele ganharia a
     entrelinha da caixa de linha — 18px de sobra embaixo, sem motivo. */
  display:flex!important;
}
.ff-rd form button,
.ff-rd form input[type=submit],
.ff-rd .rd-button,
.ff-rd form button.bricks-form__submit{
  width:100%!important;display:inline-flex!important;align-items:center;justify-content:center;gap:12px;
  font-family:var(--f-display)!important;font-weight:800!important;letter-spacing:.09em!important;
  text-transform:uppercase!important;font-size:var(--rd-btn-fonte)!important;line-height:normal!important;
  padding:var(--rd-btn-y) 32px!important;margin:0!important;height:auto!important;min-height:0!important;
  border:0!important;border-radius:2px!important;box-shadow:none!important;cursor:pointer;
  background-color:var(--cyan)!important;background-image:none!important;color:var(--ink)!important;
  transition:transform .2s ease,background-color .2s ease;
}
.ff-rd form button:hover,
.ff-rd form input[type=submit]:hover,
.ff-rd .rd-button:hover{background-color:var(--cyan-lt)!important;color:var(--ink)!important;transform:translateY(-2px);}

/* ---------------- Mensagens ---------------- */
.ff-rd .bricks-form__message,
.ff-rd .rd-error-message,
.ff-rd form .error{font-size:12.5px!important;line-height:1.5;color:#b32d2e!important;margin-top:4px;}
.ff-rd form input.error,
.ff-rd form select.error{border-color:#b32d2e!important;}
.ff-rd .rd-success-message,
.ff-rd .bricks-form__message--success{font-size:15px!important;color:var(--text)!important;}

/* ---------------- Sobre fundo escuro ---------------- */
/* No pop-up e nas páginas de investidor o cartão é claro, então o padrão acima
   já serve. Se o formulário cair sobre a seção escura, o rótulo precisa clarear. */
.ff-invform .ff-rd .bricks-form__label,
.ff-invform .ff-rd form label{color:rgba(255,255,255,.72)!important;}
.ff-invform .ff-invform__card .ff-rd .bricks-form__label,
.ff-invform .ff-invform__card .ff-rd form label{color:var(--muted-2)!important;}

/* ---------------- Celular ---------------- */
@media (max-width:600px){
  .ff-rd{--rd-btn-fonte:12px;}
  .ff-rd:empty{min-height:520px;}
}