@font-face {
  font-family: "goldie";
  src: url(../assets/fonts/GoldieRainbow.otf);
}

:root {
  --font-goldie: "goldie", sans-serif;
  --p-rosa: #c58b93;
  --p-rosa-claro: #ddb7ac;
  --p-bege: #f0d9d1;
  --p-verde: #999b85;
  --s-branco: #f4efec;
  --s-branco-transp1: #f4efecfb;
  --s-branco-transp2: #f4efecd8;
  --s-vermelho: #9b1b30;
  --s-vinho: #8b5963;
  --s-vinho-transp: #8b59636c;
  --s-vinho-escuro: #3e2f32;
  --s-vinho-escuro-transp: #3e2f320c;
  --x-branco: white;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /* ajustar entre 300 e 700 */
  font-style: normal;
  font-size: 1.92rem;
  line-height: 1.4;
  color: var(--s-vinho);
  background-color: var(--x-branco);
}

a {
  text-decoration: none;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

svg {
  fill: var(--s-vinho-escuro);
  width: 3rem;
  height: 3rem;
}

h1 {
  font-size: 6.88rem;
  font-family: var(--font-goldie), sans-serif;
  line-height: 1.02;
}

h2 {
  font-size: 4.78rem;
  font-weight: 700;
}

button {
  background-color: transparent;
  border: none;
}

section {
  scroll-margin-top: 100px; /* ajuste conforme necessário */
}

.secao {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 2rem;
}

.container {
  width: 150rem;
}

.titulo {
  font-family: var(--font-goldie), sans-serif;
}

.botao,
.botao-secundario {
  padding: 0.5rem 1rem;
  transition: background-color, color 0.5s ease;

  &:hover {
    background-color: var(--s-vinho-escuro-transp);
  }
}

.botao {
  text-align: center;
  border: 3px solid var(--s-vinho-escuro);
  background-color: var(--s-vinho-escuro);
  color: var(--s-branco);

  &:hover {
    color: var(--s-vinho-escuro);
  }
}

.botao-secundario {
  border: 3px solid var(--p-bege);
  background-color: var(--p-bege);
  color: var(--s-vinho-escuro);

  &:hover {
    color: var(--p-bege);
  }
}

.aspas-inicio,
.aspas-fim {
  font-size: 5rem;
  color: var(--s-vermelho);
  font-family: Georgia, serif;
  position: absolute;
}

.aspas-inicio {
  left: -2rem; /* Ajusta a aspa inicial para ficar mais à esquerda */
  transform: translateY(-2rem);
}