/* Página Marketing, a página da área (/marketing-digital/). Primeira página do modelo de área: _docs/modelo-de-area.md.
   Só o que é desta página. A base vem do previa.css, do previa-servico.css (topo com o desenho, bloco de duas colunas,
   perguntas e "para continuar") e do previa-setor.css (pilha com link no título e cartões de case). Prefixo mk-.
   Nenhuma peça nova: são ajustes de peças que já existem. Rótulos em Fira Sans. */

/* ---------- 1. topo ---------- */
/* atalhos "Nesta página" */
.mk-topo .ja-integramos .nomes a{text-decoration-thickness:1px;text-underline-offset:3px}
.mk-topo .ja-integramos .nomes a:hover{text-decoration-thickness:2px;text-decoration-color:var(--acento)}
@media (min-width:621px) and (max-width:980px){
  /* cartões estreitos: o valor desce para baixo do rótulo nas três telas, e as três ficam com a mesma altura.
     Só a primeira linha: a segunda continua escondida nesta faixa, como nas outras páginas com o desenho */
  .mk-topo .hero-fluxo .ui .linha:first-child{display:grid;justify-items:start;align-content:start;gap:4px;min-height:40px}
  .mk-topo .hero-fluxo .ui .linha > b{text-align:left}
}
@media (min-width:981px) and (max-width:1060px){
  /* o primeiro e o terceiro cartão saíam da moldura pontilhada */
  .mk-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .mk-topo .hero-fluxo .ui:nth-child(5){transform:translateX(8%)}
}
@media (max-width:980px){
  /* atalhos são navegação: 44px de altura para o dedo */
  .mk-topo .ja-integramos > b{margin-bottom:0}
  .mk-topo .ja-integramos .nomes a{display:inline-block;padding-block:13px}
}

/* ---------- 2. os serviços da área (#servicos) ---------- */
/* no modelo de setor a frase de cada linha some no celular e ficam as pílulas de prova. Aqui a frase é o conteúdo: continua à vista */
@media (max-width:620px){
  .mk-servicos.setor-solucoes .camada > div:nth-child(2) > p{display:block}
}

/* ---------- 3. até a venda (#ate-a-venda) ---------- */
/* o bloco de duas colunas nasceu em fundo claro, com cartões cor de papel. Aqui o fundo é papel: os cartões ficam brancos */
.mk-venda .auto-lista li{background:var(--branco)}
.mk-nota{margin-top:20px;max-width:54ch}