/* Identidad visual destacada de JP sistema */
.hero-brand-art {
    min-height: 485px;
}

.brand-showcase {
    width: min(100%, 420px);
    min-height: 330px;
    padding: 18px 28px 22px;
    border: 1px solid rgba(31, 66, 98, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 28px 55px rgba(28, 51, 98, .19);
    transform: rotate(-2deg);
}

.brand-showcase-top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 9px;
    border-bottom: 1px solid #e7ebf2;
    color: #68758a;
    font: 500 .62rem 'DM Mono', monospace;
    letter-spacing: .12em;
}

.brand-showcase-top i {
    color: #d69e45;
    font-style: normal;
}

.brand-showcase img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: contain;
}

.brand-showcase p {
    margin: 13px 0 0;
    color: #4d627a;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
}

.code-preview {
    position: absolute;
    z-index: 2;
    bottom: -65px;
    left: -12px;
    width: 255px;
    padding: 13px 16px 16px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 11px;
    background: #18263e;
    color: #dce6fb;
    box-shadow: 0 20px 35px rgba(20, 40, 76, .28);
    font: 500 .62rem/1.75 'DM Mono', monospace;
    transform: rotate(2deg);
}

.code-preview-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.code-preview-bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f47e70;
}

.code-preview-bar i:nth-child(2) { background: #f4cb68; }
.code-preview-bar i:nth-child(3) { background: #79c982; }

.code-preview-bar span {
    margin-left: 5px;
    color: #8fa0bd;
    font-size: .55rem;
}

.code-preview p { margin: 0; }
.code-preview b { color: #c799ff; font-weight: 500; }
.code-preview strong { color: #8ebeff; font-weight: 500; }
.code-preview em { color: #f1ca79; font-style: normal; }
.code-preview mark { color: #90e3c7; background: transparent; }
.code-indent { padding-left: 17px; }
.code-cursor { color: #c8f25b; animation: jp-blink 1s step-end infinite; }

@keyframes jp-blink {
    50% { opacity: 0; }
}

@media (max-width: 720px) {
    .hero-brand-art {
        min-height: 390px;
    }

    .brand-showcase {
        min-height: 270px;
        padding: 15px 20px;
    }

    .brand-showcase img {
        height: 175px;
    }

    .code-preview {
        bottom: -42px;
        left: -2px;
        width: 215px;
        font-size: .53rem;
    }
}