/* Página "Marketing e tecnologia num time só" (/marketing-e-tecnologia/). Fonte: _paginas/marketing-e-tecnologia.html.
   Só o que é desta página, com o prefixo ts-. Carrega depois de previa.css, previa-servico.css (topo, FAQ com lembrete),
   previa-sobre.css (janela "Quem cuida da sua conta") e previa-setor.css (passos e garantia). Cores pelas variáveis de
   superfície (data-surf). Escrito do celular para cima: base 390, depois 621, 821, 901, 981 e 1101.

   Blocos novos:
   1. .ts-versus  infográfico "três fornecedores ou um time" (dois painéis; o fio da direita se desenha uma vez)
   2. .ts-blocos  quadro da composição: três blocos de base e quatro tracejados que podem somar
   3. .ts-conta   cartão de conta: marca, "cliente desde" e o que a conta tem hoje, em Operamos / Integramos / Construímos
   Fira Sans em tudo (rótulos, pílulas e números). Nenhum texto verde-amarelo sobre fundo claro. */

/* respiro das seções: o do previa.css (.sec), o mesmo das outras páginas da trilha Soluções (hub, RD Station, serviço e Dados) */
@media (max-width:380px){.ts-pg section:not(.contato) > .caixa > .h2{font-size:1.7rem}}

/* ---------- 1. topo: texto + janela dos papéis (a do Sobre) ---------- */
.ts-topo h1 .realce{color:var(--roxo)}
.ts-topo .acoes .btn{justify-content:center}
.ts-topo .acoes .btn-s{background:transparent}
.ts-texto{min-width:0}
.ts-topo .sb-janela{min-width:0;width:100%;max-width:560px;justify-self:center}
/* a 360 a trilha (o nome de página mais longo do site) quebrava com a barra solta no começo da segunda linha: sai "Início" */
@media (max-width:380px){
  .ts-topo .migalhas li:first-child{display:none}
  .ts-topo .migalhas li:nth-child(2)::before{content:none}
}
@media (min-width:981px){
  .ts-topo .caixa{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
  .ts-topo .sb-janela{justify-self:end}
}
@media (min-width:981px) and (max-width:1180px){
  /* coluna da janela mais larga, para "Desenvolvimento" caber com folga nas três colunas de papéis */
  .ts-topo .caixa{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ts-topo .sb-papeis li{padding-inline:4px}
}
@media (max-width:620px){
  /* no celular a janela vem logo abaixo dos botões: mesma grade de duas colunas do Sobre, com as casas mais baixas */
  .ts-topo .sb-papeis{gap:8px}
  .ts-topo .sb-papeis li{gap:8px;padding:12px 6px}
  .ts-topo .sb-papeis li.sb-ti{padding:12px}
  .ts-topo .sb-ico{width:40px;height:40px}
  .ts-topo .sb-ico svg{width:21px;height:21px}
}

/* ---------- 2. três fornecedores ou um time: o infográfico ---------- */
.ts-versus{--ts-fio:#8A887E;--vao:26px;position:relative;display:grid;gap:14px;margin-top:30px}
.ts-lado{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0;padding:20px 16px 20px;border-radius:var(--raio)}
.ts-antes{background:var(--papel);border:1px solid #E3E1D6;color:var(--tinta)}
.ts-depois{background:radial-gradient(130% 150% at 88% 0%,#8F2889 0%,var(--roxo) 38%,var(--roxo-900) 100%);color:#fff;box-shadow:var(--sombra)}
.ts-lado-t{font:700 12.5px/1.3 var(--fonte);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}
.ts-depois .ts-lado-t{color:var(--oliva)}

/* nó: ícone em círculo + nome + frase curta */
.ts-nos{display:grid;row-gap:var(--vao)}
.ts-nos li,.ts-voce{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:center}
.ts-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%}
.ts-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ts-tx{display:grid;gap:2px;min-width:0}
.ts-tx b{font-size:16px;font-weight:700;line-height:1.25}
.ts-tx > span{font-size:14.5px;line-height:1.4;text-wrap:pretty}

/* painel da esquerda: três cartões soltos. Entre eles, o fio interrompido (tracejado com um X); à direita, o trilho
   tracejado que desce de cada cartão até "Você", que leva o recado */
.ts-antes .ts-nos{padding-right:44px}
.ts-antes .ts-nos li{padding:12px 14px;border:1px solid #D9D6CA;border-radius:12px;background:#fff}
.ts-antes .ts-ic{background:var(--papel);color:var(--tinta-2);box-shadow:inset 0 0 0 1px #D5D2C6}
.ts-antes .ts-tx > span{color:var(--tinta-2)}
.ts-antes .ts-nos li::after{content:"";box-sizing:content-box;position:absolute;left:calc(100% + 1px);top:50%;bottom:calc(-1 * var(--vao) - 1px);width:20px;border-top:2px dashed var(--ts-fio);border-right:2px dashed var(--ts-fio)}
.ts-antes .ts-nos li:first-child::after{border-top-right-radius:12px}
.ts-antes .ts-nos li:last-child::after{bottom:-9px}
.ts-antes .ts-nos li + li .ts-tx::before{content:"";box-sizing:content-box;position:absolute;left:calc(100% + 21px);top:-1px;width:0;height:calc(50% + 1px);border-right:2px dashed var(--ts-fio)}
.ts-antes .ts-nos li + li::before{content:"";position:absolute;left:24px;top:calc(-1 * var(--vao) - 1px);width:20px;height:var(--vao);
  background:
    linear-gradient(45deg,transparent calc(50% - 1px),#A13A3A calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) center/8px 8px no-repeat,
    linear-gradient(-45deg,transparent calc(50% - 1px),#A13A3A calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) center/8px 8px no-repeat,
    radial-gradient(circle at center,#fff 0 7.5px,#A13A3A 8px 9px,transparent 9.5px) center/20px 20px no-repeat,
    repeating-linear-gradient(180deg,var(--ts-fio) 0 4px,transparent 4px 8px) center/2px 100% no-repeat}
.ts-voce{padding:12px 14px;border-radius:12px}
.ts-antes .ts-voce{border:2px dashed var(--ts-fio);background:rgba(255,255,255,.55)}
.ts-antes .ts-voce .ts-ic{background:var(--tinta);color:#fff;box-shadow:none}
/* ponta do trilho, entrando em "Você" */
.ts-antes .ts-voce::before{content:"";position:absolute;right:15px;top:-10px;border:6px solid transparent;border-top:8px solid var(--ts-fio);border-bottom:0}

/* painel da direita: uma moldura só, o fio contínuo de ícone a ícone e a TI do cliente dentro */
.ts-moldura{display:grid;gap:14px;padding:14px;border:2px solid var(--oliva);border-radius:14px;background:rgba(42,8,40,.36);box-shadow:0 0 0 5px rgba(220,209,84,.14)}
.ts-depois .ts-nos li{align-items:start}
.ts-depois .ts-nos .ts-tx{align-content:center;min-height:40px}
.ts-depois .ts-ic{position:relative;z-index:1;background:var(--oliva);color:var(--roxo-900)}
.ts-depois .ts-tx b{color:#fff}
.ts-depois .ts-tx > span{color:rgba(255,255,255,.88)}
.ts-depois .ts-nos li:not(:last-child)::after{content:"";position:absolute;left:18.5px;top:20px;width:3px;height:calc(100% + var(--vao));background:var(--oliva);transform-origin:50% 0}
.ts-ti{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;padding:11px 12px;border-radius:10px;background:var(--oliva-suave);border:1.5px dashed var(--oliva-900);font-size:14.5px;line-height:1.3;text-align:center;color:var(--tinta-2)}
.ts-ti b{font-weight:800;color:var(--roxo-900)}
.ts-ti b::before{content:"+ ";color:var(--roxo)}
.ts-depois .ts-voce{border:2px solid rgba(255,255,255,.5);background:rgba(42,8,40,.36)}
.ts-depois .ts-voce .ts-ic{background:#fff;color:var(--roxo-900)}
/* um fio só entre "Você" e o time (16px do vão + as duas bordas) */
.ts-depois .ts-voce::before{content:"";position:absolute;left:32.5px;top:-20px;width:3px;height:20px;background:var(--oliva)}

/* fecho de cada painel */
.ts-pe{position:relative;margin-top:auto;padding:14px 0 0 30px;border-top:1px solid #D9D6CA;font-size:16px;font-weight:700;line-height:1.35}
.ts-depois .ts-pe{border-top-color:rgba(255,255,255,.22);color:#fff}
.ts-pe::before{content:"";position:absolute;left:0;top:15px;width:20px;height:20px;border-radius:50%}
.ts-antes .ts-pe::before{background:
    linear-gradient(45deg,transparent calc(50% - 1px),#fff calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) center/9px 9px no-repeat,
    linear-gradient(-45deg,transparent calc(50% - 1px),#fff calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) center/9px 9px no-repeat,
    #A13A3A}
.ts-depois .ts-pe::before{background:var(--oliva)}
.ts-depois .ts-pe::after{content:"";position:absolute;left:7px;top:19px;width:5px;height:9px;border:solid var(--roxo-900);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* a seta entre os painéis: para baixo no celular, para a direita no computador */
.ts-seta{position:relative;z-index:2;justify-self:center;display:grid;place-items:center;width:44px;height:44px;margin-block:-22px;border-radius:50%;background:var(--oliva);color:var(--roxo-900);box-shadow:0 0 0 5px #fff;transform:rotate(90deg)}
.ts-seta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

@media (min-width:621px){
  .ts-versus{margin-top:36px}
  .ts-lado{padding:24px 24px 24px}
  .ts-tx b{font-size:16.5px}
  .ts-tx > span{font-size:15px}
}
@media (min-width:981px){
  .ts-versus{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:44px}
  .ts-lado{padding:26px 28px 26px;gap:18px}
  .ts-seta{position:absolute;left:50%;top:50%;margin:-22px 0 0 -22px;transform:none}
}

/* o fio contínuo se desenha uma vez, quando o infográfico entra na tela (classes .armado e .vivo postas pelo script da
   página). O estado base é o final: sem JS, com movimento reduzido ou na impressão, tudo já vem desenhado. */
.ts-versus.armado .ts-depois .ts-nos .ts-ic{opacity:0;transform:scale(.4)}
.ts-versus.armado .ts-depois .ts-nos li::after{transform:scaleY(0)}
.ts-versus.vivo .ts-depois .ts-nos .ts-ic{animation:ts-acende .42s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc((var(--i,1) - 1) * .28s)}
.ts-versus.vivo .ts-depois .ts-nos li::after{animation:ts-fio .34s ease-out both;animation-delay:calc((var(--i,1) - 1) * .28s + .12s)}
@keyframes ts-acende{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes ts-fio{from{transform:scaleY(0)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .ts-versus.armado .ts-depois .ts-nos .ts-ic{opacity:1;transform:none}
  .ts-versus.armado .ts-depois .ts-nos li::after{transform:none}
}

/* ---------- 3. a composição: três blocos de base + quatro que podem somar ---------- */
.ts-blocos{display:grid;gap:12px;margin-top:30px}
.ts-grupo-t{display:flex;align-items:center;gap:10px;font:700 12.5px/1.3 var(--fonte);letter-spacing:.1em;text-transform:uppercase;color:var(--roxo)}
.ts-grupo-t::after{content:"";flex:1;height:1px;background:var(--linha)}
.ts-mais-t{margin-top:12px;color:var(--tinta-2)}
.ts-mais-t::before{content:"+";display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--oliva);color:var(--roxo-900);font:800 17px/1 var(--fonte);letter-spacing:0}
.ts-grupo{display:grid;gap:10px}
/* bloco em pé (ícone, rótulo da área, nome e frase alinhados por linha entre os blocos). O link do nome cobre o bloco inteiro */
.ts-bloco{position:relative;display:grid;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr) auto;row-gap:0;min-width:0;padding:16px 16px 18px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--branco);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.ts-base .ts-bloco{box-shadow:inset 0 4px 0 var(--oliva)}
.ts-mais .ts-bloco{background:rgba(255,255,255,.45);border:1.5px dashed #A9A698}
.ts-bloco .ts-ic{grid-column:1;grid-row:1;width:44px;height:44px;margin-bottom:12px;background:var(--roxo-claro);color:var(--roxo)}
.ts-bloco .ts-ic svg{width:23px;height:23px}
.ts-base .ts-ic{background:var(--oliva);color:var(--roxo-900)}
.ts-bloco::after{content:"→";grid-column:2;grid-row:1;align-self:start;font-weight:800;line-height:1.2;color:var(--roxo);transition:transform .15s ease}
.ts-rot{grid-column:1 / -1;grid-row:2;font-size:13px;font-weight:600;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--roxo)}
.ts-bloco h3{grid-column:1 / -1;grid-row:3;margin-top:4px;font-size:1.12rem;line-height:1.2;color:var(--titulo)}
.ts-bloco h3 a{color:inherit;text-decoration:none}
.ts-bloco h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ts-bloco h3 a:focus-visible{outline:none}
.ts-bloco:has(a:focus-visible){outline:3px solid var(--roxo);outline-offset:3px}
.ts-frase{grid-column:1 / -1;grid-row:4;margin-top:8px;font-size:14.5px;line-height:1.45;color:var(--fg2)}
.ts-bloco:hover{border-color:var(--roxo);transform:translateY(-2px)}
.ts-base .ts-bloco:hover{box-shadow:inset 0 4px 0 var(--oliva),0 14px 28px -20px rgba(42,8,40,.5)}
.ts-bloco:hover::after{transform:translateX(4px)}
.ts-bloco:hover h3{color:var(--roxo)}
@media (prefers-reduced-motion:reduce){.ts-bloco:hover,.ts-bloco:hover::after{transform:none}}
/* três exemplos de composição: os cartões .portes/.porte da Home (previa.css), aqui na largura toda da seção */
.ts-exemplos-t{margin-top:12px;color:var(--tinta-2)}
.ts-blocos .portes{margin-top:0}
@media (min-width:621px){
  /* a largura é a da seção inteira: três colunas já a partir do tablet (na Home a coluna é estreita e os exemplos empilham) */
  .ts-blocos .portes{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .ts-blocos .porte{grid-row:span 2;grid-template-rows:subgrid;grid-template-columns:none;column-gap:0}
}
.ts-fecho{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:26px;padding-top:22px;border-top:1px solid var(--linha)}
.ts-fecho p{flex:1 1 420px;max-width:70ch;font-size:15.5px;color:var(--fg2)}

@media (max-width:900px){
  /* base deitada: ícone à esquerda, texto no meio e a seta à direita */
  .ts-base .ts-bloco{grid-row:auto;grid-template-rows:none;grid-template-columns:44px minmax(0,1fr) auto;column-gap:14px;align-items:start;padding:18px 16px 16px}
  .ts-base .ts-bloco .ts-ic{grid-row:1 / span 3;margin-bottom:0}
  .ts-base .ts-bloco::after{grid-column:3;grid-row:1 / span 3;align-self:center}
  .ts-base .ts-rot,.ts-base .ts-bloco h3,.ts-base .ts-frase{grid-column:2;grid-row:auto}
  .ts-base .ts-frase{margin-top:5px}
}
@media (max-width:620px){
  /* no celular os quatro opcionais ficam deitados como os de base, um por linha e com a frase à vista (antes, em 2 × 2,
     a frase sumia e "CRM e processo comercial" passava da borda a 360) */
  .ts-mais .ts-bloco{grid-row:auto;grid-template-rows:none;grid-template-columns:38px minmax(0,1fr) auto;column-gap:14px;align-items:start;padding:14px 16px 14px}
  .ts-mais .ts-bloco .ts-ic{grid-row:1 / span 3;width:38px;height:38px;margin-bottom:0}
  .ts-mais .ts-bloco .ts-ic svg{width:20px;height:20px}
  .ts-mais .ts-bloco::after{grid-column:3;grid-row:1 / span 3;align-self:center}
  .ts-mais .ts-rot,.ts-mais .ts-bloco h3,.ts-mais .ts-frase{grid-column:2;grid-row:auto}
  .ts-mais .ts-bloco h3{font-size:1.02rem}
  .ts-mais .ts-frase{margin-top:4px}
}
@media (min-width:621px){
  .ts-blocos{gap:14px;margin-top:36px}
  .ts-grupo{gap:14px}
  .ts-bloco{padding:20px 20px 22px}
  .ts-mais{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:901px){
  .ts-base{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ts-mais{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ts-base .ts-bloco h3{font-size:1.3rem}
  .ts-base .ts-frase{font-size:15px}
  .ts-base .ts-bloco{padding:24px 24px 26px}
}
/* de 901 a 980, com quatro colunas estreitas, "e processo comercial" (trecho que não quebra) precisa de mais largura */
@media (min-width:901px) and (max-width:980px){
  .ts-mais .ts-bloco{padding-inline:16px}
  .ts-mais .ts-bloco h3{font-size:1.02rem}
}
@media (min-width:1101px){.ts-blocos{margin-top:44px}}

/* ---------- 4. contas que vivem assim: cartão de conta, com a prova de cada uma no pé ---------- */
.ts-contas{margin-top:28px}
.ts-conta{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:var(--raio);background:var(--card);color:var(--card-fg);box-shadow:var(--sombra)}
.ts-conta-marca{display:flex;align-items:center;flex:none;height:72px;padding:0 20px;background:var(--papel);border-bottom:1px solid #E3E1D6}
.ts-conta-marca img{width:auto;height:auto;max-width:170px;max-height:32px;object-fit:contain}
.ts-conta-marca img[src$="jabuticaba.svg"]{max-height:48px}
.ts-conta-corpo{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.ts-conta-corpo > small{font:700 12px/1.35 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--roxo)}
.ts-conta-corpo h3{margin-top:6px;font-size:1.3rem;line-height:1.2;color:var(--roxo-900)}
/* os três verbos do case e da Home, com a mesma legenda de pontos: anel (operamos), cheio (integramos) e oliva (construímos) */
.ts-comp{display:grid;gap:14px;margin:16px 0 18px}
.ts-comp dt{display:flex;align-items:center;gap:8px;font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.ts-comp dt::before{content:"";box-sizing:border-box;flex:none;width:10px;height:10px;border-radius:50%}
.ts-comp .opera dt::before{border:2px solid var(--roxo)}
.ts-comp .integra dt::before{background:var(--roxo)}
.ts-comp .constroi dt::before{background:var(--oliva-esc);box-shadow:0 0 0 1px var(--oliva-900)}
.ts-comp dd{margin:7px 0 0}
.ts-chips{display:flex;flex-wrap:wrap;gap:6px}
.ts-chips li{padding:5px 11px;border-radius:14px;background:var(--papel);font-size:13.5px;font-weight:600;line-height:1.3;color:var(--tinta)}
.ts-chips.nossos li{background:var(--oliva);color:var(--roxo-900)}
.ts-conta-nota{padding-top:14px;border-top:1px solid #ECEAE0;font-size:14.5px;line-height:1.5;color:var(--tinta-2)}
/* a prova da conta, no pé do cartão: depoimento com foto ou, na conta sem depoimento, a tela ilustrada. Ocupa o que sobrar
   de altura, para os três cartões fecharem na mesma linha sem buraco */
.ts-conta-prova{display:grid;align-content:center;flex:1;gap:12px;margin:14px 0 0;padding:16px;border-radius:12px;background:var(--papel)}
.ts-conta-depo blockquote{margin:0;font-size:15px;line-height:1.5;color:var(--tinta)}
.ts-conta-depo blockquote::before{content:"“";display:block;height:.5em;font-size:2.4rem;font-weight:800;line-height:.9;color:var(--roxo)}
.ts-conta-depo figcaption{display:flex;align-items:center;gap:12px}
.ts-conta-depo .foto-p{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--oliva)}
.ts-conta-depo figcaption > span{display:grid;gap:1px;min-width:0}
.ts-conta-depo figcaption b{font-size:15px;line-height:1.25;color:var(--tinta)}
.ts-conta-depo figcaption > span > span{font-size:13.5px;line-height:1.35;color:var(--tinta-2);text-wrap:balance}
.ts-conta-tela{justify-items:center;background:radial-gradient(circle,#DDDBCF 1.2px,transparent 1.7px) 0 0/20px 20px,var(--papel)}
.ts-conta-tela > .ui{position:relative;inset:auto;width:100%;max-width:290px;font-size:13.5px;box-shadow:0 14px 32px -20px rgba(42,8,40,.4),0 2px 6px rgba(42,8,40,.06)}
.ts-conta-tela > .ui header{padding:9px 12px;font-size:13.5px}
.ts-conta-tela > .ui .corpo{padding:10px 12px 12px;gap:6px}
.ts-conta-tela > .ui .pill{font-size:12px}
.ts-conta-links{display:flex;flex-wrap:wrap;gap:6px 22px;padding-top:16px}
.ts-conta-links a{display:inline-block;padding-block:12px;margin-block:-12px;font-size:14.5px;font-weight:700;color:var(--roxo);text-decoration:none}
.ts-conta-links a::after{content:"→";display:inline-block;margin-left:.3em;transition:transform .15s ease}
.ts-conta-links a:hover{text-decoration:underline;text-underline-offset:3px}
.ts-conta-links a:hover::after{transform:translateX(4px)}
.ts-conta-links a:focus-visible{outline-color:var(--roxo)}
@media (prefers-reduced-motion:reduce){.ts-conta-links a:hover::after{transform:none}}
@media (min-width:621px){.ts-contas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px}}
/* de 621 a 1020, a Technogym (a composição mais longa) ocupa a linha inteira: a composição à esquerda e a tela à direita */
@media (min-width:621px) and (max-width:1020px){
  .ts-contas > .ts-conta:first-child{grid-column:1 / -1}
  .ts-contas > .ts-conta:first-child .ts-conta-corpo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:24px;align-content:start}
  .ts-contas > .ts-conta:first-child .ts-conta-corpo > *{grid-column:1}
  .ts-contas > .ts-conta:first-child .ts-conta-prova{grid-column:2;grid-row:1 / span 4;align-self:center;margin-top:0}
}
/* no carrossel do celular os três cartões têm a mesma altura (a do mais alto): a prova ocupa a sobra e "Ver o case" fica sempre na base */
@media (min-width:1021px){.ts-contas{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}}

/* ---------- 5. como funciona: passos do setor (.setor-passos) + a garantia na largura toda ---------- */
.ts-garantia{margin-top:32px}
@media (min-width:1101px){
  .ts-garantia{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:40px;margin-top:40px}
  .ts-garantia .setor-acoes{flex-wrap:nowrap}
}
@media (max-width:620px){.ts-garantia{margin-top:28px}}

/* ---------- 6. perguntas: .faq + lembrete do serviço; depois, as pílulas "Para continuar" ---------- */
.ts-faq .faq-grade{margin-top:32px}
.ts-faq .faq-grade > div{min-width:0}
.ts-faq .faq-grade .faq{margin-top:0;max-width:none}
.ts-continuar{margin-top:28px;padding-top:24px;border-top:1px solid var(--linha)}
.ts-continuar-t{font-size:13px;font-weight:800;line-height:1.12;letter-spacing:.1em;text-transform:uppercase;color:var(--acento)}
.ts-continuar ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ts-continuar a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--linha);border-radius:999px;background:var(--branco);font-size:14.5px;font-weight:600;line-height:1.3;color:var(--titulo);text-decoration:none;transition:border-color .15s ease,color .15s ease}
.ts-continuar a:hover{border-color:var(--roxo);color:var(--roxo)}