/* ============================================================================
   Single de post — Figma node 7803:2919 (frame "Desktop", 1440 × 4431,25)
   ----------------------------------------------------------------------------
   Prefixo .sgl-. O header do topo (7803:2920) e o bloco de relacionados
   (8023:1869) reusam blog-hero.php e blog-categoria.php — no Figma são os
   mesmos componentes da listagem, então recriá-los aqui geraria drift.

   Todos os CSS de página são enfileirados globalmente: .sgl- não pode colidir
   com .svc- / .sbr- / .cmp- / .dyn- / .con- / .obs- / .blg-.
   ========================================================================== */

/* ── 1. HERO — node 8023:1657 (1440 × 566,25) ─────────────────────────────── */

/* fills = [PATTERN 7643:1010, #F5F9FF] — o mesmo pattern de bolinhas das
   outras seções: elipse 2×2px, #6B778C a 15%, repetida a cada 16px. */
.sgl-hero {
  display: flex;
  justify-content: center;
  padding: 120px var(--section-px);
  background-color: #f5f9ff;
  background-image: radial-gradient(circle, rgba(107, 119, 140, .15) 1px, transparent 1px);
  background-size: 16px 16px;
}
/* Duas colunas `fill` com gap 56 dentro de 1216 → 580 cada. */
.sgl-hero__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--content-gap);
  align-items: stretch;
  width: 100%;
  max-width: var(--content-w);
}
/* space-between: o título sobe, a linha de autor/data desce. */
.sgl-hero__texto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.sgl-hero__topo { display: flex; flex-direction: column; gap: 16px; }

.sgl-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: 'DM Mono', monospace;
  font-size: 14px;                  /* Body/Tag */
  line-height: 1.5;
  color: #006fcc;                   /* Primary/Dark */
  opacity: .9;
  text-decoration: none;
}
.sgl-tag:hover { opacity: 1; }

.sgl-hero__titulo {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 52px;                  /* Heading/H1 */
  line-height: 1.2;
  color: #0c111d;
}

/* Autor e data 8023:1663 — aqui o Body/p 16 é DM Sans, não Trebuchet.
   É o único lugar da página com essa família; no corpo do artigo volta a ser
   Trebuchet. Conferido nos nós 8023:1666 e 8023:1671. */
.sgl-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #6b778c;                   /* Secondary/Dark */
}
.sgl-meta__grupo { display: flex; align-items: center; gap: 16px; }
.sgl-meta__grupo--data { height: 32px; }
.sgl-meta img { display: block; flex-shrink: 0; }
.sgl-meta__sep { width: 4.38px; height: 4.38px; }

.sgl-hero__media { display: flex; flex-direction: column; gap: 32px; }
.sgl-hero__img {
  display: block;
  width: 100%;
  height: 326.25px;
  object-fit: cover;
  border-radius: 14px;
  background: #98a2b3;
}

/* ── 2. CONTEÚDO — node 8023:1708 (1440 × 2217) ───────────────────────────── */

/* row com gap 112: sidebar fixa em 384, artigo fica com 720 (1216−384−112). */
.sgl-conteudo {
  display: flex;
  justify-content: center;
  padding: 120px var(--section-px);
  background: #fff;
}
.sgl-conteudo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 112px;
  align-items: start;
  width: 100%;
  max-width: var(--content-w);
}
.sgl-artigo { display: flex; flex-direction: column; gap: 40px; }

/* ── Corpo do artigo: é the_content(), então o HTML vem do editor ────────── */
/* Não dá para prever a marcação; o que dá é fixar a tipografia de cada tag
   com os valores do Figma (8023:1711 e as Sections 8023:1712/1715/1718).
   `gap: 40` entre blocos de primeiro nível e 24 dentro de cada seção viram
   margens, porque o editor não produz flex container. */
/* Três espaçamentos diferentes, todos vindos do Figma:
     16 entre parágrafos     (paragraphSpacing dos nós de texto)
     40 antes de um título   (gap do frame "content", 8023:1710)
     24 depois de um título  (gap das "Section", 8023:1712/1715/1718)
   O gap base é 16 e os dois outros saem de margem somada — é o que funciona
   com a saída achatada de `the_content()`, que não tem wrapper por seção. */
.sgl-corpo { display: flex; flex-direction: column; gap: 16px; }
.sgl-corpo > * { margin: 0; }
.sgl-corpo > h2,
.sgl-corpo > h3,
.sgl-corpo > h4 { margin-top: 24px; }
.sgl-corpo > :first-child { margin-top: 0; }
.sgl-corpo p,
.sgl-corpo li {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;                  /* Body/p 16 */
  line-height: 1.5;
  color: #4a5568;                   /* Secondary/Darker */
}
.sgl-corpo h2,
.sgl-corpo h3,
.sgl-corpo h4 {
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  color: #0c111d;                   /* Gray/10 */
}
.sgl-corpo h2 { font-size: 32px; line-height: 1.3; }   /* Heading/H2 */
.sgl-corpo h3 { font-size: 24px; line-height: 1.4; }   /* Heading/H3 */
.sgl-corpo h4 { font-size: 18px; line-height: 1.5; }
.sgl-corpo > h2 + p,
.sgl-corpo > h3 + p,
.sgl-corpo > h4 + p { margin-top: 8px; }
.sgl-corpo ul, .sgl-corpo ol { padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.sgl-corpo a { color: #006fcc; text-decoration: underline; }
.sgl-corpo img,
.sgl-corpo figure img { max-width: 100%; height: auto; border-radius: 14px; display: block; }
.sgl-corpo figure { display: flex; flex-direction: column; gap: 8px; }
.sgl-corpo figcaption {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 14px; line-height: 1.5; color: #6b778c;
}
.sgl-corpo blockquote {
  padding: 24px 32px;
  background: #f5f9ff;
  border-radius: 14px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 18px; line-height: 1.5; color: #0c111d;
}
.sgl-corpo blockquote p { font-size: inherit; color: inherit; }
/* Herdado do `.post-content` que existia antes — o Figma não mostra código,
   mas o editor do WordPress produz <code> e sem estilo ele fica cru. */
.sgl-corpo code {
  padding: 2px 6px;
  background: #f1f4f8;
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
}
.sgl-corpo pre {
  padding: 24px;
  background: #f1f4f8;
  border-radius: 14px;
  overflow-x: auto;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
}
.sgl-corpo pre code { padding: 0; background: none; }

/* Tabelas — o corpo do artigo não tinha; as políticas usam para bases legais
   e cookies de terceiros. Rolagem própria para não empurrar o layout no mobile. */
.sgl-corpo table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.sgl-corpo table th,
.sgl-corpo table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #f1f4f8;
  color: #4a5568;
}
.sgl-corpo table th { font-weight: 700; color: #0c111d; background: #f5f9ff; }
.sgl-corpo table tr:last-child td { border-bottom: 0; }

/* ── Páginas de política ──────────────────────────────────────────────────── */
/* Coluna estreita: texto legal é lido de ponta a ponta, e 1216px de largura
   dariam linhas longas demais para acompanhar. 800 é a medida confortável. */
.pol-conteudo {
  display: flex;
  justify-content: center;
  padding: 120px var(--section-px);
  background: #fff;
}
/* Sumário fixo à esquerda, texto à direita. A coluna de texto fica em 760 —
   linha de leitura confortável; 1216 daria linhas longas demais para um
   documento lido de ponta a ponta. */
.pol-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  width: 100%;
  max-width: var(--content-w);
}
.pol-corpo { max-width: 760px; }

/* `align-items: start` no grid é o que permite o sticky funcionar: com o
   padrão `stretch` o aside teria a altura do conteúdo e não teria para onde
   grudar. */
.pol-sumario { position: sticky; top: 104px; }
.pol-sumario__caixa {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: #f5f9ff;
  border-radius: 14px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.pol-sumario__titulo {
  margin: 0;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #004a8a;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pol-sumario__lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pol;
}
.pol-sumario__lista a {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #4a5568;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.pol-sumario__lista a:hover { background: #e6f4ff; color: #004a8a; }
/* Seção em leitura — o JS marca conforme a rolagem. */
.pol-sumario__lista a.ativo {
  background: #e6f4ff;
  color: #004a8a;
  font-weight: 700;
}
.pol-sumario__irma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #e6f4ff;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #004a8a;
  text-decoration: none;
}
.pol-sumario__irma img { width: 20px; height: 20px; }
.pol-sumario__irma:hover { opacity: .8; }

/* O link do sumário rola até o <h2>; sem isso o título encosta no topo e some
   atrás do header fixo. */
.pol-corpo h2 { scroll-margin-top: 104px; }
.pol-corpo table { display: block; overflow-x: auto; }
.pol-corpo h2 { margin-top: 40px; }
.pol-corpo > :first-child { margin-top: 0; }

/* O aviso de revisão jurídica abre as duas páginas. Fica em destaque de
   propósito: publicar texto legal não revisado é risco para o cliente. */
.pol-aviso {
  padding: 20px 24px;
  background: #fff8e6;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px #f0d9a0;
}
.pol-aviso p {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #6b5518;
}
/* Campos que a empresa precisa preencher. */
.pol-corpo em {
  padding: 1px 6px;
  background: #fff8e6;
  border-radius: 4px;
  font-style: normal;
  color: #8a6d1f;
}
.pol-irmas { display: flex; flex-wrap: wrap; gap: 32px; }

/* ── Rodapé do artigo: compartilhar + autor ─────────────────────────────── */
.sgl-info { display: flex; flex-direction: column; gap: 32px; }

/* share 8023:1722 — altura FIXA de 96px no Figma. */
.sgl-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  height: 96px;
  padding: 32px;
  box-sizing: border-box;
  background: #f5f9ff;
  border-radius: 14px;
}
.sgl-share__titulo {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 18px;                  /* Body/p 18 bold */
  line-height: 1.5;
  color: #0c111d;
}
.sgl-share__redes { display: flex; align-items: center; gap: 16px; }
.sgl-share__redes a { display: block; line-height: 0; transition: transform .2s, opacity .2s; }
.sgl-share__redes img { display: block; width: 32px; height: 32px; }
.sgl-share__redes a:hover { transform: translateY(-2px); opacity: .8; }

/* user info 8023:1731 */
.sgl-autor {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  background: #f5f9ff;
  border-radius: 14px;
}
.sgl-autor__topo { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.sgl-autor__nome {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: #302e33;                   /* não é o Gray/10 das outras seções */
}
.sgl-autor__bio {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #4a5568;
}

/* Link com seta, igual ao .blg-link mas declarado aqui para a single não
   depender da ordem de carregamento de blog.css. */
.sgl-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  border-radius: 14px;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #004a8a;                   /* Primary/Darker */
  text-decoration: none;
  transition: gap .2s cubic-bezier(.2,.7,.3,1), opacity .2s;
}
.sgl-link img { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.sgl-link:hover { gap: 12px; opacity: .85; }

/* ── 3. SIDEBAR — node 8023:1742 (384) ────────────────────────────────────── */

.sgl-side { display: flex; flex-direction: column; gap: 48px; }
.sgl-side__bloco { display: flex; flex-direction: column; gap: 32px; }
.sgl-side__titulo {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 24px;                  /* Heading/H3 */
  line-height: 1.4;
  color: #0c111d;
}

/* Busca 8023:1801 — mesmo campo do blog, mas ocupando a largura toda.
   Stroke interno no Figma: `box-shadow: inset` em vez de `border`, senão
   a caixa sai com 55px em vez de 53. */
.sgl-busca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
  border-radius: 14px;
  box-sizing: border-box;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #0c111d;
  transition: box-shadow .2s;
}
.sgl-busca:hover, .sgl-busca:focus-within { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.sgl-busca img { display: block; flex-shrink: 0; }
.sgl-busca input {
  flex: 1 1 0; min-width: 0;
  border: 0; outline: 0; padding: 0;
  background: transparent; font: inherit; color: inherit;
}
.sgl-busca input::placeholder { color: #0c111d; opacity: 1; }

/* Posts relacionados 8023:1751 — só título e link, sem imagem. */
.sgl-relacionados { display: flex; flex-direction: column; gap: 24px; }
.sgl-relacionado {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.sgl-relacionado__titulo {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #0c111d;
  transition: color .2s;
}
.sgl-relacionado:hover .sgl-relacionado__titulo { color: #006fcc; }

/* CTA da sidebar 8023:1767 — versão compacta do cta-final, mesma arte e
   mesma copy. padding 64 no topo abre espaço para o ornamento branco. */
.sgl-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 32px;
  padding: 64px 40px 40px;
  border-radius: 16px;
  overflow: hidden;
  background: #004a8a;
  isolation: isolate;
}
.sgl-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .4;
  mix-blend-mode: soft-light;
  z-index: -1;
  pointer-events: none;
}
/* Ornamento 8023:1855 — 228,36 × 23, ancorado a 77,82 da esquerda. */
.sgl-cta__shape {
  position: absolute;
  left: 77.82px;
  top: 0;
  width: 228.36px;
  height: 23px;
  pointer-events: none;
}
.sgl-cta__head { display: flex; flex-direction: column; gap: 16px; text-align: center; }
.sgl-cta__titulo {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  color: #fff;
}
.sgl-cta__sub {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #f1f4f8;                   /* Secondary/Lighter */
}
/* O botão aqui é `fill`, não `hug` como no cta-final da home. */
.sgl-cta__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 24px 18px 32px;
  background: #fff;
  border-radius: 14px;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #004a8a;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.sgl-cta__botao img { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.sgl-cta__botao:hover { background: #e6f4ff; }