/* Agência de Negócios — componentes da direção "Conversa Franca" (v1.3)
   Exige tokens.css e movimento.css carregados antes. Não usar cor, fonte,
   raio ou espaço fora dos tokens. Prefixo `an-` em tudo, para conviver com
   Tailwind. Régua desta versão: espaço em múltiplos de 4, altura por tamanho
   44/48/56, um anel de foco só, hover só onde há mouse, largura reservada
   para o rótulo mais longo. */

/* ---------- utilitários de forma --------------------------------------- */
.an-balao { border-radius: var(--raio-fala); }  /* canto inferior esquerdo reto */
.an-cartao-base {
  background: var(--cor-superficie-elevada);
  border: 1px solid var(--cor-borda-hairline);
  border-radius: var(--raio-md);
}

/* ---------- foco: um anel só ------------------------------------------- */
/* O anel já existe, transparente: largura de contorno não anima, cor anima.
   Sem isso o foco apareceria seco, que é justamente o que a marca proíbe.
   Vale para tudo que recebe foco por teclado. Nunca pulsa. */
.an-botao, .an-card__link, .an-faq__pergunta, .an-rodape__links a, .an-foco {
  outline: var(--anel-foco); outline-color: transparent;
  outline-offset: var(--anel-foco-afastamento);
  transition: outline-color var(--dur-toque) var(--mov-toque);
}
.an-botao:focus-visible, .an-card__link:focus-visible, .an-faq__pergunta:focus-visible,
.an-rodape__links a:focus-visible, .an-foco:focus-visible,
.an-estado-foco { outline-color: var(--cor-cobalto); }
.an-faq__pergunta:focus-visible { outline-offset: calc(var(--anel-foco-afastamento) * -1); } /* dentro do card, senão o anel é cortado pelo overflow */

/* ---------- botão ------------------------------------------------------- */
/* Altura fixa por tamanho (44/48/56) e padding só horizontal: o rótulo
   centra sozinho e nada depende de conta de linha. Rótulo e rótulo de
   espera vivem na mesma célula de grid: o mais longo reserva a largura, e
   trocar de estado não mexe em nada ao redor. */
.an-botao {
  box-sizing: border-box;
  font: 700 1rem/1.25 var(--fonte-display);
  border-radius: var(--raio-pilula);
  padding: 0 var(--e-6); min-height: 48px;
  display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: center;
  column-gap: var(--e-2); text-align: center;
  border: none; cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  text-wrap: balance; /* rótulo longo quebra em duas linhas parecidas, não em uma longa e uma curta */
}
.an-botao__rotulo, .an-botao::after { grid-area: 1 / 1; }
.an-botao::after { content: attr(data-espera); visibility: hidden; } /* reserva a largura do rótulo de espera */
/* Ícone antes do rótulo (o WhatsApp do herói): fica à esquerda, rótulo e
   rótulo de espera passam para a segunda coluna. Ícone depois do rótulo é
   auto-posicionado e já cai à direita. */
.an-botao > .an-icone:first-child { grid-area: 1 / 1; }
.an-botao > .an-icone:first-child ~ .an-botao__rotulo,
.an-botao:has(> .an-icone:first-child)::after { grid-area: 1 / 2; }
.an-botao--primario { background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto); }
.an-botao--secundario {
  background: var(--cor-superficie-elevada); color: var(--cor-cobalto);
  border: 1.5px solid var(--cor-cobalto);
}
.an-botao--texto { background: transparent; color: var(--cor-cobalto); padding: 0 var(--e-3); }
.an-botao--grande   { font-size: 1.125rem; padding: 0 var(--e-8); min-height: 56px; }
.an-botao--compacto { font-size: .9375rem; padding: 0 var(--e-4) ; min-height: 44px; } /* 44: alvo de toque mínimo */
/* Hover só onde há mouse. Em tela de toque o hover grudaria depois do dedo sair. */
@media (hover: hover) {
  .an-botao--primario:hover   { background: var(--cor-cobalto-superficie-hover); } /* o rótulo continua branco */
  .an-botao--secundario:hover { background: var(--cor-cobalto-veu); }
  .an-botao--texto:hover      { color: var(--cor-cobalto-tinta-hover); }
}
.an-botao--primario.an-estado-hover   { background: var(--cor-cobalto-superficie-hover); }
.an-botao--secundario.an-estado-hover { background: var(--cor-cobalto-veu); }
.an-botao--texto.an-estado-hover      { color: var(--cor-cobalto-tinta-hover); }
/* Ocupado: cor cheia, porque o botão está trabalhando, não bloqueado.
   O rótulo de espera entra no lugar do rótulo, na largura já reservada, e
   pulsa no ritmo de espera da marca. Só depois de 500 ms (o JS decide). */
.an-botao[aria-busy="true"] { cursor: progress; pointer-events: none; }
.an-botao[aria-busy="true"] .an-botao__rotulo { visibility: hidden; }
.an-botao[aria-busy="true"]::after {
  visibility: visible;
  animation: an-pulso var(--espera-pulso) var(--mov-toque) infinite;
}
/* Desabilitado: esmaecido, sem transição. Estado que não se explica com movimento. */
.an-botao[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; transition: none; }
/* Regra: um botão primário por tela. Rótulo começa com verbo. */

/* ---------- badge ------------------------------------------------------- */
.an-badge {
  box-sizing: border-box;
  display: inline-grid; grid-auto-flow: column; align-items: center; column-gap: var(--e-1);
  font: 600 .875rem/1 var(--fonte-texto);
  border-radius: var(--raio-pilula); padding: 0 var(--e-3); min-height: 28px;
  background: var(--cor-cobalto-veu); color: var(--cor-caminho-rotulo);
}
/* Troca de estado com largura reservada: data-reserva leva o rótulo mais
   longo da série, invisível, na mesma célula do rótulo visível. */
.an-badge__rotulo, .an-badge::after { grid-area: 1 / 1; }
.an-badge::after { content: attr(data-reserva); visibility: hidden; }
.an-badge > .an-icone { grid-area: 1 / 1; }
.an-badge:has(> .an-icone) .an-badge__rotulo, .an-badge:has(> .an-icone)::after { grid-area: 1 / 2; }
.an-badge--pendente  { background: var(--cor-problema-fundo);  color: var(--cor-problema-rotulo); }
.an-badge--resolvido { background: var(--cor-resultado-fundo); color: var(--cor-resultado-rotulo); }
.an-badge--registro {
  background: transparent; border: 1px solid var(--cor-borda-hairline);
  color: var(--cor-tinta-media); font: 400 .8125rem/1 var(--fonte-mono);
  font-variant-numeric: tabular-nums;
}
/* Dentro do card cobalto o registro usa os tokens "sobre cobalto", não cor solta. */
.an-card--cobalto .an-badge--registro {
  border-color: var(--cor-sobre-cobalto-tenue); color: var(--cor-sobre-cobalto);
}

/* ---------- card -------------------------------------------------------- */
.an-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e-6); }
.an-card {
  background: var(--cor-superficie-elevada);
  border: 1px solid var(--cor-borda-hairline);
  border-radius: var(--raio-md); padding: var(--e-card);
  display: flex; flex-direction: column; gap: var(--e-4);
  box-shadow: var(--sombra-1);
}
.an-card--cobalto {
  background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto);
  border-color: transparent; box-shadow: none;
}
.an-card > .an-icone { width: 32px; height: 32px; color: var(--cor-cobalto); }
.an-card--cobalto > .an-icone { color: var(--cor-sobre-cobalto); }
.an-card__titulo {
  font: 700 1.25rem/1.2 var(--fonte-display); letter-spacing: var(--tracking-subtitulo); margin: 0;
  max-width: var(--medida-destaque);
}
.an-card__texto { margin: 0; font: var(--texto-corpo); color: var(--cor-tinta-media); max-width: var(--medida-corpo); }
.an-card--cobalto .an-card__texto { color: var(--cor-sobre-cobalto-apoio); }
.an-card__link {
  font: 700 1rem/1.5 var(--fonte-display); color: var(--cor-cobalto);
  display: inline-flex; align-items: center; gap: var(--e-2); align-self: flex-start;
  text-decoration: none; margin-top: auto; border-radius: var(--raio-xs);
}
.an-card--cobalto .an-card__link { color: var(--cor-sobre-cobalto); }
.an-card--cobalto .an-card__link:focus-visible { outline-color: var(--cor-sobre-cobalto); }
@media (hover: hover) { .an-card__link:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- passo numerado ---------------------------------------------- */
.an-passos { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.an-passo {
  display: flex; gap: var(--e-4); position: relative;
  /* 22 de margem + 2 de linha: o centro da linha fica em 23, o mesmo centro
     do círculo de 44 (left -23 + 22). Valores de alinhamento, não de espaço. */
  margin-left: 22px; padding: 0 0 var(--e-6) var(--e-8);
  border-left: 2px solid var(--cor-cobalto);
}
.an-passo:last-child { border-left-color: transparent; padding-bottom: 0; }
.an-passo__numero {
  position: absolute; left: -23px; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto);
  font: 700 1.1875rem/1 var(--fonte-display); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center; flex: none;
}
/* Alinhamento óptico: a primeira linha do título (24 px) centra com o
   círculo de 44 → (44 − 24) / 2 = 10 px de compensação no topo. */
.an-passo__corpo { display: flex; flex-direction: column; gap: var(--e-2); padding-top: 10px; }
.an-passo__titulo {
  font: 700 1.25rem/1.2 var(--fonte-display); letter-spacing: var(--tracking-subtitulo); margin: 0;
  max-width: var(--medida-destaque);
}
.an-passo__texto { margin: 0; font: var(--texto-corpo); color: var(--cor-tinta-media); max-width: var(--medida-corpo); }
.an-passo--atual .an-passo__numero { background: var(--cor-coral); color: var(--cor-sobre-coral); }

/* ---------- checklist --------------------------------------------------- */
.an-checklist { display: flex; flex-direction: column; gap: var(--e-4); }
.an-checklist__titulo {
  font: 700 1.125rem/1.3 var(--fonte-display); letter-spacing: var(--tracking-subtitulo); margin: 0;
}
.an-checklist__lista { display: flex; flex-direction: column; gap: var(--e-3); list-style: none; margin: 0; padding: 0; }
.an-checklist__item { display: flex; gap: var(--e-3); align-items: flex-start; font: var(--texto-corpo); max-width: var(--medida-corpo); }
.an-checklist__marca {
  box-sizing: border-box;
  width: 24px; height: 24px; border-radius: var(--raio-xs); flex: none; margin-top: 2px; /* (27 de linha − 24) / 2, arredondado ao ritmo */
  background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto);
  border: 1.5px solid var(--cor-cobalto-superficie);
  display: flex; align-items: center; justify-content: center;
}
.an-checklist__item--vazio .an-checklist__marca {
  background: transparent; border-color: var(--cor-borda-vazia);
}

/* ---------- bloco de dado ----------------------------------------------- */
/* Regra: um número por peça, sempre com fonte. Número sem origem não entra. */
.an-dado {
  background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto);
  border-radius: var(--raio-fala); padding: var(--e-8);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.an-dado__numero {
  font: 700 4rem/1 var(--fonte-display); letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
}
.an-dado__texto { font: 400 1.25rem/1.4 var(--fonte-texto); color: var(--cor-sobre-cobalto-apoio); max-width: var(--medida-destaque); }
.an-dado__fonte { font: var(--texto-tecnico); color: var(--cor-sobre-cobalto-tenue); padding-top: var(--e-2); font-variant-numeric: tabular-nums; }
.an-dado-linha { display: flex; gap: var(--e-6); flex-wrap: wrap; }
.an-dado-linha__item { display: flex; flex-direction: column; gap: var(--e-1); min-width: 112px; }
.an-dado-linha__numero { font: 700 2rem/1 var(--fonte-display); letter-spacing: var(--tracking-titulo); font-variant-numeric: tabular-nums; }
.an-dado-linha__rotulo { font: var(--texto-apoio); color: var(--cor-tinta-media); }
.an-dado-linha__divisor { width: 1px; background: var(--cor-borda-hairline); }
@media (max-width: 767px) { .an-dado__numero { font-size: 3rem; } } /* 48: cabe em 390 com o padding */

/* ---------- problema → caminho → resultado ------------------------------- */
.an-pcr { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-4); align-items: stretch; }
.an-pcr__bloco { border-radius: var(--raio-md); padding: var(--e-card); display: flex; flex-direction: column; gap: var(--e-3); }
.an-pcr__rotulo {
  font: 600 .8125rem/1 var(--fonte-mono); letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--e-2);
}
.an-pcr__titulo { font: 700 1.25rem/1.2 var(--fonte-display); letter-spacing: var(--tracking-subtitulo); color: var(--cor-tinta-forte); margin: 0; max-width: var(--medida-destaque); }
.an-pcr__texto { margin: 0; font: var(--texto-corpo); max-width: var(--medida-corpo); }
.an-pcr__bloco--problema  { background: var(--cor-problema-fundo); }
.an-pcr__bloco--problema  .an-pcr__rotulo { color: var(--cor-problema-rotulo); }
.an-pcr__bloco--problema  .an-pcr__texto  { color: var(--cor-problema-texto); }
.an-pcr__bloco--caminho   { background: var(--cor-caminho-fundo); }
.an-pcr__bloco--caminho   .an-pcr__rotulo { color: var(--cor-caminho-rotulo); }
.an-pcr__bloco--caminho   .an-pcr__texto  { color: var(--cor-caminho-texto); }
.an-pcr__bloco--resultado { background: var(--cor-resultado-fundo); }
.an-pcr__bloco--resultado .an-pcr__rotulo { color: var(--cor-resultado-rotulo); }
.an-pcr__bloco--resultado .an-pcr__texto  { color: var(--cor-resultado-texto); }

/* ---------- depoimento --------------------------------------------------- */
/* Sempre fala real, com autorização. Sem sobrenome completo, sem valores,
   sem "antes e depois". Ver docs/compliance.md, seção 6. */
.an-depoimento {
  background: var(--cor-superficie-elevada);
  border: 1px solid var(--cor-borda-hairline);
  border-radius: var(--raio-fala); padding: var(--e-8); margin: 0;
  display: flex; flex-direction: column; gap: var(--e-4);
}
.an-depoimento__fala {
  margin: 0; font: var(--texto-destaque); font-style: italic; color: var(--cor-tinta-forte);
  max-width: var(--medida-corpo);
}
.an-depoimento__autor { display: flex; align-items: center; gap: var(--e-3); }
.an-depoimento__inicial {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--cor-cobalto-veu); color: var(--cor-caminho-rotulo);
  font: 700 1rem/1 var(--fonte-display);
  display: flex; align-items: center; justify-content: center;
}
.an-depoimento__dados { display: flex; flex-direction: column; }
.an-depoimento__nome { font: 600 1.0625rem/1.4 var(--fonte-texto); }
.an-depoimento__contexto { font: var(--texto-apoio); color: var(--cor-tinta-suave); } /* 15: piso da tinta-suave */

/* ---------- FAQ ---------------------------------------------------------- */
/* Pergunta na voz do cliente, resposta em até três frases. */
.an-faq {
  background: var(--cor-superficie-elevada);
  border: 1px solid var(--cor-borda-hairline);
  border-radius: var(--raio-md); overflow: hidden;
}
.an-faq__item + .an-faq__item { border-top: 1px solid var(--cor-borda-hairline); }
.an-faq__pergunta {
  padding: 20px var(--e-card); cursor: pointer; list-style: none; min-height: 44px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  font: 700 1.125rem/1.3 var(--fonte-display); letter-spacing: var(--tracking-subtitulo);
  -webkit-tap-highlight-color: transparent;
}
.an-faq__pergunta::-webkit-details-marker { display: none; }
.an-faq__resposta { padding: 0 var(--e-card) 20px; font: var(--texto-corpo); color: var(--cor-tinta-media); max-width: var(--medida-corpo); }
/* Vazio: quando a lista de perguntas ainda não existe, o componente diz isso na voz da marca, sem ícone. */
.an-faq__vazio { padding: 20px var(--e-card); font: var(--texto-apoio); color: var(--cor-tinta-media); }

/* ---------- rodapé com CRECI --------------------------------------------- */
/* Obrigatório em toda peça de intermediação imobiliária. Texto fixo,
   sem abreviação, mínimo 13 px. Ver docs/compliance.md, seção 4. */
.an-rodape {
  background: var(--cor-rodape-fundo); border-radius: var(--raio-md);
  padding: var(--e-8); display: flex; flex-direction: column; gap: var(--e-6);
}
.an-rodape__topo { display: flex; flex-wrap: wrap; gap: var(--e-6); align-items: flex-start; justify-content: space-between; }
.an-rodape__marca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.an-rodape__local { font: var(--texto-apoio); color: var(--cor-rodape-apoio); max-width: var(--medida-corpo); }
/* Cada link ocupa 44 px de altura: 24 de linha + 10 em cima e embaixo.
   O espaço entre eles vem do padding, não do gap, para o dedo ter onde cair. */
.an-rodape__links { display: flex; flex-direction: column; gap: 0; }
.an-rodape__links a {
  color: var(--cor-rodape-link); text-decoration: none; font: var(--texto-apoio); line-height: 24px;
  display: inline-block; padding: 10px 0; align-self: flex-start; border-radius: var(--raio-xs);
}
.an-rodape__divisor { height: 1px; background: var(--cor-rodape-divisor); }
.an-rodape__creci {
  font: var(--texto-tecnico); font-variant-numeric: tabular-nums;
  color: var(--cor-rodape-creci); letter-spacing: .02em;
}
/* A nota do rodapé de CRECI (o Ricardo, 03/10/2026, docs/compliance.md, seção 4): o nome completo
   logo abaixo de "Ricardo Monteiro · CRECI-MG 62736", bem menor, sem descer de 11 px. Sem asterisco desde
   09/10/2026 (decisão do Mike). */
.an-creci__nota { display: block; margin-top: 2px; font-size: max(.8em, 11px); }

/* ---------- ícone -------------------------------------------------------- */
/* Grade 24, traço 1.5, ponta arredondada, sem preenchimento, no máximo três
   formas. Sem casa, telhado, chave, pin de mapa, balança ou martelo. */
.an-icone { width: var(--icone-grade); height: var(--icone-grade); fill: none;
  stroke: currentColor; stroke-width: var(--icone-traco);
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.an-icone--14 { width: 14px; height: 14px; stroke-width: 2.2px; } /* dentro de badge: abaixo de 18 o traço engrossa */
.an-icone--18 { width: 18px; height: 18px; }
.an-icone--32 { width: 32px; height: 32px; }
.an-icone--reservado { visibility: hidden; } /* ícone que sai de cena mantém o lugar: nada ao redor muda de largura */

/* ---------- marca inline (a que anima) ---------------------------------- */
/* Mesma geometria dos arquivos de logo/, montada por publicar-design-system.py
   em dois grupos que movimento.css anima: .an-marca__balao (balão cheio,
   balão em contorno e monograma) e .an-marca__wordmark. Sem cor gravada: os
   tokens --marca-* de tokens.css reproduzem marca-curta.svg no claro e
   marca-curta-negativa.svg no escuro (balão só em contorno); o modificador
   --sobre-cobalto reproduz marca-curta-sobre-cobalto.svg nos dois temas.
   A marca não segue a tinta do tema: segue o arquivo. */
.an-marca { display: block; height: auto; }
.an-marca__balao-cheio    { fill: var(--marca-balao); }
.an-marca__balao-contorno { fill: none; stroke: var(--marca-balao-contorno); stroke-width: 2; }
.an-marca__monograma      { fill: var(--marca-monograma); }
.an-marca__wordmark path  { fill: var(--marca-texto); }
.an-marca--sobre-cobalto {
  --marca-balao: var(--marca-cobalto-balao); --marca-balao-contorno: none;
  --marca-monograma: var(--marca-cobalto-monograma); --marca-texto: var(--marca-cobalto-texto);
}


/* ======================================================================
   MOVIMENTO POR COMPONENTE
   Exige movimento.css. Regra de ouro: entrada usa --mov-entrada com a
   duração cheia; saída usa --mov-saida com a duração vezes 0,7.
   Se um movimento não responde "o que acabou de acontecer?", ele sai da peça.
   ====================================================================== */

/* Botão · cor em 120 ms; pressionado é a única escala permitida ---------- */
.an-botao {
  transition-property: background-color, color, border-color, transform, outline-color;
  transition-duration: var(--dur-toque);
  transition-timing-function: var(--mov-entrada); /* soltar volta em 120 ms com mov-entrada */
}
.an-botao:active:not([disabled]):not([aria-busy="true"]), .an-botao.an-estado-pressionado {
  transform: scale(.98);
  transition: transform var(--dur-toque-saida) var(--mov-saida),
              background-color var(--dur-toque) var(--mov-toque);
}

/* Card · hover e entrada ------------------------------------------------ */
.an-card {
  transition: box-shadow var(--dur-curta-saida) var(--mov-saida),
              transform var(--dur-curta-saida) var(--mov-saida),
              opacity var(--dur-media) var(--mov-entrada) var(--mov-atraso, 0ms);
}
.js-movimento .an-revelar:not(.an-visivel) .an-card {
  opacity: 0; transform: translateY(var(--desloc-medio));
  transition: transform var(--dur-media) var(--mov-entrada) var(--mov-atraso, 0ms),
              opacity var(--dur-media) var(--mov-entrada) var(--mov-atraso, 0ms);
}
.js-movimento .an-revelar.an-visivel .an-card {
  transition: box-shadow var(--dur-curta-saida) var(--mov-saida),
              transform var(--dur-media) var(--mov-entrada) var(--mov-atraso, 0ms),
              opacity var(--dur-media) var(--mov-entrada) var(--mov-atraso, 0ms);
}
@media (hover: hover) {
  .an-card:hover, .an-card:focus-within {
    box-shadow: var(--sombra-2); transform: translateY(-2px);
    transition: box-shadow var(--dur-curta) var(--mov-entrada),
                transform var(--dur-curta) var(--mov-entrada);
  }
  .an-card--cobalto:hover, .an-card--cobalto:focus-within { box-shadow: none; }
}
.an-card.an-estado-hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.an-card--cobalto.an-estado-hover { box-shadow: none; }

/* Badge · entra pelo canto de fala; largura já reservada pelo rótulo longo */
.an-badge {
  transform-origin: var(--origem-fala);
  transition: opacity var(--dur-curta) var(--mov-entrada) var(--mov-atraso, 0ms),
              transform var(--dur-curta) var(--mov-entrada) var(--mov-atraso, 0ms),
              background-color var(--dur-curta) var(--mov-toque),
              color var(--dur-curta) var(--mov-toque);
}
.js-movimento .an-revelar:not(.an-visivel) .an-badge {
  opacity: 0; transform: scale(var(--escala-entrada));
}

/* FAQ · o espaço abre primeiro, o texto entra depois ------------------- */
.an-faq__corpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-painel-saida) var(--mov-saida);
}
.an-faq__item.an-fechando .an-faq__corpo { grid-template-rows: 0fr; }
.an-faq__item.an-fechando .an-faq__resposta { opacity: 0; }
.an-faq__item[open]:not(.an-fechando) .an-faq__corpo,
.an-faq__item.an-abrindo:not(.an-fechando) .an-faq__corpo {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-painel) var(--mov-entrada);
}
.an-faq__corpo > * { overflow: hidden; }
.an-faq__resposta {
  opacity: 0;
  transition: opacity var(--dur-curta-saida) var(--mov-saida);
}
.an-faq__item[open]:not(.an-fechando) .an-faq__resposta {
  opacity: 1;
  transition: opacity var(--dur-curta) var(--mov-entrada) var(--mov-escada); /* 60 ms depois do espaço */
}
/* O sinal é desenhado, não é texto: girar o caractere "+" continua dando "+".
   Duas barras; a vertical encolhe a zero enquanto o conjunto gira 90°. */
.an-faq__pergunta::after {
  content: ""; flex: none; width: 14px; height: 14px; color: var(--cor-cobalto);
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform var(--dur-curta) var(--mov-entrada),
              background-size var(--dur-curta) var(--mov-entrada);
}
/* única rotação do sistema: funcional, de 90°, em ícone de estado */
.an-faq__item[open]:not(.an-fechando) .an-faq__pergunta::after {
  transform: rotate(90deg);
  background-size: 0px 2px, 2px 14px; /* some a barra que ficaria de pé; sobra a deitada */
}
.an-faq__item.an-fechando .an-faq__pergunta::after {
  transition: transform var(--dur-curta-saida) var(--mov-saida),
              background-size var(--dur-curta-saida) var(--mov-saida);
}

/* Checklist · a caixa preenche, o traço se desenha --------------------- */
.an-checklist__marca {
  transition: background-color var(--dur-toque) var(--mov-toque) var(--mov-atraso, 0ms),
              border-color var(--dur-toque) var(--mov-toque) var(--mov-atraso, 0ms);
}
.an-checklist__marca svg path {
  stroke-dasharray: 28; stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur-curta) var(--mov-entrada) calc(var(--mov-escada) + var(--mov-atraso, 0ms));
}
.js-movimento .an-revelar:not(.an-visivel) .an-checklist__marca svg path { stroke-dashoffset: 28; }
.js-movimento .an-revelar:not(.an-visivel) .an-checklist__item:not(.an-checklist__item--vazio) .an-checklist__marca {
  background: transparent; border-color: var(--cor-borda-vazia);
}
.an-checklist__item { transition: color var(--dur-curta) var(--mov-toque); }

/* Passo numerado · a linha chega primeiro, é o caminho ------------------ */
.an-passo::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0;
  border-left: 2px solid var(--cor-cobalto);
  transform-origin: 50% 0; transform: scaleY(1);
  transition: transform var(--dur-painel) var(--mov-percurso);
}
.an-passo { border-left-color: transparent; }
.an-passo:last-child::before { display: none; }
.js-movimento .an-revelar:not(.an-visivel) .an-passo::before { transform: scaleY(0); }
.an-passo__corpo, .an-passo__numero {
  transition: opacity var(--dur-media) var(--mov-entrada) var(--mov-atraso, 0ms),
              transform var(--dur-media) var(--mov-entrada) var(--mov-atraso, 0ms);
}
.js-movimento .an-revelar:not(.an-visivel) .an-passo__corpo,
.js-movimento .an-revelar:not(.an-visivel) .an-passo__numero {
  opacity: 0; transform: translateX(calc(var(--desloc-curto) * -1));
}

/* Bloco de dado · o balão cresce do canto reto ------------------------- */
.an-dado {
  transform-origin: var(--origem-fala);
  transition: opacity var(--dur-media) var(--mov-entrada),
              transform var(--dur-media) var(--mov-entrada);
}
.js-movimento .an-revelar:not(.an-visivel) .an-dado {
  opacity: 0; transform: scale(var(--escala-entrada));
}
.an-dado__fonte { transition: opacity var(--dur-curta) var(--mov-entrada) var(--dur-toque); }
.js-movimento .an-revelar:not(.an-visivel) .an-dado__fonte { opacity: 0; }

/* PCR e depoimento · entram como bloco, em escada quando são irmãos ------ */
.an-pcr__bloco, .an-depoimento {
  transition: opacity var(--dur-media) var(--mov-entrada) var(--mov-atraso, 0ms),
              transform var(--dur-media) var(--mov-entrada) var(--mov-atraso, 0ms);
}
.an-depoimento { transform-origin: var(--origem-fala); }
.js-movimento .an-revelar:not(.an-visivel) .an-pcr__bloco { opacity: 0; transform: translateY(var(--desloc-curto)); }
.js-movimento .an-revelar:not(.an-visivel) .an-depoimento { opacity: 0; transform: scale(var(--escala-entrada)); }

/* Rodapé · não anima na entrada. O CRECI é informação, não efeito. ------ */
.an-rodape__links a { position: relative; }
.an-rodape__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; /* 2 px abaixo do texto, dentro do padding */
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-toque) var(--mov-toque);
}
@media (hover: hover) { .an-rodape__links a:hover::after { transform: scaleX(1); } }
.an-rodape__links a:focus-visible::after, .an-rodape__links a.an-estado-hover::after { transform: scaleX(1); }
.an-rodape__links a:focus-visible, .an-rodape__links a.an-estado-foco { outline-color: var(--cor-rodape-link); }