@charset "UTF-8";

/* ===================== VARIÁVEIS ===================== */
:root{
  --cor0:#F7F9FE;          /* fundo dos cards um pouco mais claro */
  --cor1:#2E58A2;
  --cor6:#EFBA32;
  --cor8:black;          /* texto principal (alto contraste) *//*#0B1B2B*/
  --cor9:#0068B5;
  --fonte-destaque:'Chakra Petch',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --spacing-xs:.5rem;
  --spacing-sm:.75rem;
  --spacing-md:1rem;
  --spacing-lg:1.5rem;
  --radius:.625rem;

  --shadow:0 0 0 1px rgba(2,6,23,.06), 0 6px 18px rgba(2,6,23,.08);
  --transition:color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* ===================== RESET ===================== */
*{ margin:0; padding:0; box-sizing:border-box }

/* ===================== BASE TIPOGRÁFICA ===================== */
html{
  font-family:var(--fonte-destaque);
  /* base maior para leitura, sem “encolher” demais no mobile */
  font-size:clamp(15px, 2.2vw, 17px);

  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  font-synthesis-style:none;
  font-kerning:normal;
  font-optical-sizing:auto;
}
body{
  background:#EFF3F9;      /* neutro, melhora contraste geral */
  color:var(--cor8);
  margin-top:4rem;
}

/* Largura confortável de leitura */
main{
  width:min(92%, 980px);
  margin:69px auto 0;
}
header{ width:100%; max-width:980px; margin:0 auto }

/* Faixa topo */
.capitulos_apostilha{
  border:1px solid rgba(2,6,23,.12);
  border-radius:var(--radius);
  background:var(--cor6);
  text-align:center;
  padding:var(--spacing-sm);
  box-shadow:var(--shadow);
}

/* Linha OSTENSIVO / rodapé */
.ostensivo_apostilha{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:.75rem; padding:var(--spacing-sm);
  width:100%; max-width:980px; margin:0 auto; color:var(--cor8);
}
.ostensivo_apostilha[role="contentinfo"]{ margin-top:var(--spacing-md) }

/* Seções (cards) */
section{
  width:100%;
  max-width:880px;
  margin:var(--spacing-sm) auto;
  background:var(--cor0);
  border-radius:var(--radius);
  padding:var(--spacing-lg);
  box-shadow:var(--shadow);
}

/* Títulos — maiores e com leve espaçamento de letras */
h1{
  font-weight:700;
  font-size:clamp(1.25rem, 3.6vw, 1.6rem);
  letter-spacing:.2px;
  margin:var(--spacing-md) 0 var(--spacing-sm);
  color:var(--cor8);
}
h2{
  font-weight:700;
  font-size:clamp(1.05rem, 3.2vw, 1.3rem);
  letter-spacing:.2px;
  margin:var(--spacing-md) 0 var(--spacing-sm);
  color:var(--cor8);
}

/* Parágrafos — linha alta, largura máxima, hifenização em pt-BR */
p{
  line-height:1.95;
  text-align:justify;
  margin:.6rem var(--spacing-md);
  font-size:clamp(1rem, 2.4vw, 1.075rem);
  letter-spacing:.15px;
  word-spacing:.6px;
  max-width:75ch;          /* controla o comprimento da linha */
  color:var(--cor8);
  hyphens:auto;            /* requer lang="pt-BR" no HTML (você já usa) */
  text-indent: 40px;
}

/* Listas de incisos/alíneas */
.incisos{ margin:.25rem var(--spacing-md); padding-left:1rem }
.alineas{ padding-left:1.25rem }

/* Bloco azul (conteúdo) com contraste melhor */
.fundoAzul-container{
  background:#DCE7F6;               /* um tom acima para contraste */
  border:1px solid rgba(2,6,23,.12);
  border-radius:var(--radius);
  padding:var(--spacing-md);
  color:var(--cor8);
}
.fundoAzul-container p{ margin:.5rem auto; }

/* Áudio centralizado */
.audio-container{ text-align:center; margin:.5rem 0; }

/* Imagens responsivas */
.fundoAzul-container img{
  display:block; max-width:100%; height:auto; margin:.5rem auto;
}

/*li*/
/* ===================== INCISOS (I - , II - , ...) ===================== */
ol.incisos{
  margin: .5rem 1.25rem 1rem;
  padding: 0;
  list-style: none;          /* remove marcadores nativos */
  counter-reset: inciso;     /* inicia o contador */
}

ol.incisos > li{
  counter-increment: inciso; 
  position: relative;
  /* largura da “coluna” do marcador (ajuste fino pela var) */
  --marker-w: 3.2rem;
  padding-left: calc(var(--marker-w) + .25rem);
  margin: .35rem 0;
  line-height: 1.85;
  text-align: justify;
}

ol.incisos > li::before{
  content: counter(inciso, upper-roman) " - ";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--marker-w);
  text-align: right;         /* alinha numerais à direita */
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--cor8, #0B1B2B);
}

/* Variante: usar números (1., 2., 3.) quando quiser */
ol.incisos[data-style="decimal"] > li::before{
  content: counter(inciso, decimal) ". ";
}

/* Variante compacta (menos espaçamento) */
ol.incisos.compacto > li{
  margin: .25rem 0;
  line-height: 1.7;
}

/**/
p.assinatura{
  text-align:center;
}
/*FIM*/

/* Responsivo: reduz a coluna do marcador em telas menores */
@media (max-width: 480px){
  ol.incisos > li{ --marker-w: 2.4rem; }
}

/*FIM*/



/* ===================== RESPONSIVO ===================== */
@media (min-width:1400px){
  main, section, header, .ostensivo_apostilha{ max-width:1160px }
}
@media (max-width:920px){
  section{ max-width:94%; padding:var(--spacing-md) }
}
@media (max-width:768px){
  body{ margin-top:3rem }
  main{ width:95% }
  h1{ font-size:clamp(1.15rem, 3.5vw, 1.4rem) }
  h2{ font-size:clamp(1rem, 3.1vw, 1.22rem) }
  p { font-size:clamp(.98rem, 2.8vw, 1.05rem); margin:.5rem var(--spacing-sm) }
  .incisos{ padding-left:.75rem } .alineas{ padding-left:.9rem }
}
@media (max-width:480px){
  html{ font-size:clamp(14px, 3.4vw, 16px) }
  body{ margin-top:2.5rem }
  main{ width:98% }
  section{ padding:.85rem }
  p{ margin:.45rem var(--spacing-sm); max-width: 72ch }
}
@media (max-width:320px){
  main, section{ width:100%; margin:0 }
  p{ margin:.4rem var(--spacing-xs) }
  .fundoAzul-container{ padding:.75rem }
}