@charset "UTF-8";

/* =========================================================
   MODELO APLICADO (FOCO: FONTE + VISIBILIDADE/LEGIBILIDADE)
   - Chakra Petch (títulos/estrutura)
   - Inter (texto corrido)
   - Melhor contraste e leitura (cores, rendering, line-height)
   - Responsivo com sizes coerentes
========================================================= */

/* Fontes (modelo) */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&family=Inter:wght@400;500;600&display=swap');

/* Variáveis CSS */
:root{
  --cor0:#F4F6FE; /* Fundo claro */
  --cor1:#2E58A2;
  --cor6:#efba32; /* Amarelo destaque */
  --cor8:#000;    /* Preto */
  --cor9:#0068B5; /* Azul institucional */

  /* Tipografia (modelo) */
  --fonte-destaque:'Chakra Petch', sans-serif;
  --fonte-texto:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Visibilidade/contraste (modelo) */
  --text:#0f172a;
  --text-soft:rgba(15,23,42,.88);
  --muted:rgba(15,23,42,.70);
  --line:rgba(15,23,42,.18);

  --spacing-xs:0.5rem;
  --spacing-sm:0.75rem;
  --spacing-md:1rem;
  --spacing-lg:1.5rem;

  --border-radius:0.625rem;
  --transition:all 0.3s ease;
}

/* Reset global */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* Base (modelo) */
html{
  font-family:var(--fonte-destaque);
  font-size:clamp(14px, 2.5vw, 16px);
  scroll-behavior:smooth;

  /* visibilidade/legibilidade */
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

/* Corpo da página */
body{
  background-color:rgba(1, 141, 222, .12);
  margin:0;                    /* ✅ não empurra tudo */
  transition:var(--transition);
  color:var(--text);
}

/* Wrapper */
main{
  margin:0 auto;
  width:min(90%, 900px);

  /* ✅ espaço do topo deve vir do MAIN (barra fixa) */
  padding-top:50px;
}

/* Cabeçalho */
header{
  width:100%;
  max-width:900px;
  margin:0 auto;
}

/* Seções */
section{
  width:100%;
  max-width:800px;
  margin:var(--spacing-sm) auto;

  /* (mantive seu visual original) */
  background-color:var(--cor0);
  border-radius:var(--border-radius);
  padding:var(--spacing-lg);
  box-shadow:0 10px 28px rgba(2,6,23,.14);
  border:1px solid var(--line);

  text-align:justify;
  transition:var(--transition);
}

/* Cabeçalho de capítulos */
.capitulos_apostilha{
  border:2px solid var(--cor8);
  border-radius:var(--border-radius);
  background-color:var(--cor6);
  width:100%;
  margin:0 auto;
  text-align:center;
  padding:var(--spacing-sm);
}

/* Cabeçalho e rodapé de metadados */
.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);

  font-weight:700;
  letter-spacing:.4px;
  color:#07101f;
}

.ostensivo_apostilha[role="contentinfo"]{
  margin-top:var(--spacing-md);
  border-top:1px dashed rgba(15,23,42,.22);
  padding-top:var(--spacing-md);
}

/* Títulos (modelo: contraste + fonte) */
h1{
  font-family:var(--fonte-destaque);
  font-weight:700;
  font-size:clamp(1.1rem, 3vw, 1.2rem);
  letter-spacing:.5px;
  margin:0;
  color:#07101f;
}

h2{
  font-family:var(--fonte-destaque);
  font-weight:700;
  font-size:clamp(1rem, 3.5vw, 1.10rem);
  margin:1rem 0;
  color:#07101f;
  padding-left:.65rem;
  line-height:1.25;
}

h3{
  font-family:var(--fonte-destaque);
  margin:.75rem 0;
  color:#07101f;
  font-weight:700;
  font-size:clamp(.98rem, 3.2vw, 1.05rem);
  line-height:1.25;
  padding-left:.65rem;
}

/* Texto (modelo: Inter + legibilidade) */
p{
  font-family:var(--fonte-texto);
  text-indent:0;
  line-height:1.9;
  margin:var(--spacing-sm) var(--spacing-md);
  font-size:clamp(1.02rem, 3.1vw, 1.08rem);
  text-align:justify;

  color:var(--text-soft);
  letter-spacing:.15px;

  /* ✅ evita “puxão”/colagem */
  margin-bottom:0;
}

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

/* Container azul */
.fundoAzul-container{
  background:#DEE9F1;
  border:1px solid var(--cor8);
  border-radius:var(--border-radius);
  padding:var(--spacing-md);
}

.fundoAzul-container img{
  max-width:100%;
  height:auto;
  margin:var(--spacing-sm) auto;
  display:block;
  border-radius:12px;
}

/* (opcional) áudio: mantém centralizado, mas sem “estragar” margem do layout */
.audio-container{
  width:100%;
  text-align:center;
  margin:var(--spacing-sm) 0;
  padding:0;
}

/* =========================
   MEDIA QUERIES (modelo)
   ========================= */

/* Telas muito grandes (>1400px) */
@media (min-width:1400px){
  main, section, header, .ostensivo_apostilha{ max-width:1200px; }
}

/* Telas grandes (>1000px) */
@media (min-width:1000px){
  main, section, header, .ostensivo_apostilha{ max-width:1000px; }
}

/* Telas médias (até 768px) */
@media (max-width:768px){
  main{ width:95%; padding-top:105px; }

  section{
    padding:var(--spacing-md);
    max-width:95%;
  }

  p{
    font-size:clamp(1.02rem, 3vw, 1.12rem);
    margin:var(--spacing-sm);
  }

  .incisos{ padding-left:.75rem; }
  .alineas{ padding-left:.9rem; }
}

/* Telas pequenas (até 480px) */
@media (max-width:480px){
  html{ font-size:clamp(12px, 3.5vw, 14px); }

  main{
    width:98%;
    padding-top:92px; /* ✅ alinhado com barra em 1 linha */
  }

  section{
    min-width:unset;
    padding:var(--spacing-sm);
  }

  p{
    margin:.5rem .75rem;
    font-size:clamp(1rem, 2.8vw, 1.08rem);
    text-indent:30px; /* ✅ seu padrão mobile */
  }

  .incisos{ padding-left:.6rem; }
  .alineas{ padding-left:.75rem; }

  .ostensivo_apostilha,
  .ostensivo_apostilha[role="contentinfo"]{
    justify-content:space-between;
  }
}

/* Telas muito pequenas (até 320px) */
@media (max-width:320px){
  main, section{
    width:100%;
    margin:0;
  }

  main{ padding-top:96px; }

  p{ margin:.5rem; }
  .fundoAzul-container{ padding:.75rem; }
}