/* ---------------------- FONDO Y TEXTO ---------------------- */
body {
  font-family: 'Poppins', sans-serif;
  background-image: url('../img/fondo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  text-align: center;
  padding: 50px;
}

.logo {
  width: 150px;
  margin-bottom: 20px;
}

h1 {
  font-family: 'Bebas Neue', sans-serif;
  margin-bottom: 10px;
  animation: fadeInUp 1s ease forwards;
}

p {
  font-size: 18px;
  margin-bottom: 40px;
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

/* ---------------------- ANIMACIONES ---------------------- */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------------------- CARRUSEL ---------------------- */
.carousel-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 50px auto;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 0 25px #00000055;
}

.carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-track img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0;
  transform: scale(0.8);
  animation: zoomIn 0.8s ease forwards;
}

.carousel-track img:nth-child(1) { animation-delay: 0.2s; }
.carousel-track img:nth-child(2) { animation-delay: 0.4s; }
.carousel-track img:nth-child(3) { animation-delay: 0.6s; }

/* BOTONES DEL CARRUSEL */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #00000088;
  color: white;
  border: none;
  padding: 15px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 20px;
  transition: background 0.3s;
  z-index: 10;
}

.carousel-btn:hover { background: #000000cc; }

.btn-left { left: 10px; }
.btn-right { right: 10px; }

/* ---------------------- BOTONES REDES SOCIALES ---------------------- */
a {
  display: block;
  width: 300px;
  margin: 15px auto;
  padding: 10px 16px;
  border-radius: 12px;
  color: white;
  text-decoration: none;
  font-family: 'Russo One', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 10px #000000;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

a:nth-of-type(1) { animation-delay: 0.5s; }
a:nth-of-type(2) { animation-delay: 0.7s; }
a:nth-of-type(3) { animation-delay: 0.9s; }
a:nth-of-type(4) { animation-delay: 1.1s; }

a:hover {
  filter: brightness(1.2);
  transform: translateY(-3px);
  box-shadow: 0 0 20px #000000;
}

/* Estilos individuales tipo Fortnite */
.btn-twitch { background: linear-gradient(45deg, #000000, #392e5c); }
.btn-instagram { background: linear-gradient(45deg, #000000, #392e5c); }
.btn-x { background: linear-gradient(45deg, #000000, #392e5c); }
.btn-whatsapp {background: linear-gradient(45deg, #000000, #392e5c); }
.btn-discord { background: linear-gradient(45deg, #000000, #392e5c); }
.btn-tiktok { background: linear-gradient(45deg, #000000, #392e5c); }
.btn-wishlist { background: linear-gradient(45deg, #000000, #392e5c); }

.logo-bottom-left {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 120px;      /* Ajusta el tamaño a tu gusto */
  opacity: 0.9;      /* Para que no tape contenido */
  z-index: 999;      /* Para que siempre esté arriba */
}

.logo-bottom-left:hover {
  opacity: 1;
  transform: scale(1.05);
  transition: 0.2s; }

  /* ---------------------- TEXTO NEON (PARRAFO) ---------------------- */
p {
  color: #ffffff;
  text-shadow:
    -1px -1px 0 #777777,
     1px -1px 0 #777777,
    -1px  1px 0 #777777,
     1px  1px 0 #777777,
     0 0 8px #777777,
     0 0 16px #777777,
     0 0 32px #777777;
}

/* ---------------------- CONTORNO NEON LOGO PRINCIPAL ---------------------- */
.logo {
  border-radius: 15px; /* ajusta según la forma del logo */
  padding: 8px;        /* espacio para que se vea el contorno */
  box-shadow:
    0 0 10px #D6C6Ff,
    0 0 20px #D6C6Ff,
    0 0 40px #D6C6Ff;
}

h1 {
  color: #ffffff; /* texto blanco */
  text-shadow:
    -1px -1px 0 #000000,
     1px -1px 0 #000000,
    -1px  1px 0 #000000,
     1px  1px 0 #000000,
     0 0 8px #000000,
     0 0 16px #000000,
     0 0 32px #000000;
}