/* Montserrat (400/500/600) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

/* =========================
   Variáveis (ajuste aqui!)
   ========================= */
:root {
  /* Padding do header */
  --header-padding-top: 50px;
  --header-padding-right: 0;
  --header-padding-bottom: 20px;
  --header-padding-left: 0;

  /* Espaçamento entre elementos no header */
  --header-gap: 16px;

  /* Tamanho da logo */
  --logo-max-w: 60px;    /* largura máxima */
  --logo-max-h: 60px;    /* altura máxima */

  /* Padding e margin da logo */
  --logo-padding-top: 0;
  --logo-padding-right: 0;
  --logo-padding-bottom: 0;
  --logo-padding-left: 0;

  --logo-margin-top: 0;
  --logo-margin-right: 0;
  --logo-margin-bottom: 0;
  --logo-margin-left: 0;

  /* ===== Tipografia do formulário (controle central) ===== */
  --form-font-size: 16px;                 /* escala global do formulário */
  --form-label-font: 'Montserrat', Arial, sans-serif;
  --form-label-weight: 600;               /* Medium (real) */

  /* >>> Controles separados por tipo de texto <<< */
  --form-label-size: 16px;                /* tamanho dos labels */
  --form-input-size: 14px;                /* inputs/select/textarea/botões */
  --form-help-size: 14px;                 /* descrições, requisitos de senha, erros */
  --form-consent-size: 12px;              /* textos de consentimento (GDPR) */
}

/* =========================
   Layout base (footer no fim)
   ========================= */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content-wrapper { flex: 1 0 auto; } /* empurra o footer para baixo */

/* =========================
   Header com Flexbox
   ========================= */
.custom-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--header-gap);
  padding: var(--header-padding-top) var(--header-padding-right)
           var(--header-padding-bottom) var(--header-padding-left);
}

/* =========================
   Logo
   ========================= */
.custom-header img.hs-logo,
.custom-header a img.hs-logo {
  max-width: var(--logo-max-w) !important;
  max-height: var(--logo-max-h) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;

  padding: var(--logo-padding-top) var(--logo-padding-right)
           var(--logo-padding-bottom) var(--logo-padding-left) !important;

  margin: var(--logo-margin-top) var(--logo-margin-right)
          var(--logo-margin-bottom) var(--logo-margin-left) !important;
}

/* =========================
   FOOTER (robusto, centrado e com padding)
   Suporta dois padrões de uso:
   - .custom-footer (templates locais)
   - .footer / .footer__container (global partial com DnD)
   ========================= */

/* Estilo base para ambos */
.custom-footer,
.footer {
  width: 100%;
  font-size: 14px;
  color: #15052b;
  padding: 40px 20px;           /* padding visível topo/baixo + laterais */
  box-sizing: border-box;
  margin-top: auto;             /* mantém no fim em páginas curtas */
  text-align: center;           /* fallback */
}

/* Centralização via flex no container do footer (global partial) */
.footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;          /* centraliza horizontalmente */
  justify-content: center;
  text-align: center !important;
  width: 100%;
}

/* Centralização via flex no container do footer (template local) */
.custom-footer .container {
  width: 100%;
  display: flex;
  justify-content: center;      /* independe de text-align */
  align-items: center;
}

/* HubSpot injeta wrappers .hs_cos_wrapper e rich_text.
   Forçamos bloco, 100% de largura e alinhamento central em todos os níveis. */
.custom-footer .hs_cos_wrapper,
.custom-footer .hs_cos_wrapper_type_rich_text,
.custom-footer .hs_cos_wrapper_type_rich_text *,
.footer__container .hs_cos_wrapper,
.footer__container .hs_cos_wrapper_type_rich_text,
.footer__container .hs_cos_wrapper_type_rich_text * {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Respiro interno do parágrafo do copyright */
.custom-footer p,
.footer p {
  padding: 10px 0 !important;
}

/* Links do footer */
.custom-footer a,
.footer a { color: inherit; text-decoration: underline; }
.custom-footer a:hover,
.footer a:hover { color: #000000; text-decoration: none; }

/* =========================
   Formulário com fundo, borda arredondada e sombra (ajustado)
   ========================= */
.form-container,
.hs-form,
.form-wrapper {
  background-color: #ffffff;            /* fundo */
  border-radius: 12px;                  /* cantos arredondados */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* sombra suave */
  padding: 40px;                         /* espaço interno aumentado */
  max-width: 800px;                      /* largura máxima aumentada */
  min-height: 400px;                     /* altura mínima para dar mais corpo */
  margin: 0 auto;                        /* centraliza horizontalmente */

  /* ===== Base tipográfica do formulário ===== */
  font-size: var(--form-font-size);
  line-height: 1.5;
}

/* =========================
   Tipografia ESPECÍFICA dos 3 rótulos
   (E-mail Corporativo, Senha, Confirmar Senha)
   ========================= */

/* Mira labels por atributo 'for' (cobre variações comuns do HubSpot; case-insensitive) */
.form-container label[for="email" i],
.form-container label[for*="email" i],
.form-container label[for="password" i],
.form-container label[for*="password" i],
.form-container label[for="password_confirm" i],
.form-container label[for*="confirm" i],
.hs-form       label[for="email" i],
.hs-form       label[for*="email" i],
.hs-form       label[for="password" i],
.hs-form       label[for*="password" i],
.hs-form       label[for="password_confirm" i],
.hs-form       label[for*="confirm" i],
.form-wrapper  label[for="email" i],
.form-wrapper  label[for*="email" i],
.form-wrapper  label[for="password" i],
.form-wrapper  label[for*="password" i],
.form-wrapper  label[for="password_confirm" i],
.form-wrapper  label[for*="confirm" i] {
  font-family: var(--form-label-font) !important;
  font-weight: var(--form-label-weight) !important; /* Medium 500 */
  font-size: var(--form-label-size) !important;     /* tamanho dos labels */
}

/* Alguns temas HubSpot colocam o texto da label dentro de <span> */
.form-container label[for*="email" i] span,
.form-container label[for*="password" i] span,
.form-container label[for*="confirm" i] span,
.hs-form       label[for*="email" i] span,
.hs-form       label[for*="password" i] span,
.hs-form       label[for*="confirm" i] span,
.form-wrapper  label[for*="email" i] span,
.form-wrapper  label[for*="password" i] span,
.form-wrapper  label[for*="confirm" i] span {
  font-family: var(--form-label-font) !important;
  font-weight: var(--form-label-weight) !important; /* Medium 500 */
  font-size: var(--form-label-size) !important;
}

/* =========================
   Tamanhos separados por tipo de conteúdo do formulário
   ========================= */

/* Inputs / Select / Textarea / Botões */
.form-container input,
.form-container select,
.form-container textarea,
.form-container button,
.hs-form input,
.hs-form select,
.hs-form textarea,
.hs-form button,
.form-wrapper input,
.form-wrapper select,
.form-wrapper textarea,
.form-wrapper button {
  font-size: var(--form-input-size) !important;
}

/* Placeholders (quando suportado) */
.form-container ::placeholder,
.hs-form ::placeholder,
.form-wrapper ::placeholder {
  font-size: var(--form-input-size);
}

/* Descrições, erros e requisitos de senha */
.form-container .hs-field-desc,
.form-container .hs-error-msg,
.form-container .password-requirements,
.hs-form .hs-field-desc,
.hs-form .hs-error-msg,
.hs-form .password-requirements,
.form-wrapper .hs-field-desc,
.form-wrapper .hs-error-msg,
.form-wrapper .password-requirements {
  font-size: var(--form-help-size) !important;
}

/* Consentimento (GDPR) – descrição e label do checkbox */
.form-container .legal-consent-container p,
.form-container .legal-consent-container label,
.hs-form .legal-consent-container p,
.hs-form .legal-consent-container label,
.form-wrapper .legal-consent-container p,
.form-wrapper .legal-consent-container label {
  font-size: var(--form-consent-size) !important;
}

/* =========================
   Responsividade
   ========================= */
@media (max-width: 600px) {
  :root {
    --logo-max-w: 160px;
    --logo-max-h: 50px;
    --header-gap: 12px;
    --header-padding-top: 42px;
    --header-padding-bottom: 16px;
  }

  .custom-footer,
  .footer { padding: 5px 5px; }

  .custom-footer p,
  .footer p { padding: 8px 0 !important; }

  .form-container,
  .hs-form,
  .form-wrapper {
    padding: 25px;       /* reduz no mobile */
    max-width: 100%;     /* ocupa mais espaço no mobile */
    min-height: auto;    /* deixa altura flexível no mobile */
  }
}
<!-- Personalização de textos do formulário (GDPR) -->
<script>
(function () {
  // <<< Edite o texto aqui >>>
  const TEXTS = {
    gdprDesc: "Para fornecer o conteúdo solicitado, precisamos armazenar e processar seus dados pessoais. Se você consentir com o armazenamento dos seus dados pessoais para essa finalidade, marque a caixa de seleção abaixo."
  };

  function setText(el, text) {
    if (!el) return;
    // Muitos temas envolvem o texto em <span>
    const span = el.querySelector && el.querySelector('span');
    if (span && span.childNodes.length === 1) {
      span.textContent = text;
    } else {
      el.textContent = text;
    }
  }

  function personalize() {
    // Alvo: descrição GDPR
    const gdprDescEls = document.querySelectorAll(
      '.legal-consent-container p, .hs_gdpr_text, .legal-consent-container .hs-richtext p'
    );
    if (gdprDescEls.length) setText(gdprDescEls[0], TEXTS.gdprDesc);
  }

  // Observa o DOM, pois o HubSpot injeta o formulário de forma assíncrona
  const observer = new MutationObserver(personalize);
  observer.observe(document.documentElement, { childList: true, subtree: true });

  // Garantias adicionais
  document.addEventListener('DOMContentLoaded', personalize);
  [150, 500, 1200].forEach(t => setTimeout(personalize, t));
})();
</script>
<!-- ============ JS: GDPR + HEADER DENTRO DO CARD (HubSpot/iframe safe) ============ -->
<script>
(function () {
  /* ---------- GDPR (mantido) ---------- */
  const TEXTS = {
    gdprDesc:
      "Para fornecer o conteúdo solicitado, precisamos armazenar e processar seus dados pessoais. Se você consentir com o armazenamento dos seus dados pessoais para essa finalidade, marque a caixa de seleção abaixo."
  };
  function setText(el, text) {
    if (!el) return;
    const span = el.querySelector && el.querySelector('span');
    if (span && span.childNodes.length === 1) span.textContent = text;
    else el.textContent = text;
  }
  function personalizeGDPR() {
    const els = document.querySelectorAll(
      '.legal-consent-container p, .hs_gdpr_text, .legal-consent-container .hs-richtext p'
    );
    if (els.length) setText(els[0], TEXTS.gdprDesc);
  }

  /* ---------- Header interno do formulário ---------- */
  const FALLBACK_LOGO_URL = 'URL-DA-SUA-LOGO.png';
  const TITLE_TEXT = 'Login'; // use "Boas vindas!" se preferir
  const SUBTITLE_TEXT = 'Digite suas credenciais para acessar.';

  function getLogoURL() {
    const headerLogo = document.querySelector('.custom-header img, .custom-header a img');
    return headerLogo ? headerLogo.src : FALLBACK_LOGO_URL;
  }

  function ensureFormCardAndHero() {
    const logoURL = getLogoURL();

    // 1) Descobrir a raiz do formulário (form direto ou iframe do HubSpot)
    const hsIframe = document.querySelector('iframe.hs-form-iframe, iframe[src*="hsforms"]');
    const hsForm   = document.querySelector('form.hs-form, .hs-form');
    let formRoot   = hsForm || (hsIframe ? hsIframe.parentElement : null);
    if (!formRoot) return;

    // 2) Envolver com um card se não existir
    let card = formRoot.closest('.form-container');
    if (!card) {
      card = document.createElement('div');
      card.className = 'form-container form-card';
      formRoot.parentNode.insertBefore(card, formRoot);
      card.appendChild(formRoot);
    }

    // 3) Injetar o header interno no topo do card (evita duplicar)
    if (!card.querySelector('.form-hero')) {
      const hero = document.createElement('div');
      hero.className = 'form-hero';
      hero.innerHTML = `
        <img class="form-hero__logo" src="${logoURL}" alt="Logo">
        <h1 class="form-hero__title">${TITLE_TEXT}</h1>
        <p class="form-hero__subtitle">${SUBTITLE_TEXT}</p>
      `;
      card.insertBefore(hero, card.firstChild);
    }

    // 4) Esconder títulos/descrições que ficaram fora do card (para ficar igual à referência)
    const strayTitles = Array.from(document.querySelectorAll('h1, h2'))
      .filter(el => !card.contains(el) && /login|boas\s*vindas/i.test(el.textContent));
    strayTitles.forEach(el => {
      const sib = el.nextElementSibling;
      el.style.display = 'none';
      if (sib && /configure|digite|senha|acessar/i.test(sib.textContent)) sib.style.display = 'none';
    });

    // 5) (Opcional) esconder o header externo para não duplicar logo no topo da página
    const externalHeader = document.querySelector('.custom-header');
    if (externalHeader) externalHeader.style.display = 'none';
  }

  // Rodar de forma resiliente ao carregamento assíncrono do HubSpot
  const run = () => { personalizeGDPR(); ensureFormCardAndHero(); };
  document.addEventListener('DOMContentLoaded', run);
  [150, 500, 1200, 2000].forEach(t => setTimeout(run, t));
  new MutationObserver(run).observe(document.documentElement, { childList: true, subtree: true });
})();
</script>

<!-- ============ CSS mínimo para o header interno (caso ainda não tenha) ============ -->
<style>
.form-hero{ text-align:center; margin:0 0 24px }
.form-hero__logo{ width:72px; height:72px; display:block; margin:0 auto 12px; object-fit:contain }
.form-hero__title{ font-family:'Montserrat',Arial,sans-serif; font-weight:600; font-size:24px; line-height:1.2; color:#15052b; margin:0 0 8px }
.form-hero__subtitle{ font-family:'Montserrat',Arial,sans-serif; font-weight:400; font-size:14px; line-height:1.5; color:#585a6a; margin:0 }
@media(max-width:600px){
  .form-hero__logo{ width:64px; height:64px; margin-bottom:10px }
  .form-hero__title{ font-size:22px }
}
</style>