@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,400;6..144,500;6..144,700&family=Google+Sans+Code:wght@400;500&display=swap');
/* ConsentMode — camada final das páginas públicas no padrão visual dos sites do Google (Material 3):
   superfícies tonais sem borda colorida, títulos sólidos (sem degradê), rótulos sem traço, botões em pílula. */
:root {
  --g-ink: #1f1f1f; --g-ink-2: #444746; --g-ink-3: #5e5e5e;
  --g-blue: #0b57d0; --g-blue-hover: #0842a0; --g-blue-cont: #d3e3fd; --g-on-blue-cont: #041e49;
  --g-surf: #ffffff; --g-surf-low: #f8fafd; --g-surf-1: #f0f4f9; --g-surf-2: #e9eef6; --g-line: #e1e3e1; --g-outline: #747775;
  --g-green-cont: #c4eed0; --g-on-green-cont: #072711; --g-yellow-cont: #ffdf99; --g-on-yellow-cont: #251a00; --g-red-cont: #ffdad6; --g-on-red-cont: #410002;
}

/* Títulos: uma cor só, peso médio, sem degradê nem segunda linha colorida */
.cf-grad, h1 strong, h1 em, h1 span:not(.ba-sr):not(.cm-lang-sr) { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: inherit !important; font-weight: inherit; font-style: normal; }
.cf-hero h1, .page-hero h1, main > section h1, .hero h1 { color: var(--g-ink); font-weight: 500; letter-spacing: -.02em; }
.cf-head h2, .cf h2, .section-head h2, main h2 { color: var(--g-ink); font-weight: 500; letter-spacing: -.01em; }

/* Rótulos acima dos títulos: sem o traço colorido, texto simples */
.eyebrow i, .cf-eyebrow i, .eyebrow::before, .cf-eyebrow::before { display: none !important; }
.eyebrow, .cf-eyebrow, .cf-head .cf-eyebrow { gap: 0 !important; letter-spacing: .01em !important; text-transform: none !important; font: 500 14px/1.4 Roboto, Arial, sans-serif !important; color: var(--g-blue) !important; }

/* Boxes: superfície tonal, cantos de 24 px, sem borda colorida em cima, sem sombra */
.cf-card, .cf-levels article, .cf-mini, .cf-steps li, .learning-card, .art-card, .card, .feature-card, .info-card, .trust-card, .metric-card, .material-card, .ba-card, .ba-why, .ba-steps li, .cf-faq details {
  border: 0 !important; border-top: 0 !important; box-shadow: none !important; background: var(--g-surf-1) !important; border-radius: 24px !important;
}
.cf-card:hover, .learning-card:hover, .ba-card:hover { transform: none !important; background: var(--g-surf-2) !important; }
.c-red, .c-yellow, .c-blue, .c-green, .lv-red, .lv-yellow, .lv-blue { border-top: 0 !important; box-shadow: none !important; }
.cf-icon { border-radius: 50% !important; width: 48px !important; height: 48px !important; }
.c-red .cf-icon { background: var(--g-red-cont) !important; color: #b3261e !important; }
.c-yellow .cf-icon { background: var(--g-yellow-cont) !important; color: #6d4c00 !important; }
.c-blue .cf-icon { background: var(--g-blue-cont) !important; color: var(--g-blue) !important; }
.c-green .cf-icon { background: var(--g-green-cont) !important; color: #146c2e !important; }
.cf-card h3, .cf-levels h3, .learning-card h3 { color: var(--g-ink); font-weight: 500; }
.cf-card p, .cf-levels p, .cf-levels small, .learning-card p, .cf-mini p { color: var(--g-ink-2) !important; }

/* Seções alternadas: fundo branco e cinza-azulado bem claro, como as páginas do Google */
.cf-soft::before { background: var(--g-surf-low) !important; }
.cf-soft .cf-card, .cf-soft .cf-levels article, .cf-soft .cf-mini, .cf-soft .cf-steps li, .cf-soft .cf-faq details { background: var(--g-surf) !important; }

/* Números do topo: blocos tonais separados */
.cf-stats { border: 0 !important; gap: 12px !important; background: none !important; border-radius: 0 !important; overflow: visible !important; }
.cf-stats div { border: 0 !important; background: var(--g-surf-1); border-radius: 24px; }
.cf-stats b { color: var(--g-ink) !important; font-weight: 500 !important; }
.cf-stats span { color: var(--g-ink-2) !important; }

/* Etapas numeradas: círculo tonal */
.cf-n { border-radius: 50% !important; background: var(--g-blue-cont) !important; color: var(--g-on-blue-cont) !important; }
.cf-n.is-green { background: var(--g-green-cont) !important; color: var(--g-on-green-cont) !important; }
.cf-n.is-yellow { background: var(--g-yellow-cont) !important; color: var(--g-on-yellow-cont) !important; }

/* Ilustração do topo: moldura lisa */
.cf-art-frame { background: var(--g-surf-1) !important; border: 0 !important; box-shadow: none !important; }
.cf-float { border: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 8px 3px rgba(0,0,0,.06) !important; }
.cf-kicker { background: var(--g-surf-1) !important; border: 0 !important; color: var(--g-ink-2) !important; }

/* Chamada final: faixa tonal azul, sem degradê e sem círculo decorativo */
.cf-final { background: var(--g-blue-cont) !important; color: var(--g-on-blue-cont) !important; }
.cf-final::after { display: none !important; }
.cf-final h2, .cf-final p { color: var(--g-on-blue-cont) !important; opacity: 1 !important; }
.cm-btn.cf-onblue { background: var(--g-blue) !important; color: #fff !important; border-color: var(--g-blue) !important; }
.cm-btn.cf-onblue:hover { background: var(--g-blue-hover) !important; }

/* Botões: pílula; principal azul com texto branco sempre legível; secundário com contorno */
.cm-btn, .button, .cf-big { border-radius: 999px !important; }
.cm-btn.is-primary, .cm-btn.is-primary.cf-big, a.button:not(.outline):not(.quiet), button.button:not(.outline):not(.quiet), .button.dark { background: var(--g-blue) !important; border-color: var(--g-blue) !important; color: #fff !important; }
.cm-btn.is-primary:hover, a.button:not(.outline):not(.quiet):hover { background: var(--g-blue-hover) !important; color: #fff !important; }
.cf-ghost, .button.outline, .cm-btn:not(.is-primary):not(.cf-onblue) { background: #fff !important; color: var(--g-blue) !important; border: 1px solid var(--g-outline) !important; }
.cf-ghost:hover, .button.outline:hover, .cm-btn:not(.is-primary):not(.cf-onblue):hover { background: #f3f6fc !important; }
.button.quiet { color: var(--g-blue) !important; }

/* Guia Better Ads: ilustrações em fundo liso */
.ba-fig { background: var(--g-surf-2) !important; border-bottom: 0 !important; }
.ba-swap-art { background: var(--g-surf-1) !important; }
.ba-det-fig { background: var(--g-surf-1) !important; border: 0 !important; }
.ba-facts > div, .ba-det-cols section { border: 0 !important; background: var(--g-surf-1) !important; border-radius: 24px !important; box-shadow: none !important; }
.ba-pn { border: 0 !important; background: var(--g-surf-1) !important; border-radius: 24px !important; }
.ba-nav a { border: 1px solid var(--g-outline) !important; background: #fff !important; color: var(--g-ink) !important; border-radius: 8px !important; }
.ba-nav a:hover { background: var(--g-surf-1) !important; }

/* Faixa "Confere a configuração e as regras de" (nomes das plataformas) */
.cfp { margin: 40px 0 0; text-align: center; }
.cfp p { margin: 0 0 16px; font: 500 14px Roboto, sans-serif; color: #444746; }
.cfp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.cfp li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: #f0f4f9; color: #1f1f1f; font: 500 15px Roboto, sans-serif; }
.cfp-dot { width: 10px; height: 10px; border-radius: 50%; }


/* ---------- Tipografia e espaçamento no padrão web.dev (Google Sans, textos maiores, mais respiro) ---------- */
body { font-family: "Google Sans Flex", "Google Sans", Roboto, Arial, sans-serif !important; color: #1f1f1f; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body *:not(code):not(pre):not(kbd):not(samp):not(svg):not(svg *) { font-family: inherit !important; }
code, pre, kbd, samp, .cm2-code pre, .cm2-sinal-top code, .cm2-mock-linhas span { font-family: "Google Sans Code", "Roboto Mono", monospace !important; }
.cf, .cm2, main.ba, .ba-det { max-width: 1312px !important; padding-left: 48px !important; padding-right: 48px !important; }
.cm-pub { min-height: 72px; }
.cm-pub nav a { font-size: 16px !important; font-weight: 400 !important; color: #444746; }
.cm-pub nav a[aria-current="page"] { color: #0b57d0; font-weight: 500 !important; }
/* títulos principais grandes */
.cf-hero h1, .cm2-hero h1, .ba-det-txt h1, .page-hero h1, .hero h1, main > section:first-of-type h1, .legal h1, .auth-legal h1 {
  font-size: clamp(40px, 5.4vw, 72px) !important; line-height: 1.08 !important; font-weight: 500 !important; letter-spacing: -.025em !important; }
/* títulos de seção */
.cf-head h2, .cm2-split h2, .cm2-sec > h2, .section-head h2, .ba-hero h2, .ba-did h2, main > section > h2, main > section > div > h2, .cf-split h2 {
  font-size: clamp(30px, 3.4vw, 44px) !important; line-height: 1.14 !important; font-weight: 500 !important; letter-spacing: -.015em !important; }
.cf-card h3, .cm2-quem h3, .cm2-sinais h3, .cm2-erros h3, .cm2-tempo h3, .learning-card h3, .ba-card h4 { font-size: 21px !important; line-height: 1.3 !important; font-weight: 500 !important; }
/* textos de leitura maiores */
.cf-lead, .cm2-lead, .lead, .ba-det-lead, .page-hero p, .hero p { font-size: 21px !important; line-height: 1.6 !important; color: #444746 !important; }
.cf-head p, .cm2-p, .ba-did-txt p, .cf-split p, .cm2-caso-ab p, .cm2-nota, .cm2-caso-txt, .legal section p { font-size: 18px !important; line-height: 1.7 !important; }
.cf-card p, .cm2-quem p, .cm2-sinais p, .cm2-erros p, .cm2-tempo p, .learning-card p, .cf-faq p, .cf-steps p, .ba-did-pn li, .cm2-pn li, .cm2-lista li, .cm2-passos span, .cf-checks li { font-size: 17px !important; line-height: 1.65 !important; }
.cf-faq summary { font-size: 18px !important; }
/* mais respiro entre seções */
.cf-sec, .cm2-sec { padding-top: 96px !important; padding-bottom: 96px !important; }
.cf-hero, .cm2-hero { padding-top: 80px !important; gap: 72px !important; }
.cf-grid, .cm2-quem, .cm2-sinais, .cm2-erros, .ba-grid { gap: 24px !important; }
.cf-card, .cm2-quem article, .cm2-sinais article, .cm2-erros article, .learning-card { padding: 32px !important; }
.cm-btn, .button { font-weight: 500 !important; letter-spacing: .01em; }
.cf-big, .cm2-ctas .cm-btn { height: 52px !important; padding: 0 28px !important; font-size: 16px !important; }
@media (max-width: 760px) {
  .cf, .cm2, main.ba, .ba-det { padding-left: 16px !important; padding-right: 16px !important; }
  .cf-sec, .cm2-sec { padding-top: 56px !important; padding-bottom: 56px !important; }
  .cf-hero, .cm2-hero { padding-top: 40px !important; gap: 32px !important; }
  .cf-lead, .cm2-lead, .lead, .ba-det-lead { font-size: 18px !important; }
}

/* cabeçalho público: itens numa linha só; abaixo de 1180 px vira o botão de menu */
.cm-pub nav a { white-space: nowrap; }
.cm-pub .cm-brand { flex: none; }
@media (max-width: 1180px) { .cm-pub nav { display: none; } .cm-pub .cm-btn { margin-left: auto; } }

/* cabeçalho público no celular: com o login feito, o botão do painel cabe ao lado do menu em todos os idiomas */
@media (max-width: 480px) {
  .cm-pub { gap: 8px; }
  .cm-pub .cm-menu-btn { flex: none; }
  .cm-pub .cm-btn { flex: 0 1 auto; min-width: 0; padding: 0 12px; display: block; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Refinamento editorial (05/11): texto sem hifenização no meio das palavras, títulos equilibrados e ilustrações com respiro, no padrão das páginas do Google */
main :is(p, li, h1, h2, h3, h4, dd, dt, figcaption, summary, span, b, strong, a, td, th, label, blockquote) { -webkit-hyphens: manual !important; hyphens: manual !important; overflow-wrap: break-word; }
main :is(h1, h2, h3, h4) { text-wrap: balance; }
main :is(p, li, figcaption, dd) { text-wrap: pretty; }
/* telas de exemplo dos regulamentos: o celular não encosta no topo nem no pé do quadro */
.gx-art { padding: 32px 24px !important; }
.gx-art svg { height: 216px !important; }
/* formatos: desktop e celular com quadros da mesma altura, legendas alinhadas */
.fmx-telas { align-items: start !important; }
.fmx-art { flex: none !important; height: 320px; min-height: 0 !important; padding: 28px !important; }
.fmx-art svg { max-height: 264px !important; }
.fmx-tela.is-cel .fmx-art svg { height: 264px !important; }
/* topo dos formatos: desktop e celular centralizados no quadro */
.fm-duo { align-items: center !important; align-content: center; padding: 40px 36px !important; }
@media (max-width: 860px) {
  .fmx-art { height: 260px; padding: 20px !important; }
  .fmx-art svg { max-height: 220px !important; }
  .fmx-tela.is-cel .fmx-art svg { height: 220px !important; }
}
@media (max-width: 640px) {
  .gx-art { padding: 24px 16px !important; }
  .gx-art svg { height: 176px !important; }
  .fm-duo { padding: 28px 20px !important; }
}

/* respiro 1105e */
.fm-oficial { margin: 6px 0 14px !important; }
.fm-meta { margin: 24px 0 32px !important; }
.search-note { margin-top: 16px !important; }
main :is(h3, h4) + :is(ul, ol):not([class]) { margin-top: 12px !important; }
@media (max-width: 640px) { .fm-meta { margin: 20px 0 24px !important; } }
:is(b, p) + .is-dica { margin-top: 14px !important; }