/* ==============================
   Crystal Glass Premium Section
============================== */

.cg-hero{

    --bg:#08090c;
    --glass:rgba(255,255,255,.06);
    --border:rgba(255,255,255,.12);
    --text:#ffffff;
    --muted:#b9c0cb;
    --accent:#ffdd00;

    background:
    radial-gradient(circle at top right,rgba(120,150,255,.16),transparent 35%),
    radial-gradient(circle at bottom left,rgba(90,220,255,.12),transparent 30%),
    var(--bg);

    padding:80px 20px;
    display:flex;
    justify-content:center;
    overflow:hidden;
}

.cg-card{

    width:min(1100px,100%);
    border-radius:30px;

    padding:30px;

    background:var(--glass);

    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);

    border:1px solid var(--border);

    box-shadow:
    0 20px 50px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.cg-content{

    display:flex;
    flex-direction:column;
    gap:35px;
    align-items:center;
}

.cg-text{

    width:100%;
}

.cg-badge{

    display:inline-block;

    padding:8px 15px;

    border-radius:999px;

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

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-weight:600;
}

.cg-title{

    margin:22px 0 18px;

    color:var(--text);

    font-size:clamp(2.4rem,8vw,4.8rem);

    line-height:1.08;

    font-weight:800;
}

.cg-typing{

    color:var(--accent);

    text-shadow:0 0 18px rgba(116,216,255,.35);
}

#cg-word{

    display:inline-block;

    min-width:12ch;

    white-space:nowrap;

    overflow:hidden;
}

.cg-description{

    color:var(--muted);

    font-size:1rem;

    line-height:1.8;

    max-width:600px;
}

/* Imagen */

.cg-image{

    display:flex;
    justify-content:center;
    align-items:center;
}

.cg-image img{

    width:290px;
    max-width:100%;

    border-radius:20px;

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

    box-shadow:
    0 18px 45px rgba(0,0,0,.45);

    transition:.4s;
}

.cg-image img:hover{

    transform:translateY(-6px) scale(1.03);
}

/* Cursor */

@keyframes cgCursor{

    50%{

        border-color:transparent;

    }

}

/* Tablet */

@media(min-width:768px){

.cg-content{

    flex-direction:row;

    justify-content:space-between;

    align-items:center;
}

.cg-text{

    flex:1;
}

.cg-image{

    width:280px;
    justify-content:flex-end;
}

.cg-image img{

    width:260px;
}

}

/* Desktop */

@media(min-width:1100px){

.cg-card{

    padding:55px;
}

.cg-image img{

    width:300px;
}

}