/* ==========================================================================
   Sistema · páginas de obrigado e 404, e o trajeto do envio compartilhado com /contato/
   C-56 (trajeto do envio), C-58 (agenda da conversa) e C-59 (leitura do endereço).
   Copy e movimento: 06-estrutura/sistema.md e 06-estrutura/contato.md.
   Usa os tokens de base.css e as classes de secoes.css e componentes-ia.css.
   Sem JavaScript, ou com movimento reduzido, cada cena fica no estado final.
   ========================================================================== */

.pagina-contato [hidden], .pagina-sistema [hidden] { display: none !important; }

/* Cor por frente e por papel (a mesma semântica das cenas da home) */
[data-cor="ia"] { --c: var(--teal); --c-claro: #5fd9cd; }
[data-cor="ss"] { --c: var(--azul); --c-claro: var(--azul-claro); }
[data-cor="pessoa"] { --c: var(--areia); --c-claro: #f3ead6; }
[data-cor="sinal"] { --c: var(--sinal); --c-claro: #ff9a8b; }
[data-cor="aco"] { --c: var(--aco); --c-claro: #b9c2d0; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn[disabled]::after { display: none; }

/* ==========================================================================
   C-56 · Trajeto do envio
   Lista ordenada com os passos depois do envio. A linha, a parte cheia e a
   tarefa branca são decorativas e ficam fora da lista (.traj-palco).
   ========================================================================== */

.traj-bloco { margin-top: 26px; }
.traj-rot { color: var(--txt-3); margin-bottom: 4px; }

.traj-palco { position: relative; --no: 16px; --topo: 30px; }
.traj {
  list-style: none; position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: 16px;
  padding-top: var(--topo);
}
.traj-passo {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding-right: 12px; border-radius: 8px; outline-offset: 6px;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state);
}
.traj-passo[data-tipo="voce"] { --c: var(--azul); }
.traj-passo[data-tipo="equipe"] { --c: var(--areia); }
.traj-passo[data-tipo="entrega"] { --c: var(--aco); }
.traj-passo[data-tipo="mapa"], .traj-passo[data-tipo="ia"] { --c: var(--teal); }
.traj-passo[data-tipo="urgencia"] { --c: var(--sinal); }
.traj-passo[data-tipo="decide"] { --c: var(--ambar); }

.traj-no {
  position: relative; flex: none; width: var(--no); height: var(--no); margin-bottom: 9px; border-radius: 5px;
  background: var(--ink); border: 2px solid color-mix(in srgb, var(--c) 70%, transparent);
  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));
}
.traj-passo[data-tipo="decide"] .traj-no { width: 15px; height: 15px; border-radius: 3px; transform: rotate(45deg); border-width: 1.5px; }
.traj-nome { font-weight: 600; font-size: .95rem; line-height: 1.3; letter-spacing: -.012em; color: var(--txt); }
.traj-txt { font-size: .82rem; line-height: 1.45; color: var(--txt-2); max-width: 26ch; }
.traj-agora {
  position: absolute; left: -2px; top: calc(-1 * var(--topo) + 2px); white-space: nowrap;
  font: 500 .56rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--c); padding: 5px 7px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, var(--ink));
}
.traj-prev { display: block; margin-top: 2px; font: 500 .62rem/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--azul-claro); }
.traj-prev:empty { display: none; }

/* passo feito: cheio de azul, com o visto */
.traj-passo.feito .traj-no { background: var(--azul); border-color: var(--azul); }
.traj-passo.feito .traj-no::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--azul-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.traj-passo.feito .traj-nome { color: var(--txt-2); }

/* próximo passo: aceso na cor dele, pulsando devagar */
.traj-passo.atual .traj-no { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent); animation: traj-pulso calc(2.4s * var(--motion)) ease-in-out infinite; }
.traj-passo[data-tipo="decide"].atual .traj-no, .traj-passo[data-tipo="decide"].aceso .traj-no { background: var(--ambar); border-color: var(--ambar); box-shadow: 0 0 16px rgba(255, 181, 71, .55); }
@keyframes traj-pulso { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--c) 4%, transparent); } }
html.movimento-reduzido .traj-passo.atual .traj-no, html[data-pausa="1"] .traj-passo.atual .traj-no { animation: none; }

/* passos que ainda não chegaram */
.traj--progresso .traj-passo:not(.feito):not(.atual) { opacity: .55; }
.traj--progresso .traj-passo:not(.feito):not(.atual) .traj-no { background: var(--ink); }

/* hover e foco: o passo acende inteiro, mesmo antes de a tarefa chegar */
.traj-passo.ativo { opacity: 1 !important; }
.traj-passo.ativo .traj-no { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.traj-passo.ativo .traj-txt { color: var(--txt); }

/* linha, parte cheia e tarefa (posições calculadas pelo JS a partir dos nós) */
.traj-linha {
  position: absolute; z-index: 1; height: 2px; margin-top: -1px;
  top: var(--ly, calc(var(--topo) + var(--no) / 2)); left: var(--lx, calc(var(--no) / 2)); width: var(--larg, calc(100% - 80px));
  background: var(--linha-2);
}
.traj-cheia {
  position: absolute; left: 0; top: 0; height: 100%; width: var(--cheia, 0px); background: var(--azul);
  transition: width calc(.7s * var(--motion)) var(--ease-state);
}
.traj-tarefa {
  position: absolute; z-index: 4; left: var(--tx, 8px); top: var(--ly, calc(var(--topo) + var(--no) / 2));
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 2px; background: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, .7); pointer-events: none; opacity: 0;
  transition: left calc(.7s * var(--motion)) var(--ease-state), opacity calc(var(--dur-micro) * var(--motion));
}
.traj-palco.com-tarefa .traj-tarefa { opacity: 1; }
.traj-palco.sem-anima .traj-cheia, .traj-palco.sem-anima .traj-tarefa { transition: none; }
.traj-passo[data-tipo="decide"] .raios { left: 50%; top: 50%; transform: rotate(-45deg); }

/* versão compacta (linha de baixo do roteador na /contato/): só os nomes, acendendo em sequência */
.traj-palco--compacto { --no: 12px; --topo: 0px; }
.traj-palco--compacto .traj { column-gap: 10px; }
.traj-palco--compacto .traj-no { margin-bottom: 8px; border-radius: 4px; }
.traj-palco--compacto .traj-passo[data-tipo="decide"] .traj-no { width: 11px; height: 11px; }
.traj-palco--compacto .traj-nome { font-size: .76rem; font-weight: 500; color: var(--txt-2); line-height: 1.32; }
.traj-palco--compacto .traj-passo { opacity: .35; padding-right: 4px; }
.traj-palco--compacto .traj-passo.aceso { opacity: 1; }
.traj-palco--compacto .traj-passo.aceso .traj-no { background: var(--c); border-color: var(--c); }
.traj-palco--compacto .traj-passo.aceso .traj-nome { color: var(--txt); }
.traj-palco--compacto .traj-passo:nth-child(2) { transition-delay: calc(90ms * var(--motion)); }
.traj-palco--compacto .traj-passo:nth-child(3) { transition-delay: calc(180ms * var(--motion)); }
.traj-palco--compacto .traj-passo:nth-child(4) { transition-delay: calc(270ms * var(--motion)); }
.traj-palco--compacto .traj-passo:nth-child(5) { transition-delay: calc(360ms * var(--motion)); }
.traj-palco--compacto .traj-passo:nth-child(6) { transition-delay: calc(450ms * var(--motion)); }
.traj-palco--compacto .traj-passo .traj-no { transition-delay: inherit; }
.traj-palco--compacto .traj-cheia { transition-duration: calc(.55s * var(--motion)); }

@media (max-width: 1023px) {
  /* lista vertical: a linha desce pela esquerda; sem tarefa e sem parte cheia */
  .traj-palco { --topo: 0px; }
  .traj { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: 0; }
  .traj-passo { padding: 0 0 20px 34px; }
  .traj-no { position: absolute; left: 0; top: 2px; margin: 0; }
  .traj-passo[data-tipo="decide"] .traj-no { left: 1px; }
  .traj-txt { max-width: none; }
  .traj-agora { position: static; align-self: flex-start; order: -1; margin-bottom: 4px; }
  .traj-agora ~ .traj-no { top: 27px; }
  .traj-linha { left: 7px; top: 10px; bottom: 28px; width: 2px !important; height: auto; margin: 0; }
  .traj-cheia, .traj-tarefa { display: none; }
  .traj-palco--compacto { display: none; }
}

/* ==========================================================================
   Páginas de obrigado (OBR-01 a OBR-03)
   ========================================================================== */

.obr-hero { padding-bottom: 48px; }
.pagina-obrigado .secao { padding: clamp(72px, 8vw, 120px) 0; }
.obr-topo { position: relative; max-width: 860px; }
.obr-h1 { display: flex; align-items: flex-start; gap: 18px; max-width: none; font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.6rem); }
.obr-selo { flex: none; width: clamp(40px, 3.4vw, 54px); height: clamp(40px, 3.4vw, 54px); margin-top: .06em; color: var(--azul); }
.obr-selo svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.obr-selo .obr-selo-aro { stroke-opacity: .45; }
.js:not(.movimento-reduzido) .obr-selo .obr-selo-aro { stroke-dasharray: 1; stroke-dashoffset: 1; animation: obr-desenha calc(.9s * var(--motion)) var(--ease-out) .15s forwards; }
.js:not(.movimento-reduzido) .obr-selo .obr-selo-ok { stroke-dasharray: 1; stroke-dashoffset: 1; animation: obr-desenha calc(.5s * var(--motion)) var(--ease-out) .75s forwards; }
html[data-pausa="1"] .obr-selo path, html[data-pausa="1"] .obr-selo circle,
html.captura .obr-selo path, html.captura .obr-selo circle { animation: none !important; stroke-dashoffset: 0 !important; }
@keyframes obr-desenha { to { stroke-dashoffset: 0; } }
.obr-hero .hero-sub { max-width: 64ch; }
.obr-traj { margin-top: 56px; padding: 26px 28px 8px; border: 1px solid var(--linha-2); border-radius: 18px; background: linear-gradient(180deg, var(--ink-1), rgba(10, 12, 16, .6)); }
.obr-traj .traj-rot { margin-bottom: 18px; }
.obr-traj .traj-palco { --topo: 34px; }
.obr-traj .traj-nome { font-size: 1.02rem; }
.obr-traj .traj-txt { font-size: .86rem; }

/* variações por parâmetro (?tipo= e ?variacao=), aplicadas antes do primeiro paint */
html[data-tipo="padrao"] [data-v]:not([data-v~="padrao"]),
html[data-tipo="site"] [data-v]:not([data-v~="site"]),
html[data-tipo="software"] [data-v]:not([data-v~="software"]),
html[data-tipo="sustentacao"] [data-v]:not([data-v~="sustentacao"]),
html[data-tipo="urgencia"] [data-v]:not([data-v~="urgencia"]),
html[data-tipo="outro"] [data-v]:not([data-v~="outro"]),
html[data-variacao="a"] [data-var]:not([data-var~="a"]),
html[data-variacao="b"] [data-var]:not([data-var~="b"]) { display: none !important; }

.proto-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.proto-vars a {
  font: 500 .72rem/1 var(--f-txt); color: #e7deff; text-decoration: none;
  border: 1px solid rgba(183, 156, 255, .45); border-radius: 999px; padding: 6px 10px;
}
.proto-vars a[aria-current="true"] { background: var(--proto); color: #140b2e; border-color: var(--proto); }

.secao.obr-compacta { padding: clamp(64px, 7vw, 104px) 0; }
.obr-compacta .ia-topo, .obr-compacto { margin-bottom: 0; }
.ia-topo p a, .obr-link { color: var(--txt); font-weight: 600; text-underline-offset: 4px; }
.obr-h3 { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); letter-spacing: -.02em; margin-bottom: 14px; }
.obr-dois .h2 { margin-bottom: 4px; }
.obr-dois { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.obr-lista { list-style: none; border-top: 1px solid var(--linha-2); }
.obr-lista li {
  position: relative; padding: 15px 0 15px 32px; border-bottom: 1px solid var(--linha); color: var(--txt-2); line-height: 1.55;
  transition: color calc(var(--dur-micro) * var(--motion));
}
.obr-lista li::before {
  content: ""; position: absolute; left: 2px; top: 21px; width: 12px; height: 12px; border-radius: 3px;
  border: 1.5px solid var(--linha-3); transition: border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion));
}
.obr-lista li:hover, .obr-lista li.ativo { color: var(--txt); }
.obr-lista li:hover::before, .obr-lista li.ativo::before { border-color: var(--azul); background: rgba(232, 80, 2, .18); }
.obr-nota { margin-top: 20px; color: var(--txt-3); font-size: .92rem; line-height: 1.6; max-width: 60ch; }
.obr-nota a { color: var(--txt); font-weight: 600; text-underline-offset: 4px; }
.obr-aviso {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(255, 181, 71, .4); background: rgba(255, 181, 71, .05); color: var(--txt-2); font-size: .92rem; line-height: 1.55;
}
.obr-aviso svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--ambar); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* urgência: o WhatsApp em destaque */
.obr-urg { padding: clamp(24px, 3vw, 36px); border-radius: 18px; border: 1px solid rgba(255, 107, 87, .45); background: linear-gradient(160deg, rgba(255, 107, 87, .08), rgba(255, 107, 87, .02)); }
.obr-urg h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); letter-spacing: -.03em; }
.obr-urg p { margin-top: 12px; color: var(--txt-2); max-width: 56ch; line-height: 1.6; }
.obr-urg .hero-ctas { margin-top: 22px; }
.obr-urg-dicas { margin-top: 30px; }
.obr-urg-dicas .mono { color: var(--txt-3); margin-bottom: 10px; display: block; }

/* análise do diagnóstico de SEO: pílulas rotuladas */
.obr-pilulas { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.obr-pilulas .altf-pil { height: 44px; padding: 0 18px; font-size: .64rem; transition: background-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion)); }
.obr-pilulas .altf-pil:hover, .obr-pilulas .altf-pil.ativo { box-shadow: 0 0 0 1px var(--azul-claro); background: #2c2e31; }

/* links do "Enquanto isso": cartões do C-23 com a cor da frente */
.obr-cartoes { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.obr-cartoes .ia-cartao h3 { font-size: 1.05rem; }
.obr-cartoes .mono { color: var(--c-claro, var(--txt-3)); }
@media (max-width: 1180px) { .obr-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .obr-cartoes { grid-template-columns: minmax(0, 1fr); } }
.obr-frentes .frente-links { margin-top: 0; }
.obr-mais { margin-top: 26px; }

@media (max-width: 1023px) {
  .obr-dois { grid-template-columns: minmax(0, 1fr); }
  .obr-traj { padding: 20px 18px 4px; margin-top: 40px; }
}

/* ==========================================================================
   C-58 · Agenda da conversa (OBR-02 do diagnóstico, variação A)
   ========================================================================== */

.agenda { position: relative; border: 1px solid var(--linha-2); border-radius: 18px; background: var(--ink-1); padding: 22px 22px 20px; }
.agenda { transition: border-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion)); }
.agenda.ativo { border-color: rgba(232, 80, 2, .6); box-shadow: 0 0 0 4px rgba(232, 80, 2, .08); }
.agenda-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.agenda-topo .mono { color: var(--txt-3); }
.agenda-dias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.agenda-dia {
  display: grid; justify-items: center; gap: 2px; padding: 12px 6px; cursor: pointer;
  border: 1px solid var(--linha-2); border-radius: 12px; background: var(--ink-2); color: var(--txt-2);
  transition: border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion));
}
.agenda-dia b { font-size: 1.35rem; line-height: 1.1; color: var(--txt); letter-spacing: -.02em; }
.agenda-dia span { font-size: .72rem; }
.agenda-dia .mono { font-size: .58rem; }
.agenda-dia:hover { border-color: var(--linha-3); color: var(--txt); }
.agenda-dia[aria-selected="true"] { border-color: var(--azul); background: rgba(232, 80, 2, .1); color: var(--txt); }
.agenda-horas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.agenda-hora {
  position: relative; height: 46px; cursor: pointer; border-radius: 10px; border: 1px solid var(--linha-2); background: none;
  font: 600 .95rem/1 var(--f-txt); color: var(--txt); font-variant-numeric: tabular-nums;
  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);
}
.agenda-hora:hover:not([disabled]), .agenda-hora.ativo { border-color: var(--azul-claro); background: rgba(232, 80, 2, .07); transform: translateY(calc(-2px * var(--motion))); }
.agenda-hora[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--azul-ink); }
.agenda-hora[disabled] { cursor: not-allowed; color: var(--txt-3); text-decoration: line-through; opacity: .5; }
.agenda-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); }
.agenda-escolha { color: var(--txt-2); font-size: .9rem; }
.agenda-ok {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; padding: 16px 18px; border-radius: 12px;
  border: 1px solid rgba(232, 80, 2, .45); background: rgba(232, 80, 2, .07); line-height: 1.55;
}
.agenda-ok svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--azul-claro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.agenda-ok b { color: var(--txt); }
.agenda-ok p + p { margin-top: 4px; color: var(--txt-2); font-size: .9rem; }
.agenda--feita .agenda-dias, .agenda--feita .agenda-horas, .agenda--feita .agenda-base { opacity: .4; pointer-events: none; }
.agenda-horas.entra .agenda-hora { animation: agenda-entra calc(var(--dur-base) * var(--motion)) var(--ease-out) both; }
.agenda-horas.entra .agenda-hora:nth-child(2) { animation-delay: calc(40ms * var(--motion)); }
.agenda-horas.entra .agenda-hora:nth-child(3) { animation-delay: calc(80ms * var(--motion)); }
.agenda-horas.entra .agenda-hora:nth-child(4) { animation-delay: calc(120ms * var(--motion)); }
.agenda-horas.entra .agenda-hora:nth-child(5) { animation-delay: calc(160ms * var(--motion)); }
.agenda-horas.entra .agenda-hora:nth-child(6) { animation-delay: calc(200ms * var(--motion)); }
@keyframes agenda-entra { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 560px) {
  .agenda { padding: 18px 14px 16px; }
  .agenda-dias { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .agenda-dia { flex: 0 0 74px; }
  .agenda-horas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* formato com a Fides (variação B): a mesma agenda, com a linha que lembra a conversa com ela */
.obr-fides { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--teal); }
.obr-fides a { color: var(--txt); font-weight: 600; text-underline-offset: 4px; }

/* ==========================================================================
   404 · ERRO-01 a ERRO-03 e C-59 (leitura do endereço)
   ========================================================================== */

.erro-hero { padding-bottom: 72px; }
.erro-topo { max-width: 820px; }
.erro-cod { color: var(--txt-3); margin-bottom: 16px; }
.erro-h1 { max-width: 15ch; font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.8rem); }

.leitura {
  position: relative; margin-top: 52px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0;
  border: 1px solid var(--linha-2); border-radius: 18px; background: linear-gradient(180deg, var(--ink-1), rgba(10, 12, 16, .7));
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.no-js .leitura { display: none; }
.leitura-end, .leitura-sug { padding: 24px 26px 26px; }
.leitura-sug { border-left: 1px solid var(--linha-2); }
.leitura-rot { color: var(--txt-3); margin-bottom: 14px; }
.leitura-pilulas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; font-family: var(--f-mono); }
.lt-dominio { font-size: .72rem; color: var(--txt-3); margin-right: 2px; }
.lt-sep { font-size: .82rem; color: var(--txt-3); }
.lt-pil {
  display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border-radius: 999px;
  font: 500 .74rem/1 var(--f-mono); letter-spacing: .02em; color: var(--txt-3);
  border: 1px solid var(--linha-2); background: var(--ink-2);
  transition: color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)), background-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-micro) * var(--motion)) var(--ease-out);
}
.lt-pil--leve { opacity: .55; border-style: dashed; }
.lt-pil.bate { color: var(--c-claro); border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 11%, var(--ink-2)); }
.lt-pil.lendo { box-shadow: 0 0 0 2px var(--azul-claro), 0 0 18px rgba(255, 122, 51, .45); color: var(--txt); }
.lt-pil.par { box-shadow: 0 0 0 2px var(--c-claro, var(--azul-claro)); color: var(--txt); transform: translateY(calc(-2px * var(--motion))); }
.leitura.com-par .lt-pil:not(.par) { opacity: .4; }
.leitura--anima .lt-pil:not(.mostra), .leitura--anima .lt-sep:not(.mostra) { opacity: 0; transform: translateY(4px); }
.leitura--anima .lt-sug:not(.mostra) { opacity: 0; transform: translateY(8px); }
.leitura-texto { margin-top: 18px; font-size: .82rem; line-height: 1.55; color: var(--txt-3); }

.leitura-lista { list-style: none; display: grid; gap: 10px; }
.lt-sug {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  padding: 14px 16px; border-radius: 12px; border: 1px solid var(--linha-2); background: var(--ink-2);
  text-decoration: none; color: inherit;
  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), opacity calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.lt-sug-frente { grid-column: 1; font: 500 .56rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-claro); }
.lt-sug-nome { grid-column: 1; font-weight: 600; font-size: 1rem; letter-spacing: -.012em; color: var(--txt); }
.lt-sug-por { grid-column: 1; font-size: .8rem; color: var(--txt-3); }
.lt-sug-por code { font: 500 .66rem/1 var(--f-mono); color: var(--txt-2); background: rgba(236, 238, 241, .06); border-radius: 4px; padding: 2px 5px; margin-left: 2px; }
.lt-sug svg { grid-column: 2; grid-row: 1 / span 3; width: 16px; height: 16px; fill: none; stroke: var(--txt-3); stroke-width: 1.8; transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy), stroke calc(var(--dur-micro) * var(--motion)); }
.lt-sug:hover, .lt-sug:focus-visible, .lt-sug.par { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 6%, var(--ink-2)); transform: translateY(calc(-2px * var(--motion))); }
.lt-sug:hover svg, .lt-sug:focus-visible svg, .lt-sug.par svg { transform: translateX(3px); stroke: var(--txt); }
.leitura.com-par .lt-sug:not(.par) { opacity: .45; }

@media (max-width: 1023px) {
  .leitura { grid-template-columns: minmax(0, 1fr); }
  .leitura-sug { border-left: 0; border-top: 1px solid var(--linha-2); }
  .leitura-end, .leitura-sug { padding: 20px 18px; }
}

/* ERRO-02 · busca */
.busca-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.busca-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.busca-form label { grid-column: 1 / -1; font-size: .86rem; font-weight: 500; color: var(--txt-2); }
.busca-form input {
  height: 54px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 1rem; color: var(--txt);
  background: var(--ink); border: 1px solid var(--linha-3);
}
.busca-form input:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.busca-form .btn { height: 54px; }
.busca-endereco { margin-top: 16px; color: var(--txt-3); font-size: .92rem; }
.busca-endereco a { color: var(--txt); font-weight: 600; text-underline-offset: 4px; }
.busca-endereco code { font: 500 .78rem/1 var(--f-mono); }
@media (max-width: 1023px) { .busca-in { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 560px) { .busca-form { grid-template-columns: minmax(0, 1fr); } .busca-form .btn { width: 100%; } }

/* ERRO-03 · caminhos principais */
.erro-util { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.erro-util a {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--linha-2); color: var(--txt-2); text-decoration: none; font-size: .9rem;
  transition: border-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion));
}
.erro-util a:hover, .erro-util a:focus-visible { border-color: var(--linha-3); color: var(--txt); }
.erro-fim { margin-top: 26px; color: var(--txt-3); font-size: .92rem; }
.erro-fim a { color: var(--txt-2); font-weight: 600; text-underline-offset: 4px; }
.frentes-grade--erro { margin-top: 40px; }
.frentes-grade--erro .frente-links li:first-child a { border-top: 0; }

/* capturas do protótipo (?captura=1): sem as animações de entrada, que não seguem o tempo virtual do Chrome sem janela */
html.captura .agenda-horas.entra .agenda-hora { animation: none; }

/* cartões de link (C-23): a seta também anda no foco do teclado, como no hover */
.ia-cartao:focus-visible .ia-cartao-seta svg { transform: translateX(3px); }