@font-face {
  font-family: "Baskervville Regular";
  src: url("/css/fonts/Baskervville-Regular.woff2") format("woff2"), url("/css/fonts/Baskervville-Regular.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baskervville Regular Italic";
  src: url("/css/fonts/Baskervville-Italic.woff2") format("woff2"), url("/css/fonts/Baskervville-Italic.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins Regular";
  src: url("/css/fonts/Poppins-Regular.woff2") format("woff2"), url("/css/fonts/Poppins-Regular.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins SemiBold";
  src: url("/css/fonts/Poppins-SemiBold.woff2") format("woff2"), url("/css/fonts/Poppins-SemiBold.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, a {
  font-family: inherit;
  color: inherit;
  font-size: inherit;
}

a {
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

li {
  list-style: none;
}

:root {
  --branco: #F6F5F5;
  --preto: #1E1E1E;
  --verde: #A1C7B6;
  --cinza: #9BA3A5;
  --azul: #021015;
  --tamanho: 80px;
  --tamanhoMin: calc(var(--tamanho) / 2);
  --tamanhoMin2x: calc(var(--tamanho) / 4);
  --fontCorpo: "Poppins Regular";
  --fontCorpoStrong: "Poppins SemiBold";
  --fontTitulo: "Baskervville Regular";
  --fontTituloIt: "Baskervville Regular Italic";
  --fontTituloSeccao: "Poppins SemiBold";
}

html {
  font-size: 62.5%;
}

body {
  font-family: var(--fontCorpo);
  font-size: 1.6rem;
  color: var(--preto);
}
body > * {
  padding: var(--tamanho);
}

.tituloseccao {
  text-transform: uppercase;
  font-family: var(--fontTituloSeccao);
  font-size: 1.6rem;
  color: var(--verde);
}

.titulo {
  font-family: var(--fontTitulo);
  font-size: 7.6rem;
  line-height: 1.1em;
}
.titulo span {
  color: var(--verde);
  font-family: var(--fontTituloIt);
}

.corpo {
  color: var(--cinza);
  font-size: 1.6rem;
  line-height: 1.6em;
  max-width: 700px;
}
.corpo strong {
  font-family: var(--fontCorpoStrong);
}
.corpo p:not(:first-of-type) {
  margin-top: var(--tamanhoMin2x);
}

.botoes {
  display: flex;
  gap: var(--tamanhoMin2x);
}

.botao {
  font-size: 2rem;
  background: var(--verde);
  width: fit-content;
  color: var(--preto);
  border: 1px solid var(--verde);
  text-transform: uppercase;
}
.botao a {
  padding: var(--tamanhoMin2x) var(--tamanhoMin);
  display: block;
}
.botao.transparente {
  color: var(--verde);
  background: transparent;
}
.botao.claro {
  color: var(--branco);
}

#header {
  position: fixed;
  top: 0;
  padding: var(--tamanhoMin) var(--tamanho);
  color: var(--branco);
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--tamanhoMin);
  z-index: 9;
}
#header .logo {
  height: 56px;
  flex: 1;
}
#header .logo img {
  width: auto;
}
#header #navegacao ul {
  display: flex;
  gap: var(--tamanhoMin);
}

#footer {
  background: var(--azul);
  color: var(--cinza);
  display: flex;
}
#footer .logo-e-texto {
  display: flex;
  flex-direction: column;
  gap: var(--tamanhoMin2x);
  width: 35%;
}
#footer .logo-e-texto .logo {
  height: 96px;
  width: auto;
}
#footer .logo-e-texto .logo img {
  width: auto;
}
#footer .logo-e-texto .corpo {
  font-size: 2.4rem;
}
#footer .navegacao {
  flex: 1;
  display: flex;
}
#footer .navegacao .caixa {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--tamanhoMin);
}
#footer .navegacao .caixa h2 {
  font-family: var(--fontTituloSeccao);
  font-size: 2.4rem;
}
#footer .navegacao .caixa ul li {
  font-size: 2rem;
}

.apresentacao {
  background: var(--azul);
  color: var(--branco);
  height: 100vh;
  display: flex;
  align-items: end;
  overflow: hidden;
  position: relative;
}
.apresentacao .fundo {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(40%);
}
.apresentacao .conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--tamanhoMin);
  z-index: 1;
}
.apresentacao .imagem {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 50%;
  z-index: 1;
}
.apresentacao .imagem img {
  object-fit: contain;
}

.prevencao .conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--tamanhoMin);
}