/* =========================
   PALETA INSTITUCIONAL
   ========================= */
:root {
  --color-principal: #8d2a87;   /* Morado principal */
  --color-secundario: #57beeb;  /* Azul claro */
  --color-fondo: #c3bab5;       /* Gris neutro */
}

/* =========================
   ENCABEZADO Y MENÚ
   ========================= */
#mainNav {
  background-color: var(--color-principal) !important;
}

#mainNav .nav-link {
  color: #fff !important;
}

#mainNav .nav-link:hover,
#mainNav .nav-link.active {
  color: var(--color-secundario) !important;
}

/* =========================
   BOTONES
   ========================= */
.btn-primary {
  background-color: var(--color-principal) !important;
  border-color: var(--color-principal) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-secundario) !important;
  border-color: var(--color-secundario) !important;
}

/* =========================
   ENCABEZADOS Y TEXTOS
   ========================= */
.section-heading {
  color: var(--color-principal) !important;
}

.section-subheading {
  color: var(--color-secundario) !important;
}

/* =========================
   SECCIONES ALTERNAS
   ========================= */
.page-section.bg-light {
  background-color: var(--color-fondo) !important;
}

/* =========================
   ÍCONOS DE SERVICIOS
   ========================= */
.text-primary {
  color: var(--color-principal) !important;
}

/* =========================
   ENLACES
   ========================= */
a {
  color: var(--color-principal);
  text-decoration: none;
}

a:hover {
  color: var(--color-secundario);
}

/* =========================
   CORRECCIÓN FINAL DE COLORES
   ========================= */

/* Botón del formulario de contacto */
#contactForm button[type="submit"],
.btn-xl {
  background-color: var(--color-principal) !important;
  border-color: var(--color-principal) !important;
}

#contactForm button[type="submit"]:hover,
.btn-xl:hover {
  background-color: var(--color-secundario) !important;
  border-color: var(--color-secundario) !important;
}

#contactForm2 button[type="submit"]:hover,
.btn-xl:hover {
  background-color: var(--color-secundario) !important;
  border-color: var(--color-secundario) !important;
}

/* Hover del menú de navegación */
#mainNav.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--color-secundario) !important;
}

/* Cuando el menú está activo (scroll o sección visible) */
#mainNav.navbar-shrink {
  background-color: var(--color-principal) !important;
}

#mainNav.navbar-shrink .navbar-nav .nav-link.active {
  color: var(--color-secundario) !important;
}

/* Ícono de hamburguesa (menú móvil) */
.navbar-toggler {
  background-color: var(--color-secundario) !important;
  border-color: var(--color-secundario) !important;
}

.navbar-toggler:hover {
  background-color: var(--color-principal) !important;
  border-color: var(--color-principal) !important;
}

.masthead {
  background-image: url("../assets/img/imagen2.png") !important;
}




/* =========================
   BOTÓN FLOTANTE DE WHATSAPP (AJUSTADO)
   ========================= */
.whatsapp-float {
  position: fixed;
  width: 60px;             /* tamaño del círculo */
  height: 60px;
  bottom: 25px;
  right: 25px;
  background-color: #25d366; /* verde oficial de WhatsApp */
  color: white;
  border-radius: 50%;
  display: flex;            /* centra el ícono fácilmente */
  align-items: center;
  justify-content: center;
  font-size: 34px;          /* tamaño del ícono */
  box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: all 0.3s ease-in-out;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  background-color: #1ebe5b;
  text-decoration: none;
  color: #fff;
}