/* Biblioteca TDAH — estilos complementares.
   Linkado JUNTO com ../styles.css (que já traz cores, fontes e o
   cabeçalho/rodapé do site). Este arquivo cobre só os componentes que não
   têm equivalente em nenhuma outra página: narrativa de caso, camada
   técnica progressiva, tabelas de comparação e selos de estatuto de fonte.
   Tudo aqui usa as MESMAS variáveis do site (--azul-profundo, --argila,
   --grafite-quente etc., definidas em ../styles.css) — não redeclara
   paleta própria. Todo seletor é escopado sob .tdah-corpo para nunca
   colidir com regras de tag solta do styles.css principal.

   v33-2 — a navegação lateral fixa (rail) e a grade de duas colunas do
   modelo original foram restauradas aqui, só com tokens do site. A
   simplificação anterior (índice plano, sem coluna lateral) tirava
   navegação que o modelo tinha de propósito — o pedido era usar o
   layout do site nas CORES e FONTES, não substituir a estrutura. */

.tdah-shell{
  max-width:1180px; margin:0 auto; padding:0 var(--inset) 96px;
  display:grid; grid-template-columns:1fr; gap:0;
}
@media (min-width:1020px){
  .tdah-shell{ grid-template-columns:216px minmax(0,1fr); gap:56px; }
}
.tdah-rail{ display:none; }
@media (min-width:1020px){
  .tdah-rail{
    display:block; grid-column:1; position:sticky; top:28px;
    align-self:start; padding-top:12px;
  }
  .tdah-rail ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
  .tdah-rail a{
    display:flex; gap:11px; align-items:baseline;
    font-family:'Hanken Grotesk', sans-serif; font-size:13.5px; line-height:1.35;
    color:var(--grafite-quente); text-decoration:none;
    padding:7px 10px 7px 12px; border-left:2px solid var(--linha-suave);
    transition:color .15s, border-color .15s;
  }
  .tdah-rail a:hover{ color:var(--azul-profundo); border-left-color:var(--argila); }
  .tdah-rail a.on{ color:var(--azul-profundo); border-left-color:var(--argila); font-weight:600; }
  .tdah-rail .n{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--cinza); }
}
.tdah-conteudo{ grid-column:1/-1; min-width:0; }
@media (min-width:1020px){ .tdah-conteudo{ grid-column:2; } }
.tdah-conteudo--cheia{ grid-column:1/-1 !important; }

.tdah-corpo{ font-family:'Hanken Grotesk', system-ui, sans-serif; }
.tdah-corpo h2{
  font-family:'Newsreader', Georgia, serif; font-weight:500; letter-spacing:-.014em;
  font-size:1.62rem; line-height:1.2; margin:0 0 6px; text-wrap:balance;
  color:var(--azul-profundo);
}
.tdah-corpo h3{
  font-family:'Newsreader', Georgia, serif; font-weight:500; font-size:1.1rem;
  margin:30px 0 6px; letter-spacing:-.005em; color:var(--azul-profundo);
}
.tdah-corpo p{ margin:0 0 1.05em; line-height:1.7; font-size:16.5px; }
.tdah-corpo em{ font-style:italic }
.tdah-corpo strong{ font-weight:600; color:var(--azul-profundo) }

.tdah-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--cinza); margin:0 0 14px;
}

/* aviso técnico: usa .disclaimer, definido em ../styles.css (padrão único do site) */

/* ── controle "abrir todas as camadas", linha cheia acima do shell ──── */
.tdah-controle-full{ grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:8px 0 28px; }
.tdah-controle-full p{ margin:0; font-family:'Hanken Grotesk', sans-serif; font-size:13px; color:var(--cinza); max-width:52ch; line-height:1.5 }
.tdah-toggle{
  font-family:'Hanken Grotesk', sans-serif; font-size:13px; font-weight:600;
  background:var(--areia-clara); color:var(--azul-profundo);
  border:1px solid var(--linha-suave); border-radius:999px;
  padding:8px 17px; cursor:pointer; transition:background .15s, border-color .15s;
  display:inline-flex; align-items:center; gap:9px; flex:none;
}
.tdah-toggle:hover{ border-color:var(--argila) }
.tdah-toggle .dot{ width:7px; height:7px; border-radius:50%; background:var(--linha-suave); transition:background .15s }
.tdah-toggle[aria-pressed="true"]{ background:#F1E1D8; border-color:var(--argila) }
.tdah-toggle[aria-pressed="true"] .dot{ background:var(--argila) }

/* ── seções de conteúdo ─────────────────────────────────────────────── */
.tdah-corpo section{ scroll-margin-top:24px }

/* ── cena narrativa ─────────────────────────────────────────────────── */
.tdah-cena{ font-size:16.5px; line-height:1.72 }
.tdah-cena p:first-of-type::first-letter{
  font-family:'Hanken Grotesk', sans-serif; font-weight:700; font-size:3.1rem; line-height:.82;
  float:left; margin:6px 10px 0 0; color:var(--argila);
}
.tdah-fala{
  border-left:2px solid var(--argila); padding:2px 0 2px 20px; margin:1.5em 0;
  font-style:italic; color:var(--azul-profundo);
}

/* ── par de conversão: frase → mecanismo ────────────────────────────── */
.tdah-par{
  display:grid; gap:0; margin:26px 0;
  border:1px solid var(--linha-suave); border-radius:3px; overflow:hidden;
  background:var(--areia-clara); box-shadow:var(--sombra-suave);
}
.tdah-par .tdah-q{ padding:16px 20px; font-style:italic; font-size:1.02rem; border-bottom:1px solid var(--linha-suave) }
.tdah-par .tdah-a{ padding:15px 20px; font-family:'Hanken Grotesk', sans-serif; font-size:.94rem; line-height:1.55; color:var(--grafite-quente); background:var(--areia-cabecalho) }
.tdah-par .tdah-a b{ color:var(--azul-profundo); font-weight:600 }

.tdah-clean{ list-style:none; margin:0 0 1.1em; padding:0; display:flex; flex-direction:column; gap:11px }
.tdah-clean li{ padding-left:20px; position:relative }
.tdah-clean li::before{ content:""; position:absolute; left:2px; top:.72em; width:6px; height:1px; background:var(--argila) }

/* ── camada técnica (reaproveita a interação do acordeão de FAQ) ────── */
.tdah-camada{ margin:26px 0 8px; border:1px solid var(--linha-suave); border-radius:3px; background:var(--areia-cabecalho); overflow:hidden }
.tdah-camada > summary{
  cursor:pointer; list-style:none; padding:12px 18px;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--grafite-quente);
  display:flex; align-items:center; gap:10px; transition:color .15s;
}
.tdah-camada > summary::-webkit-details-marker{ display:none }
.tdah-camada > summary:hover{ color:var(--azul-profundo) }
.tdah-camada > summary::after{ content:"+"; margin-left:auto; font-weight:600; color:var(--argila) }
.tdah-camada[open] > summary::after{ content:"\2212" }
.tdah-camada .tdah-corpo-tecnico{
  padding:4px 18px 20px; font-family:'Hanken Grotesk', sans-serif;
  font-size:.9rem; line-height:1.62; color:var(--grafite-quente);
  border-top:1px solid var(--linha-suave); padding-top:16px;
}
.tdah-camada .tdah-corpo-tecnico p{ margin:0 0 .85em }
.tdah-camada .tdah-corpo-tecnico strong{ color:var(--azul-profundo) }
.tdah-camada .tdah-corpo-tecnico code{
  font-family:'IBM Plex Mono', monospace; font-size:.85em; color:var(--azul-profundo);
  background:var(--areia-clara); padding:1px 5px; border-radius:2px; border:1px solid var(--linha-suave);
}

/* ── tabelas de comparação ───────────────────────────────────────────── */
.tdah-tabela-wrap{ overflow-x:auto; margin:16px 0 6px; -webkit-overflow-scrolling:touch }
.tdah-corpo table{ border-collapse:collapse; width:100%; min-width:430px; font-family:'Hanken Grotesk', sans-serif; font-size:.87rem }
.tdah-corpo th, .tdah-corpo td{ text-align:left; padding:9px 14px 9px 0; border-bottom:1px solid var(--linha-suave); vertical-align:top }
.tdah-corpo th{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cinza); font-weight:400; border-bottom-color:rgba(15,28,46,.16);
}
.tdah-num{ font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--azul-profundo) }
.tdah-cinza{ color:var(--cinza) }
.tdah-alerta{ color:var(--alerta) }

/* ── marcadores de estatuto da fonte ─────────────────────────────────── */
.tdah-selo{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 9px; border-radius:2px;
  border:1px solid rgba(15,28,46,.16); color:var(--cinza); background:var(--areia-clara);
  white-space:nowrap;
}
.tdah-selo.tdah-verificado{ color:var(--argila); border-color:var(--argila) }
.tdah-selo.tdah-pendente{ color:var(--alerta); border-color:var(--alerta) }

.tdah-aviso{
  border:1px solid var(--alerta); border-radius:3px; padding:16px 18px; margin:24px 0;
  background:var(--areia-clara); font-family:'Hanken Grotesk', sans-serif; font-size:.93rem; line-height:1.6;
}
.tdah-aviso .tdah-aviso-titulo{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--alerta); margin:0 0 8px;
}
.tdah-aviso p{ margin:0 0 .7em }
.tdah-aviso p:last-child{ margin:0 }

/* ── fontes/referências (numeração circular, com selo) ──────────────── */
.tdah-fontes{ list-style:none; counter-reset:f; margin:0; padding:0; display:flex; flex-direction:column; gap:18px }
.tdah-fontes li{ counter-increment:f; padding-left:34px; position:relative; font-size:.95rem; line-height:1.58 }
.tdah-fontes li::before{
  content:counter(f); position:absolute; left:0; top:.28em;
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--cinza);
  border:1px solid rgba(15,28,46,.16); border-radius:2px;
  width:20px; height:20px; display:grid; place-items:center;
}
.tdah-fontes .tdah-doi{ font-family:'IBM Plex Mono', monospace; font-size:.82em; word-break:break-all; color:var(--cinza) }

/* ── grade de cards (usada no hub, index.html) ──────────────────────── */
.tdah-grupo{ margin-top:56px }
.tdah-grupo > h2{ margin:0 0 4px }
.tdah-grupo > .tdah-desc{ color:var(--grafite-quente); font-size:.95rem; margin:0 0 20px; max-width:66ch }
.tdah-cards{ display:grid; gap:1px; background:rgba(74,68,56,.14); border:1px solid rgba(74,68,56,.14) }
@media (min-width:760px){
  .tdah-cards{ grid-template-columns:repeat(2,1fr) }
  /* último card sozinho na linha (contagem ímpar): ocupa a linha toda, sem deixar célula vazia */
  .tdah-cards > :last-child:nth-child(odd){ grid-column:1 / -1; }
}
a.tdah-card, div.tdah-card{ background:var(--areia-clara); padding:22px 24px; display:block; text-decoration:none; color:inherit; transition:background .15s }
a.tdah-card:hover{ background:var(--areia-cabecalho) }
.tdah-card .tdah-card-topo{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:9px }
.tdah-card h3{ margin:0 }
a.tdah-card h3{ color:var(--argila) }
.tdah-card p{ margin:0; font-size:.92rem; line-height:1.55; color:var(--grafite-quente); font-family:'Hanken Grotesk', sans-serif }
.tdah-card .tdah-tempo{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--cinza); white-space:nowrap }
div.tdah-card{ background:var(--areia-cabecalho); }
div.tdah-card h3{ color:var(--cinza); }
div.tdah-card p{ color:var(--cinza); }
div.tdah-card .tdah-tempo{ color:var(--cinza); }

.tdah-tese{ max-width:64ch; font-size:16.5px; line-height:1.7 }
.tdah-tese p{ margin:0 0 1.1em }
.tdah-tese .tdah-grande{ font-size:1.45rem; line-height:1.4; color:var(--azul-profundo) }
.tdah-tese em{ color:var(--argila); font-style:normal; font-weight:600 }

.tdah-metodo{ margin-top:60px; border-top:1px solid var(--linha-suave); padding-top:34px; max-width:70ch }
.tdah-metodo p{ font-size:.96rem; margin:0 0 1em }
.tdah-regra{ border-left:2px solid var(--argila); padding:2px 0 2px 20px; margin:22px 0; font-size:1.02rem }