/* Embalo · páginas públicas · Fluxo azul grafite */
:root {
  color-scheme:light;
  --canvas:#F5F7FA;
  --surface:#FFFFFF;
  --surface-2:#EAF0F6;
  --ink:#152536;
  --muted:#52657A;
  --line:#D8E0E9;
  --control-line:#7A8A9B;
  --accent:#365E87;
  --focus:#9A411C;
  --orange:#F56820;
  --on-orange:#251308;
  --nav:#172B40;
  --nav-ink:#E7EEF6;
  --nav-muted:#B6C5D5;
  --warning-bg:#FFF3E2;
  --warning-line:#EDC99D;
  --warning-ink:#68400F;
  --shadow:0 16px 38px rgba(21,37,54,.045)
}

:root[data-tema="escuro"] {
  color-scheme:dark;
  --canvas:#0E1824;
  --surface:#182738;
  --surface-2:#21344A;
  --ink:#F1F5F9;
  --muted:#B3C1D1;
  --line:#3C526B;
  --control-line:#7890A8;
  --accent:#A9C7E7;
  --focus:#FFAA70;
  --warning-bg:#332C25;
  --warning-line:#82603A;
  --warning-ink:#FFE1B7;
  --shadow:none
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font:16px/1.5 "Segoe UI",system-ui,sans-serif
}

button,select {
  font:inherit
}

button {
  cursor:pointer
}

a {
  color:var(--accent)
}

a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:3px
}

img {
  max-width:100%;
  height:auto
}

.container {
  width:min(100% - 40px,1180px);
  margin-inline:auto
}

.public-header {
  background:var(--nav);
  color:var(--nav-ink);
  border-bottom:1px solid #344C65;
  position:sticky;
  top:0;
  z-index:100
}

.public-header-inner {
  min-height:78px;
  display:flex;
  align-items:center;
  gap:32px
}

.brand-link {
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  color:var(--nav-ink);
  text-decoration:none;
  flex:none
}

.embalo-marca {
  --marca-tamanho:34px;
  display:inline-flex;
  align-items:center;
  isolation:isolate;
  font-size:var(--marca-tamanho);
  line-height:1;
  font-family:"Segoe UI",Arial,sans-serif;
  font-weight:800;
  letter-spacing:-.065em;
  white-space:nowrap;
  color:inherit
}

.embalo-marca img {
  width:1.3em;
  height:1.23em;
  flex:0 0 1.3em;
  position:relative;
  z-index:2;
  object-fit:contain
}

.embalo-marca>span {
  margin-left:-.47em;
  position:relative;
  z-index:1;
  padding-bottom:.02em
}

.embalo-assinatura {
  font-size:11px;
  letter-spacing:.02em;
  margin-top:-3px;
  margin-left:3px
}

.public-nav {
  display:flex;
  align-items:center;
  gap:22px;
  margin-left:auto
}

.public-nav a {
  color:var(--nav-muted);
  text-decoration:none;
  font-size:13px;
  font-weight:650
}

.public-nav a:hover,.public-nav a[aria-current="page"] {
  color:var(--nav-ink)
}

.header-actions {
  display:flex;
  align-items:center;
  gap:12px
}

.theme-label {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--nav-muted);
  font-size:12px
}

.theme-label select {
  height:38px;
  border:1px solid #7890A8;
  border-radius:8px;
  background:var(--nav);
  color:var(--nav-ink);
  padding:0 8px;
  min-width:88px
}

.menu-button {
  display:none;
  min-width:44px;
  height:44px;
  background:transparent;
  color:var(--nav-ink);
  border:1px solid #7890A8;
  border-radius:8px;
  font-size:23px;
  line-height:1
}

.button {
  min-height:44px;
  border:1px solid transparent;
  border-radius:8px;
  padding:10px 17px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  white-space:nowrap
}

.button.primary {
  background:var(--orange);
  color:var(--on-orange)
}

.button.secondary {
  border-color:var(--control-line);
  color:var(--ink);
  background:var(--surface)
}

.button.nav-cta {
  background:var(--orange);
  color:var(--on-orange)
}

.public-nav .nav-mobile-cta {
  display:none
}

.eyebrow {
  display:block;
  color:var(--accent);
  font-size:11px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase
}

.public-footer {
  background:var(--nav);
  color:var(--nav-ink);
  margin-top:72px
}

.footer-grid {
  display:grid;
  grid-template-columns:minmax(210px,1.5fr) repeat(2,minmax(150px,1fr));
  gap:40px;
  padding:50px 0 35px
}

.footer-grid .brand-link {
  margin-bottom:10px
}

.footer-grid p {
  max-width:330px;
  font-size:13px;
  line-height:1.6;
  color:var(--nav-muted)
}

.footer-grid h2 {
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:5px 0 15px
}

.footer-grid ul {
  padding:0;
  margin:0;
  list-style:none;
  display:grid;
  gap:11px
}

.footer-grid a:not(.brand-link) {
  font-size:13px;
  color:var(--nav-muted);
  text-decoration:none
}

.footer-grid a:hover {
  text-decoration:underline;
  color:var(--nav-ink)
}

.footer-bottom {
  border-top:1px solid #344C65;
  padding:17px 0 25px;
  font-size:12px;
  color:var(--nav-muted)
}

.document-main {
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:50px;
  align-items:start;
  padding-top:43px
}

.document-aside {
  position:sticky;
  top:96px;
  border-left:1px solid var(--line);
  padding-left:19px
}

.document-aside strong {
  font-size:11px;
  letter-spacing:.14em;
  color:var(--muted)
}

.document-aside nav {
  display:grid;
  gap:8px;
  margin-top:14px
}

.document-aside a {
  text-decoration:none;
  font-size:13px;
  padding:5px 0
}

.document-aside a:hover {
  text-decoration:underline
}

.document-article {
  max-width:760px;
  min-width:0
}

.document-article .eyebrow {
  margin-bottom:9px
}

.document-article h1 {
  font-size:clamp(30px,4vw,44px);
  letter-spacing:-.035em;
  line-height:1.1;
  margin:0 0 12px
}

.document-article h2 {
  font-size:20px;
  line-height:1.3;
  letter-spacing:-.02em;
  margin:34px 0 8px;
  scroll-margin-top:24px
}

.document-article p,.document-article li {
  font-size:15px;
  line-height:1.68
}

.document-article p {
  margin:0 0 13px
}

.document-article ol {
  padding-left:23px
}

.document-article li {
  margin-bottom:8px
}

.document-article .versao {
  font-size:12px;
  color:var(--muted);
  margin-bottom:20px
}

.document-article .aviso {
  background:var(--warning-bg);
  border:1px solid var(--warning-line);
  color:var(--warning-ink);
  border-radius:10px;
  padding:14px 16px;
  margin:20px 0 29px
}

.document-article .destaque {
  padding:23px 24px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:12px;
  box-shadow:var(--shadow)
}

.document-article .destaque ol {
  margin:0 0 15px
}

.document-article .botao {
  display:inline-flex;
  min-height:44px;
  padding:10px 16px;
  border-radius:8px;
  background:var(--orange);
  color:var(--on-orange);
  font-weight:700;
  font-size:14px;
  text-decoration:none
}

.document-article a:not(.botao) {
  text-underline-offset:3px
}

.document-intro {
  font-size:16px!important;
  color:var(--muted);
  max-width:66ch
}

.document-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:28px
}

.document-footer-note {
  font-size:13px;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:38px
}

.manual-hero {
  padding:42px 0 25px;
  border-bottom:1px solid var(--line)
}

.manual-hero h1 {
  font-size:clamp(34px,4.2vw,52px);
  letter-spacing:-.045em;
  line-height:1.1;
  margin:8px 0
}

.manual-hero p {
  color:var(--muted);
  max-width:64ch
}

.manual-layout {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:42px;
  align-items:start;
  padding-top:32px
}

.manual-index {
  position:sticky;
  top:96px;
  max-height:calc(100vh - 115px);
  overflow:auto;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:12px;
  padding:20px
}

.manual-index strong {
  font-size:11px;
  letter-spacing:.13em;
  color:var(--muted)
}

.manual-index nav {
  display:grid;
  gap:3px;
  margin-top:12px
}

.manual-index a {
  padding:7px 8px;
  text-decoration:none;
  font-size:13px;
  border-radius:6px
}

.manual-index a:hover,.manual-index a:focus-visible {
  background:var(--surface-2)
}

.manual-content {
  min-width:0
}

.manual-note {
  background:var(--warning-bg);
  border:1px solid var(--warning-line);
  color:var(--warning-ink);
  border-radius:10px;
  padding:16px 18px;
  margin-bottom:25px
}

.manual-section {
  border-bottom:1px solid var(--line);
  padding:25px 0 31px;
  scroll-margin-top:12px
}

.manual-section:first-of-type {
  padding-top:0
}

.manual-section h2 {
  font-size:23px;
  letter-spacing:-.025em;
  margin:0 0 12px
}

.manual-section p,.manual-section li {
  max-width:70ch;
  font-size:15px;
  line-height:1.6
}

.manual-section ol {
  padding-left:24px
}

.manual-section li {
  margin:7px 0
}

.manual-section .task-note {
  margin-top:15px;
  padding:12px 15px;
  background:var(--surface-2);
  border-radius:8px;
  color:var(--ink);
  font-size:13px
}

.manual-section a {
  font-weight:650
}

.manual-section .support-note {
  font-size:13px;
  color:var(--muted)
}

@media(max-width:950px) {
  .public-nav {
    gap:12px
  }
  .header-actions {
    gap:8px
  }
  .document-main {
    grid-template-columns:170px minmax(0,1fr);
    gap:28px
  }
  .manual-layout {
    grid-template-columns:190px minmax(0,1fr);
    gap:25px
  }
}

@media(max-width:780px) {
  .public-header-inner {
    min-height:69px
  }
  .menu-button {
    display:inline-block
  }
  .public-nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--nav);
    border-top:1px solid #344C65;
    padding:16px 20px 22px;
    box-shadow:0 18px 24px #0003;
    flex-direction:column;
    align-items:stretch
  }
  .public-nav.open {
    display:flex
  }
  .public-nav a {
    min-height:40px;
    display:flex;
    align-items:center
  }
  .public-nav .nav-mobile-cta {
    display:flex
  }
  .header-actions {
    margin-left:auto
  }
  .header-actions>.button {
    display:none
  }
  .document-main,.manual-layout {
    display:block;
    padding-top:25px
  }
  .document-aside,.manual-index {
    position:static;
    max-height:none;
    margin-bottom:24px
  }
  .document-aside {
    border-left:0;
    border-bottom:1px solid var(--line);
    padding:0 0 17px
  }
  .document-aside nav {
    display:flex;
    gap:4px 14px;
    flex-wrap:wrap
  }
  .manual-index nav {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .footer-grid>div:first-child {
    grid-column:1/-1
  }
}

@media(max-width:480px) {
  .container {
    width:min(100% - 32px,1180px)
  }
  .embalo-marca {
    --marca-tamanho:29px
  }
  .embalo-assinatura {
    font-size:10px
  }
  .theme-label>span {
    display:none
  }
  .theme-label select {
    min-width:79px
  }
  .public-header-inner {
    gap:12px
  }
  /* F7: em 320 px a marca não podia encolher (flex:none, assinatura numa linha só) e, somada ao grupo
     Tema/menu (select min. 79 px + 8 + botão 44 px) e ao gap de 12 px, passava do container de 288 px:
     o botão de menu comia a margem de 16 px e saía 0,53 px da tela (medida da F6). Estimativa pelas
     métricas da fonte: ~162 + 12 + 131 = ~305 px. Agora só a marca do cabeçalho pode encolher e a
     assinatura quebra em duas linhas equilibradas quando falta espaço; onde cabe (390 px) nada muda. */
  .public-header .brand-link {
    flex:0 1 auto
  }
  .public-header .embalo-assinatura {
    text-wrap:balance
  }
  .footer-grid {
    grid-template-columns:1fr 1fr
  }
  .document-article h1 {
    font-size:32px
  }
  .manual-index nav {
    grid-template-columns:1fr
  }
  .document-actions .button {
    width:100%
  }
}

@media print {
  :root {
    color-scheme:light!important;
    --canvas:#fff;
    --surface:#fff;
    --surface-2:#eee;
    --ink:#152536;
    --muted:#52657A;
    --accent:#365E87
  }
  .public-header,.public-footer,.document-aside,.manual-index,.document-actions,.menu-button {
    display:none!important
  }
  .document-main,.manual-layout {
    display:block
  }
  .container {
    width:100%
  }
  .document-article {
    max-width:none
  }
  .manual-section {
    break-inside:avoid
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}