/* ============================================================================
   ESTILO DAS PÁGINAS LEGAIS — Política de Privacidade e Termos de Uso
   ----------------------------------------------------------------------------
   Um arquivo só para as duas páginas: o que mudar aqui vale nas duas.
   Os tokens são os mesmos da LP (violao-descomplicado.html), copiados só os que estas
   páginas usam. Se a paleta da LP mudar, mudar aqui também.
   ============================================================================ */

:root{
  --color-accent:      #C43A12;
  --color-accent-hover:#A93110;
  --color-bg:          #FDF9F3;
  --color-surface:     #F7F1E8;
  --color-ink:         #241A19;
  --color-ink-soft:    #4A3B38;
  --color-ink-muted:   #6E5C58;
  --color-hairline:    #E4DACB;
  --color-on-accent:   #FFFFFF;

  --font-sans: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;

  --step--2: .75rem;
  --step--1: clamp(.906rem, .88rem + .1vw, .938rem);
  --step-0:  clamp(1rem, .98rem + .1vw, 1.063rem);
  --step-1:  clamp(1.063rem, 1.02rem + .14vw, 1.156rem);
  --step-2:  clamp(1.25rem, 1.16rem + .45vw, 1.5rem);
  --step-4:  clamp(2rem, 1.7rem + 1.5vw, 3rem);

  --space-2xs: .5rem;  --space-xs: .75rem;  --space-sm: 1rem;
  --space-md:  1.5rem; --space-lg: 2rem;    --space-xl: 3rem;

  --container: 48rem;   /* ~768px: largura de LEITURA, não a de landing page */
  --radius:    .75rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{margin:0;background:var(--color-bg);color:var(--color-ink-soft);
  font-family:var(--font-sans);font-size:var(--step-0);line-height:1.7;
  font-weight:400;-webkit-font-smoothing:antialiased}

.container{width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:var(--space-md)}

/* ---------- topo ---------- */
.topo{border-bottom:1px solid var(--color-hairline);background:var(--color-surface)}
.topo__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-sm);padding-block:var(--space-sm);flex-wrap:wrap}
.topo__logo{display:flex;align-items:center;gap:var(--space-2xs);
  text-decoration:none;color:var(--color-ink);font-weight:700}
.topo__logo img{width:2.75rem;height:2.75rem}
.topo__voltar{font-size:var(--step--1);color:var(--color-ink-muted);text-decoration:none}
.topo__voltar:hover{color:var(--color-accent)}

/* ---------- conteúdo ---------- */
main{padding-block:var(--space-xl) calc(var(--space-xl) * 1.5)}

h1{font-size:var(--step-4);line-height:1.1;letter-spacing:-.02em;font-weight:800;
  color:var(--color-ink);margin:0 0 var(--space-2xs);text-wrap:balance}
.subtitulo{font-size:var(--step--1);color:var(--color-ink-muted);margin:0 0 var(--space-xl)}

h2{font-size:var(--step-2);line-height:1.25;font-weight:700;color:var(--color-ink);
  margin:var(--space-xl) 0 var(--space-xs);scroll-margin-top:var(--space-lg);
  text-wrap:balance}
h3{font-size:var(--step-1);font-weight:700;color:var(--color-ink);
  margin:var(--space-md) 0 var(--space-2xs)}

p{margin:0 0 var(--space-sm)}
ul,ol{margin:0 0 var(--space-sm);padding-left:1.35em}
li{margin-bottom:var(--space-2xs)}
li::marker{color:var(--color-accent)}
strong{color:var(--color-ink);font-weight:700}

a{color:var(--color-accent);text-underline-offset:.18em}
a:hover{color:var(--color-accent-hover)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:3px}

/* ---------- sumário ---------- */
.sumario{background:var(--color-surface);border:1px solid var(--color-hairline);
  border-radius:var(--radius);padding:var(--space-md);margin-bottom:var(--space-xl)}
.sumario h2{margin:0 0 var(--space-xs);font-size:var(--step-1)}
/* mobile-first, como na LP: uma coluna por padrão, duas quando couber */
.sumario ol{margin:0;padding-left:1.25em;font-size:var(--step--1)}
@media (min-width:34rem){ .sumario ol{columns:2;column-gap:var(--space-lg)} }
.sumario a{text-decoration:none}
.sumario a:hover{text-decoration:underline}

/* ---------- caixa de destaque ---------- */
.nota{border-left:3px solid var(--color-accent);background:var(--color-surface);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--space-sm) var(--space-md);margin:var(--space-md) 0}
.nota p:last-child{margin-bottom:0}

/* Campo que ainda precisa ser preenchido pelo Valdery. Fica VISÍVEL de propósito:
   um placeholder discreto numa página legal é um placeholder que vai ao ar. */
.preencher{background:#FFE9A8;color:#5A4200;padding:.05em .4em;border-radius:.25em;
  font-weight:700;font-size:.95em}

/* ---------- tabela ---------- */
.tabela-rolagem{overflow-x:auto;margin-bottom:var(--space-sm)}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:var(--step--1)}
th,td{text-align:left;padding:var(--space-2xs) var(--space-xs);
  border-bottom:1px solid var(--color-hairline);vertical-align:top}
th{color:var(--color-ink);font-weight:700;white-space:nowrap}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--color-hairline);padding-block:var(--space-lg);
  font-size:var(--step--2);color:var(--color-ink-muted)}
.rodape p{margin:0 0 var(--space-2xs)}
.rodape a{color:var(--color-ink-muted)}

/* ---------- impressão ---------- */
@media print{
  .topo__voltar,.sumario{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  a{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}