/* ==========================================================================
   TIKTOK SHOP — identidade da plataforma dentro da página da MGX (23/09/2026)

   O dono: "busque imagens e cores do TikTok Shop e coloque no nome e onde ele
   aparece". A página continua com a identidade do iHub (azul + traço
   vermelho); o que é do TikTok leva as cores do TikTok:
   · o NOME "TikTok Shop", onde aparecer, ganha a nota e o deslocamento
     ciano/rosa do logo (span.tts, aplicado pelo scripts/montar.py);
   · as TELAS dos celulares reproduzem a interface do app em DOM vivo, com a
     fonte oficial TikTok Sans (Google Fonts, licença OFL, servida local).
   Cores: ciano #25F4EE, rosa #FE2C55, preto #000 — as do logo.
   ========================================================================== */
@font-face {
  font-family: 'TikTok Sans';
  src: url('../fonts/tiktok-sans-latin-ext.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'TikTok Sans';
  src: url('../fonts/tiktok-sans-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --tt-ciano: #25F4EE;
  --tt-rosa: #FE2C55;
  --tt-preto: #000000;
  --tt-branco: #FFFFFF;
  --tt-fonte: 'TikTok Sans', 'Outfit', system-ui, sans-serif;
}

/* ---- o nome "TikTok Shop" --------------------------------------------------
   Nota à esquerda e o texto com o deslocamento de cor do logo. O deslocamento
   é em `em`: acompanha o tamanho — 2px num título de 56px, meio pixel no corpo. */
.tts {
  white-space: nowrap;
  color: var(--tt-branco) !important;
  -webkit-text-fill-color: var(--tt-branco) !important;
  background: none !important;
  text-shadow: -0.035em -0.02em 0 var(--tt-ciano), 0.035em 0.02em 0 var(--tt-rosa);
}
.tts::before {
  content: "";
  display: inline-block;
  inline-size: 0.8em;
  block-size: 0.8em;
  margin-inline-end: 0.14em;
  vertical-align: -0.06em;
  background: url('../images/tiktok/nota-tiktok.svg') center / contain no-repeat;
  text-shadow: none;
}
/* dentro das telas dos celulares o nome é interface, não marca */
.cel .tts { text-shadow: none; }
.cel .tts::before { content: none; }