/* ==========================================================
   VELOX BRASIL SEGUROS: Política de Privacidade e Termos de Uso
   Extraído do <style> que ficava no <head> das duas páginas, que
   tinham CSS idêntico. As regras estão na mesma ordem original.

   Estas duas páginas não usam o styles.css do site: têm um
   subconjunto próprio do sistema de design, só com o que uma
   página de texto corrido precisa. Manter assim é de propósito,
   para uma mudança de layout do site não mexer no documento legal.
   ========================================================== */

@font-face {
  font-family: Mulish;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("assets/fonts/mulish-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Mulish;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("assets/fonts/mulish-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
:root {
  --noite: #041831;
  --abismo: #020d1c;
  --ambar: #e8a33d;
  --terracota: #bf5339;
  --gelo: #f6f8fb;
  --branco: #ffffff;
  --tinta: #16273b;
  --tinta-suave: #51637a;
  --nevoa: #8fa3bc;
  --linha: rgba(4, 24, 49, 0.12);
  --dsp: "Mulish", sans-serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: var(--dsp);
  color: var(--tinta);
  background: var(--branco);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}
.topo {
  background: var(--noite);
  color: var(--branco);
  padding: 22px 0;
}
.topo .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.topo img {
  height: 34px;
  /* width: auto obrigatório agora que o logo declara width e height
     no HTML: sem isto o atributo fixaria 1070px de largura contra
     os 34px de altura do CSS, e a marca sairia esticada. */
  width: auto;
  display: block;
}
.topo a.voltar {
  color: var(--ambar);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}
.topo a.voltar:hover {
  text-decoration: underline;
}
.capa {
  background: var(--gelo);
  border-bottom: 1px solid var(--linha);
  padding: 56px 0 44px;
}
.capa .etiqueta {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--terracota);
  margin-bottom: 14px;
}
h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 800;
}
.capa .vigencia {
  margin-top: 14px;
  color: var(--tinta-suave);
  font-size: 0.92rem;
}
main {
  padding: 48px 0 72px;
}
main section {
  margin-bottom: 38px;
}
h2 {
  font-size: 1.15rem;
  font-weight: 750;
  margin-bottom: 12px;
  line-height: 1.3;
}
p,
li {
  color: var(--tinta-suave);
  font-size: 0.98rem;
}
p + p {
  margin-top: 12px;
}
ul,
ol {
  margin: 12px 0 0 22px;
}
li + li {
  margin-top: 8px;
}
b {
  color: var(--tinta);
  font-weight: 700;
}
a {
  color: var(--terracota);
}
.quadro {
  background: var(--gelo);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 16px;
}
.quadro p {
  font-size: 0.94rem;
}
footer {
  background: var(--abismo);
  color: var(--nevoa);
  padding: 34px 0;
  font-size: 0.82rem;
}
footer a {
  color: var(--nevoa);
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
}
