:root {
  --color1: #a8d5ba;
  --color2: #b8d8f8;
  --color3: #f5ebdc;
  --color4: #7fb8a4;
  --color5: #ffffff;
}

body {
  font-family: 'Poppins', sans-serif;
}

.titulo-tarjeta {
  @apply text-center text-2xl md:text-3xl font-bold uppercase tracking-wide text-white inline-block px-6 py-3 rounded-full shadow-lg transition-transform duration-300 bg-gradient-to-r from-[var(--color4)] to-[var(--color2)] hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-[var(--color4)] focus:ring-opacity-50;
}

.titulo-tarjeta:hover {
  background-color: #93c5fd;
  color: #1e3a8a;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.boton-whatsapp {
  display: inline-block;
  margin-top: 1rem;
  background-image: linear-gradient(to right, var(--color1), var(--color2), var(--color3));
  color: #1f2937;
  font-weight: bold;
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  font-size: 1.125rem;
  text-align: center;
  transition: all 0.3s ease;
}

.boton-whatsapp:hover {
  background-image: linear-gradient(to right, var(--color4), var(--color2));
  transform: scale(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.boton-whatsapp:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(168, 213, 186, 0.5);
}

.tarjeta-postre {
  background-color: var(--color3);
  border-radius: 1rem;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.imagen-postre {
  width: 18rem;
  height: 18rem;
  object-fit: cover;
  margin: 0 auto 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.imagen-postre:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}

.text-2xl font-bold mb-8 {
	top:50px;
}