/*Son margenes basicos*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*el font family es para la fuente de las letras, la cual esta sacada de google con un link
en el html.  el background es para el fondo negro con degrade en gris marron.
luego una alineacion de texto y un cursor personalizado*/
body {
  font-family: 'Press Start 2P', cursive;
  background: linear-gradient(135deg, #000000, #1b062c);
  text-align: center;
  cursor: url('Imgs/cursor32.png') 0 0, auto ;
}

/*display flex y justify content para mantener distancia
entre los elementos, y gap para la distancia minima de estos*/
.navbar .nav-list {
  display: flex;
  justify-content: center;
  gap: 40px;
}

/*sacar el puntito de lista.*/
.nav-list li {
  list-style: none;
}

/*color de texto del nav, sacar los reenglones y una transicion de color en el hover*/
.nav-list li a {
  color: #ffff00;
  text-decoration: none;
  transition: 0.5s;
}

/*cambio de color y sombra de color linda en la transicion (hover)*/
.navbar .nav-list li a:hover {
  color: cyan;
  text-shadow: 0 0 10px #00ffff;
}

/*color del heather, espacio para este y una sombra retro */
.header {
  background-color: #ff00ff;
  padding: 20px 0;
  box-shadow: 0 0 20px #ff00ff;
}

/*distancia del main con el heather y nav */
.main-content {
  padding: 5 px;
}

/*contenedor acomodado con display flex, con espacio entre texto e imagen */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
}

/*titulo principal con animacion neon, sombra fuerte y tamaño grande pixelado*/
.title-flicker {
  text-align: center;
  font-size: 34px;
  color: #fbff06;
  margin-bottom: 20px;
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
  animation: neon 2s ease-in-out infinite alternate;
}

/*contenedor central del hero que agrupa la imagen y el texto:
usa flex horizontal, limita el ancho total y separa con gap */
.hero-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 1200px;
}

/*columna izquierda del hero: ocupa el 65%, acomoda los elementos
como imagen y slogan en columna centrada */
.hero-left {
  flex: 0 0 65%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*imagen principal de pelea o escena arcade: ocupa todo el ancho disponible,
borde celeste retro, sombra animada con efecto pulsante */
.hero-fight {
  width: 100%;
  height: auto;
  border: 4px solid #00ffff;
  box-shadow: 0 0 15px #00ffff;
  animation: pulse 2s infinite;
}

/*slogan de la pagina: color rosa retro, padding,
sombra neon y animacion igual que el titulo*/
.slogan {
  margin-top: 15px;
  font-size: 20px;
  color: #ff9cff;
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
  animation: neon 2s ease-in-out infinite alternate;
}

/*columna derecha del hero: ocupa 35% del espacio, acomoda en columna
al centro el contenido (como una imagen o sección extra) */
.hero-right {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*imagen de la derecha del hero (puede ser una consola, personaje, etc):
tamaño adaptable, borde celeste con sombra neon y animación de pulso retro */
.hero-img {
  width: 100%;
  height: auto;
  border: 4px solid #00ffff;
  box-shadow: 0 0 15px #00ffff;
  animation: pulse 2s infinite;
}

/*Estilo para la seccion de contacto:
fondo violeta oscuro, borde magenta, sombra retro y borde redondeado */
.contact-info {
  margin-top: 40px;
  padding: 20px;
  background-color: #1a001f;
  border: 2px solid #ff00ff;
  border-radius: 12px;
  box-shadow: 0 0 20px #ff00ff;
}

/*titulo de la seccion de contacto: color amarillo, sombra magenta,
espacio inferior y tamaño de fuente clasico pixel*/
.contact-info h2 {
  color: #ffff00;
  margin-bottom: 20px;
  font-size: 20px;
  text-shadow: 0 0 10px #ff00ff;
}

/*info de contacto dentro del address: texto celeste,
espaciado entre lineas, tamaño chico, sombra celeste linda*/
.contact-info address p {
  color: #00ffff;
  font-size: 14px;
  margin: 10px 0;
  text-shadow: 0 0 5px #00ffff;
}

/*enlaces de contacto: color rosa claro, sin subrayado y con transicion;
hover cambia a cian con sombra celeste*/
.contact-info a {
  color: #ff9cff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-info a:hover {
  color: cyan;
  text-shadow: 0 0 10px #00ffff;
}

/*caja para mostrar el mapa: fondo violeta oscuro, borde redondeado,
ancho justo al contenido y sombra magenta pixelosa */
.mapa {
  margin: 40px auto;
  padding: 20px;
  background-color: #110022;
  border-radius: 12px;
  width: fit-content;
  box-shadow: 0 0 20px #ff00ff;
}

/*titulo del mapa: color amarillo con sombra magenta*/
.mapa h3 {
  color: #ffff00;
  margin-bottom: 15px;
  text-shadow: 0 0 10px #ff00ff;
}

/*estilo del iframe que muestra el mapa real:
borde celeste, sombra neon celeste, bordes redondeados*/
.mapa iframe {
  border: 3px solid #00ffff;
  box-shadow: 0 0 15px #00ffff;
  border-radius: 8px;
}

/*titulo principal con animacion neon, sombra fuerte y tamaño grande pixelado*/
.title-flicker {
  color: #fbff06;
  margin-top: 40px;
  font-size: 34px;
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
  animation: neon 2s ease-in-out infinite alternate;
}

/*slogan de la pagina: color rosa retro, padding,
sombra neon y animacion igual que el titulo*/
.slogan {
  color: #ff9cff;
  padding: 10px;
  font-size: 20px;
  text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
  animation: neon 2s ease-in-out infinite alternate;
}

/*texto decorativo: color celeste, tamaño mas chico,
padding y sombra azul violeta neon */
.glow-text {
  color: #40c9ff;
  padding: 10px;
  font-size: 15px;
  text-shadow: 0 0 5px #3b38ff, 0 0 10px #110f97, 0 0 20px #110f97;
}

/* Sección Nosotros */
.nosotros {
  margin: 60px auto;
  padding: 30px;
  width: 90%;
  max-width: 1200px;
  background-color: #1a001f;
  border: 3px solid #ff00ff;
  border-radius: 12px;
  box-shadow: 0 0 25px #ff00ff;
}

.nosotros-title {
  color: #ffff00;
  font-size: 24px;
  margin-bottom: 30px;
  text-shadow: 0 0 10px #ff00ff;
  animation: neon 2s ease-in-out infinite alternate;
}

/* Grid responsivo retro */
.nosotros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  justify-items: center;
}

/* Box de cada integrante */
.miembro {
  background-color: #110022;
  border: 2px solid #00ffff;
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 260px;
  box-shadow: 0 0 15px #00ffff;
  text-align: center;
}

/* Imagen retro */
.miembro-img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border: 3px solid #ff00ff;
  border-radius: 10px;
  box-shadow: 0 0 20px #ff00ff;
  margin-bottom: 15px;
}

/* Texto de la biografía */
.miembro-text {
  color: #ff9cff;
  font-size: 12px;
  line-height: 1.6;
  text-shadow: 0 0 7px #ff00ff;
}



/* fondo oscuro sin degrade, color de fuente, padding, tamaño de fuente
borde superior y borde shadow general*/
.footer {
  background-color: #000000;
  color: #00ffff;
  padding: 20px 0;
  font-size: 10px;
  border-top: 2px solid #ff00ff;
  box-shadow: 0 -2px 10px #ff00ff;
}

/*animacion de pulso usada en la imagen principal:
la sombra crece y vuelve en loop*/
@keyframes pulse {
  0% {box-shadow: 0 0 10px #00ffff;}
  50% {box-shadow: 0 0 30px #00ffff;}
  100% {box-shadow: 0 0 10px #00ffff;}
}

/*la sombra neon usada en textos como titulo y slogan,
la intensidad cambia lentamente en loop*/
@keyframes neon {
  from {
    text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
  }
  to {
    text-shadow: 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff;
  }
}