/* ═══════════════════════════════════════════════════════
   PELUGEST BLOG — Identidad "Estudio" (editorial cálido de salón)
   ═══════════════════════════════════════════════════════ */
:root {
    /* Fondos cálidos */
    --bg: #F6F4EF; --bg-2: #E4EAE5; --surface: #FFFFFF; --surface-2: #ECEFEA;
    /* Tinta espresso */
    --ink: #14211D; --muted: #5A6A64; --line: rgba(20,33,29,0.12);
    /* Acento cobre/terracota */
    --acc: #1B5044; --acc-hi: #256B5B; --acc-dark: #0E3A31; --acc-ink: #FFFDF9;
    /* Secundarios del sector */
    --sage: #3E5C50; --sage-soft: rgba(62,92,80,0.10);
    --gold: #C9A227; --gold-dark: #8A6D1A;
    /* Alias para estilos inline existentes */
    --text: var(--ink); --text-m: var(--muted); --border: var(--line);
    --font: 'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
    --display: 'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
    --r-card: 20px; --r-pill: 999px;
    --shadow-1: 0 2px 14px rgba(20,33,29,0.07);
    --shadow-2: 0 14px 38px rgba(20,33,29,0.12);
    --max: 720px;
}

/* ═══════════════════════════════════════════════════════
   GLOBALS
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { font-family: var(--font); font-size: 17px; background: var(--bg); color: var(--ink); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased }
img { max-width: 100%; height: auto }
a { color: var(--acc-dark); text-decoration: none }
a:hover { text-decoration: underline }
:focus-visible { outline: 2px solid var(--acc-dark); outline-offset: 3px; border-radius: 4px }
::selection { background: var(--acc); color: var(--acc-ink) }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important }
    html { scroll-behavior: auto }
}

.w { max-width: var(--max); margin: 0 auto; padding: 0 24px }
.w-wide { max-width: 1100px; margin: 0 auto; padding: 0 24px }

/* ═══════════════════════════════════════════════════════
   BREADCRUMBS
   ═══════════════════════════════════════════════════════ */
.breadcrumbs { padding: 1.25rem 0 0; font-size: .82rem; color: var(--muted) }
.breadcrumbs a { color: var(--muted); text-decoration: none; transition: color .2s }
.breadcrumbs a:hover { color: var(--acc-dark) }
.breadcrumbs span { margin: 0 .4rem; opacity: .5 }

/* ═══════════════════════════════════════════════════════
   BLOG HEADER (index + category)
   ═══════════════════════════════════════════════════════ */
.blog-header { padding: 3.5rem 0 2.5rem; text-align: center; background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%) }
.blog-header h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.12; letter-spacing: -.015em; color: var(--ink); margin-bottom: .85rem }
.blog-header h1 em { font-style: italic; color: var(--acc-dark) }
.blog-header p { color: var(--muted); font-size: 1.05rem; max-width: 560px; margin: 0 auto }

.cat-header { padding: 2.25rem 0; text-align: center; background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%) }
.cat-header h1 { font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: -.015em; margin-bottom: .6rem }
.cat-header p { color: var(--muted); font-size: .98rem; max-width: 560px; margin: 0 auto; line-height: 1.7 }

/* ═══════════════════════════════════════════════════════
   CATEGORY NAV PILLS (ticket de salón)
   ═══════════════════════════════════════════════════════ */
.cat-nav { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem }
.cat-nav a { font-size: .84rem; padding: .5rem 1.1rem; min-height: 40px; display: inline-flex; align-items: center; border-radius: var(--r-pill); border: 1px dashed rgba(14,58,49,0.45); color: var(--muted); background: var(--surface); text-decoration: none; font-weight: 600; transition: color .2s, border-color .2s, background .2s }
.cat-nav a:hover, .cat-nav a.active { border-color: var(--acc-dark); color: var(--acc-dark); background: rgba(27,80,68,0.08); text-decoration: none }

/* ═══════════════════════════════════════════════════════
   ARTICLES GRID (mobile-first: 1 columna)
   ═══════════════════════════════════════════════════════ */
.articles-grid { display: grid; grid-template-columns: 1fr; gap: 16px; padding-bottom: 3rem }

/* ═══════════════════════════════════════════════════════
   ARTICLE CARD
   ═══════════════════════════════════════════════════════ */
.article-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ink);
    box-shadow: var(--shadow-1);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.article-card:hover {
    box-shadow: var(--shadow-2);
    border-color: rgba(27,80,68,0.45);
    transform: translateY(-4px);
    text-decoration: none;
}

/* Card image */
.article-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.article-card:hover .article-card-img { transform: scale(1.03) }
.article-card-img-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--bg-2), var(--surface-2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    opacity: .6;
    transition: transform .4s ease;
}
.article-card:hover .article-card-img-placeholder { transform: scale(1.03) }

/* Card body */
.article-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Category badge — chip dashed tipo ticket */
.article-card .cat {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 8px;
    /* Cobre por defecto */
    border: 1px dashed rgba(14,58,49,0.5);
    background: rgba(27,80,68,0.06);
    color: var(--acc-dark);
}
/* Variantes por categoría (cobre / salvia / dorado / espresso) */
.article-card .cat[data-cat="gestion"] { border-color: rgba(14,58,49,0.5); background: rgba(27,80,68,0.06); color: var(--acc-dark) }
.article-card .cat[data-cat="clientes"] { border-color: rgba(138,109,26,0.5); background: rgba(201,162,39,0.10); color: var(--gold-dark) }
.article-card .cat[data-cat="equipo"], .article-card .cat[data-cat="clases-y-equipo"] { border-color: rgba(62,92,80,0.5); background: var(--sage-soft); color: var(--sage) }
.article-card .cat[data-cat="finanzas-y-normativa"] { border-color: rgba(20,33,29,0.4); background: rgba(20,33,29,0.05); color: var(--ink) }
.article-card .cat[data-cat="marketing"] { border-color: rgba(62,92,80,0.5); background: var(--sage-soft); color: var(--sage) }

/* Card title */
.article-card h2 {
    font-family: var(--display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 10px 0 8px;
    line-height: 1.3;
    color: var(--ink);
    transition: color .2s ease;
}
.article-card:hover h2 { color: var(--acc-dark) }

/* Card excerpt */
.article-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: .75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card date */
.article-card .meta {
    font-size: 13px;
    color: var(--muted);
    opacity: .8;
    margin-top: auto;
}

/* Card read-more link */
.article-card .read-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--acc-dark);
    text-decoration: none;
    margin-top: auto;
    padding-top: 4px;
}
.article-card:hover .read-more { text-decoration: underline }

/* ═══════════════════════════════════════════════════════
   ESTADO VACÍO — "afilando las tijeras"
   ═══════════════════════════════════════════════════════ */
.blog-empty {
    background: var(--surface);
    border: 1.5px dashed rgba(27,80,68,0.45);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-1);
    padding: 3.5rem 1.5rem;
    text-align: center;
    margin: 0 0 3rem;
}
.blog-empty img { display: block; margin: 0 auto 1.5rem }
.blog-empty h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: -.01em; line-height: 1.2; margin-bottom: .6rem }
.blog-empty h2 em { font-style: italic; color: var(--acc-dark) }
.blog-empty p { color: var(--muted); max-width: 480px; margin: 0 auto 1.75rem }
.blog-empty-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap }
.blog-empty-note { font-size: .82rem !important; margin: 1rem auto 0 !important }
.btn-main { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; background: var(--acc); color: var(--acc-ink); font-weight: 600; font-size: 1rem; padding: .9rem 1.9rem; border-radius: var(--r-pill); text-decoration: none; min-height: 48px; box-shadow: 0 10px 26px rgba(27,80,68,0.28); transition: transform .2s, background .2s }
.btn-main:hover { background: var(--acc-hi); transform: translateY(-2px); text-decoration: none }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1.5px solid rgba(20,33,29,0.35); color: var(--ink); font-weight: 600; padding: .9rem 1.7rem; border-radius: var(--r-pill); text-decoration: none; min-height: 48px; transition: border-color .2s, background .2s }
.btn-ghost:hover { border-color: var(--acc-dark); background: rgba(27,80,68,0.10); text-decoration: none }

/* ═══════════════════════════════════════════════════════
   ARTICLE SINGLE — Header
   ═══════════════════════════════════════════════════════ */
.article-header { padding: 40px 0 1.5rem }

/* Article category badge (single page) */
.article-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-bottom: .85rem;
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    text-decoration: none;
    transition: opacity .2s;
    border: 1px dashed rgba(14,58,49,0.5);
    background: rgba(27,80,68,0.06);
    color: var(--acc-dark);
}
.article-cat[data-cat="gestion"] { border-color: rgba(14,58,49,0.5); background: rgba(27,80,68,0.06); color: var(--acc-dark) }
.article-cat[data-cat="clientes"] { border-color: rgba(138,109,26,0.5); background: rgba(201,162,39,0.10); color: var(--gold-dark) }
.article-cat[data-cat="equipo"], .article-cat[data-cat="clases-y-equipo"] { border-color: rgba(62,92,80,0.5); background: var(--sage-soft); color: var(--sage) }
.article-cat[data-cat="finanzas-y-normativa"] { border-color: rgba(20,33,29,0.4); background: rgba(20,33,29,0.05); color: var(--ink) }
.article-cat[data-cat="marketing"] { border-color: rgba(62,92,80,0.5); background: var(--sage-soft); color: var(--sage) }
.article-cat:hover { opacity: .8; text-decoration: none }

.article-header h1 { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 4.5vw, 2.5rem); letter-spacing: -.015em; line-height: 1.15; margin-bottom: 1rem }
.article-meta { color: var(--muted); font-size: 14px; display: flex; gap: 1.5rem; flex-wrap: wrap }

/* Respuesta rápida antes de la portada: satisface la intención sin ocultar la imagen */
.article-summary-wrap { margin: 0 auto 28px }
.article-summary {
    background: linear-gradient(135deg, #FFFDF9 0%, var(--surface-2) 100%);
    border: 1px solid rgba(27,80,68,.2);
    border-left: 4px solid var(--acc);
    border-radius: 0 var(--r-card) var(--r-card) 0;
    padding: 20px 24px;
    box-shadow: var(--shadow-1);
}
.article-summary-title {
    margin: 0 0 .75rem;
    color: var(--acc-dark);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.article-summary ul { list-style: none; margin: 0; padding: 0 }
.article-summary li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--ink);
    font-size: .93rem;
    line-height: 1.55;
}
.article-summary li + li { margin-top: .55rem }
.article-summary li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .58em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--acc);
    box-shadow: 0 0 0 4px rgba(27,80,68,.1);
}

/* ═══════════════════════════════════════════════════════
   ARTICLE SINGLE — Featured Image
   ═══════════════════════════════════════════════════════ */
.article-featured-img {
    max-width: 960px;
    margin: 0 auto 32px;
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.article-featured-img img { width: 100%; height: auto; display: block }

/* ═══════════════════════════════════════════════════════
   ARTICLE SINGLE — Body Typography
   ═══════════════════════════════════════════════════════ */
.article-body { padding-bottom: 2rem }
.article-body p {
    font-size: 18px;
    color: var(--ink);
    line-height: 1.75;
    margin-bottom: 1.5em;
}

/* Headings */
.article-body h2 {
    font-family: var(--display);
    font-size: 28px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    margin: 2.5em 0 0.75em;
    letter-spacing: -.01em;
}
.article-body h3 {
    font-size: 21px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin: 2em 0 0.5em;
}
.article-body h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin: 1.5em 0 0.5em;
}
.article-body strong { color: var(--ink) }

/* Links */
.article-body a {
    color: var(--acc-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(14,58,49,0.4);
    transition: color .2s, text-decoration-color .2s;
}
.article-body a:hover {
    color: var(--acc);
    text-decoration-color: var(--acc);
}

/* Lists */
.article-body ul, .article-body ol {
    padding-left: 1.5em;
    margin: 0 0 1.5rem;
    color: var(--ink);
}
.article-body li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}
.article-body ul li::marker { color: var(--sage) }
.article-body ol li::marker { color: var(--acc-dark); font-weight: 600 }

/* Navegación corta y estable hacia las respuestas principales */
.article-jump-links {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    padding: 1rem 0;
    margin: .25rem 0 2rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.article-jump-links span { color: var(--muted); font-size: .82rem; font-weight: 600; margin-right: .15rem }
.article-jump-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: .4rem .8rem;
    border: 1px solid rgba(27,80,68,.25);
    border-radius: var(--r-pill);
    background: rgba(27,80,68,.06);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}
.article-jump-links a:hover { background: rgba(27,80,68,.12); text-decoration: none }
.article-anchor-alias { display: block; height: 0; scroll-margin-top: 130px }

.article-visual {
    width: 100%;
    height: auto;
    display: block;
    margin: 1.75rem 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #FAF5EF;
}

.article-callout {
    margin: 1.75rem 0;
    padding: 18px 22px;
    border: 1.5px dashed rgba(194,96,62,.5);
    border-radius: 16px;
    background: #F6EFE7;
}
.article-callout p { margin: 0 !important; font-size: .95rem !important }
.article-callout strong:first-child { color: #9E4A2C }

.article-stat-card {
    margin: 1.75rem 0;
    padding: 22px 24px;
    border: 1px solid rgba(194,96,62,.35);
    border-radius: 16px;
    background: linear-gradient(135deg, #FFF9F4 0%, #F6EFE7 100%);
}
.article-stat-label {
    margin: 0 0 .45rem !important;
    color: #9E4A2C !important;
    font-size: .76rem !important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.article-stat-value { margin: 0 !important; font-size: 1rem !important }
.article-stat-value strong { color: #9E4A2C; font-size: 1.2em }

.article-checklist { list-style: none; padding: 0 !important; counter-reset: verifactu-step }
.article-checklist li {
    counter-increment: verifactu-step;
    position: relative;
    margin: 0 0 .75rem !important;
    padding: 1rem 1rem 1rem 3.6rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 1px 8px rgba(20,33,29,.04);
}
.article-checklist li::before {
    content: counter(verifactu-step);
    position: absolute;
    left: 1rem;
    top: 1rem;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--acc);
    color: var(--acc-ink);
    font-size: .8rem;
    font-weight: 700;
}

/* Blockquotes */
.article-body blockquote {
    border-left: 3px solid var(--acc);
    background: rgba(27,80,68,0.07);
    padding: 16px 20px;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--muted);
    margin: 1.5em 0;
}
.article-body blockquote p { margin-bottom: 0; font-size: 16px; color: inherit }

/* Tables */
.article-body .table-wrapper { overflow-x: auto; margin: 1.5em 0 }
.article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.article-body thead th {
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 12px 16px;
    text-align: left;
}
.article-body td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}
.article-body tbody tr { transition: background .2s }
.article-body tbody tr:hover { background: var(--surface-2) }
.article-body .article-data-table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}
.article-body .article-data-table caption {
    padding: 0 0 .65rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
    text-align: left;
}
.article-body .article-data-table td + td,
.article-body .article-data-table th + th { border-left: 1px solid var(--line) }
.article-body .article-data-table .deadline { color: var(--acc-dark); font-weight: 700 }

/* Inline code */
.article-body code {
    background: var(--bg-2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    color: var(--acc-dark);
}

/* Code blocks */
.article-body pre {
    background: var(--ink);
    color: #ECEFEA;
    padding: 20px 24px;
    border-radius: 12px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.6;
    margin: 1.5em 0;
}
.article-body pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
}

/* Images inside article */
.article-img { margin: 2em 0; border-radius: 12px; overflow: hidden }
.article-img img { width: 100%; height: auto; display: block; border-radius: 12px }
.article-img figcaption { font-size: .82rem; color: var(--muted); text-align: center; padding: .75rem 0 0; font-style: italic }
.article-body > img,
.article-body > p > img {
    max-width: 100%;
    border-radius: 12px;
    margin: 2em 0;
}

/* Horizontal rules — línea de corte punteada */
.article-body hr {
    border: none;
    border-top: 2px dashed rgba(27,80,68,0.35);
    margin: 3em 0;
}

/* ═══════════════════════════════════════════════════════
   INLINE CTA (inside articles) — ticket de salón
   ═══════════════════════════════════════════════════════ */
.article-cta-inline {
    background: var(--surface-2);
    border: 1.5px dashed rgba(27,80,68,0.5);
    border-radius: var(--r-card);
    padding: 24px 28px;
    margin: 2rem 0;
}
.article-cta-inline p { margin-bottom: .75rem !important; font-size: .95rem; color: var(--ink) }
.article-cta-inline .cta-link { color: var(--acc-dark); font-weight: 600; font-size: .95rem; text-decoration: none; transition: opacity .2s }
.article-cta-inline .cta-link:hover { opacity: .8; text-decoration: underline }
.article-cta-inline .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--acc);
    color: var(--acc-ink);
    padding: .7rem 1.5rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    min-height: 44px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(27,80,68,0.26);
    transition: background .2s, transform .2s;
}
.article-cta-inline .cta-btn:hover { background: var(--acc-hi); transform: translateY(-1px); text-decoration: none }

/* ═══════════════════════════════════════════════════════
   CTA BOX — ticket de salón
   ═══════════════════════════════════════════════════════ */
.blog-cta {
    background: var(--surface-2);
    border: 1.5px dashed rgba(27,80,68,0.5);
    border-radius: var(--r-card);
    padding: 2.5rem 1.5rem;
    text-align: center;
    margin-bottom: 3rem;
}
.blog-cta h2 { font-family: var(--display); font-size: 1.35rem; font-weight: 600; margin-bottom: .5rem }
.blog-cta p { color: var(--muted); font-size: .95rem; margin-bottom: 1.25rem; max-width: 480px; margin-left: auto; margin-right: auto }
.blog-cta a.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--acc);
    color: var(--acc-ink);
    padding: .9rem 1.9rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    min-height: 48px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(27,80,68,0.28);
    transition: background .2s, transform .2s;
}
.blog-cta a.cta-btn:hover { background: var(--acc-hi); transform: translateY(-2px); text-decoration: none }

/* ═══════════════════════════════════════════════════════
   RELATED ARTICLES
   ═══════════════════════════════════════════════════════ */
.related { border-top: 2px dashed rgba(27,80,68,0.3); padding: 2.5rem 0 }
.related h2 { font-family: var(--display); font-size: 1.2rem; font-weight: 600; margin-bottom: 1.25rem }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem }
.related-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    box-shadow: var(--shadow-1);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.related-card:hover {
    box-shadow: var(--shadow-2);
    border-color: rgba(27,80,68,0.45);
    transform: translateY(-3px);
    text-decoration: none;
}
.related-card-img { width: 100%; height: 120px; object-fit: cover; display: block; transition: transform .4s ease }
.related-card:hover .related-card-img { transform: scale(1.03) }
.related-card-body { padding: 1rem 1.25rem 1.25rem }
.related-card h3 { font-size: .92rem; font-weight: 600; margin-bottom: .3rem; line-height: 1.35; transition: color .2s }
.related-card:hover h3 { color: var(--acc-dark) }
.related-card .meta { font-size: 13px; color: var(--muted); opacity: .8 }

/* ═══════════════════════════════════════════════════════
   CATEGORIES SECTION (index)
   ═══════════════════════════════════════════════════════ */
.cat-section { padding: 0 0 2rem }
.cat-section h2 { font-family: var(--display); font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem }
.cat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 1.25rem;
    text-decoration: none;
    color: var(--ink);
    box-shadow: var(--shadow-1);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.cat-card:hover {
    box-shadow: var(--shadow-2);
    border-color: rgba(27,80,68,0.45);
    transform: translateY(-3px);
    text-decoration: none;
}
.cat-card-icon { font-size: 1.5rem; margin-bottom: .5rem }
.cat-card h3 { font-size: .95rem; font-weight: 600; margin-bottom: .25rem }
.cat-card p { font-size: .8rem; color: var(--muted); line-height: 1.5 }

/* ═══════════════════════════════════════════════════════
   SIDEBAR — Article layout with TOC (mobile-first: 1 col)
   ═══════════════════════════════════════════════════════ */
.article-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
}
.article-layout .article-content { min-width: 0 }
.article-layout .article-content .w { max-width: none; padding: 0 }

.article-sidebar {
    display: none;
    position: sticky;
    top: 121px; /* header fijo (barra anuncio + nav) = 101px + margen */
    max-height: calc(100vh - 141px);
    overflow-y: auto;
    padding-bottom: 2rem;
}
.article-sidebar::-webkit-scrollbar { width: 3px }
.article-sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px }

.sidebar-block {
    margin-bottom: 1.75rem;
}
.sidebar-block-title {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--acc-dark);
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px dashed rgba(27,80,68,0.3);
}

/* TOC */
.sidebar-toc { list-style: none }
.sidebar-toc li { margin-bottom: .25rem }
.sidebar-toc a {
    display: block;
    font-size: .82rem;
    color: var(--muted);
    text-decoration: none;
    padding: 4px 0 4px 10px;
    border-left: 2px solid transparent;
    line-height: 1.35;
    transition: color .2s, border-color .2s;
}
.sidebar-toc a:hover {
    color: var(--acc-dark);
    text-decoration: none;
}
.sidebar-toc a.active {
    color: var(--acc-dark);
    border-left-color: var(--acc);
    font-weight: 600;
}
.sidebar-toc .toc-h3 { padding-left: 22px; font-size: .78rem }

/* Sidebar related articles */
.sidebar-related a {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    transition: color .2s;
}
.sidebar-related a:last-child { border-bottom: none }
.sidebar-related a:hover { color: var(--acc-dark); text-decoration: none }
.sidebar-related img {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.sidebar-related span {
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.35;
}

/* Sidebar links */
.sidebar-links { list-style: none }
.sidebar-links li { margin-bottom: .15rem }
.sidebar-links a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--muted);
    text-decoration: none;
    padding: 5px 0;
    transition: color .2s;
}
.sidebar-links a:hover { color: var(--acc-dark); text-decoration: none }
.sidebar-links svg { flex-shrink: 0; opacity: .6; color: var(--sage) }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Tablet (>=768px)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .articles-grid { grid-template-columns: repeat(2, 1fr); gap: 20px }
    .cat-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Desktop (>=1025px)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
    .articles-grid { grid-template-columns: repeat(3, 1fr); gap: 24px }
    .blog-header .w, .cat-header .w { max-width: 1100px }
    .article-layout { grid-template-columns: 1fr 260px }
    .article-sidebar { display: block }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Mobile (<768px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .w, .w-wide, .article-layout { padding: 0 16px }
    body { font-size: 16px }

    /* Card adjustments */
    .article-card-body { padding: 14px 16px 16px }

    /* Article single */
    .article-body p { font-size: 16px }
    .article-body h2 { font-size: 24px }
    .article-body h3 { font-size: 20px }
    .article-body h4 { font-size: 17px }

    /* Featured image edge-to-edge visual */
    .article-featured-img { border-radius: 14px; max-width: 100% }

    /* Tables */
    .article-body .table-wrapper { margin-left: -16px; margin-right: -16px; padding: 0 16px }
    .article-body .article-data-table { border: 0; border-radius: 0; background: transparent }
    .article-body .article-data-table caption { padding-left: 1px }
    .article-body .article-data-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }
    .article-body .article-data-table,
    .article-body .article-data-table tbody,
    .article-body .article-data-table tr,
    .article-body .article-data-table td { display: block; width: 100% }
    .article-body .article-data-table tbody { display: grid; gap: .75rem }
    .article-body .article-data-table tr {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--surface);
        box-shadow: 0 1px 8px rgba(20,33,29,.04);
    }
    .article-body .article-data-table td,
    .article-body .article-data-table td + td {
        display: grid;
        grid-template-columns: minmax(105px,.8fr) 1.2fr;
        gap: .75rem;
        padding: .7rem .85rem;
        border: 0;
        border-bottom: 1px solid var(--line);
        font-size: .88rem;
        line-height: 1.45;
    }
    .article-body .article-data-table td:last-child { border-bottom: 0 }
    .article-body .article-data-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .article-summary { padding: 18px 18px 18px 20px }
    .article-summary li { font-size: .88rem }
    .article-jump-links span { width: 100% }
    .article-checklist li { padding: .9rem .9rem .9rem 3.35rem }
    .article-checklist li::before { left: .85rem; top: .9rem }

    /* Estado vacío */
    .blog-empty { padding: 2.5rem 1.25rem }
    .blog-empty-actions .btn-main, .blog-empty-actions .btn-ghost { width: 100% }
}

@media (max-width: 400px) {
    .cat-grid { grid-template-columns: 1fr }
}

/* La capa editorial amplía los componentes de contenido sin alterar header, pie o consentimiento. */
.pg-blog { --max: 760px; --editorial-cream: #faf8f2; --editorial-green: #143e34; --editorial-line: #d7dfd5; background: var(--editorial-cream); overflow-x: clip; }
.pg-blog main { min-width: 0; }
.pg-blog main :where(h1,h2,h3,h4,p,li,a,small,summary) { overflow-wrap: anywhere; }
.pg-blog main :where(h2[id],h3[id],h4[id],section[id],div[id]) { scroll-margin-top: 140px; }
.pg-blog main [hidden] { display: none !important; }
.pg-blog .w-wide { max-width: 1240px; }
.blog-skip-link { position: fixed; left: 16px; top: -100px; z-index: 100000; padding: .8rem 1rem; background: #fff; color: #143e34; border: 2px solid currentColor; border-radius: 8px; font-weight: 700; }
.blog-skip-link:focus { top: 12px; }
.pg-blog .editorial-eyebrow { font-size: .7rem; font-weight: 750; line-height: 1.5; letter-spacing: .15em; text-transform: uppercase; color: #355548; margin: 0 0 .75rem; }
.pg-blog .breadcrumbs { display: flex; flex-wrap: wrap; gap: .35rem .65rem; padding: 1.25rem 0 0; font-size: .76rem; line-height: 1.5; }
.pg-blog .breadcrumbs span { margin: 0; }
.pg-blog .breadcrumbs a { padding: .2rem 0; color: #476355; }

/* Portada: una publicación, no una sucesión de tarjetas equivalentes. */
.pg-blog .blog-header { text-align: left; padding: clamp(2.4rem,6vw,5rem) 0 3rem; background: linear-gradient(120deg,#e7ede2 0%,#faf8f2 78%); border-bottom: 1px solid var(--editorial-line); margin-bottom: 2.5rem; }
.pg-blog .blog-masthead { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 5rem; align-items: center; }
.pg-blog .blog-header h1 { max-width: 850px; font-size: clamp(2.3rem,5.1vw,4.35rem); line-height: 1.06; font-weight: 650; letter-spacing: -.055em; margin-bottom: 1.35rem; }
.pg-blog .blog-header h1 em { font-style: normal; color: #27624b; }
.pg-blog .blog-header p { margin-left: 0; max-width: 720px; font-size: 1.04rem; line-height: 1.75; }
.pg-blog .blog-header .editorial-eyebrow { font-size: .7rem; margin-bottom: 1.25rem; }
.blog-masthead-note { border-left: 1px solid #9cb19c; padding-left: 2rem; display: grid; gap: 1rem; color: #244635; font-size: 1.1rem; line-height: 1.45; }
.blog-masthead-note .masthead-mark { font-size: 3.5rem; line-height: 1; }
.blog-masthead-note > a { font-size: .8rem; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.pg-blog .blog-featured { margin-bottom: 2.5rem; }
.featured-card { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,1fr); border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--editorial-line); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.featured-card:hover { text-decoration: none; border-color: #779b82; }
.featured-card-image { min-width: 0; display: grid; align-items: center; background: #e6eddf; padding: 1.25rem; }
.featured-card-image img { width: 100%; height: auto; display: block; border-radius: 10px; }
.featured-card-body { padding: clamp(1.5rem,3.5vw,3rem); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pg-blog .cat { width: fit-content; display: inline-block; font-size: .65rem; line-height: 1.45; font-weight: 750; color: #28563e; text-transform: uppercase; letter-spacing: .08em; }
.featured-card h2 { font-size: clamp(1.4rem,2.8vw,2.15rem); line-height: 1.17; letter-spacing: -.035em; margin: .85rem 0 1rem; font-weight: 650; }
.featured-card p { font-size: .95rem; color: #526558; line-height: 1.65; }
.featured-card-bottom { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .7rem; color: #526558; margin: 1.4rem 0; }
.featured-card .read-more { width: fit-content; background: #194d37; color: #fff; padding: .7rem 1rem; min-height: 44px; border-radius: 7px; font-size: .8rem; font-weight: 650; }
.pg-blog .cat-nav { justify-content: flex-start; gap: .5rem; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--editorial-line); }
.pg-blog .cat-nav a { border-style: solid; border-color: #bdcbbc; border-radius: 7px; color: #3f5e49; font-size: .76rem; min-height: 44px; padding: .5rem .9rem; }
.pg-blog .cat-nav a.active { color: #fff; background: #194d37; border-color: #194d37; }
.pg-blog .cat-section { padding-bottom: 3rem; }
.pg-blog .cat-section > h2, .pg-blog .section-heading h2 { font-size: clamp(1.4rem,2.5vw,1.9rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.25; margin-bottom: 1.2rem; }
.pg-blog .cat-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; border-top: 1px solid var(--editorial-line); border-bottom: 1px solid var(--editorial-line); }
.pg-blog .cat-card { border: 0; border-right: 1px solid var(--editorial-line); border-radius: 0; background: transparent; box-shadow: none; padding: 1.4rem 1.2rem; transform: none; display: flex; flex-direction: column; min-width: 0; }
.pg-blog .cat-card:last-child { border-right: 0; }
.pg-blog .cat-card:hover { background: #edf1e7; box-shadow: none; transform: none; }
.pg-blog .cat-card-icon { font-size: 1.6rem; margin-bottom: 1rem; }
.pg-blog .cat-card h3 { font-size: .91rem; line-height: 1.3; font-weight: 700; margin-bottom: .6rem; }
.pg-blog .cat-card p { font-size: .72rem; color: #526558; line-height: 1.6; margin: 0 0 1rem; }
.pg-blog .cat-card > span { font-size: .7rem; color: #28563e; font-weight: 650; margin-top: auto; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.pg-blog .section-heading h2 { margin-bottom: 0; }
.section-heading > span { font-size: .75rem; color: #526558; flex-shrink: 0; }
.blog-search { background: #eaf0e4; border: 1px solid #d6dfd1; padding: 1.25rem 1.5rem; margin: 0 0 1.6rem; border-radius: 12px; }
.blog-search label { display: block; font-size: .76rem; font-weight: 650; color: #284c35; margin-bottom: .5rem; }
.blog-search > div { display: flex; gap: .65rem; }
.blog-search input { min-width: 0; flex: 1; border: 1px solid #a9bca8; border-radius: 7px; background: #fff; font: inherit; font-size: 1rem; padding: .7rem .8rem; min-height: 46px; color: var(--ink); }
.blog-search input::placeholder { color: #627364; }
.blog-search button { border: 1px solid #95ac96; border-radius: 7px; padding: .5rem .8rem; background: transparent; color: #244b34; font: inherit; font-size: .78rem; cursor: pointer; }
.blog-search #blog-search-status { font-size: .75rem; color: #284c35; margin: .5rem 0 0; }
.blog-search #blog-search-status:empty { display: none; }
.pg-blog .articles-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; padding-bottom: 2rem; }
.pg-blog .article-card { border-radius: 13px; border: 1px solid var(--editorial-line); box-shadow: none; min-width: 0; transform: none; }
.pg-blog .article-card:hover { border-color: #6c977a; box-shadow: 0 8px 25px #213c2910; transform: none; }
.pg-blog .article-card-img { aspect-ratio: 1.7; object-fit: cover; }
.pg-blog .article-card-body { padding: 1.3rem 1.35rem 1.4rem; }
.pg-blog .article-card .cat { border: 0; border-radius: 0; background: transparent; padding: 0; font-size: .63rem; }
.pg-blog .article-card h2 { font-size: 1.08rem; line-height: 1.3; font-weight: 650; letter-spacing: -.025em; margin: .65rem 0 .8rem; }
.pg-blog .article-card p { font-size: .8rem; line-height: 1.6; color: #526558; }
.pg-blog .article-card .meta { font-size: .65rem; line-height: 1.6; opacity: 1; margin: auto 0 .65rem; padding-top: .8rem; }
.pg-blog .article-card .read-more { font-size: .76rem; }
.blog-no-results { padding: 2rem; border: 1px solid var(--editorial-line); border-radius: 12px; background: #fff; font-size: .9rem; margin-bottom: 2rem; }

/* Artículo: una cabecera informativa y una columna de lectura estable. */
.pg-blog .article-header { padding: 2.5rem 0 2.75rem; margin-bottom: 2.75rem; border-bottom: 1px solid var(--editorial-line); }
.article-header-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 3rem; align-items: center; }
.article-heading { min-width: 0; }
.editorial-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.2rem; }
.editorial-kicker > span { color: #526558; font-size: .65rem; text-transform: uppercase; letter-spacing: .09em; }
.pg-blog .article-cat { margin: 0; border: 1px solid #b2c5ad; border-radius: 5px; font-size: .63rem; padding: .35rem .6rem; }
.pg-blog .article-header h1 { font-size: clamp(1.9rem,3.45vw,3.25rem); line-height: 1.12; font-weight: 650; letter-spacing: -.045em; margin: 0 0 1.1rem; }
.article-deck { color: #526558; font-size: 1rem; line-height: 1.7; margin-bottom: 1.4rem; }
.pg-blog .article-meta { gap: .4rem .9rem; font-size: .68rem; line-height: 1.6; padding-top: 1rem; border-top: 1px solid var(--editorial-line); }
.article-updated { color: #526558; font-size: .68rem; margin-top: .4rem; }
.pg-blog .article-featured-img { border-radius: 14px; padding: .6rem; margin: 0; box-shadow: none; border: 1px solid var(--editorial-line); background: #e7edde; width: 100%; min-width: 0; }
.pg-blog .article-featured-img img { border-radius: 8px; }
.pg-blog .article-layout { max-width: 1240px; grid-template-columns: minmax(0,790px) minmax(225px,290px); gap: clamp(2rem,5vw,5.4rem); padding-bottom: 1rem; }
.pg-blog .article-content { min-width: 0; }
.pg-blog .article-body { padding-bottom: 1rem; }
.pg-blog .article-body p { font-size: 1.04rem; line-height: 1.85; margin-bottom: 1.35em; }
.pg-blog .article-body :where(h2,h3,h4) { text-wrap: balance; }
.pg-blog .article-body h2 { font-size: clamp(1.4rem,2.3vw,1.8rem); line-height: 1.27; font-weight: 650; letter-spacing: -.03em; margin: 2.4em 0 .8em; padding-top: 1.2rem; border-top: 1px solid var(--editorial-line); }
.pg-blog .article-body h3 { font-size: 1.22rem; line-height: 1.38; font-weight: 650; margin: 1.8em 0 .7em; letter-spacing: -.015em; }
.pg-blog .article-body li { font-size: 1rem; line-height: 1.75; margin-bottom: .65rem; }
.pg-blog .article-body a { text-decoration-thickness: 1px; text-decoration-color: #698873; }
.pg-blog .article-summary-wrap { margin-bottom: 1.75rem; }
.pg-blog .article-summary, .article-takeaways { border: 1px solid #b9cdb1; border-left: 4px solid #356841; border-radius: 12px; background: #eef4e8; box-shadow: none; padding: 1.5rem 1.7rem; }
.pg-blog .article-summary p, .pg-blog .article-summary li { color: #294932; font-size: .91rem; line-height: 1.7; }
.pg-blog .article-summary-title { font-size: .67rem; margin-bottom: .85rem; color: #285337; }
.article-takeaways { margin-bottom: 1.75rem; }
.article-takeaways h2 { font-size: 1.1rem; margin: .2rem 0 .9rem; font-weight: 650; }
.article-takeaways ul { margin-left: 1.2rem; font-size: .9rem; line-height: 1.8; }
.pg-blog .article-callout { border: 1px solid #d5c4aa; border-left: 4px solid #9b7142; background: #fbf2e3; border-radius: 10px; padding: 1.3rem 1.5rem; }
.pg-blog .article-callout strong:first-child { color: #76532c; }
.pg-blog .article-stat-card { border: 1px solid #b9cdb1; border-radius: 10px; background: #f0f5e9; }
.pg-blog .article-stat-label, .pg-blog .article-stat-value strong { color: #335c3b !important; }
.pg-blog .article-checklist li { border-radius: 10px; box-shadow: none; padding: 1.1rem 1.25rem 1.1rem 3.7rem; }
.pg-blog .article-checklist li::before { border-radius: 5px; background: #2b5a3a; top: 1.1rem; }
.pg-blog .article-body blockquote { border-left: 4px solid #346748; border-radius: 0 10px 10px 0; padding: 1.4rem 1.6rem; background: #ebf0e4; }
.pg-blog .article-visual { border-color: #ccd8c3; background: #f4f6ef; border-radius: 12px; }

/* Las tablas conservan la misma semantica en movil y escritorio. */
.pg-blog .article-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid #cbd7c5; border-radius: 10px; margin: 1.6rem 0; background: #fff; scrollbar-color: #8ca383 #f1f4ed; }
.pg-blog .article-table-scroll:focus-visible { outline: 3px solid #1d563b; outline-offset: 3px; }
.pg-blog .article-table-scroll table { margin: 0 !important; width: 100%; min-width: 560px; font-size: .85rem; border-collapse: collapse; border: 0; border-radius: 0; }
.pg-blog .article-table-scroll th { background: #e6edde; color: #294932; padding: 1rem 1.1rem; text-align: left; font-size: .72rem; font-weight: 700; text-transform: none; letter-spacing: 0; vertical-align: top; line-height: 1.6; }
.pg-blog .article-table-scroll td { padding: .9rem 1.1rem; border-bottom: 1px solid #d7e0d0; font-size: .83rem; line-height: 1.65; vertical-align: top; }
.pg-blog .article-table-scroll tbody tr:nth-child(even) { background: #f7f9f2; }
.pg-blog .article-table-scroll caption { text-align: left; padding: 1rem; color: #456349; background: #f1f5ea; font-size: .77rem; font-weight: 650; }
.pg-blog .article-table-scroll .article-data-table thead { display: table-header-group; position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; }
.pg-blog .article-table-scroll .article-data-table { display: table; }
.pg-blog .article-table-scroll .article-data-table tbody { display: table-row-group; }
.pg-blog .article-table-scroll .article-data-table tr { display: table-row; width: auto; border: 0; background: transparent; box-shadow: none; }
.pg-blog .article-table-scroll .article-data-table td { display: table-cell; width: auto; padding: .9rem 1.1rem; border-bottom: 1px solid #d7e0d0; }
.pg-blog .article-table-scroll .article-data-table td::before { content: none; }

/* Índice de lectura: el mismo mapa de encabezados, ya renderizado en servidor. */
.pg-blog .article-sidebar { display: block; top: 130px; max-height: calc(100dvh - 150px); padding: 0 4px 1rem; }
.pg-blog .sidebar-index { border: 1px solid #cdd9c7; border-top: 4px solid #315f3e; border-radius: 8px; padding: 1.2rem 1.2rem 1rem; background: #f2f6ec; }
.pg-blog .sidebar-index h2 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 1rem; font-weight: 650; }
.pg-blog .sidebar-toc { padding: 0; margin: 0; list-style: none; }
.pg-blog .sidebar-toc li { margin: .15rem 0; }
.pg-blog .sidebar-toc a { padding: .5rem .2rem .5rem .7rem; font-size: .76rem; line-height: 1.5; color: #465d4b; border-left: 2px solid transparent; text-decoration: none; }
.pg-blog .sidebar-toc .toc-subsection a { font-size: .7rem; padding-left: 1.2rem; color: #5b6c5e; }
.pg-blog .sidebar-toc a:hover, .pg-blog .sidebar-toc a.active { color: #174e2c; background: #e2ecda; border-left-color: #3b7047; }
.pg-blog .sidebar-block-title { border-bottom: 1px solid #cbd8c5; color: #3a5e42; }
.article-mobile-toc { display: none; border: 1px solid #b9cbae; border-radius: 10px; background: #f4f7ed; margin: 0 0 2rem; }
.article-mobile-toc summary, .pillar-contents summary { padding: 1rem 1.1rem; color: #234b30; font-size: .87rem; font-weight: 650; cursor: pointer; min-height: 48px; }
.article-mobile-toc summary span { font-size: .68rem; font-weight: 400; color: #526c56; margin-left: .4rem; }
.article-mobile-toc nav { padding: 0 .85rem 1rem; max-height: 360px; overflow-y: auto; }
.pillar-contents { border: 1px solid #cbd9c1; background: #eff4e8; border-radius: 10px; margin-bottom: 2rem; }
.pillar-contents nav { padding: 0 1rem 1rem; }
.pg-blog .blog-cta { border-style: solid; border-color: #bacbad; background: #e8f0df; border-radius: 14px; box-shadow: none; }
.pg-blog .article-next-step { text-align: left; padding: clamp(1.4rem,3vw,2.2rem); }
.pg-blog .article-next-step h2 { font-size: clamp(1.3rem,2.2vw,1.7rem); line-height: 1.25; font-weight: 650; letter-spacing: -.03em; margin-bottom: 1rem; }
.pg-blog .article-next-step > p { max-width: none; margin-left: 0; font-size: .93rem; color: #465e43; line-height: 1.7; }
.pg-blog .article-next-step > .editorial-eyebrow { font-size: .65rem; color: #355b3b; }
.editorial-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pg-blog .blog-cta .cta-btn { border-radius: 7px; box-shadow: none; padding: .8rem 1.1rem; font-size: .8rem; min-height: 46px; background: #245937; }
.pg-blog .editorial-text-link { font-size: .78rem; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; color: #285332; }
.article-next-step small { display: block; color: #506b4e; font-size: .69rem; margin-top: 1rem; }
.article-cluster-link { display: flex; gap: 1.1rem; align-items: center; justify-content: space-between; border-top: 1px solid #cdd8c5; border-bottom: 1px solid #cdd8c5; padding: 1.25rem 0; color: #315736; margin: 0 0 1rem; font-size: .91rem; font-weight: 650; }
.article-cluster-link small { display: block; font-size: .65rem; font-weight: 400; color: #597253; margin-bottom: .2rem; }
.article-cluster-link > span:nth-child(2) { flex: 1; }
.pg-blog .related { border-top: 0; padding-top: 2rem; }
.pg-blog .related h2 { font-size: 1.4rem; font-weight: 650; letter-spacing: -.03em; }
.pg-blog .related-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.pg-blog .related-card { border-radius: 10px; box-shadow: none; transform: none; min-width: 0; }
.pg-blog .related-card:hover { transform: none; border-color: #769b77; box-shadow: none; }
.pg-blog .related-card-body { padding: .9rem 1rem 1.1rem; }
.pg-blog .related-card h3 { font-size: .82rem; line-height: 1.4; }
.pg-blog .related-card p { font-size: .7rem; line-height: 1.55; color: #526558; margin-top: .6rem; }
.pg-blog .related-card .meta { opacity: 1; font-size: .6rem; margin-top: .7rem; line-height: 1.6; }
.pg-blog .related-card-img { height: auto; aspect-ratio: 1.8; }
.pg-blog .cat-header { background: #edf2e6; padding: 2.6rem 0; margin: 1.25rem 0 2rem; }
.pg-blog .cat-header > .w { max-width: 950px; }
.pg-blog .cat-header h1 { font-size: clamp(2rem,4vw,3.1rem); letter-spacing: -.045em; }
.pg-blog .cat-header p { max-width: 780px; font-size: 1rem; }
.pg-blog .pillar-body { max-width: 790px; margin: 0 auto 2rem; }

@media (max-width: 1050px) {
    .pg-blog .blog-masthead { grid-template-columns: minmax(0,1fr) 190px; gap: 2.5rem; }
    .pg-blog .cat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .pg-blog .cat-card { border-bottom: 1px solid var(--editorial-line); }
    .pg-blog .cat-card:nth-child(3) { border-right: 0; }
    .pg-blog .article-layout { display: block; max-width: 820px; }
    .pg-blog .article-sidebar { display: none; }
    .article-mobile-toc { display: block; }
    .article-header-grid { gap: 1.5rem; }
}
@media (max-width: 760px) {
    .pg-blog .w-wide { padding-left: 20px; padding-right: 20px; }
    .pg-blog .blog-masthead { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
    .blog-masthead-note { display: none; }
    .pg-blog .blog-header { padding: 2.5rem 0 2.1rem; margin-bottom: 1.7rem; }
    .pg-blog .blog-header h1 { font-size: clamp(2rem,7.5vw,3rem); line-height: 1.1; }
    .pg-blog .blog-header p { font-size: .94rem; }
    .featured-card { grid-template-columns: minmax(0,1fr); }
    .featured-card-image { padding: .8rem; }
    .featured-card-image img { max-height: 290px; object-fit: contain; }
    .featured-card-body { padding: 1.3rem; }
    .featured-card h2 { font-size: 1.5rem; }
    .featured-card p { font-size: .88rem; }
    .featured-card-bottom { font-size: .66rem; margin: 1.1rem 0; }
    .pg-blog .cat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .pg-blog .cat-card { padding: 1.1rem .85rem; border-right: 1px solid var(--editorial-line); }
    .pg-blog .cat-card:nth-child(even) { border-right: 0; }
    .pg-blog .cat-card:nth-child(3) { border-right: 1px solid var(--editorial-line); }
    .pg-blog .cat-card p { font-size: .7rem; }
    .pg-blog .cat-nav { gap: .45rem; margin-bottom: 1.6rem; }
    .pg-blog .cat-nav a { font-size: .72rem; padding: .45rem .7rem; }
    .pg-blog .articles-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .9rem; }
    .section-heading { align-items: start; flex-direction: column; gap: .5rem; }
    .pg-blog .section-heading h2 { margin: 0; }
    .blog-search { padding: 1rem; }
    .pg-blog .article-header { padding: 1.7rem 0 2rem; margin-bottom: 2rem; }
    .article-header-grid { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
    .pg-blog .article-header h1 { font-size: clamp(1.9rem,7.2vw,2.7rem); line-height: 1.13; }
    .article-deck { font-size: .95rem; line-height: 1.7; }
    .pg-blog .article-meta { font-size: .65rem; }
    .pg-blog .article-featured-img { max-width: 600px; margin: 0 auto; }
    .pg-blog .article-featured-img img { max-height: 360px; object-fit: contain; }
    .pg-blog .article-layout { padding-left: 20px; padding-right: 20px; }
    .pg-blog .article-body p { font-size: 1rem; line-height: 1.85; }
    .pg-blog .article-body li { font-size: .94rem; }
    .pg-blog .article-body h2 { font-size: 1.45rem; }
    .pg-blog .article-body h3 { font-size: 1.16rem; }
    .pg-blog .article-summary, .article-takeaways { padding: 1.2rem; }
    .pg-blog .article-summary p, .pg-blog .article-summary li { font-size: .86rem; }
    .pg-blog .article-callout { padding: 1.2rem; }
    .pg-blog .related-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .pg-blog .related-card h3 { font-size: .87rem; }
    .pg-blog .related-card p { font-size: .74rem; }
}
@media (max-width: 500px) {
    .pg-blog .articles-grid { grid-template-columns: minmax(0,1fr); gap: 1rem; }
    .pg-blog .article-card-img { aspect-ratio: 1.9; }
    .pg-blog .article-card h2 { font-size: 1.16rem; }
    .pg-blog .related-grid { grid-template-columns: minmax(0,1fr); }
    .pg-blog .related-card { display: grid; grid-template-columns: 95px minmax(0,1fr); align-items: start; }
    .pg-blog .related-card-img { height: 100%; min-height: 100px; aspect-ratio: auto; object-fit: cover; }
    .pg-blog .related-card-body { padding: .85rem; }
    .pg-blog .related-card p { display: none; }
    .pg-blog .related-card .meta { font-size: .63rem; }
    .pg-blog .related-card h3 { font-size: .86rem; }
    .pg-blog .article-next-step .editorial-actions { display: grid; gap: 1rem; }
    .pg-blog .article-next-step .cta-btn { justify-content: center; }
    .pg-blog .article-next-step .editorial-text-link { padding: .5rem 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pg-blog *, .pg-blog *::before, .pg-blog *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Recursos prácticos, octubre 2026: lectura editorial y recorridos por tarea. */
.blog-routes { margin: 2.5rem 0 3rem; }
.blog-routes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.blog-routes-grid > a { display:flex; flex-direction:column; align-items:flex-start; gap:.65rem; padding:1.6rem; border:1px solid #d8d1ca; border-radius:16px; background:#fffdfa; color:#26382e; text-decoration:none; min-width:0; }
.blog-routes-grid > a:nth-child(2) { background:#f3edf0; }
.blog-routes-grid > a:nth-child(3) { background:#f6eee6; }
.blog-routes-grid > a:hover { border-color:#536b57; }
.route-number { font-size:.76rem; letter-spacing:.12em; color:#56634e; border-bottom:1px solid currentColor; padding-bottom:.3rem; }
.blog-routes h3 { font-size:1.15rem; line-height:1.3; margin:0; }
.blog-routes p { font-size:.88rem; line-height:1.65; margin:0 0 .5rem; }
.blog-routes .editorial-text-link { margin-top:auto; font-size:.8rem; }
.pg-blog .article-featured-img:has(figcaption) { background:#faf7f2; }
.article-featured-img figcaption { font-size:.65rem; line-height:1.5; color:#5b625b; padding:.65rem .35rem .2rem; }
.article-workflow { list-style:none; counter-reset:workflow; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin:1.8rem 0!important; padding:0!important; }
.article-workflow li { counter-increment:workflow; padding:1.2rem; border:1px solid #d6d8cd; background:#f6f7f0; border-radius:12px; margin:0!important; }
.article-workflow li::before { content:counter(workflow,decimal-leading-zero); display:block; color:#58674e; font-size:.75rem; margin-bottom:.45rem; }
.article-workflow strong,.article-workflow span { display:block; }
.article-workflow span { font-size:.92rem; line-height:1.65; margin-top:.4rem; }
.article-demo { margin:2rem 0; padding:1rem; border:1px solid #d3d9ce; border-radius:14px; background:#f6f7f1; }
.article-demo img { display:block; width:100%; height:auto; border-radius:8px; }
.article-demo figcaption { font-size:.78rem; line-height:1.6; color:#52614f; margin-top:.75rem; }
.article-faq { margin:.7rem 0; border:1px solid #d4d9ce; border-radius:10px; background:#fffefa; }
.article-faq summary { padding:1rem 1.2rem; cursor:pointer; font-weight:650; line-height:1.5; }
.article-faq p { padding:0 1.2rem 1rem; margin:0!important; }
@media(max-width:700px) { .blog-routes-grid { grid-template-columns:minmax(0,1fr); } .blog-routes-grid > a { padding:1.3rem; } .article-workflow { grid-template-columns:minmax(0,1fr); } }
@media print { .article-sidebar,.article-next-step,.related,.article-cluster-link { display:none; } .article-layout { display:block; } .article-content { max-width:none; } .article-workflow li,.article-demo { break-inside:avoid; } }