/* =====================================================================
   ARTIGOS — Dr. Antonio Soares · páginas internas de conteúdo (SEO)
   Studio Connecta · SC26 · 2026-10-04
   ---------------------------------------------------------------------
   Usada pelas páginas /<tema>/index.html (dor-cronica, dor-lombar, ...),
   sempre depois do site.css: só tokens da seção 1 do site.css.
   Páginas OCULTAS: nenhuma dobra da home nem o menu apontam para elas;
   entram no sitemap.xml e se ligam entre si ("Leia também").
   Compliance que o CSS garante:
   - identificação legal (.art-id) com a mesma fonte, corpo, peso e cor
     do parágrafo vizinho, sem negrito e sem redução (Manual da CODAME);
   - nada de vermelho ou rosa: o alerta ganha destaque pelo navy;
   - nada se move sozinho (sem reveal, sem loop).
   ===================================================================== */

.page-artigo{scroll-padding-top:24px}

/* coluna de leitura: ~70 caracteres por linha no desktop */
.art-wrap{width:min(100% - var(--gutter)*2,760px);margin-inline:auto}

/* ---------- cabeçalho (reaproveita .legal-bar do site.css) ----------
   O "Agendar consulta" da barra usa .shiny-cta.nav-cta (igual à navbar do index):
   tamanho, ícone e o colapso para só-ícone no celular já vêm do site.css.
   MENU (hambúrguer) 2026-10-07: igual ao da home (toggle .nav-toggle + painel #menu-panel,
   estilos no site.css), mas aqui visível em TODAS as larguras. A barra é clara, então o
   botão fica escuro-sobre-claro. O painel lista Home + os 9 artigos (10 itens). */
.page-artigo .nav-toggle{display:flex;color:var(--text-dark);border-color:var(--border-light);background:#fff}
.page-artigo .nav-toggle:hover{color:var(--accent-ink);border-color:rgba(2,125,159,.45)}
/* 10 itens: não centraliza verticalmente (poderia estourar a altura); alinha ao topo e rola */
.page-artigo .menu-panel nav{margin:0;padding:24px 0}
.page-artigo .menu-panel li a[aria-current]{color:var(--brand-cyan-200)}
/* o site.css escalona a entrada só até o 5º item; completa 6–10 */
.page-artigo .menu-panel.open li:nth-child(6) a{transition-delay:.38s}
.page-artigo .menu-panel.open li:nth-child(7) a{transition-delay:.44s}
.page-artigo .menu-panel.open li:nth-child(8) a{transition-delay:.5s}
.page-artigo .menu-panel.open li:nth-child(9) a{transition-delay:.56s}
.page-artigo .menu-panel.open li:nth-child(10) a{transition-delay:.62s}

/* ---------- abertura ---------- */
.art-hero{position:relative;overflow:clip;background:var(--grad-paper);--accent-ink:#026d8b;
  padding:clamp(40px,6vw,84px) 0 clamp(36px,5vw,64px);border-bottom:1px solid var(--border-light)}
.art-hero .grid-lines{-webkit-mask-image:radial-gradient(circle at 85% 20%,#000,transparent 60%);mask-image:radial-gradient(circle at 85% 20%,#000,transparent 60%)}
.art-hero__inner{position:relative;z-index:1}
.art-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.6em}
.art-crumbs a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:rgba(2,109,139,.4)}
.art-crumbs a:hover{text-decoration-color:currentColor}
.art-crumbs span[aria-hidden]{opacity:.6}
.art-title{margin-top:18px;font-size:clamp(2.1rem,5vw,3.35rem);letter-spacing:-.02em;line-height:1.07;font-weight:600}
.art-lede{margin-top:22px;font-size:clamp(1.12rem,1.6vw,1.27rem);line-height:1.66;color:var(--text-dark)}
/* identificação legal + data: parágrafo comum, mesma fonte, corpo, peso e cor do texto vizinho */
.art-id{margin-top:24px;padding-top:18px;border-top:1px solid var(--border-light);font-size:.95rem;line-height:1.6;color:var(--text-body)}
.art-id time{white-space:nowrap}
.id-pair{white-space:nowrap}

/* ---------- corpo ---------- */
.art-body{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,96px);font-size:1.0625rem;line-height:1.75;color:var(--text-body)}
.art-body h2{margin-top:clamp(44px,5vw,60px);font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.01em;line-height:1.2}
.art-body>h2:first-child{margin-top:0}
.art-body h3{margin-top:30px;font-size:1.24rem;line-height:1.32}
.art-body p{margin-top:16px}
.art-body strong{font-weight:600;color:var(--text-dark)}
.art-body em{font-style:italic}
.art-body ul{display:grid;gap:10px;margin-top:16px}
.art-body ul>li{position:relative;padding-left:24px}
.art-body ul>li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--brand-teal-500)}
.art-body a:not(.btn):not(.shiny-cta){color:var(--brand-navy-700);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:rgba(2,70,127,.45);transition:color var(--d-base),text-decoration-color var(--d-base)}
.art-body a:not(.btn):not(.shiny-cta):hover{color:var(--brand-navy-900);text-decoration-color:currentColor}

/* caixa de apoio */
.art-destaque{margin-top:28px;padding:22px 24px;border-radius:var(--radius-sm);background:var(--brand-cyan-050);border:1px solid rgba(2,125,159,.18);border-left:3px solid var(--brand-petrol-600)}
.art-destaque p:first-child{margin-top:0}

/* sinais de alerta: destaque pelo navy (nada de vermelho ou rosa) */
.art-alert{margin-top:32px;padding:24px 26px 26px;border-radius:var(--radius-md);background:rgba(2,70,127,.05);border:1px solid rgba(2,70,127,.2);border-left:4px solid var(--brand-navy-800)}
.art-alert__title{display:flex;align-items:center;gap:.55em;margin-top:0!important;color:var(--brand-navy-900)}
.art-alert__title svg{width:1.05em;height:1.05em;flex:none;color:var(--brand-navy-700)}
.art-alert ul>li::before{background:var(--brand-navy-800)}
.art-alert p:first-of-type{margin-top:12px}
.art-alert__close{font-weight:600;color:var(--text-dark)}

/* perguntas frequentes (abertas: o texto fica visível para o leitor e para a indexação) */
.art-faq h3{padding-top:22px;border-top:1px solid var(--border-light)}
.art-faq h2+h3{margin-top:22px}

/* aviso informativo */
.art-disc{margin-top:clamp(40px,5vw,56px);padding-top:18px;border-top:1px solid var(--border-light);font-size:.92rem;line-height:1.6;color:var(--text-muted)}
.art-disc+.art-disc{margin-top:10px;padding-top:0;border-top:0}

/* caixa da consulta */
.art-cta{position:relative;overflow:clip;isolation:isolate;margin-top:32px;padding:clamp(28px,4vw,40px);border-radius:var(--radius-lg);background:var(--grad-ink);color:var(--text-light)}
.art-cta .ambient-glow{z-index:-1}
.art-cta .ambient-glow span{animation:none}
.art-cta h2{margin-top:0;color:#fff;font-size:clamp(1.45rem,2.4vw,1.85rem)}
.art-cta p{color:rgba(238,246,251,.86)}
.art-cta .art-cta__id{margin-top:14px;font-size:inherit;line-height:inherit;color:rgba(238,246,251,.86)}
.art-cta__actions{margin-top:24px}
.art-cta .btn--on-dark{white-space:normal}

/* referências */
.art-refs{margin-top:clamp(40px,5vw,56px)}
.art-refs h2{font-size:clamp(1.2rem,1.8vw,1.4rem)}
.art-refs ol{display:grid;gap:10px;margin-top:14px;padding-left:1.4em;list-style:decimal;font-size:.9rem;line-height:1.55;color:var(--text-body)}
.art-refs li::marker{color:var(--text-muted);font-family:var(--font-mono);font-size:.8em}
.art-refs a{overflow-wrap:anywhere}
.art-refs .art-refs__date{color:var(--text-muted)}

/* leia também */
.art-rel{margin-top:clamp(36px,4vw,48px)}
.art-rel h2{font-size:clamp(1.2rem,1.8vw,1.4rem)}
.art-rel ul{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.art-rel ul>li{padding-left:0}
.art-rel ul>li::before{display:none}
.art-body .art-rel a{display:inline-flex;align-items:center;min-height:44px;padding:.5em 1.05em;border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);text-decoration:none;font-size:.95rem;color:var(--brand-navy-800);background:var(--surface-white);
  transition:border-color var(--d-base),color var(--d-base),background-color var(--d-base)}
.art-body .art-rel a:hover{border-color:var(--accent-ink);color:var(--accent-ink);background:rgba(3,199,208,.06)}

/* ---------- responsivo ---------- */
@media (max-width:640px){
  .legal-bar__inner{min-height:72px}
  .art-body{font-size:1.03rem}
  .art-alert{padding:20px 18px 22px}
}

/* ---------- impressão ---------- */
@media print{
  .legal-bar .btn,.legal-bar .shiny-cta,.art-cta__actions,.art-hero .grid-lines,.art-rel,#lead-modal{display:none!important}
  .art-hero{background:#fff;border:0;padding:0 0 12px}
  .art-cta{background:#fff;color:#000;border:1px solid #999}
  .art-cta h2,.art-cta p,.art-cta .art-cta__id{color:#000!important}
  .art-alert{background:#fff}
  .art-refs a::after{content:" (" attr(href) ")";font-weight:400}
}