/* whereTOemigrate — engine card (hero demo widget)
   Scoped under .wtec. Uses the site's design tokens when present; every var() carries a fallback
   so the card also renders standalone. No inline styles required (CSP-safe). */

.wtec{
  --_ink:var(--ink,#0C2E2B);
  --_primary:var(--primary,#1A5C50);
  --_primary-30:var(--primary-30,#D0E8E3);
  --_mist:var(--surface-mist,#EDF5F3);
  --_accent:var(--accent,#A84A20);
  --_amber:var(--verdict-almost,#9A6700);
  --_green:var(--verdict-eligible,#0F6B3A);
  --_g100:var(--grey-100,#F2F3F5);
  --_g500:var(--grey-500,#5A6470);
  --_g700:var(--grey-700,#3D4451);
  --_bsoft:var(--border-soft,#E5E7EA);
  --_hbg:var(--highlight-band-bg,#FBF1EC);
  --_hbd:var(--highlight-band-border,#E4C4B4);
  --_mono:var(--font-mono,'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace);
  --_sans:var(--font-sans,'Inter',system-ui,-apple-system,'Segoe UI',sans-serif);
  --_serif:var(--font-display,'Fraunces',Georgia,serif);
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 44px rgba(12,46,43,.16),0 2px 8px rgba(12,46,43,.08);
  font-family:var(--_sans);max-width:520px;
}
.wtec-funnel{padding:16px 18px 4px;display:flex;flex-direction:column;align-items:center;gap:6px}
.wtec-pool{width:100%;overflow:hidden;border:1px solid var(--_bsoft);border-radius:8px;padding:9px 11px}
.wtec-dots{display:grid;grid-template-columns:repeat(24,1fr);gap:4px}
.wtec-dots span{height:8px;border-radius:2px;background:var(--_g100);transition:background .3s ease}
.wtec-dots span.on{background:var(--_primary)}
.wtec-dots span.flick{animation:wtec-flick 3.2s ease-in-out infinite}
.wtec-poolline{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font:600 10.5px var(--_mono);letter-spacing:.07em;color:var(--_g700);text-transform:uppercase}
.wtec-poolline span:last-child{color:var(--_g500)}
.wtec-ticker{overflow:hidden;margin-top:7px;border-top:1px dashed var(--_bsoft);padding-top:7px}
.wtec-ticker-track{display:inline-flex;white-space:nowrap;font:500 9.5px var(--_mono);letter-spacing:.08em;color:var(--_g500);opacity:.75;animation:wtec-ticker 22s linear infinite}
.wtec-arrow{font:600 12px var(--_mono);color:var(--_g500)}
.wtec-filters{width:80%;background:var(--_mist);border:1px solid var(--_primary-30);border-radius:8px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;opacity:.45;transition:opacity .3s ease}
.wtec-filters.live{opacity:1}
.wtec-chips{display:inline-flex;gap:5px;white-space:nowrap}
.wtec-chip{font:600 9.5px var(--_mono);letter-spacing:.03em;color:var(--_g500);background:transparent;border:1px solid var(--_bsoft);border-radius:999px;padding:3px 8px;transition:all .25s ease}
.wtec-chip.ok{color:var(--_primary);background:#fff;border-color:var(--_primary-30)}
.wtec-remain{font:600 10.5px var(--_mono);color:var(--_ink)}
.wtec-fitband{width:56%;background:#fff;border:1px solid var(--_bsoft);border-radius:8px;padding:7px 12px;text-align:center;font:600 12px var(--_mono);letter-spacing:.07em;color:var(--_g500);opacity:.45;transition:all .3s ease;text-transform:uppercase}
.wtec-fitband.live{background:var(--_hbg);border-color:var(--_hbd);color:var(--_accent);opacity:1}
.wtec-rows{min-height:160px}
.wtec-row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--_bsoft)}
.wtec-row:last-child{border-bottom:none}
.wtec-row.in{animation:wtec-slideup .4s ease backwards}
.wtec-flag{width:24px;height:18px;border-radius:3px;object-fit:cover;background:var(--_g100);flex:none}
.wtec-flag-chip{width:24px;height:18px;border-radius:3px;background:var(--_g100);color:var(--_g500);font:600 8.5px var(--_mono);display:flex;align-items:center;justify-content:center;flex:none;text-transform:uppercase}
.wtec-row-main{flex:1;min-width:0}
.wtec-country{font:600 15px var(--_sans);color:var(--_ink)}
.wtec-route{font:500 12px var(--_mono);color:var(--_g500);letter-spacing:.04em;text-transform:uppercase}
.wtec-blocker{font:600 10px var(--_mono);letter-spacing:.05em;color:var(--_amber);margin-top:2px;text-transform:uppercase}
.wtec-verdict{font:600 9.5px var(--_mono);letter-spacing:.06em;border-radius:999px;padding:3px 9px;flex:none;text-transform:uppercase}
.wtec-verdict.eligible{background:#E7F1EB;color:var(--_green)}
.wtec-verdict.almost{background:#F6EDDA;color:var(--_amber)}
.wtec-score{font:500 22px var(--_serif);color:var(--_ink);flex:none;min-width:30px;text-align:right}
.wtec-skel .wtec-row{animation:wtec-pulse 2.4s ease infinite}
.wtec-skel .b{background:var(--_g100);border-radius:5px}
.wtec-skel .b1{width:24px;height:18px;border-radius:3px;flex:none}
.wtec-skel .b2{display:block;width:38%;height:10px;margin-bottom:6px}
.wtec-skel .b3{display:block;width:58%;height:8px}
.wtec-skel .b4{width:58px;height:18px;border-radius:999px;flex:none}
.wtec-skel .b5{width:30px;height:16px;flex:none}
.wtec-foot{padding:9px 18px;background:var(--_g100);font:500 10px var(--_mono);letter-spacing:.07em;color:var(--_g500);text-transform:uppercase}
@keyframes wtec-ticker{to{transform:translateX(-50%)}}
@keyframes wtec-flick{0%,100%{background:var(--_g100);box-shadow:none}50%{background:var(--_primary);box-shadow:0 0 6px rgba(26,92,80,.35)}}
@keyframes wtec-slideup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes wtec-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .wtec *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* DSR-030 (nº38, 2026-07-21): rótulo VISÍVEL de exemplo — o aria-label sozinho
   só servia leitores de ecrã; visualmente o mock parecia output real. */
.wtec{position:relative}
.wtec-sample{position:absolute;top:10px;right:12px;z-index:3;font:700 9px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(12,46,43,.85);border-radius:5px;padding:4px 7px;pointer-events:none}