/* ============================================================
   BLOG — Rovnad
   ============================================================
   Hoja de estilos AISLADA para la sección /blog/ (Fase 5.2).
   Mismo lenguaje visual del resto del sitio (glassmorphism oscuro,
   glow azul/púrpura, grid de fondo — ver base.css) pero llevado a
   un tratamiento más "editorial premium": tipografía optimizada
   para lectura larga, barra de progreso de lectura, índice (TOC)
   sticky en desktop / colapsable en móvil, tarjetas de tip, CTA
   con el mismo gradiente llamativo que .card-ia del portal, y
   grid de artículos relacionados.

   Reutiliza variables de base.css (:root) y, cuando aplica,
   componentes ya existentes de seo-content.css (.seo-faq,
   .seo-lang-links) para evitar duplicar CSS — cero riesgo de
   colisión, archivo propio como ya se hizo con seo-content.css.
   ============================================================ */

/* ── Contenedor genérico centrado ── */
.blog-shell {
    position: relative;
    z-index: 10;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================================
   BARRA DE PROGRESO DE LECTURA
   ============================================================ */
.blog-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 9500;
    pointer-events: none;
}

.blog-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-bright));
    box-shadow: 0 0 10px var(--glow-blue);
    transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
    .blog-progress-fill { transition: none; }
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.blog-breadcrumb {
    position: relative;
    z-index: 10;
    max-width: 1080px;
    margin: 0 auto;
    padding: 22px 20px 0;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(160, 185, 220, 0.55);
}

.blog-breadcrumb a {
    color: rgba(160, 195, 230, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-breadcrumb a:hover { color: var(--accent-bright); }
.blog-breadcrumb span[aria-hidden] { margin: 0 6px; opacity: 0.5; }

/* ============================================================
   HERO DEL ARTÍCULO
   ============================================================ */
.blog-hero {
    max-width: 800px;
    margin: 22px auto 0;
    padding: 44px 40px 54px;
    text-align: center;
    position: relative;
    z-index: 10;
    border-radius: 28px;
    background: var(--portal-panel-bg);
    border: 1px solid rgba(122, 163, 212, 0.38);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 80px rgba(94, 129, 172, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    isolation: isolate;
    --mx: 50%;
    --my: 35%;
}

/* Spotlight que sigue el cursor — solo desktop/puntero fino, se
   revela con el hover para no competir visualmente con la lectura */
.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(122, 163, 212, 0.16), transparent 55%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.blog-hero:hover::before { opacity: 1; }

@media (pointer: coarse) {
    .blog-hero::before { display: none; }
}

/* Borde "aurora" — degradado que rota lentamente alrededor del
   panel del hero (detalle de marca, se detiene con reduced-motion).
   Con @supports: si el navegador no soporta mask-composite, la
   regla simplemente no se aplica (nunca degrada a un bloque sólido
   feo encima del contenido). */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .blog-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1.5px;
        background: linear-gradient(120deg, rgba(94, 129, 172, 0.85), rgba(139, 92, 246, 0.85), rgba(94, 129, 172, 0.85));
        background-size: 220% 220%;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        animation: blogAuroraRotate 9s linear infinite;
        pointer-events: none;
        z-index: 1;
    }
}

@keyframes blogAuroraRotate {
    0%   { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-hero::after { animation: none; }
    .blog-hero:hover::before { opacity: 0; }
}

.blog-hero h1,
.blog-hero .blog-meta,
.blog-hero .blog-intro {
    position: relative;
    z-index: 2;
}

.blog-hero h1 {
    font-size: clamp(1.7rem, 4.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: 0.005em;
    color: #ffffff;
    text-shadow: 0 0 40px rgba(94, 129, 172, 0.55);
    margin-bottom: 16px;
}


.blog-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(160, 185, 220, 0.65);
    margin-bottom: 22px;
}

.blog-meta span { display: inline-flex; align-items: center; gap: 6px; }

.blog-intro {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(224, 224, 224, 0.88);
    margin: 0 auto 30px;
    max-width: 680px;
}

/* ============================================================
   BARRA DE CONFIANZA (chips) — reutilizada 2 veces por artículo
   ============================================================ */
.blog-trust-bar {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 720px;
    /* A propósito SIN margen negativo: antes se usaba un solape
       (margin-top negativo) para "flotar" estos chips sobre el
       borde inferior del hero. Con el borde del hero ahora más
       visible (rgba(122,163,212,0.38), ver .blog-hero), ese solape
       hacía que la línea del borde cortara literalmente por la
       mitad los propios chips — variaba además entre navegadores
       según cuántas líneas ocupara el <p> de intro. Con margen
       positivo los chips quedan siempre limpiamente DEBAJO del
       panel, sin cruzar ningún borde, en cualquier navegador. */
    margin: 24px auto 40px;
    padding: 0;
    position: relative;
    z-index: 11;
}


.blog-trust-bar li {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--portal-panel-bg);
    border: 1px solid var(--portal-border);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.78rem;
    line-height: 1.3;
    color: rgba(224, 224, 224, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.blog-trust-bar li:hover {
    transform: translateY(-2px);
    border-color: rgba(122, 163, 212, 0.5);
}

.blog-trust-bar--compact {
    margin: 44px auto 0;
    opacity: 0.9;
}

.blog-trust-bar--compact li { font-size: 0.72rem; padding: 6px 13px; }

/* ============================================================
   LAYOUT PRINCIPAL: TOC + ARTÍCULO
   ============================================================ */
.blog-layout {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px 20px;
}

/* Grid de 3 columnas (TOC + artículo + columna "espejo" vacía del
   mismo ancho que el TOC) en vez de 2 columnas centradas como bloque:
   así el ARTÍCULO queda centrado en el mismo eje que el hero (que usa
   simplemente margin:auto). Con solo 2 columnas, justify-content:
   center centraba el conjunto TOC+artículo (no el artículo en sí), y
   el artículo terminaba visiblemente desplazado hacia la derecha
   respecto al hero. La tercera columna no necesita contenido en el
   HTML: el grid solo reserva su espacio para lograr la simetría.

   Breakpoint en 1360px (no 1024px): las 3 columnas necesitan
   250+36+720+36+250 = 1292px de contenido + 40px de padding = 1332px
   reales para no comprimirse. Con el breakpoint en 1024px, portátiles
   muy comunes (1024–1300px) habrían apretado la columna del artículo
   por debajo de los 720px previstos. Por debajo de 1360px se usa el
   layout de una sola columna (el mismo ya usado en tablet/móvil, ver
   regla base de .blog-layout arriba) — se centra solo, igual que el
   hero, sin riesgo de compresión a ningún ancho. */
@media (min-width: 1360px) {
    .blog-layout {
        grid-template-columns: 250px minmax(0, 720px) 250px;
        max-width: 1332px;
        align-items: start;
        justify-content: center;
    }
}

/* ── TOC (índice) ── */
.blog-toc {
    background: var(--portal-panel-bg);
    border: 1px solid rgba(122, 163, 212, 0.38);
    border-radius: 14px;
    padding: 14px 18px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.blog-toc summary {
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(160, 195, 230, 0.85);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.blog-toc summary::-webkit-details-marker { display: none; }

.blog-toc summary::after {
    content: '+';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--accent-bright);
    border: 1px solid rgba(94, 129, 172, 0.4);
    border-radius: 50%;
    background: rgba(94, 129, 172, 0.08);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-toc[open] summary::after { transform: rotate(45deg); }

.blog-toc nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 14px;
}

.blog-toc nav a {
    color: rgba(224, 224, 224, 0.72);
    text-decoration: none;
    font-size: 0.83rem;
    line-height: 1.4;
    padding: 6px 0 6px 12px;
    border-left: 2px solid rgba(94, 129, 172, 0.2);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-toc nav a:hover {
    color: #ffffff;
    border-color: var(--accent-bright);
}

/* Estados de progreso (ver blog.js → initTocProgress): secciones ya
   leídas se marcan con un check y se atenúan; la sección donde el
   usuario está ahora mismo se resalta. Sin JS, el TOC funciona
   exactamente igual que antes (enlaces simples), no se pierde nada. */
.blog-toc nav a.toc-link--done {
    color: rgba(170, 200, 235, 0.5);
}

.blog-toc nav a.toc-link--done::before {
    content: '✓ ';
    color: var(--accent-bright);
}

.blog-toc nav a.toc-link--active {
    color: #ffffff;
    font-weight: 700;
    border-color: var(--accent-bright);
    background: rgba(94, 129, 172, 0.12);
    border-radius: 0 8px 8px 0;
}


/* Desktop: sticky, siempre "abierto" visualmente (sin toggle).
   Mismo breakpoint (1360px) que el grid de 3 columnas de arriba:
   el TOC solo tiene sentido como sidebar fijo cuando SÍ hay layout
   de columnas; por debajo de 1360px el TOC vive en flujo normal
   (colapsable, ver blog.js → initTocCollapse) encima del artículo. */
@media (min-width: 1360px) {
    .blog-toc {
        position: sticky;
        top: 24px;
    }
    .blog-toc summary {
        cursor: default;
        pointer-events: none;
    }
    .blog-toc summary::after { display: none; }
}

/* ============================================================
   CUERPO DEL ARTÍCULO (prosa)
   ============================================================ */
.blog-article {
    min-width: 0;
    position: relative;
    z-index: 10;
    background: var(--portal-panel-bg);
    border: 1px solid rgba(122, 163, 212, 0.38);
    border-radius: 24px;
    padding: 40px 40px 44px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Línea de acento superior — estática a propósito (sin animación),
   para no competir con la lectura mientras el usuario avanza en el
   artículo; el "wow" visual ya ocurre en el hero. Opacidad baja y
   con glow suave (en vez de una línea sólida marcada) para que
   refuerce el borde del panel en vez de competir visualmente con él. */
.blog-article::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-bright), var(--accent));
    opacity: 0.5;
    box-shadow: 0 0 12px rgba(94, 129, 172, 0.4);
    pointer-events: none;
}

/* Selección de texto con los colores de marca (en vez del azul/gris
   por defecto del navegador) — detalle de coherencia visual. */
.blog-hero ::selection,
.blog-article ::selection {
    background: rgba(139, 92, 246, 0.45);
    color: #ffffff;
}

/* Letra capital (drop cap) en el primer párrafo del cuerpo del
   artículo — toque editorial premium, 100% CSS, no requiere tocar
   el HTML de ningún artículo. "overflow: hidden" en el propio <p>
   contiene el float dentro del párrafo (evita que "sangre" sobre
   los elementos siguientes si el párrafo fuera muy corto). */
/* ">" (hijo directo): a propósito, NO ".blog-article p:first-of-type"
   a secas — ese selector compara contra los hermanos del MISMO padre,
   así que sin el ">" también se aplicaba dentro de cada .blog-tip (su
   <p> es, a su vez, el primer <p> hijo de ese div). Acotado a hijo
   directo del artículo, solo afecta al primer párrafo real del texto. */
.blog-article > p:first-of-type {
    overflow: hidden;
}

/* Sans-serif (Inter, coherente con el resto del sitio) en vez de un
   serif tipo "periódico antiguo". Degradado en el propio texto —igual
   lenguaje visual que el borde aurora del hero— con @supports: si el
   navegador no soporta background-clip:text, se queda con el color
   plano + un text-shadow discreto (nunca texto invisible). */
.blog-article > p:first-of-type::first-letter {
    float: left;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 2.6em;
    line-height: 0.78;
    font-weight: 800;
    padding: 5px 9px 0 0;
    color: var(--accent-bright);
    text-shadow: 0 0 16px rgba(122, 163, 212, 0.35);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .blog-article > p:first-of-type::first-letter {
        background: linear-gradient(160deg, var(--accent-bright), #b48bf0);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: none;
    }
}

@media (max-width: 767px) {
    .blog-article > p:first-of-type::first-letter { font-size: 2.15em; padding: 4px 7px 0 0; }
}

.blog-article h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.005em;
    margin: 46px 0 16px;
    scroll-margin-top: 90px;
    line-height: 1.35;
    position: relative;
}

.blog-article h2:first-of-type { margin-top: 8px; }

/* Ancla "#" — clic copia el enlace directo a la sección (ver blog.js
   → initHeadingAnchors). A propósito, YA NO es un ::after "decorativo"
   con el clic delegado a todo el <h2>: con títulos que empiezan por un
   número ("1. Cambia el enfoque…") eso hacía clicable el texto entero
   y generaba confusión ("¿por qué se puede copiar esto?"). En su lugar
   blog.js inyecta en runtime un <button class="blog-h2-anchor"> real
   dentro de cada H2 (sin tocar el HTML de los artículos) — así el
   clic solo existe físicamente sobre el símbolo, con mejor affordance
   (círculo siempre visible a baja opacidad, mismo lenguaje que el "+"
   del TOC) y accesibilidad de foco/teclado gratis. Sin JS, símbolo no
   aparece — el H2 sigue siendo un título normal y perfectamente legible. */
.blog-h2-anchor {
    /* Reset de estilos nativos de <button> (Safari en particular
       aplica su propio "appearance" con relleno/borde del sistema
       que rompería el círculo). */
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    margin: 0;
    position: absolute;
    left: -34px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 0.72rem/1 'Inter', system-ui, sans-serif;
    color: var(--accent-bright);
    border: 1px solid rgba(122, 163, 212, 0.35);
    border-radius: 50%;
    background: rgba(94, 129, 172, 0.08);
    opacity: 0.4;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* :not(:hover) es a propósito: sin él, esta regla (más específica
   por combinar h2[id]:hover + .blog-h2-anchor) ganaría por
   especificidad sobre ".blog-h2-anchor:hover" de abajo cuando el
   ratón está sobre el propio botón, dejándolo "atascado" en 0.75 en
   vez de llegar a opacidad 1. Con :not(:hover), esta regla solo
   aplica mientras se pasa el ratón por el TITULAR pero no por el
   botón en sí — así el estado ":hover" propio del botón manda. */
.blog-article h2[id]:hover .blog-h2-anchor:not(:hover) { opacity: 0.75; }

.blog-h2-anchor:hover,
.blog-h2-anchor:focus-visible {
    opacity: 1;
    background: rgba(94, 129, 172, 0.2);
    border-color: var(--accent-bright);
    transform: translateY(-50%) scale(1.08);
}

@media (max-width: 1023px) {
    .blog-h2-anchor { display: none; }
}


.blog-article h3 {
    font-size: 1.08rem;
    font-weight: 700;
    color: rgba(232, 236, 245, 0.96);
    margin: 26px 0 12px;
    scroll-margin-top: 90px;
}

.blog-article p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(224, 224, 224, 0.86);
    margin: 0 0 18px;
}

.blog-article ul,
.blog-article ol {
    margin: 0 0 22px;
    padding-left: 22px;
    color: rgba(224, 224, 224, 0.86);
    line-height: 1.75;
}

.blog-article li { margin-bottom: 9px; }
.blog-article li::marker { color: var(--accent-bright); }

.blog-article strong { color: #ffffff; font-weight: 700; }

.blog-article a:not(.blog-cta-btn):not(.blog-related-card) {
    color: var(--accent-bright);
    text-decoration: underline;
    text-decoration-color: rgba(122, 163, 212, 0.4);
    text-underline-offset: 2px;
}

.blog-article a:not(.blog-cta-btn):not(.blog-related-card):hover {
    text-decoration-color: var(--accent-bright);
}

/* ── Tarjeta de "tip" destacado ── */
.blog-tip {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--portal-panel-bg);
    border: 1px solid var(--portal-border);
    border-left: 3px solid var(--accent-bright);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 26px 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(224, 224, 224, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.blog-tip-icon { font-size: 1.15rem; flex-shrink: 0; line-height: 1.4; }
.blog-tip strong { color: var(--accent-bright); }
.blog-tip p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }

/* ============================================================
   CTA PREMIUM (mismo gradiente que .card-ia del portal)
   ============================================================ */
.blog-cta {
    position: relative;
    text-align: center;
    margin: 48px 0;
    padding: 38px 26px;
    border-radius: 20px;
    background: var(--card-ia-bg);
    box-shadow: 0 14px 40px rgba(139, 92, 246, 0.35), 0 0 60px rgba(139, 92, 246, 0.15);
    overflow: hidden;
    isolation: isolate;
}

.blog-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.12), transparent 45%);
    pointer-events: none;
    z-index: -1;
}

.blog-cta-eyebrow {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 10px;
}

.blog-cta h3 {
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 10px;
    line-height: 1.3;
}

.blog-cta p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 22px;
    font-size: 0.92rem;
    max-width: 460px;
    margin-inline: auto;
    margin-bottom: 22px;
}

.blog-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #4b3a7a;
    font-weight: 800;
    padding: 14px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.95rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}

.blog-cta-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.blog-cta-note {
    display: block;
    margin-top: 16px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.02em;
}

/* ============================================================
   ARTÍCULOS RELACIONADOS
   ============================================================ */
.blog-related { margin: 50px 0 10px; }

.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.blog-related-card {
    background: var(--portal-panel-bg);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    padding: 18px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.blog-related-card:hover {
    transform: translateY(-4px);
    border-color: rgba(122, 163, 212, 0.5);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3), 0 0 20px var(--glow-blue);
}

.blog-related-tag {
    font-family: 'Courier New', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-bright);
}

.blog-related-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.4;
}

@media (max-width: 860px) {
    .blog-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .blog-related-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER DEL ARTÍCULO / NAV DE VUELTA
   ============================================================ */
.blog-footer-nav {
    text-align: center;
    margin: 60px auto 20px;
    position: relative;
    z-index: 10;
}

/* ── Enlace legal (Términos de servicio) — chip discreto bajo la
   nav de vuelta, mismo lenguaje visual que .seo-lang-links del
   portal (chip glass con hover), para que sea accesible desde
   cualquier artículo sin competir visualmente con el resto. ── */
.blog-legal-nav {
    text-align: center;
    margin: 0 auto 50px;
    position: relative;
    z-index: 10;
    font-size: 0.76rem;
}

.blog-legal-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(160, 185, 220, 0.7);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(94, 129, 172, 0.25);
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.blog-legal-nav a:hover {
    background: rgba(94, 129, 172, 0.12);
    border-color: rgba(122, 163, 212, 0.5);
    color: #ffffff;
}


/* ============================================================
   MICROANIMACIONES DE ENTRADA AL SCROLL
   ============================================================
   PROGRESSIVE ENHANCEMENT: por defecto (sin JS, o si JS falla)
   .blog-animate es 100% visible — el contenido NUNCA depende de
   JavaScript para poder leerse (crítico para SEO/accesibilidad).
   Solo cuando blog.js confirma que puede ejecutar el observer,
   añade la clase "js-animate" a <html> ANTES de que el usuario
   pueda ver nada (ver <script> inline en el <head> de cada
   artículo), y es esa clase la que activa el efecto de fade-in.
   ============================================================ */
.js-animate .blog-animate {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-animate .blog-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .js-animate .blog-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ============================================================
   PÁGINA ÍNDICE DEL BLOG (blog/index.html)
   ============================================================ */
.blog-index-hero {
    position: relative;
    z-index: 10;
    max-width: 760px;
    margin: 46px auto 6px;
    padding: 0 20px;
    text-align: center;
}

.blog-index-hero .blog-eyebrow {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(160, 195, 230, 0.8);
    margin-bottom: 14px;
}

.blog-index-hero h1 {
    font-size: clamp(2rem, 5vw, 2.9rem);
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 40px rgba(94, 129, 172, 0.55);
    margin-bottom: 16px;
    line-height: 1.2;
}

.blog-index-hero p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(224, 224, 224, 0.85);
    max-width: 620px;
    margin: 0 auto;
}

.blog-category-label {
    position: relative;
    z-index: 10;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(160, 195, 230, 0.85);
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1080px;
    margin: 52px auto 20px;
    padding: 0 20px;
}

.blog-category-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(94, 129, 172, 0.5), transparent);
}

.blog-grid-wrap {
    position: relative;
    z-index: 10;
    max-width: 1080px;
    margin: 0 auto 50px;
    padding: 0 20px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.blog-card {
    background: var(--portal-panel-bg);
    /* Borde ligeramente más marcado (antes var(--portal-border), muy
       tenue) para hacer juego con el borde ya reforzado del hero,
       el artículo y el TOC — coherencia visual entre todas las
       "cajas de cristal" del blog. */
    border: 1px solid rgba(122, 163, 212, 0.3);
    border-radius: 16px;

    padding: 22px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
}

.blog-card:hover {
    transform: translateY(-5px);
    border-color: rgba(122, 163, 212, 0.55);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 26px var(--glow-blue);
}

.blog-card-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(94, 129, 172, 0.15);
    color: var(--accent-bright);
    font-size: 1.35rem;
}

.blog-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.38;
}

.blog-card-desc {
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(224, 224, 224, 0.75);
    flex: 1;
}

.blog-card-meta {
    font-family: 'Courier New', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    color: rgba(160, 185, 220, 0.55);
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
}

@media (max-width: 860px) {
    .blog-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TOAST ("Enlace copiado") — feedback del clic en un H2 (ancla)
   ============================================================ */
.blog-toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translate(-50%, 10px);
    background: rgba(18, 24, 44, 0.96);
    border: 1px solid var(--portal-border);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 9700;
    pointer-events: none;
    white-space: nowrap;
}

.blog-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ============================================================
   CTA FLOTANTE — aparece al avanzar en la lectura, centrado
   abajo, se oculta si el CTA grande ya está visible, descartable
   ============================================================ */
.blog-floating-cta {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translate(-50%, 130%);
    z-index: 9600;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-ia-bg);
    border-radius: 50px;
    padding: 8px 8px 8px 20px;
    box-shadow: 0 14px 40px rgba(139, 92, 246, 0.4), 0 0 40px rgba(139, 92, 246, 0.2);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    pointer-events: none;
}

.blog-floating-cta.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.blog-floating-cta-link {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 2px;
}

.blog-floating-cta-close {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.blog-floating-cta-close:hover { background: rgba(255, 255, 255, 0.32); }

@media (prefers-reduced-motion: reduce) {
    .blog-floating-cta,
    .blog-toast {
        transition: opacity 0.25s ease;
    }
    .blog-floating-cta { transform: translate(-50%, 0) !important; }
}

/* ============================================================
   RESPONSIVE GENERAL — ajustes finos móviles
   ============================================================ */
@media (max-width: 767px) {
    .blog-hero {
        margin-top: 14px;
        padding: 34px 26px 44px;
    }
    .blog-article {
        padding: 30px 24px 34px;
    }
    .blog-article h2 { font-size: 1.2rem; margin-top: 38px; }
    .blog-cta { padding: 30px 20px; }
    .blog-cta h3 { font-size: 1.15rem; }
    .blog-trust-bar { margin-top: 18px; }

    .blog-floating-cta {
        left: 16px;
        right: 16px;
        bottom: 14px;
        transform: translateY(130%);
        padding-left: 18px;
    }
    .blog-floating-cta.is-visible { transform: translateY(0); }
    .blog-floating-cta-link { font-size: 0.8rem; }
}

@media (max-width: 420px) {
    .blog-trust-bar li { font-size: 0.72rem; padding: 7px 12px; }
    .blog-cta-btn { padding: 13px 24px; font-size: 0.88rem; }
    .blog-hero { padding: 30px 18px 40px; }
    .blog-article { padding: 26px 18px 30px; }
}