/* Start custom CSS for bdevs-contact, class: .elementor-element-60f590b *//* 1. Contenedor y alineación */
.contact-section {
  margin-top: 20px;
  text-align: center;
  /* Añadimos un poco de espacio por si los botones se van a una segunda línea en móviles */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px; /* Espacio consistente entre botones */
}

/* 2. Estilo base común para TODOS los botones */
.call-button, .call-link-paragraph,
.whatsapp-button,
.email-button {
  /* --- Estructura y Alineación --- */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;

  /* --- Dimensiones y Espaciado --- */
  padding: 12px 24px;
  margin: 0; /* Eliminamos el margen individual para usar 'gap' en el contenedor */

  /* --- Tipografía --- */
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600; /* Un poco más de peso para legibilidad */
  color: #FFFFFF !important;
  
  /* --- Apariencia --- */
  border: 1px solid transparent;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra base más sutil */

  /* --- Animación --- */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. AJUSTE DE CONTRASTE para el botón de llamada */
.call-button, .call-link-paragraph {
  color: #1f2937 !important; /* Texto oscuro sobre fondo amarillo */
}

/* 4. Colores de fondo para navegadores sin soporte de Glassmorphism (Fallback) */
.call-button, .call-link-paragraph { background-color: #f59e0b; }
.whatsapp-button { background-color: #25D366; }
.email-button { background-color: #D44638; }

/* 5. Efecto :hover para navegadores SIN soporte (Fallback) */
.call-button:hover, .call-link-paragraph:hover { background-color: #fbbf24; }
.whatsapp-button:hover { background-color: #2bef71; }
.email-button:hover { background-color: #e05a4c; }

/* 6. MEJORA: Efecto Glassmorphism y Hovers personalizados */
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  
  /* --- Estilos base con Glassmorphism --- */
  .call-button, .call-link-paragraph {
    background: rgba(245, 158, 11, 0.55) !important; /* OPACIDAD AUMENTADA */
    border-color: rgba(245, 158, 11, 0.6); /* OPACIDAD AUMENTADA */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .whatsapp-button {
    background: rgba(37, 211, 102, 0.35) !important;
    border-color: rgba(37, 211, 102, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .email-button {
    background: rgba(212, 70, 56, 0.35) !important;
    border-color: rgba(212, 70, 56, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* --- Efectos :hover personalizados con "brillo" de su propio color --- */
  .call-button:hover, .call-link-paragraph:hover {
    background: rgba(245, 158, 11, 0.7) !important; /* OPACIDAD AUMENTADA */
    box-shadow: 0 0 20px 3px rgba(245, 158, 11, 0.5);
  }

  .whatsapp-button:hover {
    background: rgba(37, 211, 102, 0.55) !important;
    box-shadow: 0 0 20px 3px rgba(37, 211, 102, 0.5);
  }

  .email-button:hover {
    background: rgba(212, 70, 56, 0.55) !important;
    box-shadow: 0 0 20px 3px rgba(212, 70, 56, 0.5);
  }
}

/* 7. Efecto de "levantamiento" común para TODOS los botones al pasar el cursor */
.call-button:hover, .call-link-paragraph:hover,
.whatsapp-button:hover,
.email-button:hover {
  transform: translateY(-4px) scale(1.03); /* Un efecto un poco más notorio */
}

/* 8. Estilos para los íconos internos */
.phone-icon,
.whatsapp-icon,
.email-icon {
  fill: #FFFFFF;
  margin-right: 10px;
}

/* AJUSTE: Ícono oscuro para el botón de llamada */
.call-button .phone-icon, .call-link-paragraph .phone-icon {
  fill: #1f2937;
}

.phone-icon,
.email-icon {
  width: 18px;
  height: 18px;
}

.whatsapp-icon {
  width: 20px;
  height: 20px;
}/* End custom CSS */