/* Sistema Visual Fidaro — tokens */
:root {
  --color-primary: #0A4B52;
  --color-secondary: #1A7A82;
  --color-accent: #E8A317;
  --color-text: #1A2E2E;
  --color-text-muted: #5A6B6B;
  --color-bg: #F5F7F8;
  --color-surface: #FFFFFF;
  --color-border: #D1DCDC;

  --font-sans: Helvetica, Arial, sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}
a { color: var(--color-secondary); }
a:hover, a:focus { color: var(--color-primary); }
h1, h2, h3 { line-height: 1.25; color: var(--color-primary); margin: 0 0 var(--space-md); }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); margin-top: var(--space-xl); }
h3 { font-size: var(--text-lg); margin-top: var(--space-lg); }
p, ul, ol { margin: 0 0 var(--space-md); }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: var(--space-xs); }
strong { color: var(--color-primary); }

.skip {
  position: absolute;
  left: -999px;
  top: var(--space-sm);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 10;
}
.skip:focus { left: var(--space-sm); }

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
.container--doc { max-width: 72ch; }

/* Cabeçalho */
.site-header {
  background: var(--color-primary);
  color: #fff;
  border-bottom: 3px solid var(--color-accent);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.brand {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: var(--text-lg);
}
.brand:hover, .brand:focus { color: var(--color-accent); }
.site-nav { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.site-nav a { color: #fff; text-decoration: none; font-size: var(--text-sm); }
.site-nav a:hover, .site-nav a:focus, .site-nav a[aria-current="page"] {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Página inicial */
.hero { padding: var(--space-xl) 0 var(--space-lg); }
.hero h1 { max-width: 24ch; }
.lead { font-size: var(--text-lg); color: var(--color-text); max-width: 60ch; }
.section { padding: var(--space-lg) 0; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.card h3 { margin-top: 0; }
.card p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.contact {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
}
.contact p { margin: 0; }

/* Documentos */
.doc-header { padding: var(--space-xl) 0 var(--space-md); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-lg); }
.doc-meta { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.toc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-lg); }
.toc h2 { font-size: var(--text-md); margin: 0 0 var(--space-sm); }
.toc ol { margin: 0; columns: 2; column-gap: var(--space-lg); }
.toc a { text-decoration: none; }
.toc a:hover, .toc a:focus { text-decoration: underline; }
.table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-md); font-size: var(--text-sm); }
.table th, .table td { border: 1px solid var(--color-border); padding: var(--space-sm) var(--space-md); text-align: left; vertical-align: top; }
.table th { background: var(--color-surface); color: var(--color-primary); }
.table-wrap { overflow-x: auto; }

/* Rodapé */
.site-footer {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.footer-inner { padding-top: var(--space-lg); padding-bottom: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: space-between; }
.legal { margin: 0; max-width: 60ch; }
.site-footer nav { display: flex; gap: var(--space-md); flex-wrap: wrap; }

@media (max-width: 600px) {
  .toc ol { columns: 1; }
  h1 { font-size: var(--text-xl); }
}

@media print {
  .site-header, .site-footer, .skip, .toc { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: none; }
}