/* ============================================================
   MAESTRELLO TECH — Design System · logo.css
   v1.0.0 · 2026-09-15 — logo oficial travado (empilhado, como a Advocacia)
   Requer: tokens.css antes; e o <symbol id="emblem-maestro"> + gradientes
   no DOM (cole o conteúdo de logo-symbol.html UMA vez no index.html).

   ANATOMIA (não altere — é o padrão da marca):
     [emblema redondo dourado, nó safira]      ← centralizado sobre o nome
     M AESTRELLO TEC H                          ← Cinzel; M e H maiores (capitulares)
        ‾‾‾‾‾‾‾‾‾‾‾‾‾   traço de CIMA: só entre o M e o H, por cima das letras do meio
     ______________     traço de BAIXO: de ponta a ponta
     LEGAL TECH PROVIDER                        ← Manrope, azul do nó (#4B7BFF)

   MARKUP:
     <a class="brand-lk brand-lk--sm" href="/">
       <svg class="emblem" width="44" height="44" aria-hidden="true"><use href="#emblem-maestro"/></svg>
       <span class="name-lk"><span class="rule"></span><span class="cap">M</span><span class="mid">AESTRELLO&nbsp;TEC</span><span class="cap">H</span></span>
       <span class="sub-lk">LEGAL&nbsp;TECH&nbsp;PROVIDER</span>
     </a>
   ============================================================ */

/* ---------- emblema ---------- */
.emblem{display:block;filter:drop-shadow(0 1px 5px rgba(230,197,107,.5))}
.em-base path{fill:url(#goldGrad)}
.em-sheen path{fill:url(#goldSheen)}
.em-node{fill:#4B7BFF;filter:drop-shadow(0 0 3px rgba(75,123,255,.95))}
.emblem--glow{filter:drop-shadow(0 0 7px rgba(230,197,107,.6)) drop-shadow(0 0 12px rgba(75,123,255,.4));animation:emGlow 4.2s ease-in-out infinite}
@keyframes emGlow{
  0%,100%{filter:drop-shadow(0 0 6px rgba(230,197,107,.55)) drop-shadow(0 0 11px rgba(75,123,255,.32)) brightness(1)}
  50%{filter:drop-shadow(0 0 13px rgba(255,222,135,.9)) drop-shadow(0 0 20px rgba(120,160,255,.6)) brightness(1.14)}
}
.emblem--pulse{filter:drop-shadow(0 3px 14px rgba(230,197,107,.6));animation:goldPulse 4.2s ease-in-out infinite}
@keyframes goldPulse{
  0%,100%{filter:drop-shadow(0 3px 12px rgba(230,197,107,.5)) brightness(1)}
  50%{filter:drop-shadow(0 4px 20px rgba(255,220,130,.85)) brightness(1.12)}
}
/* tema claro: emblema continua DOURADO, num gradiente mais denso (sem o creme do topo,
   que some no branco) e com o brilho reduzido (o sheen a 0.9 é o que "apaga" o emblema
   sobre fundo claro). Alternativa marsala: troque por url(#marsalaGrad). */
:root[data-theme="light"] .em-base path{fill:url(#goldGradLight)}
:root[data-theme="light"] .em-sheen{display:none}   /* o brilho branco é o que apaga o ouro no claro */
:root[data-theme="light"] .em-node{filter:none}
:root[data-theme="light"] .emblem{filter:drop-shadow(0 2px 6px rgba(110,75,12,.35))}
:root[data-theme="light"] .emblem--glow,:root[data-theme="light"] .emblem--pulse{animation:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .em-base path{fill:url(#goldGradLight)}
  :root:not([data-theme="dark"]) .em-sheen{display:none}
  :root:not([data-theme="dark"]) .em-node{filter:none}
  :root:not([data-theme="dark"]) .emblem{filter:drop-shadow(0 2px 6px rgba(110,75,12,.35))}
  :root:not([data-theme="dark"]) .emblem--glow,:root:not([data-theme="dark"]) .emblem--pulse{animation:none}
}

/* ---------- lockup empilhado ---------- */
.brand-lk{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
  flex:0 0 auto;width:max-content;min-width:max-content;color:inherit;text-decoration:none}
.brand-lk--left{align-items:flex-start;text-align:left}
.brand-lk .emblem{margin-bottom:3px}

.name-lk{position:relative;display:inline-flex;align-items:baseline;line-height:1;white-space:nowrap;padding:.14em 0 .16em}
.name-lk .cap{position:relative;z-index:2;font-family:var(--font-logo);font-weight:600;line-height:1;letter-spacing:.02em}
.name-lk .mid{position:relative;z-index:2;font-family:var(--font-logo);font-weight:600;font-size:.78em;letter-spacing:.03em;line-height:1;padding:0 .08em}
.name-lk .cap,.name-lk .mid{background:var(--logo-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
/* traço de cima: só entre o M e o H, com respiro */
.name-lk .mid::before{content:"";position:absolute;left:.06em;right:.06em;top:-.16em;height:.075em;background:var(--logo-rule);border-radius:1px}
/* traço de baixo: de ponta a ponta */
.name-lk .rule{position:absolute;left:0;right:0;bottom:0;height:.06em;z-index:1;background:var(--logo-rule);border-radius:1px}

.sub-lk{font-family:var(--font-head);font-weight:600;text-transform:uppercase;color:var(--logo-sub);white-space:nowrap}

/* ---------- tamanhos ---------- */
/* sm = header (padrão) */
.brand-lk,.brand-lk--sm{--lk-emblem:44px}
.brand-lk .emblem{width:var(--lk-emblem);height:var(--lk-emblem)}
.brand-lk .name-lk{font-size:23px}
.brand-lk .sub-lk{font-size:8px;letter-spacing:.34em;margin-top:3px}
/* md = rodapé, cards */
.brand-lk--md{--lk-emblem:50px}
.brand-lk--md .name-lk{font-size:26px}
.brand-lk--md .sub-lk{font-size:9px;letter-spacing:.36em}
/* lg = hero, tela de login, splash */
.brand-lk--lg{--lk-emblem:88px}
.brand-lk--lg .emblem{margin-bottom:6px}
.brand-lk--lg .name-lk{font-size:40px}
.brand-lk--lg .sub-lk{font-size:12.5px;letter-spacing:.40em;margin-top:7px}
/* mobile (header) — proporções idênticas ao desktop, só um pouco menor.
   ATENÇÃO: nunca deixe um "gap" de outro seletor (ex.: .brand{gap:10px}) vencer o
   gap:0 do .brand-lk — isso abre os espaços do lockup no celular. */
@media (max-width:620px){
  .brand-lk--sm{--lk-emblem:34px;gap:0}
  .brand-lk--sm .emblem{margin-bottom:2px}
  .brand-lk--sm .name-lk{font-size:16px}
  .brand-lk--sm .sub-lk{font-size:6.5px;letter-spacing:.26em;margin-top:2px}
  /* lg em 375px vazaria (40px Cinzel ≈ 330px + paddings) — encolhe proporcionalmente */
  .brand-lk--lg{--lk-emblem:72px}
  .brand-lk--lg .name-lk{font-size:32px}
  .brand-lk--lg .sub-lk{font-size:10px;letter-spacing:.36em}
}