/* Blog Midnight Tokyo — variación técnica del sistema Neo Japón */
.blog-midnight { background: var(--ink); }
.blog-hero-midnight {
    position: relative;
    min-height: 86svh;
    display: grid;
    align-items: end;
    overflow: hidden;
    isolation: isolate;
    padding: 150px max(5vw, 24px) 82px;
}
.blog-hero-midnight picture,
.blog-hero-midnight picture img,
.blog-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.blog-hero-midnight picture { z-index: -3; }
.blog-hero-midnight picture img { object-fit: cover; object-position: center; }
.blog-hero-overlay {
    z-index: -2;
    background: linear-gradient(90deg, rgba(3,8,14,.97), rgba(3,8,14,.83) 48%, rgba(3,8,14,.24)), linear-gradient(0deg, rgba(7,17,26,.98), transparent 42%);
}
.blog-hero-content { width: min(1180px, 100%); margin: 0 auto; }
.blog-hero-content h1 {
    max-width: 880px;
    color: var(--paper-strong);
    font-size: clamp(3.2rem, 7vw, 7rem);
    line-height: .96;
    letter-spacing: -.075em;
    text-wrap: balance;
}
.blog-hero-content h1 em { color: var(--sakura); font-style: normal; }
.blog-hero-content p { max-width: 650px; margin: 24px 0 32px; color: #c7d0d3; font-size: 1.08rem; line-height: 1.75; }

.blog-index-section { padding: 110px max(5vw, 24px); color: var(--ink); background: var(--paper); }
.blog-index-shell { width: min(1180px, 100%); margin: 0 auto; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 42px; }
.blog-filters a { padding: 10px 16px; color: #465159; border: 1px solid rgba(7,17,26,.16); border-radius: 999px; }
.blog-filters a.active,
.blog-filters a:hover { color: var(--paper-strong); background: var(--vermilion-ink); border-color: var(--vermilion-ink); }

.blog-featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: clamp(28px, 5vw, 70px); align-items: center; margin-bottom: 80px; padding-bottom: 80px; border-bottom: 1px solid rgba(7,17,26,.14); }
.blog-featured-cover,
.blog-card-cover { position: relative; display: grid; place-items: center; overflow: hidden; color: rgba(255,249,237,.65); font-family: var(--font-mono); letter-spacing: .12em; background: linear-gradient(135deg, var(--ink-soft), var(--ink)); }
.blog-featured-cover { min-height: 430px; border-radius: 2px 24px 2px 2px; box-shadow: 0 28px 70px rgba(40,35,29,.25); }
.blog-featured-cover::after,
.blog-card-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(201,121,61,.35); }
.blog-featured-cover img,
.blog-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.blog-featured-cover:hover img,
.blog-card-cover:hover img { transform: scale(1.035); }
.blog-featured-copy h2 { margin: 12px 0 18px; font-size: clamp(2rem, 4vw, 4.1rem); line-height: 1.05; letter-spacing: -.055em; }
.blog-featured-copy p { color: #4f5a60; line-height: 1.75; }
.blog-card-cat { color: var(--vermilion-ink); font: 700 .72rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.blog-read-link { display: inline-flex; gap: 10px; margin-top: 24px; color: var(--vermilion-ink); font-weight: 800; }
.blog-read-link:hover span { transform: translateX(5px); }

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.blog-card { overflow: hidden; color: var(--ink); background: rgba(255,249,237,.72); border: 1px solid rgba(7,17,26,.13); border-radius: 2px 16px 16px 2px; transition: transform .3s ease, box-shadow .3s ease; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(46,39,31,.14); }
.blog-card-cover { aspect-ratio: 16 / 10; }
.blog-card-body { padding: 22px; }
.blog-card h2 { margin: 10px 0; font-size: 1.28rem; }
.blog-card p { color: #566168; line-height: 1.65; }
.blog-card-date { display: block; margin-top: 18px; color: #5d686d; font: .72rem var(--font-mono); }

.blog-empty { padding: clamp(36px, 7vw, 86px); text-align: left; background: var(--paper-strong); border: 1px solid rgba(7,17,26,.13); border-radius: 2px 24px 2px 2px; }
.blog-empty h2 { max-width: 850px; margin: 12px 0 18px; font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.055em; }
.blog-empty p { max-width: 700px; color: #536068; line-height: 1.75; }
.blog-empty-series { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.blog-empty-series span { padding: 8px 12px; color: var(--vermilion-ink); border: 1px solid rgba(168,59,47,.34); border-radius: 999px; font: .75rem var(--font-mono); }

.newsletter-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr); gap: 40px; align-items: end; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 110px 0; }
.newsletter-preview h2 { max-width: 760px; font-size: clamp(2.3rem, 5vw, 5rem); letter-spacing: -.065em; }
.newsletter-preview p { color: var(--text-secondary); line-height: 1.75; }

/* Artículo */
.post-page { padding: 142px max(5vw, 24px) 100px; color: var(--ink); background: var(--paper); }
.post-article { width: min(820px, 100%); margin: 0 auto; }
.post-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; color: #5d686d; font-size: .84rem; }
.post-breadcrumb a { color: var(--vermilion-ink); }
.post-header { margin-bottom: 38px; padding-bottom: 32px; border-bottom: 1px solid rgba(7,17,26,.14); }
.post-header h1 { margin: 14px 0 18px; color: var(--ink); font-size: clamp(2.7rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -.065em; }
.post-header time { color: #5d686d; font-family: var(--font-mono); font-size: .78rem; }
.post-cover { margin: 0 0 45px; }
.post-cover img { width: 100%; max-height: 540px; object-fit: cover; border-radius: 2px 22px 2px 2px; box-shadow: 0 25px 65px rgba(47,39,30,.18); }
.post-content { color: #36434a; font-size: 1.06rem; line-height: 1.85; }
.post-content h1,
.post-content h2,
.post-content h3 { color: var(--ink); margin: 42px 0 16px; letter-spacing: -.035em; }
.post-content p { margin: 0 0 22px; }
.post-content a { color: var(--vermilion-ink); text-decoration: underline; text-underline-offset: 4px; }
.post-content code { padding: .16em .36em; color: #e8f7ff; background: var(--ink-soft); border-radius: 4px; }
.post-related { margin-top: 52px; padding: 24px; color: var(--paper-strong); background: var(--ink); border-left: 4px solid var(--copper); }
.post-related span { display: block; color: var(--sakura); font: .7rem var(--font-mono); text-transform: uppercase; }
.post-related a { display: inline-block; margin-top: 8px; font-weight: 800; }

/* El título, las rutas y el contenido del CMS nunca deben ensanchar la página. */
.blog-featured-copy,
.blog-card-body,
.post-article,
.post-header,
.post-content,
.post-related { min-width: 0; }

.blog-hero-content h1,
.blog-featured-copy h2,
.blog-card h2,
.blog-card p,
.blog-empty h2,
.post-breadcrumb,
.post-breadcrumb > *,
.post-header h1,
.post-content,
.post-content :is(h1, h2, h3, p, li, a, code),
.post-related,
.post-related a {
    overflow-wrap: anywhere;
    word-break: normal;
}

.post-content :is(img, picture, video, svg, canvas) {
    display: block;
    max-width: 100%;
    height: auto;
}

.post-content iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
}

.post-content pre,
.post-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.post-content code {
    white-space: break-spaces;
    word-break: break-word;
}

.post-content pre code {
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 820px) {
    .blog-hero-midnight { min-height: 82svh; padding-top: 126px; }
    .blog-hero-midnight picture img { object-position: center top; }
    .blog-hero-overlay { background: linear-gradient(180deg, rgba(3,8,14,.35), rgba(3,8,14,.94) 64%); }
    .blog-featured,
    .newsletter-preview { grid-template-columns: 1fr; }
    .blog-featured-cover { min-height: 300px; }
    .blog-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .post-header h1 { font-size: clamp(2.15rem, 12vw, 3.35rem); }
    .post-page { padding-inline: 20px; }
    .post-related { padding: 21px 19px; }
}

/* ==========================================================
   BLOG EDITORIAL MIDNIGHT 2026-07
   Una lectura continua entre archivo, artículo y proyectos.
========================================================== */

.blog-hero-midnight {
    min-height: min(920px, 96svh);
    align-items: center;
    padding-block: 158px 88px;
}

.blog-hero-midnight picture img {
    object-position: center;
    filter: saturate(.82) contrast(1.06);
}

.blog-hero-overlay {
    background:
        linear-gradient(90deg, rgba(3, 8, 14, .97) 0%, rgba(3, 8, 14, .86) 43%, rgba(3, 8, 14, .16) 78%),
        linear-gradient(0deg, rgba(7, 17, 26, .97), transparent 46%);
}

.blog-hero-content { padding-top: clamp(80px, 12vh, 150px); }

.blog-hero-content .section-tag {
    color: #f08a55;
    border-color: rgba(240, 138, 85, .4);
}

.blog-hero-content h1 {
    max-width: 930px;
    font-size: clamp(3.35rem, 7.2vw, 7.35rem);
}

.blog-hero-content h1 em { color: #f08a55; }

.blog-hero-content .btn-primary {
    color: #07111a;
    background: #f08a55;
    border-color: #f08a55;
    box-shadow: 0 18px 45px rgba(201, 75, 58, .22);
}

.blog-index-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 96px 122px;
    background: #f5eee3;
}

.blog-index-section::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 0;
    z-index: -1;
    width: min(34vw, 480px);
    aspect-ratio: 3 / 4;
    opacity: .16;
    background: url('/assets/blog-notes-left-v7.webp') left center / contain no-repeat;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.blog-index-section::after {
    content: '';
    position: absolute;
    right: -4vw;
    bottom: 1%;
    z-index: -1;
    width: min(42vw, 620px);
    aspect-ratio: 16 / 10;
    opacity: .12;
    background: url('/assets/blog-study-corner-v4.webp') right bottom / contain no-repeat;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.blog-filters {
    width: fit-content;
    max-width: 100%;
    justify-content: center;
    gap: 6px;
    margin-inline: auto;
    padding: 6px;
    background: rgba(255, 252, 246, .8);
    border: 1px solid rgba(7, 17, 26, .12);
    border-radius: 999px;
    box-shadow: 0 16px 40px rgba(50, 42, 32, .07);
    backdrop-filter: blur(12px);
}

.blog-filters a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding-inline: 18px;
    border: 0;
    white-space: nowrap;
}

.blog-filters a.active,
.blog-filters a:hover {
    background: linear-gradient(135deg, #0a1821, #152a33);
    border-color: transparent;
}

.blog-featured {
    position: relative;
    gap: clamp(34px, 6vw, 82px);
    margin-top: 68px;
    padding: 0 0 86px;
}

.blog-featured::before {
    content: 'NOTA DESTACADA';
    position: absolute;
    top: 18px;
    left: -28px;
    z-index: 3;
    padding: 8px 11px;
    color: var(--paper-strong);
    background: var(--vermilion-ink);
    font: .58rem/1 var(--font-mono);
    letter-spacing: .12em;
    writing-mode: vertical-rl;
}

.blog-featured-cover {
    min-height: 470px;
    border-radius: 20px 20px 3px 20px;
}

.blog-featured-copy h2 a:hover,
.blog-card h2 a:hover { color: var(--vermilion-ink); }

.blog-read-link { color: var(--vermilion-ink); }
.blog-read-link span { transition: transform .25s ease; }

.blog-grid { gap: 26px; }

.blog-card {
    position: relative;
    background: rgba(255, 252, 246, .88);
    border-color: rgba(7, 17, 26, .12);
    border-radius: 16px 16px 3px 16px;
    box-shadow: 0 16px 46px rgba(50, 42, 32, .07);
}

.blog-card::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    opacity: 0;
    background: linear-gradient(90deg, var(--vermilion), var(--copper), var(--sakura));
    transition: opacity .3s ease;
}

.blog-card:hover::after { opacity: 1; }
.blog-card-cover { aspect-ratio: 16 / 9; }
.blog-card-body { padding: 25px 24px 27px; }
.blog-card h2 { font: 700 1.34rem/1.22 var(--font-display); letter-spacing: -.035em; }
.blog-card p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

.blog-empty {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr);
    gap: clamp(38px, 7vw, 90px);
    align-items: end;
    overflow: hidden;
    margin-top: 66px;
    padding: clamp(42px, 7vw, 82px);
    background:
        linear-gradient(105deg, rgba(255, 252, 246, .98), rgba(255, 252, 246, .88)),
        url('/assets/blog-study-corner-v4.webp') right center / cover no-repeat;
    border-radius: 3px 30px 3px 3px;
    box-shadow: 0 26px 70px rgba(50, 42, 32, .1);
}

.blog-empty-copy { min-width: 0; }

.blog-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    color: var(--ink);
    font-weight: 750;
}

.blog-empty-cta span { color: var(--vermilion-ink); transition: transform .25s ease; }
.blog-empty-cta:hover span { transform: translateX(5px); }

.blog-empty-ledger {
    border-top: 1px solid rgba(7, 17, 26, .14);
}

.blog-empty-ledger article {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(7, 17, 26, .14);
}

.blog-empty-ledger b { color: var(--vermilion-ink); font: .67rem/1.5 var(--font-mono); }
.blog-empty-ledger span { color: #35434a; font-size: .9rem; font-weight: 650; line-height: 1.5; }

.newsletter-preview {
    position: relative;
    width: min(1180px, calc(100% - 48px));
}

/* ---------- Artículo individual ---------- */
.post-page {
    padding: 0;
    color: var(--ink);
    background: #f5eee3;
}

.post-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: min(880px, 94svh);
    display: grid;
    align-items: center;
    padding: 150px max(5vw, 24px) 84px;
    color: var(--paper-strong);
    background:
        radial-gradient(circle at 87% 14%, rgba(201, 75, 58, .16), transparent 29%),
        linear-gradient(130deg, #041019, #0b202a);
}

.post-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .12;
    background: url('/assets/footer-neo-tattoo-full-v9.webp') center / cover no-repeat;
}

.post-hero-shell {
    width: min(1240px, 100%);
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
    gap: clamp(48px, 8vw, 112px);
    align-items: center;
    margin-inline: auto;
}

.post-hero-copy { min-width: 0; }

.post-page .post-breadcrumb {
    margin: 0 0 34px;
    color: #849299;
    font: .68rem/1.5 var(--font-mono);
    letter-spacing: .07em;
}

.post-page .post-breadcrumb a { color: #b9c3c6; }
.post-page .post-breadcrumb a:hover { color: #f08a55; }
.post-page .post-breadcrumb [aria-current='page'] { max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.post-page .post-cat {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #f08a55;
    font: 700 .68rem/1.4 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.post-page .post-cat::before { content: ''; width: 28px; height: 1px; background: currentColor; }

.post-hero h1 {
    margin: 20px 0 24px;
    color: var(--paper-strong);
    font: 700 clamp(3rem, 6vw, 6.15rem)/.96 var(--font-display);
    letter-spacing: -.07em;
    text-wrap: balance;
}

.post-lead { max-width: 690px; color: #b9c5c9; font-size: 1.06rem; line-height: 1.75; }

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 28px;
    color: #7e8e95;
    font: .69rem/1.4 var(--font-mono);
}

.post-meta a { color: #d8e0e1; }

.post-hero-visual {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    margin: 0;
    border: 1px solid rgba(255, 249, 237, .15);
    border-radius: 22px 22px 3px 22px;
    box-shadow: 0 36px 90px rgba(0, 0, 0, .42);
    transform: perspective(1200px) rotateY(-3deg);
}

.post-hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(4, 12, 18, .46), transparent 50%);
    pointer-events: none;
}

.post-hero-visual img { width: 100%; height: 100%; object-fit: cover; }

.post-reading-layout {
    width: min(1140px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 800px) 250px;
    gap: clamp(48px, 8vw, 90px);
    align-items: start;
    margin-inline: auto;
    padding: clamp(78px, 9vw, 122px) max(5vw, 24px);
}

.post-article { width: auto; min-width: 0; margin: 0; }
.post-content { color: #34434a; font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.9; }
.post-content > :first-child { margin-top: 0; }
.post-content h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15; }
.post-content h3 { font-size: clamp(1.3rem, 2.3vw, 1.75rem); }
.post-content blockquote { margin: 34px 0; padding: 24px 28px; color: var(--ink); background: rgba(255, 252, 246, .8); border-left: 3px solid var(--vermilion-ink); }
.post-content img { margin: 34px 0; border-radius: 3px 18px 3px 3px; box-shadow: 0 18px 48px rgba(50, 42, 32, .12); }

.post-reading-rail {
    position: sticky;
    top: 116px;
    padding: 24px 0;
    border-top: 1px solid rgba(7, 17, 26, .18);
    border-bottom: 1px solid rgba(7, 17, 26, .18);
}

.post-rail-label { color: var(--vermilion-ink); font: 700 .64rem/1.4 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.post-reading-rail p { margin: 15px 0 22px; color: #59666d; font-size: .84rem; line-height: 1.7; }
.post-reading-rail a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; color: var(--ink); font-size: .8rem; font-weight: 700; }
.post-reading-rail a span { color: var(--vermilion-ink); }

.post-connections {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(82px, 10vw, 130px) max(5vw, 24px);
    color: var(--paper-strong);
    background: #06141d;
}

.post-connections::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .13;
    background: url('/assets/footer-neo-tattoo-full-v9.webp') center / cover no-repeat;
}

.post-connections-head,
.post-connections-grid,
.post-connections-actions { width: min(1120px, 100%); margin-inline: auto; }

.post-connections-head { max-width: 800px; margin-inline: auto; text-align: center; }
.post-connections-head > span { color: #f08a55; font: 700 .65rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.post-connections-head h2 { margin: 13px 0 18px; font: 700 clamp(2.5rem, 5vw, 5rem)/.98 var(--font-display); letter-spacing: -.065em; }
.post-connections-head p { color: #9facb1; line-height: 1.75; }

.post-connections-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 46px;
}

.post-connection-card {
    min-width: 0;
    min-height: 265px;
    display: flex;
    flex-direction: column;
    padding: 27px;
    color: var(--paper-strong);
    background: rgba(255, 249, 237, .045);
    border: 1px solid rgba(255, 249, 237, .11);
    border-radius: 3px 18px 3px 3px;
    transition: transform .35s ease, border-color .35s ease, background-color .35s ease;
}

.post-connection-card:hover,
.post-connection-card:focus-visible {
    color: var(--paper-strong);
    transform: translateY(-6px);
    border-color: rgba(240, 138, 85, .48);
    background: rgba(255, 249, 237, .075);
}

.post-connection-card > span { color: #f08a55; font: 700 .63rem/1.4 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.post-connection-card h3 { margin: 20px 0 12px; font: 700 clamp(1.25rem, 2vw, 1.6rem)/1.18 var(--font-display); letter-spacing: -.035em; }
.post-connection-card p { display: -webkit-box; overflow: hidden; color: #9ba9ae; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.post-connection-card b { display: inline-flex; gap: 9px; margin-top: auto; padding-top: 22px; color: #e9dbcb; font-size: .82rem; }
.post-connection-card b i { color: #f08a55; font-style: normal; transition: transform .25s ease; }
.post-connection-card:hover b i { transform: translateX(4px); }

.post-connections-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.post-connections-actions a { min-height: 48px; display: inline-flex; align-items: center; padding: 0 20px; border: 1px solid rgba(255, 249, 237, .17); border-radius: 999px; font-size: .82rem; font-weight: 750; }
.post-connections-actions a:last-child { color: #07111a; background: #f08a55; border-color: #f08a55; }

@media (max-width: 1000px) {
    .post-hero-shell { grid-template-columns: minmax(0, 1fr) minmax(350px, .85fr); gap: 46px; }
    .post-reading-layout { grid-template-columns: minmax(0, 1fr) 220px; }
    .post-connections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .blog-hero-midnight { min-height: 88svh; align-items: end; }
    .blog-hero-midnight picture img { object-position: center; }
    .blog-hero-overlay { background: linear-gradient(180deg, rgba(3,8,14,.22), rgba(3,8,14,.95) 67%); }
    .blog-hero-content { padding-top: 0; }
    .blog-empty { grid-template-columns: 1fr; }

    .post-hero { min-height: auto; }
    .post-hero-shell { grid-template-columns: 1fr; }
    .post-hero-visual { aspect-ratio: 16 / 10; transform: none; }
    .post-reading-layout { grid-template-columns: 1fr; }
    .post-reading-rail { position: static; }
}

@media (max-width: 580px) {
    .blog-hero-midnight { min-height: 820px; padding: 132px 20px 58px; }
    .blog-hero-content h1 { font-size: clamp(3rem, 14vw, 4.7rem); }
    .blog-index-section { padding-inline: 20px; }
    .blog-filters { width: 100%; border-radius: 18px; }
    .blog-filters a { flex: 1 1 calc(50% - 8px); justify-content: center; white-space: normal; text-align: center; }
    .blog-featured::before { display: none; }
    .blog-featured-cover { min-height: 280px; }
    .blog-empty { padding: 34px 24px; }

    .post-hero { padding: 132px 20px 60px; }
    .post-hero h1 { font-size: clamp(2.7rem, 13.5vw, 4.2rem); }
    .post-page .post-breadcrumb [aria-current='page'] { max-width: 22ch; }
    .post-reading-layout { padding: 68px 20px 82px; }
    .post-connections { padding-inline: 20px; }
    .post-connections-grid { grid-template-columns: 1fr; }
    .post-connection-card { min-height: 225px; }
    .post-connections-actions > * { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card,
    .blog-card img,
    .blog-empty-cta span,
    .post-hero-visual,
    .post-connection-card,
    .post-connection-card b i { transform: none !important; transition: none !important; }
}

/* La portada empieza justo después del menú: mantiene impacto sin un vacío inicial. */
.blog-hero-midnight {
    min-height: clamp(690px, 84svh, 820px);
    align-items: start;
    padding-block: clamp(132px, 15vh, 158px) 72px;
}

.blog-hero-content { padding-top: 0; }

@media (max-width: 820px) {
    .blog-hero-midnight {
        min-height: 760px;
        align-items: start;
        padding-top: 122px;
    }
}

@media (max-width: 580px) {
    .blog-hero-midnight {
        min-height: 720px;
        padding: 112px 20px 54px;
    }
}

/* El fondo editorial deja de ser ruido: resume el ciclo que guía cada artículo. */
.blog-hero-manifesto {
    position: absolute;
    right: clamp(18px, 5vw, 82px);
    bottom: clamp(48px, 8vh, 96px);
    z-index: -1;
    display: grid;
    justify-items: end;
    color: rgba(255, 244, 226, .12);
    font: 800 clamp(2.3rem, 6.6vw, 7.1rem)/.78 var(--font-display);
    letter-spacing: -.075em;
    text-align: right;
    text-transform: uppercase;
    pointer-events: none;
    mix-blend-mode: screen;
}
.blog-hero-manifesto span:nth-child(2) { color: rgba(239, 112, 73, .18); transform: translateX(-.18em); }
.blog-hero-manifesto span:nth-child(3) { transform: translateX(.08em); }

@media (max-width: 820px) {
    .blog-hero-manifesto {
        right: 20px;
        bottom: 34px;
        font-size: clamp(2.2rem, 12vw, 5.2rem);
        opacity: .75;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .blog-hero-manifesto span { animation: blog-manifesto-in .9s cubic-bezier(.2,.75,.2,1) both; }
    .blog-hero-manifesto span:nth-child(2) { animation-delay: .12s; }
    .blog-hero-manifesto span:nth-child(3) { animation-delay: .24s; }
}
@keyframes blog-manifesto-in {
    from { opacity: 0; transform: translate3d(34px, 12px, 0); }
}

/* ==========================================================
   BLOG V4 · filtros instantáneos, newsletter compacta y longform
========================================================== */

[data-blog-item][hidden],
.blog-filter-empty[hidden] { display: none !important; }

.blog-filters {
    width: min(100%,920px);
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-bottom: 10px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}
.blog-filters::-webkit-scrollbar { display: none; }
.blog-filters button {
    min-height: 42px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: #465159;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: .84rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color .25s ease,background-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.blog-filters button:hover,
.blog-filters button:focus-visible {
    color: #07111a;
    background: rgba(230,102,71,.12);
    transform: translateY(-1px);
}
.blog-filters button.active {
    color: var(--paper-strong);
    background: linear-gradient(135deg,#0a1821,#152a33);
    box-shadow: 0 9px 23px rgba(7,17,26,.2),inset 0 1px rgba(255,255,255,.08);
}
.blog-filter-status {
    min-height: 22px;
    margin: 0 0 36px;
    color: #68757b;
    font: 700 .65rem/1.5 var(--font-mono);
    letter-spacing: .07em;
    text-align: center;
    text-transform: uppercase;
}
[data-blog-item].is-filter-enter {
    animation: blog-filter-enter .42s cubic-bezier(.2,.8,.2,1) var(--blog-filter-delay,0ms) both;
}
@keyframes blog-filter-enter { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.blog-filter-empty {
    max-width: 760px;
    margin: 52px auto 0;
    padding: clamp(32px,5vw,56px);
    text-align: center;
    border: 1px solid rgba(7,17,26,.12);
    border-radius: 3px 24px 3px 3px;
    background: rgba(255,252,246,.72);
}
.blog-filter-empty h2 { margin: 12px 0; font: 700 clamp(1.8rem,4vw,3.2rem)/1.05 var(--font-display); letter-spacing: -.05em; }
.blog-filter-empty p { color: #5b676d; line-height: 1.7; }
.blog-filter-empty button {
    min-height: 44px;
    margin-top: 24px;
    padding: 0 18px;
    color: #fffaf0;
    border: 0;
    border-radius: 999px;
    background: var(--vermilion-ink);
    font-weight: 750;
    cursor: pointer;
}

/* Un único golpe visual entre el archivo y el footer, sin otra pantalla entera. */
.newsletter-preview {
    isolation: isolate;
    overflow: hidden;
    width: min(1120px,calc(100% - 48px));
    min-height: 220px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: clamp(28px,5vw,72px);
    align-items: end;
    margin: clamp(48px,6vw,82px) auto;
    padding: clamp(28px,3.2vw,42px);
    color: #fff9ed;
    border: 1px solid rgba(240,165,126,.2);
    border-radius: 4px 28px 4px 28px;
    background:
        linear-gradient(90deg,rgba(3,10,15,.98) 0%,rgba(3,10,15,.88) 48%,rgba(3,10,15,.38) 100%),
        linear-gradient(0deg,rgba(3,10,15,.74),transparent 68%),
        url('/assets/blog-studio-right-v7.webp') right center / cover no-repeat;
    box-shadow: 0 28px 70px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.05);
}
.newsletter-preview::after {
    content: '';
    position: absolute;
    right: -26px;
    bottom: -34px;
    z-index: -1;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(240,138,85,.16);
    border-radius: 50%;
    box-shadow: 0 0 0 26px rgba(240,138,85,.025),0 0 0 54px rgba(240,138,85,.018);
}
.newsletter-preview-copy { min-width: 0; }
.newsletter-preview h2 {
    max-width: 760px;
    margin: 12px 0 14px;
    color: #fff9ed;
    font-size: clamp(2rem,3.7vw,3.35rem);
    line-height: 1;
    letter-spacing: -.06em;
}
.newsletter-preview p { max-width: 670px; margin: 0; color: #aebbc0; font-size: .92rem; line-height: 1.7; }
.newsletter-preview-link {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    color: #150b08;
    border-radius: 999px;
    background: linear-gradient(135deg,#f1a06c,#df684d);
    box-shadow: 0 14px 30px rgba(167,49,34,.25);
    font-size: .84rem;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .28s ease,box-shadow .28s ease;
}
.newsletter-preview-link span { transition: transform .28s ease; }
.newsletter-preview-link:hover,
.newsletter-preview-link:focus-visible { color: #150b08; transform: translateY(-3px); box-shadow: 0 19px 38px rgba(167,49,34,.32); }
.newsletter-preview-link:hover span { transform: translateX(4px); }

/* Progreso de lectura siempre visible, pero fuera del contenido. */
.post-reading-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1200;
    height: 3px;
    pointer-events: none;
}
.post-reading-progress i {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,#d94f3d,#f2a064,#e9a5b5);
    box-shadow: 0 0 13px rgba(232,102,72,.48);
    transform: scaleX(0);
    transform-origin: left;
}

/* El cuerpo admite capítulos largos y medios editoriales sin romper el ritmo. */
.post-content { font-size: clamp(1.02rem,1.25vw,1.12rem); line-height: 1.92; }
.post-content > * { max-width: 100%; }
.post-content h2,
.post-content h3 { scroll-margin-top: 130px; text-wrap: balance; }
.post-content h2 {
    margin-top: 64px;
    padding-top: 13px;
    border-top: 1px solid rgba(7,17,26,.12);
}
.post-content h2::before {
    content: '';
    display: block;
    width: 42px;
    height: 3px;
    margin: -15px 0 19px;
    background: linear-gradient(90deg,var(--vermilion-ink),var(--copper),transparent);
}
.post-content h3 { margin-top: 42px; }
.post-content :is(ul,ol) { margin: 0 0 28px; padding-left: 1.35em; }
.post-content li { margin-bottom: .65em; padding-left: .3em; }
.post-content li::marker { color: var(--vermilion-ink); font-weight: 800; }
.post-content hr { height: 1px; margin: 54px 0; border: 0; background: linear-gradient(90deg,transparent,rgba(7,17,26,.2),transparent); }
.post-content figure { margin: 44px 0; }
.post-content figure img,
.post-content figure video { margin: 0; }
.post-content figcaption { margin-top: 10px; color: #6b767b; font: .72rem/1.55 var(--font-mono); }
.post-content :is(video,iframe) {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 3px 20px 3px 3px;
    background: #07111a;
    box-shadow: 0 20px 54px rgba(50,42,32,.14);
}
.post-content table {
    width: 100%;
    border-collapse: collapse;
    color: #34434a;
    background: rgba(255,252,246,.64);
}
.post-content :is(th,td) { padding: 13px 15px; border: 1px solid rgba(7,17,26,.12); text-align: left; }
.post-content th { color: #17242b; background: rgba(201,75,58,.08); }
.post-content pre {
    margin: 34px 0;
    padding: 22px;
    color: #dce8ec;
    border-left: 3px solid #e36b4d;
    border-radius: 2px 14px 14px 2px;
    background: #07131b;
    box-shadow: 0 16px 40px rgba(7,17,26,.15);
}
.post-content :is(.callout,.nota,.aviso) {
    margin: 34px 0;
    padding: 24px 26px;
    border: 1px solid rgba(201,75,58,.18);
    border-radius: 3px 16px 3px 3px;
    background: rgba(201,75,58,.055);
}

.post-toc {
    margin: 22px 0 18px;
    padding: 18px 0;
    border-block: 1px solid rgba(7,17,26,.11);
}
.post-toc strong { color: #243138; font: 800 .65rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.post-toc ol { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }
.post-toc li { min-width: 0; }
.post-toc li.is-subsection { padding-left: 12px; }
.post-reading-rail .post-toc a {
    display: block;
    overflow: hidden;
    padding: 0;
    color: #647078;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-reading-rail .post-toc a:hover,
.post-reading-rail .post-toc a.is-active { color: var(--vermilion-ink); }

.post-article-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: clamp(64px,8vw,100px);
    padding: clamp(30px,5vw,52px);
    color: #fff9ed;
    border-radius: 3px 24px 3px 3px;
    background:
        linear-gradient(120deg,rgba(4,13,19,.98),rgba(7,23,30,.88)),
        url('/assets/footer-neo-tattoo-full-v9.webp') center / cover no-repeat;
    box-shadow: 0 26px 64px rgba(7,17,26,.22);
}
.post-article-cta::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -90px;
    z-index: -1;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(240,138,85,.15);
    border-radius: 50%;
}
.post-article-cta > span { color: #f08a55; font: 700 .64rem/1.4 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; }
.post-article-cta h2 { max-width: 620px; margin: 13px 0 16px; color: #fff9ed; font: 700 clamp(2rem,4vw,3.65rem)/1 var(--font-display); letter-spacing: -.06em; }
.post-article-cta p { max-width: 650px; color: #aebbc0; line-height: 1.7; }
.post-article-cta > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.post-article-cta a { min-height: 46px; display: inline-flex; align-items: center; gap: 10px; padding: 0 17px; border: 1px solid rgba(255,249,237,.18); border-radius: 999px; color: #fff9ed; text-decoration: none; font-size: .8rem; font-weight: 760; }
.post-article-cta a:first-child { color: #160b08; border-color: #f08a55; background: #f08a55; }
.post-article-cta a i { font-style: normal; transition: transform .25s ease; }
.post-article-cta a:hover i { transform: translateX(4px); }

@media (max-width: 820px) {
    .newsletter-preview { grid-template-columns: 1fr; align-items: start; }
    .newsletter-preview-link { justify-self: start; }
    .post-toc { display: none; }
}

@media (max-width: 580px) {
    .blog-filters { justify-content: flex-start; width: 100%; border-radius: 18px; }
    .blog-filters button { min-height: 40px; padding-inline: 14px; font-size: .78rem; }
    .newsletter-preview { width: calc(100% - 32px); min-height: 0; margin-block: 36px; padding: 30px 24px; }
    .newsletter-preview h2 { font-size: clamp(2rem,10vw,3rem); }
    .newsletter-preview-link { width: 100%; justify-content: center; white-space: normal; text-align: center; }
    .post-content h2 { margin-top: 50px; }
    .post-content figure { margin-block: 32px; }
    .post-content blockquote { margin-inline: 0; padding: 20px; }
    .post-article-cta { padding: 30px 23px; }
    .post-article-cta a { width: 100%; justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    [data-blog-item].is-filter-enter,
    .blog-filters button,
    .newsletter-preview-link,
    .newsletter-preview-link span,
    .post-article-cta a i { animation: none; transform: none; transition: none; }
}

/* ==========================================================
   BLOG V5 · archivo progresivo, estados y TOC adaptable
========================================================== */

.blog-filter-status { color: #526067; }
.blog-featured-date { margin-top: 20px; }
.blog-featured-date + .blog-read-link { margin-top: 14px; }

.blog-load-more {
    display: flex;
    justify-content: center;
    margin-top: clamp(34px,5vw,58px);
}
.blog-load-more[hidden] { display: none !important; }
.blog-load-more button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px;
    color: #fffaf0;
    border: 1px solid #172c36;
    border-radius: 999px;
    background: linear-gradient(135deg,#0a1821,#17313b);
    box-shadow: 0 13px 30px rgba(7,17,26,.17);
    font: 800 .8rem/1 var(--font-display);
    cursor: pointer;
    transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.blog-load-more button:hover,
.blog-load-more button:focus-visible {
    transform: translateY(-3px);
    border-color: #c94b3a;
    box-shadow: 0 18px 38px rgba(7,17,26,.23),0 0 0 4px rgba(201,75,58,.08);
}
.blog-load-more button span { color: #f08a55; }

.blog-service-page {
    min-height: 82svh;
    display: grid;
    place-items: center;
    padding: 150px max(5vw,24px) 90px;
    color: #fff9ed;
    background:
        linear-gradient(110deg,rgba(3,10,15,.98),rgba(3,10,15,.8)),
        url('/assets/blog-editorial-midnight-v2.webp') center / cover no-repeat;
}
.blog-service-state {
    width: min(900px,100%);
    margin-inline: auto;
    padding: clamp(34px,6vw,72px);
    color: #fff9ed;
    border: 1px solid rgba(240,138,85,.24);
    border-radius: 4px 28px 4px 4px;
    background:
        linear-gradient(135deg,rgba(4,13,19,.97),rgba(8,27,35,.92)),
        url('/assets/footer-neo-tattoo-full-v9.webp') center / cover no-repeat;
    box-shadow: 0 30px 80px rgba(0,0,0,.3);
}
.blog-index-shell > .blog-service-state { color: #fff9ed; }
.blog-service-state h1,
.blog-service-state h2 {
    max-width: 780px;
    margin: 14px 0 18px;
    color: #fff9ed;
    font: 700 clamp(2.2rem,5vw,4.7rem)/1 var(--font-display);
    letter-spacing: -.06em;
    text-wrap: balance;
}
.blog-service-state p { max-width: 680px; color: #b4c0c4; line-height: 1.75; }
.blog-service-state > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.blog-service-state a {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    padding: 0 19px;
    color: #fff9ed;
    border: 1px solid rgba(255,249,237,.2);
    border-radius: 999px;
    font-weight: 800;
}
.blog-service-state a:first-child { color: #1a0c08; border-color: #f08a55; background: #f08a55; }

.post-toc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #243138;
    cursor: pointer;
    list-style: none;
}
.post-toc summary::-webkit-details-marker { display: none; }
.post-toc summary > span { color: var(--vermilion-ink); transition: transform .25s ease; }
.post-toc[open] summary > span { transform: rotate(180deg); }
.post-toc summary:focus-visible { outline: 2px solid var(--vermilion-ink); outline-offset: 5px; border-radius: 2px; }

/* El contenido editorial nunca puede ensanchar el viewport, incluso con URLs,
   tablas, bloques de código o embeds aportados desde el CMS. */
.post-reading-layout,
.post-article,
.post-content { min-width: 0; }
.post-content { overflow-wrap: anywhere; }
.post-content :is(img,picture,video,iframe,svg,canvas) { max-width: 100%; }
.post-content pre { white-space: pre; }
.post-content pre code { overflow-wrap: normal; word-break: normal; }

@media (max-width: 820px) {
    .post-toc {
        display: block;
        margin: 24px 0 8px;
        padding: 16px 0;
        border-block: 1px solid rgba(7,17,26,.13);
    }
    .post-toc ol { margin-top: 14px; }
    .post-reading-rail .post-toc a {
        min-height: 38px;
        align-items: center;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }
}

@media (max-width: 580px) {
    .blog-service-page { padding: 122px 18px 64px; }
    .blog-service-state { padding: 30px 22px; }
    .blog-service-state > div > a { flex: 1 1 100%; justify-content: center; }
    .post-content table { font-size: .88rem; }
    .post-content :is(th,td) { min-width: 128px; padding: 11px 12px; }
    .post-content pre { margin-inline: 0; padding: 18px; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-load-more button,
    .post-toc summary > span { transform: none !important; transition: none !important; }
}