:root {

  --marca: #df5a1a;
  --marca-texto: #b93f0c;
  --marca-escura: #923209;
  --marca-suave: #fcede3;
  --tinta: #1b2320;
  --tinta-2: #4f5b57;
  --tinta-3: #747f7b;
  --linha: #e6e1d8;
  --linha-forte: #cfc7b9;
  --fundo: #faf7f2;
  --papel: #ffffff;
  --papel-2: #fcfaf6;
  --foco: #1f5fcc;
  --produto-lembretes: #0b6e4f;
  --produto-lembretes-suave: #e4f1eb;
  --produto-lembretes-escuro: #085a40;
  --produto-vencimentos: #7a3b8f;
  --produto-vencimentos-suave: #f3e9f5;
  --produto-vencimentos-escuro: #5f2d70;
  --ok: #1f6b3a;
  --ok-suave: #e6f2e9;
  --alerta: #8a5a00;
  --alerta-suave: #fbf3e2;
  --perigo: #a32626;
  --perigo-escuro: #8a1f1f;
  --perigo-suave: #fbeaea;
}

:root {
  --c-marca: var(--marca, #e8590c);
  --c-marca-texto: var(--marca-texto, #b8460a);
  --c-marca-suave: var(--marca-suave, #fbede2);
  --c-tinta: var(--tinta, #1b2320);
  --c-tinta-2: var(--tinta-2, #4f5b57);
  --c-tinta-3: var(--tinta-3, #6b7672);
  --c-linha: var(--linha, #e6e1d8);
  --c-linha-forte: var(--linha-forte, #cdc5b8);
  --c-fundo: var(--fundo, #faf7f2);
  --c-papel: var(--papel, #ffffff);
  --c-foco: var(--foco, #1f5fbf);

  --acento: var(--c-marca-texto);
  --acento-suave: var(--c-marca-suave);

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --largura: 68rem;
  --medida: 40rem;
  --margem: 1rem;
  --raio: 12px;
  --raio-p: 8px;
  --sombra: 0 1px 2px rgba(27, 35, 32, .04), 0 4px 16px rgba(27, 35, 32, .04);
}

@media (min-width: 40rem) {
  :root { --margem: 1.5rem; }
}

@media (min-width: 64rem) {
  :root { --margem: 2rem; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 1rem/1.6 var(--fonte);
  color: var(--c-tinta);
  background: var(--c-fundo);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

main { flex: 1 0 auto; }
main:focus { outline: none; }

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

a {
  color: var(--acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--c-foco);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  margin: 0 0 .75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--c-tinta);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.45rem + 2.4vw, 3.25rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); }
h3 { font-size: 1.125rem; letter-spacing: -.01em; }

p, ul, ol, dl, table { margin: 0 0 1rem; }
p:last-child, ul:last-child, ol:last-child, dl:last-child { margin-bottom: 0; }

strong, b { font-weight: 650; }

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  top: -10rem;
  left: var(--margem);
  z-index: 10;
  padding: .75rem 1rem;
  border-radius: var(--raio-p);
  background: var(--c-tinta);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.pular:focus { top: .75rem; color: #fff; }

.topo {
  background: var(--c-papel);
  border-bottom: 1px solid var(--c-linha);
}

.topo-interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: .5rem var(--margem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--c-tinta);
  text-decoration: none;
}

.marca picture { display: block; }
.marca img { display: block; height: 2rem; width: auto; }

.marca-palavra {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--c-marca-texto);
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .125rem;
  margin: 0 -.625rem 0 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: block;
  padding: .625rem .625rem;
  border-radius: var(--raio-p);
  color: var(--c-tinta-2);
  font-weight: 550;
  text-decoration: none;
}

.nav a:hover { color: var(--c-tinta); background: var(--c-fundo); }

.nav a[aria-current="page"] {
  color: var(--c-tinta);
  text-decoration: underline;
  text-decoration-color: var(--c-marca);
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}

.heroi, .secao {
  padding-inline: max(var(--margem), calc((100% - var(--largura)) / 2));
}

.heroi { padding-block: 2.5rem; }
.secao { padding-block: 2.75rem; }

@media (min-width: 48rem) {
  .heroi { padding-block: 4.5rem 3.5rem; }
  .secao { padding-block: 4.5rem; }
}

.secao-suave {
  background: var(--c-papel);
  border-block: 1px solid var(--c-linha);
}

.secao-marca { background: var(--acento-suave); }

.secao:not(.secao-suave, .secao-marca) + .secao:not(.secao-suave, .secao-marca) {
  padding-top: 0;
}

.heroi + .secao:not(.secao-suave, .secao-marca) { padding-top: 1rem; }

.heroi > *, .secao > h2, .secao > .intro { max-width: var(--medida); }

.heroi > .acoes { max-width: none; }
.heroi h1 { max-width: 20ch; margin-bottom: 1rem; }

.sobretitulo {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1rem;
  font-size: .9375rem;
  font-weight: 650;
  color: var(--acento);
}

.sobretitulo::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.abertura {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.55;
  color: var(--c-tinta-2);
}

.intro {
  font-size: 1.0625rem;
  color: var(--c-tinta-2);
}

.secao > h2 + .intro { margin-top: -.25rem; }

.secao > h3 { margin-top: 2.5rem; }

.nota { font-size: .875rem; color: var(--c-tinta-2); }
.grande { font-size: 1.25rem; font-weight: 650; }

.sem-quebra { white-space: nowrap; }

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .75rem 1.25rem;
  border: 2px solid var(--acento);
  border-radius: var(--raio-p);
  background: var(--acento);
  color: #fff;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.botao:hover {
  color: #fff;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .14);
}

.botao-secundario {
  background: transparent;
  color: var(--acento);
}

.botao-secundario:hover {
  color: var(--acento);
  background: var(--acento-suave);
  box-shadow: none;
}

.botao-discreto {
  padding-inline: .5rem;
  border-color: transparent;
  background: transparent;
  color: var(--acento);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.botao-discreto:hover {
  color: var(--acento);
  background: transparent;
  box-shadow: none;
  text-decoration-thickness: 2px;
}

@media (max-width: 29.99rem) {
  .acoes > .botao { flex: 1 1 100%; }
}

.produtos {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.produto {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--c-linha);
  border-top: 4px solid var(--acento);
  border-radius: var(--raio);
  background: var(--c-papel);
  box-shadow: var(--sombra);
}

.produto-nome {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .5rem;
  font-size: 1.5rem;
}

.produto-nome::before {
  content: "";
  flex: none;
  width: .75rem;
  height: .75rem;
  border-radius: 3px;
  background: var(--acento);
}

.produto-descricao { color: var(--c-tinta-2); font-size: 1.0625rem; }

.produto .acoes { margin-top: 1.25rem; }

.produto-destaques {
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-linha);
}

@media (min-width: 48rem) {
  .produtos-1 .produto {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 3rem;
    padding: 2.5rem;
  }

  .produtos-1 .produto-nome { font-size: 1.875rem; }

  .produtos-1 .produto-destaques {
    align-self: center;
    padding: 0 0 0 2.5rem;
    border-top: 0;
    border-left: 1px solid var(--c-linha);
  }

  .produtos-2, .produtos-varios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .produtos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.produtos-2 .produto-texto, .produtos-3 .produto-texto, .produtos-varios .produto-texto {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.produtos-2 .acoes, .produtos-3 .acoes, .produtos-varios .acoes { margin-top: auto; padding-top: 1.25rem; }

.principios, .passos, .lista-sim, .lista-nao, .etiquetas {
  margin-left: 0;
  padding: 0;
  list-style: none;
}

.principios {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 48rem) {
  .principios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}

@media (min-width: 64rem) {
  .principios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.principios > li::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: 1rem;
  border-radius: 2px;
  background: var(--acento);
}

.principios p { color: var(--c-tinta-2); }

.passos {
  display: grid;
  gap: 1.75rem;
  margin-top: 2rem;
  counter-reset: passo;
}

.passos > li {
  position: relative;
  padding-left: 3.25rem;
  counter-increment: passo;
}

.passos > li::before {
  content: counter(passo);
  position: absolute;
  top: -.2rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--acento-suave);
  color: var(--acento);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.passos p { color: var(--c-tinta-2); }

@media (min-width: 48rem) {
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  .passos > li { padding: 3.5rem 0 0; }
  .passos > li::before { top: 0; }
}

@media (min-width: 64rem) {
  .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lista-sim, .lista-nao {
  display: grid;
  gap: .75rem;
}

.lista-sim > li, .lista-nao > li {
  position: relative;
  padding-left: 1.875rem;
}

.lista-sim > li::before {
  content: "";
  position: absolute;
  top: .3em;
  left: .3rem;
  width: .45rem;
  height: .8rem;
  border: solid var(--acento);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.lista-nao > li::before {
  content: "";
  position: absolute;
  top: .78em;
  left: .125rem;
  width: .875rem;
  height: 2px;
  border-radius: 2px;
  background: var(--c-tinta-3);
}

.secao > .lista-sim, .secao > .lista-nao { margin-top: 1.5rem; }

@media (min-width: 48rem) {
  .secao > .lista-sim, .secao > .lista-nao {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 3rem;
  }
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}

.etiqueta {
  display: inline-block;
  padding: .25rem .75rem;
  border: 1px solid var(--c-linha-forte);
  border-radius: 999px;
  background: var(--c-papel);
  color: var(--c-tinta-2);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
}

.etiqueta-acento {
  border-color: transparent;
  background: var(--acento-suave);
  color: var(--acento);
}

.colunas {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

.colunas > * { min-width: 0; }
.colunas:first-child, .fatos:first-child, .passos:first-child, .principios:first-child { margin-top: 0; }

@media (min-width: 48rem) {
  .colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

.cartao {
  padding: 1.5rem;
  border: 1px solid var(--c-linha);
  border-radius: var(--raio);
  background: var(--c-papel);
}

.cartao > h2, .cartao > h3 { margin-bottom: .5rem; font-size: 1.25rem; }

.chamada {
  max-width: var(--medida);
  margin: 2rem 0 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--acento);
  border-radius: 0 var(--raio) var(--raio) 0;
  background: var(--acento-suave);
}

.chamada > h3 { margin-bottom: .375rem; }

.fatos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  margin-top: 2rem;
}

.fatos > div {
  padding: 1rem 1.25rem;
  border: 1px solid var(--c-linha);
  border-radius: var(--raio);
  background: var(--c-papel);
}

.fatos dt {
  margin-bottom: .25rem;
  color: var(--c-tinta-2);
  font-size: .875rem;
  font-weight: 650;
}

.fatos dd { margin: 0; overflow-wrap: anywhere; }

@media (min-width: 48rem) {
  .fatos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }

  .fatos > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.tabela {
  width: 100%;
  max-width: var(--medida);
  margin-top: 1.5rem;
  border: 1px solid var(--c-linha);
  border-radius: var(--raio);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--c-papel);
  font-variant-numeric: tabular-nums;
}

.tabela caption {
  padding: 0 0 .75rem;
  caption-side: top;
  text-align: left;
  font-weight: 650;
}

.tabela th, .tabela td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--c-linha);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.tabela thead th {
  background: var(--acento-suave);
  color: var(--c-tinta);
  font-size: .875rem;
  font-weight: 650;
}

.tabela thead th:first-child { border-top-left-radius: calc(var(--raio) - 1px); }
.tabela thead th:last-child { border-top-right-radius: calc(var(--raio) - 1px); }

.tabela tbody th { font-weight: 500; }
.tabela tbody tr:last-child > * { border-bottom: 0; }
.tabela .num { text-align: right; white-space: nowrap; }
.tabela tbody .num { color: var(--acento); font-weight: 750; }

.texto { max-width: var(--medida); }
.texto h2 { margin: 2.5rem 0 .75rem; font-size: 1.375rem; }
.texto h2:first-child { margin-top: 0; }
.texto h3 { margin: 1.75rem 0 .5rem; }
.texto ul, .texto ol { padding-left: 1.25rem; }
.texto li + li { margin-top: .375rem; }

.rodape {
  margin-top: auto;
  border-top: 1px solid var(--c-linha);
  background: var(--c-papel);
  color: var(--c-tinta-2);
  font-size: .875rem;
}

.rodape-interno {
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin: 0 auto;
  padding: 2rem var(--margem) 2.5rem;
  display: grid;
  gap: .75rem;
}

.rodape-marca {
  margin: 0;
  color: var(--c-tinta);
  font-size: 1rem;
  font-weight: 750;
}

.rodape-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape-nav a {
  display: inline-block;
  padding: .5rem 0;
  color: var(--c-tinta-2);
}

.rodape-principio { margin: 0; color: var(--c-tinta); }

.rodape-legal { margin: 0; }
.rodape-legal span { white-space: nowrap; }

@media (max-width: 47.99rem) {
  .rodape-legal span { display: block; }
  .rodape-legal .sep { display: none; }
}

@media (min-width: 48rem) {
  .rodape-interno { grid-template-columns: 1fr auto; align-items: center; }
  .rodape-principio, .rodape-legal { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .pular, .nav, .acoes { display: none; }
  body { background: #fff; }
  .secao-suave, .secao-marca { background: none; border: 0; }
}

.tema-lembretes {
  --acento: var(--produto-lembretes, var(--c-marca-texto));
  --acento-suave: var(--produto-lembretes-suave, var(--c-marca-suave));
}
.tema-vencimentos {
  --acento: var(--produto-vencimentos, var(--c-marca-texto));
  --acento-suave: var(--produto-vencimentos-suave, var(--c-marca-suave));
}