/*
 * Faixas alternadas e capítulos nos artigos (14/10/2026). Usado com artigo-faixas.js.
 * Só vale quando o script marcou o artigo (data-faixas): sem JavaScript, nada muda.
 * Faixa escura = verde das páginas de consulta (#0C1310); faixa clara = marfim da página.
 * O fundo vai de ponta a ponta da tela sem mudar a largura do texto
 * (box-shadow + clip-path): a coluna de leitura continua a mesma.
 */
:root { --faixas-css: 1; }

.prose[data-faixas] .faixa { padding: 3.25rem 0 2.75rem; margin: 3rem 0 0; }
.prose[data-faixas] .faixa + .faixa { margin-top: 0; }
.prose[data-faixas] .faixa--escura {
  background: #0C1310; color: #E3DDCF;
  box-shadow: 0 0 0 100vmax #0C1310; clip-path: inset(0 -100vmax);
}
.prose[data-faixas] .faixa--clara {
  background: #F5F1E8;
  box-shadow: 0 0 0 100vmax #F5F1E8; clip-path: inset(0 -100vmax);
}
.prose[data-faixas] .faixa > section { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; background: transparent !important; }

/* Selo do capítulo (texto gerado pelo CSS, fora do conteúdo indexável): a sensação de progresso */
.prose[data-faixas] .faixa::before {
  content: attr(data-capitulo); display: block; margin: 0 0 .8rem; padding-left: 46px;
  background: linear-gradient(currentColor, currentColor) left center / 34px 1px no-repeat;
  font-family: 'Cinzel', Georgia, serif; font-size: .74rem; font-weight: 600; font-style: normal;
  letter-spacing: .26em; line-height: 1.4; text-transform: uppercase; color: #8A6E2C;
}
.prose[data-faixas] .faixa--escura::before { color: #D4B266; }

/* H2: abertura de capítulo, maior e com filete dourado */
.prose[data-faixas] .faixa__titulo {
  position: relative; margin-top: 0 !important; margin-bottom: 1.15em !important; padding-bottom: .6em;
  font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.15rem) !important; line-height: 1.22 !important; text-align: left !important;
}
.prose[data-faixas] .faixa__titulo::after { content: ''; position: absolute; left: 0; bottom: 0; width: 84px; height: 2px; background: #C8A24A; }

/* H3 do texto corrido em itálico (o ritmo do advg); H3 de dentro de quadros mantém o estilo do quadro */
.prose[data-faixas] :is(.faixa, .faixa > section) > h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important; font-style: italic; font-weight: 500 !important;
  font-size: clamp(1.38rem, 1.12rem + .6vw, 1.68rem) !important; line-height: 1.26 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  margin-top: 1.8em !important; margin-bottom: .55em !important;
}
.prose[data-faixas] .faixa--clara > h3, .prose[data-faixas] .faixa--clara > section > h3 { color: #2A2418 !important; }
.prose[data-faixas] h3.h3-numerado { display: flex; align-items: baseline; gap: .75rem; }
.prose[data-faixas] .h3-texto { flex: 1 1 auto; min-width: 0; }
.prose[data-faixas] .h3-num {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid #C8A24A;
  font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-size: .82rem; font-weight: 600; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; color: #8A6E2C; background: rgba(200, 162, 74, .1); transform: translateY(-.16em);
}
.prose[data-faixas] .h3-num__ponto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Faixa escura: texto corrido claro ===== */
.prose[data-faixas] .faixa--escura .faixa__titulo { color: #F5F1E8 !important; }
.prose[data-faixas] .faixa--escura > h3, .prose[data-faixas] .faixa--escura > section > h3 { color: #EAD7A4 !important; }
.prose[data-faixas] .faixa--escura > h3 .h3-num { color: #EAD7A4; border-color: rgba(234, 215, 164, .6); background: rgba(234, 215, 164, .08); }
.prose[data-faixas] .faixa--escura > p,
.prose[data-faixas] .faixa--escura > ul > li,
.prose[data-faixas] .faixa--escura > ol > li,
.prose[data-faixas] .faixa--escura > section > p,
.prose[data-faixas] .faixa--escura > section > ul > li,
.prose[data-faixas] .faixa--escura > section > ol > li,
.prose[data-faixas] .faixa--escura > dl,
.prose[data-faixas] .faixa--escura > dl * { color: #E3DDCF !important; }
.prose[data-faixas] .faixa--escura > p :is(strong, b),
.prose[data-faixas] .faixa--escura > :is(ul, ol) :is(strong, b),
.prose[data-faixas] .faixa--escura > section > :is(p, ul, ol) :is(strong, b) { color: #FFFFFF !important; }
.prose[data-faixas] .faixa--escura > p :is(em, i),
.prose[data-faixas] .faixa--escura > :is(ul, ol) :is(em, i) { color: #EDE6D6 !important; }
.prose[data-faixas] .faixa--escura > p a:not(.btn),
.prose[data-faixas] .faixa--escura > :is(ul, ol) a:not(.btn),
.prose[data-faixas] .faixa--escura > section > :is(p, ul, ol) a:not(.btn) { color: #E2C27A !important; text-decoration-color: rgba(226, 194, 122, .55) !important; }
.prose[data-faixas] .faixa--escura > :is(ul, ol) > li::marker { color: #C8A24A; }
.prose[data-faixas] .faixa--escura > figure figcaption, .prose[data-faixas] .faixa--escura > figure figcaption * { color: rgba(245, 241, 232, .78) !important; }
.prose[data-faixas] .faixa--escura > figure figcaption a { color: #E2C27A !important; }
.prose[data-faixas] .faixa--escura > hr { border-color: rgba(200, 162, 74, .35) !important; }

/* Tabela na faixa escura: vira cartão claro, com as cores originais da tabela */
.prose[data-faixas] .faixa--escura table { background: #FBF8F1; color: #2A2418; }

/* FAQ na faixa escura */
.prose[data-faixas] .faixa--escura .faq__item { border-color: rgba(200, 162, 74, .3) !important; }
.prose[data-faixas] .faixa--escura .faq__question { color: #F5F1E8 !important; }
.prose[data-faixas] .faixa--escura .faq__question:hover { color: #E2C27A !important; }
.prose[data-faixas] .faixa--escura .faq__answer-inner,
.prose[data-faixas] .faixa--escura .faq__answer-inner :is(p, li, span) { color: #E3DDCF !important; }
.prose[data-faixas] .faixa--escura .faq__answer-inner :is(strong, b) { color: #FFFFFF !important; }
.prose[data-faixas] .faixa--escura .faq__answer-inner a { color: #E2C27A !important; }

/* Caixas claras (CTA, cartão do autor, quadros, citações) seguem claras e com texto escuro */
.prose[data-faixas] .faixa--escura :is(.inline-cta, .card, .case-box, .tech-box, .autoridade, .pull-quote) { color: #2A2418; }

/* Ajustes da checagem de contraste do script (texto que ficaria ilegível); classe dobrada para vencer as regras acima */
.prose[data-faixas] .faixa .faixa-txt-claro.faixa-txt-claro { color: #E3DDCF !important; }
.prose[data-faixas] .faixa :is(h2, h3, h4, h5, h6, summary, dt, th).faixa-txt-claro.faixa-txt-claro { color: #F2E8CA !important; }
.prose[data-faixas] .faixa :is(strong, b).faixa-txt-claro.faixa-txt-claro { color: #FFFFFF !important; }
.prose[data-faixas] .faixa a.faixa-txt-claro.faixa-txt-claro { color: #E2C27A !important; }
.prose[data-faixas] .faixa .faixa-txt-escuro.faixa-txt-escuro { color: #2A2418 !important; }
.prose[data-faixas] .faixa a.faixa-txt-escuro.faixa-txt-escuro { color: #7A5F22 !important; }

@media (max-width: 760px) {
  .prose[data-faixas] .faixa { padding: 2.4rem 0 2rem; margin-top: 2.25rem; }
  .prose[data-faixas] .faixa__titulo { font-size: 1.38rem !important; }
}

/* Celular e tablet: texto corrido alinhado à esquerda, sem hifenização automática. Justificado em
   coluna estreita abre buracos entre as palavras (no PC o renajud já alinha à esquerda desde a v8). */
@media (max-width: 899px) {
  .prose[data-faixas] > p, .prose[data-faixas] > :is(ul, ol) > li,
  .prose[data-faixas] .faixa > p, .prose[data-faixas] .faixa > :is(ul, ol) > li,
  .prose[data-faixas] .faixa > section > p, .prose[data-faixas] .faixa > section > :is(ul, ol) > li {
    text-align: left !important; hyphens: manual !important; -webkit-hyphens: manual !important;
  }
}