i {
    color: #ED6434 ;
  }
 
 .carousel-control-prev-icon, .carousel-control-next-icon {
    filter: invert(108%);
  }

  i:hover {
    color: #263067;
  }
.whatsapp {
    position: fixed;
    right: 5px;
    bottom: 5px;
    z-index: 10;
    width: 55px;
  }

  @media (min-width: 600px) {
    .con {
      max-width: 480px;
      box-shadow: 0px 0px 20px 0px rgba(20, 20, 20, 0.3);
    }
    .whatsapp {
      position: fixed;
      right: 789px;
      bottom: 5px;
      z-index: 10;
      width: 55px;
    }
    body {
      background: url("/assets/FONDO.jpg");
      background-size: cover;
      width: 50%;
      
    }
  }
.transparent-navbar {
  background-color: transparent !important;
  box-shadow: none;
}

/* ===== Nuevo Botón Hamburguesa Animado ===== */
.custom-toggler {
  border: none;
  background-color: transparent;
  padding: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.custom-toggler:hover {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.custom-toggler .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: #ff8325; /* Color azul de tu marca */
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}

/* Animación a 'X' cuando el menú se expande */
.custom-toggler[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.custom-toggler[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}

.custom-toggler[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


.navbar-nav .nav-link {
  color: #263067;
  font-weight: 500;

}
.navbar-collapse {
  padding: 0px 11px; 
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* ===== Botón Flotante de WhatsApp ===== */
.whatsapp-flotante {
  position: fixed;
  width: auto;
  height: auto;
  bottom: 25px;
  right: 25px;
  background-color: #25d366; /* Color verde de WhatsApp */
  color: #fff;
  border-radius: 50px;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 10px; /* Espacio entre el ícono y el texto */
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  z-index: 1000;
  transition: transform 0.2s ease-in-out;
}
/* ===== Botón Flotante de WhatsApp ===== */
.whatsapp-flotante {
  position: fixed;
  width: auto;
  height: auto;
  bottom: 25px;
  right: 25px;
  background-color: #25d366; /* Color verde de WhatsApp */
  color: #fff;
  border-radius: 50px;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 10px; /* Espacio entre el ícono y el texto */
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  z-index: 1000;
  transition: transform 0.2s ease-in-out;
}

.whatsapp-flotante:hover {
  transform: scale(1.05); /* Agranda un poco el botón al pasar el mouse */
}

.whatsapp-icono {
  width: 24px;
  height: 24px;
  fill: white; /* Pinta el ícono SVG de blanco */
}

/* ===== Animación para el emoji de la mano 👋 ===== */
@keyframes wave-animation {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(14deg);
  } /* Mueve la mano hacia arriba */
  20% {
    transform: rotate(-8deg);
  } /* Mueve la mano hacia abajo */
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(0deg);
  } /* Vuelve a la posición original */
  100% {
    transform: rotate(0deg);
  }
}

.whatsapp-flotante span {
  display: flex; /* Para poder alinear el texto y el emoji */
  align-items: center;
  gap: 5px; /* Espacio entre ¡Hola! y el emoji */
}

/* Aplica la animación al emoji dentro del botón */
.whatsapp-flotante span .emoji-wave {
  display: inline-block; /* Necesario para que la transformación funcione */
  animation: wave-animation 2.5s infinite; /* Aplica la animación, dura 2.5s y se repite infinitamente */
  transform-origin: 70% 70%; /* El punto desde donde rota el emoji */
}


/* ===== Sección de Promociones y Redes Sociales (Animación Aurora) ===== */
.social-promo-section {
  background-color: #f8f9fa;
  padding: 1rem 1rem;
  text-align: center;
  padding-bottom: 0rem;
}

.social-promo-section h4 {
  font-weight: bold;
  color: #263067;
  font-family: sans-serif;
  margin-bottom: 0rem;
}

.social-promo-section p {
  color: #6c757d;
  font-family: sans-serif;
  margin-bottom: 0rem;
}

.social-promo-section .social-icons {
  display: flex;
  justify-content: center;
  gap: 25px;
}

.social-promo-section .social-icon-link {
  text-decoration: none;
  font-size: 2.8rem;
  display: inline-block;
  position: relative; /* Clave para el efecto */
  
  /* Hacemos el color del ícono transparente para revelar el fondo */
  color: transparent;
  
  /* Creamos el fondo con un gradiente de tus colores */
  background: linear-gradient(90deg, #263067, #ED6434, #263067);
  background-size: 200% 100%; /* El doble de ancho para poder moverlo */
  
  /* La magia: recortamos el fondo para que solo se vea en el texto/ícono */
  -webkit-background-clip: text;
  background-clip: text;

  /* Aplicamos la animación de barrido */
  animation: aurora-sweep 4s linear infinite;
}

/* Detenemos la animación continua en pantallas grandes y activamos la de hover */
@media (min-width: 768px) {
  .social-promo-section .social-icon-link {
    animation: none; /* Desactivamos el barrido en escritorio */
    background-position: 0% 50%; /* Posición inicial del gradiente */
    transition: background-position 0.6s ease-in-out, transform 0.4s ease;
  }

  .social-promo-section .social-icon-link:hover {
    background-position: 100% 50%; /* Movemos el gradiente al pasar el mouse */
    transform: rotateY(360deg); /* Añadimos un giro 3D como bonus */
  }
}

/* Definición de la animación de barrido de color */
@keyframes aurora-sweep {
  0% {
    background-position: 200% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}