/* Página WhatsApp e atendimento (/whatsapp-e-atendimento/). Só o que é desta página. A base vem do previa.css e do previa-servico.css. Prefixo wa-.
   O que é novo: o desenho do bloco "Na prática" (.wa-conversa: um cartão de conversa com quatro momentos numerados, ao lado da lista .leitura),
   a ficha "Onde está em uso" (.wa-uso, sobre a ficha .tg-ficha) e a grade de quatro etapas (.wa-etapas).
   Rótulos em Fira Sans. Ilustração sem número, sem nome de pessoa e sem tempo de resposta. */

/* ---------- 1. topo ---------- */
/* atalhos "Nesta página" */
.wa-topo .ja-integramos .nomes a{text-decoration-thickness:1px;text-underline-offset:3px}
.wa-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
     (lado a lado, "Chatbot e IA" e a pílula encostavam na borda do cartão a 768px).
     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, e a terceira tela saía mais baixa */
  .wa-topo .hero-fluxo .ui .linha:first-child{display:grid;justify-items:start;align-content:start;gap:4px;min-height:40px}
  .wa-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 */
  .wa-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .wa-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 */
  .wa-topo .ja-integramos > b{margin-bottom:0}
  .wa-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 */
.wa-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
/* o desenho à esquerda e os quatro momentos à direita.
   As colunas e o vão são os do cabeçalho do bloco (.pratica-top: 1.1fr, .9fr e 40px), para a lista começar na mesma linha vertical do texto de apoio */
.wa-conversa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;margin-top:44px}
/* a malha de pontos (20px) parte do centro da moldura e fica meio passo acima do cartão: as bordas do cartão caem entre duas fileiras,
   e nenhum ponto aparece no recorte do canto arredondado (a 1366px um ponto encostava no canto de cima, à direita) */
.wa-tela{padding:28px 28px 16px;border-radius:var(--raio);border:1px solid var(--linha);background:radial-gradient(circle,var(--linha) 1.2px,transparent 1.7px) 50% 8px/20px 20px}
/* o cartão .ui nasce solto (posição absoluta e 37% de largura): aqui ele ocupa a moldura */
.wa-tela .ui{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:420px;margin-inline:auto;font-size:14px}
.wa-tela .ui header{padding:10px 14px;font-size:14px}
.wa-tela .ui header small{opacity:1}
.wa-tela .ui .corpo{padding:14px 14px 16px;gap:10px}
/* cada momento da conversa: o número à esquerda, igual ao da lista ao lado */
.wa-l{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:center}
.wa-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--oliva);color:var(--roxo-900);font:700 12px/1 var(--fonte);font-variant-numeric:tabular-nums}
.wa-l .bolha{justify-self:start;max-width:86%;padding:9px 12px}
.wa-l .bolha.resp{justify-self:end}
.wa-ia{display:block;margin-top:3px;font-size:11px;font-weight:600;color:var(--roxo)}
.wa-l-linha{padding-top:10px;border-top:1px solid #ECEAE0}
.wa-l-linha + .wa-l-linha{padding-top:0;border-top:0}
.wa-tela figcaption{margin-top:14px;text-align:center;font-size:13px;color:var(--fg2)}
/* ficha "Onde está em uso": a ficha da casa (.tg-ficha), com o logo do cliente no lugar de um dos valores.
   O arquivo do logo tem 74px de altura: a 37px ele sai nítido em tela de alta densidade (a 44px saía borrado) */
.wa-uso .tg-dados dd img{display:block;width:auto;height:37px;margin:-7px 0 -7px -1px}
/* a ficha tem uma linha só de dados: sem a sobra embaixo (a lista trazia a margem padrão do navegador, 14,5px) */
.wa-uso.ficha{padding-bottom:12px}
.wa-uso .tg-dados{margin-bottom:0}

/* ---------- 4. o que fazemos (#o-que-fazemos): o bloco de duas colunas da página de integração, com uma nota a mais ---------- */
.wa-outro-crm{margin-top:20px;max-width:54ch}
.wa-outro-crm b{color:var(--titulo)}

/* ---------- 5. processo (#processo): quatro etapas (a grade da casa é de cinco) ---------- */
@media (min-width:1101px){
  .etapas.wa-etapas{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .wa-conversa{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (min-width:621px) and (max-width:980px){
  /* a ficha da casa cai para duas colunas no tablet; aqui são três dados curtos, que cabem numa linha só */
  .wa-uso .tg-dados{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}
}
@media (max-width:620px){
  .wa-tela{padding:18px 14px 12px;background-position:50% -2px}
  .wa-tela .ui{font-size:13.5px}
  .wa-tela figcaption{font-size:14px}
}