/* =====================================
EJEMPLO REAL
===================================== */

#ejemplo-real{

    position:relative;

    overflow:hidden;
}

#ejemplo-real::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at center,
        rgba(212,175,55,.08),
        transparent 70%
    );

    pointer-events:none;
}

.report-preview{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:30px;

    margin-top:70px;
}

.preview-card{

    position:relative;

    padding:35px;

    border-radius:30px;

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.02)
    );

    backdrop-filter:blur(25px);

    border:

    1px solid rgba(
    212,
    175,
    55,
    .15);

    overflow:hidden;

    transition:.6s;
}

.preview-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 25px 80px rgba(
    212,
    175,
    55,
    .18);
}

.preview-card img{

    width:100%;

    border-radius:20px;

    margin-bottom:25px;
}

.classified-tag{

    position:absolute;

    top:20px;
    right:20px;

    padding:8px 15px;

    background:
    rgba(212,175,55,.15);

    border:
    1px solid rgba(212,175,55,.3);

    border-radius:999px;

    font-size:.7rem;

    letter-spacing:2px;
}

.preview-bar{

    margin-bottom:25px;
}

.preview-bar span{

    display:block;

    margin-bottom:8px;

    color:#ddd;
}

.preview-bar .bar{

    height:12px;

    background:#111;

    border-radius:999px;

    overflow:hidden;
}

.preview-bar .fill{

    height:100%;

    background:
    linear-gradient(
        90deg,
        #d4af37,
        #f5d88b
    );

    border-radius:999px;
}

.preview-bar .danger{

    background:
    linear-gradient(
        90deg,
        #ff6a6a,
        #ff9d9d
    );
}

.premium-highlight{

    border:
    1px solid rgba(
    212,
    175,
    55,
    .35);

    box-shadow:
    inset 0 0 40px rgba(
    212,
    175,
    55,
    .08);
}

.risk-card{

    border:
    1px solid rgba(
    255,
    120,
    120,
    .25);
}

.mini-label{

    display:inline-block;

    margin-bottom:15px;

    font-size:.75rem;

    letter-spacing:3px;

    color:#f5d88b;
}

.preview-footer{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

    margin-top:50px;
}

.preview-badge{

    padding:14px 22px;

    border-radius:999px;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(
    212,
    175,
    55,
    .15);
}