/* ============================================================
   BLOG TÉCNICO · innovaycree.com/blog — hoja del blog (17 ago 2026)
   Se apila sobre /css/enterprise.css (header, footer, botones, fuentes:
   Fraunces · Inter · IBM Plex Mono, servidas desde /fonts/).
   Canon Innova: obsidiana + ámbar + off-white, banda diagonal firma,
   numeración coleccionable. Contraste medido ≥ 4,5:1 en todo el texto.
   Fuente: /root/innovaycree-blog/blog.css (el generador la copia).
   ============================================================ */

:root {
  --b-bg: #0a0a0f;
  --b-panel: #10111a;
  --b-panel-2: #151723;
  --b-line: rgba(237,237,243,0.10);
  --b-line-soft: rgba(237,237,243,0.06);
  --b-text: #EDEDF3;
  --b-text-2: #C3C6D0;   /* 10,9:1 sobre --b-bg */
  --b-muted: #9096A3;    /* 6,4:1 sobre --b-bg */
  --b-amber: #f59e0b;    /* 8,9:1 sobre --b-bg */
  --b-amber-hi: #F5C842;
  --b-amber-txt: #FFB938; /* para texto pequeño sobre obsidiana: 10:1 */
  --b-ok: #2FBF8F;
  --b-serif: 'Fraunces', Georgia, serif;
  --b-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --b-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --b-medida: 46rem;
}

body.b-body { background: var(--b-bg); color: var(--b-text); font-family: var(--b-sans); }
.b-saltar { position: absolute; left: -999px; top: 0; background: var(--b-amber); color: #141004; padding: .5rem .8rem; z-index: 100; font-weight: 600; }
.b-saltar:focus { left: .5rem; top: .5rem; }
.b-main { position: relative; }
.b-wrap { max-width: 1120px; margin: 0 auto; padding: 2.2rem 24px 4rem; position: relative; }

/* Banda diagonal — firma de la marca, sutil, detrás de la cabecera */
.b-banda { position: absolute; inset: 0 0 auto 0; height: 420px; overflow: hidden; pointer-events: none; z-index: 0; }
.b-banda::before { content: ""; position: absolute; left: -12%; top: -40%; width: 22%; height: 190%; background: linear-gradient(180deg, rgba(245,158,11,0.16), rgba(245,158,11,0.02)); transform: skewX(-24deg); }
.b-banda::after { content: ""; position: absolute; left: 9%; top: -40%; width: 3px; height: 190%; background: rgba(245,158,11,0.32); transform: skewX(-24deg); }
.b-art, .b-hub, .b-portada, .b-autorpg, .b-plantillapg { position: relative; }
.b-art > .b-wrap, .b-hub > .b-wrap, .b-portada > .b-wrap, .b-autorpg > .b-wrap, .b-plantillapg > .b-wrap { z-index: 1; }

/* Tipografía base */
.b-mono { font-family: var(--b-mono); font-size: .78em; letter-spacing: .02em; color: var(--b-muted); }
.b-rot { font-family: var(--b-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--b-amber-txt); margin: 0 0 .5rem; }
.b-kicker { font-family: var(--b-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--b-amber-txt); margin: 0 0 .8rem; }
.b-kicker a { color: inherit; border-bottom: 1px solid rgba(245,158,11,0.35); }
.b-kicker a:hover { color: var(--b-amber-hi); }
h1 { font-family: var(--b-serif); font-weight: 500; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 1.1rem; max-width: 22ch; }
.b-h2 { font-family: var(--b-serif); font-weight: 500; font-size: 1.5rem; margin: 3rem 0 1.2rem; }
.b-lead { font-size: 1.12rem; line-height: 1.7; color: var(--b-text-2); max-width: var(--b-medida); margin: 0 0 1.4rem; }
.b-lead a, .b-cuerpo a, .b-portada-m a, .b-refs a, .b-autor a, .b-mas a, .b-lista a, .b-hist a, .b-faq a { color: var(--b-amber-txt); text-decoration: underline; text-decoration-color: rgba(245,158,11,0.35); text-underline-offset: 3px; }
.b-lead a:hover, .b-cuerpo a:hover, .b-refs a:hover, .b-mas a:hover { color: var(--b-amber-hi); text-decoration-color: currentColor; }
.b-vacio { color: var(--b-muted); }

/* Migas */
.b-migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .5rem; padding: 0; margin: 0 0 1.6rem; font-size: .8rem; color: var(--b-muted); }
.b-migas li + li::before { content: "›"; margin-right: .5rem; color: var(--b-muted); }
.b-migas a { color: var(--b-text-2); }
.b-migas a:hover { color: var(--b-amber-hi); }
.b-migas [aria-current] { color: var(--b-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; display: inline-block; vertical-align: bottom; }

/* Cabecera del artículo */
.b-cab { max-width: 52rem; margin-bottom: 1.6rem; }
.b-abstract { font-size: 1.12rem; line-height: 1.7; color: var(--b-text-2); border-left: 3px solid var(--b-amber); padding: .2rem 0 .2rem 1.1rem; margin: 0 0 1.4rem; }
.b-firma { color: var(--b-text-2); font-size: .95rem; line-height: 1.6; margin: 0 0 .5rem; }
.b-firma a { color: var(--b-text); font-weight: 600; }
.b-firma a:hover { color: var(--b-amber-hi); }
.b-rev { color: var(--b-muted); font-size: .86rem; }
.b-fechas { margin: 0; color: var(--b-muted); }
.b-fechas a { color: var(--b-amber-txt); text-decoration: underline; text-underline-offset: 3px; }
picture.hero { display: block; margin: 0 0 2rem; border: 1px solid var(--b-line); border-radius: 8px; overflow: hidden; max-width: 52rem; }
picture.hero img { width: 100%; height: auto; display: block; }

/* Columnas: TOC + cuerpo */
.b-cols { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.b-lateral { order: -1; }
.b-toc { border: 1px solid var(--b-line); border-radius: 8px; padding: 1rem 1.1rem; background: var(--b-panel); }
.b-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.b-toc > ol > li { counter-increment: toc; }
.b-toc > ol > li > a::before { content: counter(toc, decimal-leading-zero) " "; font-family: var(--b-mono); color: var(--b-amber-txt); font-size: .72rem; }
.b-toc ol ol { padding-left: 1.4rem; }
.b-toc a { display: block; padding: .28rem 0; color: var(--b-text-2); font-size: .88rem; line-height: 1.4; border-left: 2px solid transparent; }
.b-toc ol ol a { font-size: .82rem; color: var(--b-muted); }
.b-toc a:hover { color: var(--b-amber-hi); }
.b-toc a.activo { color: var(--b-amber-hi); }
@media (min-width: 1024px) {
  .b-cols { grid-template-columns: 240px minmax(0, var(--b-medida)); gap: 3rem; align-items: start; }
  .b-lateral { order: 0; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; }
}

/* Cuerpo */
.b-cuerpo { font-size: 1.05rem; line-height: 1.78; color: var(--b-text-2); }
.b-cuerpo > p, .b-cuerpo > ul, .b-cuerpo > ol { margin: 0 0 1.25rem; }
.b-cuerpo h2 { font-family: var(--b-serif); font-weight: 500; font-size: 1.62rem; line-height: 1.25; color: var(--b-text); margin: 2.6rem 0 1rem; scroll-margin-top: 90px; }
.b-cuerpo h3 { font-family: var(--b-sans); font-weight: 600; font-size: 1.15rem; color: var(--b-text); margin: 2rem 0 .8rem; scroll-margin-top: 90px; }
.b-cuerpo h4 { font-weight: 600; font-size: 1rem; color: var(--b-text); margin: 1.6rem 0 .6rem; }
.b-cuerpo strong { color: var(--b-text); font-weight: 600; }
.b-cuerpo ul, .b-cuerpo ol { padding-left: 1.4rem; }
.b-cuerpo li { margin: .35rem 0; }
.b-cuerpo li::marker { color: var(--b-amber-txt); }
.b-cuerpo blockquote { margin: 1.6rem 0; padding: .6rem 0 .6rem 1.2rem; border-left: 3px solid var(--b-amber); color: var(--b-text); font-family: var(--b-serif); font-size: 1.15rem; line-height: 1.6; }
.b-cuerpo blockquote p { margin: 0; }
.b-cuerpo code { font-family: var(--b-mono); font-size: .88em; background: var(--b-panel-2); border: 1px solid var(--b-line-soft); border-radius: 4px; padding: .1em .35em; color: var(--b-text); }
.b-cuerpo pre { background: var(--b-panel); border: 1px solid var(--b-line); border-radius: 8px; padding: 1rem 1.1rem; overflow: auto; font-size: .86rem; line-height: 1.55; margin: 0 0 1.4rem; }
.b-cuerpo pre code { background: none; border: 0; padding: 0; }
.b-cuerpo hr { border: 0; border-top: 1px solid var(--b-line); margin: 2.4rem 0; }
.b-cuerpo sup.nota { font-size: .72em; line-height: 0; }
.b-cuerpo sup.nota a { text-decoration: none; color: var(--b-amber-txt); font-family: var(--b-mono); padding: 0 .1em; }
.b-cuerpo .footnote { border-top: 1px solid var(--b-line); margin-top: 2rem; padding-top: 1rem; font-size: .9rem; color: var(--b-muted); }
.b-cuerpo .footnote ol { padding-left: 1.2rem; }

/* Tablas */
.tabla-scroll { overflow-x: auto; margin: 0 0 1.6rem; border: 1px solid var(--b-line); border-radius: 8px; }
.b-cuerpo table { border-collapse: collapse; width: 100%; font-size: .92rem; line-height: 1.5; min-width: 520px; }
.b-cuerpo caption { caption-side: bottom; text-align: left; font-family: var(--b-mono); font-size: .74rem; color: var(--b-muted); padding: .7rem .9rem; border-top: 1px solid var(--b-line-soft); }
.b-cuerpo th { text-align: left; font-family: var(--b-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--b-amber-txt); background: var(--b-panel); padding: .7rem .9rem; border-bottom: 1px solid var(--b-line); }
.b-cuerpo td { padding: .65rem .9rem; border-bottom: 1px solid var(--b-line-soft); vertical-align: top; color: var(--b-text-2); }
.b-cuerpo tbody tr:last-child td { border-bottom: 0; }
.b-cuerpo tbody tr:hover td { background: rgba(237,237,243,0.025); }

/* Figuras */
.figura { margin: 1.8rem 0; }
.figura img { width: 100%; height: auto; border: 1px solid var(--b-line); border-radius: 8px; background: #fff; }
.figura figcaption { font-family: var(--b-mono); font-size: .76rem; color: var(--b-muted); margin-top: .5rem; }

/* Bloques :::dato / :::aviso / :::plantilla */
.b-dato, .b-aviso, .b-plantilla { border: 1px solid var(--b-line); border-radius: 8px; padding: 1rem 1.2rem; margin: 1.6rem 0; background: var(--b-panel); position: relative; }
.b-dato::before, .b-aviso::before, .b-plantilla::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 8px 0 0 8px; background: var(--b-amber); }
.b-aviso::before { background: var(--b-muted); }
.b-plantilla::before { background: var(--b-ok); }
.b-dato p:last-child, .b-aviso p:last-child, .b-plantilla p:last-child { margin-bottom: 0; }
.b-dato p, .b-aviso p { font-size: .98rem; }
.b-plantilla-n { font-weight: 600; font-size: 1.05rem; }
.b-plantilla-l { font-family: var(--b-mono); font-size: .76rem; color: var(--b-muted); }

/* Secciones de cierre */
.b-sec { max-width: 52rem; margin: 3rem 0 0; }
.b-sec h2 { font-family: var(--b-serif); font-weight: 500; font-size: 1.5rem; margin: 0 0 1rem; scroll-margin-top: 90px; }
.b-puntos ul { list-style: none; padding: 0; margin: 0; counter-reset: pk; }
.b-puntos li { counter-increment: pk; position: relative; padding: .7rem 0 .7rem 2.6rem; border-top: 1px solid var(--b-line-soft); color: var(--b-text-2); line-height: 1.6; }
.b-puntos li:last-child { border-bottom: 1px solid var(--b-line-soft); }
.b-puntos li::before { content: counter(pk, decimal-leading-zero); position: absolute; left: 0; top: .8rem; font-family: var(--b-mono); color: var(--b-amber-txt); font-size: .8rem; }
.b-faq details { border: 1px solid var(--b-line); border-radius: 8px; margin: 0 0 .6rem; background: var(--b-panel); }
.b-faq summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 600; color: var(--b-text); list-style: none; position: relative; padding-right: 2.4rem; }
.b-faq summary::-webkit-details-marker { display: none; }
.b-faq summary::after { content: "+"; position: absolute; right: 1rem; top: .75rem; color: var(--b-amber-txt); font-family: var(--b-mono); font-size: 1.1rem; }
.b-faq details[open] summary::after { content: "–"; }
.b-faq details > div { padding: 0 1.1rem 1rem; color: var(--b-text-2); line-height: 1.7; }
.b-faq details > div p:last-child { margin-bottom: 0; }
.b-ref-l { padding-left: 0; list-style: none; font-size: .92rem; line-height: 1.6; color: var(--b-text-2); }
.b-ref-l li { padding: .55rem 0; border-top: 1px solid var(--b-line-soft); word-break: break-word; scroll-margin-top: 90px; }
.b-ref-n { font-family: var(--b-mono); color: var(--b-amber-txt); margin-right: .3rem; }
.b-ref-tipo { font-family: var(--b-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--b-muted); border: 1px solid var(--b-line); border-radius: 3px; padding: .05rem .35rem; margin-left: .3rem; }
.b-cita { font-family: var(--b-mono); font-size: .82rem; line-height: 1.6; background: var(--b-panel); border: 1px solid var(--b-line); border-radius: 8px; padding: .9rem 1rem; color: var(--b-text-2); white-space: pre-wrap; word-break: break-word; margin: 0 0 .6rem; }
.b-btn-min { font-family: var(--b-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; background: none; border: 1px solid var(--b-line); color: var(--b-text-2); border-radius: 6px; padding: .4rem .8rem; cursor: pointer; margin: 0 0 1.2rem; }
.b-btn-min:hover { border-color: var(--b-amber); color: var(--b-amber-hi); }
.b-pdf { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.b-hist { border-top: 1px solid var(--b-line-soft); padding-top: .8rem; }
.b-hist summary { cursor: pointer; font-family: var(--b-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--b-muted); }
.b-hist ol { list-style: none; padding: 0; margin: .8rem 0 0; font-size: .9rem; color: var(--b-text-2); }
.b-hist li { padding: .3rem 0; }
.b-hist .b-mono { color: var(--b-amber-txt); margin-right: .5rem; }
.b-desc ul { padding-left: 1.2rem; }
.b-lista { padding-left: 1.2rem; line-height: 1.8; }

/* Caja de autor (sin foto, por regla) */
.b-autor { max-width: 52rem; margin: 3rem 0 0; border: 1px solid var(--b-line); border-radius: 8px; padding: 1.2rem 1.4rem; background: linear-gradient(135deg, rgba(245,158,11,0.06), transparent 60%); color: var(--b-text-2); line-height: 1.65; }
.b-autor p { margin: 0 0 .5rem; }
.b-autor-n { font-size: 1.05rem; color: var(--b-text); }
.b-autor-n a { color: var(--b-text); font-weight: 600; text-decoration: none; }

/* Tarjetas / rejillas */
.b-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.b-tar { border: 1px solid var(--b-line); border-radius: 8px; background: var(--b-panel); transition: border-color .18s, transform .18s; }
.b-tar:hover { border-color: rgba(245,158,11,0.5); transform: translateY(-2px); }
.b-tar a { display: block; padding: 1.1rem 1.2rem 1rem; height: 100%; }
.b-tar h3 { font-family: var(--b-serif); font-weight: 500; font-size: 1.15rem; line-height: 1.3; color: var(--b-text); margin: 0 0 .5rem; }
.b-tar-d { font-size: .9rem; line-height: 1.55; color: var(--b-text-2); margin: 0 0 .8rem; }
.b-tar-m { margin: 0; }
.b-cluster { max-width: none; }
.b-mas { font-weight: 600; margin: .4rem 0 0; }
.b-otros { margin: 3rem 0 0; }
.b-otros ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.b-otros a { display: inline-block; border: 1px solid var(--b-line); border-radius: 999px; padding: .35rem .9rem; font-size: .86rem; color: var(--b-text-2); }
.b-otros a:hover { border-color: var(--b-amber); color: var(--b-amber-hi); }
.b-hubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.b-hubcard { display: block; border: 1px solid var(--b-line); border-radius: 8px; overflow: hidden; background: var(--b-panel); transition: border-color .18s; }
.b-hubcard:hover { border-color: rgba(245,158,11,0.5); }
.b-hubcard img { width: 100%; height: auto; aspect-ratio: 1200/630; object-fit: cover; display: block; border-bottom: 1px solid var(--b-line-soft); }
.b-hubcard-t { display: block; padding: 1rem 1.2rem 1.1rem; }
.b-hubcard-d { display: block; font-size: .9rem; line-height: 1.55; color: var(--b-text-2); }
.b-portada-m { margin: 0 0 1rem; }
.b-portada-m a { color: var(--b-amber-txt); }
.b-tags { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.b-tags li { font-family: var(--b-mono); font-size: .7rem; letter-spacing: .06em; border: 1px solid var(--b-line); border-radius: 4px; padding: .2rem .5rem; color: var(--b-muted); }

/* CTA único */
.b-cta { max-width: 52rem; margin: 3rem 0 0; border: 1px solid rgba(245,158,11,0.35); border-radius: 8px; padding: 1.6rem 1.6rem 1.7rem; background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(245,158,11,0.02)); }
.b-cta h2 { font-family: var(--b-serif); font-weight: 500; font-size: 1.5rem; margin: 0 0 .6rem; }
.b-cta p { color: var(--b-text-2); line-height: 1.65; margin: 0 0 1.1rem; max-width: 60ch; }

@media (max-width: 640px) {
  .b-wrap { padding: 1.6rem 18px 3rem; }
  .b-cuerpo { font-size: 1rem; }
  .b-migas [aria-current] { max-width: 24ch; }
}
@media (prefers-reduced-motion: reduce) { .b-tar, .b-hubcard { transition: none; } .b-tar:hover { transform: none; } }

/* ============ Impresión / PDF: papel blanco, tinta oscura ============ */
@media print {
  :root, body.b-body, body.e-body { background: #fff !important; color: #111 !important; }
  .e-nav, .e-mobile, .e-footer, .b-banda, .b-cta, .b-toc, .b-btn-min, .b-cluster, .b-saltar, .b-tags, .b-pdf .e-btn { display: none !important; }
  .b-wrap { max-width: none; padding: 0; }
  .b-cols { display: block; }
  h1, .b-cuerpo h2, .b-cuerpo h3, .b-sec h2, .b-tar h3, .b-cuerpo strong, .b-firma a, .b-autor-n, .b-autor-n a { color: #111 !important; }
  .b-cuerpo, .b-lead, .b-abstract, .b-firma, .b-cuerpo td, .b-puntos li, .b-faq details > div, .b-ref-l, .b-autor, .b-cita, .b-hist ol, .b-tar-d { color: #222 !important; }
  .b-abstract { border-left-color: #b45309; }
  .b-kicker, .b-rot, .b-ref-n, .b-cuerpo th, .b-toc > ol > li > a::before, .b-puntos li::before, .b-hist .b-mono, .b-fechas a { color: #92400e !important; }
  .b-mono, .b-rev, .b-fechas, .b-migas, .b-migas a, .b-migas [aria-current], .figura figcaption, .b-cuerpo caption, .b-ref-tipo, .b-plantilla-l, .b-hist summary { color: #555 !important; }
  .b-cuerpo a, .b-lead a, .b-refs a, .b-autor a, .b-faq a { color: #1d4ed8 !important; text-decoration: underline; }
  .b-cuerpo pre, .b-cuerpo code, .b-cita, .b-dato, .b-aviso, .b-plantilla, .b-faq details, .b-toc, .b-tar, .b-autor, .tabla-scroll { background: #fff !important; border-color: #ccc !important; }
  .b-cuerpo th { background: #f3f4f6 !important; }
  .b-cuerpo table { min-width: 0; }
  .b-cuerpo tbody tr:hover td { background: none; }
  .b-faq details { break-inside: avoid; }
  .b-faq details > div { display: block; }
  .b-faq summary::after { display: none; }
  .b-hist { display: block; }
  .b-hist ol { display: block; }
  picture.hero { border-color: #ccc; }
  .figura-hero { text-align: center; break-inside: avoid; margin: 1rem 0 1.4rem; }
  .figura-hero img { max-height: 70mm; width: auto; max-width: 100%; display: inline-block; }
  a[href^="http"]:not([href*="innovaycree.com"])::after { content: ""; }
  @page { margin: 18mm 16mm; }
  .b-cuerpo h2, .b-sec h2 { break-after: avoid; }
  .b-print .b-cab::before { content: "innovaycree.com/blog · documento generado del artículo en línea; la versión vigente es la URL canónica."; display: block; font-family: var(--b-mono); font-size: 9pt; color: #666; margin-bottom: 1rem; }
}