/* Botón de WhatsApp */
.whatsapp-button {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #316926, #3d8330, #3D8A40, #55B743); /* Gradiente verde */
  border-radius: 38px;
  padding: 12px 16px;
  width: 100%; /* Ajusta según el tamaño que prefieras */
  margin: 0 auto;
  border: 2px linear-gradient(135deg, #316926, #3d8330, #3D8A40, #55B743);; /* Borde verde plano */
  position: relative; /* Para posicionar el texto "CHAT" dentro del botón */
  transition: transform 0.3s ease; /* Transiciones para suavizar el efecto */
}

/* Enlace del botón */
.whatsapp-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white; /* Color blanco del texto del enlace */
  width: 100%; /* Asegura que el enlace ocupe todo el ancho del botón */
}

/* Icono principal de WhatsApp */
.whatsapp-icon {
  background-image: url('/assets/1.png'); /* Logo de WhatsApp actualizado */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 55px; /* Tamaño del ícono */
  height: 55px; /* Tamaño del ícono */
  margin-right: 15px;
  border: 2px solid #55B743; /* Borde verde claro alrededor del ícono */
  border-radius: 50%; /* Hacer el borde redondeado */
  padding: 7px; /* Espacio entre el ícono y el borde */
  box-sizing: border-box; /* Asegura que el borde no afecte al tamaño total */
}

/* Contenedor del texto */
.whatsapp-text {
  display: flex;
  flex-direction: column;
}

/* Nombre de la empresa */
.whatsapp-company {
  font-size: 18px;
  color: #FEEA71; /* Texto amarillo para el nombre de la empresa */
  font-weight: 700; /* Peso más grueso para el nombre */
  margin-bottom: 2px; /* Separación entre el nombre y el número */
}

/* Contenedor de contacto */
.whatsapp-contact {
  display: flex;
  align-items: center;
}

/* Número de teléfono */
.whatsapp-number {
  font-size: 13px;
  font-weight: 400; /* Peso normal para el número */
  margin-right: 10px; /* Espacio entre el número y el ícono pequeño */
}

/* Icono pequeño de WhatsApp */
.whatsapp-icon-small {
  background-image: url('/assets/WhatsApp.svg'); /* Logo de WhatsApp para el número */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px; /* Tamaño reducido del ícono */
  height: 30px; /* Tamaño reducido del ícono */
  border-radius: 50%; /* Hacer el borde redondeado */
  margin-right: 10px; /* Espacio entre el ícono pequeño y el texto "Online" */
}

/* Estado online */
.whatsapp-status {
  font-size: 13px; /* Tamaño del texto "Online" */
  display: flex;
  align-items: center;
}

.status-dot {
  width: 8px; /* Tamaño del punto */
  height: 8px; /* Tamaño del punto */
  border-radius: 50%; /* Hacer el punto redondeado */
  background-color: #55B743; /* Color verde del punto */
  margin-right: 5px; /* Espacio entre el punto y el texto "Online" */
  animation: blink 1s infinite; /* Aplicar la animación de parpadeo */
}

/* Animación de parpadeo */
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* Efecto de movimiento al pasar el cursor */
.whatsapp-button:hover {
  transform: scale(1.05); /* Aumenta el tamaño del botón al pasar el cursor */
  /* Elimina la sombra para un estilo más plano */
}

/* Efecto de movimiento al hacer clic */
.whatsapp-button:active {
  transform: scale(0.98); /* Reduce el tamaño del botón al hacer clic */
  /* Elimina la sombra para un estilo más plano */
}

/* Texto "CHAT" */
.whatsapp-chat {
  font-size: 10px; /* Tamaño pequeño para el texto "CHAT" */
  font-weight: 600; /* Peso más grueso para el texto */
  color: #FFFFFF; /* Color blanco del texto */
  background-color: #55B743; /* Fondo verde de WhatsApp */
  padding: 2px 8px; /* Espacio alrededor del texto */
  border: 1px solid #FFFFFF; /* Borde blanco */
  border-radius: 12px; /* Bordes redondeados */
  position: absolute; /* Posicionamiento absoluto dentro del contenedor */
  top: 10px; /* Espacio desde la parte superior del botón */
  right: 20px; /* Espacio desde la parte derecha del botón */
  animation: blink 1s infinite; /* Animación de parpadeo */
  text-transform: uppercase; /* Convertir el texto a mayúsculas */
}
/*end whatsap*/