/* Bundle de CSS de formulários — carregado de forma NÃO-bloqueante (async) pelo
   base.html (preload+swap). São ~21KB que não fazem parte da primeira dobra:
   - _ds-forms.css   → biblioteca de campos próprios (.ip-field/.ip-select/...)
   - _ds-hsforms.css → estilo dos formulários nativos do HubSpot (.hs-form),
                       ou seja, os do editor LEGADO, que injetam markup na página
   - _ds-hsforms-v4.css → enquadramento dos formulários do editor NOVO, que vêm
                       dentro de iframe (só contêiner; o interior não é alcançável)
   Os forms ficam abaixo da dobra (cta-form/consult-form) e em popups, e o JS
   ainda carrega o HubSpot form sob demanda — então um pequeno atraso aqui não
   afeta o que o usuário vê no carregamento. Usa as custom properties (--ip-*,
   --color-*) já definidas em :root pelo main.css. */

/* ============================================================
   Biblioteca de campos do Design System Inspirali Pós (CSS)
   Espelha as specs React do DS (components/forms/*.jsx):
   Input, Textarea, Select, Checkbox, Radio, Switch.
   Consome os tokens de campo de css/tokens/_components.css
   (--input-*) e os semânticos (--color-*). Use as classes em
   módulos custom, rich text ou no template de styleguide.

   Camada SEPARADA de css/elements/_forms.css, que estiliza o
   markup nativo do HubSpot (.hs-form/.hs-input). Sem !important.

   Nomenclatura: bloco .ip-field / .ip-select / .ip-checkbox /
   .ip-radio / .ip-switch, com elementos __ e estados is-*.
   ============================================================ */

/* ---------------- CAMPO BASE (Input / Textarea) ---------------- */
/* Wrapper em coluna: rótulo + controle + hint/erro. */
.ip-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ip-field__label {
  font-family: var(--ip-font-din);
  font-size: var(--ip-text-sm);
  font-weight: var(--ip-weight-medium);
  color: var(--color-text);
}

/* Caixa do controle — raio 13px e borda interna (inset). O foco e
   os estados são aplicados aqui para envolver ícone + input. */
.ip-field__control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--input-bg);
  border-radius: var(--input-radius);
  box-shadow: var(--input-shadow);                 /* inset 0 0 0 1px --input-border */
  padding: var(--input-padding-y) var(--input-padding-x);
  transition: box-shadow 0.16s ease;
}

/* Foco em sage + anel 3px (espelha --input-shadow-focus). */
.ip-field__control:focus-within {
  box-shadow: var(--input-shadow-focus);
}

/* Erro — borda vermelha, mesmo no foco. */
.ip-field__control.is-error,
.ip-field__control.is-error:focus-within {
  box-shadow: inset 0 0 0 1px var(--input-border-error);
}

/* Desabilitado — fundo cinza gelo, opacidade reduzida. */
.ip-field__control.is-disabled {
  background: var(--input-bg-disabled);
  opacity: 0.7;
}

/* Ícone à esquerda. */
.ip-field__icon {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}

/* Entrada — transparente; a moldura vem de .ip-field__control. */
.ip-field__input,
.ip-field__textarea {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--input-font);
  font-size: var(--ip-text-base);
  color: var(--input-text);
}

.ip-field__input::placeholder,
.ip-field__textarea::placeholder {
  color: var(--input-placeholder);
}

.ip-field__input:disabled,
.ip-field__textarea:disabled {
  cursor: not-allowed;
}

.ip-field__textarea {
  resize: vertical;
  min-height: 2.5rem;
  line-height: 1.5;
}

/* Texto de apoio e mensagem de erro. */
.ip-field__hint,
.ip-field__error {
  font-family: var(--ip-font-din);
  font-size: var(--ip-text-sm);
}
.ip-field__hint  { color: var(--color-text-muted); }
.ip-field__error { color: var(--color-error); }

/* ---------------- SELECT ---------------- */
/* Reaproveita a moldura do campo; adiciona chevron e remove a
   aparência nativa. A própria caixa é .ip-field__control. */
.ip-select__control {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--input-bg);
  border-radius: var(--input-radius);
  box-shadow: var(--input-shadow);
  transition: box-shadow 0.16s ease;
}
.ip-select__control:focus-within { box-shadow: var(--input-shadow-focus); }
.ip-select__control.is-error,
.ip-select__control.is-error:focus-within { box-shadow: inset 0 0 0 1px var(--input-border-error); }
.ip-select__control.is-disabled { background: var(--input-bg-disabled); opacity: 0.7; }

.ip-select__field {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: var(--input-padding-y) var(--input-padding-x);
  padding-right: 2.5rem;
  font-family: var(--input-font);
  font-size: var(--ip-text-base);
  color: var(--input-text);
  cursor: pointer;
}
.ip-select__field:disabled { cursor: not-allowed; }

/* Seta ▾ posicionada à direita, sem capturar cliques. */
.ip-select__chevron {
  position: absolute;
  right: 1rem;
  pointer-events: none;
  color: var(--color-text-muted);
}

/* ---------------- CHECKBOX / RADIO ---------------- */
/* Rótulo clicável com controle custom 22px; input nativo escondido. */
.ip-checkbox,
.ip-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-family: var(--ip-font-din);
  font-size: var(--ip-text-base);
  color: var(--color-text);
}

.ip-checkbox__box,
.ip-radio__box {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--input-bg);
  box-shadow: inset 0 0 0 1.5px var(--input-border);
  color: var(--ip-white);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.ip-checkbox__box { border-radius: var(--ip-radius-xs); }
.ip-radio__box    { border-radius: var(--ip-radius-full); }

/* Glifo (✓) do checkbox e ponto do radio, ocultos por padrão. */
.ip-checkbox__box::after {
  content: "✓";
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.ip-radio__box::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--ip-radius-full);
  background: var(--ip-white);
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* Input nativo escondido, mas acessível. */
.ip-checkbox__input,
.ip-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Marcado — tinta da marca. */
.ip-checkbox__input:checked ~ .ip-checkbox__box,
.ip-radio__input:checked ~ .ip-radio__box {
  background: var(--color-primary);
  box-shadow: none;
}
.ip-checkbox__input:checked ~ .ip-checkbox__box::after,
.ip-radio__input:checked ~ .ip-radio__box::after {
  opacity: 1;
}

/* Foco visível — anel sage. */
.ip-checkbox__input:focus-visible ~ .ip-checkbox__box,
.ip-radio__input:focus-visible ~ .ip-radio__box {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Desabilitado. */
.ip-checkbox.is-disabled,
.ip-radio.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------------- SWITCH ---------------- */
/* Interruptor on/off: trilho 46×26, botão deslizante 20px. */
.ip-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-family: var(--ip-font-din);
  font-size: var(--ip-text-base);
  color: var(--color-text);
}

.ip-switch__track {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--ip-radius-full);
  background: var(--ip-neutral-300);
  transition: background 0.18s ease;
}

.ip-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--ip-radius-full);
  background: var(--ip-white);
  box-shadow: var(--ip-shadow-sm);
  transition: left 0.18s ease;
}

.ip-switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Ligado — tinta da marca + botão à direita. */
.ip-switch__input:checked ~ .ip-switch__track { background: var(--color-primary); }
.ip-switch__input:checked ~ .ip-switch__track .ip-switch__thumb { left: 23px; }

.ip-switch__input:focus-visible ~ .ip-switch__track {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.ip-switch.is-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ============================================================
   HELPERS DO STYLEGUIDE (padrões compostos do .html)
   Painel de busca ajax e indicador de etapas (multistep).
   ============================================================ */

/* ---------------- BUSCA AJAX ---------------- */
.ip-search { position: relative; }

.ip-search-results {
  margin-top: 8px;
  background: var(--ip-white);
  border-radius: var(--ip-radius-md);
  box-shadow: var(--ip-shadow-lg);
  border: 1px solid var(--color-border-subtle);
  overflow: hidden;
}

.ip-search-results__loading,
.ip-search-results__empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  font-family: var(--ip-font-din);
  font-size: var(--ip-text-sm);
  color: var(--color-text-muted);
}

.ip-search-results__spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ip-neutral-200);
  border-top-color: var(--color-secondary);
  display: inline-block;
  animation: ip-spin 0.7s linear infinite;
}

.ip-search-results__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  text-decoration: none;
  transition: background 0.12s ease;
}
.ip-search-results__item + .ip-search-results__item {
  border-top: 1px solid var(--color-border-subtle);
}
.ip-search-results__item:hover { background: var(--ip-neutral-50); }

.ip-search-results__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ip-search-results__title {
  flex: 1;
  font-family: var(--ip-font-din);
  font-size: var(--ip-text-base);
  color: var(--color-text);
  font-weight: var(--ip-weight-medium);
}

.ip-search-results__tag {
  font-family: var(--ip-font-din);
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ---------------- INDICADOR DE ETAPAS (multistep) ---------------- */
.ip-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.ip-steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ip-steps__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ip-font-din);
  font-size: 14px;
  font-weight: 700;
  background: var(--ip-neutral-200);
  color: var(--color-text-muted);
  transition: background 0.2s ease, color 0.2s ease;
}
.ip-steps__item.is-current .ip-steps__num { background: var(--color-primary); color: #fff; }
.ip-steps__item.is-done    .ip-steps__num { background: var(--color-success); color: #fff; }

.ip-steps__label {
  font-family: var(--ip-font-din);
  font-size: 14px;
  color: var(--color-text-muted);
}
.ip-steps__item.is-current .ip-steps__label { font-weight: 700; color: var(--color-text); }

.ip-steps__bar {
  flex: 1;
  height: 2px;
  background: var(--color-border);
}
.ip-steps__bar.is-done { background: var(--color-success); }

@keyframes ip-spin { to { transform: rotate(360deg); } }
/* ============================================================
   Mapeamento dos formulários NATIVOS do HubSpot → tokens do DS
   Inspirali Pós.

   Estiliza o markup que o HubSpot gera sozinho (.hs-form, .hs-input,
   .hs-button, .hs-error-msg…), aplicando o visual do Design System
   (mesmos tokens --input-* / --color-* da biblioteca .ip-*).
   Cobre: forms embedados (módulo "Form") E o form interno dos
   pop-ups / lead flows — desde que NÃO sejam renderizados em iframe.

   ⚠️ LIMITE DO IFRAME: se o form/pop-up for embedado via iframe
   (padrão de muitos forms novos do HubSpot), o CSS do tema NÃO entra
   no iframe — nesse caso, mude o embed para "non-iframe / adiciono
   meus próprios estilos" ou ajuste o visual no editor do form.

   Carregado depois de _ds-forms.css em main.css. Usa seletores com
   especificidade de classe (.hs-form …) para vencer os defaults de
   css/elements/_forms.css sem !important.
   ============================================================ */

/* ---------------- RÓTULOS / HELP / OBRIGATÓRIO ---------------- */
.hs-form .hs-form-field > label {
  font-family: var(--ip-font-din);
  font-size: var(--ip-text-sm);
  font-weight: var(--ip-weight-medium);
  color: var(--color-text);
  margin-bottom: 0.375rem;
}

.hs-form .hs-field-desc {
  font-family: var(--ip-font-din);
  font-size: var(--ip-text-sm);
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}

.hs-form .hs-form-required { color: var(--color-error); }

/* ---------------- CAMPOS DE TEXTO / SELECT / TEXTAREA ---------------- */
/* Aplica a moldura do DS (raio 13px, borda inset, padding tokens) só
   aos campos de entrada — exclui checkbox/radio/botões. */
/* Inputs de texto, select e textarea — corpo do campo (DS).
   Tipos enumerados (especificidade baixa, 0,3,1) para que a regra da
   setinha do select (.hs-form select.hs-input) vença em padding-right e
   background-image. Altura garantida por padding + min-height + box-sizing
   (o "campo fino" acontecia quando só o padding do _forms.css base valia).
   Usa background-COLOR (não o shorthand `background`, que zeraria a setinha). */
.hs-form input.hs-input[type="text"],
.hs-form input.hs-input[type="email"],
.hs-form input.hs-input[type="tel"],
.hs-form input.hs-input[type="number"],
.hs-form input.hs-input[type="password"],
.hs-form input.hs-input[type="search"],
.hs-form input.hs-input[type="url"],
.hs-form input.hs-input[type="date"],
.hs-form input.hs-input[type="datetime-local"],
.hs-form input.hs-input:not([type]),
.hs-form select.hs-input,
.hs-form textarea.hs-input {
  width: 100%;
  /* box-sizing/min-height/padding com !important: o HubSpot injeta
     `.hs-custom-style ... input { min-height:27px; padding:0 15px }` com
     especificidade (0,7,2) > a nossa — sem !important o campo fica achatado. */
  box-sizing: border-box !important;
  min-height: 48px !important;
  line-height: 1.5;
  background-color: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding-y) var(--input-padding-x) !important;
  font-family: var(--input-font);
  font-size: var(--ip-text-base);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.hs-form .hs-input::placeholder,
.hs-form textarea.hs-input::placeholder { color: var(--input-placeholder); }

.hs-form textarea.hs-input { resize: vertical; min-height: 96px; }

/* Foco — borda sage + anel 3px (espelha --input-shadow-focus). */
.hs-form input.hs-input[type="text"]:focus,
.hs-form input.hs-input[type="email"]:focus,
.hs-form input.hs-input[type="tel"]:focus,
.hs-form input.hs-input[type="number"]:focus,
.hs-form input.hs-input[type="password"]:focus,
.hs-form input.hs-input[type="search"]:focus,
.hs-form input.hs-input[type="url"]:focus,
.hs-form input.hs-input[type="date"]:focus,
.hs-form input.hs-input[type="datetime-local"]:focus,
.hs-form input.hs-input:not([type]):focus,
.hs-form select.hs-input:focus,
.hs-form textarea.hs-input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  /* O anel externo tem que ser um traço SÓLIDO de 2px: o halo translúcido
     sozinho não chega perto de 3:1 e a troca de border-color é só 1px
     (INS-044). Mantido em :focus (e não :focus-visible) porque em <select>
     o :focus-visible não dispara no clique em parte dos navegadores. */
  box-shadow: 0 0 0 2px var(--focus-ring-on-light), 0 0 0 5px var(--input-ring-focus);
}

/* Erro — borda vermelha (HubSpot adiciona .invalid.error no campo). */
.hs-form .hs-input.invalid.error,
.hs-form .hs-input.invalid.error:focus {
  border-color: var(--input-border-error);
  box-shadow: none;
}

/* Select nativo — seta personalizada do DS. */
.hs-form select.hs-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%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' fill='none' stroke='%23707072' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* ---------------- CHECKBOX / RADIO ---------------- */
/* O DOM nativo do HubSpot não tem markup p/ o controle custom 22px,
   então tingimos o controle nativo na tinta da marca (--color-primary)
   — abordagem robusta p/ o DOM gerado. Mesma estratégia de _forms.css. */
.hs-form .inputs-list { margin: 0; padding: 0; list-style: none; }
.hs-form .inputs-list > li { margin: 0.5rem 0; }

.hs-form .hs-form-checkbox-display,
.hs-form .hs-form-radio-display,
.hs-form .hs-form-booleancheckbox-display {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-family: var(--ip-font-din);
  font-size: var(--ip-text-base);
  color: var(--color-text);
  cursor: pointer;
}

.hs-form input[type="checkbox"].hs-input,
.hs-form input[type="radio"].hs-input {
  accent-color: var(--color-primary);
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

.hs-form input[type="checkbox"].hs-input:focus-visible,
.hs-form input[type="radio"].hs-input:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* WCAG 2.5.8 (AA) pede alvo de 24x24. Medido no popup da home em 390px:
   20x20, e um caso de 13x20 — o flex do container espremia a caixa.
   `min-*` junto com `width/height` porque so o width nao segura o encolhimento.
   Escopado em `pointer: coarse`: no desktop o ponteiro e fino e ampliar o
   controle so empurraria o layout do formulario. */
@media (pointer: coarse) {
  .hs-form input[type="checkbox"].hs-input,
  .hs-form input[type="radio"].hs-input {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
  }
}

/* ---------------- MENSAGENS DE ERRO ---------------- */
.hs-form .hs-error-msgs { margin: 0.375rem 0 0; padding: 0; list-style: none; }
.hs-form .hs-error-msg,
.hs-form label.hs-error-msg {
  font-family: var(--ip-font-din);
  font-size: var(--ip-text-sm);
  color: var(--color-error);
  margin: 0;
}

/* ---------------- TELEFONE INTERNACIONAL ----------------
   Prefixo de país no campo de telefone (ver js/phone-intl.js).

   Segue o padrão do DS (.ip-field__control + .ip-field__icon): o prefixo é um
   ADORNO DENTRO da moldura do campo, não uma segunda caixa colada ao lado —
   como o input muda de fundo por contexto (branco no hero claro, cinza no
   cartão), duas caixas com estilos próprios nunca casariam.

   Por isso o invólucro é transparente e a moldura continua sendo o próprio
   input. Duas coisas o JS resolve porque o CSS não alcança: o padding-left
   (varia entre "+1" e "+351") e a COR do texto do prefixo, copiada da cor
   computada do input — cada contexto sobrescreve a cor do campo com uma
   especificidade diferente, e no hero de curso o prefixo saía com a mesma cor
   do fundo, invisível. */
.ip-telint {
  position: relative;
  display: block;
  width: 100%;
}

/* GUARDA DO [hidden] — não remova.
   Todo elemento deste componente que o JS esconde com o atributo [hidden]
   também declara `display` (flex/grid), e `display` VENCE o [hidden] do
   navegador: o elemento fica marcado como escondido e continua na tela.
   Aconteceu três vezes aqui — no aviso da newsletter (INS-036), nas opções da
   lista e no painel inteiro, que abria sozinho ao carregar a página. Esta
   regra cobre o componente todo, inclusive o que vier depois. */
.ip-telint [hidden],
.ip-telint__panel[hidden],
.ip-telint__panel [hidden] { display: none !important; }

/* Gatilho: o prefixo clicável, sobreposto na área de padding do campo. */
.ip-telint__toggle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0 0.625rem 0 var(--input-padding-x);
  border: none;
  border-right: 1px solid var(--input-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font-family: var(--input-font);
  font-size: var(--ip-text-base);
  font-weight: var(--ip-weight-regular);
  line-height: 1;
  white-space: nowrap;
  /* o tema dá min-height 44px e sombra a todo <button>; aqui o alvo tátil vem
     da altura do próprio campo (min-height 48px), então zeramos. */
  min-height: 0;
}

.ip-telint__toggle:hover,
.ip-telint__toggle:focus,
.ip-telint__toggle:focus-visible { filter: none; }

.ip-telint__toggle:focus-visible {
  outline: none;
  border-radius: var(--input-radius) 0 0 var(--input-radius);
  box-shadow: var(--focus-shadow-on-light);
}

/* Sem `color` aqui de propósito: quem define é o JS, copiando a cor computada
   do input (ver sincroniza()). Contextos escuros aplicam cor no span com
   especificidade maior que a nossa, e o DDI saía com a MESMA cor do fundo —
   invisível, enquanto a bandeira continuava aparecendo por ser emoji. */
.ip-telint__valor { display: inline-flex; align-items: center; gap: 0.375rem; }
.ip-telint__caret { font-size: 0.7em; opacity: 0.65; }

/* ---- painel de busca ---- */
/* O painel é filho do <body> (ver montar()), não do formulário. Por isso
   position: fixed e coordenadas vindas do JS — e por isso cada propriedade de
   texto é DECLARADA aqui em vez de herdada: fora do form não há nada para
   herdar, e dentro dele havia coisa demais (a cor do hero escuro deixava as
   opções cinza-gelo sobre painel branco, e a regra global de input esmagava a
   busca para 27px). */
.ip-telint__panel {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 20rem;
  max-width: calc(100vw - 16px);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--input-radius);
  box-shadow: var(--ip-shadow-lg);
  overflow: hidden;
}

.ip-telint__search {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: calc(100% - 1rem);
  margin: 0.5rem;
  padding: 0.5rem 0.75rem;
  min-height: 40px;
  line-height: 1.4;
  border: 1px solid var(--input-border);
  border-radius: var(--ip-radius-sm);
  background: var(--input-bg);
  color: var(--input-text);
  font-family: var(--input-font);
  font-size: var(--ip-text-base);   /* < 16px faz o iOS dar zoom ao focar */
}

.ip-telint__search:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow-on-light);
}

.ip-telint__list {
  flex: 1 1 auto;
  margin: 0;
  padding: 0 0 0.25rem;
  list-style: none;
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;   /* rolar a lista não rola a página atrás */
}

.ip-telint__opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;               /* alvo tátil */
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  font-family: var(--input-font);
  font-size: var(--ip-text-base);
  font-weight: var(--ip-weight-regular);
  line-height: 1.3;
  color: var(--color-text);
}

.ip-telint__opt:hover { background: var(--color-surface-subtle); }

.ip-telint__opt:focus-visible {
  outline: none;
  background: var(--color-surface-subtle);
  box-shadow: inset 0 0 0 2px var(--focus-ring-on-light);
}

.ip-telint__opt[aria-selected="true"] { font-weight: var(--ip-weight-medium); }

.ip-telint__opt-nome { flex: 1 1 auto; min-width: 0; }
.ip-telint__opt-ddi { flex: 0 0 auto; color: var(--color-text-muted); }

.ip-telint__vazio {
  margin: 0;
  padding: 0.75rem;
  font-family: var(--input-font);
  font-size: var(--ip-text-sm);
  color: var(--color-text-muted);
}

/* ---------------- FUNDO DO FORMULÁRIO ----------------
   O boilerplate do tema pinta o fundo com um seletor de ELEMENTO:

     .form-title, .submitted-message, form { background-color: <config do tema>; }

   O valor vem de Configurações do tema → Forms → Form → Background. Como o
   seletor é `form` nu, ele acerta QUALQUER formulário da página — inclusive os
   do HubSpot, que no DS sempre ficam dentro de um cartão que já tem o próprio
   fundo. Com uma cor salva no portal (estava #818875, o sage), o formulário
   aparecia como um bloco verde dentro do cartão branco.

   Aqui o formulário do HubSpot fica transparente e herda o fundo do cartão que
   o embrulha. `.hs-form` (0,1,0) vence `form` (0,0,1) por especificidade, então
   não precisa de !important e a configuração do tema segue valendo para
   formulários fora do DS. Se algum dia um form precisar de fundo próprio, o
   lugar é o contêiner (.ip-hsform / o cartão), não o <form>. */
.hs-form {
  background-color: transparent;
}

/* ---------------- BOTÃO DE ENVIO (pílula do DS) ---------------- */
.hs-form .hs-button,
.hs-form input[type="submit"].hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-cta);
  color: var(--ip-neutral-100);
  border: none;
  border-radius: var(--ip-radius-full);
  font-family: var(--ip-font-din);
  font-weight: var(--ip-weight-medium);
  font-size: var(--ip-text-base);
  line-height: 1;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
/* O gradiente de hover CLAREIA (stop de 5% em #6b6b6b), então o texto precisa
   subir junto — sem isto, neutral-100 sobre #6b6b6b dá 4.27:1 (INS-049). */
.hs-form .hs-button:hover,
.hs-form input[type="submit"].hs-button:hover {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text-hover);
}
.hs-form .hs-button:focus-visible,
.hs-form input[type="submit"].hs-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--input-ring-focus);
}

/* ---------------- GDPR / consentimento ---------------- */
.hs-form .legal-consent-container {
  font-family: var(--ip-font-din);
  font-size: var(--ip-text-sm);
  color: var(--color-text-body);
}

/* ============================================================
   CHROME DO POP-UP (lead flows legados)
   Best-effort: pop-ups renderizados via iframe NÃO são alcançados.
   Para os lead flows não-iframe, alinha o cartão e o botão ao DS.
   ============================================================ */
.leadinModal .leadinModal-content,
.leadin-content {
  border-radius: var(--ip-radius-xl);
  box-shadow: var(--ip-shadow-lg);
  font-family: var(--ip-font-din);
}

.leadinModal .leadin-button-thin,
.leadinModal button[type="submit"] {
  background: var(--gradient-cta);
  color: var(--ip-neutral-100);
  border: none;
  border-radius: var(--ip-radius-full);
  font-family: var(--ip-font-din);
  font-weight: var(--ip-weight-medium);
}

/* ============================================================
   FORM EMBEDADO DENTRO DO POPUP .ip-modal (módulos hero, courses,
   modalities, routine). Garante o visual do DS mesmo quando:
   (a) o popup vive numa seção escura (.ip-section-ink) — o texto
       claro da seção vazaria pros rótulos do form; e/ou
   (b) o form tem um "tema/estilo" configurado no editor de forms do
       HubSpot (fundo colorido, inputs arredondados).
   Usa !important pontual porque o markup é gerado pelo HubSpot e pode
   trazer estilo próprio (style block escopado por #hsForm_<guid>).
   ============================================================ */

/* Neutraliza o fundo do "tema" do form → mostra o diálogo branco. */
.ip-modal .hs-form,
.ip-modal .hs-form fieldset,
.ip-modal .hs-form .hs-richtext,
.ip-modal .hs-form .hs-form-field {
  background: transparent !important;
  max-width: none;
}

/* Rótulos e controles legíveis sobre o diálogo branco
   (vence o color:inverse de .ip-section-ink span/label). */
.ip-modal .hs-form .hs-form-field > label,
.ip-modal .hs-form .hs-form-field > label span,
.ip-modal .hs-form .hs-form-checkbox-display,
.ip-modal .hs-form .hs-form-radio-display,
.ip-modal .hs-form .hs-form-booleancheckbox-display {
  color: var(--color-text) !important;
}

/* Texto de apoio / consentimento — cinza legível, não branco. */
.ip-modal .hs-form .hs-field-desc,
.ip-modal .hs-form .hs-richtext,
.ip-modal .hs-form .hs-richtext p,
.ip-modal .hs-form .legal-consent-container,
.ip-modal .hs-form .legal-consent-container p {
  color: var(--color-text-muted) !important;
}

/* Inputs no raio do DS (13px), não pílula, fundo branco. */
.ip-modal .hs-form .hs-input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  border-radius: var(--input-radius) !important;
  background-color: var(--input-bg) !important; /* não zera a setinha do select */
  color: var(--input-text) !important;
}

/* Título do form (e cabeçalhos) — escuro e legível sobre o diálogo branco,
   independentemente da seção (escura/clara) em que o popup do módulo vive.
   Era a causa do "título branco num popup e escuro no outro". */
.ip-modal .hs-form .hs-form-title,
.ip-modal .hs-form .hs-richtext h1,
.ip-modal .hs-form .hs-richtext h2,
.ip-modal .hs-form .hs-richtext h3,
.ip-modal .hs-form h1,
.ip-modal .hs-form h2,
.ip-modal .hs-form h3,
.ip-modal .hs-form h4 {
  color: var(--color-text) !important;
}

/* CTA de envio do popup — configurável pelo módulo:
   - Cor: via CSS var --ds-form-btn-bg (setada inline no .ip-modal pelo módulo).
     Sem valor → cai no gradiente padrão do DS.
   - Largura total: padrão (espelha o form "Em uso"). O módulo desliga adicionando
     a classe .ip-modal--btn-auto (toggle "Botão em largura total" = off). */
.ip-modal .hs-form .hs-button,
.ip-modal .hs-form input[type="submit"].hs-button {
  width: 100%;
  background: var(--ds-form-btn-bg, var(--gradient-cta));
}
.ip-modal .hs-form .hs-button:hover,
.ip-modal .hs-form input[type="submit"].hs-button:hover {
  background: var(--ds-form-btn-bg, var(--btn-primary-bg-hover));
  /* o texto do hover vem da regra base .hs-form .hs-button:hover */
}
.ip-modal--btn-auto .hs-form .hs-button,
.ip-modal--btn-auto .hs-form input[type="submit"].hs-button {
  width: auto;
}

/* ============================================================
   FORMULÁRIOS NATIVOS HUBSPOT MULTI-PAGE
   Estiliza a barra de progresso, páginas e botões “Próximo/Voltar”
   gerados pelo HubSpot quando um formulário é dividido em etapas.
   ============================================================ */

/* Barra de progresso */
.hs-form-progress {
  display: flex;
  align-items: center;
  gap: var(--ip-space-2);
  margin: 0 0 var(--ip-space-6);
  padding: 0;
  list-style: none;
  font-family: var(--ip-font-din);
}

.hs-form-progress-step {
  display: inline-flex;
  align-items: center;
  gap: var(--ip-space-2);
  font-size: var(--ip-text-sm);
  font-weight: var(--ip-weight-medium);
  color: var(--color-text-muted);
}

.hs-form-progress-step::after {
  content: "";
  display: block;
  width: 1.25rem;
  height: 2px;
  background: var(--color-border);
  border-radius: var(--ip-radius-full);
}

.hs-form-progress-step:last-child::after { display: none; }

.hs-form-progress-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ip-radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-weight: var(--ip-weight-bold);
  font-size: var(--ip-text-sm);
}

.hs-form-progress-step-active {
  color: var(--color-text);
}

.hs-form-progress-step-active .hs-form-progress-step-number {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

/* Páginas do formulário (só a ativa aparece) */
.hs-form-page { display: none; }
.hs-form-page.active { display: block; }

/* Container de botões multi-page */
.hs-form .hs-submit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ip-space-3);
  margin-top: var(--ip-space-6);
}

/* Botões “Voltar/Anterior” — secundário */
.hs-form .hs-button.secondary,
.hs-form input[type="submit"].hs-button.secondary,
.hs-form .hs-button[name="prevButton"],
.hs-form input[type="submit"].hs-button[name="prevButton"] {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.hs-form .hs-button.secondary:hover,
.hs-form input[type="submit"].hs-button.secondary:hover,
.hs-form .hs-button[name="prevButton"]:hover,
.hs-form input[type="submit"].hs-button[name="prevButton"]:hover {
  background: var(--color-surface-sunken);
}

/* Botões “Próximo/Enviar” — primário */
.hs-form .hs-button.primary,
.hs-form input[type="submit"].hs-button.primary,
.hs-form .hs-button[name="nextButton"],
.hs-form input[type="submit"].hs-button[name="nextButton"] {
  background: var(--gradient-cta);
  color: var(--ip-neutral-100);
  border: none;
}

/* Override para popups: garante cores legíveis sobre fundo branco do diálogo */
.ip-modal .hs-form-progress-step { color: var(--color-text-muted) !important; }
.ip-modal .hs-form-progress-step-active { color: var(--color-text) !important; }
.ip-modal .hs-form-progress-step-active .hs-form-progress-step-number {
  background: var(--color-primary) !important;
  color: var(--color-primary-contrast) !important;
}
.ip-modal .hs-form .hs-button.secondary,
.ip-modal .hs-form input[type="submit"].hs-button.secondary,
.ip-modal .hs-form .hs-button[name="prevButton"],
.ip-modal .hs-form input[type="submit"].hs-button[name="prevButton"] {
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
.ip-modal .hs-form .hs-submit { justify-content: space-between; }
/* ============================================================
   FORMULÁRIOS DO EDITOR NOVO DA HUBSPOT — enquadramento
   Irmão de _ds-hsforms.css, que segue cuidando dos LEGADOS
   (.hs-form/.hs-input, markup injetado direto na página).

   LEIA ANTES DE MEXER — o que este arquivo pode e o que não pode:

   O formulário do editor novo NÃO é renderizado na página. Ele vem
   dentro de um <iframe> cross-origin:

     .ip-hsform                    ← contêiner do tema (nosso)
       └ .hs-form-frame            ← wrapper criado pela HubSpot (nosso p/ estilizar,
           └ iframe                   dela p/ dimensionar: ela seta height inline)
               └ hsfc-Form ...     ← DOM do formulário, FORA do nosso alcance

   Então:
   · Estilizar .hsfc-* daqui NÃO funciona. Foi medido: uma folha na página
     com .hsfc-TextInput/.hsfc-FieldLabel/.hsfc-Button não altera nada do
     computed style dentro do iframe, e um token em :root não atravessa.
     O bundle do embed até tem um extrator de estilos da página
     (SEND_EXTRACTED_STYLES / RECEIVE_FILTERED_STYLESHEETS), mas ele é
     instanciado e NUNCA invocado — é código morto compartilhado com o app
     de CTAs. Não escreva regra .hsfc-* aqui esperando efeito.
   · A APARÊNCIA INTERNA (fonte, cor, campo, botão, etapas do multistep)
     vem das configurações de formulário: no tema, em fields.json →
     grupo `forms` (Configurações do tema → Formulários), e por página em
     Estilos → Módulo / Campos / Botão no editor da página.
   · O que sobra para o CSS, e é o que está aqui: o ENQUADRAMENTO —
     largura, respiro, o cartão em volta e o estado de carregamento.
   ============================================================ */

/* O contêiner do tema recebe o wrapper da HubSpot. Sem largura explícita ele
   colapsa em cenários de flex/grid, e o formulário some do cartão. */
.ip-hsform {
  width: 100%;
  min-width: 0;
}

/* Enquanto o iframe não reporta a altura, o wrapper tem 0 e o cartão aparece
   VAZIO — só título e divisória. É o que se vê hoje na /guia-de-a-z nos
   primeiros instantes. O min-height reserva o espaço e evita tanto o "cartão
   oco" quanto o pulo de layout quando a altura real chega.
   min-height (não height): a HubSpot seta a altura real inline no wrapper e
   ela precisa poder crescer, inclusive ao trocar de etapa no multistep. */
   A reserva usa min() em vez de @media: encolhe sozinha em tela curta e
   mantém o arquivo com UM seletor por regra. */
.ip-hsform .hs-form-frame {
  width: 100%;
  min-height: min(320px, 60vh);
}

/* O iframe vem com width/height 100% inline. Garantir display:block tira o
   respiro fantasma de 4px que elementos inline deixam embaixo, que no cartão
   branco aparecia como uma faixa. */
.ip-hsform .hs-form-frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* ---------------- Dentro do popup .ip-modal ----------------
   No popup o diálogo tem altura própria e rolagem; aqui o formulário deve
   ocupar a largura toda e não impor os 320px de reserva, senão o diálogo
   abre alto demais em telas curtas. */
.ip-modal .ip-hsform .hs-form-frame {
  min-height: 240px;
}

/* ---------------- Cartão de hero (conteúdo/material/evento) ----------------
   O .ip-conteudo-heroform é o cartão branco que embrulha o formulário no hero
   das páginas de conteúdo. Reserva um pouco mais, porque ali o formulário é o
   elemento principal do cartão. */
.ip-conteudo-heroform .ip-hsform .hs-form-frame {
  min-height: min(360px, 65vh);
}