/* Blog Leori Dental — estilo autossuficiente, tokens espelhados de src/style.css.
   Paginas estaticas nao carregam o bundle do SPA (hash instavel), entao tudo vive aqui. */
:root{
  --ink: oklch(18% 0.035 260);
  --ink-soft: oklch(26% 0.030 260);
  --bone: oklch(95.5% 0.008 260);
  --paper: oklch(97.5% 0.005 260);
  --stone: oklch(52% 0.015 260);
  --body: oklch(30% 0.02 260);
  --accent: oklch(82% 0.030 260);
  --line: oklch(18% 0.035 260 / 0.12);
  --on-ink: oklch(95.5% 0.008 260);
  --on-ink-mut: oklch(72% 0.020 260);
  --fd: 'Sentient','Times New Roman',serif;
  --ft: 'Switzer',system-ui,-apple-system,sans-serif;
  --fm: 'JetBrains Mono','SF Mono',Consolas,monospace;
  --wrap: 1120px;
  --measure: 680px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.bl-body{ font-family:var(--ft); color:var(--ink); background:var(--bone); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ max-width:100%; display:block; }

/* Topbar */
.bl-topbar{ background:var(--ink); color:var(--on-ink-mut); font-size:13px; text-align:center; padding:8px 16px; }
.bl-topbar b{ color:var(--accent); font-weight:600; }

/* Nav */
.bl-nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px; padding:14px 32px; background:var(--ink); border-bottom:1px solid rgba(255,255,255,.06); }
.bl-logo{ display:flex; align-items:center; }
.bl-logo img{ width:118px; height:auto; filter:brightness(0) invert(1); }
.bl-menu{ display:flex; gap:26px; margin-left:6px; }
.bl-menu a{ color:var(--on-ink-mut); text-decoration:none; font-size:15px; font-weight:500; transition:color .2s; }
.bl-menu a:hover, .bl-menu a[aria-current="page"]{ color:var(--on-ink); }
.bl-shop{ margin-left:auto; color:var(--ink); background:var(--accent); text-decoration:none; font-weight:600; font-size:14px; padding:9px 18px; border-radius:6px; transition:transform .2s; white-space:nowrap; }
.bl-shop:hover{ transform:translateY(-1px); }

/* Article shell */
.bl-article{ max-width:var(--wrap); margin:0 auto; padding:40px 32px 80px; }
.bl-breadcrumb{ font-family:var(--fm); font-size:12px; color:var(--stone); letter-spacing:.04em; margin-bottom:26px; }
.bl-breadcrumb a{ color:var(--stone); text-decoration:none; }
.bl-breadcrumb a:hover{ color:var(--ink); }
.bl-breadcrumb span{ margin:0 6px; opacity:.5; }
.bl-article article{ max-width:var(--measure); margin:0 auto; }

.bl-eyebrow{ font-family:var(--fm); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); display:flex; align-items:center; gap:12px; }
.bl-eyebrow::before{ content:''; width:30px; height:1px; background:var(--accent); }

.bl-post-head{ border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:36px; }
.bl-post-head h1{ font-family:var(--fd); font-weight:600; font-size:clamp(2rem,5vw,3rem); line-height:1.08; letter-spacing:-.02em; margin:16px 0 14px; }
.bl-post-head h1 em{ font-style:italic; color:var(--stone); }
.bl-post-meta{ font-family:var(--fm); font-size:13px; color:var(--stone); letter-spacing:.02em; }

/* Imagem no corpo do artigo */
.bl-hero{ margin:2em 0; }
.bl-hero img{ display:block; width:100%; border-radius:10px; }
.bl-hero--cover img{ aspect-ratio:16/9; object-fit:cover; }
.bl-hero--contain img{ aspect-ratio:16/10; object-fit:contain; background:var(--paper); border:1px solid var(--line); padding:26px; }
.bl-hero figcaption{ font-family:var(--fm); font-size:12px; color:var(--stone); margin-top:10px; }

/* Prose */
.prose{ font-size:1.125rem; line-height:1.75; color:var(--body); }
.prose > * + *{ margin-top:1.25em; }
.prose h2{ font-family:var(--fd); font-weight:600; font-size:1.7rem; line-height:1.2; letter-spacing:-.01em; color:var(--ink); margin-top:2.2em; }
.prose h3{ font-family:var(--fd); font-weight:600; font-size:1.3rem; color:var(--ink); margin-top:1.8em; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
.prose a:hover{ color:var(--stone); }
.prose ul, .prose ol{ padding-left:1.4em; }
.prose li{ margin-top:.5em; }
.prose li::marker{ color:var(--stone); }
.prose blockquote{ border-left:2px solid var(--accent); padding:4px 0 4px 22px; font-family:var(--fd); font-style:italic; font-size:1.25rem; color:var(--ink); }
.prose figure figcaption{ font-family:var(--fm); font-size:12px; color:var(--stone); margin-top:8px; }
.prose img{ border-radius:6px; }
.prose code{ font-family:var(--fm); font-size:.9em; background:var(--paper); padding:2px 6px; border-radius:3px; }
.prose table{ width:100%; border-collapse:collapse; font-size:.95rem; font-variant-numeric:tabular-nums; }
.prose th, .prose td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.prose th{ font-family:var(--ft); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); }

/* Sources */
.bl-sources{ margin-top:48px; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; padding:22px 26px; }
.bl-sources h2{ font-family:var(--fm); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); margin-bottom:10px; }
.bl-sources ul{ list-style:none; }
.bl-sources li{ font-size:14px; color:var(--stone); margin-top:6px; padding-left:16px; position:relative; }
.bl-sources li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; background:var(--accent); border-radius:50%; }

/* CTA */
.bl-post-cta{ margin-top:48px; background:var(--ink); color:var(--on-ink); border-radius:12px; padding:38px 32px; text-align:center; }
.bl-post-cta h2{ font-family:var(--fd); font-weight:500; font-size:1.6rem; }
.bl-post-cta p{ color:var(--on-ink-mut); margin-top:8px; }
.bl-post-cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.bl-btn{ display:inline-block; background:var(--accent); color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; padding:12px 24px; border-radius:6px; transition:transform .2s; }
.bl-btn:hover{ transform:translateY(-1px); }
.bl-btn.ghost{ background:transparent; color:var(--on-ink); border:1px solid rgba(255,255,255,.25); }

/* Related */
.bl-related{ margin-top:48px; border-top:1px solid var(--line); padding-top:24px; }
.bl-related h2{ font-family:var(--fm); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); margin-bottom:12px; }
.bl-related ul{ list-style:none; display:grid; gap:10px; }
.bl-related a{ font-family:var(--fd); font-size:1.05rem; color:var(--ink); text-decoration:none; }
.bl-related a:hover{ color:var(--stone); }

/* Index */
.bl-index{ max-width:var(--wrap); margin:0 auto; padding:56px 32px 80px; }
.bl-index-head{ max-width:var(--measure); margin-bottom:48px; }
.bl-index-head h1{ font-family:var(--fd); font-weight:600; font-size:clamp(2.4rem,6vw,3.6rem); line-height:1.05; letter-spacing:-.02em; margin:18px 0 14px; }
.bl-index-head h1 em{ font-style:italic; color:var(--stone); }
.bl-index-head p{ font-size:1.15rem; color:var(--stone); }
.bl-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
.bl-card{ background:var(--paper); border:1px solid var(--line); border-radius:10px; overflow:hidden; transition:transform .2s, border-color .2s; }
.bl-card-img{ display:flex; align-items:center; justify-content:center; height:200px; padding:22px; background:var(--bone); border-bottom:1px solid var(--line); overflow:hidden; box-sizing:border-box; }
.bl-card-img img{ max-width:82%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.bl-card-body{ padding:22px 24px 26px; }
.bl-card:hover{ transform:translateY(-3px); border-color:var(--stone); }
.bl-card-eyebrow{ font-family:var(--fm); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); }
.bl-card h2{ font-family:var(--fd); font-weight:600; font-size:1.4rem; line-height:1.25; margin:12px 0 10px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; min-height:calc(3 * 1.25em); }
.bl-card h2 a{ color:var(--ink); text-decoration:none; }
.bl-card h2 a:hover{ color:var(--stone); }
.bl-card p{ font-size:.98rem; color:var(--stone); }
.bl-card-body > p:not(.bl-card-meta){ line-height:1.5; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; min-height:calc(3 * 1.5em); }
.bl-card-meta{ font-family:var(--fm); font-size:12px; color:var(--stone); margin-top:16px; }
.bl-empty{ color:var(--stone); }

/* Footer */
.bl-footer{ background:var(--ink); color:var(--on-ink-mut); padding:56px 32px 32px; }
.bl-footer-grid{ max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
.bl-footer-brand img{ width:118px; height:auto; filter:brightness(0) invert(1); margin-bottom:14px; }
.bl-footer-brand p{ font-size:14px; max-width:34ch; }
.bl-mono{ font-family:var(--fm); font-size:12px; color:var(--on-ink-mut); margin-top:10px; line-height:1.7; }
.bl-footer-col h4{ font-family:var(--fm); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.bl-footer-col ul{ list-style:none; display:grid; gap:9px; }
.bl-footer-col a{ color:var(--on-ink-mut); text-decoration:none; font-size:14px; }
.bl-footer-col a:hover{ color:var(--on-ink); }
.bl-accent{ color:var(--accent); }
.bl-footer-bot{ max-width:var(--wrap); margin:40px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; font-family:var(--fm); font-size:12px; color:var(--on-ink-mut); }

/* WhatsApp float */
.bl-wa-float{ position:fixed; right:22px; bottom:22px; z-index:60; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px -6px rgba(0,0,0,.4); transition:transform .2s; }
.bl-wa-float:hover{ transform:scale(1.06); }

/* Responsive */
@media (max-width:900px){
  .bl-footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:640px){
  .bl-nav{ padding:12px 18px; gap:14px; flex-wrap:wrap; }
  .bl-menu{ gap:16px; order:3; width:100%; margin-left:0; }
  .bl-shop{ margin-left:auto; }
  .bl-article, .bl-index{ padding-left:20px; padding-right:20px; }
  .prose{ font-size:1.05rem; }
  .bl-footer-grid{ grid-template-columns:1fr; }
  .bl-footer-bot{ flex-direction:column; gap:6px; }
}