/* Contato e orçamento: /orcamento/, /orcamento/obrigado/ e /contato/
   Só o que é destas três páginas (body.pg-ct). Blocos novos com o prefixo ct-, para não colidir com
   .contato, .passo, .assunto, .rotulo e .pessoa do previa.css. Cores pelas variáveis de superfície. */

/* ---------- comum às três ---------- */
[data-surf]{--ct-fio:#C6B92C}
html[data-dir="a"] [data-surf="roxo"],html[data-dir="a"] [data-surf="fundo"]{--ct-fio:var(--oliva)}
/* links dentro do texto: o mesmo desenho da página de serviço */
.pg-ct main section:not(.contato) :is(p,dd,li) > a:not(.btn):not(.link-seta){color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .15s ease}
.pg-ct main section:not(.contato) :is(p,dd,li) > a:not(.btn):not(.link-seta):hover{text-decoration-thickness:2px;text-decoration-color:var(--acento)}
.ct-nb{white-space:nowrap}
/* respiro das seções: a escala das páginas internas (a mesma dos cases e do hub), e não a da Home */
.pg-ct .sec{padding-block:clamp(48px,6vw,88px)}
/* perguntas: a pergunta é um h3 dentro do summary, como no serviço e nos cases */
.pg-ct .faq summary h3{display:inline;font-size:1.05rem;font-weight:700;line-height:1.4;color:inherit;letter-spacing:0}
.pg-ct .faq details > div p{max-width:70ch}
/* rótulo "ilustração" (a mesma regra do .rotulo-ilustrativa dos cases) */
.ct-ilustra{display:inline-block;padding:3px 9px;border:1px solid var(--linha);border-radius:999px;font-family:var(--fonte);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.ct-acoes{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:30px}
.pg-ct .pg-topo .caixa{align-items:center}
/* a coluna de texto começa sempre na mesma altura, logo abaixo da trilha (como nas páginas de serviço); só o cartão da direita
   fica centralizado. Em /contato/ o cartão é mais alto que o texto e o H1 descia 60px. */
.pg-ct .pg-topo .caixa > div{align-self:start}
/* sem linha órfã nos títulos e legendas curtas */
.pg-ct h1,.ct-lembrete-t,.ct-conversa figcaption span:last-child,.pg-orcamento .depo-assume figcaption{text-wrap:balance}

/* =========================================================
   /orcamento/ — Fale com um especialista
   ========================================================= */
/* 1. topo: texto à esquerda, o cartão "Como funciona" à direita e a linha de saída embaixo; pouco respiro, para o formulário aparecer logo */
.pg-orcamento .pg-topo .caixa{row-gap:clamp(18px,3vw,26px);padding-bottom:clamp(26px,4vw,40px)}
.ct-como{background:var(--card);color:var(--card-fg);border-radius:var(--raio);box-shadow:var(--sombra);padding:22px 24px}
.ct-como-t{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--roxo);margin-bottom:16px}
/* trilho de três passos: pílulas numeradas ligadas por um fio pontilhado; a terceira é opcional (contorno tracejado) */
.ct-trilho{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px;counter-reset:ct-t}
.ct-trilho li{position:relative;counter-increment:ct-t;display:grid;gap:4px;align-content:start}
.ct-trilho li::before{content:counter(ct-t);width:36px;height:36px;margin-bottom:6px;border-radius:50%;display:grid;place-items:center;background:var(--oliva);color:var(--roxo-900);font-family:var(--fonte);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.ct-trilho li:not(:last-child)::after{content:"";position:absolute;top:17px;left:44px;right:-4px;height:2px;background:repeating-linear-gradient(90deg,var(--ct-fio) 0 6px,transparent 6px 11px)}
.ct-trilho li.opc::before{box-sizing:border-box;background:transparent;border:2px dashed var(--ct-fio);color:var(--tinta-2)}
.ct-trilho b{font-size:15px;line-height:1.25;color:var(--tinta)}
.ct-trilho small{font-size:13px;line-height:1.35;color:var(--tinta-2)}
.ct-saida{grid-column:1/-1;padding-top:16px;border-top:1px solid var(--linha);font-size:14.5px;color:var(--fg2)}
@media (max-width:980px){
  /* uma coluna: o cartão vira só o trilho, numa linha */
  .ct-como{background:none;box-shadow:none;border-radius:0;padding:0}
  .ct-como-t{display:none}
  .ct-trilho{max-width:560px}
}
@media (max-width:620px){
  /* resposta 65 (06/10/2026, "Sem a trilha"): no celular a trilha "Assunto, Contato, Depois" sai do topo, para a primeira opção do
     formulário aparecer na primeira tela. O formulário já diz "Passo 1 de 2" e a linha "Já é cliente?" continua no topo.
     Acima de 620px nada muda. (As três regras que só ajustavam a trilha nesta faixa saíram junto.) */
  .pg-orcamento .ct-como{display:none}
}

/* 2. formulário (parcial da Home): o sobretítulo repete o H1 desta página */
.pg-orcamento .contato .sobre{display:none}
/* a frase de apoio do parcial repete a resposta do topo, que está logo acima */
.pg-orcamento .contato .lead{display:none}
@media (min-width:981px){.pg-orcamento .contato .caixa{align-items:center}}  /* sem a frase, o título fica no meio da altura do formulário */
/* sem JS os dois passos ficam abertos e a linha "Assunto: · trocar" (preenchida pelo JS) fica vazia */
.pg-orcamento .assunto:has(#assunto-txt:empty){display:none}
/* botão "Ver os próximos passos", posto pelo JS depois do envio */
.ct-apos{margin-top:16px}
@media (max-width:620px){.ct-apos .btn{width:100%;justify-content:center}}

/* passos numerados (.ct-etapas): o mesmo desenho das .etapas do serviço (círculo numerado, fio pontilhado na cor do serviço,
   cartão com borda). Cópia de previa-servico.css, 199-208: quando o bloco subir para o previa.css, esta cópia sai.
   O bloco "Depois de enviar" de /orcamento/ saiu em 07/10/2026 (Felipe: "Acho que não precisa desse bloco"), e com ele as regras
   do .ct-quando e do cartão do Bravoflow (.ct-bravo, .ct-ad). Estas ficam porque /golpe/ usa a lista (ajustes no previa-golpe.css). */
.ct-etapas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;margin-top:44px;counter-reset:ct-e}
.ct-etapas > li{position:relative;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:14px;counter-increment:ct-e}
.ct-etapas > li::before{content:counter(ct-e);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--oliva);color:var(--roxo-900);font-family:var(--fonte);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.ct-etapas > li:not(:last-child)::after{content:"";position:absolute;top:21px;left:56px;right:-4px;height:2px;background:repeating-linear-gradient(90deg,var(--oliva) 0 6px,transparent 6px 11px)}
.ct-etapa{grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:8px;padding:20px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip)}
.ct-etapa h3{font-size:1.15rem;color:var(--titulo)}
.ct-etapa p{font-size:14.5px;line-height:1.5;color:var(--fg2)}
/* acende uma vez ao entrar na tela (classes postas pelo JS; sem JS ou com "reduzir movimento", fica tudo aceso) */
.ct-etapas.ct-armado > li{opacity:.3;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.ct-etapas.ct-armado > li.ct-vivo{opacity:1;transform:none}
@media (max-width:1100px){
  .ct-etapas{grid-template-columns:1fr;row-gap:22px;max-width:760px}
  .ct-etapas > li{grid-row:auto;grid-template-rows:none;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start}
  .ct-etapas > li:not(:last-child)::after{top:52px;bottom:-18px;left:21px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--oliva) 0 6px,transparent 6px 11px)}
  .ct-etapa{grid-row:auto;grid-template-rows:none;padding:16px 18px}
}

/* 3. quem já confia: 3 fatos e 1 depoimento em cima, os 10 logos da Home embaixo */
.ct-prova-topo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.pg-orcamento .fatos{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-orcamento .fatos b{font-size:clamp(1.5rem,2.2vw,1.95rem);white-space:nowrap}
.pg-orcamento .prova .depo-assume{margin-top:0;background:var(--branco)}
@media (max-width:980px){.ct-prova-topo{grid-template-columns:1fr}}
@media (max-width:620px){
  .pg-orcamento .fatos{grid-template-columns:1fr 1fr;gap:18px 20px}
  .pg-orcamento .fatos > div:first-child{grid-column:1/-1}
}

/* 4. perguntas: a lista e, ao lado, o lembrete roxo (o mesmo desenho do serviço) */
.ct-faq-grade{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:32px}
.ct-faq-grade .faq{margin-top:0}
.ct-lembrete{position:sticky;top:96px;padding:26px;border-radius:var(--raio);background:radial-gradient(130% 160% at 90% 0%,#9B2C95 0%,var(--roxo) 40%,var(--roxo-900) 100%);color:#fff;box-shadow:var(--sombra)}
html[data-dir="a"] .ct-lembrete :focus-visible{outline-color:var(--oliva)}
.ct-lembrete-t{font-size:1.25rem;font-weight:800;line-height:1.2}
.ct-lembrete p:not(.ct-lembrete-t){margin-top:8px;font-size:15px;opacity:.9}
.ct-lembrete .btn{margin-top:18px;width:100%;justify-content:center}
.ct-so-movel{display:none}
@media (max-width:980px){
  .ct-faq-grade{grid-template-columns:1fr}
  .ct-lembrete{display:none}
  .ct-so-movel{display:inline-flex}
}

/* =========================================================
   /orcamento/obrigado/ — confirmação
   ========================================================= */
/* 1. topo: selo de recebido (o "check" se desenha uma vez) e a ficha "Próximos passos" em linha do tempo */
.ct-ok{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;padding:6px 18px 6px 6px;border-radius:999px;background:#E7F4EC;color:#155B38;font-size:14.5px;font-weight:700;line-height:1.25}
/* com ?assunto=, o JS acrescenta o assunto escolhido numa segunda linha do selo */
.ct-ok small{display:block;font-size:13px;font-weight:500}
.ct-ok svg{width:30px;height:30px;padding:6px;border-radius:50%;background:#1E7A4B;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.ct-ok path{stroke-dasharray:22;stroke-dashoffset:0}
@keyframes ct-check{from{stroke-dashoffset:22}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:no-preference){.ct-ok path{animation:ct-check .5s .3s ease-out both}}
.pg-obrigado .pg-topo .acoes{align-items:center;gap:14px 26px}
.ct-proximos li{position:relative;display:grid;gap:2px;padding:0 0 16px 30px}
.ct-proximos li:last-child{padding-bottom:0}
.ct-proximos li::before{content:"";position:absolute;left:2px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ct-fio)}
.ct-proximos li:not(:last-child)::after{content:"";position:absolute;left:9px;top:24px;bottom:2px;width:2px;background:repeating-linear-gradient(180deg,var(--ct-fio) 0 5px,transparent 5px 9px)}
.ct-proximos li.agora::before{background:#1E7A4B;border-color:#1E7A4B;box-shadow:0 0 0 4px #DDF1E6}
.ct-proximos li b{font-family:var(--fonte);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--roxo)}
.ct-proximos li.agora b{color:#155B38}
.ct-proximos li span{font-size:15px;line-height:1.45;color:var(--tinta)}

/* 2. passo 3 opcional: o formulário e, ao lado, os três caminhos de integração (acendem conforme a resposta de "têm API?") */
.ct-adiantar{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:36px}
.ct-adiantar .form{border:1px solid var(--linha)}
.ct-q + .ct-q{margin-top:26px;border-top:1px solid #ECEAE0}  /* a legenda fica sobre o fio */
.ct-q + .ct-q legend{padding-right:12px}
.ct-q legend{font-size:1.12rem}
.ct-n{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:10px;border-radius:50%;background:var(--oliva);color:var(--roxo-900);font-family:var(--fonte);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;vertical-align:2px}
/* sistemas: marcas em pílula (mais de uma resposta) */
.ct-marcas{display:flex;flex-wrap:wrap;gap:8px}
.ct-marcas label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px 8px 12px;border:1.5px solid #DAD8CC;border-radius:999px;font-size:15px;font-weight:600;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.ct-marcas input{accent-color:var(--roxo);width:16px;height:16px;margin:0}
.ct-marcas label:hover{border-color:var(--roxo)}
.ct-marcas label:has(input:checked){border-color:var(--roxo);background:var(--roxo-claro)}
.ct-marcas label:has(input:focus-visible){outline:3px solid var(--roxo);outline-offset:2px}
.form .opcoes.ct-tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.form .opcoes.ct-tres label{min-height:48px}
/* a linha que ensina, logo abaixo da pergunta */
.ct-dica{margin-top:12px;padding:10px 14px;border-left:3px solid var(--oliva-esc);border-radius:0 8px 8px 0;background:var(--oliva-suave);font-size:14.5px;line-height:1.5;color:var(--tinta)}
.ct-dica[hidden]{display:none}
#form-adiantar .rod{margin-top:24px}
/* os três caminhos (as mesmas etiquetas de /integracao-de-sistemas/#caminhos) */
.ct-caminhos{position:sticky;top:96px;padding:clamp(20px,2.4vw,28px);border-radius:var(--raio);border:1px solid var(--linha);background:var(--papel)}
.ct-caminhos figcaption b{display:block;font-size:1.25rem;font-weight:800;line-height:1.2;color:var(--titulo)}
.ct-caminhos figcaption span{display:block;margin-top:6px;font-size:15px;color:var(--fg2)}
.ct-caminhos ol{display:grid;gap:10px;margin-top:18px}
.ct-caminhos li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border-radius:10px;border:1.5px solid #E3E1D6;background:#fff;transition:opacity .2s ease,border-color .2s ease}
.ct-via-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--roxo-claro)}
.ct-via-ic svg{width:22px;height:22px;fill:none;stroke:var(--roxo);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ct-caminhos li b{display:block;font-size:15.5px;line-height:1.25;color:var(--tinta)}
.ct-caminhos li p{font-size:14px;line-height:1.4;color:var(--tinta-2)}
.ct-caminhos[data-api="sim"] li:not([data-via="sim"]),.ct-caminhos[data-api="nao"] li:not([data-via="nao"]){opacity:.6}
.ct-caminhos[data-api="sim"] li[data-via="sim"],.ct-caminhos[data-api="nao"] li[data-via="nao"]{border-color:var(--roxo)}
.ct-caminhos .link-seta{display:inline-block;margin-top:20px}
@media (prefers-reduced-motion:reduce){.ct-caminhos li{transition:none}}
@media (max-width:980px){
  /* uma coluna: o painel dos caminhos ficaria longe da pergunta a que reage; a dica logo abaixo dela já diz o mesmo */
  .ct-adiantar{grid-template-columns:1fr}
  .ct-caminhos{display:none}
}
@media (min-width:981px) and (max-width:1180px){.form .opcoes.ct-tres.ct-empilha{grid-template-columns:1fr}}
@media (max-width:620px){
  .form .opcoes.ct-tres.ct-empilha{grid-template-columns:1fr}
  .form .opcoes.ct-tres:not(.ct-empilha) label{padding-inline:10px;gap:8px}
  #form-adiantar .rod .btn{width:100%;justify-content:center}
}
@media (max-width:400px){
  /* "Não sei" é o rótulo mais largo: a terceira coluna ganha espaço */
  .form .opcoes.ct-tres:not(.ct-empilha){grid-template-columns:minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.3fr);gap:6px}
  .form .opcoes.ct-tres:not(.ct-empilha) label{padding-inline:8px;gap:6px}
}
/* migalha em telas estreitas: sai o item do meio, para não quebrar em duas linhas */
@media (max-width:380px){.pg-obrigado .migalhas li:nth-child(2){display:none}}

/* 3. cases do tema: o cartão é o .setor-case do previa-setor.css (o mesmo das páginas de setor e de agências),
   quatro por linha (.setor-cases.quatro); carrossel no celular */
.ct-cases{margin-top:40px}

/* =========================================================
   /contato/ — gateway por intenção
   ========================================================= */
.ct-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* ícone do WhatsApp (o mesmo arquivo do botão flutuante), na cor do texto */
.ct-wa{display:inline-block;width:20px;height:20px;flex:none;background:currentColor;-webkit-mask:url(../assets-marca/icones/whatsapp.svg) center/contain no-repeat;mask:url(../assets-marca/icones/whatsapp.svg) center/contain no-repeat}

/* 1. topo: no lugar da ficha, o cartão da rota principal, com os dois caminhos (formulário e WhatsApp comercial) */
.ct-contratar h2{font-size:1.45rem;letter-spacing:-.015em;text-transform:none;color:var(--tinta);margin-bottom:8px}
.ct-contratar-t{font-size:15.5px;color:var(--tinta-2)}
.ct-contratar-wa{display:grid;gap:6px;justify-items:start;margin-top:16px;padding-top:14px;border-top:1px solid #ECEAE0}
.ct-contratar-wa .link-seta{display:inline-block;padding:10px 0 3px;border-bottom:2px solid currentColor;text-decoration:none;color:var(--roxo)}
.ct-contratar-wa .link-seta .ct-wa{width:18px;height:18px;margin-right:8px;vertical-align:-3px}
.ct-contratar-wa small{font-size:14px;line-height:1.45;color:var(--tinta-2)}
.ct-contratar-wa small a{color:inherit;text-underline-offset:3px}

/* 2. rotas: linha com ícone, título em primeira pessoa, uma linha de apoio e a seta (duas colunas no desktop, uma no celular) */
.ct-rotas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:36px}
.ct-rotas li{display:grid}
.ct-rota{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:56px;padding:16px 20px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip);color:var(--fg);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ct-rota-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--linha);color:var(--roxo)}
.ct-rota-txt{display:grid;gap:3px;align-content:center}
.ct-rota-txt b{font-size:1.1rem;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--titulo);text-wrap:balance;transition:color .15s ease}
.ct-rota-txt small{font-size:14.5px;line-height:1.45;color:var(--fg2)}
.ct-rota-seta{font-weight:800;color:var(--acento);transition:transform .15s ease}
a.ct-rota:hover{transform:translateY(-2px);box-shadow:var(--sombra);border-color:var(--acento)}
a.ct-rota:hover .ct-rota-txt b{color:var(--acento)}
a.ct-rota:hover .ct-rota-seta{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){a.ct-rota:hover,a.ct-rota:hover .ct-rota-seta{transform:none}}
@media (max-width:760px){
  .ct-rotas{grid-template-columns:1fr;gap:10px;margin-top:28px}
  .ct-rota{gap:14px;padding:14px 16px}
  .ct-rota-txt b{font-size:1.05rem}
  .ct-rota-txt small{font-size:14px}
}

/* 2b. "Outro assunto": o quinto cartão ocupa a linha inteira, mais discreto (sem fundo), e abre o formulário curto logo abaixo.
   Aberto, o cartão vira o cabeçalho do painel: os dois formam uma caixa só.
   Sem JS, quem abre é o :target (o cartão é um link para #outros-assuntos). Com JS, o previa-contato.js põe .ct-js no painel
   e passa a mandar com .ct-aberto e aria-expanded (o :target não acompanha o history.replaceState). */
.ct-rotas li.ct-rota-larga{grid-column:1/-1}
.ct-rota-quieta{background:transparent;transition:border-color .18s ease,background .18s ease}
.ct-rota-quieta .ct-rota-ic{background:var(--chip)}
.ct-rota-quieta .ct-rota-seta{display:grid;place-items:center;margin-right:-3px;transition:transform .2s ease}
a.ct-rota-quieta:hover{transform:none;box-shadow:none}
a.ct-rota-quieta:hover .ct-rota-seta{transform:none}
.ct-rota-quieta[aria-expanded="true"]{background:var(--chip);border-color:var(--linha);border-radius:var(--raio) var(--raio) 0 0}
.ct-rota-quieta[aria-expanded="true"] .ct-rota-ic{background:#fff}
.ct-rota-quieta[aria-expanded="true"] .ct-rota-seta{transform:rotate(180deg)}
a.ct-rota-quieta[aria-expanded="true"]:hover .ct-rota-seta{transform:rotate(180deg)}
/* no toque, o :hover fica preso depois de tocar: o cartão aberto não pode ficar com borda e título roxos sobre o painel de borda cinza */
@media (hover:none){a.ct-rota-quieta:hover{border-color:var(--linha)}a.ct-rota-quieta:hover .ct-rota-txt b{color:var(--titulo)}}
.ct-rotas:has(+ .ct-outros:target:not(.ct-js)) .ct-rota-quieta{background:var(--chip);border-color:var(--linha);border-radius:var(--raio) var(--raio) 0 0}
.ct-rotas:has(+ .ct-outros:target:not(.ct-js)) .ct-rota-quieta .ct-rota-ic{background:#fff}
.ct-rotas:has(+ .ct-outros:target:not(.ct-js)) .ct-rota-quieta .ct-rota-seta{transform:rotate(180deg)}
.ct-outros{display:none;scroll-margin-top:110px;scroll-margin-bottom:24px}  /* quem chega pela âncora vê o cartão "Outro assunto" acima do painel; ao abrir, sobra um respiro abaixo dele */
.ct-outros:target:not(.ct-js),.ct-outros.ct-aberto{display:block}
/* só opacidade: um deslocamento aqui entraria na medida que o JS usa para rolar até o painel */
@keyframes ct-abre{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){.ct-outros.ct-aberto{animation:ct-abre .22s ease-out both}}
/* o formulário reusa .form, .campo, .rod e .ok-msg do formulário de orçamento (previa.css) e as pílulas .ct-marcas do passo 3 */
.ct-outros .form{padding:clamp(18px,2.6vw,28px);border:1px solid var(--linha);border-top:0;border-radius:0 0 var(--raio) var(--raio);box-shadow:none}
.ct-outros-guia{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #ECEAE0;font-size:15px;line-height:1.5;color:var(--tinta-2)}
.ct-outros-guia a{font-weight:600}  /* a cor vem da regra dos links de texto da página (herdada) */
.ct-outros .form legend{margin-bottom:12px;font-size:1.1rem}
.ct-outros .form .ajuda{margin:-6px 0 12px}
.ct-outros .ct-marcas label{line-height:1.25}
/* nome, e-mail, telefone e empresa em dois por linha; a mensagem ao lado, na altura das duas linhas */
.ct-outros-campos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);column-gap:16px;margin-top:6px}
.ct-outros-campos .campo{align-content:start;min-width:0}
.ct-outros-campos :is(input,textarea){width:100%;min-width:0}
.ct-outros-campos .ct-campo-msg{grid-column:3;grid-row:1/3;grid-template-rows:auto minmax(0,1fr)}
.ct-outros-campos .ct-campo-msg textarea{height:100%;min-height:112px}
/* erro: a mesma cor do aviso do passo 1 do formulário de orçamento */
.ct-erro{font-size:14px;line-height:1.4;font-weight:500;color:#A13A3A;text-wrap:balance}
.ct-erro[hidden]{display:none}
.ct-outros fieldset .ct-erro{margin-top:8px}
.ct-outros .campo :is(input,textarea)[aria-invalid="true"]{border-color:#A13A3A}
.ct-outros .campo :is(input,textarea)[aria-invalid="true"]:focus{border-color:#A13A3A;box-shadow:0 0 0 3px rgba(161,58,58,.18)}
.ct-outros fieldset[aria-invalid="true"] .ct-marcas label:not(:has(input:checked)){border-color:#A13A3A}
.ct-outros .form .rod{margin-top:18px}
.ct-outros-nota{margin-top:10px;font-size:14px;line-height:1.5;text-align:right;color:var(--tinta-2)}
.ct-outros .ok-msg:focus-visible{outline-offset:2px}
/* com o formulário na tela, o botão flutuante do WhatsApp comercial sai (classe posta pelo JS), para não cobrir o "Enviar mensagem" */
.ct-perto-form .whats-flutuante.visivel{opacity:0;visibility:hidden;transform:translateY(12px)}
@media (max-width:980px){
  .ct-outros-campos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-outros-campos .ct-campo-msg{grid-column:1/-1;grid-row:auto}
}
@media (max-width:620px){
  .ct-outros-campos{grid-template-columns:minmax(0,1fr)}
  .ct-outros .ct-marcas label{font-size:15px}
  .ct-outros .form .rod .btn{width:100%;justify-content:center;min-height:52px}
  .ct-outros-nota{text-align:left}
}

/* 3. suporte a clientes: o WhatsApp do suporte em corpo grande, rotulado, o botão do WhatsApp, a ligação como link de texto
   (opção secundária: o número é o mesmo) e a conversa ilustrada */
.ct-suporte-grade{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:center}
.ct-suporte{margin-top:28px;padding:clamp(20px,2.6vw,28px);border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip)}
.ct-suporte-rot{display:flex;align-items:center;gap:8px;font-family:var(--fonte);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--titulo)}
.ct-suporte-rot .ct-wa{width:16px;height:16px}
.ct-suporte-tel{margin-top:4px;font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.ct-suporte-tel a{display:inline-block;padding-block:3px;color:var(--titulo);text-decoration:none}
.ct-suporte-tel a:hover{color:var(--acento)}
.ct-suporte-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:20px}
.ct-suporte-ligar{font-size:15px;line-height:1.4;color:var(--fg);text-wrap:balance}
.ct-suporte-ligar a{padding-block:13px;font-weight:600;white-space:nowrap}  /* o respiro aumenta o alvo de toque (44px) sem mexer na altura da linha */
.ct-conversa{display:grid;gap:14px;justify-items:start;max-width:400px;margin-inline:auto;width:100%}
.ct-conversa .ui{position:relative;width:100%;max-width:none;font-size:15px}
.ct-conversa .ui header{padding:12px 16px;font-size:14.5px;background:#0E7266}
.ct-conversa .ui .corpo{gap:14px;padding:22px 16px 16px;background:#F3F1EA}
.ct-conversa .ui .bolha{max-width:86%;padding:10px 13px;font-size:15px;line-height:1.4;background:#DCF3E4}
.ct-digita{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:26px;padding:10px 12px 10px 16px;border-radius:999px;background:#fff;border:1px solid #E3E1D6;font-size:14px;color:var(--tinta-2)}
.ct-digita i{flex:none;width:30px;height:30px;border-radius:50%;background:#0E7266;position:relative}
.ct-digita i::after{content:"";position:absolute;left:11px;top:9px;border:6px solid transparent;border-left:10px solid #fff;border-right:0}
.ct-conversa figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px;line-height:1.45;color:var(--fg2)}
@media (max-width:980px){
  .ct-suporte-grade{grid-template-columns:1fr}
  .ct-conversa{margin-inline:0}
}
@media (max-width:620px){
  .ct-suporte-acoes{display:grid}
  .ct-suporte-acoes .btn{justify-content:center}
  .ct-suporte-ligar{text-align:center}
}
/* a 360 o rótulo do botão não cabe numa linha com o ícone: o ícone fica só no rótulo acima do número */
@media (max-width:380px){.ct-suporte-acoes .btn .ct-wa{display:none}}

/* 4. canais oficiais: o aviso e a lista conferida */
.ct-oficiais-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.ct-alerta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;margin-top:26px;padding:16px 18px;border-radius:var(--raio-s);border:1px solid #E5C9A8;background:#FBF1E4;color:var(--tinta);font-size:15.5px;line-height:1.5}
.ct-alerta .ct-ico{width:26px;height:26px;margin-top:1px;color:#9A4A12}
.ct-alerta b{font-weight:700}
.ct-oficiais{border-radius:var(--raio);border:1px solid var(--linha);background:var(--branco);box-shadow:var(--sombra);overflow:hidden}
.ct-oficiais-t{padding:14px 20px;background:var(--roxo-900);color:#fff;font-size:14.5px;font-weight:700}
.ct-oficiais li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:52px;padding:10px 20px;border-top:1px solid #ECEAE0;font-size:15px}
.ct-oficiais li:first-child{border-top:0}
.ct-oficiais li .ct-ico{width:20px;height:20px;padding:3px;border-radius:50%;background:#DDF1E6;color:#155B38;stroke-width:2.6}
.ct-oficiais li span{color:var(--tinta-2)}
.ct-oficiais li a{justify-self:end;text-align:right;font-weight:600;color:var(--tinta);text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
/* linha "E-mail" (só em /contato/; em /golpe/ o desenho está no previa-golpe.css): o valor é uma regra, não um link, porque não há
   endereço público. O rótulo fica com a largura dele e o valor ocupa o resto: no celular, "termina em" quebra acima do domínio. */
.pg-contato .ct-oficiais li.ct-regra{grid-template-columns:22px auto minmax(0,1fr)}
.pg-contato .ct-oficiais li b{justify-self:end;text-align:right;font-weight:600;line-height:1.3;color:var(--tinta)}
.pg-contato .ct-oficiais li b span{color:inherit}
.ct-oficiais li a:hover{color:var(--roxo)}
.ct-oficiais li a::after{content:"";position:absolute;inset:0}  /* a linha inteira é o alvo do toque */
@media (max-width:980px){.ct-oficiais-grade{grid-template-columns:1fr}}

/* revisão visual de 06/10/2026: no celular o H1 do orçamento cabe numa linha ("Fale" ficava sozinha na primeira) */
@media (max-width:420px){.pg-orcamento .pg-topo h1{font-size:8.2vw}}