/* =====================================================================
   PPGA Interativo · selos dos Objetivos de Desenvolvimento Sustentável (ONU)
   Usado no card do índice e na capa de cada apresentação.
   Marcação: <ul class="ods"><li class="ods-4"><b>4</b>Educação de qualidade</li>…</ul>
   Na capa, o conteúdo do <li> vai dentro de <a href="https://brasil.un.org/pt-br/sdgs/N">.
   Até 3 ODS por trabalho, do mais próximo ao menos próximo (ordem do meta.json).
   Cores oficiais da ONU.
   ===================================================================== */
.ods{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
:where(.ods li){--ods:#64748b; --ods-ink:#fff;}
.ods li, .ods li > a{display:inline-flex; align-items:center; gap:7px; font-size:.76rem; line-height:1.2; color:var(--ink, #0f172a); text-decoration:none;}
.ods li{border:1px solid color-mix(in srgb, var(--ods) 35%, transparent); background:color-mix(in srgb, var(--ods) 7%, var(--card, #fff)); border-radius:6px; padding:3px 9px 3px 3px;}
.ods li b{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 4px; border-radius:4px; background:var(--ods); color:var(--ods-ink); font-size:.78rem; font-weight:800; font-family:var(--sans, inherit);}
.ods li:has(> a:hover){border-color:var(--ods);}
.ods-h{display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted, #64748b); margin-bottom:6px;}

.ods-1{--ods:#E5243B;}
.ods-2{--ods:#DDA63A;}
.ods-3{--ods:#4C9F38;}
.ods-4{--ods:#C5192D;}
.ods-5{--ods:#FF3A21;}
.ods-6{--ods:#26BDE2;}
.ods-7{--ods:#FCC30B; --ods-ink:#0f172a;}
.ods-8{--ods:#A21942;}
.ods-9{--ods:#FD6925;}
.ods-10{--ods:#DD1367;}
.ods-11{--ods:#FD9D24;}
.ods-12{--ods:#BF8B2E;}
.ods-13{--ods:#3F7E44;}
.ods-14{--ods:#0A97D9;}
.ods-15{--ods:#56C02B;}
.ods-16{--ods:#00689D;}
.ods-17{--ods:#19486A;}
.ods-wrap{margin-top:20px;}
#capa .ods-wrap{text-align:center;}
#capa .ods{justify-content:center;}
.card .ods{margin-top:14px; flex-direction:column; flex-wrap:nowrap; gap:5px;}
.card .ods li{font-size:.68rem; white-space:nowrap; min-width:0; padding-right:7px; gap:6px;}
.card .ods li b{min-width:19px; height:19px; font-size:.7rem;}
/* coluna única: abre espaço para o "role" (.scroll-cue) no pé da capa */
@media (max-width:919px){ #capa .ods-wrap{margin-bottom:56px;} }