/* Clientes (slug clientes). Só o que o modelo de página interna não tem:
   o letreiro de neon do topo, a parede com os logos e o quadro do CRM da faixa preta.
   Cores só da paleta da MIV (cap. 2): os cinzas soltos do quadro do CRM viraram #161616, #575757, #686868 e #999999. */

/* 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-clientes .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-clientes .e-con.fx-pg-topo__vis, body.tds-pg-clientes .e-con.fx-escura__vis { --flex-wrap: nowrap; flex-wrap: nowrap; }
body.tds-pg-clientes .cl-neon > .vis-espaco { aspect-ratio: 627 / 489; }
body.tds-pg-clientes .cl-pipe > .vis-espaco { aspect-ratio: 627 / 560; }
@media (max-width: 767px) {
  body.tds-pg-clientes .cl-neon > .vis-espaco { aspect-ratio: 358 / 250; }
}

/* Topo: o logo da Tidos num letreiro de neon, no fundo escuro (o desenho sai de gerador/paginas/clientes.py, _neon), como o
   letreiro que ele tem em casa: o símbolo em neon laranja e as letras em neon branco. Cinco camadas do mesmo desenho: o vidro
   apagado (sempre à vista), a luz espalhada, o brilho perto do tubo, o tubo e o miolo quase branco.
   Acende piscando quando a página abre e depois segue dando pequenas falhas, em loop, como neon de verdade: o símbolo e o nome
   falham em ritmos diferentes (7,9 s e 5,3 s), então nunca piscam juntos do mesmo jeito. A luz respira. Embaixo, o reflexo. */
body.tds-pg-clientes .cl-neon { position: relative; }
body.tds-pg-clientes .cl-neon__in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
body.tds-pg-clientes .cl-neon__in::before { content: ""; position: absolute; inset: -6% -4%; pointer-events: none;
  background: radial-gradient(30% 40% at 20% 42%, rgba(239, 84, 51, .24), rgba(239, 84, 51, 0) 72%),
    radial-gradient(48% 40% at 62% 42%, rgba(255, 244, 236, .09), rgba(255, 244, 236, 0) 72%);
  animation: cl-neon-liga 1.8s linear .3s both, cl-neon-respira 3.4s ease-in-out 2.1s infinite; }
body.tds-pg-clientes .cl-neon__placa { position: relative; width: 106%; margin: 0 0 0 -3%; aspect-ratio: 5153 / 1241; }  /* um pouco maior que a coluna, pra ganhar destaque */
body.tds-pg-clientes .cl-neon__c { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linejoin: round; stroke-linecap: round; }
body.tds-pg-clientes .cl-neon__vidro { stroke: rgba(255, 255, 255, .1); stroke-width: 34; }
body.tds-pg-clientes .cl-neon__luz { stroke-width: 80; filter: blur(14px); }
body.tds-pg-clientes .cl-neon__halo { stroke-width: 46; filter: blur(4px); }
body.tds-pg-clientes .cl-neon__tubo { stroke-width: 34; }
body.tds-pg-clientes .cl-neon__miolo { stroke-width: 9; }
/* o símbolo em laranja */
body.tds-pg-clientes .cl-neon__luz .cl-neon__s { stroke: #EF5433; }
body.tds-pg-clientes .cl-neon__halo .cl-neon__s { stroke: rgba(239, 84, 51, .85); }
body.tds-pg-clientes .cl-neon__tubo .cl-neon__s { stroke: #EF5433; }
body.tds-pg-clientes .cl-neon__miolo .cl-neon__s { stroke: #FFE4DA; }
/* as letras em branco, com o brilho num branco quente */
body.tds-pg-clientes .cl-neon__luz .cl-neon__n { stroke: rgba(255, 240, 228, .5); }
body.tds-pg-clientes .cl-neon__halo .cl-neon__n { stroke: rgba(255, 255, 255, .6); }
body.tds-pg-clientes .cl-neon__tubo .cl-neon__n { stroke: #F2F2F2; }
body.tds-pg-clientes .cl-neon__miolo .cl-neon__n { stroke: #FFFFFF; }
body.tds-pg-clientes .cl-neon__placa > .cl-neon__c:not(.cl-neon__vidro) { animation: cl-neon-liga 1.8s linear .3s both; }
body.tds-pg-clientes .cl-neon__placa > .cl-neon__luz { animation: cl-neon-liga 1.8s linear .3s both, cl-neon-respira 3.4s ease-in-out 2.1s infinite; }
body.tds-pg-clientes .cl-neon__c:not(.cl-neon__vidro) .cl-neon__n { animation: cl-neon-falha 5.3s linear 2.4s infinite; }
body.tds-pg-clientes .cl-neon__c:not(.cl-neon__vidro) .cl-neon__s { animation: cl-neon-falha 7.9s linear 3.6s infinite; }
@media (max-width: 900px) { body.tds-pg-clientes .cl-neon__placa { width: min(100%, 640px); margin: 0 auto; } }
/* o reflexo no chão: o mesmo letreiro de cabeça pra baixo e apagado; uma camada na cor do fundo some com ele pra baixo
   (máscara não serve: ela corta o brilho que passa da caixa do letreiro e aparece um retângulo) */
body.tds-pg-clientes .cl-neon__reflexo { margin-top: 7%; transform: scaleY(-1); opacity: .26; filter: blur(2px); }
body.tds-pg-clientes .cl-neon__in::after { content: ""; position: absolute; left: -6%; right: -6%; top: 54%; bottom: -8%; pointer-events: none;
  background: linear-gradient(rgba(22, 22, 22, .1), #161616 50%); }
@keyframes cl-neon-liga { 0% { opacity: 0; } 8% { opacity: .9; } 11% { opacity: .1; } 18% { opacity: 1; } 22% { opacity: .25; } 30%, 100% { opacity: 1; } }
@keyframes cl-neon-respira { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
/* as falhas: duas piscadas rápidas, uma tremida leve e uma piscada dupla, espalhadas no ciclo */
@keyframes cl-neon-falha { 0%, 12%, 13.2%, 14.6%, 47%, 48.2%, 78%, 79%, 80.4%, 100% { opacity: 1; } 12.6% { opacity: .25; } 13.8% { opacity: .45; }
  47.5% { opacity: .6; } 78.4% { opacity: .2; } 79.6% { opacity: .35; } }

/* Parede de logos: os 19 do site no ar, cada um com o nome embaixo */
body.tds-pg-clientes .e-con.cl-parede { padding-top: clamp(40px, 3vw, 60px); }
body.tds-pg-clientes .cl-parede .fx-pg-cab { margin-bottom: clamp(32px, 3vw, 56px); }
body.tds-pg-clientes .cl-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
body.tds-pg-clientes .cl-logos li { flex: 0 0 calc((100% - 5 * 16px) / 6); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--fx-creme); border-radius: 17px; padding: clamp(24px, 2vw, 36px) 18px clamp(16px, 1.3vw, 22px); }
body.tds-pg-clientes .cl-logos img { display: block; width: 100%; max-width: 190px; height: clamp(56px, 4.4vw, 80px); object-fit: contain; filter: brightness(.68); } /* os logos do site no ar são cinza claro; no creme eles somem */
body.tds-pg-clientes .cl-logos span { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--fx-cinza); text-align: center; }

/* Faixa preta: o funil de vendas no CRM, com a venda voltando pros anúncios */
body.tds-pg-clientes .cl-pipe { position: relative; border-radius: 27px; overflow: hidden; background: var(--fx-tinta); box-shadow: inset 0 0 0 1px #575757; }
body.tds-pg-clientes .cl-pipe__in { position: absolute; inset: 0; container-type: inline-size; font-family: var(--fx-texto); }
body.tds-pg-clientes .cl-pipe__quadro { position: absolute; left: 7%; right: 7%; top: 22%; bottom: 20%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; }
body.tds-pg-clientes .cl-pipe__col { background: #161616; border-radius: 2.4cqw; padding: 3cqw 2.4cqw; display: flex; flex-direction: column; gap: 2cqw; }
body.tds-pg-clientes .cl-pipe__col p { margin: 0 0 .6cqw; font: 700 clamp(8px, 2cqw, 13px)/1 var(--fx-texto); letter-spacing: .2em; text-transform: uppercase; color: #999999; }
body.tds-pg-clientes .cl-pipe__col--ok p { color: var(--fx-laranja); }
body.tds-pg-clientes .cl-pipe__col span { display: block; height: 9cqw; border-radius: 1.6cqw; background: #fff; position: relative; }
body.tds-pg-clientes .cl-pipe__col span::before, body.tds-pg-clientes .cl-pipe__col span::after { content: ""; position: absolute; left: 1.8cqw; height: 1.2cqw; border-radius: 1cqw; background: #DADADA; }
body.tds-pg-clientes .cl-pipe__col span::before { top: 2.4cqw; width: 60%; }
body.tds-pg-clientes .cl-pipe__col span::after { top: 5cqw; width: 38%; background: #ECECEC; }
body.tds-pg-clientes .cl-pipe__col--ok span { box-shadow: inset 0 0 0 2px var(--fx-laranja); }
body.tds-pg-clientes .cl-pipe__col--ok span::before { background: #F6B9A8; }
body.tds-pg-clientes .cl-pipe__aviso { position: absolute; 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, .55); }
body.tds-pg-clientes .cl-pipe__aviso--origem { left: 5%; top: 6%; width: 44%; }
body.tds-pg-clientes .cl-pipe__aviso--venda { right: 5%; bottom: 6%; width: 52%; }
body.tds-pg-clientes .cl-pipe__ic { flex: none; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--fx-laranja); display: grid; place-items: center; }
body.tds-pg-clientes .cl-pipe__ic::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-clientes .cl-pipe__ic--pin { --i: url(../../site/icons/pin.svg); }
body.tds-pg-clientes .cl-pipe__ic--ok { --i: url(../../site/icons/check.svg); background: var(--fx-verde); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-clientes .cl-pipe__ic--ok::before { display: none; }
body.tds-pg-clientes .cl-pipe__aviso span { flex: 1 1 auto; min-width: 0; }
body.tds-pg-clientes .cl-pipe__aviso b { display: block; font: 600 clamp(10px, 2.6cqw, 16px)/1.2 var(--fx-texto); color: var(--fx-tinta); }
body.tds-pg-clientes .cl-pipe__aviso small { display: block; margin-top: .25em; font: 400 clamp(8.5px, 2cqw, 13px)/1.2 var(--fx-texto); color: #686868; }
body.tds-pg-clientes .cl-pipe__aviso em { align-self: flex-start; font: 400 clamp(8px, 1.8cqw, 11.5px)/1 var(--fx-texto); font-style: normal; color: #999999; }
body.tds-pg-clientes .fx-escura .fx-txt p + p { margin-top: 1em; }

@media (max-width: 1100px) {
  body.tds-pg-clientes .cl-logos li { flex-basis: calc((100% - 3 * 16px) / 4); }
}
@media (max-width: 767px) {
  /* no celular a parede vai pra três colunas, só com os logos: com o nome embaixo eram 30 linhas e uns 3.300 px de rolagem.
     O nome continua no alt de cada logo e na lista de Segmentos. */
  body.tds-pg-clientes .cl-neon__placa { width: 100%; margin: 0; }
  body.tds-pg-clientes .cl-logos { gap: 8px; }
  body.tds-pg-clientes .cl-logos li { flex-basis: calc((100% - 2 * 8px) / 3); padding: 16px 8px; justify-content: center; border-radius: 12px; }
  body.tds-pg-clientes .cl-logos img { height: 40px; }
  body.tds-pg-clientes .cl-logos span { display: none; }
  body.tds-pg-clientes .cl-pipe { border-radius: 20px; }
  /* CRM: rótulos das colunas e avisos com letra de ler no celular (antes ficavam em 8 e 10 px) */
  body.tds-pg-clientes .cl-pipe__col p { font-size: 10.5px; letter-spacing: .12em; }
  body.tds-pg-clientes .cl-pipe__aviso b { font-size: 13px; }
  body.tds-pg-clientes .cl-pipe__aviso small { font-size: 12px; }
  body.tds-pg-clientes .cl-pipe__aviso em { font-size: 10px; }
  body.tds-pg-clientes .cl-pipe__aviso--origem { width: 62%; }
  body.tds-pg-clientes .cl-pipe__aviso--venda { width: 72%; }
}