/**
 * ============================================================================
 * RELATANDO.COM — v11.5.0 · EXPERIENCIA DE LECTURA (bloque B + C)
 * ----------------------------------------------------------------------------
 * Barra flotante (abajo-derecha, encima del botón "subir"), panel "Mi grimorio"
 * y temas de lectura (sepia / negro). Se encola SOLO en relatos (is_singular('post')).
 * Rendimiento: sin filter/blur, sin imágenes, solo transform/opacity/background.
 * SIN JS (html sin .rel-js) nada de esto se muestra: cero botones muertos.
 * ============================================================================
 */

/* ---------- 1. Barra flotante ------------------------------------------- */
.rel-lectura-toolbar {
    display: none;
}

html.rel-js.rel-lt-ready .rel-lectura-toolbar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: fixed;
    right: 20px;
    bottom: 92px;            /* deja libre el .scroll-to-top (bottom: 2rem) */
    z-index: 90000;
    padding: 6px;
    background: rgba(3, 7, 5, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
}

.rel-lectura-toolbar .rel-lt-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.rel-lectura-toolbar .rel-lt-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.rel-lt-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    color: #e6ede9;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.rel-lt-btn:hover,
.rel-lt-btn:focus-visible {
    background: rgba(0, 255, 136, 0.14);
    border-color: rgba(0, 255, 136, 0.55);
    color: #00ff88;
    transform: translateY(-1px);
}

.rel-lt-btn[hidden] {
    display: none !important;
}

.rel-lt-btn[aria-pressed="true"] {
    background: #00ff88;
    border-color: #00ff88;
    color: #030705;
}

.rel-lt-btn[aria-expanded="true"] {
    border-color: #00ff88;
    color: #00ff88;
}

.rel-lt-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #d4af37;
    color: #030705;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
}

/* ---------- 2. Panel "Mi grimorio" -------------------------------------- */
.rel-grimorio {
    position: fixed;
    right: 20px;
    bottom: 92px;
    width: min(320px, calc(100vw - 32px));
    max-height: min(58vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 90001;
    padding: 14px 16px 16px;
    background: rgba(4, 9, 6, 0.97);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.75);
    box-sizing: border-box;
}

.rel-grimorio[hidden] {
    display: none;
}

.rel-grimorio-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.rel-grimorio-title {
    flex: 1;
    font-family: 'Cinzel', serif;
    font-size: 0.86rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #d4af37;
}

.rel-grimorio-clear,
.rel-grimorio-close {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #a3b8ad;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    line-height: 1;
    padding: 6px 9px;
    cursor: pointer;
}

.rel-grimorio-clear:hover,
.rel-grimorio-close:hover {
    color: #ff4d6d;
    border-color: rgba(255, 77, 109, 0.6);
}

.rel-grimorio-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rel-grimorio-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.rel-grimorio-item:last-child {
    border-bottom: none;
}

.rel-grimorio-item a {
    flex: 1;
    color: #dbe4df;
    font-size: 0.86rem;
    line-height: 1.45;
    text-decoration: none;
}

.rel-grimorio-item a:hover {
    color: #00ff88;
}

.rel-grimorio-del {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #6f8478;
    font-size: 0.8rem;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
}

.rel-grimorio-del:hover {
    color: #ff4d6d;
}

.rel-grimorio-empty {
    margin: 6px 0 10px;
    color: #a3b8ad;
    font-size: 0.84rem;
    line-height: 1.6;
}

.rel-grimorio-note {
    margin: 10px 0 0;
    color: #6f8478;
    font-size: 0.7rem;
    line-height: 1.5;
}

/* ---------- 3. Niveles A−/A/A+ (var CSS --rel-fs) ----------------------- */
html.rel-fs-custom .entry-content {
    font-size: calc(1.16rem * var(--rel-fs, 1));
}

@media (max-width: 767px) {
    html.rel-fs-custom .entry-content {
        font-size: calc(1.05rem * var(--rel-fs, 1)) !important;
    }
}

/* ---------- 4. Tema SEPIA 🕯️ (lectura con luz cálida) ------------------- */
html.rel-theme-sepia,
html.rel-theme-sepia body {
    /* !important: el tema impone body{background-color:#030705!important} */
    background: #f2e7d3 !important;
    color: #2b2118;
}

/* Toda la columna de lectura en tinta marrón (el tema la tiene en blanco) */
html.rel-theme-sepia .site-main,
html.rel-theme-sepia .entry-header,
html.rel-theme-sepia .entry-title,
html.rel-theme-sepia .relato-meta,
html.rel-theme-sepia .relato-meta a,
html.rel-theme-sepia .relato-meta span,
html.rel-theme-sepia .rel-acechan-title,
html.rel-theme-sepia .rel-acechan-name,
html.rel-theme-sepia .rel-acechan-sub,
html.rel-theme-sepia .rel-acechan-meta,
html.rel-theme-sepia .rel-acechan-cat,
html.rel-theme-sepia .rel-acechan-more a,
html.rel-theme-sepia .relatando-comments,
html.rel-theme-sepia .comment-body,
html.rel-theme-sepia .rel-micro-feedback a {
    color: #2b2118;
}

html.rel-theme-sepia .site-footer,
html.rel-theme-sepia .crypt-minimal-command-bar,
html.rel-theme-sepia .crypt-minimal-command-bar * {
    color: #2b2118;
    background: #e6d9c0 !important;
}

html.rel-theme-sepia .entry-content,
html.rel-theme-sepia .entry-content p,
html.rel-theme-sepia .entry-content li,
html.rel-theme-sepia .entry-content blockquote,
html.rel-theme-sepia .entry-content h2,
html.rel-theme-sepia .entry-content h3,
html.rel-theme-sepia .entry-content h4 {
    color: #2b2118;
}

html.rel-theme-sepia .entry-content a {
    color: #8a5a13;
}

html.rel-theme-sepia .entry-content blockquote {
    background: rgba(139, 90, 19, 0.07);
    border-left-color: rgba(139, 90, 19, 0.5);
}

html.rel-theme-sepia .relatando-tag-chips .relatando-tag-chip {
    background: rgba(139, 90, 19, 0.08);
    border-color: rgba(139, 90, 19, 0.3);
    color: #4a3a26;
}

html.rel-theme-sepia .rel-lectura-toolbar,
html.rel-theme-sepia .rel-grimorio {
    background: rgba(43, 33, 24, 0.94);
}

/* ---------- 5. Tema NEGRO 🌑 (OLED, sin resplandores) ------------------- */
html.rel-theme-negro,
html.rel-theme-negro body {
    background: #000 !important;
    color: #f2f2f2;
}

html.rel-theme-negro .entry-content,
html.rel-theme-negro .entry-content p,
html.rel-theme-negro .entry-content li,
html.rel-theme-negro .entry-content blockquote {
    color: #f4f4f4;
}

html.rel-theme-negro .entry-content h2,
html.rel-theme-negro .entry-content h3,
html.rel-theme-negro .entry-content h4 {
    color: #ffffff;
}

html.rel-theme-negro .entry-content a {
    color: #7bffb4;
}

html.rel-theme-negro .rel-lectura-toolbar,
html.rel-theme-negro .rel-grimorio {
    background: #000;
    border-color: rgba(255, 255, 255, 0.25);
}

html.rel-theme-negro .entry-title {
    text-shadow: none;
}

/* ---------- 6. Móvil: barra horizontal y panel a ancho completo --------- */
@media (max-width: 767px) {
    html.rel-js.rel-lt-ready .rel-lectura-toolbar {
        flex-direction: row;
        left: 12px;
        right: 12px;
        bottom: 12px;
        justify-content: center;
        align-items: center;
        padding: 5px 6px;
        border-radius: 13px;
    }

    .rel-lectura-toolbar .rel-lt-group {
        flex-direction: row;
        border-bottom: none;
        border-right: 1px solid rgba(212, 175, 55, 0.18);
        padding: 0 5px 0 0;
        margin: 0 5px 0 0;
    }

    .rel-lectura-toolbar .rel-lt-group:last-child {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }

    .rel-lt-btn {
        width: 38px;
        height: 38px;
    }

    .rel-grimorio {
        left: 12px;
        right: 12px;
        bottom: 66px;
        width: auto;
        max-height: 50vh;
    }

    /* En movil la barra ocupa todo el ancho inferior: subimos el boton redondo
       de "volver arriba" (js/main.js) para que no se solapen. Solo en relatos,
       que es donde existe la barra. */
    html.rel-js body.single-post .scroll-to-top,
    html.rel-js body.single .scroll-to-top {
        bottom: 84px !important;
    }
}

/* ---------- 7. Accesibilidad ------------------------------------------- */
.rel-lt-btn:focus-visible,
.rel-grimorio-clear:focus-visible,
.rel-grimorio-close:focus-visible,
.rel-grimorio-del:focus-visible {
    outline: 2px solid #00ff88;
    outline-offset: 2px;
}

/* Alto contraste (panel Aa del header) manda sobre estos controles */
body.rel-high-contrast .rel-lt-btn,
body.rel-high-contrast .rel-grimorio {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

body.rel-high-contrast .rel-lt-btn[aria-pressed="true"] {
    background: #fff !important;
    color: #000 !important;
}

@media (prefers-reduced-motion: reduce) {
    .rel-lt-btn {
        transition: none !important;
    }

    .rel-lt-btn:hover,
    .rel-lt-btn:focus-visible {
        transform: none !important;
    }
}

/* Impresión: la barra no debe salir en papel */
@media print {
    html.rel-js.rel-lt-ready .rel-lectura-toolbar,
    .rel-grimorio {
        display: none !important;
    }
}

/* ===========================================================================
   8. "HISTORIAS QUE TE ACECHAN" (bloque C · relacionados por etiquetas)
   Rejilla de 6 tarjetas, sin sombras pesadas ni filtros. Entra en el mismo
   fichero porque comparte contexto de carga (solo relatos).
   =========================================================================== */
.rel-acechan {
    max-width: var(--spacing-reading);
    margin: 40px auto 8px;
    padding: 22px 24px;
    background: rgba(5, 12, 8, 0.85);
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 14px;
    box-sizing: border-box;
}

.rel-acechan-head {
    margin-bottom: 16px;
}

.rel-acechan-title {
    margin: 0 0 6px;
    font-family: 'Cinzel', serif;
    font-size: 1.06rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d4af37;
}

.rel-acechan-sub {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: #a3b8ad;
}

.rel-acechan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rel-acechan-cell {
    margin: 0;
}

.rel-acechan-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.rel-acechan-card:hover,
.rel-acechan-card:focus-within {
    transform: translateY(-3px);
    border-color: rgba(0, 255, 136, 0.45);
}

.rel-acechan-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.rel-acechan-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #06120a;
}

.rel-acechan-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.rel-acechan-card:hover .rel-acechan-thumb img {
    opacity: 1;
}

.rel-acechan-thumb-void {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(212, 175, 55, 0.5);
    font-size: 1.4rem;
}

.rel-acechan-name {
    display: block;
    padding: 10px 12px 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    line-height: 1.35;
    color: #e6ede9;
}

.rel-acechan-meta {
    margin: 0;
    padding: 0 12px 12px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: #88a898;
}

.rel-acechan-cat {
    color: #00ff88;
    text-transform: uppercase;
}

.rel-acechan-more {
    margin: 16px 0 0;
    font-size: 0.86rem;
}

.rel-acechan-more a {
    color: #d4af37;
    text-decoration: none;
}

.rel-acechan-more a:hover {
    color: #00ff88;
}

/* Temas de lectura también para el bloque de acechan */
html.rel-theme-sepia .rel-acechan {
    background: rgba(139, 90, 19, 0.06);
    border-color: rgba(139, 90, 19, 0.3);
}

html.rel-theme-sepia .rel-acechan-name,
html.rel-theme-sepia .rel-acechan-card {
    color: #2b2118;
}

html.rel-theme-sepia .rel-acechan-sub,
html.rel-theme-sepia .rel-acechan-meta {
    color: #6a5946;
}

html.rel-theme-negro .rel-acechan {
    background: #0a0a0a;
    border-color: rgba(255, 255, 255, 0.18);
}

@media (max-width: 600px) {
    .rel-acechan {
        padding: 18px 16px;
        margin-top: 32px;
    }

    .rel-acechan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .rel-acechan-name {
        font-size: 0.82rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rel-acechan-card,
    .rel-acechan-thumb img {
        transition: none !important;
    }

    .rel-acechan-card:hover,
    .rel-acechan-card:focus-within {
        transform: none !important;
    }
}

/* ---------- 10. Pistas: bocadillo al pasar el ratón / enfocar ------------ */
html.rel-js.rel-lt-ready .rel-lt-btn { position: relative; }
html.rel-js.rel-lt-ready .rel-lt-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute; right: calc(100% + 10px); top: 50%;
    transform: translateY(-50%) translateX(4px);
    background: rgba(10, 9, 7, 0.97); color: #f3e9d8;
    border: 1px solid rgba(212, 175, 55, 0.45); border-radius: 8px;
    padding: 5px 10px; font-size: 0.78rem; line-height: 1.2; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); z-index: 3;
}
html.rel-js.rel-lt-ready .rel-lt-btn[data-tip]:hover::after,
html.rel-js.rel-lt-ready .rel-lt-btn[data-tip]:focus-visible::after {
    opacity: 1; transform: translateY(-50%) translateX(0);
}
@media (max-width: 767px) { .rel-lt-btn[data-tip]::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .rel-lt-btn[data-tip]::after { transition: none; } }

/* ===========================================================================
   11. SEPIA · v11.5.3 — "TINTA SOBRE PAPEL" (blindaje de legibilidad)
   ---------------------------------------------------------------------------
   Medido en producción: el tema pinta ~20 grupos de elementos en blanco
   rgb(240,245,242), verde #00ff88 y oro #d4af37 pensando en el fondo negro.
   Sobre el papel crema el contraste caía a 1,1–2,1:1 (WCAG exige 4,5:1) y el
   texto se difuminaba con el fondo. Aquí se fuerza tinta oscura en TODA la
   columna de lectura y se devuelve la tinta clara a las tarjetas que tienen
   su propio fondo oscuro (caja fuerte VIP, fichas, inyectores, comentarios…).

   Las 3 capas usan :where() → especificidad (0,1,1) todas, así que gana
   siempre la ÚLTIMA declarada. Sin :where() el :not() dispararía la
   especificidad y el orden dejaría de ser predecible.
   =========================================================================== */

/* 11.1 Capa 1 — todo el texto de la columna en tinta marrón */
html.rel-theme-sepia :where(.site-main) :where(*:not(svg):not(svg *)) {
    color: #2b2118 !important;
}

/* 11.2 Capa 2 — enlaces y acentos: siguen distinguiéndose, pero legibles */
html.rel-theme-sepia :where(.site-main) :where(a, strong, summary, h4, h5, h6, figcaption, .toc-title, .relatando-tag-label, .entry-meta, .entry-meta a, .shadow-analytics, .author-link, .relatando-series-archive) {
    color: #8a5a13 !important;
}

/* 11.3 Capa 3 — superficies oscuras propias del tema: conservan tinta clara */
html.rel-theme-sepia :where(.site-main) :where(.vault-lock-screen,
        .vault-lock-screen *,
        .vip-gatekeeper-card,
        .vip-gatekeeper-card *,
        .vip-locked-preview,
        .vip-locked-preview *,
        .context-term-card-v2,
        .context-term-card-v2 *,
        .pillar-injector-card,
        .pillar-injector-card *,
        .relatando-spotlight-card,
        .relatando-spotlight-card *,
        .ficha-expediente,
        .ficha-expediente *,
        .relatando-pillar-ref-badge,
        .relatando-pillar-ref-badge *,
        .nav-previous,
        .nav-previous *,
        .nav-next,
        .nav-next *,
        .comment-respond,
        .comment-respond *,
        .pillar-cluster-recommendation,
        .pillar-cluster-recommendation *,
        .rel-acechan-thumb,
        .rel-acechan-thumb *) {
    color: #ede3d2 !important;
}

/* 11.4 Avisos y degradados oscuros del tema → papel */
html.rel-theme-sepia :where(.site-main) :where([style*="rgba(30, 30, 30"], [style*="rgba(30,30,30"]) {
    background-color: rgba(139, 90, 19, 0.08) !important;
}

html.rel-theme-sepia .vip-fade-overlay {
    background: linear-gradient(to bottom, rgba(242, 231, 211, 0) 0%, #f2e7d3 100%) !important;
}

/* 11.5 Se anula la "linterna" (foco por párrafo) mientras dura el papel:
   dejaba el párrafo en el foco en #ffffff y el resto al 75 % de opacidad, que
   es exactamente lo que el papel no admite. */
html.rel-theme-sepia .immersive-article .entry-content > p,
html.rel-theme-sepia .immersive-article.flashlight-active .entry-content > p:not(.is-in-focus),
html.rel-theme-sepia .immersive-article .entry-content > p.is-in-focus {
    opacity: 1 !important;
    transform: none !important;
    color: #2b2118 !important;
    text-shadow: none !important;
    transition: none !important;
}

html.rel-theme-sepia .golden-thread-fill {
    box-shadow: none !important;
}

html.rel-theme-sepia .entry-content .text-shimmer,
html.rel-theme-sepia .entry-content .sparkles-title {
    background: none !important;
    -webkit-text-fill-color: #2b2118 !important;
    animation: none !important;
}

/* 11.6 Controles nativos y barras de desplazamiento acordes a cada tema */
html.rel-theme-sepia {
    color-scheme: light;
}

html.rel-theme-negro {
    color-scheme: dark;
}

/* 11.7 Acordeones y FAQ del tema (traen color:#00ff88/#e2ede7 con !important):
   sobre papel necesitan más especificidad para ganarles. */
html.rel-theme-sepia .site-main .relatando-faqs-container,
html.rel-theme-sepia .site-main .relatando-faqs-container *,
html.rel-theme-sepia .site-main .faq-item,
html.rel-theme-sepia .site-main .faq-item *,
html.rel-theme-sepia .site-main .wp-block-details,
html.rel-theme-sepia .site-main .wp-block-details *,
html.rel-theme-sepia .site-main .relatando-faq-item,
html.rel-theme-sepia .site-main .relatando-faq-item * {
    color: #2b2118 !important;
}

html.rel-theme-sepia .site-main details summary,
html.rel-theme-sepia .site-main .relatando-faqs-container details summary {
    color: #8a5a13 !important;
    text-shadow: none !important;
}

/* ===========================================================================
   12. SEPIA · v11.5.4 — TARJETAS EN PAPEL
   Las tarjetas del tema usan degradados/colores oscuros translúcidos; sobre el
   papel crema quedaban en un marrón fangoso donde se perdía el texto. En modo
   sepia se repintan como papel (fondo crema, borde tinta, texto marrón).
   Se declara DESPUÉS de la sección 11: misma especificidad, gana por orden.
   =========================================================================== */
html.rel-theme-sepia :where(.site-main) :where(.context-term-card-v2,
        .pillar-injector-card, .noir-card, .relatando-spotlight-card,
        .ficha-expediente, .nav-previous, .nav-next, #respond,
        .comment-respond, .pillar-cluster-recommendation,
        .relatando-pillar-ref-badge, .rel-acechan-card,
        .relatando-tag-chips .relatando-tag-chip, .ctx-term-badge,
        .spotlight-badge, .relatando-faq-item, .relatando-note-box) {
    background: rgba(139, 90, 19, 0.06) !important;
    background-image: none !important;
    border-color: rgba(139, 90, 19, 0.32) !important;
    box-shadow: none !important;
}

html.rel-theme-sepia :where(.site-main) :where(.context-term-card-v2 *,
        .pillar-injector-card *, .noir-card *, .relatando-spotlight-card *,
        .ficha-expediente *, .nav-previous *, .nav-next *, #respond *,
        .comment-respond *, .pillar-cluster-recommendation *,
        .relatando-pillar-ref-badge *, .rel-acechan-card *,
        .relatando-faq-item *) {
    color: #2b2118 !important;
}

html.rel-theme-sepia :where(.site-main) :where(#respond input,
        #respond textarea, .comment-respond input, .comment-respond textarea,
        .comment-form input, .comment-form textarea) {
    background: #fffdf7 !important;
    border: 1px solid rgba(139, 90, 19, 0.35) !important;
    color: #2b2118 !important;
}

html.rel-theme-sepia :where(.site-main) :where(#respond .submit,
        .comment-respond .submit, .comment-form .submit,
        .form-submit input[type="submit"]) {
    background: #8a5a13 !important;
    border-color: #8a5a13 !important;
    color: #f6edda !important;
}

html.rel-theme-sepia :where(.site-main) :where(.noir-card a,
        .context-term-card-v2 a, .pillar-injector-card a,
        .rel-acechan-card a) {
    color: #8a5a13 !important;
}

/* ===========================================================================
   13. SEPIA · v11.5.5 — MODO PAPEL GLOBAL (sustituye al enfoque selectivo)
   ---------------------------------------------------------------------------
   Repintar el tema pieza a pieza no escala: siempre queda una cabecera, una
   tarjeta o una sección oscura con texto blanco. Solución garantizada: en
   sepia se ANULA todo fondo/gradiente/sombra/borde de la página y toda la
   tinta pasa a marrón sobre el crema del <html>/<body>. Por construcción no
   puede quedar texto claro sobre fondo oscuro. Excluidos: imágenes, vídeo,
   iframes (anuncios), canvas y la propia barra flotante + grimorio (que
   conservan su UI oscura y legible).
   =========================================================================== */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body :where(*:not(img):not(svg):not(svg *):not(picture):not(source):not(video):not(iframe):not(canvas):not(.entry-header):not(.rel-lectura-toolbar):not(.rel-lectura-toolbar *):not(.rel-grimorio):not(.rel-grimorio *):not(.rel-lt-btn):not(.rel-lt-btn *):not(.rel-lt-count)) {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border-color: rgba(139, 90, 19, 0.22) !important;
    color: #2b2118 !important;
    -webkit-text-fill-color: currentColor !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body :where(a) {
    color: #8a5a13 !important;
    -webkit-text-fill-color: #8a5a13 !important;
}

html.rel-theme-sepia :where(body) :where(button, input[type="submit"], .btn, .cta-button, .rel-tools-btn, .rel-tools-toggle) {
    background-color: rgba(139, 90, 19, 0.12) !important;
    background-image: none !important;
    color: #2b2118 !important;
    -webkit-text-fill-color: #2b2118 !important;
    border-color: rgba(139, 90, 19, 0.4) !important;
    box-shadow: none !important;
}

html.rel-theme-sepia :where(body) :where(input:not([type="submit"]):not([type="button"]), textarea, select) {
    background-color: #fffdf7 !important;
    background-image: none !important;
    color: #2b2118 !important;
    -webkit-text-fill-color: #2b2118 !important;
    border-color: rgba(139, 90, 19, 0.35) !important;
}

html.rel-theme-sepia :where(body) :where(::placeholder, ::-webkit-input-placeholder) {
    color: #7a6a52 !important;
    -webkit-text-fill-color: #7a6a52 !important;
}

html.rel-theme-sepia :where(body) :where(img, picture, video, iframe) {
    opacity: 0.92;
}

/* ===========================================================================
   14. SEPIA · v11.5.6 — IMAGEN DE CABECERA DEL RELATO (.entry-header)
   ---------------------------------------------------------------------------
   La sección 13 barre el background-image de TODA la página; pero la cabecera
   del relato ES un background-image inline (single.php:168). Se la exceptúa
   del barrido (ver :not(.entry-header) en la sección 13) y se le devuelve su
   velo, ahora de papel: degradado crema de abajo arriba para que el título en
   tinta marrón siga leyéndose sobre la foto. El caso SIN imagen destacada
   (.no-thumb, degradado noir inline en functions.php:818) se repinta como
   papel. Especificidad 0,4,2 como el resto del modo papel: mismo peso, gana
   la última declarada (esta).
   =========================================================================== */

/* 14.1 · La cabecera vuelve a pintar su imagen; colchón crema mientras carga */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .entry-header {
    background-color: #e9dcc3 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* 14.2 · Velo de papel sobre la foto (sustituye al degradado a --color-bg negro) */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .entry-header .header-overlay {
    background-color: transparent !important;
    background-image: linear-gradient(to top,
        #f2e7d3 0%,
        rgba(242, 231, 211, 0.9) 26%,
        rgba(242, 231, 211, 0.55) 58%,
        rgba(242, 231, 211, 0.18) 82%,
        rgba(242, 231, 211, 0) 100%) !important;
    box-shadow: none !important;
}

/* 14.3 · Título y metadatos legibles sobre la foto */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .entry-header .entry-title,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .entry-header .entry-title * {
    color: #241c14 !important;
    -webkit-text-fill-color: #241c14 !important;
    text-shadow: 0 2px 16px rgba(242, 231, 211, 0.95), 0 0 40px rgba(242, 231, 211, 0.75) !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .entry-header .entry-meta,
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .entry-header .entry-meta * {
    color: #6b4a12 !important;
    -webkit-text-fill-color: #6b4a12 !important;
    text-shadow: 0 1px 10px rgba(242, 231, 211, 0.95) !important;
}

html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .entry-header .entry-meta a {
    color: #8a5a13 !important;
    -webkit-text-fill-color: #8a5a13 !important;
}

/* 14.4 · Relato sin imagen destacada: papel en vez del degradado noir */
html.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia.rel-theme-sepia body .entry-header.no-thumb {
    background: #f0e3cb !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(139, 90, 19, 0.25) !important;
}