/* Como trabalhamos (slug como-trabalhamos). Só o que o modelo de página interna não tem:
   o painel do topo, a linha "Você aprova" da sanfona, as duas colunas de quem faz o quê e a tabela de pra quem é.
   Cores só da paleta da MIV (cap. 2): os cinzas soltos (#8A8A8A, #A3A3A3, #484448, #555, #D6D6D6, #3A3A3A...) viraram
   #999999, #686868, #575757 e #F5F7F9, e a coluna "Não é pra você se" deixou de usar o token --fx-cinza-claro. */

/* Altura dos visuais montados: um espaçador vazio com a proporção (o aspect-ratio na própria caixa, que tem overflow escondido, zera a altura dela no flex do Elementor) */
body.tds-pg-como-trabalhamos .vis-espaco { display: block; }
/* no celular o Elementor põe flex-wrap: wrap nos containers, e coluna com wrap zera a altura de visual sem imagem (defeito do bloco compartilhado) */
body.tds-pg-como-trabalhamos .e-con.fx-pg-topo__vis, body.tds-pg-como-trabalhamos .e-con.fx-escura__vis { --flex-wrap: nowrap; flex-wrap: nowrap; }
body.tds-pg-como-trabalhamos .ct-painel > .vis-espaco { aspect-ratio: 627 / 489; }
@media (max-width: 767px) {
  body.tds-pg-como-trabalhamos .ct-painel > .vis-espaco { aspect-ratio: 358 / 345; }
}

/* Topo: painel de um projeto, no laranja chapado dos cartões da Home, com o cartão branco da interface */
body.tds-pg-como-trabalhamos .ct-painel {
  position: relative; border-radius: 27px; overflow: hidden;
  background: #EF5433;
  font-family: var(--fx-texto); color: var(--fx-tinta);
}
/* o miolo absoluto é o contêiner das medidas em cqw (as letras e os cartões acompanham a largura do painel) */
body.tds-pg-como-trabalhamos .ct-painel__in { position: absolute; inset: 0; container-type: inline-size; }
body.tds-pg-como-trabalhamos .ct-painel__card {
  position: absolute; left: 7%; top: 6%; width: 70%; background: #fff; border-radius: 3cqw; padding: 3.4cqw 4.2cqw 2.8cqw;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .45);
}
body.tds-pg-como-trabalhamos .ct-painel__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 2cqw; border-bottom: 1px solid #F5F7F9; }
body.tds-pg-como-trabalhamos .ct-painel__cab strong { font: 800 clamp(13px, 3.6cqw, 23px)/1.1 var(--fx-titulo); color: var(--fx-tinta); }
body.tds-pg-como-trabalhamos .ct-painel__cab span { font: 600 clamp(9px, 2cqw, 13px)/1 var(--fx-texto); color: var(--fx-laranja); }
body.tds-pg-como-trabalhamos .ct-painel__lista { list-style: none; margin: 0; padding: 0; }
body.tds-pg-como-trabalhamos .ct-painel__lista li { display: flex; align-items: center; gap: 2.4cqw; padding: 1.9cqw 0; border-bottom: 1px solid #F5F7F9; }
body.tds-pg-como-trabalhamos .ct-painel__lista li:last-child { border-bottom: 0; padding-bottom: 0; }
body.tds-pg-como-trabalhamos .ct-painel__lista i { flex: none; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; box-shadow: inset 0 0 0 2px #999999; }
body.tds-pg-como-trabalhamos .ct-painel__lista li.is-ok i { box-shadow: none; background: var(--fx-verde); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-como-trabalhamos .ct-painel__lista li.is-vez i { box-shadow: inset 0 0 0 2px var(--fx-laranja); background: radial-gradient(circle, var(--fx-laranja) 0 34%, transparent 36%); }
body.tds-pg-como-trabalhamos .ct-painel__lista span { flex: 1 1 auto; min-width: 0; }
body.tds-pg-como-trabalhamos .ct-painel__lista b { display: block; font: 600 clamp(10px, 2.6cqw, 16.5px)/1.25 var(--fx-texto); color: var(--fx-tinta); }
body.tds-pg-como-trabalhamos .ct-painel__lista small { display: block; margin-top: .3em; font: 400 clamp(8.5px, 2.1cqw, 13.5px)/1.25 var(--fx-texto); color: #686868; }
body.tds-pg-como-trabalhamos .ct-painel__lista em { flex: none; font: 600 clamp(8px, 1.9cqw, 12px)/1 var(--fx-texto); font-style: normal; padding: .55em .9em; border-radius: 999px; background: #F5F7F9; color: #686868; white-space: nowrap; }
body.tds-pg-como-trabalhamos .ct-painel__lista li.is-ok em { background: rgba(40, 180, 70, .12); color: #1F8A37; }
body.tds-pg-como-trabalhamos .ct-painel__lista li.is-vez em { background: rgba(239, 84, 51, .12); color: var(--fx-laranja-esc); }
body.tds-pg-como-trabalhamos .ct-painel__aviso {
  position: absolute; right: 4%; bottom: 4.5%; width: 46%; display: flex; align-items: center; gap: 2.4cqw;
  background: #fff; border-radius: 2.6cqw; padding: 2.6cqw 3cqw; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .5);
}
body.tds-pg-como-trabalhamos .ct-painel__aviso i { flex: none; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--fx-laranja); display: grid; place-items: center; }
body.tds-pg-como-trabalhamos .ct-painel__aviso i::before { content: ""; width: 48%; height: 48%; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-como-trabalhamos .ct-painel__aviso span { flex: 1 1 auto; min-width: 0; }
body.tds-pg-como-trabalhamos .ct-painel__aviso b { display: block; font: 600 clamp(10px, 2.6cqw, 16px)/1.2 var(--fx-texto); color: var(--fx-tinta); }
body.tds-pg-como-trabalhamos .ct-painel__aviso small { display: block; margin-top: .25em; font: 400 clamp(8.5px, 2cqw, 13px)/1.2 var(--fx-texto); color: #686868; }
body.tds-pg-como-trabalhamos .ct-painel__aviso em { align-self: flex-start; font: 400 clamp(8px, 1.8cqw, 11.5px)/1 var(--fx-texto); font-style: normal; color: #999999; }

/* Cartões de antes do contrato: quatro numa linha, na ordem em que acontecem */
body.tds-pg-como-trabalhamos #antes .fx-card__t .elementor-heading-title { font-size: clamp(21px, 0.5vw + 15px, 25px); }
body.tds-pg-como-trabalhamos #antes .e-con.fx-card { padding-inline: clamp(24px, 1.9vw, 36px); }
body.tds-pg-como-trabalhamos #antes .fx-card__d, body.tds-pg-como-trabalhamos #antes .fx-card__d p { font-size: clamp(16px, 0.2vw + 13.5px, 18px); }

/* Sanfona: o texto do passo ativo tem duas partes (o que acontece e onde o cliente entra) */
body.tds-pg-como-trabalhamos .e-con.fx-passos { height: clamp(440px, 31vw, 500px); }
body.tds-pg-como-trabalhamos .fx-passo .fx-txt, body.tds-pg-como-trabalhamos .fx-passo .fx-txt p { font-size: clamp(16px, 0.2vw + 13.5px, 17.5px); line-height: 1.45; }
body.tds-pg-como-trabalhamos .e-con.fx-passo__txt { width: min(560px, 100%); gap: 18px; }
body.tds-pg-como-trabalhamos .fx-passo .fx-txt p.ct-papel { margin-top: 18px; padding-top: 16px; border-top: 1px solid #575757; color: #fff; }
body.tds-pg-como-trabalhamos .fx-passo .fx-txt p.ct-papel strong { color: var(--fx-laranja); font-weight: 700; }

/* Faixa preta: quem faz o quê, em dois cartões */
body.tds-pg-como-trabalhamos .ct-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
body.tds-pg-como-trabalhamos .ct-dupla__card { background: var(--fx-creme); border-radius: 17px; padding: clamp(26px, 2.4vw, 46px) clamp(22px, 1.9vw, 36px); }
body.tds-pg-como-trabalhamos .ct-dupla__card--voce { background: var(--fx-tinta); box-shadow: inset 0 0 0 1px #575757; }
body.tds-pg-como-trabalhamos .ct-dupla__t { margin: 0 0 clamp(18px, 1.6vw, 28px); font: 800 clamp(22px, 0.8vw + 14px, 28px)/1.1 var(--fx-titulo); color: var(--fx-tinta); }
body.tds-pg-como-trabalhamos .ct-dupla__card--voce .ct-dupla__t { color: #fff; }
body.tds-pg-como-trabalhamos .ct-dupla ul { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.1vw, 20px); }
body.tds-pg-como-trabalhamos .ct-dupla li { position: relative; padding-left: 24px; font-size: clamp(15.5px, 0.25vw + 12.5px, 18px); line-height: 1.4; color: #575757; }
body.tds-pg-como-trabalhamos .ct-dupla__card--voce li { color: var(--fx-cinza-claro); }
body.tds-pg-como-trabalhamos .ct-dupla li::before { content: ""; position: absolute; left: 0; top: .36em; width: 12px; height: 12px; border-radius: 50%; background: var(--fx-laranja); }
body.tds-pg-como-trabalhamos .fx-escura .fx-txt p + p { margin-top: 1em; }

/* Pra quem é e pra quem não é: as duas colunas no desenho da tabela da Home */
body.tds-pg-como-trabalhamos .e-con.ct-pqe-sec { padding-top: clamp(80px, 7vw, 140px); }
body.tds-pg-como-trabalhamos .ct-pqe { display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden; text-align: left; }
body.tds-pg-como-trabalhamos .ct-pqe__col { padding: clamp(30px, 3.4vw, 64px) clamp(22px, 3.4vw, 64px); }
body.tds-pg-como-trabalhamos .ct-pqe__col--sim { background: var(--fx-tinta); }
body.tds-pg-como-trabalhamos .ct-pqe__col--nao { background: #F5F7F9; }
body.tds-pg-como-trabalhamos .ct-pqe__t { margin: 0 0 clamp(22px, 2vw, 36px); font: 800 clamp(22px, 0.8vw + 14px, 30px)/1.1 var(--fx-titulo); color: #fff; }
body.tds-pg-como-trabalhamos .ct-pqe__col--nao .ct-pqe__t { color: var(--fx-tinta); }
body.tds-pg-como-trabalhamos .ct-pqe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 1.3vw, 22px); }
body.tds-pg-como-trabalhamos .ct-pqe li { display: flex; gap: 14px; align-items: flex-start; font-weight: 600; font-size: clamp(16px, 0.3vw + 12px, 18px); line-height: 1.35; }
body.tds-pg-como-trabalhamos .ct-pqe__col--sim li { color: #fff; }
body.tds-pg-como-trabalhamos .ct-pqe__col--nao li { color: #575757; }
body.tds-pg-como-trabalhamos .ct-pqe li i { flex: none; width: 22px; height: 22px; margin-top: .05em; }
body.tds-pg-como-trabalhamos .ct-pqe__col--sim li i { background: var(--fx-laranja); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-como-trabalhamos .ct-pqe li i.ct-x { position: relative; border-radius: 50%; background: #999999; }
body.tds-pg-como-trabalhamos .ct-pqe li i.ct-x::before, body.tds-pg-como-trabalhamos .ct-pqe li i.ct-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; border-radius: 2px; background: #F5F7F9; transform: translate(-50%, -50%) rotate(45deg); }
body.tds-pg-como-trabalhamos .ct-pqe li i.ct-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 1024px) {
  body.tds-pg-como-trabalhamos .ct-dupla { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  body.tds-pg-como-trabalhamos .e-con.fx-passos { height: auto; }
  body.tds-pg-como-trabalhamos .e-con.fx-passo__txt { width: 100%; }
  body.tds-pg-como-trabalhamos .ct-pqe { grid-template-columns: 1fr; }
  body.tds-pg-como-trabalhamos .ct-dupla { grid-template-columns: 1fr 1fr; }
  /* no celular o texto de quem faz o quê vem antes dos dois cartões, que sem o título ficam sem contexto */
  body.tds-pg-como-trabalhamos #quem-faz .fx-escura__vis { order: 2; }
}
@media (max-width: 767px) {
  body.tds-pg-como-trabalhamos .ct-painel { border-radius: 20px; }
  /* painel do topo com letra de ler no celular: ele cresce um pouco na altura pra caber */
  body.tds-pg-como-trabalhamos .ct-painel > .vis-espaco { aspect-ratio: 358 / 375; }
  body.tds-pg-como-trabalhamos .ct-painel__card { left: 4%; top: 5%; width: 92%; }
  body.tds-pg-como-trabalhamos .ct-painel__aviso { width: 70%; right: 4%; bottom: 4%; }
  body.tds-pg-como-trabalhamos .ct-painel__cab strong { font-size: 16px; }
  body.tds-pg-como-trabalhamos .ct-painel__cab span { font-size: 12px; }
  body.tds-pg-como-trabalhamos .ct-painel__lista b, body.tds-pg-como-trabalhamos .ct-painel__aviso b { font-size: 13.5px; }
  body.tds-pg-como-trabalhamos .ct-painel__lista small, body.tds-pg-como-trabalhamos .ct-painel__aviso small { font-size: 12px; }
  body.tds-pg-como-trabalhamos .ct-painel__lista em { font-size: 11.5px; padding: .5em .75em; }
  body.tds-pg-como-trabalhamos .ct-painel__aviso em { font-size: 11px; }
  body.tds-pg-como-trabalhamos .e-con.ct-pqe-sec { padding-top: 56px; }
  body.tds-pg-como-trabalhamos .ct-dupla { grid-template-columns: 1fr; }
  body.tds-pg-como-trabalhamos .ct-pqe__col { padding: 28px 22px; }
}
@media (max-width: 380px) {
  body.tds-pg-como-trabalhamos .ct-painel > .vis-espaco { aspect-ratio: 358 / 420; }
}