.secao-portfolio-universal {
    display: flex; 
    flex-direction: column; 
    align-items: center;
    width: 100%; 
    min-height: 80vh; 
    background-color: #f0f0f0; 
    padding: 40px 0;
}

/* Filtros */
.filtros-container { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
    justify-content: center; 
    margin-bottom: 30px; 
}

.btn-filtro { 
    background: #fff; 
    border: 2px solid #333; 
    padding: 8px 18px; 
    cursor: pointer; 
    border-radius: 20px; 
    font-weight: bold; 
    transition: 0.3s;
}

.btn-filtro.active, .btn-filtro:hover { 
    background: #333; 
    color: #fff; 
}

/* Carrossel */
.container-carrossel-universal { 
    width: 95%; 
    max-width: 1200px; 
    overflow: hidden; 
}   

.faixa-cartoes-universal { 
    display: flex; 
    /* 0.006s é excelente, mas "linear" ou "ease" economiza ainda mais micro-processamento */
    transition: transform 0.006s linear; 
    padding: 10px 0; 
    will-change: transform; 
    transform: translateZ(0);
    user-select: none;
    -webkit-user-drag: none;
}

.cartao-universal { 
    margin: 0 10px; 
    flex-shrink: 0; 
    perspective: 1000px; 
    width: 450px; 
    height: 320px;
    backface-visibility: hidden; 
    /* ... suas regras atuais ... */
    content-visibility: auto; /* O segredo sênior para grandes listas */
    contain-intrinsic-size: 450px 320px; /* Ajuda o navegador a calcular o espaço */
    /* Melhora extra: isola o card do resto do layout */
    contain: layout style;
}

.caixa-universal { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    transform-style: preserve-3d; 
}

.face-universal { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden;
}

.superficie-universal { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center; 
    display: block;
    
    /* MODIFICAÇÃO AQUI: */
    opacity: 0; /* Começa invisível para o fade-in */
    /* Mantemos o 1s original do seu giro, mas incluímos a opacity */
    transition: transform 1s, opacity 1s ease-in-out; 
}

/* GATILHO PARA O FADE-IN */
.superficie-universal.carregada {
    opacity: 1;
}

/* Efeito de Giro (EXATAMENTE COMO O SEU) */
.face-verso-u .superficie-universal { 
    transform-origin: bottom; 
    transform: rotateX(90deg) translateY(50%); 
}
.caixa-universal:hover .face-frente-u .superficie-universal { transform: rotateX(90deg) translateY(-50%); }
.caixa-universal:hover .face-verso-u .superficie-universal { transform: rotateX(0deg) translateY(0%); }

.botao-nav-universal { 
    background: #333; 
    color: white; 
    border: none; 
    padding: 15px 25px; 
    cursor: pointer; 
    border-radius: 5px;
}

.controles-carrossel-universal {
    display: flex;
    justify-content: center; 
    gap: 60px; 
    margin-top: 20px; 
}

@media (max-width: 768px) {
    .cartao-universal { width: 85vw; height: 60vw; }
}