/* NoticiasLinux.com.br — recriação fiel do visual original (2007).
   Fundo #FAFAFA, Tahoma, links pretos que ficam vermelhos no hover,
   headings condensados, sem cantos arredondados nem sombras. */
* { margin:0; padding:0; box-sizing:border-box; }
img { border:0; }
html { background:#FAFAFA; }
body { background:#FAFAFA; color:#333333; font:14px/1.5 Tahoma, Verdana, Geneva, sans-serif; }
a { color:#000; text-decoration:none; }
a:hover { color:#c00; }

/* ── Cabeçalho ─────────────────────────────────────────────────────────────── */
.topo { background:#FAFAFA; border-bottom:1px solid #a9a9a9; }
.topo .in { max-width:760px; margin:0 auto; padding:14px 16px 8px; display:flex;
  align-items:center; gap:10px; }
.marca { display:flex; align-items:center; gap:8px; }
.marca .tux { width:34px; height:34px; border-radius:8px; display:block; }
.marca .nome { font-size:30px; font-weight:bold; letter-spacing:-0.04em; color:#000; }
.marca .nome b { color:#c00; }
.marca .nome i { font-style:normal; font-weight:normal; font-size:15px; color:#777; letter-spacing:0; }
.marca:hover .nome { color:#000; }
.tagline { margin-left:auto; color:#777; font-size:12px; }

/* Menu cinza no topo (como o #cssdrivemenu original) */
.menu { background:#c0c0c0; border-bottom:1px solid #999; }
.menu .in { max-width:760px; margin:0 auto; padding:0 16px; height:25px; display:flex;
  justify-content:flex-end; align-items:center; gap:0; }
.menu a { color:#000; font-size:11px; font-weight:bold; text-transform:uppercase;
  margin:0 8px; line-height:25px; }
.menu a:hover { color:#c00; }

.pagina { max-width:760px; margin:0 auto; padding:18px 16px 30px; }

/* ── Newsletter (o antigo #cadastro) ───────────────────────────────────────── */
.news { border:1px solid #a9a9a9; background:#f0f0f0; padding:12px 14px; margin:0 0 22px; }
.news-cab strong { font-size:14px; color:#000; }
.news-cab span { display:block; font-size:12px; color:#666; margin-top:1px; }
.news-form { display:flex; gap:6px; margin-top:9px; }
.news-form input[type=email] { flex:1; padding:6px 8px; border:1px solid #999; background:#fff;
  font:13px Tahoma, sans-serif; }
.news-form button { padding:6px 16px; border:1px solid #7a9a5a; background:#8ab661; color:#000;
  font:bold 12px Tahoma, sans-serif; cursor:pointer; }
.news-form button:hover { background:#7aa751; color:#000; }
.news-nota { margin-top:6px; font-size:11px; color:#777; }
.news-msg { margin-bottom:8px; padding:6px 10px; font-size:13px; border:1px solid; }
.news-msg.ok  { background:#e7f3dd; color:#2f5e1a; border-color:#bcdfa6; }
.news-msg.err { background:#f7dede; color:#a12626; border-color:#e3b3b3; }
.news.compacta { margin:22px 0 6px; }

/* ── Lista de notícias ─────────────────────────────────────────────────────── */
.post { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #d5d5d5; }
.post .data { font-size:11px; color:#888; text-transform:uppercase; letter-spacing:0.02em; }
.post h2 { font-size:26px; line-height:0.98; letter-spacing:-0.05em; font-weight:normal;
  margin:3px 0 5px; }
.post h2 a { color:#000; }
.post h2 a:hover { color:#c00; }
.post .fonte-tag { font-size:11px; color:#888; margin-bottom:9px; }
.post .fonte-tag b { color:#c00; font-weight:bold; }
.post .resumo p { margin:0 0 9px; line-height:1.5; color:#333; }
.post .capa { float:right; width:170px; max-width:40%; margin:2px 0 10px 14px;
  border:1px solid #ccc; }
.post .leia { font-size:12px; text-decoration:underline; }
.post::after { content:""; display:block; clear:both; }

/* ── Matéria ───────────────────────────────────────────────────────────────── */
.artigo .data { font-size:12px; color:#888; text-transform:uppercase; }
.artigo h1 { font-size:34px; line-height:1.0; letter-spacing:-0.05em; font-weight:normal;
  color:#000; margin:4px 0 6px; }
.artigo .fonte-tag { font-size:12px; color:#888; margin-bottom:14px; }
.artigo .fonte-tag b { color:#c00; }
.artigo .lide { margin:0 0 14px; }
.artigo .lide p { font-weight:bold; color:#000; line-height:1.5; margin:0 0 6px; }
.artigo .capa { max-width:100%; border:1px solid #ccc; margin:4px 0 16px; }
.artigo .texto p { margin:0 0 14px; line-height:1.6; }
.artigo .fonte { margin:18px 0; padding:12px 0; border-top:1px solid #a9a9a9;
  border-bottom:1px solid #a9a9a9; color:#666; font-size:12px; }
.artigo .fonte a { text-decoration:underline; }
.artigo .fonte span { display:block; margin-top:3px; font-size:11px; }
.voltar { display:inline-block; margin-top:6px; font-size:12px; text-decoration:underline; }

/* ── Arquivo (lista só de títulos) ─────────────────────────────────────────── */
.arquivo-tit { font-size:24px; font-weight:normal; letter-spacing:-0.04em; color:#000;
  margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid #a9a9a9; }
.lista-arq { list-style:none; margin:0 0 6px; }
.lista-arq li { padding:6px 0; border-bottom:1px solid #ececec; line-height:1.4; }
.lista-arq .data { display:inline-block; min-width:78px; color:#888; font-size:11px;
  margin-right:8px; }
.lista-arq a { color:#000; }
.lista-arq a:hover { color:#c00; }
@media (max-width:560px) { .lista-arq .data { display:inline; min-width:0; } }

/* ── Paginação / vazio ─────────────────────────────────────────────────────── */
.pag { text-align:center; margin-top:6px; font-size:12px; color:#888; }
.pag a { text-decoration:underline; margin:0 10px; }
.vazio { text-align:center; padding:40px 16px; color:#666; }
.vazio h2 { color:#000; font-weight:normal; letter-spacing:-0.03em; margin-bottom:8px; }
.lnk { text-decoration:underline; }

/* ── Rodapé (o antigo #foot) ───────────────────────────────────────────────── */
.rodape { border-top:1px solid #a9a9a9; margin-top:10px; background:#FAFAFA; }
.rodape .in { max-width:760px; margin:0 auto; padding:14px 16px 24px; text-align:center;
  font-size:11.5px; color:#777; }
.rodape .in b { color:#333; }
.rodape a { text-decoration:underline; }
.rodape p { margin:0 0 3px; }

@media (max-width:560px) {
  .topo .in { flex-wrap:wrap; } .tagline { margin-left:0; width:100%; }
  .marca .nome { font-size:24px; }
  .menu .in { justify-content:flex-start; flex-wrap:wrap; height:auto; padding:4px 16px; }
  .post h2 { font-size:22px; } .artigo h1 { font-size:26px; }
  .post .capa { float:none; width:100%; max-width:100%; margin:6px 0 10px; }
  .news-form { flex-direction:column; }
}

/* ── Modal de captura (newsletter, 1ª visita na home) ──────────────────────── */
.nl-modal { position:fixed; inset:0; z-index:1000; background:#FAFAFA;
  display:flex; align-items:center; justify-content:center; padding:24px; }
.nl-modal[hidden] { display:none; }
.nl-modal-in { max-width:440px; width:100%; text-align:center; }
.nl-modal-logo { width:76px; height:76px; border-radius:14px; margin-bottom:10px; }
.nl-modal-marca { font-size:22px; font-weight:bold; letter-spacing:-0.04em; color:#000;
  margin-bottom:14px; }
.nl-modal-marca b { color:#c00; }
.nl-modal-marca i { font-style:normal; font-weight:normal; font-size:12px; color:#777;
  letter-spacing:0; }
.nobr { white-space:nowrap; }
.nl-modal-in h2 { font-size:30px; line-height:1.02; letter-spacing:-0.05em; font-weight:normal;
  color:#000; margin:0 0 10px; }
.nl-modal-in > p { color:#555; font-size:15px; line-height:1.5; margin:0 0 20px; }
.nl-modal-form { display:flex; gap:8px; }
.nl-modal-form input[type=email] { flex:1; padding:11px 12px; border:1px solid #999; background:#fff;
  font:15px Tahoma, sans-serif; }
.nl-modal-form button { padding:11px 20px; border:1px solid #7a9a5a; background:#8ab661; color:#000;
  font:bold 14px Tahoma, sans-serif; cursor:pointer; white-space:nowrap; }
.nl-modal-form button:hover { background:#7aa751; }
.nl-modal-form button:disabled { opacity:.6; cursor:default; }
.nl-hp { position:absolute; left:-9999px; }
.nl-modal-msg { margin:14px 0 0; padding:8px 10px; font-size:13px; border:1px solid; }
.nl-modal-msg.ok  { background:#e7f3dd; color:#2f5e1a; border-color:#bcdfa6; }
.nl-modal-msg.err { background:#f7dede; color:#a12626; border-color:#e3b3b3; }
.nl-modal-msg[hidden] { display:none; }
.nl-modal-fechar { display:inline-block; margin-top:22px; font-size:12px; color:#999;
  text-decoration:underline; }
.nl-modal-fechar:hover { color:#c00; }
@media (max-width:560px) {
  .nl-modal-in h2 { font-size:24px; }
  .nl-modal-form { flex-direction:column; }
}