.tapa-libro {
    /* 1. TU SOMBRA FAVORITA */
    /* Versión estándar (PC) */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
    /* Versión especial para motores de celular (WebKit/iOS/Android) */
    -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.5);

    /* 2. SUAVIZADO */
    /* Hace que el zoom no sea brusco */
    transition: transform 0.2s ease;
    
    /* 3. TRUCO DE RENDIMIENTO */
    /* Le dice al celular "presta atención a este objeto", ayuda a que no parpadee */
    transform: translateZ(0); 
    
    /* 4. ASEGURAR QUE SE VEA LA IMAGEN COMPLETA */
    /* A veces el navegador la corta si es muy grande */
    display: block; 
}

/* 5. EL EFECTO DE AGRANDAR */
.tapa-libro:hover,   /* Cuando pasas el mouse (PC) */
.tapa-libro:active { /* Cuando tocas con el dedo (Celular) */
    transform: scale(1.05);
}

/* --- ESTILOS GENERALES --- */

/* 1. FONDO GENERAL: Gris muy claro (#f8f9fa) */
body {
    background-color: #f8f9fa; 
}

/* 2. HEADER */
header {
    background-color: #4A3800;
    padding: 15px 20px;
    border-radius: 5px;
    /* Sombra suave para que se note sobre el fondo gris */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

/* 3. LOGO: Blanco (según el color hex, aunque el comentario decía negro) */
.logo {
    color: #ffffff; 
    letter-spacing: 2px;
    font-weight: bold;
}

/* 4. FOOTER: Gris muy oscuro (#212529) */
footer#contact {
    background-color: #214141; 
    color: #ffffff; 
}

/* 5. TAGS y DETALLES: Rojo (#ff0000) */
.tag-text {
    color: #ff0000; 
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* Estilo extra: Botón rojo para combinar */
.btn-custom-red {
    background-color: #ff0000;
    color: #ffffff;
    border: none;
}
.btn-custom-red:hover {
    background-color: #cc0000; 
    color: #ffffff;
}

/* Estilos de las tarjetas */
.card {
    transition: transform 0.3s;
    border: none; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.card:hover {
    transform: translateY(-5px);
}