/* Página Planejamento estratégico (/marketing-digital/planejamento-estrategico/). Só o que é desta página.
   A base vem do previa.css e do previa-servico.css. Prefixo pe-.
   O que é novo: o caminho em três passos do bloco "Na prática" (.pe-caminho) e os acertos da ficha e da faixa de prova.
   Os três cartões com ficha do bloco "Documentos" são os da casa (.caminhos), sem regra nova de grade. Rótulos em Fira Sans. */

/* ---------- 1. topo ---------- */
/* atalhos "Nesta página" */
.pe-topo .ja-integramos .nomes a{text-decoration-thickness:1px;text-underline-offset:3px}
.pe-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, como no celular ("Investimento" e a pílula não cabem lado a lado).
     Só a primeira linha: a segunda continua escondida nesta faixa, como nas outras páginas do modelo.
     A altura mínima iguala as três telas: a pílula é 2px mais alta que o valor em negrito */
  .pe-topo .hero-fluxo .ui .linha:first-child{display:grid;justify-items:start;align-content:start;gap:4px;min-height:40px}
  .pe-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 */
  .pe-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .pe-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 */
  .pe-topo .ja-integramos > b{margin-bottom:0}
  .pe-topo .ja-integramos .nomes a{display:inline-block;padding-block:13px}
}

/* ---------- 3. na prática (#na-pratica) ---------- */
/* o título fica em meia coluna e precisa ser menor */
.pe-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
/* o caminho antes da venda: três passos lado a lado, com o número num círculo e um traço entre um passo e o seguinte */
.pe-caminho{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.pe-caminho li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;align-content:start;padding:22px 22px 24px;border-radius:var(--raio);background:var(--card);color:var(--card-fg);box-shadow:var(--sombra)}
.pe-n{grid-row:1 / span 3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--oliva);color:var(--roxo-900);font:700 14px/1 var(--fonte);font-variant-numeric:tabular-nums}
.pe-caminho .tag{grid-column:2;font-size:13px;font-weight:600;color:var(--roxo)}
.pe-caminho h3{grid-column:2;margin-top:4px;font-size:1.15rem;line-height:1.25;color:var(--roxo-900)}
.pe-caminho p{grid-column:2;margin-top:6px;font-size:15px;color:var(--tinta-2)}
.pe-caminho li:not(:last-child)::after{content:"";position:absolute;top:35px;left:100%;width:22px;height:2px;background:var(--oliva)}
/* ficha "Cliente em resumo": sem a sobra embaixo (a lista trazia a margem padrão do navegador) */
.pe-ficha.ficha{padding-bottom:12px}
.pe-ficha .tg-dados{margin-bottom:0}

/* ---------- 4. documentos (#documentos): os três cartões da casa, em fundo papel ---------- */
/* a faixa de prova da casa é transparente: no fundo papel ela ganha o branco dos cartões */
.pe-docs .prova-ranking{background:var(--card)}
/* o arquivo do logo tem 74px de altura: a 37px ele sai nítido em tela de alta densidade */
.pe-docs .marca-case img{height:37px}

/* ---------- responsivo ---------- */
@media (min-width:621px) and (max-width:980px){
  /* a ficha da casa cai para duas colunas no tablet: com três dados, o último ocupa a linha toda */
  .pe-ficha .tg-dados > div:last-child{grid-column:1 / -1}
}
@media (max-width:860px){
  /* os passos empilham, e o traço passa a descer de um passo para o seguinte */
  .pe-caminho{grid-template-columns:minmax(0,1fr);gap:18px}
  .pe-caminho li:not(:last-child)::after{top:100%;left:35px;width:2px;height:18px}
}