/* Página Assumimos seu projeto (/desenvolvimento/troca-de-fornecedor/). Só o que é desta página.
   A base vem do previa.css e do previa-servico.css (topo, sinais, etapas, cartões dos caminhos, perguntas, para continuar). Prefixo tf-.
   Blocos novos: .tf-passos (o processo com quatro etapas, e não cinco), .tf-olha (o que a auditoria olha, com o retrato ilustrado ao lado)
   e os cartões dos três caminhos com título em H4. Rótulos em Fira Sans. Ilustrações sem número, sem nome de pessoa, de empresa ou de tecnologia. */

/* ---------- 1. topo ---------- */
/* a linha de apoio é a forma B (três fatos da casa, sem link): os ajustes dos atalhos "Nesta página" não se aplicam aqui */
@media (min-width:621px) and (max-width:980px){
  /* cartões estreitos: quando rótulo e valor não cabem lado a lado, o valor desce para a linha de baixo (nada é cortado) */
  .tf-topo .hero-fluxo .ui .linha{flex-wrap:wrap;row-gap:2px}
  .tf-topo .hero-fluxo .ui .linha > b{text-align:left}
  /* as três telas com a mesma altura: a pílula é mais alta que o valor em negrito, e a terceira tela saía 1px fora da linha das outras.
     Só as telas esticam: as ligações continuam no meio da altura */
  .tf-topo .hero-fluxo .ui{align-self:stretch}
}
@media (min-width:621px) and (max-width:767px){
  /* nesta faixa o valor descia em duas das três telas e a do meio ficava mais baixa: nas três o valor fica embaixo do rótulo, como no celular.
     Só a primeira linha: a segunda continua escondida abaixo de 981px */
  .tf-topo .hero-fluxo .ui .linha:first-child{display:grid;justify-items:start;gap:4px}
}
@media (min-width:981px) and (max-width:1060px){
  /* o primeiro e o terceiro cartão saíam da moldura pontilhada */
  .tf-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .tf-topo .hero-fluxo .ui:nth-child(5){transform:translateX(8%)}
}
@media (max-width:620px){
  /* no celular os três fatos ocupam duas linhas: o ponto separador fica antes de cada um e some no começo da linha
     (cai fora da área visível da lista), então nunca sobra um ponto solto no fim. É o mesmo ajuste dos atalhos de RD Station */
  .tf-topo .ja-integramos .nomes{display:flex;flex-wrap:wrap;margin-left:-4px;padding-left:4px;overflow:hidden;overflow-x:clip;overflow-y:visible}
  .tf-topo .ja-integramos .nomes > span{position:relative;margin-right:20px}
  .tf-topo .ja-integramos .nomes > span:last-child{margin-right:0}
  .tf-topo .ja-integramos .nomes > span::after{content:none}
  .tf-topo .ja-integramos .nomes > span::before{content:"·";position:absolute;left:-12px;top:0;font-weight:400;color:var(--fg2)}
}
@media (max-width:339px){
  /* em tela de 320px, "Troca de fornecedor" não cabia numa linha e "Troca" ficava sozinha na primeira: o título fica um pouco menor */
  .tf-topo h1{font-size:1.9rem}
}

/* ---------- 2. sinais: o depoimento opcional (desligado na página; ver o comentário na fonte) ---------- */
.tf-depo{max-width:760px;margin-top:36px}

/* ---------- 3. como funciona a troca: a casca do bloco de prova com as etapas dentro ---------- */
/* bloco de prova: o título fica em meia coluna e precisa ser menor */
.tf-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
/* a garantia é a primeira frase do fecho: em branco, para não se perder no texto de apoio */
.tf-pratica .fecho p b{font-weight:700;color:var(--titulo)}
/* quatro etapas (a grade do serviço foi desenhada para cinco). As quatro colunas valem de 1101px para cima.
   Até 1100px o processo vira a linha do tempo vertical da casa, como em toda página do modelo: na conferência da onda (08/10/2026)
   saiu a regra que mantinha as quatro colunas entre 981 e 1100px, porque WhatsApp e atendimento, que também tem quatro etapas, já empilhava nessa faixa */
@media (min-width:1101px){
  .etapas.tf-passos{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0;max-width:none}
}

/* ---------- 4. a auditoria e os três caminhos ---------- */
.tf-olha{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:40px}
.tf-olha .sub-t{margin-top:0}
/* as quatro áreas: o nome à esquerda e, à direita, o que entra nela e a pergunta que a auditoria responde */
.tf-areas{margin-top:16px;border-top:1px solid var(--linha)}
.tf-areas > div{display:grid;grid-template-columns:7.5em minmax(0,1fr);column-gap:20px;padding:14px 0;border-bottom:1px solid var(--linha)}
.tf-areas dt{font-weight:700;color:var(--titulo)}
.tf-areas dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--fg2)}
/* o retrato da auditoria: o cartão .ui da casa numa moldura pontilhada, como o desenho do topo */
.tf-retrato{padding:26px 26px 16px;border-radius:var(--raio);border:1px solid var(--linha);background:radial-gradient(circle,#DDDACD 1.2px,transparent 1.7px) 0 0/20px 20px}
.tf-retrato .ui{position:relative;width:100%;max-width:none;font-size:14px;line-height:1.4}
.tf-retrato .ui header{padding:11px 16px;font-size:14px}
.tf-retrato .ui header small{font-size:12px;opacity:1}
.tf-retrato .ui .corpo{padding:14px 16px 16px;gap:10px}
.tf-retrato .ui .pill{font-size:12px;padding:3px 10px}
.tf-retrato .ui .pill.tf-risco{background:#F8DFDA;color:#8A2A1C}
.tf-retrato .ui .tf-rec{margin-top:4px;padding-top:12px;border-top:1px solid #ECEAE0}
.tf-retrato .ui .tf-rec > span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--roxo)}
.tf-retrato .ui .tf-rec > b{color:var(--roxo-900);font-weight:700}
.tf-retrato figcaption{margin-top:14px;text-align:center;font-size:13px;color:var(--fg2)}
/* os três caminhos: o título do cartão é H4 (o H3 é "Os três caminhos"), com a cara do H3 dos cartões do serviço */
.tf-auditoria .caminhos{margin-top:18px}
.tf-auditoria .caminho h4{font-size:1.45rem;color:var(--roxo-900)}
@media (min-width:981px){
  /* lado a lado, as linhas Quando, Fica e Muda ficam na mesma altura nos três cartões, mesmo quando um texto ocupa mais linhas */
  .tf-auditoria .caminhos > .caminho{grid-row:span 6}
  .tf-auditoria .caminho dl{grid-row:span 3;grid-template-rows:subgrid;row-gap:6px}
}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .tf-olha{grid-template-columns:1fr}
  /* a moldura ocupa a largura do texto, como a do desenho do topo, e o cartão fica no centro dela */
  .tf-retrato .ui{max-width:520px;margin-inline:auto}
}
@media (max-width:620px){
  .tf-areas > div{grid-template-columns:1fr;row-gap:2px}
  .tf-retrato{padding:18px 14px 12px}
  .tf-retrato .ui .linha{flex-wrap:wrap;row-gap:3px}
}