/* 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 */
  
}

/* 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; /* Elimina márgenes por defecto */
  padding: 0; /* Elimina el padding por defecto */
  display: flex; /* Usa flexbox para la disposición */
  justify-content: space-around; /* Espacio uniforme entre los elementos */
  flex-wrap: wrap; /* Permite que los elementos se envuelvan 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 */
h1 {
  display: block; /* Asegura que el h1 se comporte como un bloque */
  width: fit-content;           /* El ancho se adapta al texto */
  margin: 40px auto;            /* Centrado horizontal */
  background: linear-gradient(90deg, #A50044, #004D98); /* De color granate a azul */
  color: white;
  font-size: 3em;
  font-family: 'Segoe UI', sans-serif; 
  padding: 10px 20px;  /* Espacio interno */
  border-radius: 8px; /* Bordes redondeados */
  text-shadow: 2px 2px 4px #000; /* Sombra para mejorar legibilidad */
  animation: aparecer 2s ease-in-out; /* Animación de aparición */
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.calendario {
  width: 100%;
  border-collapse: collapse; /* Elimina espacios entre celdas */
  max-width: 95%; /* Ancho máximo */
  margin: 40px auto;
}

.calendario td {
  background-color: rgba(165, 0, 68, 0.9); /* Granate Barça */
  color: white;
  text-align: center;
  padding: 15px;
  border: 2px solid #FFD700; /* Dorado navideño */
  border-radius: 10px;
  transition: transform 0.3s;
}

.calendario td:hover {
  transform: scale(1.40); /* Efecto de zoom al pasar el ratón */
  background-color: #004D98; /* Azul Barça */
}

.calendario h2 {
  margin: 0;
  font-size: 1.5em; /* Tamaño del número del día */
}
.calendario h2:hover {
  margin: 0;
  font-size: 2.5em; /* Tamaño del número del día */
  color: #FFD700; /* Cambia el color al pasar el ratón */
}

.calendario img {
  width: 100%;
  border-radius: 8px;
  margin-top: 10px;
/*display: none;  Oculto por defecto */
}

/* Mostrar la imagen al pasar el ratón */
.calendario td:hover img {
  display: block;
}


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 */
}