/* ============================================================
   Tilín · Blog — estilos compartidos (tokens + blog)
   Mantiene la identidad visual de la landing.
   ============================================================ */
:root{
  --gold-50:#FFF7E6; --gold-100:#FFECC2; --gold-200:#FFDD8F; --gold-300:#FFCB54;
  --gold-400:#FFB323; --gold-500:#F59E0B; --gold-600:#D97F06; --gold-700:#B45F09;
  --ink-0:#FFFFFF; --ink-50:#FBF9F6; --ink-100:#F4F0EA; --ink-200:#E7E1D8;
  --ink-300:#D4CcBE; --ink-400:#9C9384; --ink-500:#766E60; --ink-600:#574F43;
  --ink-700:#3D362C; --ink-800:#2A241C; --ink-900:#1A1610; --ink-950:#12100B;
  --teal-50:#E6F7F4; --teal-400:#22B3A3; --teal-500:#0E9384; --teal-600:#0B7468;
  --error:#D92D20;
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Figtree',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --bg:var(--ink-50); --surface:var(--ink-0); --border:var(--ink-200);
  --e1:0 1px 2px rgba(18,16,11,.05); --e2:0 10px 30px -12px rgba(18,16,11,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink-700);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='8' cy='8' r='5.5' fill='%23FFB323' stroke='%23161310' stroke-width='1'/></svg>") 8 8, auto}
a,button,summary{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='8' fill='%23FFB323' stroke='%23161310' stroke-width='1.2'/></svg>") 12 12, pointer}
@media(hover:none){body,a,button,summary{cursor:auto}}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--ink-950)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:740px;margin:0 auto;padding:0 24px}

/* ===== NAV ===== */
.bnav{position:sticky;top:0;z-index:100;background:rgba(251,249,246,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.bnav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:18px}
.brandmark{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.03em;color:var(--ink-950)}
.brandmark .bell{width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(140deg,var(--gold-400),var(--gold-500));flex-shrink:0}
.brandmark .bell svg{width:62%;height:62%;color:#12100B}
.bnav-links{display:flex;align-items:center;gap:24px}
.bnav-links a{font-size:14.5px;color:var(--ink-600);font-weight:500;transition:color .15s var(--ease)}
.bnav-links a:hover{color:var(--ink-950)}
.btn{font-family:var(--font-body);font-weight:600;font-size:15px;border-radius:var(--r-md);padding:11px 18px;border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.16s var(--ease);white-space:nowrap}
.btn-primary{background:var(--gold-400);color:var(--ink-950)}
.btn-primary:hover{background:var(--gold-300);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink-800);border:1px solid var(--ink-300)}
.btn-ghost:hover{background:var(--ink-100)}
.btn-lg{padding:14px 24px;font-size:16px}
@media(max-width:680px){.bnav-links .hide-sm{display:none}}

/* ===== BLOG HOME ===== */
.blog-hero{padding:64px 0 28px;text-align:center}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-600);display:inline-flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--gold-400)}
.blog-hero h1{font-size:clamp(34px,5vw,52px)}
.blog-hero p{margin:16px auto 0;max-width:60ch;color:var(--ink-600);font-size:18px}
.blog-tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:30px 0 24px}
.blog-search{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);padding:10px 16px}
.blog-search input{flex:1;border:none;background:transparent;font-family:inherit;font-size:15px;color:var(--ink-900);outline:none}
.blog-search svg{width:17px;height:17px;color:var(--ink-400);flex-shrink:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--border);background:var(--surface);color:var(--ink-600);border-radius:var(--r-full);padding:7px 13px;transition:.15s var(--ease)}
.chip:hover{border-color:var(--ink-300)}
.chip[aria-pressed="true"]{background:var(--ink-950);color:#fff;border-color:var(--ink-950)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:8px 0 40px}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:.18s var(--ease)}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:var(--ink-300)}
.post-cover{aspect-ratio:16/9;background:linear-gradient(140deg,var(--gold-100),var(--ink-100));position:relative;display:flex;align-items:center;justify-content:center}
.post-cover .bell{width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(140deg,var(--gold-400),var(--gold-500))}
.post-cover .bell svg{width:60%;height:60%;color:#12100B}
.post-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-cat{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-700)}
.post-card h2{font-size:19px;line-height:1.25}
.post-card p{font-size:14.5px;color:var(--ink-600);flex:1}
.post-meta{display:flex;gap:12px;font-family:var(--font-mono);font-size:11px;color:var(--ink-400);margin-top:4px}
.no-results{text-align:center;color:var(--ink-500);padding:40px 0;font-family:var(--font-mono);font-size:14px}

/* ===== ARTÍCULO ===== */
.breadcrumb{font-family:var(--font-mono);font-size:12px;color:var(--ink-400);padding:24px 0 0}
.breadcrumb a{color:var(--ink-500)}
.breadcrumb a:hover{color:var(--gold-700)}
.breadcrumb span{margin:0 7px}
.article-head{padding:24px 0 8px}
.article-head .post-cat{margin-bottom:12px;display:inline-block}
.article-head h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08}
.article-head .lead{font-size:19px;color:var(--ink-600);margin-top:16px}
.article-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-500)}
.article-meta .av{width:32px;height:32px;border-radius:var(--r-full);background:linear-gradient(140deg,var(--gold-300),var(--teal-400))}
.article-meta .who b{color:var(--ink-800);font-family:var(--font-body);font-weight:700;font-size:13.5px;display:block}
.article-cover{aspect-ratio:21/9;border-radius:var(--r-xl);background:linear-gradient(140deg,var(--gold-100),var(--ink-100));margin:28px 0;display:flex;align-items:center;justify-content:center}
.article-cover .bell{width:64px;height:64px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(140deg,var(--gold-400),var(--gold-500))}
.article-cover .bell svg{width:60%;height:60%;color:#12100B}
.article-layout{display:grid;grid-template-columns:1fr 220px;gap:48px;align-items:start;padding-bottom:40px}
.toc{position:sticky;top:84px;font-size:13.5px}
.toc h4{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-400);font-weight:400;margin-bottom:12px}
.toc ul{list-style:none;display:flex;flex-direction:column;gap:9px;border-left:2px solid var(--border);padding-left:14px}
.toc a{color:var(--ink-500);line-height:1.35;transition:.15s var(--ease)}
.toc a:hover,.toc a.active{color:var(--gold-700)}
.prose{font-size:17px;color:var(--ink-700);max-width:68ch}
.prose h2{font-size:27px;margin:40px 0 14px;scroll-margin-top:84px}
.prose h3{font-size:20px;margin:28px 0 10px;scroll-margin-top:84px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 9px}
.prose a{color:var(--gold-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--gold-600)}
.prose strong{color:var(--ink-900);font-weight:700}
.prose blockquote{border-left:3px solid var(--gold-400);background:var(--gold-50);padding:16px 20px;border-radius:0 var(--r-md) var(--r-md) 0;margin:0 0 22px;color:var(--ink-800);font-size:18px}
.prose img{border-radius:var(--r-lg);border:1px solid var(--border);margin:8px 0 22px}
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.prose th,.prose td{border:1px solid var(--border);padding:10px 13px;text-align:left}
.prose th{background:var(--ink-100);font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-700)}
.prose .key-takeaway{background:var(--ink-950);color:var(--ink-100);border-radius:var(--r-lg);padding:22px 24px;margin:0 0 24px}
.prose .key-takeaway b{color:var(--gold-400)}

/* CTA dentro del artículo */
.cta-box{background:linear-gradient(140deg,var(--ink-950),var(--ink-800));color:#fff;border-radius:var(--r-xl);padding:30px 28px;margin:34px 0;text-align:center}
.cta-box h3{color:#fff;font-size:23px;margin-bottom:8px}
.cta-box p{color:var(--ink-300);margin:0 auto 18px;max-width:46ch;font-size:15.5px}
.cta-inline{background:var(--gold-50);border:1px solid var(--gold-200);border-radius:var(--r-lg);padding:18px 20px;margin:26px 0;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-inline p{margin:0;font-size:15px;color:var(--ink-800)}
.cta-inline .btn{flex-shrink:0}

/* FAQ del artículo */
.article-faq{border-top:1px solid var(--border);margin-top:36px;padding-top:32px}
.article-faq h2{font-size:25px;margin-bottom:16px}
.article-faq details{border-bottom:1px solid var(--border);padding:14px 0}
.article-faq summary{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink-900);list-style:none;display:flex;justify-content:space-between;gap:12px}
.article-faq summary::-webkit-details-marker{display:none}
.article-faq summary .pm{color:var(--gold-500);font-weight:400}
.article-faq details[open] summary .pm{transform:rotate(45deg)}
.article-faq .a{padding-top:10px;color:var(--ink-600);font-size:15.5px}

/* relacionados / autor */
.related{border-top:1px solid var(--border);margin-top:40px;padding:36px 0}
.related h2{font-size:24px;margin-bottom:20px}
.author-box{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;margin:8px 0 0}
.author-box .av{width:52px;height:52px;border-radius:var(--r-full);background:linear-gradient(140deg,var(--gold-400),var(--teal-400));flex-shrink:0}
.author-box b{color:var(--ink-950);font-size:15px}
.author-box p{font-size:14px;color:var(--ink-600);margin-top:2px}

/* ===== FOOTER ===== */
.bfoot{background:var(--ink-950);color:var(--ink-300);padding:48px 0 36px;margin-top:20px}
.bfoot .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.bfoot .brandmark{color:#fff}
.bfoot a{color:var(--ink-400)}
.bfoot a:hover{color:var(--gold-400)}
.bfoot nav{display:flex;gap:20px;flex-wrap:wrap;font-size:14px}
.bfoot .legal{width:100%;border-top:1px solid var(--ink-800);padding-top:22px;font-family:var(--font-mono);font-size:12px;color:var(--ink-500)}
.bfoot .legal a{color:var(--gold-400)}

@media(max-width:860px){
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .article-layout{grid-template-columns:1fr;gap:0}
  .toc{display:none}
}
@media(max-width:560px){
  .post-grid{grid-template-columns:1fr}
  .blog-hero{padding:44px 0 20px}
  .prose{font-size:16px}
}