/* ============================================================
   KIT VISUAL OBRALIVRE — "Marcado à Mão" (identidade FINAL 2026-07-17)
   Fonte canônica: catalogo/fundacao-obralivre/Identidade_Visual_Obralivre.md
   ⛔ Não inventar token. Não trocar cor. Não usar azul/roxo/vermelho/gradiente.
   ============================================================ */

:root{
  /* --- cor --- */
  --papel:     #FBFBF8;   /* fundo: branco quente, NÃO bege */
  --grafite:   #262421;   /* tinta: texto, títulos, anel do logo, lápis */
  --limao:     #C6D82E;   /* cor da marca — DOSADO, ~1 palavra */
  --corpo2:    #4A453D;   /* texto secundário */
  --rule:      rgba(38,36,33,.10);
  --dark:      #1C1B18;   /* blocos de contraste */
  --papel-dark:#FBFBF8;

  /* --- severidade (grafite + limão só; sem vermelho/azul) --- */
  --sev-alta:  #262421;   /* peso vem do preenchimento, não da cor */
  --sev-media: #4A453D;
  --sev-baixa: rgba(38,36,33,.45);

  /* --- tipografia --- */
  --display: 'Archivo', system-ui, sans-serif;   /* headlines 800/900 */
  --corpo:   'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace; /* kickers */
  --mao:     'Caveat', cursive;                  /* anotação a lápis */

  /* --- ritmo --- */
  --max: 1080px;
  --gap: clamp(16px, 4vw, 40px);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--papel);
  color:var(--grafite);
  font-family:var(--corpo);
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;              /* trava overflow horizontal */
}

/* grid de papel milimetrado — sutil, é "papel", não decoração */
.papel-grid{
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size:32px 32px;
}

/* --- tipografia --- */
h1,h2,h3{ font-family:var(--display); font-weight:900; letter-spacing:-.025em; line-height:1.05; margin:0 0 .4em; }
h1{ font-size:clamp(34px, 6.2vw, 68px); }
h2{ font-size:clamp(26px, 4.4vw, 44px); }
h3{ font-size:clamp(19px, 2.6vw, 27px); font-weight:800; }
p{ margin:0 0 1.1em; color:var(--corpo2); }
strong{ color:var(--grafite); font-weight:700; }

.kicker{
  font-family:var(--mono); font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; color:var(--corpo2);
  display:block; margin-bottom:.9em;
}

/* realce marca-texto limão — 1 palavra, nunca a frase inteira */
.marca{
  background:linear-gradient(transparent 58%, var(--limao) 58%, var(--limao) 94%, transparent 94%);
  padding:0 .08em;
}

/* anotação à mão (lápis grafite) */
.lapis{
  font-family:var(--mao); font-size:clamp(19px,2.6vw,26px);
  color:var(--grafite); line-height:1.25; transform:rotate(-1.6deg);
  display:inline-block;
}

/* --- layout --- */
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 20px; }
section{ padding:clamp(48px,9vw,104px) 0; }
/* ⚠️ ARMADILHA DE ESPECIFICIDADE (achada 18/09 na auditoria SEO):
   em <section class="wrap">, a classe .wrap (0,0,1,0) vence o seletor de elemento
   section (0,0,0,1) e ZERA o padding vertical — o ritmo da página some sem erro nenhum.
   Esta regra devolve o respiro sem mexer no padding lateral. */
section.wrap{
  padding-top:clamp(48px,9vw,104px);
  padding-bottom:clamp(48px,9vw,104px);
}
.rule{ height:1px; background:var(--rule); border:0; margin:0; }

/* bloco escuro de contraste */
.dark{ background:var(--dark); color:var(--papel-dark); }
.dark p{ color:rgba(251,251,248,.74); }
.dark h1,.dark h2,.dark h3{ color:var(--papel-dark); }

/* --- artefato real + moldura de evidência (motif "Marcado à Mão") --- */
.artefato{
  position:relative; display:block; width:100%;
  border:1px solid var(--rule); background:#fff;
  box-shadow:0 1px 0 rgba(38,36,33,.05), 0 18px 44px -28px rgba(38,36,33,.42);
}
.artefato img{ display:block; width:100%; height:auto; }
.artefato-legenda{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--corpo2);
  padding:10px 12px; border-top:1px solid var(--rule); background:var(--papel);
}

/* círculo de lápis apontando o furo */
.circulo-lapis{
  position:absolute; border:2.5px solid var(--grafite); border-radius:50%;
  opacity:.82; pointer-events:none;
}

/* --- cards de achado, por severidade --- */
.achado{
  border:1px solid var(--rule); border-left:5px solid var(--sev-baixa);
  background:#fff; padding:clamp(18px,3vw,28px); margin:0 0 16px;
}
.achado--alta{ border-left-color:var(--sev-alta); }
.achado--media{ border-left-color:var(--sev-media); }
.achado__sev{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.12em; color:var(--corpo2);
  display:inline-block; margin-bottom:.7em;
}
.achado--alta .achado__sev{ background:var(--grafite); color:var(--papel); padding:3px 8px; }

/* --- botão --- */
.btn{
  display:inline-block; font-family:var(--display); font-weight:800; font-size:17px;
  background:var(--grafite); color:var(--papel); text-decoration:none;
  padding:16px 30px; border:0; letter-spacing:-.01em;
}
.btn--limao{ background:var(--limao); color:var(--grafite); }

/* --- tabela (sempre com scroll próprio) --- */
.tabela-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ border-collapse:collapse; width:100%; font-size:15px; }
th,td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--rule); vertical-align:top; }
th{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--corpo2); font-weight:500; }

/* --- logo --- */
.logo{ height:30px; width:auto; display:block; }

/* ⚠️ ARMADILHA CONHECIDA (14/07, quebrou 4 agentes):
   nunca aplicar white-space:nowrap em bloco de texto corrido.
   nowrap só em chip/badge, com classe própria e prefixada. */
.chip--nowrap{ white-space:nowrap; }

@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding:0 16px; }
}