/* =========================================================================
   empresagoogleads.com.br — design system (SSP Etapa 14)
   Identidade: sidneymiranda.com.br. Tokens em docs/08-design-system.md, Parte 3.
   Regra: nada de número solto no CSS de componente; sempre token.
   ========================================================================= */

/* ---------- 1. Fontes (WOFF2 próprias, só português) ---------- */
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-variavel.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

/* ---------- 2. Tokens ---------- */
:root {
  /* cores */
  --cor-primaria: #0E5BFF;
  --cor-primaria-escura: #003EDD;
  --cor-primaria-suave: #EDF4FF;
  --cor-marinho: #071A3D;
  --cor-marinho-cartao: rgba(255, 255, 255, .06);
  --cor-marinho-borda: rgba(255, 255, 255, .12);
  --cor-titulo: #101828;
  --cor-texto: #475467;
  --cor-texto-suave: #667085;
  --cor-borda: #E7EAF0;
  --cor-fundo: #FFFFFF;
  --cor-fundo-suave: #F7FBFF;
  --cor-sucesso: #16A34A;
  --cor-azul-claro: #9FBDFF;
  --cor-erro: #B42318;

  /* tipografia: 5 tamanhos */
  --fonte-titulo: "Poppins", system-ui, sans-serif;
  --fonte-texto: "Inter", system-ui, sans-serif;
  --fs-1: clamp(2.25rem, 1.55rem + 2.8vw, 3.75rem);   /* H1: 36 → 60 */
  --fs-2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);     /* H2: 28 → 40 */
  --fs-3: 1.25rem;                                    /* H3: 20 */
  --fs-4: 1.0625rem;                                  /* texto: 17 */
  --fs-5: .875rem;                                    /* apoio: 14 */
  --peso-titulo: 800;
  --peso-subtitulo: 700;
  --peso-botao: 600;
  --peso-texto: 400;
  --peso-forte: 600;
  --altura-linha-titulo: 1.1;
  --altura-linha-texto: 1.65;
  --espacamento-titulo: -.025em;

  /* espaçamento: grade 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px;
  --esp-6: 32px; --esp-7: 48px; --esp-8: 64px; --esp-9: 96px;

  /* forma */
  --raio-pequeno: 8px;
  --raio-medio: 12px;
  --raio-grande: 16px;
  --raio-capsula: 999px;
  --sombra-cartao: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(14, 91, 255, .06);
  --sombra-cartao-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 16px 32px rgba(14, 91, 255, .12);
  --sombra-botao: 0 8px 20px rgba(14, 91, 255, .28);
  --foco: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--cor-primaria);

  /* layout */
  --largura-max: 1200px;
  --largura-texto: 72ch;
  --margem-lateral: var(--esp-5);
  --altura-cabecalho: 72px;
  --icone: 24px;
  --toque-minimo: 44px;
  --transicao: .18s ease;
}
@media (max-width: 640px) { :root { --margem-lateral: var(--esp-4); --altura-cabecalho: 64px; } }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--altura-cabecalho) + var(--esp-4)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--fonte-texto); font-size: var(--fs-4); font-weight: var(--peso-texto); line-height: var(--altura-linha-texto); color: var(--cor-texto); background: var(--cor-fundo); overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--cor-titulo); line-height: var(--altura-linha-titulo); letter-spacing: var(--espacamento-titulo); margin: 0 0 var(--esp-4); text-wrap: balance; }
h1 { font-size: var(--fs-1); font-weight: var(--peso-titulo); }
h2 { font-size: var(--fs-2); font-weight: var(--peso-titulo); }
h3 { font-size: var(--fs-3); font-weight: var(--peso-subtitulo); letter-spacing: -.01em; }
p { margin: 0 0 var(--esp-4); }
strong { color: var(--cor-titulo); font-weight: var(--peso-forte); }
a { color: var(--cor-primaria); text-underline-offset: 3px; }
a:hover { color: var(--cor-primaria-escura); }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--raio-pequeno); }
.icone { width: var(--icone); height: var(--icone); flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular-conteudo { position: absolute; left: var(--esp-4); top: -100px; background: var(--cor-primaria); color: #FFF; padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-pequeno); z-index: 100; }
.pular-conteudo:focus { top: var(--esp-4); }

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: calc(var(--largura-max) + 2 * var(--margem-lateral)); margin-inline: auto; padding-inline: var(--margem-lateral); }
.secao { padding-block: var(--esp-9); }
.secao-suave { background: var(--cor-fundo-suave); }
@media (max-width: 640px) { .secao { padding-block: var(--esp-8); } }
.grade { display: grid; gap: var(--esp-5); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 960px) { .grade-3, .grade-4, .grade-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade-5 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .grade-2, .grade-3, .grade-4, .grade-5 { grid-template-columns: minmax(0, 1fr); } .grade-5 > :last-child { grid-column: auto; } }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-8); align-items: center; }
@media (max-width: 960px) { .duas-colunas { grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); } }

/* ---------- 5. Cabeçalho e menu ---------- */
.cabecalho { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--cor-borda); backdrop-filter: saturate(160%) blur(8px); }
.cabecalho .container { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-5); min-height: var(--altura-cabecalho); }
.logo img { height: 28px; width: auto; }
.menu { display: flex; align-items: center; gap: var(--esp-5); }
.menu > ul { display: flex; gap: var(--esp-1); list-style: none; margin: 0; padding: 0; }
.menu a, .menu summary { display: inline-flex; align-items: center; gap: var(--esp-1); min-height: var(--toque-minimo); padding-inline: var(--esp-3); font-size: var(--fs-5); font-weight: var(--peso-forte); color: var(--cor-titulo); text-decoration: none; cursor: pointer; border-radius: var(--raio-pequeno); }
.menu a:hover, .menu summary:hover { color: var(--cor-primaria); }
.menu .btn-primario { color: #FFFFFF; padding-inline: var(--esp-5); font-family: var(--fonte-titulo); }
.menu .btn-primario:hover { color: #FFFFFF; }
.menu details { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.mega { position: absolute; top: calc(100% + var(--esp-2)); left: 50%; transform: translateX(-50%); width: min(720px, 90vw); background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); box-shadow: var(--sombra-cartao-hover); padding: var(--esp-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2) var(--esp-5); }
.mega h3 { font-size: var(--fs-5); color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--esp-2); }
.mega a { display: flex; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-2); font-weight: var(--peso-forte); height: auto; }
.mega a span { display: block; font-weight: var(--peso-texto); color: var(--cor-texto-suave); }
.mega a .icone { color: var(--cor-primaria); }
.mega .mega-rodape { grid-column: 1 / -1; border-top: 1px solid var(--cor-borda); padding-top: var(--esp-3); }
.menu-celular { display: none; }
@media (max-width: 960px) {
  .menu { display: none; }
  .menu-celular { display: block; }
  .menu-celular > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: var(--toque-minimo); height: var(--toque-minimo); border-radius: var(--raio-medio); border: 1px solid var(--cor-borda); cursor: pointer; color: var(--cor-titulo); }
  .menu-celular > summary::-webkit-details-marker { display: none; }
  .menu-celular[open] > summary .ic-abrir, .menu-celular:not([open]) > summary .ic-fechar { display: none; }
  .menu-celular nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); padding: var(--esp-4) var(--margem-lateral) var(--esp-6); max-height: calc(100vh - var(--altura-cabecalho)); overflow-y: auto; }
  .menu-celular ul { list-style: none; margin: 0; padding: 0; }
  .menu-celular a, .menu-celular nav summary { display: flex; align-items: center; min-height: var(--toque-minimo); font-weight: var(--peso-forte); color: var(--cor-titulo); text-decoration: none; }
  .menu-celular nav details ul { padding-left: var(--esp-4); }
}

/* ---------- 6. Botões e selos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: 48px; padding: var(--esp-3) var(--esp-5); border-radius: var(--raio-medio); font-family: var(--fonte-titulo); font-size: var(--fs-5); font-weight: var(--peso-botao); text-decoration: none; text-align: center; border: 1px solid transparent; cursor: pointer; transition: background var(--transicao), box-shadow var(--transicao), transform var(--transicao); }
.btn .icone { width: 18px; height: 18px; }
.btn-primario { background: var(--cor-primaria); color: #FFFFFF; box-shadow: var(--sombra-botao); }
.btn-primario:hover { background: var(--cor-primaria-escura); color: #FFFFFF; transform: translateY(-1px); }
.btn-secundario { background: var(--cor-fundo); color: var(--cor-titulo); border-color: var(--cor-borda); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.btn-secundario:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.btn-largo { width: 100%; }
.botoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
@media (max-width: 640px) { .botoes .btn { width: 100%; } }
.selo { display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-4); background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-capsula); font-size: var(--fs-5); font-weight: var(--peso-forte); color: var(--cor-primaria); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-sucesso); }
.etiqueta { display: inline-block; padding: 2px var(--esp-3); border-radius: var(--raio-capsula); background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); font-size: var(--fs-5); font-weight: var(--peso-forte); }

/* ---------- 7. Hero ---------- */
.hero { padding-block: var(--esp-8) var(--esp-9); background: linear-gradient(180deg, var(--cor-fundo) 0%, var(--cor-fundo-suave) 100%); }
.hero h1 { margin-top: var(--esp-5); }
.destaque { color: var(--cor-primaria); background: linear-gradient(transparent 88%, rgba(14, 91, 255, .18) 88%); }
.hero-lide { font-size: 1.125rem; max-width: 56ch; }
.provas { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); list-style: none; padding: 0; margin: var(--esp-5) 0 0; font-size: var(--fs-5); font-weight: var(--peso-forte); color: var(--cor-titulo); }
.provas li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.provas .icone { width: 18px; height: 18px; color: var(--cor-sucesso); }
.hero-foto { position: relative; align-self: end; }
.hero-foto::before { content: ""; position: absolute; inset: 12% 4% 0 18%; background: radial-gradient(closest-side, rgba(14, 91, 255, .22), transparent); z-index: 0; }
.hero-foto img { position: relative; z-index: 1; width: 100%; max-width: 520px; margin-inline: auto; }

/* ---------- 8. Números ---------- */
.numeros { margin-top: calc(-1 * var(--esp-8)); position: relative; }
.numeros .grade { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); box-shadow: var(--sombra-cartao); gap: 0; }
.numero { padding: var(--esp-6) var(--esp-5); text-align: center; }
.numero + .numero { border-left: 1px solid var(--cor-borda); }
@media (max-width: 640px) { .numero + .numero { border-left: 0; border-top: 1px solid var(--cor-borda); } }
.numero strong { display: block; font-family: var(--fonte-titulo); font-size: var(--fs-2); font-weight: var(--peso-titulo); line-height: 1.1; }
.numero span { font-size: var(--fs-5); color: var(--cor-texto-suave); }

/* ---------- 9. Cabeça de seção ---------- */
.sobretitulo { display: inline-flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-4); font-size: .8125rem; font-weight: var(--peso-subtitulo); letter-spacing: .1em; text-transform: uppercase; color: var(--cor-primaria); }
.sobretitulo::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.cabeca-secao { max-width: 64ch; margin-bottom: var(--esp-7); }
.cabeca-secao p { font-size: 1.125rem; }
.resumo { border-left: 4px solid var(--cor-primaria); background: var(--cor-primaria-suave); padding: var(--esp-5); border-radius: 0 var(--raio-medio) var(--raio-medio) 0; max-width: var(--largura-texto); }
.resumo p:last-child { margin-bottom: 0; }

/* ---------- 10. Cartões ---------- */
.cartao { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); box-shadow: var(--sombra-cartao); padding: var(--esp-6); display: flex; flex-direction: column; transition: box-shadow var(--transicao), transform var(--transicao); }
.cartao:hover { box-shadow: var(--sombra-cartao-hover); }
.cartao p:last-child { margin-bottom: 0; }
.cartao-num { flex-direction: row; gap: var(--esp-4); align-items: flex-start; }
.num { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-medio); background: var(--cor-primaria-suave); color: var(--cor-primaria); font-family: var(--fonte-titulo); font-weight: var(--peso-subtitulo); font-size: var(--fs-5); }
.icone-caixa { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--raio-medio); background: var(--cor-primaria-suave); color: var(--cor-primaria); margin-bottom: var(--esp-5); }
.lista-check { list-style: none; padding: 0; margin: 0 0 var(--esp-5); display: grid; gap: var(--esp-2); font-size: var(--fs-5); font-weight: var(--peso-forte); color: var(--cor-titulo); }
.lista-check li { display: flex; gap: var(--esp-2); align-items: flex-start; }
.lista-check .icone { width: 18px; height: 18px; color: var(--cor-sucesso); margin-top: 2px; }
.link-seta { margin-top: auto; display: inline-flex; align-items: center; gap: var(--esp-2); font-weight: var(--peso-forte); font-size: var(--fs-5); text-decoration: none; }
.link-seta .icone { width: 18px; height: 18px; transition: transform var(--transicao); }
.link-seta:hover .icone { transform: translateX(3px); }

/* ---------- 11. Seção escura (método) e citação ---------- */
.secao-escura { background: var(--cor-marinho); color: rgba(255, 255, 255, .78); }
.secao-escura h2, .secao-escura h3, .secao-escura strong { color: #FFFFFF; }
.secao-escura .sobretitulo { color: var(--cor-azul-claro); }
.etapa { background: var(--cor-marinho-cartao); border: 1px solid var(--cor-marinho-borda); border-radius: var(--raio-grande); padding: var(--esp-5); }
.etapa .letra { font-family: var(--fonte-titulo); font-size: var(--fs-2); font-weight: var(--peso-titulo); color: var(--cor-azul-claro); line-height: 1; margin-bottom: var(--esp-3); }
.etapa .rotulo { font-size: .8125rem; font-weight: var(--peso-subtitulo); letter-spacing: .1em; text-transform: uppercase; color: var(--cor-azul-claro); }
.etapa p { font-size: var(--fs-5); margin: 0; }
.citacao { background: var(--cor-marinho); color: #FFFFFF; border-radius: var(--raio-grande); padding: var(--esp-7) var(--esp-6); position: relative; overflow: hidden; }
.citacao blockquote { margin: 0; border-left: 3px solid var(--cor-primaria); padding-left: var(--esp-5); font-family: var(--fonte-titulo); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: var(--peso-subtitulo); font-style: italic; line-height: 1.3; }
.citacao figcaption { margin-top: var(--esp-5); font-size: var(--fs-5); color: rgba(255, 255, 255, .7); }

/* ---------- 12. FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--esp-8); }
@media (max-width: 960px) { .faq { grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); } }
.faq details { border-bottom: 1px solid var(--cor-borda); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4); min-height: var(--toque-minimo); padding-block: var(--esp-5); font-family: var(--fonte-titulo); font-weight: var(--peso-subtitulo); color: var(--cor-titulo); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icone { color: var(--cor-primaria); transition: transform var(--transicao); }
.faq details[open] summary .icone { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--esp-5); margin: 0; }

/* ---------- 13. Tabela ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-5); background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); overflow: hidden; }
.tabela caption { text-align: left; font-weight: var(--peso-forte); color: var(--cor-titulo); padding-bottom: var(--esp-3); }
.tabela th, .tabela td { padding: var(--esp-3) var(--esp-4); text-align: left; border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
.tabela thead th { background: var(--cor-fundo-suave); color: var(--cor-titulo); }
.rolagem-tabela { overflow-x: auto; padding: 2px; }

/* ---------- 14. Formulário de aproximação ---------- */
.form-aproximacao { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); box-shadow: var(--sombra-cartao); padding: var(--esp-6); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4) var(--esp-5); }
@media (max-width: 640px) { .campos { grid-template-columns: minmax(0, 1fr); } }
.campo { display: grid; gap: var(--esp-2); }
.campo-largo { grid-column: 1 / -1; }
.campo label, .campo legend { font-size: var(--fs-5); font-weight: var(--peso-forte); color: var(--cor-titulo); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: var(--esp-3) var(--esp-4); font: inherit; font-size: 1rem; color: var(--cor-titulo); background: var(--cor-fundo); border: 1px solid #D0D5DD; border-radius: var(--raio-medio); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(14, 91, 255, .18); }
.campo fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.opcao { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--toque-minimo); padding: 0 var(--esp-4); border: 1px solid #D0D5DD; border-radius: var(--raio-capsula); font-size: var(--fs-5); cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.ajuda { font-size: var(--fs-5); color: var(--cor-texto-suave); }
.form-aproximacao .btn { margin-top: var(--esp-5); }

/* ---------- 15. Blog: cartões de artigo ---------- */
.cartao-artigo h3 { margin-top: var(--esp-4); }

/* ---------- 16. Breadcrumb ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--esp-2); list-style: none; padding: var(--esp-4) 0 0; margin: 0; font-size: var(--fs-5); color: var(--cor-texto-suave); }
.breadcrumb li + li::before { content: "›"; margin-right: var(--esp-2); }
.breadcrumb a { color: var(--cor-texto-suave); }

/* ---------- 17. Rodapé ---------- */
.rodape { background: var(--cor-marinho); color: rgba(255, 255, 255, .72); padding-block: var(--esp-8) var(--esp-5); font-size: var(--fs-5); }
.rodape h2 { font-size: var(--fs-5); color: #FFFFFF; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--esp-4); }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-2); }
.rodape a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.rodape a:hover { color: #FFFFFF; text-decoration: underline; }
.rodape .logo img { height: 26px; margin-bottom: var(--esp-4); }
.rodape-base { margin-top: var(--esp-7); padding-top: var(--esp-5); border-top: 1px solid var(--cor-marinho-borda); display: grid; gap: var(--esp-3); }
.rodape-base nav ul { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); }

/* ---------- 18. Barra fixa no celular ---------- */
.barra-celular { display: none; }
@media (max-width: 640px) {
  .barra-celular { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: var(--esp-3) var(--margem-lateral) calc(var(--esp-3) + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--cor-borda); box-shadow: 0 -8px 24px rgba(16, 24, 40, .08); }
  body { padding-bottom: 80px; }
}

/* ---------- 19. Componentes acrescentados na Etapa 15 (home) ---------- */
/* mega menu: 3 colunas (Serviços) e 1 coluna (Segmentos) */
.mega-3 { width: min(960px, 92vw); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-1 { width: 340px; grid-template-columns: minmax(0, 1fr); }
/* lista "não é para": mesmo desenho da lista-check, ícone neutro */
.lista-x { list-style: none; padding: 0; margin: 0 0 var(--esp-5); display: grid; gap: var(--esp-2); font-size: var(--fs-5); font-weight: var(--peso-forte); color: var(--cor-titulo); }
.lista-x li { display: flex; gap: var(--esp-2); align-items: flex-start; }
.lista-x .icone { width: 18px; height: 18px; color: var(--cor-erro); margin-top: 2px; }
/* texto que fecha uma seção depois de grade ou lista */
.fechamento { max-width: var(--largura-texto); margin: var(--esp-6) 0 0; }
/* coluna de texto ao lado de imagem/diagrama */
.texto-lado h2 { margin-top: 0; }
.inverter > :first-child { order: 2; }
@media (max-width: 960px) { .inverter > :first-child { order: 0; } }
/* diagramas em SVG (imagens informativas) */
.diagrama { margin: 0; background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); box-shadow: var(--sombra-cartao); padding: var(--esp-5); }
.diagrama svg { width: 100%; height: auto; }
.diagrama figcaption { margin-top: var(--esp-3); font-size: var(--fs-5); color: var(--cor-texto-suave); }
.diagrama .d-titulo { font-family: var(--fonte-titulo); font-weight: var(--peso-subtitulo); fill: var(--cor-titulo); }
.diagrama .d-texto { font-family: var(--fonte-texto); fill: var(--cor-texto); }
.diagrama .d-azul { fill: var(--cor-primaria); }
.diagrama .d-suave { fill: var(--cor-primaria-suave); }
.diagrama .d-linha { stroke: var(--cor-azul-claro); stroke-width: 2; fill: none; }
/* chips de credenciais */
.chips { list-style: none; padding: 0; margin: var(--esp-5) 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.chips li { display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-4); background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-medio); font-size: var(--fs-5); font-weight: var(--peso-forte); color: var(--cor-titulo); }
.chips .icone { width: 18px; height: 18px; color: var(--cor-primaria); }
/* foto do autor */
.foto-autor { border-radius: var(--raio-grande); background: linear-gradient(180deg, var(--cor-fundo-suave), var(--cor-primaria-suave)); overflow: hidden; }
.foto-autor img { width: 100%; max-width: 480px; margin-inline: auto; }
/* caixa de preço */
.cartao-preco { background: var(--cor-marinho); color: rgba(255, 255, 255, .78); border-color: var(--cor-marinho); }
.cartao-preco h3, .cartao-preco strong { color: #FFFFFF; }
.cartao-preco .valor { font-family: var(--fonte-titulo); font-size: var(--fs-2); font-weight: var(--peso-titulo); color: #FFFFFF; line-height: 1.1; margin-bottom: var(--esp-2); }
.cartao-preco .valor small { font-size: var(--fs-4); font-weight: var(--peso-botao); color: var(--cor-azul-claro); }
.cartao-preco .btn { margin-top: var(--esp-5); }
/* tabela: coluna em destaque */
.tabela .col-destaque { background: var(--cor-primaria-suave); color: var(--cor-titulo); font-weight: var(--peso-forte); }
.tabela thead .col-destaque { background: var(--cor-primaria); color: #FFFFFF; }
/* cartão de case ainda sem dados */
.cartao-case .pendente { margin-top: auto; padding: var(--esp-4); border: 1px dashed var(--cor-azul-claro); border-radius: var(--raio-medio); background: var(--cor-fundo-suave); font-size: var(--fs-5); color: var(--cor-texto-suave); }
/* selo oficial do Partner no rodapé (código HTML do Google) */
.selo-partner { margin-top: var(--esp-4); }
/* títulos das colunas do mega menu: parágrafo, não H3 (o menu vem antes do H1) */
.mega .mega-titulo { font-family: var(--fonte-titulo); font-size: var(--fs-5); font-weight: var(--peso-subtitulo); color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--esp-2); }
/* links dentro da seção escura: azul-claro sobre marinho (contraste ~9:1) */
.secao-escura a { color: var(--cor-azul-claro); }
.secao-escura a:hover { color: #FFFFFF; }
/* ajustes de acabamento da Etapa 15 */
a strong { color: inherit; }
.cartao .etiqueta { align-self: flex-start; }
@media (min-width: 961px) { .etapa h3 { min-height: 2.2em; } }
.fixo-ao-rolar { align-self: start; position: sticky; top: calc(var(--altura-cabecalho) + var(--esp-5)); }
@media (max-width: 960px) { .fixo-ao-rolar { position: static; } }
.texto-lado .citacao { margin: var(--esp-5) 0 0; padding: var(--esp-6) var(--esp-5); }
.texto-lado .citacao blockquote { font-size: 1.25rem; }
.link-seta { min-height: var(--toque-minimo); }
/* diagramas em HTML (texto legível em qualquer tela) */
.passos-diagrama { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-4); }
.passos-diagrama li { position: relative; display: flex; gap: var(--esp-4); align-items: center; padding: var(--esp-3) var(--esp-4); background: var(--cor-primaria-suave); border-radius: var(--raio-medio); }
.passos-diagrama li + li::before { content: ""; position: absolute; left: calc(var(--esp-4) + 17px); top: calc(-1 * var(--esp-4)); height: var(--esp-4); width: 2px; background: var(--cor-azul-claro); }
.passos-diagrama .passo-num { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cor-primaria); color: #FFFFFF; font-family: var(--fonte-titulo); font-weight: var(--peso-subtitulo); font-size: var(--fs-5); }
.passos-diagrama strong { display: block; font-family: var(--fonte-titulo); font-weight: var(--peso-subtitulo); }
.passos-diagrama div span { display: block; font-size: var(--fs-5); color: var(--cor-texto); }
.passos-diagrama .final { background: var(--cor-primaria); }
.passos-diagrama .final strong, .passos-diagrama .final div span { color: #FFFFFF; }
.passos-diagrama .final .passo-num { background: #FFFFFF; color: var(--cor-primaria); }
.eixos-diagrama { display: flex; justify-content: space-between; font-size: var(--fs-5); color: var(--cor-texto-suave); margin-top: var(--esp-2); }
.legenda-diagrama { list-style: none; padding: 0; margin: var(--esp-4) 0 0; display: grid; gap: var(--esp-2); font-size: var(--fs-5); font-weight: var(--peso-forte); color: var(--cor-titulo); }
.legenda-diagrama li { display: flex; align-items: center; gap: var(--esp-3); }
.traco { width: 24px; height: 4px; border-radius: 2px; flex: none; }
.traco-pago { background: var(--cor-primaria); }
.traco-seo { background: repeating-linear-gradient(90deg, var(--cor-azul-claro) 0 8px, transparent 8px 12px); }
/* selo oficial Google Partner: o código do Google não pode ser alterado; o tamanho vem daqui.
   Regra do Google: nunca maior nem mais destacado que o logo da empresa. */
.selo-partner img { width: 96px; height: auto; }
/* Etapa 16: espaço de imagem nos cartões (padrão SSP: "cards de serviço e de blog têm imagem").
   Até a Etapa 30, mostra o ícone sobre gradiente; depois recebe <img> com width/height. */
.cartao-imagem { margin: calc(-1 * var(--esp-6)) calc(-1 * var(--esp-6)) var(--esp-5); aspect-ratio: 16 / 9; border-radius: var(--raio-grande) var(--raio-grande) 0 0; overflow: hidden; background: linear-gradient(135deg, var(--cor-primaria-suave) 0%, #DCE8FF 100%); display: grid; place-items: center; color: var(--cor-primaria); }
.cartao-imagem .icone { width: 48px; height: 48px; stroke-width: 1.5; }
.cartao-imagem img { width: 100%; height: 100%; object-fit: cover; }
.cartao-artigo .cartao-imagem + .etiqueta { margin-top: 0; }
/* anti-spam: campo escondido de pessoas e leitores de tela */
.campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Etapa 17: hero só com texto (hubs, serviços, nichos) e breadcrumb */
.hero-simples { padding-block: var(--esp-7) var(--esp-8); }
.hero-simples .hero-texto { max-width: 820px; }
.breadcrumb { background: var(--cor-fundo); }
.breadcrumb ol { padding-bottom: var(--esp-2); }
.breadcrumb [aria-current] { color: var(--cor-titulo); font-weight: var(--peso-forte); }
/* grades de 4 cartões: títulos com a mesma altura no computador (simetria) */
@media (min-width: 961px) { .grade-3 .cartao h3, .grade-4 .cartao h3 { min-height: 2.2em; } }
/* tabela que vira blocos no celular: cada linha é um bloco, cada valor ganha o nome da coluna (data-rotulo) */
@media (max-width: 640px) {
  .tabela-empilhada thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-empilhada, .tabela-empilhada tbody, .tabela-empilhada tr, .tabela-empilhada th, .tabela-empilhada td { display: block; width: 100%; }
  .tabela-empilhada { border: 0; background: transparent; }
  .tabela-empilhada tr { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-medio); margin-bottom: var(--esp-3); overflow: hidden; }
  .tabela-empilhada tbody th { background: var(--cor-fundo-suave); color: var(--cor-titulo); font-size: var(--fs-4); }
  .tabela-empilhada td { border-bottom: 1px solid var(--cor-borda); }
  .tabela-empilhada td:last-child { border-bottom: 0; }
  .tabela-empilhada td::before { content: attr(data-rotulo); display: block; font-size: .75rem; font-weight: var(--peso-forte); letter-spacing: .06em; text-transform: uppercase; color: var(--cor-texto-suave); margin-bottom: var(--esp-1); }
  .tabela-empilhada .col-destaque { background: var(--cor-primaria-suave); }
}
/* Etapa 18: ícone no lugar do número nos passos (agenda de relatórios) */
.passo-num .icone { width: 18px; height: 18px; }
/* Etapa 19: chips que são links (perfis oficiais) com área de toque de 44 px */
.chips li:has(> a) { padding: 0; }
.chips a { display: inline-flex; align-items: center; min-height: var(--toque-minimo); padding: 0 var(--esp-4); color: var(--cor-titulo); text-decoration: none; }
.chips a:hover { color: var(--cor-primaria); }
/* Etapa 21: na grade de 2, a imagem do cartão fica mais baixa (3:1) para não dominar o cartão */
.grade-2 .cartao-imagem { aspect-ratio: 3 / 1; }
@media (max-width: 640px) { .grade-2 .cartao-imagem { aspect-ratio: 16 / 9; } }

/* ---------- 20. Artigo do blog (Etapa 22) ---------- */
.artigo { max-width: 760px; margin-inline: auto; }
.artigo > h2 { margin-top: var(--esp-8); scroll-margin-top: calc(var(--altura-cabecalho) + var(--esp-4)); }
.artigo > h3 { margin-top: var(--esp-6); }
.artigo > .rolagem-tabela, .artigo > .grade, .artigo > .lista-check, .artigo > .lista-passos { margin-block: var(--esp-5); }
.artigo-meta { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); list-style: none; padding: 0; margin: 0 0 var(--esp-5); font-size: var(--fs-5); color: var(--cor-texto-suave); }
.artigo-meta li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.artigo-meta .icone { width: 18px; height: 18px; color: var(--cor-primaria); }
.sumario { background: var(--cor-fundo-suave); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); padding: var(--esp-5) var(--esp-6); margin-top: var(--esp-6); }
.sumario h2 { font-size: var(--fs-3); margin-bottom: var(--esp-3); }
.sumario ol { margin: 0; padding-left: var(--esp-5); display: grid; gap: var(--esp-1); }
.sumario a { display: inline-block; padding-block: var(--esp-1); font-weight: var(--peso-forte); text-decoration: none; }
.sumario a:hover { text-decoration: underline; }
.lista-passos { padding-left: var(--esp-6); display: grid; gap: var(--esp-3); }
.lista-passos li { padding-left: var(--esp-2); }
.lista-passos li::marker { font-family: var(--fonte-titulo); font-weight: var(--peso-subtitulo); color: var(--cor-primaria); }
.autor-box { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--esp-5); align-items: start; background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); box-shadow: var(--sombra-cartao); padding: var(--esp-6); margin-top: var(--esp-8); }
.autor-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--cor-primaria-suave); }
.autor-box h2 { font-size: var(--fs-3); margin-bottom: var(--esp-2); }
.autor-box p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .autor-box { grid-template-columns: minmax(0, 1fr); } }
.sumario .sumario-titulo { font-family: var(--fonte-titulo); font-size: var(--fs-3); font-weight: var(--peso-subtitulo); color: var(--cor-titulo); margin-bottom: var(--esp-3); }
/* Palavras longas (domínios, e-mails) quebram a linha em vez de vazar da tela no celular (achado na Etapa 23) */
h1, h2, h3, p, li, caption, figcaption, blockquote { overflow-wrap: break-word; }
.tabela th, .tabela td { overflow-wrap: anywhere; }
/* Prévia (gerar.py --previa): links para páginas que ainda não existem viram texto */
.link-inativo { color: inherit; }
.mega .link-inativo { display: flex; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-2); font-weight: var(--peso-forte); color: var(--cor-texto-suave); }
.mega .link-inativo span { display: block; font-weight: var(--peso-texto); }
.mega .link-inativo .icone { color: var(--cor-borda); }
.menu-celular .link-inativo, .rodape .link-inativo { display: flex; align-items: center; min-height: var(--toque-minimo); opacity: .55; }
.rodape .link-inativo { min-height: 0; }
.mega .link-inativo, .menu > ul .link-inativo { font-size: var(--fs-5); }
.menu > ul .link-inativo { display: inline-flex; align-items: center; min-height: var(--toque-minimo); padding-inline: var(--esp-3); font-weight: var(--peso-forte); color: var(--cor-texto-suave); }