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

   ATENÇÃO: várias classes usadas pelo render NÃO moram em css/m/kit.css. Elas são
   declaradas por página, e cada folha de página redeclara as suas — `.m-sub`,
   `.m-aviso`, `.m-remate`, `.m-par`, `.m-hero__t` aparecem em css/m/sistema.css e
   css/m/premiss.css, e em nenhuma delas no kit.

   Como cada página carrega só a própria folha, usar `.m-par` sem declará-lo aqui
   renderiza o texto SEM ESTILO NENHUM — e isso PASSA em todas as verificações: o corpo
   padrão do navegador é 16px, acima do piso de prosa (15) e do de rótulo (10). Ninguém
   seria avisado. Por isso as declarações compartilhadas estão repetidas abaixo, e por
   isso existe a checagem de classe órfã na tarefa que criou este arquivo. */

/* ═══════════════════════════════════════════════════════ 01 · o herói */
#ct-hero{padding-top:96px}
.m-hero__eyebrow{opacity:.55;margin-bottom:18px}
.m-hero__t{font-size:clamp(34px,9.6vw,52px);line-height:1.0}
.m-hero__para{font-size:17px;line-height:1.55;margin-top:28px}
#ct-hero .m-bolt{margin-block:32px}
/* O fio: no desktop são cinco palavras 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}

/* ═══════════════════════════════════════════════════════ compartilhadas (ver o topo) */
.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 reprova com razão. */
.m-aviso{margin-top:var(--m-gap);font-size:15px;line-height:1.5;opacity:.6}
.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}
.m-acc__p{font-size:15px;line-height:1.55}

/* ═══════════════════════════════════════════════════════ 03 · o modelo */
.m-mod__nome{
  font-size:clamp(28px,7.4vw,38px);
  line-height:1.05;
  margin-top:var(--m-respiro);
  margin-bottom:var(--m-gap);
}

/* ═══════════════════════════════════════════════════════ 05 · os cenários
   Quatro cartões EMPILHADOS, não faixa com scroll-snap: a faixa serve para cartões que
   se comparam de relance, e estes se leem um por um. */
.m-cen{display:flex;flex-direction:column;gap:18px;margin-top:var(--m-respiro)}
.m-cen__c{padding-left:18px;border-left:2px solid transparent}
.m-cen__c.is-rec{border-left-color:currentColor}
/* A cifra é destacada, mas fica UM DEGRAU ABAIXO do nome do cenário — e em caixa
   normal, sem a classe `display`. Uma faixa de preço em caixa alta e maior que o nome
   inverte a hierarquia: o número vira o assunto do cartão e o cenário vira legenda. */
.m-cen__faixa{
  font-size:clamp(19px,5vw,24px);
  line-height:1.2;
  margin-top:8px;
}
.m-cen__lbl{margin-top:18px;opacity:.5}
/* Prosa, não rótulo: 15px é o piso, e este texto substitui o percentual que a página
   se recusa a afirmar — ele precisa ser lido, não apenas visto. */
.m-cen__p{margin-top:6px;font-size:15px;line-height:1.5}

/* ═══════════════════════════════════════════════════════ 06 · a caixa da unidade */
/* Mesma razão do .m-cen__faixa: caixa normal, não `display`. */
.m-uni__faixa{
  font-size:clamp(21px,5.6vw,27px);
  line-height:1.2;
  margin-top:var(--m-respiro);
  margin-bottom:var(--m-gap);
}

/* ═══════════════════════════════════════════════════════ 04 · a cascata */
.m-casc__c{margin-top:18px}
.m-casc__d{margin-top:10px;font-size:15px;line-height:1.5}

/* ═══════════════════════════════════════════════════════ 06 · a segunda cópia
   Duas linhas, e o preço é o que a pessoa veio comparar: ele fica maior que o volume. */
.m-seg__c{margin-top:14px}
.m-seg__p{font-size:clamp(19px,5vw,24px);line-height:1.2;margin-top:8px}
.m-seg__b{margin-top:6px;font-size:15px;line-height:1.5;opacity:.6}

/* ═══════════════════════════════════════════════════════ 07 · as fases */
.m-comp__c,
.m-fase{margin-top:18px}
/* As duas fases que decidem dinheiro grande, a 04 e a 06, marcadas como no desktop. */
.m-fase.is-marco{border-left:2px solid currentColor;padding-left:18px}