/* Home · as animações feitas só pra Home: o funil completo (frente 04) e o painel da marca (frente 05).
   O desenho sai de gerador/paginas/_home_vis.py e o movimento de assets/js/paginas/inicio.js. Este arquivo carrega depois
   do inicio.css (inc/frontend.php). Medidas do funil em unidades de uma tela de 1300 x 1000 (--u), pra escalar com a moldura. */

/* ================================================================ funil */
body.tds-pg-inicio .fx-vis--funil { background: #0F0F0F; }
body.tds-pg-inicio .fx-vis--funil .fx-vis__in { width: 100%; height: 100%; }
body.tds-pg-inicio .hv-funil { position: absolute; inset: 0; --u: calc(100cqw / 1300); font-family: var(--fx-texto); color: #222; }
body.tds-pg-inicio .hv-funil p { margin: 0; }
body.tds-pg-inicio .hv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.tds-pg-inicio .hv-fio { fill: none; stroke: #4A4A4A; stroke-width: 2.5; stroke-dasharray: 4 9; transition: stroke .4s; }
body.tds-pg-inicio .hv-fio.is-ativo { stroke: #EF5433; animation: hv-fio .9s linear infinite; }
@keyframes hv-fio { to { stroke-dashoffset: -26; } }
body.tds-pg-inicio .hv-camada { transition: filter .45s ease; }
body.tds-pg-inicio .hv-camada.is-ativo { filter: brightness(1.22); }

/* canais de cima */
body.tds-pg-inicio .hv-canal { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10);
  width: calc(var(--u) * 190); height: calc(var(--u) * 66); border-radius: 999px; background: #fff; font-weight: 600; font-size: calc(var(--u) * 25); white-space: nowrap;
  box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 34) calc(var(--u) * -14) rgba(0, 0, 0, .7); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s; }
body.tds-pg-inicio .hv-canal i { flex: none; width: calc(var(--u) * 30); height: calc(var(--u) * 30); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-inicio .hv-canal.is-pulso { transform: translateY(calc(var(--u) * -6)); box-shadow: 0 0 0 calc(var(--u) * 6) rgba(239, 84, 51, .32), 0 calc(var(--u) * 18) calc(var(--u) * 34) calc(var(--u) * -14) rgba(0, 0, 0, .7); }

/* ferramentas (esquerda) e processo (direita), na altura de cada faixa: cartões brancos como os da MIV */
body.tds-pg-inicio .hv-ferr, body.tds-pg-inicio .hv-proc { position: absolute; z-index: 2; display: flex; align-items: center; gap: calc(var(--u) * 12);
  width: calc(var(--u) * 352); height: calc(var(--u) * 92); padding: 0 calc(var(--u) * 18); border-radius: calc(var(--u) * 24); background: #fff;
  box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 40) calc(var(--u) * -18) rgba(0, 0, 0, .7);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s; }
body.tds-pg-inicio .hv-ferr { font-weight: 600; font-size: calc(var(--u) * 27); }
body.tds-pg-inicio .hv-ferr img { flex: none; width: calc(var(--u) * 54); height: calc(var(--u) * 54); padding: calc(var(--u) * 9); border-radius: calc(var(--u) * 14); background: #F5F7F9; object-fit: contain; box-sizing: border-box; }
body.tds-pg-inicio .hv-ferr img.is-largo { width: calc(var(--u) * 100); padding: calc(var(--u) * 8); }
body.tds-pg-inicio .hv-ferr b { margin-left: calc(var(--u) * 6); font-weight: 600; }
body.tds-pg-inicio .hv-ferr.is-ativo, body.tds-pg-inicio .hv-proc.is-ativo {
  box-shadow: 0 0 0 calc(var(--u) * 5) rgba(239, 84, 51, .35), 0 calc(var(--u) * 20) calc(var(--u) * 40) calc(var(--u) * -18) rgba(0, 0, 0, .7); }
body.tds-pg-inicio .hv-ferr.is-ativo { transform: translateX(calc(var(--u) * 8)); }
body.tds-pg-inicio .hv-proc.is-ativo { transform: translateX(calc(var(--u) * -8)); }
body.tds-pg-inicio .hv-proc > i { flex: none; position: relative; width: calc(var(--u) * 54); height: calc(var(--u) * 54); border-radius: 50%; background: #EF5433; }
body.tds-pg-inicio .hv-proc > i::before { content: ""; position: absolute; inset: 24%; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-inicio .hv-proc b { display: block; font-weight: 700; font-size: calc(var(--u) * 27); line-height: 1.15; }
body.tds-pg-inicio .hv-proc small { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 21); line-height: 1.2; color: #8A8A8A; white-space: nowrap; }

/* cartão do lead, vendas no CRM e venda fechada (que aparece em cima do canto do CRM) */
body.tds-pg-inicio .hv-lead, body.tds-pg-inicio .hv-toast { position: absolute; z-index: 3; display: flex; align-items: center; gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 16) calc(var(--u) * 22); border-radius: calc(var(--u) * 20); background: #fff; box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 48) calc(var(--u) * -16) rgba(0, 0, 0, .75);
  opacity: 0; transform: translateY(calc(var(--u) * 14)) scale(.94); transition: opacity .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
body.tds-pg-inicio .hv-lead.is-on, body.tds-pg-inicio .hv-toast.is-on { opacity: 1; transform: none; }
body.tds-pg-inicio .hv-lead b, body.tds-pg-inicio .hv-toast b { display: block; font-weight: 700; font-size: calc(var(--u) * 27); line-height: 1.15; white-space: nowrap; }
body.tds-pg-inicio .hv-lead small, body.tds-pg-inicio .hv-toast small { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 21); color: #8A8A8A; white-space: nowrap; }
body.tds-pg-inicio .hv-lead em, body.tds-pg-inicio .hv-toast em { align-self: flex-start; margin-left: calc(var(--u) * 14); font-style: normal; font-size: calc(var(--u) * 21); color: #999; }
body.tds-pg-inicio .hv-lead__ic { flex: none; display: grid; place-items: center; width: calc(var(--u) * 58); height: calc(var(--u) * 58); border-radius: 50%; background: #EF5433; transition: background .3s; }
body.tds-pg-inicio .hv-lead__ic i { width: 56%; height: 56%; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
body.tds-pg-inicio .hv-toast__ok { flex: none; display: grid; place-items: center; width: calc(var(--u) * 58); height: calc(var(--u) * 58); border-radius: 50%; background: #EF5433; }
body.tds-pg-inicio .hv-toast__ok svg { width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
body.tds-pg-inicio .hv-vendas { position: absolute; z-index: 2; width: calc(var(--u) * 436); padding: calc(var(--u) * 20) calc(var(--u) * 22) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24); background: #161616; border: 1px solid #262626; box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 48) calc(var(--u) * -18) rgba(0, 0, 0, .8); }
body.tds-pg-inicio .hv-vendas__t { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 10); color: #fff; }
body.tds-pg-inicio .hv-vendas__t b { font-weight: 700; font-size: calc(var(--u) * 26); }
body.tds-pg-inicio .hv-vendas__t span { font-size: calc(var(--u) * 20); color: #999; }
body.tds-pg-inicio .hv-vendas__graf { display: flex; align-items: flex-end; gap: calc(var(--u) * 8); height: calc(var(--u) * 140); margin-top: calc(var(--u) * 16); }
body.tds-pg-inicio .hv-vendas__graf i { flex: 1; height: var(--h); border-radius: calc(var(--u) * 6) calc(var(--u) * 6) 0 0; background: #2A2A2A; transition: height .6s cubic-bezier(.2, .7, .2, 1), background .4s, box-shadow .4s; }
body.tds-pg-inicio .hv-vendas__graf i:nth-last-child(-n+3) { background: #EF5433; }
body.tds-pg-inicio .hv-vendas__graf i.is-nova { background: #F9A083; box-shadow: 0 0 calc(var(--u) * 18) rgba(239, 84, 51, .8); }

/* ================================================================ branding (só a moldura; o painel fica em assets/css/painel-marca.css)
   Na pegada do de tráfego, mas espelhado (sol à esquerda, selo em cima à esquerda, aprovação embaixo à direita), pra não
   parecer a mesma arte. A marca fica sempre montada ("Eu acho que essa animação ta quebrada": o painel vazio parecia
   quebrado) e o movimento passa por cima dela. */
body.tds-pg-inicio .fx-vis--branding { background: #F5F0DF; }
body.tds-pg-inicio .fx-vis--branding .fx-vis__in { width: 76%; margin-left: 12%; }

/* quem pediu menos movimento vê tudo montado */
@media (prefers-reduced-motion: reduce) {
  body.tds-pg-inicio .hv-funil * { transition: none !important; animation: none !important; }
}

/* ================================================================ celular */
@media (max-width: 767px) {
  /* funil: moldura em pé mostrando o miolo do desenho 1,75 vez maior; canais em duas linhas; ferramenta e etapa da faixa acesa por cima */
  body.tds-pg-inicio .fx-vis.fx-vis--funil { aspect-ratio: 310 / 420; min-height: 0; }
  body.tds-pg-inicio .fx-vis--funil .hv-funil { inset: 0 auto auto -37.5%; width: 175%; height: auto; aspect-ratio: 1300 / 1000; --u: calc(175cqw / 1300); }
  body.tds-pg-inicio .hv-canal { width: calc(var(--u) * 228); height: calc(var(--u) * 70); font-size: calc(var(--u) * 28); }
  body.tds-pg-inicio .hv-canal[data-canal="0"] { left: 22.62% !important; top: 3% !important; }
  body.tds-pg-inicio .hv-canal[data-canal="1"] { left: 41.23% !important; top: 3% !important; }
  body.tds-pg-inicio .hv-canal[data-canal="2"] { left: 59.85% !important; top: 3% !important; }
  body.tds-pg-inicio .hv-canal[data-canal="3"] { left: 22.62% !important; top: 11.4% !important; }
  body.tds-pg-inicio .hv-canal[data-canal="4"] { left: 41.23% !important; top: 11.4% !important; }
  body.tds-pg-inicio .hv-canal[data-canal="5"] { left: 59.85% !important; top: 11.4% !important; }
  body.tds-pg-inicio .hv-ferr, body.tds-pg-inicio .hv-proc { height: calc(var(--u) * 96); padding: 0 calc(var(--u) * 14); top: 57% !important; }
  body.tds-pg-inicio .hv-ferr { left: 22.3% !important; width: calc(var(--u) * 300); }
  body.tds-pg-inicio .hv-proc { left: 55.4% !important; width: calc(var(--u) * 270); }
  body.tds-pg-inicio .hv-ferr img { width: calc(var(--u) * 50); height: calc(var(--u) * 50); padding: calc(var(--u) * 7); }
  body.tds-pg-inicio .hv-ferr img.is-largo { width: calc(var(--u) * 86); padding: calc(var(--u) * 6); }
  body.tds-pg-inicio .hv-ferr b, body.tds-pg-inicio .hv-proc b { font-size: calc(var(--u) * 30); }
  body.tds-pg-inicio .hv-proc small { display: none; }
  body.tds-pg-inicio .hv-proc > i { width: calc(var(--u) * 50); height: calc(var(--u) * 50); }
  body.tds-pg-inicio .hv-ferr[data-k="1"], body.tds-pg-inicio .hv-proc[data-k="1"] { transform: translateY(calc(var(--u) * -10)) scale(.96); }
  body.tds-pg-inicio .hv-ferr[data-k="0"], body.tds-pg-inicio .hv-proc[data-k="0"] { transform: translateY(calc(var(--u) * -20)) scale(.92); }
  body.tds-pg-inicio .hv-ferr.is-ativo, body.tds-pg-inicio .hv-proc.is-ativo { z-index: 4; transform: none; }
  body.tds-pg-inicio .hv-fio { display: none; }
  /* o lead e a venda aparecem em cima do canto do CRM, sem cobrir o título dele; presos pela direita, o cartão mais largo não passa da moldura */
  body.tds-pg-inicio .hv-lead, body.tds-pg-inicio .hv-toast { left: auto !important; right: 23% !important; top: 66% !important; }
  body.tds-pg-inicio .hv-lead b, body.tds-pg-inicio .hv-toast b { font-size: calc(var(--u) * 30); }
  body.tds-pg-inicio .hv-lead small, body.tds-pg-inicio .hv-toast small { font-size: calc(var(--u) * 25); }
  body.tds-pg-inicio .hv-vendas { left: 23.5% !important; top: 75.5% !important; width: calc(var(--u) * 400); }
  body.tds-pg-inicio .hv-vendas__t b { font-size: calc(var(--u) * 30); }
  body.tds-pg-inicio .hv-vendas__t span { font-size: calc(var(--u) * 25); }

  /* branding: o painel entra no fluxo e cresce com o conteúdo, com letra legível */
  body.tds-pg-inicio .fx-vis--branding { padding: 46px 0 34px; }
  body.tds-pg-inicio .fx-vis--branding .fx-vis__in { width: 94%; margin-left: 4%; }
  /* em 360 "Diferencial" entrava embaixo do check e a coluna da identidade cortava o logo e a 4ª cor */
  body.tds-pg-inicio .fx-vis--branding .bd-tela { padding: 10px; }
  body.tds-pg-inicio .fx-vis--branding .bd-grade { gap: 8px; }
  body.tds-pg-inicio .fx-vis--branding .bd-lin { gap: 6px; padding: 8px 5px; }
  body.tds-pg-inicio .fx-vis--branding .bd-ok { width: 12px; height: 12px; }
  body.tds-pg-inicio .fx-vis--branding .bd-id__in { padding: 6px; gap: 6px; }
  body.tds-pg-inicio .fx-vis--branding .bd-logo { padding: 6px; gap: 5px; }
  body.tds-pg-inicio .fx-vis--branding .bd-logo svg { width: 22px; height: 22px; }
  body.tds-pg-inicio .fx-vis--branding .bd-logo b { font-size: 14px; }
  body.tds-pg-inicio .fx-vis--branding .bd-tipo { padding: 6px; gap: 5px; }
  body.tds-pg-inicio .fx-vis--branding .bd-tipo b { font-size: 21px; }
}