/* ==========================================================================
   Variables CSS (Custom Properties)
   ========================================================================== */
:root {
    --font-primary: 'Arial', sans-serif;
    --color-background-body: #f0f2f5;
    --color-background-card: #ffffff;
    --color-text-primary: #333333;
    --color-text-secondary: #666666;
    --color-text-muted: #888888;
    --color-accent: #007bff;
    --color-amazon-orange: #FF9900;
    --color-amazon-orange-hover: #E68A00;
    --color-button-bg: #555;
    --color-button-text: #ffffff;
    --color-button-hover-bg: #777;
    --border-radius-small: 5px;
    --border-radius-medium: 10px;
    --box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
    --box-shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.1);
    --box-shadow-image: 0px 5px 15px rgba(0, 0, 0, 0.2);
    --transition-duration: 0.3s;
    --gap-small: 10px;
    --gap-medium: 20px; /* Asegúrate que esto sea 20px si lo usas para el gap */
    --gap-large: 30px;
}

/* ==========================================================================
   Reset Básico y Estilos Globales del Body
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-background-body);
    color: var(--color-text-primary);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.page-wrapper {
    width: 100%;
    max-width: 1200px; /* Ajusta según tu diseño preferido */
    padding: var(--gap-large); /* O 20px si quieres consistencia */
    display: flex;
    flex-direction: column;
    gap: var(--gap-large); /* O 20px */
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.75em;
    line-height: 1.3;
}

body > .page-wrapper > h1,
body > .page-wrapper > h2 {
    width: 100%;
    text-align: center;
    margin-top: 0;
    margin-bottom: var(--gap-medium); /* O 20px */
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-duration) ease;
}

a:hover {
    color: #0056b3; /* Ejemplo de color oscurecido */
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   Header y Footer
   ========================================================================== */
.header,
.footer, .page-title-section {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-small);
    padding: var(--gap-medium) 0; /* O 20px 0 */
}

/* ==========================================================================
   Botones Genéricos
   ========================================================================== */
.button {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    padding: var(--gap-small) var(--gap-medium); /* O padding: 10px 20px */
    border: none;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
    transition: background-color var(--transition-duration) ease;
    display: inline-block;
}

.button:hover,
.button:focus {
    background-color: var(--color-button-hover-bg);
    color: var(--color-button-text);
    text-decoration: none;
}

/* ==========================================================================
   Contenedor de la Lista de Libros (MODIFICADO PARA GRID RESPONSIVO)
   ========================================================================== */
.book-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Margen explícito de 20px entre ítems */
    justify-content: flex-start; /* O 'center' si quieres centrar la última fila si no está llena */
}

/* ==========================================================================
   Estilo de Tarjeta de Libro (.book-display) Y Promo Containers como tarjetas
   (MODIFICADO PARA GRID RESPONSIVO)
   ========================================================================== */
.book-display { /* Esta clase se aplica tanto a libros como a banners que actúan como tarjetas */
    background-color: var(--color-background-card);
    padding: var(--gap-medium); /* Padding interno, puedes usar 20px o tu variable */
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-medium);
    text-align: left;
    transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
    
    display: flex; /* Para el layout INTERNO de la tarjeta */
    flex-direction: column; /* Portada arriba, info abajo DENTRO de la tarjeta */
    
    min-height: 380px; /* AJUSTA ESTO: Altura mínima para consistencia. Debe ser suficiente para tu contenido más común. */
    overflow: hidden; /* Para el text-overflow del título si se usa */

    /* --- Ancho Responsivo --- */
    /* Por defecto (móvil) - 1 columna */
    flex-basis: 100%;
    /* No necesitas flex-grow:0 y flex-shrink:0 si usas flex-basis y flex-wrap */
}

.book-display:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Si tienes elementos .promo-container que NO tienen también .book-display
   y quieres que actúen como tarjetas EN LA MISMA CUADRÍCULA:
.book-list > .promo-container {
    background-color: var(--color-background-card); // ... y otros estilos de tarjeta
    padding: var(--gap-medium);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-light); // Sombra más ligera para diferenciar si quieres
    min-height: 380px; // Misma altura mínima
    flex-basis: 100%; // Base para móvil
    display: flex; // Para el layout interno del promo si es complejo
    flex-direction: column;
}
   NOTA: Tu HTML actual `<div class="book-display promo-container">` ya hace que
   .promo-container herede los estilos de .book-display, lo cual es bueno para la consistencia.
*/


/* ==========================================================================
   Estilo de Libro Detallado (.book-display-full) - Sin cambios directos para el grid
   ========================================================================== */
.book-display-full {
    /* ... (sin cambios aquí respecto a tu versión anterior) ... */
    background-color: var(--color-background-card);
    padding: var(--gap-large);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-medium);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-large);
    align-items: flex-start;
}

.book-display-full .book-cover {
    flex: 1 1 300px;
    max-width: 350px;
    margin: 0;
}

.book-display-full .book-info-details-wrapper {
    flex: 2 1 500px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-medium);
}

.book-display-full .book-info {
    padding: 0;
    text-align: left;
}

.book-display-full .book-details {
    text-align: justify;
    font-size: 0.95rem;
}

.book-display-full .book-info h2,
.book-display-full .book-info h3 {
    margin-top: 0;
    margin-bottom: var(--gap-small);
    color: var(--color-text-primary);
}
.book-display-full .book-info h2 { font-size: 1.8em; }
.book-display-full .book-info h3 { font-size: 1.3em; color: var(--color-text-secondary); }

.book-display-full .book-details p {
    margin-bottom: var(--gap-small);
    color: var(--color-text-secondary);
}
.book-display-full .book-details p strong {
    color: var(--color-text-primary);
}


/* ==========================================================================
   Portada del Libro (.book-cover) - Ajustes para consistencia en tarjeta
   ========================================================================== */
.book-cover { /* Este es el contenedor de la imagen dentro de .book-display */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--gap-medium); /* O 15px-20px */
    /* No necesita height aquí, la imagen la define y el .book-display tiene min-height */
}

.book-display .book-cover img { /* Específico para la imagen en la tarjeta */
    width: 150px; /* Ancho deseado para la portada en la tarjeta */
    height: 225px; /* Altura deseada, manteniendo proporción ~2:3 */
    object-fit: cover;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow-image);
    transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
}

.book-display-full .book-cover img { /* Portada más grande para la vista detallada */
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
}

.book-cover:hover img {
    transform: scale(1.05);
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Información del Libro (.book-info) - Ajustes para que ocupe espacio restante
   ========================================================================== */
.book-info { /* Dentro de .book-display */
    padding: 0 var(--gap-small); /* Padding horizontal si se desea */
    flex-grow: 1; /* IMPORTANTE: Hace que esta sección ocupe el espacio vertical restante en la tarjeta */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Opcional: empuja el contenido hacia arriba y abajo si hay espacio extra */
}

.book-info .book-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: var(--gap-small);
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Mostrar máximo 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.4em; /* Espacio para dos líneas (ajusta según tu line-height) */
}
.book-info .book-title a {
    color: inherit;
}

.book-info p {
    font-size: 0.9rem;
    margin-bottom: calc(var(--gap-small) / 2);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
.book-info p .detail-label {
    font-weight: bold;
    color: var(--color-text-primary);
}

/* ==========================================================================
   Botones de Amazon
   ========================================================================== */
.amazon-buttons {
    /* ... (sin cambios aquí respecto a tu versión anterior) ... */
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-small);
    justify-content: flex-start;
    margin-top: var(--gap-medium); /* Añade espacio arriba si está al final de .book-info */
}
/* ... (resto de .amazon-button y sus hijos) ... */
.amazon-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gap-small);
    background-color: var(--color-amazon-orange);
    border: none;
    border-radius: var(--border-radius-small);
    color: var(--color-button-text);
    text-decoration: none;
    transition: background-color var(--transition-duration) ease;
    width: 110px;
    min-height: 80px;
    text-align: center;
}

.amazon-button:hover,
.amazon-button:focus {
    background-color: var(--color-amazon-orange-hover);
    color: var(--color-button-text);
    text-decoration: none;
}

.amazon-button .flag {
    height: 24px;
    margin-bottom: calc(var(--gap-small) / 2);
}

.amazon-button .domain {
    font-size: 0.8rem;
}

/* ==========================================================================
   Contenedores y Items de Promoción (dentro de .book-display)
   ========================================================================== */
/* Los estilos de .promo-item y sus hijos aplican cuando están DENTRO de un .book-display
   o un .book-display.promo-container.
   Ya que .book-display es ahora flex-column, .promo-item se adaptará bien.
*/
.promo-item { /* Si esto está dentro de un .book-display o .book-display.promo-container */
    display: contents;
    align-items: center;
    gap: var(--gap-medium); /* O 15px-20px */
    /* Si el .promo-item es el único contenido de un .book-display (banner),
       puede que quieras que ocupe toda la altura de la tarjeta: */
    /* flex-grow: 1; */
}

.promo-image {
    flex: 0 0 100px;
    text-align: center;
}

.promo-image img {
    max-width: 100%;
    max-height: 50px; /* Ajusta si tus logos de promo son más grandes */
}

.promo-item .book-info { /* Reutilizar .book-info para la estructura de texto de promo */
    flex: 1; /* Que ocupe el espacio restante horizontalmente */
    padding: 0; /* Resetear padding si ya lo tiene el padre (.book-display) */
}

.promo-item .book-info h3 {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: calc(var(--gap-small) / 2);
    color: var(--color-accent);
}

.promo-item .book-info p {
    font-size: 0.9em;
    margin-bottom: var(--gap-small);
}

.promo-link a {
    display: inline-block;
    padding: calc(var(--gap-small) / 1.5) var(--gap-small);
    background-color: var(--color-amazon-orange);
    color: #111;
    text-decoration: none;
    border-radius: var(--border-radius-small);
    font-weight: bold;
    transition: background-color var(--transition-duration) ease;
    font-size: 0.9rem;
}

.promo-link a:hover,
.promo-link a:focus {
    background-color: var(--color-amazon-orange-hover);
    color: #111;
}

/* ==========================================================================
   Disclaimer
   ========================================================================== */
.disclaimer {
    /* ... (sin cambios aquí respecto a tu versión anterior) ... */
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--gap-large);
    padding: var(--gap-medium);
    background-color: #e9ecef;
    border-radius: var(--border-radius-small);
    width: 100%;
}

/* ==========================================================================
   Media Queries para Responsividad (MODIFICADO PARA FLEX-BASIS)
   ========================================================================== */

/* Escritorio grande (ej. 4 columnas) - opcional, podrías empezar con 3 */
@media (min-width: 1200px) {
    .book-display
    /* ,.book-list > .promo-container (si aplica y no tiene .book-display) */ {
        /* 4 columnas: 100% / 4 = 25%. Restar ( (4-1) * 20px_gap ) / 4_columnas */
        flex-basis: calc(25% - 15px); /* 25% - (3*20px/4) */
    }
}

/* Escritorio mediano / Tablet grande (ej. 3 columnas) */
@media (min-width: 769px) and (max-width: 1199.98px) {
    .book-display
    /* ,.book-list > .promo-container (si aplica y no tiene .book-display) */ {
        /* 3 columnas: 100% / 3 = 33.333%. Restar ( (3-1) * 20px_gap ) / 3_columnas */
        flex-basis: calc(33.333% - 13.33px); /* 33.333% - (2*20px/3) */
    }
}

/* Tablet (ej. 2 columnas) */
@media (min-width: 481px) and (max-width: 768.98px) {
    .page-wrapper { padding: var(--gap-medium); } /* O 20px */

    .book-display
    /* ,.book-list > .promo-container (si aplica y no tiene .book-display) */ {
        /* 2 columnas: 100% / 2 = 50%. Restar ( (2-1) * 20px_gap ) / 2_columnas */
        flex-basis: calc(50% - 10px); /* 50% - (1*20px/2) */
        min-height: 360px; /* Puedes ajustar min-height por breakpoint si es necesario */
    }

    /* Estilos de .book-display-full y otros para tablet que ya tenías */
    .book-display-full { flex-direction: column; align-items: center; padding: var(--gap-medium); }
    .book-display-full .book-cover { max-width: 250px; margin-bottom: var(--gap-medium); }
    .book-display-full .book-info-details-wrapper { align-items: center; text-align: center; }
    .book-display-full .book-details { text-align: left; }
    .amazon-buttons { justify-content: center; }
    .promo-item { flex-direction: column; text-align: center; gap: var(--gap-small); }
    .promo-image { margin-bottom: var(--gap-small); }
}

/* Móvil (1 columna) - esta es la base, no necesita media query si es el estilo por defecto de .book-display */
@media (max-width: 480px) {
    .page-wrapper { padding: var(--gap-small); }

    .book-display
    /* ,.book-list > .promo-container (si aplica y no tiene .book-display) */ {
        flex-basis: 100%; /* Ya es el valor por defecto que pusimos arriba */
        min-height: auto; /* En una sola columna, la altura puede ser más flexible */
    }
    
    .book-display .book-cover img { /* Portadas más pequeñas en móvil si es necesario */
        width: 120px;
        height: 180px;
    }
    .book-info .book-title { font-size: 1.1em; -webkit-line-clamp: 3; min-height: 3.3em; }
    .book-info p { font-size: 0.85rem; }

    /* Estilos de .book-display-full y otros para móvil que ya tenías */
    .book-display-full .book-cover img { max-width: 200px; }
    .book-display-full .book-info h2 { font-size: 1.5em; }
    .book-display-full .book-info h3 { font-size: 1.1em; }
    .amazon-button { width: 90px; min-height: 70px; padding: calc(var(--gap-small) / 2); }
    .amazon-button .flag { height: 20px; }
    .amazon-button .domain { font-size: 0.7rem; }
    .promo-item .book-info h3 { font-size: 1.1em; }
    .promo-item .book-info p { font-size: 0.85em; }
    .promo-link a { font-size: 0.85rem; }
}