@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PLUSJAKARTASANS-REGULAR.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/PLUSJAKARTASANS-EXTRABOLD.TTF') format('truetype');
    font-weight: 800;
    font-style: normal;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    background-color: #ECEBE9!important;
}

html {
    scroll-behavior: smooth !important;
}

.social-buttons {
  position: fixed;
  bottom: 25px;
  left: 25px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 999;
}

.social-item a {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 10px;
}

.social-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.social-item img:hover {
  transform: scale(1.1);
}

.tooltip-label {
  background-color: #d22128;
  color: white;
  font-size: 15px;
  padding: 2px 4px;
  border-radius: 2px;
  font-weight: 600;
  white-space: nowrap;
  display: block; /* Visible por defecto en pantallas grandes */
  padding-right: 45px;
}

/* Hide text labels for Instagram and Facebook on desktop */
.social-item.instagram .tooltip-label,
.social-item.facebook .tooltip-label {
  display: none !important;
}

/* Special styling for Bolsa de Trabajo button */
.social-item.whatsapp .tooltip-label {
  background-color: white;
  color: #dc2626;
  border: 2px solid #dc2626;
  font-weight: 600;
}

/* Responsive adjustments for social buttons */
@media only screen and (max-width: 768px) {
  .social-buttons {
    bottom: 15px;
    left: 15px;
    gap: 15px;
  }

  .social-item img {
    width: 50px;
    height: 50px;
  }

  .tooltip-label {
    display: none; /* Ocultar en tablets y móviles */
  }
}

@media only screen and (max-width: 480px) {
  .social-buttons {
    bottom: 10px;
    left: 10px;
    gap: 10px;
  }

  .social-item img {
    width: 45px;
    height: 45px;
  }

  .tooltip-label {
    display: none; /* Ocultar en móviles pequeños */
  }
}
