/* =========================================================
   WheyProtein · Glossário — CSS
   v2.0.0 · Mediahouse Digital

   Tudo escopado. Na 1.5.0 este CSS era inline, entrava em
   TODA página do portal e tinha 8 hexadecimais mais 21
   rgba() à mão, além de 35 regras de classe no nível raiz.

   O HERO SAIU. Usava 100vw + translateX para atravessar a
   tela; dentro do quadro de 1080 do portal isso cria barra
   de rolagem horizontal, e hero é da página.

   TRÊS ESCOPOS, porque o plugin desenha em três lugares
   diferentes:
     .wpm-gl-hub   o hub A–Z (página do glossário)
     .wpm-gl-vb    a página do verbete
     .wpm-gl-caixa a caixa "Termos deste artigo", no fim do post

   O auto-link é a exceção: .wpm-gl-link aparece SOLTO dentro
   do corpo dos artigos, e por isso é a única classe sem
   invólucro. É um seletor de classe único e prefixado, então
   não vaza para nada que não seja dele.

   CORES SUBSTITUÍDAS:
     #592C3D → --vinho    #2F3A55 → --navy     #2E2D32 → --chumbo
     #7A9DA5 → --heron    #7C8B6E → --sage     #A9BC97 → --sage
     #b3541e → --castanho
     rgba(46,45,50,.14) → --linha · rgba(46,45,50,.6) → --tinta2
   ========================================================= */

/* ---------- O LINK NO CORPO DO ARTIGO ----------
   Discreto de propósito: pontilhado em vez de sublinhado, para não competir
   com os links editoriais do texto. */
.wpm-gl-link{color:var(--vinho); text-decoration:none;
  border-bottom:1px dotted var(--linha2)}
.wpm-gl-link:hover{border-bottom-color:var(--vinho)}
.wpm-gl-link:focus-visible{outline:2px solid var(--vinho); outline-offset:2px}

/* ---------- CAIXA "TERMOS DESTE ARTIGO" ---------- */
.wpm-gl-caixa{border:1px solid var(--linha); border-radius:var(--r);
  background:var(--papel); border-left:3px solid var(--sage);
  padding:16px 20px; margin:40px 0 0; font-family:var(--corpo)}
.wpm-gl-caixa .wpm-gl-caixa-t{font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--vinho); margin:0 0 10px; font-weight:600}
.wpm-gl-caixa ul{list-style:none; margin:0; padding:0}
.wpm-gl-caixa li{padding:6px 0; border-bottom:1px solid var(--linha); font-size:15px}
.wpm-gl-caixa li:last-child{border-bottom:0}
.wpm-gl-caixa a{text-decoration:none; color:var(--chumbo)}
.wpm-gl-caixa a:hover{color:var(--vinho)}
.wpm-gl-caixa .wpm-gl-caixa-canon{font-size:13px; color:var(--tinta2); font-weight:400}

/* ---------- A PÁGINA DO VERBETE ---------- */
.wpm-gl-vb{font-family:var(--corpo); color:var(--tinta)}
.wpm-gl-vb .wpm-gl-vb-linha{margin:0 0 16px; display:flex; align-items:center; gap:10px}
.wpm-gl-vb .wpm-gl-vb-sigla{font-family:var(--corpo); font-variant-numeric:tabular-nums;
  font-size:12px; font-weight:600; background:var(--vinho); color:var(--papel);
  border-radius:2px; padding:3px 8px}
.wpm-gl-vb .wpm-gl-vb-grupo{font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta2)}
.wpm-gl-vb .wpm-gl-vb-def{font-size:18px; line-height:1.55; max-width:60ch}
.wpm-gl-vb .wpm-gl-vb-bloco{margin:24px 0; padding-left:18px;
  border-left:2px solid var(--heron)}
.wpm-gl-vb .wpm-gl-vb-bloco.arm{border-left-color:var(--castanho)}
.wpm-gl-vb .wpm-gl-vb-bloco h2{font-family:var(--corpo); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tinta2); margin:0 0 5px}
.wpm-gl-vb .wpm-gl-vb-bloco p{margin:0}
.wpm-gl-vb .wpm-gl-vb-ver{display:flex; flex-wrap:wrap; gap:7px; margin:24px 0}
.wpm-gl-vb .wpm-gl-vb-ver a{font-size:14px; text-decoration:none; color:var(--vinho);
  border:1px solid var(--linha); border-radius:100px; padding:4px 12px}
.wpm-gl-vb .wpm-gl-vb-ver a:hover{border-color:var(--vinho); background:var(--claro)}
.wpm-gl-vb .wpm-gl-vb-fonte{font-size:13px; color:var(--tinta2); margin:24px 0 0}

/* ---------- O HUB A–Z ---------- */
.wpm-gl-hub{font-family:var(--corpo); color:var(--tinta)}
.wpm-gl-hub *{box-sizing:border-box}

.wpm-gl-hub .wpm-gl-busca{width:100%; font-family:var(--corpo); font-size:15px;
  padding:11px 14px; border:1px solid var(--linha); border-radius:var(--r);
  background:var(--papel); color:var(--tinta); margin:0 0 16px}
.wpm-gl-hub .wpm-gl-busca:focus{outline:2px solid var(--vinho); outline-offset:2px}

/* índice de letras: NÃO é heading, por decisão de estrutura */
.wpm-gl-hub .wpm-gl-az{display:flex; flex-wrap:wrap; gap:2px; padding:9px 0;
  border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); margin:0 0 10px}
.wpm-gl-hub .wpm-gl-az button{font-family:var(--corpo); font-weight:700;
  background:none; border:0; color:var(--vinho); cursor:pointer;
  width:30px; height:30px; border-radius:50%; line-height:1}
.wpm-gl-hub .wpm-gl-az button:hover{background:var(--gesso)}
.wpm-gl-hub .wpm-gl-az button:focus-visible{outline:2px solid var(--vinho); outline-offset:1px}
.wpm-gl-hub .wpm-gl-az button[disabled]{color:var(--linha2); cursor:default}
.wpm-gl-hub .wpm-gl-az button[aria-pressed="true"]{background:var(--vinho); color:var(--papel)}

.wpm-gl-hub .wpm-gl-grupos{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px}
.wpm-gl-hub .wpm-gl-grupos button{font-family:var(--corpo); font-size:12.5px;
  background:none; cursor:pointer; border:1px solid var(--linha);
  border-radius:100px; padding:5px 12px; color:var(--tinta2)}
.wpm-gl-hub .wpm-gl-grupos button:hover{border-color:var(--linha2); color:var(--tinta)}
.wpm-gl-hub .wpm-gl-grupos button:focus-visible{outline:2px solid var(--vinho); outline-offset:2px}
.wpm-gl-hub .wpm-gl-grupos button[aria-pressed="true"]{background:var(--chumbo);
  border-color:var(--chumbo); color:var(--gesso)}

/* a letra é mobiliário de navegação, não cabeçalho — ver a regra 2 no hub.php */
.wpm-gl-hub .wpm-gl-letra{font-family:var(--display); font-weight:700; font-size:24px;
  color:var(--vinho); margin:26px 0 6px; padding-bottom:2px;
  border-bottom:1px solid var(--linha)}
.wpm-gl-hub .wpm-gl-lista{list-style:none; margin:0; padding:0}
.wpm-gl-hub .wpm-gl-item{padding:10px 0 10px 14px; border-left:3px solid transparent}
.wpm-gl-hub .wpm-gl-item.g-rotulo{border-left-color:var(--vinho)}
.wpm-gl-hub .wpm-gl-item.g-bioquimica{border-left-color:var(--heron)}
.wpm-gl-hub .wpm-gl-item.g-aminoacido{border-left-color:var(--sage)}
.wpm-gl-hub .wpm-gl-item.g-treino{border-left-color:var(--navy)}
.wpm-gl-hub .wpm-gl-item.g-mercado{border-left-color:var(--castanho)}
.wpm-gl-hub .wpm-gl-item-t{font-family:var(--corpo); font-size:17px; font-weight:700;
  line-height:1.3; margin:0; color:var(--chumbo); scroll-margin-top:80px}
.wpm-gl-hub .wpm-gl-item-t a{color:inherit; text-decoration:none}
.wpm-gl-hub .wpm-gl-item-t a:hover{color:var(--vinho)}
.wpm-gl-hub .wpm-gl-item-sg{font-family:var(--corpo); font-variant-numeric:tabular-nums;
  font-size:11px; color:var(--tinta2); border:1px solid var(--linha);
  border-radius:2px; padding:1px 5px; margin-left:6px}
.wpm-gl-hub .wpm-gl-item-d{font-size:14px; color:var(--tinta2); margin:3px 0 0}
.wpm-gl-hub .wpm-gl-nada{padding:32px 0; color:var(--tinta2); font-style:italic}

/* ---------- TELAS ESTREITAS ---------- */
@media (max-width:640px){
  .wpm-gl-hub .wpm-gl-az button{width:26px; height:26px; font-size:14px}
  .wpm-gl-vb .wpm-gl-vb-def{font-size:16.5px}
}
