/* ==========================================================================
   Vitrine de Patentes UFF - estilos do front-end
   --------------------------------------------------------------------------
   Para retematizar o plugin inteiro, altere apenas o bloco de tokens abaixo.
   Nenhuma cor e escrita direto nas regras: tudo passa por variavel.
   ========================================================================== */

:root {
    /* Identidade UFF */
    --uff-azul: #002d51;
    --uff-azul-escuro: #001f38;
    --uff-azul-medio: #0a4b81;
    --uff-amarelo: #ffff00;

    /* Neutros */
    --uff-branco: #ffffff;
    --uff-fundo: #f4f7fa;
    --uff-fundo-suave: #eef2f7;
    --uff-borda: #dbe3ec;
    --uff-texto: #16283a;
    --uff-texto-suave: #5d6f82;

    /* Estados */
    --uff-sucesso: #0f7a55;
    --uff-sucesso-fundo: #e6f5ef;

    /* Tipografia */
    --uff-fonte: "Oxygen", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Forma */
    --uff-raio: 14px;
    --uff-raio-sm: 8px;
    --uff-raio-pill: 999px;

    /* Elevacao */
    --uff-sombra: 0 1px 2px rgba(0, 45, 81, .06), 0 4px 16px rgba(0, 45, 81, .07);
    --uff-sombra-hover: 0 4px 10px rgba(0, 45, 81, .10), 0 14px 32px rgba(0, 45, 81, .14);

    /* Movimento */
    --uff-transicao: 180ms cubic-bezier(.2, .7, .3, 1);

    /* Ritmo */
    --uff-gap: 24px;
}

/* Base compartilhada -------------------------------------------------------- */

.uff-vitrine-container,
.uff-patente-individual-container {
    font-family: var(--uff-fonte);
    color: var(--uff-texto);
    box-sizing: border-box;
}

.uff-vitrine-container *,
.uff-vitrine-container *::before,
.uff-vitrine-container *::after,
.uff-patente-individual-container *,
.uff-patente-individual-container *::before,
.uff-patente-individual-container *::after {
    box-sizing: inherit;
}

/* Foco visivel e consistente em tudo que e interativo */
.uff-vitrine-container :is(a, button, input, select, summary):focus-visible,
.uff-patente-individual-container :is(a, button, input, select, summary):focus-visible {
    outline: 3px solid var(--uff-azul-medio);
    outline-offset: 2px;
    border-radius: var(--uff-raio-sm);
}

@media (prefers-reduced-motion: reduce) {
    .uff-vitrine-container *,
    .uff-patente-individual-container * {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}

/* ==========================================================================
   1. VITRINE - layout geral
   ========================================================================== */

.uff-vitrine-container {
    display: block;
}

/* ==========================================================================
   2. VITRINE - barra de filtros (topo, em linha)

   Ficava numa coluna lateral fixa de 280px, o que espremia o grid. Em linha
   no topo, o grid usa a largura toda e cabe mais um card por fileira.
   ========================================================================== */

.uff-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: var(--uff-gap);
    padding: 18px 20px;
    background: var(--uff-branco);
    border: 1px solid var(--uff-borda);
    border-top: 3px solid var(--uff-amarelo);
    border-radius: var(--uff-raio);
    box-shadow: var(--uff-sombra);
}

.uff-filtros__campo {
    display: flex;
    flex: 1 1 200px;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

/* A busca merece mais espaço que os selects. */
.uff-filtros__campo--busca {
    flex: 2 1 260px;
}

.uff-filtros__rotulo {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--uff-azul);
}

.uff-filtros__vazio {
    margin: 0;
    padding: 11px 0;
    font-size: .88rem;
    color: var(--uff-texto-suave);
}

.uff-filtros__acoes {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

/* Blindagem da barra -------------------------------------------------------
   Mesma questao de especificidade dos botoes. Dois sintomas concretos que
   isto corrige:

   1. O tema desenhava sua propria borda escura no input de busca, deixando a
      primeira caixa visualmente diferente das outras duas.
   2. O rotulo de "Tags" e um <span> e os outros dois sao <label>. Como o tema
      da margem a label, as tres colunas ficavam com alturas diferentes e,
      com o alinhamento pela base, os rotulos subiam e desciam.

   Declarar margem, altura e borda aqui resolve os dois de uma vez.
   -------------------------------------------------------------------------- */

.uff-vitrine-container :is(label, span).uff-filtros__rotulo {
    display: block;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--uff-azul);
}

/* Alvo real observado no site: o reset.css do tema traz
   `input[type="search"], select, textarea { border: 1px solid #666 }`, que e
   0-1-1 e ganhava da classe sozinha (0-1-0). Container + bloco + elemento da
   0-3-1, com folga tambem para regras de plugin de formulario. */
.uff-vitrine-container .uff-filtros input.uff-campo-busca,
.uff-vitrine-container .uff-filtros select.uff-select-area,
.uff-vitrine-container .uff-filtros summary.uff-dropdown__gatilho {
    box-sizing: border-box;
    height: 42px;
    margin: 0;
    padding: 10px 12px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--uff-texto);
    background-color: var(--uff-branco);
    border: 1px solid var(--uff-borda);
    border-radius: var(--uff-raio-sm);
    box-shadow: none;
    text-transform: none;
}

/* O botao tambem precisa dos mesmos 42px para fechar a linha. */
.uff-vitrine-container .uff-filtros__acoes :is(a, button).uff-botao {
    height: 42px;
    padding: 0 18px;
}

/* ==========================================================================
   2b. VITRINE - dropdown de tags

   Um <select> comum só permitiria uma tag por vez. O <details> nativo abre
   como um select, mas guarda checkboxes dentro, preservando a seleção
   múltipla — e sem JavaScript nenhum.
   ========================================================================== */

.uff-dropdown {
    position: relative;
}

.uff-dropdown__gatilho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* Explicito porque o <summary> nao herda o box-sizing do reset em todos
       os navegadores: sem isto o min-height soma padding e borda e o gatilho
       fica 22px mais alto que a busca e o select ao lado. */
    box-sizing: border-box;
    min-height: 42px;
    padding: 10px 12px;
    font-size: .95rem;
    color: var(--uff-texto);
    background: var(--uff-branco);
    border: 1px solid var(--uff-borda);
    border-radius: var(--uff-raio-sm);
    cursor: pointer;
    list-style: none;
    transition: border-color var(--uff-transicao), box-shadow var(--uff-transicao);
}

/* Esconde o triangulo padrao do <summary> nos dois motores. */
.uff-dropdown__gatilho::-webkit-details-marker {
    display: none;
}

.uff-dropdown__gatilho::marker {
    content: "";
}

.uff-dropdown__gatilho:hover {
    border-color: var(--uff-azul-medio);
}

.uff-dropdown[open] .uff-dropdown__gatilho {
    border-color: var(--uff-azul);
    box-shadow: 0 0 0 3px rgba(10, 75, 129, .15);
}

.uff-dropdown__texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uff-dropdown__seta {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border-right: 2px solid var(--uff-azul);
    border-bottom: 2px solid var(--uff-azul);
    transform: rotate(45deg);
    transition: transform var(--uff-transicao);
}

.uff-dropdown[open] .uff-dropdown__seta {
    margin-top: 2px;
    transform: rotate(-135deg);
}

/* Painel flutuante: abre por cima do grid em vez de empurrar a barra. */
.uff-dropdown__painel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    background: var(--uff-branco);
    border: 1px solid var(--uff-borda);
    border-radius: var(--uff-raio-sm);
    box-shadow: var(--uff-sombra-hover);
    scrollbar-width: thin;
}

.uff-dropdown__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    font-size: .9rem;
    line-height: 1.3;
    color: var(--uff-texto);
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--uff-transicao);
}

.uff-dropdown__item:hover {
    background: var(--uff-fundo-suave);
}

.uff-dropdown__item input {
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--uff-azul);
}

.uff-campo-busca,
.uff-select-area {
    width: 100%;
    max-width: 100%;
    /* Altura fixa nos tres controles da barra de filtros: o <select> tem
       altura intrinseca maior que a do <input>, e com min-height sobrava
       uma diferenca de 2px que desalinhava os rotulos acima. */
    height: 42px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--uff-texto);
    background: var(--uff-branco);
    border: 1px solid var(--uff-borda);
    border-radius: var(--uff-raio-sm);
    transition: border-color var(--uff-transicao), box-shadow var(--uff-transicao);
}

.uff-campo-busca::placeholder {
    color: var(--uff-texto-suave);
}

.uff-campo-busca:hover,
.uff-select-area:hover {
    border-color: var(--uff-azul-medio);
}

.uff-campo-busca:focus,
.uff-select-area:focus {
    border-color: var(--uff-azul);
    box-shadow: 0 0 0 3px rgba(10, 75, 129, .15);
    outline: none;
}

/* Botoes -------------------------------------------------------------------
   IMPORTANTE - por que os seletores sao "feios" aqui:

   Uma classe sozinha (.uff-botao--primario) tem especificidade 0-1-0 e perde
   para regras comuns de tema e do Elementor, como `.entry-content a` ou
   `.elementor-widget-container button` (0-2-0). Era isso que deixava o
   "Ver detalhes" com texto azul sobre fundo azul e punha um degrade e cantos
   arredondados proprios no "Aplicar filtros".

   Qualificando com o container + o elemento (a/button) chegamos a 0-2-1, que
   ganha dessas regras. O :is(a, button) conta como seletor de elemento, entao
   nao infla a especificidade alem do necessario. Nada aqui usa !important.
   -------------------------------------------------------------------------- */

.uff-vitrine-container :is(a, button).uff-botao,
.uff-patente-individual-container :is(a, button).uff-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 11px 18px;
    font-family: inherit;
    font-size: .95rem;
    /* 500 em vez de 700: em botao preenchido o negrito pesa demais. */
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    text-shadow: none;

    /* Zera gradiente/imagem que o tema possa ter imposto no fundo */
    background-image: none;

    border: 1px solid transparent;
    border-radius: var(--uff-raio-sm);
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--uff-transicao), color var(--uff-transicao),
                border-color var(--uff-transicao), transform var(--uff-transicao),
                box-shadow var(--uff-transicao);
}

.uff-vitrine-container :is(a, button).uff-botao:active,
.uff-patente-individual-container :is(a, button).uff-botao:active {
    transform: translateY(1px);
}

/* Primario: azul com texto amarelo; inverte no hover. */
.uff-vitrine-container :is(a, button).uff-botao--primario,
.uff-patente-individual-container :is(a, button).uff-botao--primario {
    background-color: var(--uff-azul);
    color: var(--uff-amarelo);
    border-color: var(--uff-azul);
}

.uff-vitrine-container :is(a, button).uff-botao--primario:hover,
.uff-vitrine-container :is(a, button).uff-botao--primario:focus-visible,
.uff-patente-individual-container :is(a, button).uff-botao--primario:hover,
.uff-patente-individual-container :is(a, button).uff-botao--primario:focus-visible {
    background-color: var(--uff-amarelo);
    color: var(--uff-azul);
    border-color: var(--uff-azul);
    box-shadow: var(--uff-sombra);
}

.uff-vitrine-container :is(a, button).uff-botao--secundario,
.uff-patente-individual-container :is(a, button).uff-botao--secundario {
    background-color: transparent;
    color: var(--uff-azul);
    border-color: var(--uff-borda);
}

.uff-vitrine-container :is(a, button).uff-botao--secundario:hover,
.uff-vitrine-container :is(a, button).uff-botao--secundario:focus-visible,
.uff-patente-individual-container :is(a, button).uff-botao--secundario:hover,
.uff-patente-individual-container :is(a, button).uff-botao--secundario:focus-visible {
    background-color: var(--uff-fundo);
    border-color: var(--uff-azul);
    color: var(--uff-azul);
}

/* ==========================================================================
   3. VITRINE - barra de resultados
   ========================================================================== */

.uff-vitrine-conteudo {
    min-width: 0;
}

.uff-vitrine-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.uff-vitrine-contador {
    margin: 0;
    font-size: .95rem;
    color: var(--uff-texto-suave);
}

.uff-vitrine-contador strong {
    color: var(--uff-azul);
    font-weight: 700;
}

.uff-vitrine-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.uff-chip-filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--uff-azul);
    background: var(--uff-fundo-suave);
    border: 1px solid var(--uff-borda);
    border-radius: var(--uff-raio-pill);
}

.uff-chip-limpar {
    color: var(--uff-azul);
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.uff-chip-limpar:hover {
    background: var(--uff-fundo-suave);
    border-color: var(--uff-borda);
    text-decoration: none;
}

/* ==========================================================================
   4. VITRINE - grid e cards
   ========================================================================== */

.uff-grid-patentes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.uff-card-patente {
    display: flex;
    flex-direction: column;
    background: var(--uff-branco);
    border: 1px solid var(--uff-borda);
    border-radius: var(--uff-raio);
    box-shadow: var(--uff-sombra);
    overflow: hidden;
    transition: transform var(--uff-transicao), box-shadow var(--uff-transicao),
                border-color var(--uff-transicao);
}

.uff-card-patente:hover,
.uff-card-patente:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--uff-sombra-hover);
    border-color: var(--uff-azul-medio);
}

/* Area de midia com proporcao fixa: cards com e sem foto ficam alinhados */
.uff-card-patente__midia {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--uff-fundo-suave);
    overflow: hidden;
}

.uff-card-patente__imagem {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(.2, .7, .3, 1);
}

.uff-card-patente:hover .uff-card-patente__imagem {
    transform: scale(1.04);
}

/* Placeholder para patentes sem imagem cadastrada */
.uff-card-patente__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--uff-azul) 0%, var(--uff-azul-medio) 100%);
}

.uff-card-patente__placeholder svg {
    width: 44px;
    height: 44px;
    opacity: .55;
    color: var(--uff-amarelo);
}

.uff-card-patente__corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
}

.uff-card-patente__titulo {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--uff-azul);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.uff-card-patente__metas {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.uff-card-patente__meta {
    display: flex;
    gap: 6px;
    margin: 0;
    font-size: .84rem;
    line-height: 1.4;
    color: var(--uff-texto-suave);
}

.uff-card-patente__meta-rotulo {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--uff-texto);
}

.uff-card-patente__meta-valor {
    min-width: 0;
    overflow-wrap: anywhere;
}

.uff-card-patente__rodape {
    margin-top: auto;
    padding: 0 18px 18px;
}

/* Qualificado para vencer o `width: auto` da blindagem de botoes (0-2-1),
   que existe para neutralizar temas que forcam botao de largura total. */
.uff-vitrine-container a.uff-card-patente__botao {
    width: 100%;
}

/* Selo de situacao --------------------------------------------------------- */

.uff-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 11px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.5;
    border-radius: var(--uff-raio-pill);
    background: var(--uff-fundo-suave);
    color: var(--uff-azul);
    border: 1px solid var(--uff-borda);
}

.uff-selo--concedido {
    background: var(--uff-sucesso-fundo);
    color: var(--uff-sucesso);
    border-color: rgba(15, 122, 85, .25);
}

.uff-selo--depositado {
    background: rgba(10, 75, 129, .08);
    color: var(--uff-azul);
    border-color: rgba(10, 75, 129, .22);
}

/* Estado vazio ------------------------------------------------------------- */

.uff-vitrine-vazio {
    grid-column: 1 / -1;
    padding: 56px 24px;
    text-align: center;
    background: var(--uff-branco);
    border: 1px dashed var(--uff-borda);
    border-radius: var(--uff-raio);
}

.uff-vitrine-vazio__titulo {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--uff-azul);
}

.uff-vitrine-sem-resultados {
    margin: 0 0 18px;
    color: var(--uff-texto-suave);
}

/* Paginacao ---------------------------------------------------------------- */

.uff-paginacao {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    padding-top: 26px;
    border-top: 1px solid var(--uff-borda);
}

.uff-paginacao__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.uff-paginacao__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 13px;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1;
    color: var(--uff-azul);
    text-decoration: none;
    background: var(--uff-branco);
    border: 1px solid var(--uff-borda);
    border-radius: var(--uff-raio-sm);
    transition: background var(--uff-transicao), border-color var(--uff-transicao),
                color var(--uff-transicao);
}

a.uff-paginacao__item:hover,
a.uff-paginacao__item:focus-visible {
    background: var(--uff-azul);
    border-color: var(--uff-azul);
    color: var(--uff-branco);
}

.uff-paginacao__item--atual {
    background: var(--uff-azul);
    border-color: var(--uff-azul);
    color: var(--uff-branco);
    cursor: default;
}

/* O amarelo marca a pagina atual sem depender so da cor de fundo */
.uff-paginacao__item--atual::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--uff-amarelo);
}

.uff-paginacao__item--nav {
    background: var(--uff-fundo);
}

.uff-paginacao__reticencias {
    display: inline-flex;
    align-items: flex-end;
    height: 40px;
    padding: 0 2px;
    color: var(--uff-texto-suave);
}

/* Fallback: alguns temas nao definem a classe utilitaria do core. */
.uff-vitrine-container .screen-reader-text,
.uff-patente-individual-container .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsivo --------------------------------------------------------------- */

@media (max-width: 760px) {
    /* Em tela estreita cada filtro ocupa a linha toda e os botoes dividem
       a ultima, em vez de espremer tudo lado a lado. */
    .uff-filtros {
        padding: 16px;
    }

    .uff-filtros__campo,
    .uff-filtros__campo--busca {
        flex: 1 1 100%;
    }

    .uff-filtros__acoes {
        flex: 1 1 100%;
    }

    .uff-filtros__acoes .uff-botao {
        flex: 1 1 auto;
    }

    .uff-dropdown__painel {
        max-height: 210px;
    }
}

@media (max-width: 480px) {
    .uff-grid-patentes {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   5. PATENTE INDIVIDUAL
   ========================================================================== */

.uff-patente-individual-container {
    max-width: 1080px;
    margin: 0 auto;
}

.uff-patente-voltar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 22px;
    padding: 8px 14px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--uff-azul);
    text-decoration: none;
    background: var(--uff-fundo);
    border: 1px solid var(--uff-borda);
    /* Mesmo raio dos demais botoes, em vez de pilula. */
    border-radius: var(--uff-raio-sm);
    transition: background var(--uff-transicao), border-color var(--uff-transicao),
                gap var(--uff-transicao);
}

.uff-patente-voltar:hover {
    background: var(--uff-azul);
    border-color: var(--uff-azul);
    color: var(--uff-branco);
    gap: 11px;
}

/* Cabecalho ---------------------------------------------------------------- */

/* Sem bloco de fundo: o titulo se sustenta pelo tamanho e pela cor.
   Sem barra amarela tambem — o titulo de secao logo abaixo ja usa esse
   recurso, e duas barras a 40px uma da outra pareciam engano, nao sistema.
   Fica so uma linha fina delimitando a area de cabecalho. */
.uff-patente-hero {
    padding: 0 0 20px;
    margin-bottom: 32px;
    background: none;
    border-bottom: 1px solid var(--uff-borda);
}

.uff-patente-hero .uff-patente-titulo,
.uff-patente-hero h1,
.uff-patente-hero h2 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--uff-azul);
    text-wrap: balance;
}

.uff-patente-hero .uff-patente-titulo::after,
.uff-patente-hero h1::after,
.uff-patente-hero h2::after {
    content: none;
}

.uff-patente-hero .uff-patente-badges {
    margin-top: 16px;
}

.uff-patente-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.uff-patente-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--uff-azul);
    background: var(--uff-fundo-suave);
    border: 1px solid var(--uff-borda);
    border-radius: var(--uff-raio-pill);
}

.uff-patente-badge--destaque {
    color: var(--uff-azul);
    background: var(--uff-amarelo);
    border-color: var(--uff-amarelo);
}

/* Grade principal ---------------------------------------------------------- */

.uff-patente-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}

.uff-patente-principal,
.uff-patente-lateral {
    min-width: 0;
}

/* Secoes de conteudo ------------------------------------------------------- */

.uff-patente-secao + .uff-patente-secao {
    margin-top: 26px;
}

/* Patente sem descricao cadastrada nao deve deixar um titulo "Sobre a
   patente" orfao no meio da pagina: se o marcador nao produziu conteudo,
   a secao inteira some. */
.uff-patente-secao:has(> .uff-patente-corpo:empty) {
    display: none;
}

/* O :where() zera a especificidade dos seletores de elemento, para que este
   estilo de legado (templates antigos que escrevem h2/h3/p soltos) nunca
   atropele os componentes nomeados abaixo. */
.uff-patente-secao__titulo,
.uff-patente-individual-container :where(h2, h3) {
    margin: 0 0 12px;
    padding-bottom: 10px;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--uff-azul);
    border-bottom: 2px solid var(--uff-fundo-suave);
}

.uff-patente-secao__titulo::after,
.uff-patente-individual-container :where(h2, h3)::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin-bottom: -12px;
    background: var(--uff-amarelo);
}

.uff-patente-corpo,
.uff-patente-individual-container :where(p) {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--uff-texto);
}

.uff-patente-corpo > :first-child {
    margin-top: 0;
}

.uff-patente-corpo > :last-child {
    margin-bottom: 0;
}

/* Imagem e video ----------------------------------------------------------- */

/* width:auto + max-width:100% impede que uma imagem pequena (a imagem padrao
   da importacao, por exemplo, que tem 400px) seja esticada para a largura da
   coluna e fique borrada. Imagem grande continua preenchendo; imagem pequena
   fica no tamanho real, centralizada. */
.uff-patente-imagem {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto 26px;
    border-radius: var(--uff-raio);
    border: 1px solid var(--uff-borda);
    box-shadow: var(--uff-sombra);
}

.uff-patente-video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 26px 0;
    overflow: hidden;
    border-radius: var(--uff-raio);
    box-shadow: var(--uff-sombra);
    background: var(--uff-azul-escuro);
}

.uff-patente-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Ficha tecnica ------------------------------------------------------------ */

.uff-patente-ficha {
    background: var(--uff-branco);
    border: 1px solid var(--uff-borda);
    border-radius: var(--uff-raio);
    box-shadow: var(--uff-sombra);
    overflow: hidden;
}

.uff-patente-ficha__titulo {
    margin: 0;
    padding: 14px 20px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--uff-branco);
    background: var(--uff-azul);
    border: 0;
    border-bottom: 3px solid var(--uff-amarelo);
}

.uff-patente-ficha__titulo::after {
    content: none;
}

.uff-patente-ficha__lista {
    margin: 0;
    padding: 6px 20px 18px;
}

.uff-patente-ficha__rotulo {
    margin: 14px 0 0;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--uff-texto-suave);
}

.uff-patente-ficha__valor {
    margin: 3px 0 0;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--uff-texto);
    overflow-wrap: anywhere;
}

.uff-patente-ficha__valor .uff-patente-lista,
.uff-patente-ficha__valor .uff-patente-anexos {
    margin: 0;
}

/* Tags --------------------------------------------------------------------- */

.uff-patente-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 4px 0;
}

.uff-patente-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--uff-azul);
    background: var(--uff-fundo-suave);
    border: 1px solid var(--uff-borda);
    border-radius: var(--uff-raio-pill);
}

/* Listas (inventores, cotitularidade) -------------------------------------- */

.uff-patente-lista {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.uff-patente-lista__item {
    position: relative;
    padding: 5px 0 5px 18px;
    font-size: .95rem;
    line-height: 1.5;
}

.uff-patente-lista__item::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--uff-amarelo);
    box-shadow: 0 0 0 1px var(--uff-azul);
}

.uff-patente-lista__item + .uff-patente-lista__item {
    border-top: 1px solid var(--uff-fundo-suave);
}

.uff-patente-lista-vazia {
    margin: 4px 0 0;
    font-size: .9rem;
    font-style: italic;
    color: var(--uff-texto-suave);
}

/* Anexos ------------------------------------------------------------------- */

.uff-patente-anexos {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.uff-patente-anexos__item + .uff-patente-anexos__item {
    margin-top: 6px;
}

.uff-patente-anexos__link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--uff-azul);
    text-decoration: none;
    background: var(--uff-fundo);
    border: 1px solid var(--uff-borda);
    border-radius: var(--uff-raio-sm);
    transition: background var(--uff-transicao), border-color var(--uff-transicao),
                transform var(--uff-transicao);
}

.uff-patente-anexos__link::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--uff-amarelo);
    box-shadow: 0 0 0 1px var(--uff-azul);
}

.uff-patente-anexos__link:hover {
    background: var(--uff-branco);
    border-color: var(--uff-azul);
    transform: translateX(3px);
}

/* Responsivo --------------------------------------------------------------- */

@media (max-width: 900px) {
    .uff-patente-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .uff-patente-lateral {
        order: -1;
    }

    .uff-patente-hero {
        padding: 22px 20px;
    }
}

/* ==========================================================================
   6. BLINDAGEM DOS TITULOS

   Temas costumam definir tamanho de h1..h4 com especificidade maior que uma
   classe sozinha (ex.: `.elementor-widget-container h2`, 0-1-1). Era isso que
   deixava o "Ficha tecnica" com 52px em vez de 12.8px: o titulo do hero
   escapava porque ja tinha duas classes no seletor, o da ficha nao.

   Aqui todos os titulos do plugin passam a ter no minimo duas classes, entao
   o desenho fica igual em qualquer tema. Sao os mesmos valores ja definidos
   nas secoes acima - isto so reafirma, nao redesenha.
   ========================================================================== */

.uff-patente-individual-container .uff-patente-ficha__titulo {
    margin: 0;
    padding: 14px 20px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--uff-branco);
    background: var(--uff-azul);
    border: 0;
    border-bottom: 3px solid var(--uff-amarelo);
}

.uff-patente-individual-container .uff-patente-ficha__titulo::after {
    content: none;
}

.uff-patente-individual-container .uff-patente-secao__titulo {
    margin: 0 0 12px;
    padding: 0 0 10px;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    color: var(--uff-azul);
    background: none;
    border: 0;
    border-bottom: 2px solid var(--uff-fundo-suave);
}

.uff-patente-individual-container .uff-patente-hero .uff-patente-titulo {
    margin: 0;
    padding: 0;
    font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--uff-azul);
    background: none;
    border: 0;
}

.uff-vitrine-container .uff-card-patente__titulo {
    margin: 0;
    padding: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: normal;
    color: var(--uff-azul);
    background: none;
    border: 0;
}

.uff-vitrine-container .uff-vitrine-vazio__titulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--uff-azul);
    background: none;
    border: 0;
}

/* ==========================================================================
   7. BLINDAGEM CONTRA A COR DE LINK DO TEMA

   Mesmo motivo explicado no bloco de botoes: regras como `.entry-content a`
   (0-2-0) ganham de uma classe sozinha (0-1-0) e repintavam estes links com
   a cor de link do tema. Container + elemento chega a 0-2-1 e resolve.
   Estes seletores nao mudam o desenho: apenas reafirmam o que ja esta
   definido acima, para que o tema nao sobrescreva.
   ========================================================================== */

.uff-patente-individual-container a.uff-patente-voltar {
    color: var(--uff-azul);
    background-color: var(--uff-fundo);
    background-image: none;
    text-decoration: none;
}

.uff-patente-individual-container a.uff-patente-voltar:hover,
.uff-patente-individual-container a.uff-patente-voltar:focus-visible {
    color: var(--uff-branco);
    background-color: var(--uff-azul);
}

.uff-patente-individual-container a.uff-patente-anexos__link {
    color: var(--uff-azul);
    background-color: var(--uff-fundo);
    background-image: none;
    text-decoration: none;
}

.uff-patente-individual-container a.uff-patente-anexos__link:hover,
.uff-patente-individual-container a.uff-patente-anexos__link:focus-visible {
    color: var(--uff-azul);
    background-color: var(--uff-branco);
}

.uff-vitrine-container a.uff-paginacao__item {
    color: var(--uff-azul);
    background-color: var(--uff-branco);
    background-image: none;
    text-decoration: none;
}

.uff-vitrine-container a.uff-paginacao__item--nav {
    background-color: var(--uff-fundo);
}

.uff-vitrine-container a.uff-paginacao__item:hover,
.uff-vitrine-container a.uff-paginacao__item:focus-visible {
    color: var(--uff-branco);
    background-color: var(--uff-azul);
    border-color: var(--uff-azul);
}

.uff-vitrine-container a.uff-chip-limpar {
    color: var(--uff-azul);
    background-color: transparent;
    background-image: none;
}

.uff-vitrine-container a.uff-chip-limpar:hover,
.uff-vitrine-container a.uff-chip-limpar:focus-visible {
    color: var(--uff-azul);
    background-color: var(--uff-fundo-suave);
    text-decoration: none;
}