/* Infográficos interativos: usa os tokens de material-didatico/assets/md.css */
:root {
  --mark: #fff36b; --mark-ink: #111; --sombra: #111;
  --c-engine: #5b6770; --c-machinery-impact: #d9822b; --c-non-machinery-impact: #9a6a36; --c-powered-saw: #b08900;
  --c-alert-signal: #3a62c9; --c-music: #8e44ad; --c-human-voice: #166c40; --c-dog: #23908e; --c-silencio: #b9bdb9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mark: #5b5512; --mark-ink: #fff7a8; --sombra: #000;
    --c-engine: #9aa7b0; --c-machinery-impact: #f0a35a; --c-non-machinery-impact: #c9965f; --c-powered-saw: #e0bd3a;
    --c-alert-signal: #7d9cf0; --c-music: #c08ae0; --c-human-voice: #6fd39b; --c-dog: #5fd0cc; --c-silencio: #4a4f4c;
  }
}
:root[data-theme="dark"] {
  --mark: #5b5512; --mark-ink: #fff7a8; --sombra: #000;
  --c-engine: #9aa7b0; --c-machinery-impact: #f0a35a; --c-non-machinery-impact: #c9965f; --c-powered-saw: #e0bd3a;
  --c-alert-signal: #7d9cf0; --c-music: #c08ae0; --c-human-voice: #6fd39b; --c-dog: #5fd0cc; --c-silencio: #4a4f4c;
}

.hero { padding: 48px 0 36px; border-bottom: 1.5px solid var(--ink); background:
  radial-gradient(var(--line) 1.3px, transparent 1.5px) 0 0 / 18px 18px; }
.hero-inner { max-width: 800px; }
.hero .lead { font-size: 19px; color: var(--ink-2); }
.hero mark { background: var(--mark); color: var(--mark-ink); padding: 0 6px; border-radius: 6px; }
.terminal { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-size: 14px; background: var(--ink); color: var(--paper); border-radius: 10px; padding: 6px 12px; margin-bottom: 14px; }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.pilulas li { font-size: 14px; font-weight: 600; border: 1.5px solid var(--ink); border-radius: 99px; padding: 3px 12px; background: var(--paper); }

/* Janela (moldura de navegador do site) */
.janela { background: var(--paper); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--sombra); overflow: hidden; min-width: 0; }
.janela-barra { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 2px solid var(--ink); background: var(--paper-2);
  font: 800 12px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.janela-barra i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-block; }
.janela-barra i:nth-child(1) { background: var(--mark); } .janela-barra i:nth-child(2) { background: var(--accent-soft); } .janela-barra i:nth-child(3) { background: var(--paper); }
.janela-barra span { margin-left: 6px; }
.janela-corpo { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

/* Lista de infográficos */
.lista-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; }
.info { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.info:hover { transform: translate(-2px, -2px); }
.info:hover .janela { box-shadow: 8px 8px 0 var(--sombra); }
.info .janela { height: 100%; display: flex; flex-direction: column; }
.info .capa { aspect-ratio: 1200 / 630; max-width: 100%; width: 100%; height: auto; object-fit: cover; object-position: top; border-bottom: 2px solid var(--ink); background: var(--paper-2); display: block; }
.info h3 { margin: 0; }
.info p { margin: 0; color: var(--ink-2); font-size: 15px; }
.info .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.info .tag { font-size: 12px; font-weight: 600; border: 1.5px solid var(--ink); border-radius: 99px; padding: 2px 10px; background: var(--pill); }

/* Paisagem sonora */
.controles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rolagem { overflow-x: auto; }
.partitura text, .retrato text { font-family: var(--body); fill: var(--ink); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda b { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-block; }
.achados { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; }
.achado { background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--sombra); padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.achado .num { font: 800 32px/1 var(--display); font-variant-numeric: tabular-nums; }
.achado h3 { margin: 0; font-size: 19px; }
.achado p { margin: 0; font-size: 15px; }
.retratos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.retrato { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; text-align: center; padding: 6px 2px; border-radius: 14px; }
.retrato.destaque { background: var(--paper-2); outline: 1.5px solid var(--ink); }
.retrato strong { font: 800 14px var(--display); }
.nota { font-size: 14px; color: var(--ink-2); margin: 0; }
.leitura { max-width: 72ch; display: flex; flex-direction: column; gap: 8px; padding-left: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .info:hover { transform: none; } }

/* Gráficos de dados (clima e outros) */
:root {
  --en: #d9822b; --ln: #3a62c9; --neutro-c: #b9bdb9;
  --s1: #8c5a1e; --s2: #c08a4a; --s3: #e7cfa6; --s4: #f2f2ee; --s5: #a9d8b8; --s6: #3f9a5f; --s7: #0d5a29;
  --faixa: #e3f1e8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --en: #f0a35a; --ln: #7d9cf0; --neutro-c: #4a4f4c;
    --s1: #e0a65e; --s2: #a87a40; --s3: #5a4630; --s4: #262826; --s5: #2c6b43; --s6: #4fbf7f; --s7: #b6f0cc;
    --faixa: #1c3a27;
  }
}
:root[data-theme="dark"] {
  --en: #f0a35a; --ln: #7d9cf0; --neutro-c: #4a4f4c;
  --s1: #e0a65e; --s2: #a87a40; --s3: #5a4630; --s4: #262826; --s5: #2c6b43; --s6: #4fbf7f; --s7: #b6f0cc;
  --faixa: #1c3a27;
}
.grafico { width: 100%; height: auto; display: block; }
.grafico text { font-family: var(--body); fill: var(--ink); }
.grafico .eixo { fill: var(--ink-2); font-size: 12px; }
.seletor { display: flex; flex-wrap: wrap; gap: 8px; }
.resumo-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.resumo-num div { border: 2px solid var(--ink); border-radius: 16px; padding: 12px 14px; background: var(--paper); }
.resumo-num b { display: block; font: 800 28px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.resumo-num span { font-size: 14px; color: var(--ink-2); }
#tip-g { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: var(--paper); font-size: 13px; line-height: 1.35;
  padding: 6px 10px; border-radius: 10px; max-width: 260px; opacity: 0; transition: opacity .1s; }