/*
 * Folha de estilo das paginas juridicas do Suger Lux: privacidade, termos,
 * exclusao de conta e suporte. Sao paginas de leitura, entao usam o calcario
 * (#F6F3EB) como fundo — a cor que a marca reserva justamente para isso —
 * com o indigo nos titulos e o ouro nos detalhes.
 */

  :root {
    --indigo:   #16173A;
    --basalto:  #0C0C16;
    --ouro:     #E3A63C;
    --ambar:    #F2CE7E;
    --calcario: #F6F3EB;
    --pedra:    #6E6B7B;
    --regua:    #E2DCCD;
    --font-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-ui: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--calcario);
    color: var(--basalto);
    font-family: var(--font-ui);
    font-size: 17px;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
  }

  .folha { max-width: 46rem; margin: 0 auto; padding: 2rem 1.5rem 5rem; }

  /* ---- cabecalho ---- */

  .topo {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--regua);
  }
  .topo svg { width: 44px; height: 44px; flex: none; border-radius: 11px; }
  .marca-nome {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -.01em;
    color: var(--indigo);
    line-height: 1.1;
  }
  .marca-linha { font-size: .82rem; color: var(--pedra); }

  /* ---- troca de idioma ---- */

  .idiomas { margin-left: auto; display: flex; gap: .3rem; }
  .idiomas button {
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    padding: .34rem .6rem;
    border: 1px solid var(--regua);
    border-radius: 999px;
    background: transparent;
    color: var(--pedra);
    cursor: pointer;
  }
  .idiomas button:hover { border-color: var(--ouro); color: var(--indigo); }
  .idiomas button[aria-pressed="true"] {
    background: var(--indigo);
    border-color: var(--indigo);
    color: var(--ambar);
  }

  /* ---- texto ---- */

  h1 {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--indigo);
    margin: 2.5rem 0 .4rem;
  }
  .data { color: var(--pedra); font-size: .9rem; margin: 0 0 2.25rem; }

  h2 {
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: 1.32rem;
    letter-spacing: -.01em;
    color: var(--indigo);
    margin: 2.75rem 0 .75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--regua);
  }
  h2:first-of-type { border-top: 0; padding-top: 0; }

  h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--indigo);
    margin: 1.6rem 0 .4rem;
  }

  p { margin: 0 0 1rem; }
  ul, ol { margin: 0 0 1rem; padding-left: 1.35rem; }
  li { margin-bottom: .45rem; }
  li::marker { color: var(--ouro); font-weight: 600; }

  code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .88em;
    background: #fff;
    border: 1px solid var(--regua);
    border-radius: 4px;
    padding: .1em .38em;
    color: var(--indigo);
  }
  strong { font-weight: 600; color: var(--indigo); }
  a { color: var(--indigo); text-decoration-color: var(--ouro); text-underline-offset: 2px; }

  /* ---- destaque ---- */

  .nota {
    background: #fff;
    border-left: 3px solid var(--ouro);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.2rem;
    margin: 0 0 1.25rem;
  }
  .nota p:last-child { margin-bottom: 0; }

  /* ---- tabelas ---- */

  .rolagem { overflow-x: auto; margin: 0 0 1.25rem; }
  table { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 30rem; }
  th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--regua); vertical-align: top; }
  th { font-weight: 600; color: var(--indigo); white-space: nowrap; }

  /* ---- rodape ---- */

  footer {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--regua);
    font-size: .86rem;
    color: var(--pedra);
  }

  [data-idioma] { display: none; }
  [data-idioma].ativo { display: block; }

  /* No celular os tres botoes de idioma nao cabem na mesma linha da marca:
     eles empurravam a pagina para 410px numa tela de 375px, e ai o texto
     escapava pela esquerda. Descem para a propria linha. */
  @media (max-width: 30rem) {
    .topo { flex-wrap: wrap; }
    .idiomas { margin-left: 0; width: 100%; }
    .idiomas button { flex: 1; text-align: center; padding: .4rem .3rem; }
  }