/* Página do catálogo (/skills). O tema é a classe .dark no <html>.
   A base fica numa camada para valer menos do que qualquer regra das outras
   folhas (menu, cartões, botões), que têm estilo próprio. */
@layer base{
*,::before,::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:gray transparent;-webkit-tap-highlight-color:transparent}
body{line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
button,input,select{font:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent}
button{appearance:button}
img,svg,video{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
ol,ul{list-style:none}
}
body{min-height:100dvh;background:#f4f1e9;color:#121313}
.dark body{background:#121313;color:#f4f1e9}
.skip-link{position:absolute;left:20px;top:-80px;z-index:70;padding:12px 20px;background:#f4ff71;color:#121313;font-weight:700}
.skip-link:focus{top:12px}
.cat-conteudo{padding:16px 16px 64px}
.cat-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch}
.cat-grade>div{min-width:0}
.cat-mais{display:flex;align-items:center;justify-content:center;min-height:80px;margin-top:40px}
@media(min-width:640px){.cat-conteudo{padding-inline:24px}.cat-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.cat-conteudo{padding-inline:32px}.cat-grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1280px){.cat-grade{grid-template-columns:repeat(4,minmax(0,1fr))}}

.local-search{width:100%;min-height:46px;border:1px solid #d6d5ce;border-radius:24px;padding:10px 20px;background:#fff;color:#121313;font:inherit;font-size:14px;outline-offset:3px}.dark .local-search{background:#1c1d1c;color:#f4f1e9;border-color:#383a37}.local-load-more{display:block;margin:28px auto;padding:10px 24px;border:1px solid #929587;border-radius:30px;font-weight:600;font-size:14px}.local-load-more[hidden]{display:none}.local-results-status{text-align:center;margin:22px 0;font-size:14px}.local-card{display:flex;flex-direction:column;height:100%;border-radius:16px}.local-card-preview{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:16px;border:1px solid #d9d9d2;background:#e9e7df;display:grid;place-items:center;color:#72766c}.dark .local-card-preview{border-color:#393c35;background:#1c1d1c;color:#a9ada2}.local-card-preview img{width:100%;height:100%;object-fit:cover}.local-card h3{font-size:14px;font-weight:600;line-height:1.4;margin:10px 0 5px}.local-card p{font-size:12px;opacity:.65;margin:0 0 4px}.local-card:hover h3{text-decoration:underline;text-underline-offset:3px}.local-free{position:absolute;top:12px;left:12px;background:#f4ff71;color:#121313;font-size:11px;padding:3px 8px;border-radius:20px}
.local-card-preview>video{display:block;width:100%;height:100%;object-fit:contain;background:#121313}.local-card-preview>a{display:block;width:100%;height:100%}.local-card .local-card-summary{font-size:13px;line-height:1.6;opacity:1;color:#63685f;margin:5px 0 10px}.dark .local-card .local-card-summary{color:#b2b8ac}.local-card .local-preview-kind{font-size:11px;margin-top:auto;padding-top:8px}.local-card-preview a:focus-visible{outline:3px solid #899a00;outline-offset:-3px}

.local-card p.local-card-summary{font-family:var(--ods-sans,Arial,sans-serif);text-transform:none;letter-spacing:0;font-size:14px}

/* ---- Topo do catálogo: título com três números, barra de famílias e linha de
   resultado. O tema do catálogo é a classe .dark no <html>. ---- */
:root{--cat-tinta:#121313;--cat-apagado:#5b5d59;--cat-linha:rgba(18,19,19,.14);--cat-painel:#fff;--cat-chip:rgba(18,19,19,.06);--cat-acento:#899a00}
.dark{--cat-tinta:#f4f1e9;--cat-apagado:#a6a89e;--cat-linha:rgba(255,255,255,.14);--cat-painel:#1c1d1c;--cat-chip:rgba(255,255,255,.08);--cat-acento:#f4ff71}
.cat-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin:0 0 22px;padding:26px 0;border-bottom:1px solid var(--cat-linha);color:var(--cat-tinta)}
.cat-olho{display:flex;align-items:center;gap:9px;margin:0 0 14px;font:400 11px/1.4 var(--ods-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cat-apagado)}
.cat-olho span{width:7px;height:7px;border-radius:50%;background:var(--cat-acento)}
.cat-topo h1{margin:0;max-width:17ch;font:700 clamp(30px,4.2vw,46px)/1.02 var(--ods-sans);letter-spacing:-.04em;color:var(--cat-tinta)}
.cat-apoio{margin:14px 0 0;max-width:56ch;font-size:15px;line-height:1.55;color:var(--cat-apagado)}
.cat-numeros{flex:none;display:flex;gap:10px;margin:0}
.cat-numeros>div{min-width:122px;padding:14px 16px;display:flex;flex-direction:column-reverse;gap:8px;border:1px solid var(--cat-linha);border-radius:14px;background:var(--cat-painel)}
.cat-numeros dd{margin:0;font:700 30px/1 var(--ods-sans);letter-spacing:-.03em;color:var(--cat-tinta)}
.cat-numeros dt{font:400 10.5px/1.35 var(--ods-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cat-apagado)}
.cat-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin:0 0 14px;color:var(--cat-tinta)}
.cat-familias{display:flex;flex-wrap:wrap;gap:8px}
.cat-familias button{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--cat-linha);border-radius:999px;background:transparent;color:var(--cat-tinta);font:500 13.5px/1.2 var(--ods-sans);cursor:pointer}
.cat-familias button:hover{border-color:var(--cat-tinta)}
.cat-familias [data-contagem]{margin-left:8px;padding:3px 7px;border-radius:999px;background:var(--cat-chip);font:400 11px/1 var(--ods-mono);color:var(--cat-apagado)}
.cat-familias [data-contagem]:empty{display:none}
.cat-familias button[aria-pressed=true]{background:#121313;color:#f4ff71;border-color:#121313}
.dark .cat-familias button[aria-pressed=true]{background:#f4ff71;color:#121313;border-color:#f4ff71}
.cat-familias button[aria-pressed=true] [data-contagem]{background:rgba(244,255,113,.16);color:inherit}
.dark .cat-familias button[aria-pressed=true] [data-contagem]{background:rgba(18,19,19,.14)}
.cat-familias button:focus-visible,.cat-video:focus-visible,.cat-ordem:focus-visible,.cat-limpar:focus-visible{outline:2px solid #899a00;outline-offset:2px}
.cat-controles{display:flex;align-items:center;gap:10px;margin-left:auto}
.cat-video{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 9px;border:1px solid var(--cat-linha);border-radius:999px;background:transparent;color:var(--cat-tinta);font:500 13.5px/1.2 var(--ods-sans);cursor:pointer}
.cat-chave{position:relative;flex:none;width:30px;height:18px;border-radius:999px;background:var(--cat-linha);transition:background .15s ease}
.cat-chave::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s ease}
.cat-video[aria-pressed=true] .cat-chave{background:var(--cat-acento)}
.cat-video[aria-pressed=true] .cat-chave::after{transform:translateX(12px)}
.dark .cat-video[aria-pressed=true] .cat-chave::after{background:#121313}
.cat-ordem{appearance:none;-webkit-appearance:none;padding:9px 36px 9px 14px;border:1px solid var(--cat-linha);border-radius:999px;color:var(--cat-tinta);font:500 13.5px/1.2 var(--ods-sans);cursor:pointer;
  background:var(--cat-painel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/14px no-repeat}
.cat-resultado{display:flex;align-items:center;gap:14px;margin:0 0 22px;font-size:13.5px;color:var(--cat-apagado)}
.cat-limpar{padding:0;border:0;background:none;color:var(--cat-tinta);font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.cat-limpar[hidden]{display:none}
@media(max-width:900px){
  .cat-topo{flex-direction:column;align-items:stretch;gap:22px;padding:18px 0 22px}
  .cat-numeros>div{flex:1;min-width:0;padding:12px}
  .cat-numeros dd{font-size:26px}
  .cat-controles{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.cat-chave,.cat-chave::after{transition:none}}