/*  */
.header {
  background-image: url(../img/header4.png);
  background-position: center;
  background-size: cover;
  position: relative;
}
.img-logo {
  width: 50%;
}

.linear-white::after {
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  left: 0;
  bottom: 0;
}
.vh-50 {
  height: 50vmin;
}
/*  */

.card-img-filter {
  filter: brightness(0.8);
}
.card {
  transition-duration: 0.6s;
  clip-path: polygon(
    50% 0,
    100% 0,
    100% 50%,
    100% 100%,
    50% 100%,
    0 100%,
    0 50%,
    0 0
  );
}

.card-effect:hover .card {
  clip-path: polygon(
    50% 0,
    50% 0,
    100% 50%,
    100% 50%,
    50% 100%,
    50% 100%,
    0 50%,
    0 50%
  );
}
.card-img-overlay {
  transition-duration: 0.6s;
}

.card-effect:hover .card-img-overlay {
  transform: scale(0.8);
}

/*section comments */
.comments {
  background-image: url(../img/foto4.png);
  background-position: center;
  background-size: cover;
  position: relative;
}
.comments.linear-white::after {
  top: 0;
}
.comment__img {
  --tamaño: 80px;
  width: var(--tamaño);
  height: var(--tamaño);
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 7px 7px 7px rgba(0, 0, 0 / 0.5);
  border: 3px ridge #fff;
}

.transform-turn {
  transform: rotate(0.5turn);
}


/*  */
.media-object-img {
  --tamaño: 65px;
  width: var(--tamaño);
  height: var(--tamaño);
  margin-right: 15px;
}




/* Contenedor principal del botón flotante */
.whatsapp-container {
  position: fixed;
  bottom: 20px; /* Distancia desde abajo */
  right: 20px; /* Distancia desde la derecha */
  display: flex;
  align-items: center;
  z-index: 1000;
}

/* Estilo del mensaje emergente */
.whatsapp-message {
  background-color: #25d366;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-right: 10px; /* Espacio entre mensaje y botón */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0; /* Oculto inicialmente */
  transform: translateX(20px); /* Animación desde la derecha */
  animation: slideIn 1.5s forwards 0.5s; /* Animación */
}

/* Estilo del botón flotante */
.whatsapp-button {
  background-color: #25d366; /* Color de WhatsApp */
  color: white;
  border-radius: 50%; /* Botón circular */
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-decoration: none; /* Elimina subrayado */
  animation: bounce 1.5s infinite; /* Animación de salto */
}

/* Animación de salto */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Animación para el mensaje emergente */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Cambio de color al pasar el mouse */
.whatsapp-button:hover {
  background-color: #1da851;
}