/* Glossário e Vídeos: busca, letras, temas, cartões e paginação. */
[data-gl-busca], [data-gl-filtros], [data-gl-lista], [data-vd-temas], [data-vd-lista] { position: relative; z-index: 1; font-family: 'Instrument Sans', sans-serif; }
[data-gl-busca] > *, [data-gl-filtros] > *, [data-gl-lista] > *, [data-vd-temas] > *, [data-vd-lista] > * { align-self: stretch; }

/* busca do glossário (sobre fundo escuro) */
.gl-busca { display: flex; align-items: center; gap: 12px; background: #212328; border: 1px solid #c5cad0; border-radius: 12px; padding: 0 20px; min-height: 60px; color: #c5cad0; transition: border-color .2s, box-shadow .2s; }
.gl-busca:focus-within { border-color: #f3f1ed; box-shadow: 0 0 0 3px rgba(243, 241, 237, .12); }
.gl-lupa { display: grid; place-items: center; }
.gl-busca input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; outline: 0; font: 400 18px/26px 'Instrument Sans', sans-serif; color: #f3f1ed; padding: 14px 0; }
.gl-busca input::placeholder { color: #c5cad0; }
.gl-busca input::-webkit-search-cancel-button { display: none; }
.gl-busca button { background: none; border: 0; cursor: pointer; color: #c5cad0; font: 400 24px/24px 'Inter', sans-serif; padding: 0 2px; }
.gl-busca button:hover { color: #f3f1ed; }

/* letras e temas */
.gl-letras { display: flex; flex-wrap: wrap; gap: 4px; background: #fff; border: 1px solid #d9d6d0; border-radius: 12px; padding: 11px 13px; }
.gl-letras a, .gl-letras span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; font: 700 16px/20px 'Inter', sans-serif; color: #0b0c0f; text-decoration: none; transition: background .2s, color .2s; }
.gl-letras a:hover { background: #0b0c0f; color: #f3f1ed; }
.gl-letras span.off { color: #c5cad0; font-weight: 400; cursor: default; }
.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.gl-chip { border: 1px solid #c5cad0; background: transparent; border-radius: 999px; padding: 9px 16px; font: 400 15px/22px 'Instrument Sans', sans-serif; color: #0b0c0f; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.gl-chip:hover { border-color: #0b0c0f; }
.gl-chip.on { background: #0b0c0f; color: #f3f1ed; border-color: #0b0c0f; }
.gl-conta { margin: 18px 0 0; font: 400 14px/18px 'IBM Plex Mono', monospace; color: #6b7078; }
.gl-limpar { margin-left: 14px; border: 0; border-bottom: 1px solid #c5cad0; background: none; padding: 0 0 2px; font: 400 14px/18px 'Instrument Sans', sans-serif; color: #0b0c0f; cursor: pointer; }

/* lista de verbetes */
.gl-colunas { column-count: 2; column-gap: 60px; }
.gv-estreito .gl-colunas, .gv-medio .gl-colunas { column-count: 1; }
.gl-grupo { break-inside: avoid; margin: 0 0 40px; }
.gl-letra { font: 800 58px/58px 'Inter', sans-serif; letter-spacing: -.02em; margin: 0 0 14px; color: #0b0c0f; padding-bottom: 14px; border-bottom: 1px solid #0b0c0f; }
.gl-linha { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid #d9d6d0; text-decoration: none; color: #0b0c0f; transition: padding .2s; }
.gl-linha:hover { padding-left: 8px; }
.gl-linha:hover .gl-seta { color: #d8464b; transform: translate(2px, -2px); }
.gl-termo { font: 700 20px/26px 'Inter', sans-serif; letter-spacing: -.005em; margin: 0 0 6px; }
.gl-def { font: 400 15px/22px 'Instrument Sans', sans-serif; color: #6b7078; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gl-tema { font: 500 10px/14px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #6b7078; margin: 0; }
.gl-seta { color: #6b7078; padding-top: 8px; transition: color .2s, transform .2s; flex-shrink: 0; }
.gl-vazio, .gv-vazio { background: #fff; border: 1px dashed #c5cad0; border-radius: 12px; padding: 48px 28px; text-align: center; }
.gl-vazio p, .gv-vazio p { margin: 0 0 8px; font: 400 16px/24px 'Instrument Sans', sans-serif; color: #6b7078; }
.gl-vazio .gl-vazio-t, .gv-vazio .gv-vazio-t { font: 700 22px/30px 'Inter', sans-serif; color: #0b0c0f; }
.gl-vazio a { color: #0b0c0f; }

/* vídeos: temas */
.gv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gv-chip { border: 1px solid #c5cad0; background: transparent; border-radius: 999px; padding: 10px 18px; font: 400 15px/22px 'Instrument Sans', sans-serif; color: #f3f1ed; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.gv-chip:hover { border-color: #f3f1ed; }
.gv-chip.on { background: #f3f1ed; color: #0b0c0f; border-color: #f3f1ed; }
.gv-dica { margin: 22px 0 0; font: 400 14px/20px 'Instrument Sans', sans-serif; color: #c5cad0; }
.gv-dica a { color: #f3f1ed; text-decoration: none; border-bottom: 1px solid #c5cad0; padding-bottom: 2px; display: inline-flex; gap: 8px; align-items: center; }

/* vídeos: lista */
.gv-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.gv-conta { margin: 0; font: 400 14px/18px 'IBM Plex Mono', monospace; color: #6b7078; }
.gv-ordem { display: flex; align-items: center; gap: 8px; border: 1px solid #d9d6d0; border-radius: 10px; padding: 0 16px; min-height: 48px; background: #fff; font: 400 16px/22px 'Instrument Sans', sans-serif; color: #0b0c0f; }
.gv-ordem select { border: 0; background: transparent; font: inherit; color: inherit; outline: 0; cursor: pointer; padding: 10px 0; }
.gv-filtros { margin: 0 0 16px; }
.gv-limpar { border: 0; border-bottom: 1px solid #c5cad0; background: none; padding: 0 0 2px; font: 400 14px/18px 'Instrument Sans', sans-serif; color: #0b0c0f; cursor: pointer; }
.gv-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: stretch; }
.gv-medio .gv-grade { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.gv-estreito .gv-grade { grid-template-columns: 1fr; gap: 16px; }
.gv-card { background: #fff; border: 1px solid #d9d6d0; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.gv-card:hover { border-color: #6b7078; transform: translateY(-2px); }
.gv-mini { position: relative; height: 228px; background: #212328; overflow: hidden; flex-shrink: 0; }
.gv-estreito .gv-mini { height: 190px; }
.gv-num { position: absolute; right: -14px; bottom: -52px; font: 800 170px/1 'Inter', sans-serif; letter-spacing: -.04em; color: #2a2c32; }
.gv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform .2s; }
.gv-card:hover .gv-play { transform: translate(-50%, -50%) scale(1.08); }
.gv-dur { position: absolute; right: 14px; bottom: 14px; background: #0b0c0f; color: #f3f1ed; border-radius: 4px; padding: 3px 7px; font: 400 12px/16px 'IBM Plex Mono', monospace; }
.gv-corpo { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gv-tema { margin: 0; font: 500 10px/14px 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #6b7078; }
.gv-titulo { margin: 0; font: 700 20px/27px 'Inter', sans-serif; letter-spacing: -.005em; color: #0b0c0f; }
.gv-meta { margin-top: auto; padding-top: 12px; border-top: 1px solid #d9d6d0; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font: 400 12px/16px 'IBM Plex Mono', monospace; color: #6b7078; }
.gv-meta a { font: 400 14px/22px 'Instrument Sans', sans-serif; color: #0b0c0f; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.gv-meta a:hover svg { animation: seta-passa .55s cubic-bezier(.4, 0, .2, 1); }
.gv-pag { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.gv-pg { border: 1px solid #d9d6d0; background: #f3f1ed; border-radius: 10px; min-width: 42px; min-height: 44px; padding: 0 17px; font: 400 16px/22px 'Instrument Sans', sans-serif; color: #0b0c0f; cursor: pointer; transition: background .2s, color .2s; }
.gv-pg:hover:not(:disabled):not(.on) { background: #fff; border-color: #0b0c0f; }
.gv-pg.on { background: #0b0c0f; color: #f3f1ed; border-color: #0b0c0f; }
.gv-pg:disabled { color: #c5cad0; cursor: default; }
.gv-pg-num { display: flex; gap: 8px; }
.gv-pg-compacto { display: none; font: 400 14px/20px 'IBM Plex Mono', monospace; color: #6b7078; padding: 0 12px; }
.gv-estreito .gv-pg-num { display: none; }
.gv-estreito .gv-pg-compacto { display: inline; }
.gv-estreito .gl-letras a, .gv-estreito .gl-letras span { width: 36px; height: 36px; }
