/* ===========================================================================
   Blog post · estilos compartidos por todos los artículos del blog
   Se carga sobre styles.css (de la landing) en cada post.
   =========================================================================== */

.post-wrap { max-width: 760px; margin: 0 auto; padding: 0 1.25rem; }
.post-meta { color:#64748b; font-size:.875rem; display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.post-meta .dot { width:3px; height:3px; background:#94a3b8; border-radius:50%; display:inline-block; }
.post-h1 { font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; font-size: clamp(1.85rem, 4.2vw, 2.85rem); line-height:1.15; letter-spacing:-.01em; color:#0b1f3a; margin: 1rem 0 1.25rem; }
.post-lead { font-size:1.125rem; line-height:1.65; color:#1e293b; border-left: 3px solid #7c3aed; padding: .5rem 0 .5rem 1rem; background: linear-gradient(90deg, rgba(124,58,237,.04), transparent 70%); margin: 1.25rem 0 2rem; }

.post-toc { background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px; padding: 1rem 1.25rem; margin: 2rem 0; }
.post-toc h2 { font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:#475569; margin:0 0 .5rem; font-weight:700; }
.post-toc ol { margin: .25rem 0 0; padding-left: 1.25rem; color:#0b1f3a; font-size:.95rem; }
.post-toc li { margin: .25rem 0; }
.post-toc a { color:#0b1f3a; text-decoration:none; border-bottom:1px dotted #94a3b8; }
.post-toc a:hover { color:#7c3aed; border-bottom-color:#7c3aed; }

.post-body h2 { font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; font-size: clamp(1.4rem, 3vw, 1.8rem); color:#0b1f3a; margin: 2.5rem 0 1rem; line-height:1.2; }
.post-body h3 { font-size: 1.2rem; color:#0b1f3a; margin: 2rem 0 .75rem; font-weight:700; }
.post-body p { font-size:1.05rem; line-height:1.75; color:#1e293b; margin: 0 0 1.25rem; }
.post-body a { color:#7c3aed; text-decoration: underline; text-decoration-thickness:1px; text-underline-offset: 3px; }
.post-body a:hover { color:#5b21b6; }
.post-body ul, .post-body ol { padding-left: 1.5rem; margin: 0 0 1.5rem; }
.post-body li { margin: .5rem 0; line-height:1.7; color:#1e293b; }

.post-table { width:100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size:.95rem; }
.post-table th, .post-table td { border:1px solid #e2e8f0; padding: .75rem .85rem; text-align:left; vertical-align:top; }
.post-table th { background:#f1f5f9; color:#0b1f3a; font-weight:700; }
.post-table tbody tr:nth-child(odd) { background:#fafbfc; }

.post-callout { background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(6,182,212,.05)); border:1px solid rgba(124,58,237,.18); border-radius: 14px; padding: 1.1rem 1.25rem; margin: 1.75rem 0; }
.post-callout strong { color:#5b21b6; }

.post-author { background:#f8fafc; border:1px solid #e2e8f0; border-radius:16px; padding:1rem 1.25rem; margin: 2.5rem 0 1.5rem; }
.post-author p { margin:0; font-size:.92rem; color:#475569; line-height:1.55; }
.post-author strong { color:#0b1f3a; font-size:1rem; }

/* FAQ · tarjetas independientes */
.post-faq { display:flex; flex-direction:column; gap:.6rem; margin: 1.25rem 0 2rem; }
.post-faq details { background:#fff; border:1px solid #e2e8f0; border-radius:14px; transition: border-color .2s ease, box-shadow .2s ease; }
.post-faq details:hover { border-color:#cbd5e1; box-shadow: 0 6px 18px -10px rgba(15,23,42,.18); }
.post-faq details[open] { border-color:#c4b5fd; box-shadow: 0 10px 28px -14px rgba(124,58,237,.32); }
.post-faq summary { position:relative; cursor:pointer; padding: 1.05rem 3.4rem 1.05rem 1.35rem; font-weight:700; color:#0b1f3a; font-size:1.02rem; list-style:none; line-height:1.45; }
.post-faq summary::-webkit-details-marker { display:none; }
.post-faq summary::after { content:'+'; position:absolute; right:1.1rem; top:50%; transform: translateY(-50%); width:30px; height:30px; border-radius:50%; background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(6,182,212,.12)); color:#7c3aed; font-size:1.25rem; font-weight:400; line-height:30px; text-align:center; transition: transform .3s ease, background .25s ease; }
.post-faq details[open] summary::after { content:'×'; transform: translateY(-50%) rotate(180deg); background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(6,182,212,.22)); }
.post-faq details[open] summary { color:#5b21b6; }
.post-faq p { padding: .1rem 1.35rem 1.2rem; margin:0; color:#475569; line-height:1.7; font-size:.98rem; }

/* CTA · destacado con badge y botón con flecha */
.post-cta { position:relative; overflow:hidden; background: radial-gradient(circle at 18% 0%, rgba(124,58,237,.55), transparent 55%), radial-gradient(circle at 92% 100%, rgba(6,182,212,.45), transparent 60%), linear-gradient(135deg, #0b1f3a, #1e1b4b 65%); color:#fff; border-radius: 22px; padding: 2.25rem 1.75rem 2rem; margin: 3rem 0 1.5rem; text-align:center; box-shadow: 0 26px 60px -28px rgba(15,23,42,.55); }
.post-cta::before { content:''; position:absolute; inset:1px; border-radius:21px; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%); }
.cta-badge { display:inline-block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#a5f3fc; background: rgba(6,182,212,.12); border:1px solid rgba(6,182,212,.35); padding:.35rem .8rem; border-radius:999px; margin-bottom:.85rem; }
.post-cta h3 { color:#fff; margin:0 0 .65rem; font-size: clamp(1.25rem, 2.6vw, 1.55rem); font-family:'Space Grotesk','Inter',sans-serif; font-weight:800; line-height:1.25; letter-spacing:-.005em; }
.post-cta p { color:#cbd5e1; margin:0 auto 1rem; font-size:1rem; max-width: 52ch; line-height:1.65; }
.post-cta p:last-of-type { margin-bottom: 1.5rem; }
.post-cta .cta-link { color:#a5f3fc; font-weight:700; text-decoration: underline; text-decoration-color: rgba(165,243,252,.45); text-decoration-thickness:1px; text-underline-offset: 4px; background:none; padding:0; border-radius:0; display:inline; }
.post-cta .cta-link:hover { color:#67e8f9; text-decoration-color:#67e8f9; }
.post-cta .cta-btn,
.post-body a.cta-btn { display:inline-flex; align-items:center; gap:.6rem; background: rgba(255,255,255,.08); color:#fff; padding:1rem 1.75rem; border-radius:999px; border:1px solid rgba(255,255,255,.22); text-decoration:none; font-weight:700; font-size:1rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.post-cta .cta-btn:hover,
.post-body a.cta-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color:#fff; transform: translateY(-2px); }
.post-cta .cta-btn::after,
.post-body a.cta-btn::after { content:'→'; font-size:1.1rem; transition: transform .2s ease; }
.post-cta .cta-btn:hover::after,
.post-body a.cta-btn:hover::after { transform: translateX(3px); }

.breadcrumb { font-size:.85rem; color:#64748b; margin: 1.5rem 0 .5rem; }
.breadcrumb a { color:#475569; text-decoration:none; }
.breadcrumb a:hover { color:#7c3aed; text-decoration:underline; }
.breadcrumb span { color:#94a3b8; margin: 0 .35rem; }

@media (prefers-color-scheme: dark) {
  .post-h1, .post-body h2, .post-body h3, .post-toc a, .post-author strong, .post-faq summary { color:#f1f5f9; }
  .post-body p, .post-body li, .post-lead { color:#cbd5e1; }
  .post-meta, .breadcrumb, .post-author p { color:#94a3b8; }
  .post-toc, .post-author { background:#0f172a; border-color:#1e293b; }
  .post-toc h2 { color:#94a3b8; }
  .post-table th { background:#1e293b; color:#f1f5f9; }
  .post-table td, .post-table th { border-color:#334155; color:#cbd5e1; }
  .post-table tbody tr:nth-child(odd) { background:#0f172a; }
  .post-callout { background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(6,182,212,.08)); border-color: rgba(124,58,237,.3); }
  .post-callout strong { color:#a78bfa; }
  .post-faq details { background:#0f172a; border-color:#1e293b; }
  .post-faq details:hover { border-color:#334155; box-shadow: 0 6px 18px -10px rgba(0,0,0,.45); }
  .post-faq details[open] { border-color:#7c3aed; box-shadow: 0 10px 28px -14px rgba(124,58,237,.5); }
  .post-faq details[open] summary { color:#c4b5fd; }
  .post-faq summary::after { color:#a78bfa; background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(6,182,212,.18)); }
  .post-faq details[open] summary::after { background: linear-gradient(135deg, rgba(124,58,237,.4), rgba(6,182,212,.32)); }
  .post-faq p { color:#94a3b8; }
}