/* ============================================================
   American Vault — Blog (editorial, autocontenido)
   Carga solo este CSS + Google Fonts (Fraunces + Jost).
   No depende de styles.css del catalogo.
   ============================================================ */
:root { --bk:#0d0d0f; --mut:#5d5d63; --soft:#9a9aa0; --line:#ececec; --bg:#fff; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--bk); font-family:'Jost',system-ui,sans-serif; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; height:auto; display:block; }

/* Header */
.b-header { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.b-wordmark { font-family:'Fraunces',serif; font-size:1.15rem; text-decoration:none; color:var(--bk); }
.b-nav { display:flex; align-items:center; gap:16px; font-size:.85rem; }
.b-nav a { text-decoration:none; color:var(--soft); }
.b-nav a:hover { color:var(--bk); }
.b-nav a.b-wa { color:var(--bk); }

/* Contenedor de lectura */
.b-wrap { max-width:760px; margin:0 auto; padding:0 20px; }

/* Hero editorial */
.b-rule { display:flex; align-items:center; justify-content:center; gap:24px; max-width:380px; margin:48px auto clamp(26px,5vw,44px); }
.b-rule span { flex:1; height:1px; background:var(--bk); opacity:.16; }
.b-rule img { width:22px; height:auto; opacity:.7; }
.b-crumb { text-align:center; font-size:.76rem; color:var(--soft); margin:0 0 14px; }
.b-crumb a { color:var(--soft); text-decoration:none; }
.b-crumb a:hover { color:var(--bk); }
.b-eyebrow { text-align:center; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mut); margin:0 0 12px; }
.b-h1 { font-family:'Fraunces',serif; font-weight:400; font-size:clamp(2rem,5vw,3rem); text-align:center; margin:0 0 14px; line-height:1.06; }
.b-lede { text-align:center; color:var(--mut); max-width:600px; margin:0 auto; }

/* Lista de posts */
.b-list { margin:38px 0 60px; }
.b-card { display:block; text-decoration:none; padding:26px 0; border-top:1px solid var(--line); transition:opacity .2s; }
.b-list .b-card:last-child { border-bottom:1px solid var(--line); }
.b-card:hover { opacity:.65; }
.b-card-kicker { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin:0 0 6px; }
.b-card-title { font-family:'Fraunces',serif; font-weight:400; font-size:1.5rem; margin:0 0 8px; line-height:1.2; }
.b-card-ex { color:var(--mut); margin:0; font-size:.95rem; }
.b-card-more { display:inline-block; margin-top:12px; font-size:.85rem; }

/* Articulo */
.b-article { padding:6px 0 36px; }
.b-article .b-h1 { text-align:left; }
.b-article .b-crumb { text-align:left; margin-bottom:18px; }
.b-meta { color:var(--soft); font-size:.8rem; margin:0 0 30px; }
.b-prose { font-size:1.05rem; }
.b-prose p { margin:0 0 18px; }
.b-prose h2 { font-family:'Fraunces',serif; font-weight:400; font-size:1.5rem; margin:34px 0 12px; line-height:1.2; }
.b-prose h3 { font-size:1.1rem; margin:24px 0 8px; }
.b-prose ul, .b-prose ol { margin:0 0 18px; padding-left:22px; }
.b-prose li { margin:0 0 8px; }
.b-prose a { color:var(--bk); text-underline-offset:3px; }
.b-prose strong { font-weight:600; }

/* CTA dentro del articulo */
.b-cta { margin:34px 0; padding:24px; border:1px solid var(--line); border-radius:14px; background:#fafafa; }
.b-cta p { margin:0 0 14px; }
.b-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:100px; background:var(--bk); color:#fff; text-decoration:none; font-size:.9rem; }
.b-btn:hover { opacity:.88; }
.b-btn-ghost { background:transparent; color:var(--bk); border:1px solid var(--bk); margin-left:8px; }

/* Footer */
.b-footer { border-top:1px solid var(--line); padding:32px 20px; text-align:center; color:var(--soft); font-size:.8rem; line-height:1.9; }
.b-footer a { color:var(--bk); }

@media (max-width:600px) {
  .b-prose { font-size:1rem; }
  .b-btn-ghost { margin-left:0; margin-top:8px; }
}