/*!
 * BoxFiscal fixes.css - v4.0.0
 *
 * Patches incrementais aplicados POR CIMA de main.css sem reescrever a base.
 * Especialmente: mapear classes/slugs legacy (v0.5/v1/v2/v3) para os tokens
 * v4.0.0 (Azul corporativo + cinza neutro). Backward-compat com posts antigos.
 *
 * v4.0.0 patches:
 *  - reset de margem topo do header (Gutenberg root-padding-aware)
 *  - aliases legacy navy-/deep-/emerald-/mint- -> familia gray + blue v4
 *  - foco visivel blue-primary (5.9:1 sobre branco - WCAG SC 1.4.11)
 *  - amber preservado mas SEM ser CTA primary
 */

/* =========================================================================
 * V4.0.0: reset de margem topo do header
 * Gutenberg injeta padding-top em .wp-site-blocks por useRootPaddingAwareAlignments.
 * Header agora eh STICKY branco com border-bottom (nao mais absoluto sobre hero).
 * ========================================================================= */
body .wp-site-blocks {
  padding-top: 0 !important;
}
body .wp-site-blocks > header.wp-block-template-part,
body .wp-site-blocks > header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.bf-header-wrap,
.site-header {
  margin-top: 0 !important;
}

/* =========================================================================
 * Alias backward-compat: posts/paginas antigas que usam slugs legacy
 * V4.0.0: navy escuro -> gray-900 (suavizar pretos antigos)
 * V4.0.0: emerald/mint -> blue-primary (paleta v4)
 * ========================================================================= */

/* deep / navy-9XX -> gray-900 (suavizar #050B17 e #020817 antigos para #1F2937) */
.has-deep-background-color,
.has-navy-950-background-color,
.has-navy-900-background-color,
.has-navy-800-background-color {
  background-color: var(--wp--preset--color--gray-900) !important;
}
.has-deep-color,
.has-navy-950-color,
.has-navy-900-color,
.has-navy-800-color {
  color: var(--wp--preset--color--gray-900) !important;
}

/* navy-7XX/6XX/5XX -> gray-800 */
.has-navy-700-background-color,
.has-navy-600-background-color,
.has-navy-500-background-color {
  background-color: var(--wp--preset--color--gray-800) !important;
}
.has-navy-700-color,
.has-navy-600-color,
.has-navy-500-color {
  color: var(--wp--preset--color--gray-800) !important;
}

/* V4: green-* e mint-* -> familia BLUE PRIMARY (v4 canonico)
 * Posts antigos com has-green-color seguem renderizando, agora em azul v4.
 */
.has-green-dark-background-color,
.has-green-dark-color           { background-color: var(--wp--preset--color--blue-primary-dark) !important; }
.has-green-dark-color           { color: var(--wp--preset--color--blue-primary-dark) !important; }
.has-green-background-color     { background-color: var(--wp--preset--color--blue-primary) !important; }
.has-green-color                { color: var(--wp--preset--color--blue-primary) !important; }
.has-mint-background-color      { background-color: var(--wp--preset--color--blue-bright) !important; }
.has-mint-color                 { color: var(--wp--preset--color--blue-bright) !important; }
.has-mint-soft-background-color { background-color: var(--wp--preset--color--blue-100) !important; }
.has-mint-soft-color            { color: var(--wp--preset--color--blue-100) !important; }

/* emerald-* -> familia BLUE v4 */
.has-emerald-700-background-color { background-color: var(--wp--preset--color--blue-primary-dark) !important; }
.has-emerald-700-color            { color: var(--wp--preset--color--blue-primary-dark) !important; }
.has-emerald-600-background-color { background-color: var(--wp--preset--color--blue-primary) !important; }
.has-emerald-600-color            { color: var(--wp--preset--color--blue-primary) !important; }
.has-emerald-500-background-color { background-color: var(--wp--preset--color--blue-bright) !important; }
.has-emerald-500-color            { color: var(--wp--preset--color--blue-bright) !important; }
.has-emerald-400-background-color { background-color: var(--wp--preset--color--blue-cyan) !important; }
.has-emerald-400-color            { color: var(--wp--preset--color--blue-cyan) !important; }
.has-emerald-300-background-color { background-color: var(--wp--preset--color--blue-100) !important; }
.has-emerald-300-color            { color: var(--wp--preset--color--blue-100) !important; }
.has-emerald-100-background-color { background-color: var(--wp--preset--color--blue-50) !important; }
.has-emerald-100-color            { color: var(--wp--preset--color--blue-50) !important; }

/* paper / paper-bright / line -> familia gray v4 */
.has-paper-background-color        { background-color: var(--wp--preset--color--gray-50) !important; }
.has-paper-color                   { color: var(--wp--preset--color--gray-50) !important; }
.has-paper-bright-background-color { background-color: var(--wp--preset--color--white) !important; }
.has-paper-bright-color            { color: var(--wp--preset--color--white) !important; }
.has-line-background-color         { background-color: var(--wp--preset--color--gray-200) !important; }
.has-line-color                    { color: var(--wp--preset--color--gray-200) !important; }

/* ink / ink-soft / muted / muted-soft -> familia gray v4 */
.has-ink-background-color       { background-color: var(--wp--preset--color--gray-900) !important; }
.has-ink-color                  { color: var(--wp--preset--color--gray-900) !important; }
.has-ink-soft-background-color  { background-color: var(--wp--preset--color--gray-700) !important; }
.has-ink-soft-color             { color: var(--wp--preset--color--gray-700) !important; }
.has-muted-background-color     { background-color: var(--wp--preset--color--gray-500) !important; }
.has-muted-color                { color: var(--wp--preset--color--gray-500) !important; }
.has-muted-soft-background-color{ background-color: var(--wp--preset--color--gray-400) !important; }
.has-muted-soft-color           { color: var(--wp--preset--color--gray-400) !important; }

/* slate-* -> mapeiam para gray-* equivalentes (uniformizar) */
.has-slate-50-background-color  { background-color: var(--wp--preset--color--gray-50) !important; }
.has-slate-100-background-color { background-color: var(--wp--preset--color--gray-100) !important; }
.has-slate-200-background-color { background-color: var(--wp--preset--color--gray-200) !important; }
.has-slate-700-background-color { background-color: var(--wp--preset--color--gray-700) !important; }
.has-slate-900-background-color { background-color: var(--wp--preset--color--gray-900) !important; }
.has-slate-50-color  { color: var(--wp--preset--color--gray-600) !important; }
.has-slate-500-color { color: var(--wp--preset--color--gray-600) !important; }
.has-slate-700-color { color: var(--wp--preset--color--gray-700) !important; }
.has-slate-900-color { color: var(--wp--preset--color--gray-900) !important; }

/* amber legacy: PRESERVADO (nao eh mais CTA primary, mas ainda existe) */
.has-amber-background-color      { background-color: var(--wp--preset--color--amber-500) !important; }
.has-amber-color                 { color: var(--wp--preset--color--amber-500) !important; }
.has-amber-dark-background-color { background-color: var(--wp--preset--color--amber-dark) !important; }
.has-amber-dark-color            { color: var(--wp--preset--color--amber-dark) !important; }
.has-amber-soft-background-color { background-color: var(--wp--preset--color--amber-soft) !important; }
.has-amber-soft-color            { color: var(--wp--preset--color--amber-soft) !important; }

/* blue legacy (era #3B82F6) -> blue-primary v4 */
.has-blue-background-color  { background-color: var(--wp--preset--color--blue-primary) !important; }
.has-blue-color             { color: var(--wp--preset--color--blue-primary) !important; }
.has-blue-soft-background-color  { background-color: var(--wp--preset--color--blue-50) !important; }
.has-blue-soft-color             { color: var(--wp--preset--color--blue-50) !important; }
.has-blue-500-background-color   { background-color: var(--wp--preset--color--blue-primary) !important; }
.has-blue-500-color              { color: var(--wp--preset--color--blue-primary) !important; }
.has-blue-700-background-color   { background-color: var(--wp--preset--color--blue-primary-dark) !important; }
.has-blue-700-color              { color: var(--wp--preset--color--blue-primary-dark) !important; }

/* coral legacy -> rose-500 (mantido) */
.has-coral-background-color { background-color: var(--wp--preset--color--rose-500) !important; }
.has-coral-color            { color: var(--wp--preset--color--rose-500) !important; }
.has-coral-soft-background-color { background-color: var(--wp--preset--color--coral-soft) !important; }
.has-coral-soft-color            { color: var(--wp--preset--color--coral-soft) !important; }

/* =========================================================================
 * Botoes legacy: Gutenberg core button cru deve usar v4 azul
 * ========================================================================= */
.wp-element-button,
.wp-block-button__link {
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
  letter-spacing: -.01em;
  transition: background-color 200ms cubic-bezier(0.25, 1, 0.5, 1),
              transform 200ms cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 200ms;
}

/* =========================================================================
 * Force fonte mono em codigo/preformatado em posts antigos
 * ========================================================================= */
.wp-block-code,
.wp-block-preformatted,
code, pre {
  font-family: var(--wp--preset--font-family--jetbrains-mono);
}

/* =========================================================================
 * Conteudo de post (single/page) - espacamento de leitura mais agradavel
 * para o redesign claro
 * ========================================================================= */
.wp-block-post-content > * + * { margin-top: 1.1em; }
.wp-block-post-content h2 { margin-top: 1.8em; }
.wp-block-post-content h3 { margin-top: 1.4em; }
.wp-block-post-content blockquote {
  border-left: 3px solid var(--wp--preset--color--blue-primary);
  background: var(--wp--preset--color--gray-50);
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  color: var(--wp--preset--color--gray-700);
  font-style: normal;
}

/* =========================================================================
 * V4.0.0: subtitle do H1 hero (SEO content_depth)
 * "BoxFiscal + Pre-apuracao fiscal automatica." da contexto + keyword.
 * ========================================================================= */
.bf-hero-title .bf-hero-sub {
  display: block;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 14px;
  text-transform: none;
}

/* =========================================================================
 * Focus visivel padronizado (a11y) - V4 azul
 * blue-primary #0066CC sobre branco = 5.9:1 (WCAG SC 1.4.11 OK)
 * ========================================================================= */
:where(a, button, [role="button"], [tabindex="0"]):focus-visible {
  outline: 2px solid var(--wp--preset--color--blue-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* =========================================================================
 * V4.1.0 - CONTA AZUL REDESIGN
 *
 *   - Hero CLARO (estilo Conta Azul): bg branco-paliço, texto dark
 *   - Botoes primary AMARELO (estilo "Teste Gratis" do Conta Azul)
 *   - Header sticky com sombra ao rolar (.is-scrolled)
 *   - Barra fixa "Fale com um especialista" no rodape (sticky bottom)
 *   - Paleta page-cool/blue-ca/amber-cta exposta pelo theme.json
 * ========================================================================= */

:root {
  --bf-page-cool: #F2F3F8;
  --bf-blue-ca: #1E88E5;
  --bf-blue-ca-dark: #155FB5;
  --bf-blue-ca-lighter: #DCEEF8;
  --bf-amber-cta: #F5C518;
  --bf-amber-cta-dark: #D49E07;
  --bf-amber-cta-ring: rgba(245, 197, 24, 0.32);
  --bf-wpp-green: #25D366;
  --bf-wpp-green-dark: #1FAB54;
  --bf-sticky-cta-h: 64px;
}
@media (max-width: 640px) {
  :root { --bf-sticky-cta-h: 88px; }
}

/* ---------- 1. PAGE BG NEUTRO FRIO + body padding-bottom pra barra fixa --- */
body.bf-cool-bg,
body { background-color: var(--bf-page-cool); }
body { padding-bottom: var(--bf-sticky-cta-h); }
@media print { body { padding-bottom: 0; } }

/* ---------- 2. HEADER STICKY: transparente no topo, branco ao rolar ------
 * Fix 1: WordPress envolve o header em <header class="wp-block-template-part">
 * extra, e o sticky cola dentro do pai (limitado a altura do header).
 * Promovemos o wrapper externo a sticky tambem.
 *
 * Fix 2: gap de 24px entre header e hero vem do block-gap padrao do Gutenberg
 * que aplica margin-top: 24px no <main>. Zeramos.
 *
 * Comportamento:
 *  - body sem .bf-scrolled (topo da pagina) -> header TRANSPARENTE sobre hero
 *  - body.bf-scrolled (rolou > 30px) -> header BRANCO solido com sombra
 *  - JS adiciona/remove .bf-scrolled (ver functions.php inline script)
 * ----------------------------------------------------------------------- */
body .wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* v4.1.5: zera gap entre header e MAIN (block-gap default do Gutenberg),
 * mas NAO zera margin-top do hero (que precisa de margin negativo pra
 * passar atras do header transparente). */
body .wp-site-blocks > main.bf-main,
body .wp-site-blocks > main.wp-block-group.bf-main {
  margin-top: 0 !important;
}
/* v4.1.13: zera gap entre main e footer (block-gap default 24px) */
body .wp-site-blocks > footer.wp-block-template-part {
  margin-top: 0 !important;
}
/* v4.1.13: CTA azul cola direto na section anterior (sem faixa branca) */
.bf-main > .cta,
.bf-main > section.cta,
.bf-main > .bf-cta-final,
.bf-main > .flow-band,
.bf-main > section.flow-band,
.bf-article-main > .bf-article-cta {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* v4.2.5: paginas de POST (single.html) - hero azul-marinho colado no header,
 * CTA final colado no footer (mesmo padrao da home). */
.bf-article-main { margin-top: 0 !important; }

.bf-article-hero {
  background:
    radial-gradient(circle at 1px 1px, rgba(91, 174, 239, 0.16) 1px, transparent 0),
    radial-gradient(ellipse 1000px 420px at 50% -5%, rgba(38, 135, 233, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 600px 360px at 10% 100%, rgba(91, 174, 239, 0.18) 0%, transparent 60%),
    linear-gradient(160deg, #102F89 0%, #0A2068 50%, #061854 100%) !important;
  background-size: 28px 28px, 100% 100%, 100% 100%, 100% 100% !important;
  color: #FFFFFF !important;
  margin-top: -74px !important;
  padding-top: 130px !important;
  padding-bottom: 64px !important;
  position: relative;
  z-index: 1;
}
.bf-article-hero .bf-article-title,
.bf-article-hero .wp-block-post-title,
.bf-article-hero h1 {
  color: #FFFFFF !important;
}
.bf-article-hero .bf-article-excerpt,
.bf-article-hero .wp-block-post-excerpt,
.bf-article-hero .wp-block-post-excerpt p {
  color: rgba(255, 255, 255, 0.85) !important;
}
/* Pilula da categoria no hero do post - estilo eyebrow translucido (igual home) */
.bf-article-hero .bf-article-cat,
.bf-article-hero .wp-block-post-terms,
.bf-article-hero .taxonomy-category {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  color: #BFD9F8 !important;
}
.bf-article-hero .bf-article-cat a,
.bf-article-hero .wp-block-post-terms a,
.bf-article-hero .taxonomy-category a {
  background: transparent !important;
  color: #BFD9F8 !important;
  text-decoration: none !important;
}
.bf-article-hero .bf-article-cat a:hover,
.bf-article-hero .wp-block-post-terms a:hover {
  color: #FFFFFF !important;
}
.bf-article-hero .wp-block-post-date,
.bf-article-hero .bf-article-date,
.bf-article-hero time {
  color: rgba(255, 255, 255, 0.65) !important;
}
/* Breadcrumb dentro do hero - texto claro */
.bf-article-hero .bf-breadcrumb,
.bf-article-hero .bf-breadcrumb a,
.bf-article-hero nav[aria-label="breadcrumb"],
.bf-article-hero nav[aria-label="breadcrumb"] a {
  color: rgba(255, 255, 255, 0.78) !important;
}
.bf-article-hero .bf-breadcrumb a:hover,
.bf-article-hero nav[aria-label="breadcrumb"] a:hover {
  color: #FFFFFF !important;
}
.bf-article-hero .bf-breadcrumb span,
.bf-article-hero nav[aria-label="breadcrumb"] span {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Featured image cola na transicao hero -> conteudo */
.bf-article-main > .bf-article-image {
  margin-top: 0 !important;
  padding-top: 32px !important;
}
/* Quando NAO tem featured image, oculta a section vazia (evita faixa branca) */
.bf-article-main > .bf-article-image:not(:has(img)) {
  display: none !important;
}

/* Body do post bg branco com respiro acima quando vem direto do hero.
 * margin-top zerado pra eliminar o block-gap de 24px do Gutenberg. */
.bf-article-main > .bf-article-body,
.bf-article-main > section.bf-article-body {
  background: #FFFFFF;
  padding-top: 56px !important;
  margin-top: 0 !important;
}
/* Tambem zera o block-gap entre todos os children diretos do .bf-article-main */
.bf-article-main > * + * {
  margin-top: 0 !important;
}

/* CTA final do post - bg azul-marinho (igual hero), sem margem com footer */
.bf-article-cta {
  background:
    radial-gradient(ellipse 1000px 400px at 50% -20%, rgba(38, 135, 233, 0.22) 0%, transparent 60%),
    linear-gradient(180deg, #0F2C84 0%, #0A2068 100%) !important;
  background-color: transparent !important;
}
.bf-article-cta a[style*="#FFFFFF"]:first-of-type {
  color: #0F2C84 !important;
}

/* Header default (topo) = transparente */
.bf-header-wrap {
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
}
.bf-header-wrap .bf-brand,
.bf-header-wrap .bf-mega-trigger,
.bf-header-wrap .bf-mega-link,
.bf-header-wrap .bf-header-cta .bf-link-quiet {
  transition: color 220ms ease;
}

/* Estado transparente: textos brancos sobre hero azul-marinho */
body:not(.bf-scrolled) .bf-header-wrap .bf-brand,
body:not(.bf-scrolled) .bf-header-wrap .bf-mega-trigger,
body:not(.bf-scrolled) .bf-header-wrap .bf-mega-link,
body:not(.bf-scrolled) .bf-header-wrap .bf-header-cta .bf-link-quiet {
  color: #FFFFFF;
}
body:not(.bf-scrolled) .bf-header-wrap .bf-brand-mark {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.30);
  color: #FFFFFF;
}
body:not(.bf-scrolled) .bf-header-wrap .bf-mega-trigger:hover,
body:not(.bf-scrolled) .bf-header-wrap .bf-mega-link:hover,
body:not(.bf-scrolled) .bf-header-wrap .bf-mega-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;
}
/* setinha do trigger expanded em estado transparente fica branca tambem */
body:not(.bf-scrolled) .bf-header-wrap .bf-mega-trigger[aria-expanded="true"]::after {
  border-color: #FFFFFF;
}
body:not(.bf-scrolled) .bf-header-wrap .bf-header-cta .bf-link-quiet:hover {
  color: #FFFFFF;
  opacity: 0.85;
}
/* mobile toggle no estado transparente */
body:not(.bf-scrolled) .bf-header-wrap .bf-menu-toggle {
  border-color: rgba(255, 255, 255, 0.30);
}
body:not(.bf-scrolled) .bf-header-wrap .bf-menu-toggle span {
  background: #FFFFFF;
}

/* Estado scrolled: branco solido com sombra */
body.bf-scrolled .bf-header-wrap {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom-color: var(--wp--preset--color--gray-200, #E5E7EB);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

/* CTA do header AMARELO (estilo Teste Gratis) - sempre amarelo, dois estados */
.bf-header-cta .bf-btn-primary {
  background: var(--bf-amber-cta);
  color: var(--wp--preset--color--gray-900, #1F2937);
  border-color: var(--bf-amber-cta);
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(212, 158, 7, 0.18);
}
.bf-header-cta .bf-btn-primary:hover {
  background: var(--bf-amber-cta-dark);
  color: var(--wp--preset--color--gray-900, #1F2937);
  border-color: var(--bf-amber-cta-dark);
  box-shadow: 0 6px 14px rgba(212, 158, 7, 0.22);
}

/* ---------- 3. BOTOES PRIMARY GLOBAIS -> AMARELO ------------------------- */
.bf-btn-primary,
.btn-primary,
.wp-element-button,
.wp-block-button__link {
  background: var(--bf-amber-cta);
  color: var(--wp--preset--color--gray-900, #1F2937);
  border-color: var(--bf-amber-cta);
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(212, 158, 7, 0.18);
}
.bf-btn-primary:hover,
.btn-primary:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
  background: var(--bf-amber-cta-dark);
  color: var(--wp--preset--color--gray-900, #1F2937);
  border-color: var(--bf-amber-cta-dark);
  box-shadow: 0 8px 18px rgba(212, 158, 7, 0.22);
  transform: translateY(-1px);
}

/* Mantem inverso no CTA final azul (.cta / .bf-cta-final) - botao FICA branco */
.cta .btn-primary,
.cta .bf-btn-primary,
.bf-cta-final .bf-btn-primary,
.bf-cta-final .btn-primary {
  background: #FFFFFF;
  color: var(--wp--preset--color--blue-primary, #0066CC);
  border-color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.cta .btn-primary:hover,
.cta .bf-btn-primary:hover,
.bf-cta-final .bf-btn-primary:hover,
.bf-cta-final .btn-primary:hover {
  background: var(--bf-amber-cta);
  color: var(--wp--preset--color--gray-900, #1F2937);
  border-color: var(--bf-amber-cta);
}

/* ---------- 4. HERO ESCURO ESTILO CONTA AZUL -----------------------------
 * v4.2.9: cor solida #0F2C84 (bg-blue-ca-darker exato do CA) + 1 glow sutil
 * no topo (azul-bright). Esse padrao espelha o que o Conta Azul realmente
 * usa - cor solida com SVG decorativo, sem gradientes complexos.
 * ----------------------------------------------------------------------- */
.bf-hero,
section.bf-hero,
.hero,
section.hero {
  background:
    /* malha de pontos azuis-claros sutil (estilo SAP/HCO) */
    radial-gradient(circle at 1px 1px, rgba(91, 174, 239, 0.18) 1px, transparent 0),
    /* glow eliptico azul-bright no topo (degrade) */
    radial-gradient(ellipse 1100px 480px at 50% -5%, rgba(38, 135, 233, 0.32) 0%, transparent 60%),
    /* glow secundario no canto inferior esquerdo */
    radial-gradient(ellipse 700px 400px at 10% 100%, rgba(91, 174, 239, 0.22) 0%, transparent 60%),
    /* base azul-marinho mais profunda no fundo */
    linear-gradient(160deg, #102F89 0%, #0A2068 50%, #061854 100%);
  background-size: 28px 28px, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, center top, left bottom, center;
  color: #FFFFFF;
  position: relative;
}
.bf-hero::before,
section.bf-hero::before,
.hero::before {
  display: none !important;
}

.bf-hero .eyebrow,
.hero .eyebrow,
.bf-hero-eyebrow,
.bf-hero-copy .eyebrow {
  background: rgba(255, 255, 255, 0.10);
  color: #BFD9F8;
  border-color: rgba(255, 255, 255, 0.18);
}
.bf-hero .eyebrow::before,
.bf-hero-copy .eyebrow::before {
  background: #5BAEEF;
  box-shadow: 0 0 8px rgba(91, 174, 239, 0.6);
}
.bf-hero-title,
.hero .bf-hero-title {
  color: #FFFFFF;
}
.bf-hero-title .bf-hero-sub {
  color: rgba(255, 255, 255, 0.78);
}
.bf-hero-accent {
  background: linear-gradient(135deg, #5BAEEF 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bf-hero .hero-lede,
.bf-hero-lede,
.bf-hero-copy .hero-lede {
  color: rgba(255, 255, 255, 0.82);
}

/* Trust pills translucidas sobre azul-marinho */
.bf-hero .bf-trust-pill,
.bf-trust-pill,
.bf-hero-copy .bf-trust-pill {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: none;
}
.bf-trust-pill::before {
  background: #5BAEEF;
}
.bf-trust-pill svg {
  color: #5BAEEF;
}
.bf-hero-trust { border-top-color: rgba(255, 255, 255, 0.14); }
.bf-hero-trust-label { color: rgba(255, 255, 255, 0.55); }

/* Secondary button ghost branco sobre fundo escuro */
.bf-hero .btn-secondary,
.bf-hero-copy .btn-secondary,
.hero .btn-secondary {
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.28);
}
.bf-hero .btn-secondary:hover,
.bf-hero-copy .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.40);
}

/* Dashboard mock CLARO sobre fundo escuro (contraste alto, igual CA) */
.bf-hero .product-board,
.bf-hero-mock-right .product-board {
  background: #FFFFFF;
  color: #1F2937;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.32),
    0 4px 12px rgba(91, 174, 239, 0.16);
}
.bf-hero .product-topbar {
  background: #F2F3F8;
  border-bottom-color: #E5E7EB;
}
.bf-hero .topbar-dots span { background: #D1D5DB; }
.bf-hero .topbar-title { color: #6B7280; }
.bf-hero .sidebar-mock {
  background: #F2F3F8;
  border-right-color: #E5E7EB;
}
.bf-hero .side-pill {
  background: #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  height: 32px;
  border-radius: 8px;
  transition: background 180ms ease, color 180ms ease;
}
.bf-hero .side-pill.active {
  background: #1E88E5;
  color: #FFFFFF;
}
.bf-hero .side-pill:hover {
  background: #DCEEF8;
  color: #155FB5;
}
.bf-hero .side-pill svg { display: block; }
.bf-hero .mock-card,
.bf-hero .chart-card,
.bf-hero .audit-card,
.bf-hero .table-mock {
  background: #FFFFFF;
  border-color: #E5E7EB;
}
.bf-hero .mock-label,
.bf-hero .chart-title,
.bf-hero .audit-title { color: #6B7280; }
.bf-hero .mock-number { color: #1F2937; }
.bf-hero .mock-trend { color: #1E88E5; }
.bf-hero .bars span {
  background: linear-gradient(180deg, #1E88E5 0%, #155FB5 100%);
}
.bf-hero .audit-row { color: #4B5563; }
.bf-hero .audit-row span:first-child { color: #155FB5; }
.bf-hero .severity { background: #E5E7EB; }
.bf-hero .severity i { background: #1E88E5; }
.bf-hero .table-row {
  color: #4B5563;
  border-bottom-color: #F3F4F6;
}
.bf-hero .table-row:first-child {
  color: #9CA3AF;
  background: #F2F3F8;
}
.bf-hero .table-row .tag {
  background: #DCEEF8;
  color: #155FB5;
}
.bf-hero .table-row .tag.warn { background: #FEF3C7; color: #92400E; }
.bf-hero .table-row .tag.info { background: #DCEEF8; color: #155FB5; }

/* v4.1.5: hero passa POR BAIXO do header transparente para o azul-marinho
 * aparecer atras do header no topo (efeito Conta Azul real).
 * margin-top negativo = altura do header; padding-top compensa o overlap. */
.bf-hero {
  margin-top: -74px !important;
  padding: 130px 0 80px !important;  /* 74 header + 56 respiro */
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  .bf-hero {
    margin-top: -68px !important;
    padding: 108px 0 56px !important;  /* 68 + 40 */
  }
}

/* v4.1.7: hero ocupa quase a viewport inteira em monitores normais.
 * Threshold: min-width 1024 AND min-height 720 (exclui laptops apertados
 * tipo 1366x768 e mobile, onde o conteudo natural ja eh suficiente). */
@media (min-width: 1024px) and (min-height: 720px) {
  .bf-hero {
    min-height: calc(100vh - 30px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* v4.1.8: dashboard mock do hero vaza pra direita ate ~24px da borda do viewport
 * (full-bleed responsivo). So aplica em desktop. */
@media (min-width: 1024px) {
  .bf-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) !important;
  }
  .bf-hero-mock-right {
    /* puxa o mock ate ~24px da borda direita do viewport.
     * compensa o padding-right de 32px do bf-container. */
    margin-right: calc((100vw - 1200px) / -2 - 8px);
  }
  .bf-hero-mock-right .product-board {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}
@media (min-width: 1024px) and (max-width: 1240px) {
  /* Em viewports entre 1024 e 1240 nao ha espaco fora do container.
   * Margin-right negativo deve ser ~0. Reset. */
  .bf-hero-mock-right { margin-right: 0; }
}

/* ---------- 5. STICKY CTA BAR (rodape fixo) ------------------------------ */
.bf-sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  background: linear-gradient(180deg, var(--bf-blue-ca) 0%, var(--bf-blue-ca-dark) 100%);
  color: #FFFFFF;
  box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.bf-sticky-cta-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--bf-sticky-cta-h);
}
.bf-sticky-cta-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #FFFFFF;
}
.bf-sticky-cta-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.bf-sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.bf-sticky-cta-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.bf-sticky-cta-btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.30);
}
.bf-sticky-cta-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.20);
  color: #FFFFFF;
  transform: translateY(-1px);
}
.bf-sticky-cta-btn--wpp {
  background: var(--bf-wpp-green);
  color: #FFFFFF;
  border-color: var(--bf-wpp-green);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.22);
}
.bf-sticky-cta-btn--wpp:hover {
  background: var(--bf-wpp-green-dark);
  color: #FFFFFF;
  border-color: var(--bf-wpp-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.32);
}

@media (max-width: 640px) {
  .bf-sticky-cta-inner {
    padding: 10px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .bf-sticky-cta-label {
    text-align: center;
    font-size: 0.85rem;
  }
  .bf-sticky-cta-actions {
    justify-content: center;
    gap: 8px;
  }
  .bf-sticky-cta-btn {
    flex: 1;
    justify-content: center;
    padding: 8px 12px;
    font-size: 0.85rem;
  }
}

@media print {
  .bf-sticky-cta { display: none !important; }
}

/* ---------- 6. AJUSTES FINAIS --------------------------------------------
 * O footer dark continua mas com margin-bottom pra nao colidir com a barra.
 * O body padding-bottom ja resolve, mas mantemos o footer respirando.
 * ----------------------------------------------------------------------- */
.bf-footer { padding-bottom: 32px; }

/* =========================================================================
 * V4.1.9 - RESPONSIVIDADE MOBILE (<=640px)
 *   - Header compacto (sem quebra de linha)
 *   - Hero/copy/mock dentro do viewport (sem overflow horizontal)
 *   - Title escala correta, eyebrow legivel
 *   - Sticky CTA bar 1-linha com botoes flex
 *   - Body overflow-x:hidden como seguranca
 * ========================================================================= */

@media (max-width: 640px) {
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* Sticky CTA altura reduzida em mobile (1 linha) */
  :root { --bf-sticky-cta-h: 60px; }

  /* ---------- HEADER mobile compacto (60-68px) ------------------------- */
  .bf-header-inner {
    padding: 10px 16px !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
  .bf-brand {
    font-size: 1rem !important;
    gap: 8px !important;
  }
  .bf-brand-mark {
    width: 30px !important;
    height: 30px !important;
  }
  .bf-brand-mark svg { width: 16px !important; height: 16px !important; }
  .bf-header-cta {
    flex-shrink: 0;
    gap: 8px !important;
  }
  /* Esconder "Entrar" em mobile (cabe no menu drawer) */
  .bf-header-cta .bf-link-quiet { display: none !important; }
  .bf-header-cta .bf-btn-primary {
    padding: 7px 14px !important;
    font-size: 0.82rem !important;
    white-space: nowrap;
  }
  .bf-menu-toggle {
    width: 36px !important;
    height: 36px !important;
  }

  /* ---------- HERO mobile - sem overflow + title escala ----------------- */
  .bf-hero {
    margin-top: -64px !important;
    padding: 88px 0 56px !important;  /* 64 header + 24 respiro */
    min-height: 0 !important;
  }
  .bf-hero,
  .bf-hero .bf-container,
  .bf-hero-grid,
  .bf-hero-copy,
  .bf-hero-mock-right {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    min-width: 0;
  }
  .bf-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .bf-hero-mock-right {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .bf-hero-mock-right .product-board {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Title responsivo */
  .bf-hero-title {
    font-size: clamp(1.65rem, 7vw, 2.1rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
  .bf-hero-copy .hero-lede,
  .bf-hero .hero-lede {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
  .bf-hero-copy .eyebrow,
  .bf-hero .eyebrow {
    font-size: 0.68rem !important;
    padding: 5px 10px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
  }

  /* Buttons full-width empilhados */
  .bf-hero-copy .hero-actions,
  .bf-hero .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100%;
  }
  .bf-hero-copy .btn-primary,
  .bf-hero-copy .btn-secondary,
  .bf-hero .btn-primary,
  .bf-hero .btn-secondary {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 0.92rem !important;
  }

  /* Trust pills enxutas */
  .bf-hero-trust { padding-top: 18px !important; gap: 10px !important; }
  .bf-hero-trust-label { font-size: 0.7rem !important; }
  .bf-hero-trust-items { gap: 6px !important; }
  .bf-trust-pill {
    font-size: 0.74rem !important;
    padding: 4px 9px !important;
  }

  /* ---------- STICKY CTA BAR mobile compacto (1 linha, 56px) ------------ */
  .bf-sticky-cta { min-height: 56px !important; }
  .bf-sticky-cta-inner {
    padding: 6px 10px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 56px !important;
  }
  .bf-sticky-cta-label {
    display: none !important;
  }
  .bf-sticky-cta-actions {
    width: 100%;
    flex-direction: row !important;
    justify-content: stretch !important;
    gap: 6px !important;
  }
  .bf-sticky-cta-btn {
    flex: 1 1 0;
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
  }
  .bf-sticky-cta-btn svg { width: 16px !important; height: 16px !important; }
  body { padding-bottom: 56px !important; }
}

/* v4.1.10: Tablet/<=1024 ajustes - header CTA em row (nao empilhado),
 * sticky bar em row tambem. Override de regras antigas do main.css. */
@media (max-width: 1024px) {
  .bf-header-cta {
    margin-top: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    gap: 10px !important;
  }
  .bf-header-cta > * {
    width: auto !important;
    text-align: left !important;
  }
  /* Sticky bar 1 linha em tablet tambem */
  .bf-sticky-cta-inner {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .bf-sticky-cta-actions {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto;
  }
  .bf-sticky-cta-btn {
    flex: 0 1 auto;
    width: auto !important;
    white-space: nowrap;
  }
}

/* Esconder label da sticky bar em telas pequenas/medias (<= 900px) onde
 * compete com os 2 botoes de CTA. */
@media (max-width: 900px) {
  .bf-sticky-cta-label { display: none !important; }
  .bf-sticky-cta-actions { width: 100%; justify-content: stretch !important; }
  .bf-sticky-cta-btn { flex: 1 1 0 !important; justify-content: center; }
}

/* =========================================================================
 * V4.1.12 - BLOG: hero compacto + categorias chips + grid de posts
 * Usado em templates/home.html (pagina /blog/) e templates/archive.html.
 * ========================================================================= */
.bf-blog-hero {
  background:
    radial-gradient(circle at 1px 1px, rgba(91, 174, 239, 0.16) 1px, transparent 0),
    radial-gradient(ellipse 1000px 420px at 50% -5%, rgba(38, 135, 233, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 600px 360px at 10% 100%, rgba(91, 174, 239, 0.18) 0%, transparent 60%),
    linear-gradient(160deg, #102F89 0%, #0A2068 50%, #061854 100%);
  background-size: 28px 28px, 100% 100%, 100% 100%, 100% 100%;
  color: #FFFFFF;
  margin-top: -74px;
  padding: 130px 24px 64px;
  text-align: center;
}
.bf-blog-hero-inner {
  max-width: 900px;
  margin: 0 auto;
}
.bf-blog-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #BFD9F8;
  background: rgba(255, 255, 255, 0.10);
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 18px;
}
.bf-blog-title {
  font-size: clamp(1.9rem, 4.2vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: #FFFFFF;
  margin: 0 0 14px;
}
.bf-blog-lede {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto 26px;
}

/* form de busca dentro do hero */
.bf-blog-search {
  display: flex;
  max-width: 520px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
.bf-blog-search input[type="search"] {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  color: #1F2937;
  outline: none;
  font-size: 0.95rem;
  padding: 8px 0;
}
.bf-blog-search input[type="search"]::placeholder {
  color: #9CA3AF;
}
.bf-blog-search button {
  border: 0;
  background: #1E88E5;
  color: #FFFFFF;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 180ms ease;
}
.bf-blog-search button:hover { background: #155FB5; }

/* archive hero variant - menor */
.bf-blog-hero--archive { padding: 110px 24px 48px; }

/* Categorias chips */
.bf-blog-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0;
}
.bf-blog-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  font-size: 0.85rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.bf-blog-cat:hover {
  border-color: #1E88E5;
  color: #155FB5;
}
.bf-blog-cat.is-active {
  background: #1E88E5;
  color: #FFFFFF;
  border-color: #1E88E5;
}
.bf-blog-cat-count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  background: #F3F4F6;
  color: #6B7280;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
}
.bf-blog-cat.is-active .bf-blog-cat-count {
  background: rgba(255, 255, 255, 0.20);
  color: #FFFFFF;
}

/* Grid de posts (3 cols desktop, 2 tablet, 1 mobile) */
.bf-blog-grid,
.bf-blog-query .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
@media (max-width: 900px) {
  .bf-blog-grid,
  .bf-blog-query .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .bf-blog-grid,
  .bf-blog-query .wp-block-post-template {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Post card */
.bf-post-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bf-post-card:hover {
  transform: translateY(-3px);
  border-color: #1E88E5;
  box-shadow: 0 12px 28px rgba(30, 136, 229, 0.10);
}
.bf-post-card .wp-block-post-featured-image {
  display: block;
  margin: 0 0 14px;
}
.bf-post-card .wp-block-post-featured-image img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.bf-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.bf-post-cat,
.bf-post-card .wp-block-post-terms {
  display: inline-flex;
  align-items: center;
  font-size: 0.50rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #155FB5;
  background: #EFF6FF;
  padding: 1px 8px;
  border-radius: 99px;
  margin: 0;
}
.bf-post-cat a,
.bf-post-card .wp-block-post-terms a {
  color: inherit;
  text-decoration: none;
}
.bf-post-card .wp-block-post-title {
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #1F2937;
}
.bf-post-card .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}
.bf-post-card .wp-block-post-title a:hover {
  color: #1E88E5;
}
.bf-post-card .wp-block-post-excerpt {
  color: #4B5563;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 12px;
}
.bf-post-card .wp-block-post-date {
  color: #9CA3AF;
  font-size: 0.78rem;
  margin-top: auto;
}

/* Paginacao */
.bf-blog-pagination {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.bf-blog-pagination a,
.bf-blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #374151;
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.bf-blog-pagination a:hover {
  border-color: #1E88E5;
  color: #155FB5;
}
.bf-blog-pagination .current {
  background: #1E88E5;
  color: #FFFFFF;
  border-color: #1E88E5;
}

/* Responsividade blog hero */
@media (max-width: 640px) {
  .bf-blog-hero { padding: 100px 16px 48px; margin-top: -64px; }
  .bf-blog-hero--archive { padding: 90px 16px 36px; }
  .bf-blog-search { padding: 4px 4px 4px 16px; }
  .bf-blog-search button { width: 36px; height: 36px; }
  .bf-blog-categories { gap: 6px; }
  .bf-blog-cat { padding: 6px 12px; font-size: 0.78rem; }
}

/* Telas muito pequenas (<=380px): esconde texto do logo, mantem so o icone */
@media (max-width: 380px) {
  .bf-brand > span:last-child { display: none; }
  .bf-header-cta .bf-btn-primary {
    padding: 6px 11px !important;
    font-size: 0.75rem !important;
  }
  .bf-sticky-cta-btn { font-size: 0.72rem !important; padding: 7px 8px !important; }
}

/* =========================================================================
 * V4.3.2 - LARGURA UNIFORME DE PAGINAS DE POSTS (1200px igual home)
 *   Hero, image, body e CTA do single.html agora usam contentSize 1200px.
 *   Texto corrido dentro do body fica limitado a ~800px centralizado
 *   para leitura confortavel (linha ~65 chars).
 * ========================================================================= */
/* v4.3.9: largura do post = mesma da home (.bf-container: 1200px max, 32px padding).
 * Aplica o mesmo container que a home no post-content. */
.bf-article-body .wp-block-post-content {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}
/* Filhos do post-content ocupam a largura interna do container (1136px) */
.bf-article-body .wp-block-post-content > * {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 640px) {
  .bf-article-body .wp-block-post-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* Tags pills + CTA inline tambem centralizados */
.bf-article-body .bf-article-tags {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
/* Hero do post: força mesma largura da home (1200 com padding 32px).
 * Removemos padding-x do hero e aplicamos nos filhos pra eles serem o container. */
.bf-article-hero {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.bf-article-hero .wp-block-post-title,
.bf-article-hero h1,
.bf-article-hero .wp-block-post-excerpt,
.bf-article-hero .bf-trial-badge-wrap,
.bf-article-hero .bf-article-meta {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
  width: 100%;
}
@media (max-width: 640px) {
  .bf-article-hero .wp-block-post-title,
  .bf-article-hero h1,
  .bf-article-hero .wp-block-post-excerpt,
  .bf-article-hero .bf-trial-badge-wrap,
  .bf-article-hero .bf-article-meta {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* CTA do post: aplicar mesmo padrao */
.bf-article-cta {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.bf-article-cta .wp-block-html,
.bf-article-cta > div {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}
/* Featured image dentro do hero 1200: limitada a 1080 centralizada */
.bf-article-image .wp-block-post-featured-image {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================================
 * V4.3.1 - TIPOGRAFIA MIX LIGHT/BOLD AZUL nos titulos das paginas (estilo Conta Azul)
 *   - Todos h2/h3 em fundo claro: peso 300 + cor #155FB5
 *   - <strong> dentro deles: peso 800, mesma cor azul
 *   - Em sections dark/blue/flow-band/cta: cor branca
 * ========================================================================= */
.bf-section-title,
.bf-section-head h2,
.bf-section-head h3,
.section-heading h2,
.section-heading h3,
section.section h2:not(.bf-hero-title):not(.bf-article-title),
section.bf-section h2:not(.bf-hero-title):not(.bf-article-title),
.bf-faq-section h2,
.bf-capacidades-section h2,
.bf-documentos-section h2,
.bf-int-section h2,
.bf-blog-body h2,
.bf-article-body h2,
.bf-article-body h3,
.bf-article-body .wp-block-heading,
.bf-article-body .wp-block-post-content h2,
.bf-article-body .wp-block-post-content h3,
.bf-article-body .wp-block-post-content h4,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
.bf-main .wp-block-group h2,
.bf-main .wp-block-group h3,
h2.bf-section-title {
  font-weight: 300 !important;
  color: #155FB5;
  letter-spacing: -0.02em;
}
.bf-section-title strong,
.bf-section-title b,
.bf-section-head h2 strong,
.bf-section-head h3 strong,
.section-heading h2 strong,
.section-heading h3 strong,
section.section h2 strong,
section.bf-section h2 strong,
.bf-faq-section h2 strong,
.bf-capacidades-section h2 strong,
.bf-documentos-section h2 strong,
.bf-int-section h2 strong,
.bf-blog-body h2 strong,
.bf-article-body h2 strong,
.bf-article-body h3 strong,
.bf-article-body .wp-block-heading strong,
.bf-article-body .wp-block-post-content h2 strong,
.bf-article-body .wp-block-post-content h3 strong,
.bf-article-body .wp-block-post-content h4 strong,
.wp-block-post-content h2 strong,
.wp-block-post-content h3 strong,
.wp-block-post-content h4 strong,
.bf-main .wp-block-group h2 strong,
.bf-main .wp-block-group h3 strong {
  font-weight: 800 !important;
  color: #155FB5 !important;
}

/* Em sections dark/blue, todo titulo + strong branco.
 * Especificidade reforcada (section.section.cta tem 0,2,2) pra vencer
 * a regra generica section.section h2 strong (0,1,3 com !important). */
.bf-section--dark h2,
.bf-section--dark .bf-section-title,
.bf-section--blue h2,
section.flow-band h2,
section.flow-band .section-heading h2,
section.cta h2,
section.bf-cta-final h2,
section.bf-article-cta h2,
.bf-main > section.cta h2,
.bf-main > section.flow-band h2,
.bf-article-main > section.bf-article-cta h2 {
  color: #FFFFFF !important;
  font-weight: 300 !important;
}
.bf-section--dark h2 strong,
.bf-section--dark h2 b,
.bf-section--blue h2 strong,
section.flow-band h2 strong,
section.flow-band .section-heading h2 strong,
section.cta h2 strong,
section.cta h2 b,
section.bf-cta-final h2 strong,
section.bf-article-cta h2 strong,
.bf-main > section.cta h2 strong,
.bf-main > section.flow-band h2 strong,
.bf-article-main > section.bf-article-cta h2 strong,
/* Fallback ultra-especifico para garantir override */
section[class*="cta"] h2 strong,
section[class*="flow-band"] h2 strong,
section[class*="bf-cta"] h2 strong,
/* legal-panel (bg navy interno) tambem precisa de strong branco */
.legal-panel h2 strong,
.legal-panel h2 b,
.bf-main .legal-panel h2 strong {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
/* Forca H2 dentro de .legal-panel a ficar branco (peso 300) */
.legal-panel h2,
.bf-main .legal-panel h2 {
  color: #FFFFFF !important;
  font-weight: 300 !important;
}

/* v4.3.5: H3 dentro de sections dark (flow-band, legal-panel, etc) tambem
 * devem ser brancos - estavam pegando a regra geral azul #155FB5. */
section.flow-band h3,
section.flow-band .flow-step h3,
.bf-section--dark h3,
.bf-section--blue h3,
section.cta h3,
section.bf-cta-final h3,
section.bf-article-cta h3,
.legal-panel h3 {
  color: #FFFFFF !important;
}
section.flow-band h3 strong,
section.flow-band .flow-step h3 strong,
.bf-section--dark h3 strong,
.bf-section--blue h3 strong,
section.cta h3 strong,
section.bf-cta-final h3 strong,
section.bf-article-cta h3 strong,
.legal-panel h3 strong {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* v4.3.5: cards de planos com botoes alinhados no rodape (uniformiza altura) */
.plan-band .plan-grid,
.bf-plans-grid {
  align-items: stretch !important;
}
.plan-card,
.bf-plan-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}
.plan-card ul,
.bf-plan-card ul,
.bf-plan-features {
  flex-grow: 1;
}
.plan-card > a.btn,
.plan-card > a.btn-primary,
.plan-card > a.btn-quiet,
.plan-card > a.btn-secondary,
.bf-plan-card > a.btn,
.bf-plan-card > a {
  margin-top: 20px !important;  /* respiro de 20px antes do botao (apos ul ou apos nota) */
  align-self: stretch;
  text-align: center;
}
/* No Enterprise especificamente: <p> nota fica entre ul e botao.
 * Garante 20px entre nota e botao. */
.plan-card > p + a.btn,
.plan-card > p + a {
  margin-top: 20px !important;
}


/* =========================================================================
 * V4.6.0 (2026-05-18): Eyebrow canon profissional - pilula azul translucida
 * Aplica a TODAS as section-eyebrow do site. Em fundo claro vira pilula azul
 * com bg translucido + border sutil; em fundo dark (.bf-dark, .cta, .legal-panel,
 * .flow-band, .bf-article-hero) vira pilula branca translucida.
 * ========================================================================= */

.bf-section-eyebrow,
.bf-eyebrow,
.kicker {
  display: inline-block !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(0, 102, 204, 0.10) !important;
  color: #0066CC !important;
  border: 1px solid rgba(0, 102, 204, 0.20) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  margin-bottom: 18px !important;
  text-decoration: none !important;
}

/* Em sections com fundo escuro (azul, navy) - pilula branca translucida */
.bf-dark .bf-section-eyebrow,
.bf-dark .bf-eyebrow,
.bf-dark .kicker,
section.cta .bf-section-eyebrow,
section.cta .bf-eyebrow,
section.cta .kicker,
.legal-panel .bf-section-eyebrow,
.legal-panel .bf-eyebrow,
.legal-panel .kicker,
section.flow-band .bf-section-eyebrow,
section.flow-band .bf-eyebrow,
section.flow-band .kicker,
.bf-article-hero .bf-section-eyebrow,
.bf-article-hero .bf-eyebrow,
.bf-article-hero .wp-block-post-terms,
.bf-article-cta .bf-section-eyebrow,
.bf-article-cta .bf-eyebrow {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #BFD9F8 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* Center alignment em paragrafos eyebrow centralizados */
p.bf-section-eyebrow.has-text-align-center,
p.bf-eyebrow.has-text-align-center {
  display: inline-block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Container que tem eyebrow centralizado precisa ser text-align center
   para a pilula inline-block ficar centralizada */
.bf-article-body .wp-block-group:has(> p.bf-section-eyebrow.has-text-align-center),
.bf-article-body .wp-block-group:has(> p.bf-eyebrow.has-text-align-center) {
  text-align: center;
}


/* =========================================================================
 * V4.7.0 (2026-05-18): Quadros coloridos no body devem ser alignfull.
 * Regra do Rudy: "que tenham quadros com fundo colorido (azul ou preto)
 * que esses quadros ocupem toda largura da tela, assim como faz o hero".
 *
 * Qualquer .wp-block-cover, .wp-block-group.has-background, ou bloco com
 * classe .bf-dark dentro do .bf-article-body recebe automaticamente
 * comportamento alignfull (edge-to-edge da viewport).
 * ========================================================================= */

.bf-article-body .wp-block-cover,
.bf-article-body .wp-block-group.has-background,
.bf-article-body .wp-block-group.bf-dark,
.bf-article-body .alignfull,
.bf-article-body [class*="bf-section"] {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: max(24px, calc((100vw - 1200px) / 2)) !important;
  padding-right: max(24px, calc((100vw - 1200px) / 2)) !important;
  box-sizing: border-box;
}

/* Texto dentro desses quadros respeita o contentSize 1200 (centralizado) */
.bf-article-body .wp-block-cover > *,
.bf-article-body .wp-block-group.has-background > *,
.bf-article-body .wp-block-group.bf-dark > *,
.bf-article-body .alignfull > *,
.bf-article-body [class*="bf-section"] > * {
  max-width: 1136px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================================
 * Trial badge no hero de /comece-gratis/ (v4.7.6 - 2026-05-19)
 * Pilula ambar destacando "30 dias gratis - sem cartao - cadastro 2 min"
 * Posicao: dentro do .bf-article-hero, antes do H1, via template
 * page-comece-gratis.html. Contraste WCAG AA validado:
 * - Pill bg rgba(245,197,24,0.16) sobre hero #102F89 = legivel
 * - Texto #FFE082 sobre azul-marinho: ratio ~9.5:1 (AAA)
 * - Strong em branco sobre o mesmo bg: ratio ~12.3:1 (AAA)
 * ========================================================================= */
/* Pill alinhado 1:1 com o pill do template CTA (page.html) - atualizado v4.7.34.
   Antes: bg 0.16 / texto branco (via override v4.7.9) / 0.92rem / weight 500.
   Agora: mesmas regras do CTA da reforma -> bg 0.18, border 0.48, texto #FFE082,
   0.82rem, weight 600, strong branco 800. !important vence o override v4.7.9. */
/* O wrap eh um bloco constrained (centra/alinha igual ao H1); o pill (span)
   fica inline-block colado a esquerda do wrap = alinhado com o titulo. */
.bf-signup-main .bf-article-hero .bf-trial-badge-wrap {
  line-height: 1;
}
.bf-signup-main .bf-article-hero .bf-trial-badge {
  display: inline-block;
  margin: 0 !important;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(245, 197, 24, 0.18) !important;
  border: 1px solid rgba(245, 197, 24, 0.48) !important;
  color: #FFE082 !important;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  width: auto;
  max-width: max-content;
}
.bf-signup-main .bf-article-hero .bf-trial-badge strong {
  color: #FFFFFF !important;
  font-weight: 800;
}
@media (max-width: 640px) {
  .bf-signup-main .bf-article-hero .bf-trial-badge {
    font-size: 0.78rem;
    padding: 6px 14px;
  }
}

/* =========================================================================
 * V4.7.7 - 2026-05-19 - FIX VISUAL: contraste WCAG AA + responsividade
 *   1. .bf-trust-pill no body claro: contraste 1:1 -> ~5:1 (WCAG AA)
 *      Resolve: 6 pills R001-R006 invisiveis em /auditor-fiscal/
 *   2. Botao WhatsApp sticky: #25D366 (1.98:1) -> #128C7E (4.76:1, AA)
 *      Resolve: contraste do CTA sticky sitewide
 *   3. Tabelas com overflow-x mobile
 *      Resolve: tabela /planos/ truncada + /tese-passo-a-passo/ mobile
 *   4. Body padding-bottom mobile: 56px -> 88px
 *      Resolve: sticky bar sobreposicao na ultima linha da tabela /planos/
 * ========================================================================= */

/* 1. .bf-trust-pill claro (override do dark padrao herdado de .bf-hero) */
.bf-article-body .bf-trust-pill,
.bf-article-body .wp-block-post-content .bf-trust-pill {
  background: rgba(0, 102, 204, 0.08) !important;
  color: #155FB5 !important;
  border-color: rgba(0, 102, 204, 0.22) !important;
}
.bf-article-body .bf-trust-pill strong {
  color: #0F2C84 !important;
}

/* 2. WhatsApp sticky: #25D366 -> #128C7E (ratio 4.76:1 com #FFFFFF) */
.bf-sticky-cta-btn--wpp {
  background: #128C7E !important;
  border-color: #128C7E !important;
  box-shadow: 0 4px 12px rgba(18, 140, 126, 0.25) !important;
}
.bf-sticky-cta-btn--wpp:hover {
  background: #0E6F66 !important;
  border-color: #0E6F66 !important;
  box-shadow: 0 6px 16px rgba(18, 140, 126, 0.32) !important;
}

/* 3. Tabelas: overflow-x auto (resolve /planos/ + /tese-passo-a-passo/ mobile) */
.bf-article-body .wp-block-table,
.bf-article-body figure.wp-block-table,
.bf-article-body figure[class*="wp-block-table"] {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  .bf-article-body .wp-block-table table,
  .bf-article-body figure.wp-block-table table {
    min-width: 600px;
  }
}

/* 4. Sticky bar: mais respiro no body em mobile (afasta sticky do conteudo) */
@media (max-width: 640px) {
  body {
    padding-bottom: 88px !important;
  }
}

/* =========================================================================
 * V4.7.8 - 2026-05-19 - HEADER MOBILE REDESIGN
 *   Reordenacao mobile: HAMBURGER (esquerda) | BRAND-CENTRALIZADO | CTA (direita)
 *   - "BoxFiscal" texto sempre visivel ate 360px (font reduzido pra caber)
 *   - Drawer mobile com z-index garantido + backdrop overlay
 *   - Drawer fecha ao clicar fora (backdrop)
 * ========================================================================= */

@media (max-width: 640px) {
  /* v4.7.11 (2026-05-19): Layout mobile redesenhado
     HAMBURGER (esq) [20px gap] BRAND-TEXTO (junto ao hambur) ... CTA (dir)
     Logo SVG hidden em mobile - so texto "BoxFiscal" visivel.
     IMPORTANTE: grid-row: 1 em todos os filhos para evitar que o .bf-mega-nav
     (mesmo sendo position:fixed em mobile) gere uma row implicita extra.
  */
  .bf-header-inner {
    display: grid !important;
    grid-template-columns: 40px auto 1fr auto !important;
    grid-template-rows: 40px !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 10px 12px !important;
  }

  /* Hamburger: coluna 1 (esquerda) */
  .bf-menu-toggle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    position: relative !important;
    z-index: 260 !important;
  }

  /* Brand: coluna 2, AO LADO do hamburger com 20px de margem */
  .bf-brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    margin-left: 20px !important;
    font-size: 1rem !important;
    gap: 0 !important;
    white-space: nowrap;
  }

  /* Logo SVG escondido em mobile - so texto "BoxFiscal" */
  .bf-brand .bf-brand-mark {
    display: none !important;
  }

  /* "BoxFiscal" texto sempre visivel em mobile */
  .bf-brand > span:last-child {
    display: inline !important;
    font-size: 1rem !important;
  }

  /* Coluna 3 fica vazia (espacador 1fr empurra CTA pra direita) */

  /* CTA: coluna 4 (direita), compacta */
  .bf-header-cta {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    gap: 6px !important;
  }
  .bf-header-cta .bf-btn-primary {
    padding: 7px 12px !important;
    font-size: 0.78rem !important;
  }

  /* Drawer com z-index acima do sticky bar (~210) - posiciona em grid-row 1
     (position:fixed tira do fluxo visual mas o slot evita row implicita) */
  .bf-mega-nav {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    z-index: 250 !important;
  }
  .bf-mega-nav.is-open {
    z-index: 250 !important;
  }
}

/* Telas muito pequenas (<=360px): BoxFiscal continua visivel mas reduzido.
   Mantemos 20px de margem entre hamburger e BoxFiscal sempre (regra do user). */
@media (max-width: 360px) {
  .bf-brand > span:last-child {
    display: inline !important;
    font-size: 0.88rem !important;
  }
  .bf-header-cta .bf-btn-primary {
    padding: 6px 9px !important;
    font-size: 0.7rem !important;
  }
}

/* Backdrop overlay quando drawer mobile aberto.
   v4.7.12: drawer agora eh fullscreen 100vw em <=640px, entao backdrop
   so faz sentido em 641-1024px (tablet) onde drawer eh lateral. */
@media (min-width: 641px) and (max-width: 1024px) {
  body.bf-drawer-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 240;
    pointer-events: none;
    animation: bfDrawerFadeIn 220ms ease both;
  }
}
@keyframes bfDrawerFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================================================================
 * V4.7.9 - 2026-05-19 - CONTRASTE NO TEMPLATE CTA + TRIAL BADGE
 *   Issues encontrados em /reforma-tributaria/ ao rolar ate o fim:
 *   - <strong> dentro do H2 do CTA herdava azul #155FB5 sobre fundo azul #0066CC
 *     (ratio 1.13:1 - INVISIVEL). Agora forca branco com !important.
 *   - .bf-trial-badge tinha texto amarelo claro sobre amarelo translucido
 *     (ratio 1.26:1). Agora texto branco com sombra para destacar.
 *   - WhatsApp sticky #128C7E real ratio 4.14 (nao 4.76) -> #0E6F66 (ratio 6.09)
 * ========================================================================= */

/* 1. <strong> em TODOS os contextos CTA (template + pattern boxfiscal/cta) */
.bf-article-cta strong,
.bf-article-cta h2 strong,
.bf-article-cta p strong,
section.cta strong,
section.cta h2 strong,
.wp-block-group.cta strong,
.cta-inner strong,
.cta-inner h2 strong {
  color: #FFFFFF !important;
}

/* 2. .bf-trial-badge - texto branco + fundo um pouco mais opaco */
.bf-trial-badge,
.bf-article-cta .bf-trial-badge,
.cta .bf-trial-badge {
  color: #FFFFFF !important;
  background: rgba(245, 197, 24, 0.28) !important;
  border: 1px solid rgba(245, 197, 24, 0.55) !important;
}
.bf-trial-badge strong {
  color: #FFFFFF !important;
}

/* 3. WhatsApp sticky: descer pra #0E6F66 (ratio 6.09:1 - WCAG AA+ folgado) */
.bf-sticky-cta-btn--wpp {
  background: #0E6F66 !important;
  border-color: #0E6F66 !important;
}
.bf-sticky-cta-btn--wpp:hover {
  background: #0A5852 !important;
  border-color: #0A5852 !important;
}

/* =========================================================================
 * V4.7.10 - QA FIXES POS-VALIDACAO REFORMA-TRIBUTARIA (2026-05-19)
 *   Origem: docs/SitePublico/validations/2026-05-19/reforma-tributaria-ibs-cbs-is.md
 *   - RED-1: <strong> em h2#cta-title nao tinha specificity para sobrescrever
 *            color heritage; ID na frente eh necessario
 *   - RED-2: .bf-cta-microcopy span com opacity 0.85 vira ratio 4.46:1 (< AA 4.5)
 *   - RED-3: overflow horizontal em 641-1024px (drawer offscreen sem clipping)
 *   - RED-4: H1 hero font-weight 700 (canon v4.7 light 300; mix com 800 fica
 *            para iteracao templática futura)
 *   - AMBER-5: ghost btn sticky ratio 3.13 -> bg opacity maior
 * ========================================================================= */

/* RED-1: usar ID na frente para sobrescrever heritage de #cta-title strong */
section.cta #cta-title strong,
.cta-inner #cta-title strong {
  color: #FFFFFF !important;
}

/* RED-2: microcopy spans - branco opaco (era rgba(255,255,255,0.85) = ratio 4.46) */
section.cta .bf-cta-microcopy span,
.cta .bf-cta-microcopy span {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* RED-3: estende overflow-x: hidden para 641-1024px (tablets)
   A media query existente @media (max-width: 640px) cobre mobile small */
@media (min-width: 641px) and (max-width: 1024px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* RED-4: H1 do hero em light (300) - canon v4.7. Mix 800 via markup
   fica para rodada futura (templates dedicados em pages pilar) */
.bf-article-hero .bf-article-title,
.bf-article-hero .wp-block-post-title,
.bf-article-hero h1 {
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
}

/* AMBER-5: ghost btn sticky - bg opacity 0.12 -> 0.22, border 0.30 -> 0.45 */
.bf-sticky-cta-btn--ghost {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}
.bf-sticky-cta-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.32) !important;
}

/* =========================================================================
 * V4.7.11 - 2026-05-19 - HAMBURGER MOBILE FIX
 *   Bug detectado: drawer mobile abria mas aparecia VAZIO (fundo branco
 *   com texto branco). Causa: regra "header transparente sobre hero" da
 *   v4.1.2 forcava color:#FFFFFF nos triggers/links via seletor
 *   body:not(.bf-scrolled) .bf-header-wrap .bf-mega-trigger, e o
 *   .bf-mega-nav vive dentro de .bf-header-wrap, entao a regra
 *   aplicava tambem no drawer aberto -> conteudo invisivel.
 *
 *   Fix: dentro do drawer mobile (max 1024px), forcar cores escuras
 *   nos itens, escudo SVG visivel, brand-mark interno no drawer ok.
 *   Bonus: drawer agora ocupa 100vw (era min(360px,92vw)) - mais usavel.
 * ========================================================================= */

@media (max-width: 1024px) {
  /* 1. Drawer fullscreen: ocupa 100% largura e altura - mais area de toque */
  .bf-mega-nav {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 84px 20px 32px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
  }

  /* 2. Itens do drawer com cor escura SEMPRE (sobrescrever color:white
        do header transparente). Especificidade alta usando .bf-mega-nav. */
  .bf-header-wrap .bf-mega-nav .bf-mega-trigger,
  .bf-header-wrap .bf-mega-nav .bf-mega-link,
  body:not(.bf-scrolled) .bf-header-wrap .bf-mega-nav .bf-mega-trigger,
  body:not(.bf-scrolled) .bf-header-wrap .bf-mega-nav .bf-mega-link {
    color: #1f2937 !important;  /* gray-800 - bem legivel */
    font-weight: 600 !important;
    background: transparent !important;
  }

  /* 3. Mega items dentro do drawer (sub-paineis Produto, Solucoes, etc) */
  .bf-header-wrap .bf-mega-nav .bf-mega-item,
  body:not(.bf-scrolled) .bf-header-wrap .bf-mega-nav .bf-mega-item {
    color: #1f2937 !important;
  }
  .bf-header-wrap .bf-mega-nav .bf-mega-item-title,
  body:not(.bf-scrolled) .bf-header-wrap .bf-mega-nav .bf-mega-item-title {
    color: #0F172A !important;  /* gray-900 - titulo destacado */
    font-weight: 600 !important;
  }
  .bf-header-wrap .bf-mega-nav .bf-mega-item-desc,
  body:not(.bf-scrolled) .bf-header-wrap .bf-mega-nav .bf-mega-item-desc {
    color: #475569 !important;  /* slate-600 - texto secundario */
  }

  /* 4. Hover state nos triggers (azul corporativo) */
  .bf-header-wrap .bf-mega-nav .bf-mega-trigger:hover,
  .bf-header-wrap .bf-mega-nav .bf-mega-link:hover,
  .bf-header-wrap .bf-mega-nav .bf-mega-trigger[aria-expanded="true"] {
    color: #0066CC !important;
    background: #EFF6FF !important;
  }

  /* 5. Chevron do trigger - cor escura tb (era branca) */
  .bf-header-wrap .bf-mega-nav .bf-mega-trigger::after {
    border-color: #1f2937 !important;
  }
  .bf-header-wrap .bf-mega-nav .bf-mega-trigger:hover::after,
  .bf-header-wrap .bf-mega-nav .bf-mega-trigger[aria-expanded="true"]::after {
    border-color: #0066CC !important;
  }

  /* 6. CTA dentro do drawer (Entrar + Comece gratis) - voltam visiveis */
  .bf-header-wrap .bf-mega-nav .bf-header-cta {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid #E5E7EB !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .bf-header-wrap .bf-mega-nav .bf-header-cta .bf-link-quiet {
    display: inline-flex !important;
    justify-content: center !important;
    color: #1f2937 !important;
    padding: 12px 16px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
  }
  .bf-header-wrap .bf-mega-nav .bf-header-cta .bf-btn-primary {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
  }

  /* 7. Botao X visual quando drawer aberto: hamburger vira X via transform */
  body.bf-drawer-open .bf-menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  body.bf-drawer-open .bf-menu-toggle span:nth-child(2) {
    opacity: 0;
  }
  body.bf-drawer-open .bf-menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .bf-menu-toggle span {
    transition: transform 220ms ease, opacity 160ms ease;
    transform-origin: center;
  }
  /* Hamburger sempre escuro quando drawer aberto (visivel sobre fundo branco) */
  body.bf-drawer-open .bf-menu-toggle span {
    background: #1f2937 !important;
  }
}

/* Em desktop (>1024px) garantir que a regra v4.7.11 nao vaze */
@media (min-width: 1025px) {
  .bf-mega-nav {
    width: auto !important;
  }
}

/* =========================================================================
 * v4.7.14 (2026-05-19): Mobile-friendly do "Como suas notas aparecem"
 *
 * A tabela bf-docs-mock (grid 8 colunas: tipo/numero/emit/data/valor/etiq/
 * status/acoes) nao cabe em mobile - mesmo com o fallback @media (<=1024px)
 * que vira 1 coluna, ficava feio (rows enormes, sem leitura, scroll
 * vertical interminavel). Em <=768px, ocultamos a tabela inteira e
 * mostramos um card resumo com 4 bullets explicando o que o usuario veria
 * na tela real.
 * ========================================================================= */

/* Mobile-only card escondido em desktop */
.bf-docs-mobile-card { display: none; }

@media (max-width: 768px) {
  /* Esconde a simulacao visual completa em mobile */
  .bf-docs-mock { display: none !important; }

  /* Mostra o resumo textual */
  .bf-docs-mobile-card {
    display: block;
    background: #FFFFFF;
    border: 1px solid var(--bf-gray-200);
    border-radius: 12px;
    padding: 24px 20px;
    box-shadow: var(--bf-shadow-sm);
  }
  .bf-docs-mobile-lede {
    margin: 0 0 16px;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--bf-gray-800);
  }
  .bf-docs-mobile-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .bf-docs-mobile-list li {
    position: relative;
    padding: 12px 14px 12px 38px;
    background: var(--bf-gray-50);
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--bf-gray-700);
  }
  .bf-docs-mobile-list li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 18px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bf-blue-primary);
  }
  .bf-docs-mobile-list li strong {
    color: var(--bf-gray-900);
    font-weight: 700;
  }
  .bf-docs-mobile-foot {
    margin: 0;
    padding: 12px 14px;
    background: var(--bf-blue-50);
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--bf-blue-primary-dark);
  }
}

/* =========================================================================
 * v4.7.14 (2026-05-19): Botao "voltar ao topo" (fab redondo bottom-right)
 *
 * Aparece apos scrollY > 600. Senta ACIMA da sticky CTA bar (que usa
 * --bf-sticky-cta-h: 64px desktop / 88px mobile), entao precisa de
 * offset compensado. Respeita prefers-reduced-motion no smooth scroll.
 * ========================================================================= */

.bf-back-top {
  position: fixed;
  right: 20px;
  bottom: calc(var(--bf-sticky-cta-h, 64px) + 16px);
  z-index: 45; /* acima da sticky (40), abaixo do drawer/modal */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--bf-blue-primary);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease, background 180ms ease, visibility 0s linear 220ms;
}
.bf-back-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease, background 180ms ease, visibility 0s;
}
.bf-back-top:hover,
.bf-back-top:focus-visible {
  background: var(--bf-blue-primary-dark);
  transform: translateY(-2px);
  outline: none;
}
.bf-back-top:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.35), 0 6px 18px rgba(15, 23, 42, 0.18);
}
.bf-back-top svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 640px) {
  .bf-back-top {
    right: 14px;
    width: 42px;
    height: 42px;
    bottom: calc(var(--bf-sticky-cta-h, 88px) + 12px);
  }
}

@media print {
  .bf-back-top { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bf-back-top,
  .bf-back-top.is-visible {
    transition: opacity 120ms linear, visibility 0s;
    transform: none !important;
  }
}

/* =========================================================================
 * v4.7.14 (2026-05-19): .plan-grid responsivo (home /planos/)
 *
 * O pattern boxfiscal/plans tinha inline style="grid-template-columns:
 * repeat(3, 1fr)" que vencia a media query do main.css (linha 2372:
 * @media (<=640px) { .plan-grid { grid-template-columns: 1fr; } }) e
 * forcava 3 cards lado a lado em qualquer viewport - quebrando mobile.
 *
 * Inline removida no pattern. Aqui defino o grid em 3 tiers explicitos:
 *   - desktop  (>=1025px): 3 cols
 *   - tablet   (641-1024): 2 cols (herdado do main.css, reforcado aqui)
 *   - mobile   (<=768px):  1 col (ampliado de 640 para 768 - alinha com
 *                                  resto do site que adota 768 como
 *                                  breakpoint de mobile)
 * ========================================================================= */

@media (min-width: 1025px) {
  .plan-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .plan-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  .plan-grid { grid-template-columns: 1fr !important; }
}

/* =========================================================================
 * v4.7.16 (2026-05-19): Menu "Recursos" com itens em forma de CARD
 *
 * O mega-panel "Recursos" (#bf-mega-produto) tinha 6 itens como links
 * simples (so hover bg). Agora cada item vira um card com borda, fundo
 * suave, sombra e hover lift. Escopo restrito a .bf-mega-grid--cards /
 * .bf-mega-panel--cards (nao afeta Segmentos/Conteudos/Empresa).
 * ========================================================================= */
@media (min-width: 1025px) {
  .bf-mega-panel--cards { min-width: 660px; }
  .bf-mega-grid--cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
.bf-mega-grid--cardlist { gap: 10px; }

/* v4.7.20: grid de 3 cards (.bf-cards-3) - 3 col desktop, 1 col <=768
 * (evita o layout assimetrico 2+1 em tablet). Usado em /kit-contador-mensal/. */
@media (min-width: 769px) {
  .bf-docs-helpers.bf-cards-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .bf-docs-helpers.bf-cards-3 { grid-template-columns: 1fr; }
}

/* =========================================================================
 * v4.7.21: grid de STATUS de integracao contabil (substitui a tabela na
 * /integracao-dominio/). Cards com badge de status; empilha em 1 coluna no
 * mobile (tabela nao funcionava bem em telas pequenas).
 * ========================================================================= */
.bf-int-status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 8px 0;
}
.bf-int-status-card {
  border: 1px solid var(--bf-gray-200);
  border-radius: 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.bf-int-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bf-int-status-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bf-gray-900);
}
.bf-int-status-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--bf-gray-700);
  line-height: 1.5;
}
.bf-int-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
.bf-int-badge--ok { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.bf-int-badge--soon { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
@media (max-width: 640px) {
  .bf-int-status-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
 * v4.7.22 (2026-05-20): cards das regras do Auditor (R001-R006) na
 * /auditor-fiscal/. Reaproveita .bf-auditor-grid + .bf-auditor-rule +
 * .bf-rule-code (ja no main.css). Aqui acrescentamos:
 *   - .bf-rule-head: linha com o codigo da regra + badge de severidade
 *   - badges de severidade sobre a base .bf-int-badge: --high (Alta/
 *     vermelho), --med (Media/ambar) e --info (Informativo/azul).
 * Cores em par texto/fundo com contraste >= 4.5:1 (WCAG 2.2 AA).
 * ========================================================================= */
.bf-rule-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.bf-rule-head .bf-rule-code { margin-bottom: 0; }
.bf-int-badge--high { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.bf-int-badge--med  { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.bf-int-badge--info { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }

/* =========================================================================
 * v4.7.24 (2026-05-20): wrapper de rolagem horizontal para tabela larga
 * (.bf-table-scroll) usado na /redes-multi-loja/. O overflow-x inline e
 * removido pelo KSES no save do post_content, entao a regra vive aqui.
 * Garante que uma tabela com conteudo longo role dentro do container em
 * vez de quebrar o layout da pagina no mobile.
 * ========================================================================= */
.bf-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================================
 * v4.7.25 (2026-05-20): .bf-auditor-grid usa minmax(280px,1fr) (main.css).
 * Em telas estreitas (<=600px) o container fica < 280px e os cards
 * .bf-auditor-rule extravasam o wrapper. Forca 1 coluna no mobile.
 * Afeta /auditor-fiscal/, /gestao-de-documentos-fiscais/ e /recursos/.
 * ========================================================================= */
@media (max-width: 600px) {
  .bf-auditor-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
 * v4.7.26 (2026-05-20): cards de "Conteudo relacionado" com imagem em
 * destaque (estilo da listagem do blog / .bf-post-card). Card inteiro
 * clicavel. Usado em posts de glossario (ex: /tese-do-seculo/). Classes
 * (nao inline) porque o KSES remove aspect-ratio/object-fit/overflow de
 * style inline no post_content.
 * ========================================================================= */
.bf-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 8px 0;
}
.bf-related-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bf-gray-200);
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  text-decoration: none;
  box-shadow: var(--bf-shadow-xs);
  transition: transform var(--bf-d-base) var(--bf-ease),
              box-shadow var(--bf-d-base), border-color var(--bf-d-base);
}
.bf-related-card:hover {
  transform: translateY(-3px);
  border-color: var(--bf-blue-bright);
  box-shadow: var(--bf-shadow-xs), var(--bf-shadow-blue);
}
.bf-related-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin: 0;
  background: var(--bf-gray-100);
}
.bf-related-card-body { padding: 14px 16px 18px; }
.bf-related-cat {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bf-blue-primary);
  background: var(--bf-blue-50);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.bf-related-card h3 {
  font-size: 1rem;
  line-height: 1.3;
  color: var(--bf-gray-900);
  margin: 0;
  font-weight: 600;
}
@media (max-width: 768px) {
  .bf-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .bf-related-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
 * v4.7.27 (2026-05-20): tabela comparativa de planos responsiva
 * (.bf-plan-compare) usada em /planos/. Desktop: tabela com header azul,
 * check verde / traco mutado, zebra, linhas de limite/preco destacadas.
 * Mobile (<=768px): cada linha vira um card empilhado por recurso, com o
 * nome do plano injetado via CSS ::before por coluna (Inicial /
 * Profissional / Enterprise) — sem depender de data-* (que o KSES remove).
 * ========================================================================= */
.bf-plan-compare-wrap { margin: 8px 0; }
/* /planos/ (v4.7.29): remove o vão em branco entre a band de planos e a
 * seção "Compare os planos". A band tem padding-bottom 96px (ok na home,
 * mas vira void antes do H2 aqui). Escopo .bf-page-main não afeta a home. */
/* /planos/ (v4.7.32): a faixa azul-clara (plan-band) deve encostar no hero
 * navy SEM faixa branca. O branco era o padding-top do .bf-article-body (56px)
 * aparecendo acima da band. Em vez de adivinhar margem negativa (frágil entre
 * viewports), zera-se o padding-top do body só na page 35 e dá-se à band um
 * padding-top próprio. Resultado: azul-claro flush no navy em qualquer largura. */
body.page-id-35 .bf-article-body { padding-top: 0 !important; }
body.page-id-35 section.plan-band { margin-top: 0; padding-top: 40px; padding-bottom: 40px; }
.bf-page-main section.plan-band + h2 { margin-top: 28px; }
/* /planos/ (v4.7.30): a pill "Planos e preços" do pattern de planos é
 * redundante com o H1 do hero ("Planos do BoxFiscal..."). Oculta só aqui
 * (a home, em .bf-main, mantém a eyebrow). */
.bf-page-main section.plan-band .kicker { display: none !important; }
.bf-plan-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #FFFFFF;
  border: 1px solid var(--bf-gray-200);
  border-radius: 14px;
  overflow: hidden;
  font-size: 0.93rem;
}
.bf-plan-compare thead th {
  background: var(--bf-blue-primary);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 14px 16px;
  text-align: center;
}
.bf-plan-compare thead th:first-child { text-align: left; }
.bf-plan-compare td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bf-gray-100);
  text-align: center;
  color: var(--bf-gray-700);
  vertical-align: middle;
}
.bf-plan-compare td:first-child { text-align: left; color: var(--bf-gray-800); }
.bf-plan-compare td small { color: var(--bf-gray-500); font-size: 0.8rem; display: block; }
.bf-plan-compare tbody tr:nth-child(even) td { background: var(--bf-gray-50); }
.bf-plan-compare tbody tr:last-child td { border-bottom: 0; }
.bf-plan-compare .yes { color: #047857; font-weight: 800; }
.bf-plan-compare .no { color: #6B7280; }
.bf-plan-compare tr.bf-plan-row-em td { background: var(--bf-blue-50) !important; font-weight: 600; color: var(--bf-gray-900); }
.bf-plan-compare tr.bf-plan-row-price td { background: var(--bf-blue-50) !important; }
.bf-plan-compare tr.bf-plan-row-price td strong { color: var(--bf-blue-primary); font-size: 1.08rem; }

@media (max-width: 768px) {
  .bf-plan-compare, .bf-plan-compare thead, .bf-plan-compare tbody,
  .bf-plan-compare tr, .bf-plan-compare td { display: block; width: 100%; }
  .bf-plan-compare { border: 0; background: transparent; border-radius: 0; }
  .bf-plan-compare thead { display: none; }
  .bf-plan-compare tbody tr {
    border: 1px solid var(--bf-gray-200);
    border-radius: 12px;
    margin-bottom: 14px;
    padding: 4px 16px 8px;
    background: #FFFFFF;
    box-shadow: var(--bf-shadow-xs);
  }
  .bf-plan-compare tbody tr:nth-child(even) td,
  .bf-plan-compare tr.bf-plan-row-em td,
  .bf-plan-compare tr.bf-plan-row-price td { background: transparent !important; }
  .bf-plan-compare td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    text-align: right;
    padding: 9px 0;
    border-bottom: 1px solid var(--bf-gray-100);
  }
  .bf-plan-compare td:first-child {
    text-align: left;
    font-weight: 700;
    color: var(--bf-gray-900);
    border-bottom: 2px solid var(--bf-gray-200);
    margin-bottom: 4px;
    padding: 10px 0;
  }
  .bf-plan-compare td:last-child { border-bottom: 0; }
  .bf-plan-compare td small { display: inline; }
  .bf-plan-compare td:not(:first-child)::before {
    font-weight: 600;
    color: var(--bf-gray-600);
    text-align: left;
    margin-right: auto;
  }
  .bf-plan-compare td:nth-child(2)::before { content: "Inicial"; }
  .bf-plan-compare td:nth-child(3)::before { content: "Profissional"; }
  .bf-plan-compare td:nth-child(4)::before { content: "Enterprise"; }
}
.bf-mega-grid--cards .bf-mega-item,
.bf-mega-grid--cardlist .bf-mega-item {
  border: 1px solid var(--bf-gray-200);
  border-radius: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.bf-mega-grid--cards .bf-mega-item:hover,
.bf-mega-grid--cardlist .bf-mega-item:hover {
  transform: translateY(-2px);
  border-color: var(--bf-blue-bright);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
  background: var(--bf-blue-50);
}

/* =========================================================================
 * v4.7.18 (2026-05-19): elimina a faixa branca de 24px entre o flow-band
 * (band escura) e a secao seguinte (Planos). O block-gap do Gutenberg
 * aplica margin-top:24px em toda secao; entre duas secoes claras some, mas
 * logo apos a band escura vira faixa branca visivel. Zeramos a margem da
 * secao que segue qualquer band escura (flow-band / cta).
 * ========================================================================= */
.bf-main > .flow-band + section,
.bf-main > section.flow-band + section,
.bf-main > .cta + section,
.bf-main > section.cta + section {
  margin-top: 0 !important;
}

/* =========================================================================
 * V4.7.34 - 2026-05-20 - /comece-gratis/ reorganizada e responsiva
 *   Body vira grid 2 colunas: aside de beneficios (sticky no desktop) +
 *   form em card branco. Empilha <=900px. Paddings menores no mobile.
 *   O pill do hero foi alinhado ao CTA da reforma (ver bloco trial badge).
 * ========================================================================= */

/* Fundo claro pra o card branco do form se destacar (override do .bf-article-body branco) */
.bf-signup-main .bf-signup-body { background: var(--bf-gray-50, #F9FAFB); }

/* Grid 2 colunas */
.bf-signup-layout {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.bf-signup-layout > * { margin-top: 0; margin-bottom: 0; }

/* Aside de beneficios - sticky no desktop pra acompanhar o form longo */
.bf-signup-aside { position: sticky; top: 96px; }
.bf-signup-aside-title {
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--bf-gray-900, #1F2937);
  margin: 0 0 26px;
}
.bf-signup-aside-title strong { font-weight: 800; color: #155FB5; }

.bf-signup-benefits {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 20px;
}
.bf-signup-benefits li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}
.bf-signup-benefit-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 102, 204, 0.08);
  font-size: 1.25rem;
  line-height: 1;
}
.bf-signup-benefits li > span:last-child {
  color: var(--bf-gray-700, #4B5563);
  font-size: 0.95rem;
  line-height: 1.5;
}
.bf-signup-benefits li strong {
  display: block;
  color: var(--bf-gray-900, #1F2937);
  font-weight: 700;
  margin-bottom: 2px;
}

.bf-signup-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-top: 22px;
  border-top: 1px solid var(--bf-gray-200, #E5E7EB);
}
.bf-signup-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #155FB5;
}
.bf-signup-trust span::before {
  content: "";
  display: inline-block;
  width: 13px; height: 7px;
  border-left: 2px solid #1E88E5;
  border-bottom: 2px solid #1E88E5;
  transform: rotate(-45deg);
  margin-top: -3px;
}

/* Form vira card branco (post-content e filho direto do grid) */
.bf-signup-layout > .wp-block-post-content {
  background: #FFFFFF;
  border: 1px solid var(--bf-gray-200, #E5E7EB);
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 10px 30px rgba(16, 47, 137, 0.06);
}
.bf-signup-layout .bf-signup-form { max-width: 100%; }

/* Microcopy final do form centralizada dentro do card */
.bf-signup-layout > .wp-block-post-content > p:last-child { margin-bottom: 0; }

/* Responsivo */
@media (max-width: 900px) {
  .bf-signup-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bf-signup-aside { position: static; top: auto; }
}
@media (max-width: 640px) {
  .bf-signup-layout > .wp-block-post-content { padding: 22px 18px; }
  .bf-signup-benefits { gap: 16px; }
  .bf-signup-benefit-ic { width: 40px; height: 40px; font-size: 1.15rem; }
  /* Inputs >= 16px no mobile: evita o zoom automatico do iOS ao focar o campo */
  .bf-signup-main .bf-signup-form .bf-signup-field input { font-size: 16px; }
}

/* =========================================================================
 * V4.7.40 - 2026-05-20 - FIX: icone do brand sumindo no FOOTER em mobile.
 *   A regra do header mobile redesign (.bf-brand .bf-brand-mark{display:none})
 *   nao estava escopada ao header e tambem escondia o escudo do footer no
 *   mobile. Tambem vazava .bf-brand{gap:0; margin-left:20px}. Aqui restauramos
 *   o brand do footer (icone visivel + gap correto + texto) sem mexer no header.
 * ========================================================================= */
@media (max-width: 640px) {
  .bf-footer .bf-brand .bf-brand-mark {
    display: inline-flex !important;
  }
  .bf-footer .bf-brand {
    gap: 10px !important;
    margin-left: 0 !important;
  }
  .bf-footer .bf-brand > span:last-child {
    display: inline !important;
  }
}
@media (max-width: 380px) {
  /* a regra global <=380px esconde o texto do logo no header; no footer mantemos */
  .bf-footer .bf-brand > span:last-child { display: inline !important; }
}

/* =========================================================================
 * V4.7.41 - 2026-05-20 - MENU MOBILE drill-down (estilo SAP.com)
 *   O drawer (.bf-md) eh construido por menu.js a partir do .bf-mega-nav.
 *   Nivel raiz lista os itens com chevron ">"; tocar num item com submenu
 *   desliza o submenu da direita, com botao "voltar". Head: brand + fechar.
 *   Foot: Entrar + Comece gratis. O nav antigo (accordion) eh ocultado no
 *   mobile assim que o JS marca <html class="bf-md-ready"> (fallback seguro:
 *   sem JS, o menu antigo continua funcionando).
 * ========================================================================= */

/* Oculta o drawer antigo no mobile quando o novo ja foi montado */
@media (max-width: 1024px) {
  html.bf-md-ready .bf-mega-nav { display: none !important; }
}
/* O novo drawer nunca aparece no desktop */
@media (min-width: 1025px) {
  .bf-md { display: none !important; }
}

.bf-md {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.bf-md[hidden] { display: none; }

.bf-md__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  transition: opacity 280ms ease;
}
.bf-md.is-open .bf-md__backdrop { opacity: 1; }

.bf-md__panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: 12px 0 44px rgba(15, 23, 42, 0.20);
  transform: translateX(-100%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.bf-md.is-open .bf-md__panel { transform: translateX(0); }

/* HEAD */
.bf-md__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #E5E7EB;
}
.bf-md__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.1rem;
  color: #0F172A;
  text-decoration: none;
  letter-spacing: -0.02em;
}
.bf-md__brand-mark {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0066CC;
  border: 1px solid #0052A3;
  border-radius: 8px;
  color: #FFFFFF;
}
.bf-md__brand-mark svg { width: 18px; height: 18px; }
.bf-md__close {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  color: #1F2937;
  cursor: pointer;
  transition: background 160ms ease;
}
.bf-md__close svg { width: 22px; height: 22px; }
.bf-md__close:hover { background: #F3F4F6; }

/* VIEWPORT - submenus deslizam por dentro */
.bf-md__viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}
.bf-md__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}
.bf-md__list--root {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bf-md__sub {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 8px;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}
.bf-md__sub.is-active { transform: translateX(0); pointer-events: auto; }

/* ROWS */
.bf-md__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 14px 20px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #F1F5F9;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0F172A;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bf-md__row:hover,
.bf-md__row:focus-visible,
.bf-md__row:active { background: #EFF6FF; color: #0066CC; outline: none; }
.bf-md__chev { width: 20px; height: 20px; color: #94A3B8; flex: 0 0 auto; }
.bf-md__row--parent:hover .bf-md__chev,
.bf-md__row--parent:active .bf-md__chev { color: #0066CC; }

/* BACK */
.bf-md__back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: #F8FAFC;
  border: 0;
  border-bottom: 1px solid #E5E7EB;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0066CC;
  text-align: left;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 1;
}
.bf-md__chev-back { width: 20px; height: 20px; flex: 0 0 auto; }

/* SUB ROWS (titulo + descricao) */
.bf-md__row--sub {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 0;
}
.bf-md__sub-title { font-size: 1rem; font-weight: 600; color: #0F172A; }
.bf-md__sub-desc { font-size: 0.85rem; font-weight: 400; color: #64748B; line-height: 1.4; }
.bf-md__row--sub:hover .bf-md__sub-title,
.bf-md__row--sub:active .bf-md__sub-title { color: #0066CC; }

/* FOOT */
.bf-md__foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #E5E7EB;
  background: #FFFFFF;
}
.bf-md__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid #D1D5DB;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  color: #1F2937;
  text-decoration: none;
}
.bf-md__login:hover { background: #F3F4F6; }
.bf-md__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 16px;
  border-radius: 999px;
  background: #F5C518;
  color: #1F2937;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(212, 158, 7, 0.18);
}
.bf-md__cta:hover { background: #D49E07; }

@media (prefers-reduced-motion: reduce) {
  .bf-md__panel,
  .bf-md__sub,
  .bf-md__backdrop { transition: none !important; }
}