/* ===========================
   ARTIGOS (blog) — Cocriarq
   Usa as cores e fontes do styles.css
=========================== */

/* Lista de artigos */
.artigos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.artigo-card {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid #cde8ea; border-radius: 8px;
  padding: 30px; border-top: 3px solid var(--turquesa);
  transition: box-shadow .2s, transform .2s;
}
.artigo-card:hover { box-shadow: 0 8px 30px rgba(23,48,54,.1); transform: translateY(-3px); }
.artigo-tag { font: 800 .74rem Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #126f78; }
.artigo-card h2 { font: 700 1.3rem/1.3 Manrope, sans-serif; letter-spacing: -.03em; margin: 0; color: var(--tinta); }
.artigo-card p { margin: 0; line-height: 1.65; color: #4a6468; }
.artigo-meta { font-size: .82rem; color: #7a9099; margin-top: auto; padding-top: 8px; }
.artigo-card .text-link { margin-top: 4px; align-self: flex-start; }

/* Página do artigo */
.breadcrumb { font-size: .82rem; color: rgba(255,255,255,.55); margin-bottom: 18px; }
.breadcrumb a { color: rgba(255,255,255,.75); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--turquesa); }
.page-hero .artigo-meta { color: rgba(255,255,255,.6); margin-top: 18px; padding: 0; }

.artigo { max-width: 760px; margin: 0 auto; font-size: 1.08rem; line-height: 1.8; color: #2c464c; }
.artigo h2 { font: 700 clamp(1.45rem,2.4vw,1.85rem)/1.25 Manrope, sans-serif; letter-spacing: -.04em; color: var(--tinta); margin: 48px 0 14px; }
.artigo h3 { font: 700 1.15rem Manrope, sans-serif; color: var(--tinta); margin: 28px 0 8px; }
.artigo p { margin: 0 0 18px; }
.artigo ul { margin: 0 0 18px; padding-left: 22px; }
.artigo li { margin-bottom: 8px; }
.artigo strong { color: var(--tinta); }

.resumo {
  background: #f3fafb; border-left: 4px solid var(--turquesa);
  border-radius: 0 8px 8px 0; padding: 22px 26px; margin: 0 0 32px;
}
.resumo .eyebrow { margin-bottom: 6px; }
.resumo p { margin: 0; }

.classes { display: grid; gap: 12px; margin: 8px 0 22px; }
.classe { display: flex; gap: 16px; align-items: flex-start; background: #f7fafa; border-radius: 10px; padding: 18px 20px; }
.classe-num { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--turquesa); color: var(--tinta); display: grid; place-items: center; font: 800 1rem Manrope, sans-serif; }
.classe strong { display: block; font-family: Manrope, sans-serif; }
.classe span { font-size: .97rem; color: #4a6468; line-height: 1.6; }

.destaque-prazo {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--tinta); color: #fff; border-radius: 10px; padding: 26px 28px; margin: 8px 0 22px;
}
.destaque-prazo .num { font: 800 3.2rem/1 Manrope, sans-serif; color: var(--turquesa); }
.destaque-prazo p { margin: 0; flex: 1 1 260px; color: rgba(255,255,255,.85); line-height: 1.6; }

.aviso { font-size: .92rem; color: #577077; border-top: 1px solid #cde8ea; padding-top: 18px; margin-top: 36px; }

.artigo-cta {
  background: var(--areia); border-radius: 10px; padding: 28px 30px; margin: 40px 0 0;
}
.artigo-cta h2 { margin-top: 0; }
.artigo-cta p { color: var(--tinta); }

.artigo .faq-list { max-width: none; }

@media (max-width: 900px) {
  .artigos-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .artigo { font-size: 1.02rem; }
  .artigo-card { padding: 24px; }
  .destaque-prazo .num { font-size: 2.6rem; }
}

/* Índice, alerta, tabelas e listas (artigo pilar) */
.indice { border: 1px solid #cde8ea; border-radius: 8px; padding: 22px 26px; margin: 0 0 36px; }
.indice ol { margin: 0; padding-left: 20px; font-size: .97rem; }
.indice li { margin-bottom: 4px; }
.indice a { color: #126f78; text-decoration: underline; text-underline-offset: 3px; }
.artigo h2[id] { scroll-margin-top: 96px; }

.alerta { background: #fff6ec; border-left: 4px solid #f4a225; border-radius: 0 8px 8px 0; padding: 18px 22px; margin: 0 0 20px; }
.alerta p { margin: 0; }

.tabela-wrap { margin: 8px 0 22px; }
.tabela { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .95rem; line-height: 1.5; }
.tabela th { background: var(--tinta); color: #fff; text-align: left; font: 700 .85rem Manrope, sans-serif; padding: 10px 12px; }
.tabela td { padding: 10px 12px; border-bottom: 1px solid #cde8ea; vertical-align: top; overflow-wrap: anywhere; }
.tabela tr.grupo td { background: #e8f8f9; font: 800 .78rem Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #126f78; }

.lista-colunas { columns: 2; column-gap: 32px; }
.lista-colunas li { break-inside: avoid; }

.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 34px; }
.checklist li::before { content: "☐"; position: absolute; left: 0; top: -1px; color: #126f78; font-size: 1.25rem; }

@media (max-width: 600px) {
  .tabela { font-size: .84rem; }
  .tabela th, .tabela td { padding: 8px 7px; }
  .lista-colunas { columns: 1; }
  .indice { padding: 18px 18px; }
}