:root {
    --oro: #c4a484;
    --cafe-oscuro: #2c1b12;
    --cafe-medio: #5d4037;
    --crema-papel: #f4ece2;
    --blanco: #ffffff;
    --rojo-elegante: #8d332c;
}

body {
    margin: 0;
    font-family: 'Playfair Display', serif;
    background: #e8ded1 url('https://www.transparenttextures.com/patterns/paper-fibers.png');
    color: var(--cafe-oscuro);
}

/* Navegación Universal */
nav {
    background: var(--cafe-oscuro);
    padding: 1.2rem 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--oro);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.nav-logo { font-size: 1.8rem; font-weight: 900; color: var(--oro); letter-spacing: 2px; }
.nav-links { display: flex; align-items: center; gap: 25px; }
.nav-links a { color: var(--crema-papel); text-decoration: none; font-weight: bold; transition: 0.3s; font-size: 0.9rem; }
.nav-links a:hover { color: var(--oro); }

.btn-salir { background: var(--rojo-elegante); padding: 7px 18px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); }

/* Contenedores */
.container-index { max-width: 1200px; margin: 50px auto; padding: 0 20px; }

/* Tarjetas de Libros */
.grid-libros { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 40px; }
.card-libro { 
    background: var(--blanco); border-radius: 5px; padding: 15px; 
    box-shadow: 15px 15px 30px rgba(0,0,0,0.1); transition: 0.4s; border: 1px solid #ddd;
}
.card-libro:hover { transform: translateY(-10px); box-shadow: 20px 20px 40px rgba(0,0,0,0.2); }

/* Tablas Premium */
.tabla-luxury { 
    width: 100%; border-collapse: collapse; background: var(--blanco); 
    border-radius: 8px; overflow: hidden; box-shadow: 10px 10px 25px rgba(0,0,0,0.05);
}
.tabla-luxury th { background: var(--cafe-medio); color: var(--oro); padding: 18px; text-align: left; }
.tabla-luxury td { padding: 18px; border-bottom: 1px solid #eee; }

/* Botones */
button { 
    background: var(--cafe-medio); color: white; border: none; padding: 12px; 
    cursor: pointer; font-family: 'Playfair Display', serif; font-weight: bold; width: 100%; transition: 0.3s;
}
button:hover { background: var(--cafe-oscuro); border: 1px solid var(--oro); }

footer { padding: 50px; background: var(--cafe-oscuro); color: var(--oro); text-align: center; margin-top: 100px; }