/* ═══════════════════════════════════════════════════════════
   MASCOTE — pixel art em CSS puro.
   Um elemento só: o gradiente da marca recortado por um clip-path único,
   traçado sobre a grade 20×24. O degradê é contínuo pela figura
   inteira, e o tamanho todo sai de --px.

   Por que clip-path e não máscara por linhas: uma camada de máscara por
   linha deixava listras horizontais no corpo — o navegador suaviza a borda
   de cada camada e abre uma fresta. Um recorte só não tem emenda.

   Gerado por scratchpad/gerar_mascote.py — não editar à mão.
   ═══════════════════════════════════════════════════════════ */

.msc{
  --px:6px;                     /* tamanho do pixel — muda a escala inteira */
  --g1:#FFB800; --g2:#FF6B35; --g3:#FF3D7F;
  --tinta:#14120F;              /* olhos e boca */
  --brilho:#FDF6E3;             /* pupila */
  position:relative;
  display:block;                /* funciona em <span> também, não só <div> */
  width:calc(20 * var(--px));
  height:calc(24 * var(--px));
  flex:none;
  background:linear-gradient(180deg,var(--g1) 0%,var(--g2) 46%,var(--g3) 100%);
  -webkit-clip-path:polygon(0% 0%,15% 0%,15% 8.3333%,20% 8.3333%,20% 12.5%,25% 12.5%,25% 16.6667%,30% 16.6667%,30% 20.8333%,35% 20.8333%,35% 25%,65% 25%,65% 20.8333%,70% 20.8333%,70% 16.6667%,75% 16.6667%,75% 12.5%,80% 12.5%,80% 8.3333%,85% 8.3333%,85% 0%,100% 0%,100% 70.8333%,95% 70.8333%,95% 83.3333%,85% 83.3333%,85% 95.8333%,80% 95.8333%,80% 100%,70% 100%,70% 95.8333%,65% 95.8333%,65% 83.3333%,35% 83.3333%,35% 95.8333%,30% 95.8333%,30% 100%,20% 100%,20% 95.8333%,15% 95.8333%,15% 83.3333%,5% 83.3333%,5% 70.8333%,0% 70.8333%);
  clip-path:polygon(0% 0%,15% 0%,15% 8.3333%,20% 8.3333%,20% 12.5%,25% 12.5%,25% 16.6667%,30% 16.6667%,30% 20.8333%,35% 20.8333%,35% 25%,65% 25%,65% 20.8333%,70% 20.8333%,70% 16.6667%,75% 16.6667%,75% 12.5%,80% 12.5%,80% 8.3333%,85% 8.3333%,85% 0%,100% 0%,100% 70.8333%,95% 70.8333%,95% 83.3333%,85% 83.3333%,85% 95.8333%,80% 95.8333%,80% 100%,70% 100%,70% 95.8333%,65% 95.8333%,65% 83.3333%,35% 83.3333%,35% 95.8333%,30% 95.8333%,30% 100%,20% 100%,20% 95.8333%,15% 95.8333%,15% 83.3333%,5% 83.3333%,5% 70.8333%,0% 70.8333%);
}

/* ── rosto: 3 filhos, cada um em coordenadas de pixel ── */
.msc i{position:absolute;display:block}

.msc-olhos{
  left:calc(3 * var(--px)); top:calc(10 * var(--px));
  width:calc(4 * var(--px)); height:calc(4 * var(--px));
  background:var(--tinta);
  box-shadow:calc(10 * var(--px)) 0 0 0 var(--tinta);
}
.msc-pup{
  left:calc(4 * var(--px)); top:calc(11 * var(--px));
  width:var(--px); height:var(--px);
  background:var(--brilho);
  box-shadow:calc(10 * var(--px)) 0 0 0 var(--brilho);
}
.msc-boca{
  left:calc(8 * var(--px)); top:calc(15 * var(--px));
  width:calc(4 * var(--px)); height:var(--px);
  background:var(--tinta);
}

/* ═══ escalas ═══ */
.msc--p{--px:4px}
.msc--g{--px:9px}
.msc--gg{--px:13px}

/* ═══════════════════════════════════════════════════════════
   CORES — duas fontes, ambas do design system existente:

   1) brand-book/index.html — a paleta da marca
      amber #FFB925 · orange #FF6F2C · red #FA1810 · rose #FF3E66
      magenta #FF428B · ink #0A0A0A · paper #F4F1EC

   2) lp-home/index.html .sb-set[data-sb] — a cor de cada motor,
      que é onde vivem o roxo e o azul da marca:
      01 Captação #E8B93A · 02 Atendimento #9D4EDD (roxo)
      03 Funil #FF6B35 · 04 Relacionamento #F08214
      05 Inteligência #2563EB (azul) · sucesso #00A865 (verde)

   Cada variante define o par --tinta/--brilho junto, porque olho
   e pupila precisam inverter conforme o corpo escurece.

   ┌─ QUAL USAR EM QUAL PAINEL ──────────────────────────────┐
   │ Razão de contraste medida contra o fundo de cada painel. │
   │ abaixo de 2:1 = some, não usar.                          │
   │                                                           │
   │ pnl--branco / creme / pessego / areia                     │
   │   melhor  .msc--inteligencia 4,8 · .msc--atendimento 4,2  │
   │           .msc--ink                                       │
   │   ok      .msc (padrão) · .msc--fogo · .msc--vermelho     │
   │           .msc--rose · .msc--magenta · .msc--sucesso 2,8  │
   │   NÃO     .msc--amber 1,7 · .msc--captacao 1,7            │
   │           .msc--paper 1,0                                 │
   │                                                           │
   │ pnl--escuro (a prova) — todas passam (3,6 a 10,2)         │
   │   NÃO     .msc--ink 1,1                                   │
   │                                                           │
   │ pnl--fogo (a garantia) ← o mais restritivo                │
   │   ✓ SÓ .msc--paper e .msc--ink                            │
   │   NENHUMA cor da paleta sobrevive ao fogo (1,0 a 1,8)     │
   └───────────────────────────────────────────────────────────┘
   ═══════════════════════════════════════════════════════════ */

/* fogo cheio: o gradiente de 4 cores do brand-book, com o vermelho */
.msc--fogo{
  background:linear-gradient(180deg,#FFB925 0%,#FF6F2C 34%,#FA1810 64%,#FF428B 100%);
}

/* monocromáticos do brand-book — gradiente da própria cor, para dar volume */
.msc--amber   {background:linear-gradient(180deg,#FFC94F,#FFB925 55%,#E89400)}
.msc--laranja {background:linear-gradient(180deg,#FF8A4D,#FF6F2C 55%,#E85307)}
.msc--vermelho{background:linear-gradient(180deg,#FF4A40,#FA1810 55%,#C50D06)}
.msc--rose    {background:linear-gradient(180deg,#FF6684,#FF3E66 55%,#E01F49)}
.msc--magenta {background:linear-gradient(180deg,#FF6BA5,#FF428B 55%,#DB1F6B)}

/* ── as cores dos 5 motores (lp-home/index.html: .sb-set[data-sb]) ──
   cada motor já tem o par claro/escuro definido: --cs e --cxc.
   O mascote assume a cor do motor que a dobra está apresentando. */
.msc--captacao     {background:linear-gradient(180deg,#F5D06A,#E8B93A 52%,#B07A00)}
.msc--atendimento  {background:linear-gradient(180deg,#B87BE8,#9D4EDD 52%,#7A2FBA)}  /* roxo */
.msc--funil        {background:linear-gradient(180deg,#FF8F63,#FF6B35 52%,#C22C38)}
.msc--relacionamento{background:linear-gradient(180deg,#F7A24E,#F08214 52%,#A85B00)}
.msc--inteligencia {background:linear-gradient(180deg,#5B8DF2,#2563EB 52%,#1A47B8)}  /* azul */

/* verde de sucesso (--success #00A865) — para "deu certo", garantia cumprida */
.msc--sucesso{background:linear-gradient(180deg,#2ED18C,#00A865 52%,#007A4A)}

/* ink: para painel claro, contraste máximo. O rosto inverte. */
.msc--ink{
  background:linear-gradient(180deg,#2E2E2E,#0A0A0A 60%);
  --tinta:#F4F1EC; --brilho:#0A0A0A;
}

/* paper: para o painel escuro e o de fogo, onde o laranja some */
.msc--paper{
  background:linear-gradient(180deg,#FFFFFF,#F4F1EC 60%,#DAD6CD);
  --tinta:#0A0A0A; --brilho:#F4F1EC;
}

/* marca d'água: o mascote como textura de fundo, não como protagonista */
.msc--marca{opacity:.14}
.msc--marca .msc-olhos,.msc--marca .msc-pup,.msc--marca .msc-boca{opacity:.5}

/* ═══ poses — o mascote encena a afirmação da dobra ═══ */

/* perdido: cinza, pupilas caídas e para fora. Usado em "o problema". */
.msc--perdido{
  --g1:#C9C4BA; --g2:#B5B0A6; --g3:#A19C93;
  --tinta:#5A564E;
}
.msc--perdido .msc-pup{
  left:calc((3 + 4 - 2) * var(--px));
  top:calc((10 + 4 - 2) * var(--px));
  box-shadow:calc((13 - 3 - 2) * var(--px)) 0 0 0 var(--brilho);
}

/* dormindo: olhos viram fresta. "aqui não tem passo. roda sozinho." */
.msc--dormindo .msc-olhos{
  top:calc((10 + 2) * var(--px));
  height:var(--px);
}
.msc--dormindo .msc-pup{display:none}

/* veloz: inclinado à frente. "responde antes do lead esfriar"
   (sem rastro: o clip-path recorta tudo que sai da silhueta, inclusive
   pseudo-elementos — quem quiser rastro, põe num wrapper por fora) */
.msc--veloz{transform:rotate(-8deg)}

/* atento: pupilas centradas, encarando quem lê */
.msc--atento .msc-pup{
  left:calc((3 + 1) * var(--px));
  top:calc((10 + 1) * var(--px));
}

/* ═══════════════════════════════════════════════════════════
   SOMBRA E ADEREÇOS — o padrão da Hyros na dobra de use cases:
   o mascote ganha um objeto que nomeia o segmento e uma sombra
   elíptica aos pés, que o assenta no card em vez de flutuar.
   Tudo vive no .msc-cena, fora do clip-path.
   ═══════════════════════════════════════════════════════════ */
.msc-sombra{
  position:absolute;left:50%;bottom:calc(var(--px) * -.55);
  width:84%;height:calc(var(--px) * 1.35);
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(20,18,15,.34) 0%,rgba(20,18,15,.16) 52%,transparent 74%);
  border-radius:50%;pointer-events:none;
}

.msc-item{position:absolute;pointer-events:none}

/* ── adereços em PIXEL ART: só blocos, sem curva nem raio ──
   box-shadow com spread 0 desenha cada pixel. O pixel do adereço (--ipx)
   é maior que o do mascote: no mesmo tamanho ele desaparece ao lado. */
.msc-item{--ipx:calc(var(--px) * 1.7)}


/* 01 · infoprodutos — birrete de formatura */
.msc-item--birrete{
  left:50%;top:calc(var(--ipx) * -1.7);width:var(--ipx);height:var(--ipx);
  transform:translateX(calc(var(--ipx) * -3.5));
  background:#14120F;
  box-shadow:
    calc(var(--ipx) * 1) 0 0 0 #14120F, calc(var(--ipx) * 2) 0 0 0 #14120F,
    calc(var(--ipx) * 3) 0 0 0 #14120F, calc(var(--ipx) * 4) 0 0 0 #14120F,
    calc(var(--ipx) * 5) 0 0 0 #14120F, calc(var(--ipx) * 6) 0 0 0 #14120F,
    calc(var(--ipx) * 1) calc(var(--ipx) * 1) 0 0 #14120F,
    calc(var(--ipx) * 2) calc(var(--ipx) * 1) 0 0 #14120F,
    calc(var(--ipx) * 3) calc(var(--ipx) * 1) 0 0 #14120F,
    calc(var(--ipx) * 4) calc(var(--ipx) * 1) 0 0 #14120F,
    calc(var(--ipx) * 5) calc(var(--ipx) * 1) 0 0 #14120F,
    calc(var(--ipx) * 2) calc(var(--ipx) * 2) 0 0 #14120F,
    calc(var(--ipx) * 3) calc(var(--ipx) * 2) 0 0 #14120F,
    calc(var(--ipx) * 4) calc(var(--ipx) * 2) 0 0 #14120F,
    calc(var(--ipx) * 6) calc(var(--ipx) * 1) 0 0 #FFB925,
    calc(var(--ipx) * 6) calc(var(--ipx) * 2) 0 0 #FFB925;
}

/* 02 · e-commerce — sacola com cifrão vazado (sprite 9×11) */
.msc-item--sacola{
  --ipx:calc(var(--px) * .82);          /* pixel menor = mais detalhe */
  right:calc(var(--px) * -3.4);top:calc(var(--px) * 11);
  width:var(--ipx);height:var(--ipx);background:#00A865;
  box-shadow:
    calc(var(--ipx) * 4) 0 0 0 #00A865,
    0 calc(var(--ipx) * 1) 0 0 #00A865,
    calc(var(--ipx) * 4) calc(var(--ipx) * 1) 0 0 #00A865,
    calc(var(--ipx) * -2) calc(var(--ipx) * 2) 0 0 #00A865,
    calc(var(--ipx) * -1) calc(var(--ipx) * 2) 0 0 #00A865,
    0 calc(var(--ipx) * 2) 0 0 #00A865,
    calc(var(--ipx) * 1) calc(var(--ipx) * 2) 0 0 #00A865,
    calc(var(--ipx) * 2) calc(var(--ipx) * 2) 0 0 #00A865,
    calc(var(--ipx) * 3) calc(var(--ipx) * 2) 0 0 #00A865,
    calc(var(--ipx) * 4) calc(var(--ipx) * 2) 0 0 #00A865,
    calc(var(--ipx) * 5) calc(var(--ipx) * 2) 0 0 #00A865,
    calc(var(--ipx) * 6) calc(var(--ipx) * 2) 0 0 #00A865,
    calc(var(--ipx) * -2) calc(var(--ipx) * 3) 0 0 #00A865,
    calc(var(--ipx) * -1) calc(var(--ipx) * 3) 0 0 #00A865,
    0 calc(var(--ipx) * 3) 0 0 #00A865,
    calc(var(--ipx) * 1) calc(var(--ipx) * 3) 0 0 #00A865,
    calc(var(--ipx) * 2) calc(var(--ipx) * 3) 0 0 #FFF,
    calc(var(--ipx) * 3) calc(var(--ipx) * 3) 0 0 #00A865,
    calc(var(--ipx) * 4) calc(var(--ipx) * 3) 0 0 #00A865,
    calc(var(--ipx) * 5) calc(var(--ipx) * 3) 0 0 #00A865,
    calc(var(--ipx) * 6) calc(var(--ipx) * 3) 0 0 #00A865,
    calc(var(--ipx) * -2) calc(var(--ipx) * 4) 0 0 #00A865,
    calc(var(--ipx) * -1) calc(var(--ipx) * 4) 0 0 #00A865,
    0 calc(var(--ipx) * 4) 0 0 #00A865,
    calc(var(--ipx) * 1) calc(var(--ipx) * 4) 0 0 #FFF,
    calc(var(--ipx) * 2) calc(var(--ipx) * 4) 0 0 #FFF,
    calc(var(--ipx) * 3) calc(var(--ipx) * 4) 0 0 #FFF,
    calc(var(--ipx) * 4) calc(var(--ipx) * 4) 0 0 #00A865,
    calc(var(--ipx) * 5) calc(var(--ipx) * 4) 0 0 #00A865,
    calc(var(--ipx) * 6) calc(var(--ipx) * 4) 0 0 #00A865,
    calc(var(--ipx) * -2) calc(var(--ipx) * 5) 0 0 #00A865,
    calc(var(--ipx) * -1) calc(var(--ipx) * 5) 0 0 #00A865,
    0 calc(var(--ipx) * 5) 0 0 #FFF,
    calc(var(--ipx) * 1) calc(var(--ipx) * 5) 0 0 #00A865,
    calc(var(--ipx) * 2) calc(var(--ipx) * 5) 0 0 #FFF,
    calc(var(--ipx) * 3) calc(var(--ipx) * 5) 0 0 #00A865,
    calc(var(--ipx) * 4) calc(var(--ipx) * 5) 0 0 #00A865,
    calc(var(--ipx) * 5) calc(var(--ipx) * 5) 0 0 #00A865,
    calc(var(--ipx) * 6) calc(var(--ipx) * 5) 0 0 #00A865,
    calc(var(--ipx) * -2) calc(var(--ipx) * 6) 0 0 #00A865,
    calc(var(--ipx) * -1) calc(var(--ipx) * 6) 0 0 #00A865,
    0 calc(var(--ipx) * 6) 0 0 #00A865,
    calc(var(--ipx) * 1) calc(var(--ipx) * 6) 0 0 #FFF,
    calc(var(--ipx) * 2) calc(var(--ipx) * 6) 0 0 #FFF,
    calc(var(--ipx) * 3) calc(var(--ipx) * 6) 0 0 #FFF,
    calc(var(--ipx) * 4) calc(var(--ipx) * 6) 0 0 #00A865,
    calc(var(--ipx) * 5) calc(var(--ipx) * 6) 0 0 #00A865,
    calc(var(--ipx) * 6) calc(var(--ipx) * 6) 0 0 #00A865,
    calc(var(--ipx) * -2) calc(var(--ipx) * 7) 0 0 #00A865,
    calc(var(--ipx) * -1) calc(var(--ipx) * 7) 0 0 #00A865,
    0 calc(var(--ipx) * 7) 0 0 #00A865,
    calc(var(--ipx) * 1) calc(var(--ipx) * 7) 0 0 #00A865,
    calc(var(--ipx) * 2) calc(var(--ipx) * 7) 0 0 #FFF,
    calc(var(--ipx) * 3) calc(var(--ipx) * 7) 0 0 #00A865,
    calc(var(--ipx) * 4) calc(var(--ipx) * 7) 0 0 #FFF,
    calc(var(--ipx) * 5) calc(var(--ipx) * 7) 0 0 #00A865,
    calc(var(--ipx) * 6) calc(var(--ipx) * 7) 0 0 #00A865,
    calc(var(--ipx) * -2) calc(var(--ipx) * 8) 0 0 #00A865,
    calc(var(--ipx) * -1) calc(var(--ipx) * 8) 0 0 #00A865,
    0 calc(var(--ipx) * 8) 0 0 #00A865,
    calc(var(--ipx) * 1) calc(var(--ipx) * 8) 0 0 #FFF,
    calc(var(--ipx) * 2) calc(var(--ipx) * 8) 0 0 #FFF,
    calc(var(--ipx) * 3) calc(var(--ipx) * 8) 0 0 #FFF,
    calc(var(--ipx) * 4) calc(var(--ipx) * 8) 0 0 #00A865,
    calc(var(--ipx) * 5) calc(var(--ipx) * 8) 0 0 #00A865,
    calc(var(--ipx) * 6) calc(var(--ipx) * 8) 0 0 #00A865,
    calc(var(--ipx) * -2) calc(var(--ipx) * 9) 0 0 #00A865,
    calc(var(--ipx) * -1) calc(var(--ipx) * 9) 0 0 #00A865,
    0 calc(var(--ipx) * 9) 0 0 #00A865,
    calc(var(--ipx) * 1) calc(var(--ipx) * 9) 0 0 #00A865,
    calc(var(--ipx) * 2) calc(var(--ipx) * 9) 0 0 #FFF,
    calc(var(--ipx) * 3) calc(var(--ipx) * 9) 0 0 #00A865,
    calc(var(--ipx) * 4) calc(var(--ipx) * 9) 0 0 #00A865,
    calc(var(--ipx) * 5) calc(var(--ipx) * 9) 0 0 #00A865,
    calc(var(--ipx) * 6) calc(var(--ipx) * 9) 0 0 #00A865,
    calc(var(--ipx) * -2) calc(var(--ipx) * 10) 0 0 #00A865,
    calc(var(--ipx) * -1) calc(var(--ipx) * 10) 0 0 #00A865,
    0 calc(var(--ipx) * 10) 0 0 #00A865,
    calc(var(--ipx) * 1) calc(var(--ipx) * 10) 0 0 #00A865,
    calc(var(--ipx) * 2) calc(var(--ipx) * 10) 0 0 #00A865,
    calc(var(--ipx) * 3) calc(var(--ipx) * 10) 0 0 #00A865,
    calc(var(--ipx) * 4) calc(var(--ipx) * 10) 0 0 #00A865,
    calc(var(--ipx) * 5) calc(var(--ipx) * 10) 0 0 #00A865,
    calc(var(--ipx) * 6) calc(var(--ipx) * 10) 0 0 #00A865;
}

/* 03 · negócios locais — pin de mapa fincado na cabeça (sprite 7×8) */
.msc-item--pin{
  --ipx:calc(var(--px) * .82);
  left:50%;top:calc(var(--px) * -5.4);
  transform:translateX(calc(var(--ipx) * -3.5));
  width:var(--ipx);height:var(--ipx);background:#FA1810;
  box-shadow:
    calc(var(--ipx) * 1) 0 0 0 #FA1810,
    calc(var(--ipx) * 2) 0 0 0 #FA1810,
    calc(var(--ipx) * 3) 0 0 0 #FA1810,
    calc(var(--ipx) * 4) 0 0 0 #FA1810,
    calc(var(--ipx) * -1) calc(var(--ipx) * 1) 0 0 #FA1810,
    0 calc(var(--ipx) * 1) 0 0 #FA1810,
    calc(var(--ipx) * 1) calc(var(--ipx) * 1) 0 0 #FA1810,
    calc(var(--ipx) * 2) calc(var(--ipx) * 1) 0 0 #FA1810,
    calc(var(--ipx) * 3) calc(var(--ipx) * 1) 0 0 #FA1810,
    calc(var(--ipx) * 4) calc(var(--ipx) * 1) 0 0 #FA1810,
    calc(var(--ipx) * 5) calc(var(--ipx) * 1) 0 0 #FA1810,
    calc(var(--ipx) * -1) calc(var(--ipx) * 2) 0 0 #FA1810,
    0 calc(var(--ipx) * 2) 0 0 #FA1810,
    calc(var(--ipx) * 1) calc(var(--ipx) * 2) 0 0 #FFF,
    calc(var(--ipx) * 2) calc(var(--ipx) * 2) 0 0 #FFF,
    calc(var(--ipx) * 3) calc(var(--ipx) * 2) 0 0 #FFF,
    calc(var(--ipx) * 4) calc(var(--ipx) * 2) 0 0 #FA1810,
    calc(var(--ipx) * 5) calc(var(--ipx) * 2) 0 0 #FA1810,
    calc(var(--ipx) * -1) calc(var(--ipx) * 3) 0 0 #FA1810,
    0 calc(var(--ipx) * 3) 0 0 #FA1810,
    calc(var(--ipx) * 1) calc(var(--ipx) * 3) 0 0 #FFF,
    calc(var(--ipx) * 2) calc(var(--ipx) * 3) 0 0 #FFF,
    calc(var(--ipx) * 3) calc(var(--ipx) * 3) 0 0 #FFF,
    calc(var(--ipx) * 4) calc(var(--ipx) * 3) 0 0 #FA1810,
    calc(var(--ipx) * 5) calc(var(--ipx) * 3) 0 0 #FA1810,
    calc(var(--ipx) * -1) calc(var(--ipx) * 4) 0 0 #FA1810,
    0 calc(var(--ipx) * 4) 0 0 #FA1810,
    calc(var(--ipx) * 1) calc(var(--ipx) * 4) 0 0 #FFF,
    calc(var(--ipx) * 2) calc(var(--ipx) * 4) 0 0 #FFF,
    calc(var(--ipx) * 3) calc(var(--ipx) * 4) 0 0 #FFF,
    calc(var(--ipx) * 4) calc(var(--ipx) * 4) 0 0 #FA1810,
    calc(var(--ipx) * 5) calc(var(--ipx) * 4) 0 0 #FA1810,
    calc(var(--ipx) * -1) calc(var(--ipx) * 5) 0 0 #FA1810,
    0 calc(var(--ipx) * 5) 0 0 #FA1810,
    calc(var(--ipx) * 1) calc(var(--ipx) * 5) 0 0 #FA1810,
    calc(var(--ipx) * 2) calc(var(--ipx) * 5) 0 0 #FA1810,
    calc(var(--ipx) * 3) calc(var(--ipx) * 5) 0 0 #FA1810,
    calc(var(--ipx) * 4) calc(var(--ipx) * 5) 0 0 #FA1810,
    calc(var(--ipx) * 5) calc(var(--ipx) * 5) 0 0 #FA1810,
    0 calc(var(--ipx) * 6) 0 0 #FA1810,
    calc(var(--ipx) * 1) calc(var(--ipx) * 6) 0 0 #FA1810,
    calc(var(--ipx) * 2) calc(var(--ipx) * 6) 0 0 #FA1810,
    calc(var(--ipx) * 3) calc(var(--ipx) * 6) 0 0 #FA1810,
    calc(var(--ipx) * 4) calc(var(--ipx) * 6) 0 0 #FA1810,
    calc(var(--ipx) * 1) calc(var(--ipx) * 7) 0 0 #FA1810,
    calc(var(--ipx) * 2) calc(var(--ipx) * 7) 0 0 #FA1810,
    calc(var(--ipx) * 3) calc(var(--ipx) * 7) 0 0 #FA1810,
    calc(var(--ipx) * 2) calc(var(--ipx) * 8) 0 0 #FA1810;
}

/* 04 · empresas com time — gravata: nó, corpo e ponta triangular.
   A ponta é um ::after com clip-path, encostado no fim do corpo. Com
   box-shadow + spread negativo ela ficava solta, flutuando abaixo. */
.msc-item--time{
  /* tamanho padrão do adereço; só a altura foi ajustada — colada na boca
     (linha 16) ela lia como microfone saindo dela */
  left:50%;top:calc(var(--px) * 17);
  transform:translateX(calc(var(--ipx) * -.5));
  width:var(--ipx);height:calc(var(--ipx) * .8);
  background:#2563EB;                                        /* nó */
  box-shadow:
    calc(var(--ipx) * -.25) calc(var(--ipx) * .8) 0 0 #1A47B8,
    calc(var(--ipx) * .25)  calc(var(--ipx) * .8) 0 0 #1A47B8,
    0 calc(var(--ipx) * 1.5) 0 0 #2563EB;
}
.msc-item--time::after{
  content:"";position:absolute;left:50%;
  top:calc(var(--ipx) * 2.3);                                /* onde o corpo acaba */
  width:var(--ipx);height:calc(var(--ipx) * 1.15);
  transform:translateX(-50%);
  background:#2563EB;
  -webkit-clip-path:polygon(0 0,100% 0,50% 100%);
  clip-path:polygon(0 0,100% 0,50% 100%);
}

/* o telefone é um segundo bloco, à direita, na altura da mão */
.msc-item--fone{
  right:calc(var(--ipx) * -1.3);top:calc(var(--px) * 12);
  width:calc(var(--ipx) * 1.5);height:calc(var(--ipx) * 2.7);
  background:#14120F;
}
.msc-item--fone::before{                              /* tela */
  content:"";position:absolute;left:12%;top:14%;width:76%;height:56%;
  background:#5B8DF2;
}
.msc-item--fone::after{                               /* ondas de chamada */
  content:"";position:absolute;left:110%;top:18%;
  width:calc(var(--ipx) * .3);height:calc(var(--ipx) * .3);
  background:#2563EB;
  box-shadow:
    calc(var(--ipx) * .55) calc(var(--ipx) * -.35) 0 0 #2563EB,
    calc(var(--ipx) * 1.1) calc(var(--ipx) * -.7) 0 0 #2563EB;
}

/* óculos escuros — o mascote que não enxerga de onde vem a venda.
   Duas lentes sobre os olhos, ponte no meio e hastes para fora. */
.msc-item--oculos{
  left:calc(var(--px) * 2.4);top:calc(var(--px) * 10.4);
  width:calc(var(--px) * 3.4);height:calc(var(--px) * 3.4);
  background:#14120F;border-radius:50%;
  box-shadow:
    /* lente direita */
    calc(var(--px) * 9.8) 0 0 0 #14120F,
    /* ponte entre as lentes */
    calc(var(--px) * 4.9) calc(var(--px) * .6) 0 calc(var(--px) * -1.2) #14120F;
}
.msc-item--oculos::before,
.msc-item--oculos::after{                 /* hastes saindo para os lados */
  content:"";position:absolute;top:calc(var(--px) * 1.3);
  width:calc(var(--px) * 3.2);height:calc(var(--px) * .42);
  background:#14120F;
}
.msc-item--oculos::before{right:calc(100% - var(--px) * .3)}
.msc-item--oculos::after{left:calc(100% + var(--px) * 9.5)}
/* brilho na lente, para não virar buraco */
.msc--oculos-brilho .msc-item--oculos{
  background-image:radial-gradient(circle at 32% 28%,rgba(255,255,255,.5) 0 18%,transparent 19%);
}

/* ── mascote que cava o dinheiro parado na base ── */
/* saco de dinheiro numa mão */
.msc-item--saco{
  --ipx:calc(var(--px) * .78);
  right:calc(var(--px) * -3.6);top:calc(var(--px) * 11.5);
  width:var(--ipx);height:var(--ipx);background:#F5B21A;
  box-shadow:
    calc(var(--ipx) * 1) 0 0 0 #F5B21A,
    calc(var(--ipx) * 2) 0 0 0 #F5B21A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 1) 0 0 #F5B21A,
    0 calc(var(--ipx) * 1) 0 0 #7A5200,
    calc(var(--ipx) * 1) calc(var(--ipx) * 1) 0 0 #7A5200,
    calc(var(--ipx) * 2) calc(var(--ipx) * 1) 0 0 #7A5200,
    calc(var(--ipx) * 3) calc(var(--ipx) * 1) 0 0 #F5B21A,
    calc(var(--ipx) * -2) calc(var(--ipx) * 2) 0 0 #F5B21A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 2) 0 0 #F5B21A,
    0 calc(var(--ipx) * 2) 0 0 #F5B21A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 2) 0 0 #F5B21A,
    calc(var(--ipx) * 2) calc(var(--ipx) * 2) 0 0 #F5B21A,
    calc(var(--ipx) * 3) calc(var(--ipx) * 2) 0 0 #F5B21A,
    calc(var(--ipx) * 4) calc(var(--ipx) * 2) 0 0 #F5B21A,
    calc(var(--ipx) * -3) calc(var(--ipx) * 3) 0 0 #F5B21A,
    calc(var(--ipx) * -2) calc(var(--ipx) * 3) 0 0 #F5B21A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 3) 0 0 #F5B21A,
    0 calc(var(--ipx) * 3) 0 0 #F5B21A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 3) 0 0 #F5B21A,
    calc(var(--ipx) * 2) calc(var(--ipx) * 3) 0 0 #F5B21A,
    calc(var(--ipx) * 3) calc(var(--ipx) * 3) 0 0 #F5B21A,
    calc(var(--ipx) * 4) calc(var(--ipx) * 3) 0 0 #F5B21A,
    calc(var(--ipx) * 5) calc(var(--ipx) * 3) 0 0 #F5B21A,
    calc(var(--ipx) * -3) calc(var(--ipx) * 4) 0 0 #F5B21A,
    calc(var(--ipx) * -2) calc(var(--ipx) * 4) 0 0 #F5B21A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 4) 0 0 #F5B21A,
    0 calc(var(--ipx) * 4) 0 0 #F5B21A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 4) 0 0 #7A5200,
    calc(var(--ipx) * 2) calc(var(--ipx) * 4) 0 0 #F5B21A,
    calc(var(--ipx) * 3) calc(var(--ipx) * 4) 0 0 #F5B21A,
    calc(var(--ipx) * 4) calc(var(--ipx) * 4) 0 0 #F5B21A,
    calc(var(--ipx) * 5) calc(var(--ipx) * 4) 0 0 #F5B21A,
    calc(var(--ipx) * -3) calc(var(--ipx) * 5) 0 0 #F5B21A,
    calc(var(--ipx) * -2) calc(var(--ipx) * 5) 0 0 #F5B21A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 5) 0 0 #F5B21A,
    0 calc(var(--ipx) * 5) 0 0 #7A5200,
    calc(var(--ipx) * 1) calc(var(--ipx) * 5) 0 0 #7A5200,
    calc(var(--ipx) * 2) calc(var(--ipx) * 5) 0 0 #7A5200,
    calc(var(--ipx) * 3) calc(var(--ipx) * 5) 0 0 #F5B21A,
    calc(var(--ipx) * 4) calc(var(--ipx) * 5) 0 0 #F5B21A,
    calc(var(--ipx) * 5) calc(var(--ipx) * 5) 0 0 #F5B21A,
    calc(var(--ipx) * -3) calc(var(--ipx) * 6) 0 0 #F5B21A,
    calc(var(--ipx) * -2) calc(var(--ipx) * 6) 0 0 #F5B21A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 6) 0 0 #7A5200,
    0 calc(var(--ipx) * 6) 0 0 #F5B21A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 6) 0 0 #7A5200,
    calc(var(--ipx) * 2) calc(var(--ipx) * 6) 0 0 #F5B21A,
    calc(var(--ipx) * 3) calc(var(--ipx) * 6) 0 0 #F5B21A,
    calc(var(--ipx) * 4) calc(var(--ipx) * 6) 0 0 #F5B21A,
    calc(var(--ipx) * 5) calc(var(--ipx) * 6) 0 0 #F5B21A,
    calc(var(--ipx) * -3) calc(var(--ipx) * 7) 0 0 #F5B21A,
    calc(var(--ipx) * -2) calc(var(--ipx) * 7) 0 0 #F5B21A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 7) 0 0 #F5B21A,
    0 calc(var(--ipx) * 7) 0 0 #7A5200,
    calc(var(--ipx) * 1) calc(var(--ipx) * 7) 0 0 #7A5200,
    calc(var(--ipx) * 2) calc(var(--ipx) * 7) 0 0 #7A5200,
    calc(var(--ipx) * 3) calc(var(--ipx) * 7) 0 0 #F5B21A,
    calc(var(--ipx) * 4) calc(var(--ipx) * 7) 0 0 #F5B21A,
    calc(var(--ipx) * 5) calc(var(--ipx) * 7) 0 0 #F5B21A,
    calc(var(--ipx) * -3) calc(var(--ipx) * 8) 0 0 #F5B21A,
    calc(var(--ipx) * -2) calc(var(--ipx) * 8) 0 0 #F5B21A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 8) 0 0 #F5B21A,
    0 calc(var(--ipx) * 8) 0 0 #F5B21A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 8) 0 0 #7A5200,
    calc(var(--ipx) * 2) calc(var(--ipx) * 8) 0 0 #F5B21A,
    calc(var(--ipx) * 3) calc(var(--ipx) * 8) 0 0 #F5B21A,
    calc(var(--ipx) * 4) calc(var(--ipx) * 8) 0 0 #F5B21A,
    calc(var(--ipx) * 5) calc(var(--ipx) * 8) 0 0 #F5B21A,
    calc(var(--ipx) * -3) calc(var(--ipx) * 9) 0 0 #F5B21A,
    calc(var(--ipx) * -2) calc(var(--ipx) * 9) 0 0 #F5B21A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 9) 0 0 #F5B21A,
    0 calc(var(--ipx) * 9) 0 0 #F5B21A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 9) 0 0 #F5B21A,
    calc(var(--ipx) * 2) calc(var(--ipx) * 9) 0 0 #F5B21A,
    calc(var(--ipx) * 3) calc(var(--ipx) * 9) 0 0 #F5B21A,
    calc(var(--ipx) * 4) calc(var(--ipx) * 9) 0 0 #F5B21A,
    calc(var(--ipx) * 5) calc(var(--ipx) * 9) 0 0 #F5B21A;
}
/* pá na outra */
.msc-item--pa{
  --ipx:calc(var(--px) * .72);
  left:calc(var(--px) * -3.2);top:calc(var(--px) * 9.5);
  width:var(--ipx);height:var(--ipx);background:#8A857A;
  transform:rotate(16deg);
  box-shadow:
    calc(var(--ipx) * 1) 0 0 0 #8A857A,
    calc(var(--ipx) * 2) 0 0 0 #8A857A,
    0 calc(var(--ipx) * 1) 0 0 #8A857A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 1) 0 0 #5A564E,
    calc(var(--ipx) * 2) calc(var(--ipx) * 1) 0 0 #8A857A,
    0 calc(var(--ipx) * 2) 0 0 #8A857A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 2) 0 0 #8A857A,
    calc(var(--ipx) * 2) calc(var(--ipx) * 2) 0 0 #8A857A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 3) 0 0 #8A857A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 4) 0 0 #8A857A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 5) 0 0 #8A857A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 6) 0 0 #8A857A,
    0 calc(var(--ipx) * 7) 0 0 #8A857A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 7) 0 0 #8A857A,
    calc(var(--ipx) * 2) calc(var(--ipx) * 7) 0 0 #8A857A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 8) 0 0 #8A857A,
    0 calc(var(--ipx) * 8) 0 0 #8A857A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 8) 0 0 #8A857A,
    calc(var(--ipx) * 2) calc(var(--ipx) * 8) 0 0 #8A857A,
    calc(var(--ipx) * 3) calc(var(--ipx) * 8) 0 0 #8A857A,
    calc(var(--ipx) * -2) calc(var(--ipx) * 9) 0 0 #8A857A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 9) 0 0 #8A857A,
    0 calc(var(--ipx) * 9) 0 0 #8A857A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 9) 0 0 #8A857A,
    calc(var(--ipx) * 2) calc(var(--ipx) * 9) 0 0 #8A857A,
    calc(var(--ipx) * 3) calc(var(--ipx) * 9) 0 0 #8A857A,
    calc(var(--ipx) * 4) calc(var(--ipx) * 9) 0 0 #8A857A,
    calc(var(--ipx) * -2) calc(var(--ipx) * 10) 0 0 #8A857A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 10) 0 0 #8A857A,
    0 calc(var(--ipx) * 10) 0 0 #8A857A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 10) 0 0 #8A857A,
    calc(var(--ipx) * 2) calc(var(--ipx) * 10) 0 0 #8A857A,
    calc(var(--ipx) * 3) calc(var(--ipx) * 10) 0 0 #8A857A,
    calc(var(--ipx) * 4) calc(var(--ipx) * 10) 0 0 #8A857A,
    calc(var(--ipx) * -1) calc(var(--ipx) * 11) 0 0 #8A857A,
    0 calc(var(--ipx) * 11) 0 0 #8A857A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 11) 0 0 #8A857A,
    calc(var(--ipx) * 2) calc(var(--ipx) * 11) 0 0 #8A857A,
    calc(var(--ipx) * 3) calc(var(--ipx) * 11) 0 0 #8A857A,
    0 calc(var(--ipx) * 12) 0 0 #8A857A,
    calc(var(--ipx) * 1) calc(var(--ipx) * 12) 0 0 #8A857A,
    calc(var(--ipx) * 2) calc(var(--ipx) * 12) 0 0 #8A857A;
}

/* ── feliz: olhos apertados e sorriso ── */
/* olhos viram traço — o mesmo recurso do dormindo, mas altos */
.msc--feliz .msc-olhos{
  top:calc((10 + 1.2) * var(--px));
  height:calc(var(--px) * .8);
}
.msc--feliz .msc-pup{display:none}
/* boca em U: pontas em cima, meio embaixo */
.msc--feliz .msc-boca{
  left:calc(8 * var(--px));top:calc(15 * var(--px));
  width:var(--px);height:var(--px);
  box-shadow:
    calc(var(--px) * 3) 0 0 0 var(--tinta),
    calc(var(--px) * 1) calc(var(--px) * 1) 0 0 var(--tinta),
    calc(var(--px) * 2) calc(var(--px) * 1) 0 0 var(--tinta);
}

/* ── vida no scroll: o card acorda quando entra na tela ──
   Nada depende de hover: quem rola vê o mascote ganhar vida sozinho.
   O JS só troca a classe .msc-on; o resto é CSS. */
.msc-armado .msc-cena,.msc-armado .msc-item{opacity:0;transform:translateY(calc(var(--px) * 2))}
@media (prefers-reduced-motion:reduce){
  .msc-armado .msc-cena,.msc-armado .msc-item{opacity:1;transform:none}
}
@media (prefers-reduced-motion:no-preference){
  /* --atraso e --ritmo vêm de fora (um valor por card), para que vários
     mascotes na mesma tela não pisquem em coro. Só os loops recebem o
     atraso — a entrada acontece assim que o card aparece. */
  .msc-on .msc-cena{animation:msc-entra .6s cubic-bezier(.22,1.2,.4,1) forwards,
                              msc-boia calc(4.2s * var(--ritmo,1)) ease-in-out calc(1s + var(--atraso,0s)) infinite}
  .msc-on .msc-item:not(.msc-item--time):not(.msc-item--oculos){animation:msc-entra .6s cubic-bezier(.22,1.2,.4,1) .18s forwards,
                              msc-item-mexe calc(3.6s * var(--ritmo,1)) ease-in-out calc(1.1s + var(--atraso,0s)) infinite}
  /* gravata e óculos ficam presos ao corpo: entram, mas não balançam */
  .msc-on .msc-item--time,
  .msc-on .msc-item--oculos{animation:msc-entra .6s cubic-bezier(.22,1.2,.4,1) .18s forwards}
  /* olhos e boca acordam junto */
  .msc-on .msc-olhos{transform-origin:center;animation:msc-piscar calc(4.4s * var(--ritmo,1)) calc(1.1s + var(--atraso,0s)) infinite}
  .msc-on .msc-pup  {animation:msc-espia calc(6s * var(--ritmo,1)) ease-in-out calc(1.3s + var(--atraso,0s)) infinite}
  .msc-on .msc-boca {transform-origin:center;animation:msc-fala calc(5.2s * var(--ritmo,1)) ease-in-out calc(1.6s + var(--atraso,0s)) infinite}
}
@keyframes msc-entra{
  to{opacity:1;transform:translateY(0)}
}
@keyframes msc-boia{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(calc(var(--px) * -.5))}
}
/* o adereço balança fora de fase com o corpo — dá peso ao objeto */
@keyframes msc-item-mexe{
  0%,100%{transform:translateY(0) rotate(0)}
  35%    {transform:translateY(calc(var(--px) * -.7)) rotate(-4deg)}
  70%    {transform:translateY(calc(var(--px) * .2)) rotate(3deg)}
}
/* a pupila varre o card, como se lesse o texto ao lado */
@keyframes msc-espia{
  0%,42%,100%{transform:translate(0,0)}
  55%,78%    {transform:translate(calc(var(--px) * -.85),calc(var(--px) * .2))}
}
/* a boca "fala": encolhe e volta, duas vezes */
@keyframes msc-fala{
  0%,72%,100%{transform:scaleX(1) scaleY(1)}
  78%        {transform:scaleX(.45) scaleY(1.6)}
  84%        {transform:scaleX(1) scaleY(1)}
  90%        {transform:scaleX(.6) scaleY(1.4)}
}

/* ═══ vida: piscada lenta, só se o usuário aceitar movimento ═══
   NUNCA animar height/top/padding aqui: são propriedades de layout e o
   navegador refaz o reflow a cada frame, em loop infinito, com o clip-path
   sendo recalculado junto — a página engasga. Só transform e opacity. */
@media (prefers-reduced-motion:no-preference){
  .msc--vivo .msc-olhos{transform-origin:center;animation:msc-piscar 6.5s infinite}
}
@keyframes msc-piscar{
  0%,92%,100%{transform:scaleY(1)}
  95%        {transform:scaleY(.16)}
}

/* ═══════════════════════════════════════════════════════════
   CENA — wrapper para o que precisa ficar FORA da silhueta.
   O clip-path do .msc recorta tudo que passa da borda, inclusive
   pseudo-elementos. Suor, linhas de stress e o brinde vivem aqui.
   ═══════════════════════════════════════════════════════════ */
.msc-cena{position:relative;display:inline-block;line-height:0}

/* ── AFLITO: o mascote que não dá conta ──
   É o equivalente ao personagem que a Hyros usa na dobra do problema:
   não ilustra o produto, encena o que o leitor está sentindo. */
.msc--aflito{
  --g1:#C9C4BA; --g2:#B5B0A6; --g3:#9C978E;
  --tinta:#4E4A43;
}
/* pupilas pequenas e altas: o olhar de quem procura saída */
.msc--aflito .msc-pup{
  width:calc(var(--px) * .7);height:calc(var(--px) * .7);
  top:calc((10 + 1) * var(--px));
}
/* boca virada para baixo, montada com 4 quadradinhos de 1px:
   o elemento é o meio-esquerdo, as 3 sombras completam o arco ∩ */
.msc--aflito .msc-boca{
  left:calc(9 * var(--px));top:calc(15 * var(--px));
  width:var(--px);height:var(--px);
  box-shadow:
    calc(1 * var(--px)) 0 0 0 var(--tinta),
    calc(-1 * var(--px)) calc(1 * var(--px)) 0 0 var(--tinta),
    calc(2 * var(--px)) calc(1 * var(--px)) 0 0 var(--tinta);
}

/* gota de suor — escorre pela testa e some.
   Fica sobre a cabeça (z-index acima do .msc) e não é recortada porque
   mora no .msc-cena, fora do clip-path. */
.msc-suor{
  position:absolute;z-index:3;
  /* col 17.5: entre o olho direito (cols 13-16) e a borda da cabeça.
     Sobre o olho a gota vira lágrima — aqui lê como suor de nervoso. */
  left:calc(17.5 * var(--px));top:calc(6.6 * var(--px));
  width:calc(var(--px) * 1.25);height:calc(var(--px) * 1.7);
  background:linear-gradient(180deg,#7FC4FF,#2E8BE0);
  border-radius:46% 46% 50% 50% / 68% 68% 34% 34%;
  box-shadow:0 0 0 1px rgba(255,255,255,.5) inset;
  opacity:0;
}
/* a segunda gota desce pela lateral esquerda (col ~1.6), com atraso */
.msc-suor::after{
  content:"";position:absolute;left:calc(-15.9 * var(--px));top:calc(1.1 * var(--px));
  width:calc(var(--px) * .95);height:calc(var(--px) * 1.3);
  background:linear-gradient(180deg,#7FC4FF,#2E8BE0);
  border-radius:46% 46% 50% 50% / 68% 68% 34% 34%;
  opacity:.9;
}

/* linhas de stress — três traços curtos pulsando acima da cabeça */
.msc-stress,
.msc-stress::before,
.msc-stress::after{
  position:absolute;background:#E0562B;border-radius:2px;
  width:calc(var(--px) * 2.1);height:calc(var(--px) * .42);
}
.msc-stress{
  left:calc(-2.6 * var(--px));top:calc(4.4 * var(--px));
  transform:rotate(-34deg);opacity:.9;
}
.msc-stress::before{
  content:"";left:calc(.9 * var(--px));top:calc(2.6 * var(--px));
  transform:rotate(-8deg);width:calc(var(--px) * 1.5);
}
/* a terceira fecha o par do outro lado da cabeça */
.msc-stress::after{
  content:"";left:calc(20.2 * var(--px));top:calc(.2 * var(--px));
  transform:rotate(34deg);
}

@media (prefers-reduced-motion:no-preference){
  .msc--aflito .msc-olhos{animation:msc-nervoso 2.6s ease-in-out infinite}
  .msc--aflito .msc-boca {animation:msc-tremor 1.5s ease-in-out infinite}
  .msc-suor              {animation:msc-escorre 3.2s ease-in infinite}
  .msc-stress            {animation:msc-pulsa 1.9s ease-in-out infinite}
}
/* sem movimento: a gota fica parada na testa, visível */
@media (prefers-reduced-motion:reduce){ .msc-suor{opacity:.9} }

/* o olhar varre de um lado para o outro, procurando saída */
@keyframes msc-nervoso{
  0%,100%{transform:translateX(calc(var(--px) * -.34))}
  50%    {transform:translateX(calc(var(--px) *  .34))}
}
@keyframes msc-tremor{
  0%,100%{transform:translateX(0)}
  25%    {transform:translateX(calc(var(--px) * -.16))}
  75%    {transform:translateX(calc(var(--px) *  .16))}
}
@keyframes msc-escorre{
  0%,58%  {opacity:0;transform:translateY(0)}
  64%     {opacity:.95;transform:translateY(0)}
  92%     {opacity:.95;transform:translateY(calc(var(--px) * 7))}
  100%    {opacity:0;transform:translateY(calc(var(--px) * 8.2))}
}
@keyframes msc-pulsa{
  0%,100%{opacity:.34;transform:rotate(-32deg) scale(.9)}
  50%    {opacity:.95;transform:rotate(-32deg) scale(1.1)}
}

/* ── BRINDE: o mascote e o Claude batendo taça ── */
.msc-brinde{
  display:flex;align-items:flex-end;justify-content:center;
  gap:calc(var(--px, 9px) * 1.2);
}
.msc-brinde .msc{transform-origin:bottom right}
.msc-claude{
  width:calc(var(--px, 9px) * 11);height:calc(var(--px, 9px) * 11);
  flex:none;transform-origin:bottom left;color:#D97757;
}
.msc-claude svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:no-preference){
  .msc-brinde .msc  {animation:msc-tim-esq 3.4s ease-in-out infinite}
  .msc-brinde .msc-claude{animation:msc-tim-dir 3.4s ease-in-out infinite}
}
@keyframes msc-tim-esq{
  0%,72%,100%{transform:rotate(9deg)}
  80%        {transform:rotate(17deg)}
}
@keyframes msc-tim-dir{
  0%,72%,100%{transform:rotate(-9deg)}
  80%        {transform:rotate(-17deg)}
}

/* legenda manuscrita — o padrão da Hyros: o mascote encena, a legenda nomeia */
.msc-fig{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0}
.msc-leg{
  font-family:var(--font-mao,'Caveat',cursive);
  font-size:1.0625rem;color:#8A857A;text-align:center;line-height:1.3;max-width:22ch;
}
/* em linha: mascote ao lado da legenda, para caber dentro de um passo/card */
.msc-fig--linha{flex-direction:row;align-items:center;gap:12px;margin-top:16px}
.msc-fig--linha .msc-leg{text-align:left;font-size:1rem;max-width:28ch}
.pnl--escuro .msc-leg,.pnl--fogo .msc-leg{color:rgba(255,255,255,.72)}