/* Estilo del fondo de la página */
body {
  background-image: url('../media/FondoBarca.jpg');
  background-size: cover;       /* Ajusta la imagen para cubrir toda la pantalla */
  background-position: center;  /* Centra la imagen */
  height: 100vh;                /* Asegura que el fondo cubra toda la altura */
  margin: 0;                    /* Elimina márgenes por defecto */
}

main {
    display: flex;  /* Usamos flexbox para centrar el contenido */
    flex-direction: column; /* Alinea los elementos en columna */
    align-items: center; /* Centra horizontalmente */
}

/* Estilo general del menú */
.menu {
  background-color: #A50044; /* Color granate del Barça */
  /*background-color: #004D98; Este es el azul en caso de no convencerme*/
  padding: 10px;
  text-align: center;
}

/* Lista horizontal */
.menu ul {
  list-style: none; /* Elimina los puntos de la lista */
  margin: 0;
  padding: 0; 
  display: flex; /* Usamos flexbox para alinear los botones horizontalmente */
  justify-content: space-around; /* Espacio uniforme entre los botones */
  flex-wrap: wrap; /* Permite que los botones se ajusten en pantallas pequeñas */
}

/* Botones */
.menu li {
  margin: 10px; 
}

/* Decoracion de los botones */
.menu a {
  text-decoration: none; /* Elimina el subrayado */
  color: white; 
  background-color: #004D98; /* Azul Barça */
  padding: 10px 20px; /* Espacio interno */
  border-radius: 5px; /* Bordes redondeados */
  font-weight: bold; /* Hace que el texto del botón sea más visible */
  transition: all 0.s ease; /* Transición suave para hover */
}
.menu a.imhere {
  position: relative; /* Posicionamiento relativo para el pseudo-elemento */
  color: #FFD700; /* Dorado */
}
.menu a:hover {
  background-color: #FFD700; /* Dorado al pasar el ratón */
  color: #000; 
  border-radius: 5px; /* Mantiene los bordes redondeados */
}

/* Responsivo: cambia tamaño y posición en pantallas pequeñas */
@media (max-width: 600px) {
  .menu ul {
    flex-direction: column; /* Cambia a columna */
  }
  
  .menu a {
    width: 80%; /* Botones más anchos */
    font-size: 18px; /* Aumenta el tamaño de la fuente */
  }
}

/* Estilo del contenido principal */
.historia {
  max-width: 1500px; /* Ancho máximo */
  margin: 40px auto; /* Centrado horizontal */
  display: grid; /* Usamos grid para organizar los artículos */
 grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
  gap: 30px; /* Espacio entre los artículos */
}

.historia article {
  background-color: rgba(0, 77, 152, 0.7); /* Azul con transparencia */
  padding: 20px; /* Espacio interno */
  border-radius: 10px; /* Bordes redondeados */
  color: white;   /* Color del texto */
  text-align: center;  /* Centra el texto dentro del artículo */
}

.historia img {
  width: 100%; /* La imagen ocupa todo el ancho del artículo */
  border-radius: 8px; /* Bordes redondeados */
  margin-top: 10px; /* Espacio superior */
}

h1 {
  display: inline-block;        /* El recuadro se ajusta al contenido */
  background: linear-gradient(90deg, #A50044, #004D98); /* Azulgrana */
  color: white;
  font-size: 3em;
  font-family: 'Segoe UI', sans-serif;
  padding: 10px 20px;           /* Espacio alrededor del texto */
  border-radius: 8px;           /* Bordes redondeados */
  text-shadow: 2px 2px 4px #000;
  animation: aparecer 1s ease-in-out; /* Animación de aparición */
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.CampNouModerno{
  max-width: 1500px;
  margin: 40px auto;
  display: grid;
 grid-template-columns: repeat(2, 2fr); /* 2 columnas iguales */
  gap: 30px;
}
.CampNouModerno article{
 background-color: rgba(0, 77, 152, 0.7);
  padding: 20px;
  border-radius: 10px;
  color: white;
  text-align: center;
}

.CampNouModerno img {
  width: 100%;
  border-radius: 8px;
  margin-top: 10px;
}


footer {
  background-color: #A50044;
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 0.9em;
}

footer a {
  color: #FFD700;
  font-weight: bold; /* Hace que el enlace sea más visible */
  margin: 0 5px;
}

footer a:hover {
  text-decoration: underline;   /* Subraya el enlace al pasar el ratón */
  color: white; /* Cambia el color al pasar el ratón */
}

footer i {
  margin-right: 5px; /* Espacio entre el icono y el texto */
}