/* blog.css — diseño compartido del blog (idéntico en todos los proyectos).
   El acento sale de --agt-t* (canales RGB) que cada proyecto define inline.
   Tema: claro por defecto; html.dark para oscuro (fijo o via script). */
:root{
  --pub-ink:#0f172a;
  --pub-text:#334155;
  --pub-muted:#64748b;
  --pub-line:#e7ebf2;
  --pub-soft:#f6f8fc;
  --pub-bg:#f2f5fa;
  --glass-bg:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.65);
  --shadow:0 6px 20px rgba(22,32,29,.10);
  --pub-ease:cubic-bezier(.2,.8,.2,1);
}
html.dark{
  --pub-ink:#e9eef6;
  --pub-text:#c3cbdd;
  --pub-muted:#8b93ab;
  --pub-line:#272c3a;
  --pub-soft:#171a24;
  --pub-bg:#0e0f15;
  --glass-bg:rgba(23,26,36,.72);
  --glass-border:rgba(255,255,255,.08);
  --shadow:0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}
body{background:var(--pub-bg);color:var(--pub-ink);font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}

/* glass-panel — igual que AgendaGT */
.glass-panel{
  background:var(--glass-bg)!important;
  border:1px solid var(--glass-border)!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
html.dark .glass-panel .bg-gray-100,
html.dark .glass-panel .bg-slate-50,
html.dark .glass-panel .bg-gray-50{background:rgba(255,255,255,.05)!important}
html.dark .glass-panel .border-gray-100{border-color:rgba(255,255,255,.08)!important}
html.dark .glass-panel .border-gray-200{border-color:rgba(255,255,255,.1)!important}
html.dark .glass-panel .text-gray-900,
html.dark .glass-panel .text-gray-700{color:#e9eef6!important}
html.dark .glass-panel .text-gray-600,
html.dark .glass-panel .text-gray-500{color:#a8b0c4!important}
html.dark .glass-panel .bg-teal-50{background:rgba(var(--agt-t500,20 184 166),.12)!important}

/* barra de navegación del blog */
.blog-nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--pub-bg) 82%,transparent);backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.blog-nav.scrolled{border-bottom-color:var(--pub-line)}
.blog-nav-in{display:flex;align-items:center;gap:14px;height:64px;max-width:80rem;margin:0 auto;padding:0 1rem}
.blog-logo{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--pub-ink);text-decoration:none}
.blog-logo img{width:34px;height:34px;border-radius:9px}
.blog-nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:700;color:var(--pub-muted)}
.blog-nav-links a{color:inherit;text-decoration:none}
.blog-nav-links a:hover{color:var(--pub-ink)}
.blog-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:11px;font-size:14px;font-weight:800;background:rgb(var(--agt-t600));color:#fff;text-decoration:none;transition:filter .15s,transform .15s}
.blog-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
@media (max-width:700px){.blog-nav-links{display:none}.blog-cta{margin-left:auto}}

/* pie del blog */
.blog-foot{padding:40px 0 48px;color:var(--pub-muted);font-size:14px}
.blog-foot .in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--pub-line);padding-top:28px;max-width:80rem;margin:0 auto;padding-left:1rem;padding-right:1rem}
.blog-foot a{color:inherit;text-decoration:none}
.blog-foot a:hover{color:var(--pub-ink)}
.blog-foot .links{display:flex;gap:20px;margin-left:auto;font-weight:600}
.blog-foot b{color:var(--pub-text)}

/* reveal on scroll (igual que [data-rv] de agt-public.js) */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--pub-ease),transform .7s var(--pub-ease);transition-delay:var(--rv-d,0s)}
[data-rv].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1!important;transform:none!important;transition:none!important}}

/* imagen destacada en detalle */
.post-hero-img{height:260px}
@media (min-width:768px){.post-hero-img{height:420px}.post-feat-media{width:54%}}

/* tipografía del cuerpo del post en dark → invert vars del plugin prose */
html.dark .prose{--tw-prose-body:var(--tw-prose-invert-body);--tw-prose-headings:var(--tw-prose-invert-headings);--tw-prose-lead:var(--tw-prose-invert-lead);--tw-prose-links:var(--tw-prose-invert-links);--tw-prose-bold:var(--tw-prose-invert-bold);--tw-prose-counters:var(--tw-prose-invert-counters);--tw-prose-bullets:var(--tw-prose-invert-bullets);--tw-prose-hr:var(--tw-prose-invert-hr);--tw-prose-quotes:var(--tw-prose-invert-quotes);--tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);--tw-prose-captions:var(--tw-prose-invert-captions);--tw-prose-code:var(--tw-prose-invert-code);--tw-prose-pre-code:var(--tw-prose-invert-pre-code);--tw-prose-pre-bg:var(--tw-prose-invert-pre-bg);--tw-prose-th-borders:var(--tw-prose-invert-th-borders);--tw-prose-td-borders:var(--tw-prose-invert-td-borders)}

/* bloques semánticos de contenido (.pg-*) */
.pg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:14px 0}
.pg-card{background:#fff;border:1px solid var(--pub-line);border-radius:12px;padding:12px 14px}
.pg-card p{margin:4px 0 0;font-size:.92em;color:var(--pub-muted)}
.pg-card strong{color:rgb(var(--agt-t600))}
.pg-callout{background:rgba(var(--agt-t100),.5);border-left:4px solid rgb(var(--agt-t600));border-radius:10px;padding:12px 16px;margin:16px 0}
.pg-callout p{margin:0}
.pg-steps{margin:14px 0}
.pg-step{display:flex;gap:12px;align-items:flex-start;margin:10px 0}
.pg-num{flex:0 0 26px;height:26px;border-radius:50%;background:rgb(var(--agt-t600));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85em}
.pg-step p{margin:4px 0 0;font-size:.92em;color:var(--pub-muted)}
html.dark .pg-card{background:rgba(255,255,255,.05);border-color:var(--pub-line)}
html.dark .pg-callout{background:rgba(var(--agt-t500),.12)}

@media print{.blog-nav,.blog-foot,.pg-callout{display:none!important}}