/* Páginas internas de conteúdo (soluções, consultoria, IA, como trabalhamos...)
   Usa os tokens de style.css. O acordeão de FAQ fica só em style.css. */

.page-hero{padding:clamp(40px,6vw,76px) 0 clamp(36px,5vw,60px);background:transparent;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(29px,3.4vw,44px);margin-bottom:18px;max-width:26ch}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:22px}
.breadcrumb a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--line)}
.breadcrumb a:hover{border-color:var(--ink)}
.page-hero p.lead{max-width:700px;font-size:17px;color:var(--muted);margin:0 0 14px}

.article{padding:clamp(40px,6vw,72px) 0 var(--section-y)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(40px,6vw,80px);align-items:start}
.article-body h2{margin-top:48px;font-size:clamp(22px,2.1vw,28px)}
.article-body h2:first-child{margin-top:0}
.article-body h3{margin-top:30px;color:var(--ink);font-size:17px}
.article-body p{color:var(--text);font-size:16.5px;line-height:1.75;margin:0 0 20px;max-width:68ch}
.article-body ul{margin:0 0 20px;padding-left:22px;color:var(--text);font-size:16.5px;line-height:1.75;max-width:68ch}
.article-body li{margin-bottom:8px}
.article-body strong{color:var(--ink)}
.article-body a:not(.btn){color:var(--green-dark);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness var(--dur) var(--ease)}
.article-body a:not(.btn):hover{text-decoration-thickness:2px}
/* Links "Saiba mais…" dentro do texto já têm sublinhado: sem a borda inferior de .section-more, que duplicava a linha */
.article-body .section-more{border-bottom:0;padding-bottom:0}

/* Barra lateral: fio no topo em vez de cartão */
.side-card{background:transparent;border:0;border-top:1px solid var(--ink);border-radius:0;padding:22px 0 0;position:sticky;top:calc(var(--header-h) + 24px)}
.side-card h3{margin:0 0 16px;font-family:var(--font-sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.side-card ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:0}
.side-card ul li{border-bottom:1px solid var(--line-soft)}
.side-card ul li a{display:flex;align-items:center;gap:10px;padding:12px 0;font-size:14.5px;font-weight:500;color:var(--ink);transition:color var(--dur) var(--ease)}
.side-card ul li a:hover{color:var(--green-dark)}
.side-card ul li svg{width:16px;height:16px;color:var(--green);flex:none;transition:transform var(--dur) var(--ease)}
.side-card ul li a:hover svg{transform:translateX(3px)}
.side-card .btn{width:100%}

.article-grid>*{min-width:0}
@media(max-width:900px){
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .side-card{position:static}
}

/* Destaque de produto próprio (badge logo no hero) */
.product-badge{display:flex;align-items:flex-start;gap:12px;max-width:720px;margin:22px 0 0;padding:16px 18px;background:var(--green-tint);border:0;border-left:3px solid var(--green);border-radius:var(--r-s);color:var(--green-dark);font-size:14.5px;line-height:1.55}
.product-badge svg{width:20px;height:20px;flex:none;margin-top:1px}
.product-badge span{flex:1;min-width:0}
.product-badge strong{color:var(--ink)}
.page-hero-note{max-width:720px;margin:16px 0 0;color:var(--muted);font-size:14px}

/* Dores / perguntas comuns */
.pains-section{background:var(--paper-2)}
.pains-list{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:0;max-width:820px;border-top:1px solid var(--ink)}
.pains-list li{position:relative;padding:18px 0 18px 40px;border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--font-serif);font-size:20px;font-weight:500;line-height:1.35}
.pains-list li::before{content:"?";position:absolute;left:0;top:19px;width:24px;height:24px;border:1px solid var(--green);border-radius:50%;color:var(--green-dark);font-family:var(--font-sans);font-size:12px;font-weight:700;display:grid;place-items:center}
.pains-transition{max-width:820px;color:var(--text);font-size:16.5px;line-height:1.75;margin:0}
.pains-transition strong{color:var(--ink)}
/* Variante usada ANTES da section-heading (estatísticas de contexto/urgência,
   citando fonte real — nunca inventada), em vez de depois da lista de dores */
.threat-stats-intro{margin:0 0 40px;padding-bottom:28px;border-bottom:1px solid var(--line)}
/* Variante usada DEPOIS de uma lista (.diff-list), que não tem margem
   inferior própria — sem isso o parágrafo cola no último item da lista */
.compare-note{margin-top:24px}

/* Grade de recursos (14 benefícios): linhas em 3 colunas */
.features-grid{grid-template-columns:repeat(3,1fr);column-gap:40px}
@media(max-width:900px){.features-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.features-grid{grid-template-columns:1fr}}

/* Diferenciais */
.diff-list{list-style:none;margin:0;padding:0;display:grid;gap:16px;max-width:820px}
.diff-list li{color:var(--text);font-size:16.5px;line-height:1.7;padding-left:26px;position:relative}
.diff-list li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;background:var(--green)}
.diff-list strong{color:var(--ink)}

/* Planos */
.plans-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:0 auto}
.plan-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:32px;display:flex;flex-direction:column}
.plan-card--featured{border-color:var(--ink);box-shadow:var(--shadow)}
.plan-badge{position:absolute;top:-12px;left:32px;background:var(--ink);color:var(--on-dark);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-s)}
.plan-card h3{margin-bottom:4px;font-family:var(--font-serif);font-size:26px;font-weight:500}
.plan-tagline{color:var(--green-dark);font-weight:600;font-size:13.5px;margin:0 0 14px}
.plan-card>p{color:var(--muted);font-size:15px;line-height:1.6;margin:0 0 18px}
.plan-card ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;flex:1}
.plan-card ul li{position:relative;padding-left:26px;color:var(--text);font-size:14.5px;font-weight:500}
.plan-card ul li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:10px;background:var(--green-tint);border:1px solid var(--green)}
.plan-card .btn{width:100%}
@media(max-width:720px){.plans-grid{grid-template-columns:1fr}}

/* Tabelas de comparação nas páginas de serviço (rolam na horizontal no celular) */
.table-wrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55;color:var(--text);min-width:520px}
.table-wrap th,.table-wrap td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.table-wrap thead th{background:var(--paper-2);color:var(--ink);font-weight:600;font-size:13px;letter-spacing:.04em}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody td:first-child{font-weight:600;color:var(--ink)}

/* Gravura em traço no hero das páginas de serviço (SVG sem fundo). Some em telas
   menores: ali o texto ocupa a largura toda e a imagem só empurraria o conteúdo. */
.page-hero--art .container{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:clamp(24px,4vw,56px)}
.page-hero--art .container>*{grid-column:1}
.page-hero--art .eyebrow{justify-self:start}
.page-hero--art .container>.page-hero__art{grid-column:2;grid-row:1 / span 8;align-self:center;justify-self:end;width:100%;max-width:440px;height:auto}
@media (max-width:960px){.page-hero--art .container{display:block}.page-hero__art{display:none}}

.lead-list{display:flex;flex-wrap:wrap;gap:8px 20px;margin:4px 0 0;padding:0;list-style:none;font-size:15px}
.lead-list a{color:var(--ink);font-weight:500;border-bottom:1px solid var(--line)}
.lead-list a:hover{border-color:var(--ink)}

.threat-stats-intro a{color:var(--green-dark);border-bottom:1px solid currentColor}