/* ===== Footer ===== */
.footer {
  /* Usamos la variable --nav-bg para que coincida con el color del header */
  background: var(--nav-bg); 
  color: var(--text-color);
  padding: 40px 0 20px;
  text-align: center;
  border-top: 2px solid;
  border-image-source: var(--gradient-naranja-amarillo);
  border-image-slice: 1;
  transition: background-color 0.3s, color 0.3s;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.footer-left .logo {
  width: 120px;
  height: auto;
}



.footer-social {
  display: flex;
  gap: 20px;
}

.footer-social a {
  /*Iconos sociales naranja principal */
  color: var(--accent-color);
  font-size: 1.6rem;
  transition: all 0.3s ease;
}

.footer-social a:hover {
  /*Al pasar el cursor, verde*/
  color: var(--accent-green); 
  transform: scale(1.2);
  filter: drop-shadow(0 0 8px rgba(171, 225, 28, 0.4));
}

.footer-line {
  width: 80%;
  height: 1px;
  background: #222;
  margin: 25px auto;
  transition: background 0.3s;
}

/* Cuando estamos en modo claro, la línea debe ser gris suave */
body.light-mode .footer-line {
  background: #e0e0e0;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.footer-bottom nav a {
  color: var(--text-secondary); 
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.footer-bottom nav a:hover {  
  color: var(--accent-yellow-light);
}

.footer-bottom p {
  font-size: 0.9rem;
  color: var(--text-secondary); 
  margin-top: 10px;
  opacity: 0.8; 
}

/* Responsive */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
  }

  .footer-bottom nav {
    flex-direction: column;
    gap: 8px;
  }
}


/* ASISTENTE FLOTANTE DCNET*/


/*Animación de Pulso  */
@keyframes pulso-dcnet-v2 {
  0% {
    box-shadow: 0 8px 25px rgba(0,0,0,0.5), 0 0 0 0 rgba(234, 88, 12, 0.7);
  }
  70% {
    box-shadow: 0 8px 25px rgba(0,0,0,0.5), 0 0 0 15px rgba(234, 88, 12, 0);
  }
  100% {
    box-shadow: 0 8px 25px rgba(0,0,0,0.5), 0 0 0 0 rgba(234, 88, 12, 0);
  }
}

/*Contenedor Principal */
.dcnet-wsp-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    gap: 12px;
}

/* La Burbuja de Texto */
.dcnet-wsp-bubble {
    background-color: #ffffff;
    color: #1a1a1a;
    padding: 12px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700; /* Más bold para modernidad */
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    position: relative;
    white-space: nowrap;
    
    /* PROPIEDADES PARA EL EFECTO DE APARICIÓN */
    opacity: 0; 
    visibility: hidden; 
    transform: translateX(20px);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); 
}

body.light-mode .dcnet-wsp-bubble {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* El pequeño triángulo */
.dcnet-wsp-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 25px;
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ffffff;
}

body.light-mode .dcnet-wsp-bubble::after {
    border-top: 8px solid #1a1a1a;
}

/* 4. Mostrar burbuja al pasar mouse */
.dcnet-wsp-container:hover .dcnet-wsp-bubble {
    opacity: 1; 
    visibility: visible; 
    transform: translateX(0); 
}

/* 5. El Botón Principal (Circular Naranja Dinámico) */
.dcnet-wsp-button {
    width: 64px;
    height: 64px;
    /* CAMBIO (Fusión Dinámica): En estado normal, gradiente cálido/naranja */
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-yellow-dark) 100%);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    
    /* Animación pulso color base */
    animation: pulso-dcnet-v2 2.5s infinite ease-in-out;
    transition: all 0.3s ease;
}

.dcnet-wsp-button:hover {
    /* CAMBIO (Fusión Dinámica): Al hacer hover, activa el gradiente verde tecnológico que pega perfecto con WhatsApp */
    background: linear-gradient(135deg, var(--accent-yellow-light) 0%, var(--accent-green) 100%);
    color: #000000;
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(171, 225, 28, 0.4);
    
    /* Detenemos el pulso naranja al hacer hover para no mezclar colores visualmente */
    animation: none;
}

/* Responsive */
@media (max-width: 768px) {
    .dcnet-wsp-bubble { display: none !important; }
    .dcnet-wsp-container { bottom: 20px; right: 20px; }
    .dcnet-wsp-button { width: 54px; height: 54px; font-size: 30px; }
}