/* RECONSTRUCCIÓN TOTAL DEL HEADER */
/* EL CONTENEDOR (La montaña) */
.cabecera-arte {
    width: 100%;
    height: auto !important; /* IMPORTANTE: Que no sea 60vh */
    background-image: url('logo.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Todo hacia arriba */
    padding: 10px 0 30px 0 !important; /* Espacio justo arriba y abajo */
}

/* EL MENÚ (Centrado y arriba) */
.menu {
    position: relative !important; /* Adios al absolute que lo mandaba a la esquina */
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Lo lleva a la derecha como en tu foto de libros */
    padding-right: 50px;
    margin-bottom: 10px;
    gap: 20px;
}

/* EL TÍTULO (Pegado a la montaña) */
.cabecera-arte h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 2.2rem;
    letter-spacing: 2px !important; /* Tus 2px de la suerte */
    text-transform: uppercase;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
.menu a {
    color: white !important;
    text-decoration: none;
    /* --- CAMBIAMOS EL ARIAL POR LA LETRA DE LIBRO --- */
    font-family: 'Georgia', serif !important; 
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 2px !important; /* TUS 2PX DE AUTOR */
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,1); /* Para que no se pierda en el cielo */
    transition: 0.3s ease;
}
/* --- 1. EL MENÚ: LO ALEJAMOS DEL TÍTULO --- */
.menu {
    position: absolute !important;
    top: 10px !important; /* Más arriba */
    right: 20px !important;
    z-index: 20 !important;
}

.menu ul {
    display: flex !important;
    list-style: none !important;
    gap: 15px !important; /* Espacio entre INICIO, RUTI, etc. */
    margin: 0 !important;
    padding: 0 !important;
}

.menu a {
    color: white !important;
    font-family: 'Georgia', serif !important;
    font-size: 14px !important; /* Un pelín más pequeña para que no pese tanto */
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,1);
    letter-spacing: 1px !important;
}

/* --- 2. EL TÍTULO: LO BAJAMOS Y ACHICAMOS --- */
.cabecera-arte h1 {
    font-family: 'Arial Black', sans-serif !important;
    color: white !important;
    font-size: 26px !important; /* Lo bajamos de 35px a 26px para que no choque */
    text-transform: uppercase;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
    margin-top: 50px !important; /* ESTO ES LO QUE EMPUJA EL TÍTULO HACIA ABAJO */
    letter-spacing: 1px !important;
    text-align: center;
    max-width: 85%;
}

/* --- ESTO DOMA AL MÓVIL SÍ O SÍ --- */
@media (max-width: 768px) {
    .cabecera-arte {
        height: auto !important; /* Que la montaña sea elástica */
        padding: 15px 5px !important;
        min-height: 200px;
    }

    .menu {
        position: relative !important; /* Deja de flotar y se pone arriba */
        top: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-bottom: 10px;
    }

    .menu ul {
        justify-content: center !important; /* Centra INICIO, RUTI, etc. */
        flex-wrap: wrap !important; /* SI NO CABEN, BAJAN A OTRA FILA */
        gap: 10px !important;
        padding: 0 !important;
    }

    .menu a {
        font-size: 12px !important; /* Un pelín más pequeña para que quepan */
        letter-spacing: 0.5px !important; /* Menos espacio entre letras en móvil */
    }

    .cabecera-arte h1 {
        font-size: 1.3rem !important; /* Título más pequeño para que no pise nada */
        margin-top: 10px !important;
        line-height: 1.2;
    }
}



header.h1{
    font-size: 22px !important; /* Lo bajamos a 22px para que sea bajito y elegante */
    margin-top: 50px !important; /* Le damos aire por arriba para que no pise al menú */
    letter-spacing: 1px !important; /* Un pelín menos de separación para que no sea tan ancho */
}
footer.p{
    text-align: center;
    justify-content: center;
}

body {
    background-color: #e2d1b3; /* El color que hemos elegido */
    font-family: 'Lora', serif; /* La fuente de libro/poesía */
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
}

/* ============================================================
   BLOQUE BLANCO DEFINITIVO - CIERRE DE PÁGINA
   ============================================================ */

footer, .pie-pagina, .copyright {
    width: 100% !important;
    padding: 80px 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: transparent !important; /* Fondo crema de la web */
    clear: both !important;
}

footer p, .pie-pagina p, .copyright p {
    background-color: #ffffff !important; /* Tarjeta blanca */
    color: #000000 !important;           /* Texto negro */
    padding: 20px 50px !important;       /* Relleno del bloque */
    border-radius: 12px !important;      /* Esquinas suaves */
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important; /* Sombra elegante */
    display: inline-block !important;
    font-size: 17px !important;
    text-align: center !important;
    border: 1px solid #eeeeee !important;
    margin: 0 auto !important;
    font-family: Arial, sans-serif !important;
}

footer strong, .pie-pagina strong {
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* AJUSTE PARA MÓVILES */
@media (max-width: 768px) {
    footer p, .pie-pagina p, .copyright p {
        padding: 15px 30px !important;
        font-size: 14px !important;
        width: 85% !important;
    }
}