/* ═══════════════════════════════════════════════════════════════════════
   blog.css — Plantilla compartida de los ARTÍCULOS de blog de caleaguilar.com
   ───────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de site.css, en cada /blog/*.html y /en/blog/*.html.
   Contiene solo lo específico de la plantilla de artículo (hero, prose,
   pull-quote, divisor, firma, share-bar, FAQ, CTA, footer). Los tokens y
   el chrome global (nav, MBN, botones, amber, fade-up) viven en site.css.

   Es superset: incluye reglas de FAQ (#article-faq) y del divisor (.orn)
   aunque un artículo dado use solo algunas — las no usadas son inertes.

   Paso previo a la migración del blog a SSG (ver "Pending" en CLAUDE.md):
   esta hoja se convertirá en el CSS del layout de artículo del generador.
   ═══════════════════════════════════════════════════════════════════════ */

body { background: var(--d-bg); } /* base oscura explícita del artículo */

h1, h2 {
  font-family: 'Cormorant Garamond', serif; line-height: 1.1; font-weight: 300;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1; font-optical-sizing: auto;
  color: var(--d-text);
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.014em; }
h1 em, h2 em { font-style: italic; color: var(--gold); font-weight: 300; }

.container { max-width: 1100px; margin-inline: auto; }
.container--article { max-width: 680px; margin-inline: auto; padding: 0 24px; }

/* ══════════════════ ARTICLE HERO ══════════════════ */
#article-hero { padding: 150px 24px 56px; background: var(--d-bg); background-image: radial-gradient(ellipse 70% 50% at 50% 0%, oklch(18% 0.07 290) 0%, transparent 70%); }
.article-eyebrow-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.reading-time { font-size:12px; color:var(--d-muted); letter-spacing:0.04em; display:flex; align-items:center; gap:6px; }
.reading-time svg { width:13px; height:13px; opacity:0.7; }
#article-hero h1 { margin-bottom:16px; }
.article-dek { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(1.05rem,2vw,1.3rem); color:var(--purple); line-height:1.5; max-width:56ch; margin-bottom:28px; }
.article-meta-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--d-muted); padding-top:22px; border-top:1px solid var(--d-border); }
.article-meta-row .dot { width:3px; height:3px; border-radius:50%; background:var(--d-faint); }
.byline-compact { display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.byline-compact img { width:26px; height:26px; border-radius:50%; object-fit:cover; border:1px solid var(--d-border); flex-shrink:0; }
.byline-link { color:var(--d-text); border-bottom:1px solid transparent; transition:border-color 180ms var(--ease-out), color 180ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .byline-compact:hover .byline-link { color:var(--gold); border-color:var(--gold); } }

/* ── METHODOLOGY NOTE ── */
.methodology-note { max-width:70ch; margin:20px auto 0; font-family:'Inter',sans-serif; font-style:italic; font-size:13px; color:var(--l-muted); line-height:1.6; }

/* ══════════════════ ARTICLE BODY — editorial reading comfort ══════════════════ */
#article-body { background: var(--l-bg); border-top:1px solid var(--l-border-gold); padding: 72px 24px 96px; }
.prose { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:20px; line-height:1.72; color:var(--l-text); max-width:70ch; margin-inline:auto; }
.prose p { margin-bottom: 28px; }
.prose p.lead { font-size:22px; color:var(--l-text); }
.prose strong { color: var(--l-text); font-weight: 600; }
.prose h2 { font-family:'DM Serif Display',serif; font-weight:400; color:var(--l-text); font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-0.01em; margin: 52px 0 22px; line-height:1.2; }
.prose h2:first-child { margin-top: 0; }
.prose blockquote.pull-quote {
  margin: 40px 0; padding: 24px 0; border-top:1px solid var(--l-border-gold); border-bottom:1px solid var(--l-border-gold);
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.35rem; color:var(--l-text); line-height:1.5;
}
.prose ul { margin: 0 0 28px; padding-left: 24px; }
.prose li { margin-bottom: 10px; }
/* divisor ornamental entre partes de un relato */
.prose .orn { text-align:center; color:var(--gold); margin:44px 0; font-size:13px; letter-spacing:0.5em; }

/* ── AUTHOR SIGNATURE ── */
.author-sig { max-width:70ch; margin: 56px auto 0; display:flex; align-items:center; gap:16px; text-decoration:none; padding-top:32px; border-top:1px solid var(--l-border-gold); }
.author-sig img { width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--l-border-gold); }
.author-sig-name { display:block; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem; color:var(--l-text); line-height:1.3; transition:color 180ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .author-sig:hover .author-sig-name { color:var(--purple-rich); } }
.author-sig-tagline { display:block; font-family:'Inter',sans-serif; font-size:12px; color:var(--l-muted); margin-top:2px; }

/* ── SHARE BAR ── */
.share-bar { max-width:70ch; margin: 32px auto 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.share-label { font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--l-muted); margin-right:6px; }
.share-btn { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:2px; border:1px solid var(--l-border-gold); background:var(--l-surface); color:var(--l-text); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition:border-color 180ms var(--ease-out), color 180ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .share-btn:hover { border-color:var(--purple-rich); color:var(--purple-rich); } }
.share-btn svg { width:16px; height:16px; }
.share-confirm { font-size:12px; color:var(--purple-rich); opacity:0; transition:opacity 200ms var(--ease-out); }
.share-confirm.visible { opacity:1; }

/* ── FAQ (opcional por artículo) ── */
#article-faq { background: var(--d-bg); border-top:1px solid var(--d-border); padding: 88px 24px; }
#article-faq h2 { text-align:center; margin-bottom: 48px; }
.faq-list { max-width:720px; margin-inline:auto; display:flex; flex-direction:column; gap:2px; background:var(--d-border); border:1px solid var(--d-border); border-radius:2px; overflow:hidden; }
.faq-item { background:var(--d-surface); padding:24px 28px; }
.faq-item h3 { font-family:'Inter',sans-serif; font-style:normal; font-size:15px; font-weight:600; color:var(--d-text); margin-bottom:10px; }
.faq-item p { font-family:'Inter',sans-serif; font-size:14px; color:var(--d-muted); line-height:1.7; max-width:none; }

/* ── NEXT STEP CTA ── */
#article-cta { background: var(--l-surface); border-top:1px solid var(--l-border); padding: 80px 24px; text-align:center; }
#article-cta h2 { color:var(--l-text); margin-bottom:16px; }
#article-cta p { font-family:'Inter',sans-serif; font-size:15px; color:var(--l-muted); max-width:52ch; margin:0 auto 32px; }

/* ── FOOTER ── */
footer { background:var(--d-bg); border-top:1px solid var(--d-border); padding:36px 40px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-brand { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem; color:var(--gold); }
.footer-links { display:flex; gap:24px; }
.footer-links a { font-size:12px; color:var(--d-muted); text-decoration:none; transition:color 160ms; }
@media (hover:hover) and (pointer:fine) { .footer-links a:hover { color:var(--d-text); } }
footer .footer-copy { font-size:12px; color:var(--d-muted); }

@media (max-width: 600px) {
  #article-hero { padding: 120px 20px 40px; }
  #article-body { padding: 56px 20px 72px; }
  .prose { font-size:18px; }
  .prose p.lead { font-size:19px; }
  footer { flex-direction:column; text-align:center; }
  .footer-links { justify-content:center; flex-wrap:wrap; }
}