/*
 * Estilo base de la tienda Lengua de Diablo Editorial
 * Construido sobre Bootstrap 5 (CDN). Aquí solo van los overrides de marca:
 * color de acento tomado del sitio de referencia (#dd3333) y la tipografía
 * "Lobster" que usaban para el nombre del sitio.
 */

:root {
    --marca-rojo: #dd3333;
    --marca-rojo-oscuro: #b52a2a;
    --marca-texto: #222222;
}

body {
    color: var(--marca-texto);
}

.marca-titulo {
    font-family: 'Lobster', cursive;
    color: var(--marca-rojo);
}

.texto-lora {
    font-family: 'Lora', serif;
}

/* Overrides de color primario de Bootstrap por el rojo de marca
   (se sobreescriben las clases directamente porque usamos Bootstrap vía CDN,
   sin recompilar Sass) */
.navbar-marca {
    background-color: #ffffff;
    border-bottom: 3px solid var(--marca-rojo);
}

.btn-marca {
    background-color: var(--marca-rojo);
    border-color: var(--marca-rojo);
    color: #fff;
}
.btn-marca:hover,
.btn-marca:focus {
    background-color: var(--marca-rojo-oscuro);
    border-color: var(--marca-rojo-oscuro);
    color: #fff;
}

.badge-agotado {
    background-color: var(--marca-texto);
}
.badge-destacado {
    background-color: var(--marca-rojo);
}

.hero-carousel .carousel-item img {
    width: 100%;
    height: min(45vw, 420px);
    object-fit: cover;
}
.hero-carousel .carousel-caption {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
}

/* Cintillo fijo: vive fuera de .carousel-inner para no ser arrastrado por el
   cambio de slide, así se mantiene sobre todas las imágenes del carrusel. */
.hero-cintillo-fijo {
    z-index: 2;
    pointer-events: none;
    left: 0;
    right: 0;
}
.hero-carousel .hero-cintillo-fijo {
    border-radius: 0;
}

/* Para que el nav sticky no tape el inicio de la sección al entrar por ancla */
#contacto {
    scroll-margin-top: 90px;
}

.libro-card img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background-color: #f2f2f2;
}

.libro-precio {
    font-weight: 700;
    color: var(--marca-rojo);
}

footer.site-footer {
    background-color: var(--marca-texto);
    color: #eeeeee;
}
footer.site-footer a {
    color: #eeeeee;
}