/*
 * Estilos dos blocos de artigo (base nova). Classes .ls-* — usam os tokens
 * --cms-* da Fase 0, então herdam light/dark automaticamente quando dentro
 * de .artigos-scope. CSS puro: não pesa o bundle JS.
 */

/* ─── Prosa (corpo rich-text) ────────────────────────────────────────────── */
.ls-prose {
  font-family: var(--cms-font-ui), "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--cms-ink-2);
}
.ls-prose > * + * {
  margin-top: 1.1em;
}
.ls-prose h2 {
  font-family: var(--cms-font-display), Poppins, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cms-ink);
  margin-top: 1.6em;
  scroll-margin-top: 100px;
}
.ls-prose h3 {
  font-family: var(--cms-font-display), Poppins, sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--cms-ink);
  margin-top: 1.4em;
  scroll-margin-top: 100px;
}
.ls-prose a {
  color: var(--cms-primary);
  font-weight: 600;
  text-decoration: none;
}
.ls-prose a:hover {
  text-decoration: underline;
}
.ls-prose strong {
  color: var(--cms-ink);
  font-weight: 700;
}
.ls-prose ul,
.ls-prose ol {
  padding-left: 1.4em;
}
.ls-prose ul {
  list-style: disc;
}
.ls-prose ol {
  list-style: decimal;
}
.ls-prose li + li {
  margin-top: 0.4em;
}
.ls-prose blockquote {
  border-left: 3px solid var(--cms-primary);
  background: var(--cms-surface-2);
  padding: 12px 18px;
  border-radius: 0 var(--cms-radius-sm) var(--cms-radius-sm) 0;
  color: var(--cms-ink-2);
  font-style: italic;
}

/* ─── Título de seção dos blocos estruturais (handoff: .art-block-h) ─────── */
.ls-block-h { font-family: var(--cms-font-display), Poppins, sans-serif; font-size: 26px; font-weight: 700; color: var(--cms-ink); margin: 0 0 20px; line-height: 1.2; letter-spacing: -.02em; scroll-margin-top: 100px; }

/* ─── Tutorial: Passos (idêntico ao handoff .steps) ──────────────────────── */
.ls-steps__title { font-family: var(--cms-font-display), Poppins, sans-serif; font-size: calc(28px * 1); font-weight: 700; color: var(--cms-ink); margin: 44px 0 16px; line-height: 1.2; letter-spacing: -.02em; }
.ls-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ls-step { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--cms-line); }
.ls-step:first-child { border-top: none; }
.ls-step__num { width: 42px; height: 42px; border-radius: 13px; background: var(--cms-cat-tutorial); color: #fff; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 19px; display: grid; place-items: center; flex-shrink: 0; }
.ls-step__main { min-width: 0; }
.ls-step__title { font-family: var(--cms-font-display), Poppins, sans-serif; font-size: calc(21px * 1); font-weight: 700; color: var(--cms-ink); margin: 4px 0 12px; }
.ls-step__main .ls-prose p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--cms-ink-2); }
.ls-step__tip { display: flex; gap: 9px; align-items: flex-start; background: var(--cms-cat-tutorial-bg); border-radius: 12px; padding: 13px 16px; font-size: 14px; line-height: 1.5; color: var(--cms-ink-2); margin-top: 6px; }
.ls-step__tip-icon { width: 15px; height: 15px; color: var(--cms-cat-tutorial); flex-shrink: 0; margin-top: 2px; }
.ls-step__tip strong { color: var(--cms-ink); }

/* ─── Tutorial: cabeçalho/meta (idêntico ao handoff .tut-meta) ───────────── */
.ls-tut-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; }
.ls-tut-meta__item { display: flex; align-items: center; gap: 12px; background: var(--cms-surface-2); border: 1px solid var(--cms-line); border-radius: 14px; padding: 16px; font-family: var(--cms-font-ui), sans-serif; }
.ls-tut-meta__ic { width: 38px; height: 38px; border-radius: 11px; background: var(--cms-cat-tutorial-bg); color: var(--cms-cat-tutorial); display: grid; place-items: center; flex-shrink: 0; }
.ls-tut-meta__ic svg { width: 17px; height: 17px; }
.ls-tut-meta__k { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cms-ink-3); font-weight: 700; }
.ls-tut-meta__v { display: block; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 16px; color: var(--cms-ink); margin-top: 2px; }
@media (max-width: 720px) { .ls-tut-meta { grid-template-columns: 1fr; } }

/* ─── Tutorial: materiais (idêntico ao handoff .materials) ───────────────── */
.ls-materials { background: var(--cms-surface); border: 1px solid var(--cms-line); border-radius: 16px; padding: 22px 24px; margin: 28px 0; font-family: var(--cms-font-ui), sans-serif; }
.ls-materials__title { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; color: var(--cms-ink); margin: 0 0 16px; font-family: var(--cms-font-display), Poppins, sans-serif; }
.ls-materials__title svg { color: var(--cms-cat-tutorial); width: 18px; height: 18px; }
.ls-materials__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ls-materials__item label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; color: var(--cms-ink-2); font-size: 15px; line-height: 1.4; }
.ls-materials__item input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--cms-line); flex-shrink: 0; margin: 1px 0 0; cursor: pointer; display: grid; place-items: center; }
.ls-materials__item input:checked { background: var(--cms-cat-tutorial); border-color: var(--cms-cat-tutorial); }
.ls-materials__item input:checked::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }

/* ─── Review: scorecard (idêntico ao handoff .scorecard) ─────────────────── */
.ls-scorecard { background: var(--cms-surface); border: 1px solid var(--cms-line); border-radius: 18px; padding: 26px; margin: 0 0 36px; box-shadow: var(--cms-shadow-sm); font-family: var(--cms-font-ui), "Plus Jakarta Sans", sans-serif; }
.ls-scorecard__verdict { display: flex; align-items: center; gap: 20px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--cms-line); }
.ls-scorecard__big { width: 88px; height: 88px; border-radius: 20px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.ls-scorecard__n { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 34px; line-height: 1; }
.ls-scorecard__l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; opacity: .9; }
.ls-scorecard__eyebrow { display: block; font-family: var(--cms-font-ui), sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cms-muted); }
.ls-scorecard__line { font-family: var(--cms-font-display), Poppins, sans-serif; font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--cms-ink); margin: 6px 0 0; letter-spacing: -.01em; }
.ls-scorecard__bars { display: flex; flex-direction: column; gap: 13px; }
.ls-scbar { display: grid; grid-template-columns: 160px 1fr 36px; align-items: center; gap: 14px; }
.ls-scbar__label { font-size: 14px; font-weight: 600; color: var(--cms-ink-2); }
.ls-scbar__track { height: 8px; border-radius: 6px; background: var(--cms-line-2); overflow: hidden; }
.ls-scbar__fill { display: block; height: 100%; border-radius: 6px; }
.ls-scbar__num { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 14px; color: var(--cms-ink); text-align: right; }
@media (max-width: 720px) { .ls-scbar { grid-template-columns: 120px 1fr 32px; } }

/* ─── Prós e Contras (idêntico ao handoff .proscons) ─────────────────────── */
.ls-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; font-family: var(--cms-font-ui), sans-serif; }
.ls-proscons__col { border-radius: 16px; padding: 20px; border: 1px solid var(--cms-line); }
.ls-proscons__col h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 14px; font-weight: 800; }
.ls-proscons__hicon { width: 16px; height: 16px; }
.ls-proscons__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ls-proscons__col li { font-size: 14.5px; line-height: 1.45; color: var(--cms-ink-2); padding-left: 20px; position: relative; }
.ls-proscons__col li::before { position: absolute; left: 0; top: 1px; font-weight: 800; }
.ls-proscons__col--pro { background: var(--cms-cat-tutorial-bg); border-color: transparent; }
.ls-proscons__col--pro h4 { color: var(--cms-cat-tutorial); }
.ls-proscons__col--pro li::before { content: "+"; color: var(--cms-cat-tutorial); }
.ls-proscons__col--con { background: var(--cms-cat-review-bg); border-color: transparent; }
.ls-proscons__col--con h4 { color: var(--cms-cat-review); }
.ls-proscons__col--con li::before { content: "−"; color: var(--cms-cat-review); }
@media (max-width: 720px) { .ls-proscons { grid-template-columns: 1fr; } }

/* ─── Ficha técnica (idêntico ao handoff .specbox) ───────────────────────── */
.ls-specbox { border: 1px solid var(--cms-line); border-radius: 16px; overflow: hidden; margin: 32px 0; background: var(--cms-surface); }
.ls-specbox__head { display: flex; align-items: center; gap: 9px; padding: 14px 20px; background: var(--cms-surface-2); border-bottom: 1px solid var(--cms-line); font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 15px; color: var(--cms-ink); }
.ls-specbox__icon { width: 18px; height: 18px; }
.ls-specbox__grid { margin: 0; padding: 8px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.ls-specbox__row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--cms-line-2); font-family: var(--cms-font-ui), sans-serif; font-size: 14.5px; }
.ls-specbox__row dt { color: var(--cms-ink-3); margin: 0; }
.ls-specbox__row dd { color: var(--cms-ink); font-weight: 700; margin: 0; text-align: right; }
@media (max-width: 720px) { .ls-specbox__grid { grid-template-columns: 1fr; } }

/* ─── Notícia: TL;DR (idêntico ao handoff .tldr) ─────────────────────────── */
.ls-tldr { background: var(--cms-cat-noticias-bg); border-radius: 16px; padding: 22px 24px; margin: 0 0 32px; font-family: var(--cms-font-ui), "Plus Jakarta Sans", sans-serif; }
.ls-tldr__head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--cms-cat-noticias); margin-bottom: 14px; }
.ls-tldr__icon { width: 16px; height: 16px; }
.ls-tldr__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.ls-tldr__list li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.5; color: var(--cms-ink); font-weight: 500; }
.ls-tldr__list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--cms-cat-noticias); }
.ls-tldr__upd { display: flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--cms-cat-noticias) 22%, transparent); font-size: 13px; color: var(--cms-ink-3); font-weight: 600; }
.ls-tldr__upd-icon { width: 13px; height: 13px; }

/* ─── Explicador: definição em destaque ────────────────────────────────────── */
.ls-defbox { background: var(--cms-cat-explicador-bg); border-radius: 16px; padding: 24px; margin: 0 0 32px; border-left: 4px solid var(--cms-cat-explicador); }
.ls-defbox__label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--cms-cat-explicador); font-family: var(--cms-font-ui), sans-serif; }
.ls-defbox__text { font-family: var(--cms-font-display), Poppins, sans-serif; font-size: 21px; font-weight: 600; line-height: 1.45; color: var(--cms-ink); margin: 10px 0 0; letter-spacing: -.01em; }

/* ─── Explicador: como funciona (cards) ────────────────────────────────────── */
.ls-hiw { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 36px 0; }
.ls-hiw__card { background: var(--cms-surface); border: 1px solid var(--cms-line); border-radius: 16px; padding: 22px; font-family: var(--cms-font-ui), sans-serif; }
.ls-hiw__ic { width: 40px; height: 40px; border-radius: 12px; background: var(--cms-cat-explicador-bg); color: var(--cms-cat-explicador); display: grid; place-items: center; margin-bottom: 14px; }
.ls-hiw__title { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 17px; color: var(--cms-ink); margin: 0 0 7px; }
.ls-hiw__body { font-size: 14.5px; line-height: 1.55; color: var(--cms-ink-3); margin: 0; }
@media (max-width: 720px) { .ls-hiw { grid-template-columns: 1fr; } }

/* ─── Glossário ────────────────────────────────────────────────────────────── */
.ls-gloss { margin: 36px 0; }
.ls-gloss__list { margin: 0; }
.ls-gloss__row { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--cms-line-2); font-family: var(--cms-font-ui), sans-serif; }
.ls-gloss__row:last-child { border-bottom: none; }
.ls-gloss__term { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 15px; color: var(--cms-cat-explicador); margin: 0; }
.ls-gloss__def { font-size: 14.5px; line-height: 1.5; color: var(--cms-ink-2); margin: 0; }
@media (max-width: 720px) { .ls-gloss__row { grid-template-columns: 1fr; gap: 6px; } }

/* ─── FAQ (acordeão com estado React e transição suave) ───────────────────────── */
.ls-faq { margin: 36px 0; }
.ls-faq__list { display: flex; flex-direction: column; gap: 10px; }
.ls-faq__item { border: 1px solid var(--cms-line); border-radius: 14px; overflow: hidden; background: var(--cms-surface); }
.ls-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; cursor: pointer; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 16px; color: var(--cms-ink); text-align: left; background: none; border: none; }
.ls-faq__chev { width: 18px; height: 18px; color: var(--cms-cat-explicador); transition: transform .25s; flex-shrink: 0; }
.ls-faq__item.open .ls-faq__chev { transform: rotate(180deg); }
.ls-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.ls-faq__item.open .ls-faq__a { max-height: 320px; }
.ls-faq__a p { margin: 0; padding: 0 20px 20px; font-family: var(--cms-font-ui), sans-serif; font-size: 15px; line-height: 1.6; color: var(--cms-ink-2); }

/* ─── Lista: ranking (idêntico ao handoff .rankitem) ─────────────────────── */
.ls-rank { display: flex; flex-direction: column; gap: 22px; margin: 8px 0; }
.ls-rankitem { display: grid; grid-template-columns: 150px 1fr; gap: 22px; background: var(--cms-surface); border: 1px solid var(--cms-line); border-radius: 18px; padding: 20px; transition: box-shadow .2s, border-color .2s; }
.ls-rankitem:hover { box-shadow: var(--cms-shadow); border-color: color-mix(in srgb, var(--cms-accent) 22%, var(--cms-line)); }
.ls-rankitem__media { position: relative; }
.ls-rankitem__img { aspect-ratio: 1/1; border-radius: 13px; overflow: hidden; position: relative; background: var(--cms-surface-2); }
.ls-rankitem__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-rankitem__rank { position: absolute; left: -8px; top: -8px; z-index: 2; width: 38px; height: 38px; border-radius: 12px; background: var(--cms-ink); color: var(--cms-bg-2); font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 19px; display: grid; place-items: center; box-shadow: var(--cms-shadow); }
.ls-rankitem__body { display: flex; flex-direction: column; font-family: var(--cms-font-ui), sans-serif; }
.ls-rankitem__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.ls-rankitem__badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--cms-accent); padding: 3px 9px; border-radius: 6px; margin-bottom: 8px; }
.ls-rankitem__best { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cms-accent); margin-bottom: 3px; }
.ls-rankitem__body h3 { font-family: var(--cms-font-display), Poppins, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--cms-ink); margin: 0; }
.ls-rankitem__brand { font-size: 13px; color: var(--cms-ink-3); }
.ls-rankitem__score { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 18px; }
.ls-rankitem__body p { font-size: 14.5px; line-height: 1.55; color: var(--cms-ink-2); margin: 12px 0; }
.ls-rankitem__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ls-rankitem__pros { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ls-rankitem__pros span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--cms-ink-3); }
.ls-rankitem__pro-icon { width: 13px; height: 13px; color: var(--cms-cat-tutorial); }
.ls-rankitem__price { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 20px; color: var(--cms-primary); white-space: nowrap; }
@media (max-width: 720px) { .ls-rankitem { grid-template-columns: 1fr; } .ls-rankitem__media { max-width: 150px; } }

/* ─── Guia: critérios ────────────────────────────────────────────────────── */
.ls-crit { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 36px; }
.ls-crit__card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; background: var(--cms-surface); border: 1px solid var(--cms-line); border-radius: 14px; padding: 18px 20px; }
.ls-crit__num { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 18px; color: var(--cms-cat-guia); line-height: 1; padding-top: 2px; }
.ls-crit__title { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 16.5px; color: var(--cms-ink); margin: 0 0 5px; }
.ls-crit__body { color: var(--cms-ink-3); font-size: 14.5px; line-height: 1.55; margin: 0; }

/* ─── Guia: faixas de preço (tiers) ──────────────────────────────────────── */
.ls-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; margin-bottom: 36px; }
.ls-tier { position: relative; border: 1px solid var(--cms-line); border-radius: 18px; padding: 24px 22px; background: var(--cms-surface); display: flex; flex-direction: column; }
.ls-tier--hl { border-color: var(--cms-cat-explicador); box-shadow: 0 8px 26px color-mix(in srgb, var(--cms-cat-explicador) 18%, transparent); }
.ls-tier__flag { position: absolute; top: -11px; left: 22px; background: var(--cms-cat-explicador); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 11px; border-radius: 7px; }
.ls-tier__name { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.ls-tier__price { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 26px; color: var(--cms-ink); margin: 6px 0 10px; }
.ls-tier__for { color: var(--cms-ink-3); font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--cms-line-2); }
.ls-tier__picks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ls-tier__picks li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.4; color: var(--cms-ink-2); }
.ls-tier__pick-icon { width: 15px; height: 15px; color: var(--cms-cat-guia); flex: 0 0 auto; margin-top: 2px; }

/* ─── Guia: personas ─────────────────────────────────────────────────────── */
.ls-personas { display: flex; flex-direction: column; gap: 10px; margin: 36px 0; }
.ls-persona { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; align-items: center; background: var(--cms-cat-guia-bg); border-radius: 14px; padding: 16px 20px; }
.ls-persona__who { display: flex; align-items: center; gap: 9px; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 15px; color: var(--cms-ink); }
.ls-persona__icon { width: 16px; height: 16px; color: var(--cms-cat-guia); flex-shrink: 0; }
.ls-persona__rec { font-size: 14px; line-height: 1.5; color: var(--cms-ink-2); }
@media (max-width: 720px) { .ls-tiers { grid-template-columns: 1fr; } .ls-persona { grid-template-columns: 1fr; gap: 6px; } }

/* ─── Comparativo: tabela (idêntico ao handoff .comptable) ───────────────── */
.ls-comptable-wrap { overflow-x: auto; margin: 30px 0; border: 1px solid var(--cms-line); border-radius: 16px; background: var(--cms-surface); }
.ls-comptable { width: 100%; border-collapse: collapse; font-family: var(--cms-font-ui), sans-serif; font-size: 14px; min-width: 480px; }
.ls-comptable th { padding: 16px 14px; text-align: center; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 15px; background: var(--cms-surface-2); border-bottom: 1px solid var(--cms-line); color: var(--cms-ink); }
.ls-comptable th:first-child { text-align: left; }
.ls-comptable td { padding: 14px; text-align: center; border-bottom: 1px solid var(--cms-line-2); color: var(--cms-ink-2); }
.ls-comptable tr:last-child td { border-bottom: none; }
.ls-comptable__label { text-align: left !important; font-weight: 700; color: var(--cms-ink) !important; background: var(--cms-surface); }
.ls-comptable__win { color: var(--cms-cat-tutorial); font-weight: 700; background: var(--cms-cat-tutorial-bg); }
.ls-comptable__check { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }

/* ─── Soluções: sintoma ──────────────────────────────────────────────────── */
.ls-symptom { display: flex; gap: 16px; align-items: flex-start; background: var(--cms-cat-ajuda-bg); border-radius: 16px; padding: 22px 24px; margin: 0 0 32px; }
.ls-symptom__ic { width: 44px; height: 44px; border-radius: 13px; background: var(--cms-cat-ajuda); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.ls-symptom__label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--cms-cat-ajuda); font-family: var(--cms-font-ui), sans-serif; }
.ls-symptom__text { margin: 6px 0 0; color: var(--cms-ink); font-family: var(--cms-font-display), Poppins, sans-serif; font-size: 19px; font-weight: 600; line-height: 1.4; }

/* ─── Soluções: checagens rápidas ────────────────────────────────────────── */
.ls-qchecks { margin: 0 0 36px; }
.ls-qchecks ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ls-qchecks li { display: flex; align-items: flex-start; gap: 11px; background: var(--cms-surface); border: 1px solid var(--cms-line); border-radius: 12px; padding: 14px 16px; font-family: var(--cms-font-ui), sans-serif; font-size: 14.5px; line-height: 1.4; color: var(--cms-ink-2); cursor: pointer; transition: .15s; }
.ls-qchecks li.on { color: var(--cms-muted); text-decoration: line-through; }
.ls-qchecks__box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--cms-line); flex-shrink: 0; display: grid; place-items: center; color: #fff; transition: .15s; }
.ls-qchecks li.on .ls-qchecks__box { background: var(--cms-cat-ajuda); border-color: var(--cms-cat-ajuda); }
@media (max-width: 720px) { .ls-qchecks ul { grid-template-columns: 1fr; } }

/* ─── Soluções: cards de solução ─────────────────────────────────────────── */
.ls-sols-container { margin: 36px 0; }
.ls-sols { display: flex; flex-direction: column; gap: 14px; }
.ls-sol { background: var(--cms-surface); border: 1px solid var(--cms-line); border-radius: 16px; padding: 22px 24px; font-family: var(--cms-font-ui), sans-serif; }
.ls-sol__head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.ls-sol__n { width: 34px; height: 34px; border-radius: 10px; background: var(--cms-cat-ajuda); color: #fff; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 16px; display: grid; place-items: center; flex-shrink: 0; }
.ls-sol__head h3 { font-family: var(--cms-font-display), Poppins, sans-serif; font-size: 19px; font-weight: 700; color: var(--cms-ink); margin: 0; }
.ls-sol__cause { font-size: 14.5px; line-height: 1.55; color: var(--cms-ink-3); margin: 0 0 14px; }
.ls-sol__cause strong { color: var(--cms-ink-2); }
.ls-sol__steps { margin: 0; padding-left: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 9px; }
.ls-sol__steps li { counter-increment: s; position: relative; padding-left: 34px; font-size: 14.5px; line-height: 1.5; color: var(--cms-ink-2); }
.ls-sol__steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 7px; background: var(--cms-cat-ajuda-bg); color: var(--cms-cat-ajuda); font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 12px; display: grid; place-items: center; }

/* ─── Soluções: escalonamento ────────────────────────────────────────────── */
.ls-escalate { display: flex; gap: 16px; align-items: flex-start; background: var(--cms-surface); border: 1px dashed var(--cms-cat-ajuda); border-radius: 16px; padding: 22px 24px; margin: 28px 0 36px; font-family: var(--cms-font-ui), sans-serif; }
.ls-escalate__ic { width: 44px; height: 44px; border-radius: 13px; background: var(--cms-cat-ajuda-bg); color: var(--cms-cat-ajuda); display: grid; place-items: center; flex-shrink: 0; }
.ls-escalate strong { font-family: var(--cms-font-display), Poppins, sans-serif; font-size: 17px; color: var(--cms-ink); display: block; margin-bottom: 6px; }
.ls-escalate p { font-size: 14.5px; line-height: 1.55; color: var(--cms-ink-3); margin: 0; }
.ls-escalate__cta { display: inline-flex; align-items: center; gap: 6px; background: var(--cms-cat-ajuda); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; text-decoration: none; margin-top: 12px; border: none; cursor: pointer; }

.ls-pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 36px; }
.ls-pstat { background: var(--cms-surface); border: 1px solid var(--cms-line); border-radius: 14px; padding: 20px 18px; text-align: center; font-family: var(--cms-font-ui), sans-serif; }
.ls-pstat__value { display: block; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 26px; color: var(--cms-cat-projeto); line-height: 1; }
.ls-pstat__label { display: block; font-size: 12.5px; color: var(--cms-ink-3); margin-top: 7px; font-weight: 600; }

/* ─── Projeto: orçamento ─────────────────────────────────────────────────── */
.ls-budget { margin: 36px 0; border: 1px solid var(--cms-line); border-radius: 16px; overflow: hidden; }
.ls-budget__table { width: 100%; border-collapse: collapse; font-family: var(--cms-font-ui), sans-serif; }
.ls-budget__table th { text-align: left; padding: 14px 18px; background: var(--cms-surface-2); font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 14px; color: var(--cms-ink-2); border-bottom: 1px solid var(--cms-line); }
.ls-budget__table th:nth-child(2), .ls-budget__table td:nth-child(2) { text-align: center; width: 80px; }
.ls-budget__table th:last-child, .ls-budget__table td:last-child { text-align: right; }
.ls-budget__table td { padding: 13px 18px; font-size: 14.5px; color: var(--cms-ink-2); border-bottom: 1px solid var(--cms-line-2); }
.ls-budget__table tbody tr { transition: background-color .15s; }
.ls-budget__table tbody tr:hover { background: var(--cms-surface-2); }
.ls-budget__table tbody tr:last-child td { border-bottom: none; }
.ls-budget__table tfoot td { padding: 16px 18px; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 17px; color: var(--cms-ink); background: var(--cms-cat-projeto-bg); border-top: 1px solid var(--cms-line); }
.ls-budget__table tfoot td:last-child { color: var(--cms-cat-projeto); }

/* ─── Projeto: ambientes ─────────────────────────────────────────────────── */
.ls-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 36px 0; }
.ls-room { background: var(--cms-surface); border: 1px solid var(--cms-line); border-radius: 16px; overflow: hidden; font-family: var(--cms-font-ui), sans-serif; display: flex; flex-direction: column; }
.ls-room__img { position: relative; aspect-ratio: 16/7; width: 100%; overflow: hidden; display: block; flex-shrink: 0; }
.ls-room__tag { position: absolute; left: 14px; bottom: 14px; color: #fff; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 14px; padding: 5px 13px; border-radius: 8px; background: var(--cms-cat-projeto); z-index: 10; }
.ls-room__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.ls-room__body p { font-size: 14.5px; line-height: 1.55; color: var(--cms-ink-2); margin: 0; }
.ls-room__dev { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--cms-ink-3); font-weight: 600; margin-top: auto; }
.ls-room__dev svg { color: var(--cms-cat-projeto); flex-shrink: 0; }

/* ─── Projeto: lições ────────────────────────────────────────────────────── */
.ls-lessons-container { margin: 36px 0; }
.ls-lessons__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ls-lesson { display: flex; align-items: flex-start; gap: 11px; border-radius: 13px; padding: 16px 18px; font-family: var(--cms-font-ui), sans-serif; font-size: 14.5px; line-height: 1.5; color: var(--cms-ink-2); }
.ls-lesson__icon { flex-shrink: 0; margin-top: 2px; }
.ls-lesson--good { background: var(--cms-cat-tutorial-bg); }
.ls-lesson--good .ls-lesson__icon { color: var(--cms-cat-tutorial); }
.ls-lesson--bad { background: var(--cms-cat-review-bg); }
.ls-lesson--bad .ls-lesson__icon { color: var(--cms-cat-review); }

/* ─── Body-block: card de produto ────────────────────────────────────────── */
.ls-prodcard {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--cms-surface); border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius-card); padding: 18px 20px; box-shadow: var(--cms-shadow-sm);
}
.ls-prodcard__media { position: relative; flex: 0 0 auto; }
.ls-prodcard__img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--cms-radius-sm); background: var(--cms-surface-2); display: block; }
.ls-prodcard__rank {
  position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; border-radius: 9px;
  background: var(--cms-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 15px;
}
.ls-prodcard__media:not(:has(.ls-prodcard__img)) .ls-prodcard__rank {
  position: static; width: 40px; height: 40px; border-radius: 12px;
  background: var(--cms-cat-lista-bg); color: var(--cms-cat-lista); font-size: 20px;
}
.ls-prodcard__main { flex: 1 1 auto; min-width: 0; }
.ls-prodcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ls-prodcard__highlight { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--cms-primary); margin-bottom: 2px; }
.ls-prodcard__name { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 18px; color: var(--cms-ink); margin: 0; }
.ls-prodcard__meta { font-size: 12px; color: var(--cms-muted); text-transform: uppercase; letter-spacing: .05em; }
.ls-prodcard__badge { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; background: var(--cms-primary); color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; }
.ls-prodcard__badge-icon { width: 13px; height: 13px; }
.ls-prodcard__blurb { color: var(--cms-ink-2); font-size: 14px; line-height: 1.55; margin: 6px 0 0; }
.ls-prodcard__pros { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ls-prodcard__pros li { display: flex; gap: 6px; align-items: center; color: var(--cms-ink-2); font-size: 13px; }
.ls-prodcard__pro-icon { width: 14px; height: 14px; color: #0e9f6e; }
.ls-prodcard__foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.ls-prodcard__price { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 20px; color: var(--cms-primary); }
.ls-prodcard__cta { display: inline-flex; align-items: center; gap: 5px; color: var(--cms-primary); font-weight: 700; font-size: 13px; text-decoration: none; }
.ls-prodcard__cta-icon { width: 14px; height: 14px; }
.ls-prodcard__score { flex: 0 0 auto; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 24px; color: #0e9f6e; }

/* ─── Callout (idêntico ao handoff .callout — ícone em quadrado colorido) ── */
.ls-callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; margin: 30px 0; font-size: 15.5px; line-height: 1.6; font-family: var(--cms-font-ui), sans-serif; color: var(--cms-ink-2); }
.ls-callout__ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.ls-callout__ic svg { width: 18px; height: 18px; }
.ls-callout__title { display: block; margin: 0 0 3px; font-weight: 700; }
.ls-callout__text { display: block; color: var(--cms-ink-2); }
.ls-callout--info    { background: var(--cms-cat-noticias-bg); }
.ls-callout--info    .ls-callout__ic { background: var(--cms-cat-noticias); }
.ls-callout--info    .ls-callout__title { color: var(--cms-cat-noticias); }
.ls-callout--tip     { background: var(--cms-cat-tutorial-bg); }
.ls-callout--tip     .ls-callout__ic { background: var(--cms-cat-tutorial); }
.ls-callout--tip     .ls-callout__title { color: var(--cms-cat-tutorial); }
.ls-callout--warning { background: var(--cms-cat-review-bg); }
.ls-callout--warning .ls-callout__ic { background: var(--cms-cat-review); }
.ls-callout--warning .ls-callout__title { color: var(--cms-cat-review); }
.ls-callout--danger  { background: var(--cms-cat-ajuda-bg); }
.ls-callout--danger  .ls-callout__ic { background: var(--cms-cat-ajuda); }
.ls-callout--danger  .ls-callout__title { color: var(--cms-cat-ajuda); }
.ls-callout--success { background: var(--cms-cat-tutorial-bg); }
.ls-callout--success .ls-callout__ic { background: var(--cms-cat-tutorial); }
.ls-callout--success .ls-callout__title { color: var(--cms-cat-tutorial); }

/* ─── Prosa: figura (imagem no corpo/passo) ──────────────────────────────── */
.ls-prose__figure { margin: 0; }
.ls-prose__figure img { width: 100%; border-radius: var(--cms-radius-sm); display: block; }
.ls-prose__figure figcaption { margin-top: 6px; font-size: 13px; color: var(--cms-muted); text-align: center; }

/* ─── Vídeo (YouTube/Vimeo/MP4) ──────────────────────────────────────────── */
.ls-video { margin: 24px 0; }
.ls-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--cms-radius-sm);
  overflow: hidden;
  background: #000;
}
.ls-video__frame iframe,
.ls-video__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.ls-video__cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  text-align: center;
}
.ls-video__title { font-size: 14px; font-weight: 700; color: var(--cms-ink); }
.ls-video__caption { font-size: 13px; color: var(--cms-muted); }


/* ─── Comparativo: concorrentes (idêntico ao handoff .contenders) ────────── */
.ls-contenders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0; }
.ls-contender { background: var(--cms-surface); border: 1px solid var(--cms-line); border-radius: var(--cms-radius-card); padding: 16px; text-align: center; }
.ls-contender__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; background: var(--cms-surface-2); margin-bottom: 12px; }
.ls-contender__name { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; font-size: 18px; color: var(--cms-ink); margin: 0; }
.ls-contender__brand { font-size: 12px; color: var(--cms-muted); }
.ls-contender__blurb { color: var(--cms-ink-2); font-size: 13.5px; line-height: 1.5; margin: 8px 0 0; }
.ls-contender__price { display: block; margin-top: 10px; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 800; color: var(--cms-cat-comparativo); }
@media (max-width: 720px) { .ls-contenders { grid-template-columns: 1fr; } }

/* ─── Comparativo: vencedores (idêntico ao handoff .winners) ─────────────── */
.ls-winners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0; }
.ls-winner { border: 1px solid var(--cms-line); border-radius: 16px; padding: 20px; background: var(--cms-surface); }
.ls-winner__badge { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 9px; }
.ls-winner__star { width: 14px; height: 14px; }
.ls-winner__label { font-family: var(--cms-font-display), Poppins, sans-serif; font-weight: 700; font-size: 16px; color: var(--cms-ink); margin: 14px 0 8px; }
.ls-winner__note { font-size: 13.5px; line-height: 1.5; color: var(--cms-ink-3); margin: 0; }
@media (max-width: 720px) { .ls-winners { grid-template-columns: 1fr; } }

/* ─── Mobile: proteção geral de overflow nos blocos ──────────────────────── */
@media (max-width: 720px) {
  /* Scorecard: empilha nota e veredicto */
  .ls-scorecard__verdict { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ls-scorecard__big { align-self: center; }

  /* Ranking: remove imagem lateral no mobile */
  .ls-rankitem { grid-template-columns: 1fr; gap: 14px; }
  .ls-rankitem__media { max-width: 120px; }

  /* Callout: garante que não transborda */
  .ls-callout { word-break: break-word; overflow-wrap: break-word; }

  /* Prose: font size menor no mobile */
  .ls-prose { font-size: 16px; }
  .ls-prose h2 { font-size: 22px; }
  .ls-prose h3 { font-size: 18px; }

  /* Steps: garante que não transborda */
  .ls-step { grid-template-columns: 36px 1fr; gap: 14px; }
  .ls-step__num { width: 36px; height: 36px; font-size: 16px; }
}

/* ─── Tabela (corpo rich-text) ───────────────────────────────────────────── */
.ls-prose__tablewrap {
  overflow-x: auto;
  margin-top: 1.1em;
}
.ls-prose table,
.ls-editor .ls-editor-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95em;
}
.ls-editor .ls-editor-content table {
  table-layout: fixed;
}
.ls-prose th,
.ls-prose td,
.ls-editor .ls-editor-content th,
.ls-editor .ls-editor-content td {
  border: 1px solid var(--cms-line, #e2e8f0);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  position: relative;
}
.ls-prose th,
.ls-editor .ls-editor-content th {
  background: var(--cms-line-2, #f1f5f9);
  font-weight: 700;
  color: var(--cms-ink, #1e2230);
}
.ls-prose tbody tr:nth-child(even) td,
.ls-editor .ls-editor-content tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--cms-line-2, #f1f5f9) 40%, transparent);
}
/* ─── Letra capitular (drop cap) ─────────────────────────────────────────── */
.ls-prose p.ls-dropcap::first-letter,
.ls-editor .ls-editor-content p.ls-dropcap::first-letter {
  float: left;
  font-family: var(--cms-font-display), Poppins, serif;
  font-size: 3.4em;
  line-height: 0.72;
  font-weight: 700;
  padding: 0.06em 0.12em 0 0;
  color: var(--cms-ink);
}

/* ─── Marca-texto / subscrito / sobrescrito ──────────────────────────────── */
.ls-prose mark,
.ls-editor .ls-editor-content mark {
  background: color-mix(in srgb, var(--cms-primary, #2563eb) 22%, transparent);
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}
.ls-prose sub,
.ls-prose sup {
  font-size: 0.72em;
  line-height: 0;
}

/* ─── Âncora (permalink) nos headings — só no hover, sem JS ───────────────── */
.ls-prose h2,
.ls-prose h3 {
  position: relative;
}
.ls-prose .ls-anchor {
  margin-left: 0.35em;
  font-weight: 700;
  color: var(--cms-primary);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ls-prose h2:hover .ls-anchor,
.ls-prose h3:hover .ls-anchor {
  opacity: 0.5;
}
.ls-prose .ls-anchor:hover {
  opacity: 1;
}

/* ─── Lista de tarefas (checklist) ───────────────────────────────────────── */
.ls-prose .ls-tasklist {
  list-style: none;
  padding-left: 0;
}
.ls-prose .ls-taskitem {
  display: flex;
  gap: 0.55em;
  align-items: flex-start;
}
.ls-prose .ls-taskitem > input[type="checkbox"] {
  margin-top: 0.45em;
  accent-color: var(--cms-primary);
}
.ls-prose .ls-taskitem > div {
  flex: 1;
}
/* Editor: TaskList do TipTap usa ul[data-type="taskList"] */
.ls-editor .ls-editor-content ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
}
.ls-editor .ls-editor-content ul[data-type="taskList"] li {
  display: flex;
  gap: 0.55em;
  align-items: flex-start;
}
.ls-editor .ls-editor-content ul[data-type="taskList"] li > label {
  margin-top: 0.2em;
}
.ls-editor .ls-editor-content ul[data-type="taskList"] li > div {
  flex: 1;
}
.ls-editor .ls-editor-content ul[data-type="taskList"] input[type="checkbox"] {
  accent-color: var(--cms-primary);
}