@charset "utf-8";
/* CSS Document */
.social-bar {
    background-color: hsla(227, 25%, 60%, 0.315);
    padding: 10px;
    border-radius: 10px;
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 15px; /* Espacio entre iconos */
    flex-wrap: wrap;
    width: max-content;
}

.social-icon {
    font-size: 28px;
    color: white;
    text-decoration: none;
    transition: transform 0.3s, color 0.3s;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.social-icon:hover {
    transform: scale(1.2); /* Se agranda al pasar el mouse */
}

/* Colores originales de cada red */
.fa-facebook:hover { color: #1877F2; }
.fa-facebook-messenger:hover { color: #0084FF; }
.fa-instagram:hover { color: #E4405F; }
.fa-tiktok:hover { color: #00f2ea; }
.fa-google-play:hover { color: #db0000; }
.fa-youtube:hover { color: #FF0000; }
.fa-whatsapp:hover { color: #25D366; }



.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  font-size: 20px;
  color: #302e2e;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;  /*  Ocultar inicialmente */
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0); /* Desplazar todo el texto a la izquierda */
  }
}