/* =====================================================================
   Porto Seguro Saúde — Design System v2
   Base: tokens, reset, tipografia editorial, layout. Mobile-first.
   Sem fontes remotas: sans do sistema.
   ===================================================================== */
:root {
  /* Direção cromática Porto: azul Porto primário, azul escuro, branco, cinzas claros */
  --primary: #0046C0;
  --primary-2: #003A9E;
  --primary-ink: #0046C0;
  --primary-50: #EAF1FD;
  --primary-100: #D3E2FA;
  --ink: #002B70;
  --ink-2: #001E50;
  --ink-3: #0A3A8C;
  --blue: #0046C0;
  --blue-2: #2F6BD4;
  --blue-50: #EAF1FD;
  --accent: #4A8BEA;
  /* superfícies e texto */
  --paper: #F5F7FA;
  --paper-2: #EEF2F7;
  --white: #FFFFFF;
  --text: #1E2A3A;
  --muted: #566274;
  --line: #E1E6ED;
  --line-2: #CDD5DF;
  /* estados (sempre com texto) */
  --ok: #1B6B48;
  --ok-50: #E6F3EC;
  --warn: #855000;
  --warn-50: #FCF2DF;
  --nao: #556070;
  --nao-50: #EEF1F5;
  --danger: #B42318;
  --danger-50: #FDECEA;
  /* dados */
  --chart: #3B74B8;
  --chart-2: #2D5E99;
  --focus: #F2A900;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(0, 43, 112, .06), 0 14px 32px -20px rgba(0, 43, 112, .30);
  --shadow-sm: 0 1px 2px rgba(0, 43, 112, .06);
  --gutter: 16px;
  --hdr: 60px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 20px); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; }
dd { margin: 0; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
/* campos não herdam a cor do contêiner (hero escuro): cor, placeholder e autofill em componentes.css */
table { border-collapse: collapse; width: 100%; }
abbr[title] { text-decoration: none; cursor: help; }
strong, b { font-weight: 650; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
main:focus { outline: none; }

/* tipografia: sans do sistema, títulos em negrito */
h1, h2 { margin: 0; font-family: var(--sans); font-weight: 750; color: var(--ink); letter-spacing: -.02em; }
h1 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.6rem); line-height: 1.12; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); line-height: 1.2; }
h3, h4 { margin: 0; font-family: var(--sans); font-weight: 650; color: var(--ink); font-size: 1.05rem; line-height: 1.3; }
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; white-space: nowrap; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: 8px; z-index: 200; transform: translateY(-160%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font-weight: 650; text-decoration: none; transition: transform .15s var(--ease); }
.skip:focus, .skip:focus-visible { transform: translateY(0); color: #fff; outline: 3px solid var(--focus); }
.muted { color: var(--muted); }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--primary); }

.ico { width: 1.2em; height: 1.2em; flex: none; }

/* prosa */
.prose { max-width: 68ch; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .4em; }
.prose strong { color: var(--ink); }

@media (min-width: 768px) {
  :root { --gutter: 28px; --hdr: 68px; }
  body { font-size: 1.0625rem; }
}
@media (min-width: 1024px) { :root { --gutter: 36px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}