/* O Mundo dos ETFs: índice lateral, tabelas, filtro, FAQ e glossário.
   Depende de rios-tokens.css, site-chrome.css e site.css. */

.guide{display:flex;gap:48px;align-items:flex-start;padding-top:56px;padding-bottom:96px}
.guide__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:72px}
.guide__main section{display:flex;flex-direction:column;gap:20px;scroll-margin-top:calc(var(--site-header-h) + 24px)}
.guide__main h3{margin:12px 0 0;font-size:16px;font-weight:600;color:var(--fg-1)}
.guide__main p{margin:0;max-width:72ch;font-size:15px;line-height:1.7;color:var(--fg-2);text-wrap:pretty}
.guide__main p strong{color:var(--fg-1)}
.guide__main .note{font-size:12px;color:var(--fg-3)}

/* ---------- Índice lateral ---------- */
.toc{position:sticky;top:calc(var(--site-header-h) + 24px);flex:0 0 220px;display:flex;flex-direction:column;border-left:1px solid var(--border-default)}
.toc__label{padding:0 0 12px 16px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.toc a{
  display:block;margin-left:-1px;padding:8px 0 8px 16px;border-left:2px solid transparent;
  font-size:13px;line-height:1.35;color:var(--fg-2)!important;
  transition:color 120ms var(--site-ease),border-color 120ms var(--site-ease);
}
.toc a:hover{color:var(--fg-1)!important}
.toc a[aria-current="true"]{border-left-color:var(--rios-gold);color:var(--fg-1)!important;font-weight:600}

/* ---------- Blocos de conteúdo ---------- */
.kv{margin:0}
.kv>div{display:grid;grid-template-columns:minmax(160px,240px) minmax(0,1fr);gap:8px 24px;padding:16px 20px;border-bottom:1px solid var(--border-subtle)}
.kv>div:last-child{border-bottom:0}
.kv dt{font-size:14px;font-weight:600;color:var(--fg-1)}
.kv dd{margin:0;font-size:13px;line-height:1.6;color:var(--fg-2);text-wrap:pretty}
.kv dd strong{color:var(--fg-1)}

.guide__main .cell__text{max-width:none}
.split-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.split-cards>.card{padding:20px;display:flex;flex-direction:column;gap:8px}

.notes{margin:0;padding:4px 16px;list-style:none}
.notes>li{padding:12px 0;border-bottom:1px solid var(--border-subtle);font-size:13px;line-height:1.6;color:var(--fg-2)}
.notes>li:last-child{border-bottom:0}
.notes strong{color:var(--fg-1)}

.tbl td.muted{color:var(--fg-2)}
.tbl td{line-height:1.5}
.tbl--rules{min-width:860px}

/* ---------- Tabela de ETFs ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip__count{font-family:var(--font-mono);font-size:10px;opacity:.7}
.tbl--etf{min-width:820px}
.tbl--etf thead th{position:sticky;top:0}
.tbl--etf td:nth-child(4){min-width:170px}
.tbl--etf td:nth-child(5){min-width:240px}
.ticker{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.risk-cell{display:flex;gap:8px;align-items:flex-start}
.risk-cell span:last-child{font-size:12px;color:var(--fg-2)}
.tbl--etf tbody tr[hidden]{display:none}

/* ---------- FAQ (acordeão) ---------- */
.faq{overflow:hidden}
.faq details{border-bottom:1px solid var(--border-subtle)}
.faq details:last-child{border-bottom:0}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;
  list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--fg-1);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--font-mono);font-size:16px;color:var(--rios-gold)}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{background:var(--bg-sunken)}
.faq summary:focus-visible{outline:none;box-shadow:inset var(--shadow-focus)}
.faq details p{padding:0 20px 16px;font-size:14px}

/* ---------- Glossário ---------- */
.glossary{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 32px;margin:0}
.glossary>div{padding-top:12px;border-top:1px solid var(--border-default)}
.glossary dt{font-size:14px;font-weight:600;color:var(--fg-1)}
.glossary dd{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--fg-2)}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .guide{flex-direction:column;align-items:stretch;gap:32px;padding-top:32px}
  .toc{
    position:sticky;top:var(--site-header-h);z-index:5;flex:none;width:calc(100% + 48px);margin:0 -24px;
    flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--border-default);
    background:var(--bg-app);padding:0 16px;scrollbar-width:none;
  }
  .toc::-webkit-scrollbar{display:none}
  .toc__label{display:none}
  .toc a{flex:none;margin:0;padding:12px 10px;border-left:0;border-bottom:2px solid transparent;white-space:nowrap}
  .toc a[aria-current="true"]{border-bottom-color:var(--rios-gold)}
  .guide__main section{scroll-margin-top:calc(var(--site-header-h) + 64px)}
  .kv>div{grid-template-columns:1fr}
}

/* Tabelas viram cartões no celular (rótulos via data-label) */
@media (max-width:700px){
  .tbl-stack .tbl{min-width:0}
  .tbl-stack .tbl thead{display:none}
  .tbl-stack .tbl,.tbl-stack .tbl tbody,.tbl-stack .tbl tr,.tbl-stack .tbl td{display:block;width:100%}
  .tbl-stack .tbl tbody tr{padding:12px 16px;border-bottom:1px solid var(--border-subtle)}
  .tbl-stack .tbl tbody tr[hidden]{display:none}
  .tbl-stack .tbl td{height:auto;padding:4px 0;border:0;text-align:left!important}
  .tbl-stack .tbl td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rios-gold)}
}