/* Marca do Briefing MSE (ver js/logo.js). font-size de .lg = altura do "mse". */
.lg {
  --l1: var(--navy, #002f6c); --l2: var(--cyan, #00c8d7); --l3: var(--teal, #1fb5a0);
  display: inline-flex; align-items: baseline; gap: .5em; font-size: 14px; line-height: 1;
  color: var(--navy, #002f6c); font-family: 'Open Sans', 'Segoe UI', sans-serif; white-space: nowrap;
}
.lg-escuro { --l1: #fff; color: #fff; }
.lg-mse { height: 1em; width: auto; display: block; }
/* "briefing" leve, com a altura das minúsculas igual à do "mse" pesado */
.lg-palavra { font-size: 1.84em; font-weight: 300; letter-spacing: -.035em; }

/* A — Pauta */
.lg-pauta { position: relative; width: .95em; height: 1em; }
.lg-pauta i { position: absolute; left: 0; height: .2em; border-radius: .1em; transform-origin: left; animation: lg-linha .7s cubic-bezier(.2, .7, .2, 1) both; }
.lg-pauta i:nth-child(1) { top: 0; width: 100%; background: var(--l1); animation-delay: .15s; }
.lg-pauta i:nth-child(2) { top: .4em; width: 68%; background: var(--l2); animation-delay: .27s; }
.lg-pauta i:nth-child(3) { top: .8em; width: 40%; background: var(--l3); animation-delay: .39s; }
.lg:hover .lg-pauta i { animation-name: lg-linha-2; }
@keyframes lg-linha { from { transform: scaleX(0); } }
@keyframes lg-linha-2 { from { transform: scaleX(0); } }

/* B — Ponto final */
.lg-ponto { display: inline-block; width: .19em; height: .19em; margin-left: .05em; border-radius: 50%; background: var(--l2); animation: lg-ponto .6s cubic-bezier(.3, 1.6, .5, 1) .35s both; }
.lg-so-ponto { font-size: 1.84em; }
.lg-so-ponto .lg-ponto { width: .5em; height: .5em; margin: 0; }
.lg:hover .lg-ponto { animation: lg-pulso 1s ease-in-out infinite; }
@keyframes lg-ponto { from { transform: scale(0); } }
@keyframes lg-pulso { 50% { transform: scale(1.45); } }

/* C — Manchete */
.lg-c { align-items: center; }
.lg-pilha { display: inline-grid; justify-items: start; gap: .34em; }
.lg-pilha .lg-mse { height: .62em; }
.lg-pilha .lg-palavra { font-size: 1.7em; font-weight: 600; letter-spacing: -.04em; }
.lg-faixa { display: block; width: 100%; height: .16em; border-radius: .08em; background: linear-gradient(90deg, var(--l1) 0 58%, var(--l2) 58% 76%, var(--l3) 76% 100%); transform-origin: left; animation: lg-linha .9s cubic-bezier(.2, .7, .2, 1) .2s both; }
.lg-faixa-icone { width: 1.9em; height: .34em; }

/* D — Três semanas */
.lg-icone { align-self: center; position: relative; width: 1.9em; height: 1.9em; border-radius: .42em; background: var(--navy, #002f6c); overflow: hidden; flex: none; }
.lg-escuro .lg-icone { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.lg-icone i { position: absolute; bottom: .36em; width: .3em; border-radius: .07em; transform-origin: bottom; animation: lg-barra .7s cubic-bezier(.2, .7, .2, 1) both; }
.lg-icone i:nth-child(1) { left: .36em; height: .42em; background: #fff; animation-delay: .15s; }
.lg-icone i:nth-child(2) { left: .8em; height: .78em; background: var(--l2); animation-delay: .27s; }
.lg-icone i:nth-child(3) { left: 1.24em; height: 1.16em; background: var(--l3); animation-delay: .39s; }
.lg:hover .lg-icone i { animation-name: lg-barra-2; }
@keyframes lg-barra { from { transform: scaleY(0); } }
@keyframes lg-barra-2 { from { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  .lg *, .lg:hover * { animation: none !important; }
}