/* ==========================================================================
   SEO para empresas (/seo-para-empresas/) · componentes C-50 a C-54
   e a versão de três colunas do guia em faixas (C-30).
   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 (seo-para-empresas.js)
   liga as classes de animação só no desktop, com movimento e sem pausa.
   ========================================================================== */

/* Cor de quem resolve cada achado (a semântica das cenas):
   aço = engenharia (sistemas e software), âmbar = texto que passa por aprovação,
   azul = medição (integração com o GA4). O achado aberto é sempre vermelho. */
[data-tipo="tecnico"] { --c: var(--aco); --c-claro: #b9c2d0; }
[data-tipo="texto"] { --c: var(--ambar); --c-claro: #ffcb7d; }
[data-tipo="medicao"] { --c: var(--azul); --c-claro: var(--azul-claro); }

.seo-h1 { max-width: 12ch; font-size: clamp(2.4rem, 1.2rem + 3vw, 4rem); }

/* ==========================================================================
   SEO-01 · Hero com a auditoria ao vivo (C-50)
   ========================================================================== */

.aud {
  --t-troca: calc(var(--dur-base) * var(--motion));
  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);
}
.aud-topo { margin-bottom: 18px; }
.aud-topo .classe-proc { margin-right: auto; }
.aud-estado { display: inline-flex; align-items: center; gap: 8px; color: var(--txt-2); font-size: .58rem; }
.aud-estado i { width: 7px; height: 7px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 4px rgba(232, 80, 2, .14); }
.aud[data-fase="lendo"] .aud-estado i { background: var(--azul-claro); animation: aud-pulsa calc(1s * var(--motion)) ease-in-out infinite; }
.aud[data-fase="corrigindo"] .aud-estado i { background: var(--aco); box-shadow: 0 0 0 4px rgba(142, 153, 171, .16); }
.aud[data-fase="aprovacao"] .aud-estado i { background: var(--ambar); box-shadow: 0 0 0 4px rgba(255, 181, 71, .18); animation: aud-pulsa calc(1.2s * var(--motion)) ease-in-out infinite; }
@keyframes aud-pulsa { 50% { opacity: .35; } }

.aud-palco { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }

/* ---------- Página de exemplo (decorativa) ---------- */
.aud-pag { position: relative; }
.aud-rotulo { font-size: .52rem; color: #5f6368; margin-bottom: 8px; }

.aud-el { position: relative; border-radius: 7px; outline: 1.5px solid transparent; outline-offset: 3px; transition: outline-color calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-micro) * var(--motion)); }
.aud-pino {
  position: absolute; z-index: 3; right: -9px; top: -10px; min-width: 24px; height: 18px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-size: .5rem; letter-spacing: .04em; color: #0b0d12; background: var(--c);
  box-shadow: 0 0 0 3px rgba(6, 7, 9, .55);
  transition: background-color calc(var(--dur-base) * var(--motion)), opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) cubic-bezier(.34, 1.56, .64, 1);
}

/* resultado no Google */
.aud-serp {
  padding: 10px 14px 12px; margin-bottom: 12px; border-radius: 12px; background: #fff; color: #202124;
  font-family: Arial, "Helvetica Neue", var(--f-txt);
}
.aud-serp-site { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.aud-serp-site i { width: 22px; height: 22px; border-radius: 50%; flex: none; background: #e8eaed; border: 1px solid #dadce0; }
.aud-serp-site > span { display: grid; line-height: 1.25; }
.aud-serp-site b { font-size: .8rem; font-weight: 400; color: #202124; }
.aud-serp-site .mono { font-family: Arial, sans-serif; font-size: .7rem; letter-spacing: 0; text-transform: none; color: #4d5156; }
.aud-serp-tit { display: grid; font-size: .98rem; line-height: 1.3; color: #1a0dab; }
.aud-serp-desc { display: grid; margin-top: 3px; font-size: .74rem; line-height: 1.45; color: #4d5156; }
.aud-serp-desc .antes { color: #70757a; }

/* navegador */
.aud-nav { border: 1px solid var(--linha-2); border-radius: 12px; overflow: hidden; background: var(--ink-2); }
.aud-nav-barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--linha); }
.aud-nav-barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--linha-3); }
.aud-nav-barra .mono { margin-left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(236, 238, 241, .05); color: var(--txt-3); font-size: .54rem; letter-spacing: .02em; text-transform: none; }
.aud-codigo { display: grid; gap: 4px; padding: 10px 14px; background: #0b0d12; border-bottom: 1px solid var(--linha); }
.aud-cod-l { font: 400 .64rem/1.55 var(--f-mono); color: var(--txt-2); }
.aud-cod-l code { display: grid; font: inherit; overflow: hidden; }
.aud-cod-l code > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.aud-corpo { display: grid; gap: 10px; padding: 0 14px 14px; background: #f3f4f6; color: #1d2128; }
.aud-menu { display: flex; align-items: center; gap: 14px; margin: 0 -14px; padding: 8px 14px; background: #fff; border-bottom: 1px solid #e3e5e8; font-size: .7rem; color: #5b616b; }
.aud-menu b { margin-right: auto; font-size: .78rem; color: #1d2128; letter-spacing: -.01em; }
.aud-titulo { display: flex; align-items: center; gap: 10px; padding: 2px 2px; }
.aud-tag { display: inline-grid; flex: none; padding: 3px 6px; border-radius: 4px; background: #1d2128; color: #fff; font-size: .5rem; }
.aud-h { display: grid; font-weight: 700; font-size: 1.06rem; line-height: 1.2; letter-spacing: -.02em; }
.aud-foto {
  display: block; padding: 6px 10px 4px; border-radius: 8px;
  background: radial-gradient(120% 90% at 30% 20%, #2a313d, #12161d 70%);
}
.aud-painel { display: block; width: 100%; height: 74px; }
.aud-painel * { fill: none; stroke: #9aa5b6; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.aud-painel .ap-caixa { fill: rgba(154, 165, 182, .07); }
.aud-painel .ap-caixa--2 { fill: rgba(154, 165, 182, .04); }
.aud-painel .ap-base { fill: rgba(154, 165, 182, .14); }
.aud-painel .ap-chao { stroke: rgba(154, 165, 182, .35); }
.aud-painel .ap-placa { fill: rgba(154, 165, 182, .2); }
.aud-painel .ap-visor { fill: rgba(255, 122, 51, .1); stroke: #ff7a33; }
.aud-painel .ap-visor-l { stroke: #ff7a33; }
.aud-painel .ap-luz--on { fill: #9aa5b6; }
.aud-painel .ap-alca { fill: #9aa5b6; }
.aud-painel .ap-ventila { stroke: rgba(154, 165, 182, .55); }
.aud-peso, .aud-ga {
  position: absolute; left: 10px; bottom: 8px; display: inline-grid; padding: 4px 8px; border-radius: 999px;
  font-size: .5rem; letter-spacing: .04em; color: #fff; background: rgba(6, 7, 9, .72);
}
.aud-spec, .aud-form { padding: 9px 12px; border-radius: 8px; background: #fff; border: 1px solid #e3e5e8; }
.aud-spec-tit, .aud-form-tit { font-size: .72rem; font-weight: 700; margin-bottom: 6px; }
.aud-spec-corpo { display: grid; }
.aud-spec-corpo > * { grid-area: 1 / 1; }
.aud-spec-vazio { display: grid; gap: 5px; align-content: start; }
.aud-spec-vazio i { display: block; height: 7px; border-radius: 4px; background: #e6e8eb; }
.aud-spec-vazio i:nth-child(2) { width: 82%; }
.aud-spec-vazio i:nth-child(3) { width: 64%; }
.aud-spec-vazio .mono { font-size: .48rem; color: #9aa0a8; letter-spacing: .06em; }
.aud-spec-tab { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 0; font-size: .68rem; }
.aud-spec-tab div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid #eceef1; }
.aud-spec-tab dt { color: #6b7280; }
.aud-spec-tab dd { margin: 0; font-weight: 600; text-align: right; }
.aud-form { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; padding-bottom: 32px; }
.aud-form .aud-form-tit { margin: 0; }
.aud-form-l { display: flex; gap: 8px; align-items: center; }
.aud-campo { flex: 1; height: 22px; border-radius: 5px; border: 1px solid #d9dce1; background: #fafbfc; }
.aud-botao { flex: none; padding: 5px 12px; border-radius: 5px; background: #1d2128; color: #fff; font-size: .62rem; font-weight: 600; }
.aud-ga { left: 12px; bottom: 9px; background: #1d2128; }

/* troca do antes pelo depois (sem JS, ou depois da animação: o depois) */
span.aud-troca, code.aud-troca { display: inline-grid; }
p.aud-troca, div.aud-troca, .aud-cod-l code.aud-troca { display: grid; }
.aud-troca > .antes, .aud-troca > .depois {
  grid-area: 1 / 1; min-width: 0;
  transition: opacity var(--t-troca) var(--ease-state), visibility 0s linear 0s;
}
.aud-troca > .antes { opacity: 0; visibility: hidden; transition: opacity var(--t-troca) var(--ease-state), visibility 0s linear var(--t-troca); }
.aud--anima .aud-el:not(.feito) .aud-troca > .antes,
.aud--anima .aud-aprov:not(.feito) .aud-troca > .antes { opacity: 1; visibility: visible; transition: opacity var(--t-troca) var(--ease-state), visibility 0s linear 0s; }
.aud--anima .aud-el:not(.feito) .aud-troca > .depois,
.aud--anima .aud-aprov:not(.feito) .aud-troca > .depois { opacity: 0; visibility: hidden; transition: opacity var(--t-troca) var(--ease-state), visibility 0s linear var(--t-troca); }

/* linha de leitura */
.aud-scan {
  position: absolute; left: -10px; right: -10px; top: 0; height: 2px; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--azul-claro) 16%, var(--azul-claro) 84%, transparent);
  box-shadow: 0 0 18px 2px rgba(255, 122, 51, .45);
  transition: transform calc(.55s * var(--motion)) var(--ease-state), opacity calc(var(--dur-micro) * var(--motion));
}
.aud--anima[data-fase="lendo"] .aud-scan { opacity: 1; }

/* ---------- Lista da auditoria ---------- */
.aud-lista { list-style: none; border-top: 1px solid var(--linha-2); }
.aud-item {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 12px; align-items: start;
  padding: 10px 8px 10px 6px; border-bottom: 1px solid var(--linha); border-radius: 8px; cursor: default;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out), background-color calc(var(--dur-micro) * var(--motion));
}
.aud-item:focus-visible { outline-offset: -2px; }
.aud-num { padding-top: 3px; font-size: .62rem; color: var(--c-claro); transition: color calc(var(--dur-base) * var(--motion)); }
.aud-txt { min-width: 0; }
.aud-onde { font-size: .54rem; color: var(--txt-3); margin-bottom: 3px; }
.aud-achado {
  position: relative; padding-left: 13px; font-size: .78rem; line-height: 1.42; color: var(--txt-3);
  text-decoration: line-through 1px; text-decoration-color: rgba(255, 107, 87, .55);
  transition: color calc(var(--dur-base) * var(--motion)), text-decoration-color calc(var(--dur-base) * var(--motion));
}
.aud-achado::before { content: ""; position: absolute; left: 0; top: .52em; width: 6px; height: 6px; border-radius: 50%; background: var(--sinal); opacity: .55; transition: opacity calc(var(--dur-base) * var(--motion)); }
.aud-achado code, .aud-corr code { font: 500 .9em/1 var(--f-mono); }
.aud-corr {
  position: relative; max-height: 4.5em; margin-top: 4px; padding-left: 13px; font-size: .88rem; line-height: 1.4; font-weight: 500; color: var(--txt);
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), max-height calc(var(--dur-base) * var(--motion)) var(--ease-out), margin calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.aud-corr::before {
  content: ""; position: absolute; left: 0; top: .38em; width: 7px; height: 4px;
  border-left: 1.6px solid var(--c-claro); border-bottom: 1.6px solid var(--c-claro); transform: rotate(-45deg);
}
.aud-det {
  max-height: 0; opacity: 0; overflow: hidden; font-size: .78rem; line-height: 1.45; color: var(--txt-2);
  transition: max-height calc(var(--dur-base) * var(--motion)) var(--ease-out), opacity calc(var(--dur-micro) * var(--motion)), margin calc(var(--dur-base) * var(--motion));
}
.aud-ia { display: inline-block; margin-left: 4px; padding: 3px 7px; border-radius: 999px; font-size: .5rem; color: #5fd9cd; border: 1px solid rgba(23, 191, 176, .5); background: rgba(23, 191, 176, .08); vertical-align: 1px; }
.aud-st {
  margin-top: 1px; padding: 4px 8px; border-radius: 999px; white-space: nowrap; font-size: .5rem;
  color: var(--c-claro); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent);
  transition: color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)), background-color calc(var(--dur-base) * var(--motion));
}
.aud-item.ativo, .aud-item.par { background: rgba(236, 238, 241, .04); }
.aud-item.ativo .aud-det, .aud-item.par .aud-det, .aud-item:focus-visible .aud-det { max-height: 6em; opacity: 1; margin-top: 6px; }

/* aprovação dos textos novos */
.aud-aprov {
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center;
  margin-top: 12px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid rgba(255, 181, 71, .42); background: rgba(255, 181, 71, .05);
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out), border-color calc(var(--dur-base) * var(--motion));
}
.aud-aprov-ic {
  position: relative; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  color: var(--ambar); border: 1.5px solid rgba(255, 181, 71, .6); background: rgba(255, 181, 71, .08);
}
.aud-aprov-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aud-aprov .cad-alca { transform: translateY(-2.5px) rotate(18deg); }
.aud--anima .aud-aprov:not(.feito) .cad-alca { transform: none; }
.aud-aprov-rot { font-size: .52rem; color: #ffcb7d; margin-bottom: 3px; }
.aud-aprov-txt { display: grid; font-size: .86rem; line-height: 1.4; color: var(--txt); }
.aud-aprov.espera .aud-aprov-ic { box-shadow: 0 0 0 5px rgba(255, 181, 71, .14), 0 0 24px rgba(255, 181, 71, .45); animation: aud-pulsa calc(1.2s * var(--motion)) ease-in-out infinite; }
.aud-fim {
  margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--azul);
  font-size: .8rem; line-height: 1.5; color: var(--txt-2);
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

/* ---------- Estados da animação (só com .aud--anima, ligado pelo JS) ---------- */
.aud--anima .aud-item:not(.lido) { opacity: 0; transform: translateX(-8px); }
.aud--anima .aud-item:not(.feito) .aud-achado { color: var(--txt); text-decoration-color: transparent; }
.aud--anima .aud-item:not(.feito) .aud-achado::before { opacity: 1; }
.aud--anima .aud-item:not(.feito) .aud-corr { opacity: 0; max-height: 0; margin-top: 0; }
.aud--anima .aud-item:not(.feito) .aud-num { color: var(--sinal); }
.aud--anima .aud-item:not(.feito) .aud-st { color: #ff8a7a; border-color: rgba(255, 107, 87, .55); background: rgba(255, 107, 87, .08); }
.aud--anima .aud-item.espera .aud-st { color: #ffcb7d; border-color: rgba(255, 181, 71, .6); background: rgba(255, 181, 71, .1); }
.aud--anima .aud-item.espera .aud-num { color: var(--ambar); }

.aud--anima .aud-el:not(.lido) .aud-pino { opacity: 0; transform: scale(.4); }
.aud--anima .aud-el.lido:not(.feito) { outline-color: rgba(255, 107, 87, .9); }
.aud--anima .aud-el.lido:not(.feito) .aud-pino { background: var(--sinal); }
.aud--anima .aud-el.lido.espera:not(.feito) { outline: 1.5px dashed rgba(255, 181, 71, .95); }
.aud--anima .aud-el.lido.espera:not(.feito) .aud-pino { background: var(--ambar); }
.aud-el.pisca { outline-color: var(--c) !important; }

.aud--anima .aud-aprov:not(.espera):not(.feito) { opacity: 0; transform: translateY(6px); }
.aud--anima .aud-fim:not(.on) { opacity: 0; transform: translateY(6px); }

/* Hover e foco ativam os pares, mesmo antes de a cena chegar no item */
.aud-item.ativo, .aud-item.par { opacity: 1 !important; transform: none !important; }
.aud-item.ativo .aud-corr, .aud-item.par .aud-corr { opacity: 1 !important; max-height: 4.5em !important; margin-top: 4px !important; }
.aud-el.ativo, .aud-el.par { outline-color: var(--c) !important; }
.aud-el.ativo .aud-pino, .aud-el.par .aud-pino { opacity: 1 !important; transform: none !important; }
.aud.com-foco .aud-item:not(.ativo):not(.par) { opacity: .32; }
.aud.com-foco .aud-el:not(.ativo):not(.par) { opacity: .4; }

@media (max-width: 1023px) {
  .aud { margin-top: 40px; padding: 16px 16px 14px; }
  .aud-palco { grid-template-columns: 1fr; }
  .aud-pag { display: none; }
  .aud-det { max-height: none; opacity: 1; margin-top: 6px; }
}
@media (max-width: 560px) {
  .aud-item { grid-template-columns: 22px minmax(0, 1fr); row-gap: 8px; }
  .aud-st { grid-column: 2; justify-self: start; }
  .aud-estado { display: none; }
}

/* ==========================================================================
   SEO-02 · O que faz
   ========================================================================== */
.seo-def-link { margin-top: 22px; }

/* ==========================================================================
   SEO-03 · Base técnica: guia em faixas (C-30) com três colunas
   As colunas reaproveitam os nomes do C-30: faz = o que verificamos,
   usamos = como verificamos, para = o que mais encontramos (com a marca vermelha).
   ========================================================================== */
@media (min-width: 1024px) { .guia--3 .guia-tab tr { grid-template-columns: minmax(0, 1.05fr) repeat(3, minmax(0, 1fr)); } }
.guia--3 .guia-tab code { font: 500 .86em/1 var(--f-mono); }
.guia--3 .guia-nome { font-size: clamp(1.15rem, .8rem + .7vw, 1.6rem); }

/* ==========================================================================
   SEO-04 · Alternativas em faixas (C-19 com etapas próprias)
   ========================================================================== */
.seo-altf .altf-tab th { font-size: clamp(1.2rem, .8rem + .85vw, 1.75rem); }

/* ==========================================================================
   SEO-05 · Relatório mensal anotado (C-51)
   O relatório usa o papel do Mapa Operacional (.mapa, .mapa--grande, .mapa-reg).
   ========================================================================== */
.med { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.med-fontes { list-style: none; border-top: 1px solid var(--linha-2); }
.med-fonte-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 20px 6px 20px 0; border-bottom: 1px solid var(--linha-2);
  transition: opacity calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion));
}
.med-fonte-item:focus-visible { outline-offset: 4px; }
.med-ic {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid var(--linha-3); color: var(--txt-2);
  transition: background-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion));
}
.med-ic .ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.med-fonte-item h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.012em; margin-bottom: 6px; }
.med-fonte-item p { color: var(--txt-2); font-size: .92rem; line-height: 1.55; }
.med-fonte-item.ativo .med-ic, .med-fonte-item.par .med-ic { background: var(--azul); border-color: var(--azul); color: var(--azul-ink); }
.med-fonte-item.par { border-bottom-color: rgba(232, 80, 2, .5); }
.med.com-foco .med-fonte-item:not(.ativo):not(.par) { opacity: .4; }

.med-rel { position: relative; top: auto; }
.med-fecho { margin-top: 28px; max-width: 46ch; font-size: 1rem; line-height: 1.6; color: var(--txt-2); }
.med-reg { position: relative; transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out), background-color calc(var(--dur-micro) * var(--motion)); }
.med-reg:focus-visible { outline-offset: 2px; }
.med-fonte { margin-left: 6px; padding: 2px 5px; border: 1px solid rgba(21, 23, 27, .22); border-radius: 4px; color: var(--papel-txt-2); }
.med.com-foco .med-reg:not(.ativo):not(.par) { opacity: .28; }
.med-reg.ativo, .med-reg.par { background: rgba(232, 80, 2, .07); }

.med-graf { position: relative; margin-top: 6px; }
.med-graf svg, .med-grupos svg { display: block; width: 100%; overflow: visible; }
.med-graf svg { height: 44px; }
.med-rot { position: absolute; right: 0; top: -2px; font-size: .48rem; color: var(--papel-txt-2); }
.med-l { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(1.4s * var(--motion)) var(--ease-state); }
.med-l--forte { stroke: #b83e00; }
.med-l--fraca { stroke: rgba(21, 23, 27, .32); }
.med-l--wa { stroke: #8a7a55; }
.med-marca { stroke: rgba(21, 23, 27, .22); stroke-width: 1; stroke-dasharray: 2 2; transition: stroke calc(var(--dur-micro) * var(--motion)); }
.med-marca--erro { stroke: rgba(192, 57, 43, .7); }
.med-marca.on { stroke: #b83e00; stroke-width: 1.8; stroke-dasharray: none; }
.med-marca--erro.on { stroke: #c0392b; }
.med-nota { margin-top: 6px; padding: 3px 6px; border-radius: 4px; font-size: .78rem !important; transition: background-color calc(var(--dur-micro) * var(--motion)); }
.med-nota b { color: #8f2a0b; }
.med-nota code, .med-mud code { font: 500 .9em/1 var(--f-mono); }
.med-nota.ativo { background: rgba(192, 57, 43, .1); }

.med-grupos { list-style: none; display: grid; gap: 2px; margin-top: 6px; }
.med-grupos li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: center; gap: 12px; font-size: .76rem; color: #2b2e33; }
.med-grupos svg { height: 30px; }
.med-reg .med-leg { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .48rem; color: var(--papel-txt-2); }
.med-k { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.med-k + .med-k, .med-leg .med-k:not(:first-child) { margin-left: 8px; }
.med-k--fraca { background: rgba(21, 23, 27, .32); }
.med-k--forte { background: #b83e00; }

.med-mud { list-style: none; display: grid; gap: 2px; margin-top: 6px; }
.med-mud li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 8px; padding: 4px 6px; border-radius: 4px; font-size: .8rem; line-height: 1.4; color: #2b2e33; transition: background-color calc(var(--dur-micro) * var(--motion)); }
.med-mud .mono { padding-top: 2px; font-size: .56rem; color: var(--papel-txt-2); }
.med-mud li.ativo { background: rgba(184, 62, 0, .12); }

.med-ia { margin-top: 8px; border-collapse: separate; border-spacing: 6px 5px; margin-left: -6px; font-size: .7rem; color: #2b2e33; }
.med-ia thead th { font-size: .46rem; color: var(--papel-txt-2); text-align: center; font-weight: 500; }
.med-ia tbody th { text-align: left; font-weight: 500; padding-right: 6px; white-space: nowrap; }
.med-ia td { width: 12px; }
.med-ia tbody td::before { content: ""; display: block; width: 10px; height: 10px; margin: auto; border-radius: 50%; border: 1.2px solid rgba(21, 23, 27, .28); }
.med-ia tbody td.sim::before { background: #0b7d73; border-color: #0b7d73; }
.med-prio { margin: 6px 0 0 1.2em; display: grid; gap: 3px; font-size: .8rem; line-height: 1.45; color: #2b2e33; }

/* estado da animação: as regiões entram uma a uma e as linhas se desenham */
.med--anima .med-reg:not(.on) { opacity: 0; transform: translateY(8px); }
.med--anima .med-reg:not(.on) .med-l { stroke-dashoffset: 1; transition: none; }
.med-reg.ativo, .med-reg.par { opacity: 1 !important; transform: none !important; }
.med-reg.ativo .med-l, .med-reg.par .med-l { stroke-dashoffset: 0 !important; }

@media (max-width: 1023px) {
  .med { grid-template-columns: 1fr; }
  /* no celular, o fecho e o link vêm depois do relatório */
  .med-esq { display: contents; }
  .med-fontes { order: 1; }
  .med-rel { order: 2; }
  .med-fecho { order: 3; margin-top: 0; }
  .med-esq .faixa-links { order: 4; margin-top: -16px; }
  .med-grupos li { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
}

/* ==========================================================================
   SEO-06 · Tela e HTML (C-52) e dados próprios com método (C-53)
   ========================================================================== */
.robo {
  margin: 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);
}
.robo-topo .classe-proc { margin-right: auto; }
.robo-btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .58rem; color: var(--txt);
  background: rgba(236, 238, 241, .03); border: 1px solid var(--linha-3); border-radius: 999px; padding: 8px 14px 8px 10px;
  transition: border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion));
}
.robo-btn:hover { border-color: rgba(142, 153, 171, .8); }
.robo-btn-ic { position: relative; width: 28px; height: 16px; border-radius: 999px; background: rgba(255, 107, 87, .35); transition: background-color calc(var(--dur-base) * var(--motion)); }
.robo-btn-ic::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform calc(var(--dur-base) * var(--motion)) var(--ease-snappy); }
.robo-btn[aria-pressed="true"] { border-color: rgba(142, 153, 171, .7); background: rgba(142, 153, 171, .1); }
.robo-btn[aria-pressed="true"] .robo-btn-ic { background: var(--aco); }
.robo-btn[aria-pressed="true"] .robo-btn-ic::after { transform: translateX(12px); }

.robo-palco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 16px; }
.robo-cab { font-size: .54rem; margin-bottom: 10px; }
.robo-tela { padding: 16px 16px 14px; border-radius: 12px; background: #f3f4f6; color: #1d2128; }
.robo-tela .robo-cab { color: #6b7280; }
.robo-bloco { margin: 0 -6px; padding: 7px 8px; border-radius: 8px; outline: 1.5px solid transparent; transition: outline-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion)); }
.robo-bloco + .robo-bloco { margin-top: 4px; }
.robo-bloco:focus-visible { outline: 2px solid var(--azul); }
.robo-bloco .robo-h1 { font-weight: 700; font-size: 1.12rem; line-height: 1.2; letter-spacing: -.02em; color: #1d2128; }
.robo-bloco p { font-size: .82rem; line-height: 1.5; color: #3a3f47; }
.robo-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 0; font-size: .74rem; }
.robo-spec div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid #e3e5e8; }
.robo-spec dt { color: #6b7280; }
.robo-spec dd { margin: 0; font-weight: 600; text-align: right; }
.robo-q { font-size: .8rem !important; font-weight: 600; color: #1d2128 !important; padding: 5px 0; border-top: 1px solid #e3e5e8; }
.robo-q:first-child { border-top: 0; }
.robo-conta { margin-top: 10px; font-size: .52rem; color: #6b7280; }
.robo-html { padding: 16px 16px 14px; border-radius: 12px; background: #0b0d12; border: 1px solid var(--linha-2); }
.robo-html .robo-cab { color: var(--txt-3); }
.robo-cod { list-style: none; display: grid; gap: 8px; }
.robo-l {
  padding: 8px 10px; border-radius: 8px; font: 400 .66rem/1.55 var(--f-mono); color: var(--txt-2);
  outline: 1.5px solid transparent; outline-offset: 0;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out), outline-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion));
}
.robo-l code { display: block; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.robo-l--troca { border: 1.5px dashed rgba(255, 107, 87, .75); background: rgba(255, 107, 87, .06); }
.robo-l--troca .depois { display: none; }
.robo-falta { display: block; margin-top: 4px; font-size: .5rem; color: #ff8a7a; }
.robo-html .robo-conta { color: #ff8a7a; }
.robo-conta .depois { display: none; }
.robo.corrigido .robo-l--troca { border-style: solid; border-color: rgba(142, 153, 171, .55); background: rgba(142, 153, 171, .08); }
.robo.corrigido .robo-l--troca .antes, .robo.corrigido .robo-falta { display: none; }
.robo.corrigido .robo-l--troca .depois { display: block; color: var(--txt); }
.robo.corrigido .robo-conta .antes { display: none; }
.robo.corrigido .robo-conta .depois { display: inline; }
.robo.corrigido .robo-html .robo-conta { color: var(--txt-2); }
.robo-l:focus-visible { outline: 2px solid var(--azul); }
/* pares: um bloco da tela acende o trecho do HTML, e vice-versa */
.robo-bloco.ativo, .robo-bloco.par { outline-color: #b83e00; background: rgba(184, 62, 0, .07); }
.robo-l.ativo, .robo-l.par { outline-color: var(--azul-claro); }
.robo-l--troca.ativo, .robo-l--troca.par { outline-color: rgba(255, 138, 122, .9); }
.robo.corrigido .robo-l--troca.ativo, .robo.corrigido .robo-l--troca.par { outline-color: var(--azul-claro); }
.robo-leg { margin-top: 14px; }
.robo--anima .robo-l:not(.on) { opacity: 0; transform: translateX(-6px); }
.robo-l.ativo, .robo-l.par { opacity: 1 !important; transform: none !important; }
.robo-fontes { margin-top: 14px; font-size: .78rem; line-height: 1.55; color: var(--txt-3); max-width: 110ch; }
.robo-fontes a { color: var(--txt-2); text-underline-offset: 3px; }

.lev { margin-top: 64px; }
.lev-abre { max-width: 72ch; margin-bottom: 18px; font-size: 1.05rem; line-height: 1.55; color: var(--txt); }
.lev-dados { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lev-dado {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px; border: 1px solid var(--linha-2); border-radius: 14px; background: var(--ink-1);
  transition: border-color calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy);
}
.lev-num { font-size: .92rem; color: var(--txt-2); }
.lev-num b { margin-right: 4px; font: 600 2.6rem/1 var(--f-txt); letter-spacing: -.04em; color: var(--txt); font-variant-numeric: tabular-nums; }
.lev-num .mono { margin-left: 6px; font-size: .6rem; color: var(--txt-3); }
.lev-txt { font-size: .92rem; line-height: 1.5; color: var(--txt-2); }
.lev-camada {
  margin-top: auto; align-self: flex-start; padding: 5px 9px; border: 1px solid var(--linha-2); border-radius: 999px;
  font-size: .5rem; color: var(--txt-3);
  transition: color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion));
}
.lev-dado.ativo { border-color: rgba(142, 153, 171, .6); transform: translateY(calc(-3px * var(--motion))); }
.lev-dado.ativo .lev-camada { color: var(--txt); border-color: var(--aco); background: rgba(142, 153, 171, .14); }
.lev-metodo { margin-top: 16px; max-width: 100ch; font-size: .84rem; line-height: 1.6; color: var(--txt-3); }
.lev-metodo b { margin-right: 8px; color: var(--txt-2); font-size: .58rem; }
.lev-metodo a { color: var(--txt-2); text-underline-offset: 3px; }

@media (max-width: 1023px) {
  .robo { padding: 16px 16px 14px; }
  .robo-palco { grid-template-columns: 1fr; }
  .robo-btn { margin-left: 0; }
  .lev-dados { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .lev-dados { grid-template-columns: 1fr; }
  .robo-spec { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SEO-10 · Formulário curto com prova (C-54)
   ========================================================================== */
.diag-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.diag-info .h2 { max-width: 16ch; }
.diag-txt { margin-top: 24px; max-width: 54ch; font-size: 1.08rem; line-height: 1.6; color: var(--txt-2); }
.diag-sub { margin: 32px 0 12px; color: var(--txt-3); }
.diag-olha { list-style: none; display: grid; gap: 10px; }
.diag-olha li { position: relative; padding-left: 24px; line-height: 1.5; color: var(--txt-2); }
.diag-olha li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1.5px; background: var(--azul); }
.diag-provas { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.diag-provas a {
  height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center;
  padding: 13px 14px; border: 1px solid var(--linha-2); border-radius: 12px; background: var(--ink-1); text-decoration: none;
  transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy), border-color calc(var(--dur-micro) * var(--motion));
}
.diag-provas b { font-size: .94rem; letter-spacing: -.01em; }
.diag-provas span { grid-column: 1; font-size: .78rem; line-height: 1.4; color: var(--txt-2); }
.diag-provas svg { grid-column: 2; grid-row: 1 / span 2; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; color: var(--txt-3); transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy), color calc(var(--dur-micro) * var(--motion)); }
.diag-provas a:hover, .diag-provas a:focus-visible { transform: translateY(calc(-4px * var(--motion))); border-color: rgba(232, 80, 2, .5); }
.diag-provas a:hover svg, .diag-provas a:focus-visible svg { transform: translateX(3px); color: var(--azul-claro); }

.diag-form {
  padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--linha-2); border-radius: 18px; background: var(--ink-1);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.diag-form-tit { margin-bottom: 18px; color: var(--azul-claro); }
.diag-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.diag-largo { grid-column: 1 / -1; }
.diag-campo label { display: block; margin-bottom: 6px; font-size: .86rem; font-weight: 500; color: var(--txt); }
.diag-opc { font-weight: 400; color: var(--txt-3); }
.diag-campo input:not([type="checkbox"]), .diag-campo textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linha-3); background: var(--ink-2);
  font: inherit; font-size: .96rem; color: var(--txt); transition: border-color calc(var(--dur-micro) * var(--motion));
}
.diag-campo textarea { resize: vertical; min-height: 88px; }
.diag-campo input::placeholder { color: var(--txt-3); }
.diag-campo input:not([type="checkbox"]):hover, .diag-campo textarea:hover { border-color: rgba(236, 238, 241, .4); }
.diag-campo input:not([type="checkbox"]):focus, .diag-campo textarea:focus { border-color: var(--azul); }
.diag-campo [aria-invalid="true"] { border-color: var(--sinal) !important; }
.diag-erro { margin-top: 6px; font-size: .82rem; line-height: 1.4; color: #ff8a7a; }
.diag-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.diag-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--azul); }
.diag-check label { margin: 0; font-size: .86rem; font-weight: 400; line-height: 1.5; color: var(--txt-2); }
.diag-check label a { color: var(--txt); }
.diag-check .diag-erro { grid-column: 2; margin-top: 0; }
.diag-micro { margin-top: 12px; font-size: .86rem; color: var(--txt-3); }
.diag-linhas { margin-top: 48px; }

@media (max-width: 1023px) {
  .diag-grade { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .diag-campos, .diag-provas { grid-template-columns: 1fr; }
}