@charset "UTF-8";
/* Importação da fonte Chakra Petch (pesos 400 e 700) */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&display=swap');

/* =========================
   Variáveis e Resets
   ========================= */
:root{
  --cor0:#F4F6FE;
  --cor1:#2E58A2;
  --cor6:#efba32;
  --cor8:#000;
  --cor9:#0068B5;
  --fonte-destaque:'Chakra Petch',sans-serif;

  --spacing-xs:.5rem;
  --spacing-sm:.75rem;
  --spacing-md:1rem;
  --spacing-lg:1.5rem;

  --border-radius:.625rem;
  --font-size-base:1rem;
  --transition:all .3s ease;
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  font-family:var(--fonte-destaque);
  font-size:clamp(14px,2.5vw,16px);
  scroll-behavior:smooth;
}

body{
  background-color:#018dde33;
  margin-top:4rem;
  transition:var(--transition);
}

main{margin:0 auto;width:min(90%,900px)}

header{width:100%;max-width:900px;margin:0 auto}

/* =========================
   Blocos / Seções
   ========================= */
section{
  width:100%;
  max-width:800px;
  margin:var(--spacing-sm) auto;
  background:var(--cor0);
  border-radius:var(--border-radius);
  padding:var(--spacing-lg);
  box-shadow:0 0 10px rgba(0,0,0,.2);
  text-align:justify;
  transition:var(--transition);
}

/* Cabeçalho de capítulos */
.capitulos_apostilha{
  border:2px solid var(--cor8);
  border-radius:var(--border-radius);
  background:var(--cor6);
  width:100%;
  margin:0 auto;
  text-align:center;
  padding:var(--spacing-sm);
}

/* Metadados topo/rodapé */
.ostensivo_apostilha{
  display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:center;
  padding:var(--spacing-sm);
  width:100%;max-width:900px;margin:0 auto;gap:var(--spacing-sm)
}
.ostensivo_apostilha[role="contentinfo"]{margin-top:var(--spacing-md)}

/* =========================
   Tipografia
   ========================= */
h1{
  font-weight:700;
  font-size:clamp(1.2rem,4vw,1.5rem);
  letter-spacing:.5px;
  margin:var(--spacing-md) 0;
}

h2{
  font-weight:700;
  font-size:clamp(1rem,3.5vw,1.25rem);
  margin:var(--spacing-md) 0;
}

h3{
  margin-top:var(--spacing-md);
  margin-bottom:var(--spacing-xs);
  font-size:clamp(.95rem,3vw,1.1rem);
  letter-spacing:2px;
}

p{
  line-height:1.8;
  margin:var(--spacing-sm) var(--spacing-md);
  font-size:clamp(.9rem,2.8vw,1rem);
  text-align:justify;
}

/* =========================
   Listas semânticas
   ========================= */
ol.alineas{
  list-style:none;
  padding-left:0;
  margin:var(--spacing-sm) var(--spacing-md);
}
ol.alineas>li{
  position:relative;
  padding-left:28px;
  margin-bottom:.35rem;
  line-height:1.8;
}
ol.alineas>li::before{
  content:"➡️";
  position:absolute;left:0;top:0;
}
ol.alineas ol.numeros{
  list-style:lower-alpha;
  margin:.35rem 0;
  padding-left:1.25rem;
}
ol.alineas ol.numeros>li{margin-bottom:.3rem}

/* =========================
   Container Azul
   ========================= */
.fundoAzul-container{
  background:#C8E3F8;
  border:1px solid var(--cor8);
  border-radius:var(--border-radius);
  padding:var(--spacing-md);
  padding-top:25px;
  padding-right:var(--spacing-md); /* corrigido: valor faltante */
}

/* =========================
   Figuras
   ========================= */
img{border-radius:10px}
.figura{
  display:block;
  max-width:100%;
  height:auto;
  margin:var(--spacing-sm) auto;
}
.fundoAzul-container img{
  max-width:100%;
  height:auto;
  margin:var(--spacing-sm) auto;
  display:block;
}
.figuras-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--spacing-sm);
  margin:var(--spacing-sm) 0;
}

/* =========================
   Responsivo
   ========================= */
@media (min-width:1400px){
  main,section,header,.ostensivo_apostilha{max-width:1200px}
}
@media (min-width:1000px){
  main,section,header,.ostensivo_apostilha{max-width:1000px}
}
@media (max-width:768px){
  body{margin-top:3rem}
  main{width:95%}
  section{padding:var(--spacing-md);max-width:95%}
  h1{font-size:clamp(1.1rem,3.5vw,1.3rem)}
  h2{font-size:clamp(.95rem,3vw,1.1rem)}
  p{margin:var(--spacing-sm);font-size:clamp(.85rem,2.5vw,.95rem)}
  ol.alineas{padding-left:1rem;margin-left:var(--spacing-sm)}
  ol.alineas ol.numeros{padding-left:1rem}
}
@media (max-width:480px){
  html{font-size:clamp(12px,3.5vw,14px)}
  body{margin-top:2.5rem}
  main{width:98%}
  section{padding:var(--spacing-sm)}
  h1{font-size:clamp(1rem,3.2vw,1.1rem)}
  h2{font-size:clamp(.9rem,2.8vw,1rem)}
  p{margin:var(--spacing-xs) var(--spacing-sm);font-size:clamp(.8rem,2.3vw,.9rem)}
  .ostensivo_apostilha,
  .ostensivo_apostilha[role="contentinfo"]{justify-content:space-between}
  main{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    margin-top:-100px;transform:translateY(-0.28%);
  }
}
@media (max-width:320px){
  main,section{width:100%;margin:0}
  p{margin:var(--spacing-xs)}
  .fundoAzul-container{padding:var(--spacing-sm)}
}

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
}

/* =========================================
   LEGIBILIDADE — Sobrescrições finais
   (deixe este bloco no FIM do arquivo)
   ========================================= */
:root{
  --ink:#0f172a;         /* texto padrão (mais escuro) */
  --ink-strong:#0c1b3a;  /* títulos e destaques */
  --muted:#334155;       /* textos auxiliares */
}

/* Renderização e contraste melhores */
html, body{
  color:var(--ink);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
  font-variant-numeric: lining-nums proportional-nums;
}

/* Títulos mais nítidos e com quebras equilibradas */
h1, h2, h3{
  color:var(--ink-strong);
  line-height:1.25;
  letter-spacing:.2px;
  text-wrap:balance; /* navegadores compatíveis */
}

/* Corpo do texto: mais espaçamento e quebras melhores */
p, li{
  color:var(--ink);
  line-height:1.9;
  letter-spacing:.005em;
  word-spacing:.02em;
  text-underline-offset:3px;
  text-decoration-thickness: from-font;
}

p{
  max-width:70ch;                 /* comprimento de linha confortável */
  margin-left:auto;
  margin-right:auto;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  overflow-wrap:anywhere;         /* evita overflow em palavras longas */
  text-wrap:pretty;               /* quebra mais natural (quando suportado) */
}

/* Destaques usados no HTML */
#marcacaoFonteAzul{ color:var(--cor9); font-weight:700; }
.corStrong{ color:var(--ink-strong); font-weight:700; }

/* Cabeçalho amarelo do capítulo: texto mais forte */
.capitulos_apostilha{
  color:var(--ink-strong);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* Caixa azul com contraste sutilmente maior para leitura */
.fundoAzul-container{
  background:#eaf4ff; /* mais claro que #C8E3F8 */
  border-color:rgba(13,40,68,.22);
}

/* Legendas de figuras mais nítidas */
.descricaoFigura{
  margin-top:.4rem;
  font-size:.95em;
  color:#1f2937;
  opacity:.95;
  text-align:center;
}

/* Campo e placeholder da busca mais legíveis */
.search-bar input::placeholder{ color:#475569; opacity:.95 }
.search-bar input{
  line-height:1.2;
  padding:.6rem .8rem;
  border:1px solid rgba(2,6,23,.15);
  border-radius:.5rem;
}

/* Seleção visível em qualquer fundo */
::selection{ background:#ffde80; color:var(--ink-strong) }

/* Foco visível para acessibilidade */
:focus-visible{
  outline:3px solid #ffde80;
  outline-offset:2px;
}

/* Mobile: mantém legibilidade alta */
@media (max-width:768px){
  p{ max-width:60ch; line-height:1.95 }
}
@media (max-width:480px){
  p, li{ font-size:clamp(.92rem,3.8vw,1rem); line-height:1.95 }
}
