/* ===========================================================
   MARTINHO BUSINESS — Folha de estilos (v2)
   Direção de arte editorial para consultoria empresarial.
   =========================================================== */

:root {
  --cor-navy: #082f6b;
  --cor-navy-escuro: #06254f;
  --cor-grafite: #292f35;
  --cor-amarelo: #f2b705;
  --cor-fundo-claro: #f6f7f9;
  --cor-branco: #ffffff;
  --cor-borda: #e1e5ea;
  --cor-texto-secundario: #5d6670;
  --cor-nivel-critico: #c53b32;
  --cor-nivel-atencao: #d97706;
  --cor-nivel-evolucao: #c18a00;
  --cor-nivel-estruturado: #138a5b;

  /* Cores de texto sobre fundo escuro */
  --cor-texto-sobre-navy: #ffffff;
  --cor-texto-sobre-navy-secundario: #b9c4d6;

  --fonte-titulo: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fonte-texto: "Source Sans 3", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --raio-padrao: 8px;
  --raio-pequeno: 6px;
  --sombra-suave: 0 1px 2px rgba(6, 22, 51, 0.05), 0 4px 16px rgba(6, 22, 51, 0.07);

  --largura-maxima: 1200px;
  --largura-texto: 640px;
  --transicao-padrao: 180ms ease;

  /* Escala de espaçamento em múltiplos de 4 */
  --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;
}

/* -----------------------------------------------------------
   Reset básico
   ----------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  color: var(--cor-grafite);
  background: var(--cor-branco);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--cor-navy);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.1rem, 5vw + 1rem, 4rem);
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.65rem, 2.6vw + 1rem, 2.6rem);
  line-height: 1.15;
}

h3 {
  font-size: clamp(1.15rem, 1vw + 0.9rem, 1.35rem);
  line-height: 1.3;
}

p {
  margin: 0 0 1.1em;
  max-width: 62ch;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: var(--esp-9) 0;
}

@media (max-width: 700px) {
  section {
    padding: var(--esp-7) 0;
  }
}

.secao-clara {
  background: var(--cor-fundo-claro);
}

.secao-branca {
  background: var(--cor-branco);
}

.secao-navy {
  background: var(--cor-navy);
  color: var(--cor-texto-sobre-navy);
}

.secao-navy h2,
.secao-navy h3 {
  color: var(--cor-branco);
}

.secao-navy p {
  color: var(--cor-texto-sobre-navy-secundario);
}

.secao-grafite {
  background: var(--cor-grafite);
  color: var(--cor-texto-sobre-navy);
}

.secao-grafite h2,
.secao-grafite h3 {
  color: var(--cor-branco);
}

.secao-grafite p {
  color: #c7cbd0;
}

/* -----------------------------------------------------------
   Identificador editorial (sem cápsula, com linha amarela)
   ----------------------------------------------------------- */
.identificador {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cor-navy);
  margin-bottom: var(--esp-4);
}

.identificador::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--cor-amarelo);
  flex-shrink: 0;
}

.identificador--claro {
  color: var(--cor-texto-sobre-navy);
}

.secao-cabecalho {
  max-width: 620px;
  margin: 0 0 var(--esp-7);
}

.secao-cabecalho p {
  color: var(--cor-texto-secundario);
  font-size: 1.05rem;
}

.secao-navy .secao-cabecalho p,
.secao-navy .secao-cabecalho {
  color: var(--cor-texto-sobre-navy-secundario);
}

/* -----------------------------------------------------------
   Foco visível para acessibilidade
   ----------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--cor-navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.secao-navy a:focus-visible,
.secao-navy button:focus-visible {
  outline-color: var(--cor-amarelo);
}

.pular-conteudo {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--cor-navy);
  color: var(--cor-branco);
  padding: 12px 18px;
  border-radius: var(--raio-pequeno);
  z-index: 1000;
  font-weight: 600;
}

.pular-conteudo:focus {
  left: 16px;
  top: 16px;
}

/* -----------------------------------------------------------
   Botões
   ----------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--raio-padrao);
  font-weight: 600;
  font-size: 1rem;
  font-family: var(--fonte-texto);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transicao-padrao), background var(--transicao-padrao),
    border-color var(--transicao-padrao), color var(--transicao-padrao);
  min-height: 48px;
  white-space: nowrap;
}

.botao:active {
  transform: translateY(1px);
}

.botao-primario {
  background: var(--cor-amarelo);
  color: var(--cor-navy-escuro);
}

.botao-primario:hover {
  background: #e0ab04;
}

.botao-secundario {
  background: transparent;
  color: var(--cor-navy);
  border-color: var(--cor-navy);
}

.botao-secundario:hover {
  background: rgba(8, 47, 107, 0.06);
}

.botao-secundario--claro {
  color: var(--cor-branco);
  border-color: rgba(255, 255, 255, 0.55);
}

.botao-secundario--claro:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--cor-branco);
}

.botao-texto {
  background: transparent;
  color: var(--cor-navy);
  padding: 8px 4px;
  min-height: auto;
  text-decoration: underline;
  font-weight: 500;
}

.botao-bloco {
  width: 100%;
}

.botao[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

.botao:focus-visible {
  outline-offset: 3px;
}

/* -----------------------------------------------------------
   Cabeçalho
   ----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--cor-branco);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao-padrao), box-shadow var(--transicao-padrao);
}

.site-header--scrolled {
  border-bottom-color: var(--cor-borda);
  box-shadow: 0 1px 0 rgba(6, 22, 51, 0.04);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

@media (min-width: 900px) {
  .site-header .container {
    height: 76px;
  }
}

.logo-link {
  display: flex;
  align-items: center;
  height: 30px;
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .logo-link {
    height: 38px;
  }
}

.logo-link img {
  height: 100%;
  width: auto;
}

.nav-desktop {
  display: none;
}

@media (min-width: 900px) {
  .nav-desktop {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.nav-desktop ul {
  display: flex;
  gap: 40px;
  align-items: center;
}

.nav-desktop a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--cor-grafite);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transicao-padrao), color var(--transicao-padrao);
}

.nav-desktop a:hover {
  border-bottom-color: var(--cor-amarelo);
}

.header-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-acoes .botao {
  padding: 11px 22px;
  font-size: 0.92rem;
  min-height: 42px;
}

@media (max-width: 899px) {
  .header-acoes .botao-primario {
    display: none;
  }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  color: var(--cor-navy);
}

.menu-toggle svg {
  width: 20px;
  height: 20px;
}

.mobile-nav {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--cor-branco);
  z-index: 490;
  overflow-y: auto;
  padding: var(--esp-6) 24px var(--esp-7);
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--esp-6);
}

.mobile-nav a {
  display: block;
  padding: 18px 4px;
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--cor-navy);
  border-bottom: 1px solid var(--cor-borda);
}

@media (min-width: 900px) {
  .menu-toggle {
    display: none;
  }
  .mobile-nav {
    display: none !important;
  }
}

/* -----------------------------------------------------------
   Hero — fundo sólido azul-marinho
   ----------------------------------------------------------- */
.hero {
  padding: var(--esp-7) 0 var(--esp-6);
  background: var(--cor-navy);
  color: var(--cor-texto-sobre-navy);
}

@media (min-width: 960px) {
  .hero {
    padding: var(--esp-9) 0 var(--esp-8);
  }
}

.hero .container {
  display: grid;
  gap: var(--esp-6);
}

.hero-conteudo {
  order: 1;
}

.hero-interativo {
  order: 2;
}

.hero-acoes--mobile-pos {
  order: 3;
  display: flex;
}

.hero-titulo {
  color: var(--cor-branco);
  margin-bottom: var(--esp-4);
  max-width: 16ch;
  font-size: clamp(40px, 10vw, 44px);
  line-height: 1.14;
  text-wrap: balance;
}

/* Em telas muito estreitas (320 a 374px), reduz a fonte o suficiente para
   caber em três linhas com as duas frases do título, sem palavras órfãs. */
@media (max-width: 374px) {
  .hero-titulo {
    font-size: 32px;
    line-height: 1.2;
  }
}

@media (min-width: 960px) {
  .hero-titulo {
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    margin-bottom: var(--esp-5);
    line-height: 1.08;
  }
}

.hero-texto {
  color: var(--cor-texto-sobre-navy-secundario);
  font-size: 1.05rem;
  max-width: 46ch;
}

@media (min-width: 960px) {
  .hero-texto {
    font-size: 1.15rem;
  }
}

.hero-acoes {
  gap: var(--esp-3);
  margin: var(--esp-5) 0 var(--esp-6);
}

.hero-acoes--desktop {
  display: none;
}

@media (min-width: 960px) {
  .hero-acoes--desktop {
    display: flex;
    flex-wrap: wrap;
  }
}

.hero-acoes--mobile-pos {
  margin: 0;
}

@media (min-width: 960px) {
  .hero-acoes--mobile-pos {
    display: none;
  }
}

.hero-link-auxiliar {
  font-size: 0.85rem;
  margin-top: 14px;
}
.hero-link-auxiliar a {
  color: var(--cor-texto-sobre-navy-secundario, rgba(255,255,255,.75));
  text-decoration: underline;
}
.hero-link-auxiliar a:hover { color: #fff; }

.hero-temas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
  padding-top: var(--esp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--cor-texto-sobre-navy-secundario);
  font-size: 0.92rem;
  font-family: var(--fonte-titulo);
  letter-spacing: 0.02em;
}

@media (min-width: 960px) {
  .hero-temas {
    padding-top: var(--esp-5);
  }
}

.hero-temas span:not(.hero-temas-separador) {
  white-space: nowrap;
}

.hero-temas-separador {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cor-amarelo);
  margin: 0 14px;
  flex-shrink: 0;
}

@media (min-width: 960px) {
  .hero-grid.container {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
  }
  .hero-conteudo {
    order: 0;
  }
  .hero-interativo {
    order: 0;
  }
}

/* -----------------------------------------------------------
   Diagnóstico interativo — ferramenta executiva (10 perguntas, 5 pilares)
   ----------------------------------------------------------- */
.diagnostico-secao {
  padding-top: var(--esp-8);
  padding-bottom: var(--esp-8);
}

.diagnostico-secao-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.diagnostico-secao-cabecalho {
  width: 100%;
  max-width: 720px;
  text-align: center;
}

.diagnostico-wrapper {
  width: 100%;
  max-width: 760px;
}

.diagnostico-card {
  background: var(--cor-branco);
  border-radius: var(--raio-padrao);
  box-shadow: 0 24px 48px rgba(3, 14, 36, 0.28);
  padding: var(--esp-5) var(--esp-4);
  color: var(--cor-grafite);
}

@media (min-width: 560px) {
  .diagnostico-card {
    padding: var(--esp-7) var(--esp-6);
  }
}

.diagnostico-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--cor-borda);
}

.diagnostico-titulo-fixo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--cor-navy);
  text-transform: uppercase;
}

.diagnostico-tempo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cor-texto-secundario);
}

.diagnostico-tempo svg {
  width: 14px;
  height: 14px;
}

.diagnostico-card h2 {
  font-size: 1.3rem;
  margin-bottom: var(--esp-3);
}

.diagnostico-card > div[data-tela] > p {
  color: var(--cor-texto-secundario);
}

.diagnostico-info-rapida {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  margin: var(--esp-4) 0 var(--esp-5);
  padding: var(--esp-4) 0;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}

.diagnostico-info-rapida li {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-navy);
  padding-left: 14px;
  position: relative;
}

.diagnostico-info-rapida li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cor-amarelo);
}

.diagnostico-retomar {
  margin-top: var(--esp-4);
  font-size: 0.85rem;
  color: var(--cor-texto-secundario);
  text-align: center;
}

/* Jornada dos 5 pilares */
.diagnostico-jornada {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: var(--esp-4);
  list-style: none;
}

.diagnostico-jornada-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.diagnostico-jornada-marcador {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--cor-borda);
  position: relative;
  overflow: hidden;
}

.diagnostico-jornada-marcador-preenchimento {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--cor-amarelo);
  transition: width 200ms ease;
}

.diagnostico-jornada-item[aria-current="step"] .diagnostico-jornada-marcador {
  background: rgba(8, 47, 107, 0.18);
}

.diagnostico-jornada-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cor-texto-secundario);
  text-transform: uppercase;
}

.diagnostico-jornada-item[aria-current="step"] .diagnostico-jornada-label {
  color: var(--cor-navy);
}

.diagnostico-jornada-item--concluido .diagnostico-jornada-marcador-preenchimento {
  width: 100%;
}

.diagnostico-etapa-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-navy);
  margin-bottom: var(--esp-2);
}

.diagnostico-barra {
  height: 4px;
  background: var(--cor-borda);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--esp-5);
}

.diagnostico-barra-preenchimento {
  height: 100%;
  width: 0;
  background: var(--cor-amarelo);
  border-radius: 999px;
  transition: width 200ms ease;
}

.diagnostico-pergunta {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cor-navy);
  margin-bottom: var(--esp-4);
  line-height: 1.3;
}

.diagnostico-alternativas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin-bottom: var(--esp-5);
}

.diagnostico-alternativa {
  position: relative;
  text-align: left;
  width: 100%;
  padding: 15px 18px 15px 38px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-branco);
  border-radius: var(--raio-padrao);
  font-size: 0.98rem;
  color: var(--cor-grafite);
  cursor: pointer;
  transition: border-color var(--transicao-padrao), background var(--transicao-padrao);
  min-height: 52px;
}

.diagnostico-alternativa::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--cor-borda);
  background: var(--cor-branco);
  transition: border-color var(--transicao-padrao), background var(--transicao-padrao);
}

.diagnostico-alternativa:hover {
  border-color: var(--cor-navy);
}

.diagnostico-alternativa[aria-pressed="true"] {
  border-color: var(--cor-navy);
  background: rgba(8, 47, 107, 0.04);
  font-weight: 600;
}

.diagnostico-alternativa[aria-pressed="true"]::before {
  border-color: var(--cor-navy);
  background: var(--cor-amarelo);
  border-width: 0;
}

.diagnostico-alternativa:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.diagnostico-navegacao {
  display: flex;
  gap: var(--esp-3);
  justify-content: space-between;
}

.diagnostico-navegacao .botao {
  flex: 1;
  padding-left: var(--esp-3);
  padding-right: var(--esp-3);
  white-space: nowrap;
}

.diagnostico-navegacao .botao:only-child {
  flex: none;
  margin-left: auto;
}

/* Tela de resultado */
.diagnostico-resultado-topo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--esp-5);
  text-align: left;
  margin-bottom: var(--esp-5);
}

.diagnostico-resultado-grid {
  display: grid;
  gap: var(--esp-5);
}

.diagnostico-resultado-coluna {
  min-width: 0;
}

@media (min-width: 720px) {
  .diagnostico-resultado-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: var(--esp-6);
    align-items: start;
  }
}

.diagnostico-indicador {
  position: relative;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
}

.diagnostico-indicador svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.diagnostico-indicador-trilha {
  fill: none;
  stroke: var(--cor-borda);
  stroke-width: 10;
}

.diagnostico-indicador-preenchimento {
  fill: none;
  stroke: var(--cor-amarelo);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 500ms ease;
}

.diagnostico-card[data-nivel-resultado="critico"] .diagnostico-indicador-preenchimento {
  stroke: var(--cor-nivel-critico);
}

.diagnostico-card[data-nivel-resultado="atencao"] .diagnostico-indicador-preenchimento {
  stroke: var(--cor-nivel-atencao);
}

.diagnostico-card[data-nivel-resultado="evolucao"] .diagnostico-indicador-preenchimento {
  stroke: var(--cor-nivel-evolucao);
}

.diagnostico-card[data-nivel-resultado="estruturado"] .diagnostico-indicador-preenchimento {
  stroke: var(--cor-nivel-estruturado);
}

.diagnostico-indicador-numero {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-titulo);
}

.diagnostico-indicador-numero strong {
  font-size: 1.65rem;
  color: var(--cor-navy);
  line-height: 1;
}

.diagnostico-indicador-numero span {
  font-size: 0.68rem;
  color: var(--cor-texto-secundario);
  font-family: var(--fonte-texto);
}

.diagnostico-resultado-topo h2 {
  color: var(--cor-navy);
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.diagnostico-resultado-topo p {
  color: var(--cor-texto-secundario);
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.diagnostico-resultado-label,
.diagnostico-recomendacoes-label {
  display: block;
  margin-bottom: 6px;
  color: var(--cor-texto-secundario);
  font-family: var(--fonte-titulo);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.diagnostico-eixos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: var(--esp-5) 0;
  padding: var(--esp-5) 0;
  border-top: 1px solid var(--cor-borda);
  border-bottom: 1px solid var(--cor-borda);
}

.diagnostico-eixo-linha {
  display: grid;
  grid-template-columns: 92px 1fr 40px;
  align-items: center;
  gap: var(--esp-3);
  font-size: 0.86rem;
}

.diagnostico-eixo-nome {
  color: var(--cor-grafite);
  font-weight: 600;
}

.diagnostico-eixo-trilha {
  height: 8px;
  background: var(--cor-fundo-claro);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  overflow: hidden;
}

.diagnostico-eixo-preenchimento {
  display: block;
  height: 100%;
  background: var(--cor-navy);
  border-radius: 999px;
  transition: width 260ms ease;
}

.diagnostico-eixo-linha[data-nivel="critico"] .diagnostico-eixo-preenchimento {
  background: var(--cor-nivel-critico);
}

.diagnostico-eixo-linha[data-nivel="critico"] .diagnostico-eixo-valor {
  color: var(--cor-nivel-critico);
}

.diagnostico-eixo-linha[data-nivel="atencao"] .diagnostico-eixo-preenchimento {
  background: var(--cor-nivel-atencao);
}

.diagnostico-eixo-linha[data-nivel="atencao"] .diagnostico-eixo-valor {
  color: var(--cor-nivel-atencao);
}

.diagnostico-eixo-linha[data-nivel="evolucao"] .diagnostico-eixo-preenchimento {
  background: var(--cor-nivel-evolucao);
}

.diagnostico-eixo-linha[data-nivel="evolucao"] .diagnostico-eixo-valor {
  color: var(--cor-nivel-evolucao);
}

.diagnostico-eixo-linha[data-nivel="estruturado"] .diagnostico-eixo-preenchimento {
  background: var(--cor-nivel-estruturado);
}

.diagnostico-eixo-linha[data-nivel="estruturado"] .diagnostico-eixo-valor {
  color: var(--cor-nivel-estruturado);
}

.diagnostico-eixos-legenda {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin-top: -12px;
  margin-bottom: var(--esp-5);
  color: var(--cor-texto-secundario);
  font-size: 0.72rem;
}

.diagnostico-eixos-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nivel-cor {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nivel-cor--critico { background: var(--cor-nivel-critico); }
.nivel-cor--atencao { background: var(--cor-nivel-atencao); }
.nivel-cor--evolucao { background: var(--cor-nivel-evolucao); }
.nivel-cor--estruturado { background: var(--cor-nivel-estruturado); }

.diagnostico-eixo-valor {
  text-align: right;
  font-weight: 700;
  color: var(--cor-navy);
  font-variant-numeric: tabular-nums;
}

.diagnostico-resumo-pilares {
  margin-bottom: var(--esp-5);
  display: grid;
  gap: var(--esp-2);
}

.diagnostico-resumo-pilares p {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-amarelo);
  border-radius: var(--raio-pequeno);
  background: var(--cor-branco);
  color: var(--cor-grafite);
}

.diagnostico-resumo-pilares p > span:first-child {
  color: var(--cor-texto-secundario);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.diagnostico-resumo-pilares p > strong {
  color: var(--cor-navy);
  font-family: var(--fonte-titulo);
  font-size: 0.98rem;
}

.diagnostico-recomendacoes {
  background: var(--cor-fundo-claro);
  border: 1px solid var(--cor-borda);
  border-top: 4px solid var(--cor-amarelo);
  border-radius: var(--raio-padrao);
  padding: var(--esp-4);
  margin-bottom: var(--esp-5);
}

.diagnostico-recomendacoes h3 {
  color: var(--cor-navy);
  font-size: 1rem;
  margin-bottom: 8px;
}

.diagnostico-recomendacoes p {
  font-size: 0.92rem;
  color: var(--cor-texto-secundario);
  margin-bottom: var(--esp-3);
}

.diagnostico-recomendacoes ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.diagnostico-recomendacoes li {
  color: var(--cor-grafite);
  font-size: 0.92rem;
  padding-left: 16px;
  position: relative;
}

.diagnostico-recomendacoes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cor-navy);
}

.diagnostico-resultado-aviso {
  font-size: 0.85rem;
  color: var(--cor-texto-secundario);
  margin-top: 0;
}

.diagnostico-resultado-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

.diagnostico-conversao {
  margin-top: var(--esp-5);
  padding: var(--esp-5);
  border-radius: var(--raio-padrao);
  background: var(--cor-navy-escuro);
  color: var(--cor-branco);
  box-shadow: 0 14px 30px rgba(6, 37, 79, 0.18);
}

.diagnostico-conversao-label {
  display: block;
  margin-bottom: 8px;
  color: var(--cor-amarelo);
  font-family: var(--fonte-titulo);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.diagnostico-conversao h3 {
  margin-bottom: 10px;
  color: var(--cor-branco);
  font-size: 1.2rem;
}

.diagnostico-conversao h3 span {
  color: var(--cor-amarelo);
}

.diagnostico-conversao > p {
  color: var(--cor-texto-sobre-navy-secundario);
  font-size: 0.92rem;
}

.diagnostico-conversao > ul {
  display: grid;
  gap: 8px;
  margin: 16px 0 20px;
}

.diagnostico-conversao > ul li {
  position: relative;
  padding-left: 22px;
  color: var(--cor-branco);
  font-size: 0.9rem;
}

.diagnostico-conversao > ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cor-amarelo);
  font-weight: 800;
}

.diagnostico-conversao-cta {
  width: 100%;
  min-height: 50px;
}

.diagnostico-conversao .diagnostico-conversao-microcopy {
  margin: 8px 0 0;
  max-width: none;
  color: var(--cor-texto-sobre-navy-secundario);
  font-size: 0.78rem;
  text-align: center;
}

.diagnostico-conversao .diagnostico-resultado-acoes {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.diagnostico-conversao .diagnostico-salvar {
  color: var(--cor-branco);
}

.diagnostico-resultado-acoes .botao {
  min-height: 48px;
}

.diagnostico-cta-final {
  margin-top: var(--esp-5);
  text-align: center;
}

#diagnostico[data-estado="resultado"] .diagnostico-cta-final {
  display: none;
}

@media (min-width: 560px) {
  .diagnostico-resultado-acoes {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 559px) {
  .diagnostico-secao {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .diagnostico-secao > .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .diagnostico-secao-cabecalho {
    margin-bottom: 20px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .diagnostico-secao-cabecalho h2 {
    font-size: 1.55rem;
  }

  .diagnostico-card {
    border-radius: 12px;
    padding: 20px 16px;
    box-shadow: 0 16px 32px rgba(3, 14, 36, 0.24);
  }

  .diagnostico-cabecalho {
    margin-bottom: 18px;
  }

  .diagnostico-resultado-topo {
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 20px;
  }

  .diagnostico-indicador {
    width: 78px;
    height: 78px;
  }

  .diagnostico-indicador-numero strong {
    font-size: 1.45rem;
  }

  .diagnostico-indicador-numero span {
    font-size: 0.62rem;
  }

  .diagnostico-resultado-leitura {
    min-width: 0;
    padding-top: 2px;
  }

  .diagnostico-resultado-topo h2 {
    font-size: 1.15rem;
    line-height: 1.22;
  }

  .diagnostico-resultado-topo p {
    font-size: 0.9rem;
  }

  .diagnostico-eixos {
    gap: 12px;
    margin: 20px 0;
    padding: 18px 0;
  }

  .diagnostico-eixo-linha {
    grid-template-columns: minmax(74px, 88px) minmax(60px, 1fr) 38px;
    gap: 8px;
    font-size: 0.82rem;
  }

  .diagnostico-eixo-trilha {
    height: 9px;
  }

  .diagnostico-resumo-pilares {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }

  .diagnostico-resumo-pilares p {
    padding: 11px 10px;
  }

  .diagnostico-resumo-pilares p > strong {
    font-size: 0.88rem;
    line-height: 1.35;
  }

  .diagnostico-recomendacoes {
    padding: 16px;
    margin-bottom: 18px;
  }

  .diagnostico-recomendacoes p,
  .diagnostico-recomendacoes li,
  .diagnostico-resultado-aviso {
    font-size: 0.88rem;
  }

  .diagnostico-resultado-acoes {
    gap: 10px;
    margin-top: 18px;
  }

  .diagnostico-resultado-acoes .botao {
    width: 100%;
  }

  .diagnostico-navegacao {
    gap: 8px;
  }

  .diagnostico-navegacao .botao {
    min-width: 0;
    white-space: normal;
  }
}

/* -----------------------------------------------------------
   Faixa de credibilidade — 4 blocos editoriais
   ----------------------------------------------------------- */
.credibilidade {
  background: var(--cor-branco);
  padding: var(--esp-6) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.credibilidade-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-5) var(--esp-4);
}

@media (min-width: 760px) {
  .credibilidade-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.credibilidade-bloco {
  padding-left: var(--esp-4);
  border-left: 2px solid var(--cor-amarelo);
}

.credibilidade-numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cor-amarelo);
  margin-bottom: 4px;
}

.credibilidade-titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cor-texto-secundario);
  margin-bottom: 6px;
}

.credibilidade-texto {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cor-grafite);
  margin: 0;
  max-width: 26ch;
}

/* -----------------------------------------------------------
   Serviços — composição editorial com "possíveis entregas"
   ----------------------------------------------------------- */
.servicos-grid {
  display: grid;
  gap: var(--esp-8);
}

@media (min-width: 900px) {
  .servicos-grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }
}

.servicos-intro {
  position: sticky;
  top: 100px;
}

.servicos-intro p {
  color: var(--cor-texto-secundario);
}

.servicos-lista {
  display: flex;
  flex-direction: column;
}

.servico-linha {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--esp-4);
  padding: var(--esp-5) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.servico-linha:first-child {
  padding-top: 0;
}

.servico-numero {
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cor-amarelo);
  -webkit-text-stroke: 1px var(--cor-navy);
}

.servico-conteudo {
  min-width: 0;
}

.servico-gatilho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.servico-gatilho h3 {
  margin-bottom: 6px;
}

.servico-gatilho p {
  color: var(--cor-texto-secundario);
  font-size: 0.98rem;
  margin-bottom: 0;
  max-width: 56ch;
}

.servico-icone-toggle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--cor-navy);
  transition: transform var(--transicao-padrao);
}

.servico-gatilho[aria-expanded="true"] .servico-icone-toggle {
  transform: rotate(45deg);
}

.servico-entregas {
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px dashed var(--cor-borda);
}

.servico-entregas-titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-navy);
  margin-bottom: 8px;
}

.servico-entregas ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.servico-entregas li {
  font-size: 0.92rem;
  color: var(--cor-texto-secundario);
  padding-left: 14px;
  position: relative;
}

.servico-entregas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cor-amarelo);
}

/* -----------------------------------------------------------
   BI interativo — painel demonstrativo (HTML + CSS + SVG puro)
   ----------------------------------------------------------- */
.bi-painel {
  margin-top: var(--esp-2);
}

.bi-abas {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: var(--esp-6);
  overflow-x: auto;
}

.bi-aba {
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--esp-3) var(--esp-4);
  font-family: var(--fonte-titulo);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cor-texto-secundario);
  cursor: pointer;
  white-space: nowrap;
  min-height: 48px;
  transition: color var(--transicao-padrao), border-color var(--transicao-padrao);
}

.bi-aba:hover {
  color: var(--cor-navy);
}

.bi-aba[aria-selected="true"] {
  color: var(--cor-navy);
  border-bottom-color: var(--cor-amarelo);
}

.bi-conteudo {
  background: var(--cor-fundo-claro);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-padrao);
  padding: var(--esp-6) var(--esp-5);
}

@media (min-width: 700px) {
  .bi-conteudo {
    padding: var(--esp-7) var(--esp-6);
  }
}

/* Tooltip acessível via CSS (funciona em mouse, teclado e toque) */
.bi-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--cor-navy-escuro);
  color: var(--cor-branco);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: var(--raio-pequeno);
  white-space: normal;
  width: max-content;
  max-width: 220px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 20;
}

.bi-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--cor-navy-escuro);
}

button:hover .bi-tooltip,
button:focus-visible .bi-tooltip,
button:focus .bi-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Painel 1: Receita e margem */
.bi-grafico-receita {
  position: relative;
  height: 220px;
}

.bi-barras-receita {
  display: flex;
  align-items: flex-end;
  gap: var(--esp-3);
  height: 100%;
  position: relative;
  z-index: 1;
}

.bi-coluna-receita {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.bi-barra-receita {
  position: relative;
  width: 100%;
  max-width: 46px;
  background: rgba(8, 47, 107, 0.16);
  border: none;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  min-height: 8px;
}

.bi-barra-receita--destaque {
  background: rgba(242, 183, 5, 0.55);
}

.bi-eixo-label {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--cor-texto-secundario);
  font-weight: 600;
}

.bi-linha-margem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.bi-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 0.82rem;
  color: var(--cor-texto-secundario);
  margin: var(--esp-4) 0 0;
}

.bi-legenda-item {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-left: 4px;
}

.bi-legenda-item--barra {
  background: rgba(8, 47, 107, 0.4);
}

.bi-legenda-item--linha {
  background: var(--cor-navy);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.bi-legenda-item--receita {
  background: rgba(8, 47, 107, 0.35);
}

.bi-legenda-item--margem {
  background: var(--cor-amarelo);
}

.bi-callout {
  margin: var(--esp-4) 0 0;
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-branco);
  border-left: 3px solid var(--cor-amarelo);
  border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
  font-size: 0.9rem;
  color: var(--cor-grafite);
  font-weight: 500;
}

.bi-tabela-detalhes {
  margin-top: var(--esp-5);
}

.bi-tabela-detalhes summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-navy);
  padding: 8px 0;
}

.bi-tabela-detalhes table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--esp-3);
  font-size: 0.86rem;
  background: var(--cor-branco);
}

.bi-tabela-detalhes th,
.bi-tabela-detalhes td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--cor-borda);
}

.bi-tabela-detalhes th[scope="col"] {
  font-family: var(--fonte-titulo);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-secundario);
}

/* Painel 2: Carteira de clientes */
.bi-carteira-barra {
  display: flex;
  height: 40px;
  border-radius: var(--raio-pequeno);
  overflow: visible;
  gap: 2px;
}

.bi-carteira-segmento {
  position: relative;
  border: none;
  cursor: pointer;
  height: 100%;
}

.bi-carteira-segmento:first-child {
  border-radius: var(--raio-pequeno) 0 0 var(--raio-pequeno);
}

.bi-carteira-segmento:last-child {
  border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
}

.bi-carteira-segmento--recorrente {
  background: var(--cor-navy);
}

.bi-carteira-segmento--atencao {
  background: var(--cor-amarelo);
}

.bi-carteira-segmento--inativo {
  background: var(--cor-borda);
}

.bi-carteira-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  margin: var(--esp-4) 0 0;
  font-size: 0.88rem;
  color: var(--cor-grafite);
}

.bi-carteira-legenda li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bi-carteira-marcador {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.bi-carteira-marcador--recorrente {
  background: var(--cor-navy);
}

.bi-carteira-marcador--atencao {
  background: var(--cor-amarelo);
}

.bi-carteira-marcador--inativo {
  background: var(--cor-borda);
}

.bi-estatisticas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-4);
  margin: var(--esp-6) 0 0;
}

.bi-estatistica {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-padrao);
  padding: var(--esp-4);
}

.bi-estatistica-numero {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--cor-navy);
  line-height: 1;
  margin-bottom: 6px;
}

.bi-estatistica-label {
  font-size: 0.82rem;
  color: var(--cor-texto-secundario);
}

/* Painel 3: Mix e canais */
.bi-mix-lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.bi-mix-linha {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: var(--esp-3);
}

@media (min-width: 560px) {
  .bi-mix-linha {
    grid-template-columns: 140px 1fr;
  }
}

.bi-mix-nome {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cor-grafite);
}

.bi-mix-barras {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bi-mix-barra {
  position: relative;
  height: 16px;
  border-radius: 0 4px 4px 0;
  border: none;
  cursor: pointer;
  min-width: 24px;
}

.bi-mix-barra--receita {
  background: rgba(8, 47, 107, 0.35);
}

.bi-mix-barra--margem {
  background: var(--cor-amarelo);
}

.bi-mix-barra--destaque {
  background: #d99f00;
}

.bi-aviso {
  text-align: center;
  font-size: 0.8rem;
  color: var(--cor-texto-secundario);
  font-style: italic;
  margin: var(--esp-5) 0 0;
}

/* -----------------------------------------------------------
   Problemas — duas colunas
   ----------------------------------------------------------- */
.problemas-grid {
  display: grid;
  gap: var(--esp-7);
}

@media (min-width: 900px) {
  .problemas-grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.problemas-texto h2 {
  margin-bottom: var(--esp-4);
}

.problemas-texto p {
  color: var(--cor-texto-secundario);
  font-size: 1.05rem;
}

.lista-perguntas {
  display: flex;
  flex-direction: column;
}

.lista-perguntas li {
  display: flex;
  gap: var(--esp-4);
  padding: var(--esp-4) 0;
  border-bottom: 1px solid var(--cor-borda);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--cor-navy);
}

.lista-perguntas li:first-child {
  padding-top: 0;
}

.lista-perguntas li span.numero {
  color: var(--cor-texto-secundario);
  font-weight: 500;
  flex-shrink: 0;
}

.problemas-fechamento {
  margin-top: var(--esp-7);
  padding-top: var(--esp-6);
  border-top: 2px solid var(--cor-navy);
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cor-navy);
  max-width: 60ch;
}

/* -----------------------------------------------------------
   Como trabalhamos — linha de processo contínua
   ----------------------------------------------------------- */
.etapas {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 900px) {
  .etapas {
    grid-template-columns: repeat(5, 1fr);
  }

  .etapas::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cor-borda);
  }
}

.etapa-item {
  position: relative;
  padding: 0 var(--esp-4) 0 0;
  margin-bottom: var(--esp-6);
}

@media (min-width: 900px) {
  .etapa-item {
    padding: var(--esp-6) var(--esp-4) 0 0;
    margin-bottom: 0;
  }
}

.etapa-marcador {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-2);
}

@media (min-width: 900px) {
  .etapa-marcador {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.etapa-ponto {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cor-amarelo);
  border: 3px solid var(--cor-navy);
  flex-shrink: 0;
  z-index: 1;
}

.etapa-numero {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--cor-texto-secundario);
}

@media (min-width: 900px) {
  .etapa-numero {
    display: none;
  }
}

.etapa-item h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.etapa-item p {
  font-size: 0.92rem;
  color: var(--cor-texto-secundario);
  margin-bottom: 0;
}

.etapas-fechamento {
  margin-top: var(--esp-7);
  color: var(--cor-texto-secundario);
  max-width: 70ch;
  font-size: 1.02rem;
}

/* -----------------------------------------------------------
   Para quem é — duas colunas, sem caixas
   ----------------------------------------------------------- */
.lista-perfil {
  display: grid;
  gap: 0;
}

@media (min-width: 760px) {
  .lista-perfil {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--esp-8);
  }
}

.lista-perfil li {
  display: flex;
  gap: var(--esp-3);
  align-items: baseline;
  padding: var(--esp-4) 0;
  border-bottom: 1px solid var(--cor-borda);
  font-size: 1.02rem;
}

.lista-perfil li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cor-amarelo);
  flex-shrink: 0;
  transform: translateY(-2px);
}

/* -----------------------------------------------------------
   Sobre — manifesto institucional
   ----------------------------------------------------------- */
.sobre-manifesto {
  max-width: 780px;
}

.sobre-manifesto .identificador {
  margin-bottom: var(--esp-5);
}

.sobre-manifesto h2 {
  font-size: clamp(1.9rem, 3vw + 1rem, 2.8rem);
  margin-bottom: var(--esp-6);
  max-width: 20ch;
}

.sobre-manifesto p {
  font-size: 1.15rem;
  max-width: 58ch;
}

/* -----------------------------------------------------------
   Fundador
   ----------------------------------------------------------- */
.fundador-grid {
  display: grid;
  gap: var(--esp-7);
  align-items: start;
}

@media (min-width: 860px) {
  .fundador-grid {
    grid-template-columns: 38% 1fr;
    gap: var(--esp-8);
  }
}

.fundador-foto {
  border-radius: var(--raio-padrao);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--cor-fundo-claro);
}

.fundador-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fundador-formacao {
  margin: var(--esp-5) 0 var(--esp-6);
}

.fundador-formacao li {
  padding: var(--esp-3) 0;
  border-bottom: 1px solid var(--cor-borda);
  color: var(--cor-texto-secundario);
  font-size: 0.98rem;
}

.fundador-formacao li:first-child {
  padding-top: 0;
}

/* -----------------------------------------------------------
   Confidencialidade
   ----------------------------------------------------------- */
.confidencialidade-grid {
  display: grid;
  gap: var(--esp-7);
}

@media (min-width: 900px) {
  .confidencialidade-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.confidencialidade-texto {
  border-left: 3px solid var(--cor-amarelo);
  padding-left: var(--esp-5);
}

.confidencialidade-texto svg {
  width: 26px;
  height: 26px;
  color: var(--cor-navy);
  margin-bottom: var(--esp-4);
}

.confidencialidade-lista li {
  display: flex;
  gap: var(--esp-3);
  padding: var(--esp-3) 0;
  border-bottom: 1px solid var(--cor-borda);
  font-size: 1rem;
}

.confidencialidade-lista li:first-child {
  padding-top: 0;
}

.confidencialidade-lista li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--cor-navy);
  flex-shrink: 0;
}

/* -----------------------------------------------------------
   FAQ
   ----------------------------------------------------------- */
.faq-lista {
  max-width: 780px;
}

.faq-item {
  border-bottom: 1px solid var(--cor-borda);
}

.faq-item:first-child {
  border-top: 1px solid var(--cor-borda);
}

.faq-pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-5) 4px;
  min-height: 48px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--fonte-titulo);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--cor-grafite);
  cursor: pointer;
  transition: color var(--transicao-padrao);
}

.faq-pergunta:hover {
  color: var(--cor-navy);
}

.faq-pergunta .faq-icone {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  transition: transform var(--transicao-padrao);
  color: var(--cor-navy);
}

.faq-pergunta[aria-expanded="true"] {
  color: var(--cor-navy);
}

.faq-pergunta[aria-expanded="true"] .faq-icone {
  transform: rotate(45deg);
}

.faq-resposta {
  padding: 0 4px var(--esp-5);
  color: var(--cor-texto-secundario);
  max-width: 68ch;
  font-size: 1rem;
}

/* -----------------------------------------------------------
   Contato
   ----------------------------------------------------------- */
.contato-grid {
  display: grid;
  gap: var(--esp-7);
}

@media (min-width: 960px) {
  .contato-grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }
}

.contato-info h2 {
  color: var(--cor-branco);
}

.contato-info p {
  color: var(--cor-texto-sobre-navy-secundario);
  font-size: 1.05rem;
}

.contato-detalhes {
  margin-top: var(--esp-6);
  display: flex;
  flex-direction: column;
}

.contato-detalhes a,
.contato-detalhes span {
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--esp-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--cor-branco);
  font-size: 0.98rem;
}

.contato-detalhes a:hover {
  color: var(--cor-amarelo);
}

.contato-detalhes svg {
  width: 18px;
  height: 18px;
  color: var(--cor-amarelo);
  flex-shrink: 0;
}

.formulario-card {
  background: var(--cor-branco);
  border-radius: var(--raio-padrao);
  padding: var(--esp-6);
  color: var(--cor-grafite);
}

@media (min-width: 560px) {
  .formulario-card {
    padding: var(--esp-7);
  }
}

.campo {
  margin-bottom: var(--esp-5);
}

.campo label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: var(--esp-2);
  color: var(--cor-grafite);
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  font-family: inherit;
  font-size: 0.98rem;
  background: var(--cor-branco);
  color: var(--cor-grafite);
  min-height: 48px;
}

.campo textarea {
  min-height: 120px;
  resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
  border-color: var(--cor-navy);
}

.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: #b3261e;
}

.campo-erro {
  display: block;
  min-height: 1.1em;
  font-size: 0.82rem;
  color: #b3261e;
  margin-top: 4px;
}

.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
}

.campo-checkbox input {
  width: 20px;
  height: 20px;
  min-height: auto;
  margin-top: 2px;
  flex-shrink: 0;
}

.campo-checkbox label {
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--cor-texto-secundario);
}

.campo-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin-top: var(--esp-4);
  font-size: 0.92rem;
  min-height: 1.2em;
}

.form-status--sucesso {
  color: #1a6a3a;
}

.form-status--erro {
  color: #b3261e;
}

/* -----------------------------------------------------------
   Botão flutuante de WhatsApp
   Visível em desktop, tablet e mobile. No desktop, revela um rótulo
   discreto ao passar o mouse ou focar via teclado; no mobile, mantém
   apenas o ícone para não ocupar espaço da tela.
   ----------------------------------------------------------- */
.whatsapp-flutuante {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #128c7e;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(6, 22, 51, 0.28);
  overflow: hidden;
  transition: width var(--transicao-padrao), padding var(--transicao-padrao),
    box-shadow var(--transicao-padrao);
}

.whatsapp-flutuante:hover {
  box-shadow: 0 10px 24px rgba(6, 22, 51, 0.34);
}

.whatsapp-flutuante-icone {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.whatsapp-flutuante-rotulo {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
  transition: max-width var(--transicao-padrao), opacity var(--transicao-padrao),
    margin-left var(--transicao-padrao);
}

@media (min-width: 900px) {
  .whatsapp-flutuante {
    width: 56px;
    height: 56px;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .whatsapp-flutuante:hover,
  .whatsapp-flutuante:focus-visible {
    width: auto;
    padding: 0 22px 0 17px;
  }

  .whatsapp-flutuante:hover .whatsapp-flutuante-rotulo,
  .whatsapp-flutuante:focus-visible .whatsapp-flutuante-rotulo {
    max-width: 220px;
    opacity: 1;
    margin-left: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-flutuante,
  .whatsapp-flutuante-rotulo {
    transition: none;
  }
}

/* Ganchos para ocultar apenas em impressão ou quando um modal real estiver
   aberto no futuro (nenhum modal existe hoje; a classe fica pronta). */
@media print {
  .whatsapp-flutuante {
    display: none;
  }
}

body.modal-aberto .whatsapp-flutuante {
  display: none;
}

/* Durante perguntas e resultado já existem CTAs próprios no card. Ocultar o
   botão flutuante evita que ele cubra respostas ou ações em telas pequenas. */
body.diagnostico-em-uso .whatsapp-flutuante {
  display: none;
}

/* -----------------------------------------------------------
   Rodapé
   ----------------------------------------------------------- */
.site-footer {
  background: var(--cor-navy-escuro);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--esp-8) 0 var(--esp-6);
}

.footer-logo img {
  height: 32px;
  width: auto;
  margin-bottom: var(--esp-4);
}

.footer-grid {
  display: grid;
  gap: var(--esp-7);
  margin-bottom: var(--esp-7);
  padding-bottom: var(--esp-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

.footer-marca p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.95rem;
  max-width: 34ch;
}

.site-footer h3 {
  color: var(--cor-branco);
  font-family: var(--fonte-titulo);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--esp-4);
}

.footer-lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
}

.footer-lista a {
  text-decoration: none;
  color: inherit;
}

.footer-lista a:hover {
  color: var(--cor-amarelo);
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-base a {
  text-decoration: underline;
  color: inherit;
}

/* -----------------------------------------------------------
   Páginas legais
   ----------------------------------------------------------- */
.pagina-legal {
  padding: var(--esp-8) 0 var(--esp-9);
}

.pagina-legal .container {
  max-width: 780px;
}

.pagina-legal h2 {
  margin-top: 1.8em;
  font-size: 1.5rem;
}

.pagina-legal p,
.pagina-legal li {
  color: var(--cor-texto-secundario);
}

.pagina-legal ul {
  list-style: disc;
  padding-left: 1.3em;
  margin-bottom: 1em;
}

/* -----------------------------------------------------------
   Reveal discreto ao rolar
   ----------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 280ms ease, transform 280ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------
   Utilitários
   ----------------------------------------------------------- */
.somente-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------
   Impressão do resumo do diagnóstico ("Salvar resumo")
   Ativado via window.print() a partir de main.js.
   ----------------------------------------------------------- */
@media print {
  body.diagnostico-imprimindo .site-header,
  body.diagnostico-imprimindo .mobile-nav,
  body.diagnostico-imprimindo .whatsapp-flutuante,
  body.diagnostico-imprimindo .site-footer,
  body.diagnostico-imprimindo main > section:not(.hero),
  body.diagnostico-imprimindo .hero-conteudo,
  body.diagnostico-imprimindo .hero-acoes--mobile-pos,
  body.diagnostico-imprimindo .diagnostico-card > div[data-tela="intro"],
  body.diagnostico-imprimindo .diagnostico-card > div[data-tela="perguntas"],
  body.diagnostico-imprimindo .diagnostico-ocultar-impressao {
    display: none !important;
  }

  body.diagnostico-imprimindo .hero {
    background: var(--cor-branco) !important;
    padding: 0 !important;
  }

  body.diagnostico-imprimindo .hero-grid.container,
  body.diagnostico-imprimindo .hero .container {
    display: block !important;
  }

  body.diagnostico-imprimindo .diagnostico-card {
    box-shadow: none !important;
    padding: 0 !important;
    color: #000 !important;
  }

  body.diagnostico-imprimindo .diagnostico-card h2,
  body.diagnostico-imprimindo .diagnostico-titulo-fixo {
    color: #000 !important;
  }
}

/* -----------------------------------------------------------
   Multivisão Gerencial — demonstração de BI (Rodada 5)
   Cores adicionais permitidas apenas aqui, nos gráficos.
   ----------------------------------------------------------- */
.bidemo-secao {
  background: var(--cor-navy-escuro);
  color: #fff;
}

.bidemo-secao .secao-cabecalho h2 {
  color: var(--cor-branco);
}

.bidemo-secao .secao-cabecalho p {
  color: #d7e0ec;
}

.bidemo-secao .identificador--claro {
  color: var(--cor-branco);
}

.bidemo-shell {
  background: var(--cor-branco);
  border-radius: var(--raio-padrao);
  overflow: hidden;
  color: var(--cor-grafite);
}

.bidemo-abas {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  background: var(--cor-fundo-claro);
  border-bottom: 1px solid var(--cor-borda);
  -webkit-overflow-scrolling: touch;
}

.bidemo-aba {
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 14px 18px;
  font-family: var(--fonte-titulo);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cor-texto-secundario);
  cursor: pointer;
  white-space: nowrap;
  min-height: 48px;
}

.bidemo-aba:hover {
  color: var(--cor-navy);
}

.bidemo-aba[aria-selected="true"] {
  color: var(--cor-navy);
  border-bottom-color: var(--cor-amarelo);
  background: var(--cor-branco);
}

.bidemo-painel {
  padding: 20px 16px 28px;
}

@media (min-width: 700px) {
  .bidemo-painel {
    padding: 28px 28px 32px;
  }
}

.bidemo-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 400px) {
  .bidemo-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 700px) {
  .bidemo-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bidemo-card {
  position: relative;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: 14px 14px 12px;
  padding-left: 18px;
}

.bidemo-card-marcador {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--raio-pequeno) 0 0 var(--raio-pequeno);
}

.bidemo-card-rotulo {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cor-texto-secundario);
  margin-bottom: 6px;
}

.bidemo-card-valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cor-navy);
  line-height: 1.15;
}

.bidemo-card-variacao {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  margin-top: 4px;
}

.bidemo-grade-graficos {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

@media (min-width: 860px) {
  .bidemo-grade-graficos {
    grid-template-columns: 1.4fr 1fr;
  }
}

.bidemo-coluna-grafico:empty {
  display: none;
}

.bidemo-grafico-titulo {
  font-size: 0.92rem;
  color: var(--cor-grafite);
  margin-bottom: 14px;
}

.bidemo-barras {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 180px;
  border-bottom: 1px solid var(--cor-borda);
  padding-bottom: 2px;
}

.bidemo-barras-coluna {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.bidemo-barras-grupo {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 100%;
  width: 100%;
  justify-content: center;
}

.bidemo-barra {
  position: relative;
  width: 100%;
  max-width: 34px;
  border: none;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  min-height: 4px;
  padding: 0;
}

.bidemo-barras-label {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--cor-texto-secundario);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.bidemo-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--cor-navy-escuro);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: var(--raio-pequeno);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 5;
}

button.bidemo-barra:hover .bidemo-tooltip,
button.bidemo-barra:focus-visible .bidemo-tooltip,
button.bidemo-ranking-barra:hover .bidemo-tooltip,
button.bidemo-ranking-barra:focus-visible .bidemo-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.bidemo-legenda {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--cor-texto-secundario);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.bidemo-legenda-cor {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-left: 6px;
}

.bidemo-ranking {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bidemo-ranking-linha {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 10px;
}

@media (max-width: 374px) {
  .bidemo-ranking-linha {
    grid-template-columns: 78px 1fr auto;
    gap: 6px;
  }
  .bidemo-ranking-rotulo {
    font-size: 0.72rem;
  }
}

.bidemo-ranking-rotulo {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cor-grafite);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bidemo-ranking-trilha {
  height: 14px;
  background: var(--cor-fundo-claro);
  border-radius: 999px;
  overflow: visible;
  position: relative;
}

.bidemo-ranking-barra {
  position: relative;
  display: block;
  height: 100%;
  min-width: 6px;
  background: var(--cor-navy);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.bidemo-ranking-valor {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cor-navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bidemo-rosca-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

@media (min-width: 480px) {
  .bidemo-rosca-wrap {
    flex-direction: row;
    align-items: center;
  }
}

.bidemo-rosca-svg {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
}

.bidemo-rosca-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--cor-grafite);
}

.bidemo-rosca-legenda li {
  display: flex;
  align-items: center;
}

.bidemo-funil {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bidemo-funil-cabecalho {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  margin-bottom: 4px;
}

.bidemo-funil-rotulo {
  color: var(--cor-grafite);
  font-weight: 600;
}

.bidemo-funil-valor {
  color: var(--cor-navy);
}

.bidemo-funil-trilha {
  height: 16px;
  background: var(--cor-fundo-claro);
  border-radius: var(--raio-pequeno);
}

.bidemo-funil-barra {
  height: 100%;
  border-radius: var(--raio-pequeno);
  transition: width 260ms ease;
}

.bidemo-combo {
  position: relative;
  height: 220px;
}

.bidemo-combo-barras {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100%;
  position: relative;
  z-index: 1;
}

.bidemo-combo-linha {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.bidemo-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bidemo-meta-cabecalho {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.bidemo-meta-rotulo {
  font-weight: 600;
  color: var(--cor-grafite);
}

.bidemo-meta-percentual {
  color: var(--cor-navy);
}

.bidemo-meta-trilha {
  height: 10px;
  background: var(--cor-fundo-claro);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
}

.bidemo-meta-barra {
  height: 100%;
  border-radius: 999px;
  transition: width 260ms ease;
}

.bidemo-meta-valores {
  display: block;
  font-size: 0.76rem;
  color: var(--cor-texto-secundario);
  margin-top: 4px;
}

.bidemo-tabela-detalhes {
  margin: 8px 0 20px;
}

.bidemo-tabela-detalhes summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cor-navy);
  padding: 8px 0;
}

.bidemo-tabela-detalhes table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: 8px;
}

.bidemo-tabela-detalhes th,
.bidemo-tabela-detalhes td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cor-borda);
}

.bidemo-tabela-detalhes th[scope="col"] {
  font-family: var(--fonte-titulo);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}

.bidemo-analise {
  font-size: 0.92rem;
  color: var(--cor-grafite);
  background: var(--cor-fundo-claro);
  border-left: 3px solid var(--cor-navy);
  padding: 12px 16px;
  border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
  margin-bottom: 12px;
}

.bidemo-alertas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bidemo-alertas li {
  font-size: 0.85rem;
  color: #92400e;
  background: #fef3e2;
  border: 1px solid #f5d9a8;
  padding: 10px 14px;
  border-radius: var(--raio-pequeno);
  padding-left: 14px;
  border-left: 3px solid #b8860b;
}

.bidemo-aviso {
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
  margin: 20px 0 0;
}

/* -----------------------------------------------------------
   Prévia do BI no hero (mini demonstração, não interativa)
   ----------------------------------------------------------- */
.hero-preview-bi {
  background: var(--cor-branco);
  border-radius: var(--raio-padrao);
  padding: 18px;
  color: var(--cor-grafite);
  box-shadow: 0 24px 48px rgba(3, 14, 36, 0.28);
}

.hero-preview-bi-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.hero-preview-bi-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--cor-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero-preview-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.hero-preview-card {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: 8px 10px;
}

.hero-preview-card span {
  display: block;
  font-size: 0.66rem;
  color: var(--cor-texto-secundario);
  text-transform: uppercase;
}

.hero-preview-card strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  color: var(--cor-navy);
}

.hero-preview-grafico {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
  border-bottom: 1px solid var(--cor-borda);
}

.hero-preview-barra {
  flex: 1;
  background: var(--cor-amarelo);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
}

.hero-preview-aviso {
  margin: 10px 0 0;
  font-size: 0.68rem;
  color: var(--cor-texto-secundario);
  text-align: center;
  font-style: italic;
}

/* ===========================================================
   Landing page de BI Gerencial (/bi-gerencial/)
   =========================================================== */

/* -----------------------------------------------------------
   Prévia grande do dashboard no hero (sem moldura de dispositivo)
   ----------------------------------------------------------- */
.bilp-hero-preview {
  background: var(--cor-branco);
  border-radius: var(--raio-padrao);
  padding: 20px;
  color: var(--cor-grafite);
  box-shadow: 0 24px 48px rgba(3, 14, 36, 0.28);
}

@media (min-width: 700px) {
  .bilp-hero-preview {
    padding: 26px;
  }
}

.bilp-hero-preview-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cor-borda);
}

.bilp-hero-preview-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cor-navy);
}

.bilp-hero-preview-periodo {
  font-size: 0.72rem;
  color: var(--cor-texto-secundario);
  font-style: italic;
}

.bilp-hero-preview-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.bilp-hero-preview-card {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  padding: 12px 12px 10px;
}

.bilp-hero-preview-card span {
  display: block;
  font-size: 0.68rem;
  color: var(--cor-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.bilp-hero-preview-card strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  color: var(--cor-navy);
  line-height: 1.15;
}

.bilp-hero-preview-card em {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 4px;
}

.bilp-tendencia-positiva { color: #1a7a4c; }
.bilp-tendencia-atencao { color: #b8860b; }

.bilp-hero-preview-grafico {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
  border-bottom: 1px solid var(--cor-borda);
  padding-bottom: 2px;
  margin-bottom: 12px;
}

.bilp-hero-preview-barra {
  flex: 1;
  background: rgba(8, 47, 107, 0.28);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
}

.bilp-hero-preview-barra--atual {
  background: var(--cor-amarelo);
}

.bilp-hero-preview-alerta {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #92400e;
  background: #fef3e2;
  border-left: 3px solid #b8860b;
  padding: 8px 10px;
  border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
}

/* -----------------------------------------------------------
   "O que você passa a enxergar" — blocos de benefício
   ----------------------------------------------------------- */
.bilp-enxerga-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 560px) {
  .bilp-enxerga-grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .bilp-enxerga-grade {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bilp-enxerga-bloco {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-padrao);
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bilp-enxerga-bloco h3 {
  margin-bottom: 10px;
}

.bilp-enxerga-bloco ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  flex-grow: 1;
}

.bilp-enxerga-bloco li {
  font-size: 0.88rem;
  color: var(--cor-texto-secundario);
  padding-left: 14px;
  position: relative;
}

.bilp-enxerga-bloco li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cor-amarelo);
}

.bilp-enxerga-frase {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cor-navy);
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--cor-borda);
}

/* -----------------------------------------------------------
   Multivisão "grande" (versão ampliada para a landing page)
   ----------------------------------------------------------- */
.bidemo-shell--grande .bidemo-painel {
  padding: 22px 16px 30px;
}

@media (min-width: 700px) {
  .bidemo-shell--grande .bidemo-painel {
    padding: 32px 32px 36px;
  }
}

.bidemo-shell--grande .bidemo-card-valor {
  font-size: 1.55rem;
}

@media (min-width: 700px) {
  .bidemo-shell--grande .bidemo-barras,
  .bidemo-shell--grande .bidemo-combo {
    height: 240px;
  }
}

.bidemo-filtro-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--cor-branco);
  border-bottom: 1px solid var(--cor-borda);
}

@media (min-width: 700px) {
  .bidemo-filtro-periodo {
    padding: 16px 32px;
  }
}

.bidemo-filtro-chip {
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-claro);
  color: var(--cor-texto-secundario);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
}

.bidemo-filtro-chip[aria-pressed="true"] {
  background: var(--cor-navy);
  border-color: var(--cor-navy);
  color: #fff;
}

.bidemo-filtro-nota {
  font-size: 0.72rem;
  color: var(--cor-texto-secundario);
  font-style: italic;
  flex-basis: 100%;
}

@media (min-width: 900px) {
  .bidemo-filtro-nota {
    flex-basis: auto;
    margin-left: 8px;
  }
}

/* -----------------------------------------------------------
   Exemplos de aplicação
   ----------------------------------------------------------- */
.bilp-exemplos-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 700px) {
  .bilp-exemplos-grade {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bilp-exemplo-card {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-padrao);
  padding: 20px;
}

.bilp-exemplo-selo {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-navy);
  background: rgba(8, 47, 107, 0.07);
  border: 1px solid rgba(8, 47, 107, 0.16);
  padding: 4px 10px;
  border-radius: var(--raio-pequeno);
  margin-bottom: 12px;
}

.bilp-exemplo-card h3 {
  margin-bottom: 10px;
}

.bilp-exemplo-card ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bilp-exemplo-card li {
  font-size: 0.86rem;
  color: var(--cor-texto-secundario);
  padding-left: 14px;
  position: relative;
}

.bilp-exemplo-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cor-navy);
}

/* -----------------------------------------------------------
   "Pode não ser o momento ideal"
   ----------------------------------------------------------- */
.bilp-nao-ideal {
  margin-top: 32px;
  padding: 20px;
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-left: 3px solid #b3261e;
  border-radius: 0 var(--raio-padrao) var(--raio-padrao) 0;
}

.bilp-nao-ideal h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}

.bilp-nao-ideal ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bilp-nao-ideal li {
  font-size: 0.88rem;
  color: var(--cor-texto-secundario);
  padding-left: 14px;
  position: relative;
}

.bilp-nao-ideal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b3261e;
}

/* -----------------------------------------------------------
   Ajustes finos de responsividade específicos da landing page
   ----------------------------------------------------------- */
@media (max-width: 374px) {
  .bilp-hero-preview-cards {
    grid-template-columns: 1fr;
  }
  .bilp-hero-preview-card strong {
    font-size: 1.15rem;
  }
}

/* ============================================================
   FASE 3 — MB PULSO: "Qual é o momento", seção MB Pulso,
   demonstração recriada e comparativo. Mobile-first: todas as
   regras abaixo assumem uma coluna por padrão; larguras maiores
   só entram nos media queries no final do bloco.
   ============================================================ */

/* --- Qual é o momento da sua empresa? (3 caminhos) --- */
.caminhos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}
.caminho-card {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.caminho-card-numero {
  font-family: var(--fonte-titulo, inherit);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-amarelo);
}
.caminho-card h3 { font-size: 1.15rem; margin: 0; }
.caminho-card p { color: var(--cor-texto-secundario); font-size: 0.95rem; margin: 0; }
.caminho-card-proximo {
  font-size: 0.85rem;
  color: var(--cor-grafite);
  border-top: 1px solid var(--cor-borda);
  padding-top: 12px;
  margin-top: auto;
}
.caminho-card .botao { align-self: flex-start; margin-top: 8px; }

/* --- Seção destacada MB Pulso --- */
.mbpulso-secao {
  background: var(--cor-navy);
  color: var(--cor-texto-sobre-navy);
  padding: 64px 0;
}
.mbpulso-secao .identificador--claro { color: var(--cor-amarelo); }
.mbpulso-secao h2 { color: #fff; margin-top: 8px; }
.mbpulso-secao p { color: var(--cor-texto-sobre-navy-secundario); }
.mbpulso-destaques {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.mbpulso-destaques li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: #fff;
}
.mbpulso-destaques li svg { flex-shrink: 0; margin-top: 2px; color: var(--cor-amarelo); }
.mbpulso-preco-bloco {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 20px 0;
}
.mbpulso-preco-valor { font-size: 1.6rem; font-weight: 800; color: #fff; }
.mbpulso-preco-condicao { font-size: 0.85rem; color: var(--cor-texto-sobre-navy-secundario); margin-top: 4px; }
.mbpulso-preco-aviso { font-size: 0.78rem; color: var(--cor-amarelo); margin-top: 8px; }
.mbpulso-assinatura { font-size: 0.82rem; color: var(--cor-texto-sobre-navy-secundario); margin-top: 20px; }
.mbpulso-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.mbpulso-form-wrapper { margin-top: 16px; max-width: 440px; }
.mbpulso-form-wrapper .campo-checkbox label a { color: var(--cor-navy); }

/* --- Demonstração do MB Pulso (recriada, dados fictícios) --- */
.mbpulso-demo-secao { background: var(--cor-fundo-claro); padding: 56px 0; }
.mbpulso-demo-abas {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin: 24px 0 16px;
  -webkit-overflow-scrolling: touch;
}
.mbpulso-demo-aba {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-branco);
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
.mbpulso-demo-aba[aria-selected="true"] {
  background: var(--cor-navy);
  color: #fff;
  border-color: var(--cor-navy);
}
.mbpulso-demo-janela {
  background: var(--cor-grafite);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(9, 20, 43, 0.18);
}
.mbpulso-demo-topo {
  background: var(--cor-navy-escuro);
  color: #fff;
  padding: 10px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mbpulso-demo-empresa { font-size: 0.72rem; font-weight: 400; color: var(--cor-texto-sobre-navy-secundario); }
.mbpulso-demo-corpo { background: #fff; padding: 18px 16px; color: var(--cor-grafite); }
.mbpulso-demo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.mbpulso-demo-card {
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 10px 12px;
}
.mbpulso-demo-card-rotulo { font-size: 0.68rem; color: var(--cor-texto-secundario); display: block; }
.mbpulso-demo-card-valor { font-size: 1.05rem; font-weight: 800; margin-top: 2px; }
.mbpulso-demo-lista { border: 1px solid var(--cor-borda); border-radius: 10px; overflow: hidden; }
.mbpulso-demo-linha {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--cor-borda);
}
.mbpulso-demo-linha:last-child { border-bottom: none; }
.mbpulso-demo-alerta {
  border-left: 3px solid var(--cor-nivel-critico);
  background: #fdf1f0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.85rem;
}
.mbpulso-demo-alerta strong { display: block; margin-bottom: 4px; }
.mbpulso-demo-aviso {
  text-align: center;
  font-size: 0.72rem;
  color: var(--cor-texto-secundario);
  margin-top: 10px;
  letter-spacing: 0.02em;
}

/* --- Comparativo MB Pulso x BI (cards no mobile, nunca tabela larga) --- */
.comparativo-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.comparativo-linha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--cor-branco);
}
.comparativo-linha-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-secundario);
}
.comparativo-valores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comparativo-valor { font-size: 0.88rem; }
.comparativo-valor-titulo { display: block; font-size: 0.68rem; color: var(--cor-amarelo); font-weight: 700; margin-bottom: 2px; }

@media (min-width: 640px) {
  .caminhos-grid { grid-template-columns: repeat(3, 1fr); }
  .mbpulso-destaques { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  .comparativo-linha { grid-template-columns: 1fr 2fr; align-items: center; }
}

/* ===========================================================
   BLOG — leitura editorial e conversão para MB Pulso
   =========================================================== */
.blog-hero {
  background: var(--cor-navy);
  color: var(--cor-texto-sobre-navy);
  padding: clamp(56px, 9vw, 104px) 0;
  border-top: 3px solid var(--cor-amarelo);
}
.blog-hero h1 { color:#fff; max-width:760px; font-size:clamp(2.25rem, 6vw, 4.5rem); }
.blog-hero p { color:var(--cor-texto-sobre-navy-secundario); max-width:700px; font-size:clamp(1rem, 2vw, 1.2rem); margin:20px 0 0; }
.blog-conteudo { padding:48px 0 80px; }
.blog-filtros { display:flex; gap:8px; overflow-x:auto; padding:0 0 20px; margin-bottom:16px; scrollbar-width:thin; }
.blog-filtros a { flex:0 0 auto; text-decoration:none; border:1px solid var(--cor-borda); border-radius:999px; padding:8px 14px; color:var(--cor-grafite); font-size:.88rem; font-weight:600; background:#fff; }
.blog-filtros a.ativo, .blog-filtros a:hover { background:var(--cor-navy); border-color:var(--cor-navy); color:#fff; }
.blog-grid { display:grid; grid-template-columns:1fr; gap:20px; }
.blog-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--cor-borda); border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--sombra-suave); }
.blog-card-imagem { display:flex; align-items:center; justify-content:center; aspect-ratio:16/9; overflow:hidden; background:var(--cor-navy); text-decoration:none; }
.blog-card-imagem img { width:100%; height:100%; object-fit:cover; transition:transform var(--transicao-padrao); }
.blog-card:hover .blog-card-imagem img { transform:scale(1.025); }
.blog-card-sem-imagem { font-family:var(--fonte-titulo); color:var(--cor-amarelo); font-size:3rem; font-weight:800; letter-spacing:-.08em; }
.blog-card-corpo { display:flex; flex-direction:column; flex:1; padding:20px; }
.blog-categoria { display:inline-flex; align-self:flex-start; color:var(--cor-navy); font-size:.76rem; line-height:1; font-weight:800; letter-spacing:.05em; text-decoration:none; text-transform:uppercase; margin-bottom:12px; }
.blog-card h2, .blog-card h3 { font-size:1.25rem; margin:0 0 10px; }
.blog-card h2 a, .blog-card h3 a { text-decoration:none; }
.blog-card p { color:var(--cor-texto-secundario); font-size:.95rem; margin:0 0 18px; }
.blog-card-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--cor-borda); font-size:.82rem; color:var(--cor-texto-secundario); }
.blog-card-meta a { color:var(--cor-navy); font-weight:700; text-decoration:none; }
.blog-vazio { max-width:680px; margin:40px auto; padding:48px 24px; text-align:center; border:1px solid var(--cor-borda); border-radius:12px; background:var(--cor-fundo-claro); }
.paginacao { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:36px; }
.paginacao a { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--cor-borda); border-radius:6px; text-decoration:none; font-weight:700; }
.paginacao a.ativo { background:var(--cor-navy); border-color:var(--cor-navy); color:#fff; }

.artigo-cabecalho { background:var(--cor-fundo-claro); padding:48px 0 36px; border-bottom:1px solid var(--cor-borda); }
.artigo-container { max-width:900px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; color:var(--cor-texto-secundario); font-size:.82rem; margin-bottom:28px; }
.breadcrumbs a { text-decoration:none; }
.artigo-cabecalho h1 { font-size:clamp(2.1rem, 6vw, 4rem); max-width:850px; }
.artigo-resumo { font-size:clamp(1.05rem, 2vw, 1.25rem); color:var(--cor-texto-secundario); max-width:760px; }
.artigo-meta { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:20px; color:var(--cor-texto-secundario); font-size:.88rem; }
.artigo-capa { margin-top:36px; }
.artigo-capa img { width:100%; max-height:520px; object-fit:cover; border-radius:12px; }
.artigo-layout { display:grid; grid-template-columns:minmax(0, 1fr); gap:36px; padding-top:42px; padding-bottom:72px; max-width:1120px; }
.artigo-corpo { max-width:760px; font-size:1.05rem; line-height:1.78; }
.artigo-corpo h2 { font-size:clamp(1.65rem, 3vw, 2.25rem); margin:2.1em 0 .65em; }
.artigo-corpo h3 { font-size:clamp(1.3rem, 2.5vw, 1.7rem); margin:1.8em 0 .55em; }
.artigo-corpo h4 { font-size:1.15rem; margin:1.6em 0 .5em; }
.artigo-corpo p { margin:0 0 1.3em; }
.artigo-corpo ul, .artigo-corpo ol { padding-left:1.4em; margin:0 0 1.4em; }
.artigo-corpo li { margin-bottom:.5em; }
.artigo-corpo blockquote { border-left:4px solid var(--cor-amarelo); margin:1.8em 0; padding:16px 20px; background:var(--cor-fundo-claro); color:var(--cor-navy); }
.artigo-corpo blockquote p { margin:0; }
.artigo-corpo a { color:var(--cor-navy); font-weight:600; }
.artigo-corpo code { background:var(--cor-fundo-claro); padding:2px 5px; border-radius:4px; font-size:.9em; }
.artigo-tags { display:flex; flex-wrap:wrap; gap:8px; padding-top:24px; margin-top:36px; border-top:1px solid var(--cor-borda); }
.artigo-tags span { background:var(--cor-fundo-claro); border:1px solid var(--cor-borda); border-radius:999px; padding:5px 10px; font-size:.78rem; }
.artigo-autor { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:20px; align-items:start; margin-top:44px; padding:24px; border:1px solid var(--cor-borda); border-left:4px solid var(--cor-amarelo); border-radius:var(--raio); background:var(--cor-fundo-claro); }
.artigo-autor img { width:96px; height:96px; border-radius:50%; object-fit:cover; }
.artigo-autor h2 { margin:4px 0 8px; font-size:1.2rem; }
.artigo-autor p { margin:0 0 8px; color:var(--cor-texto-suave); }
.artigo-autor a { font-weight:700; }
.artigo-cta { align-self:start; background:var(--cor-navy); color:#fff; border-radius:12px; padding:24px; }
.artigo-cta h2 { color:#fff; font-size:1.35rem; margin-top:12px; }
.artigo-cta p { color:var(--cor-texto-sobre-navy-secundario); font-size:.93rem; }
.artigo-cta .botao { margin-top:10px; }
.artigo-cta .botao-secundario { color:#fff; border-color:rgba(255,255,255,.55); }
.artigos-relacionados { padding:56px 0 72px; }
.blog-404 { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--cor-fundo-claro); }
.blog-404 > div { width:min(100%, 680px); background:#fff; border:1px solid var(--cor-borda); border-radius:12px; padding:clamp(28px, 6vw, 56px); }

@media (max-width: 560px) {
  .artigo-autor { grid-template-columns:64px minmax(0, 1fr); gap:14px; padding:18px; }
  .artigo-autor img { width:64px; height:64px; }
}

@media (min-width: 700px) {
  .blog-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .blog-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .artigo-layout { grid-template-columns:minmax(0, 1fr) 300px; }
  .artigo-cta { position:sticky; top:104px; }
}