@font-face {
  font-family: Archivo;
  src: url('/assets/fonts/Archivo.ttf');
  font-display: swap;
}

@font-face {
  font-family: DMSans;
  src: url('/assets/fonts/DMSans.ttf');
  font-display: swap;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
  }
  @media (min-width: 1024px) {
    html {
      scroll-padding-top: 6rem;
    }
  }

body{
  font-family: DMSans , sans-serif;
}

  nav {
    transition: 0.3s ease;
  }
  #check:checked + label #menu {
    display: none;
  }
  #check:checked + label #close {
    display: block;
  }
  #check:checked + label ~ nav {
    height: 100vh;
    transition: 0.3s ease;
  }
  .no-spinner::-webkit-outer-spin-button,
  .no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
  }

  @keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.fadeInOut {
  animation: fadeInOut 3s ease forwards;
}

.whatsapp-button {
  position: relative;
  width: 3rem; 
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden; 
  transition: width 0.5s ease;
}

.whatsapp-button.expanded {
  width: 15.5rem; 
}

.whatsapp-icon {
  width: 2rem; 
  height: 2rem;
}

.whatsapp-text {
  position: relative;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s ease;
  color: #fff; /* Color del texto */
}

.whatsapp-button.expanded .whatsapp-text {
  opacity: 1;
}

.contact {
  background-image: url('/assets/images/contact.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 1024px) {
  .whatsapp-button {
    width: 4rem; 
    height: 4rem;
  }
  
  .whatsapp-button.expanded {
    width: 20rem; 
  }
  
  .whatsapp-icon {
    width: 2rem; 
    height: 2rem;
  }}