/* ==========================================================================
   Páginas por assunto (Fase 3) — modelo compartilhado
   Usa os tokens de styles.css. Leitura longa: coluna de ~68 caracteres,
   alinhamento à esquerda, hierarquia clara e contraste AA.
   ========================================================================== */

.pg-header {
  background: var(--bg-dark-deep);
  border-bottom: 1px solid var(--border-gold-subtle);
}
.pg-header .pg-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.pg-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-light);
  text-decoration: none;
  font-family: var(--font-heading);
  letter-spacing: 0.05em;
  font-size: 0.95rem;
}
.pg-brand img { height: 40px; width: auto; }
.pg-brand small { display: block; font-family: var(--font-body); letter-spacing: 0.04em; font-size: 0.72rem; color: var(--color-gold); }
.pg-header-cta { display: inline-flex; }

.pg-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Topo da página */
.pg-hero {
  background: var(--bg-dark);
  color: var(--text-light);
  padding: 40px 0 44px;
}
.pg-breadcrumb { font-size: 0.85rem; color: var(--text-light-muted); margin-bottom: 18px; }
.pg-breadcrumb a { color: var(--color-gold); text-decoration: none; }
.pg-breadcrumb a:hover { text-decoration: underline; }
.pg-breadcrumb span[aria-hidden] { margin: 0 6px; }
.pg-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  color: var(--text-light);
  margin-bottom: 18px;
  max-width: 22ch;
}
.pg-lead {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-light-muted);
  max-width: 64ch;
}
.pg-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Corpo: artigo + índice lateral */
.pg-body { background: var(--bg-light); padding: 48px 0 72px; }
.pg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
  align-items: start;
}
.pg-article { max-width: 68ch; color: var(--text-main); font-size: 1.02rem; line-height: 1.75; }
.pg-article > section { scroll-margin-top: 90px; }
.pg-article > section + section { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--border-light); }
.pg-article h2 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  color: var(--bg-dark);
  margin-bottom: 14px;
  line-height: 1.25;
}
.pg-article h3 { font-size: 1.05rem; color: var(--bg-dark); margin: 22px 0 8px; }
.pg-article p { margin-bottom: 14px; color: #3A434B; }
.pg-article a { color: var(--color-gold-text); font-weight: 600; }
.pg-article strong { color: var(--bg-dark); }

.pg-list { list-style: none; margin: 8px 0 18px; display: grid; gap: 10px; }
.pg-list li { position: relative; padding-left: 26px; color: #3A434B; }
.pg-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--color-gold-dark);
  transform: rotate(45deg);
}
.pg-list--no li::before { background: #B4BAC0; }

/* Etapas numeradas (é uma sequência de verdade) */
.pg-steps { list-style: none; counter-reset: passo; margin: 12px 0 8px; display: grid; gap: 14px; }
.pg-steps li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.pg-steps li::before {
  content: counter(passo);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-dark);
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-weight: 700;
}
.pg-steps strong { display: block; margin-bottom: 2px; }
.pg-steps span { color: #4A545D; font-size: 0.95rem; }

/* Documentos em colunas */
.pg-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 10px; }
.pg-docs > div { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 18px 20px; }
.pg-docs h3 { margin-top: 0; font-size: 0.98rem; }
.pg-docs .pg-list { margin: 0; gap: 7px; font-size: 0.93rem; }

/* Nota de destaque (informação legal) */
.pg-note {
  background: #FBF7EA;
  border-left: 3px solid var(--color-gold-dark);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 0.95rem;
  color: #3A434B;
}

/* Perguntas frequentes */
.pg-faq details {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0 18px;
  margin-bottom: 10px;
}
.pg-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 28px 16px 0;
  font-weight: 700;
  color: var(--bg-dark);
  position: relative;
  min-height: 44px;
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--color-gold-text);
}
.pg-faq details[open] summary::after { content: "–"; }
.pg-faq details p { padding-bottom: 16px; margin: 0; }

/* Chamada para contato */
.pg-cta {
  margin-top: 48px;
  background: var(--bg-dark);
  color: var(--text-light);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.pg-cta h2 { color: var(--text-light); font-size: 1.3rem; margin-bottom: 8px; }
.pg-cta p { color: var(--text-light-muted); margin-bottom: 18px; }
.pg-cta .pg-hero-actions { margin-top: 0; }

.pg-meta { margin-top: 36px; font-size: 0.85rem; color: #5E6973; border-top: 1px solid var(--border-light); padding-top: 16px; }
.pg-meta a { color: var(--color-gold-text); }

/* Índice lateral */
.pg-toc {
  position: sticky;
  top: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  font-size: 0.9rem;
}
.pg-toc p { font-weight: 700; color: var(--bg-dark); margin-bottom: 10px; }
.pg-toc ol { list-style: none; display: grid; gap: 8px; }
.pg-toc a { color: #4A545D; text-decoration: none; }
.pg-toc a:hover { color: var(--color-gold-text); text-decoration: underline; }

/* Rodapé enxuto */
.pg-footer { background: var(--bg-dark-deep); color: #A3A9AE; padding: 32px 0; font-size: 0.88rem; }
.pg-footer .pg-wrap { display: grid; gap: 10px; }
.pg-footer a { color: var(--color-gold); }
.pg-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }

@media (max-width: 900px) {
  .pg-layout { grid-template-columns: 1fr; }
  .pg-toc { display: none; }
}
@media (max-width: 768px) {
  .pg-header-cta { display: none; }
  .pg-hero { padding: 28px 0 32px; }
  .pg-hero-actions .btn { width: 100%; }
  .pg-body { padding: 32px 0 56px; }
  .pg-article { font-size: 1rem; }
  .pg-cta { padding: 22px 18px; }
}

/* Botão contornado sobre fundo escuro nestas páginas */
.pg-header .btn-outline-gold,
.pg-hero .btn-outline-gold,
.pg-cta .btn-outline-gold,
.nf .btn-outline-gold { color: var(--color-gold); border-color: var(--color-gold); }
.pg-header .btn-outline-gold:hover,
.pg-hero .btn-outline-gold:hover,
.pg-cta .btn-outline-gold:hover,
.nf .btn-outline-gold:hover { color: var(--bg-dark); background: var(--color-gold); }
.pg-article .btn-whatsapp { color: var(--color-whatsapp-text); }
.pg-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Carrossel editorial (design system) — o mesmo slide serve ao site e ao Instagram.
   Formato 4:5 (1080 × 1350 na exportação). Tamanhos em cqw: o slide escala inteiro.
   Tipos: .slide--capa (escuro), .slide--texto (claro), .slide--fim (escuro).
   ========================================================================== */
.carrossel { margin: 8px 0 0; }
.carrossel-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.carrossel-cabecalho p { margin: 0; font-size: 0.9rem; color: #5E6973; }
.carrossel-trilho {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 340px);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 14px;
  margin: 0;
  scrollbar-width: thin;
}
.carrossel-trilho:focus-visible { outline: 2px solid var(--color-gold-dark); outline-offset: 4px; border-radius: 12px; }
.carrossel-controles { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.carrossel-controles button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-light); background: var(--bg-card);
  color: var(--bg-dark); font-size: 1.1rem; cursor: pointer;
}
.carrossel-controles button:hover { border-color: var(--color-gold-dark); color: var(--color-gold-text); }
.carrossel-controles button:disabled { opacity: 0.35; cursor: default; }
.carrossel-contador { font-size: 0.88rem; color: #5E6973; min-width: 4ch; }

.slide {
  scroll-snap-align: start;
  container-type: inline-size;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
}
.slide-in { height: 100%; display: flex; flex-direction: column; padding: 8cqw 8cqw 7cqw; }
.slide--capa, .slide--fim { background: #252C32; color: #FEFEFE; }
.slide--capa::after, .slide--fim::after {
  content: ""; position: absolute; inset: 3.2cqw; border: 1px solid rgba(241, 211, 95, 0.35); border-radius: 1.4cqw; pointer-events: none;
}
.slide--texto { background: #F8F9FA; color: #252C32; border: 1px solid var(--border-light); }

.slide-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; }
.slide-topo img { width: 9cqw; height: auto; }
.slide-num { font-size: 3.4cqw; letter-spacing: 0.08em; color: #A3A9AE; }
.slide--texto .slide-num { color: #5E6973; }

.slide-rotulo { font-size: 3.6cqw; font-weight: 600; color: #F1D35F; margin: 0 0 3cqw; }
.slide--texto .slide-rotulo { color: #7A6428; }
.slide h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 8.6cqw;
  line-height: 1.12;
  margin: 0 0 4cqw;
  letter-spacing: 0.005em;
  color: inherit;
  text-wrap: balance;
}
.slide--texto h3 { font-size: 7cqw; }
.slide p { font-size: 4.3cqw; line-height: 1.5; margin: 0 0 3cqw; color: inherit; opacity: 0.92; }
.slide ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.6cqw; }
.slide li { position: relative; padding-left: 5.5cqw; font-size: 4.2cqw; line-height: 1.42; }
.slide li::before { content: ""; position: absolute; left: 0.6cqw; top: 0.62em; width: 2cqw; height: 2cqw; background: #C6A84E; transform: rotate(45deg); }
.slide strong { font-weight: 700; }

.slide-rodape {
  margin-top: auto;
  padding-top: 4cqw;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 3cqw;
  font-size: 3cqw; line-height: 1.35; color: #A3A9AE;
}
.slide--texto .slide-rodape { color: #5E6973; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.slide-rodape strong { color: inherit; font-weight: 700; }
.slide--capa .slide-rodape strong, .slide--fim .slide-rodape strong { color: #F1D35F; }

/* Exportação 1080 × 1350 (scripts/exportar_carrosseis.py) */
.carrossel--export .carrossel-trilho { grid-auto-columns: 1080px; overflow: visible; gap: 40px; }
.carrossel--export .slide { border-radius: 0; box-shadow: none; border: 0; width: 1080px; height: 1350px; aspect-ratio: auto; }
.slide strong { color: inherit; }
.slide--capa strong, .slide--fim strong { color: #F1D35F; }
.carrossel h2 { margin-bottom: 6px; }
.slide .slide-rotulo { color: #F1D35F; }
.slide.slide--texto .slide-rotulo { color: #7A6428; }

/* ==========================================================================
   Fase 4 (29/09/2026) — páginas de família: revisão visível e base legal
   ========================================================================== */
.pg-revisao { margin-top: 14px; font-size: 0.88rem; color: var(--text-light-muted); }
.pg-base-legal p { font-size: 0.92rem; color: #5E6973; }
.pg-base-legal .pg-list { font-size: 0.93rem; gap: 8px; }
.pg-base-legal a { overflow-wrap: anywhere; }

/* ==========================================================================
   Fase 5 (30/09/2026) — página central de Família e página Sobre
   ========================================================================== */
.pg-revisao a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 3px; }
.pg-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 12px 0 8px; }
.pg-cards > li { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 18px 20px; display: flex; flex-direction: column; }
.pg-cards h3 { margin: 0 0 6px; font-size: 1.02rem; }
.pg-cards p { font-size: 0.93rem; margin-bottom: 10px; }
.pg-cards a.pg-card-link { margin-top: auto; }
.pg-cards > li.pg-card--discreto { background: transparent; border-style: dashed; }
.pg-formacao { list-style: none; display: grid; gap: 12px; margin: 10px 0 18px; }
.pg-formacao li { background: var(--bg-card); border: 1px solid var(--border-light); border-left: 3px solid var(--color-gold-dark); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 14px 18px; }
.pg-formacao strong { display: block; }
.pg-formacao span { font-size: 0.93rem; color: #4A545D; }
.pg-foto { margin: 0 0 20px; }

/* ==========================================================================
   Fase 6 (30/09/2026) — guias aprofundados: resumo, checklist, tabela, mitos
   ========================================================================== */
.pg-resumo { background: var(--bg-card); border: 1px solid var(--border-light); border-top: 3px solid var(--color-gold-dark); border-radius: var(--radius-md); padding: 20px 22px 8px; }
.pg-resumo h2 { margin-bottom: 10px; }
.pg-check { list-style: none; margin: 8px 0 18px; display: grid; gap: 9px; }
.pg-check li { position: relative; padding-left: 30px; color: #3A434B; }
.pg-check li::before { content: ""; position: absolute; left: 2px; top: 0.3em; width: 16px; height: 16px; border: 2px solid var(--color-gold-dark); border-radius: 4px; background: var(--bg-card); }
.pg-check-grupo { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 16px 20px 4px; margin-bottom: 12px; }
.pg-check-grupo h3 { margin-top: 0; }
.pg-tabela-wrap { margin: 12px 0 18px; }
.pg-tabela { width: 100%; border-collapse: collapse; font-size: 0.93rem; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; }
.pg-tabela caption { text-align: left; font-size: 0.88rem; color: #5E6973; padding-bottom: 8px; caption-side: top; }
.pg-tabela th, .pg-tabela td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--border-light); line-height: 1.55; }
.pg-tabela thead th { background: var(--bg-dark); color: var(--text-light); font-size: 0.86rem; font-weight: 700; }
.pg-tabela tbody th { color: var(--bg-dark); font-weight: 700; width: 24%; }
.pg-tabela td:last-child { color: #4A545D; font-size: 0.88rem; width: 24%; }
.pg-tabela tr:last-child th, .pg-tabela tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .pg-tabela, .pg-tabela tbody, .pg-tabela tr, .pg-tabela th, .pg-tabela td { display: block; width: 100% !important; }
  .pg-tabela caption { display: block; width: auto; padding: 12px 14px 6px; }
  .pg-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pg-tabela tr { border-bottom: 1px solid var(--border-light); padding: 6px 0; }
  .pg-tabela tbody th, .pg-tabela td { border: 0; padding: 4px 14px; }
  .pg-tabela tbody th { padding-top: 10px; }
  .pg-tabela td::before { content: attr(data-rotulo) ": "; font-weight: 700; color: var(--bg-dark); }
}
.pg-mitos { list-style: none; display: grid; gap: 12px; margin: 12px 0 8px; }
.pg-mitos li { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 16px 18px; }
.pg-mitos .pg-mito { display: block; font-weight: 700; color: var(--bg-dark); margin-bottom: 6px; }
.pg-mitos .pg-selo { display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; margin-right: 8px; vertical-align: 2px; background: #F1E4E4; color: #7A1F1F; }
.pg-mitos .pg-selo--fato { background: #E6F0E8; color: #1F5A2E; }
.pg-mitos p { margin: 0; font-size: 0.95rem; }
.pg-caminhos { list-style: none; display: grid; gap: 10px; margin: 12px 0 8px; }
.pg-caminhos a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); text-decoration: none; color: var(--bg-dark); font-weight: 600; }
.pg-caminhos a:hover { border-color: var(--color-gold-dark); }
.pg-caminhos a span { font-weight: 500; font-size: 0.88rem; color: var(--color-gold-text); white-space: nowrap; }
.pg-caminhos li.pg-caminho--discreto a { background: transparent; border-style: dashed; font-weight: 500; }
@media (max-width: 480px) { .pg-caminhos a { flex-direction: column; align-items: flex-start; gap: 4px; } }

/* ==========================================================================
   Alinhamento e tipografia (30/09)
   Leitura longa: tudo à esquerda, coluna de ~70 caracteres (o "68ch" antigo
   media o algarismo 0 da Plus Jakarta Sans e dava ~90 caracteres por linha).
   ========================================================================== */
.pg-article { max-width: 37rem; }
.pg-lead { max-width: 37rem; }
.pg-revisao, .pg-base-legal p { max-width: 34rem; }
.pg-meta { max-width: 32rem; }
@media (min-width: 901px) {
  .pg-article { font-size: 1.0625rem; }
  .pg-layout { grid-template-columns: minmax(0, 37rem) 260px; gap: 72px; justify-content: start; }
}
.pg-hero h1 { max-width: 24ch; text-wrap: balance; }
.pg-article h2, .pg-article h3, .pg-cta h2 { text-wrap: balance; }
.pg-article p, .pg-article li, .pg-lead { text-wrap: pretty; }

/* Listas e caixas herdam a mesma medida; notas não passam da coluna */
.pg-note, .pg-resumo, .pg-cta { max-width: 100%; }

/* Links da base legal: quebra só se a palavra não couber (antes: "anywhere", que corta em qualquer letra) */
.pg-base-legal a { overflow-wrap: break-word; }

/* Perguntas frequentes: um único ícone (antes o "+" e a seta desenhada se sobrepunham) */
.pg-faq summary { padding-right: 36px; }
.pg-faq summary::after,
.pg-faq details[open] summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  font-size: 0;
  border-right: 2px solid var(--color-gold-text);
  border-bottom: 2px solid var(--color-gold-text);
}
.pg-faq summary::after { transform: translateY(-70%) rotate(45deg); }
.pg-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

/* Cards de caminhos e documentos: conteúdo alinhado ao topo, altura igual na linha */
.pg-docs, .pg-cards { align-items: stretch; }
.pg-steps li > * { min-width: 0; }


@media (max-width: 768px) {
  .pg-hero h1 { max-width: none; }
  .pg-caminhos a { text-wrap: balance; }
}