/* Guias, ajuda e blog da LYMOS: página de leitura com índice lateral. Vem depois de produto.css e segmento.css. */
.art-hero{padding:clamp(28px,4vw,56px) 0 clamp(28px,4vw,44px)}
.art-hero h1{font-size:clamp(34px,4.8vw,62px);max-width:none}
.art-hero .lede{max-width:62ch}
.art-meta{margin-top:16px}

.art-section{padding-top:clamp(24px,3vw,40px)}
.art-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.art-side{position:sticky;top:96px;display:grid;gap:18px}
.art{min-width:0;padding:clamp(22px,4vw,48px);background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:var(--nb-w) solid var(--nb-line);border-radius:16px;box-shadow:var(--nb-shadow);max-width:860px}
.art>*:first-child{margin-top:0}
.art h2{margin:44px 0 14px;max-width:none;font-size:clamp(26px,2.8vw,34px)}
.art h2:first-child{margin-top:0}
.art h3{margin:30px 0 10px;font:600 20px/1.3 var(--display);letter-spacing:-.01em;color:var(--text)}
.art p,.art li{font-size:17px;line-height:1.7;color:rgba(233,240,235,.84)}
.art p{margin:0 0 14px}
.art ul{display:grid;gap:8px;margin:0 0 16px}
.art ul li{position:relative;padding-left:20px}
.art ul li::before{content:"";position:absolute;left:0;top:.8em;width:9px;height:2px;background:var(--signal)}
.art strong{color:var(--text)}
.art a{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.art a:hover{color:var(--signal-hi)}

/* passos numerados */
.art-passos{counter-reset:p;display:grid;gap:12px;margin:18px 0 22px}
.art-passos li{counter-increment:p;position:relative;padding:16px 18px 16px 66px;border:1px solid var(--rule-2);border-radius:12px;background:rgba(255,255,255,.03);font-size:16.5px;line-height:1.65;color:rgba(233,240,235,.84)}
.art-passos li::before{content:counter(p);position:absolute;left:16px;top:15px;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--signal);color:var(--on-signal);font:700 16px/1 var(--display);box-shadow:2px 2px 0 #000}
.art-passos li b{color:var(--text)}

/* aviso */
.art-aviso{margin:20px 0;padding:16px 20px;border-left:4px solid var(--signal);border-radius:0 12px 12px 0;background:rgba(0,232,107,.07);font-size:16px;line-height:1.6;color:rgba(233,240,235,.9)}
.art-aviso.atencao{border-left-color:var(--sticker);background:rgba(247,220,111,.08)}
.art-aviso strong{color:var(--text)}

/* tabela */
.art-tabela{margin:18px 0 20px;overflow-x:auto;border:1px solid var(--rule-2);border-radius:12px}
.art-tabela table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.art-tabela th,.art-tabela td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.art-tabela thead th{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.04)}
.art-tabela tbody th{font-weight:600;color:var(--text);white-space:nowrap}
.art-tabela td{color:rgba(233,240,235,.84)}
.art-tabela tr:last-child th,.art-tabela tr:last-child td{border-bottom:0}

@media (max-width:960px){
  .art-layout{grid-template-columns:minmax(0,1fr)}
  .art-side{position:static}
  .art-side .doc-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 24px}
}
@media (max-width:560px){
  .art-side .doc-toc ol{grid-template-columns:1fr}
  .art p,.art li{font-size:16.5px}
  .art-passos li{padding:14px 14px 14px 58px}
  .art-passos li::before{left:12px;width:32px;height:32px}
}

/* hub da central de ajuda: categorias mais compactas */
.c3-sec.ajuda-cat{padding-block:clamp(30px,4vw,52px)}
.ajuda-cat .c3-h2{margin-bottom:8px}
.ajuda-cat .lede{margin-bottom:0}

/* blog: índice em cartões */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-top:8px}
.blog-card{display:grid;align-content:start;gap:12px;padding:24px;text-decoration:none;color:var(--text);background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:var(--nb-w) solid var(--nb-line);border-radius:16px;box-shadow:var(--nb-shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.blog-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--signal)}
.blog-tag{justify-self:start;padding:3px 10px;border-radius:999px;background:var(--signal);color:var(--on-signal);font:600 11.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.blog-card h2,.blog-card h3{margin:0;font:700 22px/1.25 var(--display);letter-spacing:-.015em;max-width:none}
.blog-card p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.blog-meta{font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--faint)}
.blog-fonte{margin-top:6px;font-size:14px;line-height:1.6}
.blog-fonte li{font-size:14.5px}

/* tabelas viram cartões empilhados no celular */
@media (max-width:700px){
  .art-tabela{border:0;overflow:visible}
  .art-tabela table,.art-tabela tbody,.art-tabela tr,.art-tabela th,.art-tabela td{display:block;width:100%}
  .art-tabela thead{display:none}
  .art-tabela tr{margin:0 0 12px;padding:14px 16px;border:1px solid var(--rule-2);border-radius:12px;background:rgba(255,255,255,.03)}
  .art-tabela tbody th{padding:0 0 8px;border:0;white-space:normal;font-size:16px}
  .art-tabela td{padding:6px 0;border:0}
  .art-tabela td::before{content:attr(data-label);display:block;margin-bottom:2px;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .art-tabela td[data-label=""]::before{display:none}
}