/* ==========================================================================
BIBLIA-RECURSOS.CSS · La Biblia de la Formación Bonificada · CiberAula
Librería de recursos gráficos · Estilo: Documental moderno (opción B)
v1.0 · 21 abril 2026
==========================================================================
Todos los selectores usan el prefijo .bib- para evitar colisiones con el CSS
corporativo de CiberAula (cabecera-nueva.css, identidad-corporativa.css).
Variables CSS tokenizadas: cambiar la paleta se hace en :root (un solo sitio).
USO TÍPICO EN UNA FICHA:
FUENTES REQUERIDAS EN EL :
========================================================================== */
/* ==========================================================================
1. TOKENS — variables de diseño
========================================================================== */
:root {
/* Tintas y texto */
--bib-ink: #09090b;
--bib-ink-2: #18181b;
--bib-fg: #27272a;
--bib-fg-2: #52525b;
--bib-fg-3: #71717a;
--bib-muted: #a1a1aa;
/* Fondos y bordes */
--bib-white: #ffffff;
--bib-bg: #fafafa;
--bib-bg-2: #f4f4f5;
--bib-bg-3: #e4e4e7;
--bib-border: #e4e4e7;
--bib-border-strong: #d4d4d8;
/* Acentos semánticos */
--bib-accent: #c05621; /* coral CiberAula, acento principal */
--bib-accent-dk: #9a4519;
--bib-accent-bg: #fff7ed;
--bib-accent-border: #fed7aa;
--bib-blue: #2563eb; /* normativa, citas oficiales */
--bib-blue-dk: #1e40af;
--bib-blue-bg: #eff6ff;
--bib-blue-border: #bfdbfe;
--bib-red: #dc2626; /* aviso crítico, sanción */
--bib-red-dk: #991b1b;
--bib-red-bg: #fef2f2;
--bib-red-border: #fecaca;
--bib-green: #16a34a; /* correcto, recomendado, vigente */
--bib-green-dk: #166534;
--bib-green-bg: #f0fdf4;
--bib-green-border: #bbf7d0;
--bib-amber: #ca8a04; /* nota, tip, precaución leve */
--bib-amber-dk: #854d0e;
--bib-amber-bg: #fefce8;
--bib-amber-border: #fde68a;
--bib-violet: #7c3aed; /* definición, glosario */
--bib-violet-bg: #f5f3ff;
--bib-violet-border: #ddd6fe;
/* Tipografía */
--bib-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--bib-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
--bib-serif: 'Instrument Serif', Georgia, serif; /* reservado para números de capítulo y pocos usos decorativos */
/* Layout */
--bib-radius: 10px;
--bib-radius-sm: 6px;
--bib-radius-lg: 14px;
--bib-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
--bib-shadow-hover: 0 2px 4px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
/* Transiciones */
--bib-t: .15s ease;
}
/* ==========================================================================
2. HERO DE CAPÍTULO (.bib-hero)
Cabecera para la portada de un capítulo de La Biblia.
========================================================================== */
.bib-hero { padding: 48px 0 36px; }
.bib-hero__chip { display: inline-flex; align-items: center; gap: 8px;
font-family: var(--bib-sans); font-size: 12.5px; font-weight: 500;
color: var(--bib-fg-2); padding: 6px 14px;
background: var(--bib-bg-2); border: 1px solid var(--bib-border);
border-radius: 999px; margin-bottom: 22px; letter-spacing: -.005em; }
.bib-hero__chip svg { color: var(--bib-accent); flex-shrink: 0; }
.bib-hero__chip strong { color: var(--bib-ink); font-weight: 600; }
.bib-hero__title { font-family: var(--bib-sans); font-size: clamp(1.9rem, 4vw, 2.6rem);
font-weight: 800; letter-spacing: -.03em; color: var(--bib-ink);
line-height: 1.08; margin: 0 0 14px; }
.bib-hero__kicker { font-family: var(--bib-sans); font-size: 1.1rem; color: var(--bib-fg-2);
line-height: 1.55; max-width: 700px; margin: 0 0 28px; font-weight: 400; }
.bib-hero__meta { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 22px;
border-top: 1px solid var(--bib-border); }
.bib-hero__meta-item { display: inline-flex; align-items: center; gap: 8px;
font-family: var(--bib-sans); font-size: 13px; color: var(--bib-fg-3); }
.bib-hero__meta-item svg { color: var(--bib-fg-3); flex-shrink: 0; }
.bib-hero__meta-item strong { color: var(--bib-ink); font-weight: 600; }
/* ==========================================================================
3. HERO DE FICHA (.bib-ficha-hero)
Cabecera de una ficha individual. Más contenida que el de capítulo.
========================================================================== */
.bib-ficha-hero { padding: 40px 0 28px; border-bottom: 1px solid var(--bib-border); }
.bib-ficha-hero__badge { display: inline-flex; align-items: center; gap: 6px;
font-family: var(--bib-mono); font-size: 12px; font-weight: 500;
color: var(--bib-accent); background: var(--bib-accent-bg);
border: 1px solid var(--bib-accent-border); padding: 5px 12px;
border-radius: 6px; margin-bottom: 18px; letter-spacing: -.01em; }
.bib-ficha-hero__badge strong { font-weight: 700; }
.bib-ficha-hero__title { font-family: var(--bib-sans); font-size: clamp(1.5rem, 3.2vw, 2rem);
font-weight: 800; letter-spacing: -.025em; color: var(--bib-ink);
line-height: 1.15; margin: 0 0 12px; max-width: 780px; }
.bib-ficha-hero__sub { font-family: var(--bib-sans); font-size: 1rem; color: var(--bib-fg-2);
line-height: 1.6; max-width: 680px; margin: 0 0 22px; }
.bib-ficha-hero__meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
font-size: 12.5px; color: var(--bib-fg-3); }
.bib-ficha-hero__meta svg { color: var(--bib-fg-3); flex-shrink: 0; }
/* ==========================================================================
4. TL;DR DE FICHA (.bib-tldr)
Resumen destacado al inicio de una ficha. Una de las claves de la lectura.
========================================================================== */
.bib-tldr { background: var(--bib-bg); border: 1px solid var(--bib-border);
border-left: 3px solid var(--bib-accent);
border-radius: var(--bib-radius); padding: 20px 24px;
margin: 0 0 28px; }
.bib-tldr__label { font-family: var(--bib-mono); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .12em;
color: var(--bib-accent); margin-bottom: 8px; display: block; }
.bib-tldr p { font-family: var(--bib-sans); font-size: 15.5px; line-height: 1.65;
color: var(--bib-ink); margin: 0; font-weight: 500;
letter-spacing: -.005em; }
.bib-tldr p + p { margin-top: 10px; font-weight: 400; color: var(--bib-fg); }
/* ==========================================================================
5. PULL-QUOTE DE NORMATIVA (.bib-quote)
Cita literal del BOE, ICAC, normativa europea, etc.
========================================================================== */
.bib-quote { background: var(--bib-bg); border: 1px solid var(--bib-border);
border-radius: var(--bib-radius); padding: 24px 28px;
margin: 26px 0; }
.bib-quote__badge { display: inline-flex; align-items: center; gap: 6px;
font-family: var(--bib-sans); font-size: 11px; font-weight: 600;
color: var(--bib-blue); background: var(--bib-blue-bg);
border: 1px solid var(--bib-blue-border); padding: 3px 10px;
border-radius: 6px; margin-bottom: 14px; letter-spacing: .01em; }
.bib-quote__badge svg { width: 12px; height: 12px; }
.bib-quote__text { font-family: var(--bib-sans); font-size: 1.05rem; line-height: 1.6;
color: var(--bib-ink); font-weight: 500; margin: 0 0 14px;
letter-spacing: -.01em; }
.bib-quote__text em { font-style: italic; color: var(--bib-fg-2); font-weight: 400; }
.bib-quote__cite { font-family: var(--bib-sans); font-size: 12.5px; color: var(--bib-fg-3);
padding-top: 14px; border-top: 1px dashed var(--bib-border-strong);
display: flex; align-items: center; gap: 8px; }
.bib-quote__cite svg { color: var(--bib-muted); flex-shrink: 0; }
.bib-quote__cite a { color: var(--bib-accent); font-weight: 500; text-decoration: none; }
.bib-quote__cite a:hover { text-decoration: underline; }
/* ==========================================================================
6. TARJETA DE NORMATIVA (.bib-norma)
Identifica qué norma regula qué. Clickable si enlaza al BOE.
========================================================================== */
.bib-norma { background: var(--bib-white); border: 1px solid var(--bib-border);
border-radius: var(--bib-radius); padding: 20px 22px;
margin: 20px 0; transition: all var(--bib-t); }
.bib-norma:hover { border-color: var(--bib-border-strong); box-shadow: var(--bib-shadow); }
.bib-norma__top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bib-norma__icon { width: 32px; height: 32px; background: var(--bib-bg-2);
border: 1px solid var(--bib-border); border-radius: 8px;
display: flex; align-items: center; justify-content: center;
color: var(--bib-fg-2); flex-shrink: 0; }
.bib-norma__top-text { flex: 1; min-width: 0; }
.bib-norma__kind { font-family: var(--bib-sans); font-size: 11px; font-weight: 600;
color: var(--bib-fg-3); text-transform: uppercase;
letter-spacing: .08em; margin-bottom: 1px; }
.bib-norma__code { font-family: var(--bib-mono); font-size: 12.5px; color: var(--bib-ink);
font-weight: 500; }
.bib-norma__title { font-family: var(--bib-sans); font-size: 15.5px; font-weight: 700;
color: var(--bib-ink); line-height: 1.35; margin: 0 0 8px;
letter-spacing: -.01em; }
.bib-norma__desc { font-family: var(--bib-sans); font-size: 13.5px; color: var(--bib-fg-2);
line-height: 1.55; margin: 0 0 14px; }
.bib-norma__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bib-norma__tag { font-family: var(--bib-mono); font-size: 11px; font-weight: 500;
color: var(--bib-fg-2); background: var(--bib-bg-2);
border: 1px solid var(--bib-border); padding: 3px 8px;
border-radius: 5px; }
.bib-norma__tag--active { color: var(--bib-green); background: var(--bib-green-bg);
border-color: var(--bib-green-border); }
/* ==========================================================================
7. STAT GRANDE (.bib-stat)
Cifra de impacto con contexto. Rompe densidad.
========================================================================== */
.bib-stat { background: var(--bib-bg); border: 1px solid var(--bib-border);
border-radius: var(--bib-radius); padding: 24px 28px;
display: grid; grid-template-columns: auto 1fr; gap: 28px;
align-items: center; margin: 24px 0; }
.bib-stat__left { border-right: 1px solid var(--bib-border); padding-right: 28px;
min-width: 140px; }
.bib-stat__num { font-family: var(--bib-sans); font-size: clamp(1.9rem, 4.5vw, 2.5rem);
font-weight: 800; color: var(--bib-ink); line-height: 1;
letter-spacing: -.04em; margin-bottom: 4px; }
.bib-stat__num span { color: var(--bib-fg-3); font-weight: 500; }
.bib-stat__label { font-family: var(--bib-sans); font-size: 11px; font-weight: 600;
color: var(--bib-fg-3); text-transform: uppercase; letter-spacing: .1em; }
.bib-stat__body h4 { font-family: var(--bib-sans); font-size: 14.5px; font-weight: 700;
color: var(--bib-ink); line-height: 1.4; margin: 0 0 5px;
letter-spacing: -.01em; }
.bib-stat__body p { font-family: var(--bib-sans); font-size: 13px; color: var(--bib-fg-2);
margin: 0 0 10px; line-height: 1.55; }
.bib-stat__ref { display: inline-flex; align-items: center; gap: 5px;
font-family: var(--bib-mono); font-size: 11px; color: var(--bib-fg-3);
background: var(--bib-white); border: 1px solid var(--bib-border);
padding: 3px 8px; border-radius: 4px; }
/* ==========================================================================
8. FAMILIA DE CALLOUTS (.bib-callout + variantes)
Un único patrón con 5 variantes semánticas.
Variantes: --warn (peligro), --info (normativo/neutro), --tip (consejo),
--success (buena práctica), --note (nota suave)
========================================================================== */
.bib-callout { border-radius: var(--bib-radius); padding: 18px 22px;
display: flex; gap: 14px; align-items: flex-start;
margin: 24px 0; border: 1px solid; background: var(--bib-white); }
.bib-callout__icon { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; }
.bib-callout__body { flex: 1; min-width: 0; }
.bib-callout__label { font-family: var(--bib-sans); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.bib-callout__title { font-family: var(--bib-sans); font-size: 15px; font-weight: 700;
color: var(--bib-ink); line-height: 1.35; margin: 0 0 6px;
letter-spacing: -.01em; }
.bib-callout__body p { font-family: var(--bib-sans); font-size: 13.5px; color: var(--bib-fg);
line-height: 1.6; margin: 0; }
.bib-callout__body p + p { margin-top: 8px; }
.bib-callout--warn { background: var(--bib-red-bg); border-color: var(--bib-red-border); }
.bib-callout--warn .bib-callout__icon { color: var(--bib-red); }
.bib-callout--warn .bib-callout__label { color: var(--bib-red); }
.bib-callout--info { background: var(--bib-blue-bg); border-color: var(--bib-blue-border); }
.bib-callout--info .bib-callout__icon { color: var(--bib-blue); }
.bib-callout--info .bib-callout__label { color: var(--bib-blue); }
.bib-callout--tip { background: var(--bib-accent-bg); border-color: var(--bib-accent-border); }
.bib-callout--tip .bib-callout__icon { color: var(--bib-accent); }
.bib-callout--tip .bib-callout__label { color: var(--bib-accent); }
.bib-callout--success { background: var(--bib-green-bg); border-color: var(--bib-green-border); }
.bib-callout--success .bib-callout__icon { color: var(--bib-green); }
.bib-callout--success .bib-callout__label { color: var(--bib-green); }
.bib-callout--note { background: var(--bib-amber-bg); border-color: var(--bib-amber-border); }
.bib-callout--note .bib-callout__icon { color: var(--bib-amber); }
.bib-callout--note .bib-callout__label { color: var(--bib-amber); }
/* ==========================================================================
9. TARJETA DE CUENTA CONTABLE (.bib-cuenta)
Específico del Cap. 17 y capítulos con referencias a PGC.
========================================================================== */
.bib-cuenta { background: var(--bib-white); border: 1px solid var(--bib-border);
border-radius: var(--bib-radius); padding: 18px 20px;
display: grid; grid-template-columns: auto 1fr auto; gap: 18px;
align-items: center; margin: 20px 0; transition: all var(--bib-t); }
.bib-cuenta:hover { border-color: var(--bib-border-strong); box-shadow: var(--bib-shadow); }
.bib-cuenta__code { font-family: var(--bib-mono); font-size: 1.75rem; font-weight: 700;
color: var(--bib-ink); line-height: 1; letter-spacing: -.03em;
background: var(--bib-bg-2); padding: 12px 16px;
border-radius: 8px; border: 1px solid var(--bib-border); }
.bib-cuenta__body h4 { font-family: var(--bib-sans); font-size: 14.5px; font-weight: 700;
color: var(--bib-ink); line-height: 1.35; margin: 0 0 4px;
letter-spacing: -.01em; }
.bib-cuenta__body p { font-family: var(--bib-sans); font-size: 13px; color: var(--bib-fg-2);
margin: 0; line-height: 1.5; }
.bib-cuenta__pill { font-family: var(--bib-mono); font-size: 11px; font-weight: 600;
padding: 4px 10px; border-radius: 6px; white-space: nowrap;
border: 1px solid; }
.bib-cuenta__pill--ok { color: var(--bib-green); background: var(--bib-green-bg);
border-color: var(--bib-green-border); }
.bib-cuenta__pill--alt { color: var(--bib-blue); background: var(--bib-blue-bg);
border-color: var(--bib-blue-border); }
.bib-cuenta__pill--warn { color: var(--bib-red); background: var(--bib-red-bg);
border-color: var(--bib-red-border); }
/* ==========================================================================
10. TIMELINE VERTICAL (.bib-timeline)
Para mostrar evolución normativa o cronología de hitos.
========================================================================== */
.bib-timeline { position: relative; padding-left: 28px; margin: 24px 0; }
.bib-timeline::before { content: ''; position: absolute; left: 9px; top: 10px; bottom: 10px;
width: 2px; background: var(--bib-border); border-radius: 2px; }
.bib-timeline__item { position: relative; padding-bottom: 22px; }
.bib-timeline__item:last-child { padding-bottom: 0; }
.bib-timeline__item::before { content: ''; position: absolute; left: -24px; top: 4px;
width: 12px; height: 12px; background: var(--bib-bg-2);
border: 2px solid var(--bib-fg-3); border-radius: 50%; }
.bib-timeline__item--current::before { background: var(--bib-accent);
border-color: var(--bib-accent);
box-shadow: 0 0 0 4px var(--bib-accent-bg); }
.bib-timeline__date { font-family: var(--bib-mono); font-size: 11.5px; color: var(--bib-fg-3);
font-weight: 500; margin-bottom: 4px; letter-spacing: -.01em; }
.bib-timeline__item--current .bib-timeline__date { color: var(--bib-accent); font-weight: 600; }
.bib-timeline__title { font-family: var(--bib-sans); font-size: 14.5px; font-weight: 700;
color: var(--bib-ink); line-height: 1.35; margin: 0 0 4px;
letter-spacing: -.01em; }
.bib-timeline__desc { font-family: var(--bib-sans); font-size: 13px; color: var(--bib-fg-2);
line-height: 1.55; margin: 0; }
.bib-timeline__badge { display: inline-block; font-family: var(--bib-sans); font-size: 10px;
font-weight: 600; background: var(--bib-accent-bg);
color: var(--bib-accent); padding: 2px 7px; border-radius: 4px;
margin-left: 8px; letter-spacing: .02em; vertical-align: 1px;
border: 1px solid var(--bib-accent-border); }
/* ==========================================================================
11. COMPARATIVA CORRECTO/INCORRECTO (.bib-compare)
Dos columnas contrastadas.
========================================================================== */
.bib-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin: 24px 0; }
.bib-compare__col { border-radius: var(--bib-radius); padding: 18px 20px;
border: 1px solid; }
.bib-compare__col--ok { background: var(--bib-green-bg); border-color: var(--bib-green-border); }
.bib-compare__col--ko { background: var(--bib-red-bg); border-color: var(--bib-red-border); }
.bib-compare__col h4 { font-family: var(--bib-sans); display: flex; align-items: center;
gap: 7px; font-size: 13px; font-weight: 700; margin: 0 0 12px;
letter-spacing: -.01em; }
.bib-compare__col--ok h4 { color: var(--bib-green); }
.bib-compare__col--ko h4 { color: var(--bib-red); }
.bib-compare__col h4 svg { flex-shrink: 0; }
.bib-compare__col ul { list-style: none; margin: 0; padding: 0; }
.bib-compare__col li { font-family: var(--bib-sans); font-size: 13px; line-height: 1.5;
color: var(--bib-fg); padding: 4px 0 4px 20px; position: relative; }
.bib-compare__col--ok li::before { content: ''; position: absolute; left: 0; top: 11px;
width: 10px; height: 2px; background: var(--bib-green);
border-radius: 1px; }
.bib-compare__col--ko li::before { content: ''; position: absolute; left: 0; top: 11px;
width: 10px; height: 2px; background: var(--bib-red);
border-radius: 1px; }
/* ==========================================================================
12. FLUJO DE PASOS NUMERADO (.bib-pasos)
Para procedimientos secuenciales de 3 a 6 pasos.
========================================================================== */
.bib-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px; margin: 24px 0; counter-reset: paso; }
.bib-paso { position: relative; background: var(--bib-white);
border: 1px solid var(--bib-border); border-radius: var(--bib-radius);
padding: 18px 20px 18px 18px; counter-increment: paso; }
.bib-paso__num { font-family: var(--bib-mono); font-size: 11px; font-weight: 700;
color: var(--bib-accent); background: var(--bib-accent-bg);
border: 1px solid var(--bib-accent-border);
width: 28px; height: 28px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 10px; letter-spacing: -.01em; }
.bib-paso__num::before { content: counter(paso); }
.bib-paso__title { font-family: var(--bib-sans); font-size: 14px; font-weight: 700;
color: var(--bib-ink); line-height: 1.35; margin: 0 0 5px;
letter-spacing: -.01em; }
.bib-paso__desc { font-family: var(--bib-sans); font-size: 13px; color: var(--bib-fg-2);
line-height: 1.55; margin: 0; }
/* ==========================================================================
13. ASIENTO CONTABLE (.bib-asiento)
Tabla Debe/Haber formateada. Clave del Cap. 17.
========================================================================== */
.bib-asiento { margin: 24px 0; border: 1px solid var(--bib-border);
border-radius: var(--bib-radius); overflow: hidden;
background: var(--bib-white); }
.bib-asiento__head { background: var(--bib-bg-2); padding: 12px 20px;
border-bottom: 1px solid var(--bib-border);
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; }
.bib-asiento__head-title { font-family: var(--bib-sans); font-size: 13px; font-weight: 700;
color: var(--bib-ink); letter-spacing: -.01em; }
.bib-asiento__head-ref { font-family: var(--bib-mono); font-size: 11.5px; color: var(--bib-fg-3);
background: var(--bib-white); border: 1px solid var(--bib-border);
padding: 3px 8px; border-radius: 4px; }
.bib-asiento table { width: 100%; border-collapse: collapse; font-family: var(--bib-sans); }
.bib-asiento th { background: transparent; font-family: var(--bib-mono); font-size: 11px;
font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
color: var(--bib-fg-3); padding: 10px 20px; text-align: left;
border-bottom: 1px solid var(--bib-border); }
.bib-asiento th:last-child,
.bib-asiento td:last-child { text-align: right; }
.bib-asiento th:nth-child(3),
.bib-asiento td:nth-child(3) { text-align: right; }
.bib-asiento td { padding: 12px 20px; font-size: 14px; color: var(--bib-fg);
border-bottom: 1px solid var(--bib-bg-2); vertical-align: top; }
.bib-asiento tbody tr:last-child td { border-bottom: none; }
.bib-asiento__code { font-family: var(--bib-mono); font-size: 13px; color: var(--bib-ink);
font-weight: 600; }
.bib-asiento__amount { font-family: var(--bib-mono); font-size: 13.5px; font-weight: 600;
color: var(--bib-ink); letter-spacing: -.01em; }
.bib-asiento__debe { color: var(--bib-blue); }
.bib-asiento__haber { color: var(--bib-green); }
.bib-asiento__totals { background: var(--bib-bg-2); font-weight: 700; }
.bib-asiento__totals td { border-top: 2px solid var(--bib-border-strong);
border-bottom: none !important; }
/* ==========================================================================
14. TARJETA DE DEFINICIÓN (.bib-definicion)
Término técnico glosado en-texto.
========================================================================== */
.bib-definicion { background: var(--bib-violet-bg); border: 1px solid var(--bib-violet-border);
border-radius: var(--bib-radius); padding: 16px 20px; margin: 20px 0;
display: flex; flex-direction: column; gap: 6px; }
.bib-definicion__icon { color: var(--bib-violet); flex-shrink: 0; margin-top: 2px; }
.bib-definicion__body { flex: 1; min-width: 0; }
.bib-definicion__label { font-family: var(--bib-sans); font-size: 11px; font-weight: 700;
color: var(--bib-violet); text-transform: uppercase;
letter-spacing: .08em; margin-bottom: 4px; }
.bib-definicion__term { font-family: var(--bib-sans); font-size: 14.5px; font-weight: 700;
color: var(--bib-ink); line-height: 1.35; margin: 0 0 6px;
letter-spacing: -.01em; }
.bib-definicion__text { font-family: var(--bib-sans); font-size: 13.5px; color: var(--bib-fg);
line-height: 1.6; margin: 0; }
/* ==========================================================================
15. SEPARADOR ORNAMENTAL (.bib-separator)
Entre secciones de una ficha o de la portada de capítulo.
========================================================================== */
.bib-separator { display: flex; align-items: center; justify-content: center; gap: 14px;
margin: 40px 0; color: var(--bib-fg-3); font-family: var(--bib-sans);
font-size: 11px; text-transform: uppercase; letter-spacing: .25em;
font-weight: 600; }
.bib-separator::before,
.bib-separator::after { content: ''; flex: 1; max-width: 120px; height: 1px;
background: var(--bib-border); }
.bib-separator__dot { width: 4px; height: 4px; background: var(--bib-border-strong);
border-radius: 50%; display: inline-block; }
.bib-separator--dots { gap: 6px; }
.bib-separator--dots::before,
.bib-separator--dots::after { max-width: none; }
/* ==========================================================================
16. NAVEGACIÓN ENTRE FICHAS (.bib-ficha-nav)
Anterior / índice / siguiente al pie de una ficha.
========================================================================== */
.bib-ficha-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
padding: 20px; background: var(--bib-bg);
border: 1px solid var(--bib-border); border-radius: var(--bib-radius);
margin: 40px 0 24px; }
.bib-ficha-nav__item { display: flex; flex-direction: column; padding: 14px 18px;
background: var(--bib-white); border: 1px solid var(--bib-border);
border-radius: var(--bib-radius-sm); transition: all var(--bib-t);
text-decoration: none; color: inherit; min-width: 0; }
.bib-ficha-nav__item:hover { border-color: var(--bib-accent-border); box-shadow: var(--bib-shadow);
transform: translateY(-1px); }
.bib-ficha-nav__item--next { text-align: right; }
.bib-ficha-nav__item--center { background: var(--bib-ink); color: var(--bib-white);
border-color: var(--bib-ink); text-align: center;
min-width: 180px; justify-content: center; }
.bib-ficha-nav__item--center:hover { background: var(--bib-ink-2); transform: translateY(-1px);
box-shadow: var(--bib-shadow-hover); }
.bib-ficha-nav__item--disabled { opacity: .45; cursor: default; }
.bib-ficha-nav__item--disabled:hover { transform: none; box-shadow: none;
border-color: var(--bib-border); }
.bib-ficha-nav__label { font-family: var(--bib-mono); font-size: 11px; font-weight: 500;
color: var(--bib-fg-3); text-transform: uppercase;
letter-spacing: .05em; margin-bottom: 4px; }
.bib-ficha-nav__item--center .bib-ficha-nav__label { color: rgba(255,255,255,.6); }
.bib-ficha-nav__title { font-family: var(--bib-sans); font-size: 13.5px; font-weight: 700;
color: var(--bib-ink); line-height: 1.35; letter-spacing: -.01em; }
.bib-ficha-nav__item--center .bib-ficha-nav__title { color: var(--bib-white); }
/* ==========================================================================
17. PIE DE METADATA EDITORIAL (.bib-meta-footer)
Cierre técnico de cada ficha: autora, fecha, versión, normativa referenciada.
========================================================================== */
.bib-meta-footer { background: var(--bib-bg); border: 1px solid var(--bib-border);
border-radius: var(--bib-radius); padding: 18px 22px;
margin: 28px 0; font-family: var(--bib-sans); font-size: 12.5px;
color: var(--bib-fg-2); line-height: 1.75; }
.bib-meta-footer dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px;
margin: 0; }
.bib-meta-footer dt { font-family: var(--bib-mono); font-size: 11px; font-weight: 600;
color: var(--bib-fg-3); text-transform: uppercase;
letter-spacing: .06em; white-space: nowrap; }
.bib-meta-footer dd { margin: 0; color: var(--bib-fg); }
.bib-meta-footer dd strong { color: var(--bib-ink); font-weight: 600; }
/* ==========================================================================
18. DROPCAP (.bib-dropcap)
Letra capital decorativa al inicio de una ficha (uso moderado).
========================================================================== */
.bib-dropcap::first-letter {
font-family: var(--bib-sans);
font-size: 3.6em;
font-weight: 800;
line-height: .9;
float: left;
margin: 4px 10px 0 0;
color: var(--bib-accent);
letter-spacing: -.04em;
}
/* ==========================================================================
18. ÍNDICE DE FICHAS DEL CAPÍTULO (.bib-cap-index)
Lista visible en la portada de un capítulo con sus fichas y su estado.
========================================================================== */
.bib-cap-index { display: flex; flex-direction: column; gap: 10px;
margin: 24px 0; }
.bib-cap-index__item { display: grid; grid-template-columns: 64px 1fr auto;
gap: 20px; align-items: center;
padding: 18px 22px; background: var(--bib-white);
border: 1px solid var(--bib-border);
border-radius: var(--bib-radius);
transition: all var(--bib-t);
text-decoration: none; color: inherit; }
a.bib-cap-index__item:hover { border-color: var(--bib-accent-border);
box-shadow: var(--bib-shadow);
transform: translateY(-1px); }
.bib-cap-index__item--coming { opacity: .68; cursor: default; }
.bib-cap-index__num { font-family: var(--bib-mono); font-size: 1rem;
font-weight: 600; color: var(--bib-accent);
line-height: 1; letter-spacing: -.01em;
background: var(--bib-accent-bg);
border: 1px solid var(--bib-accent-border);
padding: 10px 0; border-radius: var(--bib-radius-sm);
text-align: center; min-width: 52px; }
.bib-cap-index__item--coming .bib-cap-index__num { color: var(--bib-fg-3);
background: var(--bib-bg-2);
border-color: var(--bib-border); }
.bib-cap-index__body h3 { font-family: var(--bib-sans); font-size: 14.5px;
font-weight: 700; color: var(--bib-ink);
line-height: 1.35; margin: 0 0 4px;
letter-spacing: -.01em; }
.bib-cap-index__body p { font-family: var(--bib-sans); font-size: 13px;
color: var(--bib-fg-2); line-height: 1.5; margin: 0; }
.bib-cap-index__status { font-family: var(--bib-sans); font-size: 11px;
font-weight: 600; text-transform: uppercase;
letter-spacing: .08em; padding: 6px 12px;
border-radius: 20px; white-space: nowrap;
border: 1px solid; }
.bib-cap-index__status--live { color: var(--bib-green);
background: var(--bib-green-bg);
border-color: var(--bib-green-border); }
.bib-cap-index__status--coming { color: var(--bib-fg-3);
background: var(--bib-bg-2);
border-color: var(--bib-border); }
@media (max-width: 640px) {
.bib-cap-index__item { grid-template-columns: 48px 1fr; gap: 14px; }
.bib-cap-index__status { grid-column: 1 / 3; justify-self: start;
margin-top: 4px; }
}
/* ==========================================================================
19. BARRA DE PROGRESO DEL CAPÍTULO (.bib-progress)
Indica visualmente cuántas fichas del capítulo están publicadas.
========================================================================== */
.bib-progress { display: flex; align-items: center; gap: 16px;
padding: 16px 20px; background: var(--bib-bg);
border: 1px solid var(--bib-border);
border-radius: var(--bib-radius); margin: 0 0 32px; }
.bib-progress__bar { flex: 1; height: 6px; background: var(--bib-bg-3);
border-radius: 3px; overflow: hidden; position: relative; }
.bib-progress__fill { height: 100%; background: var(--bib-accent);
border-radius: 3px; transition: width .3s ease; }
.bib-progress__text { font-family: var(--bib-sans); font-size: 13px;
color: var(--bib-fg-2); font-weight: 500;
white-space: nowrap; letter-spacing: -.005em; }
.bib-progress__text strong { color: var(--bib-ink); font-weight: 700; }
.bib-progress__count { font-family: var(--bib-mono); font-size: 12.5px;
background: var(--bib-white); border: 1px solid var(--bib-border);
padding: 4px 10px; border-radius: 6px; color: var(--bib-ink);
font-weight: 600; white-space: nowrap; }
/* ==========================================================================
20. SUB-BLOQUE TEMÁTICO (.bib-subgroup)
Agrupador narrativo de fichas dentro de un capítulo (I, II, III...).
========================================================================== */
.bib-subgroup { margin: 36px 0 0; }
.bib-subgroup:first-child { margin-top: 0; }
.bib-subgroup__head { display: grid; grid-template-columns: auto 1fr;
gap: 22px; align-items: center; margin-bottom: 20px;
padding-bottom: 18px;
border-bottom: 1px solid var(--bib-border); }
.bib-subgroup__roman { font-family: var(--bib-serif); font-size: 3.2rem;
color: var(--bib-accent); line-height: .85;
font-weight: 400; letter-spacing: -.02em;
min-width: 50px; text-align: center; }
.bib-subgroup__text { min-width: 0; }
.bib-subgroup__label { font-family: var(--bib-mono); font-size: 11px;
font-weight: 600; color: var(--bib-accent);
text-transform: uppercase; letter-spacing: .1em;
margin-bottom: 4px; }
.bib-subgroup__title { font-family: var(--bib-sans); font-size: 1.35rem;
font-weight: 800; color: var(--bib-ink);
line-height: 1.2; margin: 0 0 5px;
letter-spacing: -.025em; }
.bib-subgroup__desc { font-family: var(--bib-sans); font-size: 13.5px;
color: var(--bib-fg-2); line-height: 1.55; margin: 0;
max-width: 640px; }
/* ==========================================================================
21. FICHA DESTACADA (.bib-ficha-featured)
La ficha disponible que actúa como "call to action" del sub-bloque.
========================================================================== */
.bib-ficha-featured { display: grid; grid-template-columns: auto 1fr auto;
gap: 28px; align-items: center;
padding: 26px 30px; margin: 0 0 14px;
background: linear-gradient(135deg, var(--bib-accent-bg) 0%, var(--bib-white) 70%);
border: 2px solid var(--bib-accent);
border-radius: var(--bib-radius-lg);
text-decoration: none; color: inherit;
transition: all var(--bib-t);
box-shadow: 0 1px 2px rgba(192,86,33,.08),
0 4px 16px rgba(192,86,33,.06);
position: relative; overflow: hidden; }
.bib-ficha-featured::before { content: ""; position: absolute;
top: 0; right: 0; width: 180px; height: 180px;
background: radial-gradient(circle, rgba(192,86,33,.08) 0%, transparent 70%);
pointer-events: none; }
.bib-ficha-featured:hover { transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(192,86,33,.1),
0 12px 32px rgba(192,86,33,.12); }
.bib-ficha-featured__num { display: flex; flex-direction: column; align-items: center;
gap: 8px; flex-shrink: 0; }
.bib-ficha-featured__num-text { font-family: var(--bib-mono); font-size: 1.5rem;
color: var(--bib-accent); font-weight: 700;
line-height: 1; letter-spacing: -.02em;
background: var(--bib-white);
border: 1.5px solid var(--bib-accent);
padding: 14px 18px;
border-radius: var(--bib-radius); min-width: 70px;
text-align: center; }
.bib-ficha-featured__badge { font-family: var(--bib-sans); font-size: 9.5px;
font-weight: 700; color: var(--bib-white);
background: var(--bib-green);
padding: 4px 10px; border-radius: 20px;
text-transform: uppercase; letter-spacing: .1em;
white-space: nowrap; }
.bib-ficha-featured__body { min-width: 0; position: relative; z-index: 1; }
.bib-ficha-featured__title { font-family: var(--bib-sans); font-size: 1.15rem;
font-weight: 800; color: var(--bib-ink);
line-height: 1.3; margin: 0 0 8px;
letter-spacing: -.02em; }
.bib-ficha-featured__sub { font-family: var(--bib-sans); font-size: 14px;
color: var(--bib-fg-2); line-height: 1.55;
margin: 0 0 14px; }
.bib-ficha-featured__excerpt { font-family: var(--bib-sans); font-size: 13.5px;
color: var(--bib-fg); line-height: 1.55;
margin: 0 0 14px; padding: 12px 16px;
background: var(--bib-white);
border-left: 3px solid var(--bib-accent);
border-radius: 0 var(--bib-radius-sm) var(--bib-radius-sm) 0;
font-style: italic; }
.bib-ficha-featured__meta { display: flex; gap: 14px; flex-wrap: wrap;
font-family: var(--bib-mono); font-size: 11.5px;
color: var(--bib-fg-3); font-weight: 500; }
.bib-ficha-featured__meta span { display: inline-flex; align-items: center; gap: 5px; }
.bib-ficha-featured__meta svg { flex-shrink: 0; }
.bib-ficha-featured__cta { display: inline-flex; align-items: center; gap: 8px;
padding: 12px 18px; background: var(--bib-ink);
color: var(--bib-white); border-radius: var(--bib-radius-sm);
font-family: var(--bib-sans); font-size: 13px;
font-weight: 700; white-space: nowrap;
letter-spacing: -.005em; transition: all var(--bib-t);
position: relative; z-index: 1; }
.bib-ficha-featured:hover .bib-ficha-featured__cta { background: var(--bib-accent);
transform: translateX(3px); }
/* ==========================================================================
22. GRID DE FICHAS PENDIENTES (.bib-ficha-pending)
Tratamiento compacto para las fichas aún no publicadas de un sub-bloque.
========================================================================== */
.bib-ficha-pending-grid { display: grid; gap: 10px; margin: 0 0 8px; }
.bib-ficha-pending-grid--2 { grid-template-columns: repeat(2, 1fr); }
.bib-ficha-pending-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bib-ficha-pending { padding: 14px 16px 14px 18px;
background: var(--bib-white);
border: 1px dashed var(--bib-border-strong);
border-radius: var(--bib-radius); position: relative;
opacity: .78; transition: opacity var(--bib-t); }
.bib-ficha-pending:hover { opacity: 1; }
.bib-ficha-pending__top { display: flex; align-items: center; gap: 10px;
margin-bottom: 6px; }
.bib-ficha-pending__num { font-family: var(--bib-mono); font-size: 11px;
font-weight: 600; color: var(--bib-fg-3);
background: var(--bib-bg-2);
border: 1px solid var(--bib-border);
padding: 3px 8px; border-radius: 5px;
letter-spacing: -.01em; }
.bib-ficha-pending__badge { font-family: var(--bib-sans); font-size: 9.5px;
font-weight: 700; color: var(--bib-fg-3);
text-transform: uppercase; letter-spacing: .1em;
margin-left: auto; }
.bib-ficha-pending__title { font-family: var(--bib-sans); font-size: 13.5px;
font-weight: 700; color: var(--bib-fg);
line-height: 1.35; margin: 0 0 4px;
letter-spacing: -.01em; }
.bib-ficha-pending__desc { font-family: var(--bib-sans); font-size: 12.5px;
color: var(--bib-fg-3); line-height: 1.5; margin: 0; }
/* Media queries ampliadas para los nuevos recursos */
@media (max-width: 780px) {
.bib-ficha-pending-grid--2,
.bib-ficha-pending-grid--3 { grid-template-columns: 1fr; }
.bib-ficha-featured { grid-template-columns: 1fr; gap: 18px;
padding: 22px 24px; text-align: left; }
.bib-ficha-featured__num { flex-direction: row; justify-content: flex-start; }
.bib-ficha-featured__cta { justify-self: flex-start; }
.bib-subgroup__head { gap: 14px; }
.bib-subgroup__roman { font-size: 2.4rem; min-width: 36px; }
}
/* ==========================================================================
23. HERO ENRIQUECIDO DE CAPÍTULO (.bib-cap-hero)
Variante con peso editorial alto: numeral romano gigante + stats visuales
+ grid de puntos decorativo. Para portadas de capítulo que requieren más
presencia visual que el .bib-hero básico.
========================================================================== */
.bib-cap-hero { position: relative; padding: 52px 0 44px;
margin-bottom: 32px; overflow: hidden;
border-bottom: 1px solid var(--bib-border); }
.bib-cap-hero::before { content: ""; position: absolute; top: 0; right: 0;
width: 280px; height: 280px;
background-image: radial-gradient(circle, var(--bib-border-strong) 1.4px, transparent 1.4px);
background-size: 16px 16px;
opacity: .55; pointer-events: none; z-index: 0;
-webkit-mask-image: linear-gradient(225deg, black 0%, transparent 75%);
mask-image: linear-gradient(225deg, black 0%, transparent 75%); }
.bib-cap-hero__layout { display: grid; grid-template-columns: auto 1fr;
gap: 44px; align-items: start;
position: relative; z-index: 1; }
.bib-cap-hero__numeral { font-family: var(--bib-serif); font-size: 8rem;
color: var(--bib-accent); line-height: .85;
font-weight: 400; letter-spacing: -.04em;
flex-shrink: 0; text-align: center;
min-width: 150px; padding-top: 8px; position: relative; }
.bib-cap-hero__numeral::after { content: "Capítulo"; position: absolute;
bottom: -6px; left: 50%; transform: translateX(-50%);
font-family: var(--bib-mono); font-size: 10.5px;
color: var(--bib-fg-3); font-weight: 600;
text-transform: uppercase; letter-spacing: .15em;
white-space: nowrap; }
.bib-cap-hero__content { min-width: 0; padding-top: 6px; }
.bib-cap-hero__chip { display: inline-flex; align-items: center; gap: 8px;
font-family: var(--bib-sans); font-size: 12.5px;
font-weight: 500; color: var(--bib-fg-2);
padding: 6px 14px; background: var(--bib-bg-2);
border: 1px solid var(--bib-border);
border-radius: 999px; margin-bottom: 18px;
letter-spacing: -.005em; }
.bib-cap-hero__chip svg { color: var(--bib-accent); flex-shrink: 0; }
.bib-cap-hero__chip strong { color: var(--bib-ink); font-weight: 600; }
.bib-cap-hero__title { font-family: var(--bib-sans);
font-size: clamp(2rem, 4.5vw, 2.9rem);
font-weight: 800; letter-spacing: -.035em;
color: var(--bib-ink); line-height: 1.05;
margin: 0 0 14px; }
.bib-cap-hero__kicker { font-family: var(--bib-sans); font-size: 1.1rem;
color: var(--bib-fg-2); line-height: 1.55;
max-width: 680px; margin: 0 0 28px; font-weight: 400; }
.bib-cap-hero__stats { display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px; max-width: 620px; }
.bib-cap-hero__stat { padding: 14px 16px; background: var(--bib-white);
border: 1px solid var(--bib-border);
border-radius: var(--bib-radius-sm);
transition: all var(--bib-t);
display: flex; flex-direction: column; justify-content: center;
min-height: 86px; }
.bib-cap-hero__stat:hover { border-color: var(--bib-accent-border);
box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.bib-cap-hero__stat-num { font-family: var(--bib-sans); font-size: 1.5rem;
font-weight: 800; color: var(--bib-ink);
line-height: 1; letter-spacing: -.03em;
margin-bottom: 5px; }
.bib-cap-hero__stat-num span { font-size: .62em; color: var(--bib-fg-3);
font-weight: 500; letter-spacing: 0; }
.bib-cap-hero__stat-label { font-family: var(--bib-mono); font-size: 10.5px;
font-weight: 600; color: var(--bib-fg-3);
text-transform: uppercase; letter-spacing: .1em; }
.bib-cap-hero__byline { margin-top: 24px; padding-top: 18px;
border-top: 1px dashed var(--bib-border-strong);
display: flex; gap: 12px; align-items: center;
flex-wrap: wrap; font-family: var(--bib-sans);
font-size: 13px; color: var(--bib-fg-3); }
.bib-cap-hero__byline strong { color: var(--bib-ink); font-weight: 600; }
.bib-cap-hero__byline-avatar { width: 32px; height: 32px;
background: var(--bib-ink); color: var(--bib-white);
border-radius: 50%; display: flex;
align-items: center; justify-content: center;
font-weight: 700; font-size: 12px;
letter-spacing: -.02em; flex-shrink: 0; }
.bib-cap-hero__byline-sep { color: var(--bib-border-strong); }
@media (max-width: 780px) {
.bib-cap-hero { padding: 36px 0 32px; }
.bib-cap-hero__layout { grid-template-columns: 1fr; gap: 22px; }
.bib-cap-hero__numeral { font-size: 5rem; min-width: auto;
text-align: left; padding-top: 0; }
.bib-cap-hero__numeral::after { position: static; display: block;
transform: none; text-align: left;
margin-top: -6px; }
.bib-cap-hero::before { width: 180px; height: 180px;
background-size: 14px 14px; }
.bib-cap-hero__title { font-size: 1.9rem; }
}
/* ==========================================================================
24. MEDIA QUERIES — responsive
========================================================================== */
@media (max-width: 820px) {
.bib-stat { grid-template-columns: 1fr; gap: 16px; }
.bib-stat__left { border-right: none; border-bottom: 1px solid var(--bib-border);
padding-right: 0; padding-bottom: 14px; }
.bib-cuenta { grid-template-columns: auto 1fr; gap: 14px; }
.bib-cuenta__pill { grid-column: 1 / 3; justify-self: start; }
.bib-compare { grid-template-columns: 1fr; }
.bib-ficha-nav { grid-template-columns: 1fr; }
.bib-ficha-nav__item--center { min-width: 0; }
.bib-hero__meta { gap: 14px; }
}
/* ==========================================================================
21b. FICHA PUBLICADA (.bib-ficha-published)
Versión sobria de listado: las fichas hermanas de la featured dentro
del mismo sub-bloque temático. Sin gradiente, sin sombra fuerte.
Componente reubicado desde CSS embebido del Cap. 17 (29/04/2026).
========================================================================== */
a.bib-ficha-published { display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 18px;
padding: 18px 22px; margin: 12px 0;
background: var(--bib-white);
border: 1px solid var(--bib-border);
border-radius: var(--bib-radius);
text-decoration: none; color: inherit;
transition: all var(--bib-t); }
a.bib-ficha-published:hover{ border-color: var(--bib-accent-border);
box-shadow: 0 2px 10px rgba(0,0,0,.04);
transform: translateY(-1px); }
.bib-ficha-published__num { font-family: var(--bib-mono); font-size: 13px;
font-weight: 700; color: var(--bib-accent);
background: var(--bib-accent-bg);
border: 1px solid var(--bib-accent-border);
padding: 6px 11px; border-radius: var(--bib-radius-sm);
white-space: nowrap; }
.bib-ficha-published__body h5 { font-family: var(--bib-sans);
font-size: 14.5px; font-weight: 700;
color: var(--bib-ink); margin: 0 0 3px;
letter-spacing: -.01em; line-height: 1.35; }
.bib-ficha-published__body p { font-family: var(--bib-sans);
font-size: 13px; color: var(--bib-fg-2);
margin: 0; line-height: 1.5; }
.bib-ficha-published__status { display: inline-flex; align-items: center;
gap: 6px; font-family: var(--bib-mono);
font-size: 11px; font-weight: 600;
color: var(--bib-green-dk);
background: var(--bib-green-bg);
border: 1px solid var(--bib-green-border);
padding: 4px 10px; border-radius: 5px;
white-space: nowrap; letter-spacing: -.005em; }
.bib-ficha-published__status::before { content: ''; width: 6px; height: 6px;
background: var(--bib-green); border-radius: 50%;
display: inline-block; }
.bib-ficha-published__arrow { display: inline-flex; align-items: center;
justify-content: center;
color: var(--bib-fg-3); transition: all var(--bib-t); }
.bib-ficha-published:hover .bib-ficha-published__arrow { color: var(--bib-accent);
transform: translateX(3px); }
/* ==========================================================================
25. LAYOUT DE CAPÍTULO COMPUESTO (.bib-cap-*) — wrappers, barras y secciones
Componentes globales reutilizados por capítulos compuestos tipo Cap. 17.
Renombrados con prefijo bib-cap- el 30/04/2026 para evitar colisión con
los selectores .biblia-bar / .breadcrumb-bar del diseño de capítulo normal.
========================================================================== */
/* Reset mínimo y body de la Biblia */
.bib-page-reset *,
.bib-page-reset *::before,
.bib-page-reset *::after { box-sizing: border-box; }
body.bib-page { font-family: var(--bib-sans); color: var(--bib-fg);
background: #e8e8e8; font-size: 15px; line-height: 1.65;
-webkit-font-smoothing: antialiased; margin: 0; }
/* Wrapper principal del documento (1150px corporativos) */
.bib-page .wrap { max-width: 1150px; margin: 0 auto;
background: var(--bib-white);
box-shadow: 0 0 60px rgba(0,0,0,.10); }
/* Barra superior identitaria del capítulo compuesto */
.bib-cap-bar { background: var(--bib-ink); padding: 11px 32px;
display: flex; align-items: center; gap: 16px;
color: var(--bib-bg); }
.bib-cap-bar__icon { width: 28px; height: 28px;
background: var(--bib-accent); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; }
.bib-cap-bar__icon svg { width: 15px; height: 15px; }
.bib-cap-bar__title { font-size: 13px; font-weight: 500;
color: rgba(255,255,255,.85); letter-spacing: -.005em; }
.bib-cap-bar__title strong { color: var(--bib-white); font-weight: 600; }
.bib-cap-bar__nav { margin-left: auto; display: flex; gap: 20px; }
.bib-cap-bar__nav a { color: rgba(255,255,255,.6); font-size: 12px;
font-weight: 500; text-decoration: none;
transition: color var(--bib-t);
letter-spacing: -.005em; }
.bib-cap-bar__nav a:hover { color: var(--bib-white); }
/* Barra de breadcrumbs del capítulo compuesto */
.bib-cap-breadcrumb { padding: 14px 32px; border-bottom: 1px solid var(--bib-border);
font-size: 13px; color: var(--bib-fg-3);
background: var(--bib-bg); }
.bib-cap-breadcrumb a { color: var(--bib-fg-3); font-weight: 500;
text-decoration: none; transition: color var(--bib-t); }
.bib-cap-breadcrumb a:hover { color: var(--bib-accent); }
.bib-cap-breadcrumb .sep { margin: 0 8px; color: var(--bib-border-strong); }
/* Wrappers de contenido del capítulo */
.cap-content { padding: 40px 40px 20px; max-width: 920px; }
.cap-content__prose p { font-size: 15.5px; color: var(--bib-fg-2);
line-height: 1.75; margin: 0 0 1.2em;
max-width: 760px; }
.cap-content__prose p strong { color: var(--bib-ink); font-weight: 600; }
.cap-content__prose p a { color: var(--bib-accent); font-weight: 500;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--bib-t); }
.cap-content__prose p a:hover { border-bottom-color: var(--bib-accent); }
.cap-section { padding: 20px 40px; max-width: 960px; }
.cap-section__label { font-family: var(--bib-mono); font-size: 11px;
font-weight: 600; text-transform: uppercase;
letter-spacing: .12em; color: var(--bib-accent);
margin-bottom: 8px; }
.cap-section__title { font-size: 1.6rem; font-weight: 800;
color: var(--bib-ink); margin-bottom: 8px;
letter-spacing: -.025em; line-height: 1.2; }
.cap-section__sub { font-size: 14px; color: var(--bib-fg-3);
margin-bottom: 28px; max-width: 640px;
line-height: 1.6; }
.cap-bottom { padding: 0 40px 48px; max-width: 920px; }
/* ==========================================================================
26. CIERRE DE CAPÍTULO COMPUESTO (.bib-cap-author / .bib-cap-related / .bib-cap-cta)
Componentes de pie del capítulo compuesto tipo Cap. 17.
Renombrados con prefijo bib-cap- el 30/04/2026 para evitar colisión con
.author-bio / .related / .cta-section del diseño de capítulo normal.
========================================================================== */
/* Bio de autora al pie */
.bib-cap-author { display: flex; gap: 20px; padding: 24px 28px;
background: var(--bib-bg);
border: 1px solid var(--bib-border);
border-radius: var(--bib-radius);
margin: 40px 0 0; max-width: 720px; }
.bib-cap-author__avatar { width: 52px; height: 52px;
background: var(--bib-ink); color: var(--bib-white);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 15px; flex-shrink: 0;
letter-spacing: -.02em; }
.bib-cap-author__name { font-weight: 700; font-size: 14px;
color: var(--bib-ink); margin-bottom: 4px;
letter-spacing: -.01em; }
.bib-cap-author__text { font-size: 13.5px; color: var(--bib-fg-2);
line-height: 1.65; }
/* Sección de capítulos relacionados */
.bib-cap-related { margin: 40px 0 0; }
.bib-cap-related__label { font-family: var(--bib-mono); font-size: 11px;
font-weight: 600; text-transform: uppercase;
letter-spacing: .12em; color: var(--bib-accent);
margin-bottom: 16px; }
.bib-cap-related__grid { display: grid; grid-template-columns: repeat(3,1fr);
gap: 12px; }
.bib-cap-related__card { padding: 18px 20px;
background: var(--bib-white);
border: 1px solid var(--bib-border);
border-radius: var(--bib-radius);
transition: all var(--bib-t);
text-decoration: none; display: block; }
.bib-cap-related__card:hover { border-color: var(--bib-accent-border);
box-shadow: 0 2px 8px rgba(0,0,0,.04);
transform: translateY(-1px); }
.bib-cap-related__num { font-family: var(--bib-mono); font-size: 12px;
font-weight: 600; color: var(--bib-accent);
background: var(--bib-accent-bg);
border: 1px solid var(--bib-accent-border);
padding: 3px 8px; border-radius: 5px;
display: inline-block; margin-bottom: 10px;
letter-spacing: -.01em; }
.bib-cap-related__link { font-size: 13.5px; font-weight: 700;
color: var(--bib-ink); line-height: 1.4;
letter-spacing: -.01em; }
/* CTA final del capítulo */
.bib-cap-cta { background: var(--bib-ink);
border-radius: var(--bib-radius-lg);
padding: 40px 44px;
display: flex; align-items: center;
justify-content: space-between; gap: 28px;
margin: 40px 0 0; color: var(--bib-white); }
.bib-cap-cta h3 { font-size: 1.3rem; font-weight: 700;
color: var(--bib-white); line-height: 1.3;
letter-spacing: -.02em; }
.bib-cap-cta p { color: rgba(255,255,255,.65); font-size: 13.5px;
margin-top: 7px; line-height: 1.6; }
.bib-cap-cta__btns { display: flex; gap: 10px; flex-shrink: 0; }
.bib-cap-cta__btn--primary { background: var(--bib-accent); color: var(--bib-white);
padding: 12px 22px; border-radius: var(--bib-radius-sm);
font-weight: 600; font-size: 13px; white-space: nowrap;
text-decoration: none;
transition: background var(--bib-t);
letter-spacing: -.005em; }
.bib-cap-cta__btn--primary:hover { background: var(--bib-accent-dk); }
.bib-cap-cta__btn--secondary { background: rgba(255,255,255,.08);
color: var(--bib-white);
padding: 12px 22px; border-radius: var(--bib-radius-sm);
font-weight: 600; font-size: 13px;
border: 1px solid rgba(255,255,255,.15);
white-space: nowrap; text-decoration: none;
transition: background var(--bib-t);
letter-spacing: -.005em; }
.bib-cap-cta__btn--secondary:hover { background: rgba(255,255,255,.15); }
/* ==========================================================================
27. RESPONSIVE de capítulo compuesto — media queries (≤820px y ≤720px)
========================================================================== */
@media (max-width: 820px) {
.cap-content,
.cap-section,
.cap-bottom { padding-left: 24px; padding-right: 24px; }
.bib-cap-related__grid { grid-template-columns: 1fr; }
.bib-cap-cta { flex-direction: column; text-align: center;
padding: 32px 24px; }
.bib-cap-cta__btns { justify-content: center; flex-direction: column;
width: 100%; }
.bib-cap-cta__btns a { text-align: center; }
.bib-cap-bar { padding: 10px 20px; flex-wrap: wrap; }
.bib-cap-bar__nav { margin-left: 0; margin-top: 4px; }
.bib-cap-breadcrumb { padding: 10px 20px; }
.bib-cap-author { flex-direction: column; text-align: center;
align-items: center; }
}
@media (max-width: 720px) {
a.bib-ficha-published { grid-template-columns: 1fr; gap: 10px; }
.bib-ficha-published__status { justify-self: start; }
}
/* ==========================================================================
28. TOKENS DEL CAPÍTULO NORMAL (artículo serif tipo Cap. 1)
Variables CSS específicas del diseño "artículo de revista" usado por los
capítulos normales (1, 8, 11, ...). Migradas el 30/04/2026 desde el CSS
embebido del Cap. 1 a esta biblioteca compartida.
No definen :root global para no interferir con los tokens --bib-* anteriores.
========================================================================== */
:root {
--primary: #1a365d;
--primary-l: #2c5282;
--primary-dk: #102a43;
--cta: #c05621;
--cta-h: #a34a1c;
--gold: #b8860b;
--gold-light: #d4a843;
--gold-bg: #fdf8ed;
--text: #1a202c;
--text2: #4a5568;
--text3: #718096;
--bg: #ffffff;
--bg-page: #e8e8e8;
--bg-soft: #f8f8f8;
--bg-warm: #faf8f5;
--bg-sec: #f7f5f2;
--border: #e2e0dc;
--font: 'Montserrat', system-ui, sans-serif;
--serif: 'Instrument Serif', 'Georgia', serif;
--w: 1150px;
--r-sm: 4px;
--r-md: 8px;
--r-lg: 12px;
--sh-sm: 0 1px 3px rgba(0,0,0,.08);
--sh-md: 0 4px 12px rgba(0,0,0,.10);
--sh-lg: 0 8px 30px rgba(0,0,0,.12);
--t: .2s ease;
}
/* ==========================================================================
29. ESQUELETO DEL CAPÍTULO NORMAL — barra superior, breadcrumb, hero, layout
Wrappers y cabecera del diseño "artículo serif" (Cap. 1 y compañeros).
Migrados el 30/04/2026 desde CSS embebido del Cap. 1.
========================================================================== */
/* Reset suave para artículos */
.biblia-bar,
.biblia-bar *,
.breadcrumb-bar,
.breadcrumb-bar *,
.art-hero,
.art-hero *,
.biblia-grid,
.biblia-grid *,
.biblia-bottom,
.biblia-bottom * { box-sizing: border-box; }
/* Barra superior identitaria (artículo) */
.biblia-bar { background: var(--primary-dk); padding: 10px 32px;
display: flex; align-items: center; gap: 16px; }
.biblia-bar-icon { width: 28px; height: 28px;
background: var(--gold); border-radius: 50%;
display: flex; align-items: center; justify-content: center; }
.biblia-bar-icon svg { width: 16px; height: 16px; }
.biblia-bar-title { color: rgba(255,255,255,.85); font-size: 13px;
font-weight: 600; letter-spacing: .3px; }
.biblia-bar-title strong { color: #fff; }
.biblia-bar-nav { margin-left: auto; display: flex; gap: 20px; }
.biblia-bar-nav a { color: rgba(255,255,255,.6); font-size: 12px;
font-weight: 600; text-decoration: none; }
.biblia-bar-nav a:hover { color: #fff; }
/* Breadcrumb (artículo) */
.breadcrumb-bar { padding: 12px 32px; border-bottom: 1px solid var(--border);
font-size: 13px; color: var(--text3); }
.breadcrumb-bar a { color: var(--text3); font-weight: 500; text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--primary); }
.breadcrumb-bar .sep { margin: 0 8px; opacity: .5; }
/* Hero del artículo */
.art-hero { padding: 48px 32px 40px; border-bottom: 1px solid var(--border); }
.art-category { display: inline-block; font-size: 11px; font-weight: 800;
text-transform: uppercase; letter-spacing: 2px;
color: var(--cta); margin-bottom: 14px; }
.art-title { font-family: var(--serif); font-size: 2.6rem; font-weight: 400;
line-height: 1.15; color: var(--primary-dk);
margin-bottom: 16px; max-width: 720px; }
.art-subtitle { font-size: 1.1rem; color: var(--text2); line-height: 1.65;
max-width: 640px; margin-bottom: 24px; }
.art-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.art-avatar { width: 44px; height: 44px; background: var(--primary);
color: #fff; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 14px; }
.art-author { font-weight: 700; font-size: 14px; color: var(--text); }
.art-role { font-size: 12px; color: var(--text3); font-weight: 500; }
.art-date { font-size: 13px; color: var(--text3); font-weight: 500;
margin-left: 8px; }
/* Layout 2-col del cuerpo del artículo */
.biblia-grid { display: grid; grid-template-columns: 3fr 2fr;
gap: 48px; padding: 40px 32px 0; align-items: start; }
.biblia-text { min-width: 0; }
.biblia-aside { align-self: start; }
/* Aside con infografía */
.biblia-infografia img { width: 100%; height: auto;
border-radius: var(--r-lg);
box-shadow: var(--sh-lg); }
.biblia-infografia figcaption { margin-top: 12px; font-size: 12px;
color: var(--text3); text-align: center;
line-height: 1.5; font-style: italic; }
/* Tipografía del cuerpo del artículo */
.biblia-text p { margin-bottom: 1.4em; color: var(--text);
font-size: 15.5px; line-height: 1.75; }
.biblia-text .lead { font-size: 17px; color: var(--text); line-height: 1.8;
font-weight: 500; border-left: 3px solid var(--cta);
padding-left: 20px; }
.biblia-text h2 { font-family: var(--serif); font-size: 1.65rem;
font-weight: 400; color: var(--primary-dk);
margin: 48px 0 20px; padding-top: 24px;
border-top: 3px solid var(--cta); line-height: 1.25; }
.biblia-text h2:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
/* Wrapper del pie del artículo */
.biblia-bottom { padding: 0 32px 48px; }
/* ==========================================================================
30. NUMERAL DEL ARTÍCULO (1 · de 20 en La Biblia)
Bloque numeral pequeño que precede al título del artículo.
========================================================================== */
.art-number-row { display: flex; align-items: baseline; gap: 12px;
margin: 6px 0 14px; line-height: 1; }
.art-number { font-family: var(--serif); font-size: 3.2rem;
color: var(--cta); line-height: 1; font-weight: 400;
letter-spacing: -.02em; }
.art-number-sep { font-family: var(--serif); font-size: 1.4rem;
color: var(--text3); font-weight: 400; line-height: 1; }
.art-number-of { font-family: var(--serif); font-size: 1.05rem;
color: var(--text3); font-style: italic;
letter-spacing: .01em; }
/* ==========================================================================
31. COMPONENTES EDITORIALES DEL ARTÍCULO (cajas de aviso, cita, dato clave)
Componentes reutilizables que aparecen dentro del cuerpo del capítulo:
.lead, .kf (dato clave), .tip (consejo), .warn (atención), .pq (pull-quote).
========================================================================== */
/* Caja "Dato clave" — fondo gris suave, borde azul oscuro */
.kf { background: var(--bg-soft); border-left: 4px solid var(--primary);
padding: 24px 28px; border-radius: 0 var(--r-md) var(--r-md) 0;
margin: 28px 0; }
.kf-label { display: block; font-size: 12px; font-weight: 800;
text-transform: uppercase; letter-spacing: 2px;
color: var(--primary); margin-bottom: 12px;
padding-bottom: 8px; border-bottom: 2px solid var(--primary);
width: fit-content; }
.kf p, .kf span { font-size: 15px; line-height: 1.7; }
/* Caja "Consejo" — fondo crema, borde naranja */
.tip { background: #fff7ed; border-left: 4px solid var(--cta);
padding: 24px 28px; border-radius: 0 var(--r-md) var(--r-md) 0;
margin: 28px 0; }
.tip-label { display: block; font-size: 12px; font-weight: 800;
text-transform: uppercase; letter-spacing: 2px;
color: var(--cta); margin-bottom: 12px;
padding-bottom: 8px; border-bottom: 2px solid var(--cta);
width: fit-content; }
.tip p { font-size: 15px; line-height: 1.7; margin: 0; }
/* Caja "Atención" — fondo rosa pálido, borde rojo */
.warn { background: #fef2f2; border-left: 4px solid #c53030;
padding: 24px 28px; border-radius: 0 var(--r-md) var(--r-md) 0;
margin: 28px 0; }
.warn-label { display: block; font-size: 12px; font-weight: 800;
text-transform: uppercase; letter-spacing: 2px;
color: #c53030; margin-bottom: 12px;
padding-bottom: 8px; border-bottom: 2px solid #c53030;
width: fit-content; }
.warn p { font-size: 15px; line-height: 1.7; margin: 0; }
/* Pull-quote — cita destacada en serif */
.pq { border-left: 4px solid var(--cta); padding: 20px 28px;
margin: 32px 0; background: var(--bg-warm); }
.pq p { font-family: var(--serif); font-size: 1.15rem;
line-height: 1.6; color: var(--primary-dk); margin: 0; }
.pq cite { display: block; margin-top: 10px; font-size: 13px;
color: var(--text3); font-weight: 600; font-style: normal; }
/* ==========================================================================
32. TABLA DE DATOS DEL ARTÍCULO (.dt)
Tabla con cabecera azul, filas alternadas y highlight naranja.
========================================================================== */
.dt-wrap { margin: 28px 0; overflow-x: auto;
-webkit-overflow-scrolling: touch; }
.dt { width: 100%; border-collapse: collapse; font-size: 14px; }
.dt thead { background: var(--primary); color: #fff; }
.dt th { padding: 14px 16px; font-weight: 700; font-size: 13px;
text-transform: uppercase; letter-spacing: .5px;
text-align: left; }
.dt td { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.dt tbody tr:hover { background: var(--bg-soft); }
.dt .hl { color: var(--cta); font-weight: 800; }
/* ==========================================================================
33. CIERRE DEL ARTÍCULO — bio, related, CTA del capítulo normal
Componentes de pie del artículo serif (Cap. 1 y compañeros).
Migrados el 30/04/2026 desde CSS embebido del Cap. 1.
========================================================================== */
/* Reset de enlaces del cierre del artículo */
.author-bio a,
.related-card,
.cta-btn-primary,
.cta-btn-secondary { text-decoration: none; color: inherit; }
/* Bio de autora al pie del artículo */
.author-bio { display: flex; gap: 24px; padding: 32px;
background: var(--bg-soft); border-radius: var(--r-lg);
margin: 48px 0; max-width: 720px; }
.author-bio-avatar { width: 64px; height: 64px; background: var(--primary);
color: #fff; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 20px; flex-shrink: 0; }
.author-bio-name { font-weight: 800; font-size: 15px; color: var(--primary-dk);
margin-bottom: 6px; }
.author-bio-text { font-size: 14px; color: var(--text2); line-height: 1.7; }
/* Sección de capítulos relacionados del artículo */
.related { margin: 48px 0; }
.related-label { font-size: 12px; font-weight: 800; text-transform: uppercase;
letter-spacing: 2px; color: var(--text3); margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.related-card { padding: 24px; border: 1px solid var(--border);
border-radius: var(--r-md); transition: all var(--t); }
.related-card:hover { border-color: var(--cta); box-shadow: var(--sh-md); }
.related-num { font-family: var(--serif); font-size: 2rem; color: var(--cta);
line-height: 1; margin-bottom: 12px; }
.related-link { font-size: 14px; font-weight: 700; color: var(--primary);
line-height: 1.4; }
/* CTA del artículo */
.cta-section { background: var(--primary); border-radius: var(--r-lg);
padding: 48px; display: flex; align-items: center;
justify-content: space-between; gap: 32px; margin: 48px 0; }
.cta-section h3 { font-family: var(--serif); font-size: 1.6rem; color: #fff;
font-weight: 400; line-height: 1.3; }
.cta-section p { color: rgba(255,255,255,.7); font-size: 14px; margin-top: 8px; }
.cta-btns { display: flex; gap: 12px; flex-shrink: 0; }
.cta-btn-primary { background: var(--cta); color: #fff; padding: 14px 28px;
border-radius: var(--r-sm); font-weight: 700; font-size: 14px;
white-space: nowrap; }
.cta-btn-primary:hover { background: var(--cta-h); }
.cta-btn-secondary { background: rgba(255,255,255,.15); color: #fff;
padding: 14px 28px; border-radius: var(--r-sm);
font-weight: 700; font-size: 14px;
border: 1px solid rgba(255,255,255,.25);
white-space: nowrap; }
.cta-btn-secondary:hover { background: rgba(255,255,255,.25); }
/* ==========================================================================
34. RESPONSIVE del capítulo normal — media queries (≤960px y ≤600px)
========================================================================== */
@media (max-width: 960px) {
.biblia-grid { grid-template-columns: 1fr; gap: 32px; }
.biblia-aside { position: relative; top: 0; order: -1;
max-width: 400px; margin: 0 auto; }
.art-title { font-size: 2rem; }
.cta-section { flex-direction: column; text-align: center;
padding: 32px 24px; }
.cta-btns { justify-content: center; }
.related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.art-hero { padding: 28px 20px 24px; }
.biblia-grid { padding: 24px 20px 0; }
.biblia-bottom { padding: 0 20px 32px; }
.art-title { font-size: 1.6rem; }
.biblia-bar { padding: 8px 20px; }
.breadcrumb-bar { padding: 10px 20px; }
.author-bio { flex-direction: column; text-align: center;
align-items: center; }
.cta-btns { flex-direction: column; }
.art-number { font-size: 2.4rem !important; }
}
/* ==========================================================================
35. VÍDEO OFICIAL FUNDAE (.bib-video-fundae)
Bloque editorial para embeber vídeos oficiales del canal FUNDAE en
capítulos de La Biblia. Incluye iframe responsive 16:9, atribución
visible y resumen operativo paso a paso.
Añadido: 04/05/2026 — piloto Cap. 6 Plazos (sesión Mónica + Ana).
Política URL: youtube-nocookie.com (RGPD/AEPD).
========================================================================== */
.bib-video-fundae { background: #fffdfa; border: 1px solid var(--bib-accent-border);
border-radius: var(--bib-radius-lg); overflow: hidden;
margin: 36px 0 28px; box-shadow: 0 1px 3px rgba(192,86,33,.04); }
.bib-video-fundae__head { height: 6px;
background: linear-gradient(90deg, var(--bib-accent) 0%, #e07a5f 60%, #f3a679 100%); }
.bib-video-fundae__body { padding: 28px 32px 24px; }
.bib-video-fundae__topline { display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; margin-bottom: 14px; }
.bib-video-fundae__badge { display: inline-flex; align-items: center; gap: 6px;
background: var(--bib-accent-bg); color: var(--bib-accent-dk);
font-family: var(--bib-sans); font-size: 11px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
padding: 5px 11px; border-radius: 20px;
border: 1px solid var(--bib-accent-border); }
.bib-video-fundae__badge svg { flex-shrink: 0; }
.bib-video-fundae__channel { font-family: var(--bib-sans); font-size: 11px;
color: var(--bib-accent-dk); letter-spacing: .05em; }
.bib-video-fundae__channel a { color: inherit; text-decoration: none; }
.bib-video-fundae__channel a:hover { text-decoration: underline; }
.bib-video-fundae__title { font-family: var(--bib-serif); font-size: 24px; font-weight: 600;
line-height: 1.25; color: var(--bib-ink);
margin: 0 0 14px; letter-spacing: -.01em; }
.bib-video-fundae__lead { font-family: var(--bib-sans); font-size: 15px;
line-height: 1.65; color: var(--bib-fg); margin: 0 0 22px; }
.bib-video-fundae__lead strong { color: var(--bib-accent); font-weight: 700; }
.bib-video-fundae__wrapper { position: relative; width: 100%; padding-bottom: 56.25%;
background: #0a0a0a; border-radius: var(--bib-radius);
overflow: hidden; margin: 0 0 10px; }
.bib-video-fundae__wrapper iframe { position: absolute; top: 0; left: 0;
width: 100%; height: 100%; border: 0; }
.bib-video-fundae__credit { font-family: var(--bib-sans); font-size: 12px;
color: var(--bib-fg-3); text-align: center;
margin: 0 0 26px; font-style: italic; }
.bib-video-fundae__credit a { color: var(--bib-accent); text-decoration: none; font-weight: 500; }
.bib-video-fundae__credit a:hover { text-decoration: underline; }
.bib-video-fundae__divider { border-top: 1px solid var(--bib-accent-border); padding-top: 22px; }
.bib-video-fundae__resumen-title { display: flex; align-items: center; gap: 9px;
font-family: var(--bib-sans); font-size: 13px;
font-weight: 700; color: var(--bib-accent-dk);
text-transform: uppercase; letter-spacing: .08em;
margin: 0 0 18px; }
.bib-video-fundae__resumen-title svg { flex-shrink: 0; color: var(--bib-accent); }
.bib-video-fundae__steps { list-style: none; padding: 0; margin: 0; }
.bib-video-fundae__step { position: relative; padding: 0 0 14px 42px;
font-family: var(--bib-sans); font-size: 14.5px;
line-height: 1.6; color: var(--bib-fg); }
.bib-video-fundae__step:last-child { padding-bottom: 0; }
.bib-video-fundae__step-num { position: absolute; left: 0; top: 1px;
width: 28px; height: 28px; border-radius: 50%;
background: var(--bib-accent-bg); color: var(--bib-accent);
font-family: var(--bib-sans); font-size: 13px;
font-weight: 700; display: flex;
align-items: center; justify-content: center;
border: 1.5px solid var(--bib-accent-border); }
.bib-video-fundae__step strong { color: var(--bib-ink); font-weight: 600; }
@media (max-width: 600px) {
.bib-video-fundae__body { padding: 24px 20px 20px; }
.bib-video-fundae__title { font-size: 21px; }
.bib-video-fundae__step { padding-left: 38px; font-size: 14px; }
.bib-video-fundae__step-num { width: 24px; height: 24px; font-size: 12px; }
}
/* ============================================================
* CABECERA PERGAMINO V2 (.bib-mast) — 2026-05-07
* ============================================================ */
.bib-mast{background:#fdf6e9;border-bottom:1px solid #f0e0bf;position:relative;overflow:hidden}
.bib-mast::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml;utf8,");opacity:.55;mix-blend-mode:multiply}
.bib-mast::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse 320px 110px at 12% 30%, rgba(180,120,60,.12) 0%, transparent 60%),radial-gradient(ellipse 280px 90px at 70% 80%, rgba(160,90,40,.10) 0%, transparent 60%),radial-gradient(ellipse 200px 70px at 90% 25%, rgba(140,75,30,.08) 0%, transparent 60%),radial-gradient(circle at 50% 50%, transparent 30%, rgba(180,130,70,.06) 100%)}
.bib-mast__borde{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg, transparent 0%, #c05621 20%, #c05621 80%, transparent 100%);opacity:.3;z-index:5}
.bib-mast__inner{max-width:1200px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;gap:24px;position:relative;z-index:3}
.bib-mast__mark{flex-shrink:0;width:62px;height:62px;display:flex;align-items:center;justify-content:center}
.bib-mast__mark img{width:48px;height:48px;display:block}
.bib-mast__titles{flex:1;min-width:0}
.bib-mast__eyebrow{font-size:.7rem;font-weight:700;color:#9a4519;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;line-height:1}
.bib-mast__title{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:2rem;color:#1a0f06;line-height:1;letter-spacing:-.005em}
.bib-mast__title .amp{color:#c05621}
.bib-mast__nav{display:flex;gap:4px;flex-shrink:0}
.bib-mast__nav a{font-size:.88rem;font-weight:600;color:#52525b;text-decoration:none;padding:10px 16px;border-radius:8px;transition:all .15s ease;white-space:nowrap;position:relative;z-index:3}
.bib-mast__nav a:hover{background:rgba(192,86,33,.08);color:#c05621}
.bib-mast__nav a.active{background:#c05621;color:#fdf6e9}
@media (max-width:900px){
.bib-mast__inner{flex-wrap:wrap;padding:18px 16px;gap:12px}
.bib-mast__mark{width:48px;height:48px}
.bib-mast__mark img{width:38px;height:38px}
.bib-mast__title{font-size:1.5rem}
.bib-mast__nav{order:3;width:100%;overflow-x:auto;padding-top:8px;border-top:1px dashed #f0e0bf;margin-top:6px;flex-wrap:nowrap}
.bib-mast__nav a{padding:8px 12px;font-size:.82rem}
}
@media (max-width:480px){
.bib-mast__title{font-size:1.25rem}
.bib-mast__eyebrow{font-size:.6rem}
}
/* ============================================================
* HERO PORTADA · Bordeaux teja (-25% en alto) — 2026-05-07
* Reglas COMPLETAS (sustituyen al CSS inline antiguo)
* ============================================================ */
.biblia-hero{
background:linear-gradient(180deg,#7d2f15 0%,#651c0c 50%,#3d1208 100%);
color:#fff;
padding:24px 32px 20px;
text-align:center;
position:relative;
overflow:hidden;
}
/* Imagotipo del hero (sustituye al badge + h1 antiguo) */
.biblia-hero-imagotipo{
display:block;width:100%;max-width:580px;height:auto;
margin:0 auto 14px;
position:relative;z-index:2;
}
/* H1 visualmente oculto pero accesible por SEO/screen-readers */
.biblia-hero-h1-sr{
position:absolute;width:1px;height:1px;padding:0;
margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
white-space:nowrap;border:0;
}
.biblia-hero::before{
content:'';position:absolute;top:-40px;right:-40px;
width:160px;height:160px;
border:2px solid rgba(255,255,255,.10);border-radius:50%;
pointer-events:none;
}
.biblia-hero::after{
content:'';position:absolute;bottom:-60px;left:-30px;
width:240px;height:240px;
border:2px solid rgba(255,255,255,.06);border-radius:50%;
pointer-events:none;
}
.biblia-hero-badge{
display:inline-block;font-size:11px;font-weight:800;
text-transform:uppercase;letter-spacing:3px;
color:#ffd9a8;background:rgba(255,200,120,.18);
padding:7px 18px;border-radius:99px;margin-bottom:18px;
position:relative;z-index:2;
}
.biblia-hero h1{
font-family:'Instrument Serif',Georgia,serif;
font-style:italic;font-weight:400;
font-size:2.4rem;line-height:1.1;
margin-bottom:14px;color:#fff;
position:relative;z-index:2;
}
.biblia-hero p{
font-size:.95rem;color:rgba(255,255,255,.82);
max-width:740px;margin:0 auto 16px;
line-height:1.55;
position:relative;z-index:2;
}
.biblia-hero-stats{
display:flex;justify-content:center;
gap:40px;margin-top:24px;
position:relative;z-index:2;
}
.biblia-hero-stat{text-align:center}
.biblia-hero-stat strong{
display:block;font-size:1.9rem;font-weight:900;
color:#ffb56b;line-height:1;
}
.biblia-hero-stat span{
font-size:11px;color:rgba(255,255,255,.65);
text-transform:uppercase;letter-spacing:1px;
font-weight:600;margin-top:4px;display:inline-block;
}
.biblia-hero-img-wrap{
margin:6px auto 0;max-width:1050px;
position:relative;z-index:2;
}
.biblia-hero-img-wrap img{
width:100%;display:block;
border-radius:10px;
box-shadow:0 8px 30px rgba(0,0,0,.25);
height:auto;
}
@media (max-width:720px){
.biblia-hero{padding:22px 20px 18px}
.biblia-hero-imagotipo{max-width:340px;margin-bottom:10px}
.biblia-hero p{font-size:.88rem;margin-bottom:12px}
.biblia-hero-img-wrap{margin-top:4px}
.biblia-hero-stats{flex-direction:column;gap:16px}
.biblia-hero-stat strong{font-size:1.6rem}
}
/* ============================================================
* BIB-PAGER · Top y Bottom — 2026-05-07
* Navegación anterior/siguiente entre capítulos.
* Top: barra fina justo bajo .bib-mast.
* Bottom: par de tarjetas crema con textura, antes de "Sigue leyendo".
* ============================================================ */
/* PAGER TOP --------------------------------------------------- */
.bib-pager-top{background:#fff;border-bottom:1px solid #f0e0bf;padding:11px 24px}
.bib-pager-top__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.bib-pager-top__btn{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:#9a4519;text-decoration:none;padding:6px 10px;border-radius:6px;transition:all .15s ease}
.bib-pager-top__btn:hover{background:rgba(192,86,33,.08);color:#c05621}
.bib-pager-top__btn.disabled{opacity:.35;pointer-events:none;color:#71717a;cursor:default}
.bib-pager-top__btn svg{flex-shrink:0;width:16px;height:16px}
.bib-pager-top__btn-text{display:flex;flex-direction:column;line-height:1.2}
.bib-pager-top__btn-meta{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:#a1a1aa;font-weight:700;display:block;line-height:1;margin-bottom:2px}
.bib-pager-top__btn-label{display:inline-block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bib-pager-top__btn[rel="next"]{text-align:right}
.bib-pager-top__counter{font-size:.72rem;font-weight:700;color:#71717a;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.bib-pager-top__counter strong{color:#c05621}
@media (max-width:720px){
.bib-pager-top{padding:9px 14px}
.bib-pager-top__btn-label{display:none}
.bib-pager-top__btn-meta{font-size:.62rem;letter-spacing:.05em}
}
/* PAGER BOTTOM ------------------------------------------------ */
.bib-pager-bottom{background:#fdf6e9;border-top:1px solid #f0e0bf;border-bottom:1px solid #f0e0bf;margin:48px 0 0;padding:32px 24px;position:relative;overflow:hidden}
.bib-pager-bottom::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml;utf8,");opacity:.4;mix-blend-mode:multiply}
.bib-pager-bottom__inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px;position:relative;z-index:2}
.bib-pager-bottom__card{display:flex;align-items:center;gap:18px;background:rgba(255,255,255,.7);backdrop-filter:blur(2px);border:1px solid #f0e0bf;border-radius:10px;padding:18px 22px;text-decoration:none;color:inherit;transition:all .2s ease}
.bib-pager-bottom__card:hover{border-color:#c05621;box-shadow:0 4px 16px rgba(192,86,33,.12);transform:translateY(-2px)}
.bib-pager-bottom__card.next{flex-direction:row-reverse;text-align:right}
.bib-pager-bottom__num{flex-shrink:0;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:2.6rem;font-weight:400;color:#c05621;line-height:1}
.bib-pager-bottom__num--dot{color:#a1a1aa;font-style:normal}
.bib-pager-bottom__num--icon{width:42px;height:42px;color:#9a4519}
.bib-pager-bottom__num--icon svg{width:42px;height:42px}
.bib-pager-bottom__body{flex:1;min-width:0}
.bib-pager-bottom__meta{font-size:.65rem;font-weight:700;color:#9a4519;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.bib-pager-bottom__card.next .bib-pager-bottom__meta{justify-content:flex-end}
.bib-pager-bottom__title{font-size:1rem;font-weight:600;color:#1a0f06;line-height:1.3}
.bib-pager-bottom__card.disabled{opacity:.55;pointer-events:none;background:rgba(255,255,255,.4);cursor:default}
.bib-pager-bottom__card--end{background:rgba(192,86,33,.08);border-color:#fed7aa}
.bib-pager-bottom__counter{text-align:center;font-size:.75rem;font-weight:700;color:#71717a;letter-spacing:.1em;text-transform:uppercase;margin-top:18px;position:relative;z-index:2}
.bib-pager-bottom__counter strong{color:#c05621;font-size:.95rem}
@media (max-width:720px){
.bib-pager-bottom{padding:24px 14px;margin-top:36px}
.bib-pager-bottom__inner{grid-template-columns:1fr;gap:10px}
.bib-pager-bottom__num{font-size:2.1rem}
.bib-pager-bottom__num--icon{width:34px;height:34px}
.bib-pager-bottom__num--icon svg{width:34px;height:34px}
.bib-pager-bottom__title{font-size:.92rem}
}