body {
    background-image: url('../media/FondoBarca.jpg');
    /* Imagen de fondo */
    background-size: cover;
    /* La imagen cubre toda la pantalla */
    background-position: center;
    /* Centrada */
    margin: 0;
    /* Quitamos márgenes por defecto */
}

.menu {
    background-color: #A50044;
    /* Granate del Barça */
    padding: 10px;
    /* Espaciado interno */
    text-align: center;
    /* Centra el contenido */
}

.menu ul {
    list-style: none;
    /* Quita los puntos de lista */
    display: flex;
    /* Coloca los elementos en fila */
    justify-content: space-around;
    /* Espacio uniforme entre botones */
    flex-wrap: wrap;
    /* Permite que bajen si no caben */
    padding: 0;
    /* Quita padding por defecto */
}

.menu a {
    text-decoration: none;
    /* Quita subrayado */
    color: white;
    /* Texto blanco */
    background-color: #004D98;
    /* Azul Barça */
    padding: 10px 20px;
    /* Espaciado interno */
    border-radius: 5px;
    /* Bordes redondeados */
    font-weight: bold;
    /* Texto más visible */
}

/* Botón que indica en qué página estás */
.menu a.imhere {
    color: #FFD700;
    /* Dorado */
}

/* Cambia el color del botón del menú al pasar el ratón */
.menu a:hover {
    background-color: #FFD700;
    /* Fondo dorado */
    color: #000;
    /* Texto negro para contraste */
    transition: 0.3s;
    /* Transición suave */
}

h1,
h2 {
    text-align: center;
    /* Centra el texto */
    color: white;
    /* Texto blanco */
    background-color: rgba(0, 77, 152, 0.7);
    /* Azul semitransparente */
    padding: 10px;
    /* Espaciado interno */
    border-radius: 10px;
    /* Bordes redondeados */
    width: fit-content;
    /* El ancho se ajusta al texto */
    margin: 20px auto;
    /* Centrado horizontal */
}

.tabla-titulos table {
    width: 80%;
    /* Ancho de la tabla */
    margin: auto;
    /* Centrada */
    border-collapse: collapse;
    /* Quita espacios entre celdas */
}

.tabla-titulos td {
    padding: 10px;
    /* Separación entre imágenes */
}

.tabla-titulos img {
    width: 100%;
    /* Mantiene el ancho completo de la celda */
    border-radius: 10px;
    /* Bordes redondeados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    /* Sombra alrededor de la imagen */
}

/* Efecto al pasar el ratón por encima de las imágenes: se agrandan ligeramente */
.tabla-titulos img:hover {
    transform: scale(1.30);
    /* Aumenta un 3% el tamaño */
    transition: 0.3s;
    /* Transición suave */
}

.tabla-titulos th {
    font-size: 2em;
    /* Tamaño grande */
    color: #FFD700;
    /* Dorado */
    padding: 15px;
    /* Espaciado interno */
    text-shadow: 2px 2px 4px #000;
    /* Sombra para destacar */
}

.lista-titulos ul {
    list-style: none;
    /* Quita puntos */
    padding: 0;
    /* Quita padding */
    width: 50%;
    /* Ancho de la lista */
    margin: auto;
    /* Centrada */
}
.lista-titulos h2 {
    font-size: 2.2rem;     /* Más grande */
    color: #FFD700;        /* Dorado Barça (opcional) */
    text-align: center;    /* Centrado */
    margin-bottom: 20px;   /* Separación */
}

.lista-titulos li {
    background-color: rgba(165, 0, 68, 0.8);
    /* Granate semitransparente */
    color: white;
    /* Texto blanco */
    padding: 10px;
    /* Espaciado interno */
    margin: 10px 0;
    /* Separación entre elementos */
    border-left: 10px solid #FFD700;
    /* Barra dorada a la izquierda */
    border-radius: 5px;
    /* Bordes redondeados */
}


.quiz {
    width: 60%;
    /* Ancho del bloque */
    margin: auto;
    /* Centrado */
    background-color: rgba(0, 77, 152, 0.7);
    /* Azul semitransparente */
    padding: 20px;
    /* Espaciado interno */
    border-radius: 10px;
    /* Bordes redondeados */
    color: white;
    /* Texto blanco */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 columnas */
    gap: 20px;
    /* separación entre preguntas */

}

.quiz h2 {
    grid-column: span 2;
    text-align: center;
      font-size: 2.2rem;     /* Más grande */
    color: #FFD700;        /* Dorado Barça (opcional) */
    text-align: center;    /* Centrado */
    margin-bottom: 20px;   /* Separación */

}

.pregunta {
    margin-bottom: 20px;
    /* Separación entre preguntas */
}

.icono {
    width: 40px;
    /* Tamaño del icono */
    display: none;
    /* Ocultos hasta que JS los muestre */
}

.botones {
    display: flex;
    /* Coloca los botones en fila */
    justify-content: space-between;
    /* Uno a cada lado */
}

.botones,
#resultado {
    grid-column: span 2;
    /* Ocupan todo el ancho */
}


button {
    background-color: #FFD700;
    /* Dorado */
    border: none;
    /* Sin borde */
    padding: 10px;
    /* Espaciado interno */
    font-weight: bold;
    /* Texto destacado */
    border-radius: 5px;
    /* Bordes redondeados */
    cursor: pointer;
    /* Mano al pasar el ratón */
}

#resultado {
    margin-top: 20px;
    /* Separación superior */
    font-size: 1.5em;
    /* Tamaño grande */
    text-align: center;
    /* Centrado */
    color: #FFD700;
    /* Dorado */
}

footer {
    background-color: #A50044;
    /* Granate */
    color: white;
    /* Texto blanco */
    text-align: center;
    /* Centrado */
    padding: 20px;
    /* Espaciado interno */
    font-size: 0.9em;
    /* Tamaño del texto */
}

footer a {
    color: #FFD700;
    /* Dorado */
    font-weight: bold;
    /* Más visible */
    margin: 0 5px;
    /* Separación entre enlaces */
}

footer a:hover {
    text-decoration: underline;
    /* Subrayado al pasar */
    color: white;
    /* Cambia a blanco */
}

footer i {
    margin-right: 5px;
    /* Separación entre icono y texto */
}