/* /contato/ · cartão escuro do topo com os canais (fundo #161616 e símbolo em contorno, como as capas do Figma 74:2 e 95:2;
   linha de 3 px, como pede a MIV, cap. 4) */
body.tds-pg-contato .ct-canais { position: relative; overflow: hidden; box-sizing: border-box; display: flex; align-items: center; aspect-ratio: 627 / 489; background: #161616; border-radius: 27px; padding: clamp(28px, 3.2vw, 62px) clamp(24px, 3.4vw, 64px); }
body.tds-pg-contato .ct-canais__simbolo { position: absolute; width: 50%; right: -17%; top: 50%; transform: translateY(-50%); height: auto; fill: none; stroke: #EF5433; stroke-width: 3; stroke-linejoin: round; pointer-events: none; }
body.tds-pg-contato .ct-canais__simbolo path { vector-effect: non-scaling-stroke; }
body.tds-pg-contato .ct-canais__lista { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 1.5vw, 28px); }
body.tds-pg-contato .ct-canais__lista li { display: flex; align-items: center; gap: clamp(14px, 1.1vw, 20px); min-width: 0; }
body.tds-pg-contato .ct-canais__ic { flex: none; display: grid; place-items: center; width: clamp(44px, 2.9vw, 56px); aspect-ratio: 1; border-radius: 50%; background: var(--fx-laranja); }
body.tds-pg-contato .ct-canais__ic::before { content: ""; width: 46%; height: 46%; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-contato .ct-canais__txt { min-width: 0; display: grid; gap: 4px; }
body.tds-pg-contato .ct-canais__txt small { font: 700 13px/1.2 var(--fx-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--fx-laranja); }
body.tds-pg-contato .ct-canais__txt > span { font: 800 clamp(18px, 0.5vw + 10px, 21px)/1.2 var(--fx-titulo); color: var(--fx-creme); overflow-wrap: anywhere; }
body.tds-pg-contato .ct-canais__txt a { color: var(--fx-creme); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .25s, color .2s; }
body.tds-pg-contato .ct-canais__txt a:hover { color: #fff; background-size: 100% 1.5px; }

body.tds-pg-contato .fx-pg-topo .fx-sub p { max-width: 520px; }
/* no computador os dois botões do topo ficam lado a lado, como no Indique (com o respiro padrão do contorno grande, o segundo caía pra linha de baixo) */
body.tds-pg-contato .fx-pg-topo .fx-botoes .fx-btn-contorno--grande .elementor-button { padding: 0 32px; }

@media (max-width: 900px) {
  body.tds-pg-contato .ct-canais { aspect-ratio: auto; padding: 40px 32px; }
  body.tds-pg-contato .ct-canais__simbolo { width: 34%; right: -9%; top: -8%; transform: none; }
}
@media (max-width: 767px) {
  body.tds-pg-contato .ct-canais { border-radius: 20px; padding: 30px 22px; }
  body.tds-pg-contato .ct-canais__simbolo { width: 40%; right: -15%; top: -11%; }
  body.tds-pg-contato .ct-canais__lista { gap: 18px; }
  /* no celular os dois botões do topo ficam da mesma largura (o bloco só estica o de contorno) */
  body.tds-pg-contato .fx-pg-topo .fx-botoes .fx-btn .elementor-button { width: 100%; }
}
@media (max-width: 767px) {
  /* a linha inteira do canal (ícone, rótulo e valor) responde ao toque */
  body.tds-pg-contato .ct-canais__lista li { position: relative; }
  body.tds-pg-contato .ct-canais__txt a::after { content: ""; position: absolute; inset: -9px 0; }
}