/* Implantamos da home (teste B2 de 23/10, levado para a home em 25/10).
   A base dos cartoes (.tb-) mora no home.css; aqui so a cena de cada area.
   Pedido da autora: menos cara de Central de Ajuda, sem passo a passo.
   A tela do Hub fica parada (quadro sem cursor, /site/home-cenas/) com um
   movimento lento de camera e um foco pulsando no ponto da dor. Por cima,
   recortes flutuantes no estilo das referencias dela: um cartao que troca
   de estado (a dor, depois resolvida, com o check verde), um cartao com o
   resultado e a caixa com o icone da area. Em Dados e IA o Marvin fala num
   circulo. Tudo anima so com o cartao na tela, para no botao de pausa e
   fica parado (no estado resolvido) com movimento reduzido. */
.tc-palco{isolation:isolate}
.tc-janela{position:relative;overflow:hidden;border-radius:14px;background:#f3f5f9;box-shadow:0 0 0 1px #10243b14,0 30px 60px -30px #10243b80}
.tc-cam{position:relative;display:block;transform-origin:30% 40%;animation:tc-camera 18s ease-in-out infinite alternate}
.tc-tela{display:block;width:100%;height:auto;aspect-ratio:1280/780}
/* o ponto da dor reage ao clique como nos guias em video da Central de
   Ajuda (Toque, no stage.jsx do gerador): sem contorno, o elemento afunda
   com um veu leve e uma sombra interna, e um clarao redondo nasce no ponto
   do clique e some em cerca de 0,4s. Fica invisivel no resto do ciclo. */
.tc-foco{--toque:var(--area-c);position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);overflow:hidden;border-radius:10px;pointer-events:none;animation:tc-afunda 9s linear infinite}
.tc-foco::after{content:"";position:absolute;left:var(--px,70%);top:var(--py,65%);width:220%;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--toque) 13%,transparent);translate:-50% -50%;scale:.1;opacity:0;animation:tc-clarao 9s linear infinite}
.tb-card--laranja .tc-foco{--toque:#FA9800}
.tc-flutuantes{position:absolute;inset:0;z-index:2;pointer-events:none}
.tc-flut{position:absolute;left:var(--l,auto);right:var(--r,auto);top:var(--t,auto);bottom:var(--b,auto);display:flex;align-items:center;gap:14px;max-width:340px;padding:14px 24px 14px 14px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px #10243b0f,0 20px 44px -20px #10243b70,0 3px 8px -4px #10243b26;font-size:14px;line-height:1.3;color:#10243b;opacity:0;translate:0 14px;transition:opacity .6s cubic-bezier(.2,.7,.2,1),translate .6s cubic-bezier(.2,.7,.2,1)}
.tc-flut--b{flex-direction:column;align-items:flex-start;gap:4px;padding:16px 24px 18px;transition-delay:.25s}
.tc-flut--ic{display:grid;place-items:center;width:64px;height:64px;padding:0;border-radius:18px;background:color-mix(in srgb,var(--area-c) 14%,#fff);box-shadow:0 0 0 1px color-mix(in srgb,var(--area-c) 22%,transparent),0 18px 36px -18px color-mix(in srgb,var(--area-c) 70%,#10243b);--icon-base:color-mix(in srgb,var(--area-c) 70%,#10243b);--icon-tint:var(--area-c);transition-delay:.45s}
.tb-card--laranja .tc-flut--ic{--icon-base:#A65300;--icon-tint:#FA9800}
.tc-flut--ic .mi{width:32px;height:32px}
.tb-card.tc-entrou .tc-flut{opacity:1;translate:0 0}
.tc-flut--a{animation:tc-boia 7s ease-in-out infinite}
.tc-flut--b{animation:tc-boia 8s ease-in-out -3s infinite}
.tc-flut--ic{animation:tc-boia 6s ease-in-out -1.5s infinite}
.tc-av{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--av);font-size:12px;font-weight:600;color:#fff}
.tc-col{display:grid;gap:4px;min-width:0}
.tc-col b{font-weight:600}
.tc-est{grid-area:2/1;display:flex;align-items:center;gap:7px;color:#5b6478;white-space:nowrap}
.tc-est--1{animation:tc-est1 9s ease-in-out infinite}
.tc-est--2{opacity:0;color:#1f7a45;font-weight:500;animation:tc-est2 9s ease-in-out infinite}
.tc-dot{flex:none;width:8px;height:8px;border-radius:50%}
.tc-dot--alerta{background:#e5484d;box-shadow:0 0 0 3px #e5484d26}
.tc-dot--vai{background:var(--area-c);animation:tc-pulsa 1.4s ease-in-out infinite}
.tc-ok{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#dcf3e4;color:#1f7a45}
.tc-ok svg{width:12px;height:12px}
.tc-ok--grande{width:36px;height:36px}
.tc-ok--grande svg{width:20px;height:20px}
.tc-rot{font-size:12px;font-weight:500;color:#5b6478}
.tc-num{font-size:22px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tc-tit{font-size:16px;font-weight:600}
.tc-chip{margin-top:4px;padding:4px 10px;border-radius:999px;background:#f1f4f7;font-size:12px;font-weight:500;color:#3f4a5e}
.tc-chip--ok{background:#dcf3e4;color:#1f7a45}
.tc-flut.tc-esp{flex-direction:row;align-items:center;gap:12px;max-width:330px;padding:10px 16px 10px 10px;border-radius:999px}
.tc-esp-roda{position:relative;flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:color-mix(in srgb,var(--area-c) 16%,#fff);box-shadow:0 0 0 3px #fff,0 0 0 5px color-mix(in srgb,var(--area-c) 45%,transparent);animation:tc-fala 1.6s ease-in-out infinite}
.tc-esp-roda img{width:46px;height:auto}
.tc-ondas{position:absolute;right:-4px;bottom:-2px;display:flex;align-items:flex-end;gap:2px;height:16px;padding:3px 5px;border-radius:999px;background:var(--area-c)}
.tc-ondas i{width:3px;height:100%;border-radius:2px;background:#fff;transform-origin:bottom;animation:tc-onda .9s ease-in-out infinite}
.tc-ondas i:nth-child(2){animation-delay:-.3s}
.tc-ondas i:nth-child(3){animation-delay:-.6s}
.tc-esp-fala{display:grid;gap:2px;font-size:13px;color:#3f4a5e}
.tc-esp-fala b{font-size:13px;color:color-mix(in srgb,var(--area-c) 58%,#10243b)}
/* fora da tela ou pausado, tudo para */
.tc-sec .tb-card:not(.is-visivel) .tc-palco *,.tc-sec .tb-card:not(.is-visivel) .tc-palco *::after,.tc-sec .tb-card.is-pausado .tc-palco *,.tc-sec .tb-card.is-pausado .tc-palco *::after{animation-play-state:paused!important}
@keyframes tc-camera{from{transform:scale(1) translate(0,0)}to{transform:scale(1.07) translate(-1.5%,-1%)}}
@keyframes tc-pulsa{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes tc-afunda{0%,40.5%{background:transparent;box-shadow:none}41%{background:color-mix(in srgb,var(--toque) 8%,transparent);box-shadow:inset 0 2px 6px #0b132b16}46%,100%{background:transparent;box-shadow:none}}
@keyframes tc-clarao{0%,40.5%{scale:.1;opacity:0}41%{scale:.1;opacity:1}46%{scale:1;opacity:0}100%{scale:1;opacity:0}}
@keyframes tc-boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes tc-est1{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes tc-est2{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@keyframes tc-fala{0%,100%{box-shadow:0 0 0 3px #fff,0 0 0 5px color-mix(in srgb,var(--area-c) 45%,transparent)}50%{box-shadow:0 0 0 3px #fff,0 0 0 9px color-mix(in srgb,var(--area-c) 22%,transparent)}}
@keyframes tc-onda{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){
  .tc-palco *,.tc-palco *::after{animation:none!important;transition:none!important}
  .tc-flut{opacity:1;translate:none}
  .tc-est--1{opacity:0}
  .tc-est--2{opacity:1}
}
@media(max-width:900px){
  .tc-flut{max-width:260px;font-size:13px}
}
@media(max-width:520px){
  .tc-flut{gap:10px;max-width:220px;padding:10px 16px 10px 10px;border-radius:14px;font-size:12px}
  .tc-flut[style*="--l:"]{--l:-2%!important}
  .tc-flut[style*="--r:"]{--r:-2%!important}
  /* no celular so o recorte principal, o cursor e o Marvin: o resto
     cobria a tela inteira */
  .tc-flut--b:not(.tc-esp),.tc-flut--ic{display:none}
  .tc-palco .im-pausa,.tb-card--inv .tc-palco .im-pausa{z-index:4;right:-6px;bottom:-12px}
  .tc-av{width:30px;height:30px;font-size:11px}
  .tc-num{font-size:17px}
  .tc-tit{font-size:13px}
  .tc-chip{font-size:11px;padding:3px 8px}
  .tc-flut.tc-esp{max-width:236px;padding:6px 12px 6px 6px}
  .tc-esp-roda{width:44px;height:44px}
  .tc-esp-roda img{width:34px}
  .tc-est{white-space:normal}
}
/* Cursor do especialista (referencias da autora: avatar com a setinha
   colorida por cima da tela). Ele anda ate o ponto da dor no mesmo ciclo
   de 9s dos recortes: chega e "clica" pouco antes do recorte virar
   resolvido. O avatar e neutro ate a autora indicar a foto de quem
   e o especialista de cada area. */
.tc-cursor{position:absolute;left:var(--cx);top:var(--cy);z-index:3;display:flex;align-items:flex-start;gap:2px;animation:tc-cursor 9s cubic-bezier(.45,0,.2,1) infinite}
.tc-seta{flex:none;width:22px;height:22px;fill:var(--area-c);stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 4px 6px #10243b40);animation:tc-clique 9s ease-in-out infinite}
.tb-card--laranja .tc-seta{fill:#FA9800}
.tc-cursor-tag{display:flex;align-items:center;gap:6px;margin-top:16px;padding:4px 12px 4px 4px;border-radius:999px;background:color-mix(in srgb,var(--area-c) 58%,#10243b);font-size:12px;font-weight:600;color:#fff;white-space:nowrap;box-shadow:0 8px 18px -10px #10243b80}
.tb-card--laranja .tc-cursor-tag{background:#FA9800;color:#10243b}
.tc-cursor-av{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:color-mix(in srgb,var(--area-c) 58%,#10243b);overflow:hidden}
.tb-card--laranja .tc-cursor-av{color:#A65300}
.tc-cursor-av svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tc-cursor-av img{width:100%;height:100%;object-fit:cover}
@keyframes tc-cursor{0%,8%{transform:translate(120px,90px);opacity:0}16%{opacity:1}36%,62%{transform:translate(0,0);opacity:1}82%,100%{transform:translate(120px,90px);opacity:0}}
@keyframes tc-clique{0%,38%{transform:scale(1)}41%{transform:scale(.8)}44%,100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.tc-cursor{transform:none;opacity:1}}
@media(max-width:520px){
  .tc-cursor-tag{margin-top:12px;font-size:10px;padding:3px 8px 3px 3px}
  .tc-cursor-av{width:18px;height:18px}
  .tc-seta{width:16px;height:16px}
  @keyframes tc-cursor{0%,8%{transform:translate(60px,45px);opacity:0}16%{opacity:1}36%,62%{transform:translate(0,0);opacity:1}82%,100%{transform:translate(60px,45px);opacity:0}}
}

/* Dados e IA: as integracoes que entram e saem do fluxo, ligadas por fios
   finos; um pulso de dados corre pelos fios no mesmo ciclo de 9s: entra
   pelo CRM e pelos formularios, passa pelo fluxo no clique e sai para as
   tarefas e o WhatsApp, que acendem quando o pulso chega. */
.tc-fios{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tc-fio{fill:none;stroke:color-mix(in srgb,var(--area-c) 30%,#cfd6e0);stroke-width:1.5;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.tc-pulso{fill:none;stroke:var(--area-c);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 100;stroke-dashoffset:10;opacity:0;vector-effect:non-scaling-stroke;animation:tc-pulso-e 9s linear infinite}
.tc-pulso--m{animation-name:tc-pulso-m}
.tc-pulso--s{animation-name:tc-pulso-s}
.tc-int{position:absolute;left:var(--ix);top:var(--iy);display:grid;justify-items:center;gap:6px;translate:-50% -50%}
.tc-int img{width:46px;height:46px;padding:9px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #10243b14,0 10px 22px -12px #10243b66}
.tc-int--wa img{background:#25D366}
.tc-int i{font-style:normal;font-size:11px;font-weight:600;color:#3f4a5e;background:#ffffffd9;padding:1px 6px;border-radius:6px}
.tc-int--e img{animation:tc-acende-e 9s ease-out infinite}
.tc-int--s img{animation:tc-acende-s 9s ease-out infinite}
.tc-exec{margin-top:4px;font-size:12px;color:#5b6478}
.tc-exec b{font-weight:600;color:#10243b;font-variant-numeric:tabular-nums;counter-reset:exec var(--exec);animation:tc-exec 10s steps(1) infinite}
.tc-exec b::after{content:counter(exec)}
@property --exec{syntax:"<integer>";inherits:false;initial-value:12}
.tc-fala{display:grid}
.tc-fala .tc-est{color:#3f4a5e;font-weight:400;white-space:normal}
.tc-mv{--mv:44px}
.tc-mv .mv-olho{fill:#141B33;transform-box:fill-box;transform-origin:50% 50%;animation:tc-pisca 4.6s ease-in-out infinite}
.tc-mv .mv-olhos{animation:tc-olha 9s ease-in-out infinite}
.tc-mv{position:relative;display:block;width:var(--mv);aspect-ratio:1272/912;animation:tc-respira 4.8s ease-in-out infinite}
.tc-mv>img,.tc-mv>svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.tc-esp-roda .tc-mv img{width:100%}
@keyframes tc-pulso-e{0%,4%{stroke-dashoffset:10;opacity:0}6%{opacity:1}30%{stroke-dashoffset:-100;opacity:1}32%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes tc-pulso-m{0%,30%{stroke-dashoffset:10;opacity:0}32%{opacity:1}41%{stroke-dashoffset:-100;opacity:1}43%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes tc-pulso-s{0%,44%{stroke-dashoffset:10;opacity:0}46%{opacity:1}64%{stroke-dashoffset:-100;opacity:1}66%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes tc-acende-e{0%,2%{box-shadow:0 0 0 1px #10243b14,0 0 0 0 transparent,0 10px 22px -12px #10243b66}6%{box-shadow:0 0 0 1px var(--area-c),0 0 0 6px color-mix(in srgb,var(--area-c) 18%,transparent),0 10px 22px -12px #10243b66}16%,100%{box-shadow:0 0 0 1px #10243b14,0 0 0 0 transparent,0 10px 22px -12px #10243b66}}
@keyframes tc-acende-s{0%,62%{box-shadow:0 0 0 1px #10243b14,0 0 0 0 transparent,0 10px 22px -12px #10243b66}66%{box-shadow:0 0 0 1px var(--area-c),0 0 0 6px color-mix(in srgb,var(--area-c) 18%,transparent),0 10px 22px -12px #10243b66}78%,100%{box-shadow:0 0 0 1px #10243b14,0 0 0 0 transparent,0 10px 22px -12px #10243b66}}
@keyframes tc-exec{0%,69%{--exec:12}70%,100%{--exec:13}}
@keyframes tc-pisca{0%,41%,49%,100%{transform:scaleY(1)}45%{transform:scaleY(.1)}}
@keyframes tc-olha{0%,26%{transform:translate(0,0)}32%,48%{transform:translate(48px,-10px)}54%,70%{transform:translate(-42px,4px)}76%,100%{transform:translate(0,0)}}
@keyframes tc-respira{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3%) rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){.tc-exec b{--exec:13}.tc-pulso{opacity:0}}
@media(max-width:520px){
  .tc-int img{width:30px;height:30px;padding:6px;border-radius:9px}
  .tc-int i{display:none}
  .tc-mv{--mv:32px}
}
/* celular: o cursor leva so o circulo do especialista (o nome passava da
   borda do cartao quando a cena leva o cursor para a direita) */
@media(max-width:520px){.tc-cur .tc-cursor-tag{gap:0;padding:3px;font-size:0}}