/* Termos de Uso (templates/termos.html). Usa os tokens e botões de site.css. */

[hidden] { display: none !important; }

.termos-topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter); background: rgba(14, 16, 21, .9); border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.termos-topo__logo img { width: 112px; height: auto; }
.termos-topo__acoes { display: flex; gap: 4px; align-items: center; }

.termos { max-width: 1100px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--gutter) 40px;
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px 64px; }
.termos__cabeca { grid-column: 1 / -1; display: grid; gap: 14px; max-width: 760px; }
.termos__cabeca h1 { font-size: clamp(32px, 4.6vw, 56px); letter-spacing: -.04em; }
.termos__versao { color: var(--ink-faint); font-size: 14px; }
.termos__resumo { margin-top: 8px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--brand-wash); border: 1px solid var(--brand-edge); color: var(--ink); font-size: 16px; line-height: 1.6; }

.termos__indice { position: sticky; top: 96px; align-self: start; font-size: 14px; }
.termos__indice p { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.termos__indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: i; }
.termos__indice li { counter-increment: i; }
.termos__indice a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; }
.termos__indice a::before { content: counter(i) ". "; color: var(--ink-faint); }
.termos__indice a:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }

.termos__texto { max-width: 720px; display: grid; gap: 44px; }
.termos__texto section { scroll-margin-top: 90px; display: grid; gap: 14px; }
.termos__texto h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.025em; }
.termos__texto h3 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; margin-top: 10px; color: var(--ink); }
.termos__texto p, .termos__texto li { color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.termos__texto strong { color: var(--ink); font-weight: 500; }
.termos__texto ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.termos__texto li::marker { color: var(--brand-lift); }
.a-definir { background: rgba(242, 169, 60, .18); color: #ffd28c; padding: 1px 6px; border-radius: 6px; border: 1px dashed rgba(242, 169, 60, .6); }
.rodape a { color: var(--ink-soft); }
.termos__texto a { color: var(--brand-lift); }

@media (max-width: 900px) {
  .termos { grid-template-columns: 1fr; }
  .termos__indice { position: static; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--hairline); }
}
@media (max-width: 520px) {
  .termos-topo .btn--link { display: none; }
}