@charset "UTF-8";
/* Fonte Chakra Petch (400/700) */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&display=swap');

/* =========================
   VARIÁVEIS
   ========================= */
:root{
  --cor0:#F4F6FE;           /* fundo claro */
  --cor1:#2E58A2;
  --cor6:#efba32;           /* amarelo destaque */
  --cor8:#0b1b2b;           /* texto principal (quase preto, menos brilho) */
  --cor9:#0068B5;           /* azul institucional */
  --font:'Chakra Petch', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

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

  --radius:.625rem;
  --shadow:0 6px 14px rgba(0,0,0,.08);
  --transition:.25s ease;
}

/* =========================
   RESET / BASE TIPOGRÁFICA
   ========================= */
*{ margin:0; padding:0; box-sizing:border-box; }

html{
  font-family:var(--font);
  font-size:clamp(14px, 2.2vw, 16px);
  scroll-behavior:smooth;
}

body{
  background:#018dde33;
  color:var(--cor8);
  margin-top:4rem;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* largura do conteúdo */
main{ width:min(90%, 900px); margin:0 auto; }

/* =========================
   BLOCOS E CABEÇALHOS
   ========================= */
header{ width:100%; max-width:900px; margin:0 auto; }

section{
  width:100%;
  max-width:800px;
  margin:var(--spacing-sm) auto;
  background:var(--cor0);
  border-radius:var(--radius);
  padding:var(--spacing-lg);
  box-shadow:var(--shadow);
}

/* Cartucho amarelo do capítulo */
.capitulos_apostilha{
  border:2px solid #000;
  border-radius:var(--radius);
  background:var(--cor6);
  padding:var(--spacing-sm);
  text-align:center;
}

/* Linha “OSTENSIVO / EMN-006 / - x - / REV.y” */
.ostensivo_apostilha{
  display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:center;
  gap:var(--spacing-sm);
  padding:var(--spacing-sm);
  width:100%; max-width:900px; margin:0 auto;
}
.ostensivo_apostilha[role="contentinfo"]{ margin-top:var(--spacing-md); }

/* =========================
   TIPOGRAFIA
   ========================= */
h1{
  font-weight:700;
  font-size:clamp(1.2rem, 3.6vw, 1.5rem);
  letter-spacing:.2px;
  margin:var(--spacing-md) 0;
}
h2{
  font-weight:700;
  font-size:clamp(1rem, 3.2vw, 1.25rem);
  margin:var(--spacing-md) 0 var(--spacing-sm);
}

p{
  font-weight:400;
  line-height:1.85;
  font-size:clamp(.92rem, 2.6vw, 1rem);
  margin:var(--spacing-sm) var(--spacing-md);
  text-align:justify;
}

/* Incisos / alíneas com hanging indent */
.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 #000;
  border-radius:var(--radius);
  padding:var(--spacing-md);
}
.audio-container{ text-align:center; margin:var(--spacing-sm) 0; }
.fundoAzul-container img{ max-width:100%; height:auto; display:block; margin:var(--spacing-sm) auto; }

/* =========================
   TIPOGRAFIA DA SEARCH BAR
   (garante legibilidade lá dentro também)
   ========================= */
.search-bar,
.search-bar *{
  font-family:var(--font) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.search-bar input{ font-weight:400; }
.search-bar button{ font-weight:700; }

/* =========================
   RESPONSIVIDADE
   ========================= */
@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.2vw, 1.35rem); }
  h2{ font-size:clamp(.95rem, 3vw, 1.12rem); }
  p{ margin:var(--spacing-sm); font-size:clamp(.88rem, 2.4vw, .98rem); }
  .incisos{ padding-left:.75rem; }
  .alineas{ padding-left:.9rem; }
}

/* Telefones */
@media (max-width: 480px){
  html{ font-size:clamp(12px, 3.4vw, 14px); }
  body{ margin-top:2.5rem; }

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

  h1{ font-size:clamp(1rem, 3vw, 1.15rem); }
  h2{ font-size:clamp(.9rem, 2.8vw, 1.05rem); }
  p { margin:var(--spacing-xs) var(--spacing-sm); font-size:clamp(.86rem, 2.3vw, .95rem); }

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

  /* Centraliza melhor o conjunto em telas pequenas */
  main{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    margin-top:-84px; transform: translateY(-0.28%);
  }
}

/* Muito estreitas */
@media (max-width: 320px){
  main, section{ width:100%; margin:0; }
  p{ margin:var(--spacing-xs); }
  .fundoAzul-container{ padding:var(--spacing-sm); }
}

/* =========================
   ACESSIBILIDADE (FOCO)
   ========================= */
:focus-visible{
  outline:3px solid rgba(0,104,181,.28);
  outline-offset:2px;
}