/* Estilos del blog. Usa los colores y tipografías de la web (Gloock + Manrope). */
.blog-page {
  --blog-bg: #f0efeb;
  --blog-card: #fdfdfd;
  --blog-ink: #0c0c0c;
  --blog-muted: #545454;
  --blog-accent: #3a4768;
  --blog-accent-dark: #2e3853;
  --blog-line: #0c0c0c26;
  background: var(--blog-bg);
  color: var(--blog-ink);
  font-family: Manrope, sans-serif;
}
.blog-page .blog-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.blog-page .blog-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.blog-page h1, .blog-page h2, .blog-page h3, .blog-page h4 { font-family: Gloock, serif; font-weight: 400; color: var(--blog-ink); }

/* ---- Cabecera del listado ---- */
.blog-hero { padding: 88px 0 48px; text-align: center; }
.blog-tagline { display: inline-block; font-family: Manrope, sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--blog-ink); margin-bottom: 16px; }
.blog-hero h1 { margin: 0 auto 20px; max-width: 18ch; }
.blog-hero p { max-width: 600px; margin: 0 auto; font-size: 1.125rem; line-height: 1.65; color: var(--blog-ink); text-wrap: balance; }
.blog-hero p strong { font-weight: 700; }

/* ---- Tarjetas del listado ---- */
.blog-posts { padding: 24px 0 96px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; }
.blog-card { display: flex; flex-direction: column; background: var(--blog-card); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 0 var(--blog-line); transition: transform .25s ease, box-shadow .25s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px #0c0c0c1a; }
.blog-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #e1dfd7; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-pill { position: absolute; top: 16px; left: 16px; background: var(--blog-card); color: var(--blog-accent-dark); font-size: .75rem; font-weight: 700; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; }
.blog-card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-card-body h2 { font-size: 1.5rem; line-height: 1.25; margin: 0; }
.blog-card-body p { margin: 0; line-height: 1.6; color: var(--blog-muted); }
.blog-meta { margin-top: auto; padding-top: 6px; display: flex; gap: 14px; align-items: center; font-size: .85rem; color: var(--blog-muted); }
.blog-more { color: var(--blog-accent); font-weight: 700; }
.blog-soon { margin: 56px auto 0; text-align: center; font-size: 1.125rem; color: var(--blog-ink); }

/* ---- Artículo ---- */
.blog-breadcrumb { padding: 40px 0 8px; font-size: .9rem; color: var(--blog-muted); }
.blog-breadcrumb a { color: var(--blog-accent); text-decoration: none; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.article-header { padding: 16px 0 32px; }
.article-cat { display: inline-block; background: var(--blog-accent); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; }
.article-header h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.15; margin: 0 0 20px; }
.article-dek { font-size: 1.2rem; line-height: 1.6; color: var(--blog-muted); margin: 0 0 28px; }
.author-row { display: flex; align-items: center; gap: 14px; }
.author-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: none; }
.author-name { font-weight: 700; }
.author-sub { font-size: .88rem; color: var(--blog-muted); }
.article-hero-img { margin: 8px auto 48px; max-width: 1000px; padding: 0 24px; }
.article-hero-img img { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 20px; display: block; }
.article-body { font-size: 1.12rem; line-height: 1.85; }
.article-body p { margin: 0 0 1.5em; }
.article-body h2 { font-size: 1.9rem; line-height: 1.2; margin: 2em 0 .6em; }
.article-body h3 { font-size: 1.4rem; margin: 1.8em 0 .6em; }
.article-body ul { margin: 0 0 1.6em; padding-left: 1.3em; }
.article-body li { margin-bottom: .6em; }
.article-body strong { color: var(--blog-accent-dark); }
.article-pullquote { font-family: Gloock, serif; font-size: 1.6rem; line-height: 1.4; color: var(--blog-accent-dark); border-left: 4px solid var(--blog-accent); padding: 8px 0 8px 26px; margin: 2em 0; }
.article-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--blog-accent-dark); color: #fff; border-radius: 20px; padding: 32px 36px; margin: 2.4em 0; }
.article-cta h3 { color: #fff; margin: 4px 0 8px; font-size: 1.6rem; }
.article-cta p { margin: 0; color: #ffffffcc; line-height: 1.5; }
.article-cta-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffffff99; }
.blog-btn { display: inline-block; background: #fff; color: var(--blog-accent-dark); font-weight: 700; text-decoration: none; padding: 14px 28px; border-radius: 999px; transition: transform .2s ease; }
.blog-btn:hover { transform: translateY(-2px); }

.share-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 24px 0; margin-top: 16px; border-top: 1px solid var(--blog-line); border-bottom: 1px solid var(--blog-line); }
.share-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.share-tag { background: #e1dfd7; font-size: .82rem; padding: 6px 12px; border-radius: 999px; }
.share-icons { display: flex; gap: 10px; }
.share-icons a, .share-icons button { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--blog-line); background: transparent; color: var(--blog-accent-dark); cursor: pointer; transition: background .2s ease; }
.share-icons a:hover, .share-icons button:hover { background: #e1dfd7; }
.share-icons svg { width: 20px; height: 20px; }

.author-box { display: flex; gap: 20px; align-items: flex-start; background: var(--blog-card); border-radius: 20px; padding: 28px; margin: 40px auto 24px; }
.author-box .author-avatar { width: 72px; height: 72px; }
.author-box h4 { margin: 0 0 8px; font-size: 1.25rem; }
.author-box p { margin: 0; line-height: 1.6; color: var(--blog-muted); }
.blog-back { text-align: center; padding: 24px 0 96px; }
.blog-back a { color: var(--blog-accent); font-weight: 700; text-decoration: none; }
.blog-back a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .blog-hero { padding: 56px 0 32px; }
  .blog-page .blog-wrap { padding: 0 20px; }
  .article-cta { padding: 26px 24px; }
  .author-box { flex-direction: column; }
}

.article-note { font-size: .92rem; line-height: 1.6; color: var(--blog-muted); border-top: 1px solid var(--blog-line); padding-top: 20px; margin-top: 2em; }
.related-title { font-size: 1.8rem; margin: 56px 0 28px; text-align: center; }

/* Resumen, preguntas frecuentes, fuentes y autoría (SEO / AEO) */
.article-summary { background: #fdfdfd; border-left: 4px solid var(--blog-accent); border-radius: 0 16px 16px 0; padding: 20px 24px; margin: 0 0 2em; }
.article-summary-label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blog-accent); margin-bottom: 6px; }
.article-summary p { margin: 0; font-size: 1.05rem; line-height: 1.7; }
.article-faq { margin-top: 2.4em; border-bottom: 1px solid var(--blog-line); }
.article-faq h2 { margin-bottom: .4em; }
.article-faq details { border-top: 1px solid var(--blog-line); }
.article-faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after { content: "+"; font-weight: 400; font-size: 1.4rem; line-height: 1; }
.article-faq details[open] summary::after { content: "–"; }
.article-faq details p { margin: 0 0 18px; }
.article-sources { margin-top: 2em; }
.article-sources h2 { font-size: 1.3rem; margin: 0 0 .6em; }
.article-sources ul { font-size: .95rem; }
.article-reviewed { font-size: .9rem; line-height: 1.6; color: var(--blog-muted); margin: 1em 0 0; }
/* Filtros por tema */
.blog-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 36px auto 0; max-width: 920px; }
.blog-chip { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--blog-line); background: #fdfdfd; color: var(--blog-ink); font-weight: 600; font-size: .95rem; text-decoration: none; transition: border-color .2s ease, background .2s ease; }
.blog-chip:hover { border-color: var(--blog-accent-dark); }
.blog-chip.is-active { background: var(--blog-accent-dark); border-color: var(--blog-accent-dark); color: #fff; }

/* Cabecera del artículo centrada */
.blog-page .blog-breadcrumb { padding-top: 120px; }
.article-header { text-align: center; padding: 40px 0 44px; }
.article-cat-label { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blog-accent-dark); text-decoration: none; margin-bottom: 22px; }
.article-cat-label:hover { text-decoration: underline; }
.article-header h1 { margin-left: auto; margin-right: auto; text-wrap: balance; }
.article-dek { max-width: 36em; margin-left: auto; margin-right: auto; text-wrap: balance; }
.article-byline { margin-top: 28px; }
.article-byline .author-name { font-weight: 700; }
.article-byline .author-sub { font-size: .9rem; color: var(--blog-muted); margin-top: 2px; }
.article-hero-credit { font-size: .78rem; color: var(--blog-muted); text-align: right; margin: 8px 4px 0; }
@media (max-width: 600px) { .blog-page .blog-breadcrumb { padding-top: 96px; } .blog-chip { padding: 8px 14px; font-size: .88rem; } }