/* /sistema no celular — só o que esta página tem de próprio. */

#sis-hero{padding-top:96px}
.m-hero__eyebrow{opacity:.55;margin-bottom:18px}
.m-hero__t{font-size:clamp(38px,11vw,60px);line-height:.98}
.m-hero__para{font-size:17px;line-height:1.55;margin-top:28px}
#sis-hero .m-bolt{margin-block:32px}
/* O fio da cadeia: no desktop são cinco caixas ligadas por traços na horizontal. Aqui é uma
   linha só de rótulo — a informação é a SEQUÊNCIA, e ela cabe numa frase. */
.m-cadeia__fio{margin-top:26px;opacity:.5;line-height:1.8}

/* ═══════════════════════════════════════════════════════ 03b · a arquitetura */
.m-agt__c{margin-top:18px}
.m-agt__d{margin-top:10px;font-size:15px;line-height:1.5}

/* ═══════════════════════════════════════════════════════ remates e subtítulos */
.m-remate{margin-top:var(--m-respiro);font-size:17px;line-height:1.55}
.m-sub{
  margin:var(--m-respiro) 0 var(--m-gap);
  opacity:.5;
  padding-top:16px;
  border-top:1px solid currentColor;
}
/* Aviso é frase, não etiqueta: em corpo de rótulo (11px) vira prosa ilegível, e o piso de
   leitura reprovou com razão. */
.m-aviso{margin-top:var(--m-gap);font-size:15px;line-height:1.5;opacity:.6}

/* ═══════════════════════════════════════════════════════ 07 · os domínios na faixa */
.m-dom__promessa{font-size:16px;line-height:1.4;opacity:.9;margin-bottom:12px}
.m-dom__entrega{margin-top:16px;padding-top:14px;border-top:1px solid rgba(12,12,12,.14)}
.m-dom__lbl{opacity:.5;margin-bottom:6px}
.m-dom__l{display:flex;flex-direction:column;gap:10px}
.m-dom__l li{font-size:15px;line-height:1.5;opacity:.8;padding-left:16px;position:relative}
.m-dom__l li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:currentColor;opacity:.6}
.m-anx__onde{opacity:.55;margin:14px 0 8px}
.m-dia__cab{margin-bottom:var(--m-gap);opacity:.5;line-height:1.7}

/* ═══════════════════════════════════════════════════════ 05 · a central */
.m-manifesto{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght);
  font-size:clamp(20px,5.6vw,28px);line-height:1.2;text-transform:uppercase;
  margin-bottom:var(--m-respiro);
}
.m-demo__q{font-size:19px;line-height:1.3;margin-bottom:16px}
.m-demo__r{font-size:15px;line-height:1.5;opacity:.85;margin-bottom:10px}
.m-demo__lbl{margin-top:18px;margin-bottom:10px;opacity:.5}
.m-demo__ev{display:flex;flex-direction:column;gap:10px}
.m-demo__ev li{font-size:14.5px;line-height:1.5;opacity:.7;padding-left:16px;position:relative}
.m-demo__ev li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:currentColor;opacity:.6}

/* ═══════════════════════════════════════════════════════ colunas que viram blocos
   No desktop "HOJE / COM A CENTRAL" e "FICA / CHEGA" são duas colunas lado a lado. Numa coluna
   só elas viram dois blocos em sequência, e o rótulo de cada um faz o contraste que a posição
   fazia. */
.m-mudanca{margin-bottom:var(--m-gap);padding:22px;border:1px solid currentColor;border-radius:4px}
.m-mudanca__t{opacity:.55;margin-bottom:14px}
.m-mudanca__l{display:flex;flex-direction:column;gap:10px}
.m-mudanca__l li{font-size:15px;line-height:1.5;padding-left:16px;position:relative}
.m-mudanca__l li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:currentColor;opacity:.6}

/* ═══════════════════════════════════════════════════════ 06 · o relatório */
.m-doc__l{display:flex;flex-direction:column;gap:12px}
.m-doc__l li{font-size:15px;line-height:1.5;padding-left:16px;position:relative}
.m-doc__l li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:currentColor;opacity:.6}

/* ═══════════════════════════════════════════════════════ 09 · LGPD */
.m-lgpd__intro{font-size:17px;line-height:1.55;margin-bottom:var(--m-gap)}

/* ═══════════════════════════════════════════════════════ 10 · implantação
   O rótulo da coluna cola no valor. Na camada antiga os cabeçalhos de coluna sumiam no celular
   e os números ficavam órfãos — este par resolve isso por construção. */
.m-par{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.m-par__lbl{opacity:.5}
.m-par__v{font-size:15px;line-height:1.5}

/* ═══════════════════════════════════════════════════════ 11 · anexo */
.m-anx__intro{margin-bottom:14px}
.m-anx__l{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.m-anx__l li{display:flex;flex-direction:column;gap:4px}
.m-anx__n{opacity:.5}
.m-anx__remate{opacity:.75}

/* ═══════════════════════════════════════════════════════ 12 · próximo passo */
.m-passos{display:flex;flex-direction:column;gap:16px;margin-top:var(--m-respiro)}
.m-passos li{display:flex;gap:12px;font-size:16px;line-height:1.5}
.m-passos__n{opacity:.5;flex:0 0 auto;padding-top:3px}

/* ═════════════════════════════ viradas de ato (spec 2026-08-31) */
.m-virada{padding-top:44px;padding-bottom:42px}
.m-virada__frase{font-size:clamp(24px,6.6vw,34px);line-height:1.18}
.m-virada__fio{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;font-size:10px;color:#5A5A5A}
.m-virada__fio b{font-weight:500}
/* o azul da marca some sobre preto; #6E82FF é o azul de fundo escuro do projeto */
.m-virada__fio b.is-on{color:#6E82FF}
.m-virada__fio i{width:24px;height:1px;background:#333}
.m-virada__fio i.is-on{background:#6E82FF}

/* ═════════════════════════════ o diagrama, na vertical (spec 2026-08-31) */
.m-diag{margin-top:14px;margin-bottom:28px}
.m-diag__no{border:1px solid #DDD;background:#fff;padding:12px 14px}
.m-diag__no + .m-diag__no{border-top:0}
.m-diag__no b{display:block;font-size:11px;color:#0C0C0C;font-weight:500}
.m-diag__no span{display:block;margin-top:4px;font-size:15px;line-height:1.4;color:#5A5A5A}
.m-diag__seta{display:flex;align-items:center;gap:10px;padding:10px 0 10px 22px}
.m-diag__seta::before{content:'';width:1px;height:22px;background:#B9B9B9}
.m-diag__seta span{font-size:10px;color:#7A7A7A}
.m-diag__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.m-diag__chips span{padding:8px 11px;border:1px solid #DDD;background:#fff;font-size:10px;color:#0C0C0C}
.m-diag__minis{display:flex;gap:8px;margin-bottom:12px}
.m-diag__no--mini{flex:1;padding:9px 10px}
.m-diag__no--mini b{font-size:10px}
.m-diag__no--mini span{margin-top:2px;font-size:12px}
.m-diag__per{position:relative;border:1px dashed #8A8A8A;padding:58px 12px 12px;margin-top:2px}
.m-diag__per__t{position:absolute;top:12px;left:12px;font-style:normal;font-size:10px;color:#6E6E6E}
.m-diag__per__sub{position:absolute;top:28px;left:12px;font-style:normal;font-size:12px;color:#9A9A9A}
.m-diag__video + .m-diag__video{margin-left:8px;color:#5A5A5A;border-color:#B9B9B9}
.m-diag__per .m-diag__chips{margin-bottom:12px}
.m-diag__video{display:inline-block;margin-top:12px;padding:8px 11px;border:1px solid #0C0C0C;font-size:10px;color:#0C0C0C}
.m-diag__nota{margin-top:12px;font-size:10px;color:#7A7A7A}