/* =========================================================
   MNG Business — style.css
   Carregar SEMPRE depois de css/tokens.css.

   Este arquivo NUNCA redefine a camada A (paleta do manual).
   Onde precisou de um valor que tokens.css não tem (escala de
   espaçamento, escala tipográfica, sombras), a variável foi
   criada aqui na "camada D" e DERIVADA dos tokens existentes
   via color-mix() — nenhum #hex fora de tokens.css.

   Regras de cor que este CSS respeita à risca:
   - indigo e púrpura nunca se tocam (1.01:1) — só separados por branco ou contorno
   - ciano só como texto sobre a tinta
   - texto sobre o gradiente 1 só em branco e >= 24px
   - botão de ação = fundo púrpura + texto branco
   ========================================================= */

/* ---------------------------------------------------------
   1. Camada D — tokens derivados (só adiciona, não sobrescreve)
   --------------------------------------------------------- */
:root {
  /* Espaçamento */
  --esp-3xs: .25rem;
  --esp-2xs: .5rem;
  --esp-xs:  .75rem;
  --esp-sm:  1rem;
  --esp-md:  1.5rem;
  --esp-lg:  2rem;
  --esp-xl:  3rem;
  --esp-2xl: 4rem;
  --esp-3xl: 6rem;

  --container-pad: var(--esp-md);
  --section-py-mobile: var(--esp-2xl);

  /* Raios (tokens.css traz md e lg) */
  --radius-sm:   8px;
  --radius-pill: 999px;

  /* Escala tipográfica — fluida, mobile-first */
  --fs-xs:   .8125rem;
  --fs-sm:   .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   clamp(1.125rem, 1.04rem + .4vw, 1.375rem);
  --fs-h3:   clamp(1.1875rem, 1.1rem + .5vw, 1.5rem);
  --fs-h2:   clamp(1.625rem, 1.25rem + 1.8vw, 2.5rem);
  --fs-h1:   clamp(2rem, 1.4rem + 3vw, 3.375rem);
  --fs-num:  clamp(2.25rem, 1.6rem + 3vw, 3.5rem);

  --lh-titulo: 1.15;
  --lh-corpo:  1.65;

  /* Superfícies e contornos derivados dos tokens */
  --superficie:          color-mix(in srgb, var(--brand-indigo)  4%, var(--cor-fundo));
  --superficie-indigo:   color-mix(in srgb, var(--brand-indigo)  8%, var(--cor-fundo));
  --superficie-purpura:  color-mix(in srgb, var(--brand-purpura) 7%, var(--cor-fundo));
  --superficie-escura:   color-mix(in srgb, var(--brand-branco)  8%, var(--cor-fundo-escuro));
  --borda-escura:        color-mix(in srgb, var(--brand-branco) 18%, transparent);
  --borda-forte:         color-mix(in srgb, var(--brand-tinta)  22%, transparent);
  --borda-campo:         color-mix(in srgb, var(--brand-tinta)  50%, var(--cor-fundo));

  --sombra-sm: 0 1px 2px color-mix(in srgb, var(--brand-tinta) 8%, transparent);
  --sombra-md: 0 8px 24px color-mix(in srgb, var(--brand-tinta) 10%, transparent);
  --sombra-lg: 0 18px 48px color-mix(in srgb, var(--brand-tinta) 14%, transparent);

  --foco: 3px solid var(--cor-acao);
}

/* ---------------------------------------------------------
   2. Reset
   --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--esp-sm));
}

body {
  margin: 0;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--font-corpo);
  font-size: var(--fs-base);
  line-height: var(--lh-corpo);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  font-weight: 700;
  line-height: var(--lh-titulo);
  margin: 0 0 var(--esp-sm);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p  { margin: 0 0 var(--esp-sm); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--esp-sm); padding-left: var(--esp-md); }

a {
  color: var(--cor-primaria);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--transition);
}
a:hover { color: var(--cor-acao); }

strong { font-weight: 700; }

address { font-style: normal; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: var(--foco);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------
   3. Utilitários de layout
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.secao {
  padding-block: var(--section-py-mobile);
}

.secao--alt      { background-color: var(--superficie); }

/* ---- Padrão gráfico da marca nas áreas claras ----
   Manual (Studio Supra, p. 38): losangos em contorno, derivados do losango
   do símbolo, em dois tamanhos, com densidade decrescente de um lado para
   o outro. Aqui em indigo fino sobre o claro, só numa lateral de cada
   área e sumindo antes do meio — o texto fica sobre o fundo limpo. A
   lateral alterna seção a seção para não virar papel de parede.
   Leitura: linha a 16% — no pior ponto (texto pequeno sobre uma linha),
   indigo e púrpura ≥ 4,6:1 e tinta ≥ 13:1. A 22% eles caíam para 4,4. */
:root {
  --padrao-losangos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%235456ac' stroke-opacity='.16' stroke-width='1.5'%3E%3Cpath d='M40 4L76 40L40 76L4 40ZM120 84L156 120L120 156L84 120ZM120 24L136 40L120 56L104 40ZM40 104L56 120L40 136L24 120Z'/%3E%3C/svg%3E");
  --padrao-mascara: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .55) 20%, transparent 46%);
  --padrao-mascara-espelho: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .55) 20%, transparent 46%);
}
.secao:not(.secao--escura),
.pagina-hero,
.hero:not(.hero--foto) {
  position: relative;
  isolation: isolate;
}
.secao:not(.secao--escura)::after,
.pagina-hero::after,
.hero:not(.hero--foto)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--padrao-losangos);
  background-size: 160px 160px;
  -webkit-mask-image: var(--padrao-mascara);
          mask-image: var(--padrao-mascara);
  pointer-events: none;
}
/* :is(...) dá a especificidade de classe que faltava para vencer a regra
   base (.secao:not(.secao--escura)::after). */
main > section:nth-of-type(even):is(.secao, .pagina-hero)::after,
main > section.hero:nth-of-type(even)::before {
  background-position: right top;
  -webkit-mask-image: var(--padrao-mascara-espelho);
          mask-image: var(--padrao-mascara-espelho);
}
@media (max-width: 767.98px) {
  :root {
    --padrao-mascara: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .5) 30%, transparent 62%);
    --padrao-mascara-espelho: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .5) 30%, transparent 62%);
  }
  .secao:not(.secao--escura)::after,
  .pagina-hero::after,
  .hero:not(.hero--foto)::before { background-size: 112px 112px; }
}
@media print {
  .secao::after, .pagina-hero::after, .hero::before { display: none; }
}

.secao--escura {
  background-color: var(--cor-fundo-escuro);
  color: var(--cor-texto-inverso);
}
/* Foco nas áreas escuras: o púrpura do --foco padrão fica em 2,92:1 sobre a
   tinta (WCAG 1.4.11 pede 3:1) e é par proibido pela marca. O ciano é o
   destaque que o manual reserva ao fundo escuro — 10,13:1. */
.secao--escura,
.footer { --foco: 3px solid var(--cor-destaque); }
.secao--escura h2,
.secao--escura h3 { color: var(--cor-texto-inverso); }
.secao--escura a  { color: var(--cor-destaque); }          /* ciano 10.13:1 sobre a tinta */
.secao--escura a:hover { color: var(--cor-texto-inverso); }

.secao__cabecalho {
  max-width: 46rem;
  margin-bottom: var(--esp-xl);
}
.secao__cabecalho--centro {
  margin-inline: auto;
  text-align: center;
}

.secao__titulo { color: var(--cor-primaria); }             /* indigo 6.13:1 sobre o branco */
/* Título de seção seguido direto de um módulo (sem intro no meio): a margem de
   h2 (1rem) deixa o bloco colado. Só módulos — parágrafo e selo continuam perto
   do título. As margens são irmãs e colapsam, então .metodo não ganha o dobro. */
.secao__titulo + :is(.grade, .passos, .faq, .planos, .metodo, .mapa, .tabela, table) { margin-top: var(--esp-xl); }
.secao--escura .secao__titulo { color: var(--cor-texto-inverso); }

.secao__intro {
  max-width: 62ch;
  font-family: var(--font-subtitulo);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: 1.5;
  /* Fora do .secao__cabecalho (que já traz a margem) o intro fica colado no
     módulo seguinte — a margem mora no componente, não numa classe avulsa. */
  margin-bottom: var(--esp-xl);
}
.secao__cabecalho .secao__intro { margin-bottom: 0; }
.secao__cabecalho--centro .secao__intro { margin-inline: auto; }

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2xs);
  padding: var(--esp-3xs) var(--esp-xs);
  margin-bottom: var(--esp-sm);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-pill);
  background-color: var(--cor-fundo);
  color: var(--cor-acao);
  font-family: var(--font-numero);
  font-size: var(--fs-xs);
  letter-spacing: .01em;
}
.secao--escura .selo {
  background-color: transparent;
  border-color: var(--borda-escura);
  color: var(--cor-destaque);
}

.selo__ponto {
  width: .5rem;
  height: .5rem;
  border-radius: var(--radius-pill);
  background: var(--grad-1);
  flex: none;
}

/* Barra de assinatura — gradiente 1 sem texto em cima */
.barra-gradiente {
  height: 4px;
  background: var(--grad-1);
}

.lista-limpa { list-style: none; margin: 0; padding: 0; }


.skip-link {
  position: absolute;
  left: var(--esp-sm);
  top: calc(var(--esp-sm) * -6);
  z-index: 200;
  padding: var(--esp-2xs) var(--esp-sm);
  border-radius: var(--radius-sm);
  background-color: var(--cor-acao);
  color: var(--cor-texto-inverso);
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--esp-sm); color: var(--cor-texto-inverso); }

/* ---------------------------------------------------------
   4. Botões
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2xs);
  padding: var(--esp-xs) var(--esp-md);
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background-color var(--transition),
              color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-2px); }

/* Ação: fundo púrpura + texto branco — 6.31:1 */
.btn--primario {
  background-color: var(--cor-acao);
  color: var(--cor-texto-inverso);
  box-shadow: var(--sombra-sm);
}
.btn--primario:hover {
  background-color: color-mix(in srgb, var(--brand-purpura) 86%, var(--brand-tinta));
  color: var(--cor-texto-inverso);
  box-shadow: var(--sombra-md);
}

/* Secundário: contorno indigo sobre branco */
.btn--secundario {
  background-color: var(--cor-fundo);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}
.btn--secundario:hover {
  background-color: var(--superficie-indigo);
  color: var(--cor-primaria);
}

/* Sobre a tinta: o púrpura ganha contorno branco para não encostar no fundo escuro */
.secao--escura .btn--primario,
.footer .btn--primario {
  border-color: var(--cor-texto-inverso);
  color: var(--cor-texto-inverso);
}
.secao--escura .btn--secundario,
.footer .btn--secundario {
  background-color: transparent;
  border-color: var(--cor-texto-inverso);
  color: var(--cor-texto-inverso);
}
.secao--escura .btn--secundario:hover,
.footer .btn--secundario:hover {
  background-color: var(--cor-texto-inverso);
  color: var(--cor-texto);
}

.btn--bloco { width: 100%; }

.btn__seta { flex: none; }

.grupo-botoes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-xs);
  margin-top: var(--esp-lg);
}

/* Link com seta */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2xs);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.link-seta svg { transition: transform var(--transition); }
.link-seta:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------
   5. Header e navegação
   --------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background-color: color-mix(in srgb, var(--cor-fundo) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}
.header--scrolled {
  background-color: var(--cor-fundo);
  border-bottom-color: var(--cor-borda);
  box-shadow: var(--sombra-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-sm);
}

.header__logo { display: block; flex: none; }
/* logo completo é 2,04:1 — 118px de largura cabem nos 80px do header */
.header__logo img { width: 118px; height: auto; }

.nav--desktop { display: none; }

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  padding: var(--esp-2xs) 0;
  color: var(--cor-texto);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--cor-acao); }

.header__hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: var(--esp-xs);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}
.header__hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--cor-texto);
  transition: transform var(--transition), opacity var(--transition);
}
.header__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile */
.nav--mobile {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 99;
  /* Altura fixa e rolagem própria; a abertura anima só opacidade e
     deslocamento (compositor), não max-height, que recalculava o layout a
     cada quadro. visibility tira o menu fechado do foco e do clique. */
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.5rem);
  background-color: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav--mobile.nav--aberto {
  visibility: visible;
  opacity: 1;
  transform: none;
  box-shadow: var(--sombra-md);
}
.nav--mobile .nav__list {
  padding: var(--esp-sm) var(--container-pad) 0;
}
.nav--mobile .nav__item + .nav__item { border-top: 1px solid var(--cor-borda); }
.nav--mobile .nav__link { padding: var(--esp-sm) 0; font-size: var(--fs-base); }

.nav--mobile__cta {
  padding: var(--esp-sm) var(--container-pad) var(--esp-lg);
}
.nav--mobile__cta .btn { width: 100%; }

/* ---------------------------------------------------------
   6. Hero
   --------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--esp-xl)) var(--esp-2xl);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--grad-1);
}


.hero__conteudo { position: relative; z-index: 1; max-width: 44rem; }

.hero__titulo { margin-bottom: var(--esp-md); }
.hero__titulo em {
  font-style: normal;
  color: var(--cor-primaria);
}

.hero__subtitulo {
  font-family: var(--font-subtitulo);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: 1.5;
  max-width: 38rem;
}

.hero__destaques {
  display: grid;
  gap: var(--esp-xs);
  margin: var(--esp-xl) 0 0;
  padding: 0;
  list-style: none;
}
.hero__destaque {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2xs);
  font-size: var(--fs-sm);
}
.hero__destaque svg { flex: none; margin-top: .2em; color: var(--cor-acao); }

/* ---------------------------------------------------------
   7. Cartões genéricos
   --------------------------------------------------------- */
.grade {
  display: grid;
  gap: var(--esp-md);
}

.cartao {
  padding: var(--esp-md);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  background-color: var(--cor-fundo);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }

.cartao__titulo { margin-bottom: var(--esp-2xs); }
.cartao__texto { font-size: var(--fs-sm); margin-bottom: 0; }

.secao--escura .cartao {
  background-color: var(--superficie-escura);
  border-color: var(--borda-escura);
  box-shadow: none;
}

/* Ícone: traço branco sobre gradiente — como no manual (p. 38) */
.icone-gradiente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--esp-sm);
  border-radius: var(--radius-md);
  background: var(--grad-1);
  color: var(--cor-texto-inverso);
  flex: none;
}
.icone-gradiente--frio { background: var(--grad-2); }

/* Citação da marca */
.citacao {
  margin: var(--esp-xl) 0 0;
  padding: var(--esp-md);
  border-radius: var(--radius-md);
  background-color: var(--superficie-purpura);
}
.citacao p {
  max-width: 36em;
  font-family: var(--font-subtitulo);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: 1.45;
}
.secao--escura .citacao { background-color: var(--superficie-escura); }

/* ---------------------------------------------------------
   8. Passos (conversa de 45 minutos / método)
   --------------------------------------------------------- */
/* Linha do tempo: número em gradiente + trilho que liga um passo ao
   próximo — vertical no celular, horizontal a partir de 1024px (todos os
   passos numa linha, sem o último sobrando embaixo).
   Momento de movimento da seção: quando a lista entra na tela, o trilho
   se preenche passo a passo e cada número acende na sua vez (script.js,
   initPassos). Sem script ou pedindo menos movimento, tudo já nasce
   pronto — nenhum texto depende da animação. */
.passos {
  display: grid;
  gap: var(--esp-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.passo {
  position: relative;
  padding-left: calc(48px + var(--esp-md));
}

.passo__numero {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--grad-1);
  color: var(--cor-texto-inverso);      /* branco sobre o gradiente */
  font-family: var(--font-numero);
  font-weight: 400;
  font-size: 1.5rem;                     /* 24px — piso permitido sobre o gradiente 1 */
  line-height: 1;
  transition: transform var(--transition), box-shadow var(--transition);
}

.passo__titulo { margin-bottom: var(--esp-3xs); transition: color var(--transition); }
.passo__texto,
.passo > p { font-size: var(--fs-sm); margin-bottom: 0; }

/* Trilho (cinza) e preenchimento (gradiente da marca) entre um número e o
   próximo. */
.passo:not(:last-child)::before,
.passo:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px;
  top: calc(48px + var(--esp-2xs));
  bottom: calc(var(--esp-lg) * -1 + var(--esp-2xs));
  width: 2px;
  border-radius: 2px;
}
.passo:not(:last-child)::before { background-color: var(--cor-borda); }
.passo:not(:last-child)::after {
  background: linear-gradient(180deg, var(--brand-indigo), var(--brand-magenta));
  transform-origin: top;
}

/* Interação: o passo em foco (mouse ou teclado) ganha halo no número e o
   título na cor de ação. */
.passo:focus-within .passo__numero {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-purpura) 16%, transparent);
}
.passo:focus-within .passo__titulo { color: var(--cor-acao); }
@media (hover: hover) {
  .passo:hover .passo__numero {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-purpura) 16%, transparent);
  }
  .passo:hover .passo__titulo { color: var(--cor-acao); }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* Estado "antes": trilho vazio e número apagado (indigo sobre a
     superfície, 6:1 — continua legível). Só vale depois que o script
     marcou .passos--pronto. */
  .passos--pronto .passo:not(:last-child)::after {
    transform: scaleY(0);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .35s + .35s);
  }
  .passos--pronto .passo__numero {
    background: var(--superficie-indigo);
    color: var(--cor-primaria);
    transform: scale(.86);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .35s),
                box-shadow var(--transition);
  }
  .passos--ativo .passo:not(:last-child)::after { transform: none; }
  .passos--ativo .passo__numero {
    background: var(--grad-1);
    color: var(--cor-texto-inverso);
    transform: none;
  }
}

/* Princípios numerados, versão sóbria (sem gradiente) */
.principio { display: flex; gap: var(--esp-sm); }
.principio__numero {
  flex: none;
  font-family: var(--font-numero);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--cor-acao);
}
.secao--escura .principio__numero { color: var(--cor-destaque); }

/* ---------------------------------------------------------
   9. Serviços
   --------------------------------------------------------- */
.servico {
  display: flex;
  flex-direction: column;
  padding: var(--esp-lg) var(--esp-md);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  background-color: var(--cor-fundo);
  box-shadow: var(--sombra-sm);
}
.servico__lista {
  margin: var(--esp-sm) 0 var(--esp-lg);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}
.servico__lista li {
  position: relative;
  padding-left: var(--esp-md);
  margin-bottom: var(--esp-2xs);
}
.servico__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: .5rem;
  height: .5rem;
  border-radius: 2px;
  transform: rotate(45deg);
  background-color: var(--cor-acao);
}
.servico__rodape { margin-top: auto; }

/* (Seções 10–11 antigas removidas em 19/09: placeholders e prova social
   foram substituídos pelos componentes da seção "Conteúdo de exemplo".) */

/* ---------------------------------------------------------
   12. Atuação
   --------------------------------------------------------- */
.atuacao__grid { display: grid; gap: var(--esp-lg); }

.atuacao__endereco {
  padding: var(--esp-md);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  background-color: var(--cor-fundo);
  font-size: var(--fs-sm);
}
.atuacao__endereco dt {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-primaria);
  margin-top: var(--esp-sm);
}
.atuacao__endereco dt:first-child { margin-top: 0; }
.atuacao__endereco dd { margin: var(--esp-3xs) 0 0; }

/* ---------------------------------------------------------
   13. FAQ
   --------------------------------------------------------- */
/* Centrado na seção, com o título; o texto das perguntas e respostas segue
   alinhado à esquerda, que é como se lê. */
.faq { display: grid; gap: var(--esp-xs); max-width: 48rem; margin-inline: auto; counter-reset: faq; }
.secao__titulo--centro { text-align: center; }

/* Cada pergunta tem uma cor da marca (ciclo de 4): marcador numerado no
   círculo e, aberta, borda + fundo tingido + seta na mesma cor. Números
   em branco: indigo 6,1:1, púrpura 6,1:1, tinta→indigo ≥ 6:1; o 4º
   (púrpura→magenta) usa número de 19px negrito — texto grande, ≥ 3,9:1. */
.faq__item {
  --faq-cor: var(--brand-indigo);
  --faq-marca: var(--brand-indigo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  background-color: var(--cor-fundo);
  overflow: hidden;
  transition: border-color var(--transition), background-color var(--transition),
              box-shadow var(--transition), transform var(--transition);
}
.faq__item:nth-child(4n+2) { --faq-cor: var(--brand-purpura); --faq-marca: var(--brand-purpura); }
.faq__item:nth-child(4n+3) { --faq-cor: var(--brand-azul-claro); --faq-marca: linear-gradient(135deg, var(--brand-tinta), var(--brand-indigo)); }
.faq__item:nth-child(4n+4) { --faq-cor: var(--brand-magenta); --faq-marca: linear-gradient(135deg, var(--brand-purpura), var(--brand-magenta)); }
.faq__item[open] {
  border-color: var(--faq-cor);
  background-color: color-mix(in srgb, var(--faq-cor) 6%, var(--cor-fundo));
  box-shadow: var(--sombra-md);
}

.faq__pergunta {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  padding: var(--esp-sm) var(--esp-md);
  min-height: 48px;
  cursor: pointer;
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-base);
  list-style: none;
}
.faq__pergunta::-webkit-details-marker { display: none; }

/* marcador numerado */
.faq__pergunta::before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--faq-marca);
  color: var(--cor-texto-inverso);
  font-family: var(--font-numero);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow var(--transition);
}

/* seta, empurrada para a direita */
.faq__pergunta::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: .625rem;
  height: .625rem;
  border-right: 2px solid var(--faq-cor);
  border-bottom: 2px solid var(--faq-cor);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}
.faq__item:nth-child(4n+3) .faq__pergunta::after { border-color: var(--cor-primaria); }   /* azul-claro não passa como traço fino */
.faq__item[open] .faq__pergunta::after { transform: rotate(-135deg) translateY(-2px); }
.faq__item[open] .faq__pergunta::before {
  transform: scale(1.06);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--faq-cor) 22%, transparent);
}

@media (hover: hover) {
  .faq__item:hover {
    border-color: var(--faq-cor);
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
  }
  .faq__item:hover .faq__pergunta::before { transform: scale(1.08) rotate(-6deg); }
}

.faq__resposta {
  padding: 0 var(--esp-md) var(--esp-md) calc(var(--esp-md) + 40px + var(--esp-sm));
  font-size: var(--fs-sm);
}
.faq__resposta > * { max-width: 60ch; }  /* ≈ 78 caracteres nesta fonte */

/* Fundo da seção com dois brilhos da marca (decorativos, bem claros:
   o texto fica sobre as caixas brancas das perguntas). */
.secao--faq { position: relative; isolation: isolate; overflow: hidden; }
.secao--faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38rem 22rem at 8% 12%, color-mix(in srgb, var(--brand-indigo) 13%, transparent), transparent 70%),
    radial-gradient(34rem 24rem at 94% 92%, color-mix(in srgb, var(--brand-magenta) 11%, transparent), transparent 70%);
  pointer-events: none;
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* Resposta desliza e aparece a cada abertura. */
  .faq__item[open] .faq__resposta { animation: faq-resposta .45s cubic-bezier(.16, 1, .3, 1); }
  /* Entrada em cascata quando a lista chega à tela (initEmCena). */
  /* A entrada usa `translate` e o hover usa `transform`: cada um com o seu
     tempo, e o atraso da cascata não atrasa o hover. */
  .anima--pronta:not(.em-cena) .faq__item { opacity: 0; translate: 0 14px; }
  .anima--pronta.em-cena .faq__item {
    transition: opacity .5s ease var(--faq-atraso, 0s),
                translate .5s cubic-bezier(.16, 1, .3, 1) var(--faq-atraso, 0s),
                transform var(--transition), border-color var(--transition),
                background-color var(--transition), box-shadow var(--transition);
  }
  .faq__item:nth-child(2) { --faq-atraso: 70ms; }
  .faq__item:nth-child(3) { --faq-atraso: 140ms; }
  .faq__item:nth-child(4) { --faq-atraso: 210ms; }
  .faq__item:nth-child(5) { --faq-atraso: 280ms; }
  .faq__item:nth-child(6) { --faq-atraso: 350ms; }
  .faq__item:nth-child(n+7) { --faq-atraso: 420ms; }
}
@keyframes faq-resposta {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   14. CTA final
   --------------------------------------------------------- */
.cta-final { text-align: center; }
.cta-final p { max-width: 40rem; margin-inline: auto; }
/* Todas as CTAs finais são .secao.secao--escura (unificadas em 19/09): a
   faixa escura antes do rodapé fecha a página do mesmo jeito em todas. */
.cta-final__texto {
  max-width: 40rem;
  margin-inline: auto;
  font-family: var(--font-subtitulo);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.cta-final .grupo-botoes { align-items: center; justify-content: center; }

/* ---------------------------------------------------------
   15. Página quem-somos
   --------------------------------------------------------- */
.pagina-hero { padding-block: var(--esp-lg) var(--esp-2xl); }
.pagina-hero__conteudo { max-width: 46rem; }

.valores { display: grid; gap: var(--esp-md); }
.valor {
  padding: var(--esp-md);
  border-radius: var(--radius-md);
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
}
.valor__nome {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--cor-primaria);
  margin: 0 0 var(--esp-3xs);
}
.valor p { font-size: var(--fs-sm); margin: 0; }

.equipe__grid { display: grid; gap: var(--esp-lg); align-items: start; }

.historia__texto p { max-width: 42rem; }

/* ---------------------------------------------------------
   16. Footer
   --------------------------------------------------------- */
.footer {
  background-color: var(--cor-fundo-escuro);
  color: var(--cor-texto-inverso);
  padding-block: var(--esp-2xl) var(--esp-lg);
  font-size: var(--fs-sm);
}

.footer__grid { display: grid; gap: var(--esp-xl); }

.footer__marca img { width: 170px; height: auto; }

.footer__desc {
  margin-top: var(--esp-sm);
  max-width: 28rem;
  color: color-mix(in srgb, var(--brand-branco) 82%, var(--brand-tinta));
}

.footer__titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cor-destaque);          /* ciano sobre a tinta — 10.13:1 */
  margin: 0 0 var(--esp-sm);
}

.footer__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2xs); }
.footer a { color: var(--cor-texto-inverso); text-decoration: none; }
.footer a:hover { color: var(--cor-destaque); text-decoration: underline; }

.footer__contato { display: grid; gap: var(--esp-sm); }
.footer__contato-item { display: flex; align-items: flex-start; gap: var(--esp-2xs); }
.footer__contato-item svg { flex: none; margin-top: .25em; color: var(--cor-destaque); }

.footer__sociais { display: flex; gap: var(--esp-2xs); margin-top: var(--esp-md); }
.footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borda-escura);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition), border-color var(--transition);
}
.footer__social:hover {
  background-color: var(--cor-acao);
  border-color: var(--cor-acao);
  color: var(--cor-texto-inverso);
}

.footer__rodape {
  display: grid;
  gap: var(--esp-2xs);
  margin-top: var(--esp-xl);
  padding-top: var(--esp-md);
  border-top: 1px solid var(--borda-escura);
  font-size: var(--fs-xs);
}
.footer__rodape p { margin: 0; }
.footer__rodape-links { display: flex; flex-wrap: wrap; gap: var(--esp-sm); }

/* Alvos de toque: os links de texto do rodapé, do breadcrumb e dos contatos
   tinham 16–22px de altura (WCAG 2.5.8 pede 24). O padding aumenta a área de
   clique e a margem negativa devolve o espaço — o layout não se move. */
.footer__lista a,
.footer__contato-item a,
.footer__rodape-links a,
.breadcrumb__lista a,
a.contato__valor,
.atuacao__endereco dd a,
.link-bloco {
  display: inline-block;
  padding-block: var(--esp-3xs);
  margin-block: calc(var(--esp-3xs) * -1);
}
.footer__credito a {
  padding-block: var(--esp-3xs);
  margin-block: calc(var(--esp-3xs) * -1);
}
/* Breadcrumb em 13px: precisa de um pouco mais para passar dos 24px. */
.breadcrumb__lista a {
  padding-block: .375rem;
  margin-block: -.375rem;
}

/* Crédito de autoria da Agência Pine — discreto: 60% de branco sobre a
   tinta (7,1:1), só ganha branco pleno no hover/foco. A marca herda a cor
   do texto (currentColor); o azul da Pine não entra em fundo escuro. */
.footer__credito a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition);
}
.footer__credito a:hover,
.footer__credito a:focus-visible { color: var(--brand-branco); }
.footer__credito svg { height: 1.35em; width: auto; fill: currentColor; }
.footer__credito strong { font-weight: 600; }

/* ---------------------------------------------------------
   17. WhatsApp flutuante
   O elemento é injetado por script.js só depois que {{WHATSAPP}}
   virar número real. Ele entra com .whatsapp-flutuante e ganha
   .whatsapp-flutuante--visivel no frame seguinte, para animar.
   --------------------------------------------------------- */
.whatsapp-flutuante {
  position: fixed;
  right: var(--esp-sm);
  bottom: var(--esp-sm);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background-color: var(--cor-acao);
  color: var(--cor-texto-inverso);
  box-shadow: var(--sombra-md);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}
.whatsapp-flutuante--visivel { opacity: 1; transform: none; }

.whatsapp-flutuante--visivel:hover {
  transform: scale(1.06);
  color: var(--cor-texto-inverso);
  box-shadow: var(--sombra-lg);
}

/* ---------------------------------------------------------
   18. Reveal on scroll
   --------------------------------------------------------- */
/* O conteúdo nasce visível. Só some quando o script.js marcou que assumiu
   (.reveal--pronto) — sem script, com JS quebrado ou pedindo menos
   movimento, o seletor nunca casa e nada fica escondido. Só na tela: na
   impressão tudo sai. */
@media screen and (prefers-reduced-motion: no-preference) {
  .reveal.reveal--pronto {
    transition: opacity .6s ease, transform .6s ease;
  }
  .reveal.reveal--pronto:not(.visivel) {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* ---------------------------------------------------------
   19. Breakpoint 768px — tablet
   --------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --container-pad: var(--esp-lg);
  }

  .secao { padding-block: var(--esp-3xl); }

  .grupo-botoes { flex-direction: row; flex-wrap: wrap; }
  .btn--bloco { width: auto; }

  .grade--2 { grid-template-columns: repeat(2, 1fr); }
  .grade--3 { grid-template-columns: repeat(2, 1fr); }
  .grade--4 { grid-template-columns: repeat(2, 1fr); }

  .hero { padding-block: calc(var(--header-h) + var(--esp-2xl)) var(--esp-3xl); }
  .hero__destaques { grid-template-columns: repeat(2, 1fr); gap: var(--esp-sm) var(--esp-lg); }



  .atuacao__grid { grid-template-columns: 1.4fr 1fr; gap: var(--esp-xl); }

  .valores { grid-template-columns: repeat(2, 1fr); }
  .equipe__grid { grid-template-columns: 1fr 1fr; gap: var(--esp-xl); }

  /* Tablet: marca na largura toda em cima; links e contato lado a lado.
     A grade tem três filhos (marca, links, contato) — em duas colunas sem
     isto, o contato caía sozinho numa segunda linha embaixo da marca. */
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__marca { grid-column: 1 / -1; }
  /* Flex em vez de grade: são três peças (©, links, crédito da Pine) e,
     quando não cabem numa linha, as da direita descem inteiras. */
  .footer__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-2xs) var(--esp-md);
  }
  .footer__rodape > p:first-child { margin-right: auto; }

  .whatsapp-flutuante { right: var(--esp-lg); bottom: var(--esp-lg); }
}

/* ---------------------------------------------------------
   20. Breakpoint 1024px — desktop
   --------------------------------------------------------- */
@media (min-width: 1024px) {
  .secao { padding-block: var(--section-py); }

  /* Passos em linha: tantas colunas quantos passos houver. */
  .passos { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .passo { padding-left: 0; padding-top: calc(48px + var(--esp-md)); }
  .passo:not(:last-child)::before,
  .passo:not(:last-child)::after {
    top: 23px;
    left: calc(48px + var(--esp-xs));
    right: calc(var(--esp-lg) * -1 + var(--esp-xs));
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .passo:not(:last-child)::after {
    background: linear-gradient(90deg, var(--brand-indigo), var(--brand-magenta));
    transform-origin: left;
  }

  .header__hamburger,
  .nav--mobile { display: none; }

  .nav--desktop {
    display: flex;
    align-items: center;
    gap: var(--esp-lg);
  }
  .nav--desktop .nav__list {
    display: flex;
    align-items: center;
    gap: var(--esp-md);
  }
  .nav--desktop .nav__link {
    position: relative;
    padding: var(--esp-2xs) 0;
  }
  .nav--desktop .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--grad-1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
  }
  .nav--desktop .nav__link:hover::after,
  .nav--desktop .nav__link--atual::after,
  .nav--desktop .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  .nav__cta { padding-inline: var(--esp-md); }

  .header__logo img { width: 140px; }

  .grade--3 { grid-template-columns: repeat(3, 1fr); }
  .grade--4 { grid-template-columns: repeat(4, 1fr); }

  .hero__destaques { grid-template-columns: repeat(3, 1fr); }


  .secao__cabecalho { margin-bottom: var(--esp-2xl); }
}
@media screen and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .passos--pronto .passo:not(:last-child)::after { transform: scaleX(0); }
  .passos--ativo .passo:not(:last-child)::after { transform: none; }
}

/* ---------------------------------------------------------
   21. Movimento reduzido
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .whatsapp-flutuante { opacity: 1; transform: none; }
  .btn:hover,
  .cartao:hover,
  .whatsapp-flutuante--visivel:hover { transform: none; }
}

/* ---------------------------------------------------------
   22. Impressão
   --------------------------------------------------------- */
@media print {
  .header, .nav--mobile, .whatsapp-flutuante, .grupo-botoes, .footer__sociais { display: none; }
}

/* =========================================================
   PÁGINAS INTERNAS — serviços, contato e documentos
   Escrito depois das seções da home; usa só os tokens já
   definidos, sem nenhum valor de cor hard-coded.
   ========================================================= */

/* ---- utilitários que faltavam ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container--estreito { max-width: 760px; }
/* Separa grupos distintos dentro da mesma seção. O dobro do gap da .grade
   (--esp-md), para o olho ler cada grupo como um bloco, não como mais uma
   linha da grade de cima. */
.espaco-topo    { margin-top: var(--esp-xl); }
.espaco-topo-sm { margin-top: var(--esp-md); }

.btn--grande {
  padding: var(--esp-sm) var(--esp-xl);
  font-size: var(--fs-base);
  min-height: 56px;
}

/* Contorno: indigo sobre o branco (6.13:1). Nunca encostar em púrpura —
   os dois juntos dão 1.01:1, por isso o botão de ação e este ficam
   separados pelo gap do .hero__acoes. */
.btn--outline {
  background-color: transparent;
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}
.btn--outline:hover {
  background-color: var(--cor-primaria);
  color: var(--cor-texto-inverso);
}

/* ---- breadcrumb ---- */
.breadcrumb {
  padding-top: calc(var(--header-h) + var(--esp-md));
  padding-bottom: var(--esp-2xs);
}
.breadcrumb__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2xs);
  list-style: none;
  margin: 0; padding: 0;
  font-size: var(--fs-xs);
  color: var(--cor-texto);
}
.breadcrumb__lista li + li::before {
  content: "/";
  margin-right: var(--esp-2xs);
  opacity: .45;
}
.breadcrumb__lista a { color: var(--cor-primaria); }
.breadcrumb__lista [aria-current="page"] { opacity: .7; }

/* ---- hero das páginas internas ---- */
.hero--interno {
  padding-top: var(--esp-lg);
  padding-bottom: var(--esp-2xl);
}
.breadcrumb + .hero--interno { padding-top: var(--esp-md); }

.hero__texto {
  font-size: var(--fs-lg);
  max-width: 58ch;
  margin-top: var(--esp-sm);
}
.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-sm);
  margin-top: var(--esp-lg);
}

/* ---- cartões ---- */
.cartao__numero {
  font-family: var(--font-numero);
  font-size: var(--fs-num);
  line-height: 1;
  color: var(--cor-acao);
  margin: 0 0 var(--esp-2xs);
}
/* Antes/depois: o "depois" ganha a superfície púrpura; o marcador da lista
   já diferencia os dois (cinza × púrpura) sem precisar de cor. */
.cartao--solucao {
  background-color: var(--superficie-purpura);
  border-color: color-mix(in srgb, var(--brand-purpura) 22%, transparent);
}

.lista-marcada {
  list-style: none;
  margin: var(--esp-xs) 0 0;
  padding: 0;
  display: grid;
  gap: var(--esp-xs);
}
.lista-marcada li {
  position: relative;
  padding-left: var(--esp-md);
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background-color: var(--cor-acao);
}
.cartao--problema .lista-marcada li::before { background-color: var(--cor-borda); }

.secao__nota {
  max-width: 60ch;
  margin-top: var(--esp-lg);
  font-size: var(--fs-sm);
}



/* ---- formulário ---- */
.form {
  display: grid;
  gap: var(--esp-sm);
  margin-top: var(--esp-md);
}
.form__linha {
  display: grid;
  gap: var(--esp-sm);
}
.form__campo { display: grid; gap: var(--esp-3xs); }

.form__label {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--cor-primaria);
}
.form__label span { color: var(--cor-acao); }
.form__input {
  width: 100%;
  padding: var(--esp-xs) var(--esp-sm);
  min-height: 48px;
  font-family: var(--font-corpo);
  font-size: var(--fs-base);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  /* A borda é o que separa o campo do fundo da seção: 50% de tinta dá
     3,27:1 sobre a superfície (WCAG 1.4.11). Com 12% eram 1,22:1. */
  border: 1px solid var(--borda-campo);
  border-radius: var(--radius-md);
  transition: border-color var(--transition);
}
.form__input:hover { border-color: color-mix(in srgb, var(--brand-tinta) 70%, var(--cor-fundo)); }
/* Foco com o anel global (3px púrpura, 6,08:1) em vez do halo de 7%, que
   não aparecia; mantém o raio do campo. */
.form__input:focus-visible {
  border-color: var(--cor-acao);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}
.form__input--area { min-height: 120px; resize: vertical; }

/* Estado de erro nunca só por cor: vem com borda mais grossa e a mensagem
   do navegador, para quem não distingue matiz. */
.form__input:user-invalid {
  border-width: 2px;
  border-color: var(--cor-acao);
}

/* Tom secundário pela cor, não por opacidade: opacidade no bloco apagava
   também o link da política (3,8:1). O link mantém o indigo pleno. */
.form__ajuda,
.form__legal {
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--cor-texto) 80%, var(--cor-fundo));
  margin: 0;
}
.form__legal a { color: var(--cor-primaria); }

.form__enviar { justify-self: start; }

/* Honeypot: fora da tela, fora do leitor de tela, fora da ordem de tabulação. */
.form__armadilha {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__feedback {
  margin: 0;
  padding: var(--esp-xs) var(--esp-sm);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  min-height: 1px;
}
.form__feedback:empty { display: none; }
.form__feedback--carregando { background-color: var(--superficie); color: var(--cor-texto); }
.form__feedback--sucesso {
  background-color: var(--superficie-indigo);
  color: var(--cor-primaria);
  border: 1px solid var(--cor-primaria);
}
.form__feedback--erro {
  background-color: var(--superficie-purpura);
  color: var(--cor-acao);
  border: 1px solid var(--cor-acao);
  font-weight: 700;
}

/* ---- página de contato ---- */
.contato__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-2xl);
}
/* min-width: 0 impede o filho de grid de estourar a coluna quando houver
   conteúdo longo sem espaço (URL, token de placeholder). */
.contato__form-area { min-width: 0; }

.contato__dados-titulo {
  font-family: var(--font-titulo);
  font-size: var(--fs-h3);
  color: var(--cor-primaria);
  margin: 0 0 var(--esp-sm);
}
.contato__dados {
  padding: var(--esp-lg);
  background-color: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra-sm);
  align-self: start;
}
.contato__lista {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--esp-sm);
}
.contato__rotulo {
  display: block;
  font-family: var(--font-subtitulo);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .7;
}
.contato__valor {
  display: block;
  font-size: var(--fs-base);
  color: var(--cor-texto);
}
a.contato__valor { color: var(--cor-primaria); }

.contato__atuacao {
  margin-top: var(--esp-lg);
  padding-top: var(--esp-lg);
  border-top: 1px solid var(--cor-borda);
}
.contato__atuacao p { font-size: var(--fs-sm); margin: 0 0 var(--esp-xs); }

/* ---- documento longo (privacidade) ---- */
.documento {
  padding-top: var(--esp-lg);
  padding-bottom: var(--esp-3xl);
}
.documento h1 { margin-bottom: var(--esp-2xs); }
.documento h2 {
  margin-top: var(--esp-2xl);
  margin-bottom: var(--esp-xs);
  font-size: var(--fs-h3);
  color: var(--cor-primaria);
}
.documento h3 {
  margin-top: var(--esp-lg);
  margin-bottom: var(--esp-2xs);
  font-size: var(--fs-base);
}
.documento p,
.documento li { max-width: 56ch; }  /* ≈ 78 caracteres em 17px */
.documento p { margin: 0 0 var(--esp-sm); }
.documento ul { margin: 0 0 var(--esp-sm) var(--esp-md); }
.documento li { margin-bottom: var(--esp-2xs); }
.documento a { color: var(--cor-primaria); }
.documento code {
  padding: 1px var(--esp-3xs);
  background-color: var(--superficie);
  border-radius: var(--radius-sm);
  font-size: .9em;
}

.documento__data {
  font-size: var(--fs-xs);
  opacity: .7;
  margin-bottom: var(--esp-lg);
}
.documento__abertura { font-size: var(--fs-lg); }
.documento__destaque {
  padding: var(--esp-sm) var(--esp-md);
  background-color: var(--superficie);
  border-radius: var(--radius-md);
}

/* Tabela larga nunca empurra o corpo da página: rola dentro da própria caixa. */
.tabela-rolavel {
  overflow-x: auto;
  margin: 0 0 var(--esp-lg);
  -webkit-overflow-scrolling: touch;
}
.tabela {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.tabela th,
.tabela td {
  padding: var(--esp-xs) var(--esp-sm);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cor-borda);
}
.tabela th {
  font-family: var(--font-titulo);
  font-weight: 700;
  color: var(--cor-primaria);
  border-bottom-width: 2px;
}

/* ---- responsivo ---- */
@media (min-width: 768px) {
  .form__linha { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .contato__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    gap: var(--esp-3xl);
  }
}

/* ---- subtítulo dentro de seção ---- */
.secao__subtitulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--cor-primaria);
  margin: var(--esp-2xl) 0 var(--esp-2xs);
}

/* ---- destaque: um fato que a página quer que ninguém perca ---- */
.destaque {
  margin-top: var(--esp-xl);
  padding: var(--esp-lg);
  background-color: var(--superficie-indigo);
  border-radius: var(--radius-lg);
}
.destaque__titulo {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--cor-primaria);
  margin: 0 0 var(--esp-2xs);
}
.destaque p { margin: 0; max-width: 70ch; }

/* ---- hero com foto em tela cheia ----
   A foto é fundo de ponta a ponta, no sistema de .secao--escura (texto
   branco, ciano de destaque, botões e foco de fundo escuro).
   Filtro da identidade gravado no próprio arquivo (duotone tinta → azul-
   claro #7284d0, feito com PIL): o pixel mais claro de qualquer foto é o
   azul-claro, então a leitura não depende da foto nem de mix-blend-mode
   (que não apareceu nas capturas de teste). O véu escurece
   o lado do texto (tinta) e puxa um toque de púrpura do outro.
   Medido compondo arquivo + recorte + véu fora do navegador, dentro da
   caixa de cada texto (percentil 99,5), nas 6 páginas em 1440 e 390 px:
   título/texto branco 9,5–12,3:1, ciano (selo e destaque) 6,8–8,5:1.
   Foto de banco só como ambientação; o logo nunca fica sobre a foto (na
   home ela começa abaixo do cabeçalho). */
.hero--foto {
  isolation: isolate;
  background-color: var(--cor-fundo-escuro);
}
.hero--foto:not(.hero--interno) {
  padding-block: calc(var(--header-h) + var(--esp-3xl)) var(--esp-3xl);
}
/* Páginas internas: o breadcrumb fica dentro do hero, sobre a foto; o
   hero começa no topo da página (atrás do cabeçalho fixo). */
.hero--foto.hero--interno {
  padding-block: calc(var(--header-h) + var(--esp-md)) var(--esp-3xl);
}

.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
}
/* A foto começa abaixo do cabeçalho: o logo nunca fica sobre a foto. */
.hero--foto .hero__fundo { top: var(--header-h); }
.hero__fundo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foto-foco, 50% 50%);
}
.hero__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--brand-tinta) 72%, transparent);
}
@media (min-width: 768px) {
  .hero__fundo::after {
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--brand-tinta) 90%, transparent) 0%,
      color-mix(in srgb, var(--brand-tinta) 72%, transparent) 45%,
      color-mix(in srgb, var(--brand-purpura) 30%, transparent) 100%);
  }
}

/* Texto sobre a foto: branco; o destaque do título em ciano (indigo e
   púrpura são proibidos como texto sobre fundo escuro). */
.hero--foto h1,
.hero--foto .hero__titulo { color: var(--cor-texto-inverso); }
.hero--foto .hero__titulo em { color: var(--cor-destaque); }
.hero--foto .hero__destaque svg { color: var(--cor-destaque); }
/* Breadcrumb sobre a foto: links em ciano (indigo é proibido sobre fundo
   escuro), texto em branco; a página atual em branco a 80%. */
.hero--foto .breadcrumb {
  position: relative;
  padding: 0 0 var(--esp-xl);
}
.hero--foto .breadcrumb__lista { color: var(--cor-texto-inverso); }
.hero--foto .breadcrumb__lista a { color: var(--cor-destaque); }
.hero--foto .breadcrumb__lista [aria-current="page"] {
  opacity: 1;
  color: color-mix(in srgb, var(--cor-texto-inverso) 80%, var(--brand-tinta));
}
.hero--foto .btn--outline {
  border-color: var(--cor-texto-inverso);
  color: var(--cor-texto-inverso);
}
.hero--foto .btn--outline:hover {
  background-color: var(--cor-texto-inverso);
  color: var(--cor-texto);
}

/* =========================================================
   Módulos da home (prova de conceito, 19/09)
   Todos nascem no estado final e legível; o movimento só entra depois
   que o script marca .anima--pronta, e acontece quando o bloco entra
   na tela (.em-cena). Dados dos gráficos: só o que a cliente informou
   (≈ 3 meses de consultoria, ≈ 1 semana até o sistema operar, nota no
   dia 1) — nada de número de resultado inventado.
   ========================================================= */

/* ---- Problemas: uma cor da marca por cartão ---- */
.cartao--indigo  { --acento: var(--brand-indigo);    --icone: var(--grad-1); }
.cartao--ciano   { --acento: var(--brand-ciano);     --icone: var(--grad-2); }
.cartao--magenta { --acento: var(--brand-magenta);   --icone: linear-gradient(135deg, var(--brand-purpura), var(--brand-magenta)); }
.cartao--noite   { --acento: var(--brand-azul-claro); --icone: linear-gradient(135deg, var(--brand-tinta), var(--brand-indigo)); }
.cartao--dor { transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition); }
.cartao--dor .icone-gradiente {
  background: var(--icone);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) {
  .cartao--dor:hover { background-color: color-mix(in srgb, var(--acento) 9%, var(--cor-fundo)); }
  .cartao--dor:hover .icone-gradiente { transform: rotate(-8deg) scale(1.1); }
}

/* ---- Gráficos dentro dos cartões de serviço ---- */
.container > .grafico { margin-top: var(--esp-xl); }
.grafico {
  margin: var(--esp-md) 0 0;
  padding: var(--esp-md);
  border-radius: var(--radius-md);
  background-color: var(--superficie-indigo);
}
.grafico__legenda { max-width: 60ch; margin: 0 0 var(--esp-sm); font-size: var(--fs-sm); }
.grafico__legenda strong { color: var(--cor-primaria); }

/* Ciclo da consultoria: cinco setas numa roda (o processo se repete) e,
   ao lado, as etapas em texto de verdade. A roda é decorativa; quem lê a
   ordem é a lista. Com movimento, as setas entram em sequência e depois
   uma etapa por vez ganha destaque, dando a volta sem parar. */
.ciclo {
  display: grid;
  grid-template-columns: clamp(7.5rem, 38%, 11rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-md);
}
.ciclo__roda { position: relative; }
.ciclo__roda svg { display: block; width: 100%; height: auto; overflow: visible; }
.ciclo__seta {
  fill: var(--seta-cor);
  transform-box: view-box;
  transform-origin: 100px 100px;
}
.ciclo__seta:nth-child(1), .ciclo__etapas li:nth-child(1) { --seta-cor: var(--brand-indigo); }
.ciclo__seta:nth-child(2), .ciclo__etapas li:nth-child(2) { --seta-cor: var(--brand-azul-claro); }
.ciclo__seta:nth-child(3), .ciclo__etapas li:nth-child(3) { --seta-cor: var(--brand-ciano); }
.ciclo__seta:nth-child(4), .ciclo__etapas li:nth-child(4) { --seta-cor: var(--brand-magenta); }
.ciclo__seta:nth-child(5), .ciclo__etapas li:nth-child(5) { --seta-cor: var(--brand-purpura); }
.ciclo__centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--cor-primaria);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
.ciclo__centro svg { width: 22px; height: 22px; color: var(--cor-acao); }
.ciclo__etapas {
  display: grid;
  gap: var(--esp-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ciclo;
}
.ciclo__etapas li {
  counter-increment: ciclo;
  display: flex;
  align-items: center;
  gap: var(--esp-2xs);
  padding: 2px var(--esp-2xs) 2px 2px;
  border-radius: var(--radius-pill);
  color: var(--cor-texto);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.ciclo__etapas li::before {
  content: counter(ciclo);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--seta-cor);
  color: var(--brand-tinta);                     /* tinta sobre azul, ciano e magenta: ≥ 4,5:1 */
  font-family: var(--font-numero);
  font-size: var(--fs-xs);
}
.ciclo__etapas li:nth-child(1)::before,
.ciclo__etapas li:nth-child(5)::before { color: var(--cor-texto-inverso); }   /* branco sobre indigo e púrpura: 6:1 */

/* ≈ 1 semana: sete dias, marcos no dia 1 (nota fiscal) e no 7 (operando) */
.grafico__dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--esp-3xs);
  margin: 0;
  padding: 0 0 var(--esp-md);
  list-style: none;
}
.grafico__dia { position: relative; }
.grafico__dia span {
  display: block;
  padding: var(--esp-2xs) 0;
  border-radius: 8px;
  background-color: var(--brand-indigo);         /* branco sobre indigo: 6,1:1 */
  color: var(--cor-texto-inverso);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.grafico__dia--marco span { background-color: var(--brand-purpura); }   /* 6,1:1 */
.grafico__dia em {
  position: absolute;
  top: calc(100% + 4px);
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--cor-acao);
  white-space: nowrap;
}
.grafico__dia:first-child em { left: 0; }
.grafico__dia:last-child em { right: 0; }

/* ---- Mapa esquemático do Alto Tietê ---- */
/* Linha própria, abaixo do texto e do endereço, centrada e com largura
   contida: o SVG escala o texto junto, e acima de ~48rem os nomes das
   cidades passariam de 16px. */
.mapa { grid-column: 1 / -1; width: 100%; max-width: 48rem; margin: var(--esp-md) auto 0; }
.mapa__svg { display: block; width: 100%; height: auto; overflow: visible; }
.mapa__regiao {
  fill: color-mix(in srgb, var(--brand-indigo) 9%, transparent);
  stroke: color-mix(in srgb, var(--brand-indigo) 45%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}
.mapa__remoto line { stroke: var(--cor-primaria); stroke-width: 1.5; stroke-dasharray: 4 4; }
.mapa__remoto text { font: 700 13px var(--font-corpo); fill: var(--cor-primaria); }
.mapa__rota {
  stroke: var(--brand-azul-claro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.mapa__cidade circle {
  fill: var(--brand-indigo);
  stroke: var(--cor-fundo);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.mapa__cidade text { font: 400 13px var(--font-corpo); fill: var(--cor-texto); }
.mapa__cidade--foco circle { fill: var(--brand-magenta); }
.mapa__cidade--foco text { font-weight: 700; }
.mapa__sede-ponto { fill: var(--brand-purpura); stroke: var(--cor-fundo); stroke-width: 3; }
.mapa__pulso {
  fill: var(--brand-purpura);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.mapa__sede text { font: 700 14px var(--font-titulo); fill: var(--cor-acao); }
.mapa__legenda { max-width: 54ch; margin-top: var(--esp-sm); font-size: var(--fs-sm); }
@media (hover: hover) {
  .mapa__cidade:hover circle { transform: scale(1.6); }
  .mapa__cidade:hover text { fill: var(--cor-acao); font-weight: 700; }
}
/* No celular o SVG encolhe ~55%: ficam só Suzano e Mogi nomeados; a
   legenda embaixo lista todas as cidades. */
@media (max-width: 767.98px) {
  .mapa__cidade:not(.mapa__cidade--foco) text { display: none; }
  .mapa__cidade--foco text, .mapa__sede text, .mapa__remoto text { font-size: 22px; }
  .mapa__cidade circle { r: 9px; }
}

/* ---- Método: anel dos quatro princípios (abas, via script) ---- */
.metodo { display: grid; gap: var(--esp-lg); margin-top: var(--esp-xl); }
.metodo__anel { display: none; }
.metodo--pronto .metodo__anel { display: block; width: min(15rem, 72%); margin-inline: auto; }
.metodo__base { fill: none; stroke: var(--borda-escura); stroke-width: 14; }
.metodo__arco {
  fill: none;
  stroke-width: 14;
  stroke-dasharray: 115.66 386.99;          /* ¼ da volta (2π·80) menos o vão */
  transform-origin: 100px 100px;
  opacity: .38;
  cursor: pointer;
  transition: opacity .3s ease;
}
.metodo__arco[data-i="0"] { stroke: var(--brand-ciano);      transform: rotate(-86.42deg); }
.metodo__arco[data-i="1"] { stroke: var(--brand-azul-claro); transform: rotate(3.58deg); }
.metodo__arco[data-i="2"] { stroke: var(--brand-magenta);    transform: rotate(93.58deg); }
.metodo__arco[data-i="3"] { stroke: var(--brand-branco);     transform: rotate(183.58deg); }
.metodo__arco:hover { opacity: .7; }
.metodo__arco.ativo { opacity: 1; stroke-width: 20; }
.metodo__centro {
  font: 400 46px var(--font-numero);
  fill: var(--cor-texto-inverso);
  text-anchor: middle;
  dominant-baseline: middle;
}
.metodo__centro-rotulo {
  font: 400 13px var(--font-corpo);
  fill: color-mix(in srgb, var(--brand-branco) 72%, var(--brand-tinta));
  text-anchor: middle;
}
.metodo__abas { display: flex; flex-wrap: wrap; gap: var(--esp-2xs); margin-bottom: var(--esp-md); }
.metodo__aba {
  --aba-cor: var(--brand-ciano);
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2xs);
  min-height: 44px;
  padding: var(--esp-2xs) var(--esp-sm);
  border: 1px solid var(--borda-escura);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--cor-texto-inverso);
  font-family: var(--font-titulo);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.metodo__aba span { font-family: var(--font-numero); font-weight: 400; color: var(--aba-cor); }
.metodo__aba:nth-child(2) { --aba-cor: var(--brand-azul-claro); }   /* 5,1:1 sobre a tinta */
.metodo__aba:nth-child(3) { --aba-cor: var(--brand-magenta); }      /* 4,5:1 */
.metodo__aba:nth-child(4) { --aba-cor: var(--brand-branco); }
.metodo__aba:hover { border-color: var(--aba-cor); }
.metodo__aba[aria-selected="true"] { background-color: var(--superficie-escura); border-color: var(--aba-cor); }
.metodo--pronto .metodo__lista { grid-template-columns: minmax(0, 1fr); }
.metodo--pronto .metodo__lista > [hidden] { display: none; }
.metodo__lista .cartao__texto,
.metodo__lista .cartao > p { max-width: 60ch; }
.metodo__lista > li:nth-child(2) .principio__numero { color: var(--brand-azul-claro); }
.metodo__lista > li:nth-child(3) .principio__numero { color: var(--brand-magenta); }
.metodo__lista > li:nth-child(4) .principio__numero { color: var(--brand-branco); }
@media (min-width: 1024px) {
  .metodo--pronto {
    grid-template-columns: 17rem minmax(0, 1fr);
    align-items: center;
    gap: var(--esp-2xl);
  }
  .metodo--pronto .metodo__anel { width: 100%; }
}

/* ---- Movimento (só com o script, só sem "menos movimento") ---- */
@media screen and (prefers-reduced-motion: no-preference) {
  .anima--pronta:not(.em-cena) .ciclo__seta { opacity: 0; transform: scale(.85) rotate(-20deg); }
  .anima--pronta:not(.em-cena) .grafico__dia span {
    background-color: color-mix(in srgb, var(--brand-indigo) 14%, var(--cor-fundo));
    color: var(--cor-primaria);                    /* indigo sobre o claro: 5,5:1 */
  }
  .anima--pronta:not(.em-cena) .mapa__rota { stroke-dashoffset: 1; }
  .anima--pronta:not(.em-cena) .mapa__cidade circle { transform: scale(0); }
  .em-cena .mapa__pulso { animation: mapa-pulso 1.8s cubic-bezier(.16, 1, .3, 1) .9s 3; }
  .anima--pronta:not(.em-cena) .metodo__arco { opacity: 0; }

  /* Só a entrada em cena anima; preparar o "antes" é instantâneo, então
     um bloco que já está na tela no carregamento não pisca. */
  .anima--pronta.em-cena .ciclo__seta {
    transition: opacity .4s ease calc(var(--i, 0) * .14s + .2s),
                transform .6s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * .14s + .2s);
  }
  /* Depois da entrada, uma etapa por vez em destaque, dando a volta. */
  .anima--pronta.em-cena .ciclo__seta {
    animation: ciclo-seta 10s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 2s + 1.4s) infinite;
  }
  .anima--pronta.em-cena .ciclo__etapas li {
    animation: ciclo-etapa 10s ease calc(var(--i, 0) * 2s + 1.4s) infinite;
  }
  .anima--pronta.em-cena .grafico__dia span {
    transition: background-color .3s ease calc(var(--d, 0) * .12s + .2s),
                color .3s ease calc(var(--d, 0) * .12s + .2s);
  }
  .anima--pronta.em-cena .mapa__rota {
    transition: stroke-dashoffset .9s cubic-bezier(.16, 1, .3, 1) calc(var(--r, 0) * .09s + .2s);
  }
  .anima--pronta.em-cena .mapa__cidade circle {
    transition: transform .35s cubic-bezier(.16, 1, .3, 1) calc(var(--r, 0) * .09s + .6s);
  }
  .anima--pronta.em-cena .metodo__arco { transition: opacity .5s ease calc(var(--a, 0) * .15s); }
  .anima--pronta.em-cena .mapa__cidade:hover circle { transition-delay: 0s; }
}
@keyframes ciclo-seta {
  0%, 20%, 100% { transform: scale(1); }
  6%            { transform: scale(1.07); }
}
@keyframes ciclo-etapa {
  0%, 20%, 100% { background-color: transparent; }
  4%, 14%       { background-color: color-mix(in srgb, var(--seta-cor) 18%, transparent); }
}
@keyframes mapa-pulso {
  from { opacity: .45; transform: scale(1); }
  to   { opacity: 0;   transform: scale(2.8); }
}

/* =========================================================
   Conteúdo de exemplo (decisão do usuário, 19/09): depoimentos, números,
   marcas, preços e equipe inventados para a homologação, a trocar pelo
   material real. Tudo marcado com [data-exemplo] e um .selo-exemplo.
   No domínio de produção o <head> marca html.producao e esse conteúdo
   some — um exemplo esquecido nunca chega ao público como se fosse real.
   Nada disso entra no JSON-LD nem no llms.txt.
   ========================================================= */
.producao [data-exemplo] { display: none !important; }

.selo-exemplo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3xs);
  margin-top: var(--esp-2xs);
  padding: 2px var(--esp-2xs);
  border: 1px dashed var(--cor-acao);
  border-radius: var(--radius-pill);
  background-color: var(--superficie-purpura);
  color: var(--cor-acao);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .01em;
}
.selo-exemplo::before { content: "●"; font-size: .6em; }

/* ---- Números em destaque (contadores) ---- */
.prova__numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-sm);
  margin: var(--esp-lg) 0 0;
  padding: 0;
  list-style: none;
}
.numero {
  --numero-fundo: var(--brand-indigo);
  display: grid;
  gap: var(--esp-3xs);
  padding: var(--esp-md);
  border-radius: var(--radius-lg);
  background: var(--numero-fundo);
  color: var(--cor-texto-inverso);
  box-shadow: var(--sombra-md);
  transition: transform var(--transition);
}
/* termina no meio do caminho até o magenta: rótulo pequeno em branco ≥ 4,9:1 */
.numero--magenta { --numero-fundo: linear-gradient(135deg, var(--brand-purpura), color-mix(in srgb, var(--brand-purpura) 50%, var(--brand-magenta))); }
.numero--purpura { --numero-fundo: var(--brand-purpura); }
.numero--noite   { --numero-fundo: linear-gradient(135deg, var(--brand-tinta), var(--brand-indigo)); }
.numero__valor {
  font-family: var(--font-numero);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.25rem);   /* texto grande: ≥ 3:1 até no fim magenta */
  line-height: 1;
  white-space: nowrap;
}
/* Unidade menor que o número ("3 meses", "45 min"): cabe no cartão até no celular. */
.numero__valor small { margin-left: .12em; font-size: .42em; letter-spacing: 0; }
@media (max-width: 359.98px) { .numero__valor { white-space: normal; } }
.numero__rotulo { font-size: var(--fs-sm); font-weight: 700; }
@media (hover: hover) { .numero:hover { transform: translateY(-4px) rotate(-.6deg); } }

/* ---- Depoimentos ---- */
.depoimento {
  --dep-cor: var(--brand-indigo);
  --dep-marca: var(--brand-indigo);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-md);
  height: 100%;
  margin: 0;
  padding: var(--esp-lg) var(--esp-md) var(--esp-md);
  border: 1px solid color-mix(in srgb, var(--dep-cor) 25%, transparent);
  border-radius: var(--radius-lg);
  background-color: var(--cor-fundo);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.depoimento--magenta { --dep-cor: var(--brand-magenta); --dep-marca: linear-gradient(135deg, var(--brand-purpura), var(--brand-magenta)); }
.depoimento--noite   { --dep-cor: var(--brand-azul-claro); --dep-marca: linear-gradient(135deg, var(--brand-tinta), var(--brand-indigo)); }
.depoimento::before {                       /* aspas grandes da cor do cartão */
  content: "“";
  position: absolute;
  top: -.35em;
  left: var(--esp-md);
  font-family: var(--font-titulo);
  font-size: 5rem;
  line-height: 1;
  color: var(--dep-cor);
  opacity: .9;
}
.depoimento blockquote { margin: 0; }
.depoimento blockquote p { margin: 0; font-size: var(--fs-base); line-height: 1.55; }
.depoimento figcaption {
  display: flex;
  align-items: center;
  gap: var(--esp-xs);
  margin-top: auto;
  font-size: var(--fs-sm);
}
.depoimento__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--dep-marca);
  color: var(--cor-texto-inverso);
  font-family: var(--font-numero);
  font-weight: 700;
  font-size: 1.1875rem;                     /* 19px negrito — texto grande */
}
@media (hover: hover) {
  .depoimento:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
}

/* ---- Marcas de exemplo ---- */
.logos-clientes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-sm);
  margin: var(--esp-md) 0 0;
  padding: 0;
  list-style: none;
}
.logo-exemplo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2xs);
  min-height: 72px;
  padding: var(--esp-sm);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--font-titulo);
  font-size: var(--fs-base);
  letter-spacing: -.01em;
  filter: grayscale(1);
  opacity: .8;
  transition: filter var(--transition), opacity var(--transition);
}
.logo-exemplo b { font-weight: 400; }
.logo-exemplo__marca { width: 22px; height: 22px; flex: none; background: var(--grad-1); }
.logo-exemplo--1 .logo-exemplo__marca { border-radius: 50% 50% 50% 0; }
.logo-exemplo--2 .logo-exemplo__marca { transform: rotate(45deg) scale(.8); border-radius: 3px; background: var(--grad-2); }
.logo-exemplo--3 .logo-exemplo__marca { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--brand-indigo); }
.logo-exemplo--4 .logo-exemplo__marca { border-radius: 50%; background: linear-gradient(135deg, var(--brand-purpura), var(--brand-magenta)); }
@media (hover: hover) { .logo-exemplo:hover { filter: none; opacity: 1; } }

/* ---- Planos do MNGestão ---- */
.planos {
  padding: var(--esp-lg) var(--esp-md);
  border-radius: var(--radius-lg);
  background-color: var(--superficie-indigo);
}
.planos__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-xs); }
.planos__titulo { margin: 0; color: var(--cor-primaria); }
.planos__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-sm);
  margin: var(--esp-md) 0 0;
  padding: 0;
  list-style: none;
}
.plano {
  position: relative;
  display: grid;
  gap: var(--esp-3xs);
  padding: var(--esp-md);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  background-color: var(--cor-fundo);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.plano__nome { font-family: var(--font-titulo); font-weight: 700; color: var(--cor-primaria); }
.plano__preco {
  font-family: var(--font-numero);
  font-size: 2.25rem;
  line-height: 1.1;
  color: var(--cor-texto);
}
.plano__preco small { font-size: var(--fs-sm); margin: 0 2px; color: var(--cor-texto); }
.plano__nota { font-size: var(--fs-xs); }
.plano--destaque {
  border-color: var(--cor-acao);
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand-purpura) 10%, var(--cor-fundo)), var(--cor-fundo) 60%);
  box-shadow: var(--sombra-md);
}
.plano__selo {
  position: absolute;
  top: calc(var(--esp-2xs) * -1 - 6px);
  right: var(--esp-sm);
  padding: 2px var(--esp-2xs);
  border-radius: var(--radius-pill);
  background-color: var(--cor-acao);
  color: var(--cor-texto-inverso);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.planos__nota { max-width: 60ch; margin: var(--esp-md) 0 0; font-size: var(--fs-sm); }
@media (hover: hover) {
  .plano:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); border-color: var(--cor-acao); }
}

/* ---- Equipe (avatar de iniciais até chegar a foto) ---- */
.equipe__cards { display: grid; gap: var(--esp-sm); align-content: start; }
.equipe__cards .selo-exemplo { justify-self: start; margin: 0; }
.pessoa {
  --pessoa-marca: var(--brand-indigo);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--esp-sm);
  align-items: center;
  padding: var(--esp-md);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  background-color: var(--cor-fundo);
  box-shadow: var(--sombra-sm);
}
.pessoa--magenta { --pessoa-marca: linear-gradient(135deg, var(--brand-purpura), var(--brand-magenta)); }
.pessoa__avatar {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: var(--pessoa-marca);
  color: var(--cor-texto-inverso);
  font-family: var(--font-numero);
  font-weight: 700;
  font-size: 1.5rem;
}
.pessoa__nome { margin: 0; font-size: var(--fs-base); }
.pessoa__papel { margin: 0; font-size: var(--fs-sm); }

@media (min-width: 768px) {
  .logos-clientes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .planos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .prova__numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-md); }
}

/* ---- Módulos nas demais páginas ---- */

/* Anel do método em fundo claro (Consultoria): ciano é proibido sobre o
   claro e o arco branco sumiria — indigo, púrpura, magenta e azul-claro. */
.secao:not(.secao--escura) .metodo__base { stroke: var(--cor-borda); }
.secao:not(.secao--escura) .metodo__arco[data-i="0"] { stroke: var(--brand-indigo); }
.secao:not(.secao--escura) .metodo__arco[data-i="1"] { stroke: var(--brand-purpura); }
.secao:not(.secao--escura) .metodo__arco[data-i="2"] { stroke: var(--brand-magenta); }
.secao:not(.secao--escura) .metodo__arco[data-i="3"] { stroke: var(--brand-azul-claro); }
.secao:not(.secao--escura) .metodo__centro { fill: var(--cor-primaria); }
.secao:not(.secao--escura) .metodo__centro-rotulo { fill: var(--cor-texto); }
.secao:not(.secao--escura) .metodo__aba {
  border-color: var(--cor-borda);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}
.secao:not(.secao--escura) .metodo__aba span { color: var(--cor-acao); }            /* 6:1 */
.secao:not(.secao--escura) .metodo__aba:nth-child(1) { --aba-cor: var(--brand-indigo); }
.secao:not(.secao--escura) .metodo__aba:nth-child(2) { --aba-cor: var(--brand-purpura); }
.secao:not(.secao--escura) .metodo__aba:nth-child(3) { --aba-cor: var(--brand-magenta); }
.secao:not(.secao--escura) .metodo__aba:nth-child(4) { --aba-cor: var(--brand-azul-claro); }
.secao:not(.secao--escura) .metodo__aba[aria-selected="true"] { background-color: var(--superficie-indigo); }

/* Gráfico dentro do bloco de destaque (que já é indigo claro) */
.destaque .grafico { background-color: var(--cor-fundo); }

/* Cor nos grids de cartões de texto: um losango do símbolo por cartão, na
   cor da vez (ciclo de 4), que gira no hover; fundo tingido da mesma cor.
   Fora: antes/depois, princípios, painéis do método e fundo escuro. */
.secao:not(.secao--escura) .grade:not(.metodo__lista) > .cartao:not(.cartao--dor):not(.cartao--problema):not(.cartao--solucao):not(.principio) {
  --acento: var(--brand-indigo);
  --icone: var(--grad-1);
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.secao:not(.secao--escura) .grade:not(.metodo__lista) > .cartao:nth-child(4n+2) { --acento: var(--brand-magenta); --icone: linear-gradient(135deg, var(--brand-purpura), var(--brand-magenta)); }
.secao:not(.secao--escura) .grade:not(.metodo__lista) > .cartao:nth-child(4n+3) { --acento: var(--brand-azul-claro); --icone: var(--grad-2); }
.secao:not(.secao--escura) .grade:not(.metodo__lista) > .cartao:nth-child(4n+4) { --acento: var(--brand-purpura); --icone: linear-gradient(135deg, var(--brand-tinta), var(--brand-indigo)); }
.secao:not(.secao--escura) .grade:not(.metodo__lista) > .cartao:not(.cartao--dor):not(.cartao--problema):not(.cartao--solucao):not(.principio)::before {
  content: "";
  position: absolute;
  top: var(--esp-md);
  right: var(--esp-md);
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--icone);
  transform: rotate(45deg);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.secao:not(.secao--escura) .grade:not(.metodo__lista) > .cartao:not(.cartao--dor):not(.cartao--problema):not(.cartao--solucao):not(.principio) > .cartao__titulo {
  padding-right: calc(14px + var(--esp-sm));   /* espaço do losango */
}
@media (hover: hover) {
  .secao:not(.secao--escura) .grade:not(.metodo__lista) > .cartao:not(.cartao--dor):not(.cartao--problema):not(.cartao--solucao):not(.principio):hover {
    background-color: color-mix(in srgb, var(--acento) 8%, var(--cor-fundo));
  }
  .secao:not(.secao--escura) .grade:not(.metodo__lista) > .cartao:not(.cartao--dor):not(.cartao--problema):not(.cartao--solucao):not(.principio):hover::before {
    transform: rotate(225deg) scale(1.25);
  }
}

/* ---- página 404 ---- */
.erro__codigo {
  margin: 0 0 var(--esp-2xs);
  font-family: var(--font-numero);
  font-size: clamp(3.5rem, 10vw, 6rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--cor-primaria);
}
.erro__caminhos {
  display: grid;
  gap: var(--esp-lg);
  margin-top: var(--esp-lg);
}
.erro__grupo {
  margin: 0 0 var(--esp-xs);
  font-family: var(--font-titulo);
  font-size: var(--fs-base);
  color: var(--cor-texto);
}
.erro__caminhos ul {
  display: grid;
  gap: var(--esp-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Mesmo alvo de toque dos outros links de lista: ≥24px sem mover o layout. */
.erro__caminhos a {
  display: inline-block;
  padding-block: var(--esp-3xs);
  margin-block: calc(var(--esp-3xs) * -1);
  color: var(--cor-primaria);
}
@media (min-width: 768px) {
  .erro__caminhos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- item de menu da página atual ----
   O sublinhado reusa o ::after que a nav já tem (definido no bloco de 1024px,
   com gradiente e scaleX): aqui só o expandimos. Duplicar o pseudo-elemento
   não funcionava — a regra de cima mantém transform: scaleX(0), e uma segunda
   regra que só troca cor e posição continua colapsada.
   Não sinaliza só por cor: o traço embaixo funciona para quem não distingue matiz. */
.nav__link--atual { color: var(--cor-acao); }

.nav--mobile .nav__link--atual {
  border-left: 3px solid var(--cor-acao);
  padding-left: var(--esp-xs);
}

/* Rodapé em quatro colunas: marca + chamada | serviços | atendimento e
   institucional | contato e dados da empresa. Antes eram três, com três
   listas empilhadas na do meio — as laterais acabavam cedo e sobrava vazio.
   Tablet: marca e contato na largura toda; as duas listas lado a lado. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .footer__col-contato { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .footer__marca { grid-column: auto; }
}

.footer__chamada {
  margin-top: var(--esp-lg);
  padding: var(--esp-md);
  border: 1px solid var(--borda-escura);
  border-radius: var(--radius-md);
  max-width: 28rem;
}
.footer__chamada-texto,
.footer__nota,
.footer__dados {
  color: color-mix(in srgb, var(--brand-branco) 82%, var(--brand-tinta));
}
.footer__chamada-texto { margin: 0 0 var(--esp-sm); }
.footer__nota {
  margin: var(--esp-xs) 0 0;
  font-size: var(--fs-xs);
}
.footer__dados {
  margin: 0 0 var(--esp-xs);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.footer__dados a { color: var(--cor-texto-inverso); }
.footer__lista--info li {
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--brand-branco) 82%, var(--brand-tinta));
}
.footer__lista--info strong { color: var(--cor-texto-inverso); font-weight: 700; }

/* =========================================================
   SUBMENU DE SERVIÇOS
   Desktop: abre no hover (mouse) e pelo botão ao lado do link
   (teclado e toque, padrão "disclosure"). Os links ficam com
   visibility: hidden enquanto fechado — não entram no Tab.
   Celular: não há submenu; os serviços vêm recuados na lista.
   ========================================================= */
.nav--mobile .nav__item--sub .nav__link {
  padding-left: var(--esp-md);
  font-size: var(--fs-sm);
}

@media (min-width: 1024px) {
  .nav__item--submenu {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--esp-3xs);
  }
  .nav__submenu-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--cor-texto);
    cursor: pointer;
  }
  .nav__submenu-botao svg { transition: transform var(--transition); }
  .nav__submenu-botao:focus-visible {
    outline: 2px solid var(--cor-acao);
    outline-offset: 2px;
  }

  .nav__submenu {
    position: absolute;
    top: calc(100% + var(--esp-xs));
    left: 50%;
    z-index: 110;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--esp-lg);
    width: max-content;
    min-width: 30rem;
    padding: var(--esp-md) var(--esp-lg);
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-lg);
    box-shadow: var(--sombra-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -4px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  /* Ponte invisível sobre o vão entre o link e o painel: sem ela o
     mouse "cai" no espaço vazio no caminho e o hover fecha o menu. */
  .nav__submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--esp-xs) + 4px);
  }
  .nav__item--submenu:hover .nav__submenu,
  .nav__item--submenu.submenu--aberto .nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  .nav__item--submenu:hover .nav__submenu-botao svg,
  .nav__item--submenu.submenu--aberto .nav__submenu-botao svg { transform: rotate(180deg); }

  /* Indigo sobre o branco: 6.13:1. Título e link ficam em linhas
     separadas por branco — indigo e púrpura nunca se tocam. */
  .nav__submenu-titulo {
    margin: 0 0 var(--esp-2xs);
    font-family: var(--font-subtitulo);
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cor-primaria);
  }
  .nav__submenu-lista {
    display: grid;
    gap: var(--esp-3xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav__submenu-link {
    display: block;
    padding: var(--esp-2xs) 0;
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--cor-texto);
    text-decoration: none;
    transition: color var(--transition);
  }
  .nav__submenu-grupo { min-width: 0; }
  .nav__submenu-link:hover,
  .nav__submenu-link--atual,
  .nav__submenu-link[aria-current="page"] { color: var(--cor-acao); }
  .nav__submenu-link:focus-visible {
    outline: 2px solid var(--cor-acao);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__submenu,
  .nav__submenu-botao svg { transition: none; }
}

/* =========================================================
   Revisão da cliente (21/09)
   ========================================================= */

/* ---- Os sete motivos: grade que centra a última linha incompleta ---- */
.grade--motivos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.grade--motivos > .cartao { flex: 1 1 100%; }
@media (min-width: 640px) {
  .grade--motivos > .cartao { flex-basis: calc((100% - var(--esp-md)) / 2); max-width: calc((100% - var(--esp-md)) / 2); }
}
@media (min-width: 1024px) {
  .grade--motivos > .cartao { flex-basis: calc((100% - 3 * var(--esp-md)) / 4); max-width: calc((100% - 3 * var(--esp-md)) / 4); }
}

/* Frase de fechamento da seção, depois do módulo */
.secao__fecho {
  max-width: 46rem;
  margin: var(--esp-xl) auto 0;
  padding: var(--esp-md) var(--esp-lg);
  border-radius: var(--radius-md);
  background-color: var(--superficie-purpura);
  font-family: var(--font-subtitulo);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: 1.45;
  text-align: center;
}

/* Título em duas linhas: pergunta curta + resposta */
.secao__titulo-linha { display: block; }

/* ---- Os dois caminhos depois do diagnóstico ---- */
.caminhos { max-width: 46rem; }
.caminhos__titulo { margin: 0 0 var(--esp-sm); font-weight: 700; }
.caminhos__lista { display: grid; gap: var(--esp-sm); margin: 0; padding: 0; list-style: none; }
.caminhos__lista a {
  display: block;
  padding: var(--esp-sm) var(--esp-md);
  position: relative;
  height: 100%;
  padding-right: calc(var(--esp-md) + 1.25rem);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-md);
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.caminhos__lista a::after {
  content: "→";
  position: absolute;
  right: var(--esp-sm);
  top: 50%;
  translate: 0 -50%;
  color: var(--cor-acao);
  font-weight: 700;
  transition: translate var(--transition);
}
.caminhos__lista strong { display: block; color: var(--cor-primaria); }
@media (hover: hover) {
  .caminhos__lista a:hover { border-color: var(--cor-acao); box-shadow: var(--sombra-sm); }
  .caminhos__lista a:hover::after { translate: 4px -50%; }
}
@media (min-width: 768px) {
  .caminhos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Planos reais do MNGestão ---- */
.planos__lista { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .planos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .planos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.planos__selo {
  padding: 2px var(--esp-xs);
  border-radius: var(--radius-pill);
  background-color: var(--cor-acao);
  color: var(--cor-texto-inverso);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.plano { align-content: start; overflow: hidden; padding-top: calc(var(--esp-md) + 6px); }
.plano::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--plano-cor, var(--grad-1));
}
.plano--bronze  { --plano-cor: var(--brand-azul-claro); }
.plano--prata   { --plano-cor: var(--grad-2); }
.plano--ouro    { --plano-cor: linear-gradient(90deg, var(--brand-indigo), var(--brand-purpura)); }
.plano--platina { --plano-cor: linear-gradient(90deg, var(--brand-purpura), var(--brand-magenta)); }
.plano__nome { font-size: var(--fs-lg); }
.plano__de { font-size: var(--fs-sm); color: var(--cor-texto); }
.plano__de s { text-decoration-thickness: 1px; }
.plano__preco small:last-child { margin-left: 0; }
.plano__desconto { font-size: var(--fs-xs); font-weight: 700; color: var(--cor-acao); }
.plano__recursos { display: grid; gap: var(--esp-3xs); margin: var(--esp-xs) 0 0; padding: var(--esp-xs) 0 0; border-top: 1px solid var(--cor-borda); list-style: none; font-size: var(--fs-sm); }
.plano__recurso { display: flex; gap: var(--esp-2xs); align-items: flex-start; }
.plano__icone { flex: none; margin-top: 3px; color: var(--cor-primaria); }
.plano__recurso--fora { color: color-mix(in srgb, var(--cor-texto) 62%, var(--cor-fundo)); }
.plano__recurso--fora > span { text-decoration: line-through; }
.plano__recurso--fora .plano__icone { color: currentColor; }
.plano__cta { margin-top: var(--esp-sm); width: 100%; justify-content: center; font-size: var(--fs-sm); }

/* ---- Valores (gráfico do manual, p. 20) ---- */
.roda-valores { display: grid; gap: var(--esp-lg); align-items: center; }
.roda-valores__grafico { order: -1; width: min(100%, 22rem); margin: 0 auto; }
.roda-valores__grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.roda-valores__lista { display: grid; gap: var(--esp-md); }
.roda-valor { position: relative; padding-left: calc(14px + var(--esp-xs)); }
.roda-valor::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4em;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background-color: var(--valor-cor);
}
.roda-valor__titulo { margin: 0 0 var(--esp-3xs); font-size: var(--fs-lg); }
.roda-valor__texto { margin: 0; font-size: var(--fs-sm); }

.roda-valor--indigo,  .roda-valores__fatia--indigo  { --valor-cor: var(--brand-indigo); }
.roda-valor--azul,    .roda-valores__fatia--azul    { --valor-cor: var(--brand-azul-claro); }
.roda-valor--ciano,   .roda-valores__fatia--ciano   { --valor-cor: var(--brand-ciano); }
.roda-valor--magenta, .roda-valores__fatia--magenta { --valor-cor: var(--brand-magenta); }
.roda-valor--purpura, .roda-valores__fatia--purpura { --valor-cor: var(--brand-purpura); }

.roda-valores__fatia {
  transform-box: view-box;
  transform-origin: 200px 200px;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
}
.roda-valores__fatia polygon { fill: var(--valor-cor); stroke: var(--cor-fundo); stroke-width: 6; stroke-linejoin: round; }
.roda-valores__fatia circle { fill: var(--cor-fundo); stroke: var(--valor-cor); stroke-width: 4; }
.roda-valores__icone { fill: none; stroke: var(--valor-cor); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.roda-valores__fatia--ciano .roda-valores__icone { stroke: color-mix(in srgb, var(--brand-ciano) 55%, var(--brand-tinta)); }

/* Sem script: passar o mouse num valor destaca a fatia dele */
.roda-valores:not(.roda-valores--pronto):has(.roda-valor:hover) .roda-valores__fatia { opacity: .4; }
.roda-valores:not(.roda-valores--pronto):has(.roda-valor--verdade:hover)    .roda-valores__fatia--verdade,
.roda-valores:not(.roda-valores--pronto):has(.roda-valor--autoridade:hover) .roda-valores__fatia--autoridade,
.roda-valores:not(.roda-valores--pronto):has(.roda-valor--resultado:hover)  .roda-valores__fatia--resultado,
.roda-valores:not(.roda-valores--pronto):has(.roda-valor--confianca:hover)  .roda-valores__fatia--confianca,
.roda-valores:not(.roda-valores--pronto):has(.roda-valor--adaptacao:hover)  .roda-valores__fatia--adaptacao,
.roda-valores:not(.roda-valores--pronto):has(.roda-valor--pessoas:hover)    .roda-valores__fatia--pessoas { opacity: 1; transform: scale(1.06); }

/* Com script: um valor escolhido por vez */
.roda-valores--pronto .roda-valores__fatia { cursor: pointer; }
.roda-valor__botao {
  all: unset;
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}
.roda-valor__botao:focus-visible { outline: 2px solid var(--cor-acao); outline-offset: 3px; }
.roda-valor__botao::after { content: ""; position: absolute; inset: 0; }   /* o item inteiro é clicável */
.roda-valores--pronto .roda-valor {
  padding: var(--esp-xs) var(--esp-sm) var(--esp-xs) calc(14px + var(--esp-sm) + var(--esp-2xs));
  border-radius: var(--radius-md);
  transition: background-color .3s ease, opacity .3s ease, box-shadow .3s ease, transform .3s ease;
}
.roda-valores--pronto .roda-valor::before { left: var(--esp-sm); top: calc(var(--esp-xs) + .4em); transition: transform .3s ease; }
.roda-valores--escolhido .roda-valor { opacity: .7; }
.roda-valores--escolhido .roda-valor.ativo {
  opacity: 1;
  background-color: color-mix(in srgb, var(--valor-cor) 10%, var(--cor-fundo));
  box-shadow: var(--sombra-sm);
}
.roda-valores--escolhido .roda-valor.ativo::before { transform: rotate(45deg) scale(1.15); }
.roda-valores--escolhido .roda-valor.ativo .roda-valor__titulo { color: var(--cor-primaria); }
.roda-valores--escolhido .roda-valores__fatia { opacity: .35; }
.roda-valores--escolhido .roda-valores__fatia.ativo { opacity: 1; transform: scale(1.08); }
.roda-valores--escolhido .roda-valores__fatia.ativo polygon { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--valor-cor) 45%, transparent)); }
.roda-valores--escolhido .roda-valores__fatia.ativo circle { stroke-width: 6; }

.roda-valores__grafico image { transition: opacity .3s ease; }
.roda-valores__centro {
  fill: var(--cor-primaria);
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: 19px;
  text-anchor: middle;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.roda-valores--escolhido .roda-valores__grafico image { opacity: 0; }
.roda-valores--escolhido .roda-valores__centro { opacity: 1; }

/* Entrada: as fatias se abrem do centro, uma depois da outra */
.roda-valores.anima--pronta:not(.em-cena) .roda-valores__fatia { opacity: 0; transform: scale(.6); }
.roda-valores.em-cena .roda-valores__fatia { transition-delay: calc(var(--v) * 80ms); }
.roda-valores.em-cena:has(.roda-valor:hover) .roda-valores__fatia { transition-delay: 0s; }

@media (min-width: 768px) {
  .roda-valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roda-valores__grafico { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .roda-valores { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem) minmax(0, 1fr); gap: var(--esp-xl); }
  .roda-valores__grafico { order: 0; grid-column: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .roda-valores__fatia { transition: none; }
}
.secao__intro + .secao__intro { margin-top: var(--esp-sm); }