/* ============================================================
   As áreas com sessão (DJ em /dj/, parceiro em /parceiro/) no desenho do
   escritório. Redesenho de 29 Set 2026: barra lateral no computador, títulos
   grandes e leves, cartões sem contorno com sombra fina. Liga-se DEPOIS do
   <style> de cada página, para ganhar (memory/feedback_css_overrides_no_fim).
   As duas áreas têm o mesmo esqueleto (.barra, .tabs, .quem, main) e as mesmas
   peças (.tit, .sub2, .bloco, .cartao): uma fonte só para as duas.
   ============================================================ */
:root{--bg:#F7F7F5;--line:#E9EAEC;--line2:#F3F3F1;--lado:248px;
  --sh:0 0 0 1px var(--line),0 1px 2px rgba(18,20,26,.03)}
body{background:var(--bg)}
/* sem backdrop-filter: cria um bloco de contenção e prendia a barra de baixo
   (position:fixed) dentro desta, no cimo do ecrã do telemóvel */
.barra{background:var(--bg);border-bottom:1px solid var(--line)}

@media (min-width:1100px){
  .barra{position:fixed;left:0;top:0;bottom:0;width:var(--lado);z-index:30;padding:16px 12px 14px;
    background:var(--bg);border-bottom:none;border-right:1px solid var(--line);overflow-y:auto}
  .barradentro{flex-direction:column;align-items:stretch;gap:2px;max-width:none;height:100%}
  .barra .marca{padding:4px 8px 16px;font-size:.95rem}
  .tabs{flex-direction:column;gap:2px}
  .tabs button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:9px;
    font-size:.9rem;font-weight:500;color:var(--ink2);text-align:left}
  .tabs button svg{display:block;width:17px;height:17px;flex:none;opacity:.72}
  .tabs button:hover{background:rgba(18,20,26,.04);color:var(--ink)}
  .tabs button.on{background:var(--card);color:var(--ink);font-weight:650;box-shadow:var(--sh)}
  .tabs button.on svg{opacity:1}
  .tabs .n{margin-left:auto;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
    background:var(--vermelho-e);color:#fff;font:700 .7rem var(--ui)}
  .barra .quem{margin:auto 0 0;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:4px 8px;
    padding:12px 6px 0;border-top:1px solid var(--line);font-size:.84rem}
  .barra .quem .outras,.barra .quem #quemSou,.barra .quem #sair{grid-column:1/-1;justify-self:start}
  .barra .quem #quemSou{font-weight:650;color:var(--ink)}
  .barra .quem .lig{font-weight:600;color:var(--ink2);text-decoration:none}
  .barra .quem .lig:hover{color:var(--ink)}
  #app > main{margin-left:var(--lado);max-width:none;padding:38px 44px 70px}
  #app > main > *{max-width:1040px;margin-left:auto;margin-right:auto}
  .tarjatreino{margin-left:var(--lado)}
}

/* títulos: grandes e leves, como no escritório */
h2.tit{font-family:var(--dis);font-weight:300;font-size:2.15rem;letter-spacing:-.025em;line-height:1.1;margin-bottom:8px}
h2.tit b{font-weight:500}
p.sub2{font-size:.93rem;margin-bottom:22px}
p.sub2 b{color:var(--ink);font-weight:650}
.titseccao{font-family:var(--ui);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:28px 4px 10px}
@media (max-width:600px){h2.tit{font-size:1.75rem}}

/* cartões sem contorno, com sombra fina */
.bloco,.cartao,.soma,.vazio2{border:none;border-radius:16px;box-shadow:var(--sh)}
.bloco h3{font-size:.7rem;font-weight:700;letter-spacing:.12em}
.vazio2{padding:30px 22px}
.soma b{font-weight:500;font-size:1.7rem;letter-spacing:-.01em}
@media (max-width:620px){.soma b{font-size:1.2rem}}