/* ==========================================================
   Plataforma Sustain — folha de estilo para peças avulsas
   (relatórios, one-pagers, artefatos HTML, e-mails em HTML).
   Identidade aprovada em 08/10/2026 (pranchas em Identidade/manual-2026).
   Cole no <style> da peça ou referencie como arquivo.
   ========================================================== */

:root{
  /* cores da marca */
  --sx-navy:#021B64;          /* nanquim */
  --sx-blue:#163AB8;          /* cobalto */
  --sx-blue-dark:#102C8F;
  --sx-blue-soft:#E8EAF9;     /* névoa */
  --sx-vivo:#3867E7;
  --sx-aguada:#91AEE8;
  --sx-broto:#7DC383;         /* verde em fundo escuro */
  --sx-green:#2E7D32;
  --sx-green-soft:#EAF3EB;
  --sx-text:#1B2140;          /* tinta */
  --sx-muted:#4B5272;         /* grafite */
  --sx-soft:#4B5272;
  --sx-line:#D9DDEE;
  --sx-paper:#F6F7FC;
  /* status */
  --sx-warn:#B8860B;
  --sx-warn-soft:#FFF6D6;
  --sx-danger:#B42318;
  --sx-danger-soft:#FDECEC;
  /* medidas */
  --sx-width:1180px;
  --sx-read:780px;
  --sx-radius:8px;
  --sx-radius-card:12px;
  --sx-shadow:0 1px 2px rgba(2,27,100,.06), 0 18px 40px -20px rgba(2,27,100,.22);
  --sx-font-display:"Bricolage Grotesque", Arial, sans-serif;
  --sx-font-text:"Instrument Sans", Arial, sans-serif;
  --sx-font-dado:"IBM Plex Mono", Consolas, monospace;
}

/* Fontes: no domínio da empresa, servir localmente (LGPD).
   Em peça avulsa, o Google Fonts é aceitável:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Instrument+Sans:wght@400..700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   Arquivos locais prontos: OneDrive/Sustain Tecnologia/site Sustain/Identidade/sistema/fontes/ */

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:var(--sx-font-text);
  font-size:17px;
  line-height:1.65;
  color:var(--sx-text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--sx-font-display); color:var(--sx-navy); font-weight:700; line-height:1.15; text-wrap:balance; margin:0 0 .6em; }
h1{ font-size:clamp(34px,5vw,52px); letter-spacing:-.03em; line-height:1.04; }
h2{ font-size:clamp(28px,3.4vw,38px); letter-spacing:-.025em; line-height:1.08; }
h3{ font-size:21px; letter-spacing:-.005em; }
h4{ font-size:17px; }
p{ margin:0 0 1rem; }
a{ color:var(--sx-blue); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--sx-blue-dark); }
strong{ color:var(--sx-navy); }
small{ font-size:.85rem; color:var(--sx-muted); }

/* ---------- Seções ---------- */
.sx-section{ padding:clamp(56px,8vw,104px) clamp(20px,4vw,32px); }
.sx-section > *{ max-width:var(--sx-width); margin-left:auto; margin-right:auto; }
.sx-section > h2,
.sx-section > p,
.sx-section > ul,
.sx-section > ol{ max-width:var(--sx-read); }
.sx-alt{ background:var(--sx-paper); }
.sx-destaque{ background:linear-gradient(180deg, var(--sx-green-soft), #fff); }
.sx-destaque .sx-eyebrow{ color:var(--sx-green); }

/* topo com a grade de dashboard esmaecida */
.sx-hero{ position:relative; isolation:isolate; overflow:hidden; }
.sx-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(var(--sx-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sx-line) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 75% 35%, #000 10%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 80% at 75% 35%, #000 10%, transparent 75%);
}
.sx-hero img{ filter:drop-shadow(0 28px 48px rgba(2,27,100,.16)); }
/* o logo acompanha o texto, alinhado à esquerda; centralize só se a capa pedir */
.sx-logo{ height:44px; width:auto; display:block; margin-left:0 !important; }

/* ---------- Tipografia de apoio ---------- */
/* etiqueta com o ponto verde: elemento mais reconhecível da marca */
.sx-eyebrow{
  display:flex; align-items:center; gap:.6em;
  font-family:var(--sx-font-dado);
  font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sx-blue);
  margin:0 0 .75rem;
}
.sx-eyebrow::before{
  content:""; flex:none;
  width:9px; height:9px; border-radius:50% 44% 52% 47%;
  background:var(--sx-green);
  box-shadow:0 0 0 4px rgba(46,125,50,.16);
}
.sx-lede{ font-size:clamp(1.05rem,1.4vw,1.22rem); line-height:1.6; color:var(--sx-muted); max-width:58ch; }

/* ---------- Grade e cartões ---------- */
.sx-grid{ display:grid; gap:clamp(24px,4vw,48px); margin-top:2.5rem; }
.sx-grid-2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.sx-grid-3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
/* coluna com traço no topo, que acende em azul */
.sx-col{ border-top:2px solid var(--sx-line); padding-top:22px; transition:border-color .2s ease; }
.sx-col:hover{ border-top-color:var(--sx-blue); }
.sx-col h3{ margin-bottom:.5rem; }
.sx-col p{ color:var(--sx-muted); }
.sx-card{
  background:#fff; border:1px solid var(--sx-line); border-radius:var(--sx-radius-card);
  padding:clamp(20px,3vw,32px); box-shadow:var(--sx-shadow);
}
.sx-card-destaque{ border-top:3px solid var(--sx-blue); }

/* número grande de indicador */
.sx-kpi{ font-family:var(--sx-font-display); font-size:clamp(1.9rem,3vw,2.6rem); font-weight:700; letter-spacing:-.02em; color:var(--sx-navy); line-height:1.1; margin:.2rem 0 .3rem; }
.sx-kpi-label{ font-size:.9rem; color:var(--sx-muted); }
.sx-kpi small, .sx-preco span{ font-size:1rem; font-weight:500; color:var(--sx-muted); }

/* ---------- Listas ---------- */
ul,ol{ padding-left:1.2em; }
li{ margin-bottom:.55em; }
li::marker{ color:var(--sx-blue); }

/* ---------- Botões ---------- */
.sx-btn{
  display:inline-block; text-decoration:none;
  font-family:var(--sx-font-display); font-weight:600; font-size:1rem;
  padding:.85em 1.5em; border-radius:var(--sx-radius);
  background:var(--sx-blue); color:#fff; border:1.5px solid var(--sx-blue);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sx-btn:hover{ background:var(--sx-blue-dark); border-color:var(--sx-blue-dark); color:#fff; }
.sx-btn-outline{ background:transparent; color:var(--sx-navy); border-color:var(--sx-navy); }
.sx-btn-outline:hover{ background:var(--sx-navy); color:#fff; }
.sx-btn:focus-visible{ outline:3px solid #91AEE8; outline-offset:2px; }

/* ---------- Tabelas ---------- */
.sx-tabela{ width:100%; border-collapse:collapse; background:#fff; margin:2rem auto 0; }
.sx-tabela th, .sx-tabela td{ border:0; border-bottom:1px solid var(--sx-line); padding:12px 16px; text-align:left; vertical-align:top; }
.sx-tabela thead th{ font-family:var(--sx-font-display); color:var(--sx-navy); border-bottom:2px solid var(--sx-navy); }
.sx-tabela tbody tr:hover{ background:var(--sx-paper); }
.sx-tabela .num{ text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- Citação / depoimento ---------- */
.sx-quote{ border-left:3px solid var(--sx-blue); margin:0; padding:4px 0 4px 22px; }
.sx-quote p{ font-size:1.05rem; color:var(--sx-navy); }
.sx-quote cite{ display:block; margin-top:.75rem; font-style:normal; font-size:.9rem; font-weight:600; color:var(--sx-muted); }

/* ---------- Status ---------- */
.sx-tag{ display:inline-block; font-size:.8rem; font-weight:600; padding:.2em .7em; border-radius:999px; border:1px solid; }
.sx-ok{ color:#1B5E20; background:var(--sx-green-soft); border-color:var(--sx-green); }
.sx-atencao{ color:#6B4E00; background:var(--sx-warn-soft); border-color:var(--sx-warn); }
.sx-critico{ color:#B42318; background:var(--sx-danger-soft); border-color:var(--sx-danger); }

/* marcador de informação não confirmada — deve continuar visível */
.sx-pendente{
  display:inline-block;
  background:var(--sx-warn-soft); border:1px dashed var(--sx-warn); color:#6B4E00;
  border-radius:6px; padding:1px 6px; font-size:.85rem; line-height:1.45;
}

/* ---------- Imagens e prints do sistema ---------- */
.sx-print img, img.sx-print{
  display:block; max-width:100%; height:auto; margin:0 auto;
  border:1px solid var(--sx-line); border-radius:10px; background:#fff;
  box-shadow:var(--sx-shadow);
}
figcaption{ font-size:.85rem; color:var(--sx-muted); margin-top:.6rem; text-align:center; }

/* ---------- Faixa final ---------- */
.sx-cta{ background:var(--sx-navy); color:#fff; }
.sx-cta h2, .sx-cta h3{ color:#fff; }
.sx-cta p{ color:rgba(255,255,255,.85); }
.sx-cta .sx-btn{ background:#fff; color:var(--sx-navy); border-color:#fff; }
.sx-cta .sx-btn:hover{ background:var(--sx-blue-soft); color:var(--sx-navy); }
.sx-cta .sx-btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.sx-cta .sx-btn-outline:hover{ background:#fff; color:var(--sx-navy); }

/* ---------- Rodapé simples ---------- */
.sx-rodape{ border-top:1px solid var(--sx-line); padding:24px clamp(20px,4vw,32px); font-size:.85rem; color:var(--sx-muted); }
.sx-rodape > *{ max-width:var(--sx-width); margin:0 auto; }

/* ---------- Impressão / PDF ---------- */
@media print{
  body{ font-size:11pt; }
  .sx-section{ padding:18pt 0; break-inside:avoid; }
  .sx-hero::before{ display:none; }
  .sx-card, .sx-print img, img.sx-print{ box-shadow:none; }
  .sx-cta{ background:#fff !important; color:var(--sx-navy) !important; border-top:2px solid var(--sx-navy); }
  .sx-cta h2, .sx-cta p{ color:var(--sx-navy) !important; }
  h2,h3{ break-after:avoid; }
  table, figure{ break-inside:avoid; }
  a{ color:var(--sx-navy); }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}