/* ==========================================================================
   Blog Fortal Executivo — pagina editorial interna

   Molde compartilhado pelas paginas internas: pilares, artigos e /sobre/.
   Carregado junto com home-v2.css (tokens, base, header) e sessao-4.css
   (CTA e footer). Todas as classes levam o prefixo .pg- para nao vazar nem
   receber vazamento de outra folha — ver a colisao do .rodape no CLAUDE.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO EDITORIAL — faixa escura, continua o header fixo
   -------------------------------------------------------------------------- */

.pg-hero {
  background: var(--dark-page);
  color: var(--on-dark);
  padding: calc(var(--header-h) + 44px) 0 56px;
}

.pg-hero .wrap { max-width: 1120px; }

.pg-migalha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.pg-migalha li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--on-dark-3);
}

.pg-migalha li + li::before {
  content: "";
  width: 6px; height: 6px;
  border-top: 1.5px solid var(--on-dark-3);
  border-right: 1.5px solid var(--on-dark-3);
  transform: rotate(45deg);
  opacity: 0.7;
}

.pg-migalha a { color: var(--on-dark-2); }
.pg-migalha a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.pg-migalha [aria-current="page"] { color: var(--on-dark-3); }

.pg-hero .eyebrow { margin-bottom: 20px; }
.pg-hero .eyebrow span { color: var(--on-dark-2); }

.pg-hero h1 {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(32px, 4.4vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--on-dark);
  text-wrap: balance;
}

.pg-lead {
  margin: 22px 0 0;
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--on-dark-2);
}

.pg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

/* bloco de texto, nao flex: em flex, "Atualizado em" e o <time> viravam duas
   colunas separadas quando a linha quebrava no celular */
.pg-meta li {
  display: inline-block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-dark-3);
}

.pg-meta time { white-space: nowrap; }

.pg-meta svg {
  width: 16px; height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  color: var(--accent-on-dark);
}

/* --------------------------------------------------------------------------
   CAPA — atravessa a fronteira entre a faixa escura e a pagina clara
   -------------------------------------------------------------------------- */

.pg-capa {
  background: linear-gradient(180deg, var(--dark-page) 0 50%, var(--surface-page) 50% 100%);
}

.pg-capa .wrap { max-width: 1120px; }

.pg-capa figure { margin: 0; }

.pg-capa img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 16px;
  display: block;
}

.pg-capa figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   CORPO — artigo + indice lateral
   -------------------------------------------------------------------------- */

.pg-corpo {
  background: var(--surface-page);
  padding: 56px 0 88px;
}

.pg-corpo .wrap {
  display: grid;
  grid-template-columns: minmax(0, 720px) 260px;
  justify-content: center;
  gap: 72px;
  align-items: start;
}

/* --- indice ------------------------------------------------------------- */

.pg-indice {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  padding: 22px 22px 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}

.pg-indice-titulo {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.pg-indice ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ind;
}

.pg-indice li { counter-increment: ind; }

.pg-indice a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-secondary);
  transition: color 0.18s ease;
}

.pg-indice a::before {
  content: counter(ind, decimal-leading-zero);
  flex-shrink: 0;
  min-width: 20px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.pg-indice a:hover { color: var(--text-primary); }

/* --- prosa do artigo ------------------------------------------------------ */

.pg-artigo {
  /* corpo de leitura longa: um passo mais escuro que --text-secondary, derivado
     dos tokens existentes (sem criar token global novo) */
  --pg-texto: color-mix(in srgb, var(--text-primary) 80%, var(--text-secondary));
  color: var(--pg-texto);
  font-size: 18px;
  line-height: 1.75;
}

.pg-artigo > :first-child { margin-top: 0; }

.pg-artigo p { margin: 0 0 22px; }

.pg-artigo .pg-abertura {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text-primary);
}

.pg-artigo h2 {
  margin: 64px 0 20px;
  font-size: clamp(25px, 2.5vw, 31px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  scroll-margin-top: calc(var(--header-h) + 28px);
  text-wrap: balance;
}

.pg-artigo h3 {
  margin: 34px 0 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}

.pg-artigo strong { color: var(--text-primary); font-weight: 650; }

.pg-artigo a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

.pg-artigo a:hover { color: var(--accent-strong); }

/* lista com marcador proprio: quadrado vermelho pequeno */
.pg-artigo ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.pg-artigo ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
}

.pg-artigo ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 1px;
}

/* --- passos (fluxo numerado) ---------------------------------------------- */

.pg-artigo ol.pg-passos {
  margin: 8px 0 28px;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.pg-passos li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 22px 56px;
}

/* o fio que liga um passo ao outro */
.pg-passos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: 4px;
  width: 2px;
  background: var(--border-subtle);
}

.pg-passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: var(--surface-card);
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-text);
}

.pg-passos strong {
  display: block;
  font-size: 17px;
  line-height: 1.4;
  padding-top: 5px;
}

.pg-passos span {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  margin-top: 4px;
}

/* --- destaque (sem borda lateral: fundo rebaixado + rotulo) --------------- */

.pg-destaque {
  margin: 30px 0 32px;
  padding: 24px 26px;
  background: var(--surface-sunken);
  border-radius: 14px;
}

.pg-destaque-rotulo {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.pg-destaque p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-primary);
}

/* --- tabela ---------------------------------------------------------------- */

/* a rolagem fica DENTRO do quadro: a pagina nunca ganha scroll horizontal */
.pg-tabela {
  margin: 8px 0 30px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}

.pg-tabela table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.pg-tabela caption {
  caption-side: top;
  padding: 16px 20px 0;
  text-align: left;
  font-size: 13px;
  color: var(--text-muted);
}

.pg-tabela th {
  padding: 14px 20px;
  background: var(--surface-sunken);
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}

.pg-tabela td {
  padding: 14px 20px;
  border-top: 1px solid var(--divisor);
  vertical-align: top;
  color: var(--pg-texto);
}

.pg-tabela td:first-child,
.pg-tabela th[scope="row"] {
  font-weight: 650;
  color: var(--text-primary);
}

.pg-tabela tbody th[scope="row"] {
  padding: 14px 20px;
  background: none;
  border-top: 1px solid var(--divisor);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  vertical-align: top;
}

/* --- checklist --------------------------------------------------------------- */

.pg-artigo ul.pg-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin: 8px 0 28px;
}

.pg-checklist li {
  padding-left: 32px;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

.pg-checklist li::before {
  /* substitui o quadrado vermelho por um check desenhado em CSS */
  left: 0;
  top: 3px;
  width: 20px; height: 20px;
  background: none;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
}

.pg-checklist li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 5px; height: 9px;
  border-right: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(45deg);
}

.pg-checklist strong { display: block; margin-bottom: 2px; }

/* --- chaves (grade de conceitos curtos, vinda dos artigos antigos) --------- */

.pg-artigo ul.pg-chaves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 30px;
}

.pg-artigo ul.pg-chaves li {
  margin: 0;
  padding: 18px 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.pg-artigo ul.pg-chaves li::before { content: none; }

.pg-chaves strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

.pg-chaves span {
  display: block;
  font-size: 15px;
  line-height: 1.55;
}

/* --- citacao ---------------------------------------------------------------
   sem borda lateral (tropo de IA): filete curto em cima e texto maior */
.pg-citacao {
  margin: 36px 0;
  padding: 0;
}

.pg-citacao::before {
  content: "";
  display: block;
  width: 40px; height: 2px;
  margin-bottom: 18px;
  background: var(--accent);
}

.pg-citacao p {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  text-wrap: balance;
}

/* --- corpo simples: artigo curto, sem indice lateral ----------------------- */

.pg-corpo--simples .wrap {
  grid-template-columns: minmax(0, 720px);
}

/* --- FAQ -------------------------------------------------------------------- */

.pg-faq { margin-top: 8px; }

.pg-faq-item {
  padding: 22px 0;
  border-top: 1px solid var(--border-subtle);
}

.pg-faq-item:last-child { border-bottom: 1px solid var(--border-subtle); }

.pg-artigo .pg-faq h3 { margin: 0 0 8px; font-size: 18px; }

.pg-faq p { margin: 0; font-size: 17px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   CONTEUDOS RELACIONADOS — cards so de texto, consistentes entre si
   -------------------------------------------------------------------------- */

.pg-relacionados {
  background: var(--surface-page);
  padding: 0 0 88px;
}

.pg-relacionados .wrap { max-width: 1120px; }

.pg-relacionados-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  padding-top: 48px;
  border-top: 1px solid var(--border-subtle);
}

.pg-relacionados-head .eyebrow { margin: 0; font-size: inherit; font-weight: inherit; }

.pg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.pg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 190px;
  padding: 24px 24px 22px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.pg-card:hover {
  border-color: rgba(229, 35, 40, 0.30);
  box-shadow: 0 18px 40px -28px rgba(26, 29, 34, 0.45);
  transform: translateY(-3px);
}

.pg-card-rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.pg-card h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.pg-card h3 a { color: inherit; }

/* o titulo estica o clique para o card inteiro */
.pg-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.pg-card-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--divisor);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pg-card-seta {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text-secondary);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.pg-card-seta svg { width: 16px; height: 16px; }

.pg-card:hover .pg-card-seta {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   CTA DA PAGINA — reaproveita .cta e .btn-cta de sessao-4.css e acrescenta
   o botao secundario
   -------------------------------------------------------------------------- */

.cta-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.btn-cta-sec {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 19px 26px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  color: var(--on-dark);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.22s ease, border-color 0.22s ease;
}

.btn-cta-sec svg { width: 18px; height: 18px; }

.btn-cta-sec:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 1100px) {
  .pg-corpo .wrap { grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; }
}

/* tablet para baixo: o indice sobe para antes do texto e deixa de ser fixo */
@media (max-width: 900px) {
  .pg-corpo .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pg-indice { position: static; order: -1; }
  .pg-indice ol { columns: 2; column-gap: 28px; }
  .pg-indice li { break-inside: avoid; }
}

@media (max-width: 720px) {
  .pg-hero { padding: calc(var(--header-h) + 28px) 0 40px; }
  .pg-lead { font-size: 16.5px; }
  .pg-meta { margin-top: 22px; gap: 8px 18px; }

  .pg-capa img { border-radius: 12px; aspect-ratio: 4 / 3; }

  .pg-corpo { padding: 36px 0 64px; }

  .pg-indice ol { columns: 1; }

  .pg-artigo { font-size: 17px; }
  .pg-artigo .pg-abertura { font-size: 18.5px; }
  .pg-artigo h2 { margin-top: 48px; }

  .pg-artigo ul.pg-checklist { grid-template-columns: minmax(0, 1fr); }
  .pg-artigo ul.pg-chaves { grid-template-columns: minmax(0, 1fr); }
  .pg-citacao p { font-size: 19px; }

  .pg-passos li { padding-left: 50px; }

  .pg-destaque { padding: 20px; }

  .pg-relacionados { padding-bottom: 64px; }
  .pg-relacionados-head { padding-top: 36px; flex-wrap: wrap; }

  .cta-acoes { width: 100%; }
  .cta-acoes .btn-cta,
  .cta-acoes .btn-cta-sec { width: 100%; justify-content: center; }
}