/* Página SEO e GEO (/marketing-digital/seo/). Só o que é desta página. A base vem do previa.css e do previa-servico.css. Prefixo seo-.
   O que é novo: o miolo do bloco "Na prática" (.seo-caso: o que fizemos ao lado dos três números do case, e o depoimento .seo-depo),
   os três cartões de cliente com número (.seo-provas) e os ajustes do bloco de GEO em fundo papel (.seo-geo).
   Rótulos em Fira Sans. Os números são os do registro de provas, escritos como nos cases aprovados. */

/* ---------- 1. topo ---------- */
/* atalhos "Nesta página" */
.seo-topo .ja-integramos .nomes a{text-decoration-thickness:1px;text-underline-offset:3px}
.seo-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 */
  .seo-topo .hero-fluxo .ui .linha:first-child{display:grid;justify-items:start;align-content:start;gap:4px;min-height:40px}
  .seo-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 */
  .seo-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .seo-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 */
  .seo-topo .ja-integramos > b{margin-bottom:0}
  .seo-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 */
.seo-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
/* o que fizemos à esquerda e os três números à direita.
   As colunas e o vão são os do cabeçalho do bloco (.pratica-top: 1.1fr, .9fr e 40px), para os números começarem na mesma linha vertical do texto de apoio */
.seo-caso{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start;margin-top:44px}
.seo-caso h3{font-size:1.2rem;color:var(--titulo)}
.seo-feito{margin-top:14px;border-top:1px solid var(--linha)}
.seo-feito li{padding:14px 0;border-bottom:1px solid var(--linha);color:var(--fg2);font-size:15.5px;line-height:1.5}
.seo-feito b{display:block;color:var(--titulo)}
/* os três números: dois lado a lado e o terceiro na linha inteira, como no case */
.seo-placar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.seo-num{padding:18px 20px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip)}
.seo-num-largo{grid-column:1 / -1}
.seo-num-n{display:block;font-size:clamp(2rem,3.2vw,2.6rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--oliva);font-variant-numeric:tabular-nums;white-space:nowrap}
.seo-num-r{display:block;margin-top:8px;font-size:14.5px;line-height:1.4;color:var(--fg2)}
/* depoimento do case: a foto à esquerda, a fala e o nome à direita (o cartão da casa, .depo-assume, põe os três em fila) */
.seo-depo{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:start;margin-top:28px}
.seo-depo img{grid-row:1 / span 2}
.seo-depo blockquote,.seo-depo figcaption{grid-column:2}
/* a ficha vem logo depois do depoimento: o respiro de cima é o dele */
.seo-pratica .tg-base{margin-top:18px}
/* a ficha tem uma linha só de dados: sem a sobra embaixo (a lista trazia a margem padrão do navegador) */
.seo-pratica .ficha{padding-bottom:12px}
.seo-pratica .tg-dados{margin-bottom:0}

/* ---------- 4. o que entra no SEO (#seo) ---------- */
/* três clientes com número, abaixo dos três cartões da casa */
.seo-provas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.seo-prova{display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:22px 24px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip)}
.seo-prova-cab{display:grid;gap:12px;justify-items:start}
.seo-prova-cab img{height:34px;width:auto}
/* o arquivo do logo da Koin tem uma margem transparente à esquerda: sem o recuo, o logo ficava 8px para dentro do texto */
.seo-prova-cab img[src*="koin"]{margin-left:-8px}
.seo-prova .tag{font-size:13px;font-weight:600;color:var(--acento)}
.seo-prova p{font-size:15px;color:var(--fg2)}
.seo-prova p b{color:var(--titulo)}
.seo-prova .link-seta{justify-self:start}

/* ---------- 5. GEO (#geo): o bloco de duas colunas da página de integração, em fundo papel ---------- */
/* no papel, o cartão da lista ficava da cor do fundo */
.seo-geo .auto-lista li{background:var(--branco)}
.seo-ja{margin-top:20px;max-width:54ch}
.seo-ja b{color:var(--titulo)}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .seo-caso{grid-template-columns:minmax(0,1fr);gap:28px}
  .seo-provas{grid-template-columns:minmax(0,1fr);gap:12px}
}
@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 inteira */
  .seo-pratica .tg-ficha .tg-dados > div:last-child{grid-column:1 / -1}
}
@media (max-width:620px){
  .seo-num{padding:14px 14px}
  .seo-depo{grid-template-columns:48px minmax(0,1fr);column-gap:12px}
  .seo-depo img{width:48px;height:48px}
}