/* ===========================================================================
   ARTIGOS — hub e artigo
   ---------------------------------------------------------------------------
   Herda as variáveis do estilo.css e o ambiente escuro da landing. O que muda
   é a medida do texto: um artigo lê-se, uma landing percorre-se.

   MEDIDA DE LINHA: 68 caracteres (--art-medida). Abaixo de 45 o olho salta de
   linha a toda a hora; acima de 80 perde-se o regresso à linha seguinte. Numa
   página que pede 6 a 8 minutos de leitura, isto não é preciosismo — é a
   diferença entre ser lido e ser abandonado a meio.
   =========================================================================== */

.art-body {
  --art-medida: 68ch;
  background: var(--bg, #05070B);
  color: var(--text, #E8EDF5);
  min-height: 100vh;
}

.art-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

/* ---------------------------------------------------------------------------
   TOPO
   --------------------------------------------------------------------------- */
.art-topo {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--line, #1B2330);
  /* Fundo opaco e não translúcido: por cima de um artigo com tabelas, o
     desfoque deixava passar linhas de texto e o cabeçalho ficava ilegível. */
  background: rgba(5, 7, 11, .94);
  backdrop-filter: saturate(140%) blur(8px);
}
.art-topo-in {
  width: min(1180px, calc(100% - 40px)); margin-inline: auto;
  display: flex; align-items: center; gap: 20px; min-height: 62px;
}
.art-marca { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.art-marca-sinal {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent, #2BE79B); box-shadow: 0 0 12px var(--accent, #2BE79B);
}
.art-marca-txt { font-size: 13px; letter-spacing: .14em; font-weight: 600; }
.art-marca-txt b { color: var(--accent, #2BE79B); font-weight: 700; }

.art-nav { display: flex; gap: 20px; margin-left: 12px; }
.art-nav a { color: var(--text-mid, #97A3B6); text-decoration: none; font-size: 14px; }
.art-nav a:hover, .art-nav a.ativo { color: var(--text, #E8EDF5); }

.art-topo-dir { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.art-idiomas-top { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); }
.art-idiomas-top a {
  padding: 4px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .1em;
  color: var(--text-dim, #6D7B8F); text-decoration: none;
}
.art-idiomas-top a.ativo { background: var(--accent, #2BE79B); color: #04120C; font-weight: 700; }
.art-topo-btn { padding: 8px 16px; font-size: 14px; }

/* ---------------------------------------------------------------------------
   HUB
   --------------------------------------------------------------------------- */
.art-main { padding: 40px 0 80px; }
.art-eyebrow {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent, #2BE79B);
}
.art-hub-cabeca { max-width: var(--art-medida); margin-bottom: 30px; }
.art-hub-h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; margin: 10px 0 14px; letter-spacing: -.02em; }
.art-hub-lead { color: var(--text-mid, #97A3B6); font-size: 17px; line-height: 1.65; }

.art-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.art-cat-l {
  padding: 7px 15px; border-radius: 999px; font-size: 13px; text-decoration: none;
  border: 1px solid var(--line, #1B2330); color: var(--text-mid, #97A3B6);
}
.art-cat-l:hover { border-color: var(--line-strong, #2A3646); color: var(--text, #E8EDF5); }
.art-cat-l.ativo { background: var(--accent, #2BE79B); border-color: var(--accent, #2BE79B); color: #04120C; font-weight: 600; }

.art-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
.art-item {
  display: flex; flex-direction: column; gap: 8px; padding: 22px;
  border: 1px solid var(--line, #1B2330); border-radius: 14px; text-decoration: none;
  background: var(--bg-raised, #0A0E15); transition: border-color .18s, transform .18s;
}
.art-item:hover { border-color: var(--accent, #2BE79B); transform: translateY(-2px); }
.art-item-cat {
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent, #2BE79B);
}
.art-item-t { font-size: 19px; line-height: 1.3; margin: 0; color: var(--text, #E8EDF5); }
.art-item-r { font-size: 14px; line-height: 1.6; color: var(--text-mid, #97A3B6); margin: 0; flex: 1; }
.art-item-ler { font-size: 13px; color: var(--accent, #2BE79B); font-weight: 600; }
.art-item-ler::after { content: " \2192"; }

.art-hub-vazio { color: var(--text-mid, #97A3B6); padding: 40px 0; }
.art-hub-cta {
  margin-top: 56px; padding: 32px; border-radius: 16px; text-align: center;
  border: 1px solid var(--line, #1B2330);
  background: linear-gradient(180deg, rgba(43,231,155,.06), transparent);
}
.art-hub-cta h2 { font-size: 24px; margin: 0 0 8px; }
.art-hub-cta p { color: var(--text-mid, #97A3B6); margin: 0 0 18px; }

/* ---------------------------------------------------------------------------
   ARTIGO
   --------------------------------------------------------------------------- */
.art-migalha {
  width: min(1180px, calc(100% - 40px)); margin: 0 auto 20px;
  font-size: 13px; color: var(--text-dim, #6D7B8F);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.art-migalha a { color: var(--text-mid, #97A3B6); text-decoration: none; }
.art-migalha a:hover { color: var(--accent, #2BE79B); }

.art-cabeca { max-width: var(--art-medida); margin-bottom: 34px; }
.art-cat {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent, #2BE79B);
}
.art-h1 { font-size: clamp(29px, 4.2vw, 44px); line-height: 1.12; margin: 12px 0 16px; letter-spacing: -.02em; }
.art-resumo { font-size: 18px; line-height: 1.65; color: var(--text-mid, #97A3B6); margin: 0 0 20px; }
.art-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 16px; border-top: 1px solid var(--line, #1B2330);
  font-size: 13px; color: var(--text-dim, #6D7B8F);
}
.art-meta-autor { color: var(--text, #E8EDF5); font-weight: 600; }
.art-meta-sep { opacity: .5; }

.art-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.art-corpo { max-width: var(--art-medida); font-size: 17px; line-height: 1.75; color: var(--text, #E8EDF5); }
.art-corpo h2 {
  font-size: 25px; line-height: 1.25; margin: 44px 0 14px; letter-spacing: -.01em;
  scroll-margin-top: 84px;   /* o cabeçalho é sticky: sem isto a âncora esconde-se por baixo dele */
}
.art-corpo h3 { font-size: 19px; margin: 30px 0 10px; color: var(--text, #E8EDF5); }
.art-corpo p { margin: 0 0 18px; }
.art-corpo ul, .art-corpo ol { margin: 0 0 20px; padding-left: 22px; }
.art-corpo li { margin-bottom: 8px; }
.art-corpo strong { color: #FFF; font-weight: 650; }
.art-corpo a { color: var(--accent, #2BE79B); text-decoration: underline; text-underline-offset: 3px; }
.art-corpo blockquote {
  margin: 24px 0; padding: 14px 18px; border-left: 3px solid var(--accent, #2BE79B);
  background: rgba(43,231,155,.05); border-radius: 0 10px 10px 0; color: var(--text-mid, #97A3B6);
}
/* Tabelas: num artigo de ritmos são o formato natural para os critérios de
   leitura (FC, regularidade, onda P, QRS). Rolam em vez de rebentar o ecrã. */
.art-corpo table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; display: block; overflow-x: auto; }
.art-corpo th, .art-corpo td { padding: 10px 12px; border-bottom: 1px solid var(--line, #1B2330); text-align: left; vertical-align: top; }
.art-corpo th { color: var(--accent, #2BE79B); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }

.art-indice {
  margin: 0 0 34px; padding: 18px 22px; border-radius: 12px;
  border: 1px solid var(--line, #1B2330); background: var(--bg-raised, #0A0E15);
}
.art-indice-t {
  display: block; font-family: var(--font-mono, monospace); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim, #6D7B8F); margin-bottom: 10px;
}
.art-indice ol { margin: 0; padding-left: 20px; }
.art-indice li { margin-bottom: 6px; font-size: 15px; }
.art-indice a { color: var(--text-mid, #97A3B6); text-decoration: none; }
.art-indice a:hover { color: var(--accent, #2BE79B); }

.art-refs { margin-top: 44px; }
.art-refs h2 { font-size: 20px; margin-bottom: 12px; }
.art-refs ul { padding-left: 20px; font-size: 15px; color: var(--text-mid, #97A3B6); }
.art-refs a { color: var(--text-mid, #97A3B6); }

.art-faq { margin-top: 44px; }
.art-faq h2 { font-size: 22px; margin-bottom: 14px; }
.art-faq-item { border: 1px solid var(--line, #1B2330); border-radius: 12px; margin-bottom: 10px; background: var(--bg-raised, #0A0E15); }
.art-faq-item summary {
  cursor: pointer; padding: 15px 18px; font-weight: 600; font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; list-style: none;
}
.art-faq-item summary::-webkit-details-marker { display: none; }
.art-faq-sinal { position: relative; width: 14px; height: 14px; flex: 0 0 14px; }
.art-faq-sinal::before, .art-faq-sinal::after {
  content: ""; position: absolute; background: var(--accent, #2BE79B); transition: transform .18s;
}
.art-faq-sinal::before { inset: 6px 0; height: 2px; }
.art-faq-sinal::after  { inset: 0 6px; width: 2px; }
.art-faq-item[open] .art-faq-sinal::after { transform: scaleY(0); }
.art-faq-item p { margin: 0; padding: 0 18px 16px; color: var(--text-mid, #97A3B6); line-height: 1.7; }

.art-aviso {
  margin-top: 40px; padding: 14px 16px; border-radius: 10px; font-size: 13.5px; line-height: 1.6;
  border-left: 3px solid #E8B23D; background: rgba(232,178,61,.07); color: var(--text-mid, #97A3B6);
}

/* ---------------------------------------------------------------------------
   COLUNA LATERAL
   --------------------------------------------------------------------------- */
.art-lado { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 18px; }

.art-mon { border: 1px solid var(--line-strong, #2A3646); border-radius: 12px; overflow: hidden; background: #05070B; }
.art-mon-topo {
  display: flex; justify-content: space-between; align-items: center; padding: 9px 13px;
  border-bottom: 1px solid var(--line, #1B2330);
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .12em; color: var(--text-dim, #6D7B8F);
}
.art-mon-fc { color: var(--accent, #2BE79B); font-weight: 700; font-size: 15px; }
.art-mon-cv { display: block; width: 100%; height: 150px; }
.art-mon-pe { padding: 9px 13px; border-top: 1px solid var(--line, #1B2330); font-size: 12px; color: var(--text-dim, #6D7B8F); }

.art-cta {
  padding: 22px; border-radius: 14px; border: 1px solid var(--line, #1B2330);
  background: linear-gradient(180deg, rgba(43,231,155,.07), transparent);
}
.art-cta-t { font-weight: 650; margin: 0 0 6px; font-size: 16px; }
.art-cta-x { font-size: 14px; color: var(--text-mid, #97A3B6); margin: 0 0 16px; line-height: 1.6; }
.art-cta-b { display: block; text-align: center; }
.art-cta-l { display: block; text-align: center; margin-top: 10px; font-size: 13.5px; color: var(--text-mid, #97A3B6); }

.art-idiomas { font-size: 13px; color: var(--text-dim, #6D7B8F); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.art-idiomas a { color: var(--accent, #2BE79B); text-decoration: none; font-weight: 600; }

.art-relac { margin-top: 60px; padding-top: 34px; border-top: 1px solid var(--line, #1B2330); }
.art-relac h2 { font-size: 22px; margin-bottom: 16px; }
.art-relac-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.art-card {
  display: flex; flex-direction: column; gap: 7px; padding: 18px;
  border: 1px solid var(--line, #1B2330); border-radius: 12px; text-decoration: none;
  background: var(--bg-raised, #0A0E15);
}
.art-card:hover { border-color: var(--accent, #2BE79B); }
.art-card-t { font-weight: 600; color: var(--text, #E8EDF5); font-size: 15.5px; line-height: 1.35; }
.art-card-r { font-size: 13px; color: var(--text-mid, #97A3B6); line-height: 1.55; }

.art-vazio { text-align: center; padding: 80px 0; }
.art-vazio h1 { font-size: 28px; margin-bottom: 10px; }
.art-vazio p { color: var(--text-mid, #97A3B6); margin-bottom: 22px; }

/* ---------------------------------------------------------------------------
   RODAPÉ
   --------------------------------------------------------------------------- */
.art-rodape { border-top: 1px solid var(--line, #1B2330); padding: 34px 0 44px; }
.art-rodape-in { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.art-rodape-topo { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.art-rodape-links { display: flex; flex-wrap: wrap; gap: 18px; }
.art-rodape-links a { color: var(--text-mid, #97A3B6); text-decoration: none; font-size: 14px; }
.art-rodape-links a:hover { color: var(--accent, #2BE79B); }
.art-rodape-aviso { font-size: 12px; line-height: 1.6; color: var(--text-dim, #6D7B8F); max-width: 88ch; margin: 0 0 10px; }
.art-rodape-c { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-dim, #6D7B8F); margin: 0; }

/* ---------------------------------------------------------------------------
   TELEMÓVEL
   A coluna lateral deixa de ser lateral. O monitor sobe para DEPOIS do resumo
   e antes do corpo: é a prova visual, e num ecrã estreito tem de aparecer cedo
   ou não aparece de todo. O CTA desce para o fim, que é onde a pessoa está
   quando acaba de ler.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .art-colunas { grid-template-columns: 1fr; gap: 28px; }
  .art-lado { position: static; }
  .art-corpo { max-width: none; }
  /* A NAVEGACAO NAO DESAPARECE NO TELEMOVEL.
     Estava `display:none` abaixo dos 900px, e o resultado era ficar sem
     caminho de volta ao indice de artigos a partir de um artigo — no
     dispositivo onde a maior parte do trafego de pesquisa aterra.
     Passa a linha propria por baixo do cabecalho, compacta e com rolagem
     horizontal se preciso: ocupa 34px e resolve o problema. */
  .art-topo-in { flex-wrap: wrap; padding-bottom: 6px; }
  .art-nav {
    order: 3; flex: 1 0 100%; margin-left: 0; gap: 16px;
    overflow-x: auto; padding-bottom: 2px; font-size: 13px;
    scrollbar-width: none;
  }
  .art-nav::-webkit-scrollbar { display: none; }
  .art-nav a { white-space: nowrap; }
  .art-nav a.ativo { color: var(--accent, #2BE79B); font-weight: 600; }
}
@media (max-width: 640px) {
  .art-wrap, .art-topo-in, .art-rodape-in, .art-migalha { width: calc(100% - 32px); }
  .art-corpo { font-size: 16.5px; }
  .art-corpo h2 { font-size: 22px; margin-top: 34px; }
  .art-main { padding: 26px 0 60px; }
  .art-topo-btn { display: none; }   /* o CTA já está no corpo; no topo só rouba espaço */
  .art-lista { grid-template-columns: 1fr; }
}