/* ═══════════════════════════════════════════════════════════
   MOCKUP — vocabulário visual compartilhado entre home e segmentos.

   Extraído do inline da lp-home. É a linguagem que a Hyros usa nas
   páginas de nicho: tabela de dados, timeline de jornada, pipeline,
   soma animada. Sem isso as páginas de segmento viram muro de texto
   (medido: 5,5 elementos visuais por 1.000 caracteres, contra 63,2
   da home).

   Se mexer num componente aqui, conferir a home E os segmentos.
   ═══════════════════════════════════════════════════════════ */

.mk-pico .viva{stroke-dasharray:70;stroke-dashoffset:70;
  transition:stroke-dashoffset .95s var(--ease-out) .3s}
.mk-ciclo .viva{stroke-dasharray:96;stroke-dashoffset:96;
  transition:stroke-dashoffset 1s var(--ease-out) .35s}
.mk-ciclo .orbita{transform-origin:22px 22px}
.mk-relogio .viva{stroke-dasharray:118;stroke-dashoffset:118;
  transition:stroke-dashoffset 1.1s var(--ease-out) .3s}
.mk-relogio .ponteiro{transform-origin:22px 22px}
.mk-org .viva{stroke-dasharray:44;stroke-dashoffset:44;
  transition:stroke-dashoffset .85s var(--ease-out) .35s}
.mk-barra{display:flex;align-items:center;gap:5px;padding:10px 14px;
  border-bottom:1px solid var(--border)}
.mk-barra i{width:8px;height:8px;border-radius:50%}
.mk-corpo{padding:var(--sp-5) 56px var(--sp-5) 28px;display:flex;flex-direction:column;gap:10px}
.mk-rot{font-family:var(--font-corpo);font-size:.6875rem;font-weight:500;
  color:var(--gray-texto);letter-spacing:0}
.mk-l{display:flex;align-items:center;gap:9px}
.mk-card{border:1px solid var(--border);border-radius:10px;padding:11px 13px;background:#FFF}
.mk-t{font-size:.8125rem;color:var(--preto);font-weight:500}
.mk-d{font-size:.75rem;color:var(--gray-body);line-height:1.45}
.mk-pt{width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--nucleo-laranja),var(--nucleo-rosa))}
.mk-num{font-family:var(--font-corpo);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;
  color:var(--preto);font-variant-numeric:tabular-nums}
.mk-chip{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--nucleo-laranja) 13%,#FFF);
  border:1px solid color-mix(in srgb,var(--nucleo-laranja) 40%,transparent);color:#B8420F}
.mk-barra2{height:5px;border-radius:3px;background:var(--cream);overflow:hidden}
.mk-barra2 i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--nucleo-amarelo),var(--nucleo-rosa))}
.mk-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mk-col{background:var(--cream);border-radius:8px;padding:8px;min-height:66px}
.mk-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:.6875rem;font-weight:600;color:#FFF}
.mk-selo{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;
  font-size:.625rem;font-weight:500}
.mk-selo--ok{background:#E8F7EF;color:#0A7C48}
.mk-selo--ia{background:linear-gradient(100deg,#FFF1E6,#FFE9F1);color:#B8420F;
  border:1px solid rgba(255,107,53,.28)}
.mk-selo--ori{background:#EEF3FF;color:#2A50B8}
.mk-linha{height:1px;background:var(--border);margin:2px 0}
.mk-graf{width:100%;height:52px;display:block}
.mk-mini{display:flex;align-items:flex-end;gap:3px;height:26px}
.mk-mini i{flex:1;border-radius:2px 2px 0 0;background:var(--cream)}
.mk-mini i.on{background:linear-gradient(180deg,#FF8A2B,#FF3D7F)}
.mk-tab{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--border);font-size:.75rem}
.mk-tab:last-child{border-bottom:none}
.mk-tab b{font-weight:500;color:var(--preto)}
.mk-tab span{color:var(--gray-body);font-variant-numeric:tabular-nums}
.mk-val{font-family:var(--font-corpo);font-size:.8125rem;font-weight:600;color:var(--preto);
  font-variant-numeric:tabular-nums}
.mk-ponto{width:5px;height:5px;border-radius:50%;display:inline-block}
.mk-pipe-vp{overflow:hidden;margin:0 -6px;padding:0 6px;
  -webkit-mask-image:linear-gradient(90deg,#000 0 86%,transparent 99%);
  mask-image:linear-gradient(90deg,#000 0 86%,transparent 99%)}
.mk-pipe{display:grid;grid-template-columns:repeat(4,148px);gap:7px;width:max-content}
.mk-acao{display:flex;align-items:center;gap:6px}
.mk-score{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-full);
  font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.04em;
  background:color-mix(in srgb,var(--nucleo-laranja) 12%,#FFF);color:#B8420F;
  border:1px solid rgba(255,107,53,.3);counter-reset:lsc var(--lsc)}
.mk-score b{font-weight:600}
.mk-score b::after{content:counter(lsc)}
.mk-acoes{display:flex;gap:4px;margin-left:auto}
.mk-ac{width:19px;height:19px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-forte);background:#FFF}
.mk-ac svg{width:10px;height:10px;display:block}
.mk-neg{border:1px solid var(--border);border-radius:9px;padding:8px 9px;background:#FFF;
  display:flex;flex-direction:column;gap:6px}
.mk-neg-top{display:flex;align-items:center;gap:6px}
.mk-tag{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:4px;background:var(--cream);color:var(--gray-texto);white-space:nowrap}
.mk-fila{height:82px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.mk-fila-in{display:flex;flex-direction:column;gap:6px}
.mk-fila-i{display:flex;align-items:center;gap:7px;font-size:.6875rem;color:var(--gray-body)}
.mk-fila-i .mk-av{width:18px;height:18px;font-size:.5rem}
.mk-soma{counter-reset:tot var(--tot);font-family:var(--font-corpo);font-size:1.5rem;
  font-weight:600;letter-spacing:-.02em;color:var(--preto);font-variant-numeric:tabular-nums}
.mk-soma::before{content:"R$ "}
.mk-soma::after{content:counter(tot)}
.mk-jor{display:flex;flex-direction:column;position:relative;margin:2px 0}
.mk-jor::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;
  width:1px;background:var(--border-forte)}
.mk-jor-i{display:grid;grid-template-columns:17px 1fr auto;gap:9px;align-items:center;
  padding:4px 0;position:relative}
.mk-jor-ic{width:17px;height:17px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:#FFF;border:1px solid var(--border-forte);z-index:1}
.mk-jor-ic svg{width:9px;height:9px;display:block}
.mk-jor-i:last-child .mk-jor-ic{border-color:var(--nucleo-laranja);
  background:color-mix(in srgb,var(--nucleo-laranja) 12%,#FFF)}
.mk-jor-t{font-size:.75rem;color:var(--preto);line-height:1.3}
.mk-jor-t b{font-weight:600}
.mk-jor-q{font-family:var(--font-mono);font-size:.625rem;color:var(--gray-deco);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-vivo{width:6px;height:6px;border-radius:50%;background:#0A7C48;display:inline-block;
  margin-right:5px;position:relative}


/* ── ANIMAÇÕES DAS CENAS ──
   Elas pendem de `.mtr-cena[data-on="true"]`, que na home é ligado pelo
   scroll fixo. Nos segmentos quem liga é o observer do `data-r`: quando o
   card entra na tela, o JS marca data-on="true" na cena e a animação roda
   uma vez. Sem isso o mockup fica parado, que foi como ele nasceu aqui. */

.vis-on .mk-pico .pt{animation:mk-brilha 3.6s var(--ease-out) 1.2s infinite}
.vis-on .mk-ciclo .orbita{animation:gira 7s linear infinite}
.vis-on .mk-relogio .ponteiro{animation:gira 9s linear infinite}
.vis-on .mk-org .pt{animation:mk-brilha 4.2s var(--ease-out) 1.3s infinite}
  .mk-relogio .ponteiro,.mk-ciclo .orbita,.mk-pico .pt,.mk-org .pt{animation:none}
  .mtr-cena[data-on="true"] .mk-pipe{animation:mk-pipe-anda 13s cubic-bezier(.5,0,.2,1) infinite}
  .mtr-cena[data-on="true"] .mk-sai{animation:mk-sai 13s ease-in-out infinite}
  .mtr-cena[data-on="true"] .mk-chega{animation:mk-chega 13s cubic-bezier(.3,1.3,.4,1) infinite}
  .mtr-cena[data-on="true"] .mk-acao--1{animation:mk-acao1 13s ease-out infinite}
  .mtr-cena[data-on="true"] .mk-acao--2{animation:mk-acao2 13s ease-out infinite}
  .mtr-cena[data-on="true"] .mk-acao--3{animation:mk-acao3 13s ease-out infinite}
  .mtr-cena[data-on="true"] .mk-score{animation:mk-sobe-score 1.9s .35s cubic-bezier(.2,.9,.3,1) forwards}
  .mtr-cena[data-on="true"] .mk-fila-in{animation:mk-rola 9s linear infinite}
  .mtr-cena[data-on="true"] .mk-soma{animation:mk-somar 2.4s .3s cubic-bezier(.15,.85,.25,1) forwards}
  .mk-vivo::after{content:"";position:absolute;inset:-3px;border-radius:50%;
    border:1px solid #0A7C48;animation:mk-pulso 2.2s ease-out infinite}
  .mtr-cena[data-on="true"] .mk-corpo > *{animation:mk-sobe .42s both}
  .mtr-cena[data-on="true"] .mk-corpo > *:nth-child(1){animation-delay:.04s}
  .mtr-cena[data-on="true"] .mk-corpo > *:nth-child(2){animation-delay:.10s}
  .mtr-cena[data-on="true"] .mk-corpo > *:nth-child(3){animation-delay:.16s}
  .mtr-cena[data-on="true"] .mk-corpo > *:nth-child(4){animation-delay:.22s}
  .mtr-cena[data-on="true"] .mk-corpo > *:nth-child(5){animation-delay:.28s}
  .mtr-cena[data-on="true"] .mk-corpo > *:nth-child(6){animation-delay:.34s}

@keyframes mk-somar{from{--tot:0}to{--tot:18393}}
@keyframes mk-pulso{
  0%{transform:scale(.6);opacity:.9} 100%{transform:scale(1.5);opacity:0}
}
@keyframes mk-brilha{0%,100%{opacity:1}45%{opacity:.35}}
@keyframes mk-sai{
  0%,38%  {opacity:1;transform:scale(1)}
  50%,100%{opacity:.26;transform:scale(.97)}
}
@keyframes mk-acao2{
  0%,64%  {opacity:0;transform:translateY(5px)}
  70%,100%{opacity:1;transform:none}
}
@keyframes mk-chega{
  0%,40%  {opacity:0;transform:translateX(-46px) scale(.94)}
  50%,100%{opacity:1;transform:none}
}
@keyframes mk-acao3{
  0%,74%  {opacity:0;transform:translateY(5px)}
  80%,100%{opacity:1;transform:none}
}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes mk-sobe-score{
  0%  {--lsc:12}
  78% {--lsc:84;background:color-mix(in srgb,var(--nucleo-laranja) 12%,#FFF);color:#B8420F;border-color:rgba(255,107,53,.3)}
  86% {--lsc:87;background:#E8F7EF;color:#0A7C48;border-color:#9AD8B9}
  92% {box-shadow:0 0 0 4px rgba(10,124,72,.16)}
  100%{--lsc:87;background:#E8F7EF;color:#0A7C48;border-color:#9AD8B9;box-shadow:0 0 0 0 rgba(10,124,72,0)}
}
@keyframes mk-rola{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes mk-sobe{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes mk-pipe-anda{
  0%,27%   {transform:translateX(0)}
  38%,100% {transform:translateX(-155px)}
}
@keyframes mk-acao1{
  0%,54%  {opacity:0;transform:translateY(5px)}
  60%,100%{opacity:1;transform:none}
}