/* Página Redes sociais (/marketing-digital/gestao-de-midias-sociais/). Só o que é desta página. A base vem do previa.css e do previa-servico.css. Prefixo rs-.
   O que é novo: os dois cartões de trabalho do bloco "Na prática" (.rs-casos e .rs-caso, sobre o roxo) e o fundo dos cartões de "O que fazemos" (.rs-fazemos),
   porque a seção está no papel. Rótulos em Fira Sans. Sem imagem, sem logo e sem número na ilustração do topo. */

/* ---------- 1. topo ---------- */
/* atalhos "Nesta página" */
.rs-topo .ja-integramos .nomes a{text-decoration-thickness:1px;text-underline-offset:3px}
.rs-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.
     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 */
  .rs-topo .hero-fluxo .ui .linha:first-child{display:grid;justify-items:start;align-content:start;gap:4px;min-height:40px}
  .rs-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 */
  .rs-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .rs-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 */
  .rs-topo .ja-integramos > b{margin-bottom:0}
  .rs-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 */
.rs-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
/* dois trabalhos lado a lado. Cada cartão tem exatamente quatro filhos (etiqueta, nome, texto e link), e as linhas são partilhadas:
   os nomes, os textos e os links ficam na mesma altura nos dois */
.rs-casos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px}
.rs-caso{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:10px;align-content:start;padding:24px 26px 26px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip)}
.rs-caso .tag{font-family:var(--fonte);font-size:13px;font-weight:600;line-height:1.4;color:var(--acento)}
.rs-caso h3{margin:0;font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--titulo)}
.rs-caso > p{max-width:56ch;font-size:16px;line-height:1.5;color:var(--fg2)}
.rs-caso .link-seta{justify-self:start;align-self:end;margin-top:6px;font-size:15px}

/* ---------- 4. o que fazemos (#o-que-fazemos): o bloco de duas colunas da página de integração, aqui sobre o papel ---------- */
/* no papel, o fundo padrão do cartão é o da própria seção: o cartão fica branco */
.rs-fazemos .auto-lista li{background:var(--card)}

/* ---------- responsivo ---------- */
@media (max-width:760px){
  .rs-casos{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:32px}
  .rs-caso{grid-row:auto;grid-template-rows:none;padding:20px 20px 22px}
}