/* =========================================================
   CARDS GENÉRICOS
   Base dos cards do site (produto, categoria etc.). As regras da
   antiga seção "Explore o universo Abyss" saíram junto com ela.
========================================================= */

/* =========================================================
   CARD
========================================================= */

.card{

    position:relative;

    overflow:hidden;

    padding:26px;

    border-radius:22px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.015)
        );

    border:1px solid rgba(69,172,171,.14);

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.card:hover{

    transform:translateY(-6px);

    border-color:rgba(69,172,171,.35);

    box-shadow:

        0 18px 40px rgba(0,0,0,.30),

        0 0 20px rgba(69,172,171,.12);

}


/* =========================================================
   EFEITO DE LUZ
========================================================= */

.card::before{

    content:"";

    position:absolute;

    inset:-40%;

    background:

        radial-gradient(

            circle,

            rgba(69,172,171,.12),

            transparent 70%

        );

    opacity:0;

    transition:.5s ease;

}

.card:hover::before{

    opacity:1;

}


/* =========================================================
   ÍCONE
========================================================= */

.card-icon{

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    border-radius:18px;

    background:

        linear-gradient(

            135deg,

            var(--cyan),

            var(--blue)

        );

    color:#fff;

    font-weight:700;

    letter-spacing:2px;

    box-shadow:

        0 10px 25px rgba(69,172,171,.25);

}


/* =========================================================
   TÍTULO
========================================================= */

.card h3{

    margin-bottom:12px;

    font-size:1.25rem;

}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.card p{

    color:var(--muted);

    line-height:1.7;

}


/* =========================================================
   BOTÃO
========================================================= */

.category-button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:24px;

    padding:12px 18px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    border:1px solid rgba(69,172,171,.25);

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

    transition:.3s ease;

}

.category-button:hover{

    background:rgba(69,172,171,.12);

    border-color:rgba(69,172,171,.40);

    transform:translateX(6px);

}


/* =========================================================
   BADGE
========================================================= */

.category-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-bottom:14px;

    padding:6px 12px;

    border-radius:999px;

    font-size:.78rem;

    color:var(--cyan);

    border:1px solid rgba(69,172,171,.25);

    background:rgba(69,172,171,.08);

}