/* 35-sistemas.css — cards de sistema com arte própria + logotipo oficial por cima (rotina_p_sistema_visual,
 * inc/premium/componentes.php): catálogo da home e "Explore outros mundos" (.card-sistema), widget de sistemas da lateral
 * (.system-card-immersive). Sem @layer: vence o legado .sistema-img img / .system-bg img (f1-01), que esticaria o logotipo
 * como capa. O nome do sistema continua no HTML (h3/.system-name), só para leitor de tela: o logotipo já identifica. */

.system-bg.sis-visual {
    position: relative; /* .sistema-img já é absoluto (f1-01); o fundo do widget não era */
}
.sis-visual {
    overflow: hidden;
}
.sis-visual::after { /* véu: escurece o meio para o logotipo aparecer sobre qualquer arte */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center, var(--sis-veu-centro) 0%, var(--sis-veu-borda) 75%);
    pointer-events: none;
}
.sis-visual .sis-arte {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sis-logo-caixa {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    pointer-events: none;
}
.sis-visual .sis-logo {
    width: auto;
    height: auto;
    max-width: 82%;
    max-height: 62%;
    object-fit: contain;
    transform: none; /* o zoom do hover é só da arte */
    filter: drop-shadow(0 2px 6px var(--sis-sombra-logo));
}
.sis-logo-caixa--placa .sis-logo { /* logotipos escuros (desenhados para fundo claro) */
    box-sizing: border-box;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--sis-placa);
    filter: none;
}

/* o logotipo já diz o nome: o texto fica só para leitor de tela e buscadores */
.card-sistema.tem-logo h3,
.system-card-immersive.tem-logo .system-overlay {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}