/* Marca SequeLari, compartilhada por todos os sites do ecossistema (sequelarifn.com.br/marca/marca-sequelari.css).
   Fonte: Monoton (Google Fonts, servida pelo próprio site em /dados/fontes.css?v=2) com reserva em Big Shoulders Display.
   Como usar no topo de cada site, trocando o nome do jogo e a cor do selo:
   <a class="logo-sl" href="/" aria-label="SequeLari Minecraft" style="--logo-jogo:#3cf29a">
     <span class="logo-nome">SEQUELARI</span><span class="logo-jogo">Minecraft</span>
     <span class="logo-listras" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
   </a>
   Cores dos selos: Fortnite #8c5aff, GTA VI #ff3ba0, Minecraft #3cf29a (texto #062a18), Roblox #ff5a5a, Free Fire #ff9a3c, Warzone #b5d96a (texto #1a2406).
   Ícone da aba: /marca/icone.svg. Nome em letras: SEQUELARI, sempre em maiúsculas. */
.logo-sl { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: .45em; row-gap: .18em; text-decoration: none; line-height: 1; background: none; -webkit-text-fill-color: currentColor; animation: none; }
.logo-sl .logo-nome { font-family: "Monoton", "Big Shoulders Display", Impact, sans-serif; font-weight: 400; letter-spacing: .06em; color: #2fe0ff; -webkit-text-fill-color: #2fe0ff; }
.logo-sl .logo-jogo { font: 900 .62em/1 "Big Shoulders Display", Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .22em .5em .26em; border-radius: .4em; background: var(--logo-jogo, #8c5aff); color: #ffffff; -webkit-text-fill-color: #ffffff; }
.logo-sl .logo-listras { grid-column: 1 / -1; display: grid; gap: .08em; }
.logo-sl .logo-listras i { display: block; height: .1em; border-radius: 1px; }
.logo-sl .logo-listras i:nth-child(1) { background: #ffd21f; width: 100%; }
.logo-sl .logo-listras i:nth-child(2) { background: #ff9a3c; width: 94%; }
.logo-sl .logo-listras i:nth-child(3) { background: #ff3ba0; width: 88%; }
.logo-sl .logo-listras i:nth-child(4) { background: #8c5aff; width: 82%; }
@media (prefers-reduced-motion: no-preference) { .logo-sl:hover .logo-listras i { animation: logo-onda .6s ease both; } .logo-sl:hover .logo-listras i:nth-child(2) { animation-delay: .06s; } .logo-sl:hover .logo-listras i:nth-child(3) { animation-delay: .12s; } .logo-sl:hover .logo-listras i:nth-child(4) { animation-delay: .18s; } }
@keyframes logo-onda { 50% { transform: scaleX(.6); } }