/* ==========================================
   RESET Y VARIABLES GLOBALES
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-fondo: #fbf9f5; /* Blanco cálido tono papel */
    --color-texto: #222222; /* Negro suave */
    --color-suave: #666666; /* Gris secundario */
    --color-acento: #2a4338; /* Verde editorial profundo */
    --fuente-titulo: 'Cormorant Garamond', serif;
    --fuente-cuerpo: 'Inter', sans-serif;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-texto);
    font-family: var(--fuente-cuerpo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding: 20px; /* Margen general de seguridad para que la página nunca pegue contra los bordes en móviles */
}

/* ==========================================
   ESTRUCTURA DESTACADA (RESPONSIVE FLUIDO)
   ========================================== */
.destacado-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 5vw, 4rem); /* El espacio entre elementos se adapta dinámicamente al ancho de pantalla */
    max-width: 1100px;
    width: 100%; 
    margin: 40px auto; /* El "auto" a los lados evita por completo que se quede pegado a la izquierda */
    padding: 2rem;
    background-color: #ffffff; /* Fondo blanco sutil para destacar la caja sobre el papel */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.destacado-imagen {
    flex: 1 1 240px; /* Permite que la imagen se encoge o estire de forma fluida a partir de una base flexible */
    max-width: 320px; /* Limita su tamaño máximo en monitores grandes */
    width: 100%;
    text-align: center;
}

.imagen-portada-real {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 10px 15px 30px rgba(0,0,0,0.15);
}

/* ==========================================
   BOTONES DE COMPRA Y ACCIÓN
   ========================================== */
.contenedor-botones-compra {
    display: flex;
    flex-wrap: wrap; /* CRUCIAL: Si la pantalla es muy pequeña, el segundo botón baja ordenadamente en lugar de amontonarse */
    gap: 1rem;
    align-items: center;
    margin: 1.5rem 0;
    justify-content: flex-start; 
}

.btn-comprar {
    background-color: var(--color-acento);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 3px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    flex: 1 1 140px; /* Permite que el botón se adapte fluidamente al espacio */
    transition: background-color 0.3s ease;
}

.btn-comprar:hover {
    background-color: #1f3229;
}

.btn-carrito {
    background-color: transparent;
    color: var(--color-texto);
    border: 1px solid var(--color-texto);
    padding: 0.75rem 1.2rem;
    border-radius: 3px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    flex: 1 1 140px; /* Permite que el botón se adapte fluidamente al espacio */
    transition: all 0.3s ease;
}

.btn-carrito:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* ==========================================
   ADAPTACIÓN RADICAL PARA CELULARES
   ========================================== */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .destacado-grid {
        flex-direction: column; /* Apila la portada arriba y los textos abajo de forma vertical en móviles */
        padding: 1.5rem;
        margin: 20px auto;
        text-align: center;
    }

    .contenedor-botones-compra {
        justify-content: center; /* Centra los botones en pantallas móviles para mejor estética */
    }

    .destacado-imagen {
        max-width: 240px; /* Controla que la portada no ocupe toda la pantalla de un celular pequeño */
        margin: 0 auto;
    }
}