/* ==========================================================================
   OlharPar — Blog (índice + artigos)
   Fonte única de estilo do blog. Tokens: 01_BRAND_KIT/design.md (Creative Factory).
   Não há CSS embutido nas páginas: tudo que o blog precisa está aqui.
   ========================================================================== */
:root{
  --op-ink:#16324A; --op-primary-deep:#1A3A5C; --op-primary:#1F4D70;
  --op-action:#2989BD; --op-action-soft:#8CC5E6;
  --op-selection:#E8F2FA; --op-surface-blue:#F2F8FC;
  --op-paper:#FAFAF7; --op-surface:#FFFFFF;
  --op-text:#3F444B; --op-text-2:#52575E; --op-muted:#6B7280;
  --op-warm:#D4956B; --op-warm-text:#9A5B33; --op-line:#E3E4DE; --op-success:#25D366;
  --op-footer:#10263C;
  --op-navy-80:rgb(26 58 92 / .8);           /* overlay da capa: navy 80% opaco */
  --op-serif:"Playfair Display",Georgia,serif;
  --op-sans:"Quicksand",system-ui,-apple-system,"Segoe UI",sans-serif;
  --op-meta:"DM Sans",system-ui,sans-serif;
  --op-container:1180px; --op-reading:740px; --op-nav-h:64px;
  --op-r-sm:8px; --op-r-md:14px; --op-r-lg:20px; --op-r-pill:999px;
  --op-ease:cubic-bezier(.22,.86,.36,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-padding-top:calc(var(--op-nav-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--op-paper);color:var(--op-text);font:400 1rem/1.75 var(--op-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--op-serif);color:var(--op-ink);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
p{margin:0 0 1.1rem}
a{color:var(--op-primary);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--op-primary-deep)}
::selection{background:var(--op-selection);color:var(--op-primary-deep)}
:focus-visible{outline:3px solid var(--op-action);outline-offset:3px;border-radius:4px}
.container{width:min(var(--op-container),calc(100% - 48px));margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:12px;z-index:2000;background:var(--op-surface);color:var(--op-primary);padding:.7rem 1rem;border-radius:var(--op-r-sm);font-weight:700}
.skip-link:focus{left:12px}
.eyebrow{font:700 .75rem/1.3 var(--op-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--op-action-soft);margin:0 0 1rem}

/* ---------- navegação ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:1000;height:var(--op-nav-h);background:rgb(250 250 247 / .9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--op-line)}
.nav-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:100%;width:min(1280px,calc(100% - 32px));margin:auto}
.nav-logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;min-height:44px}
.nav-logo img{width:56px;height:30px;object-fit:contain}
.nav-logo span{font:700 1.2rem/1 var(--op-serif);color:var(--op-ink)}
.nav-logo b{color:var(--op-action);font-weight:700}
.nav-menu{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav-menu a{display:block;font:500 .875rem/1.4 var(--op-meta);color:var(--op-text-2);text-decoration:none;padding:.55rem .8rem;border-radius:var(--op-r-sm);transition:background .2s,color .2s}
.nav-menu a:hover{background:var(--op-surface-blue);color:var(--op-primary-deep)}
.nav-menu a[aria-current="page"]{color:var(--op-primary-deep);font-weight:700}
.nav-dropdown{position:relative}
.nav-dropdown>a::after{content:"";display:inline-block;margin-left:6px;vertical-align:middle;border:4px solid transparent;border-top-color:currentColor;border-bottom:0}
.nav-dropdown-menu{position:absolute;top:100%;left:0;min-width:230px;padding:.5rem;background:var(--op-surface);border:1px solid var(--op-line);border-radius:var(--op-r-md);box-shadow:0 16px 48px rgb(22 50 74 / .12);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .2s,transform .2s var(--op-ease),visibility .2s}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:none}
.nav-dropdown-menu a{white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.75rem 1.4rem;border-radius:var(--op-r-pill);font:700 .95rem/1.2 var(--op-sans);text-decoration:none;cursor:pointer;transition:transform .2s var(--op-ease),box-shadow .2s var(--op-ease),background .2s,color .2s}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn-whats{background:var(--op-success);color:var(--op-footer);box-shadow:0 8px 24px rgb(37 211 102 / .28)}
.btn-whats:hover{background:#1ebd5a;color:var(--op-footer);transform:translateY(-2px);box-shadow:0 12px 28px rgb(37 211 102 / .36)}
.btn-ghost{color:#fff;border:1.5px solid rgb(255 255 255 / .45)}
.btn-ghost:hover{color:#fff;background:rgb(255 255 255 / .1);border-color:#fff}
.nav .btn{min-height:42px;padding:.55rem 1.1rem;font-size:.875rem;box-shadow:none}
.nav-hamburger{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:var(--op-r-sm);cursor:pointer;padding:11px}
.nav-hamburger span{display:block;height:2px;margin:5px 0;background:var(--op-ink);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile-menu{display:none}

/* ---------- capa padronizada (card + hero) ----------
   foto ocupa tudo, desfoque leve, navy 80% por cima, título em texto real. */
.cover{position:relative;isolation:isolate;overflow:hidden;background:var(--op-primary-deep)}
.cover>img{position:absolute;inset:-12px;width:calc(100% + 24px);max-width:none;height:calc(100% + 24px);object-fit:cover;filter:blur(var(--cover-blur,3px));z-index:-2;transition:transform .5s var(--op-ease)}
.cover::after{content:"";position:absolute;inset:0;background:var(--op-navy-80);z-index:-1}

/* ---------- índice do blog ---------- */
.page-header{padding:calc(var(--op-nav-h) + 72px) 0 72px;text-align:center;color:#fff;background:radial-gradient(ellipse at 25% 30%,var(--op-primary) 0%,var(--op-primary-deep) 70%)}
.page-header h1{color:#fff;font-size:clamp(2.4rem,5vw,4rem);line-height:1.08;margin:0 0 .75rem}
.page-header p{color:rgb(255 255 255 / .82);max-width:620px;margin:0 auto;font-size:1.08rem}
.blog-section{padding:64px 0 96px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:28px}
.blog-card{display:flex;flex-direction:column;background:var(--op-surface);border:1px solid var(--op-line);border-radius:var(--op-r-lg);overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s var(--op-ease),border-color .25s,box-shadow .35s var(--op-ease)}
.blog-card:hover{transform:translateY(-4px);border-color:var(--op-action-soft);box-shadow:0 24px 56px rgb(22 50 74 / .10);color:inherit}
.blog-card .cover{aspect-ratio:16/10;display:grid;place-items:center;padding:24px 28px}
.blog-card:hover .cover>img{transform:scale(1.05)}
.nowrap{white-space:nowrap}
.blog-card .cover :is(h2,h3){margin:0;color:#fff;text-align:center;font-size:clamp(1.2rem,1.1rem + .5vw,1.45rem);line-height:1.22}
.blog-card-body{display:flex;flex-direction:column;flex:1;padding:20px 24px 24px}
.blog-card-meta{font:700 .75rem/1.4 var(--op-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--op-warm-text);margin:0 0 .6rem}
.blog-card-body p{font-size:.95rem;line-height:1.6;color:var(--op-text-2);flex:1;margin:0 0 1rem}
.blog-card-link{font-weight:700;color:var(--op-primary);font-size:.9rem}
.blog-card-link::after{content:" →"}

/* ---------- artigo: hero ---------- */
.post-hero{--cover-blur:6px;color:#fff}
.post-hero-inner{width:min(880px,calc(100% - 48px));margin:auto;padding:calc(var(--op-nav-h) + clamp(48px,8vw,96px)) 0 clamp(48px,6vw,72px)}
.breadcrumb{font:500 .8125rem/1.4 var(--op-meta);color:rgb(255 255 255 / .75);margin:0 0 1.5rem}
.breadcrumb a{color:rgb(255 255 255 / .85);text-decoration:none}
.breadcrumb a:hover{color:#fff;text-decoration:underline}
.post-hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.1;letter-spacing:-.015em;margin:0}
.dek{font-size:clamp(1.05rem,1.9vw,1.25rem);color:rgb(255 255 255 / .86);max-width:720px;margin:1.25rem 0 1.25rem}
.byline{font:500 .875rem/1.6 var(--op-meta);color:rgb(255 255 255 / .78);margin:0 0 1.75rem}
.byline strong{color:#fff;font-weight:700}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.cover-credit{position:absolute;right:16px;bottom:12px;margin:0;font:500 .8125rem/1.4 var(--op-meta);color:rgb(255 255 255 / .82);max-width:60%;text-align:right}
.cover-credit a{color:inherit}

/* ---------- artigo: corpo ---------- */
.post-body{background:var(--op-surface)}
.article-shell{display:grid;grid-template-columns:minmax(0,var(--op-reading)) 260px;gap:clamp(32px,5vw,72px);justify-content:center;align-items:start;width:min(var(--op-container),calc(100% - 48px));margin:auto;padding:clamp(40px,6vw,72px) 0 clamp(48px,6vw,80px)}
.prose{min-width:0;font-size:1.0625rem}
.prose h2{font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.2;margin:3rem 0 1rem}
.prose h3{font-size:clamp(1.2rem,1.8vw,1.4rem);line-height:1.3;margin:2.2rem 0 .7rem}
.prose h4{font-size:1.1rem;margin:1.6rem 0 .5rem}
.prose ul,.prose ol{padding-left:1.35rem;margin:0 0 1.4rem}
.prose li{margin:.45rem 0}
.prose li::marker{color:var(--op-action)}
.prose strong{color:var(--op-ink);font-weight:700}
.prose blockquote{margin:2rem 0;padding:.25rem 0 .25rem 1.25rem;border-left:3px solid var(--op-warm);font:italic 500 1.15rem/1.6 var(--op-serif);color:var(--op-ink)}
.prose blockquote p:last-child{margin:0}
.prose table{width:100%;border-collapse:separate;border-spacing:0;margin:1.75rem 0;font-size:.95rem;border:1px solid var(--op-line);border-radius:var(--op-r-md);overflow:hidden;display:block;overflow-x:auto}
.prose th,.prose td{padding:.75rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--op-line)}
.prose th{background:var(--op-surface-blue);color:var(--op-primary-deep);font:700 .875rem/1.4 var(--op-meta)}
.prose tr:last-child td{border-bottom:0}
.prose a{overflow-wrap:anywhere}
.answer-card{margin:0 0 2.5rem;padding:1.4rem 1.6rem;background:linear-gradient(135deg,var(--op-surface),var(--op-surface-blue));border:1px solid var(--op-selection);border-left:4px solid var(--op-action);border-radius:var(--op-r-md)}
.answer-card .label{font:700 .75rem/1.3 var(--op-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--op-primary);margin:0 0 .5rem}
.answer-card p{font-size:1.1rem;line-height:1.65;color:var(--op-ink);margin:0}
/* caixas editoriais (inclui as classes herdadas dos artigos antigos) */
.note,.alert-box,.lens-card,.price-box,.info-box,.tip-box,.highlight-box,.warning-box,.callout,.care-box,.notice{margin:2rem 0;padding:1.25rem 1.4rem;background:var(--op-surface-blue);border:1px solid var(--op-line);border-radius:16px}
.alert-box,.warning-box,.care-box,.notice{background:#FBF6F0;border-left:3px solid var(--op-warm)}
.note>:first-child,.alert-box>:first-child,.lens-card>:first-child,.price-box>:first-child,.info-box>:first-child,.tip-box>:first-child,.highlight-box>:first-child,.warning-box>:first-child,.callout>:first-child,.care-box>:first-child,.notice>:first-child{margin-top:0}
.note>:last-child,.alert-box>:last-child,.lens-card>:last-child,.price-box>:last-child,.info-box>:last-child,.tip-box>:last-child,.highlight-box>:last-child,.warning-box>:last-child,.callout>:last-child,.care-box>:last-child,.notice>:last-child{margin-bottom:0}
.alert-box h3,.lens-card h3,.price-box h3,.info-box h3,.note h3,.care-box h3,.notice h3{font-size:1.15rem;margin:0 0 .5rem}
/* figuras */
.fig{margin:2.5rem 0}
.fig img{width:100%;border-radius:var(--op-r-md);border:1px solid var(--op-line);background:var(--op-surface-blue)}
.fig figcaption{margin-top:.75rem;font:400 .9375rem/1.55 var(--op-sans);color:var(--op-text-2)}
.fig .credit{display:block;margin-top:.25rem;font:500 .875rem/1.5 var(--op-meta);color:var(--op-muted)}
.fig .credit a{color:var(--op-muted)}
/* sumário */
.toc{position:sticky;top:calc(var(--op-nav-h) + 24px);padding:1.1rem 1.2rem;border:1px solid var(--op-line);border-radius:16px;background:var(--op-surface)}
.toc .label{font:700 .75rem/1.3 var(--op-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--op-primary);margin:0 0 .5rem}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:block;padding:.5rem 0;border-top:1px solid var(--op-line);font-size:.9rem;line-height:1.4;font-weight:600;color:var(--op-text-2);text-decoration:none}
.toc li:first-child a{border-top:0}
.toc a:hover{color:var(--op-primary)}
/* FAQ */
.faq{margin-top:3.5rem}
.faq details{border:1px solid var(--op-line);border-radius:var(--op-r-md);background:var(--op-surface);margin:.65rem 0;transition:border-color .2s}
.faq details[open]{border-color:var(--op-action-soft)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:1rem 1.2rem;min-height:44px;font-weight:700;color:var(--op-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.4rem/1 var(--op-meta);color:var(--op-action);transition:transform .2s var(--op-ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 1.2rem 1.1rem}
/* revisão médica */
.reviewer{display:grid;grid-template-columns:72px 1fr;gap:1rem;align-items:center;margin:3rem 0 0;padding:1.25rem 1.4rem;border:1px solid var(--op-line);border-left:3px solid var(--op-action);border-radius:16px;background:var(--op-surface)}
.reviewer img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 18%}
.reviewer p{margin:0;font-size:.95rem;line-height:1.55}
.reviewer .who{font:700 1.05rem/1.3 var(--op-serif);color:var(--op-ink)}
.reviewer .reg{font:500 .875rem/1.4 var(--op-meta);color:var(--op-text-2)}
/* referências */
.references{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--op-line)}
.references h2{font-size:1.35rem;margin:0 0 .75rem}
.references ol{padding-left:1.3rem;margin:0;font-size:.9375rem;line-height:1.6}
.references li{margin:.5rem 0}
.references a{overflow-wrap:anywhere}
.medical-note{margin-top:1.5rem;font-size:.9375rem;color:var(--op-text-2)}
/* CTA e relacionados */
.cta-band{background:radial-gradient(ellipse at 20% 30%,var(--op-primary) 0%,var(--op-primary-deep) 70%);color:#fff;text-align:center}
.cta-inner{width:min(760px,calc(100% - 48px));margin:auto;padding:clamp(56px,7vw,88px) 0}
.cta-band h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.5rem);margin:0 0 .8rem}
.cta-band p{color:rgb(255 255 255 / .85);font-size:1.08rem;margin:0 auto 1.75rem;max-width:620px}
.related{padding:clamp(56px,7vw,88px) 0}
.related>.container>h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:0 0 1.75rem}

/* ---------- rodapé ---------- */
.footer{background:var(--op-footer);color:rgb(255 255 255 / .72);padding:56px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:32px}
.footer-logo{width:150px;height:auto;margin-bottom:.75rem}
.footer h3{font:700 .95rem/1.4 var(--op-sans);color:#fff;margin:0 0 .8rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{padding:.2rem 0}
.footer a{color:rgb(255 255 255 / .78);text-decoration:none;font-size:.9rem}
.footer a:hover{color:#fff;text-decoration:underline}
.footer p{font-size:.9rem;line-height:1.6;margin:0}
.footer-bottom{border-top:1px solid rgb(255 255 255 / .14);padding-top:20px;text-align:center;font:400 .8125rem/1.5 var(--op-meta);color:rgb(255 255 255 / .62)}

/* ---------- responsivo ---------- */
@media (max-width:1020px){
  .nav-menu,.nav-top>.btn{display:none}
  .nav-hamburger{display:block}
  .nav-mobile-menu.open{display:grid;position:fixed;top:var(--op-nav-h);inset-inline:0;bottom:0;z-index:999;align-content:start;gap:2px;padding:16px 20px calc(24px + env(safe-area-inset-bottom));background:var(--op-paper);overflow-y:auto}
  .nav-mobile-menu a{display:flex;align-items:center;min-height:48px;padding:0 4px;border-bottom:1px solid var(--op-line);font-weight:600;color:var(--op-ink);text-decoration:none}
  .nav-mobile-menu .sub{padding-left:20px;font-weight:500;color:var(--op-text-2)}
  .nav-mobile-menu .btn{margin-top:16px;border:0}
  .article-shell{grid-template-columns:minmax(0,var(--op-reading))}
  .toc{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .container,.article-shell,.post-hero-inner,.cta-inner{width:calc(100% - 32px)}
  .prose{font-size:1rem}
  .hero-actions .btn{flex:1 1 100%}
  .cover-credit{position:static;max-width:none;text-align:left;padding:0 16px 12px}
  .footer-grid{grid-template-columns:1fr}
  .reviewer{grid-template-columns:56px 1fr}
  .reviewer img{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .blog-card:hover,.blog-card:hover .cover>img,.btn:hover{transform:none}
}