:root {
  --color1: #000d20;
  --color2: #011327;
  --color3: #001c34;
  --color4: #0040a4;
  --color5: #61affa;
  --color6: #cde2fd;
  --color7: #cde5ff;
  --color8: #1a1a1f;
  --color9: #ffff;
  --color10: #ccc;
  --color11: #4caf50;
  --color12: #f44336;

  --color13: #f2f4f7; /*FONDO*/
  --color14: #555;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-principal: "Montserrat", sans-serif;
}

body {
  font-family: var(--font-principal);
  margin: 0;
  background-color: var(--color1);
}

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: white;
  font-size: 1.75rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  transition: background-color 0.3s;
}

.whatsapp-float:hover {
  background-color: #1ebe5d;
}