/* ════════════════════════════════════════════════════════════════════════
   ARTIGOS · as páginas de conteúdo que trazem gente do Google (05/10)
   Lei: docs/34 §7 (SEO) · 29 (vocabulário) · mesma família da landing:
   carrega tokens.css + landing.css (topo, botões, rodapé, fechamento) e
   só acrescenta o corpo de leitura. Claro por desenho, como a landing.
   ════════════════════════════════════════════════════════════════════════ */

.art {
  --art-fundo: #faf3eb;
  --art-texto: #171717;
  --art-sec: #605d57;
  --art-borda: #e7e2da;
  background: var(--art-fundo);
  color: var(--art-texto);
  padding: var(--space-12) 0 var(--space-16);
}
.art__corpo { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }

.art__trilha { font-size: var(--body-sm-size); color: var(--art-sec); margin: 0 0 var(--space-4); }
.art__trilha a { color: var(--art-sec); text-decoration: none; }
.art__trilha a:hover { color: var(--art-texto); text-decoration: underline; }

.art h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}
.art__sub { font-size: 1.15rem; color: var(--art-sec); margin: 0 0 var(--space-8); line-height: 1.55; }

.art h2 {
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: var(--space-12) 0 var(--space-3);
}
.art h3 { font-size: 1.15rem; margin: var(--space-8) 0 var(--space-2); }
.art p, .art li { font-size: 1.07rem; line-height: 1.75; }
.art p { margin: 0 0 var(--space-4); }
.art ul, .art ol { margin: 0 0 var(--space-4); padding-left: 1.3em; }
.art li { margin-bottom: var(--space-2); }
.art a { color: #92400e; text-underline-offset: 3px; }
.art strong { font-weight: 650; }

/* O resumo no topo: quem tem pressa lê só isto. */
.art__resumo {
  background: #ffffff;
  border: 1px solid var(--art-borda);
  border-left: 4px solid var(--color-brand-500);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-8);
}
.art__resumo p { margin: 0; }

/* Tabela de comparação, rolável no celular. */
.art__tabela { overflow-x: auto; margin: 0 0 var(--space-6); border: 1px solid var(--art-borda); border-radius: var(--radius-lg, 12px); background: #fff; }
.art__tabela table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 0.98rem; }
.art__tabela th, .art__tabela td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--art-borda); vertical-align: top; }
.art__tabela th { background: #f4ece1; font-weight: 650; }
.art__tabela tr:last-child td { border-bottom: 0; }

/* A conversa de exemplo: bolhas no mesmo idioma do WhatsApp. */
.art__conversa {
  background: #efe7db;
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-5);
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.art__bolha { max-width: 85%; padding: var(--space-2) var(--space-3); border-radius: 12px; font-size: 0.98rem; line-height: 1.5; }
.art__bolha--cliente { background: #ffffff; align-self: flex-start; border-top-left-radius: 4px; }
.art__bolha--vendedor { background: #fde7c4; align-self: flex-end; border-top-right-radius: 4px; }
.art__bolha small { display: block; color: var(--art-sec); font-size: 0.78rem; margin-top: 2px; }

/* O convite no meio do texto: discreto, mas impossível de não ver. */
.art__convite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: #171717;
  color: #fafafa;
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6);
  margin: var(--space-10) 0;
}
.art__convite p { margin: 0; font-size: 1.05rem; max-width: 42ch; color: #fafafa; }
.art__convite strong { color: #fff; }

/* Leia também: os outros artigos. */
.art__mais { border-top: 1px solid var(--art-borda); margin-top: var(--space-12); padding-top: var(--space-8); }
.art__mais h2 { margin-top: 0; font-size: 1.2rem; }
.art__mais ul { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.art__mais a { display: block; background: #fff; border: 1px solid var(--art-borda); border-radius: 12px; padding: var(--space-4); text-decoration: none; color: var(--art-texto); font-weight: 600; }
.art__mais a:hover { border-color: var(--color-brand-500); }
.art__mais span { display: block; font-weight: 400; color: var(--art-sec); font-size: 0.95rem; margin-top: 2px; }

@media (max-width: 767px) {
  .art { padding: var(--space-8) 0 var(--space-12); }
  .art__convite { padding: var(--space-5); }
  .art__convite .lp-btn { width: 100%; justify-content: center; }
}