@import './fontface.css';
:root {
  /* MUTED COLORS */
  --white: #fdfdfd;
  --gray-1: #f5f5f5;
  --gray-2: #dedede;
  --gray-3: #b4b4b4;
  --gray-4: #676767;
  --gray-5: #434343;
  --gray-6: #2b2b2b;
  --black: #151515;

  /* COLORS */
  --green: #288d52;
  --light-green: #3dbf6d;
  --red: #be3939;
  --yellow: #f5c518;
  --orange: #e46248;
  --light-orange: #f7a8a0;
  --blue: #0071e3;
  --light-blue: #52cbff;
  --purple: #ac92ec;
  --pink: #f7a8b8;

  /* MAIN COLORS */
  --primary-color: var(--orange);
  --secundary-color: var(--light-orange);
  --background-color: var(--black);
  --text-color: var(--white);

  /* TRANSPARENT COLORS */
  --transparent-blue: #0071e34b;
  --transparent-orange: #e462484d;
  --transparent: transparent;

  /* TRANSPARENT BACKGROUND */
  --transparent-background-1: rgba(255, 255, 255, 0.1);
  --transparent-background-2: rgba(255, 255, 255, 0.2);
  --transparent-background-3: rgba(255, 255, 255, 0.4);
  --transparent-background-4: rgba(255, 255, 255, 0.6);
  --transparent-background-5: rgba(255, 255, 255, 0.8);

  /* SHADOWS */
  --shadow-1: rgba(0, 0, 0, 0.1);
  --shadow-2: rgba(0, 0, 0, 0.2);
  --shadow-3: rgba(0, 0, 0, 0.3);
  --shadow-4: rgba(0, 0, 0, 0.4);
  --shadow-5: rgba(0, 0, 0, 0.5);

  /* FONTS */
  --font-1: 'SFPro', sans-serif;

  /* FONT SIZES */
  --title: 4rem;
  --subtitle: 1.3rem;
  --paragraph: 1.1rem;
  --microcopy: 0.9rem;
  --email: 2rem;
  --faq: 1.7rem;

  /* FONT WEIGHTS */
  --thin: 200;
  --light: 300;
  --regular: 400;
  --semi-bold: 500;
  --bold: 600;
  --heavy: 700;

  /* BORDER RADIUS */
  --radius-1: 10rem;
  --radius-2: 2rem;
  --radius-3: 1rem;
  --radius-4: 0.5rem;

  /* TRANSITIONS */
  --loading: 1s;
  --slow: 0.5s;
  --steady: 0.3s;
  --fast: 0.1s;

  /* TEXT SPACING */
  --line-height: 1.3;
  --letter-spacing: 0.022em;
}

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

/* DEFAULTS */

body {
  background-color: var(--background-color);
  scroll-behavior: smooth;
  font-family: var(--font-1);
  font-size: var(--paragraph);
  font-weight: var(--regular);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  color: var(--text-color);
}

main {
  position: relative;
  overflow-x: hidden;
}

p {
  font-size: var(--paragraph);
  font-weight: var(--light);
  color: var(--text-color);
}

button {
  border-radius: var(--radius-4);
  outline: none;
  border: none;
  cursor: pointer;
  transition: var(--steady);
  color: var(--white);
  background-color: var(--primary-color);
  font-family: var(--font-1);
  font-weight: var(--regular);
}
button:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 0.5rem 1.1rem var(--shadow-1);
}
button:active:not(:disabled) {
  transform: scale(1);
  box-shadow: 0 0.1rem 0.5rem var(--shadow-1);
}
button:disabled {
  background-color: var(--gray-2);
  color: var(--gray-4);
  box-shadow: none;
  cursor: not-allowed;
}
.secundary-button {
  border: 1px solid var(--white);
  background-color: var(--transparent);
  color: var(--white);
}

del {
  text-decoration: line-through;
  color: var(--red);
}

a,
a:visited {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  text-decoration: underline;
  cursor: pointer;
}

ul {
  list-style: none;
}

input {
  outline: none;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(224, 224, 224, 0.5);
  border-radius: var(--radius-4);
  font-weight: var(--regular);
  font-family: var(--font-1);
  transition: var(--steady);
}

input:focus-visible {
  transition: var(--steady);
  box-shadow: 0 0 0 0.2rem var(--transparent-orange);
}

textarea {
  outline: none;
  resize: vertical;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(224, 224, 224, 0.5);
  border-radius: var(--radius-4);
  font-weight: var(--regular);
  font-family: var(--font-1);
  transition: var(--steady);
}

textarea:focus-visible {
  transition: var(--steady);
  box-shadow: 0 0 0 0.2rem var(--transparent-orange);
}

select {
  -webkit-appearance: none;
  outline: none;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(224, 224, 224, 0.5);
  background-color: #fff;
  border-radius: var(--radius-4);
  font-weight: var(--regular);
  font-family: var(--font-1);
  transition: var(--steady);
}

/* COOKIES */
#cookies {
  min-width: 300px;
  padding: 1.5rem 2rem;
  background-color: var(--gray-6);
  border-radius: var(--radius-4);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  position: fixed;
  bottom: -6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
  transition: var(--steady);
}

#cookies p {
  font-size: var(--paragraph);
  font-weight: var(--light);
  color: var(--text-color);
}

#cookies button {
  min-width: 100px;
  height: 40px;
  font-size: var(--paragraph);
}

/* WHATSAPP */
#whatsapp {
  position: fixed;
  bottom: 2.1rem;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: rgb(68, 149, 68);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(1rem);
  transition: var(--slow);
}

#whatsapp.visible {
  opacity: 1;
  transform: translateY(0);
}

#whatsapp a {
  color: var(--white);
}

#whatsapp::after {
  content: 'Fale Connosco';
  font-weight: var(--font-weight-light);
  font-size: 0.9rem;
  position: absolute;
  left: -10rem;
  width: 9rem;
  height: 2rem;
  background-color: var(--background-color);
  border-radius: 0.4rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  z-index: -1;
  display: none;
  justify-content: center;
  align-items: center;
  animation: opacity var(--fast-transition) ease-in-out;
}

#whatsapp::before {
  content: '';
  position: absolute;
  display: none;
  top: 50%;
  left: -0.9rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--white);
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: opacity var(--fast-transition) ease-in-out;
}

/* FOOTER */
footer {
  width: 100%;
  height: 50px;
  background-color: var(--background-color);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

footer p {
  font-size: 1.1rem;
  font-weight: var(--light);
  text-align: center;
  color: var(--white);
}

/* MEDIA QUERIES */

@media (width < 1200px) {
}

@media (width < 1100px) and (height < 700px) {
}

@media (width < 800px) {
  #cookies {
    width: 93%;
    min-height: 40px;
    height: auto;
    padding: 1rem 1rem;
    gap: 1.5rem;
  }

  #cookies p {
    font-size: 0.9rem;
  }

  #cookies button {
    min-width: 100px;
    height: 30px;
    font-size: 0.9rem;
  }

  footer p {
    font-size: 1rem;
  }
}

@media (width < 600px) {
  footer p {
    font-size: 0.7rem;
  }
}