/* ============================================================
   Páginas interiores (inc/layout.php): módulos, caso de estudo,
   sobre, privacidade. Usa as variáveis de assets/styles.css.
   Prefixo pg- para não colidir com a landing nem com o blog.
   ============================================================ */

.pg-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .pg-wrap { padding: 0 2rem; } }

/* ---------- Hero ---------- */
.pg-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(var(--brand-rgb), .10), transparent 60%),
    radial-gradient(700px 300px at 0% 110%, rgba(var(--accent-rgb), .08), transparent 60%),
    var(--brand-tint);
  border-bottom: 1px solid var(--line);
  padding: 2.5rem 0 3rem;
}
@media (min-width: 1024px) { .pg-hero { padding: 3.5rem 0 4rem; } }
.pg-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--mute); }
.pg-crumbs a { color: var(--slate); }
.pg-crumbs a:hover { color: var(--brand); }
.pg-kicker { margin-top: 1.25rem; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: var(--brand-2); }
.pg-h1 { margin-top: .5rem; max-width: 22ch; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.1; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.pg-h1 span { color: var(--brand); }
.pg-lead { margin-top: 1rem; max-width: 62ch; font-size: 1.075rem; line-height: 1.7; color: var(--slate); }
.pg-chips { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.pg-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 9999px; background: #fff; border: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--ink); }
.pg-hero-actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* Hero com visual à direita (módulos) */
.pg-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .pg-hero-grid { grid-template-columns: 1.15fr .85fr; } }
.pg-hero-visual {
  position: relative; border-radius: 20px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 24px 48px -12px rgba(15,23,42,.18); padding: 1.25rem;
}

/* ---------- Resumo em cartões ---------- */
.pg-summary { display: grid; gap: 1rem; margin-top: -1.75rem; position: relative; }
@media (min-width: 640px) { .pg-summary { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pg-summary { grid-template-columns: repeat(4, 1fr); } }
.pg-sumcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem; box-shadow: 0 8px 24px -16px rgba(15,23,42,.25); }
.pg-sumcard svg { width: 28px; height: 28px; fill: var(--brand); }
.pg-sumcard h2 { margin-top: .75rem; font-size: 1rem; font-weight: 800; color: var(--navy); }
.pg-sumcard p { margin-top: .35rem; font-size: .9rem; line-height: 1.55; color: var(--slate); }

/* ---------- Layout conteúdo + barra lateral ---------- */
.pg-layout { display: grid; gap: 2.5rem; padding-top: 3rem; padding-bottom: 4rem; }
@media (min-width: 1024px) { .pg-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 3.5rem; } }
.pg-aside { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) { .pg-aside { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; } }

.pg-toc, .pg-nav { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem; }
.pg-toc-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--mute); margin: 0 0 .5rem .5rem; }
.pg-toc ol, .pg-nav ul { list-style: none; margin: 0; padding: 0; }
.pg-toc a, .pg-nav a {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 10px;
  font-size: .88rem; line-height: 1.3; color: var(--slate); transition: background .15s, color .15s;
}
.pg-toc a:hover, .pg-nav a:hover { background: var(--soft); color: var(--navy); }
.pg-toc a.is-active, .pg-nav a[aria-current="page"] { background: var(--brand-tint); color: var(--brand); font-weight: 700; }
.pg-nav a img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.pg-nav a[aria-current="page"]::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 9999px; background: var(--accent); }

.pg-aside-card { border-radius: 16px; padding: 1.25rem; background: linear-gradient(160deg, var(--brand), var(--brand-deep)); color: #fff; }
.pg-aside-card p { font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,.82); }
.pg-aside-card .pg-aside-card-t { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: .35rem; }
.pg-aside-card .btn-primary { margin-top: 1rem; background: #fff; color: var(--brand); border-color: #fff; width: 100%; justify-content: center; }
.pg-aside-card .btn-primary:hover { background: var(--accent-soft); color: var(--brand-deep); }

/* ---------- Texto legal ---------- */
.pg-legal h2 { display: flex; align-items: center; gap: .75rem; scroll-margin-top: 96px; }
.pg-legal h2 span {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 9999px;
  background: var(--brand-tint); color: var(--brand); font-size: .85rem; font-weight: 800;
}

/* ---------- Blocos das páginas de módulo ---------- */
.pg-block { scroll-margin-top: 96px; }
.pg-block + .pg-block { margin-top: 3.5rem; }
.pg-h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.pg-h2 span { color: var(--brand); }
.pg-p { margin-top: .75rem; font-size: 1.02rem; line-height: 1.75; color: var(--slate); max-width: 68ch; }
.pg-p strong { color: var(--ink); }

/* Dores: "Antes" vs "Com a Escola360" */
.pg-versus { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 768px) { .pg-versus { grid-template-columns: 1fr 1fr; } }
.pg-versus > div { border-radius: 16px; padding: 1.25rem 1.25rem 1.1rem; border: 1px solid var(--line); }
.pg-versus .is-antes { background: var(--soft); }
.pg-versus .is-depois { background: var(--brand-tint); border-color: var(--brand-3); }
.pg-versus h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--mute); }
.pg-versus .is-depois h3 { color: var(--brand); }
.pg-versus ul { margin-top: .75rem; display: grid; gap: .6rem; }
.pg-versus li { position: relative; padding-left: 1.6rem; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.pg-versus li::before { content: ""; position: absolute; left: 0; top: .3rem; width: 1rem; height: 1rem; border-radius: 9999px; }
.pg-versus .is-antes li::before { background: #E2E8F0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.pg-versus .is-depois li::before { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }

/* Capacidades em grelha */
.pg-caps { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .pg-caps { grid-template-columns: repeat(2, 1fr); } }
.pg-cap { border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.pg-cap:hover { border-color: var(--brand-3); box-shadow: 0 12px 28px -18px rgba(var(--brand-rgb), .45); transform: translateY(-2px); }
.pg-cap-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-tint); }
.pg-cap-ico svg { width: 22px; height: 22px; stroke: var(--brand); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg-cap h3 { margin-top: .85rem; font-size: 1rem; font-weight: 800; color: var(--navy); line-height: 1.3; }
.pg-cap p { margin-top: .4rem; font-size: .92rem; line-height: 1.6; color: var(--slate); }

/* Perfis que usam */
.pg-roles { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.pg-role { padding: .45rem .9rem; border-radius: 9999px; background: #fff; border: 1px solid var(--line); font-size: .85rem; font-weight: 600; color: var(--ink); }
.pg-role b { color: var(--brand); font-weight: 800; }

/* Números / destaque */
.pg-stats { margin-top: 1.5rem; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .pg-stats { grid-template-columns: repeat(4, 1fr); } }
.pg-stat { border-radius: 16px; padding: 1.1rem; background: var(--brand-tint); }
.pg-stat strong { display: block; font-size: 1.75rem; line-height: 1.1; font-weight: 800; color: var(--brand-deep); }
.pg-stat span { display: block; margin-top: .35rem; font-size: .82rem; line-height: 1.4; color: var(--slate); }

/* Citação */
.pg-quote { margin-top: 1.5rem; border-radius: 20px; padding: 1.75rem; background: linear-gradient(160deg, var(--brand), var(--brand-deep)); color: #fff; display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .pg-quote { grid-template-columns: auto 1fr; align-items: center; } }
.pg-quote img { width: 72px; height: 72px; border-radius: 9999px; object-fit: cover; border: 3px solid rgba(255,255,255,.3); }
.pg-quote blockquote { font-size: 1.1rem; line-height: 1.6; font-weight: 600; }
.pg-quote cite { display: block; margin-top: .6rem; font-style: normal; font-size: .85rem; color: var(--brand-accent); }

/* Segmentos */
.pg-segs { margin-top: 1.25rem; display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .pg-segs { grid-template-columns: repeat(3, 1fr); } }
.pg-seg { border: 1px dashed var(--line-strong); border-radius: 14px; padding: .9rem 1rem; font-size: .9rem; font-weight: 700; color: var(--ink); background: #fff; }
.pg-seg small { display: block; margin-top: .2rem; font-weight: 400; font-size: .8rem; color: var(--mute); }

/* FAQ */
.pg-faq { margin-top: 1.25rem; display: grid; gap: .75rem; }
.pg-faq details { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 0 1.1rem; }
.pg-faq details[open] { border-color: var(--brand-3); background: var(--soft); }
.pg-faq summary { cursor: pointer; list-style: none; padding: 1rem 0; display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; color: var(--navy); }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--brand); transition: transform .2s; }
.pg-faq details[open] summary::after { transform: rotate(45deg); }
.pg-faq details p { padding-bottom: 1rem; font-size: .95rem; line-height: 1.65; color: var(--slate); }

/* CTA final */
.pg-cta { margin-top: 3.5rem; border-radius: 24px; padding: 2rem; background:
  radial-gradient(500px 200px at 100% 0%, rgba(var(--accent-rgb), .25), transparent 60%),
  linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; }
@media (min-width: 768px) { .pg-cta { padding: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } }
.pg-cta h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 800; line-height: 1.2; }
.pg-cta p { margin-top: .5rem; color: rgba(255,255,255,.82); max-width: 52ch; }
.pg-cta .btn-primary { margin-top: 1.25rem; background: #fff; color: var(--brand); border-color: #fff; white-space: nowrap; }
@media (min-width: 768px) { .pg-cta .btn-primary { margin-top: 0; } }
.pg-cta .btn-primary:hover { background: var(--accent-soft); color: var(--brand-deep); }

/* Módulos relacionados */
.pg-related { margin-top: 1.25rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .pg-related { grid-template-columns: repeat(3, 1fr); } }
.pg-related a { display: block; border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem; background: #fff; transition: border-color .2s, transform .2s; }
.pg-related a:hover { border-color: var(--brand); transform: translateY(-2px); }
.pg-related img { width: 32px; height: 32px; object-fit: contain; }
.pg-related strong { display: block; margin-top: .6rem; font-size: .95rem; color: var(--navy); }
.pg-related span { display: block; margin-top: .25rem; font-size: .85rem; color: var(--slate); line-height: 1.5; }

/* ---------- Página de módulo: barra à direita, menu no topo em telemóvel ---------- */
@media (min-width: 1024px) {
  .pg-layout-mod > .pg-aside { grid-column: 2; grid-row: 1; }
  .pg-layout-mod > .pg-content { grid-column: 1; grid-row: 1; }
}
.pg-nav-g { margin: .75rem 0 .15rem .6rem; font-size: .7rem; font-weight: 700; color: var(--mute); }
.pg-nav a svg { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--mute); }
.pg-nav a[aria-current="page"] svg, .pg-nav a:hover svg { stroke: var(--brand); }
@media (max-width: 1023px) {
  .pg-desk { display: none; }
  .pg-layout-mod { padding-top: 1.5rem; gap: 1.5rem; }
  .pg-nav-mobile { display: flex; gap: .5rem; overflow-x: auto; padding: .6rem; scrollbar-width: thin; }
  .pg-nav-mobile > p { display: none; }
  .pg-nav-mobile ul { display: contents; }
  .pg-nav-mobile li { flex: 0 0 auto; }
  .pg-nav-mobile a { white-space: nowrap; border: 1px solid var(--line); }
  .pg-nav a[aria-current="page"]::after { display: none; }
}
.pg-chip svg { width: 14px; height: 14px; stroke: var(--brand); }

/* Maqueta do ecrã no hero */
.mock { margin: 0; display: grid; gap: .9rem; }
.mock-bar { display: flex; align-items: center; gap: .35rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.mock-bar i { width: 9px; height: 9px; border-radius: 9999px; background: var(--line-strong); }
.mock-bar span { margin-left: .5rem; font-size: .8rem; font-weight: 700; color: var(--navy); }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.mock-kpi { border-radius: 12px; padding: .7rem .75rem; background: var(--soft); }
.mock-kpi span { display: block; font-size: .68rem; line-height: 1.3; color: var(--mute); }
.mock-kpi strong { display: block; margin-top: .25rem; font-size: 1.05rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.mock-kpi.is-brand { background: var(--brand-tint); } .mock-kpi.is-brand strong { color: var(--brand); }
.mock-kpi.is-ok { background: #ECFDF5; } .mock-kpi.is-ok strong { color: #047857; }
.mock-kpi.is-warn { background: var(--accent-soft); } .mock-kpi.is-warn strong { color: #B54708; }
.mock-rows { display: grid; gap: .45rem; }
.mock-rows li { display: flex; align-items: center; gap: .65rem; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 12px; }
.mock-av { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9999px; background: var(--brand-3); color: var(--brand); font-size: .8rem; font-weight: 800; }
.mock-t { flex: 1; min-width: 0; }
.mock-t b { display: block; font-size: .82rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-t small { display: block; font-size: .72rem; color: var(--mute); }
.mock-rows em { font-style: normal; font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 9999px; white-space: nowrap; }
.mock-rows em.is-ok { background: #ECFDF5; color: #047857; }
.mock-rows em.is-warn { background: var(--accent-soft); color: #B54708; }
.mock-rows em.is-brand { background: var(--brand-tint); color: var(--brand); }
.mock-rows em.is-mute { background: var(--soft-2); color: var(--slate); }
.mock figcaption { font-size: .7rem; color: var(--mute); text-align: right; }

/* Perfis e passos */
.pg-roles-grid { margin-top: 1.25rem; display: grid; gap: .75rem; }
@media (min-width: 640px) { .pg-roles-grid { grid-template-columns: repeat(2, 1fr); } }
.pg-role-card { display: grid; gap: .25rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--soft); border-left: 3px solid var(--brand); }
.pg-role-card strong { font-size: .95rem; color: var(--navy); }
.pg-role-card span { font-size: .9rem; line-height: 1.55; color: var(--slate); }
.pg-steps { margin-top: 1.25rem; display: grid; gap: 1rem; counter-reset: none; }
.pg-steps li { display: grid; grid-template-columns: 2.25rem 1fr; gap: .9rem; align-items: start; }
.pg-steps li > span { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: var(--brand); color: #fff; font-weight: 800; font-size: .9rem; }
.pg-steps strong { display: block; color: var(--navy); }
.pg-steps p { margin-top: .2rem; font-size: .93rem; line-height: 1.6; color: var(--slate); }
.pg-related .pg-cap-ico { margin-bottom: .1rem; }

/* ---------- Guias (gd-): resposta directa, checklist e tabela com scroll ---------- */
.gd-answer { margin: 0 0 1.5rem; padding: 1.25rem 1.35rem; border-radius: 16px; background: var(--brand-tint); border-left: 4px solid var(--brand); }
.gd-answer p { margin: 0; color: var(--ink); } .gd-answer p + p { margin-top: .75rem; }
.article-content .gd-checklist { padding-left: 0; counter-reset: gd; display: grid; gap: .6rem; }
.article-content .gd-checklist li { list-style: none; counter-increment: gd; position: relative; margin: 0; padding: .7rem .9rem .7rem 3rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; line-height: 1.55; }
.article-content .gd-checklist li::before { content: counter(gd); position: absolute; left: .8rem; top: .7rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 9999px; background: var(--brand); color: #fff; font-size: .8rem; font-weight: 800; }
.gd-table { margin: 1.5rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gd-table table { margin: 0; min-width: 560px; }
.gd-table tbody th { background: #fff; color: var(--navy); white-space: nowrap; }

/* ---------- Caso de cliente (casos/*): logótipo no hero, ícones de traço
   nos cartões de resumo, ligações aos módulos e grelha de testemunhos ---------- */
.cs-logo { display: grid; justify-items: center; gap: .9rem; text-align: center; padding: 2rem 1.5rem; }
.cs-logo img { width: 100%; max-width: 220px; height: auto; object-fit: contain; }
.cs-logo figcaption strong { display: block; font-size: 1.05rem; font-weight: 800; color: var(--navy); }
.cs-logo figcaption span { display: block; margin-top: .2rem; font-size: .85rem; font-style: italic; color: var(--slate); }
.cs-award { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 9999px; background: var(--accent-soft); font-size: .78rem; font-weight: 700; line-height: 1.3; color: #B54708; }
.cs-award svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; }
.pg-sumcard svg.cs-ico { fill: none; stroke: var(--brand); }
.cs-mods { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8rem; color: var(--mute); }
.cs-mods > span { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; }
.cs-mods a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 9999px; border: 1px solid var(--brand-3); background: var(--brand-tint); font-weight: 700; color: var(--brand); transition: background .15s, border-color .15s; }
.cs-mods a:hover { background: #fff; border-color: var(--brand); }
.cs-mods a svg { width: 15px; height: 15px; stroke: currentColor; }
.cs-quote blockquote p + p { margin-top: .75rem; }
.cs-depos { margin-top: 1.25rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .cs-depos { grid-template-columns: repeat(2, 1fr); } }
.cs-depo { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem; background: #fff; }
.cs-depo blockquote { font-size: .95rem; line-height: 1.65; color: var(--ink); }
.cs-depo figcaption { display: flex; align-items: center; gap: .75rem; }
.cs-depo img { width: 44px; height: 44px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; }
.cs-depo figcaption span { font-size: .8rem; line-height: 1.35; color: var(--mute); }
.cs-depo figcaption strong { display: block; font-size: .9rem; color: var(--navy); }

/* Página de módulo: a lista de módulos corre com a página; o índice e o
   cartão de demonstração ficam colados por baixo dela. */
@media (min-width: 1024px) {
  .pg-layout-mod > .pg-aside { position: static; max-height: none; overflow: visible; align-self: stretch; }
  .pg-sticky { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1rem; }
}
.pg-cta + .pg-block { margin-top: 3.5rem; }

/* Itens da grelha podem encolher: sem isto a faixa de módulos (overflow-x)
   alargava a coluna e a página inteira deslizava na horizontal. */
.pg-layout > * { min-width: 0; }

/* Página Sobre (/sobre/, /en/about/): links em texto corrido e lista de
   factos da empresa (credenciais e contactos). */
.ab-content p a, .ab-facts a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.ab-content p a:hover, .ab-facts a:hover { color: var(--brand-2); }
.ab-facts { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.ab-facts > div { display: grid; gap: .15rem; padding: .9rem 1.1rem; }
.ab-facts > div + div { border-top: 1px solid var(--line); }
@media (min-width: 640px) { .ab-facts > div { grid-template-columns: 12rem 1fr; gap: 1rem; align-items: baseline; } }
.ab-facts dt { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.ab-facts dd { font-size: .95rem; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- Página "melhor sistema" (bm-): bloco "No Escola360" e tabela
   comparativa de cinco colunas com a coluna do Escola360 em destaque ---------- */
.article-content .bm-nos { margin: -.35rem 0 1.75rem; padding: .85rem 1.1rem; border-radius: 12px; background: var(--soft); border-left: 3px solid var(--brand); font-size: 1rem; color: var(--ink); }
.gd-table.bm-wide table { min-width: 620px; font-size: .84rem; }
.gd-table.bm-wide th, .gd-table.bm-wide td { padding: .55rem .6rem; }
.gd-table.bm-wide tbody th { white-space: normal; }
@media (min-width: 640px) { .ab-content .pg-related { grid-template-columns: repeat(2, 1fr); } }
.gd-table td.bm-col, .gd-table thead th.bm-col { background: var(--brand-tint); color: var(--navy); font-weight: 600; }