/* ==========================================================================
   Diagnóstico de oportunidades (/diagnostico/) e início do diagnóstico
   (/diagnostico/iniciar/) · componentes C-36 a C-39 e sobrescritas locais
   Usa os tokens de base.css e as classes de secoes.css e componentes-ia.css.
   Estado sem JavaScript = estado final de cada cena. O JS (diagnostico.js)
   liga as classes de animação só no desktop, com movimento e sem pausa.
   ========================================================================== */

/* ---------- Formato do diagnóstico (decisão 26): variantes trocadas pelo painel ---------- */
html:not([data-formato="fides"]) [data-so="fides"] { display: none !important; }
html[data-formato="fides"] [data-so="agenda"] { display: none !important; }

/* Monograma da Fides (sem a imagem do avatar enquanto a licença do modelo estiver em aberto) */
.fides-mono {
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); color: #032420; font: 700 .68rem/1 var(--f-txt); letter-spacing: 0;
  box-shadow: 0 0 0 3px rgba(23, 191, 176, .16);
}
.fides-mono--mini { width: 14px; height: 14px; font-size: .46rem; margin-right: 5px; box-shadow: none; vertical-align: -2px; }
.fides-mono--grande { width: 52px; height: 52px; font-size: 1.35rem; box-shadow: 0 0 0 6px rgba(23, 191, 176, .14), 0 0 30px rgba(23, 191, 176, .35); }

/* ==========================================================================
   DIAG-01 · Hero com o percurso do diagnóstico (C-36)
   ========================================================================== */
.diag-rotulo { color: var(--azul-claro); margin-bottom: 18px; }
.diag-h1 { max-width: 15ch; font-size: clamp(2.3rem, 1.2rem + 2.8vw, 3.9rem); }
.diag-hero-topo { align-items: end; }

.perc {
  position: relative; margin: 64px 0 0;
  border: 1px solid var(--linha-2); border-radius: 18px; background: linear-gradient(180deg, var(--ink-1), rgba(10, 12, 16, .7));
  padding: 20px 24px 16px; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.perc-corpo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 18px; margin-top: 18px; }
.perc-lista { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-top: 30px; }

/* trilho dos momentos: os nós ficam sobre ele, acima das molduras */
.perc-linha {
  position: absolute; z-index: 1; left: 22px; right: 60px; top: 6px; height: 1.5px; margin-top: -.75px;
  background: var(--linha-2); pointer-events: none;
}
.perc-linha-cheia {
  position: absolute; inset: 0; background: var(--azul); transform-origin: 0 50%; transform: scaleX(var(--l-p, 1));
  transition: transform calc(.6s * var(--motion)) var(--ease-state);
}
.perc-mom {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 14px 14px 12px; border: 1px solid var(--linha-2); border-radius: 14px; background: var(--ink-1);
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state), border-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion));
  outline-offset: 4px;
}
.perc-cab { display: flex; align-items: baseline; gap: 8px; min-height: 1.3em; }
.perc-no {
  position: absolute; z-index: 2; left: 16px; top: -30px; width: 12px; height: 12px; border-radius: 3px;
  background: var(--azul); border: 1.5px solid var(--azul); box-shadow: 0 0 0 4px rgba(232, 80, 2, .14);
  transition: background-color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion));
}
.perc-num { color: var(--txt-3); font-size: .6rem; }
.perc-tit { font-weight: 600; font-size: .95rem; letter-spacing: -.01em; line-height: 1.3; }
.perc-cx { flex: 0 0 auto; min-height: 176px; border-radius: 10px; padding: 12px; background: var(--ink-2); border: 1px solid var(--linha); font-size: .76rem; line-height: 1.45; }
.perc-txt { margin-top: auto; font-size: .78rem; line-height: 1.45; color: var(--txt-3); }

/* 01 · formulário */
.perc-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.perc-campos div { display: grid; gap: 3px; min-width: 0; }
.perc-campo-largo { grid-column: 1 / -1; }
.perc-campos dt { font: 500 .5rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.perc-campos dd {
  margin: 0; min-height: 26px; padding: 5px 7px; border: 1px solid var(--linha-2); border-radius: 6px; background: var(--ink);
  color: var(--txt); font-size: .72rem; line-height: 1.35; overflow-wrap: anywhere;
  transition: color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion));
}
.perc-enviado {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 9px; border-radius: 999px;
  color: var(--azul-claro); border: 1px solid rgba(232, 80, 2, .45); background: rgba(232, 80, 2, .08); font-size: .54rem;
}
.perc-enviado svg, .perc-conf svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 02 · agenda */
.perc-dia { color: var(--txt-2); font-size: .54rem; margin-bottom: 10px; }
.perc-slots { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.perc-slots li {
  display: grid; place-items: center; height: 34px; border-radius: 8px; border: 1px solid var(--linha-2);
  font: 500 .74rem/1 var(--f-mono); color: var(--txt-2);
  transition: background-color calc(var(--dur-base) * var(--motion)), color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion));
}
.perc-slots .perc-slot-sim { background: var(--azul); border-color: var(--azul); color: var(--azul-ink); font-weight: 600; box-shadow: 0 10px 24px -14px rgba(232, 80, 2, .95); }
.perc-conf { display: flex; gap: 7px; align-items: flex-start; margin-top: 12px; color: var(--azul-claro); font-size: .72rem; line-height: 1.4; }
.perc-conf svg { margin-top: 2px; flex: none; }

/* 03 · conversa */
.perc-dur { color: var(--txt-2); font-size: .54rem; }
.perc-barra { display: block; position: relative; height: 4px; margin: 9px 0 12px; border-radius: 4px; background: var(--linha); overflow: hidden; }
.perc-barra i { position: absolute; inset: 0; background: var(--azul); transform-origin: 0 50%; transform: scaleX(1); transition: transform calc(1.5s * var(--motion)) cubic-bezier(.45, .05, .55, .95); }
.perc-partes { list-style: none; display: grid; gap: 7px; counter-reset: parte; }
.perc-partes li { position: relative; padding-left: 22px; color: var(--txt); transition: color calc(var(--dur-base) * var(--motion)); }
.perc-partes li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 13px; height: 13px; border-radius: 4px;
  border: 1.5px solid var(--azul); background: var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23070709' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
  transition: background-color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion));
}

/* 04 · o mapa em papel (e a leitura preliminar da variante da Fides) */
.perc-cx--papel { background: var(--papel); color: var(--papel-txt); border-color: transparent; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9); }
.perc-papel-tit { font-weight: 700; font-size: .86rem; letter-spacing: -.01em; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1.5px solid #15171b; }
.perc-fluxo { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 6px; margin: 10px 0 12px; }
.perc-fluxo li {
  position: relative; display: grid; place-items: center; text-align: center; min-height: 36px; padding: 6px 4px;
  border: 1.5px solid #15171b; border-radius: 6px; background: #fff; color: var(--papel-txt);
  font-size: .6rem; font-weight: 600; line-height: 1.2;
}
.perc-fluxo li[data-sinal]::after {
  content: attr(data-sinal); position: absolute; left: 50%; top: -8px; transform: translateX(-50%);
  font: 500 .42rem/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  padding: 2px 4px; border-radius: 3px; background: #e5483a; color: #fff;
}
.perc-fluxo li[data-sinal="repetição"]::after { background: #b07800; }
.perc-fluxo li[data-sinal="consulta"]::after { background: #b83e00; }
.perc-fluxo li[data-sinal="decisão"]::after { background: #c98a12; }
.perc-ops { list-style: none; display: grid; gap: 6px; }
.perc-ops li { padding-top: 6px; border-top: 1px solid rgba(21, 23, 27, .14); font-size: .66rem; font-weight: 600; line-height: 1.3; }
.perc-ops .mp-tipo { margin-bottom: 1px; }
.perc-aviso-ia { margin: -2px 0 10px; padding: 5px 7px; border: 1px dashed rgba(21, 23, 27, .35); border-radius: 5px; color: var(--papel-txt-2); font-size: .46rem; line-height: 1.5; }

/* variante da Fides: conversa, desenho e equipe */
.perc-falas { list-style: none; display: grid; gap: 7px; }
.perc-fala { display: grid; gap: 2px; padding: 6px 8px; border-radius: 10px; font-size: .68rem; line-height: 1.38; }
.perc-fala--fides { background: rgba(23, 191, 176, .08); border: 1px solid rgba(23, 191, 176, .32); border-top-left-radius: 3px; margin-right: 12px; }
.perc-fala--voce { background: rgba(232, 220, 194, .07); border: 1px solid rgba(232, 220, 194, .28); border-top-right-radius: 3px; margin-left: 12px; }
.perc-quem { display: inline-flex; align-items: center; font-size: .48rem; color: var(--txt-3); }
.perc-digita { display: none; gap: 4px; align-items: center; height: 14px; }
.perc-digita i, .fides-digita i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); animation: digita calc(1s * var(--motion)) ease-in-out infinite; }
.perc-digita i:nth-child(2), .fides-digita i:nth-child(2) { animation-delay: calc(.15s * var(--motion)); }
.perc-digita i:nth-child(3), .fides-digita i:nth-child(3) { animation-delay: calc(.3s * var(--motion)); }
@keyframes digita { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.perc-fala.digitando .perc-digita { display: inline-flex; }
.perc-fala.digitando .perc-fala-txt { display: none; }
.perc-cx--desenho { background: rgba(6, 7, 9, .6); }
.perc-fluxo--escuro { margin-top: 12px; }
.perc-fluxo--escuro li { background: var(--ink-1); border-color: var(--linha-3); color: var(--txt); border-width: 1px; }
.perc-cx--equipe { display: grid; align-content: start; gap: 10px; color: var(--txt); font-size: .8rem; }
.perc-equipe-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--areia); border: 1.5px solid rgba(232, 220, 194, .55); background: rgba(232, 220, 194, .08); }
.perc-equipe-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.perc-mom--pessoa .perc-no { background: var(--areia); border-color: var(--areia); box-shadow: 0 0 0 4px rgba(232, 220, 194, .16); }

/* portão "você decide" (aprovação como evento: espera, acende em âmbar e solta os raios) */
.perc-portao { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 0; }
.perc-portao-ic {
  position: relative; display: block; width: 14px; height: 14px; margin-top: -1px; transform: rotate(45deg); border-radius: 3px;
  background: var(--ambar); border: 1.5px solid var(--ambar); box-shadow: 0 0 16px rgba(255, 181, 71, .6);
  transition: background-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion));
}
.perc-portao-ic .raios { transform: rotate(-45deg); }
.perc-portao b { margin-top: 10px; color: var(--ambar); font-size: .56rem; transition: opacity calc(var(--dur-base) * var(--motion)); }
.perc-portao-txt { color: var(--txt-2); font-size: .8rem; line-height: 1.3; transition: opacity calc(var(--dur-base) * var(--motion)); }

.perc-tarefa {
  position: absolute; left: 0; top: 0; z-index: 4; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 2px;
  background: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .7); opacity: 0; pointer-events: none;
  transition: transform calc(.6s * var(--motion)) var(--ease-state), opacity calc(var(--dur-micro) * var(--motion));
}
.perc-tarefa.on { opacity: 1; }
.perc-tarefa.salta { transition: none; }

/* durante o percurso (classe ligada pelo JS): o que a tarefa ainda não alcançou fica apagado */
.perc--anima .perc-mom:not(.aceso) { opacity: .38; }
.perc--anima .perc-mom:not(.aceso) .perc-no { background: var(--ink); border-color: var(--linha-3); box-shadow: none; }
.perc--anima .perc-mom.aceso { border-color: rgba(232, 80, 2, .55); box-shadow: 0 0 0 1px rgba(232, 80, 2, .18), 0 20px 50px -30px rgba(232, 80, 2, .55); }
.perc--anima .perc-mom--pessoa.aceso { border-color: rgba(232, 220, 194, .55); box-shadow: 0 0 0 1px rgba(232, 220, 194, .16); }
.perc--anima [data-rev]:not([data-rev="estado"]):not(.vis) { opacity: 0; transform: translateY(5px); }
.perc--anima [data-rev]:not([data-rev="estado"]) { transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out); }
.perc--anima .perc-campos dd[data-rev]:not(.vis) { opacity: 1; transform: none; color: transparent; }
.perc--anima .perc-slots .perc-slot-sim:not(.vis) { background: transparent; border-color: var(--linha-2); color: var(--txt-2); box-shadow: none; font-weight: 500; }
.perc--anima .perc-barra i:not(.vis) { transform: scaleX(0); }
.perc--anima .perc-partes li:not(.vis) { color: var(--txt-3); }
.perc--anima .perc-partes li:not(.vis)::before { background-color: transparent; background-image: none; border-color: var(--linha-3); }
.perc--anima .perc-portao:not(.aberto) .perc-portao-ic { background: var(--ink); border-color: rgba(255, 181, 71, .45); box-shadow: none; }
.perc--anima .perc-portao:not(.aberto) b, .perc--anima .perc-portao:not(.aberto) .perc-portao-txt { opacity: .4; }
.perc--anima .perc-portao.espera .perc-portao-ic { border-color: var(--ambar); animation: espera-portao calc(.9s * var(--motion)) ease-in-out infinite; }
@keyframes espera-portao { 50% { box-shadow: 0 0 0 5px rgba(255, 181, 71, .2); } }

/* hover e foco: o momento mostra o estado final, mesmo antes de a tarefa chegar */
.perc-mom.ativo { opacity: 1 !important; border-color: rgba(232, 80, 2, .55); }
.perc-mom--pessoa.ativo { border-color: rgba(232, 220, 194, .55); }
.perc-mom.ativo .perc-no { background: var(--azul) !important; border-color: var(--azul) !important; }
.perc-mom--pessoa.ativo .perc-no { background: var(--areia) !important; border-color: var(--areia) !important; }
.perc-mom.ativo [data-rev] { opacity: 1 !important; transform: none !important; }
.perc-mom.ativo .perc-campos dd { color: var(--txt) !important; }
.perc-mom.ativo .perc-slots .perc-slot-sim { background: var(--azul) !important; border-color: var(--azul) !important; color: var(--azul-ink) !important; }
.perc-mom.ativo .perc-barra i { transform: none !important; }
.perc-mom.ativo .perc-partes li { color: var(--txt) !important; }
.perc-mom.ativo .perc-partes li::before { background-color: var(--azul) !important; border-color: var(--azul) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23070709' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-7.5'/%3E%3C/svg%3E") !important; }
.perc-mom.ativo .perc-fala .perc-digita { display: none !important; }
.perc-mom.ativo .perc-fala .perc-fala-txt { display: inline !important; }

@media (max-width: 1199px) {
  .perc-corpo { grid-template-columns: 1fr; }
  .perc-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }
  .perc-linha, .perc-tarefa, .perc-no { display: none; }
  .perc-portao { flex-direction: row; justify-content: flex-start; gap: 14px; padding-top: 14px; border-top: 1px dashed rgba(255, 181, 71, .45); }
  .perc-portao b { margin-top: 0; }
}
@media (max-width: 1023px) {
  .perc { margin-top: 44px; padding: 16px 14px 14px; }
  .perc-cx { min-height: 0; }
}
@media (max-width: 640px) {
  .perc-lista { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DIAG-02 · O que é: definição e a faixa do passo 1 (C-26, sem o selo)
   ========================================================================== */
.diag-def { max-width: 76ch; margin-bottom: 40px; }
.diag-uma .faixa-esq { padding-left: 0; }
.uma--anima .altf-pil--cobre:not(.vis) { opacity: .18; }
.uma--anima .altf-pil--fora:not(.vis) { opacity: 0; }
.diag-uma .faixa.ativo .altf-pil--cobre { opacity: 1 !important; }
.diag-uma .faixa.ativo .altf-pil--fora { opacity: .7 !important; }
.diag-uma .faixa.ativo .faixa-nome { color: #fff; }
.diag-notas { margin-top: 44px; }
.diag-notas li { outline-offset: -2px; }

/* ==========================================================================
   DIAG-03 · A conversa e o Mapa Operacional (C-27)
   ========================================================================== */
.diag-linha-fides { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--teal); }
.perguntas-nota { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--linha-2); color: var(--txt-3); font-size: .86rem; line-height: 1.55; }

/* ==========================================================================
   DIAG-04 · O que saber antes de marcar (agenda) e a matriz da Fides
   ========================================================================== */
.diag-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 0; }
.diag-ficha > div {
  position: relative; padding: 18px 0 18px 26px; border-top: 1px solid var(--linha-2); outline-offset: -2px;
  transition: border-color calc(var(--dur-micro) * var(--motion));
}
.diag-ficha > div::before {
  content: ""; position: absolute; left: 0; top: 27px; width: 12px; height: 1.5px; background: var(--azul);
  transition: width calc(var(--dur-micro) * var(--motion)) var(--ease-snappy);
}
.diag-ficha dt { color: var(--azul-claro); font-size: .6rem; }
.diag-ficha dd { margin: 6px 0 0; color: var(--txt-2); line-height: 1.6; max-width: 54ch; transition: color calc(var(--dur-micro) * var(--motion)); }
.diag-ficha > div.ativo { border-top-color: rgba(232, 80, 2, .5); }
.diag-ficha > div.ativo::before { width: 18px; }
.diag-ficha > div.ativo dd { color: var(--txt); }
.diag-acao { margin-top: 40px; }
.diag-matriz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.diag-matriz .matriz-grupo { padding: 16px 16px 10px; }
.diag-matriz .matriz-grupo dd { font-size: .92rem; padding-top: 8px; padding-bottom: 8px; cursor: default; }
.diag-matriz-linha { margin-top: 24px; color: var(--txt-2); }
.diag-matriz-linha a { color: var(--txt); font-weight: 600; text-underline-offset: 4px; }
@media (max-width: 1023px) {
  .diag-ficha { grid-template-columns: 1fr; }
  .diag-matriz { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DIAG-06 · O que vem depois (C-26): etiqueta "você está aqui"
   ========================================================================== */
.diag-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.tag--aqui { color: var(--azul-ink); background: var(--azul); border-color: var(--azul); }
@media (max-width: 1023px) { .diag-tags { justify-content: flex-start; } }

/* ==========================================================================
   DIAG-07 · O que fazemos com o que você conta (C-39, uso dos dados em faixas)
   ========================================================================== */
.dados-entra { max-width: 34ch; color: var(--txt-3); font-size: .88rem; line-height: 1.5; }
.dados-rot { color: var(--txt-3); font-size: .56rem; margin-bottom: -2px; }
.dados-rot:not(:first-child) { margin-top: 6px; }
.dados .altf-pil--hachura { position: relative; height: 40px; padding: 0 16px; font-size: .64rem; }
.dados .altf-pil--hachura[data-depois]::after {
  content: attr(data-depois); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
  white-space: nowrap; text-transform: none; letter-spacing: 0;
  font: 500 .74rem/1 var(--f-txt); color: var(--txt); background: var(--ink-3); border: 1px solid var(--linha-3);
  border-radius: 8px; padding: 7px 10px; opacity: 0; pointer-events: none;
  transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.dados .altf-pil--hachura[data-depois]:hover::after, .dados .altf-pil--hachura[data-depois]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.dados-conf { margin-top: 12px; }
/* aqui o "não usamos para" é informação, não etapa de fora: fica legível, com o risco em vermelho */
.dados .faixa-grupo .altf-pil--fora { opacity: .9; color: var(--txt-2); border-color: rgba(255, 107, 87, .28); text-decoration-color: rgba(255, 107, 87, .85); }
.dados .faixa-grupo .altf-pil--fora:hover, .dados .faixa-grupo .altf-pil--fora:focus-visible { opacity: 1; color: var(--txt); }
.dados--anima .faixa:not(.passou) { opacity: .34; }
.dados .faixa.ativo { opacity: 1 !important; }
.dados .faixa.ativo .faixa-nome { color: #fff; }

/* dado que falta na frase (fica à vista mesmo com as notas desligadas) */
.lacuna {
  display: inline-block; padding: 2px 7px; border: 1px dashed var(--linha-3); border-radius: 4px;
  font: 500 .62rem/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--txt-2); vertical-align: 1px;
}
.dados-linhas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; margin: 40px 0 0; }
.dados-linhas > div { padding: 16px 0; border-top: 1px solid var(--linha-2); }
.dados-linhas dt { color: var(--txt-3); font-size: .58rem; }
.dados-linhas dd { margin: 8px 0 0; color: var(--txt-2); line-height: 1.6; }
@media (max-width: 1023px) {
  .dados-linhas { grid-template-columns: 1fr; }
  .dados-entra { max-width: none; }
  .dados .altf-pil--hachura { height: 34px; padding: 0 12px; font-size: .6rem; }
}

/* ==========================================================================
   DIAG-09 · CTA final, com as duas entradas na variante da Fides
   ========================================================================== */
.diag-final-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.ia-final-in .diag-final-ctas .btn { margin-top: 0; }

/* ==========================================================================
   INI-01 · Cabeçalho do início do diagnóstico
   ========================================================================== */
.ini-topo { position: relative; overflow: hidden; padding: calc(var(--topo-h) + 56px) 0 48px; }
.ini-h1 { font: 600 clamp(2.1rem, 1.2rem + 2.4vw, 3.3rem)/1.05 var(--f-disp); letter-spacing: -.04em; text-wrap: balance; max-width: 18ch; }
.ini-sub { margin-top: 18px; max-width: 62ch; }
.ini-passos { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; counter-reset: passo; }
.ini-passo {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px;
  border: 1px solid var(--linha-2); border-radius: 999px; color: var(--txt-2); font-size: .9rem; outline-offset: 3px;
  transition: border-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion));
}
.ini-passo + .ini-passo::before { content: ""; position: absolute; right: 100%; top: 50%; width: 28px; height: 1px; background: var(--linha-2); }
.ini-passo-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--linha-3); color: var(--txt-2); font-size: .62rem; }
.ini-passo[aria-current="step"] { border-color: rgba(232, 80, 2, .6); color: var(--txt); }
.ini-passo[aria-current="step"] .ini-passo-num { background: var(--azul); border-color: var(--azul); color: var(--azul-ink); }
.ini-passo-balao {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 5; width: max-content; max-width: 240px;
  font-size: .8rem; line-height: 1.4; color: var(--txt); background: var(--ink-3); border: 1px solid var(--linha-3);
  border-radius: 10px; padding: 9px 12px; opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.ini-passo.ativo { border-color: var(--linha-3); color: var(--txt); }
.ini-passo.ativo .ini-passo-balao { opacity: 1; transform: none; }

.ini-abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; max-width: 920px; }
.ini-aba {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: center; text-align: left; cursor: pointer;
  padding: 18px 20px; border: 1px solid var(--linha-2); border-radius: 16px; background: var(--ink-1); color: var(--txt);
  transition: border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy);
}
.ini-aba:hover { border-color: var(--linha-3); transform: translateY(calc(-2px * var(--motion))); }
.ini-aba-ic { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha-2); }
.ini-aba-ic .fides-mono { width: 30px; height: 30px; font-size: .9rem; }
.ini-aba-ic--agenda { color: var(--azul-claro); }
.ini-aba-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ini-aba b { font-size: 1.08rem; letter-spacing: -.012em; }
.ini-aba-txt { color: var(--txt-2); font-size: .86rem; line-height: 1.4; }
.ini-aba[aria-selected="true"][data-aba="fides"] { border-color: rgba(23, 191, 176, .65); background: color-mix(in srgb, var(--teal) 7%, var(--ink-1)); }
.ini-aba[aria-selected="true"][data-aba="agendar"] { border-color: rgba(232, 80, 2, .65); background: color-mix(in srgb, var(--azul) 7%, var(--ink-1)); }
html[data-formato="fides"][data-aba="fides"] #agendar,
html[data-formato="fides"][data-aba="agendar"] #fides { display: none; }

/* ==========================================================================
   INI-02 · Formulário mapear_operacao (C-38)
   ========================================================================== */
.ini-sec { padding-top: clamp(40px, 5vw, 72px); }
.ini-grade { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ini-h2 { font: 600 clamp(1.4rem, 1.1rem + 1vw, 1.95rem)/1.2 var(--f-disp); letter-spacing: -.025em; margin-bottom: 24px; }

.form-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.campo { display: grid; gap: 7px; align-content: start; min-width: 0; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-size: .88rem; font-weight: 600; color: var(--txt); }
.campo-opc { font-weight: 400; color: var(--txt-3); }
.campo input:not([type="checkbox"]), .campo textarea {
  width: 100%; min-height: 48px; font: inherit; font-size: 1rem; color: var(--txt); background: var(--ink);
  border: 1px solid var(--linha-3); border-radius: 10px; padding: 12px 14px;
  transition: border-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.campo textarea { resize: vertical; line-height: 1.5; min-height: 112px; }
.campo input::placeholder, .campo textarea::placeholder { color: #6f7785; }
.campo input:hover, .campo textarea:hover { border-color: rgba(236, 238, 241, .4); }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.campo [aria-invalid="true"] { border-color: var(--sinal) !important; box-shadow: 0 0 0 3px rgba(255, 107, 87, .14); }
.campo-ajuda { font-size: .8rem; line-height: 1.45; color: var(--txt-3); }
.campo-rodape { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.campo-conta { flex: none; color: var(--txt-3); font-size: .56rem; }
.campo-conta.passou { color: var(--sinal); }
.campo-erro { font-size: .84rem; line-height: 1.45; color: #ff9385; }
.campo-erro::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 2px; background: var(--sinal); vertical-align: 1px; }
.campo--check { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.campo--check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--azul); cursor: pointer; }
.campo--check label { font-weight: 400; color: var(--txt-2); font-size: .9rem; line-height: 1.5; cursor: pointer; }
.campo--check label a { color: var(--txt); text-underline-offset: 3px; }
.campo--check .campo-erro { grid-column: 1 / -1; }
.campo--check input[aria-invalid="true"] { outline: 2px solid var(--sinal); outline-offset: 2px; }

.form-resumo { margin-bottom: 22px; padding: 14px 16px; border: 1px solid rgba(255, 107, 87, .5); border-radius: 12px; background: rgba(255, 107, 87, .07); }
.form-resumo:focus-visible { outline: 2px solid var(--sinal); outline-offset: 3px; }
.form-resumo-tit { font-weight: 600; }
.form-resumo ul { list-style: none; display: grid; gap: 4px; margin-top: 8px; }
.form-resumo a { color: #ffb3a8; text-underline-offset: 3px; font-size: .9rem; }
.form-base { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.form-micro { color: var(--txt-3); font-size: .86rem; max-width: 36ch; }
.form-falha { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(255, 107, 87, .5); border-radius: 12px; background: rgba(255, 107, 87, .07); line-height: 1.55; }
.form-falha a { color: var(--txt); font-weight: 600; text-underline-offset: 3px; }
.form-ok {
  display: grid; justify-items: start; gap: 10px; padding: 28px; border-radius: 16px;
  border: 1px solid rgba(232, 80, 2, .45); background: rgba(232, 80, 2, .06);
}
.form-ok[hidden] { display: none; }
.form-ok:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.form-ok-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--azul); color: var(--azul-ink); }
.form-ok-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.form-ok-ic path { stroke-dasharray: 20; stroke-dashoffset: 0; animation: ok-traco calc(.5s * var(--motion)) var(--ease-out) both .1s; }
@keyframes ok-traco { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
.form-ok-tit { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; }
.form-ok-txt { color: var(--txt-2); }

.ini-lateral { padding: 24px; border: 1px solid var(--linha-2); border-radius: 16px; background: var(--ink-1); }
.ini-lateral-tit { color: var(--azul-claro); margin-bottom: 8px; }
.ini-depois { list-style: none; }
.ini-depois li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: 12px 0; border-top: 1px solid var(--linha);
  color: var(--txt-2); line-height: 1.5; outline-offset: -2px; transition: color calc(var(--dur-micro) * var(--motion));
}
.ini-depois li:first-child { border-top: 0; }
.ini-depois li .mono { color: var(--azul-claro); padding-top: 3px; }
.ini-depois li:hover, .ini-depois li:focus-visible, .ini-depois li.ativo { color: var(--txt); }
.ini-lateral-link { margin-top: 14px; }
.ini-lateral-wa { margin-top: 16px; color: var(--txt-2); font-size: .92rem; }
.ini-lateral-wa a { color: var(--txt); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 1023px) {
  .ini-grade { grid-template-columns: 1fr; }
  .ini-topo { padding-top: calc(var(--topo-min) + 40px); }
  .ini-abas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form-campos { grid-template-columns: 1fr; }
  .ini-passos { gap: 8px; }
  .ini-passo + .ini-passo::before { display: none; }
  .ini-passo-balao { display: none; }
}

/* ==========================================================================
   INI-03 · Conversa com a Fides (C-37)
   ========================================================================== */
.fides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.fides-antes, .fides-janela {
  border: 1px solid rgba(23, 191, 176, .35); border-radius: 18px; padding: 24px;
  background: linear-gradient(180deg, rgba(23, 191, 176, .06), transparent 55%), var(--ink-1);
}
.fides-antes[hidden], .fides-janela[hidden], .fides-fim[hidden] { display: none; }
.fides-id { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.fides-nome { font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.fides-papel { color: var(--teal); font-size: .56rem; margin-top: 4px; }
.fides-regras { list-style: none; display: grid; gap: 10px; margin-bottom: 20px; }
.fides-regras li { position: relative; padding-left: 18px; color: var(--txt-2); line-height: 1.55; }
.fides-regras li::before { content: ""; position: absolute; left: 0; top: .58em; width: 7px; height: 7px; border-radius: 2px; background: var(--teal); }
.fides-aceite { margin-bottom: 18px; }
.fides-comecar { display: flex; flex-wrap: wrap; gap: 12px; }
.btn[disabled] { opacity: .42; cursor: not-allowed; pointer-events: none; }
.fides-motivo { margin-top: 10px; font-size: .84rem; color: var(--txt-3); }
.fides-motivo[hidden] { display: none; }
.fides-alt { margin-top: 18px; color: var(--txt-2); font-size: .92rem; line-height: 1.55; }
.fides-alt a { color: var(--txt); font-weight: 600; text-underline-offset: 3px; }

.fides-janela { padding: 16px 16px 18px; }
.fides-janela-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--linha); }
.fides-id--mini { margin: 0; gap: 10px; }
.fides-id--mini .fides-nome { font-size: .95rem; }
.fides-estado { display: inline-flex; align-items: center; gap: 7px; color: var(--teal); font-size: .56rem; }
.fides-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: acao-pulso calc(1.1s * var(--motion)) ease-in-out infinite; }
.fides-janela.fim .fides-estado { color: var(--azul-claro); }
.fides-janela.fim .fides-estado::before { animation: none; }
.fides-falas { list-style: none; display: flex; flex-direction: column; gap: 10px; max-height: 470px; overflow-y: auto; padding: 2px 6px 2px 2px; scroll-behavior: smooth; }
.fides-fala {
  max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.5; outline-offset: 2px;
  transition: box-shadow calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion));
}
.fides-fala p { margin: 0; }
.fides-fala--fides { align-self: flex-start; background: rgba(23, 191, 176, .08); border: 1px solid rgba(23, 191, 176, .3); border-top-left-radius: 4px; }
.fides-fala--voce { align-self: flex-end; background: rgba(232, 220, 194, .07); border: 1px solid rgba(232, 220, 194, .28); border-top-right-radius: 4px; }
.fides-quem { display: block; margin-bottom: 4px; color: var(--txt-3); font-size: .52rem; }
.fides-digita { display: none; gap: 5px; align-items: center; height: 20px; }
.fides-fala.digitando .fides-digita { display: inline-flex; }
.fides-fala.digitando p { display: none; }
.fides--anima .fides-fala:not(.vis) { display: none; }
.fides-fala.par, .fides-fala.ativo { box-shadow: 0 0 0 1px var(--azul-claro); }

.fides-rascunho { transform: none; padding: 22px 24px 20px; }
.fides-vazio { display: none; margin-top: 4px; padding: 9px 10px; border: 1.5px dashed rgba(21, 23, 27, .2); border-radius: 6px; text-align: center; color: var(--papel-txt-2); font-size: .74rem; }
.fides--anima .mapa-reg:not(.cheia) .fides-vazio { display: block; }
.fides--anima .mapa-reg:not(.cheia) .fides-preenche { display: none; }
.fides--anima .fides-rascunho [data-lote]:not(.vis) { display: none; }
.fides-rascunho .mapa-fluxo { flex-wrap: wrap; row-gap: 16px; margin: 14px 0 6px; }
.fides-rascunho .mf-cx { flex: 1 1 28%; font-size: .64rem; padding: 9px 6px; }
.fides-rascunho .mapa-reg.par { background: rgba(232, 80, 2, .07); }
.fides-rascunho .mapa-reg.acende { animation: fides-acende calc(1.2s * var(--motion)) var(--ease-out); }
@keyframes fides-acende { 0% { background: rgba(23, 191, 176, .28); } 100% { background: transparent; } }
.fides-aviso-ia { margin-top: 12px; padding-top: 10px; border-top: 1.5px dashed rgba(21, 23, 27, .25); color: var(--papel-txt-2); font-size: .5rem; line-height: 1.5; }
.fides--anima .fides-rascunho:not(.pronto) .fides-aviso-ia { display: none; }
.fides-rascunho.preparando { animation: acao-pulso calc(1s * var(--motion)) ease-in-out infinite; }

.fides-fim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); margin-top: 32px; padding-top: 30px; border-top: 1px solid var(--linha-2); }
.fides-fim-tit { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.fides-fim-txt > p:not(.fides-fim-tit):not(.fides-alt) { color: var(--txt-2); line-height: 1.6; }
.form-diag--curto .form-base { margin-top: 20px; }
@media (max-width: 1023px) {
  .fides, .fides-fim { grid-template-columns: 1fr; }
  .fides-falas { max-height: none; }
}

/* ---------- Painel do protótipo: a linha "Formato" ocupa a largura toda ---------- */
.proto-linha--formato { flex-direction: column; align-items: flex-start; gap: 8px; }
.proto-linha--formato .proto-seg { flex-wrap: wrap; }
.dados-legenda .altf-pil--fora { opacity: .9; color: var(--txt-2); border-color: rgba(255, 107, 87, .28); text-decoration-color: rgba(255, 107, 87, .85); }
/* capturas (Chrome sem janela): o traço do ícone de sucesso não segue o tempo virtual */
html.captura .form-ok-ic path { animation: none; }
/* o rascunho usa os tamanhos do mapa grande da COMO-03, sem a posição fixa */
.fides-rascunho .mapa-tit { font-size: 1.2rem; }
.fides-rascunho .mapa-sub, .fides-rascunho .mapa-proc, .fides-rascunho .mapa-h { font-size: .56rem; }
.fides-rascunho .mapa-prio { font-size: .74rem; }
.fides-rascunho .mapa-prio thead th { font-size: .5rem; }
/* capturas: sem rolagem suave e sem o brilho de preenchimento, que não seguem o tempo virtual */
html.captura .fides-falas { scroll-behavior: auto; }
html.captura .fides-rascunho .mapa-reg.acende { animation: none; }