/*---  footer.css  ---*/

/* ============================================= */
/* FOOTER - Estilos principales del pie de página */
/* ============================================= */

footer {
  background-color: #585858; /* Color de fondo gris oscuro */
  color: white; /* Color de texto blanco */
  position: fixed; /* Posicionamiento fijo en la parte inferior */
  bottom: 0; /* Alineado al fondo de la ventana */
  left: 0; /* Alineado a la izquierda */
  width: 100%; /* Ancho completo */
  z-index: 1000; /* Asegura que esté por encima de otros elementos */
  font-size: 1.0em; /* Tamaño de fuente reducido */
  transition: transform 0.3s ease-in-out; /* Transición suave para animaciones */
}

/* ============================================= */
/* ESTADO OCULTO - Para esconder el footer       */
/* ============================================= */

footer.hidden {
  transform: translateY(100%); /* Mueve el footer completamente hacia abajo */
}

/* ============================================= */
/* CONTENEDOR PRINCIPAL - Organización interna   */
/* ============================================= */

.footer-container {
  display: flex; /* Activa el modelo de caja flexible */
  justify-content: space-between; /* Distribuye el espacio entre elementos */
  align-items: center; /* Centra verticalmente los elementos */
  flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
  padding: 10px 50px 5px 50px; /* Relleno interno */
}

/* ============================================= */
/* REDES SOCIALES - Estilos para los iconos      */
/* ============================================= */

.footer-social a {
  color: #fff; /* Color blanco para los iconos */
  margin-right: 15px; /* Espacio entre iconos */
  font-size: 15px; /* Tamaño ligeramente mayor para los iconos */
  text-decoration: none; /* Elimina subrayado de enlaces */
  transition: color 0.3s ease; /* Transición suave para efecto hover */
}

/* Efecto hover para iconos de redes sociales */
.footer-social a:hover {
  color: #ccc; /* Color gris claro al pasar el mouse */
}

/* ============================================= */
/* ENLACES - Menú de navegación del footer       */
/* ============================================= */

.footer-links {
  list-style: none; /* Elimina los estilos de lista por defecto */
  display: flex; /* Muestra los elementos en línea */
  gap: 50px; /* Espacio entre elementos */
  margin: 0; /* Elimina márgenes por defecto */
  padding: 0; /* Elimina relleno por defecto */
}

.footer-links li a {
  color: #fff; /* Color blanco para los enlaces */
  text-decoration: none; /* Elimina subrayado */
  font-size: 11px; /* Tamaño de fuente reducido */
  transition: color 0.3s ease; /* Transición suave para efecto hover */
}

/* Efecto hover para enlaces */
.footer-links li a:hover {
  color: #ccc; /* Color gris claro al pasar el mouse */
}

/* ============================================= */
/* COPYRIGHT - Franja inferior de derechos       */
/* ============================================= */

.footer-copyright {
  background-color: #4d4d4d; /* Color de fondo ligeramente más oscuro */
  text-align: center; /* Texto centrado */
  padding: 5px 0px; /* Relleno interno */
  
}

/* Elimina margen por defecto del párrafo */
.footer-copyright p {
  margin: 0;
  font-size: 11px; /* Tamaño de fuente más pequeño */
  /*font-size: 2.29vw;*/
}

/* ============================================= */
/* MEDIA QUERIES - Ajustes para móviles          */
/* ============================================= */

@media (max-width: 768px) {

  footer {
    transform: translateY(100%); /* oculta visualmente */
    pointer-events: none; /* evita clics */
  }

  /* Cambia la dirección del contenedor a columna 600 px inicialmente*/
  .footer-container {
    flex-direction: column; /* Apila elementos verticalmente */
    align-items: center; /* Centra horizontalmente */
    gap: 1px; /* Espacio entre elementos */
  }

  /* Ajustes para los enlaces en móvil */
  .footer-links {
    flex-direction: column; /* Apila enlaces verticalmente */
    align-items: center; /* Centra horizontalmente */
    gap: 1px; /* Reduce el espacio entre elementos */
  }
}

/* ============================================= */
/* ESTILO PARA WHATSAPP EN LA PÁGINA             */
/* ============================================= */

#whatsapp-container {
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.3s ease;
}
#whatsapp-container:hover {
  transform: scale(1.08);
}
#whatsapp-container.scroll-transparente {
  opacity: 0.35;           /* ajusta: 0.2 más tenue, 0.5 más visible */
  pointer-events: auto;   /* sigue siendo clickeable */
}

#whatsapp-message {
  background: #585858;
  color: #fff;
  padding: 8px 12px;
  border-radius: 16px;
  margin-bottom: 8px;
  font-size: 20px;
  box-shadow: 0 20px 60px rgba(5, 33, 246, 0.2);
}

#whatsapp-float {
  width: 100px;
  height: 100px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 60px rgba(235, 9, 9, 0.25);
  transition: transform 0.3s ease;
}

#whatsapp-float img {
  width: 100px;   /* aquí controlas el tamaño REAL del ícono */
  height: 100px;
  display: block;
  filter: invert(1);
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}