/**
 * Archivo: assets/css/historia-pagina.css
 * Módulo: shop-core — página propia de cada historia (29/9/2026).
 * Ver includes/paginas/historia-pagina.php.
 *
 * La estructura (dos columnas, sin scroll de página, solo el texto se
 * desplaza) es la de "Nuestra historia" (nuestra-historia.css); aquí solo
 * lo propio de una historia.
 */

/* Fondo (30/9/2026): Astra trata la historia como entrada de blog y le daba
   su fondo azul marino (rgb 15,23,42); el negro del resto de la web. */
body.sc-hp-body { background-color: var(--sc-bg); }

/* Categoría encima del título: enlace discreto. */
.sc-hp .sc-nh-marca a,
.sc-hp .sc-nh-marca a:visited {
    color: inherit !important;
    text-decoration: none !important;
}
.sc-hp .sc-nh-marca a:hover { color: var(--sc-gold) !important; }

/* Títulos de historia más largos que "Nuestra historia". */

/* El texto de la historia (mismo HTML que la pestaña: sc_texto_editorial_html). */
.sc-hp-cuerpo p { margin: 0 0 0.9rem; }
.sc-hp-cuerpo a { color: var(--sc-gold); }
.sc-hp-cuerpo img { max-width: 100%; height: auto; }

/* ----- Piezas de esta historia ----- */
.sc-hp-productos {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(var(--sc-gold-rgb), 0.12);
}
.sc-hp-productos-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
    line-height: 1.4;
}
.sc-hp-producto,
.sc-hp-producto:visited {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem;
    border: 1px solid rgba(var(--sc-gold-rgb), 0.15);
    border-radius: 6px;
    color: var(--sc-text) !important;
    text-decoration: none !important;
    transition: border-color 0.2s, background 0.2s;
}
.sc-hp-producto:hover,
.sc-hp-producto:focus-visible {
    border-color: var(--sc-gold);
    background: rgba(var(--sc-gold-rgb), 0.05);
    outline: none;
}
.sc-hp-producto img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
}
.sc-hp-producto-nombre { font-size: var(--sc-fs-card); }
.sc-hp-producto-precio { color: var(--sc-gold); font-size: var(--sc-fs-small); }

/* "Siguiente historia: <título>": lleva un título largo, sin mayúsculas. */
.sc-hp-siguiente {
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    max-width: 100%;
    line-height: 1.4;
}
.sc-hp .sc-nh-final { margin-top: 2rem; }

@media (max-width: 900px) {
    .sc-hp-productos-rejilla { grid-template-columns: repeat(2, 1fr); }
}